:root{ --primary: #FF4D00; --primary-hover: #E64500; --primary-light: rgba(255, 77, 0, 0.15); --accent: #FFC107; --accent-hover: #E6A600; --success: #00D68F; --warning: #FFAA00; --danger: #FF6B6B; --bg-body: #F0F2F5; --bg-card: rgba(255, 255, 255, 0.70); --bg-card-solid: #FFFFFF; --bg-input: #F5F6FA; --bg-input-focus: #FFFFFF; --text-primary: #1A1D29; --text-secondary: #4A4D64; --text-muted: #646A7A; --text-on-primary: #FFFFFF; --border-color: rgba(0, 0, 0, 0.06); --glass-border: rgba(255, 255, 255, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 32px rgba(31, 38, 135, 0.07); --shadow-lg: 0 16px 48px rgba(31, 38, 135, 0.08); --shadow-glow: 0 0 40px rgba(255, 77, 0, 0.15); --hero-glow-inner: rgba(255, 255, 255, 0.6); --glass-blur: 24px; --glass-bg: rgba(255, 255, 255, 0.40); --glass-bg-strong: rgba(255, 255, 255, 0.60); --gradient-primary:linear-gradient(135deg, #FF4D00, #FFC107); --gradient-blue: linear-gradient(135deg, #3B82F6, #2563EB); --gradient-green: linear-gradient(135deg, #10B981, #059669); --gradient-purple: linear-gradient(135deg, #8B5CF6, #6D28D9); --radius: 16px; --radius-sm: 10px; --radius-xs: 6px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } [data-theme="dark"]{ --bg-body: #0C0C0E; --bg-card: rgba(22, 22, 24, 0.65); --bg-card-solid: #131315; --bg-input: #1C1C1F; --bg-input-focus: #252527; --text-primary: #EDEEF2; --text-secondary: #B8BCCD; --text-muted: #9EA2B0; --border-color: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.08); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 50px rgba(255, 77, 0, 0.22); --hero-glow-inner: #000000; --glass-bg: rgba(28, 28, 32, 0.50); --glass-bg-strong: rgba(22, 22, 26, 0.75); } *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ -webkit-box-shadow:0 0 0 5000px var(--bg-input) inset !important; transition:background-color 5000s ease-in-out 0s !important; -webkit-text-fill-color:var(--text-primary) !important; } html, body{ scroll-behavior:smooth; overflow-x:hidden; } body{ font-family:var(--font-family); background:var(--bg-body); color:var(--text-primary); line-height:1.6; min-height:100vh; transition:var(--transition); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{ color:var(--primary); text-decoration:none; transition:var(--transition); } a:hover{ color:var(--primary-hover); } .login-wrapper{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; position:relative; overflow:hidden; background-image:url('../img/logistics_bg_clean.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; } .login-wrapper::before{ content:''; position:absolute; width:600px; height:600px; background:radial-gradient(circle, var(--primary) 0%, transparent 70%); opacity:0.12; top:-200px; right:-100px; border-radius:50%; animation:float 8s ease-in-out infinite; pointer-events:none; } .login-wrapper::after{ content:''; position:absolute; width:500px; height:500px; background:radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity:0.10; bottom:-150px; left:-100px; border-radius:50%; animation:float 10s ease-in-out infinite reverse; pointer-events:none; } @keyframes float{ 0%, 100%{transform:translate(0, 0) scale(1);} 33% {transform:translate(30px, -30px) scale(1.05);} 66% {transform:translate(-20px, 20px) scale(0.95);} } .glass-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.07); transition:var(--transition); transform:translateZ(0); will-change:transform, backdrop-filter; } .glass-card:hover{ box-shadow:0 12px 40px 0 rgba(31, 38, 135, 0.10); } .login-wrapper .glass-card{ background:var(--glass-bg-strong); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); } .login-card{ width:100%; max-width:460px; padding:3rem 2.5rem; position:relative; z-index:1; animation:slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes slideUp{ from{ opacity:0; transform:translateY(40px) scale(0.96); } to{ opacity:1; transform:translateY(0) scale(1); } } .brand-section{ text-align:center; margin-bottom:2rem; } .brand-icon{ width:64px; height:64px; background:linear-gradient(135deg, var(--primary), var(--accent)); border-radius:18px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem; box-shadow:0 8px 24px rgba(255, 77, 0, 0.35); animation:pulse-glow 3s ease-in-out infinite; } @keyframes pulse-glow{ 0%, 100%{box-shadow:0 8px 24px rgba(255, 77, 0, 0.35);} 50% {box-shadow:0 8px 36px rgba(255, 77, 0, 0.55);} } .brand-icon i{ font-size:1.75rem; color:#FFFFFF; } .brand-title{ font-size:1.75rem; font-weight:800; color:var(--text-primary); letter-spacing:-0.03em; margin-bottom:0.25rem; } .brand-subtitle{ font-size:0.9rem; color:var(--text-secondary); font-weight:400; } .form-floating{ margin-bottom:1.25rem; } .sl-input{ background:var(--bg-input) !important; border:1.5px solid var(--border-color) !important; border-radius:var(--radius-sm) !important; color:var(--text-primary) !important; font-size:0.95rem; padding:1rem 1rem 0.5rem 1rem; height:3.5rem; transition:var(--transition); } .sl-input:focus{ background:var(--bg-input-focus) !important; border-color:var(--primary) !important; box-shadow:0 0 0 4px var(--primary-light) !important; outline:none; } .sl-input::placeholder{ color:var(--text-muted); } .form-floating label{ color:var(--text-primary); opacity:0.75; font-size:0.95rem; font-weight:500; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label{ color:var(--primary) !important; opacity:1; font-weight:600; } .password-wrapper{ position:relative; } .password-toggle{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; z-index:5; transition:var(--transition); padding:4px; } .password-toggle:hover{ color:var(--primary); } .btn-sl-primary{ display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; width:100%; padding:0.95rem 1.4rem; border:none; border-radius:var(--radius-sm); background:linear-gradient(135deg, var(--primary), var(--accent)); color:var(--text-on-primary); font-size:1rem; font-weight:700; letter-spacing:0.01em; cursor:pointer; transition:var(--transition); position:relative; overflow:hidden; box-shadow:0 10px 28px rgba(255, 77, 0, 0.24), inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.25); } .btn-sl-primary:hover{ color:var(--text-on-primary); } [data-theme="dark"] .btn-sl-primary{ box-shadow:0 12px 30px rgba(255, 77, 0, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.15); } .cta-btn{ display:inline-flex; align-items:center; justify-content:center; padding:0.85rem 2rem; border-radius:var(--radius-sm); background:var(--gradient-primary); color:var(--text-on-primary); font-weight:600; font-size:1rem; text-decoration:none; transition:var(--transition); box-shadow:var(--shadow-sm); border:none; cursor:pointer; } .cta-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } .cta-btn:active{ transform:translateY(0); } .cta-btn[style*="background:transparent"]{ background:transparent !important; color:var(--primary) !important; border:2px solid var(--text-primary) !important; } .cta-btn i{ margin-right:0.5rem; font-size:1.2rem; line-height:0; } [data-theme="dark"] .cta-btn{ background:var(--gradient-primary); color:var(--text-on-primary); } [data-theme="dark"] .cta-btn[style*="background:transparent"]{ border-color:var(--text-primary) !important; color:var(--primary) !important; } .btn-sl-primary::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition:left 0.5s ease; } .btn-sl-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 35px rgba(255, 77, 0, 0.40), inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.25); } .btn-sl-primary:hover::before{ left:100%; } .btn-sl-primary:active{ transform:translateY(0); } .alert-sl{ border:none; border-radius:var(--radius-sm); padding:0.85rem 1.25rem; font-size:0.875rem; font-weight:500; display:flex; align-items:center; gap:0.5rem; animation:shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } .alert-sl-danger{ background:rgba(255, 107, 107, 0.12); color:var(--danger); border-left:3px solid var(--danger); } .alert-sl-success{ background:rgba(0, 214, 143, 0.12); color:var(--success); border-left:3px solid var(--success); } @keyframes shake{ 10%, 90% {transform:translateX(-1px);} 20%, 80% {transform:translateX(2px);} 30%, 50%, 70%{transform:translateX(-3px);} 40%, 60% {transform:translateX(3px);} } .theme-toggle{ position:fixed; top:1.5rem; right:1.5rem; z-index:9999; background:var(--glass-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--glass-border); border-radius:50px; padding:0.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; width:48px; height:48px; box-shadow:var(--shadow-sm); transition:var(--transition); color:var(--text-primary); font-size:1.25rem; transform:translateZ(0); will-change:transform, backdrop-filter; } .theme-toggle:hover{ transform:scale(1.1) rotate(15deg); box-shadow:var(--shadow-md); } .theme-toggle .icon-sun, .theme-toggle .icon-moon{ transition:var(--transition); } [data-theme="dark"] .theme-toggle .icon-sun {display:inline;} [data-theme="dark"] .theme-toggle .icon-moon{display:none;} [data-theme="light"] .theme-toggle .icon-sun {display:none;} [data-theme="light"] .theme-toggle .icon-moon{display:inline;} .btn-spinner{ display:none; width:20px; height:20px; border:2.5px solid rgba(255, 255, 255, 0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.6s linear infinite; margin-right:0.5rem; } @keyframes spin{ to{transform:rotate(360deg);} } .btn-sl-primary.loading .btn-spinner{ display:inline-block; } .btn-sl-primary.loading .btn-text{ opacity:0.7; } .login-footer{ text-align:center; margin-top:1.5rem; font-size:0.825rem; color:var(--text-muted); } .divider{ display:flex; align-items:center; gap:1rem; margin:1.5rem 0; color:var(--text-muted); font-size:0.8rem; font-weight:500; text-transform:uppercase; letter-spacing:0.08em; } .divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--border-color); } .table-glass{ width:100%; border-collapse:separate; border-spacing:0; font-size:0.9rem; } .table-glass thead th{ background:var(--bg-input); color:var(--text-secondary); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; padding:1rem 1.25rem; border-bottom:1px solid var(--border-color); border-top:none; white-space:nowrap; } .table-glass tbody td{ padding:1rem 1.25rem; vertical-align:middle; color:var(--text-primary); border-bottom:1px solid var(--border-color); border-top:none; } .table-glass tbody tr{ transition:var(--transition); } .table-glass tbody tr:hover{ background:var(--primary-light); } .table-glass tbody tr:last-child td{ border-bottom:none; } .badge-status{ display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.85rem; border-radius:50px; font-size:0.72rem; font-weight:600; letter-spacing:0.02em; white-space:nowrap; } .badge-status-pending{ background:rgba(255, 170, 0, 0.12); color:#CC8800; } [data-theme="dark"] .badge-status-pending{ background:rgba(255, 170, 0, 0.15); color:#FFBB33; } .badge-status-transit{ background:rgba(59, 130, 246, 0.10); color:#2563EB; } [data-theme="dark"] .badge-status-transit{ background:rgba(59, 130, 246, 0.15); color:#60A5FA; } .badge-status-delivered{ background:rgba(0, 214, 143, 0.10); color:#00A86B; } [data-theme="dark"] .badge-status-delivered{ background:rgba(0, 214, 143, 0.15); color:#00D68F; } .badge-status-cancelled{ background:rgba(255, 107, 107, 0.10); color:#DC2626; } [data-theme="dark"] .badge-status-cancelled{ background:rgba(255, 107, 107, 0.15); color:#FF6B6B; } .admin-content .glass-card{ padding:2.5rem; } @media (max-width:576px){ .login-page{ padding-block:1rem; } .login-card{ padding:2rem 1.5rem; border-radius:var(--radius-sm); } .brand-title{ font-size:1.5rem; } .theme-toggle{ width:44px; height:44px; } .admin-content .glass-card{ padding:1.5rem; } } .logo-light{display:inline-block;} .logo-dark{display:none;} body.dark-mode .logo-light, [data-theme="dark"] .logo-light{display:none !important;} body.dark-mode .logo-dark, [data-theme="dark"] .logo-dark{display:inline-block !important;} .text-muted{color:var(--text-muted) !important;} .text-secondary{color:var(--text-secondary) !important;} .text-primary{color:var(--text-primary) !important;} .bg-light, .bg-white{background-color:var(--bg-card-solid) !important;} .bg-dark{background-color:rgba(20, 20, 20, 0.95) !important;} body.is-scrolling .glass-card, body.is-scrolling .theme-toggle, body.is-scrolling .public-header-nav{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; } @media (hover:none) and (pointer:coarse){ .theme-toggle:hover, .btn-sl-primary:hover, .table-glass tbody tr:hover{ transform:none; box-shadow:var(--shadow-sm); } } @media (prefers-reduced-motion:reduce){ html:focus-within{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } .theme-toggle:hover{ transform:none; } }