/* =========================================================
   Jetra — 80% desktop scale + light / dark theme
   Load AFTER jetra.css and admin.css
   ========================================================= */

/* ---------- Desktop scale (90% on every page) ---------- */
:root { --z: 1; --vh100: 100vh; }
@media (min-width: 992px) {
  html { zoom: .9; }
  :root { --z: .9; --vh100: calc(100vh / .9); }
}
.min-vh-screen { min-height: var(--vh100); }

/* ---------- Theme tokens ---------- */
:root {
  --bg: #FFFFFF;
  --bg-soft: #F3F4F6;
  --surface: #FFFFFF;
  --surface-2: #F3F4F6;
  --surface-3: #E5E7EB;
  --text: #0B1220;
  --text-strong: #0A2540;
  --muted: #6B7280;
  --border: rgba(10, 37, 64, .08);
  --rail-bg: #061A2E;
}
[data-theme="dark"] {
  --bg: #050D17;
  --bg-soft: #08131F;
  --surface: #0E1B2B;
  --surface-2: #142538;
  --surface-3: #1C3149;
  --text: #DCE4EE;
  --text-strong: #F2F6FA;
  --muted: #8A9BB0;
  --border: rgba(255, 255, 255, .08);
  --rail-bg: #030A12;
  --j-grey: #142538;
  --j-grey-200: #22384F;
  --j-grey-400: #8A9BB0;
  --j-grey-600: #A9B8C9;
  --j-ink: #DCE4EE;
  --j-orange-100: rgba(255, 107, 0, .14);
  --j-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --j-shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* smooth switch */
body, .j-card, .kpi, .mini-kpi, .main, .navbar, .form-control, .form-select, .table-j td { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }

/* ---------- Dark overrides ---------- */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .bg-white { background: var(--surface) !important; }
[data-theme="dark"] .bg-grey, [data-theme="dark"] section.bg-grey { background: var(--bg-soft) !important; }
[data-theme="dark"] .text-navy, [data-theme="dark"] .sec-title, [data-theme="dark"] .kpi .num, [data-theme="dark"] .mini-kpi .n, [data-theme="dark"] .zone .zt, [data-theme="dark"] .stat3 b, [data-theme="dark"] .vt .t, [data-theme="dark"] .form-label { color: var(--text-strong) !important; }
[data-theme="dark"] .text-secondary { color: var(--muted) !important; }
[data-theme="dark"] .text-dark { color: var(--text) !important; }

[data-theme="dark"] .j-card, [data-theme="dark"] .kpi:not(.orange):not(.navy), [data-theme="dark"] .mini-kpi, [data-theme="dark"] .plan-mini:not(.navy):not(.orange),
[data-theme="dark"] .rider-card, [data-theme="dark"] .ship-row, [data-theme="dark"] .ship-mini, [data-theme="dark"] .plan:not(.pop), [data-theme="dark"] .lcard,
[data-theme="dark"] .detail, [data-theme="dark"] .callout, [data-theme="dark"] .loads, [data-theme="dark"] .ops, [data-theme="dark"] .float-card, [data-theme="dark"] .map-chip.light,
[data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .track-box, [data-theme="dark"] .work, [data-theme="dark"] .mobile-bar {
  background: var(--surface) !important; color: var(--text); border-color: var(--border) !important;
}
[data-theme="dark"] .j-card-grey, [data-theme="dark"] .zone, [data-theme="dark"] .stat3, [data-theme="dark"] .svc:not(.feat), [data-theme="dark"] .lcard.on, [data-theme="dark"] .ship-row .thumb,
[data-theme="dark"] .feature-btn .ic, [data-theme="dark"] .pkg-opt:not(.on), [data-theme="dark"] .tabs-pill, [data-theme="dark"] .seg, [data-theme="dark"] .ftabs button b { background-color: var(--surface-2) !important; }
[data-theme="dark"] .svc:hover { background: var(--surface) !important; }
[data-theme="dark"] .tabs-pill button.on, [data-theme="dark"] .seg.white { background: var(--surface-3) !important; color: var(--text-strong); }
[data-theme="dark"] .tabs-pill button, [data-theme="dark"] .ftabs button, [data-theme="dark"] .seg button { color: var(--muted); }
[data-theme="dark"] .seg button.on, [data-theme="dark"] .ftabs button.on { color: #fff; background: var(--j-orange) !important; }
[data-theme="dark"] .ship-row.on, [data-theme="dark"] .ship-mini.on { outline-color: var(--j-orange); }

[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--surface-2); color: var(--text); border-color: transparent; }
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--surface-3); color: var(--text-strong); border-color: var(--j-orange); }
[data-theme="dark"] .form-control::placeholder { color: #6E8299; }
[data-theme="dark"] .topbar .search .form-control, [data-theme="dark"] .toolbar .form-control, [data-theme="dark"] .toolbar .form-select { background-color: var(--surface-2) !important; }

[data-theme="dark"] .table-j { --bs-table-color: var(--text); }
[data-theme="dark"] .table-j td { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .table-j tbody tr:hover, [data-theme="dark"] .sel-row { background: var(--surface-2) !important; }
[data-theme="dark"] .table-j thead th { border-color: var(--border); }

[data-theme="dark"] .btn-light-j, [data-theme="dark"] .sq, [data-theme="dark"] .map-ctrl button, [data-theme="dark"] .mtools .lay, [data-theme="dark"] .pager a:not(.on) { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .btn-navy { background: #1D4B7A; }
[data-theme="dark"] .btn-navy:hover { background: #255C94; }
[data-theme="dark"] .btn-light.text-orange, [data-theme="dark"] .btn-light { background: var(--surface-2); border-color: transparent; color: var(--text); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

[data-theme="dark"] .pill-outline, [data-theme="dark"] .role-pill { background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .pill-delivered, [data-theme="dark"] .chip.dl { background: rgba(22,163,74,.16) !important; color: #4ADE80 !important; border-color: rgba(74,222,128,.3) !important; }
[data-theme="dark"] .pill-pending, [data-theme="dark"] .chip.up { background: rgba(245,158,11,.16) !important; color: #FBBF24 !important; border-color: rgba(251,191,36,.3) !important; }
[data-theme="dark"] .pill-pickup { background: rgba(37,99,235,.18); color: #7AA7FF; }
[data-theme="dark"] .ic-n { background: rgba(255,255,255,.08); color: var(--text-strong); }
[data-theme="dark"] .ic-g { background: rgba(22,163,74,.16); color: #4ADE80; }
[data-theme="dark"] .ic-b { background: rgba(37,99,235,.18); color: #7AA7FF; }
[data-theme="dark"] .ic-y { background: rgba(245,158,11,.16); color: #FBBF24; }
[data-theme="dark"] .ic-r { background: rgba(220,38,38,.18); color: #F87171; }

[data-theme="dark"] .j-map:not(.dark) { background-color: #071B30; background-image: url(../img/map-dark.svg); }
[data-theme="dark"] .meter, [data-theme="dark"] .zone .meter { background: var(--surface-3); }
[data-theme="dark"] .bar-chart .b:not(.hi) { background: var(--surface-3); }
[data-theme="dark"] .donut::after { background: var(--surface); }
[data-theme="dark"] .divider-dots, [data-theme="dark"] .stepper .ln, [data-theme="dark"] .timeline li::before { border-color: var(--surface-3); }
[data-theme="dark"] .stepper .s:not(.done):not(.now) { background: var(--surface-3); }
[data-theme="dark"] .timeline li .tdot { background: var(--surface); border-color: var(--surface-3); }
[data-theme="dark"] .border-top, [data-theme="dark"] .border, [data-theme="dark"] .cust { border-color: var(--border) !important; }
[data-theme="dark"] .feed li, [data-theme="dark"] .loads { border-color: var(--border) !important; }
[data-theme="dark"] .chat-box { background: #0B1724; }
[data-theme="dark"] .bub.in { background: var(--surface-3); color: var(--text); }
[data-theme="dark"] .bub.out { background: #0F5132; color: #E8FFF1; }
[data-theme="dark"] .integ, [data-theme="dark"] .drop, [data-theme="dark"] .slot { border-color: var(--surface-3); }
[data-theme="dark"] .set-nav .nav-link { color: var(--muted); }
[data-theme="dark"] .set-nav .nav-link.active { background: var(--surface-3); color: #fff; }
[data-theme="dark"] .label-4x6 { color: #0B1220; }

/* public site */
[data-theme="dark"] .j-nav.scrolled:not(.on-dark) { background: rgba(5,13,23,.9) !important; }
[data-theme="dark"] .j-nav:not(.on-dark) .nav-link { color: var(--text); }
[data-theme="dark"] .j-nav .brand img.logo-navy, [data-theme="dark"] img.logo-navy { content: url(../img/jetra-logo-white.png); }
[data-theme="dark"] .plan { border-color: var(--border); }
[data-theme="dark"] .step-num { background: rgba(255,107,0,.14); }
[data-theme="dark"] .channel.web { background: linear-gradient(140deg, #12345A, #1D4B7A); }
[data-theme="dark"] .j-card-dark { background: linear-gradient(160deg, #11304F, #0A1E33); }
[data-theme="dark"] .kpi.navy, [data-theme="dark"] .plan-mini.navy, [data-theme="dark"] .plan.pop, [data-theme="dark"] .svc.feat { background: #12345A !important; }
[data-theme="dark"] .p-head, [data-theme="dark"] .hero { background-color: #030A12; }
[data-theme="dark"] .legal h2, [data-theme="dark"] .legal h3 { color: var(--text-strong); }

/* ---------- Theme toggle button ---------- */
.theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 0; display: inline-grid; place-items: center; background: #fff; color: var(--j-navy); box-shadow: 0 2px 10px rgba(10,37,64,.08); position: relative; overflow: hidden; flex: none; cursor: pointer; }
.theme-toggle i { position: absolute; transition: transform .45s cubic-bezier(.6,-.3,.3,1.4), opacity .3s; font-size: 1.1rem; }
.theme-toggle .bi-moon-stars-fill { transform: translateY(0); }
.theme-toggle .bi-sun-fill { transform: translateY(140%); opacity: 0; color: #FFB020; }
[data-theme="dark"] .theme-toggle { background: var(--surface-2); color: #fff; box-shadow: none; }
[data-theme="dark"] .theme-toggle .bi-moon-stars-fill { transform: translateY(-140%); opacity: 0; }
[data-theme="dark"] .theme-toggle .bi-sun-fill { transform: translateY(0); opacity: 1; }
.theme-toggle.on-dark { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.theme-switch { display: inline-flex; align-items: center; gap: .3rem; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.theme-switch button { border: 0; background: transparent; border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; font-weight: 600; color: var(--muted); display: inline-flex; gap: .35rem; align-items: center; }
.theme-switch button.on { background: var(--surface); color: var(--text-strong); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
[data-theme="dark"] .feature-btn { color: var(--text); }
[data-theme="dark"] .feature-btn .ic { color: var(--text-strong); }
[data-theme="dark"] .feature-btn:hover .ic { background: var(--j-orange) !important; color: #fff; }

/* ---------- Overlays always cover the whole screen (also at 80% zoom) ---------- */
.modal-backdrop, .offcanvas-backdrop { position: fixed; inset: 0 !important; width: auto !important; height: auto !important; }
.modal { inset: 0; width: auto !important; height: auto !important; }
.modal-backdrop.show { opacity: .55; }
.offcanvas.offcanvas-end, .offcanvas.offcanvas-start { top: 0; bottom: 0; height: auto; }

/* ---------- Toasts ---------- */
.j-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 2000; display: grid; gap: 10px; pointer-events: none; }
.j-toast { pointer-events: auto; min-width: 260px; max-width: 380px; display: flex; gap: .7rem; align-items: center; padding: .85rem 1rem; border-radius: 16px; background: var(--j-navy); color: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.25); font-size: .88rem; font-weight: 500; }
.j-toast i { color: var(--j-orange); font-size: 1.15rem; }
.j-toast.ok i { color: #4ADE80; }
.j-toast.err i { color: #F87171; }
@media (max-width: 991.98px) { .j-toasts { left: 12px; right: 12px; bottom: 96px; } .j-toast { max-width: none; } }

/* ---------- Map zoom layer ---------- */
.map-inner { position: absolute; inset: 0; background: inherit; transform-origin: 50% 50%; transition: scale .35s ease; }
.j-map { overflow: hidden; }

/* ---------- Notifications dropdown ---------- */
.notif-menu { width: 340px; padding: .5rem; border-radius: 20px !important; }
.notif-menu .n-item { display: flex; gap: .7rem; padding: .65rem; border-radius: 14px; text-decoration: none; color: inherit; }
.notif-menu .n-item:hover { background: var(--j-grey); }
.notif-menu .n-item.unread .n-t::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--j-orange); margin-left: .4rem; vertical-align: middle; }
.notif-dot { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--j-orange); border: 2px solid #fff; }
[data-theme="dark"] .notif-dot { border-color: var(--surface); }
.log-type { font-size: .68rem; font-weight: 700; padding: .22rem .6rem; border-radius: 8px; white-space: nowrap; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--j-grey-400); }
@media print { .rail, .topbar, .bnav, .j-toasts, .btn, .rail-backdrop { display: none !important; } body.console .main { margin: 0 !important; } }
.pin.pin-flat { transform: none !important; width: 0; height: 0; }

.topbar { position: relative; z-index: 1030; }
.topbar .dropdown-menu, .notif-menu { z-index: 1070 !important; }

/* pin-dest anchor: the teardrop tip sits exactly on its map point */
.j-map .pin:has(> .pin-dest) { width: 0; height: 0; transform: none; }
.j-map .pin > .pin-dest { transform: translate(-50%, -121%) rotate(-45deg); }
.j-map svg.route { overflow: visible; }
/* area tags drawn by routes.js on top of the route */
.route-tag { position: absolute; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; white-space: nowrap;
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--j-navy); line-height: 1.25;
  background: #fff; border-radius: 999px; padding: .2em .75em; box-shadow: 0 4px 14px rgba(10,37,64,.14); }
.route-tag.end { background: var(--j-orange); color: #fff; }
.j-map.dark .route-tag:not(.end), [data-theme="dark"] .j-map .route-tag:not(.end) { background: #0D2A47; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.map-inner .route-tag { position: absolute; }
/* profile photo / avatar picker (avatar.js) */
.avatar-i.has-photo { background-size: cover !important; background-position: center !important; background-color: var(--j-grey) !important; color: transparent !important; }
.ap-current { width: 76px !important; height: 76px !important; font-size: 1.3rem !important; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--j-orange-100); }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: .6rem; max-width: 560px; }
.ap-opt { border: 0; padding: 0; background: none; border-radius: 50%; aspect-ratio: 1; transition: transform .15s; outline: 3px solid transparent; outline-offset: 2px; }
.ap-opt img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.ap-opt:hover { transform: translateY(-2px); }
.ap-opt.on { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--j-orange) !important; position: relative; }
.ap-opt.on::after { content: "\F26E"; font-family: bootstrap-icons; position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--j-orange); color: #fff; font-size: .8rem; display: grid; place-items: center; border: 2px solid #fff; }
[data-theme="dark"] .ap-current { box-shadow: 0 0 0 4px var(--surface-2, #0F2A44), 0 0 0 6px rgba(255,107,0,.35); }
/* My Shipments (customer) */
.pill-cancel { background: #FEE2E2; color: #DC2626; }
[data-theme="dark"] .pill-cancel { background: rgba(220,38,38,.18); color: #FCA5A5; }
@media (min-width: 1200px) { .ms-side { position: sticky; top: 20px; } }
@media print { body.printing-rcpt > *:not(.modal) { display: none !important; } }
@media print { body.printing-rcpt .modal-backdrop { display: none !important; } body.printing-rcpt #rcptModal { position: static; display: block !important; } body.printing-rcpt #rcptModal .modal-dialog { max-width: 520px; margin: 0 auto; transform: none !important; } }
@media (max-width: 575.98px) { .ms-tools { width: 100%; } .ms-tools .btn { flex: 1; } }