/* ================================================================
   BizPlatform Design System v5
   Freight Forwarding B2B — Maersk / Flexport / CargoWise inspired
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --navy:     #1E3A5F;
  --navy-700: #152D4A;
  --navy-800: #0C1F35;
  --ocean:    #2563EB;
  --ocean-700:#1D4FD8;
  --amber:    #F59E0B;
  --emerald:  #10B981;
  --rose:     #EF4444;
  --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;
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  color: var(--slate-900);
  background: var(--slate-100);
  line-height: 1.6;
  margin: 0;
}

*:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px; }
::selection { background: #DBEAFE; color: #1D4FD8; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--slate-200) 25%, var(--slate-300) 50%, var(--slate-200) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skeleton { 0%,100%{background-position:200% 0} 50%{background-position:-200% 0} }

/* Solid Badges */
.badge-success { background:#10B981; color:#fff; display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:9999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em; }
.badge-warning { background:#F59E0B; color:#fff; display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:9999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em; }
.badge-danger  { background:#EF4444; color:#fff; display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:9999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em; }
.badge-info    { background:#0EA5E9; color:#fff; display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:9999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em; }
.badge-neutral { background:#CBD5E1; color:#475569; display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:9999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em; }
.badge-dot { width:7px; height:7px; border-radius:9999px; flex-shrink:0; background:rgba(255,255,255,0.5); }

/* Gradient Progress */
.progress-track { width:100%; height:8px; background:#E2E8F0; border-radius:9999px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#1E3A5F,#2563EB); border-radius:9999px; transition:width .3s ease; }
.progress-fill.success { background:linear-gradient(90deg,#059669,#10B981); }

/* Toast */
.toast { position:fixed; top:20px; right:20px; z-index:100; max-width:28rem; padding:14px 18px; border-radius:12px; box-shadow:0 20px 60px -12px rgba(0,0,0,.3); font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; opacity:0; transform:translateX(24px); transition:opacity .3s,transform .3s; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(0); pointer-events:auto; }
.toast.success { background:#D1FAE5; color:#047857; border:1px solid #A7F3D0; }
.toast.error   { background:#FEE2E2; color:#B91C1C; border:1px solid #FECACA; }
.toast.warning { background:#FEF3C7; color:#B45309; border:1px solid #FDE68A; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(12,19,32,.7); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:50; animation:fadeIn .2s ease-out; }
.modal-card { background:#fff; border-radius:16px; box-shadow:0 20px 60px -12px rgba(0,0,0,.3); padding:28px; width:100%; max-width:30rem; margin:0 16px; animation:scaleIn .2s ease-out; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.modal-title { font-size:19px; font-weight:700; color:#0F172A; }
.modal-close { background:none; border:none; cursor:pointer; color:#94A3B8; padding:4px; border-radius:4px; font-size:20px; transition:color .15s,background .15s; }
.modal-close:hover { color:#334155; background:#F1F5F9; }

/* KPI Card */
.kpi-card { background:#fff; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.08); border:1px solid #E2E8F0; padding:1.25rem; transition:box-shadow .2s,transform .2s; }
.kpi-card:hover { box-shadow:0 12px 28px -6px rgba(0,0,0,.12); transform:translateY(-2px); }

/* Printing */
@media print { .no-print { display:none!important } body{background:#fff;font-size:11pt} }

@keyframes fadeIn  { 0%{opacity:0} 100%{opacity:1} }
@keyframes scaleIn { 0%{opacity:0;transform:scale(.95)} 100%{opacity:1;transform:scale(1)} }