:root{
  --bg:#0b0d14;--surface:#11141c;--card:#171b26;--border:#1f2535;
  --accent:#e8b84b;--accent2:#4b8fe8;--accent3:#4be89a;
  --danger:#e84b4b;--warn:#e88a4b;--purple:#9b6ee8;
  --text:#e8eaf0;--muted:#6b7280;
  --uae:#4b8fe8;--ksa:#4be89a;--eg:#e88a4b;--mea:#9b6ee8;
  --mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Bebas Neue',sans-serif;
  --chart-grid:#1f2535;--chart-tick:#6b7280;
}
html.light{
  --bg:#f0f2f7;--surface:#ffffff;--card:#f8f9fc;--border:#dde1ea;
  --accent:#c9921e;--accent2:#2563eb;--accent3:#059669;
  --danger:#dc2626;--warn:#d97706;--purple:#7c3aed;
  --text:#0f172a;--muted:#64748b;
  --uae:#2563eb;--ksa:#059669;--eg:#d97706;--mea:#7c3aed;
  --chart-grid:#e2e8f0;--chart-tick:#64748b;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden;}

/* NAV */
nav{height:54px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:200;}
.nav-brand{display:flex;align-items:center;gap:12px;}
.nav-name{font-family:var(--display);font-size:18px;letter-spacing:2px;color:var(--accent);}
.nav-sub{font-family:var(--mono);font-size:8px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-top:1px;}
.nav-tabs{display:flex;gap:4px;}
.nav-tab{padding:6px 16px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:all .2s;font-family:var(--sans);}
.nav-tab.active{background:rgba(232,184,75,.12);color:var(--accent);border:1px solid rgba(232,184,75,.25);}
.nav-tab:hover:not(.active){color:var(--text);}
.nav-right{display:flex;align-items:center;gap:8px;}
.btn-hdr{padding:6px 12px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--sans);border:1px solid var(--border);background:var(--card);color:var(--text);display:flex;align-items:center;gap:5px;transition:all .2s;white-space:nowrap;}
.btn-hdr:hover{border-color:var(--accent2);color:var(--accent2);}
.btn-hdr.green{border-color:rgba(75,232,154,.3);color:var(--accent3);}
.btn-hdr.gold{background:var(--accent);color:#000;border-color:var(--accent);}
.btn-hdr.gold:hover{background:#f0c75a;}
.action-menu-item{display:block;width:100%;text-align:left;padding:9px 16px;background:transparent;border:none;color:var(--text);font-size:12px;cursor:pointer;font-family:var(--sans);transition:background .15s;}
.action-menu-item:hover{background:rgba(232,184,75,.08);color:var(--accent);}
#importFileInput{display:none;}

/* LOGIN SCREEN */
#loginScreen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.login-globe{margin-bottom:24px;}
.login-box{background:linear-gradient(160deg,#1a2035 0%,#141928 100%);border:1px solid rgba(75,143,232,.18);border-radius:20px;padding:44px 52px;width:480px;box-shadow:0 32px 100px rgba(0,0,0,.8),0 0 0 1px rgba(75,143,232,.08),inset 0 1px 0 rgba(255,255,255,.05);}
.login-title{font-family:var(--display);font-size:28px;letter-spacing:3px;color:var(--accent);text-align:center;margin-bottom:4px;}
.login-sub{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;letter-spacing:2px;margin-bottom:28px;}
.login-field{margin-bottom:20px;}
.login-field label{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:8px;}
.login-field input{width:100%;background:var(--card);border:1px solid var(--border);color:var(--text);padding:11px 14px;border-radius:7px;font-size:13px;font-family:var(--sans);outline:none;transition:border .2s;}
.login-field input:focus{border-color:var(--accent);}
.login-btn{width:100%;padding:15px;background:linear-gradient(135deg,#4b8fe8 0%,#2d6bc4 100%);color:#fff;border:none;border-radius:10px;font-family:var(--display);font-size:18px;letter-spacing:3px;cursor:pointer;margin-top:12px;transition:all .2s;box-shadow:0 4px 20px rgba(75,143,232,.35);}
.login-btn:hover{background:#f0c75a;}
.login-err{color:var(--danger);font-size:11px;font-family:var(--mono);text-align:center;margin-top:10px;min-height:16px;}
.login-footer{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.2);text-align:center;margin-top:28px;letter-spacing:2px;}

html.light body{background:var(--bg);}
html.light nav{background:var(--surface);border-bottom-color:var(--border);}
html.light .shipment-card{background:var(--card);border-color:var(--border);}
html.light .login-box{background:linear-gradient(160deg,#e8edf8 0%,#dde3f0 100%);border-color:rgba(37,99,235,.2);box-shadow:0 32px 100px rgba(0,0,0,.1);}
html.light .login-field input{background:#fff;border-color:#cbd5e1;color:var(--text);}
html.light .action-menu-item:hover{background:rgba(201,146,30,.08);}
#usersPage .um-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px 20px;display:flex;align-items:center;gap:14px;margin-bottom:10px;transition:border .2s;}
#usersPage .um-card:hover{border-color:var(--accent2);}
.um-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:18px;flex-shrink:0;}
.role-admin{background:rgba(232,184,75,.15);border:1px solid rgba(232,184,75,.3);color:var(--accent);}
.role-team{background:rgba(75,143,232,.15);border:1px solid rgba(75,143,232,.3);color:var(--accent2);}
.role-badge{font-family:var(--mono);font-size:9px;padding:2px 8px;border-radius:8px;letter-spacing:1px;text-transform:uppercase;}
.role-badge.admin{background:rgba(232,184,75,.15);border:1px solid rgba(232,184,75,.3);color:var(--accent);}
.role-badge.team{background:rgba(75,143,232,.15);border:1px solid rgba(75,143,232,.3);color:var(--accent2);}

/* PAGES */
.page{display:none;height:calc(100vh - 54px);overflow:hidden;position:relative;}
.page.active{display:flex;}
#trackerPage{flex-direction:column;}
#trade-tabs{flex-shrink:0;}
.kpi-bar{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.kpi{padding:10px 16px;border-right:1px solid var(--border);}
.kpi:last-child{border-right:none;}
.kpi-label{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.kpi-value{font-family:var(--display);font-size:24px;letter-spacing:1px;margin:1px 0;}
.kpi-sub{font-size:10px;color:var(--muted);}

.country-bar{display:flex;align-items:center;gap:6px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;flex-wrap:wrap;}
.cc{padding:4px 12px;border-radius:20px;font-size:10px;font-weight:700;cursor:pointer;border:2px solid transparent;font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;transition:all .2s;background:var(--card);}
.cc-all{color:var(--text);}.cc-all.active{border-color:var(--text);background:rgba(232,234,240,.08);}
.cc-uae{color:var(--uae);}.cc-uae.active{border-color:var(--uae);background:rgba(75,143,232,.1);}
.cc-ksa{color:var(--ksa);}.cc-ksa.active{border-color:var(--ksa);background:rgba(75,232,154,.1);}
.cc-eg{color:var(--eg);}.cc-eg.active{border-color:var(--eg);background:rgba(232,138,75,.1);}
.cc-mea{color:var(--mea);}.cc-mea.active{border-color:var(--mea);background:rgba(155,110,232,.1);}
.dv{width:1px;height:20px;background:var(--border);}
.sc{padding:4px 10px;border-radius:20px;font-size:10px;cursor:pointer;border:1px solid var(--border);color:var(--muted);font-family:var(--mono);transition:all .2s;background:transparent;}
.sc.active{border-color:var(--accent);color:var(--accent);background:rgba(232,184,75,.08);}
.search-inp{background:var(--card);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:4px;font-size:11px;font-family:var(--sans);outline:none;width:160px;margin-left:auto;}
.search-inp:focus{border-color:var(--accent2);}

.tracker-body{display:grid;grid-template-columns:290px 1fr;flex:1;overflow:hidden;position:relative;min-height:0;}
.sidebar{border-right:1px solid var(--border);overflow-y:auto;background:var(--surface);}
.content{overflow-y:auto;padding:18px;}

/* CARDS */
.shipment-card{background:var(--card);border:1px solid var(--border);border-radius:7px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,transform .15s;overflow:hidden;}
.shipment-card:hover{border-color:var(--accent);transform:translateY(-1px);}
.shipment-card.active-card{border-color:var(--accent2);}
.card-top{padding:10px 14px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--border);}
.card-po{font-family:var(--display);font-size:16px;color:var(--accent);letter-spacing:1px;}
.card-mr{font-size:10px;color:var(--muted);margin-top:2px;}
.card-body2{padding:8px 14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.mk{font-size:9px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;}
.mv{font-size:11px;font-weight:500;margin-top:1px;}
.lt-bar-w{padding:6px 14px 8px;background:rgba(0,0,0,.2);}
.lt-stages{display:flex;gap:2px;margin-bottom:3px;}
.lt-s{flex:1;height:4px;border-radius:2px;background:var(--border);}
.lt-f{height:100%;border-radius:2px;}

/* COUNTRY BADGE */
.cb{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:9px;font-weight:700;font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;}
.cb-uae{background:rgba(75,143,232,.15);color:var(--uae);border:1px solid rgba(75,143,232,.3);}
.cb-ksa{background:rgba(75,232,154,.15);color:var(--ksa);border:1px solid rgba(75,232,154,.3);}
.cb-eg{background:rgba(232,138,75,.15);color:var(--eg);border:1px solid rgba(232,138,75,.3);}
.cb-mea{background:rgba(155,110,232,.15);color:var(--mea);border:1px solid rgba(155,110,232,.3);}
.sb{padding:3px 8px;border-radius:20px;font-size:9px;font-weight:700;font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;}
.st-pending{background:rgba(232,184,75,.12);color:var(--accent);border:1px solid rgba(232,184,75,.25);}
.st-transit{background:rgba(75,143,232,.12);color:var(--accent2);border:1px solid rgba(75,143,232,.25);}
.st-customs{background:rgba(232,138,75,.12);color:var(--warn);border:1px solid rgba(232,138,75,.25);}
.st-delivered{background:rgba(75,232,154,.12);color:var(--accent3);border:1px solid rgba(75,232,154,.25);}
.st-delayed{background:rgba(232,75,75,.12);color:var(--danger);border:1px solid rgba(232,75,75,.25);}

/* DETAIL */
.detail-panel{background:var(--card);border-radius:9px;border:1px solid var(--border);}
.detail-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;}
.detail-po{font-family:var(--display);font-size:30px;color:var(--accent);letter-spacing:2px;}
.detail-meta{font-size:11px;color:var(--muted);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.detail-body{padding:18px 22px;}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
.sum-card{background:var(--surface);border-radius:6px;padding:12px;border:1px solid var(--border);}
.sum-label{font-size:9px;color:var(--muted);font-family:var(--mono);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;}
.sum-val{font-family:var(--display);font-size:22px;}
.sec-hdr{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;}

/* TIMELINE */
.timeline-item{display:flex;gap:14px;margin-bottom:18px;}
.tl-icon-wrap{display:flex;flex-direction:column;align-items:center;}
.tl-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid var(--border);background:var(--surface);flex-shrink:0;}
.tl-line{width:2px;flex:1;background:var(--border);margin:3px 0;min-height:14px;}
.tl-done .tl-icon{background:rgba(75,232,154,.1);border-color:var(--accent3);}
.tl-active .tl-icon{background:rgba(75,143,232,.1);border-color:var(--accent2);box-shadow:0 0 8px rgba(75,143,232,.4);}
.tl-delayed .tl-icon{background:rgba(232,75,75,.1);border-color:var(--danger);box-shadow:0 0 8px rgba(232,75,75,.3);}
.tl-content{flex:1;padding-top:3px;}
.tl-sname{font-weight:600;font-size:13px;}
.tl-date{font-size:10px;color:var(--muted);font-family:var(--mono);margin-top:3px;}
.tl-date span{color:var(--text);}
.tl-dur{display:inline-block;margin-top:4px;font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:3px;background:var(--surface);border:1px solid var(--border);}
.dur-ok{color:var(--accent3);}
.dur-warn{color:var(--warn);}
.dur-bad{color:var(--danger);}
.stage-edit{margin-top:6px;background:var(--surface);border-radius:5px;padding:8px;border:1px solid var(--border);display:none;}
.stage-edit.open{display:block;}
.stage-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.form-group{margin-bottom:8px;}
label{display:block;font-size:9px;color:var(--muted);margin-bottom:3px;font-family:var(--mono);letter-spacing:1px;}
input,select,textarea{width:100%;background:var(--card);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:4px;font-size:12px;font-family:var(--sans);outline:none;transition:border .2s;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
select option{background:var(--card);}
textarea{resize:vertical;min-height:48px;}
.btn-sm{padding:5px 10px;font-size:11px;border-radius:4px;border:none;cursor:pointer;font-family:var(--sans);font-weight:600;}
.btn-save{background:var(--accent);color:#000;}
.btn-cancel{background:var(--surface);color:var(--muted);border:1px solid var(--border);}
.sla-chip{font-family:var(--mono);font-size:9px;padding:1px 6px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;margin-left:6px;}
.sla-chip:hover{border-color:var(--accent);color:var(--accent);}
.stage-sla-edit{display:none;margin:5px 0;background:var(--surface);border:1px solid var(--accent);border-radius:5px;padding:8px;max-width:230px;}
.sla-inline{width:56px;background:var(--bg);border:1px solid var(--accent);color:var(--accent);padding:3px 6px;border-radius:4px;font-family:var(--mono);font-size:12px;text-align:center;outline:none;}
/* PHASE PANEL */
.phase-block{margin-top:8px;padding:8px 12px;background:rgba(155,110,232,.06);border:1px solid rgba(155,110,232,.2);border-left:3px solid var(--purple);border-radius:6px;font-size:11px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.phase-edit-panel{display:none;margin-top:6px;background:var(--surface);border:1px solid rgba(155,110,232,.35);border-radius:6px;padding:10px 12px;}
.phase-edit-panel.open{display:block;}
.phase-edit-panel textarea{background:var(--bg);border:1px solid rgba(155,110,232,.3);color:var(--text);border-radius:5px;font-size:12px;font-family:var(--sans);outline:none;resize:vertical;min-height:64px;padding:8px 10px;width:100%;box-sizing:border-box;line-height:1.55;}
.phase-edit-panel textarea:focus{border-color:var(--purple);}
.phase-btn{background:transparent;border:1px solid rgba(155,110,232,.3);color:var(--purple);padding:2px 9px;border-radius:4px;cursor:pointer;font-size:9px;font-family:var(--mono);letter-spacing:1px;transition:all .15s;}
.phase-btn:hover{background:rgba(155,110,232,.1);border-color:var(--purple);}
.no-sel{display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:10px;color:var(--muted);}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:300;display:none;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:24px;width:540px;max-height:86vh;overflow-y:auto;}
.modal-title{font-family:var(--display);font-size:22px;color:var(--accent);margin-bottom:16px;letter-spacing:1px;}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.modal-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end;}
.alert{position:fixed;top:14px;right:14px;z-index:400;background:var(--accent3);color:#000;padding:9px 16px;border-radius:6px;font-weight:700;font-size:11px;transform:translateX(130%);transition:transform .3s;}
.alert.show{transform:translateX(0);}

/* ===== DASHBOARD ===== */
#dashPage{flex-direction:column;overflow-y:auto;}
.dash-body{padding:24px;flex:1;}
.dash-title{font-family:var(--display);font-size:30px;color:var(--accent);letter-spacing:2px;margin-bottom:2px;}
.dash-sub{font-size:11px;color:var(--muted);margin-bottom:20px;}
.dash-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.dash-kpi{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:16px;position:relative;overflow:hidden;}
.dash-kpi::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;border-radius:3px 0 0 3px;}
.dash-kpi.uae::before{background:var(--uae);}
.dash-kpi.ksa::before{background:var(--ksa);}
.dash-kpi.eg::before{background:var(--eg);}
.dash-kpi.mea::before{background:var(--mea);}
.dk-label{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.dk-val{font-family:var(--display);font-size:32px;margin-bottom:4px;}
.dk-rows{display:flex;gap:10px;font-size:10px;color:var(--muted);flex-wrap:wrap;}
.dk-rows span{color:var(--text);}
.charts-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;margin-bottom:16px;}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:16px;}
.ch-title{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;}
.ch-wrap{position:relative;height:180px;}
.bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.b-card{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:16px;}
.cr{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);}
.cr:last-child{border-bottom:none;}
.cr-l{display:flex;align-items:center;gap:8px;}
.cr-dot{width:9px;height:9px;border-radius:50%;}
.cr-nm{font-size:13px;font-weight:600;}
.cr-bar-w{flex:1;margin:0 14px;height:5px;background:var(--surface);border-radius:3px;overflow:hidden;}
.cr-bar{height:100%;border-radius:3px;transition:width .6s;}
.cr-v{font-family:var(--mono);font-size:11px;color:var(--muted);}
.del-item{background:var(--surface);border-radius:5px;padding:9px 12px;border-left:3px solid var(--danger);display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.di-po{font-family:var(--display);font-size:15px;color:var(--accent);}
.di-info{font-size:10px;color:var(--muted);margin-top:2px;}
.di-days{font-family:var(--display);font-size:22px;color:var(--danger);}

::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--surface);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE — below 768px
═══════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Hide desktop nav tabs, show mobile bottom nav */
  .nav-tabs { display: none !important; }
  nav { padding: 0 14px; height: 52px; }
  .nav-name { font-size: 15px; }
  .nav-sub { display: none; }
  #newShipBtn { padding: 6px 12px; font-size: 11px; }
  #actionsMenuBtn span { display: none; }
  #actionsMenuBtn { padding: 6px 10px; font-size: 13px; }
  .btn-hdr { padding: 5px 8px; font-size: 12px; }

  /* Pages fill screen minus top nav + bottom nav */
  .page { height: calc(100vh - 52px - 60px) !important; overflow-y: auto !important; display: none; flex-direction: column; }
  .page.active { display: flex !important; }
  body { overflow: hidden; }

  /* ── TRACKER PAGE ── */
  #trackerPage { flex-direction: column !important; }
  .kpi-bar { grid-template-columns: repeat(3,1fr) !important; }
  .kpi { padding: 8px 10px !important; }
  .kpi-value { font-size: 20px !important; }
  .kpi-sub { font-size: 9px !important; }

  .country-bar { padding: 6px 10px !important; gap: 4px !important; overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .country-bar::-webkit-scrollbar { display: none; }
  .search-inp { min-width: 120px; }

  /* Stack sidebar + content vertically on mobile */
  .tracker-body { grid-template-columns: 1fr !important; overflow: visible !important; display: block !important; }
  .sidebar { border-right: none !important; border-bottom: 1px solid var(--border); max-height: none !important; overflow: visible !important; background: var(--surface); }
  .content { padding: 12px !important; overflow: visible !important; }

  /* Shipment cards — full width, bigger tap area */
  .shipment-card { margin-bottom: 8px !important; }
  .card-top { padding: 12px 14px !important; }
  .card-po { font-size: 18px !important; }
  .card-body2 { grid-template-columns: 1fr 1fr !important; padding: 10px 14px !important; }

  /* Detail panel full width */
  .detail-panel { border-radius: 8px; }
  .detail-header { padding: 14px 16px !important; flex-direction: column; gap: 10px; }
  .detail-po { font-size: 24px !important; }
  .summary-grid { grid-template-columns: repeat(2,1fr) !important; }
  .stage-row { grid-template-columns: 1fr !important; }

  /* ── DASHBOARD PAGE ── */
  .dash-body { padding: 14px !important; }
  .dash-title { font-size: 22px !important; }
  .dash-kpi-row { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .dk-val { font-size: 24px !important; }
  .charts-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .ch-wrap { height: 140px !important; }
  .bottom-row { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ── COSTS PAGE ── */
  #costsPage .detail-header { flex-direction: column !important; align-items: flex-start !important; }
  /* Cost input rows — stack on mobile */
  [style*="grid-template-columns:200px 1fr 100px 80px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ── MODAL ── */
  .modal { width: calc(100vw - 24px) !important; max-height: 88vh !important; margin: 0 12px; }
  .modal-grid { grid-template-columns: 1fr !important; }

  /* ── REPORTS PAGE ── */
  #reportsPage > div > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  #reportsPage > div > div:first-child > div:last-child { margin-left: 0 !important; }

  /* ── OVERVIEW / DELIVERED ── */
  #overviewPage > div > div:first-child { flex-wrap: wrap !important; }
  #deliveredPage > div > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }

  /* ── NOTIFICATION PANEL ── */
  #notifPanel { width: calc(100vw - 16px) !important; right: 8px !important; left: 8px !important; max-height: 70vh !important; }

  /* ── BOTTOM NAV ── */
  #mobileBottomNav { display: flex !important; }

  /* Floating new shipment button */
  #mobileNewShipBtn { display: flex !important; }

  /* Hide desktop new shipment button on mobile */
  #newShipBtn { display: none !important; }
}

/* ── BOTTOM NAVIGATION BAR ── */
#mobileBottomNav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 250;
  align-items: stretch;
  justify-content: space-around;
  padding: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.mob-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 4px;
  transition: color .15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav-btn .mob-icon { font-size: 20px; line-height: 1; }
.mob-nav-btn.active { color: var(--accent); }
.mob-nav-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}
.mob-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  min-width: 15px;
  height: 15px;
  background: var(--danger);
  color: #fff;
  border-radius: 99px;
  font-size: 8px;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ── FLOATING NEW SHIPMENT BUTTON ── */
#mobileNewShipBtn {
  display: none;
  position: fixed;
  bottom: 72px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  border: none;
  font-size: 26px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 240;
  box-shadow: 0 4px 20px rgba(232,184,75,.4);
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
#mobileNewShipBtn:active { transform: scale(0.93); }

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
  .charts-row { grid-template-columns: 1fr 1fr !important; }
  .dash-kpi-row { grid-template-columns: repeat(2,1fr) !important; }
  .tracker-body { grid-template-columns: 240px 1fr !important; }
  nav { padding: 0 16px; }
}

/* Trade Type Tabs */
.trade-tab{padding:8px 16px;border:none;background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:1px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .15s;white-space:nowrap;flex-shrink:0;}
.trade-tab:hover{background:rgba(255,255,255,.04);}
#ttab-all.active{color:var(--text);border-bottom-color:var(--text);font-weight:700;}
#ttab-import.active{color:#4a9eff;border-bottom-color:#4a9eff;font-weight:700;}
#ttab-export.active{color:#00e5ff;border-bottom-color:#00e5ff;font-weight:700;}
#ttab-triangle.active{color:#f59e0b;border-bottom-color:#f59e0b;font-weight:700;}
#ttab-cross.active{color:#c084fc;border-bottom-color:#c084fc;font-weight:700;}
/* Trade type badge colors */
.trade-badge-import{background:rgba(74,158,255,.12);color:#4a9eff;border:1px solid rgba(74,158,255,.3);}
.trade-badge-export{background:rgba(0,229,255,.12);color:#00e5ff;border:1px solid rgba(0,229,255,.3);}
.trade-badge-triangle{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.3);}
.trade-badge-cross{background:rgba(192,132,252,.12);color:#c084fc;border:1px solid rgba(192,132,252,.3);}