/* ====================================================================
   Atlas — Design System
   Full-screen split login · gradient welcome (left) + form (right).
   Sky-blue → indigo. Clean, modern, dynamic.
   ==================================================================== */

:root {
  --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-200:#bae6fd; --sky-300:#7dd3fc;
  --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1;
  --indigo-400:#818cf8; --indigo-500:#6366f1; --indigo-600:#4f46e5;

  --ink:#0b1220; --ink-soft:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e6edf5; --line-2:#eef3f9; --surface:#ffffff; --canvas:#eef3fb;

  --ok:#059669; --ok-bg:#ecfdf5; --ok-line:#a7f3d0;
  --err:#dc2626; --err-bg:#fef2f2; --err-line:#fecaca;
  --info:var(--sky-700); --info-bg:var(--sky-50); --info-line:var(--sky-200);

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --pill:999px;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 6px 18px rgba(15,23,42,.08);
  --ring:0 0 0 4px rgba(14,165,233,.18);
  --grad-hero:linear-gradient(140deg, #0ea5e9 0%, #3b82f6 48%, #4f46e5 100%);
  --grad-btn:linear-gradient(135deg, #0ea5e9, #4f46e5);
  --t:170ms cubic-bezier(.4,0,.2,1);
  --t-slow:420ms cubic-bezier(.22,1,.36,1);
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --display:"Inter","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --chip-bg:#f1f5f9;
}

* { box-sizing:border-box; }
html,body { height:100%; }

/* ---------- slim brand scrollbars — the one template, used everywhere ---------- */
* { scrollbar-width:thin; scrollbar-color:#38bdf8 transparent; }
*::-webkit-scrollbar { width:6px; height:6px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:linear-gradient(135deg, #38bdf8, #4f46e5); border-radius:999px; }
*::-webkit-scrollbar-thumb:hover { background:linear-gradient(135deg, #0ea5e9, #4338ca); }
*::-webkit-scrollbar-corner { background:transparent; }
body { margin:0; font-family:var(--font); font-size:14px; line-height:1.55; color:var(--ink);
  background:var(--canvas); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:var(--sky-600); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0 0 .4em; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
::selection { background:var(--sky-200); }
[hidden] { display:none !important; }

@keyframes rise { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@keyframes fade { from{opacity:0;} to{opacity:1;} }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(26px,-22px) scale(1.1);} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,20px) scale(1.06);} }
.r-1{animation:rise .5s var(--t-slow) both;} .r-2{animation:rise .5s .08s var(--t-slow) both;}
.r-3{animation:rise .5s .16s var(--t-slow) both;} .r-4{animation:rise .5s .24s var(--t-slow) both;}

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 26px;
  border:1.5px solid transparent; border-radius:var(--pill); font:inherit; font-weight:650; font-size:14px;
  letter-spacing:.02em; cursor:pointer; white-space:nowrap;
  transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t); }
.btn:active { transform:translateY(1px) scale(.995); }
.btn:focus-visible { outline:none; box-shadow:var(--ring); }
.btn-primary { background:var(--grad-btn); color:#fff; box-shadow:0 12px 24px -8px rgba(79,70,229,.5); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(79,70,229,.55); text-decoration:none; }
.btn-outline { background:#fff; color:var(--indigo-600); border-color:#dfe3f3; }
.btn-outline:hover { background:#f5f6ff; border-color:var(--indigo-400); text-decoration:none; }
.btn-ghost { background:#fff; color:var(--ink-soft); border-color:var(--line); }
.btn-ghost:hover { background:var(--sky-50); border-color:var(--sky-200); color:var(--sky-700); text-decoration:none; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

/* ---------- Forms ---------- */
.field { margin-bottom:12px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px; }
.input { width:100%; height:46px; padding:0 16px; font:inherit; font-size:14.5px; color:var(--ink);
  background:#f7f9fc; border:1.5px solid #e9eef6; border-radius:var(--r);
  transition:border-color var(--t), box-shadow var(--t), background var(--t); }
.input:hover { border-color:var(--sky-300); }
.input:focus { outline:none; background:#fff; border-color:var(--sky-500); box-shadow:var(--ring); }
.input::placeholder { color:#aab6c6; }
.input-ic { position:relative; display:flex; align-items:center; }
.input-ic .ic-lead { position:absolute; left:15px; color:var(--faint); pointer-events:none; display:flex; }
.input-ic .input { padding-left:44px; }
.input-ic.has-toggle .input { padding-right:46px; }
.input-ic .toggle { position:absolute; right:8px; width:34px; height:34px; display:grid; place-items:center; border:none; background:transparent;
  color:var(--faint); cursor:pointer; border-radius:9px; transition:color var(--t), background var(--t); }
.input-ic .toggle:hover { color:var(--sky-600); background:var(--sky-50); }
.input-ic .toggle.on { color:var(--sky-600); }
.input-ic .toggle svg { width:18px; height:18px; }

.row-between { display:flex; align-items:center; justify-content:space-between; margin:4px 0 16px; }
.checkline { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-soft); user-select:none; cursor:pointer; }
.checkline input { width:17px; height:17px; accent-color:var(--indigo-600); }
.link-sm { font-size:13px; font-weight:600; color:var(--indigo-600); }

/* ---------- Cards / alerts / badges ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.card-pad { padding:24px; }
.alert { display:flex; gap:10px; align-items:flex-start; padding:12px 15px; border-radius:var(--r);
  font-size:13.5px; margin-bottom:15px; border:1px solid transparent; animation:rise .35s var(--t-slow) both; }
.alert-success { background:var(--ok-bg); color:#065f46; border-color:var(--ok-line); }
.alert-error   { background:var(--err-bg); color:#991b1b; border-color:var(--err-line); }
.alert-info    { background:var(--info-bg); color:var(--sky-700); border-color:var(--info-line); }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; }
.badge-sky{ background:var(--sky-100); color:var(--sky-700); } .badge-ok{ background:var(--ok-bg); color:#047857; }
.badge-muted{ background:#f1f5f9; color:var(--muted); }

/* ====================================================================
   AUTH — full-screen split
   ==================================================================== */
.auth { min-height:100vh; display:grid; grid-template-columns:60% 40%; background:var(--surface); }

/* LEFT — welcome: logistics photo + gradient overlay */
.auth-welcome { position:relative; overflow:hidden; color:#fff;
  background:
    linear-gradient(150deg, rgba(8,78,120,.86) 0%, rgba(37,99,235,.80) 50%, rgba(79,70,229,.88) 100%),
    url('/img/logistics-bg.jpg') center/cover no-repeat;
  padding:48px 58px; display:flex; flex-direction:column; justify-content:space-between; }
.auth-welcome .foot { z-index:1; }
.auth-welcome::before { display:none; }
.auth-welcome .orb { position:absolute; border-radius:50%; z-index:0; filter:blur(8px); }
.auth-welcome .orb.o1 { width:300px; height:300px; top:-90px; right:-70px; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 65%); animation:drift1 16s ease-in-out infinite; }
.auth-welcome .orb.o2 { width:260px; height:260px; bottom:-90px; left:-60px; background:radial-gradient(circle at 60% 60%, rgba(129,140,248,.45), transparent 65%); animation:drift2 19s ease-in-out infinite; }
.auth-welcome > * { position:relative; z-index:1; }

.brandlock { display:flex; align-items:center; gap:12px; }
.brandlock .badge-img { width:46px; height:46px; border-radius:13px; }
.brandlock .wm b { display:block; font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.brandlock .wm span { font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.brandlock.on-dark .wm b { color:#fff; }
.brandlock.on-dark .wm span { color:rgba(255,255,255,.82); }
.brandlock.on-dark .badge-img { box-shadow:0 12px 26px -8px rgba(0,0,0,.45); }

.auth-welcome .hero h2 { color:#fff; font-size:52px; line-height:1.05; letter-spacing:-.03em; margin:0 0 16px; max-width:none; }
.auth-welcome .hero h2 em { font-style:normal; color:#bae6fd; }
.auth-welcome .hero p { color:rgba(255,255,255,.9); font-size:16px; max-width:62ch; }

.w-modes { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.w-mode { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-size:12.5px; font-weight:600;
  transition:background var(--t), border-color var(--t); }
.w-mode:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.38); }
.w-mode svg { width:15px; height:15px; }

/* feature cards grid (left panel) */
.w-cards { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:none; }
.w-cardi { display:flex; gap:13px; align-items:center; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px);
  transition:transform var(--t), background var(--t), border-color var(--t); }
.w-cardi:hover { transform:translateY(-3px); background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.34); }
.w-cardi .ci { width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.2); flex:0 0 auto; }
.w-cardi .ci svg { width:20px; height:20px; }
.w-cardi .ct strong { display:block; font-size:14px; font-weight:700; line-height:1.2; margin-bottom:2px; }
.w-cardi .ct small { font-size:12px; color:rgba(255,255,255,.82); }

/* ---- SPA auth views (shift without reload) ---- */
.views .view { display:none; }
.views .view.is-active { display:block; animation:view-in .36s ease-out both; }
@keyframes view-in { from{opacity:0; transform:translateX(26px);} to{opacity:1; transform:none;} }

.stepbar { display:flex; gap:7px; margin-bottom:18px; }
.stepbar i { width:30px; height:4px; border-radius:3px; background:var(--line); transition:all .35s ease; }
.stepbar i.on { background:var(--indigo-500); }
.stepbar i.done { background:var(--sky-500); }

.backlink { display:inline-flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
  color:var(--muted); font:inherit; font-weight:600; font-size:13px; padding:0; margin-bottom:16px; }
.backlink:hover { color:var(--sky-700); }
.backlink svg { width:15px; height:15px; }

.form-alert { display:flex; gap:9px; align-items:center; padding:11px 14px; border-radius:var(--r);
  font-size:13px; margin-bottom:15px; background:var(--err-bg); color:#991b1b; border:1px solid var(--err-line);
  animation:rise .3s var(--t-slow) both; }
.form-alert.ok { background:var(--ok-bg); color:#065f46; border-color:var(--ok-line); }
.form-alert svg { width:17px; height:17px; flex:0 0 auto; }

.link-btn { background:none; border:none; cursor:pointer; color:var(--indigo-600); font:inherit; font-weight:600; font-size:13px; padding:0; }
.link-btn:hover { text-decoration:underline; }

.success-box { text-align:center; padding:12px 0 6px; }
.success-box .sx { width:66px; height:66px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center;
  background:var(--ok-bg); color:var(--ok); animation:rise .4s var(--t-slow) both; }
.success-box .sx svg { width:30px; height:30px; }
.success-box h3 { font-size:21px; margin:0 0 8px; }
.success-box p { color:var(--muted); font-size:13.5px; margin:0 0 22px; }

.auth-welcome .foot { font-size:12px; opacity:.72; }

/* RIGHT — form */
.auth-form-wrap { display:flex; align-items:center; justify-content:center; padding:48px 36px; background:var(--surface); }
.auth-form { width:100%; max-width:388px; animation:rise .5s .06s var(--t-slow) both; }
.auth-form .logo-top { height:30px; width:auto; margin-bottom:24px; }
.auth-form .eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--indigo-500); }
.auth-form h1 { font-size:26px; margin:8px 0 5px; }
.auth-form .sub { color:var(--muted); font-size:14px; margin:0 0 18px; }
.auth-form .form-foot { margin-top:22px; font-size:12.5px; color:var(--faint); text-align:center; }

/* dev OTP + boxes */
.dev-otp { margin-top:16px; padding:13px 15px; border:1px dashed var(--sky-300); background:var(--sky-50);
  border-radius:var(--r); font-size:13px; color:var(--sky-700); }
.dev-otp b { font-size:22px; letter-spacing:6px; font-weight:800; font-variant-numeric:tabular-nums; }
.otp-row { display:flex; gap:10px; justify-content:space-between; margin-bottom:18px; }
.otp-row input { width:100%; height:58px; text-align:center; font-size:24px; font-weight:700; color:var(--ink);
  background:#f7f9fc; border:1.5px solid #e9eef6; border-radius:var(--r); font-variant-numeric:tabular-nums;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t); }
.otp-row input:focus { outline:none; background:#fff; border-color:var(--sky-500); box-shadow:var(--ring); transform:translateY(-2px); }

/* ====================================================================
   APP SHELL
   ==================================================================== */
:root { --head-h:48px; --foot-h:0px; --rail-w:56px; --rail-w-open:226px; }
body.shell { padding:var(--head-h) 0 0; }

/* ---- fixed header (no border) ---- */
.apphead { position:fixed; top:0; left:0; right:0; height:var(--head-h); z-index:60;
  background:var(--surface); display:flex; align-items:center; gap:14px; padding:0 16px; }
.head-burger { display:none; width:38px; height:38px; border:none; background:transparent; border-radius:10px;
  color:var(--ink-soft); cursor:pointer; place-items:center; }
.head-burger:hover { background:var(--sky-50); color:var(--sky-700); }
.apphead-brand { display:flex; align-items:center; gap:11px; }
.apphead-brand:hover { text-decoration:none; }
.apphead-brand .mark img { width:31px; height:31px; border-radius:8px; display:block; }
.apphead-word { display:flex; flex-direction:column; justify-content:center; gap:1px; }
.apphead-word b { font-family:var(--display); font-size:14px; font-weight:800; letter-spacing:0; color:var(--ink); line-height:1.05; }
.apphead-word b i { font-style:normal; color:var(--sky-600); }
.apphead-word small { font-family:var(--mono); font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); line-height:1; }
.head-burger svg, .head-icbtn svg { width:20px; height:20px; }
.rail-ico svg { width:18px; height:18px; }
.head-pop a svg { width:16px; height:16px; }
.toast .ti svg { width:18px; height:18px; }

.head-upload { display:flex; align-items:center; gap:9px; height:32px; padding:0 13px 0 9px; background:var(--chip-bg); border-radius:9px; }
.head-upload .ui { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--sky-100); color:var(--sky-600); flex:0 0 auto; }
.head-upload .ui svg { width:12px; height:12px; }
.head-upload .ut { display:flex; flex-direction:column; gap:1px; line-height:1.15; }
.head-upload .ut small { font-family:var(--mono); font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.head-upload .ut b { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.head-out { width:34px; height:34px; border-radius:9px; background:var(--err); color:#fff; display:grid; place-items:center; margin-left:4px; }
.head-out:hover { background:#b91c1c; text-decoration:none; }
.head-out svg { width:18px; height:18px; }

.head-search { flex:1; display:flex; justify-content:center; }
.head-search form { position:relative; width:100%; max-width:440px; }
.head-search .ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--faint); display:flex; }
.head-search input { width:100%; height:38px; padding:0 14px 0 40px; border:1.5px solid var(--line); border-radius:var(--pill);
  background:#f7f9fc; font:inherit; font-size:13.5px; color:var(--ink); transition:border-color var(--t), box-shadow var(--t), background var(--t); }
.head-search input:focus { outline:none; background:#fff; border-color:var(--sky-400); box-shadow:var(--ring); }

.apphead-right { display:flex; align-items:center; gap:6px; }
.head-icbtn { position:relative; width:34px; height:34px; border:none; background:transparent; border-radius:9px;
  color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; transition:background var(--t), color var(--t); }
.head-icbtn:hover { background:var(--sky-50); color:var(--sky-700); }
.head-dot { position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--err); border:2px solid #fff; }

.head-clock { display:flex; align-items:center; gap:9px; height:32px; padding:0 13px 0 11px; background:var(--chip-bg); border-radius:9px; }
.head-clock .d { width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto; box-shadow:0 0 0 3px rgba(5,150,105,.14); }
.head-clock span:not(.d) { display:flex; flex-direction:column; gap:1px; line-height:1.15; }
.head-clock b { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.head-clock small { font-family:var(--mono); font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }

.head-me { position:relative; }
.head-me-btn { display:flex; align-items:center; gap:9px; background:transparent; border:none; cursor:pointer; padding:4px 10px 4px 4px; border-radius:999px; transition:background var(--t); }
.head-me-btn:hover { background:var(--chip-bg); }
.head-me .av { width:30px; height:30px; border-radius:50%; background:var(--grad-btn); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; }
.head-me .who { text-align:left; }
.head-me .who b { display:block; font-size:12px; font-weight:600; line-height:1.2; color:var(--ink); }
.head-me .who span { font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--faint); text-transform:uppercase; }

.head-pop { position:absolute; top:calc(100% + 9px); right:0; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--sh-3); min-width:216px; padding:7px; opacity:0; transform:translateY(-6px);
  pointer-events:none; transition:opacity var(--t), transform var(--t); z-index:70; }
.head-pop.open { opacity:1; transform:none; pointer-events:auto; }
.head-pop .pop-head { padding:9px 11px 11px; border-bottom:1px solid var(--line-2); margin-bottom:5px; }
.head-pop .pop-head b { display:block; font-size:13.5px; } .head-pop .pop-head span { font-size:11.5px; color:var(--muted); text-transform:capitalize; }
.head-pop a { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; color:var(--ink-soft); font-size:13.5px; font-weight:550; }
.head-pop a:hover { background:var(--sky-50); color:var(--sky-700); text-decoration:none; }
.head-pop.panel { min-width:270px; padding:0; }
.head-pop.panel .pt { padding:13px 15px; border-bottom:1px solid var(--line-2); font-weight:700; font-size:13px; }
.head-pop.panel .pe { padding:30px 16px; text-align:center; color:var(--muted); font-size:13px; }

/* ---- collapsible icon rail ---- */
.rail { position:fixed; top:var(--head-h); bottom:0; left:0; width:var(--rail-w); z-index:50;
  background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; transition:width var(--t); }
.rail:hover, html[data-rail="open"] .rail { width:var(--rail-w-open); box-shadow:var(--sh-2); }
.rail-nav { flex:1; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; padding:6px 8px 8px; }
.rail-item { display:flex; align-items:center; gap:12px; height:38px; padding:0 9px; border-radius:9px; color:var(--ink-soft);
  font-weight:550; font-size:12.5px; white-space:nowrap; margin-bottom:2px; transition:background var(--t), color var(--t); }
.rail-item:hover { background:var(--sky-50); color:var(--sky-700); text-decoration:none; }
.rail-item.active { background:var(--grad-btn); color:#fff; box-shadow:0 8px 16px -10px rgba(79,70,229,.7); }
.rail-ico { width:22px; display:grid; place-items:center; flex:0 0 auto; margin:0 auto; }
.rail:hover .rail-ico, html[data-rail="open"] .rail-ico { margin:0; }
.rail-label { opacity:0; text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; font-weight:600; transition:opacity var(--t); }
.rail:hover .rail-label, html[data-rail="open"] .rail-label { opacity:1; }
/* the pin is a nav-tab-style button, pushed to the bottom */
.rail-pin { margin-top:auto; width:auto; border:none; background:transparent; font:inherit; cursor:pointer; color:var(--muted); }
.rail-pin .rail-ico svg { transition:transform var(--t); }
html[data-rail="open"] .rail-pin { color:var(--sky-700); }
html[data-rail="open"] .rail-pin .rail-ico svg { transform:rotate(45deg); }

/* ---- content + footer ---- */
.content { margin-left:var(--rail-w); padding:24px 26px; min-height:calc(100vh - var(--head-h)); transition:margin-left var(--t); animation:fade .4s var(--t-slow) both; }
html[data-rail="open"] .content { margin-left:var(--rail-w-open); }

/* ---- toasts ---- */
.toast-dock { position:fixed; right:20px; bottom:16px; z-index:80; display:flex; flex-direction:column; gap:10px; }
.toast { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-3); font-size:13.5px; min-width:250px; max-width:360px; animation:rise .3s var(--t-slow) both; }
.toast.ok { border-color:var(--ok-line); } .toast.ok .ti { color:var(--ok); }
.toast.err { border-color:var(--err-line); } .toast.err .ti { color:var(--err); }
.toast.info .ti { color:var(--sky-600); }
.toast .ti { display:flex; } .toast .tx { flex:1; color:var(--ink-soft); }
.toast .tc { background:none; border:none; color:var(--faint); cursor:pointer; padding:2px; font-size:15px; line-height:1; }

.page-head { margin-bottom:18px; } .page-head .crumb { font-size:12px; color:var(--muted); }
.table-wrap { overflow:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--sh-1); }
table.data { width:100%; border-collapse:collapse; font-size:13px; }
table.data th, table.data td { text-align:left; padding:12px 15px; border-bottom:1px solid var(--line-2); white-space:nowrap; }
table.data th { background:#f7fafd; color:var(--ink-soft); font-weight:650; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
table.data tbody tr { transition:background var(--t); } table.data tbody tr:hover { background:var(--sky-50); }
table.data tbody tr:last-child td { border-bottom:none; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.stat { padding:20px; transition:transform var(--t), box-shadow var(--t); }
.stat:hover { transform:translateY(-2px); box-shadow:var(--sh-2); }
.stat .k { font-size:12px; color:var(--muted); font-weight:600; }
.stat .v { font-size:30px; font-weight:800; letter-spacing:-.03em; margin-top:4px; }
.stat .t { font-size:12px; margin-top:6px; }
.muted{color:var(--muted);} .mt-0{margin-top:0;} .mb-0{margin-bottom:0;}

/* ====================================================================
   DATA UPLOAD + UPLOAD CONTROLLER
   ==================================================================== */
.up-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:1100px){ .up-grid { grid-template-columns:1fr; } }

.sheet-pick { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:8px 0 14px; }
.sheet-group-label, .ctl-group-label { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); margin:14px 0 2px; }
.ctl-group-label { width:100%; margin:6px 0 0; }
.sheet-opt { position:relative; text-align:left; padding:11px 13px; border-radius:12px; cursor:pointer; font:inherit;
  background:#f7f9fc; border:1.5px solid #e9eef6; transition:border-color var(--t), background var(--t), transform var(--t); }
.sheet-opt:hover { border-color:var(--sky-300); background:#fff; }
.sheet-opt.on { border-color:var(--sky-500); background:var(--sky-50); box-shadow:var(--ring); }
.sheet-opt b { display:block; font-size:13px; color:var(--ink); }
.sheet-opt small { display:block; font-size:10.5px; color:var(--muted); margin-top:3px; }
.sheet-opt .badge { position:absolute; top:8px; right:8px; font-size:10px; padding:2px 7px; }

.drop { border:2px dashed #d7e2ef; border-radius:var(--r-lg); background:#f9fbfe; padding:26px 18px; text-align:center;
  cursor:pointer; transition:border-color var(--t), background var(--t); outline:none; }
.drop:hover, .drop:focus-visible, .drop.over { border-color:var(--sky-400); background:var(--sky-50); }
.drop-idle svg { width:30px; height:30px; color:var(--sky-500); margin-bottom:6px; }
.drop-idle b { display:block; font-size:13.5px; color:var(--ink-soft); }
.drop-idle span { font-size:12px; color:var(--muted); }
.drop-file b { font-size:13.5px; color:var(--ink); margin-right:8px; }
.drop-file span { font-family:var(--mono); font-size:11px; color:var(--muted); margin-right:12px; }

.up-mode { display:flex; flex-direction:column; gap:7px; margin:14px 2px; }
.up-mode .checkline span { font-size:12.5px; color:var(--muted); }
.up-mode .checkline b { color:var(--ink); font-weight:650; }
.up-actions { display:flex; align-items:center; gap:14px; }
.up-actions .btn { height:42px; }
#upHint { font-size:12.5px; }

.up-progress { margin-top:16px; }
.up-bar { height:10px; border-radius:999px; background:#eef2f8; overflow:hidden; }
.up-bar i { display:block; height:100%; width:0; border-radius:999px; background:var(--grad-btn); transition:width .45s ease; }
.up-pct { display:flex; justify-content:space-between; margin-top:7px; font-size:12px; color:var(--muted); }
.up-pct b { font-family:var(--mono); color:var(--sky-700); }

.up-result { margin-top:14px; }
.up-ok { padding:13px 15px; border-radius:var(--r); background:var(--ok-bg); border:1px solid var(--ok-line); font-size:13px; color:#065f46; }
.up-ok .badge { margin:0 2px; }
.up-warn { margin-top:8px; font-size:12px; color:#92400e; }
.up-err { padding:13px 15px; border-radius:var(--r); background:var(--err-bg); border:1px solid var(--err-line); font-size:13px; color:#991b1b; }
.badge-err { background:var(--err-bg); color:var(--err); }

.up-side-head { padding:16px 18px 12px; font-weight:700; font-size:13.5px; }
.table-flat { border:none; border-top:1px solid var(--line-2); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:none; }

/* ---- controller ---- */
.ctl-tabs { display:flex; flex-wrap:wrap; gap:9px; }
.ctl-tab { text-align:left; padding:9px 14px; border-radius:11px; cursor:pointer; font:inherit;
  background:#f7f9fc; border:1.5px solid #e9eef6; transition:border-color var(--t), background var(--t); }
.ctl-tab:hover { border-color:var(--sky-300); background:#fff; }
.ctl-tab.on { border-color:var(--sky-500); background:var(--sky-50); box-shadow:var(--ring); }
.ctl-tab b { display:block; font-size:12.5px; color:var(--ink); }
.ctl-tab small { font-family:var(--mono); font-size:9.5px; color:var(--muted); }

.ctl-meta { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:16px; }
/* segmented toggle — groove track, filled active pill */
.seg { display:inline-flex; align-items:center; background:#e8eef7; border:none; border-radius:999px;
  padding:3px; gap:2px; }
.seg button { appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; height:24px; padding:0 13px; border-radius:999px;
  font-family:inherit; font-size:10px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  transition:background var(--t), color var(--t), box-shadow var(--t); }
.seg button:hover:not(.on) { color:var(--sky-700); background:#fff; }
.seg button.on { background:var(--grad-btn); color:#fff; box-shadow:0 2px 6px -2px rgba(79,70,229,.5); }
.field-inline { display:flex; align-items:center; gap:8px; }
.field-inline label { font-size:11.5px; font-weight:600; color:var(--muted); }
.input-sm { height:34px; padding:0 10px; font-size:13px; width:auto; }
.mono-chip { font-family:var(--mono); font-size:11px; background:var(--chip-bg); border-radius:7px; padding:5px 9px; color:var(--ink-soft); }

.ctl-table th, .ctl-table td { padding:6px 8px; }
.input-cell { height:32px; padding:0 9px; font-size:12.5px; border-radius:8px; background:#fff; min-width:110px; }
.input-cell.mono, .f-name { font-family:var(--mono); font-size:11.5px; }
.f-ref { min-width:46px; width:52px; text-align:center; }
.ctl-idx { font-family:var(--mono); font-size:10.5px; }
.row-del { width:26px; height:26px; border:none; border-radius:7px; background:transparent; color:var(--faint);
  font-size:15px; cursor:pointer; line-height:1; }
.row-del:hover { background:var(--err-bg); color:var(--err); }
.ctl-actions { display:flex; align-items:center; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2); }
.ctl-actions .btn { height:40px; }

.rule-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:900px){ .rule-grid { grid-template-columns:1fr; } }
.rule-h { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.rule-maprow { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rule-maprow .rm-from { flex:1; }
.rm-arrow { color:var(--faint); }
.rule-cmp { display:flex; flex-wrap:wrap; gap:12px; padding:4px 0; }
.rule-cmp .checkline span { font-family:var(--mono); font-size:11.5px; }

/* ---- people ---- */
.ppl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.btn-sm { height:38px; padding:0 18px; font-size:13px; }
.pw-cell { white-space:nowrap; }
.pw-dots { font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:1px; }
.pw-dots.show { color:var(--ink); letter-spacing:0; }
.pw-eye { width:26px; height:26px; border:none; background:transparent; border-radius:7px; color:var(--faint);
  cursor:pointer; vertical-align:middle; margin-left:6px; display:inline-grid; place-items:center; }
.pw-eye:hover { background:var(--sky-50); color:var(--sky-600); }
.pw-eye.on { color:var(--sky-600); }
.pw-eye svg { width:15px; height:15px; }

.modal-wrap { position:fixed; inset:0; z-index:90; background:rgba(11,18,32,.45); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:fade .18s ease both; }
.modal { background:#fff; border-radius:var(--r-lg); box-shadow:0 24px 60px -12px rgba(15,23,42,.35);
  width:100%; max-width:460px; padding:20px 22px; animation:rise .25s var(--t-slow) both; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-head b { font-size:15.5px; }
.modal-x { width:30px; height:30px; border:none; background:transparent; border-radius:8px; font-size:17px;
  color:var(--faint); cursor:pointer; }
.modal-x:hover { background:var(--err-bg); color:var(--err); }
.modal .input, .modal select.input { height:40px; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.radio-row { display:flex; gap:20px; padding:8px 2px; }
.pw-gen { display:flex; gap:8px; }
.pw-gen .input { flex:1; }
.pw-gen .btn { height:40px; padding:0 14px; flex:0 0 auto; }
.pw-note { font-weight:500; color:var(--faint); }
.field-hint { display:block; margin-top:5px; font-size:11.5px; line-height:1.5; color:var(--muted); }
.field-hint b { color:var(--ink-soft); }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line-2); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .auth { grid-template-columns:1fr; }
  .auth-welcome { display:none; }
  .auth-form-wrap { padding:40px 24px; }
  .head-burger { display:grid; }
  .head-clock, .head-upload, .head-me .who { display:none; }
  .rail { transform:translateX(-100%); width:var(--rail-w-open); box-shadow:var(--sh-3); }
  html[data-rail="open"] .rail { transform:translateX(0); }
  .content, html[data-rail="open"] .content { margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important;} }

/* ---------- Dashboard hero band (full-bleed gradient) ---------- */
.dz-hero-band { position:sticky; top:var(--head-h); z-index:40; overflow:visible; margin:-24px -26px 10px;
  padding:11px 24px 9px; display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  background:linear-gradient(140deg, #0284c7 0%, #2563eb 48%, #4338ca 100%);
  box-shadow:0 10px 26px -14px rgba(2,20,60,.5); }
.hb-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hb-bg::before { content:""; position:absolute; right:-90px; top:-150px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.13), transparent); }
.hb-bg::after { content:""; position:absolute; left:30%; bottom:-180px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(14,165,233,.3), transparent); }
.hb-badge { position:relative; width:42px; height:42px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(4px); }
.hb-badge svg { width:22px; height:22px; }
.hb-t { position:relative; min-width:0; }
.hb-title-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hb-t h1 { margin:0; font-size:18px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.hb-t h1 em { font-style:normal; background:linear-gradient(90deg, #bae6fd, #c7d2fe);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.hb-t .sub { margin:2px 0 0; color:#fff; font-weight:600; font-size:11px; font-family:var(--mono);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; text-shadow:0 1px 2px rgba(2,20,60,.35); }
.hb-stats { display:flex; gap:13px; flex-wrap:wrap; align-items:center; position:relative; z-index:2; }
.hb-stat { display:flex; flex-direction:column; align-items:flex-end; padding-right:13px;
  border-right:1px solid rgba(255,255,255,.18); }
.hb-stat:last-child { padding-right:0; border-right:0; }
.hb-stat b { font-size:15px; font-weight:800; line-height:1.2; color:#fff; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; text-transform:uppercase; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-stat small { font-size:8px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.hb-stat.is-sky b { color:#bae6fd; }
.hb-stat.is-ind b { color:#c7d2fe; }
.hb-row2 { position:relative; z-index:2; flex-basis:100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:2px; padding-top:6px; border-top:1px solid rgba(255,255,255,.12); }
.hb-row2 .dz-tabs { flex:none; }
/* toggle tracks inside the band — uniform deep glass, white active pill */
.dz-hero-band .dz-consoles, .dz-hero-band .dz-tabs, .dz-hero-band .seg {
  background:rgba(9,20,55,.38); border:none; box-shadow:none; }
.dz-hero-band .dz-console, .dz-hero-band .dz-tab, .dz-hero-band .seg button { color:rgba(255,255,255,.85); }
.dz-hero-band .dz-console:not(.on):hover, .dz-hero-band .dz-tab:hover:not(.on),
.dz-hero-band .seg button:hover:not(.on) { background:rgba(255,255,255,.18); color:#fff; }
.dz-hero-band .dz-console.on, .dz-hero-band .dz-tab.on, .dz-hero-band .seg button.on {
  background:#fff; color:#1e40af; box-shadow:0 3px 10px rgba(2,20,60,.28); }
/* mode-colored icons on the blue band */
.dz-hero-band .dz-console:nth-child(-n+2) .ci { color:#7dd3fc; }
.dz-hero-band .dz-console:nth-child(3) .ci, .dz-hero-band .dz-console:nth-child(4) .ci { color:#c7d2fe; }
.dz-hero-band .dz-console:nth-child(5) .ci { color:#fcd34d; }
.dz-hero-band .dz-console.on .ci { color:#1e40af; }
/* view tabs — centered below the band, solid floating track + gradient active pill */
.dz-tabs-row { display:flex; justify-content:center; margin:0 0 10px; }
.dz-tabs-row .dz-tabs { background:#fff; border:1px solid #dfe8f3; padding:3px; gap:2px;
  box-shadow:0 1px 2px rgba(13,28,70,.05), 0 8px 22px -12px rgba(13,28,70,.35); }
.dz-tabs-row .dz-tab { height:25px; padding:0 13px; color:var(--ink-soft); }
.dz-tabs-row .dz-tab:hover:not(.on) { background:var(--sky-50); color:var(--sky-700); }
.dz-tabs-row .dz-tab.on { box-shadow:0 3px 10px -3px rgba(79,70,229,.6); }
.dz-tabs-row .dz-tab:not(.on) .tb-ic { box-shadow:inset 0 0 0 1px rgba(13,28,70,.05); }
.dz-tabs-row .tb-ic { width:18px; height:18px; border-radius:6px; }
.dz-tabs-row .tb-ic svg { width:10px; height:10px; }
.dz-tab { gap:7px; padding:0 13px; }
.tb-ic { width:19px; height:19px; border-radius:6px; display:grid; place-items:center; flex:none; }
.tb-ic svg { width:11px; height:11px; }
.tb-sky { background:#e0f2fe; color:#0369a1; }
.tb-ind { background:#e7eaff; color:#4f46e5; }
.tb-amb { background:#fef3c7; color:#b45309; }
/* view-as — right-grouped in the top header row, deep-glass track */
.hb-seg { position:relative; z-index:3; margin-left:auto; }
.dz-hero-band .hb-seg { background:rgba(7,18,48,.42); border:1px solid rgba(255,255,255,.22); padding:3px; }
.dz-hero-band .hb-seg button { display:inline-flex; align-items:center; gap:6px; height:25px; padding:0 15px;
  color:rgba(255,255,255,.78); }
.hb-seg button svg { width:12px; height:12px; flex:none; }
.dz-hero-band .hb-seg button:hover:not(.on) { background:rgba(255,255,255,.12); color:#fff; }
.dz-hero-band .hb-seg button.on { background:#fff; color:#1e40af; box-shadow:0 3px 10px rgba(2,20,60,.35); }
/* console switcher — one connected track */
.dz-consoles { display:inline-flex; gap:2px; border-radius:999px; padding:3px; flex-wrap:wrap; }
.dz-console { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 13px; border-radius:999px;
  border:none; background:transparent; font:inherit; font-size:10px; font-weight:750; letter-spacing:.06em;
  text-transform:uppercase; color:#b9c5dd; cursor:pointer;
  transition:background var(--t), color var(--t), box-shadow var(--t); }
.dz-console .ci { width:13px; height:13px; flex:none; }
.dz-console:nth-child(-n+2) .ci { color:#38bdf8; }
.dz-console:nth-child(3) .ci, .dz-console:nth-child(4) .ci { color:#818cf8; }
.dz-console:nth-child(5) .ci { color:#fbbf24; }
.dz-console:not(.on):hover { background:rgba(255,255,255,.1); color:#fff; }
.dz-console.on { background:var(--grad-btn); color:#fff; box-shadow:0 2px 8px -2px rgba(14,165,233,.55); }
.dz-console.on .ci { color:#fff; }

/* view-as group (topbar, next to tabs) */
.dz-top-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* filter bar — full width inside the hero band, evenly spread single-line fields */
.dz-filters { padding:0; background:transparent; border:none; box-shadow:none; border-radius:0; }
.dz-hero-band .dz-filters { position:relative; z-index:2; flex:1 1 52%; min-width:0; margin:0; padding:0; border:none; }
.dz-frow { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.dz-frow > .msel { flex:0 1 170px; min-width:126px; }
.dz-hero-band .dz-frow { justify-content:flex-end; }
.fchip { display:grid; width:100%; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:7px;
  height:32px; padding:0 8px 0 5px; background:#fff; border:1.5px solid #dde6f0; border-radius:9px; font:inherit;
  cursor:pointer; box-shadow:0 1px 2px rgba(13,28,70,.04); --fh:var(--sky-700); --fhbg:var(--sky-100);
  transition:border-color var(--t), background var(--t), box-shadow var(--t); }
.dz-hero-band .fchip { border-color:transparent; box-shadow:0 2px 8px -3px rgba(2,20,60,.35); }
.fc-acct  { --fh:#0369a1; --fhbg:#e0f2fe; }
.fc-date  { --fh:#b45309; --fhbg:#fef3c7; }
.fc-range { --fh:#be123c; --fhbg:#ffe4e6; }
.fc-ship  { --fh:#4f46e5; --fhbg:#e7eaff; }
.fc-cons  { --fh:#047857; --fhbg:#d1fae5; }
.fc-stat  { --fh:#6d28d9; --fhbg:#ede9fe; }
.fc-cstat { --fh:#0d9488; --fhbg:#ccfbf1; }
.fchip:hover, .fchip:focus-within { border-color:var(--fh); }
.msel.open .fchip { border-color:var(--ink); box-shadow:0 5px 16px -8px rgba(13,28,70,.3); }
.fc-ic { width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  grid-column:1; grid-row:1 / span 2; background:var(--fhbg); color:var(--fh); transition:background var(--t); }
.fc-ic .fc-i { width:12px; height:12px; }
.fc-l { grid-column:2; grid-row:1; align-self:end; justify-self:start; font-size:9px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--fh); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; line-height:1.2; max-width:100%; }
.fchip .msel-label { grid-column:2; grid-row:2; align-self:start; justify-self:start; font-size:7.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:#2563eb; min-width:0; max-width:100%; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
.fc-c { width:12px; height:12px; color:var(--faint); grid-column:3; grid-row:1 / span 2;
  transition:transform var(--t), color var(--t); }
.msel.open .fc-c { transform:rotate(180deg); color:var(--ink); }
/* applied (non-default) filter */
.fchip.on-f { background:var(--fhbg); border-color:var(--fh); }
.fchip.on-f .msel-label { color:var(--fh); }
.fchip.on-f .fc-ic { background:#fff; }
.fchip.on-f .fc-c { color:var(--fh); }
.fchip.on-f .fc-l { border-right-color:rgba(0,0,0,.06); }
/* clear-filters action — always present, disabled when nothing is applied */
.freset { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border:1.5px solid transparent;
  border-radius:9px; background:#ef4444; color:#fff; font:inherit; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; cursor:pointer; flex:none; box-shadow:0 6px 14px -6px rgba(239,68,68,.55);
  transition:background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t); }
.freset:hover:not(:disabled) { background:#dc2626; transform:translateY(-1px); }
.freset svg { width:12px; height:12px; }
.freset:disabled { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.65);
  box-shadow:none; cursor:not-allowed; }

/* single-select popover rows */
.sel-pop { min-width:100%; }
.sel-row { display:flex; width:100%; align-items:center; font:inherit; font-size:12px; font-weight:650; color:var(--ink-soft);
  background:transparent; border:1.5px solid transparent; border-radius:8px; padding:7px 10px; cursor:pointer;
  text-align:left; transition:background var(--t), color var(--t), border-color var(--t); }
.sel-row:hover { background:var(--sky-50); color:var(--sky-700); }
.sel-row.on { background:#e8f0fe; border-color:#93c5fd; color:#1e40af; }

/* multiselect head + shared popover footer */
.msel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px 5px;
  font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); }
.msel-head .msel-count { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--ink-soft);
  background:var(--chip-bg); border-radius:999px; padding:1px 8px; }
.pop-foot { display:flex; align-items:center; gap:7px; margin-top:8px; padding-top:9px; border-top:1px solid var(--line-2); }
.pf-range { flex:1; min-width:0; font-family:var(--mono); font-size:10px; font-weight:700; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-btn { display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 15px; border-radius:999px;
  border:1.5px solid #e3eaf4; background:#fff; color:var(--ink-soft); font:inherit; font-size:10px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; cursor:pointer; transition:all var(--t); }
.pf-btn:hover { border-color:var(--sky-400); color:var(--sky-700); }
.pf-btn.pf-apply { background:var(--grad-btn); border-color:transparent; color:#fff;
  box-shadow:0 5px 12px -5px rgba(79,70,229,.6); margin-left:auto; }
.pf-btn.pf-apply:hover { filter:brightness(1.08); color:#fff; }
.pf-btn:disabled { opacity:.45; cursor:not-allowed; filter:none; }
.pop-foot .pf-btn { flex:none; }
.msel-pop .pop-foot .pf-btn:not(.pf-apply) { margin-left:auto; }
.msel-pop .pop-foot .pf-btn.pf-apply { margin-left:0; }
.range-pop .pop-foot .pf-btn:not(.pf-apply) { margin-left:auto; }
.range-pop .pop-foot .pf-btn.pf-apply { margin-left:0; }

/* calendar */
.cal { padding:2px 2px 0; }
.cal-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:2px 2px 7px; }
.cal-head b { font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.cal-nav { width:26px; height:26px; border:1.5px solid #e3eaf4; border-radius:999px; background:#fff; cursor:pointer;
  display:grid; place-items:center; color:var(--muted); font-size:14px; line-height:1; font-family:inherit;
  transition:all var(--t); }
.cal-nav:hover { border-color:var(--sky-400); color:var(--sky-700); }
.cal-dow { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:3px; }
.cal-dow span { text-align:center; font-size:8.5px; font-weight:800; letter-spacing:.08em; color:var(--faint); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-pad { height:28px; }
.cal-d { height:28px; border:none; border-radius:8px; background:transparent; font-family:var(--mono); font-size:11px;
  font-weight:600; color:var(--ink-soft); cursor:pointer; display:grid; place-items:center;
  transition:background var(--t), color var(--t); }
.cal-d:hover { background:var(--sky-100); color:var(--sky-700); }
.cal-d.in { background:var(--sky-100); color:var(--sky-700); border-radius:0; }
.cal-d.end { background:var(--grad-btn); color:#fff; border-radius:8px; font-weight:700; }
/* "showing" pill — matches the header chip language */
.dz-f-note { margin-left:auto; }
.dz-shown { display:flex; flex-direction:column; align-items:flex-start; gap:1px; background:var(--chip-bg); border-radius:9px;
  padding:5px 12px; line-height:1.2; }
.dz-shown .sl { font-family:var(--mono); font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
.dz-shown .sv { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* popover shells (range + multiselect) */
.msel { position:relative; display:inline-flex; align-items:center; }
.msel-btn { cursor:pointer; }
.msel-pop { position:absolute; z-index:60; top:calc(100% + 8px); left:0; min-width:250px;
  max-width:min(330px, calc(100vw - 28px)); background:#fff;
  border:1px solid #e3eaf4; border-radius:14px; padding:7px;
  box-shadow:0 24px 54px -22px rgba(13,28,70,.4), 0 2px 6px rgba(13,28,70,.06);
  animation:popin .15s var(--t-slow) both; transform-origin:top left; }
.msel-pop.flip { left:auto; right:0; transform-origin:top right; }
@keyframes popin { from { opacity:0; transform:translateY(-5px) scale(.98); } to { opacity:1; transform:none; } }
.msel-search { width:100%; margin-bottom:4px; height:30px; border-radius:8px; font-size:12px; font-family:inherit;
  color:var(--ink); padding:0 11px; border:1.5px solid #e3eaf4; background:#fff; outline:none;
  transition:border-color var(--t), box-shadow var(--t); }
.msel-search::placeholder { color:var(--faint); }
.msel-search:focus { border-color:var(--sky-500); box-shadow:0 0 0 3px rgba(14,165,233,.14); }
.msel-list { max-height:226px; overflow:auto; }
.msel-item { display:flex; align-items:center; gap:8px; padding:4.5px 8px; border-radius:7px; cursor:pointer;
  font-size:12px; color:var(--ink-soft); user-select:none; transition:background var(--t); }
.msel-item:hover { background:var(--sky-50); }
.msel-item .cb { width:15px; height:15px; border-radius:5px; border:1.5px solid #cdd5e1; flex:none;
  display:grid; place-items:center; color:#fff; background:#fff; transition:background var(--t), border-color var(--t); }
.msel-item .cb svg { width:9px; height:9px; display:none; }
.msel-item.is-on .cb { background:var(--grad-btn); border-color:transparent; }
.msel-item.is-on .cb svg { display:block; }
.msel-item span:not(.cb) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msel-none { padding:10px; text-align:center; font-size:12.5px; }

/* date-range popover */
.range-pop { min-width:300px; }
.range-rows { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.range-row { display:flex; align-items:center; font:inherit; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft); background:transparent; border:1.5px solid transparent;
  border-radius:8px; padding:7px 10px; cursor:pointer; transition:all var(--t); }
.range-row:hover { background:var(--sky-50); color:var(--sky-700); }
.range-row.on { background:#e8f0fe; border-color:#93c5fd; color:#1e40af; }
.range-div { height:1px; background:var(--line-2); margin:8px 2px; }
.btn-xs { height:32px; padding:0 14px; font-size:11px; }

/* tabs — pill segmented switcher */
.dz-tabs { display:inline-flex; gap:2px; padding:3px; border-radius:999px; }
.dz-tab { display:inline-flex; align-items:center; height:26px; font:inherit; font-size:10px; font-weight:750;
  letter-spacing:.06em; text-transform:uppercase; color:#b9c5dd; background:transparent; border:none; cursor:pointer;
  padding:0 15px; border-radius:999px; transition:background var(--t), color var(--t), box-shadow var(--t); }
.dz-tab:hover:not(.on) { color:#fff; background:rgba(255,255,255,.1); }
.dz-tab.on { background:var(--grad-btn); color:#fff; box-shadow:0 2px 8px -2px rgba(14,165,233,.55); }

/* hero: KPI stack + map */
.dz-hero { display:grid; grid-template-columns:minmax(230px,1fr) minmax(0,2.55fr); gap:12px; margin-bottom:12px; align-items:stretch; }

/* KPI column — four bright hue-tinted stat cards (same rows on every tab) */
.dz-kpis { display:flex; flex-direction:column; gap:9px; min-width:0; transition:opacity var(--t); }
.dz-kpi { flex:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:11px;
  padding:3px 12px; border-radius:13px; min-height:0; position:relative; --hue:#0284c7; --tint:#e0f2fe;
  background:linear-gradient(135deg, var(--tint) 0%, color-mix(in srgb, var(--tint) 38%, #fff) 55%, #fff 100%);
  border:1.5px solid color-mix(in srgb, var(--hue) 24%, #fff);
  box-shadow:0 6px 16px -10px color-mix(in srgb, var(--hue) 45%, transparent);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.dz-kpi:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--hue) 45%, #fff);
  box-shadow:0 12px 26px -12px color-mix(in srgb, var(--hue) 55%, transparent); }
.kpi-sky  { --hue:#0284c7; --tint:#dbeefe; }
.kpi-ind  { --hue:#4f46e5; --tint:#e5e7ff; }
.kpi-teal { --hue:#0d9488; --tint:#d4f6f0; }
.kpi-amb  { --hue:#d97706; --tint:#fdeed0; }
.kpi-rose { --hue:#e11d48; --tint:#ffe1e7; }
.dz-kpi .ki { width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, var(--hue), color-mix(in srgb, var(--hue) 60%, #4f46e5));
  box-shadow:0 4px 10px -4px color-mix(in srgb, var(--hue) 70%, transparent); }
.dz-kpi .ki svg { width:18px; height:18px; }
.dz-kpi .kt { min-width:0; }
.dz-kpi .k { font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:color-mix(in srgb, var(--hue) 75%, var(--ink)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dz-kpi .v { font-family:var(--mono); font-size:23px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
  line-height:1.2; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:7px; }
.dz-kpi .ktag { font-family:var(--font); font-size:7.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--hue); background:#fff; border:1px solid color-mix(in srgb, var(--hue) 35%, #fff); border-radius:999px;
  padding:2px 7px; flex:none; }
/* right-side sub stats with hairline dividers */
.dz-kpi .ks { display:flex; align-items:center; gap:12px; }
.dz-kpi .ks .s { display:flex; flex-direction:column; align-items:flex-end; min-width:0; }
.dz-kpi .ks .s small { font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:color-mix(in srgb, var(--hue) 55%, var(--muted)); white-space:nowrap; }
.dz-kpi .ks .s b { font-family:var(--mono); font-size:23px; font-weight:700; color:var(--hue); line-height:1.2;
  font-variant-numeric:tabular-nums; max-width:128px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-kpi .ks .kd { width:1px; height:40px; background:color-mix(in srgb, var(--hue) 25%, #fff); flex:none; }

/* widget grid */
.dz-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; transition:opacity var(--t); }
.dz-grid > .dz-card { grid-column:span 2; }
.dz-card[data-widget="trend"] { grid-column:1 / 4; }
.dz-card[data-widget="heat"] { grid-column:4 / -1; }
@media (max-width:1100px) {
  .dz-card[data-widget="trend"], .dz-card[data-widget="heat"] { grid-column:auto; }
}

/* daily calendar heatmap */
.dz-card[data-widget="heat"] .dz-chart { --hc:24px; --hg:4px; }
.hm-wrap { display:flex; gap:10px; }
.hm-days { display:flex; flex-direction:column; gap:var(--hg); flex:none; }
.hm-days span { height:var(--hc); font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); display:flex; align-items:center; }
.hm-scroll { flex:1; min-width:0; overflow-x:auto; padding-bottom:4px; }
.hm-months { display:flex; gap:var(--hg); height:15px; }
.hm-months .hm-mlab { width:var(--hc); flex:none; font-family:var(--mono); font-size:8.5px; font-weight:700;
  color:var(--muted); white-space:nowrap; overflow:visible; }
.hm-days .hm-mlab { height:15px; }
.hm-grid { display:flex; gap:var(--hg); margin-top:var(--hg); }
.hm-col { display:flex; flex-direction:column; gap:var(--hg); flex:none; }
.hm-c { width:var(--hc); height:var(--hc); border-radius:7px; background:#f4f7fb; cursor:default;
  box-shadow:inset 0 0 0 1px #e2e9f2; transition:transform var(--t), box-shadow var(--t); }
.hm-c.has { box-shadow:none; }
.hm-c.has:hover { transform:scale(1.14); box-shadow:0 2px 8px -2px rgba(13,28,70,.45); }
.hm-legend { display:flex; align-items:center; gap:3px; justify-content:flex-end; margin:0 2px 7px 0; }
.hm-legend span { font-size:8.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
  margin:0 4px; }
.hm-legend i { width:12px; height:12px; border-radius:4px; display:block; }
.dz-dim { opacity:.45; pointer-events:none; }
.dz-card { padding:12px 14px 10px; min-width:0; border-radius:14px; transition:box-shadow var(--t); }
.dz-card:hover { box-shadow:var(--sh-2); }
@media (max-width: 1100px) {
  .dz-grid { grid-template-columns:1fr; }
  .dz-hero { grid-template-columns:1fr; }
  .dz-kpis { display:grid; grid-template-columns:1fr 1fr; }
}
.dz-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.dz-head-t { min-width:0; display:flex; align-items:center; gap:9px; }
.dz-ic { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none; }
.dz-ic svg { width:14px; height:14px; }
.ic-sky, .ic-violet, .ic-teal, .ic-amber, .ic-rose { background:var(--sky-100); color:var(--sky-700); }
.dz-head-tx { min-width:0; }
.dz-sub:empty { display:none; }
.dz-title { font-size:11.5px; font-weight:800; color:var(--ink); letter-spacing:.06em; text-transform:uppercase; }
.dz-sub { display:block; font-size:11px; margin-top:1px; }
.dz-tools { display:flex; align-items:center; gap:8px; flex:none; }
.seg-sm { padding:2px; } .seg-sm button { height:20px; padding:0 10px; font-size:9px; }
.dz-metric button.on { background:var(--grad-btn); color:#fff; box-shadow:0 4px 10px -5px rgba(79,70,229,.6); }
.dz-flip { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px;
  border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; transition:all var(--t); }
.dz-flip:hover { color:var(--sky-700); border-color:var(--sky-300); background:var(--sky-50); }
.dz-flip svg { width:14px; height:14px; }
.dz-flip .ic-chart { display:none; }
.dz-card.as-table .dz-flip .ic-table { display:none; }
.dz-card.as-table .dz-flip .ic-chart { display:block; }
.dz-body { min-height:120px; }
.dz-grid > .dz-card .dz-body { height:254px; }
.dz-body .table-wrap { border:none; box-shadow:none; height:100%; max-height:100%; border-radius:10px;
  margin-bottom:0; border:1px solid #e7eef7; }
/* clean report table: white header with a blue rule, hairline rows, right-aligned numbers.
   fixed layout: the name column swallows the overflow (ellipsis), numbers always visible. */
table.dz-datatable { table-layout:fixed; width:100%; }
table.dz-datatable th { position:sticky; top:0; z-index:2; background:#fff; color:var(--muted); font-size:9.5px;
  font-weight:800; letter-spacing:.08em; padding:6px 10px; box-shadow:inset 0 -2px 0 #2563eb; border-bottom:none; }
table.dz-datatable th:nth-child(n+2) { text-align:right; width:62px; }
table.dz-datatable td { padding:3.5px 10px; font-size:11.5px; color:var(--ink); font-weight:550;
  border-bottom:1px solid var(--line-2); }
table.dz-datatable td:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.dz-datatable td.num { font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:11px;
  font-weight:700; text-align:right; }
table.dz-datatable tbody td.num:first-of-type { color:#1e40af; }
table.dz-datatable tbody tr:hover td { background:var(--sky-50); }
table.dz-datatable .tb-chip { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:4px;
  background:var(--bc, #3b82f6); color:#fff; font-family:var(--mono); font-size:8px; font-weight:800;
  margin-right:7px; vertical-align:-2px; text-shadow:0 1px 1px rgba(13,28,70,.3); }
table.dz-datatable tfoot td { position:sticky; bottom:0; z-index:2; background:#f6faff; color:#1e40af;
  font-weight:800; border-bottom:none; padding:5px 10px; font-size:11px; box-shadow:inset 0 2px 0 #2563eb; }
.dz-body .table-wrap { overflow-x:hidden; }

/* phase 2 — bottom-sheet data table */
.dt-ovl { position:fixed; inset:0; z-index:120; background:rgba(11,18,32,.45); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .25s ease; }
.dt-ovl.open { opacity:1; }
.dt-modal { position:fixed; left:0; right:0; bottom:0; height:70vh; z-index:121; background:#fff;
  border-radius:18px 18px 0 0; box-shadow:0 -18px 54px -20px rgba(2,8,30,.6);
  transform:translateY(103%); transition:transform .3s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; }
.dt-modal.open { transform:none; }
.dt-head { display:flex; align-items:center; gap:11px; padding:11px 18px; border-bottom:1px solid var(--line-2); flex:none; }
.dt-title { font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.dt-count { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--sky-700);
  background:var(--sky-50); border:1px solid var(--sky-200); border-radius:999px; padding:1.5px 9px; }
.dt-searchwrap { position:relative; flex:0 1 240px; min-width:130px; margin-left:6px; display:flex; }
.dt-search { height:32px; width:100%; border:1px solid #e3eaf4; border-radius:9px; padding:0 28px 0 11px;
  font:inherit; font-size:12px; font-weight:550; background:#f8fbff; color:var(--ink);
  outline:none; transition:border-color var(--t), background var(--t), box-shadow var(--t); }
.dt-sclear { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:20px; height:20px;
  border:none; border-radius:999px; background:#e8eef7; color:var(--muted); font-size:13px; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:background var(--t), color var(--t); }
.dt-sclear:hover { background:var(--err-bg); color:var(--err); }
.dt-search::placeholder { color:var(--faint); font-weight:500; }
.dt-search:focus { border-color:var(--sky-400); background:#fff; box-shadow:0 0 0 3px rgba(14,165,233,.12); }
.dt-fslot { margin-left:auto; display:flex; gap:7px; min-width:0; flex:1 1 auto; justify-content:flex-end; }
.dt-filter { flex:0 1 162px; min-width:104px; }
.dt-filter .fchip { width:100%; }
.dt-filter .msel-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-filter .msel-pop { left:auto; right:0; transform-origin:top right; z-index:125; }
.dt-x { width:30px; height:30px; border:1px solid #e3eaf4; border-radius:999px; background:#fff; color:var(--muted);
  font-size:17px; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:color var(--t), border-color var(--t), background var(--t); }
.dt-x:hover { background:var(--err-bg); border-color:var(--err-line); color:var(--err); }
/* column customization: header button + draggable checklist popover */
.dt-colbtn { width:30px; height:30px; border:1px solid #e3eaf4; border-radius:999px; background:#fff;
  color:var(--muted); cursor:pointer; display:grid; place-items:center; flex:none; margin-left:2px;
  transition:color var(--t), border-color var(--t), background var(--t); }
.dt-colbtn svg { width:14px; height:14px; }
.dt-colbtn:hover, .dt-colbtn.on { background:var(--sky-50); border-color:var(--sky-300); color:var(--sky-700); }
.dt-colpop { position:absolute; top:50px; right:52px; width:254px; background:#fff; border:1px solid #e3eaf4;
  border-radius:12px; box-shadow:0 20px 48px -18px rgba(13,28,70,.4), 0 2px 6px rgba(13,28,70,.07);
  z-index:126; display:flex; flex-direction:column; max-height:calc(70vh - 64px);
  animation:popin .14s var(--t-slow) both; transform-origin:top right; }
.dcp-h { padding:10px 13px 8px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line-2); }
.dcp-h small { font-size:9.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--faint); }
.dcp-list { overflow-y:auto; padding:6px; }
.dcp-row { display:flex; align-items:center; gap:9px; padding:5.5px 8px; border-radius:8px; font-size:12px;
  font-weight:600; color:var(--ink-soft); cursor:grab; user-select:none; }
.dcp-row:hover { background:var(--sky-50); }
.dcp-row.dragging { opacity:.4; }
.dcp-row.locked { color:var(--muted); cursor:grab; }
.dcp-grip { color:#c3cfdf; font-size:11px; letter-spacing:-2px; flex:none; }
.dcp-cb { width:15px; height:15px; border-radius:4.5px; border:1.5px solid #cbd7e6; display:grid;
  place-items:center; color:#fff; flex:none; transition:background var(--t), border-color var(--t); }
.dcp-cb svg { width:9px; height:9px; opacity:0; }
.dcp-row.is-on .dcp-cb { background:linear-gradient(135deg,#0ea5e9,#4f46e5); border-color:transparent; }
.dcp-row.is-on .dcp-cb svg { opacity:1; }
.dcp-lock { width:15px; height:15px; color:var(--faint); display:grid; place-items:center; flex:none; }
.dcp-lock svg { width:11px; height:11px; }
.dt-body { flex:1; min-height:0; padding:10px 18px 14px; }
.dt-wrap { height:100%; overflow-y:auto; overflow-x:hidden; border:1px solid #e7eef7; border-radius:10px; }
table.dz-datatable.dt-table th:nth-child(n+2) { width:auto; text-align:left; }
.dt-table td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dt-table td.dtc-date { font-family:var(--mono); font-size:10.5px; }
.dt-chip { display:inline-flex; align-items:center; margin-left:7px; font-family:var(--mono); font-size:8.5px;
  font-weight:800; color:#1e40af; background:#e8f0fe; border:1px solid #bfdbfe; border-radius:999px; padding:1px 7px; }
.dt-note { padding:8px 12px; font-size:11px; text-align:center; }
/* full-page boot loader: conic gradient ring + brand, fades once charts land */
.dz-boot { position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  background:
    radial-gradient(640px 420px at 18% 8%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(560px 420px at 85% 88%, rgba(79,70,229,.10), transparent 60%),
    var(--canvas);
  transition:opacity .42s ease; }
.dz-boot.done { opacity:0; pointer-events:none; }
.dzb-card { display:flex; flex-direction:column; align-items:center; gap:14px;
  animation:rise .5s var(--t-slow) both; }
.dzb-ring { width:54px; height:54px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(14,165,233,0) 6%, #0ea5e9 48%, #4f46e5 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
  animation:dzspin .85s linear infinite; }
.dzb-brand { font-size:19px; font-weight:900; letter-spacing:.16em;
  background:var(--grad-btn); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dzb-card small { font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.dzb-dots { font-style:normal; }
.dzb-dots s { text-decoration:none; animation:dzb-blink 1.2s infinite; }
.dzb-dots s:nth-child(2) { animation-delay:.2s; }
.dzb-dots s:nth-child(3) { animation-delay:.4s; }
@keyframes dzb-blink { 0%,60%,100% { opacity:.2; } 30% { opacity:1; } }

.dzb-ring.sm { width:22px; height:22px;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); }

/* Atlas loader composition — the ONE spinner look used by every in-app loader
   (boot screens, updating cards, panel busy overlays, doc preview, …) */
.atl { display:flex; flex-direction:column; align-items:center; gap:7px; }
.atl .dzb-ring { width:34px; height:34px;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); }
.atl .dzb-brand { font-size:12.5px; }
.atl small { font-size:10.5px; font-weight:650; color:var(--muted); letter-spacing:.02em; }

/* filter-change "updating" card: controls stay visible but non-clickable */
.dz-upd { position:fixed; left:50%; top:55%; transform:translate(-50%,-50%) scale(.95); z-index:160;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px); border:1px solid #e3eaf4;
  border-radius:16px; padding:16px 30px 13px; box-shadow:0 18px 44px -14px rgba(13,28,70,.32);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.dz-upd.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.dz-busy .dz-hero-band, .dz-busy .dz-grid, .dz-busy #kpiRow { pointer-events:none; }

/* excel download toast: preparing spinner → download-started check */
.xl-toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%, 16px); z-index:410;
  display:flex; align-items:center; gap:11px; min-width:300px; background:#fff;
  border:1px solid #e3eaf4; border-radius:14px; padding:11px 16px;
  box-shadow:0 18px 44px -14px rgba(13,28,70,.35); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; }
.xl-toast.show { opacity:1; transform:translate(-50%, 0); }
.xl-toast b { display:block; font-size:12.5px; font-weight:750; color:var(--ink); }
.xl-toast small { font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.xlt-ring { width:22px; height:22px; border-radius:50%; flex:none;
  background:conic-gradient(from 0deg, rgba(16,124,65,0) 10%, #21a366 60%, #107c41 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation:dzspin .8s linear infinite; }
.xlt-ok { width:22px; height:22px; border-radius:999px; flex:none; display:grid; place-items:center;
  background:#ecfdf5; border:1px solid #a7f3d0; color:#059669; }
.xlt-ok svg { width:11px; height:11px; }
.xl-toast.err .xlt-ok { background:var(--err-bg); border-color:var(--err-line); color:var(--err); }

/* hero excel-export button + dropdown */
.hb-xl { position:relative; z-index:4; align-self:center; margin-left:10px; }
.hb-xl-btn { width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg,#21a366,#107c41); color:#fff; cursor:pointer;
  display:grid; place-items:center; box-shadow:0 6px 14px -6px rgba(16,124,65,.6);
  transition:filter var(--t), transform var(--t); }
.hb-xl-btn svg { width:16px; height:16px; }
.hb-xl-btn:hover { filter:brightness(1.12); transform:translateY(-1px); }
.hb-xl-btn.busy { pointer-events:none; opacity:.55; }
.hb-xl-pop { position:absolute; top:calc(100% + 8px); right:0; min-width:198px; background:#fff;
  border:1px solid #e3eaf4; border-radius:12px; padding:5px;
  box-shadow:0 20px 48px -18px rgba(13,28,70,.4), 0 2px 6px rgba(13,28,70,.07);
  animation:popin .14s var(--t-slow) both; transform-origin:top right; }
.hb-xl-pop button { display:flex; align-items:center; gap:9px; width:100%; border:none; background:transparent;
  font:inherit; font-size:12px; font-weight:600; color:var(--ink-soft); padding:8px 10px;
  border-radius:8px; cursor:pointer; text-align:left; transition:background var(--t), color var(--t); }
.hb-xl-pop button svg { width:14px; height:14px; color:#107c41; flex:none; }
.hb-xl-pop button:hover { background:var(--sky-50); color:var(--sky-700); }
.hb-xl-pop button:first-child { border-bottom:1px solid var(--line-2); border-radius:8px 8px 0 0; margin-bottom:3px; }

/* shared popover anatomy for the Date filter + Custom status:
   seg toggle (top-toggle pill style) → chip grid → month range calendar */
#fCstatus .msel-pop { left:auto; right:0; transform-origin:top right; }
.cs-pop { min-width:300px; max-height:min(640px, calc(100vh - 120px)); overflow-y:auto; }
/* the popovers live inside the hero band, so these out-specific the
   dark-glass .dz-hero-band .seg styles that would otherwise bleed in */
.cs-pop .cs-seg { display:flex; width:calc(100% - 14px); margin:7px 7px 8px; padding:3px; gap:2px;
  background:linear-gradient(135deg,#e0f2fe,#e9eaff); border:none; }
.cs-pop .cs-seg button { flex:1; justify-content:center; height:26px; padding:0 8px;
  letter-spacing:.05em; color:#5b6b85; background:transparent; box-shadow:none; white-space:nowrap; }
.cs-pop .cs-seg button:hover:not(.on) { background:rgba(255,255,255,.8); color:var(--sky-700); }
.cs-pop .cs-seg button.on { background:var(--grad-btn); color:#fff;
  box-shadow:0 4px 10px -3px rgba(79,70,229,.5); }
/* options as a compact double-column chip grid */
.cs-sec { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:0 7px 7px; }
.cs-sec .sel-row { width:auto; border:1.5px solid var(--line-2); border-radius:9px;
  padding:6px 9px; font-size:10px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap; justify-content:center;
  background:#f8fbff; color:var(--ink-soft); }
.cs-sec .sel-row:hover { border-color:var(--sky-300); background:#fff; color:var(--sky-700); }
.cs-sec .sel-row.on { background:linear-gradient(135deg,#e0f2fe,#e7eaff); border-color:#93c5fd;
  color:#1d4ed8; box-shadow:0 2px 6px -2px rgba(37,99,235,.25); }
.cs-cal { border-top:1px solid var(--line-2); padding:7px 7px 0; }
.cs-cal .pop-foot .pf-btn:not(.pf-apply) { margin-left:auto; }
.cs-cal .pop-foot .pf-btn.pf-apply { margin-left:0; }

/* long PO / container lists: the tooltip flows into extra columns past ~20 rows */
.cbar-tip .tipc.tip-list { display:flex; flex-flow:column wrap; max-height:330px;
  column-gap:16px; align-content:flex-start; }
.cbar-tip:has(.tip-list) { max-width:min(720px, calc(100vw - 24px)); }
/* unified detail table — reference-number, size and chip cells */
.dt-table td.dtc-id { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--sky-700); }
.dt-table td.dtc-size { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--ink-soft); }
.dt-cargo { display:inline-flex; align-items:center; height:17px; padding:0 8px; border-radius:999px;
  font-family:var(--mono); font-size:8px; font-weight:800; letter-spacing:.08em;
  background:var(--sky-50); color:var(--sky-700); border:1px solid var(--sky-200); }
.dt-cargo.is-lcl { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.st-chip { display:inline-flex; align-items:center; max-width:100%; height:17px; padding:0 8px; border-radius:999px;
  font-family:var(--mono); font-size:8px; font-weight:800; letter-spacing:.07em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; border:1px solid transparent; }
.st-chip.st-pend { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.st-chip.st-tran { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.st-chip.st-arr  { background:#f0f9ff; color:#0369a1; border-color:#bae6fd; }
.st-chip.st-del  { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }

/* per-card view-options menu */
.dz-menu { position:fixed; z-index:96; min-width:206px; background:#fff; border:1px solid #e3eaf4; border-radius:12px;
  padding:5px; box-shadow:0 20px 48px -18px rgba(13,28,70,.4), 0 2px 6px rgba(13,28,70,.07);
  animation:popin .14s var(--t-slow) both; transform-origin:top right; }
.dz-mi { display:flex; align-items:center; gap:9px; width:100%; border:none; background:transparent; font:inherit;
  font-size:12px; font-weight:600; color:var(--ink-soft); padding:7px 9px; border-radius:8px; cursor:pointer;
  text-align:left; transition:background var(--t), color var(--t); }
.dz-mi svg { width:14px; height:14px; color:var(--sky-600); flex:none; }
.dz-mi .mi-check { margin-left:auto; color:#1e40af; width:13px; height:13px; }
.dz-mi:hover:not(.off):not(.on) { background:var(--sky-50); color:var(--sky-700); }
.dz-mi.on { background:#e8f0fe; color:#1e40af; }
.dz-mi.off { opacity:.55; cursor:not-allowed; }
.dz-mi.off svg { color:var(--faint); }
.mi-tag { margin-left:auto; font-style:normal; font-size:8px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; background:var(--chip-bg); color:var(--muted); border-radius:999px; padding:2px 7px; flex:none; }
.dz-empty { display:flex; align-items:center; justify-content:center; min-height:160px; font-size:13px; }

/* every interactive / tooltip-bearing surface shows a pointer */
.ch-row, .dl-row, .dz-side-row, .hm-c.has, .cv-col, .msel-btn, .dz-datatable tbody tr { cursor:pointer; }

/* custom scrollable bar charts (fixed axis + scroll) */
.cbar { font-variant-numeric:tabular-nums; }

/* vertical columns, horizontal scroll (by shipper) */
.cbar-v { display:flex; height:248px; }
.cv-y { width:44px; flex:none; position:relative; border-right:1px solid var(--line-2); }
.cv-y span { position:absolute; right:8px; transform:translateY(-50%); font-size:10px; font-weight:600; color:var(--faint); }
.cv-scroll { flex:1; overflow-x:auto; overflow-y:hidden; }
.cv-plot { position:relative; height:100%; display:flex; align-items:stretch; gap:14px; padding:0 12px; min-width:100%; width:max-content; }
.cv-grid { position:absolute; left:0; right:0; top:18px; bottom:48px; pointer-events:none; }
.cv-grid i { position:absolute; left:0; right:0; height:1px; background:var(--line-2); }
.cv-col { display:flex; flex-direction:column; width:42px; flex:none; cursor:default; }
.cv-barzone { position:relative; width:100%; flex:1; display:flex; align-items:flex-end; justify-content:center; padding-top:18px; }
.cv-bar { width:22px; height:0; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg, #0ea5e9, #4f46e5);
  box-shadow:0 6px 12px -6px rgba(79,70,229,.45); transition:height .3s cubic-bezier(.22,1,.36,1), filter var(--t); }
.cv-col:hover .cv-bar { filter:brightness(1.12); }
.cv-val { position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:10px; font-weight:700; color:var(--ink-soft);
  white-space:nowrap; padding-bottom:3px; transition:bottom .3s cubic-bezier(.22,1,.36,1); }
.cv-lbl { position:relative; height:48px; width:100%; flex:none; }
.cv-lbl span { position:absolute; top:6px; left:50%; transform-origin:0 0; transform:rotate(40deg); font-size:10px; color:var(--muted);
  white-space:nowrap; max-width:72px; overflow:hidden; text-overflow:ellipsis; }

/* horizontal bars, vertical scroll (by consignee) */
.cbar-h { display:flex; flex-direction:column; height:248px; }
.ch-head { position:relative; flex:none; height:20px; }
.ch-ticks { position:absolute; left:134px; right:52px; top:0; bottom:0; border-bottom:1px solid var(--line-2); }
.ch-ticks span { position:absolute; top:0; font-size:10px; font-weight:600; color:var(--faint); transform:translateX(-50%); }
.ch-ticks span.first { transform:none; }
.ch-ticks span.last { transform:translateX(-100%); }
.ch-scroll { flex:1; overflow-y:auto; overflow-x:hidden; }
.ch-row { display:flex; align-items:center; gap:10px; height:30px; border-radius:8px; transition:background var(--t); }
.ch-row:hover { background:var(--sky-50); }
.ch-lbl { width:124px; flex:none; font-size:11px; color:var(--ink); font-weight:600; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.01em; }
.ch-track { flex:1; position:relative; height:100%; }
.ch-zone { position:absolute; left:0; right:52px; top:0; bottom:0; display:flex; align-items:center;
  background-image:linear-gradient(to right, var(--line-2) 1px, transparent 1px); background-size:calc(100% / 4) 100%;
  border-right:1px solid var(--line-2); }
.ch-bar { height:14px; width:0; border-radius:4px 7px 7px 4px; --bc:#3b82f6; background:var(--bc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px -2px rgba(13,28,70,.35);
  transition:width .3s cubic-bezier(.22,1,.36,1), filter var(--t); }
.ch-row:hover .ch-bar { filter:brightness(1.08) saturate(1.15); }
.ch-val { position:absolute; top:50%; transform:translateY(-50%); left:0; margin-left:7px; font-size:10px; font-weight:700;
  color:var(--ink-soft); white-space:nowrap; transition:left .3s cubic-bezier(.22,1,.36,1); }

/* donut + breakdown list */
.don-wrap { display:flex; gap:12px; align-items:stretch; }
.don-chart { flex:0 0 50%; min-width:0; }
.don-list { flex:1; min-width:0; max-height:226px; overflow-y:auto; padding-right:4px; margin-top:4px;
  display:flex; flex-direction:column; gap:2px; }
.dl-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto 32px; align-items:center; gap:7px;
  padding:3px 6px 3px 3px; border-radius:8px; transition:background var(--t); }
.dl-row:hover { background:var(--sky-50); }
.dl-ic { width:19px; height:19px; border-radius:6px; display:grid; place-items:center; flex:none;
  box-shadow:inset 0 0 0 1px rgba(13,28,70,.08); }
.dl-ic i { width:7px; height:7px; border-radius:50%; background:#fff; display:block; }
.dl-n { font-size:11.5px; font-weight:600; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.dl-v { font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.dl-p { font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--faint); text-align:right; }

/* shared dark tooltip design — custom bars + every Apex chart */
.cbar-tip { position:fixed; z-index:300; background:#0f172a; color:#fff; border-radius:10px;
  pointer-events:none; box-shadow:0 10px 26px -8px rgba(2,8,30,.65); opacity:0; transition:opacity .12s ease;
  width:max-content; max-width:min(460px, calc(100vw - 24px)); }
.tipc { padding:8px 11px; font-family:var(--font); min-width:120px; }
.tipc b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:11px; font-weight:750; color:#e2e8f0; margin-bottom:3px; white-space:normal; line-height:1.3;
  word-break:break-word; }
.tipc .tr { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:#aab8d0; margin-top:3px; }
.tipc .tr i { width:9px; height:9px; border-radius:3px; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.tipc .tv { margin-left:auto; padding-left:14px; font-family:var(--mono); font-weight:700; font-size:11px; color:#fff;
  font-variant-numeric:tabular-nums; }
.apexcharts-tooltip { background:#0f172a !important; color:#fff !important; border:none !important;
  border-radius:10px !important; box-shadow:0 10px 26px -8px rgba(2,8,30,.65) !important; }

/* map (hero) */
.dz-card-map { display:flex; flex-direction:column; height:308px; min-height:0; }
.dz-map-body { flex:1; display:flex; gap:14px; align-items:stretch; min-height:0; }
.dz-map-body .dz-chart { flex:1; min-width:0; height:auto; min-height:252px; position:relative;
  border-radius:12px; background:linear-gradient(180deg, #f2f8ff 0%, #e6f0fc 100%);
  box-shadow:inset 0 0 0 1px #e3eaf4; }
#worldMap { height:100%; min-height:252px; }
#worldMap svg { border-radius:12px; }
#worldMap .jvm-marker { filter:drop-shadow(0 1px 2px rgba(37,99,235,.35)); }
/* choropleth range legend */
.map-legend { position:absolute; left:10px; bottom:10px; z-index:5; display:flex; gap:7px; flex-wrap:wrap;
  max-width:75%; background:rgba(255,255,255,.9); backdrop-filter:blur(4px); border:1px solid #e3eaf4;
  border-radius:10px; padding:5px 9px; box-shadow:0 4px 14px -6px rgba(13,28,70,.3); }
.ml-i { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:8.5px; font-weight:700;
  color:var(--ink-soft); white-space:nowrap; }
.ml-i i { width:10px; height:10px; border-radius:3px; display:block; box-shadow:inset 0 0 0 1px rgba(13,28,70,.12); }
/* fills the body exactly like the map does: min-height:0 stops the content
   forcing the card taller, overflow keeps the scroll inside */
.dz-map-body .table-wrap { flex:1; width:100%; min-height:0; height:auto; max-height:none; overflow:auto; }
.dz-map-side { width:302px; flex:none; display:flex; flex-direction:column; min-height:0; max-height:252px;
  padding:2px 0 2px; }
.dz-side-title { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none;
  font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--faint);
  margin-bottom:7px; padding-right:6px; }
.dz-side-title .cnt { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--sky-700);
  background:var(--sky-50); border:1px solid var(--sky-200); border-radius:999px; padding:1px 8px; }
.dz-side-list { flex:1; min-height:0; overflow-y:auto; padding-right:6px; }
.dz-side-row { display:grid; grid-template-columns:18px minmax(0,1fr) 64px 34px; align-items:center; gap:8px;
  padding:3.5px 6px 3.5px 4px; font-size:12px; border-radius:8px; margin-bottom:2px;
  background:color-mix(in srgb, var(--rc, transparent) 9%, transparent); transition:background var(--t); }
.dz-side-row:hover { background:color-mix(in srgb, var(--rc, var(--sky-400)) 22%, transparent); }
.dz-side-row .r { font-family:var(--mono); font-size:8.5px; font-weight:800; width:17px; height:17px;
  border-radius:5px; display:grid; place-items:center; }
.dz-side-row .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); font-weight:600; }
.dz-side-row .b { height:6px; border-radius:4px; background:#e8eef7; overflow:hidden; }
.dz-side-row .b span { display:block; height:100%; border-radius:4px; --bc:#3b82f6;
  background:linear-gradient(90deg, color-mix(in srgb, var(--bc) 55%, #fff) 0%, var(--bc) 85%); }
.dz-side-row b { text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;
  font-family:var(--mono); font-size:11px; }
.dz-side-note { flex:none; font-size:10.5px; margin-top:6px; }
@media (max-width: 900px) { .dz-map-body { flex-direction:column; } .dz-map-side { width:auto; } .dz-kpis { grid-template-columns:1fr; } }
.jvm-tooltip { background:var(--ink); font-family:var(--font); font-size:12px; border-radius:8px; padding:6px 10px;
  box-shadow:0 8px 20px -8px rgba(13,28,70,.5); }
#worldMap .jvm-zoom-btn { background:#fff; color:var(--ink-soft); border:1px solid #dfe8f3; width:28px; height:28px;
  line-height:26px; text-align:center; border-radius:999px; box-shadow:0 3px 10px -3px rgba(13,28,70,.35);
  font-weight:700; font-size:15px; font-family:var(--font); cursor:pointer; padding:0;
  transition:color var(--t), border-color var(--t), transform var(--t); left:auto; right:12px; }
#worldMap .jvm-zoom-btn:hover { color:var(--sky-600); border-color:var(--sky-400); transform:scale(1.08); }
#worldMap .jvm-zoomin { top:auto; bottom:48px; }
#worldMap .jvm-zoomout { top:auto; bottom:14px; }

/* loading */
.dz-loading { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; padding:10px 2px; }
.dz-loading .spin { width:15px; height:15px; border:2px solid var(--sky-200); border-top-color:var(--sky-600);
  border-radius:50%; animation:dzspin .7s linear infinite; }
@keyframes dzspin { to { transform:rotate(360deg); } }
.seg button:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width: 640px) { .dz-map-body .dz-chart, #worldMap { min-height:260px; } }
/* Masters (country codes) */
.masters-form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.link-danger { color:var(--err); }
.link-danger:hover { color:#b91c1c; }

/* ===================== SOA — Statement of Account ===================== */
/* account picker */
.soa-pick { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px; margin-top:14px; }
.soa-pick-card { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--line);
  border-radius:14px; background:#fff; text-decoration:none; color:var(--ink);
  transition:border-color var(--t), box-shadow var(--t), transform var(--t); }
.soa-pick-card:hover { border-color:var(--sky-300); box-shadow:0 12px 28px -14px rgba(2,132,199,.35);
  transform:translateY(-2px); }
.spc-ic { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#e0f2fe,#e7eaff);
  color:var(--sky-700); display:grid; place-items:center; flex:none; }
.spc-ic svg { width:19px; height:19px; }
.spc-t b { display:block; font-size:13.5px; font-weight:750; }
.spc-t small { font-size:11px; color:var(--muted); }
.spc-go { margin-left:auto; color:var(--faint); font-size:16px; transition:color var(--t), transform var(--t); }
.soa-pick-card:hover .spc-go { color:var(--sky-600); transform:translateX(3px); }

/* slim hero band */
.soa-hero { position:relative; overflow:hidden; border-radius:16px; padding:16px 22px;
  background:linear-gradient(120deg,#0ea5e9 0%,#3b82f6 55%,#4f46e5 100%); color:#fff;
  display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.soa-hero .sh-bg { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 220px at 85% 0%, rgba(255,255,255,.16), transparent 60%); }
.sh-t { position:relative; }
.sh-t h1 { margin:0; font-size:20px; font-weight:850; letter-spacing:-.01em; color:#fff; }
.sh-t h1 em { font-style:normal; color:#bae6fd; }
.sh-t .sub { margin:3px 0 0; font-size:12px; color:rgba(255,255,255,.88); }
.sh-type { font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; padding:2.5px 8px;
  border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
  vertical-align:1px; margin-left:4px; }
.sh-switch { color:#bae6fd; font-weight:650; }
.sh-switch:hover { color:#fff; }
.sh-note { position:relative; margin-left:auto; font-family:var(--mono); font-size:10.5px;
  color:rgba(255,255,255,.85); letter-spacing:.03em; }

/* the four status cards — dashboard dz-kpi components in a 4-up grid */
.soa-cards { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:14px; }
@media (max-width: 980px) { .soa-cards { grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* exactly the dashboard dz-kpi look — only the sizes shrink for the 4-up row */
.soa-cards .dz-kpi { padding:7px 14px; }
.soa-cards .dz-kpi .v { font-size:20px; }
.soa-cards .dz-kpi .ks .s b { font-size:13.5px; }
.soa-cards .dz-kpi .ks .s small { font-size:8.5px; }
a.soa-switch { text-decoration:none; cursor:pointer; }
a.soa-switch:hover b { color:#fff; }
/* no toggles between the title and the stats on this band — push stats right */
.dz-hero-band .hb-stats { margin-left:auto; }
.soa-card { position:relative; padding:8px 14px 8px 16px; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; }
.soa-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sca); }
.soa-card .k { grid-column:1 / -1; font-family:var(--mono); font-size:8.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.soa-card .v { font-size:21px; font-weight:850; letter-spacing:-.02em; color:var(--sct); line-height:1.1; }
.soa-card .a { display:flex; flex-direction:column; align-items:flex-end; gap:0; border:none; padding:0; }
.soa-card .a small { font-size:9px; color:var(--faint); }
.soa-card .a b { font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.sc-paid    { --sca:#059669; --sct:#047857; background:linear-gradient(135deg,#fff, #ecfdf5); }
.sc-unpaid  { --sca:#d97706; --sct:#b45309; background:linear-gradient(135deg,#fff, #fffbeb); }
.sc-overdue { --sca:#e11d48; --sct:#be123c; background:linear-gradient(135deg,#fff, #fff1f2); }
.sc-notdue  { --sca:#0284c7; --sct:#0369a1; background:linear-gradient(135deg,#fff, #f0f9ff); }

/* toolbar — a bare row, not a card */
.soa-toolbar { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  padding:0; margin-bottom:12px; }
.soa-toolbar .freset { background:#fff; border-color:#fecaca; color:var(--err); }
.soa-toolbar .freset:disabled { background:#f8fafc; border-color:var(--line); color:var(--faint); }
.soa-toolbar .freset:hover:not(:disabled) { background:var(--err-bg); transform:none; }
.soa-searchwrap { position:relative; flex:1 1 250px; min-width:180px; display:flex; }
.soa-search { height:34px; width:100%; border:1.5px solid var(--line); border-radius:10px;
  padding:0 30px 0 12px; font:inherit; font-size:12px; font-weight:550; background:#f8fbff;
  color:var(--ink); outline:none; transition:border-color var(--t), background var(--t), box-shadow var(--t); }
.soa-search::placeholder { color:var(--faint); font-weight:500; }
.soa-search:focus { border-color:var(--sky-400); background:#fff; box-shadow:0 0 0 3px rgba(14,165,233,.12); }
.soa-searchwrap .dt-sclear { right:7px; }
.soa-pin { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  border:1.5px solid var(--line); border-radius:10px; background:#f8fbff; cursor:pointer;
  font-size:12px; font-weight:650; color:var(--ink-soft); user-select:none;
  transition:border-color var(--t), background var(--t); }
.soa-pin:hover { border-color:var(--sky-300); }
.soa-pin:has(input:checked) { background:#fff1f2; border-color:#fecdd3; color:#be123c; }
.soa-pin input { accent-color:#e11d48; width:14px; height:14px; }
.soa-colwrap { position:relative; display:inline-flex; }
.soa-colpop { top:calc(100% + 8px); right:0; z-index:97; }
.soa-xl { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 15px;
  border:none; border-radius:10px; background:linear-gradient(135deg,#21a366,#107c41); color:#fff;
  font:inherit; font-size:12px; font-weight:750; cursor:pointer;
  box-shadow:0 6px 14px -6px rgba(16,124,65,.55); transition:filter var(--t), transform var(--t); }
.soa-xl svg { width:14px; height:14px; }
.soa-xl:hover { filter:brightness(1.1); transform:translateY(-1px); }
.soa-xl.busy { pointer-events:none; opacity:.6; }

/* table */
.soa-tablecard { padding:0; overflow:hidden; margin-bottom:0; }
.soa-wrap { overflow:auto; } /* height set by soa.js to fit the viewport */
table.soa-table { width:100%; border-collapse:collapse; }
table.soa-table th { position:sticky; top:0; z-index:3; background:#fff; color:var(--muted);
  font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  text-align:left; padding:6px 9px; box-shadow:inset 0 -2px 0 #2563eb; white-space:nowrap;
  cursor:pointer; user-select:none; }
.soa-table th:hover { color:var(--sky-700); }
.soa-table th.on { color:#1d4ed8; }
.soa-table th.th-r { text-align:right; }
.soa-table th .sarr { font-style:normal; font-size:8px; margin-left:3px; }
table.soa-table td { padding:3.5px 9px; font-size:10.5px; font-weight:550; color:var(--ink);
  border-bottom:1px solid var(--line-2); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:260px; }
.soa-table .sost { height:15px; padding:0 7px; font-size:7.5px; }
.soa-inv.is-od { height:16px; padding:0 8px; font-size:9px; }
.soa-table tbody tr:nth-child(even):not(.is-od) td { background:#fbfdff; }
.soa-table tbody tr:hover td { background:var(--sky-50) !important; }
.soa-table tr.is-od td { background:#fff7f8; }
.soa-table tr.is-od:hover td { background:#ffeef1 !important; }
/* the invoice-no column stays fixed while the table scrolls horizontally */
.soa-table th:first-child { position:sticky; left:0; z-index:4; }
.soa-table td:first-child { position:sticky; left:0; z-index:2; background:#fff;
  box-shadow:1px 0 0 var(--line-2); }
.soa-table tbody tr:nth-child(even):not(.is-od) td:first-child { background:#fbfdff; }
.soa-table tr.is-od td:first-child { background:#fff7f8; }
/* invoice number: plain mono normally, a red pill when the row is overdue */
.soa-inv { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--sky-700); }
.soa-inv.is-od { display:inline-flex; align-items:center; height:18px; padding:0 9px;
  border-radius:999px; background:linear-gradient(135deg,#f43f5e,#dc2626); color:#fff;
  font-size:9.5px; letter-spacing:.03em; box-shadow:0 3px 8px -3px rgba(225,29,72,.55); }
.soa-table .sc-id { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--sky-700); }
.soa-table .sc-date { font-family:var(--mono); font-size:10.5px; }
.soa-table .sc-num { font-family:var(--mono); font-size:11px; font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums; }
.soa-table td.od-red { color:#dc2626; }
.soa-table td.od-green { color:#059669; }
.soa-table td.od-blue { color:#1d4ed8; }
.sd-st b.od-blue { color:#1d4ed8; }
.sost { display:inline-flex; align-items:center; height:17px; padding:0 8px; border-radius:999px;
  font-family:var(--mono); font-size:8px; font-weight:800; letter-spacing:.08em; border:1px solid transparent; }
.sost.is-paid { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.sost.is-unpaid { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.soa-odchip { display:inline-flex; align-items:center; height:14px; padding:0 6px; border-radius:999px;
  background:#e11d48; color:#fff; font-family:var(--mono); font-size:7px; font-weight:800;
  letter-spacing:.08em; margin-left:6px; vertical-align:1px; }

/* pagination footer */
.soa-foot { display:flex; align-items:center; gap:14px; padding:9px 14px;
  border-top:1px solid var(--line-2); background:#fbfdff; flex-wrap:wrap; }
.soa-per { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:650;
  color:var(--muted); }
.soa-per select { height:28px; width:66px; font-size:12px; padding:0 6px; }
.soa-count { font-size:11.5px; }
.soa-pager { margin-left:auto; display:inline-flex; align-items:center; gap:4px; }
.pg-btn { min-width:28px; height:28px; padding:0 8px; border:1.5px solid var(--line); border-radius:8px;
  background:#fff; font:inherit; font-size:11.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;
  transition:border-color var(--t), background var(--t), color var(--t); }
.pg-btn:hover:not(:disabled):not(.on) { border-color:var(--sky-300); color:var(--sky-700); }
.pg-btn.on { background:var(--grad-btn); border-color:transparent; color:#fff; cursor:default;
  box-shadow:0 4px 10px -3px rgba(79,70,229,.45); }
.pg-btn:disabled { opacity:.4; cursor:not-allowed; }
.pg-dots { color:var(--faint); font-size:11px; padding:0 2px; }

/* tooltip titles follow the uppercase convention too */
.cbar-tip .tipc > b { text-transform:uppercase; }

/* company / account names display uppercase everywhere */
.ch-lbl, .cv-lab,
.dz-datatable td:first-child,
.dt-table td.dtc-up,
.msel-item span,
#fAccount .sel-row, #fAccount .msel-label, #hbAccount,
.hb-stats .hb-stat b,
.soa-table .sc-up, .spc-t b
{ text-transform:uppercase; }

/* ---- SOA invoice summary drawer (right side) ---- */
.soa-table tbody tr[data-i] { cursor:pointer; }
.soa-drawer { position:fixed; top:0; right:0; bottom:0; z-index:121; width:min(440px, 94vw);
  background:#fff; box-shadow:-24px 0 60px -24px rgba(2,8,30,.55);
  border-radius:18px 0 0 18px; display:flex; flex-direction:column;
  transform:translateX(105%); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.soa-drawer.open { transform:none; }
.sd-head { position:relative; flex:none; padding:16px 20px 14px;
  background:linear-gradient(120deg,#0ea5e9 0%,#3b82f6 55%,#4f46e5 100%); color:#fff;
  border-radius:18px 0 0 0; }
.sd-ht { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sd-inv { font-family:var(--mono); font-size:17px; font-weight:700; letter-spacing:.02em; }
.sd-head small { display:block; margin-top:4px; font-size:11px; color:rgba(255,255,255,.85);
  font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.sd-od { display:inline-flex; align-items:center; height:17px; padding:0 9px; border-radius:999px;
  background:#fff; color:#dc2626; font-family:var(--mono); font-size:8px; font-weight:800;
  letter-spacing:.08em; }
.sd-x { position:absolute; top:13px; right:14px; width:30px; height:30px; border:1px solid rgba(255,255,255,.35);
  border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:17px; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:background var(--t); }
.sd-x:hover { background:rgba(255,255,255,.3); }
.sd-body { flex:1; overflow-y:auto; padding:14px 20px 20px; }
.sd-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.sd-st { border:1.5px solid var(--line); border-radius:12px; padding:9px 10px; text-align:center;
  background:linear-gradient(180deg,#fff,#f8fbff); }
.sd-st em { display:block; font-style:normal; font-family:var(--mono); font-size:7.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; }
.sd-st b { font-family:var(--mono); font-size:14.5px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.sd-st b.od-red { color:#dc2626; }
.sd-st b.od-green { color:#059669; }
.sd-st b.sd-txt { font-size:12px; letter-spacing:0; white-space:nowrap; }
.sd-sec { border:1.5px solid var(--line-2); border-radius:13px; padding:12px 14px 6px; margin-bottom:11px;
  position:relative; }
.sd-tag { position:absolute; top:-8px; left:12px; padding:1.5px 9px; border-radius:999px;
  font-family:var(--mono); font-size:7.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; }
.sd-tag.tag-sky  { background:linear-gradient(135deg,#38bdf8,#0284c7); }
.sd-tag.tag-ind  { background:linear-gradient(135deg,#818cf8,#4f46e5); }
.sd-tag.tag-teal { background:linear-gradient(135deg,#2dd4bf,#0d9488); }
.sd-tag.tag-amb  { background:linear-gradient(135deg,#fbbf24,#d97706); }
.sd-kv { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:5.5px 0; border-bottom:1px dashed var(--line-2); }
.sd-sec .sd-kv:last-child { border-bottom:none; }
.sd-kv em { font-style:normal; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); flex:none; }
.sd-kv b { font-size:12px; font-weight:650; color:var(--ink); text-align:right; overflow-wrap:anywhere; }
.sd-kv.mono b { font-family:var(--mono); font-size:11px; color:var(--sky-700); }
.sd-kv.wrap { flex-direction:column; align-items:flex-start; gap:5px; }
.sd-kv.wrap b { display:flex; flex-wrap:wrap; gap:4px; text-align:left; }
.sd-chip { display:inline-flex; align-items:center; height:19px; padding:0 8px; border-radius:7px;
  background:var(--sky-50); border:1px solid var(--sky-200); color:var(--sky-700);
  font-family:var(--mono); font-size:9.5px; font-weight:700; }
.sd-route { display:flex; align-items:center; gap:9px; padding:7px 0 6px; font-size:12px; font-weight:750;
  color:var(--ink); border-bottom:1px dashed var(--line-2); }
.sd-route span { overflow-wrap:anywhere; }
.sd-route i { font-style:normal; color:var(--sky-600); font-weight:800; flex:none; }
.sd-dates { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:9px 0; }
.sd-dates > div { text-align:center; border:1px solid var(--line-2); border-radius:9px; padding:6px 4px; }
.sd-dates em { display:block; font-style:normal; font-family:var(--mono); font-size:7px; font-weight:700;
  letter-spacing:.14em; color:var(--faint); margin-bottom:2px; }
.sd-dates b { font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--ink-soft); }

/* ===================== Purchase Orders board ===================== */
.po-cnt { font-style:normal; font-family:var(--mono); font-size:8px; font-weight:800; margin-left:4px;
  background:rgba(255,255,255,.22); border-radius:999px; padding:1px 5px; }
.dz-tab.on .po-cnt { background:#e8f0fe; color:#1e40af; }
.po-new { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 15px; border:none;
  border-radius:10px; background:var(--grad-btn); color:#fff; font:inherit; font-size:12px; font-weight:750;
  cursor:pointer; box-shadow:0 6px 14px -6px rgba(79,70,229,.55); transition:filter var(--t), transform var(--t); }
.po-new svg { width:13px; height:13px; }
.po-new:hover { filter:brightness(1.1); transform:translateY(-1px); }
.po-table td.po-shipdate { color:#1d4ed8; font-weight:700; }
.pst { display:inline-flex; align-items:center; height:16px; padding:0 8px; border-radius:999px;
  font-family:var(--mono); font-size:7.5px; font-weight:800; letter-spacing:.07em; border:1px solid transparent; }
.pst-ag { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.pst-bk { background:#f0f9ff; color:#0369a1; border-color:#bae6fd; }
.pst-ow { background:#eef2ff; color:#4338ca; border-color:#c7d2fe; }
.pst-ar { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }

/* wide create / edit modal */
.po-modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.97); z-index:122;
  width:min(980px, 96vw); max-height:92vh; background:#fff; border-radius:18px; display:flex;
  flex-direction:column; box-shadow:0 30px 80px -24px rgba(2,8,30,.6); opacity:0;
  transition:opacity .22s ease, transform .22s ease; }
.po-modal.open { opacity:1; transform:translate(-50%,-50%) scale(1); }
.pm-head { position:relative; flex:none; padding:14px 20px 12px; color:#fff;
  background:linear-gradient(120deg,#0ea5e9 0%,#3b82f6 55%,#4f46e5 100%); border-radius:18px 18px 0 0; }
.pm-ht { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pm-ht > b { font-size:15px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.pm-ref { font-family:var(--mono); font-size:11px; font-weight:700; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:2.5px 10px; }
.pm-head small { display:block; margin-top:3px; font-size:10.5px; color:rgba(255,255,255,.85);
  font-weight:650; text-transform:uppercase; letter-spacing:.04em; }
.pm-body { flex:1; min-height:0; overflow-y:auto; padding:16px 20px; }
.pm-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 12px; }
@media (max-width: 860px) { .pm-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.pm-f { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pm-f em { font-style:normal; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); }
.pm-f .input { height:32px; font-size:12px; width:100%; }
.pm-wide { grid-column:span 2; }
.pm-combo { position:relative; }
.pm-list { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40; background:#fff;
  border:1px solid #e3eaf4; border-radius:10px; max-height:210px; overflow-y:auto; padding:4px;
  box-shadow:0 18px 40px -16px rgba(13,28,70,.4); }
.pm-li { display:block; width:100%; text-align:left; border:none; background:transparent; font:inherit;
  font-size:11.5px; font-weight:600; color:var(--ink-soft); padding:6px 9px; border-radius:7px; cursor:pointer;
  text-transform:uppercase; }
.pm-li:hover { background:var(--sky-50); color:var(--sky-700); }
.pm-none { display:block; font-size:10.5px; color:var(--faint); padding:7px 9px; }

.pm-ship { position:relative; border:1.5px solid var(--line-2); border-radius:13px; padding:14px 14px 8px;
  margin-top:16px; }
.pm-ship-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr); gap:10px 16px; align-items:start; }
@media (max-width: 860px) { .pm-ship-grid { grid-template-columns:1fr; } }
.pm-shiprow { display:flex; gap:7px; }
.pm-shiprow .input { flex:1; }
.pm-dates { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.pm-dt { display:flex; flex-direction:column; gap:3px; border:1px solid var(--line-2); border-radius:10px;
  padding:7px 9px; }
.pm-dt em { font-style:normal; font-family:var(--mono); font-size:7px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); }
.pm-dt b { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink); }
.pm-dt .input { height:27px; font-size:11px; padding:0 7px; }
.pm-dt.is-ship { background:linear-gradient(135deg,#f0f9ff,#eef2ff); border-color:#bae6fd; }
.pm-dt.is-ship b { color:#1d4ed8; }
.pm-hint { grid-column:1 / -1; font-size:10.5px; margin:0; }

.pm-cols { display:grid; grid-template-columns:1.25fr 1fr; gap:14px; margin-top:16px; }
@media (max-width: 860px) { .pm-cols { grid-template-columns:1fr; } }
.pm-sec { position:relative; border:1.5px solid var(--line-2); border-radius:13px; padding:14px 13px 9px; min-height:120px; }
.pm-addcomment { display:flex; gap:7px; margin-bottom:9px; }
.pm-addcomment .input { flex:1; height:30px; font-size:12px; }
.pm-comments, .pm-logs { max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; }
.pm-c { border:1px solid var(--line-2); border-radius:10px; padding:7px 10px; background:#fbfdff; }
.pm-cm { font-size:12px; color:var(--ink); overflow-wrap:anywhere; }
.pm-c small { display:block; margin-top:3px; font-size:9.5px; color:var(--faint); font-weight:650;
  text-transform:uppercase; letter-spacing:.04em; }
.pm-l { display:flex; gap:8px; align-items:flex-start; border-bottom:1px dashed var(--line-2); padding-bottom:6px; }
.pm-l:last-child { border-bottom:none; }
.pm-la { flex:none; font-family:var(--mono); font-size:7.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; border-radius:6px; padding:2.5px 7px; background:#eef2f7; color:var(--muted); }
.pm-la-create { background:#ecfdf5; color:#047857; }
.pm-la-update { background:#e8f0fe; color:#1e40af; }
.pm-la-comment { background:#f5f3ff; color:#6d28d9; }
.pm-la-match { background:#fffbeb; color:#b45309; }
.pm-ld { font-size:10.5px; color:var(--ink-soft); overflow-wrap:anywhere; }
.pm-ld i { font-style:normal; color:var(--muted); font-weight:700; }
.pm-ld small { display:block; font-size:9px; color:var(--faint); margin-top:1px; text-transform:uppercase;
  letter-spacing:.04em; font-weight:650; }
.pm-foot { flex:none; display:flex; align-items:center; gap:10px; justify-content:flex-end;
  padding:11px 20px; border-top:1px solid var(--line-2); }
.pm-foot .muted { margin-right:auto; font-size:11.5px; }

/* ---- PO board v2: bcf-style chips, frozen ref columns, side panel, docs ---- */
/* chips like the Ocean-Exports booking-confirmation table — flex-centered
   with a leading status dot so every chip sits perfectly on the row line */
.pst { display:inline-flex; align-items:center; height:18px; padding:0 9px; border-radius:999px;
  font-size:9.5px; font-weight:750; letter-spacing:.04em; line-height:1;
  border:1px solid transparent; font-family:var(--font); vertical-align:middle; white-space:nowrap; }
/* reference chips (booking ref / PO #): mono text inside the pill */
.pst.pbk { font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.02em; }
.pst-ag { background:#FEF3C7; color:#92400E; border-color:#FCD34D; }
.pst-bk { background:#E0F2FE; color:#075985; border-color:#7DD3FC; }
.pst-ow { background:#E0E7FF; color:#3730A3; border-color:#A5B4FC; }
.pst-ar { background:#ECFDF5; color:#065F46; border-color:#6EE7B7; }
.psv-or { background:#E0F2FE; color:#075985; border-color:#7DD3FC; }
.psv-of { background:#F5F3FF; color:#5B21B6; border-color:#C4B5FD; }
.psv-dp { background:#CCFBF1; color:#115E59; border-color:#5EEAD4; }
.psv-to { background:#FFEDD5; color:#9A3412; border-color:#FDBA74; }
.psv-x  { background:#F1F5F9; color:#475569; border-color:#E2E8F0; }
.psv-eq { background:#F1F5F9; color:#334155; border-color:#CBD5E1; font-family:var(--mono); font-size:9px; }
.psv-car { background:#ECFEFF; color:#155E75; border-color:#A5F3FC; }
/* date chips on the board: grey = manual / PO date, blue = from the linked shipment */
.pst.pdt { font-family:var(--mono); font-size:9.5px; font-weight:700;
  background:#F8FAFC; color:#334155; border-color:#E2E8F0; }
.pst.pdt-ship { background:#EFF6FF; color:#1D4ED8; border-color:#BFDBFE; }

/* modern inline pickers (PO view + new-PO panel): styled dropdown + app calendar */
.pv-selbtn { display:inline-flex; align-items:center; justify-content:space-between; gap:8px;
  min-width:150px; cursor:pointer; background:#fff; }
.pv-selbtn > span { display:inline-flex; align-items:center; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.pv-selbtn:hover { border-color:var(--sky-400); }
.pv-chev { font-style:normal; font-size:8.5px; color:var(--faint); }
.pv-pick .pm-list { left:auto; right:0; min-width:172px; }
.pv-pick .pm-list.up { top:auto; bottom:calc(100% + 4px); }
.pv-opt { text-transform:none; display:flex; align-items:center; }
.pv-opt.is-on { background:var(--sky-50); }
.pv-calpop { width:252px; padding:10px; max-height:none; overflow:visible; }
.pv-calpop .pop-foot { justify-content:flex-end; }
.cal-d.today:not(.end) { box-shadow:inset 0 0 0 1.5px var(--sky-400); }

/* booking ref + PO # stay frozen while the board scrolls */
.po-table th:nth-child(2), .po-table td:nth-child(2) { position:sticky; left:112px; z-index:2;
  background:#fff; box-shadow:1px 0 0 var(--line-2); }
/* keep the blue header rule running under the frozen PO # header */
.po-table th:nth-child(2) { z-index:5; box-shadow:inset 0 -2px 0 #2563eb, 1px 0 0 var(--line-2); }
.po-table tbody tr:nth-child(even):not(.is-od) td:nth-child(2) { background:#f7faff; }
/* slightly stronger zebra + dimmed empty markers for a calmer board */
.po-table tbody tr:nth-child(even):not(.is-od) td { background:#f7faff; }
.po-table tbody tr:nth-child(even):not(.is-od) td:first-child { background:#f7faff; }
.soa-table td.sc-mut { color:#c6d2e2; }
.po-table td.po-doccell { cursor:pointer; }
.po-docchip { display:inline-flex; align-items:center; gap:5px; height:19px; padding:0 9px;
  border-radius:999px; background:linear-gradient(135deg,#e0f2fe,#e7eaff); border:1px solid #bae6fd;
  color:#0369a1; font-family:var(--mono); font-size:9.5px; font-weight:800; }
.po-docchip svg { width:11px; height:11px; }

/* the edit panel slides from the right instead of a centered modal */
.po-modal.po-side { left:auto; right:0; top:0; bottom:0; width:min(840px, 97vw); height:auto;
  max-height:none; border-radius:18px 0 0 18px; opacity:1;
  transform:translateX(105%); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.po-modal.po-side.open { transform:none; }
.po-modal.po-side .pm-head { border-radius:18px 0 0 0; }

/* documents inside the panel: picker + drag-drop + list */
.pm-docsec.over { border-color:var(--sky-400); background:#f0f9ff; }
.pm-adddoc { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:9px; }
.pm-docpick { display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border:1.5px dashed var(--sky-300);
  border-radius:11px; background:#f8fbff; color:var(--sky-700); font-size:12px; font-weight:700; cursor:pointer;
  transition:background var(--t), border-color var(--t); }
.pm-docpick:hover { background:var(--sky-50); border-color:var(--sky-400); }
.pm-docpick svg { width:15px; height:15px; }
.pm-docpick small { font-size:10px; font-weight:600; color:var(--muted); }
#pmDocMsg { font-size:11px; }
.pm-docs { display:flex; flex-direction:column; gap:6px; max-height:170px; overflow-y:auto; }
.pm-doc { display:flex; align-items:center; gap:9px; border:1px solid var(--line-2); border-radius:10px;
  padding:6px 10px; background:#fbfdff; }
.pm-doc svg { width:15px; height:15px; color:var(--sky-600); flex:none; }
.pm-doc .pm-docn { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--sky-700);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-doc small { margin-left:auto; flex:none; font-size:9.5px; color:var(--faint); }
.pm-doc .link-btn { flex:none; }
.pm-doc .row-del { flex:none; }

/* document viewer: list left, live preview right */
.docv { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.97); z-index:123;
  width:min(1100px, 97vw); height:min(760px, 92vh); background:#fff; border-radius:18px;
  display:flex; flex-direction:column; box-shadow:0 30px 80px -24px rgba(2,8,30,.65); opacity:0;
  transition:opacity .22s ease, transform .22s ease; }
.docv.open { opacity:1; transform:translate(-50%,-50%) scale(1); }
.docv-head { position:relative; flex:none; display:flex; align-items:center; gap:10px; padding:13px 20px;
  color:#fff; background:linear-gradient(120deg,#0ea5e9 0%,#3b82f6 55%,#4f46e5 100%);
  border-radius:18px 18px 0 0; }
.docv-head > b { font-size:14px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.docv-body { flex:1; min-height:0; display:flex; }
.docv-list { flex:none; width:265px; border-right:1px solid var(--line-2); overflow-y:auto; padding:9px; }
.docv-li { display:block; width:100%; text-align:left; border:1.5px solid transparent; background:transparent;
  font:inherit; padding:8px 10px; border-radius:10px; cursor:pointer; margin-bottom:4px;
  transition:background var(--t), border-color var(--t); }
.docv-li b { display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--ink);
  overflow-wrap:anywhere; }
.docv-li small { font-size:9.5px; color:var(--faint); }
.docv-li:hover { background:var(--sky-50); }
.docv-li.on { background:#e8f0fe; border-color:#93c5fd; }
.docv-li.on b { color:#1e40af; }
.docv-stage { flex:1; min-width:0; position:relative; background:#eef3fb; border-radius:0 0 18px 0; }
#docvFrame, #svDocvFrame { position:absolute; inset:0; width:100%; height:100%; border:none; border-radius:0 0 18px 0; }
/* doc viewer close: floats outside the modal edge (pv-style); backdrop never closes */
.docv-outx { left:auto; right:-46px; top:0; }
@media (max-width: 1210px) { .docv-outx { right:12px; top:10px; } }
.docv-load { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  gap:11px; background:rgba(238,243,251,.92); backdrop-filter:blur(2px); border-radius:0 0 18px 0; }
.docv-load b { font-size:13px; font-weight:750; color:var(--ink-soft); }
.docv-fallback { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; color:var(--muted); font-size:12.5px; }
.docv-fallback svg { width:46px; height:46px; color:var(--sky-300); }
.docv-fallback b { font-family:var(--mono); font-size:12px; color:var(--ink-soft); overflow-wrap:anywhere;
  max-width:70%; text-align:center; }
.docv-fallback .po-new { text-decoration:none; }

/* ---- PO panel v3: below the app header, wider, guarded close, log table ---- */
.po-modal.po-side { top:var(--head-h); width:min(1020px, 97vw); }
.po-modal.po-side .pm-head { border-radius:18px 0 0 0; padding-right:26px; }
.pm-outx { position:absolute; left:-46px; top:12px; width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.4); background:rgba(11,18,32,.55); backdrop-filter:blur(4px);
  color:#fff; font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:background var(--t), transform var(--t); z-index:2; }
.pm-outx:hover { background:#dc2626; transform:scale(1.06); }

/* segmented form sections */
.pm-formsec { margin-bottom:14px; padding:14px 14px 10px; background:#fcfdff; }
.pm-formsec .pm-grid { gap:10px 14px; }
.pm-f .input, .pm-f select.input { background:#fff; }
.pm-f .input:focus { border-color:var(--sky-400); box-shadow:0 0 0 3px rgba(14,165,233,.12); }

/* busy overlay — swallows every click inside the panel */
.pm-busy { position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  gap:12px; background:rgba(255,255,255,.78); backdrop-filter:blur(3px); border-radius:18px 0 0 18px; }
.pm-busy b { font-size:13.5px; font-weight:750; color:var(--ink-soft); }

/* unsaved-changes prompt */
.pm-confirm { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(11,18,32,.35); backdrop-filter:blur(2px); border-radius:18px 0 0 18px; }
.pmc-card { width:min(360px, 86%); background:#fff; border-radius:16px; padding:20px 22px 16px;
  box-shadow:0 24px 60px -18px rgba(2,8,30,.55); animation:popin .16s var(--t-slow) both; }
.pmc-card b { font-size:15px; font-weight:800; color:var(--ink); }
.pmc-card p { margin:6px 0 14px; font-size:12.5px; color:var(--muted); }
.pmc-btns { display:flex; justify-content:flex-end; gap:9px; }

/* change log: one container per change with a Field | From | To table */
.pm-log { border:1px solid var(--line-2); border-radius:10px; padding:8px 10px; background:#fbfdff; }
.pm-loghead { display:flex; align-items:center; gap:8px; }
.pm-loghead small { margin-left:auto; font-size:9px; color:var(--faint); font-weight:650;
  text-transform:uppercase; letter-spacing:.04em; }
.pm-logtbl { width:100%; border-collapse:collapse; margin-top:6px; }
.pm-logtbl th { text-align:left; font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); padding:2px 6px; border-bottom:1px solid var(--line-2); }
.pm-logtbl td { font-size:10.5px; padding:3px 6px; border-bottom:1px dashed var(--line-2);
  overflow-wrap:anywhere; color:var(--muted); }
.pm-logtbl tr:last-child td { border-bottom:none; }
.pm-logtbl td:first-child { font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.pm-logtbl td.lt { color:var(--ink); font-weight:700; }
.po-msel .fc-l { max-width:72px; overflow:hidden; text-overflow:ellipsis; }
/* two clean band rows: tabs + actions, then the filter chips + search */
.po-actions { margin-left:auto; display:flex; align-items:center; gap:9px; flex:none; }
.po-filterrow { padding-top:2px; }
.po-filterrow .dz-filters { flex:1 1 100%; }
.po-msel { flex:0 1 170px; min-width:124px; }
.po-msel .fchip { width:100%; }
.po-filterrow .soa-searchwrap { flex:1 1 220px; min-width:170px; }

/* ---- PO full view panel (Ocean-Exports style, slides in from the right) ---- */
.pv { position:fixed; right:0; top:var(--head-h); bottom:0; z-index:122;
  width:min(1280px, 97vw); background:#fff; border-radius:18px 0 0 18px;
  display:flex; flex-direction:column; box-shadow:-28px 0 70px -22px rgba(2,8,30,.6);
  transform:translateX(105%); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.pv.open { transform:none; }
.pv-head { border-radius:18px 0 0 0; }
.pv-foot { flex:none; display:flex; align-items:center; gap:10px; justify-content:flex-end;
  padding:11px 20px; border-top:1px solid var(--line-2); }
.pv-foot .muted { margin-right:auto; font-size:11.5px; }
.pv.is-new .pv-left { display:none; }
/* the hidden attribute must always win, even over display:flex rules */
[hidden] { display:none !important; }
.pv .pm-confirm, .pv .pm-busy { border-radius:18px 0 0 18px; }
.pv-head { position:relative; flex:none; display:flex; align-items:center; gap:13px; padding:14px 22px;
  border-bottom:1px solid var(--line-2); }
.pv-badge { width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--grad-btn); color:#fff; box-shadow:0 8px 18px -8px rgba(79,70,229,.6); }
.pv-badge svg { width:20px; height:20px; }
.pv-ht { min-width:0; }
.pv-ht b { display:block; font-family:var(--mono); font-size:17px; font-weight:700; color:var(--ink); }
.pv-ht small { font-size:11px; color:var(--muted); font-weight:650; text-transform:uppercase; letter-spacing:.03em; }
.pv-headchips { display:flex; gap:7px; align-items:center; margin-left:6px; }
.pv-x { position:static; margin-left:auto; border:1px solid #e3eaf4; background:#fff;
  color:var(--muted); }
.pv-x:hover { background:var(--err-bg); border-color:var(--err-line); color:var(--err); }
.pv-body { flex:1; min-height:0; display:flex; }
.pv-left { flex:none; width:330px; border-right:1px solid var(--line-2); background:#f8fafc;
  display:flex; flex-direction:column; border-radius:0 0 0 18px; }
.pv-lh { flex:none; display:flex; align-items:center; gap:8px; padding:12px 14px; font-size:11px;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--line-2); }
.pv-lh small { margin-left:auto; font-size:9.5px; color:var(--faint); letter-spacing:.02em; }
.pv-lhic { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; color:#fff; flex:none; }
.pv-lhic.ic-amb { background:linear-gradient(135deg,#fbbf24,#d97706); }
.pv-lhic svg { width:12px; height:12px; }
.pv-hist { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:7px; }
.pv-right { flex:1; min-width:0; overflow-y:auto; padding:16px 18px;
  display:grid; grid-template-columns:1fr 1fr; gap:13px; align-content:start; }
@media (max-width: 1000px) { .pv-right { grid-template-columns:1fr; } .pv-left { display:none; } }
.pv-sec { border:1.5px solid var(--line-2); border-radius:14px; padding:11px 14px 8px; background:#fff; min-width:0; }
.pv-wide { grid-column:1 / -1; }
.pv-sech { display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink); padding-bottom:7px;
  border-bottom:1px solid var(--line-2); margin-bottom:4px; }
.pv-sechn { margin-left:auto; font-family:var(--mono); font-size:9px; color:var(--faint); }
.pv-secic { width:20px; height:20px; border-radius:6px; display:grid; place-items:center; color:#fff;
  font-size:10px; font-weight:800; flex:none; }
.pv-secic.ic-sky  { background:linear-gradient(135deg,#38bdf8,#0284c7); }
.pv-secic.ic-ind  { background:linear-gradient(135deg,#818cf8,#4f46e5); }
.pv-secic.ic-teal { background:linear-gradient(135deg,#2dd4bf,#0d9488); }
.pv-secic.ic-vio  { background:linear-gradient(135deg,#a78bfa,#7c3aed); }
.pv-kv { display:flex; align-items:center; gap:9px; padding:5.5px 0; border-bottom:1px dashed var(--line-2); }
.pv-sec .pv-kv:last-child { border-bottom:none; }
.pv-kv em { font-style:normal; font-size:11px; font-weight:650; color:var(--ink-soft); flex:none; min-width:108px; }
.pv-kv .pv-v { margin-left:auto; min-width:0; display:flex; align-items:center; justify-content:flex-end;
  gap:7px; flex:1; }
.pv-pen { flex:none; width:24px; height:24px; border:none; border-radius:7px; background:transparent;
  color:#c3cfdf; cursor:pointer; display:grid; place-items:center; transition:background var(--t), color var(--t); }
.pv-pen svg { width:12px; height:12px; }
.pv-pen:hover { background:var(--sky-50); color:var(--sky-600); }
.pv-miss { color:#c6d2e2; font-weight:700; }
.pv-date { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--ink-soft);
  background:#f1f5f9; border:1px solid #e2e8f0; border-radius:7px; padding:2px 8px; }
.pv-val { font-size:12px; font-weight:650; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-up { font-size:11.5px; font-weight:750; color:var(--ink); text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-edit { display:flex; align-items:center; gap:6px; flex:1; justify-content:flex-end; }
.pv-edit .input { height:29px; font-size:11.5px; max-width:240px; }
.pv-edit .pf-btn { height:28px; padding:0 10px; }
.pv-combo { position:relative; flex:1; max-width:240px; }
.pv-combo .input { width:100%; }
.pv-dgrid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; padding:8px 0 4px; }
.pv-dgrid .pv-kv { border:1px solid var(--line-2); border-radius:10px; padding:6px 9px; }
.pv-dgrid .pv-kv em { min-width:0; font-family:var(--mono); font-size:7px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.pv-docpick { margin-bottom:8px; }
.pv-docpick.over { background:var(--sky-50); border-color:var(--sky-400); }
.pv-busy { border-radius:18px; }

/* ======================== Shipments page ======================== */
.sp-group { font-family:var(--mono); font-size:9px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sky-600); margin:16px 2px 8px; }
.sp-group i { font-style:normal; background:var(--sky-50); border:1px solid var(--sky-200);
  border-radius:999px; padding:1px 7px; margin-left:5px; color:var(--sky-700); }

/* band rows: view tabs + status tabs share the filter line */
.sh-viewtabs { flex:none; }
.sh-viewtabs .dz-tab { display:inline-flex; align-items:center; gap:6px; }
.svt-i { width:12px; height:12px; }
.sh-statustabs { flex:none; }
.sh-statustabs .dz-tab { padding:0 11px; }
.po-filterrow .dz-tabs + .dz-tabs + .dz-filters,
.po-filterrow .dz-tabs + .dz-filters { flex:1 1 420px; }
/* search leads the filter row */
.po-filterrow .soa-searchwrap { flex:1 1 240px; min-width:180px; }

/* generic small chips (presentation.html chip family) */
.shc { display:inline-flex; align-items:center; height:17px; padding:0 8px; border-radius:999px;
  font-family:var(--mono); font-size:8px; font-weight:800; letter-spacing:.08em; white-space:nowrap;
  border:1px solid transparent; }
.shc-sky   { background:#f0f9ff; color:#0369a1; border-color:#bae6fd; }
.shc-ind   { background:#eef2ff; color:#4338ca; border-color:#e0e7ff; }
.shc-teal  { background:#f0fdfa; color:#0f766e; border-color:#99f6e4; }
.shc-vio   { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.shc-amb   { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.shc-ok    { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.shc-rose  { background:#fff1f2; color:#be123c; border-color:#fecdd3; }
.shc-ghost { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }

/* the list is a strict single-page view — the window never scrolls there */
body.sh-lock { overflow:hidden; }

/* rows open the shipment view on click */
.sh-table tbody tr[data-i] { cursor:pointer; }

/* S.No + Shipment No + PO # stay frozen while the table scrolls.
   The three columns keep fixed widths so the sticky offsets line up. */
.sh-table th:first-child, .sh-table td:first-child {
  width:44px; min-width:44px; max-width:44px; }
.sh-snth { cursor:default; text-align:center; }
.sh-snth:hover { color:var(--muted); }
.sh-table td.sh-sn { font-family:var(--mono); font-size:9.5px; font-weight:700;
  color:var(--faint); text-align:center; }
.sh-table th:nth-child(2), .sh-table td:nth-child(2) { position:sticky; left:44px; z-index:2;
  background:#fff; width:122px; min-width:122px; max-width:122px; }
.sh-table th:nth-child(3), .sh-table td:nth-child(3) { position:sticky; left:166px; z-index:2;
  background:#fff; width:108px; min-width:108px; max-width:108px;
  box-shadow:1px 0 0 var(--line-2); }
/* keep the blue header rule running under the frozen headers */
.sh-table th:nth-child(2) { z-index:5; box-shadow:inset 0 -2px 0 #2563eb; }
.sh-table th:nth-child(3) { z-index:5; box-shadow:inset 0 -2px 0 #2563eb, 1px 0 0 var(--line-2); }

/* ==================== shipment view (full page) ==================== */
.shv { animation:svin .28s ease; }
@keyframes svin { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.shv-topbar { position:sticky; top:var(--head-h); z-index:40; display:flex; align-items:center; gap:14px;
  margin:-24px -26px 14px; padding:10px 26px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); }
.shv-back { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px 0 10px;
  border:1.5px solid var(--line); border-radius:999px; background:#fff; font:inherit; font-size:12px;
  font-weight:750; color:var(--ink-soft); cursor:pointer; transition:border-color var(--t), color var(--t), background var(--t); }
.shv-back svg { width:14px; height:14px; }
.shv-back:hover { border-color:var(--sky-400); color:var(--sky-700); background:var(--sky-50); }
.shv-id { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
.shv-crumb { font-family:var(--mono); font-size:9px; font-weight:800; letter-spacing:.16em; color:var(--faint);
  padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:#f8fafc; white-space:nowrap; }
.shv-no { font-family:var(--mono); font-size:17px; font-weight:800; letter-spacing:.01em;
  background:var(--grad-btn); -webkit-background-clip:text; background-clip:text; color:transparent; }
.shv-acct { margin-left:auto; text-align:right; line-height:1.25; }
.shv-xl { margin-left:14px; flex:none; }
.shv-acct b { font-size:12px; font-weight:800; color:var(--ink); display:block; }
.shv-acct small { font-family:var(--mono); font-size:9.5px; color:var(--sky-700); font-weight:700; }
.sv-loading { display:grid; place-items:center; gap:10px; padding:80px 0; color:var(--muted); }
.sv-loading .dzb-ring { position:static; }

/* cards + grid */
.sv-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:14px; align-items:start; margin-bottom:14px; }
.sv-grid2 { grid-template-columns:1fr 1fr 1fr; }
.sv-colA, .sv-colB, .sv-colC { display:grid; gap:14px; align-content:start; min-width:0; }
.sv-card { background:#fff; border:1.5px solid var(--line); border-radius:15px; padding:15px 16px;
  box-shadow:0 10px 26px -18px rgba(15,23,42,.18); min-width:0; }
.sv-tag { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sky-600); font-weight:800; margin-bottom:11px; }
.sv-ic { width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center;
  justify-content:center; color:#fff; flex:none; }
.sv-ic svg { width:13px; height:13px; }
.ic-sky  { background:linear-gradient(135deg,#38bdf8,#0284c7); }
.ic-ind  { background:linear-gradient(135deg,#818cf8,#4f46e5); }
.ic-teal { background:linear-gradient(135deg,#2dd4bf,#0d9488); }
.ic-amb  { background:linear-gradient(135deg,#fbbf24,#d97706); }
.ic-vio  { background:linear-gradient(135deg,#a78bfa,#7c3aed); }
.ic-rose { background:linear-gradient(135deg,#fb7185,#e11d48); }
.ic-ghost{ background:linear-gradient(135deg,#94a3b8,#64748b); }

/* icon key-value tiles (presentation "kv" style) */
.sv-kvs { display:grid; gap:7px; }
.sv-kv { display:flex; align-items:center; gap:10px; background:#f8fafc; border:1px solid var(--line);
  border-radius:11px; padding:8px 11px; min-width:0; }
.sv-kv .sv-ic { width:28px; height:28px; }
.sv-kvt { min-width:0; line-height:1.25; }
.sv-kvt em { display:block; font-style:normal; font-size:9.5px; color:var(--muted); font-weight:650; }
.sv-kvt b { font-size:12px; font-weight:800; color:var(--ink); overflow-wrap:anywhere; display:flex;
  flex-wrap:wrap; gap:4px; align-items:center; }
.sv-mono { font-family:var(--mono); font-size:11px; color:var(--sky-700); }
.sv-empty { font-size:11.5px; color:var(--faint); margin:2px 0; }
.sv-ok { color:var(--ok, #059669) !important; font-weight:800; }
.sv-link { display:inline-block; margin-top:9px; font-size:11px; font-weight:800; color:var(--sky-600);
  text-decoration:none; }
.sv-link:hover { color:var(--indigo-600, #4f46e5); }

/* routing legs (image-21 style cards) */
.sv-leg { border:1.5px solid var(--line); border-radius:13px; padding:12px 13px; }
.sv-leg + .sv-leg { margin-top:10px; }
/* fixed 3-col grid: equal side columns keep the mode icon dead-center on
   every leg, whatever the from/to text widths */
.sv-legtop { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);
  gap:10px; align-items:start; }
.sv-pt { line-height:1.2; min-width:0; }
.sv-pt b { font-size:13px; font-weight:800; display:block; overflow-wrap:anywhere; }
.sv-pt small { font-family:var(--mono); font-size:8.5px; color:var(--faint); letter-spacing:.1em; }
.sv-ptr { text-align:right; }
.sv-mid { text-align:center; flex:1; min-width:70px; }
.sv-mode { font-size:11.5px; font-weight:750; color:var(--ink-soft); white-space:nowrap; }
.sv-dash { display:block; border-top:2.5px dashed var(--sky-400); margin:6px 8px 3px; position:relative; }
.sv-dash::after { content:"▸"; position:absolute; right:-4px; top:-11px; color:var(--sky-500); font-size:14px; }
.sv-ln { font-family:var(--mono); font-size:8.5px; font-weight:800; color:var(--sky-600);
  letter-spacing:.06em; text-transform:uppercase; }
.sv-legdates { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; margin-top:10px;
  border-top:1px solid var(--line); padding-top:9px; }
.sv-legdates span { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.sv-legdates span i { font-style:normal; font-family:var(--mono); font-size:10.5px; font-weight:700;
  color:var(--ink-soft); }

/* containers */
.sv-cont { border:1.5px solid var(--line); border-radius:13px; padding:10px 12px; }
.sv-cont + .sv-cont { margin-top:9px; }
.sv-controw { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sv-controw > b { font-size:12px; font-weight:800; }
.sv-contn { width:19px; height:19px; border-radius:6px; background:var(--sky-50); border:1px solid var(--sky-200);
  color:var(--sky-700); font-family:var(--mono); font-size:9px; font-weight:800; display:inline-flex;
  align-items:center; justify-content:center; flex:none; }
.sv-contev { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:7px; padding-top:7px;
  border-top:1px dashed var(--line-2); }
.sv-contev span { font-size:10px; color:var(--muted); }
.sv-contev span i { font-style:normal; font-family:var(--mono); font-size:9.5px; font-weight:700;
  color:var(--ink-soft); }
.sv-contdocs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; padding-top:8px;
  border-top:1px dashed var(--line-2); }
.sv-contdocs > em { font-style:normal; font-family:var(--mono); font-size:7.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-right:2px; }

/* document pills + add buttons */
.sv-doc { display:inline-flex; align-items:center; gap:0; max-width:100%; border:1px solid var(--sky-200);
  background:var(--sky-50); border-radius:8px; overflow:hidden; }
.sv-docn { border:none; background:transparent; font:inherit; font-family:var(--mono); font-size:9.5px;
  font-weight:700; color:var(--sky-700); padding:3px 7px; cursor:pointer; max-width:200px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.sv-docn:hover { text-decoration:underline; }
.sv-docdl { font-size:10px; text-decoration:none; color:var(--sky-600); padding:3px 6px;
  border-left:1px solid var(--sky-200); }
.sv-docdl:hover { background:#e0f2fe; }
.sv-docx { border:none; border-left:1px solid var(--sky-200); background:transparent; color:#b91c1c;
  font-size:12px; font-weight:800; padding:2px 7px; cursor:pointer; }
.sv-docx:hover { background:#fee2e2; }
.sv-docsrc { font-family:var(--mono); font-size:7.5px; color:var(--faint); padding:0 6px; }
.sv-docadd { border:1.5px dashed var(--sky-300, #7dd3fc); background:#fff; color:var(--sky-600);
  border-radius:8px; font:inherit; font-size:10px; font-weight:800; padding:3px 9px; cursor:pointer;
  transition:background var(--t), border-color var(--t); }
.sv-docadd:hover { background:var(--sky-50); border-color:var(--sky-500); }
.sv-doctype { padding:8px 0; border-bottom:1px dashed var(--line-2); }
.sv-doctype:last-child { border-bottom:none; padding-bottom:2px; }
.sv-doctypeh { display:flex; align-items:center; gap:8px; }
.sv-doctypeh .sv-ic { width:24px; height:24px; }
.sv-doctypeh b { font-size:11.5px; font-weight:750; color:var(--ink); flex:1; min-width:0; }
.sv-doctypeh .sv-docadd { margin-left:auto; flex:none; }
.sv-contdocs .sv-docadd { margin-left:auto; flex:none; }
.sv-doclist { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; padding-left:32px; }

/* milestones (presentation "ms/mi" timeline) */
.sv-ms { position:relative; padding-left:24px; }
.sv-ms::before { content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2.5px;
  background:#e2e8f0; border-radius:2px; }
.sv-mi { position:relative; padding-bottom:12px; }
.sv-mi:last-child { padding-bottom:0; }
.sv-mi::before { content:""; position:absolute; left:-22px; top:3px; width:12px; height:12px;
  border-radius:999px; background:#fff; border:3px solid #cbd5e1; }
.sv-mi.done::before { background:var(--ok, #059669); border-color:var(--ok, #059669); }
.sv-mi b { font-size:12px; font-weight:750; color:var(--muted); }
.sv-mi.done b { color:var(--ok, #047857); }
.sv-mi small { display:block; font-size:10px; color:var(--faint); }
.sv-mi small i { font-style:normal; font-family:var(--mono); font-weight:700; color:var(--ink-soft); }

/* mini tables (POs / SOA) */
.sv-mini { width:100%; border-collapse:collapse; font-size:11px; }
.sv-mini th { font-family:var(--mono); font-size:7.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:5px 8px; border-bottom:1.5px solid var(--ink); white-space:nowrap; }
.sv-mini td { padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.sv-mini tr:last-child td { border-bottom:none; }
.sv-mini tr:hover td { background:var(--sky-50); }
.sv-mini .sv-po { color:#047857; }

/* history */
.sv-histcard { grid-column:span 1; }
.sv-hist { display:grid; gap:8px; max-height:420px; overflow:auto; }
.sv-log { border:1px solid var(--line); border-radius:11px; padding:8px 11px; background:#f8fafc; }
.sv-logh { display:flex; align-items:center; gap:8px; }
.sv-logh small { margin-left:auto; font-size:10px; color:var(--faint); }
.sv-logb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.sv-logb em { font-style:normal; font-size:10.5px; font-weight:750; color:var(--ink-soft); }
.sv-logc { font-size:10px; background:#eef2ff; border:1px solid #e0e7ff; border-radius:6px; padding:1px 6px;
  color:#4338ca; }

/* live tracking card */
.sv-trackcard { padding:0; overflow:hidden; margin-bottom:14px; }
.sv-trackcard .sv-tag { padding:13px 16px 0; margin-bottom:9px; }
.sv-tv { display:grid; grid-template-columns:1fr 380px; min-height:380px; border-top:1.5px solid var(--line); }
.sv-tvmap { position:relative; background:#dbeafe; min-height:380px; }
#svLiveMap { position:absolute; inset:0; }
#svLiveMap svg { width:100%; height:100%; }
.sv-mappend { position:absolute; left:14px; bottom:14px; z-index:5; max-width:340px;
  background:rgba(255,255,255,.94); border:1.5px solid var(--line); border-radius:13px; padding:11px 14px;
  box-shadow:0 12px 28px -14px rgba(15,23,42,.35); backdrop-filter:blur(6px); }
.sv-mappend b { font-size:12px; font-weight:800; color:var(--ink); }
.sv-mappend p { font-size:10.5px; color:var(--muted); line-height:1.5; margin-top:4px; }
.sv-mapfallback { display:flex; align-items:center; justify-content:center; height:100%;
  color:#0369a1; font-weight:700; }
.sv-tvside { border-left:1.5px solid var(--line); padding:13px 14px; display:flex; flex-direction:column;
  gap:11px; background:#fff; min-width:0; }
.sv-stat3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr)); gap:8px; }
.sv-st { border:1.5px solid var(--line); border-radius:11px; padding:8px 9px; text-align:center; min-width:0; }
.sv-st em { display:block; font-style:normal; font-family:var(--mono); font-size:7.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); font-weight:800; margin-bottom:3px; }
.sv-st b { font-size:13px; font-weight:800; overflow-wrap:anywhere; }
.sv-st-ok  { border-color:#a7f3d0; background:#ecfdf5; } .sv-st-ok b { color:#047857; }
.sv-st-sky { border-color:var(--sky-200); background:var(--sky-50); } .sv-st-sky b { color:var(--sky-700); }
.sv-st-amb { border-color:#fde68a; background:#fffbeb; } .sv-st-amb b { color:#b45309; }
.sv-ptl { position:relative; padding-left:26px; flex:1; }
.sv-ptl::before { content:""; position:absolute; left:8px; top:10px; bottom:12px; width:2.5px;
  background:linear-gradient(180deg,#059669 0%,#059669 30%,#cbd5e1 36%,#cbd5e1 100%); border-radius:2px; }
.sv-pev { position:relative; padding-bottom:14px; }
.sv-pev:last-child { padding-bottom:0; }
.sv-pev::before { content:""; position:absolute; left:-23px; top:4px; width:11px; height:11px;
  border-radius:999px; background:#cbd5e1; border:2.5px solid #fff; box-shadow:0 0 0 1.5px #cbd5e1; }
.sv-pev.done::before { background:#059669; box-shadow:0 0 0 1.5px #059669; }
.sv-pb { font-family:var(--mono); font-size:7.5px; letter-spacing:.16em; padding:2px 7px; border-radius:5px;
  color:#fff; font-weight:800; margin-right:7px; }
.sv-pb-pol { background:#059669; } .sv-pb-pod { background:var(--sky-600); } .sv-pb-fin { background:#7c3aed; }
.sv-pev > b { font-size:12.5px; font-weight:800; }
.sv-pevrows { margin-top:4px; display:grid; gap:3px; }
.sv-pevrows span { display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); }
.sv-pevrows span i { font-style:normal; font-weight:700; color:var(--ink-soft); font-family:var(--mono);
  font-size:10px; }
.sv-tvnote { font-size:10px; color:var(--faint); border-top:1px solid var(--line); padding-top:8px;
  line-height:1.5; }
.sv-tvnote b { color:var(--ink-soft); }

@media (max-width: 1280px) {
  .sv-grid { grid-template-columns:1fr 1fr; }
  .sv-tv { grid-template-columns:1fr 320px; }
}
@media (max-width: 900px) {
  .sv-grid, .sv-grid2 { grid-template-columns:1fr; }
  .sv-tv { grid-template-columns:1fr; }
  .sv-tvside { border-left:none; border-top:1.5px solid var(--line); }
}

/* live-tracking extras (ShipsGo v2 payload) */
.sv-prog { height:7px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.sv-prog i { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#4f46e5); transition:width .6s ease; }
/* live container rows: full width, number left · return date · status right */
.sv-tvconts { display:flex; flex-direction:column; gap:6px; }
.sv-tvcont { display:flex; width:100%; align-items:center; gap:8px; border:1px solid var(--line);
  border-radius:9px; padding:5px 10px; background:#f8fafc; min-width:0; }
.sv-tvcont b { font-size:10.5px; }
.sv-tvcont .shc { flex:none; }
.sv-tvcont .shc:last-child { margin-left:auto; }
.sv-tvret { font-size:9.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-tvret i { font-style:normal; font-family:var(--mono); font-weight:800; color:#047857; }

/* ===== shipment view v2 polish: timeline, places, packages, live button ===== */
/* fetch-live button in the tracking card header */
.sv-livebtn { margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:28px;
  padding:0 13px; border:none; border-radius:999px; cursor:pointer; font:inherit; font-size:10.5px;
  font-weight:800; color:#fff; background:var(--grad-btn);
  box-shadow:0 7px 16px -7px rgba(79,70,229,.55); transition:transform var(--t), box-shadow var(--t), opacity var(--t); }
.sv-livebtn svg { width:12px; height:12px; }
.sv-livebtn:hover { transform:translateY(-1px); box-shadow:0 10px 20px -7px rgba(79,70,229,.6); }
.sv-livebtn.busy { opacity:.6; pointer-events:none; }
.sv-livebtn.busy svg { animation:svspin 1s linear infinite; }

/* card-level Atlas loader — the tracking card loads on its own */
.sv-trackcard { position:relative; }
.sv-trackload { position:absolute; inset:0; z-index:40; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.78); backdrop-filter:blur(4px);
  border-radius:inherit; }

/* white map card (bottom-left): line / vessel + the ShipsGo fetch button */
.sv-mapcard { position:absolute; left:14px; bottom:14px; z-index:6; width:330px;
  max-width:calc(100% - 28px); background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:10px 12px; box-shadow:0 14px 34px -14px rgba(2,32,71,.4); }
.svmc-top { display:flex; align-items:center; gap:9px; }
.svmc-top .shc { margin-left:auto; flex:none; }
.svmc-t { min-width:0; line-height:1.25; }
.svmc-t em { display:block; font-style:normal; font-family:var(--mono); font-size:7.5px;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.svmc-t b { display:block; font-size:12px; font-weight:800; color:var(--ink);
  text-transform:uppercase; line-height:1.3; overflow-wrap:anywhere; } /* never truncate the vessel */
.svmc-sub { margin:7px 0 0; font-size:10px; color:var(--muted); line-height:1.5; }
.svmc-btn { margin:9px 0 0; width:100%; justify-content:center; }
.svmc-btn2 { margin:7px 0 0; width:100%; display:inline-flex; align-items:center; justify-content:center;
  gap:7px; height:27px; border:1.5px solid var(--line); border-radius:999px; background:#fff;
  font:inherit; font-size:10.5px; font-weight:800; color:var(--ink-soft); cursor:pointer;
  transition:border-color var(--t), color var(--t), background var(--t); }
.svmc-btn2 svg { width:12px; height:12px; }
.svmc-btn2:hover { border-color:var(--sky-400); color:var(--sky-700); background:var(--sky-50); }

/* vessel · voyage row pinned under the side panel content */
.sv-vvrow { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }

/* modern route timeline in the side panel (ShipFlow rows on the sv-tl rail).
   .sv-tl.sv-rtl outranks the later .sv-tl base rule — the rail offset must
   match this grid (46px dates + 7px gap + 18px dot col → center 62px). */
.sv-tl.sv-rtl { flex:1; gap:11px; padding:2px 0; background-position:61px 12px; }
.sv-rtl .sv-tli { grid-template-columns:46px 18px minmax(0,1fr); gap:7px; }
.sv-rtl .sv-tlt strong { font-size:9.5px; }
.sv-rth { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sv-rth > b { font-size:12px; font-weight:800; color:var(--ink); letter-spacing:.02em; }
.sv-tli.is-cur { --tl-ac:#f59e0b; --tl-soft:rgba(245,158,11,.3); }
.sv-tli.is-cur .sv-tld { animation:svping 1.7s ease-out infinite; }
.sv-tli.is-cur .sv-tlb .sv-rth > b { color:#b45309; }
@keyframes svping {
  0%   { box-shadow:0 0 0 2.5px #fff, 0 0 0 4px var(--tl-soft), 0 0 0 4px rgba(245,158,11,.35); }
  70%  { box-shadow:0 0 0 2.5px #fff, 0 0 0 4px var(--tl-soft), 0 0 0 11px rgba(245,158,11,0); }
  100% { box-shadow:0 0 0 2.5px #fff, 0 0 0 4px var(--tl-soft), 0 0 0 0 rgba(245,158,11,0); }
}
@keyframes svspin { to { transform:rotate(360deg); } }

/* places strip under the routing legs */
/* ============ routing card v2: wide, bright, mode icon tiles ============ */
/* row 1 of the grid: routing spans ~2/3, carrier + cargo stack beside it */
.sv-rowR { grid-template-columns:minmax(0,1fr) 450px; }
.sv-routegrid { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:14px; align-items:start; }
.sv-routelegs { min-width:0; }
/* larger, brighter leg typography — compact rows, dynamic hover + flow */
.sv-routecard .sv-pt b { font-size:15px; letter-spacing:-.01em; color:var(--ink); }
.sv-routecard .sv-pt small { font-size:9px; }
.sv-routecard .sv-leg { padding:10px 14px; background:#fff;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t); }
.sv-routecard .sv-leg:hover { border-color:var(--sky-300); transform:translateY(-1px);
  box-shadow:0 12px 26px -16px rgba(2,132,199,.5); }
.sv-routecard .sv-leg + .sv-leg { margin-top:8px; }
.sv-routecard .sv-legdates { margin-top:8px; padding-top:7px; border-top:1px dashed var(--line-2); }
.sv-routecard .sv-legdates span { font-size:11.5px; color:var(--ink-soft); }
.sv-routecard .sv-legdates span i { font-size:11.5px; }
.sv-modetile.sv-ic { width:26px; height:26px; margin:0 auto 2px; border-radius:9px; }
.sv-modetile svg { width:14px; height:14px; }
/* the dashes flow toward the destination */
.sv-routecard .sv-dash { border-top:none; height:2.5px; border-radius:2px;
  background-image:repeating-linear-gradient(90deg, var(--sky-400) 0 7px, transparent 7px 13px);
  animation:svdashflow 1.1s linear infinite; }
.sv-routecard .sv-dash::after { top:-6.5px; }
@keyframes svdashflow { to { background-position:13px 0; } }
.sv-modelbl { display:block; font-size:11px; font-weight:800; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.08em; }
.sv-ln.is-done { color:#047857; }
.sv-ln.is-wait { color:#b45309; }
.sv-routecard .sv-ln { font-size:9.5px; }
/* bright vessel · voyage chip in the card header */
.sv-vvtop { display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 6px 0 12px;
  border-radius:999px; background:linear-gradient(135deg,#eef2ff,#e0f2fe); border:1px solid #c7d2fe;
  font-size:12.5px; font-weight:800; color:#312e81; }
.sv-vvtop svg { width:14px; height:14px; color:#4f46e5; }
.sv-vvtop em { font-style:normal; font-family:var(--mono); font-size:9px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#4f46e5; padding-right:8px;
  border-right:1.5px solid #c7d2fe; max-width:150px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.sv-vvtop b { white-space:nowrap; }
.sv-vvtop i { font-style:normal; font-family:var(--mono); font-size:9.5px; font-weight:800;
  letter-spacing:.06em; background:var(--grad-btn); color:#fff; border-radius:999px; padding:3px 9px; }
/* places chain: a vertical arrow-flow column on the card's right side */
.sv-plchain { display:flex; flex-direction:column; gap:3px; border:1.5px solid var(--line);
  border-radius:13px; padding:12px 13px; background:linear-gradient(180deg,#f8fbff,#f3f7ff); }
.sv-plhead { font-style:normal; font-family:var(--mono); font-size:8px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sky-600); margin-bottom:6px; }
.sv-plstop { display:flex; align-items:center; gap:9px; min-width:0; }
.sv-plstop .sv-ic { width:28px; height:28px; flex:none; }
.sv-plstop .sv-kvt { min-width:0; }
.sv-plstop .sv-kvt em { font-size:8px; }
.sv-plstop .sv-kvt b { font-size:12.5px; font-weight:800; }
.sv-plstep { display:flex; margin-left:9px; color:var(--sky-500); }
.sv-plstep svg { width:13px; height:13px; }
/* tracking milestones: one vertical flow, centered in the card */
.sv-mstl { gap:12px; max-width:330px; margin:0 auto; }
.sv-mstl .sv-tlb > b { font-size:11.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft); }
.sv-mstl .sv-tli.is-done .sv-tlb > b { color:#047857; }
.sv-mstl .sv-tli.is-cur .sv-tlb > b { color:#b45309; }

/* shipment details card: identity block + kv rows */
.sv-shipid { display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  margin:2px 0 14px; }
.sv-shipno { font-family:var(--mono); font-size:25px; font-weight:800; letter-spacing:.01em;
  background:var(--grad-btn); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sv-shipchips { display:flex; gap:6px; align-items:center; }

/* history: internal-only floating button + slide-in drawer */
.sv-histfab { position:fixed; right:24px; bottom:24px; z-index:120; width:52px; height:52px;
  border:none; border-radius:50%; cursor:pointer; background:var(--grad-btn); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px -12px rgba(79,70,229,.6);
  transition:transform var(--t), box-shadow var(--t); }
.sv-histfab:hover { transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(79,70,229,.65); }
.sv-histfab svg { width:22px; height:22px; }
.sv-histfabn { position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:#dc2626; color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.sv-histovl { position:fixed; inset:0; z-index:130; background:rgba(15,23,42,.35);
  backdrop-filter:blur(2px); opacity:0; transition:opacity .28s ease; }
.sv-histovl.open { opacity:1; }
.sv-histdrawer { position:fixed; top:var(--head-h); right:0; bottom:0; z-index:131; width:440px;
  max-width:92vw; background:#fff; border-radius:16px 0 0 16px; padding:16px 16px 14px;
  box-shadow:-18px 0 50px -20px rgba(2,32,71,.45); display:flex; flex-direction:column;
  transform:translateX(105%); transition:transform .34s cubic-bezier(.22,.9,.3,1); }
.sv-histdrawer.open { transform:none; }
.sv-histhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sv-histhead b { font-size:13px; font-weight:800; color:var(--ink); }
.sv-histx { border:none; background:#f1f5f9; width:28px; height:28px; border-radius:50%;
  font-size:16px; line-height:1; cursor:pointer; color:var(--ink-soft); }
.sv-histx:hover { background:#e2e8f0; }
.sv-histdrawer .sv-hist { max-height:none; flex:1; overflow:auto; padding-right:6px; }

/* right column of the routing card: route places + carrier details stacked */
.sv-routeside { display:grid; gap:12px; align-content:start; min-width:0; }
/* carrier rows: boxed card rows (the sv-kv default look), white on the panel */
.sv-carrp { gap:8px; }
.sv-carrp .sv-kvs { display:grid; gap:8px; }
.sv-carrp .sv-kv { background:#fff; }
.sv-carrp .sv-kv .sv-ic { width:28px; height:28px; flex:none; }
@media (max-width: 1100px) {
  .sv-rowR { grid-template-columns:1fr; }
  .sv-routegrid { grid-template-columns:1fr; }
}

.sv-places { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:12px;
  padding:10px 11px; background:#f8fafc; border:1px solid var(--line); border-radius:12px; }
.sv-place { display:inline-flex; align-items:center; gap:8px; min-width:0; flex:1 1 150px; }
.sv-place .sv-ic { width:26px; height:26px; }
.sv-place .sv-kvt b { font-size:11px; }
.sv-plarrow { color:var(--sky-500); font-size:15px; font-weight:800; flex:none; padding:0 2px; }

/* cargo card: isometric carton + tiles */
.sv-pkgwrap { display:grid; grid-template-columns:104px 1fr; gap:12px; align-items:center; }
.sv-pkgart { display:grid; place-items:center; }
.sv-pkgart svg { width:100%; max-width:104px; filter:drop-shadow(0 8px 10px rgba(2,132,199,.18)); }
@media (max-width:1280px) { .sv-pkgwrap { grid-template-columns:88px 1fr; } }

/* remarks */
.sv-remarks { font-size:12px; line-height:1.6; color:var(--ink-soft); background:#fffbeb;
  border:1px solid #fde68a; border-radius:11px; padding:10px 13px; overflow-wrap:anywhere; }

/* ===== ShipFlow-style timeline: date column | dot on a rail | content ===== */
.sv-tl { position:relative; display:flex; flex-direction:column; gap:13px;
  background-image:linear-gradient(180deg, rgba(14,165,233,.5) 0%, rgba(14,165,233,.14) 100%);
  background-repeat:no-repeat; background-position:75px 12px; background-size:2px calc(100% - 24px);
  background-attachment:local; } /* 58px dates + 9px gap + 18px dot col → center 76px */
.sv-tli { display:grid; grid-template-columns:58px 18px minmax(0,1fr); gap:9px; align-items:start;
  --tl-ac:#94a3b8; --tl-soft:rgba(148,163,184,.3); }
.sv-tli.is-done { --tl-ac:#059669; --tl-soft:rgba(5,150,105,.3); }
.sv-tli.is-rose { --tl-ac:#e11d48; --tl-soft:rgba(225,29,72,.3); }
.sv-tli.is-wait { --tl-ac:#94a3b8; --tl-soft:rgba(148,163,184,.3); }
.sv-tlt { text-align:right; font-family:var(--mono); line-height:1.2; padding-top:1px; }
.sv-tlt strong { display:block; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  color:var(--tl-ac); white-space:nowrap; }
.sv-tlt small { display:block; font-size:8px; color:var(--faint); margin-top:1px; white-space:nowrap; }
.sv-tld { width:12px; height:12px; border-radius:50%; margin-top:2px; justify-self:center;
  background:var(--tl-ac); box-shadow:0 0 0 2.5px #fff, 0 0 0 4px var(--tl-soft); position:relative; z-index:2; }
.sv-tlb { min-width:0; padding-top:0; }
.sv-tlb > b { display:block; font-size:11.5px; font-weight:800; letter-spacing:.02em; color:var(--muted); }
.sv-tli.is-done .sv-tlb > b { color:#047857; }
.sv-tli.is-rose .sv-tlb > b { color:#be123c; }
.sv-tlb small { display:block; font-size:10px; color:var(--faint); margin-top:2px; }
.sv-tlb small i { font-style:normal; font-family:var(--mono); font-weight:700; color:var(--ink-soft); }
.sv-tlh { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sv-tlh > b { font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--tl-ac); }
.sv-tlby { font-size:10px; color:var(--faint); }
.sv-tlby strong { color:var(--ink-soft); font-weight:750; }
.sv-tl .sv-logb { margin-top:4px; }
.sv-tl.sv-hist { max-height:420px; overflow:auto; padding-right:4px; }

/* ======================== Live Tracker page ======================== */
.tk-wrap { min-height:calc(100vh - var(--head-h) - 60px); display:flex; flex-direction:column;
  align-items:center; padding-top:7vh; }
.tk-badge { position:relative; width:64px; height:64px; border-radius:20px; display:flex;
  align-items:center; justify-content:center; color:#fff; background:var(--grad-btn);
  box-shadow:0 20px 44px -16px rgba(79,70,229,.6); }
.tk-badge svg { width:32px; height:32px; }
.tk-ping { position:absolute; inset:0; border-radius:20px; border:2px solid rgba(79,70,229,.55);
  animation:tkping 2.2s ease-out infinite; }
@keyframes tkping { 0% { transform:scale(1); opacity:.8; } 80%,100% { transform:scale(1.55); opacity:0; } }
.tk-title { margin:22px 0 0; font-size:36px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.tk-title em { font-style:normal; background:var(--grad-btn); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.tk-sub { margin:10px 0 0; max-width:560px; text-align:center; font-size:13px; color:var(--muted);
  line-height:1.65; }
.tk-bar { position:relative; width:min(720px, 92vw); margin-top:30px; }
.tk-ic { position:absolute; left:20px; top:50%; transform:translateY(-50%); width:20px; height:20px;
  color:var(--sky-600); pointer-events:none; }
.tk-input { width:100%; height:58px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; padding:0 92px 0 54px; font:inherit; font-size:14.5px; font-weight:600;
  color:var(--ink); box-shadow:0 24px 60px -24px rgba(2,32,71,.35);
  transition:border-color var(--t), box-shadow var(--t); }
.tk-input::placeholder { color:var(--faint); font-weight:500; }
.tk-input:focus { outline:none; border-color:var(--sky-400);
  box-shadow:0 0 0 4px rgba(14,165,233,.15), 0 24px 60px -24px rgba(2,32,71,.4); }
.tk-spin { position:absolute; right:58px; top:50%; transform:translateY(-50%); }
.tk-spin .dzb-ring { width:20px; height:20px; display:block; }
.tk-clear { position:absolute; right:18px; top:50%; transform:translateY(-50%); width:28px; height:28px;
  border:none; border-radius:50%; background:#f1f5f9; color:var(--ink-soft); font-size:16px;
  line-height:1; cursor:pointer; }
.tk-clear:hover { background:#e2e8f0; }
.tk-hints { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; justify-content:center;
  transition:opacity var(--t); }
.tk-hints.dim { opacity:.45; }
.tk-hints span { font-family:var(--mono); font-size:8.5px; font-weight:800; letter-spacing:.14em;
  color:var(--sky-700); background:var(--sky-50); border:1px solid var(--sky-200);
  border-radius:999px; padding:4px 11px; }
.tk-results { width:min(760px, 94vw); margin:24px 0 40px; display:grid; gap:10px; }
.tk-note { text-align:center; font-size:12.5px; color:var(--muted); padding:16px;
  background:#fff; border:1.5px dashed var(--line); border-radius:14px; }
.tk-row { display:flex; align-items:center; gap:13px; background:#fff; border:1.5px solid var(--line);
  border-radius:15px; padding:12px 16px; text-decoration:none; color:inherit; min-width:0;
  animation:tkin .35s both cubic-bezier(.22,.9,.3,1);
  transition:border-color var(--t), box-shadow var(--t), transform var(--t); }
@keyframes tkin { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.tk-row:hover { border-color:var(--sky-400); transform:translateY(-2px);
  box-shadow:0 18px 40px -20px rgba(2,132,199,.45); }
.tk-mic { width:38px; height:38px; border-radius:12px; flex:none; }
.tk-mic svg { width:19px; height:19px; }
.tk-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.tk-l1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tk-no { font-family:var(--mono); font-size:14.5px; font-weight:800; color:var(--sky-700); }
.tk-match { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9px;
  font-weight:800; color:var(--ink-soft); background:#f1f5f9; border:1px solid var(--line-2);
  border-radius:999px; padding:2px 9px; max-width:220px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.tk-match em { font-style:normal; color:var(--faint); letter-spacing:.1em; }
.tk-l2 { font-size:10.5px; font-weight:750; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-l3 { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-l3 i { font-style:normal; color:var(--sky-500); font-weight:800; }
.tk-eta { text-align:right; flex:none; line-height:1.25; }
.tk-eta em { display:block; font-style:normal; font-family:var(--mono); font-size:7.5px;
  font-weight:800; letter-spacing:.16em; color:var(--faint); }
.tk-eta b { font-family:var(--mono); font-size:12px; font-weight:800; color:var(--ink); }
.tk-go { flex:none; color:var(--sky-500); font-size:17px; font-weight:800;
  transition:transform var(--t); }
.tk-row:hover .tk-go { transform:translateX(3px); }

/* ======================== Profile (coming soon) ======================== */
.pf-wrap { padding-top:9vh; }
.pf-av { width:72px; height:72px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:24px; font-weight:800; color:#fff; letter-spacing:.03em;
  background:var(--grad-btn); box-shadow:0 20px 44px -16px rgba(79,70,229,.6); }
.pf-soon { margin-top:26px; width:min(560px, 92vw); background:#fff; border:1.5px dashed var(--line);
  border-radius:18px; padding:22px 24px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:12px; }
.pf-soon p { margin:0; font-size:12.5px; color:var(--muted); }

/* ============== customer portal: PO board is view-only ============== */
body.po-ro #pNew, body.po-ro .pv-pen, body.po-ro #pvMatch,
body.po-ro .pv-docpick, body.po-ro .pm-addcomment,
body.po-ro .pv .row-del, body.po-ro #pvFoot,
body.po-ro .pv-left { display:none !important; }
/* .pv-body is flex — hiding .pv-left lets the record fill the view */
.sv-nodoc { margin:4px 0 0; font-size:10.5px; color:var(--faint); font-style:italic; }