@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap";:root{--primary-color:#2563eb;--primary-hover:#1d4ed8;--secondary-color:#f1f5f9;--bg-color:#f8fafc;--text-primary:#1e293b;--text-secondary:#64748b;--success-color:#22c55e;--warning-color:#f59e0b;--danger-color:#ef4444;--sidebar-width:260px;--header-height:70px;--sidebar-bg:#0b3b84;--sidebar-text:#e2e8f0;--sidebar-active-bg:#1d4ed8}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);font-family:Inter,system-ui,-apple-system,sans-serif}.app-container{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background-color:var(--sidebar-bg);color:var(--sidebar-text);border-right:none;flex-direction:column;display:flex}.sidebar-logo-container{text-align:center;padding:20px 20px 10px}.sidebar-logo-text-top{color:#fff;margin-bottom:5px;font-family:Brush Script MT,cursive,Comic Sans MS,sans-serif;font-size:18px;font-style:italic}.sidebar-logo-box{background-color:#fff;border:2px solid #fbb017;border-radius:6px;width:100%;padding:10px;display:inline-block}.sidebar-logo-box h1{color:var(--sidebar-bg);text-transform:uppercase;margin:0;font-size:20px;font-weight:800;line-height:1.1}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:15px;display:flex;overflow-y:auto}.nav-item{color:var(--sidebar-text);cursor:pointer;border-radius:8px;align-items:center;padding:12px 15px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover,.nav-item.active{background-color:var(--sidebar-active-bg);color:#fff;border-right:none}.nav-icon{opacity:.9;margin-right:12px}.sidebar-footer{border-top:1px solid #ffffff1a;padding:20px}.sidebar-business-system{cursor:pointer;align-items:center;gap:12px;display:flex}.sidebar-business-icon{color:#fbb017;background-color:#ffffff1a;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.topbar{height:var(--header-height);color:var(--text-primary);z-index:10;background-color:#fff;justify-content:space-between;align-items:center;padding:0 30px;display:flex;box-shadow:0 1px 4px #0000000d}.topbar-left{align-items:center;gap:20px;display:flex}.topbar-search{align-items:center;display:flex;position:relative}.topbar-search input{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:20px;outline:none;width:350px;padding:10px 16px 10px 40px;font-size:14px;transition:all .2s}.topbar-search input:focus{border-color:var(--primary-color);background-color:#fff}.topbar-search-icon{color:var(--text-secondary);position:absolute;left:14px}.topbar-right{align-items:center;gap:20px;display:flex}.topbar-icon-btn{color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;transition:color .2s;display:flex;position:relative}.topbar-icon-btn:hover{color:var(--primary-color)}.notification-badge{color:#fff;background-color:#fbb017;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px}.user-profile{cursor:pointer;align-items:center;gap:12px;display:flex}.user-avatar{object-fit:cover;background-color:#e2e8f0;border-radius:50%;width:36px;height:36px}.user-info{flex-direction:column;display:flex}.user-name{color:var(--text-primary);font-size:14px;font-weight:600}.user-email{color:var(--text-secondary);font-size:12px}.page-content{background-color:#f8fafc;flex:1;padding:30px;overflow-y:auto}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:24px;display:grid}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000000d}.card-title{color:var(--text-secondary);margin-bottom:10px;font-size:14px;font-weight:600}.card-value{color:var(--text-primary);font-size:28px;font-weight:700}@keyframes popInCenter{0%{opacity:0;transform:translate(-50%,-50%)scale(.8)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes popOutCenter{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.8)}}@keyframes pulseGlow{0%{box-shadow:0 0 #d97706b3}70%{box-shadow:0 0 0 6px #d9770600}to{box-shadow:0 0 #d9770600}}@keyframes modalSpring{0%{opacity:0;transform:scale(.9)}50%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.toast-notification{text-align:center;z-index:1000;background-color:#fff;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:30px;width:400px;height:400px;animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards popInCenter;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 25px 50px -12px #0006}.toast-notification.hide{animation:.4s forwards popOutCenter}.pulse-active{animation:2s infinite pulseGlow}.modal-animate{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards modalSpring}.table-row-hover{transition:all .3s!important}.table-row-hover:hover{z-index:10;position:relative;transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}:root{--brand-blue:#0b3b84;--brand-blue-dark:#07224e;--brand-blue-light:#1653ad;--brand-gold:#fbb017;--brand-gold-hover:#e59905;--text-dark:#0f172a;--text-muted:#64748b;--bg-slate:#f8fafc;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}.login-container{background-color:var(--bg-slate);width:100%;min-height:100vh;font-family:Outfit,-apple-system,sans-serif;display:flex;position:relative;overflow:hidden}.login-bg-overlay{pointer-events:none;z-index:1;position:absolute;inset:0}.login-bg-circle-1{filter:blur(40px);background:radial-gradient(circle,#fbb0170d 0%,#fff0 70%);border-radius:50%;width:50vw;height:50vw;animation:25s ease-in-out infinite alternate floatCircle;position:absolute;top:-10%;left:-5%}.login-bg-circle-2{filter:blur(50px);background:radial-gradient(circle,#0b3b8408 0%,#fff0 75%);border-radius:50%;width:60vw;height:60vw;animation:35s ease-in-out infinite alternate-reverse floatCircle;position:absolute;bottom:-20%;right:25%}@keyframes floatCircle{0%{transform:translate(0)scale(1)}to{transform:translate(5%,5%)scale(1.1)}}.login-content-wrapper{z-index:10;width:100%;min-height:100vh;display:flex;position:relative}.login-left{background:radial-gradient(circle at 20% 30%, var(--brand-blue-light) 0%, var(--brand-blue) 45%, var(--brand-blue-dark) 100%);flex-direction:column;flex:1.25;justify-content:space-between;align-items:center;padding:60px 40px;display:flex;position:relative;overflow:hidden;box-shadow:10px 0 30px #00000026}.login-left:before{content:"";opacity:.6;z-index:1;pointer-events:none;background-image:repeating-linear-gradient(0deg,#ffffff05 0 1px,#0000 1px 10px),repeating-linear-gradient(90deg,#ffffff03 0 1px,#0000 1px 15px);position:absolute;inset:0}.login-left-glow{filter:blur(30px);z-index:2;pointer-events:none;background:radial-gradient(circle,#fbb01726 0%,#fbb01700 70%);width:300px;height:300px;position:absolute;top:20%;left:10%}.login-left-content{z-index:5;flex-direction:column;justify-content:center;align-items:center;gap:55px;width:100%;max-width:540px;height:100%;display:flex;position:relative}.login-right{background-color:var(--bg-slate);z-index:5;flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative}.login-logo-container{text-align:center;flex-direction:column;align-items:center;width:100%;display:flex}.login-logo-text-top{color:var(--brand-gold);letter-spacing:.5px;text-shadow:0 2px 4px #00000040;margin-bottom:12px;font-family:Playfair Display,serif;font-size:28px;font-style:italic;font-weight:500}.login-logo-box{-webkit-backdrop-filter:blur(12px);transition:var(--transition-smooth);background:#07224e59;border:1px solid #fbb01759;border-radius:16px;padding:35px 55px;display:inline-block;position:relative;box-shadow:0 20px 40px #0003,inset 0 0 15px #ffffff0d}.login-logo-box:hover{border-color:#fbb01799;transform:translateY(-2px);box-shadow:0 24px 45px #00000040,inset 0 0 20px #fbb01714}.login-logo-box h1{color:#fff;text-transform:uppercase;letter-spacing:2px;margin:0;font-size:46px;font-weight:800;line-height:1.15}.login-logo-box h1 span{color:var(--brand-gold);font-weight:900;display:block}.login-logo-box:before{content:"";pointer-events:none;border:1px dashed #fbb01726;border-radius:10px;position:absolute;inset:8px}.login-gear-icon{background-color:var(--brand-gold);border:3.5px solid var(--brand-blue-dark);border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;animation:12s linear infinite rotateGear;display:flex;position:absolute;bottom:-20px;right:-20px;box-shadow:0 4px 10px #0000004d}@keyframes rotateGear{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-gear-inner{background-color:var(--brand-blue-dark);border-radius:50%;width:12px;height:12px}.login-logo-subtitle{color:#fffffff2;letter-spacing:5px;text-transform:uppercase;text-shadow:0 2px 4px #0003;border-bottom:2px solid var(--brand-gold);margin-top:30px;padding-bottom:8px;font-size:15px;font-weight:700;display:inline-block}.login-logistics-badge{-webkit-backdrop-filter:blur(16px);width:100%;max-width:440px;transition:var(--transition-smooth);background:#ffffff0a;border:1px solid #ffffff14;border-radius:20px;align-items:center;gap:24px;padding:24px 32px;display:flex;box-shadow:0 15px 35px #00000026}.login-logistics-badge:hover{background:#ffffff12;border-color:#fbb01766;transform:translateY(-5px);box-shadow:0 20px 40px #fbb01714}.login-logistics-icon-wrapper{width:64px;height:64px;color:var(--brand-gold);transition:var(--transition-smooth);background:#fbb0171f;border:1px solid #fbb01740;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.login-logistics-badge:hover .login-logistics-icon-wrapper{background:var(--brand-gold);color:var(--brand-blue-dark);box-shadow:0 0 15px #fbb01766}.login-logistics-info{text-align:left}.login-logistics-info h3{color:#fff;letter-spacing:.5px;margin:0 0 4px;font-size:18px;font-weight:700}.login-logistics-info p{color:#ffffffa6;margin:0;font-size:13px;line-height:1.4}.login-truck-animated{transition:var(--transition-smooth)}.login-logistics-badge:hover .login-truck-animated{animation:.8s infinite alternate truckBounce}@keyframes truckBounce{0%{transform:translateY(0)}to{transform:translateY(-4px)}}.login-footer-text{color:#ffffffb3;text-align:center;letter-spacing:.5px;flex-direction:column;align-items:center;gap:10px;font-size:13px;font-weight:400;display:flex}.login-footer-line{background:linear-gradient(90deg, transparent, var(--brand-gold), transparent);width:50px;height:2px}.login-card{z-index:10;width:100%;max-width:440px;transition:var(--transition-smooth);background-color:#fff;border:1px solid #0b3b840d;border-radius:24px;padding:50px 45px;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #07224e1f,0 0 1px #07224e26}.login-card:after{content:"";background:linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-gold) 100%);height:5px;position:absolute;top:0;left:0;right:0}.login-shield-wrapper{justify-content:center;margin-bottom:24px;display:flex}.login-shield{width:56px;height:56px;color:var(--brand-blue);transition:var(--transition-smooth);background:linear-gradient(135deg,#0b3b840f 0%,#0b3b841f 100%);border:1px solid #0b3b841a;border-radius:16px;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 10px #0b3b840d}.login-card:hover .login-shield{color:var(--brand-gold);background:linear-gradient(135deg,#fbb01714 0%,#fbb01726 100%);border-color:#fbb01733;transform:translateY(-2px)scale(1.02)}.login-card h2{color:var(--brand-blue-dark);text-align:center;letter-spacing:-.5px;margin-bottom:6px;font-size:26px;font-weight:700}.login-card p{color:var(--text-muted);text-align:center;margin-bottom:30px;font-size:14px}.login-divider{background-color:var(--brand-gold);border-radius:2px;width:40px;height:3px;margin:0 auto 35px}.login-form-group{margin-bottom:22px}.login-form-group label{color:var(--text-dark);letter-spacing:.2px;margin-bottom:8px;font-size:13.5px;font-weight:600;display:block}.login-input-wrapper{align-items:center;display:flex;position:relative}.login-input-icon{color:var(--text-muted);transition:var(--transition-smooth);pointer-events:none;position:absolute;left:16px}.login-input{width:100%;transition:var(--transition-smooth);color:var(--text-dark);background-color:#fff;border:1.5px solid #e2e8f0;border-radius:12px;outline:none;padding:13px 16px 13px 46px;font-family:inherit;font-size:14.5px}.login-input::placeholder{color:#94a3b8}.login-input:focus{border-color:var(--brand-blue);background-color:#fff;box-shadow:0 0 0 4px #0b3b841f}.login-input:focus~.login-input-icon{color:var(--brand-blue)}.login-input-action{color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);position:absolute;right:16px}.login-input-action:hover{color:var(--brand-blue);transform:scale(1.1)}.login-options{justify-content:space-between;align-items:center;margin-bottom:30px;font-size:13.5px;display:flex}.login-checkbox-group{color:var(--text-dark);cursor:pointer;align-items:center;gap:8px;font-weight:500;display:flex}.login-checkbox{accent-color:var(--brand-blue);cursor:pointer;width:16px;height:16px}.login-forgot{color:var(--brand-blue);transition:var(--transition-smooth);font-weight:600;text-decoration:none}.login-forgot:hover{color:var(--brand-blue-light);text-decoration:underline}.login-button{background:linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);color:#fff;cursor:pointer;width:100%;transition:var(--transition-smooth);border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:14px;font-family:inherit;font-size:15px;font-weight:600;display:flex;box-shadow:0 8px 16px #0b3b8426}.login-button:hover:not(:disabled){background:linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-blue) 100%);transform:translateY(-2px);box-shadow:0 12px 20px #0b3b8440}.login-button:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 10px #0b3b8433}@media (width<=1024px){.login-left{display:none}.login-right{background:radial-gradient(circle at 10% 20%,#eff6ff 0%,#fff 100%);flex:1}.login-bg-circle-1{background:radial-gradient(circle,#fbb01714 0%,#fff0 70%);display:block}}@media (width<=480px){.login-right{padding:20px}.login-card{border-radius:20px;padding:35px 25px}.login-card h2{font-size:22px}}
