/* ============================================================================
   LIGHTNING OPERATIONS — unified application design system
   One token system, one component library. Desktop-first, fully responsive.
   ========================================================================== */
:root{
  color-scheme: light;
  /* brand */
  --navy:#0e1b34; --navy-2:#14284d; --navy-3:#1c3a6e;
  --accent:#2f6fed; --accent-600:#2560d0; --accent-050:#eaf1ff; --accent-100:#d6e4ff;
  /* ink */
  --ink:#0f172a; --ink-2:#334155; --ink-3:#64748b; --ink-4:#94a3b8;
  /* surfaces */
  --bg:#f7f9fc; --surface:#ffffff; --surface-2:#f9fbfd; --sunken:#eff3f8;
  --line:#e8ecf2; --line-2:#f0f3f8;
  /* status */
  --good:#0f9d58; --good-bg:#e7f6ee; --good-line:#a6e0bf;
  --warn:#b7791f; --warn-bg:#fdf6e3; --warn-line:#f3d98a;
  --bad:#d1362f;  --bad-bg:#fdecea;  --bad-line:#f4b8b3;
  --info:#2f6fed; --info-bg:#eaf1ff; --info-line:#c3d8ff;
  --teal:#0f766e; --teal-bg:#e6f6f4;
  --violet:#6d28d9; --violet-bg:#f1ebff;
  /* geometry */
  --r-sm:7px; --r:11px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,23,42,.035);
  --sh-2:0 6px 18px rgba(15,23,42,.06);
  --sh-3:0 14px 36px rgba(15,23,42,.14);
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sidebar-w:236px; --topbar-h:56px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ---------- app frame ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--navy);color:#cdd8ec;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:40}
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.content{flex:1;min-width:0;padding:26px 32px 64px}
@media(max-width:1100px){ .content{padding:20px 20px 56px} }

