:root{--ocean-50: #e6f4f8;--ocean-100: #cce9f1;--ocean-200: #99d3e3;--ocean-300: #66bdd5;--ocean-400: #33a7c7;--ocean-500: #0091b9;--ocean-600: #007494;--ocean-700: #00576f;--ocean-800: #003a4a;--ocean-900: #001d25;--coral-400: #ff8a65;--coral-500: #ff7043;--coral-600: #f4511e;--mint-400: #4fd1c5;--mint-500: #38b2ac;--mint-600: #2c9a8b;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--slate-950: #020617;--gradient-ocean: linear-gradient(135deg, #0c4a6e 0%, #0891b2 50%, #06b6d4 100%);--gradient-sunset: linear-gradient(135deg, #ff7043 0%, #ff8a65 100%);--gradient-aurora: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-mint: linear-gradient(135deg, #38b2ac 0%, #4fd1c5 100%);--gradient-sidebar: linear-gradient(180deg, #0c1929 0%, #0f2942 50%, #0c4a6e 100%);--gradient-card-light: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);--gradient-card-dark: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--shadow-glow-ocean: 0 0 40px -10px rgba(8, 145, 178, .4);--shadow-glow-coral: 0 0 40px -10px rgba(244, 81, 30, .4);--glass-bg: rgba(255, 255, 255, .8);--glass-border: rgba(255, 255, 255, .2);--glass-bg-dark: rgba(15, 23, 42, .8);--glass-border-dark: rgba(255, 255, 255, .1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-spring: cubic-bezier(.175, .885, .32, 1.275)}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:DM Sans,system-ui,sans-serif;background-color:var(--slate-50);color:var(--slate-800);line-height:1.6;min-height:100vh}.dark body,body.dark{background-color:var(--slate-950);color:var(--slate-200)}h1,h2,h3,h4,h5,h6{font-family:Outfit,DM Sans,system-ui,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.2}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px -5px #0891b266}50%{box-shadow:0 0 30px -5px #0891b299}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wave{0%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0)}to{transform:rotate(0)}}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.animate-fadeIn{animation:fadeIn .5s var(--ease-smooth) forwards}.animate-fadeInUp{animation:fadeInUp .6s var(--ease-smooth) forwards}.animate-fadeInDown{animation:fadeInDown .6s var(--ease-smooth) forwards}.animate-fadeInRight{animation:fadeInRight .5s var(--ease-smooth) forwards}.animate-scaleIn{animation:scaleIn .4s var(--ease-spring) forwards}.animate-float{animation:float 3s ease-in-out infinite}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}.delay-75{animation-delay:75ms}.delay-100{animation-delay:.1s}.delay-150{animation-delay:.15s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.sidebar{background:var(--gradient-sidebar);position:relative;overflow:hidden}.sidebar:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(6,182,212,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(8,145,178,.1) 0%,transparent 50%);pointer-events:none}.sidebar-logo{position:relative;z-index:1}.sidebar-nav-link{position:relative;transition:all .3s var(--ease-smooth);border-radius:12px;overflow:hidden}.sidebar-nav-link:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient-mint);transform:scaleY(0);transition:transform .3s var(--ease-smooth)}.sidebar-nav-link:hover:before,.sidebar-nav-link.active:before{transform:scaleY(1)}.sidebar-nav-link.active{background:linear-gradient(90deg,rgba(6,182,212,.2) 0%,transparent 100%)}.sidebar-nav-link:hover{background:#06b6d41a;transform:translate(4px)}.header-glass{backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background:var(--glass-bg);border-bottom:1px solid var(--glass-border)}.dark .header-glass{background:var(--glass-bg-dark);border-bottom:1px solid var(--glass-border-dark)}.card{background:var(--gradient-card-light);border:1px solid var(--slate-200);border-radius:16px;transition:all .3s var(--ease-smooth);position:relative;overflow:hidden}.dark .card{background:var(--gradient-card-dark);border-color:var(--slate-700)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-ocean);opacity:0;transition:opacity .3s var(--ease-smooth)}.card:hover:before{opacity:1}.stats-card{position:relative;overflow:hidden}.stats-card:after{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(6,182,212,.1) 0%,transparent 70%);transition:transform .5s var(--ease-smooth)}.stats-card:hover:after{transform:translate(-20%,20%)}.stats-icon{background:linear-gradient(135deg,#06b6d426,#0891b21a);border:1px solid rgba(6,182,212,.2)}.dark .stats-icon{background:linear-gradient(135deg,#06b6d433,#0891b226)}.quick-action-card{background:var(--gradient-card-light);border:2px solid transparent;border-radius:16px;transition:all .4s var(--ease-smooth);position:relative;overflow:hidden}.dark .quick-action-card{background:var(--gradient-card-dark)}.quick-action-card:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:var(--gradient-ocean);border-radius:18px;opacity:0;z-index:-1;transition:opacity .3s var(--ease-smooth)}.quick-action-card:hover:before{opacity:1}.quick-action-card:hover{background:#fff;transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-glow-ocean)}.dark .quick-action-card:hover{background:var(--slate-800)}.quick-action-icon{background:linear-gradient(135deg,var(--ocean-500) 0%,var(--ocean-600) 100%);color:#fff;transition:all .4s var(--ease-bounce)}.quick-action-card:hover .quick-action-icon{transform:scale(1.1) rotate(-5deg);box-shadow:0 10px 30px -10px #0891b280}.data-table{border-collapse:separate;border-spacing:0}.data-table thead tr{background:linear-gradient(90deg,var(--slate-100) 0%,var(--slate-50) 100%)}.dark .data-table thead tr{background:linear-gradient(90deg,var(--slate-800) 0%,var(--slate-900) 100%)}.data-table thead th{font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;color:var(--slate-600);padding:1rem 1.5rem;border-bottom:2px solid var(--ocean-200)}.dark .data-table thead th{color:var(--slate-400);border-bottom-color:var(--ocean-800)}.data-table tbody tr{transition:all .2s var(--ease-smooth)}.data-table tbody tr:hover{background:#06b6d40d}.dark .data-table tbody tr:hover{background:#06b6d41a}.data-table tbody td{padding:1rem 1.5rem;border-bottom:1px solid var(--slate-100)}.dark .data-table tbody td{border-bottom-color:var(--slate-800)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-weight:600;font-size:.875rem;border-radius:10px;transition:all .3s var(--ease-smooth);cursor:pointer;border:none;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(rgba(255,255,255,.2),transparent);opacity:0;transition:opacity .3s}.btn:hover:after{opacity:1}.btn-primary{background:linear-gradient(135deg,var(--ocean-500) 0%,var(--ocean-600) 100%);color:#fff;box-shadow:0 4px 14px -3px #0891b266}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px -3px #0891b280}.btn-secondary{background:var(--slate-100);color:var(--slate-700);border:1px solid var(--slate-200)}.dark .btn-secondary{background:var(--slate-800);color:var(--slate-200);border-color:var(--slate-700)}.btn-secondary:hover{background:var(--slate-200);transform:translateY(-1px)}.dark .btn-secondary:hover{background:var(--slate-700)}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 14px -3px #ef444466}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 20px -3px #ef444480}.btn-icon{padding:.5rem;border-radius:10px;transition:all .2s var(--ease-smooth)}.btn-icon:hover{transform:scale(1.1)}.input{width:100%;padding:.75rem 1rem;font-size:.9375rem;border:2px solid var(--slate-200);border-radius:10px;background:#fff;color:var(--slate-800);transition:all .3s var(--ease-smooth)}.dark .input{background:var(--slate-800);border-color:var(--slate-700);color:var(--slate-100)}.input:focus{outline:none;border-color:var(--ocean-400);box-shadow:0 0 0 4px #06b6d41a}.dark .input:focus{box-shadow:0 0 0 4px #06b6d433}.input::placeholder{color:var(--slate-400)}.search-input{padding-left:2.75rem}.search-input-wrapper{position:relative}.search-input-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--slate-400)}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .75rem center;background-repeat:no-repeat;background-size:1.25em 1.25em;padding-right:2.5rem}.modal-backdrop{background:#0f172ab3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.modal-content{background:var(--gradient-card-light);border:1px solid var(--slate-200);border-radius:20px;box-shadow:0 25px 50px -12px #00000040;animation:scaleIn .4s var(--ease-spring) forwards}.dark .modal-content{background:var(--gradient-card-dark);border-color:var(--slate-700)}.modal-header{border-bottom:1px solid var(--slate-200);position:relative}.dark .modal-header{border-bottom-color:var(--slate-700)}.modal-header:after{content:"";position:absolute;bottom:-1px;left:0;width:60px;height:3px;background:var(--gradient-ocean);border-radius:2px}.badge{display:inline-flex;align-items:center;padding:.375rem .75rem;font-size:.75rem;font-weight:600;border-radius:999px;text-transform:capitalize}.badge-created{background:linear-gradient(135deg,var(--slate-100) 0%,var(--slate-200) 100%);color:var(--slate-700)}.badge-assigned{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af}.badge-in-transit{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}.badge-delivered{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46}.badge-delayed{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b}.badge-customs{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);color:#3730a3}.login-container{background:linear-gradient(135deg,#0c4a6ee6,#0891b2cc),url(/assets/maritime-KMRNUN01.jpg) center/cover;min-height:100vh}.login-card{background:#ffffff1a;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.2);border-radius:24px;box-shadow:0 25px 50px -12px #0006;animation:fadeInUp .8s var(--ease-smooth) forwards}.login-logo{animation:float 4s ease-in-out infinite}.login-input{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;transition:all .3s var(--ease-smooth)}.login-input:focus{background:#ffffff26;border-color:#fff6;box-shadow:0 0 0 4px #ffffff1a}.login-input::placeholder{color:#fff9}.login-btn{background:linear-gradient(135deg,var(--coral-500) 0%,var(--coral-600) 100%);font-weight:700;letter-spacing:.025em;box-shadow:0 10px 30px -10px #f4511e80;transition:all .3s var(--ease-smooth)}.login-btn:hover{transform:translateY(-3px);box-shadow:0 15px 40px -10px #f4511e99}.chart-container{position:relative;border-radius:16px;overflow:hidden}.chart-container:before{content:"";position:absolute;top:0;left:0;right:0;height:100%;background:linear-gradient(180deg,transparent 80%,rgba(6,182,212,.03) 100%);pointer-events:none;z-index:1}.toast{border-radius:12px;box-shadow:0 10px 40px -10px #0000004d;animation:fadeInRight .5s var(--ease-smooth) forwards}.toast-success{background:linear-gradient(135deg,var(--mint-500) 0%,var(--mint-600) 100%)}.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--slate-100);border-radius:4px}.dark ::-webkit-scrollbar-track{background:var(--slate-800)}::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:4px;transition:background .2s}.dark ::-webkit-scrollbar-thumb{background:var(--slate-600)}::-webkit-scrollbar-thumb:hover{background:var(--ocean-400)}::selection{background:#06b6d44d;color:inherit}.glass{backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background:var(--glass-bg);border:1px solid var(--glass-border)}.dark .glass{background:var(--glass-bg-dark);border-color:var(--glass-border-dark)}.gradient-text{background:var(--gradient-ocean);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gradient-border{position:relative;background:#fff;border-radius:16px}.gradient-border:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:var(--gradient-ocean);border-radius:18px;z-index:-1}.hover-lift{transition:transform .3s var(--ease-smooth)}.hover-lift:hover{transform:translateY(-4px)}[dir=rtl] .sidebar-nav-link:hover{transform:translate(-4px)}[dir=rtl] .sidebar-nav-link:before{left:auto;right:0}