/* ---------- sidebar ---------- */
.brand{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#57a0ff);display:grid;place-items:center;flex:none;box-shadow:0 2px 8px rgba(47,111,237,.4)}
.brand .logo svg{width:18px;height:18px;color:#fff}
.brand b{color:#fff;font-size:14.5px;font-weight:650;letter-spacing:-.01em;display:block;line-height:1.15}
.brand span{font-size:11px;color:#8fa3c4;display:block}
.nav{flex:1;overflow-y:auto;padding:10px 10px 20px}
.nav .grp{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#657ba0;font-weight:700;padding:14px 10px 6px}
.nav a.item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:#c2cee2;font-weight:550;font-size:13.5px;margin-bottom:1px;cursor:pointer;transition:background .12s,color .12s;position:relative}
.nav a.item:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav a.item.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(47,111,237,.35)}
.nav a.item.active svg{color:#fff}
.nav a.item svg{width:18px;height:18px;color:#8aa0c4;flex:none}
.nav a.item .tag{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.05em;background:rgba(255,255,255,.12);color:#c8d5ea;padding:2px 6px;border-radius:6px}
.nav a.item.active .tag{background:rgba(255,255,255,.22);color:#fff}
.sidebar .who{border-top:1px solid rgba(255,255,255,.08);padding:10px 12px;display:flex;align-items:center;gap:10px}
.sidebar .who .av{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.sidebar .who .meta{min-width:0;flex:1}
.sidebar .who .meta b{color:#e6edf8;font-size:12.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar .who .meta span{font-size:11px;color:#8fa3c4}
.sidebar .who button{background:rgba(255,255,255,.08);border:0;color:#c2cee2;width:30px;height:30px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.sidebar .who button:hover{background:rgba(255,255,255,.16);color:#fff}
.sidebar .who button svg{width:16px;height:16px}

/* ---------- topbar ---------- */
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:30}
.topbar .mtoggle{display:none;background:transparent;border:0;cursor:pointer;color:var(--ink-2);padding:6px;border-radius:8px}
.topbar .mtoggle svg{width:22px;height:22px}
.topbar .ptitle{font-size:15px;font-weight:650;letter-spacing:-.01em}
.topbar .search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:7px 11px;min-width:230px;max-width:360px;flex:1;color:var(--ink-3);cursor:text}
.topbar .search:hover{border-color:var(--accent-100)}
.topbar .search svg{width:16px;height:16px;flex:none}
.topbar .search input{border:0;background:transparent;outline:0;font:inherit;color:var(--ink);flex:1;min-width:0}
.topbar .search kbd{font:11px var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink-3)}
.topbar .tb-actions{display:flex;align-items:center;gap:6px}
.iconbtn{background:transparent;border:1px solid transparent;width:36px;height:36px;border-radius:9px;cursor:pointer;color:var(--ink-2);display:grid;place-items:center;position:relative}
.iconbtn:hover{background:var(--surface-2);border-color:var(--line)}
.iconbtn svg{width:19px;height:19px}
.iconbtn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--surface)}

/* ---------- page header ---------- */
.pagehd{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.pagehd .h1{font-size:20px;font-weight:680;letter-spacing:-.02em}
.pagehd .sub{color:var(--ink-3);font-size:13px;margin-top:3px}
.pagehd .spacer{flex:1}
.freshness{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px}
.freshness .d{width:8px;height:8px;border-radius:50%;background:var(--good)}
.freshness.snapshot .d{background:var(--warn)} .freshness.planning .d{background:var(--violet)} .freshness.stale .d{background:var(--ink-4)}

/* ---------- section label ---------- */
.seclabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:650;margin:28px 0 12px;display:flex;align-items:center;gap:10px}
.seclabel .live{color:var(--good);font-weight:700}
.seclabel a{font-weight:600;font-size:12px;text-transform:none;letter-spacing:0}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.card .hd{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.card .hd h3{font-size:14px;font-weight:650}
.card .hd .spacer{flex:1}
.card .bd{padding:18px}
.card .bd.flush{padding:0}

/* ---------- metric tiles ---------- */
.grid{display:grid;gap:16px}
.grid.k{grid-template-columns:repeat(4,1fr)}
.grid.k5{grid-template-columns:repeat(5,1fr)}
.grid.k6{grid-template-columns:repeat(6,1fr)}
.grid.two{grid-template-columns:1fr 1fr}
.grid.tri{grid-template-columns:2fr 1fr}
/* grid items must be allowed to shrink below their content's intrinsic width,
   otherwise a wide child (e.g. a data table) blows the whole page out on mobile
   instead of scrolling inside its own card. */
.grid>*{min-width:0}
.card{min-width:0}
.tablewrap{max-width:100%}
@media(max-width:1180px){ .grid.k,.grid.k5,.grid.k6{grid-template-columns:repeat(3,1fr)} .grid.tri{grid-template-columns:minmax(0,1fr)} }
@media(max-width:820px){ .grid.k,.grid.k5,.grid.k6,.grid.two{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .grid.k,.grid.k5,.grid.k6,.grid.two{grid-template-columns:1fr} }
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:6px;min-height:92px;text-decoration:none;color:inherit;transition:transform .1s,box-shadow .12s,border-color .12s}
a.metric:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--accent-100);text-decoration:none}
.metric .t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.metric .lab{font-size:12px;color:var(--ink-3);font-weight:600;letter-spacing:.01em}
.metric .ic{width:26px;height:26px;border-radius:8px;background:var(--accent-050);color:var(--accent);display:grid;place-items:center;flex:none}
.metric .ic svg{width:15px;height:15px}
.metric .val{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.metric .val.sm{font-size:21px}
.metric .foot{font-size:11.5px;color:var(--ink-3)}
.metric.hero{background:var(--navy);border-color:var(--navy);color:#fff}
.metric.hero .lab,.metric.hero .foot{color:rgba(255,255,255,.7)}
.metric.hero .ic{background:rgba(255,255,255,.14);color:#fff}
.metric.empty .val{color:var(--ink-4);font-size:15px;font-weight:600}
.metric .val.good{color:var(--good)} .metric .val.warn{color:var(--warn)} .metric .val.bad{color:var(--bad)}
.metric.mk-teal{border-left:3px solid #0f766e} .metric.mk-teal .val{color:#0f766e}
.metric.mk-good{border-left:3px solid var(--good)} .metric.mk-good .val{color:var(--good)}
.metric[data-fstage]:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--accent-100)}

/* ---------- tables ---------- */
.tablewrap{overflow:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl thead th{position:sticky;top:0;background:var(--surface);text-align:left;padding:11px 16px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);font-weight:650;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1;cursor:default}
table.tbl thead th.sortable{cursor:pointer;user-select:none}
table.tbl thead th.sortable:hover{color:var(--accent)}
table.tbl tbody td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tbody tr{transition:background .1s}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr.clickable{cursor:pointer}
table.tbl tbody tr:last-child td{border-bottom:0}
.person-cell{display:flex;align-items:center;gap:10px;min-width:0}
.av{width:30px;height:30px;border-radius:50%;background:var(--accent-050);color:var(--accent-600);display:grid;place-items:center;font-weight:700;font-size:11.5px;flex:none;text-transform:uppercase}
.av.lg{width:44px;height:44px;font-size:15px}
.strong{font-weight:600;color:var(--ink)}
.muted{color:var(--ink-3)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}

/* ---------- badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:650;border:1px solid transparent;white-space:nowrap}
.badge.neutral{background:var(--sunken);color:var(--ink-2);border-color:var(--line)}
.badge.info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.badge.good{background:var(--good-bg);color:var(--good);border-color:var(--good-line)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.badge.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.badge.teal{background:var(--teal-bg);color:var(--teal)}
.badge.violet{background:var(--violet-bg);color:var(--violet)}
.pill-yes{background:var(--good-bg);color:var(--good)} .pill-no{background:var(--bad-bg);color:var(--bad)}

/* stage select */
.stage-select{appearance:none;-webkit-appearance:none;border:1px solid transparent;border-radius:var(--r-pill);font:650 12px var(--font);padding:4px 24px 4px 11px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);color:var(--ink-2);border:1px solid var(--line);border-radius:9px;padding:8px 14px;font:600 13px var(--font);cursor:pointer;transition:background .1s,border-color .1s,box-shadow .1s;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:#cbd5e1;text-decoration:none}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-600)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger{color:var(--bad);border-color:var(--bad-line)}
.btn.danger:hover{background:var(--bad-bg)}
.btn:disabled{opacity:.55;cursor:default}
.btn.icon{width:36px;height:36px;padding:0;justify-content:center}

/* ---------- inputs / filters ---------- */
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:700}
input[type=text],input[type=search],input[type=tel],input[type=email],input[type=number],select,textarea{
  font:14px var(--font);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 11px;outline:0;transition:border-color .1s,box-shadow .1s;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-050)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.toolbar .grow{flex:1;min-width:160px}
.search-input{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:0 11px}
.search-input svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.search-input input{border:0;padding:9px 0;box-shadow:none!important}
.count{color:var(--ink-3);font-size:12.5px;margin-left:auto}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabs .tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 14px;font:600 13.5px var(--font);color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:80;opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(460px,94vw);background:var(--surface);box-shadow:var(--sh-3);z-index:90;transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.show{transform:translateX(0)}
.drawer .dhd{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer .dhd .spacer{flex:1}
.drawer .dbd{flex:1;overflow-y:auto;padding:18px}
.drawer .dft{border-top:1px solid var(--line);padding:12px 18px;display:flex;gap:8px;flex-wrap:wrap}

/* command palette */
.cmd-scrim{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:100;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.cmd{width:min(600px,94vw);background:var(--surface);border-radius:14px;box-shadow:var(--sh-3);overflow:hidden;max-height:70vh;display:flex;flex-direction:column}
.cmd .in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmd .in svg{width:18px;height:18px;color:var(--ink-3)}
.cmd .in input{border:0;font-size:16px;box-shadow:none!important;padding:0}
.cmd .res{overflow-y:auto}
.cmd .row{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;border:0;background:transparent;width:100%;text-align:left}
.cmd .row:hover,.cmd .row.active{background:var(--accent-050)}
.cmd .row .type{margin-left:auto;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}

/* ---------- states ---------- */
.state{padding:44px 20px;text-align:center;color:var(--ink-3)}
.state .ic{width:46px;height:46px;border-radius:12px;background:var(--sunken);display:grid;place-items:center;margin:0 auto 12px;color:var(--ink-4)}
.state .ic svg{width:22px;height:22px}
.state b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.state.err .ic{background:var(--bad-bg);color:var(--bad)}
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);background-size:400% 100%;animation:sh 1.3s ease infinite;border-radius:6px}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- module host (iframe) ---------- */
.hostwrap{position:relative;height:calc(100vh - var(--topbar-h))}
.host-frame{width:100%;height:100%;border:0;display:block;background:var(--bg)}
.content.host{padding:0}
.host-loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg)}

/* ---------- bar chart (pipeline) ---------- */
.barrow{margin-bottom:11px}
.barrow .lab{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.barmini{height:8px;border-radius:999px;background:var(--sunken);overflow:hidden}
.barmini>i{display:block;height:100%;border-radius:999px;background:var(--accent)}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 18px;border-radius:11px;z-index:120;font-size:13.5px;box-shadow:var(--sh-3);max-width:90vw}

/* ---------- mobile ---------- */
.scrim-nav{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:39;opacity:0;pointer-events:none;transition:opacity .18s}
.scrim-nav.show{opacity:1;pointer-events:auto}
@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;width:var(--sidebar-w);transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sh-3)}
  .sidebar.open{transform:translateX(0)}
  .topbar{gap:8px;padding:0 12px}
  .topbar .mtoggle{display:grid;place-items:center}
  .topbar .ptitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .search{min-width:0;max-width:42px;padding:8px;justify-content:center;flex:none;margin-left:0}
  .topbar .search .ph{display:none}
  .topbar .search kbd{display:none}
  .topbar .tb-actions{gap:4px}
  .topbar #tb-upload{font-size:0;width:36px;height:36px;padding:0;gap:0}
  .topbar #tb-upload svg{margin:0}
  .topbar #tb-entity{max-width:118px}
  .content{padding:16px 14px 72px}
  .pagehd{margin-bottom:16px}
}
.hide{display:none!important}

/* ============================================================================
   DRIVER PORTAL — mobile-first, touch-friendly experience (role: driver).
   Distinct Lightning treatment: navy header, electric-blue accents, big cards,
   bottom tab bar. Renders full-bleed on phones; framed center column on desktop.
   ========================================================================== */
body.driver{background:#f0f3f8}
.dportal{max-width:560px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;
  display:flex;flex-direction:column;box-shadow:0 0 60px rgba(15,23,42,.08)}
.dviewport{flex:1;min-height:0;overflow-y:auto;padding:0 0 92px;-webkit-overflow-scrolling:touch}
.dviewport .content{padding:0}

/* bottom tab bar */
.dtabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;z-index:50;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.dtab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:12px;color:var(--ink-3);text-decoration:none;font-weight:600}
.dtab:hover{text-decoration:none}
.dtab .di svg{width:23px;height:23px}
.dtab .dl{font-size:11px;letter-spacing:-.01em}
.dtab.active{color:var(--accent)}
.dtab.active .di{transform:translateY(-1px)}

/* home header */
.dhead{background:linear-gradient(150deg,#12294f 0%,#0e1b34 60%,#0b1730 100%);color:#fff;padding:22px 18px 20px;position:relative}
.dhead .hgt{display:flex;align-items:center;gap:13px}
.dhead .hav{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--accent),#57a0ff);
  display:grid;place-items:center;font-weight:700;font-size:19px;color:#fff;flex:none;overflow:hidden;box-shadow:0 4px 14px rgba(47,111,237,.4)}
.dhead .hav img{width:100%;height:100%;object-fit:cover}
.dhead h1{font-size:22px;letter-spacing:-.02em;color:#fff;line-height:1.1}
.dhead .hsub{color:#9fb2d4;font-size:13px;margin-top:2px}
.dhead .hbtns{margin-left:auto;display:flex;gap:8px}
.dhead .hbtn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);border:0;color:#fff;display:grid;place-items:center;cursor:pointer;position:relative}
.dhead .hbtn svg{width:20px;height:20px}
.dhead .hbtn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:#ff5a5f;border:2px solid #12294f}
.dhead .htag{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  color:#dbe6fb;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px}

/* page body */
.dbody{padding:16px 16px 8px}
.dsec{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:20px 4px 9px}
.dsec:first-child{margin-top:6px}
.dsec .r{float:right;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent)}

.dcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--sh-1);margin-bottom:12px}
.dcard.tap{cursor:pointer;transition:transform .08s,box-shadow .12s}
.dcard.tap:active{transform:scale(.99)}

/* last-run recap */
.drecap .rtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.drecap .rttl{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.drecap .rdate{font-size:12px;color:var(--ink-3);font-weight:600}
.drecap .rsum{font-size:15px;color:var(--ink);font-weight:600;line-height:1.35;margin:8px 0 14px}
.drecap .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.drecap .rstat{text-align:center;background:var(--surface-2);border-radius:12px;padding:10px 4px}
.drecap .rstat b{display:block;font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.drecap .rstat span{font-size:10.5px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.drecap .rstat.good b{color:var(--good)} .drecap .rstat.bad b{color:var(--bad)}

/* KPI tiles */
.dkpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dkpi .k{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:13px 14px;box-shadow:var(--sh-1)}
.dkpi .k .kl{display:flex;align-items:center;gap:7px;color:var(--ink-3);font-size:12px;font-weight:600}
.dkpi .k .kl svg{width:15px;height:15px}
.dkpi .k .kv{font-size:25px;font-weight:700;letter-spacing:-.02em;margin-top:5px;font-variant-numeric:tabular-nums}
.dkpi .k .kf{font-size:11.5px;color:var(--ink-4);margin-top:1px}
.dkpi .k .kv.good{color:var(--good)} .dkpi .k .kv.warn{color:var(--warn)}
.dkpi .k.wide{grid-column:1/-1}

/* tools grid */
.dtools{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.dtools .t{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 8px;text-align:center;
  text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);transition:transform .08s}
.dtools .t:hover{text-decoration:none}
.dtools .t:active{transform:scale(.97)}
.dtools .t .ti{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin:0 auto 8px;background:var(--accent-050)}
.dtools .t .ti svg{width:21px;height:21px;color:var(--accent)}
.dtools .t .tl{font-size:12px;font-weight:600;line-height:1.15}
.dtools .t .tb{display:inline-block;margin-top:5px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:1px 6px;min-width:16px}

/* quick actions row */
.dquick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dquick a{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px;text-decoration:none;color:var(--ink);font-weight:600;font-size:13.5px;box-shadow:var(--sh-1)}
.dquick a:hover{text-decoration:none;border-color:var(--accent-100)}
.dquick a svg{width:19px;height:19px;color:var(--accent);flex:none}

/* sub-page header with back */
.dsub{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:13px 14px;padding-top:calc(13px + env(safe-area-inset-top))}
.dsub .bk{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.dsub .bk svg{width:20px;height:20px}
.dsub h2{font-size:17px;letter-spacing:-.01em}
.dsub .sp{margin-left:auto}

/* list rows */
.dlist{display:flex;flex-direction:column;gap:10px}
.drow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:var(--sh-1)}
.drow.tap{cursor:pointer}.drow.tap:active{transform:scale(.995)}
.drow .rii{width:40px;height:40px;border-radius:11px;background:var(--accent-050);display:grid;place-items:center;flex:none;color:var(--accent)}
.drow .rii svg{width:19px;height:19px}
.drow .rc{flex:1;min-width:0}
.drow .rt{font-weight:650;font-size:14px}
.drow .rs{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.drow .rr{text-align:right;flex:none}

/* status pills */
.dpill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.01em}
.dpill.ok{background:var(--good-bg);color:var(--good)}
.dpill.warn{background:var(--warn-bg);color:var(--warn)}
.dpill.bad{background:var(--bad-bg);color:var(--bad)}
.dpill.info{background:var(--info-bg);color:var(--info)}
.dpill.mut{background:var(--sunken);color:var(--ink-3)}

/* schedule week */
.dweek{display:flex;flex-direction:column;gap:9px}
.dday{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--sh-1)}
.dday.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-050),var(--sh-1)}
.dday.off{background:var(--surface-2)}
.dday .dd{width:46px;text-align:center;flex:none}
.dday .dd .dow{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase}
.dday .dd .dnum{font-size:20px;font-weight:700;letter-spacing:-.02em}
.dday.today .dd .dnum{color:var(--accent)}
.dday .di2{flex:1;min-width:0}
.dday .di2 .l1{font-weight:650;font-size:14px}
.dday .di2 .l2{font-size:12.5px;color:var(--ink-3)}

/* empty / import states */
.dempty{text-align:center;padding:34px 22px;color:var(--ink-3)}
.dempty .ei{width:58px;height:58px;border-radius:18px;background:var(--surface-2);display:grid;place-items:center;margin:0 auto 12px;color:var(--ink-4)}
.dempty .ei svg{width:26px;height:26px}
.dempty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.dempty p{font-size:13px;margin:0 auto;max-width:34ch}

/* big touch buttons + forms */
.dbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:14px;border:0;
  background:var(--accent);color:#fff;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 6px 18px rgba(47,111,237,.28)}
.dbtn:active{transform:scale(.99)}
.dbtn.sec{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.dbtn.ghost{background:var(--surface-2);color:var(--ink-2);box-shadow:none}
.dbtn:disabled{opacity:.55}
.dbtn svg{width:19px;height:19px}
.dfab{position:fixed;right:calc(50% - 280px + 16px);bottom:104px;z-index:45;width:auto;padding:0 20px;height:52px}
@media(max-width:592px){ .dfab{right:16px} }

.dfield{margin-bottom:14px}
.dfield label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.dfield input,.dfield select,.dfield textarea{width:100%;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:12px;padding:13px;background:var(--surface);color:var(--ink)}
.dfield input:focus,.dfield select:focus,.dfield textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.dseg{display:grid;grid-auto-flow:column;gap:6px;background:var(--surface-2);border-radius:12px;padding:4px}
.dseg button{border:0;background:transparent;padding:10px;border-radius:9px;font-weight:650;font-size:13px;color:var(--ink-3);cursor:pointer}
.dseg button.on{background:var(--surface);color:var(--accent);box-shadow:var(--sh-1)}
.dchips{display:flex;flex-wrap:wrap;gap:8px}
.dchip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.dchip.on{background:var(--accent-050);border-color:var(--accent);color:var(--accent)}

/* bottom sheet */
.dsheet-scrim{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:60;opacity:0;transition:opacity .2s}
.dsheet-scrim.show{opacity:1}
.dsheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);width:100%;max-width:560px;z-index:61;
  background:var(--surface);border-radius:22px 22px 0 0;padding:8px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:90vh;overflow-y:auto;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.dsheet.show{transform:translate(-50%,0)}
.dsheet .grab{width:38px;height:4px;border-radius:99px;background:var(--line);margin:8px auto 14px}
.dsheet h3{font-size:18px;letter-spacing:-.01em;margin-bottom:14px}

/* copy button feedback */
.dcopy{background:var(--accent-050);border:1px solid var(--accent-100);color:var(--accent);border-radius:11px;padding:9px 12px;font-weight:700;font-family:var(--mono);font-size:16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.dcopy.done{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.dcode{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:.04em}

/* manager preview frame */
.previewwrap{display:flex;justify-content:center;padding:20px}
.previewphone{width:390px;max-width:100%;height:78vh;border:10px solid #0e1b34;border-radius:36px;overflow:hidden;box-shadow:var(--sh-3);background:var(--bg);position:relative}
.previewphone iframe{width:100%;height:100%;border:0}

/* ============================================================================
   Master-redesign polish layer (additive — extends the existing system).
   Numeric alignment, button variants, banners, denser financial tables. */
:root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; }
/* numbers read as data: tabular figures + right alignment already applied inline */
table.tbl td[style*="text-align:right"], table.tbl th[style*="text-align:right"]{ font-variant-numeric:tabular-nums; }
table.tbl tbody tr:hover{ background:var(--surface-2); }
table.tbl thead th[data-sort]{ cursor:pointer; user-select:none; }
table.tbl thead th[data-sort]:hover{ color:var(--accent); }
/* button hierarchy */
.btn.danger{ background:var(--bad); color:#fff; border-color:var(--bad); }
.btn.danger:hover{ background:#b62d27; }
.btn.tertiary{ background:transparent; border-color:transparent; color:var(--ink-2); box-shadow:none; }
.btn.tertiary:hover{ background:var(--surface-2); border-color:var(--line); }
.btn.split{ display:inline-flex; align-items:center; gap:0; }
.btn.split > .caret{ margin-left:6px; opacity:.7; }
/* status banner (info/warn/bad) */
.banner{ border-radius:10px; padding:10px 14px; font-size:13px; border:1px solid var(--line); background:var(--surface-2); }
.banner.warn{ border-color:var(--warn-line); background:var(--warn-bg); color:var(--warn); }
.banner.bad{ border-color:var(--bad-line); background:var(--bad-bg); color:var(--bad); }
.banner.info{ border-color:var(--accent-100); background:var(--accent-050); color:var(--accent-600); }
/* KPI numbers: tighter, tabular */
.metric .val{ font-variant-numeric:tabular-nums; }
.badge.info{ background:var(--accent-050); color:var(--accent-600); border-color:var(--accent-100); }
.badge.neutral{ background:var(--sunken); color:var(--ink-3); border-color:var(--line); }
/* toolbar row used by new list views */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* dense finance tables */
.tbl.dense td, .tbl.dense th{ padding:8px 12px; }