/* ============================================================
   MOVENTRA DESIGN SYSTEM — dark only
   Enterprise fleet operations. Black/white/grey; semantic color
   for status only. Class names follow the Integration Contract.
   ============================================================ */

:root{
  --bg:#1A1917; --surface:#22201E; --surface-2:#2B2825; --surface-3:#35312D;
  --border:#39342F; --border-soft:#2A2621;
  --accent:#F5F5F5; --accent-hover:#FFFFFF; --on-accent:#2A1409;
  --ok:#2FBF6B; --warn:#E6A72C; --danger:#EF4444; --info:#3B82F6;
  --ok-soft:rgba(47,191,107,.14); --warn-soft:rgba(230,167,44,.15);
  --danger-soft:rgba(239,68,68,.14); --info-soft:rgba(59,130,246,.16);
  --text:#ECE7DF; --text-2:#B2ABA0; --muted:#9E968A; --placeholder:#7C746A;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --z-drop:30; --z-sticky:60; --z-overlay:80; --z-drawer:820; --z-modal:850; --z-toast:900;
  --dur-fast:.12s; --dur:.2s; --ease:cubic-bezier(.2,.8,.2,1);
  --shadow-pop:0 8px 24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  --shadow-modal:0 24px 64px rgba(0,0,0,.55);
  --focus:0 0 0 2px rgba(245,245,245,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-0.01em; overflow:hidden; /* app scrolls inside #content */
  -webkit-font-smoothing:antialiased;
}
a{color:var(--text); text-decoration:underline; text-decoration-color:rgba(236,231,223,.35); text-underline-offset:2px}
a:hover{color:var(--accent-hover); text-decoration-color:rgba(255,255,255,.6)}
b,strong{font-weight:600}
svg{display:block; flex:none}
::selection{background:rgba(245,245,245,.22)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
input,select,textarea,button{font:inherit;letter-spacing:inherit;color:inherit}

/* ============ APP SHELL ============ */
.layout{display:flex;height:100vh;width:100%}
.sidebar{
  width:240px;flex:none;display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--border-soft);min-height:0;
}
.side-brand{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;font-size:15px;font-weight:700;letter-spacing:.02em}
.side-brand .brand-mark{width:22px;height:22px;border-radius:6px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.nav{flex:1;overflow-y:auto;padding:4px 8px 8px;min-height:0}
.nav-sec{margin:2px 0}
.nav-grp{
  display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 10px;
  background:none;border:0;border-radius:var(--r-sm);color:var(--text);cursor:pointer;
  font-size:13.5px;font-weight:500;text-align:left;
}
.nav-grp:hover{background:var(--surface-2)}
.nav-grp .nav-caret{margin-left:auto;color:var(--muted);transition:transform var(--dur-fast) var(--ease)}
.nav-sec.open>.nav-grp .nav-caret{transform:rotate(90deg)}
.nav-sec .nav-kids{display:none}
.nav-sec.open .nav-kids{display:block}
.nav-item{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;margin:1px 0;
  border-radius:var(--r-sm);color:var(--text);text-decoration:none;font-size:13.5px;cursor:pointer;
}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--surface-3);color:#FFF;font-weight:600}
.nav-kids .nav-item{padding-left:34px}
.nav-item .nav-ico{color:var(--text-2);width:16px}
.nav-item.active .nav-ico{color:#FFF}
.nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.nav-item.active .nav-badge{background:rgba(255,255,255,.14);color:#FFF}
.nav-foot{flex:none;border-top:1px solid var(--border-soft);padding:8px;max-height:150px}
.plan-line{display:flex;align-items:center;gap:8px;padding:4px 10px 8px;font-size:12px;color:var(--text-2);white-space:nowrap}
.plan-line b{color:var(--text)}
.btn-upgrade{margin-left:auto;height:28px;padding:0 10px;font-size:12px}
.menu-btn{display:none;background:none;border:0;color:var(--text);width:40px;height:40px;border-radius:var(--r-sm);align-items:center;justify-content:center;cursor:pointer}
.menu-btn:hover{background:var(--surface-2)}

.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{
  flex:none;height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--surface);border-bottom:1px solid var(--border-soft);
}
.tb-search{
  display:flex;align-items:center;gap:0;width:480px;max-width:44vw;height:34px;margin:0 auto;
  background:var(--bg);border:1px solid var(--border);border-radius:999px;overflow:hidden;
}
.tb-search:focus-within{box-shadow:var(--focus);border-color:var(--surface-3)}
.tb-scope{
  display:flex;align-items:center;gap:4px;height:100%;padding:0 10px 0 14px;flex:none;
  background:var(--surface-2);border:0;border-right:1px solid var(--border);color:var(--text-2);
  font-size:12.5px;cursor:pointer;
}
.tb-search svg{color:var(--placeholder);margin-left:10px}
.tb-search input{flex:1;background:none;border:0;outline:0;padding:0 12px 0 8px;color:var(--text);font-size:13.5px}
.tb-search input::placeholder{color:var(--placeholder)}
.tb-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.tb-btn{position:relative;width:34px;height:34px;border-radius:var(--r-sm);border:0;background:none;color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.tb-btn:hover{background:var(--surface-2);color:var(--text)}
.tb-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--surface-3);color:var(--text);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.avatar.av-lg{width:40px;height:40px;font-size:14px}

#content{flex:1;overflow-y:auto;min-height:0;scrollbar-gutter:stable}
.page{max-width:1400px;margin:0 auto;padding:20px 24px 48px}

/* ============ PAGE HEAD ============ */
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px}
.page-title{font-size:20px;font-weight:650;margin:0;line-height:1.25}
.page-sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.page-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;
  border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.btn:hover{background:var(--surface-3);color:var(--text)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn-ghost{background:none;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#FFF}
.btn-danger:hover{background:#F87171;border-color:#F87171;color:#FFF}
.btn-lg{height:38px;padding:0 16px;font-size:13.5px}
.icon-btn{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer}
.icon-btn:hover{background:var(--surface-3);color:var(--text)}
.icon-btn.bare{border-color:transparent;background:none}
.icon-btn.bare:hover{background:var(--surface-2)}
.linkish{background:none;border:0;padding:0;color:var(--text);text-decoration:underline;text-decoration-color:rgba(236,231,223,.35);text-underline-offset:2px;cursor:pointer;font-size:inherit}
.linkish:hover{color:#FFF}
.detail-link{font-size:12.5px;color:var(--text-2);text-decoration:none;font-weight:500}
.detail-link:hover{color:var(--text);text-decoration:underline}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;gap:2px}
.seg-btn{height:26px;padding:0 12px;border:0;border-radius:6px;background:none;color:var(--text-2);font-size:12.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:var(--surface-3);color:#FFF}
.learn-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--text-2);font-size:11.5px;font-weight:500;text-decoration:none;margin-left:10px;position:relative;top:-2px}
.learn-chip:hover{color:var(--text);background:var(--surface-3)}

/* ============ SAVED VIEWS ============ */
.saved-views{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--border-soft);margin-bottom:12px;overflow-x:auto}
.sv-tab{
  position:relative;height:38px;padding:0 12px;background:none;border:0;color:var(--text-2);
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;
}
.sv-tab:hover{color:var(--text)}
.sv-tab.active{color:#FFF;font-weight:600}
.sv-tab.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.sv-dot{width:7px;height:7px;border-radius:50%;flex:none}
.sv-count{min-width:18px;height:17px;padding:0 5px;border-radius:9px;background:var(--surface-3);color:var(--text-2);font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.sv-add{height:38px;padding:0 12px;background:none;border:0;color:var(--text-2);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.sv-add:hover{color:var(--text)}

/* ============ LIST TOOLBAR (one row, never wraps) ============ */
.list-tools{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.list-search{
  display:flex;align-items:center;flex:none;width:260px;height:32px;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:0 12px;gap:8px;
}
.list-search:focus-within{box-shadow:var(--focus)}
.list-search svg{color:var(--placeholder)}
.list-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font-size:13px}
.list-search input::placeholder{color:var(--placeholder)}
.wv-fpill{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;flex:none;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;color:var(--text);
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.wv-fpill:hover{background:var(--surface-2)}
.wv-fpill svg{color:var(--muted)}
.wv-fpill.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.wv-fpill.active svg{color:var(--on-accent)}
.wv-fcount{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;flex:none;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;color:var(--text);
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.wv-fcount:hover{background:var(--surface-2)}
.wv-fcount svg{color:var(--muted)}
.fc-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.list-body{min-width:0}

/* ============ KPI STRIP ============ */
.kpi-strip{display:flex;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);margin-bottom:12px;overflow-x:auto}
.kpi-tile{flex:1 1 0;min-width:150px;padding:14px 18px;border-right:1px solid var(--border-soft)}
.kpi-tile:last-child{border-right:0}
.kpi-label{font-size:12px;color:var(--muted);margin-bottom:6px;white-space:nowrap}
.kpi-label.tip{text-decoration:underline dotted rgba(158,150,138,.6);text-underline-offset:3px;cursor:help}
.kpi-value{font-size:20px;font-weight:650;letter-spacing:-.02em;white-space:nowrap}
.kpi-value .kpi-unit{font-size:12.5px;font-weight:500;color:var(--muted);margin-left:4px;letter-spacing:0}
.kpi-value.ok{color:var(--ok)} .kpi-value.warn{color:var(--warn)} .kpi-value.danger{color:var(--danger)} .kpi-value.info{color:var(--info)}

/* ============ TABLE ============ */
.dtable-wrap{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.dt-bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 8px 0 16px;border-bottom:1px solid var(--border-soft)}
.dt-bar-title{font-size:13px;font-weight:600}
.dt-pager{display:flex;align-items:center;gap:8px;margin-left:auto}
.dt-pager-n{font-size:12.5px;color:var(--text-2);white-space:nowrap}
.dt-pager-btns{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.dt-pager-btn{width:28px;height:28px;border:0;background:var(--surface-2);color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dt-pager-btn+.dt-pager-btn{border-left:1px solid var(--border)}
.dt-pager-btn:hover{background:var(--surface-3);color:var(--text)}
.dt-pager-btn:disabled{opacity:.4;cursor:default;background:var(--surface-2);color:var(--muted)}
.dt-tools{display:flex;align-items:center;gap:6px}
.dt-grp{height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-2);font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dt-grp:hover{background:var(--surface-3);color:var(--text)}
.dt-grp b{color:var(--text);font-weight:600}
.dt-cols,.dt-export{width:28px;height:28px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dt-cols:hover,.dt-export:hover{background:var(--surface-3);color:var(--text)}

.dtable{width:100%;min-width:0;overflow-x:auto}
.dtr{
  display:grid;grid-template-columns:var(--cols);align-items:center;min-width:var(--minw,0);
  min-height:48px;border-bottom:1px solid var(--border-soft);position:relative;
}
.dtr:last-child{border-bottom:0}
.dtr:not(.dthr):not(.dtr-grp):hover{background:var(--surface-2)}
.dthr{min-height:40px;background:var(--surface)}
.dth{
  padding:0 12px;font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap;
  display:flex;align-items:center;gap:5px;min-width:0;
}
.dth.num{justify-content:flex-end}
.dth .sort-c{color:var(--text);font-size:8px;line-height:1}
.dtd{padding:6px 12px;font-size:14px;min-width:0;display:flex;align-items:center;gap:8px}
.dtd.num{justify-content:flex-end;text-align:right}
.dtd.bold{font-weight:600}
.dt-chk{padding:0 0 0 16px;display:flex;align-items:center}
input[type="checkbox"]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex:none;background:var(--surface-2)}
.dtd .dash,.dash{color:var(--muted)}
.cell-2l{display:flex;flex-direction:column;gap:1px;min-width:0}
.cell-2l .l1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.cell-2l .l2{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cell-2l.num{align-items:flex-end;text-align:right}
.thumb{position:relative;width:30px;height:30px;border-radius:6px;background:var(--surface-3);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none}
.thumb svg{color:var(--muted)}
.thumb-dot{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;border:2px solid var(--surface)}
.dtr:hover .thumb-dot{border-color:var(--surface-2)}
.thumb-dot.ok{background:var(--ok)} .thumb-dot.warn{background:var(--warn)} .thumb-dot.danger{background:var(--danger)} .thumb-dot.info{background:var(--info)} .thumb-dot.muted{background:var(--muted)}
.tlink{color:var(--text);text-decoration:underline;text-decoration-style:dotted;text-decoration-color:rgba(178,171,160,.55);text-underline-offset:3px;font-weight:500}
.tlink:hover{color:#FFF;text-decoration-color:#FFF}
.row-menu{flex:none;width:32px;height:32px;border-radius:var(--r-sm);border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur-fast)}
.dtr:hover .row-menu,.row-menu.show{opacity:1}
.row-menu:hover{background:var(--surface-3);border-color:var(--border);color:var(--text)}
.dtd-menu{justify-content:flex-end;padding-left:4px;padding-right:8px}
.dtr.acc-danger::before,.dtr.acc-warn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.dtr.acc-danger::before{background:var(--danger)}
.dtr.acc-warn::before{background:var(--warn)}
.dtr-grp{
  display:flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;
  background:var(--surface-2);border-bottom:1px solid var(--border-soft);font-weight:600;font-size:13px;
}
.grp-count{min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.dt-bulkbar{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  background:var(--surface-3);border-bottom:1px solid var(--border);font-size:13px;
}
.dt-bulkbar b{font-weight:650}
.dt-bulkbar .bb-x{margin-left:auto}

/* status dot + text */
.st{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;white-space:nowrap}
.st i{width:8px;height:8px;border-radius:50%;flex:none}
.st.ok i{background:var(--ok)} .st.warn i{background:var(--warn)} .st.danger i{background:var(--danger)} .st.info i{background:var(--info)} .st.muted i{background:var(--muted)}

/* badges + chips */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.muted{background:var(--surface-3);color:var(--text-2)}
.badge.solid-ok{background:var(--ok);color:#08240F}
.badge.solid-warn{background:var(--warn);color:#2A1D02}
.chip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:500;white-space:nowrap}

/* ============ POPOVER MENUS ============ */
.wv-pop{
  min-width:240px;max-width:280px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow-pop);padding:6px;z-index:var(--z-drop);
}
.wv-pop-row{
  display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--text);font-size:13px;cursor:pointer;text-align:left;text-decoration:none;
}
.wv-pop-row svg{color:var(--text-2)}
.wv-pop-row:hover{background:var(--surface-3);color:var(--text)}
.wv-pop-row.danger{color:var(--danger)}
.wv-pop-row.danger svg{color:var(--danger)}
.wv-pop-row.danger:hover{background:var(--danger-soft)}
.wv-pop-row .end-ico{margin-left:auto;color:var(--muted)}
.wv-pop-div{height:1px;background:var(--border-soft);margin:6px 4px}
.wv-pop-head{padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* gear menu */
.col-menu{min-width:260px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-pop);padding:6px;z-index:var(--z-drop)}
.gear-row{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-sm);color:var(--text);font-size:13px;cursor:pointer}
.gear-row:hover{background:var(--surface-3)}
.gear-row svg{color:var(--text-2)}
.gear-block{padding:8px 10px 10px}
.gear-block .gb-label{font-size:12px;color:var(--muted);margin-bottom:8px}
.gear-seg{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;gap:2px}
.gear-seg .seg-btn{flex:1}

/* ============ OVERLAYS ============ */
.overlay{position:fixed;inset:0;background:rgba(10,9,8,.62);z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;padding:24px}
.modal{width:480px;max-width:100%;max-height:calc(100vh - 64px);display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-modal);z-index:var(--z-modal)}
.modal-lg{width:672px}  /* their standard large dialog, measured on New Saved View and Export */
.modal-xl{width:900px}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border-soft)}
.modal-head h3{margin:0;font-size:15px;font-weight:650}
.modal-head .modal-x{margin-left:auto}
.modal-body{padding:20px;overflow-y:auto;font-size:13.5px;color:var(--text-2)}
.modal-body .strong{color:var(--text)}
.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border-soft)}

/* filters drawer */
.dw9-host{position:fixed;inset:0;background:rgba(10,9,8,.55);z-index:var(--z-drawer);display:flex;justify-content:flex-end}
.dw9{width:380px;max-width:100%;height:100%;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;box-shadow:-16px 0 48px rgba(0,0,0,.4)}
.dw9-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border-soft);font-size:15px;font-weight:650}
.dw9-head .modal-x{margin-left:auto}
.dw9-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.dw9-foot{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--border-soft)}
.dw9-foot .btn-primary{margin-left:auto}

/* toast */
.toast{
  display:flex;align-items:center;gap:10px;min-width:280px;max-width:380px;padding:12px 14px;
  background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-pop);
  font-size:13px;z-index:var(--z-toast);
}
.toast .t-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.toast.ok .t-ico{background:var(--ok-soft);color:var(--ok)}
.toast.error .t-ico{background:var(--danger-soft);color:var(--danger)}
.toast.info .t-ico{background:var(--info-soft);color:var(--info)}
.toast .t-act{margin-left:auto;font-weight:600;color:var(--text);text-decoration:underline;cursor:pointer;background:none;border:0;font-size:13px}
.toast-host{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:var(--z-toast)}

/* ============ RECORD PAGES ============ */
.detail-page{max-width:1400px;margin:0 auto;padding:16px 24px 48px}
.back-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;margin-left:-8px;border:0;background:none;border-radius:var(--r-sm);color:var(--text-2);font-size:12.5px;font-weight:500;cursor:pointer;text-decoration:none}
.back-btn:hover{background:var(--surface-2);color:var(--text)}
.detail-head{display:flex;align-items:flex-start;gap:16px;margin:10px 0 4px;flex-wrap:wrap}
.detail-head h1{font-size:20px;font-weight:650;margin:0;line-height:1.25}
.detail-sub{color:var(--muted);font-size:12.5px;margin-top:4px}
.detail-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 1 auto;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
.watchers{display:flex;align-items:center}
.watchers .avatar{width:26px;height:26px;font-size:10px;border:2px solid var(--bg);margin-left:-6px}
.watchers .avatar:first-child{margin-left:0}
.wo-status-pill{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;color:var(--text);
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;flex:none;
}
.wo-status-pill:hover{background:var(--surface-3)}
.wo-dot{width:9px;height:9px;border-radius:50%;flex:none}
.wo-dot.ok{background:var(--ok)} .wo-dot.warn{background:var(--warn)} .wo-dot.danger{background:var(--danger)} .wo-dot.info{background:var(--info)} .wo-dot.muted{background:var(--muted)}
.part-id9{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 340px}
.part-thumb9{width:56px;height:56px;border-radius:var(--r);background:var(--surface-3);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex:none}
.part-thumb9 svg{color:var(--muted)}
.part-kpis9{display:flex;gap:28px;margin:14px 0 4px;flex-wrap:wrap}
.part-kpi{min-width:0}
.part-kpi .k{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;white-space:nowrap}
.part-kpi .v{font-size:13px;font-weight:600;white-space:nowrap}
.part-kpi .v .u{color:var(--muted);font-weight:500}
.detail-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-soft);margin:10px 0 20px;overflow-x:auto}
.detail-tab{
  position:relative;height:38px;padding:0 12px;background:none;border:0;color:var(--text-2);
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.detail-tab:hover{color:var(--text)}
.detail-tab.active{color:#FFF;font-weight:600}
.detail-tab.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.wo-grid{display:grid;grid-template-columns:48fr 52fr;gap:16px;align-items:start}
.wo-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.wo-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.card-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-soft)}
.card-head h3{margin:0;font-size:15px;font-weight:600}
.card-head .card-link{margin-left:auto}
.card-link{font-size:12.5px;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap}
.card-link:hover{text-decoration:underline}
.card-body{padding:16px 18px}
.card-note{padding:20px 18px;color:var(--muted);font-size:13px;text-align:center}
.wo-allfields{padding:6px 18px 14px}
.af-sub{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 0 6px}
.fc-row{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:13px;align-items:baseline}
.fc-row:last-child{border-bottom:0}
.fc-l{width:150px;flex:none;color:var(--muted);font-size:12.5px}
.fc-v{flex:1;min-width:0;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fc-v .dash{color:var(--muted)}
.wo-created{color:var(--muted);font-size:12.5px;margin-top:20px}
/* line items */
.li-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-soft);align-items:flex-start}
.li-row:last-child{border-bottom:0}
.li-name{font-weight:600;font-size:13.5px}
.li-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.li-cost{margin-left:auto;text-align:right;font-weight:600;font-size:13.5px;white-space:nowrap}
.cost-sum{border-top:1px solid var(--border);margin-top:4px;padding-top:10px}
.cs-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;color:var(--text-2)}
.cs-row b{color:var(--text)}
.cs-row.total{border-top:1px solid var(--border-soft);margin-top:6px;padding-top:10px;font-size:14px}
.cs-row.total b{font-weight:700}
/* comments */
.cmt-thread9{display:flex;flex-direction:column;gap:14px;padding:16px 18px}
.cmt-row9{display:flex;gap:10px}
.cmt-row9 .cmt-body{min-width:0}
.cmt-meta{font-size:12px;color:var(--muted);margin-bottom:2px}
.cmt-meta b{color:var(--text);font-size:12.5px}
.cmt-text{font-size:13.5px}
.cmt-input9{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border-soft)}
.cmt-input9 .field{flex:1}

/* ============ FORMS ============ */
.form-page{max-width:660px;margin:0 auto;padding:16px 24px 48px}
.form-page.wide{max-width:900px}
.form-topbar{display:flex;align-items:center;gap:8px;margin:10px 0 20px}
.form-topbar h1{font-size:20px;font-weight:650;margin:0}
.form-topbar .form-actions{margin-left:auto}
.form-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.form-actions.bottom{margin-top:20px}
.form-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.form-card-title{padding:14px 20px;border-bottom:1px solid var(--border-soft);font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.form-card-body{padding:18px 20px}
.form-row{margin-bottom:16px;min-width:0}
.form-row:last-child{margin-bottom:0}
.form-row-label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.form-row-label .req{color:var(--danger);margin-left:2px}
.form-row-hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-row-half{min-width:0}
.field{
  width:100%;height:34px;padding:0 12px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);font-size:13.5px;outline:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.field::placeholder{color:var(--placeholder)}
.field:focus{border-color:var(--surface-3);box-shadow:var(--focus)}
.field:disabled{opacity:.5;cursor:not-allowed}
textarea.field{height:auto;min-height:76px;padding:9px 12px;resize:vertical}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239E968A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
.field.error{border-color:var(--danger);box-shadow:0 0 0 2px var(--danger-soft)}
.field-msg{font-size:12px;color:var(--danger);margin-top:6px}
.field-wrap{position:relative}
.field-wrap .f-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--placeholder);pointer-events:none}
.field-wrap .f-ico+.field{padding-left:32px}
.form-error{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:16px;
  background:var(--danger-soft);border:1px solid rgba(239,68,68,.35);border-radius:var(--r-sm);
  color:var(--text);font-size:13px;
}
.form-error svg{color:var(--danger);margin-top:1px}
.chk-row{display:flex;gap:10px;align-items:flex-start;padding:2px 0}
.chk-row input{margin-top:2px}
.chk-row .chk-label{font-size:13.5px;font-weight:500}
.chk-row .form-row-hint{margin-top:2px}
.gated{padding:28px 20px;text-align:center;color:var(--muted);font-size:13px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--r-sm)}
.file-drop{display:flex;align-items:center;gap:10px;padding:14px;border:1px dashed var(--border);border-radius:var(--r-sm);color:var(--muted);font-size:13px;background:var(--bg)}
.file-drop .btn{flex:none}

/* ============ DASHBOARD ============ */
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r)}
.card.dw{grid-column:span 3;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.card.dw-w2{grid-column:span 6}
.card.dw .card-head{padding:13px 16px}
.card.dw .card-head h3{font-size:15px;font-weight:600}
.dw-body{padding:14px 16px;flex:1;min-height:0}
.dw-numpair{display:flex}
.dw-numpair .np{flex:1;min-width:0;padding:6px 4px}
.dw-numpair .np+.np{border-left:1px solid var(--border-soft);padding-left:16px}
.np-num{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.np-num.sm{font-size:22px}
.np-label{font-size:12px;font-weight:600;margin-top:4px}
.np-label.ok{color:var(--ok)} .np-label.warn{color:var(--warn)} .np-label.danger{color:var(--danger)} .np-label.info{color:var(--info)} .np-label.muted{color:var(--muted)}
.dw-row{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 4px;border-radius:var(--r-sm);color:var(--text);text-decoration:none;font-size:13.5px;cursor:pointer;border:0;background:none;width:100%;text-align:left}
.dw-row:hover{background:var(--surface-2)}
.dw-row .dw-n{margin-left:auto;font-weight:650;font-variant-numeric:tabular-nums}
.dw-row .dw-chev{color:var(--muted)}
.dw-row+.dw-row{border-top:1px solid var(--border-soft);border-radius:0}
/* charts */
.chart{position:relative;min-height:120px}
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:8px}
.cbar{flex:1;background:var(--surface-3);border-radius:3px 3px 0 0;min-width:6px}
.cbar.hi{background:var(--tab-active)}
.cbar.warn{background:var(--warn)} .cbar.danger{background:var(--danger)} .cbar.ok{background:var(--ok)}
.chart-x{display:flex;gap:6px;margin-top:6px}
.chart-x span{flex:1;text-align:center;font-size:10.5px;color:var(--muted);white-space:nowrap}
.chart-tip{
  position:absolute;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:8px 10px;font-size:12px;box-shadow:var(--shadow-pop);pointer-events:none;white-space:nowrap;z-index:var(--z-drop);
}
.chart-tip .tt-t{color:var(--muted);font-size:11px;margin-bottom:2px}
.chart-tip .tt-v{font-weight:650}
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut{position:relative;width:132px;height:132px;border-radius:50%;flex:none}
.donut::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--surface)}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}
.donut-c .dc-n{font-size:24px;font-weight:700}
.donut-c .dc-l{font-size:11px;color:var(--muted)}
.legend{display:flex;flex-direction:column;gap:8px;min-width:0}
.legend-i{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);white-space:nowrap}
.legend-i i{width:9px;height:9px;border-radius:3px;flex:none}
.legend-i b{color:var(--text);margin-left:auto;padding-left:12px}
.spark{width:100%;height:110px}

/* ============ STATES ============ */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:64px 24px;text-align:center}
.empty-state .es-ico{width:48px;height:48px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;color:var(--muted);margin-bottom:8px}
.empty-state .es-title{font-size:14px;font-weight:600;color:var(--text)}
.empty-state .es-sub{font-size:13px;color:var(--muted);max-width:420px;line-height:1.5}
.empty-state .es-act{margin-top:14px;display:flex;gap:8px}
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:6px}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:skel 1.4s infinite}
@keyframes skel{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:12px}
.banner.offline{background:var(--warn-soft);border:1px solid rgba(230,167,44,.35);color:var(--text)}
.banner.offline svg{color:var(--warn)}
.banner.info{background:var(--info-soft);border:1px solid rgba(59,130,246,.3)}
.spin{width:14px;height:14px;border:2px solid rgba(42,20,9,.3);border-top-color:var(--on-accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ ASSIGNMENTS TIMELINE ============ */
.as-toolbar-date{display:flex;align-items:center;gap:4px;font-weight:650;font-size:14px;margin:0 auto}
.as-wrap{display:flex;gap:16px;align-items:flex-start}
.as-card{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.as-scroll{overflow-x:auto;position:relative}
.as-grid{min-width:1080px;position:relative}
.as-hrow,.as-row{display:grid;grid-template-columns:250px repeat(13,minmax(60px,1fr))}
.as-hrow{border-bottom:1px solid var(--border-soft)}
.as-hcell{padding:10px 8px;font-size:11.5px;color:var(--muted);border-left:1px solid var(--border-soft);white-space:nowrap}
.as-hveh{padding:10px 16px;font-size:13px;color:var(--text-2);font-weight:500;display:flex;align-items:center;gap:8px;border-left:0}
.as-row{border-bottom:1px solid var(--border-soft);min-height:56px}
.as-row:last-child{border-bottom:0}
.as-vehcell{display:flex;align-items:center;gap:10px;padding:8px 16px;min-width:0;background:var(--surface);position:sticky;left:0;z-index:2}
.as-cell{border-left:1px solid var(--border-soft)}
.as-lane{grid-column:2 / -1;display:flex;align-items:center;padding:8px 4px;position:relative}
.as-bar{
  background:var(--info-soft);border:1px solid rgba(59,130,246,.4);border-radius:var(--r-sm);
  padding:5px 10px;min-width:0;overflow:hidden;
}
.as-bar .ab-name{font-size:12.5px;font-weight:600;color:var(--info);white-space:nowrap}
.as-bar .ab-range{font-size:11px;color:var(--text-2);white-space:nowrap}
.as-now{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);z-index:3}
.as-now::before{content:"";position:absolute;top:0;left:-4px;border:5px solid transparent;border-top-color:var(--danger)}
.as-cal{width:250px;flex:none;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:14px}
.as-cal .cal-head{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-weight:600;font-size:13px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:11.5px}
.cal-grid .cal-dow{color:var(--muted);padding:4px 0;font-size:10.5px}
.cal-grid .cal-d{padding:5px 0;border-radius:6px;color:var(--text-2);cursor:pointer}
.cal-grid .cal-d:hover{background:var(--surface-2)}
.cal-grid .cal-d.out{color:var(--placeholder)}
.cal-grid .cal-d.today{background:var(--accent);color:var(--on-accent);font-weight:700}

/* ============ MONTH CALENDAR ============ */
.mcal{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.mcal-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border-soft)}
.mcal-dow{padding:9px 10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mcal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.mcal-d{min-width:0;min-height:96px;padding:8px;border-top:1px solid var(--border-soft);border-left:1px solid var(--border-soft);display:flex;flex-direction:column;gap:4px;transition:background var(--dur-fast)}
.mcal-d:nth-child(7n+1){border-left:0}
.mcal-d:hover{background:var(--surface-2)}
.mcal-d.out{background:rgba(0,0,0,.14)}
.mcal-d.out .mcal-n{color:var(--placeholder)}
.mcal-n{font-size:12px;font-weight:600;color:var(--text-2)}
.mcal-d.today .mcal-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.mcal-ev{font-size:11px;font-weight:500;padding:3px 7px;border-radius:6px;background:var(--surface-3);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--muted);cursor:pointer}
.mcal-ev.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.mcal-ev.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.mcal-ev.danger{border-left-color:var(--danger);background:var(--danger-soft)}
.mcal-ev.info{border-left-color:var(--info);background:var(--info-soft)}
.mcal-ev:hover{filter:brightness(1.18)}
@media (max-width:760px){.mcal-d{min-height:64px}.mcal-ev{display:none}.mcal-d .mcal-ev:first-of-type{display:block;font-size:0;height:6px;padding:0;width:60%}}

/* ============ REPLAY BAR ============ */
.replay-bar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;box-shadow:var(--shadow-pop);z-index:5}
.replay-track{flex:1;height:6px;border-radius:3px;background:var(--surface-3);position:relative;cursor:pointer}
.replay-prog{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--accent)}
.replay-knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5);transition:transform var(--dur-fast)}
.replay-track:hover .replay-knob{transform:translate(-50%,-50%) scale(1.25)}
.replay-time{font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;min-width:42px;text-align:center}

/* ============ CHARTS — extended library ============ */
.lchart{position:relative}
.lchart svg{display:block;width:100%;height:150px}
.lchart .lc-grid{stroke:var(--border-soft);stroke-width:1}
.lchart .lc-line{fill:none;stroke:var(--tab-active);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lchart .lc-line.ok{stroke:var(--ok)} .lchart .lc-line.warn{stroke:var(--warn)} .lchart .lc-line.info{stroke:var(--info)} .lchart .lc-line.danger{stroke:var(--danger)} .lchart .lc-line.dim{stroke:var(--muted);stroke-dasharray:4 5;stroke-width:1.5}
.lchart .lc-area{fill:url(#lcFade);stroke:none}
.lchart .lc-dot{fill:var(--tab-active);stroke:var(--surface);stroke-width:2}
.lchart .lc-dot.hi{r:5}
.lchart .lc-cursor{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4}
.chart-bars .cbar{transition:filter var(--dur-fast),background var(--dur-fast);cursor:pointer}
.chart-bars .cbar:hover{filter:brightness(1.35)}
.cbar.seg{display:flex;flex-direction:column-reverse;background:none;gap:2px}
.cbar.seg i{display:block;border-radius:3px;background:var(--surface-3)}
.cbar.seg i.ok{background:var(--ok)} .cbar.seg i.warn{background:var(--warn)} .cbar.seg i.danger{background:var(--danger)} .cbar.seg i.info{background:var(--info)} .cbar.seg i.acc{background:var(--tab-active)} .cbar.seg i.mut{background:var(--surface-3)}
.hbars{display:flex;flex-direction:column;gap:10px}
.hbar{display:grid;grid-template-columns:150px 1fr 64px;align-items:center;gap:12px;font-size:12.5px}
.hbar .hb-l{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .hb-track{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.hbar .hb-fill{height:100%;border-radius:5px;background:var(--tab-active);transition:filter var(--dur-fast)}
.hbar:hover .hb-fill{filter:brightness(1.3)}
.hbar .hb-fill.ok{background:var(--ok)} .hbar .hb-fill.warn{background:var(--warn)} .hbar .hb-fill.danger{background:var(--danger)} .hbar .hb-fill.info{background:var(--info)}
.hbar .hb-v{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.gauge{position:relative;width:150px;height:84px;overflow:hidden;flex:none}
.gauge .g-arc{position:absolute;inset:0 0 -84px 0;border-radius:50%;background:conic-gradient(from 270deg, var(--g-fill,var(--ok)) 0 calc(var(--g-val,.6)*180deg), var(--surface-3) calc(var(--g-val,.6)*180deg) 180deg, transparent 180deg)}
.gauge .g-arc::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--surface)}
.gauge .g-num{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:20px;font-weight:700}
.gauge .g-cap{position:absolute;left:0;right:0;bottom:-16px;text-align:center;font-size:11px;color:var(--muted)}
.heat{display:grid;grid-template-columns:auto repeat(7,minmax(0,26px));justify-content:start;gap:4px;font-size:10.5px;color:var(--muted)}
.heat .h-lab{display:flex;align-items:center;padding-right:6px;white-space:nowrap}
.heat .h-top{text-align:center;padding-bottom:2px}
.heat i{display:block;aspect-ratio:1;border-radius:4px;background:var(--surface-2);transition:transform var(--dur-fast)}
.heat i:hover{transform:scale(1.15);outline:1px solid var(--border)}
.heat i.l1{background:rgba(47,191,107,.18)} .heat i.l2{background:rgba(47,191,107,.38)} .heat i.l3{background:rgba(47,191,107,.62)} .heat i.l4{background:var(--ok)}
.heat i.w1{background:rgba(230,167,44,.25)} .heat i.w3{background:rgba(230,167,44,.6)} .heat i.d4{background:var(--danger)}
.trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600}
.trend.up{color:var(--ok)} .trend.down{color:var(--danger)} .trend.flat{color:var(--muted)}

/* ============ NOTIFICATIONS DRAWER ============ */
.ntf-row{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border-soft);cursor:pointer;transition:background var(--dur-fast)}
.ntf-row:hover{background:var(--surface-2)}
.ntf-row.unread{background:rgba(59,130,246,.05)}
.ntf-row.unread:hover{background:rgba(59,130,246,.09)}
.ntf-ico{width:32px;height:32px;border-radius:8px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--text-2);flex:none}
.ntf-ico.warn{color:var(--warn);background:var(--warn-soft)} .ntf-ico.danger{color:var(--danger);background:var(--danger-soft)} .ntf-ico.ok{color:var(--ok);background:var(--ok-soft)} .ntf-ico.info{color:var(--info);background:var(--info-soft)}
.ntf-body{min-width:0;flex:1}
.ntf-t{font-size:13px;line-height:1.4}
.ntf-t b{font-weight:650}
.ntf-m{font-size:11.5px;color:var(--muted);margin-top:2px}
.ntf-dot{width:8px;height:8px;border-radius:50%;background:var(--info);flex:none;margin-top:6px}
.ntf-tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--border-soft)}
.ntf-tab{height:38px;padding:0 10px;background:none;border:0;border-bottom:2px solid transparent;color:var(--text-2);font-size:13px;font-weight:500;cursor:pointer}
.ntf-tab:hover{color:var(--text)}
.ntf-tab.active{color:var(--text);border-bottom-color:var(--accent);font-weight:600}

/* ============ SETTINGS AREA (dedicated shell) ============ */
.stg-layout{display:flex;height:100vh}
.stg-side{width:250px;flex:none;background:var(--surface);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;min-height:0}
.stg-back{display:flex;align-items:center;gap:6px;padding:16px 16px 4px;color:var(--text-2);font-size:12.5px;text-decoration:none;font-weight:500}
.stg-back:hover{color:var(--text)}
.stg-title{font-size:19px;font-weight:700;padding:6px 16px 12px}
.stg-search{margin:0 12px 10px;display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:999px;color:var(--placeholder)}
.stg-search input{flex:1;background:none;border:0;outline:0;color:var(--text);font-size:12.5px;min-width:0}
.stg-nav{flex:1;overflow-y:auto;padding:0 10px 24px;scrollbar-width:thin}
.stg-grp{display:flex;align-items:center;gap:8px;padding:16px 8px 5px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stg-grp svg{flex:none}
.stg-ident{display:flex;align-items:center;gap:9px;padding:14px 8px 4px;font-size:13px;font-weight:650}
.stg-ident .linkish{margin-left:auto;font-size:11.5px}
.stg-item{display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;border-radius:var(--r-sm);color:var(--text);font-size:12.5px;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden}
.stg-item:hover{background:var(--surface-2)}
.stg-item.active{background:var(--surface-3);color:#FFF;font-weight:600}
.stg-item .ext{margin-left:auto;color:var(--placeholder);font-size:11px}
.stg-item .badge{margin-left:auto;height:17px;font-size:9.5px;padding:0 6px}
.stg-main{flex:1;overflow-y:auto;min-width:0;background:var(--bg)}
.stg-page{max-width:1180px;margin:0 auto;padding:30px 34px 80px}
.stg-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.stg-head h1{font-size:21px;font-weight:700;margin:0}
.stg-head .sub{color:var(--text-2);font-size:13px;margin-top:5px;max-width:760px;line-height:1.5}
.stg-actions{margin-left:auto;display:flex;gap:8px;flex:none}
.stg-save{display:flex;justify-content:flex-end;margin-top:18px}
.ub{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:12.5px;padding:9px 0}
.ub .ub-v{color:var(--text-2)}
.ub .ub-track{grid-column:1 / -1;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.ub .ub-fill{height:100%;border-radius:3px;background:var(--ok)}
.ub .ub-fill.warn{background:var(--warn)} .ub .ub-fill.zero{background:var(--surface-3)}
.nfs{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.nfs-rail{border-right:1px solid var(--border-soft);padding:12px 0;max-height:560px;overflow-y:auto}
.nfs-cap{padding:10px 16px 4px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.nfs-it{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:12.5px;color:var(--text-2);cursor:pointer}
.nfs-it:hover{background:var(--surface-2)}
.nfs-it.active{color:var(--text);font-weight:600;box-shadow:inset 2px 0 0 var(--accent);background:var(--surface-2)}
.nfs-pane{padding:20px 22px}
.nfs-row{display:grid;grid-template-columns:minmax(0,1fr) 70px 70px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-soft);font-size:13px}
.nfs-row:last-child{border-bottom:0}
.nfs-row .h{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nfs-row .c{text-align:center}
.vmrs{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:8px}
.vmrs-col{width:295px;flex:none;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);display:flex;flex-direction:column;max-height:520px}
.vmrs-head{display:flex;align-items:center;gap:8px;padding:12px 14px;font-weight:650;font-size:13.5px}
.vmrs-head .grp-count{margin-left:0}
.vmrs-head .switch{margin-left:auto}
.vmrs-search{margin:0 12px 10px;display:flex;align-items:center;gap:7px;height:30px;padding:0 10px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:999px;color:var(--placeholder);font-size:12px}
.vmrs-list{overflow-y:auto;padding:0 8px 10px}
.vmrs-it{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:var(--r-sm);font-size:12.5px;cursor:pointer;color:var(--text)}
.vmrs-it:hover{background:var(--surface-2)}
.vmrs-it.sel{background:var(--ok-soft);box-shadow:inset 0 0 0 1px rgba(47,191,107,.4)}
.vmrs-it .cv{margin-left:auto;color:var(--placeholder)}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.plan-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px}
.plan-card.hi{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan-card .pc-tag{align-self:flex-start}
.plan-card h3{margin:0;font-size:17px}

.plan-card .pc-price{font-size:28px;font-weight:700}
.plan-card .pc-price span{font-size:12px;font-weight:400;color:var(--muted)}
.plan-card ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--text-2)}
.plan-card ul li{display:flex;gap:8px}
.plan-card ul li svg{color:var(--ok);flex:none;margin-top:1px}
@media (max-width:1023px){.stg-layout{flex-direction:column;height:100vh;overflow-y:auto}.stg-side{width:100%;height:auto;flex:none;border-right:0;border-bottom:1px solid var(--border-soft)}.stg-nav{display:flex;flex-wrap:wrap;gap:2px;padding:4px 12px 14px}.stg-grp{width:100%;padding:10px 4px 3px}.stg-ident{width:100%}.stg-main{overflow:visible}.nfs{grid-template-columns:1fr}.nfs-rail{display:flex;overflow-x:auto;max-height:none;border-right:0;border-bottom:1px solid var(--border-soft)}.nfs-it{white-space:nowrap}.nfs-it.active{box-shadow:inset 0 -2px 0 var(--accent)}}

/* ============ MAP ============ */
.map-shell{display:flex;height:calc(100vh - 56px)}
.map-rail{width:320px;flex:none;background:var(--surface);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;min-height:0}
.map-rail-head{padding:14px 16px;border-bottom:1px solid var(--border-soft)}
.map-rail-list{flex:1;overflow-y:auto}
.mr-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border-soft);cursor:pointer}
.mr-row:hover{background:var(--surface-2)}
.mr-row.sel{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.map-canvas{
  flex:1;position:relative;overflow:hidden;background:
    radial-gradient(ellipse 60% 50% at 30% 40%,rgba(53,49,45,.55),transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 65%,rgba(43,40,37,.7),transparent 70%),
    repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(57,52,47,.35) 80px),
    repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(57,52,47,.35) 80px),
    #201E1B;
}
.map-road{position:absolute;background:rgba(158,150,138,.22);border-radius:3px}
.map-pin{position:absolute;display:flex;align-items:center;gap:6px;transform:translate(-50%,-50%)}
.map-pin .mp-dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--bg);box-shadow:0 0 0 2px rgba(0,0,0,.3)}
.map-pin .mp-dot.ok{background:var(--ok)} .map-pin .mp-dot.warn{background:var(--warn)} .map-pin .mp-dot.danger{background:var(--danger)} .map-pin .mp-dot.muted{background:var(--muted)}
.map-pin .mp-label{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-size:11px;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.map-geo{position:absolute;border:1.5px dashed rgba(245,245,245,.35);background:rgba(245,245,245,.05);border-radius:50%}
.map-geo-label{position:absolute;font-size:10.5px;color:var(--text-2);background:rgba(34,32,30,.85);padding:1px 6px;border-radius:4px;white-space:nowrap}
.map-ctl{position:absolute;display:flex;flex-direction:column;gap:6px}
.map-attr{position:absolute;right:10px;bottom:8px;font-size:10px;color:var(--placeholder)}

/* ============ INTEGRATIONS ============ */
.int-layout{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.int-rail .rail-head{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:12px 10px 6px}
.rail-item{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:var(--r-sm);color:var(--text);font-size:13px;text-decoration:none;cursor:pointer}
.rail-item:hover{background:var(--surface-2)}
.rail-item.active{background:var(--surface-3);color:#FFF;font-weight:600}
.rail-item .nav-badge{margin-left:auto}
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.int-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px}
.int-card .ic-top{display:flex;align-items:center;gap:10px}
.int-logo{width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--text)}
.int-card h4{margin:0;font-size:14px;font-weight:600}
.int-card .ic-cat{font-size:11.5px;color:var(--muted)}
.int-card p{margin:0;font-size:12.5px;color:var(--text-2);line-height:1.5;flex:1}
.int-card .ic-actions{display:flex;gap:8px;margin-top:6px}

/* ============ SETTINGS ============ */
.set-layout{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.set-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.set-row:last-child{border-bottom:0}
.set-row .sr-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.set-row .sr-end{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:13px}
.switch{position:relative;width:36px;height:20px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);flex:none;cursor:pointer;transition:background var(--dur-fast)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-2);transition:all var(--dur-fast) var(--ease)}
.switch.on{background:var(--accent);border-color:var(--accent)}
.switch.on::after{left:18px;background:var(--on-accent)}

/* ============ DOCUMENTS ============ */
.doc-pins{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.doc-pin{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--text)}
.doc-pin:hover{background:var(--surface-2);color:var(--text)}
.doc-ico{width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--text-2);flex:none}

/* ============ MANAGE COLUMNS ============ */
.mc-panes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mc-pane{border:1px solid var(--border-soft);border-radius:var(--r-sm);background:var(--bg);display:flex;flex-direction:column;min-height:0}
.mc-pane-head{padding:10px 12px;border-bottom:1px solid var(--border-soft);font-size:12.5px;font-weight:600;color:var(--text)}
.mc-list{max-height:280px;overflow-y:auto;padding:6px}
.mc-item{display:flex;align-items:center;gap:9px;height:32px;padding:0 8px;border-radius:6px;font-size:13px;color:var(--text)}
.mc-item:hover{background:var(--surface-2)}
.mc-item .mc-x{margin-left:auto;color:var(--muted);cursor:pointer;background:none;border:0;width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center}
.mc-item .mc-x:hover{background:var(--surface-3);color:var(--text)}
.mc-item .drag{color:var(--placeholder);cursor:grab}
.mc-filter{margin:8px;margin-bottom:2px}

/* ============ REPORTS ============ */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.rep-card{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--text)}
.rep-card:hover{background:var(--surface-2);color:var(--text)}
.rep-card h4{margin:0 0 3px;font-size:13.5px;font-weight:600}
.rep-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.rep-sec{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:26px 0 12px}
.rep-sec:first-of-type{margin-top:0}

/* ============ RESPONSIVE ============ */
.hide-t-i{display:none}
@media (max-width:1399px){
  .card.dw{grid-column:span 4}
  .card.dw-w2{grid-column:span 8}
}
@media (max-width:1023px){
  .dtr{grid-template-columns:var(--cols-t,var(--cols))}
  .hide-t{display:none !important}
  .hide-t-i{display:flex}
  .wo-grid{grid-template-columns:1fr}
  .card.dw{grid-column:span 6}
  .card.dw-w2{grid-column:span 12}
  .int-layout,.set-layout{grid-template-columns:1fr}
  .int-layout>.int-rail,.set-layout>.int-rail{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:8px}
  .int-layout>.int-rail .rail-item{flex:none;white-space:nowrap}
  .set-layout>.int-rail .rail-item{flex:none;white-space:nowrap}
  .int-layout>.int-rail .rail-head{display:none}
  .as-cal{display:none}
  .tb-search{max-width:38vw}
}
@media (max-width:760px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:var(--z-drawer);transform:translateX(-104%);transition:transform var(--dur) var(--ease);box-shadow:24px 0 64px rgba(0,0,0,.5)}
  .sidebar.open{transform:none}
  .menu-btn{display:inline-flex}
  .tb-search{display:none}
  .page,.detail-page,.form-page{padding:16px 14px 40px}
  .dtr{grid-template-columns:var(--cols-m,42px minmax(0,1fr) 44px)}
  .hide-m{display:none !important}
  .dthr .hide-m-keep{display:flex}
  .card.dw,.card.dw-w2{grid-column:span 12}
  .form-grid{grid-template-columns:1fr}
  .dw9{width:100%}
  .modal,.modal-lg,.modal-xl{width:100%}
  /* header controls stay available at every width - hiding them made the
     dashboard's group filter vanish on smaller windows */
  .page-actions{flex-wrap:wrap;justify-content:flex-end}
  .part-kpis9{gap:18px}
  .detail-actions{gap:6px}
  .map-rail{width:100%;position:absolute;z-index:5;height:40%;bottom:0;border-right:0;border-top:1px solid var(--border)}
  .map-shell{position:relative}
  .btn,.icon-btn,.row-menu{min-height:40px;min-width:40px}
  .dt-pager-btn{width:36px;height:36px}
  .dtd{padding:10px 12px}
}
@media (min-width:761px){
  .dtr{min-height:48px}
}
/* compact density (gear menu option) */
.dtable.compact .dtr{min-height:38px}
.dtable.compact .dtd{padding:4px 12px;font-size:13px}

.void-val{color:var(--warn);text-decoration:line-through}
.dtable{overflow-x:auto}

/* ============ MOTION ============ */
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes dlgIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes growH{from{height:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.overlay{position:fixed;inset:0;background:rgba(10,9,8,.62);display:none;align-items:flex-start;justify-content:center;padding:7vh 16px;z-index:90;overflow-y:auto}
.overlay.on{display:flex;animation:ovIn .16s ease}
.overlay.on .modal{animation:dlgIn .24s cubic-bezier(.2,.85,.3,1.15)}
.chart-bars .cbar{animation:growH .7s cubic-bezier(.2,.7,.2,1) backwards}
.chart-bars .cbar:nth-child(2){animation-delay:.05s}.chart-bars .cbar:nth-child(3){animation-delay:.1s}.chart-bars .cbar:nth-child(4){animation-delay:.15s}.chart-bars .cbar:nth-child(5){animation-delay:.2s}.chart-bars .cbar:nth-child(6){animation-delay:.25s}.chart-bars .cbar:nth-child(7){animation-delay:.3s}.chart-bars .cbar:nth-child(8){animation-delay:.35s}
.card.dw,.wo-card{animation:fadeUp .3s ease backwards}
/* ============ LIVE MAP v2 ============ */
.lm-stage{position:relative;height:100%;min-height:540px;overflow:hidden;display:flex}
.lm-panel{width:320px;flex:none;background:var(--surface);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;min-width:0;transition:margin-left .28s cubic-bezier(.2,.8,.2,1);z-index:4}
.lm-stage.closed .lm-panel{margin-left:-320px}
.lm-phead{padding:14px 14px 10px;border-bottom:1px solid var(--border-soft)}
.lm-phead h2{margin:0 0 10px;font-size:15px;font-weight:650;display:flex;align-items:center;gap:8px}
.lm-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--surface-3);font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.lm-rows{flex:1;overflow-y:auto;scrollbar-width:thin}
.lm-row{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:11px 14px;background:none;border:0;border-bottom:1px solid var(--border-soft);color:var(--text);cursor:pointer;transition:background var(--dur-fast)}
.lm-row:hover{background:var(--surface-2)}
.lm-row.sel{background:var(--surface-3)}
.lm-row .l1{font-size:12.5px;font-weight:600}
.lm-row .l2{font-size:11.5px;color:var(--text-2)}
.lm-row .spd{margin-left:auto;text-align:right;font-size:11.5px;color:var(--text-2);flex:none}
.lm-row .spd b{display:block;font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums}
.lm-toggle{position:absolute;top:16px;left:320px;z-index:5;width:26px;height:44px;border:1px solid var(--border);border-left:0;border-radius:0 8px 8px 0;background:var(--surface);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:left .28s cubic-bezier(.2,.8,.2,1),background var(--dur-fast)}
.lm-toggle:hover{background:var(--surface-2);color:var(--text)}
.lm-toggle svg{transition:transform .28s ease}
.lm-stage.closed .lm-toggle{left:0}
.lm-stage.closed .lm-toggle svg{transform:rotate(180deg)}
.lm-map{flex:1;position:relative;background:#20241f;background-image:linear-gradient(rgba(245,245,245,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(245,245,245,.045) 1px,transparent 1px),radial-gradient(1100px 500px at 70% 20%,rgba(59,130,246,.06),transparent);background-size:56px 56px,56px 56px,auto;overflow:hidden}
.lm-road{position:absolute;background:rgba(245,245,245,.1);border-radius:3px}
.lm-water{position:absolute;background:rgba(59,130,246,.12);border-radius:40% 60% 55% 45%/50%;filter:blur(2px)}
.lm-mk{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;color:#1A1917;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.5);transition:transform var(--dur-fast)}
.lm-mk:hover{transform:scale(1.12)}
.lm-mk.sel{transform:scale(1.22);box-shadow:0 0 0 5px rgba(245,245,245,.18),0 3px 10px rgba(0,0,0,.5)}
.lm-mk.ok{background:var(--ok)}.lm-mk.warn{background:var(--warn)}.lm-mk.muted{background:var(--muted)}.lm-mk.info{background:var(--info)}
.poi{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;border:1.5px solid rgba(255,255,255,.85);box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform var(--dur-fast)}
.poi:hover{transform:scale(1.15)}
.poi svg{width:12px;height:12px}
.poi.fuel{background:#D97706}.poi.rest{background:#DB4437}.poi.depot{background:#7C6AE0}.poi.port{background:#2A7DE1}.poi.shop{background:#0F9D58}
.lm-legend{position:absolute;left:14px;bottom:14px;z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;min-width:190px;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:cardIn .3s ease}
.lm-legend h4{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lgd-row{display:flex;align-items:center;gap:9px;padding:3.5px 0;font-size:12px;color:var(--text-2)}
.lgd-row .poi,.lgd-row .lm-mk{position:static;margin:0;width:18px;height:18px;flex:none;box-shadow:none;border-width:1px;cursor:default}
.lgd-row .poi svg{width:10px;height:10px}
.lm-card{position:absolute;top:16px;right:16px;z-index:6;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 14px 40px rgba(0,0,0,.5);display:none}
.lm-card.on{display:block;animation:cardIn .26s cubic-bezier(.2,.85,.3,1.1)}
.lm-card .hd9{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--border-soft)}
.lm-card .hd9 h3{margin:0;font-size:14px;font-weight:650;flex:1}
.lm-kv{display:flex;justify-content:space-between;gap:12px;padding:6.5px 14px;font-size:12.5px;border-bottom:1px solid var(--border-soft)}
.lm-kv .k{color:var(--muted)}
.lm-kv .v{font-weight:500;text-align:right}
.lm-acts{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border-soft)}
.lm-acts .btn{flex:1;justify-content:center}
.lm-zoom{position:absolute;right:16px;bottom:14px;z-index:5;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.lm-zoom button{width:32px;height:32px;background:var(--surface);border:0;color:var(--text);font-size:16px;cursor:pointer}
.lm-zoom button:first-child{border-bottom:1px solid var(--border-soft)}
.lm-zoom button:hover{background:var(--surface-2)}
@media (max-width:760px){.lm-panel{position:absolute;inset:0 auto 0 0;box-shadow:0 0 40px rgba(0,0,0,.5)}.lm-card{width:calc(100% - 32px)}}
/* ============ INTEGRATIONS DIRECTORY ============ */
.idx-wrap{display:flex;min-height:100%}
.idx-side{width:270px;flex:none;border-right:1px solid var(--border-soft);padding:22px 14px 30px;background:var(--surface)}
.idx-side h1{margin:0 4px 16px;font-size:20px;font-weight:650}
.idx-cat{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;background:none;border-radius:var(--r-sm);color:var(--text);font-size:13px;text-decoration:none;cursor:pointer;transition:background var(--dur-fast)}
.idx-cat:hover{background:var(--surface-2)}
.idx-cat.active{background:var(--surface-3);font-weight:600}
.idx-cat .n{margin-left:auto;min-width:20px;height:19px;padding:0 6px;border-radius:10px;background:var(--surface-3);font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2)}
.idx-cat.active .n{background:var(--border)}
.idx-lbl{padding:18px 10px 6px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.idx-main{flex:1;min-width:0;padding:26px 30px 80px}
.idx-hero{display:flex;gap:28px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:30px 32px;margin-bottom:22px;animation:fadeUp .3s ease}
.idx-hero h2{margin:0 0 10px;font-size:30px;font-weight:700;letter-spacing:-.02em}
.idx-hero p{margin:0;color:var(--text-2);font-size:13.5px;max-width:520px}
.idx-mosaic{display:grid;grid-template-columns:repeat(4,54px);gap:10px;flex:none}
.idx-mosaic .tile{width:54px;height:54px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--text-2)}
.idx-cats3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:8px}
.idx-cat-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:18px;animation:fadeUp .35s ease backwards}
.idx-cat-card h3{margin:0 0 8px;font-size:14px;font-weight:650;display:flex;align-items:center;gap:8px}
.idx-cat-card p{margin:0 0 12px;color:var(--text-2);font-size:12.5px}
.idx-sec{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 12px}
.idx-sec h3{margin:0;font-size:16px;font-weight:650}
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.int-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;transition:border-color var(--dur-fast),transform var(--dur-fast);animation:fadeUp .3s ease backwards}
.int-card:hover{border-color:var(--border);transform:translateY(-2px)}
.int-head{display:flex;gap:12px;align-items:center}
.int-logo{width:46px;height:46px;flex:none;border-radius:10px;background:var(--surface-2);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.int-head h4{margin:0;font-size:14.5px;font-weight:650}
.int-head .cat{font-size:11.5px;color:var(--muted)}
.int-card p{margin:0;font-size:12.5px;color:var(--text-2);flex:1}
.int-foot{display:flex;justify-content:flex-end;gap:8px;align-items:center}
.int-detail{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
.int-hero-logo{width:100%;aspect-ratio:1;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:800}
.int-meta h5{margin:16px 0 4px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.int-meta div{font-size:13px;padding:2px 0}
.int-dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.int-dhead h2{margin:0;font-size:26px;font-weight:700}
.int-dhead .by{color:var(--muted);font-size:12.5px;margin-top:3px}
.int-body h3{font-size:16px;font-weight:650;margin:22px 0 8px}
.int-body ul{margin:0;padding-left:18px;color:var(--text-2);font-size:13px;line-height:1.7}
.feat-tbl{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:8px}
.feat-row{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;border-bottom:1px solid var(--border-soft);font-size:13px}
.feat-row svg{color:var(--ok)}
.feat-row .no{color:var(--placeholder)}
@media (max-width:1023px){.idx-side{display:none}.int-detail{grid-template-columns:1fr}.int-hero-logo{max-width:180px}}

/* ============ WIRING COMPAT (Moventra runtime state classes) ============ */
/* app.js toggles .open on overlays (design uses .on) */
.overlay.open{display:flex;animation:ovIn .16s ease}
.overlay.open .modal{animation:dlgIn .24s cubic-bezier(.2,.85,.3,1.15)}
/* app.js density class is .dt-compact on the wrap */
.dt-compact .dtr{min-height:38px}
.dt-compact .dtd{padding:4px 12px;font-size:13px}
/* legacy components still read --action*; alias them to the design accent */
:root{--action:var(--accent);--action-hover:var(--accent-hover);--action-soft:rgba(245,245,245,.14)}


/* ============================================================
   TOKEN GUARD — the legacy sheet re-declares --bg/--surface/etc on
   `body` (it used to carry a light/dark switch there). A :root-only
   declaration loses on that element, so the design tokens are
   re-asserted at body level. Unlayered beats @layer legacy, so these
   win regardless of the legacy body.light / body:not(.light) rules.
   ============================================================ */
body, body.light, body:not(.light){
--bg:#1A1917; --surface:#22201E; --surface-2:#2B2825; --surface-3:#35312D;
  --border:#39342F; --border-soft:#2A2621;
  --accent:#F5F5F5; --accent-hover:#FFFFFF; --on-accent:#2A1409;
  --ok:#2FBF6B; --warn:#E6A72C; --danger:#EF4444; --info:#3B82F6;
  --ok-soft:rgba(47,191,107,.14); --warn-soft:rgba(230,167,44,.15);
  --danger-soft:rgba(239,68,68,.14); --info-soft:rgba(59,130,246,.16);
  --text:#ECE7DF; --text-2:#B2ABA0; --muted:#9E968A; --placeholder:#7C746A;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --z-drop:30; --z-sticky:60; --z-overlay:80; --z-drawer:820; --z-modal:850; --z-toast:900;
  --dur-fast:.12s; --dur:.2s; --ease:cubic-bezier(.2,.8,.2,1);
  --shadow-pop:0 8px 24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  --shadow-modal:0 24px 64px rgba(0,0,0,.55);
  --focus:0 0 0 2px rgba(245,245,245,.35);
}

/* ============ BOOT SPLASH (dark-only app) ============ */
/* The legacy splash was white with near-black text, a hard flash before the
   dark shell paints. Repainted in design tokens. */
.boot{background:var(--bg)}
.boot-name{color:var(--text)}
.boot-sub{color:var(--muted)}
.boot-pulse i{background:var(--text-2)}

/* ============================================================
   ICON SIZING — the design's static HTML sized every glyph with
   inline width/height attributes; our icon() emits a bare
   <svg viewBox="0 0 24 24"> with no attributes and used to rely on
   legacy CSS for size. These rules restore the design's dimensions
   for every icon slot in the shell and components.
   ============================================================ */
.nav-ico{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex:none}
.nav-ico svg{width:16px;height:16px}
.nav-caret{display:flex;align-items:center;flex:none}
.nav-caret svg{width:14px;height:14px}
.brand-mark svg{width:14px;height:14px}
.dw-chev{display:flex;align-items:center;flex:none}
.dw-chev svg{width:13px;height:13px}
.card-link svg{width:13px;height:13px}
.menu-btn svg{width:20px;height:20px}
.tb-btn svg{width:17px;height:17px}
.tb-scope svg{width:12px;height:12px}
.tb-search>svg{width:15px;height:15px}
.btn svg,.btn-lg svg{width:14px;height:14px;flex:none}
.icon-btn svg{width:16px;height:16px}
.row-menu svg,.dt-tools svg,.dt-cols svg,.dt-export svg,.dt-grp svg{width:15px;height:15px}
.dt-pager-btn svg{width:14px;height:14px}
.wv-fpill svg,.wv-fcount svg,.sv-add svg,.seg-btn svg{width:13px;height:13px}
.wv-pop-row svg{width:14px;height:14px}
.gear-row svg{width:14px;height:14px}
.modal-head svg,.dw9-head svg{width:16px;height:16px}
.back-btn svg,.detail-back svg{width:14px;height:14px}
.detail-actions svg{width:14px;height:14px}
.fc-v svg,.fc-l svg{width:14px;height:14px}
.learn-chip svg{width:12px;height:12px}
.set-row svg,.rail-item svg,.int-card svg,.doc-ico svg{width:15px;height:15px}
.mc-item svg{width:14px;height:14px}
.rep-card svg{width:18px;height:18px}
.toast svg{width:16px;height:16px}
.avatar svg{width:14px;height:14px}
/* empty-state spot illustrations keep their own large box */
.es-ico>svg,.empty-ic>svg{width:20px;height:20px}
/* charts draw their own viewBox-sized canvases */
.chart svg,.spark,.lchart svg,.donut svg,.gauge svg,.heat svg{width:100%;height:auto}

/* ============================================================
   LEGACY CONTAINER GUARD — the old sheet made .nav a column flex
   container, so nav items with height:34px were being flex-shrunk to
   their text height (20.9px). The design's .nav is a plain block that
   scrolls. Same guard for other containers whose children the design
   sizes explicitly.
   ============================================================ */
.nav{display:block}
.nav-kids,.nav-foot{display:block}
.nav-sec .nav-kids{display:none}
.nav-sec.open .nav-kids{display:block}
.nav-item,.nav-grp{flex:none}
.dt-tools,.dt-pager{flex:none}
.dw-body>*{min-width:0}

/* ============================================================
   LEGACY COMPONENT BRIDGE — maps the app's remaining runtime class
   names onto the design system's visual rules, so screens that have
   not been re-authored still render in the design language instead of
   falling back to the stripped legacy sheet.
   Each entry mirrors an existing design rule; nothing new is invented.
   ============================================================ */

/* history/related-record rows (histRow) == design .li-row */
.hist-list{display:flex;flex-direction:column}
.hist-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-soft);align-items:flex-start;font-size:13.5px}
.hist-row:last-child{border-bottom:0}
.hist-row .hr-ic{width:30px;height:30px;border-radius:6px;background:var(--surface-3);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;flex:none}
.hist-row .hr-ic svg{width:15px;height:15px}
.hist-row .hr-t,.hist-row b{font-weight:600;font-size:13.5px}
.hist-row .hr-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.hist-row .hr-end{margin-left:auto;text-align:right;font-weight:600;white-space:nowrap}

/* hint / helper copy == design .card-note */
.dw-hint,.card-note,.form-hint,.detail-hint{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0;padding:12px 16px}
.dw-body .dw-hint{padding:0}

/* card shells that are not .dw / .wo-card */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r)}
.card-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border-soft)}
.card-head h3{margin:0;font-size:14px;font-weight:650}
.card-link{margin-left:auto;font-size:12.5px;color:var(--text-2);text-decoration:none;cursor:pointer;
  background:none;border:0;display:inline-flex;align-items:center;gap:4px}
.card-link:hover{color:var(--text)}

/* status dots used by legacy rows == design .st i */
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;display:inline-block}
.dot-ok{background:var(--ok)}.dot-warn{background:var(--warn)}.dot-danger{background:var(--danger)}
.dot-info{background:var(--info)}.dot-muted{background:var(--muted)}

/* detail grids used by modals == design .fc-row */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px}
.detail-cell,.detail-notes{padding:10px 0;border-bottom:1px solid var(--border-soft);min-width:0}
.detail-l{font-size:12px;color:var(--muted);margin-bottom:3px}
.detail-v{font-size:13.5px;color:var(--text)}
.detail-link{color:var(--text);text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:rgba(178,171,160,.55);text-underline-offset:3px;font-weight:500;cursor:pointer}

/* legacy KPI tiles == design .kpi-tile */
.kpi{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:16px}
.kpi-l,.kpi-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kpi-v,.kpi-value{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:4px}

/* toolbar chips the design styles as .wv-fpill */
.filter-seg .seg-btn,.seg-btn{cursor:pointer}
.list-search input{background:none;border:0;color:var(--text);font-size:13px;outline:none;width:100%}

/* empty state == design .empty-state */
.activity-empty,.dtable-empty{padding:28px 16px;text-align:center;font-size:13px;color:var(--muted)}

/* popovers/menus == design .wv-pop */
.top-pop,.am-menu,.col-menu,.wv-pop{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow-pop);z-index:var(--z-drop);overflow:hidden}
.top-pop-row,.am-item,.gear-row,.wv-pop-row{display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 12px;background:none;border:0;color:var(--text);font-size:13px;text-align:left;cursor:pointer}
.top-pop-row:hover,.am-item:hover,.gear-row:hover,.wv-pop-row:hover{background:var(--surface-3)}
.wv-pop-row.danger,.am-item.danger{color:var(--danger)}
.am-sep,.wv-pop-div{height:1px;background:var(--border-soft);margin:4px 0}

/* right-hand drawer already matches .dw9; toast == design .toast */
.toast{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-pop);color:var(--text);font-size:13px}
/* legacy .input alias -> design .field, incl. textareas built inline */
.input,textarea.input,textarea.cmt-input9{width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);font-size:13.5px;outline:none}
input.input,select.input{height:34px;padding:0 12px}
textarea.input{min-height:76px;padding:9px 12px;resize:vertical}
.input:focus,.field:focus{border-color:var(--accent);box-shadow:var(--focus)}

/* ============================================================
   SETTINGS SHELL BRIDGE — the app's settings rail (.setx-*) adopts the
   design's settings-shell rules (.stg-side / .stg-nav / .stg-grp /
   .rail-item), so the settings suite reads as one product with the rest.
   ============================================================ */
.settings-page2{display:grid;grid-template-columns:250px 1fr;gap:0;align-items:start;padding:0;max-width:none}
.setx-rail-top{grid-column:1;padding:14px 12px 6px;background:var(--surface);border-right:1px solid var(--border-soft)}
.setx-back{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--text-2);
  font-size:12.5px;cursor:pointer;padding:4px 6px;border-radius:var(--r-sm)}
.setx-back:hover{background:var(--surface-2);color:var(--text)}
.setx-back-ic svg{width:14px;height:14px}
.setx-org{display:flex;align-items:center;gap:9px;padding:10px 6px 4px;font-size:13px;font-weight:650}
.seg.setx-tabs{grid-column:1;display:flex;flex-direction:column;gap:1px;background:var(--surface);
  border-right:1px solid var(--border-soft);padding:0 10px 24px;overflow-y:auto;max-height:calc(100vh - 120px)}
.setx-search{margin:6px 4px 10px;height:32px;padding:0 10px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:12.5px;outline:none}
.setx-group9{padding:16px 8px 5px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.setx-tabs .seg-btn{display:flex;align-items:center;gap:9px;width:100%;height:32px;padding:0 10px;
  border:0;background:none;border-radius:var(--r-sm);color:var(--text);font-size:13px;
  text-align:left;cursor:pointer;flex:none}
.setx-tabs .seg-btn:hover{background:var(--surface-2)}
.setx-tabs .seg-btn.active{background:var(--surface-3);color:#FFF;font-weight:600}
.setx-nav-ic{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--text-2)}
.setx-nav-ic svg{width:15px;height:15px}
.setx-tabs .seg-btn.active .setx-nav-ic{color:#FFF}
/* settings body column */
.settings-page2>.page-head,.settings-page2>.setx-body,.settings-page2>.set-body{grid-column:2;padding:20px 24px 48px}
.settings-page2>*:not(.setx-rail-top):not(.seg.setx-tabs){grid-column:2}
/* setting rows adopt the design's .set-row */
.set-list,.pref-list{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.field-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.field-row:last-child{border-bottom:0}
.field-row>label,.field-row .fr-l{min-width:0;flex:1}
.field-row .fr-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
@media (max-width:1023px){
  .settings-page2{grid-template-columns:1fr}
  .settings-page2>.setx-rail-top,.seg.setx-tabs{grid-column:1;border-right:0;border-bottom:1px solid var(--border-soft)}
  .seg.setx-tabs{flex-direction:row;flex-wrap:wrap;max-height:none}
  .setx-tabs .seg-btn{flex:none;white-space:nowrap}
  .setx-group9{display:none}
  .settings-page2>*:not(.setx-rail-top):not(.seg.setx-tabs){grid-column:1}
}

/* ============================================================
   CONTENT SURFACE + CHART BRIDGE
   1. The scroll container carries BOTH id="content" and class="content";
      legacy `.content{background:#FAFAFA}` was painting the whole app
      white. The id selector wins, so pin it to --bg.
   2. Our chart nodes use legacy names (.chart-bar, .hbar-fill, .donut-*).
      Map them onto the design's chart language: vertical bars are
      --surface-3 with the peak bar in --accent (design .cbar/.cbar.hi),
      horizontal fills are --accent (design .hb-fill), legend swatches 9px.
   ============================================================ */
#content{background:var(--bg)}

/* vertical bars - our DOM is .chart-bars > .chart-col > (.chart-bar + .chart-lbl),
   where .chart-bar carries an inline height:%. The column owns the full height
   and bottom-aligns its bar, exactly like the design's .chart-bars > .cbar. */
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:8px}
.chart-col{flex:1;min-width:6px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.chart-bar{width:100%;flex:none;background:var(--surface-3);border-radius:3px 3px 0 0;
  transition:filter var(--dur-fast),background var(--dur-fast)}
.chart-col:hover .chart-bar,.cbar:hover{filter:brightness(1.4)}
.chart-bar.hi,.chart-bar.max,.cbar.hi{background:var(--tab-active)}
.chart-lbl{flex:none;font-size:10.5px;color:var(--muted);text-align:center;white-space:nowrap}

/* horizontal ranked bars */
.hbars{display:flex;flex-direction:column;gap:10px}
.hbar-row,.hbar{display:grid;grid-template-columns:minmax(48px,150px) minmax(24px,1fr) auto;align-items:center;gap:12px;font-size:12.5px}
.hbar-label,.hb-l{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track,.hb-track{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.hbar-fill,.hb-fill{height:100%;border-radius:5px;background:var(--tab-active);transition:filter var(--dur-fast)}
.hbar-row:hover .hbar-fill,.hbar:hover .hb-fill{filter:brightness(1.3)}
.hbar-val,.hb-v{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}

/* donut + legend */
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut-svg{width:132px;height:132px;flex:none}
.donut-center,.donut-c{display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-n,.dc-n{font-size:24px;font-weight:700}
.donut-l,.dc-l{font-size:11px;color:var(--muted)}
.legend,.chart-legend{display:flex;flex-direction:column;gap:8px;min-width:0}
.legend-i,.legend-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);white-space:nowrap}
.legend-i i,.legend-row i,.legend-dot{width:9px;height:9px;border-radius:3px;flex:none}
.legend-i b,.legend-row b{color:var(--text);margin-left:auto;padding-left:12px}

/* line/area charts + shared tooltip */
.chart{position:relative;min-height:120px}
.chart-tip{position:absolute;background:var(--surface-3);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 10px;font-size:12px;box-shadow:var(--shadow-pop);
  pointer-events:none;white-space:nowrap;z-index:2}
.chart-x,.chart-axis-x{display:flex;gap:6px;margin-top:6px;font-size:10.5px;color:var(--muted)}
.chart-y,.chart-axis-y{font-size:10.5px;color:var(--muted)}

/* our donut node names -> design donut language */
.donut{position:relative;width:132px;height:132px;flex:none}
.donut-svg,.donut-svg svg{width:132px;height:132px}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;z-index:1;pointer-events:none}
.donut-val{font-size:24px;font-weight:700}
.donut-lbl{font-size:11px;color:var(--muted)}
.donut-legend{display:flex;flex-direction:column;gap:8px;min-width:0}
.donut-leg-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);white-space:nowrap}
.donut-leg-row i,.donut-leg-row .dot{width:9px;height:9px;border-radius:3px;flex:none}
.donut-leg-row b{color:var(--text);margin-left:auto;padding-left:12px}
.donut-seg{transition:filter var(--dur-fast)}
.donut-seg:hover{filter:brightness(1.3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* topbar search: our magnifier and scope chevron sit inside wrapper spans, so
   they need sizing on the descendant svg (the design used inline attributes). */
.tb-search>span{display:flex;align-items:center;flex:none;padding-left:12px;color:var(--muted)}
.tb-search span svg{width:15px;height:15px}
.tb-scope{gap:4px}
.tb-scope-tx{font-size:12.5px}
.tb-scope-chev{display:flex;align-items:center;flex:none}
.tb-scope-chev svg{width:12px;height:12px}
.tb-search input{flex:1;min-width:0;height:100%;padding:0 12px;background:none;border:0;
  color:var(--text);font-size:13px;outline:none}
.tb-search input::placeholder{color:var(--placeholder)}

/* nav footer: plan line + Settings + Help must all fit inside the design's
   150px cap (the Help row was being clipped). */
.nav-foot{max-height:none;padding:6px 8px 8px}
.nav-foot .nav-item{height:32px;margin:0}
.plan-line{padding:2px 8px 6px;gap:6px;flex-wrap:nowrap;overflow:hidden}
.plan-line .btn-upgrade{margin-left:auto;height:28px;padding:0 10px;font-size:11.5px;flex:none}
.nav-help{width:100%;background:none;border:0;text-align:left;cursor:pointer}

/* card titles stay on one line like the design (our cards also carry a widget
   menu, which was forcing two-line wraps) */
.card-head h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.card-head{flex-wrap:nowrap}
.dw .card-head .icon-btn,.dw .card-head .dw-menu{flex:none}

/* bars fill the full column width, like the design system's .cbar */
.chart-bar{width:100%;max-width:none;min-width:0}
/* a zero-value month should read as an empty slot, not a 1px sliver */
.chart-bar[style*="height: 1%"],.chart-bar[style*="height:1%"]{min-height:2px}

/* donut legend rows are plain in the design - no filled pill */
.donut-leg-row{background:none;border:0;padding:0}

/* list toolbar: our iconEl() wrappers need explicit svg sizing (the design's
   static markup carried inline width/height on every glyph) */
.list-search svg{width:15px;height:15px;flex:none;color:var(--muted)}
.list-search input{flex:1;min-width:0;height:100%;background:none;border:0;color:var(--text);
  font-size:13px;outline:none;padding:0}
.list-search input::placeholder{color:var(--placeholder)}
.wv-fpill svg,.wv-fcount svg{width:12px;height:12px;flex:none;color:var(--muted)}
.wv-fpill .fp-arrow,.wv-fpill .wv-fpill-chev{display:flex;align-items:center}
.sv-add svg{width:12px;height:12px}

/* status chips in table cells == design .st */
.st{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;white-space:nowrap}
.st i{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.st.ok i{background:var(--ok)}.st.warn i{background:var(--warn)}
.st.danger i{background:var(--danger)}.st.info i{background:var(--info)}
.st.muted i{background:var(--muted)}

/* status badge keeps a dot like the reference status pills */
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.9}
.badge.muted .badge-dot{opacity:.7}
/* filter pill chevron points down like the design (our chevron glyph is a
   right-facing arrow reused across the app) */
.wv-fpill-chev{display:flex;align-items:center;transform:rotate(90deg)}
.wv-fpill-chev svg{width:12px;height:12px}
/* every "opens a menu below" chevron points DOWN (our chevron glyph is drawn
   right-facing and reused for both directions) */
.dt-grp svg,.wv-fcount svg,.tb-scope-chev svg,.dash-chev svg,.sv-tab svg,
.status-chev svg,.wo-status-pill svg,.dash-scope-wrap svg{transform:rotate(90deg)}
.nav-caret svg{transform:none}
.nav-sec.open>.nav-grp .nav-caret svg{transform:rotate(90deg)}

/* ============================================================
   KPI STRIPS — our modules render .maint-kpis > .maint-kpi (strong + span).
   The design's equivalent is .kpi-strip > .kpi-tile (.kpi-label/.kpi-value):
   one bordered surface bar, uppercase caption, big value. The legacy version
   was painting a WHITE card.
   ============================================================ */
.maint-kpis,.fuel-kpis,.kpi-row,.stat-strip{display:flex;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--r);margin:0 0 12px;overflow-x:auto;gap:0}
.maint-kpi,.kpi-cell{flex:1 1 0;min-width:150px;padding:14px 18px;
  border-right:1px solid var(--border-soft);background:none;border-radius:0}
.maint-kpi:last-child,.kpi-cell:last-child{border-right:0}
.maint-kpi strong,.kpi-cell strong{display:block;font-size:20px;font-weight:650;
  letter-spacing:-.02em;white-space:nowrap;color:var(--text);order:2}
.maint-kpi span,.kpi-cell span{display:block;font-size:12px;color:var(--muted);
  white-space:nowrap;margin-bottom:6px;order:1}
.maint-kpi{display:flex;flex-direction:column}
.maint-kpi.ok strong{color:var(--ok)}
.maint-kpi.warn strong{color:var(--warn)}
.maint-kpi.danger strong{color:var(--danger)}
.maint-kpi.neutral strong{color:var(--text)}
/* the legacy sheet also rotates some chevrons via the standalone `rotate`
   property, which COMPOSES with transform and left them pointing up/left.
   Zero the legacy rotation and set direction once, here. */
.dt-grp svg,.wv-fcount svg,.wv-fpill-chev svg,.tb-scope-chev svg,.dash-chev svg,
.wo-status-pill svg,.status-chev svg,.dash-scope-wrap svg,.sv-tab svg,
.nav-caret svg,.setx-back-ic svg{rotate:0deg}
.dt-grp svg,.wv-fcount svg,.wv-fpill-chev svg,.tb-scope-chev svg,.dash-chev svg,
.wo-status-pill svg,.status-chev svg,.dash-scope-wrap svg{transform:rotate(90deg)}
.nav-caret svg{transform:none}
.nav-sec.open>.nav-grp .nav-caret svg{transform:rotate(90deg)}
.setx-back-ic svg{transform:none}

/* ============================================================
   BATCH FIX 1 — layout defects reported from the live app
   ============================================================ */

/* (a) "the first box is always above/bigger than the rest": grid children were
   sizing to their own content, so the tallest card in a row left gaps under its
   neighbours. Every card grid now stretches its children to a common height. */
.dash-grid,.cards-grid,.rep-grid,.int-grid,.doc-pins,.idx-cats3{align-items:stretch}
.dash-grid>*,.cards-grid>*,.rep-grid>*,.int-grid>*,.doc-pins>*,.idx-cats3>*{height:100%;min-width:0}
.card.dw,.cards-grid>.card{display:flex;flex-direction:column}
.card.dw>.dw-body,.cards-grid>.card>*:last-child{flex:1;min-height:0}

/* (b) page toolbars: one row, its OWN horizontal scroll, pinned above the list
   (reported: "the filters bar should be at the top of every UI with its own
   scroll if needed"). Scrollbar is hidden but the row still scrolls. */
.list-tools{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg);
  padding:8px 0;margin-bottom:12px;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
  scrollbar-width:none;-ms-overflow-style:none}
.list-tools::-webkit-scrollbar{height:0}
.saved-views{position:sticky;top:0;z-index:calc(var(--z-sticky) + 1);background:var(--bg);
  overflow-x:auto;scrollbar-width:none}
.saved-views::-webkit-scrollbar{height:0}
.list-tools>*{flex:none}

/* (c) table bar: count/pager left-to-right and the tool cluster perfectly
   aligned on one baseline (reported misalignment of group/gear/download). */
.dt-bar{display:flex;align-items:center;gap:10px;min-height:44px;height:auto;
  padding:6px 10px 6px 16px;flex-wrap:wrap}
.dt-bar>.dt-pager{margin-left:auto}
.dt-tools{display:flex;align-items:center;gap:6px}
.dt-tools>*{height:28px;flex:none;align-self:center}
.dt-tools .icon-btn,.dt-cols,.dt-export,.dt-grp{height:28px;min-height:28px}
.dt-tools .icon-btn svg{width:15px;height:15px}

/* (d) dashboard header controls get real button chrome (reported: "+ Add
   Widgets should have a button background like the ... and the full screen
   button", and the fullscreen button had none). */
.page-actions .dash-fs,.page-actions .icon-btn,.dash-add-btn{background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);
  height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:0 12px;font-size:13px;cursor:pointer}
.page-actions .icon-btn{padding:0;width:32px}
.page-actions .dash-fs:hover,.page-actions .icon-btn:hover,.dash-add-btn:hover{background:var(--surface-2)}

/* (e) form pages at narrow widths: labels and controls were overlapping
   because legacy absolute positioning survived. Force a plain stacked flow. */
.form-row{position:relative;display:block}
.form-row-label{position:static;display:block}
.form-row .field,.form-row input,.form-row select,.form-row textarea{position:static;width:100%}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:760px){.form-grid{grid-template-columns:1fr}}
.form-card-body{overflow:visible}

/* (f) live map: the rail was still WHITE. It is a design surface. */
.cc-wrap,.cc-map,.cc-rail,.cc-map-side,.cc-ulist,.cc-plist{background:var(--surface)}
.cc-rail{background:var(--surface);border-right:1px solid var(--border-soft);color:var(--text)}
.cc-map-side{background:none;border:0;color:var(--text)}
.cc-ulist,.cc-plist{background:var(--surface)}
.ccu-row,.cc-prow{background:var(--surface);border-bottom:1px solid var(--border-soft);color:var(--text)}
.ccu-row:hover,.cc-prow:hover{background:var(--surface-2)}
.ccu-addr,.ccu-drv{color:var(--text-2)}
.ccu-chip{background:var(--surface-3);color:var(--text-2);border-radius:999px;padding:1px 7px;font-size:11px}
.ccu-chip.ccu-moving{background:var(--ok-soft);color:var(--ok)}
.ccu-chip.ccu-park{background:var(--warn-soft);color:var(--warn)}
.cc-map-toolbar,.cc-map-search,.cc-filters-drop,.cc-legend-pop,.cc-map-side-btn{
  background:var(--surface);border:1px solid var(--border);color:var(--text)}
.cc-map-search-inp{background:none;border:0;color:var(--text);outline:none}
.cc-map-search-inp::placeholder{color:var(--placeholder)}

/* (g) popovers are body-anchored now: give them the design's surface + shadow
   and never let them clip inside a card. */
.top-pop,.wv-pop,.dw-pop,.col-menu{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow-pop);min-width:200px;padding:4px;
  color:var(--text)}
.card,.card.dw,.dtable-wrap,.wo-card{overflow:visible}
.dtable{overflow-x:auto}

/* ============================================================
   ADD WIDGETS dialog — reported: the "+ Add Widgets" title should read as a
   real header (big, plus BESIDE the words), and scrolling the widget grid must
   not drag the category rail with it. Two independent scroll areas.
   ============================================================ */
.modal-head .modal-title{font-size:20px;font-weight:700;letter-spacing:-.01em;gap:10px}
.modal-head .modal-title-ic{display:flex;align-items:center}
.modal-head .modal-title-ic svg{width:22px;height:22px}
.aw-modal{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:stretch;
  min-height:0;height:min(62vh,560px);flex-direction:row}
.aw-rail{width:auto;min-height:0;overflow-y:auto;padding-right:4px;
  border-right:1px solid var(--border-soft);scrollbar-width:thin}
.aw-right{min-width:0;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.aw-right-head{position:sticky;top:0;background:var(--surface-2);z-index:2;
  display:flex;align-items:center;gap:9px;padding:0 0 10px}
.aw-right-head h3{margin:0;font-size:15px;font-weight:650}
.aw-cat{display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 10px;
  border:0;background:none;border-radius:var(--r-sm);color:var(--text);font-size:13px;
  text-align:left;cursor:pointer;flex:none}
.aw-cat:hover{background:var(--surface-3)}
.aw-cat.active{background:var(--surface-3);font-weight:600}
.aw-cat svg{width:15px;height:15px}
.aw-cat-count{margin-left:auto;min-width:20px;height:19px;padding:0 6px;border-radius:10px;
  background:var(--border);font-size:10.5px;font-weight:600;display:inline-flex;
  align-items:center;justify-content:center;color:var(--text-2)}
.aw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:0}
.aw-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);
  padding:12px;text-align:left;cursor:pointer;color:var(--text);display:flex;
  flex-direction:column;gap:8px;min-width:0}
.aw-card:hover:not(:disabled){border-color:var(--border);background:var(--surface-2)}
.aw-card:disabled{opacity:.62;cursor:default}
.aw-card-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.aw-card-tick{color:var(--ok);display:flex}
.aw-card-tick svg{width:13px;height:13px}
.aw-card-prev{pointer-events:none;transform:scale(.86);transform-origin:top left;
  width:116%;max-height:150px;overflow:hidden}
@media (max-width:760px){
  .aw-modal{grid-template-columns:1fr;height:auto}
  .aw-rail{flex-direction:row;flex-wrap:wrap;border-right:0;
    border-bottom:1px solid var(--border-soft);padding-bottom:8px;overflow:visible}
  .aw-cat{width:auto;flex:none}
}
/* background refresh: suppress entry animations so a silent data sweep does not
   look like a page reload */
body.mv-soft .card.dw,body.mv-soft .wo-card,body.mv-soft .chart-bar,body.mv-soft .cbar,
body.mv-soft .int-card,body.mv-soft .idx-cat-card,body.mv-soft .lm-legend,body.mv-soft .lm-card,
body.mv-soft .donut-seg,body.mv-soft .idx-hero{animation:none!important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ============================================================
   CHARTS — reference parity (images 1-6): chunky value bars with an axis and
   gridlines, a floating dark tooltip that follows the cursor, hovered bar
   highlighted, pie slices dim their siblings on hover, legend hover mirrors it.
   Colour stays inside the token set: --info for value series (matches the
   reference's single-hue bars), semantic tones for categorical charts.
   ============================================================ */
.chart.chart-axed{display:flex;gap:10px;align-items:stretch;min-height:150px;overflow:visible}
.chart-yaxis{display:flex;flex-direction:column;justify-content:space-between;
  font-size:10.5px;color:var(--muted);text-align:right;flex:none;padding-bottom:18px;
  font-variant-numeric:tabular-nums}
.chart-plot{position:relative;flex:1;min-width:0;overflow:visible}
.chart-grid{position:absolute;inset:0 0 18px 0;display:flex;flex-direction:column;
  justify-content:space-between;pointer-events:none}
.chart-grid i{display:block;height:1px;background:var(--border-soft)}
.chart-bars{display:flex;align-items:flex-end;gap:8px;height:130px;padding-top:8px;position:relative}
.chart-col{flex:1;min-width:10px;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;gap:6px;cursor:default}
/* Reference dashboards paint cost bars in the BRAND color (the convention green,
   ours orange) - not informational blue. */
.chart-bar{width:100%;max-width:44px;margin:0 auto;flex:none;background:var(--tab-active);
  border-radius:3px 3px 0 0;transition:filter var(--dur-fast),background var(--dur-fast)}
.chart-bar.alt{background:var(--warn)}
.chart-col:hover .chart-bar{filter:brightness(1.25)}
.chart-lbl{flex:none;font-size:10.5px;color:var(--muted);text-align:center;
  white-space:nowrap;height:14px;overflow:hidden}
/* floating tooltip - never clipped by the card (reported clipping) */
.chart-tip{position:absolute;display:none;background:#16181B;border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 10px;font-size:12px;box-shadow:var(--shadow-pop);
  pointer-events:none;white-space:nowrap;z-index:40;transform:translate(-50%,-100%);
  flex-direction:column;gap:2px;color:#fff}
.chart-tip.on{display:flex}
.chart-tip b{font-size:12.5px;font-weight:650}
.chart-tip span{color:var(--text-2)}
.donut-tip{transform:none}
.dw-body,.chart,.chart-plot,.card.dw{overflow:visible}
/* legend row highlight mirrors the hovered slice */
.donut-leg-row,.legend-i{border-radius:6px;padding:2px 4px;transition:background var(--dur-fast);cursor:default}
.donut-leg-row.on,.legend-i.on{background:var(--surface-3)}
.donut-seg{transition:opacity var(--dur-fast),stroke-width var(--dur-fast)}

/* remaining light surfaces on the live map (row cards, rail toggle, panels) */
.ccu,.ccu-stale,.cc-rail-tgl,.cc-veh-panel,.cc-panel,.cc-card,.cc-info,.cc-detblock,
.cc-map-zoomgrp,.cc-map-side-btn,.cc-legend,.cc-legend-pop,.cc-filters-drop,
.cc-sheet,.cc-bottom,.cc-vp{background:var(--surface);color:var(--text);
  border-color:var(--border)}
.ccu.ccu-stale{opacity:.72}
.cc-rail-tgl{border:1px solid var(--border);color:var(--text-2)}
.cc-rail-tgl:hover{background:var(--surface-2);color:var(--text)}
.cc-map-zoomgrp button,.cc-map-side-btn{background:var(--surface);color:var(--text);
  border:1px solid var(--border)}
.cc-map-zoomgrp button:hover,.cc-map-side-btn:hover{background:var(--surface-2)}
.cc-dot-offline{background:var(--muted)}
.cc-legend-dot.cc-lg-off{background:var(--muted)}
/* the vehicle card follows the design's .lm-card anatomy */
.cc-veh-panel,.cc-vp{border:1px solid var(--border);border-radius:var(--r);
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.cc-vp-head,.cc-veh-head{display:flex;align-items:center;gap:10px;padding:13px 14px;
  border-bottom:1px solid var(--border-soft)}
.cc-vp-kv,.cc-veh-kv{display:flex;justify-content:space-between;gap:12px;
  padding:6.5px 14px;font-size:12.5px;border-bottom:1px solid var(--border-soft)}
.cc-vp-kv .k,.cc-veh-kv .k{color:var(--muted)}
.cc-vp-acts,.cc-veh-acts{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border-soft)}
.cc-vp-acts .btn,.cc-veh-acts .btn{flex:1;justify-content:center}
/* any stray unclassed light panel inside the map shell */
.cc-map [style*="background:#fff"],.cc-map [style*="background: #fff"]{background:var(--surface)}
/* notification rows in the bell popover are real buttons */
button.top-pop-note{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  background:none;border:0;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;color:var(--text)}
button.top-pop-note:hover{background:var(--surface-3)}
.top-pop-note b{font-size:12.5px;font-weight:600}
.top-pop-note span{font-size:12px;color:var(--text-2)}
.top-pop-note small{font-size:11px;color:var(--muted)}
.top-pop-note.unread{position:relative}
.top-pop-note.unread::before{content:"";position:absolute;left:4px;top:14px;width:6px;height:6px;
  border-radius:50%;background:var(--info)}
.top-pop-note.unread{padding-left:18px}
.top-pop-all{justify-content:center;border-top:1px solid var(--border-soft);
  margin-top:4px;color:var(--text-2);font-weight:600}
.top-pop-wide{min-width:320px;max-width:min(380px,92vw)}

/* ============================================================
   FORM FIELD WRAPPER — `.field` is the CONTROL in the design system, so our
   label wrapper is `.field-wrap`. This is the stacked label/control/hint/error
   block used by every modal and the vehicle editor.
   ============================================================ */
.field-wrap{display:block;margin-bottom:14px;min-width:0}
.field-wrap>.field-label{display:block;font-size:12.5px;font-weight:600;
  color:var(--text-2);margin-bottom:6px}
.field-wrap>.field-hint{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.field-wrap>.field-error{display:none;font-size:12px;color:var(--danger);margin-top:5px}
.field-wrap>.field-error.on,.field-wrap>.field-error:not(:empty){display:block}
.field-wrap input,.field-wrap select,.field-wrap textarea{width:100%}
.field-wrap.error input,.field-wrap.error select,.field-wrap.error textarea,
input.field.error,select.field.error{border-color:var(--danger)}
/* an EMPTY error summary must not paint a red bar (reported on Edit Vehicle) */
.form-error{display:none}
.form-error:not(:empty){display:block;margin:12px 0;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--danger-soft);border:1px solid rgba(239,68,68,.4);color:var(--danger);font-size:13px}
/* two-up field grids inside modals/editors */
.form-grid>.field-wrap{margin-bottom:14px}
.vf-grid,.veh-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:760px){.vf-grid,.veh-grid{grid-template-columns:1fr}}
/* vehicle editor: as a full PAGE it should use the page's own scroll, not a
   58vh inner window that clipped the form (reported clipping) */
.veh-editpage .veh-modal-panewrap,.veh-modal-panewrap.veh-editpag,
.vpage-veh-edit .veh-modal-panewrap{max-height:none;height:auto;overflow:visible}
.vpage-veh-edit{padding-bottom:64px}
.vpage-veh-edit .veh-modal-body,.vpage-veh-edit .veh-modal-wrap{align-items:flex-start}
/* table bar is ONE line: count/pager pushed right, then the tool cluster -
   wrapping was putting the tools on a row of their own (misalignment report) */
.dt-bar{flex-wrap:nowrap;height:44px;min-height:44px;padding:0 10px 0 16px;overflow-x:auto;
  scrollbar-width:none}
.dt-bar::-webkit-scrollbar{height:0}
.dt-bar>.dt-pager{margin-left:auto;flex:none}
.dt-bar>.dt-tools{flex:none;margin-left:6px}
.dt-pager,.dt-pager-btns,.dt-pager-btn{align-self:center}
/* the tools cluster no longer needs the negative pull that lifted it into the
   old hoisted position - it lives in the table bar now */
.dt-tools{margin:0 0 0 6px;align-self:center}
.dt-bar .dt-tools{margin-top:0}
/* ...and the same legacy rule disabled pointer events, which made Group / gear
   / export DEAD BUTTONS. They are real controls. */
.dt-tools,.dt-tools>*{pointer-events:auto}
/* the expanded vehicle block under a map row (cc-det*) was still light */
.cc-det,.cc-det-cell,.cc-det-row,.cc-det-head,.cc-det-grid{background:var(--surface-2);
  color:var(--text);border-color:var(--border-soft)}
.cc-det{border:1px solid var(--border);border-radius:var(--r);margin:0 10px 10px;overflow:hidden}
.cc-det-cell{border-bottom:1px solid var(--border-soft);padding:8px 12px;font-size:12.5px}
.cc-det-cell b,.cc-det-cell .v{color:var(--text)}
.cc-det-cell .k,.cc-det-cell span:first-child{color:var(--muted)}
.cc-det-cell:last-child{border-bottom:0}
/* any inline white left inside the map shell */
.cc-wrap [style*="#fff"],.cc-wrap [style*="#FFF"],.cc-wrap [style*="white"]{background:var(--surface)}
/* Map marker name plates.
   THIS USED TO SET color:var(--text)!important AND THE PLATE WAS INVISIBLE.
   The map canvas is dark-styled in BOTH themes - like the sidebar and topbar,
   it is chrome, not a themed surface - so in light mode --text resolves to
   near-black and the plate was black text on a black map. The !important also
   beat app.css's own `.fm-name-dark{color:#fff}` and the colour Google sets
   inline on the label. Reported as "you can't see the name under the icon".
   The plate is white with a hard shadow, in both themes, because the surface
   underneath it is always dark. */
.fm-name-dark,.fm-name-light{color:#FFFFFF!important;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 7px rgba(0,0,0,.75);
  font-weight:700;font-size:11px;letter-spacing:.01em}
.gm-style .fm-name-dark,.gm-style .fm-name-light{background:transparent}
/* pillMenu wrapper must not re-introduce segmented chrome */
.veh-pill{display:inline-flex;flex:none;background:none;border:0;padding:0}
.wv-fpill.on{background:var(--surface-3);border-color:var(--border);color:var(--text);font-weight:600}
.pop-caret{display:flex;align-items:center}
/* the caret glyph already points down; the old 90deg turn made it point LEFT */
.pop-caret svg{width:12px;height:12px;rotate:0deg;transform:none}

/* ============================================================
   FULLSCREEN OVERLAY HOST — while an element is fullscreen the browser paints
   only that subtree, so modals/menus/drawers/toasts are mounted inside it.
   ============================================================ */
.fs-overlay-host{position:absolute;inset:0;pointer-events:none;z-index:900}
.fs-overlay-host>*{pointer-events:auto}
.fs-overlay-host .overlay{position:absolute}
.fs-overlay-host .dw9-host{position:absolute}

/* Entry animations run only on the first paint after a real app start.
   `.mv-noanim` is added ~1s in and never removed, so navigating between pages
   or a background data refresh never replays them (reported: charts and cards
   re-animating like a page reload). */
body.mv-noanim .card.dw,body.mv-noanim .wo-card,body.mv-noanim .chart-bar,
body.mv-noanim .cbar,body.mv-noanim .int-card,body.mv-noanim .idx-cat-card,
body.mv-noanim .lm-legend,body.mv-noanim .lm-card,body.mv-noanim .donut-seg,
body.mv-noanim .idx-hero,body.mv-noanim .form-card,body.mv-noanim .dtr{animation:none}
/* legacy empty-state class names inherit the single design block */
.empty,.empty-first,.empty-filtered,.empty-all-clear{display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:64px 24px;text-align:center}
.empty-ic,.es-ico{width:48px;height:48px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;
  color:var(--muted);margin-bottom:8px;flex:none}
.empty-ic svg,.es-ico svg{width:20px;height:20px}
.es-ico.ok{color:var(--ok)}
.empty-title,.es-title{font-size:14px;font-weight:600;color:var(--text)}
.empty-sub,.empty-why,.es-sub{font-size:13px;color:var(--muted);max-width:420px;line-height:1.5}
.dtable-empty,.activity-empty{padding:48px 24px;text-align:center;font-size:13px;color:var(--muted)}

/* ============================================================
   LIVE MAP DETAIL TAKEOVER (.ccp) — clicking a vehicle slides this over the
   Nearby panel left-to-right and shows that vehicle's real numbers, mirroring
   the reference layout: identity + "..."/Add, then Alerts / Last Known
   Location / Details cards. Back returns to Nearby.
   ============================================================ */
.cc-rail,.cc-map-side{position:relative;overflow:hidden}
.ccp{position:absolute;inset:0;z-index:6;background:var(--surface);
  display:flex;flex-direction:column;min-height:0;
  transform:translateX(-100%);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.ccp.in{transform:none}
.ccp-head{flex:none;padding:12px 14px 10px;border-bottom:1px solid var(--border-soft)}
.ccp-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  color:var(--text-2);font-size:12.5px;cursor:pointer;padding:2px 4px;border-radius:6px;margin-bottom:10px}
.ccp-back:hover{background:var(--surface-2);color:var(--text)}
.ccp-back svg{width:14px;height:14px}
.ccp-id{display:flex;align-items:center;gap:11px;min-width:0}
.ccp-thumb{width:44px;height:44px;border-radius:10px;background:var(--surface-3);
  border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.ccp-thumb svg{width:30px;height:30px}
.ccp-name{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccp-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccp-acts{display:flex;align-items:center;gap:6px;margin-top:10px}
.ccp-acts .btn{height:28px;font-size:12.5px}
.ccp-body{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 22px;
  display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.ccp-card{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.ccp-ct{padding:10px 13px;border-bottom:1px solid var(--border-soft);font-size:13px;font-weight:650}
.ccp-cb{padding:4px 0}
.ccp-arow{display:flex;align-items:center;gap:9px;width:100%;padding:8px 13px;background:none;
  border:0;color:var(--text);font-size:13px;text-align:left;cursor:pointer}
.ccp-arow:hover{background:var(--surface-3)}
.ccp-aic{display:flex;color:var(--muted);flex:none}
.ccp-aic svg{width:14px;height:14px}
.ccp-al{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccp-an{margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:10px;
  background:var(--surface-3);font-size:11.5px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;flex:none}
.ccp-kv{display:flex;gap:12px;padding:7px 13px;font-size:12.5px;align-items:flex-start}
.ccp-kv .k{color:var(--muted);flex:0 0 46%}
.ccp-kv .v{color:var(--text);min-width:0;flex:1;text-align:right;overflow-wrap:anywhere}
.ccp-foot{margin-top:2px}
@media (max-width:760px){.ccp{position:fixed;inset:auto 0 0 0;height:78vh;border-radius:var(--r-lg) var(--r-lg) 0 0;
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  .ccp.in{transform:none}}
/* the takeover panel must never collapse with the rail */
.cc-rail .ccp,.cc-map-side .ccp{min-width:320px;width:100%}
/* card bodies stack their rows (a legacy flex-row rule was clipping all but the
   first row inside the map detail panel) */
.ccp-cb{display:flex;flex-direction:column;align-items:stretch}
.ccp-cb>*{width:100%;flex:none}
.ccp-card{overflow:visible}
.ccp-body{overflow-y:auto;overflow-x:hidden}
/* marker name plates: no filled box, just legible text on the dark canvas */
.gm-style img[src^="data:image/svg"]{background:transparent}
.gm-style div[style*="font-weight: 700"]{background:transparent!important}

/* ============================================================
   SIDEBAR COLLAPSE — the rail toggle lives in the brand row. Collapsed, the
   sidebar becomes a 64px icon rail; group children fly out on hover/click
   (railFlyout), which the nav already supports.
   ============================================================ */
.side-brand{position:relative;padding-right:44px}
.side-collapse{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:6px;border:0;background:none;color:var(--text-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.side-collapse:hover{background:var(--surface-2);color:var(--text)}
.side-collapse svg{width:15px;height:15px}
@media (min-width:981px){
  .layout.side-collapsed .sidebar{width:64px}
  .layout.side-collapsed .side-brand-tx,
  .layout.side-collapsed .nav-item span:not(.nav-ico),
  .layout.side-collapsed .nav-grp span:not(.nav-ico),
  .layout.side-collapsed .nav-caret,
  .layout.side-collapsed .nav-badge,
  .layout.side-collapsed .plan-line,
  .layout.side-collapsed .nav-kids{display:none}
  .layout.side-collapsed .side-brand{padding:14px 0 10px;justify-content:center}
  .layout.side-collapsed .side-collapse{position:static;transform:none;margin:0 auto}
  .layout.side-collapsed .nav{padding:4px 6px}
  .layout.side-collapsed .nav-item,.layout.side-collapsed .nav-grp{justify-content:center;padding:0}
  .layout.side-collapsed .nav-foot{padding:6px}
}
/* anchored pop menus (filter pills, group-by, row actions) */
.pop-anchor{display:inline-flex;flex:none}
.pop-menu{min-width:200px;max-height:min(60vh,420px);overflow-y:auto}
.pop-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 12px;background:none;
  border:0;color:var(--text);font-size:13px;text-align:left;cursor:pointer;border-radius:var(--r-sm)}
.pop-item:hover{background:var(--surface-3)}
.pop-item.on,.pop-item.sel{background:var(--surface-3);font-weight:600}
.pop-item-ic{display:flex;color:var(--muted)}
.pop-item-ic svg{width:14px;height:14px}
.pop-sep{height:1px;background:var(--border-soft);margin:4px 0}
.pop-danger{color:var(--danger)}

/* ============================================================
   CHARTS v2 — a pie is a full circle of adjacent wedges with nothing inside
   it; a bar chart shares ONE plot box between its axis, gridlines and bars so
   the zero label sits on the baseline. Hover highlights the hovered element
   only, never the whole widget.
   ============================================================ */

/* ---- PIE ---- */
.pie-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pie-wrap{position:relative;flex:none}
.pie{width:132px;height:132px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1px var(--border-soft) inset;transition:filter var(--dur-fast)}
.chart-legend{display:flex;flex-direction:column;gap:7px;min-width:0}
.chart-leg-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);
  white-space:nowrap;padding:2px 4px;border-radius:6px;transition:background var(--dur-fast)}
.chart-leg-row.on{background:var(--surface-3)}
.leg-sw{width:10px;height:10px;border-radius:3px;flex:none}
.leg-l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.leg-sep{color:var(--placeholder);margin:0 2px}
.leg-v{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums;margin-left:auto;padding-left:10px}

/* ---- VERTICAL BARS ---- */
.bar-chart{min-height:0}
.bar-main{display:flex;gap:10px;align-items:flex-start}
.bar-yaxis{display:flex;flex-direction:column;justify-content:space-between;height:var(--plot);
  flex:none;font-size:10.5px;color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums;line-height:1}
.bar-right{flex:1;min-width:0}
.bar-plot{position:relative;height:var(--plot);min-width:0}
.bar-grid{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;pointer-events:none}
.bar-grid i{display:block;height:1px;background:var(--border-soft)}
.bar-grid i:last-child{background:var(--border)}
.bar-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:8px}
.bar-col{flex:1;min-width:8px;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:default}
.bar-slot{width:100%;max-width:46px;display:flex;align-items:flex-end;height:100%}
.bar-fill{width:100%;background:var(--tab-active);border-radius:3px 3px 0 0;
  transition:filter var(--dur-fast);align-self:flex-end}
.bar-fill.alt{background:var(--warn)}
.bar-col.on .bar-fill{filter:brightness(1.45)}
.bar-xaxis{display:flex;gap:8px;margin-top:7px}
.bar-xaxis span{flex:1;min-width:0;font-size:10.5px;color:var(--muted);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   TITLES + DIALOG HEADER + ROW LABELS (reported layout defects)
   ============================================================ */
/* page titles are titles: bigger, with air under them */
.page-title{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.page-title-lg{font-size:26px}
.page-head{align-items:flex-start;gap:16px;margin-bottom:18px}
.page-head>div:first-child{padding-top:2px}
.page-sub{margin-top:6px;font-size:13px;color:var(--muted)}

/* dialog header: icon + words on ONE line, close X with no button box */
.modal-head{align-items:center}
.modal-head .modal-title{flex-direction:row;align-items:center;gap:10px;font-size:19px;font-weight:700}
.modal-x-bare{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;
  margin-left:auto;display:flex;align-items:center;border-radius:6px}
.modal-x-bare:hover{color:var(--text)}
.modal-x-bare svg{width:18px;height:18px}

/* widget rows read "Label : Value" - the dot bullets were noise */
.dw-row{gap:6px}
.dw-l2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-sep{color:var(--placeholder);flex:none}
.dw-n{margin-left:auto;font-weight:650;font-variant-numeric:tabular-nums}
.dw-row .dot,.dw-rows .dot{display:none}          /* retire the bullet dots */

/* widget titles WRAP to a second line instead of being cut off */
.card-head{align-items:flex-start;flex-wrap:nowrap}
.card-head h3{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;
  font-size:14px;font-weight:650}
.card-head .card-link,.card-head .icon-btn,.card-head .dw-menu{flex:none;margin-top:1px}

/* number pairs get real spacing instead of hugging the left edge */
.dw-numpair{gap:0;padding:4px 0}
.np{padding:8px 14px;text-align:left}
.np:first-child{padding-left:2px}
.np-num{font-size:32px;line-height:1.05}
.np-label{font-size:12px;margin-top:5px;color:var(--text-2)}
/* the header action cluster is ONE consistent set: "..." , Add Widgets and
   fullscreen all get the same surface chrome (Add Widgets was transparent) */
.page-actions .btn-ghost,.page-actions .icon-btn,.dash-stamp{height:32px}
.page-actions .btn.btn-ghost{background:var(--surface);border:1px solid var(--border);
  color:var(--text);border-radius:var(--r-sm);padding:0 12px;font-size:13px}
.page-actions .btn.btn-ghost:hover{background:var(--surface-2)}
.dash-stamp{display:inline-flex;align-items:center;gap:7px;color:var(--text-2);font-size:12.5px;
  background:none;border:0;padding:0 4px}
.dash-stamp svg{width:14px;height:14px}

/* LIVE MAP CHROME - measured off the category-standard Fleet Map:
     top-LEFT     search field, filter pills directly beneath it
     top-RIGHT    fullscreen
     bottom-RIGHT zoom in / zoom out
     bottom-LEFT  Map Options                                              */
.cc-map-toolbar{left:12px;right:12px;top:12px;bottom:auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  width:auto;max-width:none;background:none;border:0;box-shadow:none;padding:0;pointer-events:none}
.cc-map-toolbar>*{pointer-events:auto}
.cc-map-search{width:min(460px,calc(100% - 64px));height:38px;display:flex;align-items:center;gap:9px;
  padding:0 12px;border-radius:10px;background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-pop)}
.cc-map-search-ic{display:flex;color:var(--muted);line-height:0}
.cc-map-search-ic svg{width:15px;height:15px}
.cc-map-search-inp{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);
  font-size:13px;height:100%}
.cc-map-search-inp::placeholder{color:var(--placeholder)}
.cc-map-pills{display:flex;gap:8px;flex-wrap:wrap;background:none;border:0;padding:0;box-shadow:none}

.cc-map-side{position:absolute;right:12px;left:auto;display:flex;flex-direction:column;gap:8px;z-index:6}
.cc-map-side.cc-side-top{top:12px;bottom:auto}
.cc-map-side.cc-side-bottom{bottom:52px;top:auto}
.cc-map-zoomgrp{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-pop)}
.cc-map-zoomgrp button{border:0;border-radius:0;box-shadow:none}
.cc-map-zoomgrp button+button{border-top:1px solid var(--border-soft)}
.cc-map-side-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);
  cursor:pointer;box-shadow:var(--shadow-pop);padding:0}
.cc-map-side-btn svg{width:15px;height:15px}
.cc-map-options{left:12px;right:auto;bottom:12px}
/* marker name plates: text only, no filled box behind them */
.gm-style .gm-style-iw,.gm-style .gm-style-iw-c{background:var(--surface);color:var(--text)}
/* status chips and timestamps carry NO outline (reported: "why does offline have
   an outline around it, so does the time") */
.st,.ccu-chip,.ccp-kv .v .st,.cc-det .st{border:0;box-shadow:none;background:none;padding:0}
.ccu-chip{background:var(--surface-3);padding:1px 7px;border-radius:999px}
.ccu-chip-ago{background:none;padding:0;color:var(--muted)}
.ccp-kv .v .st i{margin-right:6px}

/* ============================================================
   COLLAPSED SIDEBAR = ICON RAIL (like the previous implementation).
   64px wide, glyphs only, everything centred, and BOTH toggles stay reachable:
   the rail's own button plus a topbar "Show sidebar" button that only appears
   while collapsed. Collapsing is disabled below 981px, where the sidebar is an
   off-canvas drawer (that combination pushed the toggle off-screen).
   ============================================================ */
.side-open{display:none}
.layout.side-collapsed .side-open{display:inline-flex}
@media (max-width:980px){
  .side-collapse{display:none}          /* drawer mode owns the sidebar here */
  .side-open{display:none!important}
}
@media (min-width:981px){
  .layout.side-collapsed .sidebar{width:64px;min-width:64px;max-width:64px;overflow:visible}
  .layout.side-collapsed .side-brand{padding:12px 0 8px;justify-content:center;position:static}
  .layout.side-collapsed .side-brand-tx{display:none}
  .layout.side-collapsed .side-collapse{position:static;transform:none;margin:6px auto 0;
    width:32px;height:28px;display:flex}
  .layout.side-collapsed .side-collapse svg{rotate:180deg}
  .layout.side-collapsed .nav{padding:4px 8px;overflow:visible}
  .layout.side-collapsed .nav-item,
  .layout.side-collapsed .nav-grp{justify-content:center;padding:0;gap:0;width:48px;margin:2px auto}
  .layout.side-collapsed .nav-item>span:not(.nav-ico),
  .layout.side-collapsed .nav-grp>span:not(.nav-ico),
  .layout.side-collapsed .nav-caret,
  .layout.side-collapsed .nav-badge,
  .layout.side-collapsed .nav-kids,
  .layout.side-collapsed .plan-line{display:none}
  .layout.side-collapsed .nav-ico{width:18px;height:18px}
  .layout.side-collapsed .nav-ico svg{width:18px;height:18px}
  .layout.side-collapsed .nav-foot{padding:6px 8px}
  /* group children fly out beside the rail on hover/click */
  .layout.side-collapsed .nav-flyout{position:fixed;z-index:var(--z-drop);min-width:210px;
    background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
    box-shadow:var(--shadow-pop);padding:4px}
}
/* While collapsed the rail is 64px of pure icons - the in-rail toggle is hidden
   (a legacy absolute-position rule dragged it off-canvas to x=-217) and the
   topbar "Show sidebar" button is the way back, exactly as before. */
@media (min-width:981px){
  .layout.side-collapsed .side-collapse{display:none}
  .layout.side-collapsed .side-brand{padding:14px 0 10px}
}
/* The legacy rail slid the whole sidebar out with margin-left:-249px, which
   fought the 64px icon rail and left the content shifted under it. Reset the
   offset so collapsed means SHRUNK TO ICONS, not hidden. */
@media (min-width:981px){
  .layout.side-collapsed .sidebar{margin-left:0;padding-left:0;padding-right:0}
  .layout.side-collapsed .main{margin-left:0}
}

/* ============================================================
   FIXES from the bug folder (round 2)
   ============================================================ */
/* 1. Dialog title was display:block, so the icon stacked ABOVE the words.
      It is one row: [+] Add Widgets ............................ [x] */
.modal-head{display:flex;align-items:center;gap:12px}
.modal-head .modal-title{display:flex!important;flex-direction:row;align-items:center;
  gap:10px;font-size:19px;font-weight:700;line-height:1.2;flex:1;min-width:0}
.modal-head .modal-title-ic{display:flex;align-items:center;flex:none}
.modal-head .modal-title-ic svg{width:20px;height:20px}

/* 2. Empty-state action buttons keep normal 14px icons (the 96px spot rule was
      hitting them and drawing a giant plus over the label). */
.empty-state button svg,.empty button svg,.es-act button svg{width:14px;height:14px}
.es-act,.empty-state .btn{margin-top:14px}

/* 3. No bullet dots anywhere in widget rows - including the locations list. */
.dw-loc-row .dot,.dw-loc-row i.dot,.hist-row .dot{display:none}
.dw-loc-row{display:flex;align-items:center;gap:10px;padding:8px 4px;
  border-top:1px solid var(--border-soft);cursor:pointer}
.dw-loc-list>.dw-loc-row:first-child{border-top:0}
.dw-loc-main{min-width:0;flex:1}
.dw-loc-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-loc-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-loc-time{margin-left:auto;font-size:11.5px;color:var(--muted);flex:none}

/* 4. A number pair that cannot fit side by side STACKS instead of clipping. */
.dw-numpair{display:flex;flex-wrap:wrap;gap:0}
.np{flex:1 1 auto;min-width:132px}
.np-num{white-space:nowrap;overflow:visible}
@container (max-width: 260px){ .np{flex-basis:100%} }
.card.dw{container-type:inline-size}

/* ============================================================
   GRAPH HOVER, reference behaviour: hovering the plot dims the OTHER bars and
   keeps the hovered one at full strength (the reference greys the siblings, it
   does not fade the whole widget). Same idea for pie slices via the legend.
   ============================================================ */
.bar-cols:hover .bar-fill{background:var(--surface-3);transition:background var(--dur-fast)}
.bar-cols .bar-col.on .bar-fill{background:var(--tab-active)}
.bar-cols .bar-col.on .bar-fill.alt{background:var(--warn)}
.bar-col{position:relative}
/* a hovered column gets a faint backdrop the full height of the plot, like the
   reference's column highlight */
.bar-col.on::before{content:"";position:absolute;inset:0;background:rgba(245,245,245,.04);
  border-radius:4px;pointer-events:none}

/* ============================================================
   UNIVERSAL: "the first box sits above the rest"
   A legacy rule gave cards margin-top:16px but not :first-child, so the first
   card in every grid started 16px higher than its row-mates. Grid gap owns the
   spacing - card margins are zeroed everywhere.
   ============================================================ */
.dash-grid>*,.cards-grid>*,.rep-grid>*,.int-grid>*,.doc-pins>*,.idx-cats3>*,
.wo-grid>*,.wo-col>*{margin-top:0;margin-bottom:0}
.wo-col{display:flex;flex-direction:column;gap:16px}
.dash-grid{row-gap:16px}

/* ============================================================
   SETTINGS is a PAGE, not a takeover: the product sidebar stays put and the
   settings sub-nav lives inside the content column, like the reference.
   ============================================================ */
body.settings-takeover .sidebar{display:flex}
body.settings-takeover .content,body.settings-takeover #content{max-width:none}
.settings-page2{grid-template-columns:230px minmax(0,1fr);gap:0;align-items:start;
  padding:0;max-width:none;min-height:100%}
.setx-rail-top{grid-column:1;grid-row:1;padding:16px 12px 4px;background:var(--surface);
  border-right:1px solid var(--border-soft)}
.seg.setx-tabs{grid-column:1;grid-row:2;background:var(--surface);
  border-right:1px solid var(--border-soft);max-height:none;padding:0 10px 24px}
.settings-page2>*:not(.setx-rail-top):not(.seg.setx-tabs){grid-column:2}
.settings-page2>.page-head{grid-row:1;padding:20px 24px 0}
.settings-page2>.setx-body{grid-row:2;padding:16px 24px 48px}
/* the "Back to Moventra" link is redundant now the sidebar never disappears */
.setx-back{display:none}
@media (max-width:1023px){
  .settings-page2{grid-template-columns:1fr}
  .setx-rail-top,.seg.setx-tabs{grid-column:1;border-right:0;
    border-bottom:1px solid var(--border-soft)}
  .settings-page2>*{grid-column:1}
}

/* ============================================================
   TABLE POLISH from the bug list
   ============================================================ */
/* an empty cell reads as a dash, never as a blank gap */
.dtd:empty::after{content:"\2014";color:var(--muted)}
/* the row "..." only appears on hover, and stays pinned to the right edge while
   the table is scrolled sideways */
.dtd-menu,.dtd:last-child{position:sticky;right:0;background:var(--surface);
  box-shadow:-8px 0 12px -8px rgba(0,0,0,.55)}
.dtr:hover .dtd-menu,.dtr:hover .dtd:last-child{background:var(--surface-2)}
.row-menu,.wv-row-more{opacity:0;transition:opacity var(--dur-fast)}
.dtr:hover .row-menu,.dtr:hover .wv-row-more,
.row-menu:focus-visible,.wv-row-more:focus-visible,
.row-menu[aria-expanded="true"],.wv-row-more[aria-expanded="true"]{opacity:1}
.dthr .dtd:last-child,.dthr .dth:last-child{background:var(--surface)}
/* the search field inside a list toolbar sits on the text baseline */
.list-search{padding:0 12px;gap:8px}
.list-search input{height:30px;line-height:30px;padding:0;font-size:13px}
/* no underline on meter values - it read as a broken link */
.dtd a.tlink.num,.dtd .num a.tlink{text-decoration:none}
.dtd a.tlink{text-decoration-color:transparent}
.dtr:hover .dtd a.tlink{text-decoration-color:rgba(178,171,160,.55)}
/* Superseded: the control stacks moved to the RIGHT edge to match the
   category-standard products (see LIVE MAP CHROME below). Only the shared sizing that
   is still correct stays here. */
.cc-map-side>*{width:34px;flex:none}
.cc-map-zoomgrp{width:34px}
.cc-map-options{left:12px;right:auto;bottom:12px;width:auto}

/* ── TABLE CAPTION ────────────────────────────────────────────────────────
   A heading floating above a table read as a stray rule once the table bar
   grew its own border. sortableTable({caption}) now puts the title INSIDE the
   bar, top-left, with the pager pushed right. */
.dt-bar>.dt-cap{font-size:13px;font-weight:600;color:var(--text-1);letter-spacing:-.01em;
  white-space:nowrap;flex:0 0 auto}
.dt-bar.has-cap>.dt-pager{margin-left:auto}

/* ── HISTORY ROW ICON ALIGNMENT ───────────────────────────────────────────
   The 30px icon tile sat top-aligned against a two-line body, so it read as
   floating above the text. Centre it on the first line instead. */
.hist-row{align-items:center}
.hist-row .hr-ic{flex:0 0 30px;align-self:flex-start;margin-top:1px}
.hist-row>div{min-width:0}

/* ── RECORD TABS ──────────────────────────────────────────────────────────
   Requested: the active tab is marked with an ORANGE underline, and the strip
   loses the count pills. --accent is our near-white action colour, so the
   underline needs its own token rather than borrowing that one. */
/* Accent: warm #D97757 IS the brand action colour - owner re-confirmed
   after a one-day monochrome experiment ("by orange i mean the lines...
   revert that change"). It marks ACTIONS and active tints only; never
   underlines/bars (round 8) and never data-viz ink (--viz9, round 9). */
:root,body{--tab-active:#D97757}
.veh-tabs{gap:2px;overflow-x:auto}
.veh-tab{padding:10px 13px;font-size:13px;font-weight:600}
.veh-tab.on{color:var(--text-1)}
.veh-tab.on::after{background:var(--tab-active);left:8px;right:8px;bottom:-1px;height:2px}
.veh-tab-n{display:none}

/* ── SETTINGS ROW GROUP (used by Map Settings and every toggle list) ──────
   Requested: clear separator lines between each option instead of rows that
   run together. */
.set-rows{display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:10px;overflow:hidden}
.set-rows>*{padding:12px 14px;margin:0;border-bottom:1px solid var(--border-soft)}
.set-rows>*:last-child{border-bottom:0}
.set-rows>.set-row{display:flex;align-items:center;gap:14px}
.set-rows>.set-row .set-row-l{flex:1;min-width:0}
.set-rows>.set-row .set-row-label{font-size:13px;font-weight:600;color:var(--text-1)}
.set-rows>.set-row .set-row-sub{font-size:12px;color:var(--muted);margin-top:2px}
.set-rows>.set-row .set-row-c{flex:0 0 auto}

/* Record section heads carry a field count that reads as noise next to the
   section name - same complaint as the tab counts. */
.fc-head .fc-n{display:none}

/* Cards built from pre-made field nodes (trip / order / service creates) use the
   same rhythm as the tuple-built cards. */
.form-card-body.nodes{display:flex;flex-direction:column;gap:14px}
.form-card-body.nodes>.form-grid{margin:0}
.form-card-body.nodes>.section-label:first-child{margin-top:0}

/* ── WIDGET HEADER: TITLES MUST NOT WRAP ──────────────────────────────────
   The title was not taking its share of the flex row, so it wrapped to two
   lines while ~80px sat empty beside "View All". Give it the remaining space,
   and only pack 4 widgets across when there is genuinely room for them. */
.card.dw .card-head{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.card.dw .card-head h3{flex:1 1 auto;min-width:0;font-size:14.5px;line-height:1.25}
.card.dw .card-head .card-link,.card.dw .card-head .dw-menu{flex:0 0 auto}
/* Their widget vocabulary, specified here1280px viewport:
   wide widgets are HALVES (488px, two per row) and standard widgets are QUARTERS
   (236px, four per row), 16px gaps, 8px radius. Ours was span 4 / span 8, giving
   three-up and a two-thirds-width wide card. */
@media (max-width:1759px){ .card.dw{grid-column:span 3} .card.dw-w2{grid-column:span 6} }
@media (max-width:1179px){ .card.dw{grid-column:span 6} .card.dw-w2{grid-column:span 12} }
@media (max-width:760px){ .card.dw,.card.dw-w2{grid-column:span 12} }

/* Bar-chart x labels were clipped to "Fe…" because each column is ~30px wide.
   The axis shows the short form; the full label lives in the hover card. */
.bar-xaxis span{font-size:10px;letter-spacing:-.01em;overflow:visible;text-overflow:clip}

/* ══════════════════════════════════════════════════════════════════════════
 * CLAUDE DESIGN — PHASE 2 CLASSES
 * Merged from the delivered design-system.css: only rules that introduce class
 * families we did not already have, so every fix already made here survives.
 *   auth (.auth-*)            sign in / sign up / forgot / reset
 *   landing (.land-* .lf-* .feat-* .price-*)
 *   map (.lm-hover hover card, .tk-panel non-vehicle takeover panels)
 *   modules (.steps lifecycle, .stops timeline, .avb availability board,
 *            .pod-* proof of delivery, .rp-speed + .replay-stopmk replay)
 *   settings rail icons (.stg-ico) and the all-clear empty state
 * ══════════════════════════════════════════════════════════════════════════ */
.auth-body{overflow-y:auto}
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:48px 16px;background:radial-gradient(900px 480px at 50% -10%,rgba(245,245,245,.05),transparent)}
.auth-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:.02em;text-decoration:none;color:var(--text)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:28px 28px 26px;animation:fadeUp .35s ease}
.auth-title{margin:0 0 4px;font-size:20px;font-weight:650;letter-spacing:-.01em}
.auth-sub{margin:0 0 20px;color:var(--muted);font-size:12.5px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.af-l{display:block;font-size:12.5px;font-weight:500;color:var(--text-2);margin-bottom:6px}
.af-row{display:flex;align-items:baseline;justify-content:space-between}
.af-row .af-link{font-size:12px;color:var(--text-2)}
.btn-block{width:100%;justify-content:center}
.auth-div{display:flex;align-items:center;gap:10px;color:var(--placeholder);font-size:11px;margin:18px 0 14px;text-transform:uppercase;letter-spacing:.07em}
.auth-div::before,.auth-div::after{content:"";height:1px;background:var(--border-soft);flex:1}
.auth-foot{font-size:12.5px;color:var(--text-2);text-align:center}
.auth-err{display:flex;gap:9px;align-items:flex-start;background:var(--danger-soft);border:1px solid rgba(239,68,68,.35);color:var(--text);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;line-height:1.45;margin-bottom:16px}
.auth-err svg{color:var(--danger);flex:none;margin-top:1px}
.auth-ok{display:flex;gap:9px;align-items:flex-start;background:var(--ok-soft);border:1px solid rgba(47,191,107,.35);color:var(--text);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;line-height:1.45;margin-bottom:16px}
.auth-ok svg{color:var(--ok);flex:none;margin-top:1px}
.pw-meter{display:flex;gap:4px;margin-top:7px}
.pw-meter i{height:3px;flex:1;border-radius:2px;background:var(--surface-3)}
.pw-meter i.on{background:var(--ok)}
.pw-hint{font-size:11.5px;color:var(--muted);margin-top:6px}
.lm-hover{position:absolute;z-index:7;width:236px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-pop);padding:10px 11px;display:flex;gap:10px;pointer-events:none;animation:hovIn .14s ease}
.lm-hover::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:translateX(-50%) rotate(45deg)}
.lm-hover .hv-thumb{width:38px;height:38px;border-radius:8px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none;color:var(--text)}
.lm-hover .hv-name{font-size:12.5px;font-weight:650;display:flex;align-items:center;gap:6px}
.lm-hover .hv-addr{font-size:11.5px;color:var(--text-2);margin-top:1px}
.lm-hover .hv-drv{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2);margin-top:6px}
.lm-hover .hv-drv .avatar{width:16px;height:16px;font-size:8px}
.tk-panel{position:absolute;top:0;bottom:0;left:0;width:360px;z-index:6;background:var(--surface);border-right:1px solid var(--border);box-shadow:24px 0 60px rgba(0,0,0,.45);display:flex;flex-direction:column;animation:tkIn .28s var(--ease)}
.tk-head{padding:16px 16px 13px;border-bottom:1px solid var(--border-soft);display:flex;gap:12px;align-items:flex-start}
.tk-ico{width:44px;height:44px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;color:#FFF}
.tk-ico svg{width:20px;height:20px}
.tk-ico.depot{background:#7C6AE0}
.tk-ico.shop{background:#0F9D58}
.tk-ico.fuel{background:#D97706}
.tk-ico.place{background:var(--surface-3);color:var(--text)}
.tk-head h2{margin:0;font-size:15.5px;font-weight:650;line-height:1.25}
.tk-sub{font-size:12px;color:var(--text-2);margin-top:2px}
.tk-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--border-soft);flex:none}
.tk-tab{height:38px;padding:0 11px;background:none;border:0;color:var(--text-2);font-size:12.5px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tk-tab:hover{color:var(--text)}
.tk-tab.active{color:#FFF;border-bottom-color:var(--accent);font-weight:600}
.tk-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.tk-card{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r);padding:13px 14px}
.tk-card h4{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tk-kv{display:flex;justify-content:space-between;gap:14px;padding:4.5px 0;font-size:12.5px}
.tk-kv .k{color:var(--muted);flex:none}
.tk-kv .v{font-weight:500;text-align:right}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px}
.tk-chips .chip{height:24px;padding:0 10px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border-soft);font-size:11.5px;display:inline-flex;align-items:center;color:var(--text-2)}
.tk-acts{padding:12px 14px;border-top:1px solid var(--border-soft);display:flex;gap:8px;flex:none}
.tk-acts .btn{flex:1;justify-content:center}
.stars{color:var(--warn);letter-spacing:2px;font-size:12px}
.empty-state.all-clear .es-ico{background:var(--ok-soft);border-color:rgba(47,191,107,.35);color:var(--ok);box-shadow:0 0 0 7px var(--surface),0 0 0 8px rgba(47,191,107,.2)}
.empty-state .es-kicker{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--placeholder);margin-top:10px}
.land-body{overflow-y:auto}
.land-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:0 clamp(20px,5vw,64px);height:64px;background:rgba(26,25,23,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft)}
.land-nav .land-links{display:flex;gap:22px;font-size:13px;margin:0 auto}
.land-nav a{text-decoration:none;color:var(--text-2)}
.land-nav a:hover{color:var(--text)}
.land-nav .land-auth{display:flex;gap:8px;align-items:center}
.land-hero{padding:clamp(56px,9vh,104px) clamp(20px,5vw,64px) 0;text-align:center}
.land-kicker{display:inline-flex;align-items:center;gap:8px;height:auto;min-height:26px;padding:3px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:11.5px;color:var(--text-2);margin-bottom:22px;white-space:nowrap}
.land-h1{font-size:clamp(34px,5vw,58px);font-weight:700;letter-spacing:-.03em;line-height:1.04;margin:0 auto 18px;max-width:840px;text-wrap:balance}
.land-lede{font-size:clamp(14px,1.6vw,16.5px);color:var(--text-2);max-width:640px;margin:0 auto 30px;line-height:1.65;text-wrap:pretty}
.land-ctas{display:flex;gap:10px;justify-content:center}
.land-frame{max-width:1060px;margin:64px auto 0;border:1px solid var(--border);border-radius:16px 16px 0 0;border-bottom:0;background:var(--surface);box-shadow:0 -20px 80px rgba(0,0,0,.35),0 0 0 10px rgba(245,245,245,.02);overflow:hidden;text-align:left}
.lf-top{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--border-soft)}
.lf-top i{width:9px;height:9px;border-radius:50%;background:var(--surface-3)}
.lf-cols{display:grid;grid-template-columns:170px 1fr;min-height:340px}
.lf-side{border-right:1px solid var(--border-soft);padding:12px 10px;display:flex;flex-direction:column;gap:7px}
.lf-side i{height:22px;border-radius:6px;background:var(--surface-2)}
.lf-side i.hi{background:var(--surface-3)}
.lf-main{padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start}
.lf-card{border:1px solid var(--border-soft);border-radius:10px;background:var(--bg);padding:12px;min-height:96px;display:flex;flex-direction:column;gap:8px}
.lf-card i{height:9px;border-radius:4px;background:var(--surface-2);display:block}
.lf-card i.w2{width:55%}
.lf-card .lf-bars{display:flex;align-items:flex-end;gap:5px;flex:1}
.lf-card .lf-bars i{width:12%;height:var(--h,40%);background:var(--surface-3)}
.lf-card.wide{grid-column:span 2}
.land-sec{padding:76px clamp(20px,5vw,64px);max-width:1200px;margin:0 auto}
.land-sec>h2{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.02em;margin:0 0 10px;text-align:center;text-wrap:balance}
.land-sec .sec-sub{text-align:center;color:var(--text-2);max-width:560px;margin:0 auto 42px;font-size:14px;line-height:1.6}
.feat-grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.feat-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);padding:22px;transition:border-color var(--dur-fast)}
.feat-card:hover{border-color:var(--border)}
.feat-card .fi{width:38px;height:38px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--text)}
.feat-card h3{margin:0 0 6px;font-size:15px;font-weight:650}
.feat-card p{margin:0;font-size:13px;color:var(--text-2);line-height:1.55}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;max-width:1000px;margin:0 auto}
.price-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:16px}
.price-card.hi{border-color:rgba(245,245,245,.55)}
.price-card .tier{font-size:13px;font-weight:600;color:var(--text-2);display:flex;align-items:center;justify-content:space-between}
.price-card .tier .badge{font-size:10.5px}
.price-num{font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1}
.price-num .per{font-size:12.5px;color:var(--muted);font-weight:500;letter-spacing:0}
.price-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--text-2);flex:1}
.price-card ul li{display:flex;gap:9px;align-items:flex-start}
.price-card ul li svg{color:var(--ok);flex:none;margin-top:2px}
.land-band{text-align:center;background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:72px 20px}
.land-band h2{font-size:clamp(22px,2.8vw,30px);font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.land-band p{color:var(--text-2);margin:0 0 24px}
.land-foot{padding:46px clamp(20px,5vw,64px) 64px;display:flex;flex-wrap:wrap;gap:44px;color:var(--text-2);font-size:12.5px}
.land-foot .lf-brand{max-width:240px;margin-right:auto}
.land-foot h5{color:var(--text);font-size:12.5px;margin:0 0 10px;font-weight:600}
.land-foot a{color:var(--text-2);text-decoration:none;display:block;padding:3.5px 0}
.land-foot a:hover{color:var(--text)}
.land-legal{padding:0 clamp(20px,5vw,64px) 40px;color:var(--placeholder);font-size:11.5px}
.steps{display:flex;align-items:flex-start;margin:16px 0 6px;overflow-x:auto;padding-bottom:2px}
.step{display:flex;align-items:flex-start;gap:9px;flex:1;min-width:0}
.step .s-dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.step .s-dot svg{width:11px;height:11px}
.step.done .s-dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.step.now .s-dot{border-color:var(--accent);color:var(--text);box-shadow:0 0 0 3px rgba(245,245,245,.14)}
.step .s-lbl{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;line-height:1.3}
.step.done .s-lbl,.step.now .s-lbl{color:var(--text)}
.step .s-sub{display:block;font-size:10.5px;font-weight:400;color:var(--placeholder);margin-top:1px}
.step .s-line{flex:1;height:1.5px;background:var(--border);margin:10px 10px 0;min-width:16px}
.step.done .s-line{background:var(--accent)}
.step:last-child{flex:none}
.step:last-child .s-line{display:none}
.stops{display:flex;flex-direction:column}
.stop{display:grid;grid-template-columns:15px 1fr auto;gap:0 12px;position:relative;padding:0 0 15px}
.stop::before{content:"";position:absolute;left:6.5px;top:17px;bottom:-1px;width:1.5px;background:var(--border-soft)}
.stop:last-child{padding-bottom:2px}
.stop:last-child::before{display:none}
.stop .st-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--muted);background:var(--surface);z-index:1;margin-top:2px}
.stop.done .st-dot{border-color:var(--ok);background:var(--ok-soft)}
.stop.now .st-dot{border-color:var(--info);background:var(--info-soft);box-shadow:0 0 0 3px var(--info-soft)}
.stop .st-name{font-size:13px;font-weight:600;line-height:1.3}
.stop .st-sub{font-size:11.5px;color:var(--text-2);margin-top:1px}
.stop .st-time{font-size:11px;color:var(--muted);text-align:right;white-space:nowrap;line-height:1.35}
.stop .st-time b{display:block;color:var(--text);font-weight:600;font-size:11.5px}
.avb{border:1px solid var(--border-soft);border-radius:var(--r);overflow:auto;background:var(--surface)}
.avb-grid{display:grid;grid-template-columns:220px repeat(14,minmax(50px,1fr));min-width:960px}
.avb-hcell{padding:7px 4px;font-size:10.5px;color:var(--text-2);text-align:center;border-bottom:1px solid var(--border-soft);border-left:1px solid var(--border-soft);background:var(--surface);font-weight:500;position:sticky;top:0;z-index:2}
.avb-hcell b{display:block;font-size:11.5px;color:var(--text);font-weight:600}
.avb-hcell.wknd{color:var(--placeholder);background:var(--surface-2)}
.avb-hcell.today{color:#FFF}
.avb-hcell.today b{color:#FFF}
.avb-vcell{padding:6px 12px;border-bottom:1px solid var(--border-soft);display:flex;gap:9px;align-items:center;min-height:46px;position:sticky;left:0;background:var(--surface);z-index:1}
.avb-cell{border-left:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:3px;min-height:46px}
.avb-cell.wknd{background:rgba(43,40,37,.5)}
.avb-blk{height:100%;min-height:38px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;overflow:hidden;white-space:nowrap}
.avb-blk.trip{background:var(--info-soft);color:var(--info)}
.avb-blk.shop{background:var(--warn-soft);color:var(--warn)}
.avb-blk.res{background:var(--surface-3);color:var(--text-2)}
.avb-blk.off{background:var(--danger-soft);color:var(--danger)}
.pod-sig{height:92px;border:1px dashed var(--border);border-radius:var(--r-sm);background:var(--bg);display:flex;align-items:flex-end;justify-content:center;padding:10px;font-family:"Segoe Script","Bradley Hand",cursive;font-size:24px;color:var(--text)}
.pod-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pod-ph{aspect-ratio:4/3;border:1px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--placeholder);font-size:10.5px;background:var(--bg);text-align:center;padding:4px}
.replay-stopmk{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--warn);transform:translate(-50%,-50%);border:2px solid var(--bg);z-index:2}
.rp-speed{display:flex;align-items:flex-end;gap:2px;height:44px;padding:0 2px;margin-bottom:6px}
.rp-speed i{flex:1;background:var(--surface-3);border-radius:2px 2px 0 0;min-height:3px}
.rp-speed i.hi{background:var(--info)}
.stg-ico{display:inline-flex;flex:none;color:var(--text-2);width:14px}
.stg-item.active .stg-ico{color:#FFF}

/* ── MAP MARKER LABEL: NO PLATE ───────────────────────────────────────────
   Google wraps a marker's label in an UNCLASSED div that inherits whatever
   surface colour a broad rule hands it, which drew a grey plate the size of the
   marker behind every vehicle name. Nothing inside the map canvas gets a
   background except the controls and info windows we style deliberately. */
.gm-style>div>div>div>div{background:transparent!important}
.gm-style [style*="cursor"]>div{background:transparent!important}
#cc-map .gm-style div:not([class]){background:transparent!important}
.gm-style .fm-name-dark,.gm-style .fm-name-light{background:transparent!important}

/* ── RECORD HEADER ICON ───────────────────────────────────────────────────
   The header glyph is a bare 24-viewBox SVG with no width/height, so with the
   old sizing rules gone it stretched to fill the header - a 300px arrow above
   the trip title. Records use the design's 56px identity tile. */
.detail-head-ic{flex:0 0 56px;width:56px;height:56px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;color:var(--text-2)}
.detail-head-ic svg{width:26px;height:26px}

/* Record tabs never carry counts (same as the vehicle record). */
.detail-tab .detail-tab-n,.detail-tabs .tab-n{display:none}

/* ── UNIVERSAL BARE-SVG GUARD ─────────────────────────────────────────────
   Our icon() returns an SVG with a viewBox but no width/height, so any wrapper
   that doesn't size it lets the glyph stretch to the container (a 74px tab
   icon, a 300px header arrow). Every icon wrapper gets an explicit size, with
   the specific ones above overriding this baseline. */
.detail-tab-ic,.nav-ico,.setx-nav-ic,.hist-ic,.hr-ic,.tb-btn,.icon-btn,.btn-ic,
.dw-chev,.row-chev,.card-link,.es-ico,.ccp-aic,.pop-ic,.wv-pop-ic,.set-action-ic{line-height:0}
.detail-tab-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px}
.detail-tab-ic svg{width:16px;height:16px}
.nav-ico svg,.setx-nav-ic svg{width:17px;height:17px;flex:0 0 auto}
.set-action-ic svg{width:18px;height:18px}
.ccp-aic svg{width:15px;height:15px}

/* The 14-day board is wider than the page on a laptop; make the scroll visible
   rather than letting the last columns look chopped off. */
.avb{scrollbar-width:thin}
.avb::-webkit-scrollbar{height:8px}
.avb::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:4px}
.chart-leg-row>i.avb-blk{flex:0 0 14px}

/* ── COLLAPSED RAIL: ICONS MUST READ AT A GLANCE ──────────────────────────
   At 18px a 1.8-weight glyph in --text-2 on the dark rail washes out to almost
   nothing, which is why the rail looked half-empty. In the rail the icon IS the
   label, so it gets more size, more weight and full text contrast, and the
   active tile goes dark so a white glyph sits on top of it, not in it. */
@media (min-width:981px){
  .layout.side-collapsed .nav-ico{width:22px;height:22px;color:var(--text)}
  .layout.side-collapsed .nav-ico svg{width:21px;height:21px;flex:0 0 21px;stroke-width:1.95}
  .layout.side-collapsed .nav-item,
  .layout.side-collapsed .nav-grp{height:40px;border-radius:10px}
  .layout.side-collapsed .nav-item:hover,
  .layout.side-collapsed .nav-grp:hover{background:var(--surface-2)}
  .layout.side-collapsed .nav-item.active,
  .layout.side-collapsed .nav-grp.active{background:var(--surface-3)}
  .layout.side-collapsed .nav-item.active .nav-ico,
  .layout.side-collapsed .nav-grp.active .nav-ico{color:#fff}
  /* the rail is taller than the viewport once every module has an icon */
  .layout.side-collapsed .nav{overflow-y:auto;scrollbar-width:none}
  .layout.side-collapsed .nav::-webkit-scrollbar{width:0}
}

/* ── WIDGET HEADS ALIGN EVEN WHEN A TITLE NEEDS TWO LINES ─────────────────
   "Vehicle Renewal Reminders" cannot fit one line in a 3-across card at any
   readable size. Rather than clip it, every widget head reserves the same two
   lines so the cards still line up across the row. */
.card.dw .card-head{min-height:46px;align-items:flex-start}
.card.dw .card-head h3{font-size:14.5px;line-height:1.28;max-width:100%}
.card.dw .card-head .card-link,.card.dw .card-head .dw-menu{margin-top:1px}

/* Map control stacks sit hard right; the rules above only size the buttons. */
.cc-map .cc-map-side{position:absolute;right:12px!important;left:auto!important;
  display:flex;flex-direction:column;gap:8px;z-index:6;width:auto;max-width:none;
  background:none;border:0;box-shadow:none;padding:0;overflow:visible}
.cc-map .cc-map-side.cc-side-top{top:12px!important;bottom:auto}
.cc-map .cc-map-side.cc-side-bottom{bottom:52px!important;top:auto}

/* The active rail tile is the one thing that must be unmistakable, so it gets a
   solid dark tile and a pure-white glyph rather than grey-on-grey. */
@media (min-width:981px){
  .layout.side-collapsed .nav-item.active,
  .layout.side-collapsed .nav-grp.active{background:#0F0E0D;box-shadow:inset 0 0 0 1px var(--border)}
}

/* ── SAVED-VIEW TABS: THE ACTIVE ONE IS UNDERLINED ────────────────────────
   The list tabs (All / Assigned / Unassigned / saved views) had no active
   marker at all, so you could not tell which view you were looking at. Same
   orange underline the record tabs use. */
.saved-views{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--border-soft);
  overflow-x:auto;scrollbar-width:none}
.saved-views::-webkit-scrollbar{height:0}
.sv-tab{position:relative;height:38px;display:inline-flex;align-items:center;gap:6px;
  padding:0 13px;border:0;background:none;color:var(--muted);font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.sv-tab:hover{color:var(--text)}
.sv-tab.on{color:var(--text)}
.sv-tab.on::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;
  background:var(--tab-active);border-radius:2px}
.sv-add{height:38px;color:var(--muted);font-size:13px;font-weight:600;background:none;border:0;
  cursor:pointer;padding:0 12px;flex:0 0 auto}
.sv-add:hover{color:var(--text)}

/* ── TABLE ROW HEIGHT ─────────────────────────────────────────────────────
   The design contract is 48px rows; ours had drifted to 65px, which made every
   list read half-empty next to the reference. */
.dtable-body .dtr{min-height:48px}
.dtable-body .dtd{padding-top:6px;padding-bottom:6px}
.dtable.compact .dtable-body .dtr{min-height:38px}

/* ── RECORD HEADER: THE UTILITY RAIL MUST NOT SET ITS HEIGHT ──────────────
   The comments / photos / documents rail is a flex sibling of the identity
   block, so its 137px column was stretching the header and leaving ~100px of
   dead space above the tabs. It floats at the right edge instead, exactly like
   the reference, and the header collapses back to the identity block's height. */
.detail-head{position:relative;align-items:flex-start;min-height:0}
.veh-rec-rail{position:absolute;top:0;right:0;border-left:1px solid var(--border-soft);
  padding-left:8px;margin-left:0;gap:2px}
.veh-rec-head{padding-right:56px}
.veh-rail-ic{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;border:0;background:none;color:var(--text-2);cursor:pointer;position:relative}
.veh-rail-ic:hover{background:var(--surface-2);color:var(--text)}
.veh-rail-ic svg{width:16px;height:16px}
.veh-rail-collapse{width:30px;height:26px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--muted);cursor:pointer}
.veh-rail-collapse svg{width:14px;height:14px;transform:rotate(-90deg)}
.veh-rail-badge{position:absolute;top:1px;right:1px;min-width:14px;height:14px;padding:0 3px;
  border-radius:7px;background:var(--info);color:#fff;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.veh-tabs{margin-top:14px}

/* A dropdown button points DOWN. The record "Add" button was drawing a
   left-pointing arrow because it borrowed the generic chevron. */
.detail-actions .btn>.btn-ic:last-child svg,
.detail-actions .btn>span:last-child>svg{transform:none}

/* Watchers chip beside the record's Watch button (reference anatomy). */
.detail-actions .watchers{font-size:12px;color:var(--muted);white-space:nowrap;
  padding:0 4px;align-self:center}

/* ── .detail-tab (tabbedDetail: trip / work-order / order / part records and
   the Service sub-nav) HAD NO ACTIVE MARKER ──────────────────────────────
   Only the colour changed, which is not enough to read at a glance. Same
   orange underline as the vehicle record and the saved-view tabs, so every
   tab strip in the product behaves identically. */
.detail-tabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--border-soft);
  overflow-x:auto;scrollbar-width:none;margin-bottom:16px}
.detail-tabs::-webkit-scrollbar{height:0}
.detail-tab{position:relative;height:40px;display:inline-flex;align-items:center;gap:7px;
  padding:0 13px;border:0;background:none;color:var(--muted);font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.detail-tab:hover{color:var(--text)}
.detail-tab.on{color:var(--text)}
.detail-tab.on::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;
  background:var(--tab-active);border-radius:2px}

/* Status-view tabs carry their status colour as a dot, the way the reference
   marks Open / Pending / Completed. */
.sv-tab .sv-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.sv-tab .sv-dot.ok{background:var(--ok)}
.sv-tab .sv-dot.warn{background:var(--warn)}
.sv-tab .sv-dot.info{background:var(--info)}
.sv-tab .sv-dot.danger{background:var(--danger)}
.sv-tab .sv-count{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ── REPORTS INDEX (reference anatomy: left rail + report table) ──────────*/
.rep-idx{display:flex;gap:0;border:1px solid var(--border-soft);border-radius:var(--r);
  overflow:hidden;background:var(--surface);min-height:420px}
.rep-idx-rail{flex:0 0 250px;border-right:1px solid var(--border-soft);padding:10px 8px;
  display:flex;flex-direction:column;gap:2px;background:var(--surface)}
.rep-rail-search{margin:0 4px 8px;height:34px}
.rep-rail-item{display:flex;align-items:center;gap:9px;height:34px;padding:0 10px;border:0;
  border-radius:8px;background:none;color:var(--text-2);font-size:13px;font-weight:500;
  cursor:pointer;text-align:left;width:100%}
.rep-rail-item:hover{background:var(--surface-2);color:var(--text)}
.rep-rail-item.on{background:var(--surface-3);color:var(--text);font-weight:600}
.rep-rail-ic{display:flex;line-height:0;color:inherit}
.rep-rail-ic svg{width:15px;height:15px}
.rep-rail-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-rail-n{font-size:11px;color:var(--muted);background:var(--surface-2);border-radius:9px;
  padding:1px 7px;font-variant-numeric:tabular-nums}
.rep-rail-item.on .rep-rail-n{background:var(--surface)}
.rep-rail-head{margin:12px 10px 4px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--placeholder)}
.rep-idx-body{flex:1;min-width:0;padding:0}
.rep-idx-body .dtable-wrap{border:0;border-radius:0}
.rep-star{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--placeholder);cursor:pointer;border-radius:6px}
.rep-star:hover{color:var(--text);background:var(--surface-2)}
.rep-star.on{color:var(--warn)}
.rep-star svg{width:15px;height:15px}
.rep-run{display:flex;gap:4px;justify-content:flex-end}
@media (max-width:1023px){.rep-idx{flex-direction:column}.rep-idx-rail{flex:none;border-right:0;border-bottom:1px solid var(--border-soft)}}

/* ── ONE-ROW TOOLBAR (reference): search + pills LEFT, pager/Group/gear/export
   RIGHT, all on one line. The table bar is hoisted here by sortableTable. */
.list-tools{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;min-height:44px}
.list-tools::-webkit-scrollbar{height:0}
.dt-bar-intools{margin-left:auto;border:0!important;height:auto;min-height:0;padding:0;
  background:none;flex:0 0 auto;overflow:visible}
.dt-bar-intools>.dt-pager{margin-left:0}
.dtable-wrap>.dtable:first-child .dthr{border-top:0}

/* Topbar action order (reference): notifications, help, quick-create, avatar */
.tb-right{display:flex;align-items:center}
.tb-right>.top-bell{order:1}
.tb-right>[data-guide-btn]{order:2}
.tb-right>.tb-btn:not(.top-bell):not([data-guide-btn]){order:3}
.tb-right>.avatar,.tb-right>.tb-avatar{order:4}

/* ── TABLE STATUS = DOT + TEXT (reference). A pill in every row was louder
   than the reference, which colours a 7px dot and leaves the word alone. */
.dtd .badge{background:none!important;border:0!important;padding:0!important;
  color:var(--text-2);font-weight:500;font-size:13px;display:inline-flex;
  align-items:center;gap:7px;letter-spacing:0;text-transform:none}
.dtd .badge::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;background:var(--muted)}
.dtd .badge-ok::before,.dtd .badge.ok::before{background:var(--ok)}
.dtd .badge-warn::before,.dtd .badge.warn::before{background:var(--warn)}
.dtd .badge-danger::before,.dtd .badge.danger::before{background:var(--danger)}
.dtd .badge-info::before,.dtd .badge.info::before{background:var(--info)}
.dtd .badge-muted::before,.dtd .badge.muted::before{background:var(--muted)}

/* One dot per status: the badge's own inner dot yields to the ::before dot. */
.dtd .badge i,.dtd .badge .dot,.dtd .badge .st-i,.dtd .badge .badge-dot{display:none}
/* Maintenance is a warning state, not a muted one - the reference colours it amber. */
/* View toggle right-aligns before the hoisted pager cluster (reference). */
.list-tools>.vt9{margin-left:auto;display:flex}
.list-tools>.vt9~.dt-bar-intools{margin-left:12px}

/* Solid status pills (reference: Issues / Work Orders status columns). The
   dot restyle above must not strip these. */
.badge.solid-info{background:var(--info);color:#04121F}
.badge.solid-danger{background:var(--danger);color:#FFF}
.badge.solid-muted{background:var(--surface-3);color:var(--text)}
.dtd .badge[class*=solid-]{background:var(--surface-3)!important;border:0!important;
  padding:2px 10px!important;border-radius:999px;color:var(--text);font-weight:600;font-size:12px}
.dtd .badge.solid-ok{background:var(--ok)!important;color:#08240F}
.dtd .badge.solid-warn{background:var(--warn)!important;color:#2A1D02}
.dtd .badge.solid-info{background:var(--info)!important;color:#04121F}
.dtd .badge.solid-danger{background:var(--danger)!important;color:#FFF}
.dtd .badge[class*=solid-]::before{display:none}

/* ── VEHICLE ASSIGNMENTS CALENDAR (reference anatomy) ─────────────────────*/
.asg-grid{grid-template-columns:230px repeat(var(--asg-days,7),minmax(96px,1fr))}
.asg-tools{margin-bottom:12px}
.asg-nav{display:flex;align-items:center;gap:8px}
.asg-range{font-size:14px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.asg-vtx{min-width:0;display:flex;flex-direction:column;gap:1px}
.asg-vtx small{font-size:11px}
.asg-blk{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;border:0;
  border-radius:6px;background:var(--info-soft);color:var(--info);padding:4px 7px;cursor:pointer;
  overflow:hidden;margin-bottom:2px}
.asg-blk b{font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
.asg-blk small{font-size:9.5px;opacity:.85;white-space:nowrap}
.asg-blk.now{background:rgba(217,119,87,.16);color:var(--tab-active)}
.asg-more{font-size:10px;color:var(--muted);padding:1px 4px}

/* Card heads built as <b>title</b><span>sub</span> stack them - the span is a
   sub-line, not a suffix (fixes "Zone mapCircle and polygon coverage"). */
.card-head>div>b:first-child{display:block;font-size:14.5px;font-weight:600}
.card-head>div>b:first-child+span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* Dashboard title row: "My Dashboard v" switcher chevron beside the name. */
.dash-title-row{display:flex;align-items:center;gap:6px}
.dash-title-row .dash-chev{width:26px;height:26px;color:var(--muted)}
.dash-title-row .dash-chev svg{width:14px;height:14px;transform:rotate(90deg)}
.dash-dbpop .top-pop-row.sel{color:var(--text);font-weight:600}
.dash-dbpop .pop-tick svg{width:13px;height:13px;color:var(--tab-active)}
.wv-pop-div{height:1px;background:var(--border-soft);margin:4px 0}

/* Drag-to-reorder affordances */
.card.dw{cursor:grab}
.card.dw:active{cursor:grabbing}
.card.dw.dragging{opacity:.45;outline:2px dashed var(--tab-active);outline-offset:-2px}

/* Real vehicle photos as thumbnails (uploaded via Photos on the record). */
.veh-thumb-img{overflow:hidden;border-radius:8px;background:var(--surface-2)}
.veh-thumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.dt-veh-ic.veh-thumb-img{width:34px;height:34px;flex:0 0 34px}
.thumb.veh-thumb-img{width:30px;height:30px;flex:0 0 30px}
.veh-photo-tile.veh-photo-real{padding:0;overflow:hidden;border:1px solid var(--border-soft);cursor:pointer}
.veh-photo-tile.veh-photo-real img{width:100%;height:100%;object-fit:cover;display:block}

/* ── GET STARTED CARD (reference: progress ring at the sidebar top) ───────*/
.gs-card{display:flex;align-items:center;gap:8px;margin:8px 10px 2px;padding:9px 12px;
  border:1px solid var(--border-soft);border-radius:10px;background:var(--surface-2);
  color:var(--text);cursor:pointer;width:calc(100% - 20px);text-align:left}
.gs-card:hover{background:var(--surface-3)}
.gs-tx{font-size:13px;font-weight:650;flex:1;min-width:0}
.gs-n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gs-ring{display:flex;line-height:0}
.layout.side-collapsed .gs-card{padding:6px;justify-content:center;margin:8px auto 2px;width:48px}
.layout.side-collapsed .gs-card .gs-tx,.layout.side-collapsed .gs-card .gs-n{display:none}
.gs-steps{display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:10px;overflow:hidden}
.gs-step{display:flex;align-items:center;gap:11px;padding:11px 14px;border:0;background:none;
  color:var(--text);cursor:pointer;text-align:left;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.gs-step:last-child{border-bottom:0}
.gs-step:hover{background:var(--surface-2)}
.gs-check{display:flex;line-height:0;color:var(--text-2)}
.gs-check svg{width:16px;height:16px}
.gs-step.done .gs-check{color:var(--ok)}
.gs-step.done .gs-label{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(158,150,138,.5)}
.gs-label{flex:1;min-width:0}
.gs-done-tx{font-size:11.5px;color:var(--ok);font-weight:600}

/* Active rail tile: heavier stroke so the white glyph reads on the near-black
   tile at small sizes (thin outline icons washed out in screenshots/4K scaling). */
@media (min-width:981px){
  .layout.side-collapsed .nav-item.active .nav-ico svg,
  .layout.side-collapsed .nav-grp.active .nav-ico svg{stroke-width:2.2}
}

/* ══ SETTINGS TAKEOVER (reference layout) ═════════════════════════════════
   #/settings hides the product shell entirely: its own rail on the left
   (Back link, big Settings title, search, grouped sections), content column
   on the right. */
body.settings-takeover .sidebar,body.settings-takeover .topbar{display:none!important}
body.settings-takeover .layout{display:block}
body.settings-takeover .main{margin:0}
body.settings-takeover #content{max-width:none;padding:0;height:100vh;overflow:hidden}
.settings-page2{display:flex;height:100vh;min-height:0;padding:0;max-width:none}
/* Settings had NO scroll at all: the shell is a 100vh row, but the nav rail was
   laying out at its content height (measured 1762px inside a 608px box), so the
   overflow spilled into #content - which is overflow:hidden here - and the lower
   two thirds of the page could not be reached by any means. Both columns are now
   pinned to the shell height and scroll independently, which is how the convention
   behaves: the nav list scrolls on its own, the pane scrolls on its own. */
.settings-page2{align-items:stretch}
.settings-page2>.setx-rail,.settings-page2>.setx-content,
.settings-page2>.set-body,.settings-page2>.setx-body{
  height:100%;max-height:100%;min-height:0;overflow-y:auto;scrollbar-width:thin}
/* The nav inherited flex-wrap:wrap from .seg. As a WRAPPING COLUMN its 25 items
   spilled into 5 side-by-side columns 1465px wide (measured at x 42/338/625/
   913/1201) inside a 307px rail, so everything past item 11 was clipped out of
   existence. One column, natural height, rail scrolls. */
.settings-page2 .seg.setx-tabs{flex-wrap:nowrap;flex:none;max-height:none;overflow:visible}
.settings-page2 .setx-rail-top{flex:none}
.settings-page2 .setx-tabs .seg-btn{flex:none}
.setx-rail{flex:0 0 340px;display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--border-soft);background:var(--surface);overflow-y:auto;
  padding:18px 16px 24px;scrollbar-width:thin}
.setx-content{flex:1;min-width:0;overflow-y:auto;padding:34px 44px 60px}
.setx-content>div{max-width:920px;margin:0 auto}
.setx-topline{display:flex;align-items:center;justify-content:space-between}
.setx-back{display:inline-flex;align-items:center;gap:7px;border:0;background:none;
  color:var(--text-2);font-size:13px;font-weight:550;cursor:pointer;padding:2px 0}
.setx-back:hover{color:var(--text)}
.setx-back-ic{display:flex;line-height:0}
.setx-back-ic svg{width:14px;height:14px}
.setx-help{width:28px;height:28px}
.setx-title{margin:10px 0 14px;font-size:26px;font-weight:750;letter-spacing:-.02em}
.setx-search{width:100%;height:36px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);padding:0 12px;font-size:13px;margin-bottom:14px}
.setx-tabs{display:flex;flex-direction:column;gap:1px;background:none;border:0;padding:0}
.setx-tabs .seg-btn{justify-content:flex-start;height:34px;border-radius:8px;padding:0 10px;
  font-size:13px;font-weight:500;color:var(--text-2);background:none;border:0;gap:9px;text-align:left}
.setx-tabs .seg-btn:hover{background:var(--surface-2);color:var(--text)}
.setx-tabs .seg-btn.active{background:var(--surface-3);color:var(--text);font-weight:600}
.setx-group9{margin:16px 2px 6px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--placeholder)}
.setx-group9.setx-gident{display:flex;align-items:center;gap:9px;text-transform:none;
  letter-spacing:0;font-size:13.5px;color:var(--text);margin:20px 2px 8px}
.setx-gav{width:26px;height:26px;border-radius:50%;overflow:hidden;display:flex;
  align-items:center;justify-content:center;background:var(--surface-3);flex:none}
.setx-gav img,.setx-gav svg{width:100%;height:100%;object-fit:cover}
.setx-gav.setx-gco{border-radius:7px;background:var(--surface-2);border:1px solid var(--border-soft)}
.setx-gav.setx-gco svg{width:15px;height:15px}
.setx-gident b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.setx-logout{border:0;background:none;color:var(--tab-active);font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px}
.setx-logout:hover{text-decoration:underline}
@media (max-width:900px){.settings-page2{flex-direction:column;height:auto}
  .setx-rail{flex:none;border-right:0;border-bottom:1px solid var(--border-soft)}
  body.settings-takeover #content{height:auto;overflow:auto}}

/* Live-map layer pills (reference: Vehicles / Places / Vendors) */
.cc-layer-pill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  border-radius:999px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-pop)}
.cc-layer-pill svg{width:14px;height:14px}
.cc-layer-pill:hover{background:var(--surface-2);color:var(--text)}
.cc-layer-pill.on{background:var(--surface-3);color:var(--text);border-color:var(--border)}
.cc-layer-pill.on:first-of-type{cursor:default}
.cc-layer-pill[disabled]{opacity:.9}

/* ══ SHELL close-parity (reference anatomy) ════════════════════════════════════════
   Topbar carries the product logo hard left; the sidebar top is the ACCOUNT
   block (company name + workspace sub + menu), exactly the reference. */
.tb-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);
  margin:0 10px 0 2px;flex:0 0 auto}
.tb-brand .brand-mark{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;background:var(--text);color:var(--bg)}
.tb-brand-tx{font-size:15px;font-weight:750;letter-spacing:-.01em}
.side-account{display:flex;align-items:center;gap:6px;padding:10px 10px 8px 14px}
.side-acct-btn{flex:1;min-width:0;display:flex;align-items:center;border:0;background:none;
  color:var(--text);cursor:pointer;text-align:left;padding:4px 6px;border-radius:8px}
.side-acct-btn:hover{background:var(--surface-2)}
.side-acct-tx{min-width:0}
.side-acct-tx b{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.side-acct-tx b>span:first-child{overflow:hidden;text-overflow:ellipsis}
.side-acct-chev{display:flex;line-height:0;color:var(--muted);flex:none}
.side-acct-chev svg{width:12px;height:12px;transform:rotate(90deg)}
.side-acct-tx small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.layout.side-collapsed .side-acct-btn{display:none}
@media (max-width:980px){.tb-brand-tx{display:none}}

/* ══ LIST-PAGE ANATOMY (measured off the reference) ═══════════════════════
   The list pages are FLAT and FULL-BLEED: the table runs from the sidebar
   edge to the viewport edge with no card, no radius, no gutter - only a
   hairline under each 48px row. The page head / tabs / toolbar carry a 16px
   inset; the table itself carries none (its first cell pads 16px).
   Record pages and dashboards keep their cards - this applies to the list
   surface only (.page > .list-body tables and their siblings). */
.page{padding:14px 0 44px}
.page>.page-head,.page>.saved-views,.page>.list-tools,.page>.detail-tabs{margin-left:16px;margin-right:16px}
.page>.kpi-strip{margin:0 16px 12px}
.page>.page-head .page-title,.page-title{font-size:24px;font-weight:600;letter-spacing:-.015em}
.page>.list-body{margin:0}
.page>.list-body>.dtable-wrap,.page>.dtable-wrap{border:0;border-radius:0;background:transparent}
.page>.list-body>.dtable-wrap .dtable,.page>.dtable-wrap .dtable{background:transparent}
.page>.list-body>.dtable-wrap .dthr,.page>.dtable-wrap .dthr{background:var(--bg)}
.dtable-wrap{overflow-x:auto;scrollbar-width:thin}
.dtable-wrap::-webkit-scrollbar{height:9px}
.dtable-wrap::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:5px}
.dth{font-size:13px;font-weight:500;color:var(--text-2);padding:8px 6px}
.dth:first-child{padding-left:16px}
.dtd{font-size:13px;padding:8px 6px}
.dtd:first-child{padding-left:16px}
.dtr{border-bottom:1px solid var(--border-soft)}
.dtable-body .dtr{min-height:48px}
.dtable-body .dtr:hover{background:var(--surface)}
/* tabs are 40px in the reference */
.sv-tab,.sv-add{height:40px}
.detail-tab{height:40px}
/* the bulk bar and pager row stay inset with the toolbar */
.page>.list-body .dt-bulkbar{margin:0 16px}
/* count line under lists gets the same inset */
.page>.list-body .list-count,.list-count{padding:10px 16px;color:var(--muted);font-size:12.5px}
.dtr{position:relative}

/* ── RECORD RIGHT RAIL: BELOW THE ACTIONS, NEVER UNDER THEM ───────────────
   The utility rail (comments / photos / docs) was absolutely positioned at
   top:0 right:0, straight under the Watch/Edit/Add cluster - the Add caret
   collided with the first rail icon (reported broken). The reference hangs
   this rail at the right edge BELOW the action row, its own 44px lane. */
.detail-head{padding-right:56px}
.veh-rec-rail{position:absolute;top:52px;right:8px;border-left:0;padding-left:0;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:10px;
  padding:4px;gap:2px;box-shadow:var(--shadow-pop)}
.veh-rec-head{padding-right:0}

/* ── TABLE SCROLL MODEL (measured off the reference) ──────────────────────
   The list table is ONE scroll region that fills the viewport below the
   toolbar: it scrolls both ways, its horizontal scrollbar rides the bottom of
   the screen, and the header row is sticky (th{position:sticky}; no sticky
   first column). Same here on list pages. */
.page>.list-body>.dtable-wrap,.page>.dtable-wrap{
  overflow:auto;max-height:calc(100vh - 244px);scrollbar-width:thin}
.page>.list-body>.dtable-wrap .dthr,.page>.dtable-wrap .dthr{
  position:sticky;top:0;z-index:4;background:var(--bg)}

/* Primary actions carry the accent (reference: their green primaries; ours is
   the Claude orange the user chose) - "Add Vehicle", "Save", "Dispatch". */
.btn.btn-primary{background:var(--tab-active);border-color:var(--tab-active);color:#FFF}
.btn.btn-primary:hover{background:#C96A4B;border-color:#C96A4B}
.btn.btn-primary .btn-ic,.btn.btn-primary svg{color:#FFF}

/* ── ADD/EDIT VEHICLE: CONTINUOUS PAPER (reference behaviour) ─────────────
   One scrolling form column; the section rail stays put and scroll-spies. */
.veh-modal-shell{display:flex;align-items:flex-start;gap:18px}
.veh-modal-rail{position:sticky;top:8px;flex:0 0 210px;display:flex;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;padding:8px}
.veh-rail-btn{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border:0;
  border-radius:8px;background:none;color:var(--text-2);font-size:13px;font-weight:550;cursor:pointer;text-align:left}
.veh-rail-btn:hover{background:var(--surface-2);color:var(--text)}
.veh-rail-btn.on{background:color-mix(in srgb,var(--tab-active) 13%,transparent);color:var(--text);font-weight:650}
.veh-rail-btn.on svg{color:var(--tab-active)}
.veh-rail-btn svg{width:15px;height:15px}
/* the PAGE scrolls (reference); the rail is sticky against it, so scrolling
   the form never moves the section nav */
.veh-modal-panewrap.veh-editpage-panewrap{flex:1;min-width:0}
.veh-modal-rail{top:70px}
.veh-form-sec{margin-bottom:26px}
.veh-form-sec-t{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--border-soft)}
.veh-form-sec:first-child .veh-form-sec-t{margin-top:0}

/* Row-kebab menus (reference): label left, glyph hard right. */
.wv-pop .top-pop-row,.top-pop .top-pop-row{display:flex;align-items:center;gap:12px}
.wv-pop .top-pop-row>span:first-child,.top-pop .top-pop-row>span:first-child{order:2;margin-left:auto;color:var(--muted)}
.wv-pop .top-pop-row>span:last-child,.top-pop .top-pop-row>span:last-child{order:1}
.wv-pop .top-pop-row>span:first-child svg,.top-pop .top-pop-row>span:first-child svg{width:14px;height:14px}

/* Fleet Map tab strip (the second reference point's Fleet View: Live | History | Vehicles | Trips) */
.map-tabs{margin:0;padding:0 16px;background:var(--bg);flex:none}
.cc-wrap{display:flex;flex-direction:column}
.cc-wrap>.cc-body{flex:1;min-height:0}

/* Work Orders status views (reference dots) + the list|calendar toggle */
.wo-views{margin:0 16px 2px;border-bottom:1px solid var(--border-soft)}
.wo-vt{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.wo-vt .vt-btn{width:34px;height:30px;display:flex;align-items:center;justify-content:center;
  border:0;background:var(--surface);color:var(--text-2);cursor:pointer}
.wo-vt .vt-btn+.vt-btn{border-left:1px solid var(--border-soft)}
.wo-vt .vt-btn.on{background:var(--surface-3);color:var(--text)}
.wo-vt .vt-btn svg{width:15px;height:15px}

/* ============================================================
   RECORD OVERVIEW (reference record anatomy): metric cards with a shared
   date-range control, attention cards with big stat pairs + View All, and
   the right-hand Comments panel. Only the colours are ours.
   ============================================================ */
.vpage-veh-detail .rec-layout{grid-template-columns:minmax(0,1fr) 360px}
@media(max-width:1100px){.vpage-veh-detail .rec-layout{grid-template-columns:1fr}}
.rec-main{display:flex;flex-direction:column;gap:14px}
.rec-main>.card{margin:0}
.vo-card .card-head,.attn-card .card-head{align-items:center}
.vo-range{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);font-size:12.5px;font-weight:650;padding:5px 10px;cursor:pointer}
.vo-range:hover{background:var(--surface-2)}
.vo-range svg{width:13px;height:13px;color:var(--muted)}
.vo-stats{display:flex;gap:34px;padding:2px 16px 8px}
.vo-stat-l{font-size:12px;color:var(--muted);font-weight:650}
.vo-stat-v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.vo-legend{padding:6px 16px 14px;display:flex;flex-direction:column;gap:7px}
.vo-leg-row{display:flex;align-items:center;gap:9px;font-size:13px}
.vo-leg-row b{margin-left:auto;font-weight:750}
.vo-dot{width:9px;height:9px;border-radius:50%;flex:none}
.vo-chart{padding:4px 16px 8px}
.attn-acts{display:flex;align-items:center;gap:10px}
.attn-stats{display:flex;gap:44px;padding:4px 16px 10px}
.attn-n{font-size:26px;font-weight:850;letter-spacing:-.02em;line-height:1.1}
.attn-n.danger{color:var(--danger)}.attn-n.warn{color:var(--warn)}.attn-n.ok{color:var(--ok)}
.attn-l{font-size:12px;color:var(--muted);font-weight:650;margin-top:2px}
.attn-card .hist-list{padding:0 6px 6px}
.cmt-card{position:sticky;top:8px;display:flex;flex-direction:column;max-height:calc(100vh - 240px)}
.cmt-feed{flex:1;overflow:auto;padding:4px 14px}
.cmt-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  color:var(--muted);font-size:13.5px;padding:38px 26px}
.cmt-empty-ic svg{width:44px;height:44px;color:var(--tab-active)}
.cmt-card .act-input{margin:10px 14px 14px}
/* the click-to-log meter reads as a dotted-underline value everywhere,
   not as a raw button (it looked like a stray input inside Fields) */
.fc-v .veh-meter-link{background:none;border:none;padding:0;color:var(--text);font:inherit;
  font-weight:650;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.fc-v .veh-meter-link:hover{color:var(--tab-active)}

/* ============================================================
   METRIC PARITY PASS (numbers probed off the live reference record page):
   13px Inter-first body, 48px record tab strip with 400-weight labels
   (600 when active), 13px back link, 8px card radius, roomier field rows,
   24px/600 record titles. Colours stay ours.
   ============================================================ */
body{font-size:13px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.veh-tabs{height:48px}
.veh-tab{height:48px;font-weight:400}
.veh-tab.on{font-weight:600}
.back-btn{font-size:13px}
.card{border-radius:8px}
.fc-row{padding-top:14px;padding-bottom:14px}
.detail-title,.page-title{font-size:24px;font-weight:600}

/* ============================================================
   CELL CLIPPING: a table cell must never paint over its neighbour. Long
   nowrap content clips (ellipsis where an element carries the text); the
   actions cell stays visible so row menus can escape.
   ============================================================ */
.dtd{overflow:hidden}
.dtr>.dtd:last-child,.dtd.dtd-menu{overflow:visible}
.dtd>b,.dtd>a,.dtd>span:not(.badge),.dtd>div:not(.dt-veh){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtd .dt-veh{min-width:0;overflow:hidden}
.dtd .dt-veh-tx{min-width:0;overflow:hidden}
.dtd .dt-veh-tx b,.dtd .dt-veh-tx .dt-sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* flat stat tiles - the reference uses plain label+value strips, not neon
   dashboards; semantic tones stay on the value only */
.kpi{background:var(--surface);border:1px solid var(--border-soft);border-radius:8px;box-shadow:none;padding:14px 16px}
.kpi .kpi-val{font-size:22px;font-weight:800;letter-spacing:-.02em}
.kpi .kpi-ic{width:30px;height:30px;border-radius:8px;background:var(--surface-2);color:var(--muted)}
.kpi .kpi-delta{font-size:11px;font-weight:700}

/* ============================================================
   GLOBAL FLATTEN: record-tab field TILES become reference field ROWS
   (label column + value, hairline separators) - same anatomy as the
   Fields card. Kills the last of the old boxed-tile design everywhere
   (.detail-grid is used across record tabs).
   ============================================================ */
.detail-grid{display:block;border:0;background:none;gap:0}
.detail-grid>.detail-cell{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;
  gap:8px;background:none;border:0;border-bottom:1px solid var(--border-soft);border-radius:0;
  padding:13px 16px;box-shadow:none}
.detail-grid>.detail-cell:last-child{border-bottom:0}
.detail-cell .detail-l{font-size:13px;color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0;margin:0}
.detail-cell .detail-v{font-size:13px;font-weight:600}
/* KPI strip labels must truncate, never collide */
.maint-kpi{min-width:150px}
.maint-kpi span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* record right-rail icons must not sit on the Comments card */
.vpage-veh-detail .rec-side{margin-right:46px}
.head-btns9{display:inline-flex;gap:10px;align-items:center}
/* composite cells (date + badge) must not ellipsize the badge away - let
   them wrap onto a second line inside the 48px row instead */
.dtd>span:has(.badge){white-space:normal;line-height:1.35}

/* ============================================================
   STAT TILES, FINAL WORD: flat reference tiles. Values sit in the normal
   text colour (danger stays red - an alert count must read as one);
   deltas are quiet text, not pills; no top-edge highlight.
   ============================================================ */
.kpi{box-shadow:none!important;background:var(--surface)!important;background-image:none!important;
  border:1px solid var(--border-soft)!important;border-radius:8px!important}
.kpi::before,.kpi::after{display:none!important}
.kpi .kpi-val,.kpi.kpi-ok .kpi-val,.kpi.kpi-info .kpi-val,.kpi.kpi-warn .kpi-val,
.kpi.kpi-ok b,.kpi.kpi-info b,.kpi.kpi-warn b{
  color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
.kpi.kpi-danger .kpi-val,.kpi.kpi-danger b{color:var(--danger)!important;-webkit-text-fill-color:var(--danger)!important}
.kpi .kpi-delta{background:none!important;border:0!important;padding:0!important;
  font-size:11px!important;font-weight:700!important;color:var(--muted)!important}
.kpi .kpi-delta.tone-up{color:var(--ok)!important}
.kpi .kpi-delta.tone-down{color:var(--danger)!important}
.kpi .kpi-label{color:var(--muted);font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:none}
/* the reference has no floating AI assistant - hide Max everywhere */
.max-fab,.max-panel,.max-fab-label,#max-fab{display:none!important}
.sv-save9{margin-left:auto}
/* side-column field rows: the 220px label column belongs to WIDE panes -
   in a 300px side card it left the value ~40px and money wrapped vertically */
.rec-side .detail-cell,.side-card .detail-cell{grid-template-columns:1fr auto}
.rec-side .detail-cell .detail-v,.side-card .detail-cell .detail-v{white-space:nowrap;text-align:right}
/* record header: icon tile sits BESIDE the title, never above it */
.detail-head-main{display:flex;align-items:center;gap:14px;min-width:0}
.detail-head-tx{min-width:0}

/* ============================================================
   INVESTOR POLISH (reference separation rules): cards are FLAT - one
   surface, one hairline border, no gradients, no glows, no top-light
   line, no decorative dots. The dashboard grid gets real gutters so
   widgets never touch the sidebar. Widget heads get the reference
   hairline under the title.
   ============================================================ */
.card,.row,.dtr{background-image:none!important;box-shadow:none!important}
.card::before,.card::after,.dw::before,.dw::after,.row::before{display:none!important}
.dash-ops{padding-left:16px;padding-right:16px}
.dash-ops .page-head{padding-left:0;padding-right:0}
.dw>.card-head{border-bottom:1px solid var(--border-soft);padding-bottom:12px}
/* hairline discipline: separators come from borders, never lighter fills */
.card-head{background:none}
/* the record tab strip overflows into More - never show a scrollbar track */
.veh-tabs{overflow-x:auto;scrollbar-width:none}
.veh-tabs::-webkit-scrollbar{display:none}

/* ============================================================
   USER BUG SWEEP (9 screenshots) - universal fixes
   ============================================================ */
/* 1. the row "..." is a NORMAL cell: scrolls with the table, no floating
   chip, no shadow, no background slab */
.dtd-menu,.dtd:last-child{position:static!important;box-shadow:none!important;background:transparent!important}
.dtr:hover .dtd-menu,.dtr:hover .dtd:last-child{background:transparent!important}
.dthr .dtd:last-child,.dthr .dth:last-child{background:transparent!important}
/* 2. toolbars sit on the page - never sticky slabs with their own fill */
.list-tools{position:static!important;background:transparent!important}
.saved-views{position:static!important;background:transparent!important}
/* 3. every dropdown trigger: label + chevron-DOWN at the right */
.pop-caret svg{width:12px;height:12px;transform:rotate(90deg)}
/* 4. topbar global search: one rounded field, "All ⌄" inside its RIGHT end,
   vertically centred (the chip's box + stray "<" are gone) */
.tb-scope{background:transparent;border-right:0;order:3;padding:0 14px 0 8px;gap:5px;
  color:var(--muted);align-items:center;border-left:1px solid var(--border)}
.tb-scope svg{width:12px;height:12px;transform:rotate(90deg);margin:0}
.tb-search>svg{order:0}
.tb-search input{order:1}
/* 5. collapsed sidebar: 64px rail, icons centred and whole, animated */
.sidebar{transition:width .18s ease}
.layout.side-collapsed .nav-item,.layout.side-collapsed .nav-grp{
  justify-content:center!important;padding:10px 0!important;width:auto!important;margin:0 4px}
.layout.side-collapsed .nav-ico{margin:0!important}
.layout.side-collapsed .nav{overflow-x:hidden}
.layout.side-collapsed .gs-card{padding:10px 0;justify-content:center}
/* 6. record pages breathe: 24px gutters (reference air) */
.detail-page{padding-left:16px!important;padding-right:16px!important}
.page>.page-head,.page>.saved-views,.page>.list-tools,.page>.detail-tabs{margin-left:16px;margin-right:16px}
.detail-page>.page-head,.detail-page>.saved-views,.detail-page>.list-tools,.detail-page>.detail-tabs{margin-left:0;margin-right:0}
/* 7. record right-rail never overlaps content or actions */
.vpage-veh-detail .detail-tabbody{padding-right:64px}
.detail-tabbody .hist-row{padding-left:16px;padding-right:16px}
.detail-tabbody .tab-act{margin-right:64px}
/* fuel entry view: stats card (big value + unit, red delta line) */
.fe-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 14px;padding:16px}
.fe-stat-l{font-size:12px;color:var(--muted);font-weight:650}
.fe-stat-v b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.fe-unit{font-size:12px;color:var(--muted)}
.fe-delta{display:block;font-size:11.5px;font-weight:700;margin-top:2px}
.fe-delta.up,.fe-delta.down{color:var(--danger)}
.fe-delta.flat{color:var(--muted)}
/* notifications drawer rows */
.notif-tabs9{margin:0 0 8px}
.notif-list9{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.notif-list9 .top-pop-note{width:100%;text-align:left}
/* search fields: icon + placeholder on one centred line, everywhere */
.list-search{display:flex;align-items:center}
.list-search svg{flex:none;width:14px;height:14px}
.list-search input,.list-search .input{height:100%;line-height:normal;align-self:center}
.tb-scope-chev{display:inline-flex;align-items:center}

/* ============================================================
   SEVEN-BUG BATCH (user screenshots)
   ============================================================ */
/* 6. topbar scope: plain right chevron ">" as requested, aligned */
.tb-scope svg,.tb-scope-chev svg{transform:none!important}
.tb-scope{align-items:center}
/* 7. pop menu rows: labels LEFT, icons right-of-label only when present;
   never right-aligned text */
.top-pop-row,.pop-item{justify-content:flex-start!important;text-align:left!important}
.top-pop-row>span:first-child{order:0!important;margin-left:0!important}
.top-pop-row .pop-item-ic,.top-pop-row>span:has(svg):last-child{order:2;margin-left:auto}
.pop-menu{min-width:180px;max-width:280px}
/* search hint: icon + placeholder centred on one line, everywhere */
.list-search{align-items:center!important;height:38px}
.list-search input,.list-search .input{height:auto!important;padding-top:0!important;
  padding-bottom:0!important;line-height:normal!important;align-self:center;background:none;border:0}
/* collapsed sidebar: no dark ghost boxes, even rhythm, visible toggle */
.layout.side-collapsed .side-brand{display:none}
.layout.side-collapsed .side-collapse{color:var(--text-2)}
.layout.side-collapsed .nav>*{margin:2px 4px}
/* the trips date pill is the same pill as every other filter */
.range-pick9{display:inline-flex}
/* collapsed rail: inactive icons were near-invisible (muted-on-dark with no
   label to carry them) - the rail always shows clearly readable icons */
.layout.side-collapsed .nav-item,.layout.side-collapsed .nav-grp{color:var(--text-2)!important;opacity:1!important}
.layout.side-collapsed .nav-ico{color:inherit!important;opacity:1!important}
.layout.side-collapsed .nav-ico svg{width:20px;height:20px}

/* MOBILE (verified at 375px in a real viewport): the record page's floating
   icon rail measured 327px of a 375px screen. It is hidden below 760px -
   nothing is lost: the Comments card sits in the (single-column) main flow
   and Photos/Documents live in the record's + Add menu. */
@media(max-width:760px){
  .veh-rec-rail{display:none!important}
  .vpage-veh-detail .detail-tabbody{padding-right:0}
  .detail-tabbody .tab-act{margin-right:0}
  .vpage-veh-detail .rec-side{margin-right:0}
  .detail-page{padding-left:14px!important;padding-right:14px!important}
  .page>.page-head,.page>.saved-views,.page>.list-tools,.page>.detail-tabs{margin-left:14px;margin-right:14px}
  .dash-ops{padding-left:14px;padding-right:14px}
  .fe-stats{grid-template-columns:repeat(2,1fr)}
  .detail-grid>.detail-cell{grid-template-columns:1fr;gap:2px}
  .rec-side .detail-cell,.side-card .detail-cell{grid-template-columns:1fr auto}
}

/* ============================================================
   TABLET NAVIGATION BLOCKER (found at a real 768px viewport): drawer mode
   starts at 980px but the hamburger only appeared under 760px, so between
   761-980px the sidebar sat off-canvas with NO way to open it - navigation
   was unreachable. The trigger now matches the drawer breakpoint exactly.
   ============================================================ */
@media (max-width:980px){
  .menu-btn{display:inline-flex!important}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:var(--z-drawer);
    transform:translateX(-104%);transition:transform var(--dur) var(--ease);
    box-shadow:24px 0 64px rgba(0,0,0,.5)}
  .sidebar.open{transform:none}
  .drawer-overlay{display:block;position:fixed;inset:0;z-index:calc(var(--z-drawer) - 1);
    background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity var(--dur-fast)}
  body.drawer-open .drawer-overlay{opacity:1;pointer-events:auto}
}
/* the open drawer must beat every legacy transform rule (measured: class was
   applied but a lower-cascade rule still held the sidebar off-canvas) */
@media (max-width:980px){
  .sidebar{transform:translateX(-104%)!important}
  .sidebar.open{transform:translateX(0)!important}
}

/* ============================================================
   FORM SETTINGS ROWS (reported: label + helper text ran together, toggle
   stacked under the text, and an inherited value rendered as an empty
   input box). Reference pattern: label + sub on the left, control right,
   hairline between rows, plain group headers with no decorative bar.
   ============================================================ */
.veh-switch-row,.veh-ro-row9{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px 0;border-bottom:1px solid var(--border-soft)}
.veh-switch-tx,.veh-ro-tx9{min-width:0;display:block}
.veh-switch-tx b,.veh-ro-tx9 b{display:block;font-size:13.5px;font-weight:650;line-height:1.35}
.veh-switch-tx span,.veh-ro-tx9 span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.veh-ro-val9{flex:none;font-size:13.5px;font-weight:650;color:var(--text)}
/* field-group headers: plain text, no accent bar (the reference has none) */
.section-label{position:relative;padding-left:0;margin:20px 0 10px;font-size:13px;font-weight:700;
  color:var(--text);letter-spacing:0;text-transform:none;
  border-bottom:1px solid var(--border-soft);padding-bottom:8px}
.section-label::before{display:none!important}
/* vehicle record: labels row + "Edit Labels" chip (reference header pattern) */
.veh-labels-row9{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.veh-editlabels9{display:inline-flex;align-items:center;gap:6px;background:none;
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);
  font-size:12px;font-weight:650;padding:4px 9px;cursor:pointer}
.veh-editlabels9:hover{background:var(--surface-2);color:var(--text)}
.veh-editlabels9 svg{width:12px;height:12px}

/* ============================================================
   FORM VISUAL PARITY (metrics measured off the standard New Vehicle form,
   not eyeballed): labels 13px NORMAL weight in full-contrast text (ours
   were 12.5px bold grey), inputs 32px tall with 6px radius and 13px text
   (ours 34px/8px/13.5px), section titles 20px with no underline, rail
   items 13px weight-500 with 12px/16px padding in a 236px panel.
   ============================================================ */
.field-label,.field-wrap>label{font-size:13px!important;font-weight:400!important;
  color:var(--text)!important;margin-bottom:4px!important;letter-spacing:0}
.field .input,.field input,.field select,.field textarea,
.form-grid .input,.form-grid input,.form-grid select{
  font-size:13px!important;border-radius:6px!important}
.field .input,.field input:not([type=checkbox]):not([type=radio]),.field select,
.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid select{
  height:32px!important;padding:4px 8px!important}
.field textarea{padding:6px 8px!important;font-size:13px!important}
.field-hint{font-size:12px;margin-top:4px}
.veh-form-sec>h2{font-size:20px!important;font-weight:600!important;
  border-bottom:0!important;padding-bottom:0!important;margin-bottom:14px!important}
.veh-modal-rail,.veh-form-rail{width:236px;border-radius:8px;padding:6px}
.veh-rail-btn{font-size:13px!important;font-weight:500!important;padding:12px 16px!important;
  height:auto!important;justify-content:flex-start;border-radius:6px}
.veh-rail-btn.on{font-weight:600!important}
/* labels picker inside a form field */
.veh-labelpick9{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:32px}

/* ============================================================
   LIST TABLE METRICS (measured off the standard Vehicles list):
     row height        48px   (ours was 69px - the biggest visual tell)
     header cell       37px, 13px/500, FULL-contrast text (ours muted grey)
     cell padding      8px 6px 8px 16px  (ours had 6px vertical)
     page title        24px/600, letter-spacing NORMAL (ours -0.36px)
     search field      32px tall rounded rect (ours a 38px pill)
   ============================================================ */
.dtr{min-height:48px}
.dtr:not(.dthr) .dtd{padding:8px 6px 8px 16px;line-height:1.3}
.dthr{min-height:37px}
.dthr .dth,.dthr>div{color:var(--text)!important;padding:8px 6px 8px 16px}
.page-title,.detail-title{letter-spacing:normal!important}
.dt-veh-tx b,.dt-veh-tx .dt-sub{line-height:1.25}
.dt-veh-tx .dt-sub{font-size:11.5px}
.list-search{height:32px!important;border-radius:6px!important}
.list-search input,.list-search .input{height:30px!important}
/* two-line numeric cells (value over unit) stay inside the 48px row */
.dtd .num2 b{line-height:1.2}
.dtd .num2 .dt-sub{line-height:1.15;font-size:11px}
/* the row was adding 12px top+bottom on TOP of each cell's own 8px, plus a
   32px checkbox - that is what made rows 73px instead of their 48px */
.dtr,.dtr:not(.dthr){padding-top:0!important;padding-bottom:0!important}
.dtr:not(.dthr) .dtd{align-items:center}
.dtd input[type=checkbox],.dtr .dt-check,.dtr .dtd:first-child input{width:16px;height:16px}
.dtd .dt-veh-ic,.dtd .dt-veh img,.dtd .veh-thumb9{width:28px;height:28px}
.dtd .badge{line-height:1.2}

/* ============================================================
   RECORD PAGE METRICS (measured off the standard vehicle record):
     record tab      14px / weight 500  (ours 13px / 700 - too heavy+small)
     card title      18px / 600         (ours 15px / 700)
     field label     13px, muted        (ours 12.5px)
   Row height (48px) and tab-strip height (48px) already matched.
   ============================================================ */
.veh-tab,.detail-tab{font-size:14px!important;font-weight:500!important}
.veh-tab.on,.detail-tab.on{font-weight:600!important}
.rec-main .card-head h3,.fields-card h3,.wo-card .card-head h3,.attn-card .card-head h3,
.cmt-card .card-head h3,.side-card h4{font-size:18px!important;font-weight:600!important}
.fc-l{font-size:13px!important}
.fc-v{font-size:13px}

/* ============================================================
   CHROME + CONTROL METRICS (measured off the standard app):
     topbar        39px   (ours 56px - 40% taller)
     nav item      36px, 14px/500      (ours 34px, 13.5px/400)
     nav child     28px, 13px/500      (ours 13.5px/600)
     button        32px, 13px/500, 6px radius, 0 12px pad
                          (ours 28px, 11.5px/600, 8px radius)
     icon button   32px, 6px radius    (ours 8px radius)
   ============================================================ */
.topbar{height:59px;min-height:59px;padding-top:0;padding-bottom:0}
/* CORRECTION: their topbar is 59px. The 39px I first measured was the
   inner search row, not the bar - a screenshot side-by-side showed ours
   visibly shorter than this. */
.nav-item,.nav-grp{height:36px;font-size:14px;font-weight:500}
.nav-kids .nav-item,.nav-sec .nav-kids .nav-item{height:28px;font-size:13px;font-weight:500}
.nav-item.active,.nav-grp.open{font-weight:600}
.btn{height:32px;font-size:13px;font-weight:500;border-radius:6px;padding:0 12px}
.btn.btn-sm,.btn-sm{height:28px;font-size:12.5px;padding:0 10px}
.icon-btn{border-radius:6px}
.badge{font-size:12px;font-weight:500}
/* residual control gaps found by re-measuring inside the content area:
   page-action icon buttons kept var(--r-sm)=8px, and the list-toolbar
   columns/export buttons were 28px where the convention are 32px. Their button
   horizontal padding is 8px, not 12px. */
.page-actions .icon-btn,.page-actions .dash-fs,.dash-add-btn{border-radius:6px}
.dt-tools .icon-btn,.dt-cols,.dt-export,.dt-grp{height:32px;min-height:32px}
.btn{padding:0 8px}
.btn.btn-lg,.btn-lg{padding:0 12px}

/* ── PAGE GUTTER: cards must never touch the sidebar ──────────────────────
   .page carried 0 horizontal padding so list tables could run full-bleed,
   and each inset child re-added 24px by hand. Any page whose body was a
   card/grid instead of a table therefore sat flush against the sidebar
   (fuel, notifications, billing all measured a card left edge at x=240 with
   the sidebar ending at 240). Invert it: the gutter lives on .page, and the
   full-bleed list surface cancels it with a negative margin. */
.page{padding-left:16px;padding-right:16px}
.page>.page-head,.page>.saved-views,.page>.list-tools,.page>.detail-tabs{margin-left:0;margin-right:0}
.page>.kpi-strip{margin-left:0;margin-right:0}
.page>.list-body,.page>.dtable-wrap{margin-left:-16px;margin-right:-16px}
/* surfaces that are intentionally edge-to-edge full height */
.page-map,.cc-page,.content>.page.cc-page{padding-left:0!important;padding-right:0!important}
.dash-ops{padding-left:16px;padding-right:16px}
@media (max-width:760px){.page{padding-left:14px;padding-right:14px}
  .page>.list-body,.page>.dtable-wrap{margin-left:-14px;margin-right:-14px}}
/* mobile settings exit: the takeover hides sidebar + topbar, so the settings
   list needs its own way back (desktop has it in the rail, which mobile does
   not render). */
.setm-exit9{margin:0 0 10px;align-self:flex-start;min-height:32px;padding:0 8px 0 4px}
/* the toolbar order: Search, Type, Group, Filters, [table bar], Save View.
   The table bar is appended after render, so order keeps Save View last. */
.list-tools>.dt-bar,.list-tools>.dt-bar-intools{order:90}
.list-tools>.sv-last9{order:99;flex:none}
.gear-block.gear-grp9 .dt-grp,.gear-block.gear-lay9 .view-toggle{width:100%}
.gear-block.gear-lay9 .view-toggle{display:inline-flex}
/* page title + section-switcher chevron (the convention: "Vehicles v") */
.page-title-row9{display:flex;align-items:center;gap:2px}
.pt-switch9{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:0;background:none;color:var(--text-2);border-radius:6px;cursor:pointer;padding:0}
.pt-switch9:hover{background:var(--surface-2);color:var(--text)}
.pt-switch9 svg{width:18px;height:18px}
.pop-head9{padding:8px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
/* the title switcher chevron points DOWN to this spec (our base chevron glyph
   points right because the nav uses it for expand arrows) */
.pt-switch9 svg{transform:rotate(90deg)}
.pop-item-ic:empty{width:14px;flex:none}

/* ── screenshot-diff fixes on the list surface (compared side by side with
      the standard vehicle list at the same window size) ──────────────────── */
/* 1. the Filters glyph reads too small at 14px — 18px is the target */
.wv-fcount svg{width:18px;height:18px}
/* 2. row thumbnail: the convention is a neutral rounded TILE holding the photo, not an
      accent-tinted circle */
.dt-veh-ic{width:28px;height:28px;border-radius:4px;background:var(--surface-2);color:var(--text-2)}
.dt-veh-ic svg{width:15px;height:15px}
.dt-veh-ic.veh-thumb-img{width:28px;height:28px;flex:0 0 28px;border-radius:4px}
/* 3. no count line under a table that already shows "1 - 2 of 2" in its bar */
.page:has(.dt-bar) .list-count{display:none}
/* 4. their table scroller uses a thin overlay bar with NO stepper buttons -
      on Windows ours was drawing native arrow buttons at both ends */
.dtable-wrap::-webkit-scrollbar{height:8px}
.dtable-wrap::-webkit-scrollbar-button{display:none;width:0;height:0}
.dtable-wrap::-webkit-scrollbar-track{background:transparent}
.dtable-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.dtable-wrap::-webkit-scrollbar-thumb:hover{background:var(--surface-3)}

/* ── dashboard screenshot diff ─────────────────────────────────────────────
   Specified here, TRANSPARENT border, and
   box-shadow 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
   the head has NO rule under the title (0px). I had added a hairline there
   and forced box-shadow:none globally, which is backwards. On a near-black
   surface a black shadow is invisible, so the hairline stays for edge
   definition - it does the job their shadow does on white - but the head
   divider they do not have is gone. */
.dw>.card-head{border-bottom:0;padding-bottom:0}
.dw,.dash-ops .card{box-shadow:0 1px 3px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.18)}
/* their dashboard caret is a plain glyph, not a bordered icon button */
.dash-title-row .dash-chev,.dash-title-row .dash-person{border:0;background:none;
  width:26px;height:26px;padding:0;color:var(--muted)}
.dash-title-row .dash-chev:hover,.dash-title-row .dash-person:hover{background:var(--surface-2);color:var(--text)}
.dash-title-row .dash-person svg{width:15px;height:15px}

/* ── record page: utility rail becomes a real column ──────────────────────
   It was position:absolute inside .detail-head at top:52/right:8, drawn as a
   bordered panel with a shadow - so it sat ON TOP of the tab strip and hid the
   last tabs. It should be a plain icon strip at the right edge of the BODY,
   starting below the tabs, with no panel chrome. */
.veh-body-row9{display:flex;align-items:flex-start;gap:10px}
.veh-body-row9>:first-child{flex:1;min-width:0}
/* sticky offset must clear the sticky tab strip (48px) or the rail rides up
   over the tabs once the record page is scrolled */
.veh-rec-rail{position:sticky;top:56px;right:auto;flex:0 0 40px;display:flex;flex-direction:column;
  align-items:center;gap:4px;background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.veh-rec-rail.collapsed .veh-rail-ic{display:none}
.vpage-veh-detail .detail-tabbody{padding-right:0}
.detail-tabbody .tab-act{margin-right:0}
/* record photo placeholder: neutral glyph, not the orange map pin */
.veh-photo-tile.veh-photo-ph9{display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-2)}
.veh-photo-tile.veh-photo-ph9 svg{width:34px;height:34px}

/* record Overview is TWO roughly equal columns on their side (measured ~567px
   each with a 16px gap), not main + narrow rail */
.vpage-veh-detail .rec-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1100px){.vpage-veh-detail .rec-layout{grid-template-columns:1fr}}

/* Fields card: collapsed groups with a name summary, matching the convention */
.fields-card .fc-search{width:auto;margin:0 16px 4px;height:36px}
.fields-card .fc-top{padding-bottom:10px}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:12px 16px;background:none;border:0;border-top:1px solid var(--border-soft);
  text-align:left;cursor:pointer;color:var(--text)}
.fc-head:hover{background:var(--surface-2)}
.fc-hd-tx9{display:flex;flex-direction:column;gap:2px;min-width:0}
.fc-hd-t9{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.fc-hd-s9{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-head .fc-caret svg{width:16px;height:16px;transform:none}
.fc-head.closed .fc-caret svg{transform:none}

/* a legacy .fc-head rule uppercased the group text and rotated the caret up;
   the convention is sentence case with a right chevron when collapsed, down when open */
.fields-card .fc-head .fc-hd-t9,.fields-card .fc-head .fc-hd-s9{text-transform:none;letter-spacing:0}
.fields-card .fc-head .fc-caret svg{transform:rotate(0deg)}
.fields-card .fc-head:not(.closed) .fc-caret svg{transform:rotate(90deg)}

/* the legacy rotation is on the .fc-caret SPAN, not the svg - the svg computed
   to identity while still rendering an up-chevron. Convention: right when
   collapsed, down when open. */
.fields-card .fc-head .fc-caret{transform:rotate(0deg);display:inline-flex}
.fields-card .fc-head:not(.closed) .fc-caret{transform:rotate(90deg)}

/* ── Add/Edit form: measured against their New Vehicle page ───────────────
   card 741px wide, radius 8, border 0, white;  section title 18px/600
   (I had it at 20px);  input 32px/6px/13px;  label 13px/400;
   rail 236px wide with 44px items and NO fill on the active row - just the
   accent colour on its text and icon. */
.veh-modal-pane{background:var(--surface);border:1px solid var(--border-soft);
  border-radius:8px;padding:16px 16px 20px}
.veh-form-sec>h2,.section-label{font-size:18px!important;font-weight:600!important;
  letter-spacing:-.01em;border-bottom:0!important;padding-bottom:0!important;color:var(--text)}
.section-label{margin:18px 0 12px;text-transform:none}
.veh-form-sec:first-child>.section-label:first-child{margin-top:0}
.veh-rail-btn{height:44px!important;padding:0 16px!important}
.veh-rail-btn.on{background:none!important;color:var(--tab-active)!important}
.veh-rail-btn.on svg{color:var(--tab-active)}

/* inputs measured 34px in the form card against their 32px */
.veh-modal-pane input:not([type=checkbox]):not([type=radio]),
.veh-modal-pane select,.veh-modal-pane textarea{min-height:32px;height:32px}
.veh-modal-pane textarea{height:auto;min-height:64px}

/* ── menus specified here
   panel 289px, radius 8px, padding 4px,
   shadow 0 12px 24px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.05);
   item text 13px/400; action icon at the TRAILING edge. */
.pop-menu,.top-pop{min-width:240px;max-width:320px;border-radius:8px;padding:4px;
  box-shadow:0 12px 24px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.25)}
.pop-item,.top-pop-row{font-size:13px;font-weight:400}
.top-pop-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.tpr-tx9{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpr-ic9{flex:none;display:inline-flex;color:var(--muted)}
.tpr-ic9 svg{width:15px;height:15px}
.top-pop-row:hover .tpr-ic9{color:var(--text)}

/* their Save View menu: bold current-view name (16px/600) + muted helper line */
.pop-bighd9{padding:10px 12px 4px;font-size:16px;font-weight:600;color:var(--text)}
.pop-note9{padding:0 12px 10px;font-size:13px;color:var(--muted);line-height:1.4}
.pop-menu .pop-sep{height:1px;background:var(--border-soft);margin:2px 0;border:0}

/* Not Found, modelled in this spec: centred, red title, two explanatory lines */
.nf-page9{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding-top:48px;gap:6px}
.nf-title9{font-size:30px;font-weight:600;color:var(--danger);margin:0}
.nf-sub9{font-size:17px;font-weight:600;color:var(--text);margin:6px 0 0}
.nf-hint9{font-size:14px;color:var(--text-2);margin:6px 0 0}
.nf-acts9{display:flex;gap:8px;margin-top:14px}

/* ── label picker popover, specified here
   325px wide, radius 8, padding 0; helper line 13px/400; a bordered combobox;
   "No options" when nothing matches; footer right-aligned with an
   accent-coloured Cancel and a filled Save that is disabled until something
   actually changes. */
.lbl-pop9{width:325px;max-width:325px;min-width:325px;padding:0;overflow:hidden}
.lbl-hint9{margin:0;padding:14px 16px 10px;font-size:13px;color:var(--text)}
.lbl-box9{margin:0 16px;border:1px solid var(--border);border-radius:6px;padding:3px 6px}
.lbl-box9 input{width:100%;height:24px;border:0;background:none;font-size:13px;padding:0;color:var(--text)}
.lbl-box9:focus-within{border-color:var(--tab-active);box-shadow:0 0 0 3px color-mix(in srgb,var(--tab-active) 22%,transparent)}
.lbl-list9{max-height:180px;overflow-y:auto;padding:8px 8px 4px}
.lbl-row9{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:0;background:none;
  border-radius:6px;font-size:13px;color:var(--text);text-align:left;cursor:pointer}
.lbl-row9:hover{background:var(--surface-2)}
.lbl-tick9{width:14px;flex:none;display:inline-flex;color:var(--tab-active)}
.lbl-tick9 svg{width:14px;height:14px}
.lbl-new9{color:var(--tab-active)}
.lbl-none9{margin:0;padding:18px 8px;text-align:center;font-size:13px;color:var(--muted)}
.lbl-foot9{display:flex;justify-content:flex-end;align-items:center;gap:8px;
  padding:10px 12px;border-top:1px solid var(--border-soft)}
.lbl-foot9 .btn-ghost{color:var(--tab-active)}

/* ── centred dialogs, specified here
     panel radius 10px (ours 16)   title 18px/600 (ours 19/700)
     Cancel = accent-coloured TEXT (ours was muted grey)
     Save   = filled accent, 32px      footer right-aligned
   The panel is 672px for a one-field dialog; ours is 480px, which is the
   same proportion of a narrower window, so width is left alone. */
.modal{border-radius:10px}
.modal-head h3,.modal-hd h3,.modal-title,.modal>header h3{font-size:18px!important;font-weight:600!important;letter-spacing:-.01em}
.modal-actions .btn-ghost{color:var(--tab-active)}
.modal-actions .btn-ghost:hover{background:var(--surface-2);color:var(--tab-active)}

/* BUG from the Contacts column work (v467): the User Type cell had no nowrap,
   so "Standard User" wrapped character by character in a 130px column and blew
   the row up to 142px against their ~48. */
.dt-utype9{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-width:0;max-width:100%}
.dt-utype9>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-utype9 svg{width:14px;height:14px;flex:none}

/* Composite "date + badge" cells were stacking onto two lines (56px in a 48px
   row). That came from an earlier fix that let them WRAP so the badge would not
   be clipped. The convention keeps the value and its badge on ONE line, so the wrap is
   replaced with an inline-flex row that ellipsises instead. */
.dtd>span:has(>.badge){display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  min-width:0;max-width:100%;overflow:hidden}
.dtd>span:has(>.badge)>.badge{flex:none}

/* Contact Renewal Reminders: their tab strip carries a status dot and a count
   badge per tab (All | * Due Soon [1] | * Overdue [1]). */
.cr-tabs9{display:flex;align-items:center;gap:4px}
.cr-tabs9 .sv-tab{display:inline-flex;align-items:center;gap:7px}
.cr-dot9{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.cr-dot9.warn{background:var(--warn)}
.cr-dot9.danger{background:var(--danger)}
.cr-n9{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;background:var(--surface-3);color:var(--text-2);
  font-size:11.5px;font-weight:600}

/* their per-field history affordance: a clock-arrow at the row's trailing edge,
   only on rows whose history we can actually substantiate */
.fc-row.has-hist9{display:grid;grid-template-columns:1fr 1fr auto;align-items:center}
.fc-hist9{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:0;background:none;border-radius:6px;color:var(--muted);cursor:pointer;padding:0}
.fc-hist9:hover{background:var(--surface-2);color:var(--text)}
.fc-hist9 svg{width:16px;height:16px}

/* the group pill sits last in the toolbar on pages whose reference shows it there */
.list-tools>.dt-grp{order:95}

/* SEARCH HINT ALIGNMENT (reported repeatedly, on every tab): the magnifier is
   dead-centre but the input's text rode 7px HIGH - the input was 30px tall
   inside a 32px box with no line-height, so its placeholder never lined up with
   the icon. Making the input fill the box lets it centre its own text. */
.list-search input,.tb-search input,.fc-search input,.lbl-box9 input,
.list-search .input,.tb-search .input{height:100%;min-height:0;line-height:normal;
  padding-top:0;padding-bottom:0;align-self:stretch}
.list-search,.tb-search,.fc-search{align-items:center}

/* ── Add-Vehicle > Settings pane, matching their radio/checkbox layout ─────
   Their pane is two columns: the radio group on the left, the reading fields on
   the right. The old pill toggle is gone, and a checkbox hint now sits on its
   own line instead of being glued to the label. */
.set-two9{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 28px;margin-bottom:6px}
@media (max-width:820px){.set-two9{grid-template-columns:1fr}}
.radio-grp9{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.radio-row9{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);cursor:pointer;
  padding:4px 0}
.radio-row9 input[type=radio]{width:16px;height:16px;accent-color:var(--tab-active);margin:0;flex:none}
.check-row9{margin:10px 0 4px}
.check-lbl9{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);cursor:pointer}
.check-lbl9 input[type=checkbox]{width:16px;height:16px;accent-color:var(--tab-active);margin:0;flex:none}
.check-row9 .field-hint{margin:4px 0 0 25px}
.req9{color:var(--danger);font-style:normal;margin-left:3px}
.set-ro9{margin:8px 0 0;font-size:13px;color:var(--text)}

/* Reports table: their Report Type / Saved Reports headers do not collide and
   their descriptions WRAP to two or three lines instead of ellipsising. */
.rep-desc9{white-space:normal;display:block;line-height:1.45;max-height:none}
.vpage-reports .dtd,.rep-idx .dtd{align-items:flex-start;padding-top:12px;padding-bottom:12px}
.rep-idx .dth{white-space:nowrap}
.rep-idx .dtable-body .dtr{min-height:56px}
/* The no-photo placeholder is a FILLED glyph, so it needs no stroke - but this
   rule used to hit EVERY svg in those tiles. Stroke-based icons carry
   fill="none" stroke="currentColor", so forcing stroke:none left them with
   neither fill nor stroke: a completely invisible icon in a grey tile, which is
   what the blank squares on the Trips and Orders lists were. Scoped to the
   filled glyphs only (they declare fill="currentColor"). */
.dt-veh-ic svg[fill="currentColor"],.veh-photo-ph9 svg[fill="currentColor"]{stroke:none}

/* Reports rows: the convention let the NAME and DESCRIPTION wrap to 2-3 lines and grow
   the row. Our global cell rule clips with an ellipsis (right for dense lists,
   wrong here), so it is relaxed for this table only - wrapping instead of
   overflowing, so it cannot bleed into a neighbouring cell. */
.rep-idx .dtable-body .dtr{min-height:64px}
.rep-idx .dtd{white-space:normal;overflow:visible;text-overflow:clip;
  align-items:flex-start;padding-top:12px;padding-bottom:12px;line-height:1.45}
.rep-idx .dtd b,.rep-idx .dtd .tlink,.rep-idx .rep-desc9{white-space:normal;overflow:visible}
/* the description SPAN kept nowrap/ellipsis from a more specific cell rule -
   measured: cell was white-space:normal but the span was still nowrap */
.rep-idx .rep-desc9{white-space:normal!important;overflow:visible!important;
  text-overflow:clip!important;display:block}

/* ── reported bugs ────────────────────────────────────────────────────────
   1. TOGGLES rendered as a WHITE pill with a dark knob when ON. `.switch.on`
      used var(--accent), and --accent is WHITE in this theme - the same trap
      that once made every chart white. The on state is the brand colour. */
.switch.on{background:var(--tab-active);border-color:var(--tab-active)}
.switch.on .switch-knob{background:#fff}
.switch{width:40px;height:22px}
.switch-knob{width:16px;height:16px;top:2px;left:2px}
.switch.on .switch-knob{transform:translateX(18px)}
/* 2. the coloured swatch dot in widget value rows: the convention has none */
.leg-sw{display:none}
/* 3. the two big widget numbers collided - gap was 0 */
.dw-numpair{gap:26px}
.dw-numpair .np-num{white-space:nowrap}
/* a favourited report shows a FILLED golden star (it rendered an eye glyph) */
.rep-star.on{color:#F2B705}
.rep-star.on svg{fill:#F2B705;stroke:none}
/* every dropdown affordance is the same chevron, pointing the same way (down) */
.wv-fpill-chev svg,.pop-caret svg,.dt-grp svg:last-child,.wv-fcount .pop-caret svg{transform:rotate(90deg)}
.wv-fpill.on .wv-fpill-chev svg,.wv-fpill[aria-expanded=true] .wv-fpill-chev svg{transform:rotate(90deg)}

/* ── report page shell, matching their reference screenshots ───────────────
   breadcrumb "Reports / <Name>" with the actions on the right, then a filter
   bar carrying the Filters control, "N filters applied" and "Clear all". */
.rep-view9{padding-top:14px}
.rep-crumb9{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.rep-crumb-link9{background:none;border:0;padding:0;font-size:13px;font-weight:500;
  color:var(--tab-active);cursor:pointer}
.rep-crumb-link9:hover{text-decoration:underline}
.rep-crumb-sep9{color:var(--muted);font-size:13px}
.rep-crumb-cur9{font-size:13px;font-weight:500;color:var(--text)}
.rep-crumb-acts9{margin-left:auto;display:flex;align-items:center;gap:8px}
.rep-bar9{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rep-fcount9{font-size:13px;color:var(--muted)}
.rep-clear9{background:none;border:0;padding:0;font-size:13px;font-weight:500;
  color:var(--tab-active);cursor:pointer}
.rep-clear9:hover{text-decoration:underline}
/* on report pages their gear is a labelled "Columns" button */
.dt-cols-lbl9{height:32px;gap:6px;padding:0 10px}
.dt-cols-lbl9 .pop-caret svg{width:14px;height:14px;transform:rotate(90deg)}
.rep-bar9.list-tools{margin-bottom:10px;overflow:visible}

/* Report bar: the labelled "Columns" button is wider than the gear it replaced,
   so the pager arrows and the button overlapped. Give the hoisted bar real
   spacing and let it size to content instead of overlapping. */
.rep-bar9.list-tools{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.rep-bar9 .dt-bar,.rep-bar9 .dt-bar-intools{margin-left:auto;border-bottom:0;height:auto;
  padding:0;gap:12px;flex:none;display:flex;align-items:center}
.rep-bar9 .dt-pager{display:flex;align-items:center;gap:8px;flex:none}
.rep-bar9 .dt-tools{gap:8px;flex:none;margin-left:4px}
.rep-bar9 .dt-cols-lbl9{flex:none;white-space:nowrap}
/* measured: .dt-tools was 28px wide while the labelled Columns button needs
   ~96px, so the button overflowed its container and sat on the pager arrows */
.rep-bar9 .dt-tools{width:auto!important;min-width:0!important;flex:none}
.rep-bar9 .dt-cols-lbl9{width:auto!important;min-width:96px;height:32px!important;
  padding:0 10px!important;justify-content:center}
.rep-bar9 .dt-bar{width:auto!important;flex:none}
/* their report chart sits in its own card with a centred title above the table */
.rep-chart9{padding:16px 16px 8px;margin-bottom:14px}
.rep-chart-t9{text-align:center;font-size:14px;font-weight:500;color:var(--text-2);margin-bottom:10px}

/* Dashboard header row alignment (reported: "the filter is clearly not
   aligned"). MEASURED: the scope select wrapper was 48px tall sitting at top 73
   while the stamp, kebab and fullscreen were 32px at top 81, and Add Widgets was
   28px. Everything in that row is now 32px on one centre line. */
.page-actions{align-items:center}
.dash-scope-wrap{height:32px;display:flex;align-items:center}
.dash-scope-wrap select,.dash-scope-wrap .input{height:32px;min-height:32px;padding:0 28px 0 10px;
  font-size:13px;border-radius:6px}
.page-actions .dash-add-btn,.page-actions .btn{height:32px;min-height:32px}
/* rail clicks scroll to a section; this keeps its heading clear of the page head
   (and .mv-noanim must not kill the scroll animation the owner asked for) */
.veh-form-sec{scroll-margin-top:84px}
/* NOT scroll-behavior:smooth - this app kills CSS animations via .mv-noanim,
   which CANCELLED every programmatic scroll: scrollTop assignments were
   silently dropped with no scroll event. Proven by setting the property to
   auto inline, after which the same assignment worked instantly. The rail
   animates in JS instead (smoothScrollTo9). */
#content{scroll-behavior:auto}

/* ── Fleet Map controls ────────────────────────────────────────────────────
   Fullscreen sat transparent at 34x28 while the zoom buttons were an opaque
   34x34 tile: .btn-ghost (transparent, no border) outranked the earlier
   .cc-map-side .cc-fs rule. Matched to the zoom tile, and the zoom pair now
   sits directly beneath it with a gap. Map Options moved to the bottom-right,
   where the zoom pair used to be. */
.cc-map .cc-map-side.cc-side-top{top:12px;right:12px;bottom:auto;gap:10px}
.cc-map .cc-map-side .cc-fs.btn,
.cc-map .cc-map-side .cc-fs.btn-ghost{
  position:static;width:35px;height:32px;min-height:0;padding:0;border-radius:6px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);box-shadow:none;
}
.cc-map .cc-map-side .cc-fs.btn:hover{background:var(--surface-2);color:var(--text)}
.cc-map .cc-map-side .cc-fs.btn svg{width:16px;height:16px}
/* Map Options sits at the LEFT end of the map, as the owner asked. It used to be
   pinned right by this rule, which also put it directly under the zoom/locate
   column - two unrelated control clusters stacked in one corner. Ours on the
   right, the map's own options on the left. */
.cc-map .cc-map-options{left:12px;right:auto;bottom:12px}

/* ── Sidebar collapse/expand animation ────────────────────────────────────
   .sidebar transitioned `width` only, but collapsing also sets min-width and
   max-width to 64px. Those are NOT transitionable properties in that rule, so
   they snapped instantly and clamped width with them: measured 240px -> 64px
   complete 10ms after the click, in BOTH directions. All three now animate
   together, so opening and closing both ease. */
.sidebar{transition:width var(--dur,.18s) var(--ease,ease),
                    min-width var(--dur,.18s) var(--ease,ease),
                    max-width var(--dur,.18s) var(--ease,ease)}
.sidebar .nav-item span,.sidebar .nav-grp>button span,.sidebar .side-brand-tx{
  transition:opacity var(--dur-fast,.12s) var(--ease,ease)}
@media (prefers-reduced-motion:reduce){
  .sidebar,.sidebar .nav-item span,.sidebar .nav-grp>button span,.sidebar .side-brand-tx{transition:none}
}

/* ── Row actions cell ─────────────────────────────────────────────────────
   The trailing "…" overhung the row's right edge by 2px and got clipped: the
   cell is a 46px track but carried padding 8px 6px 8px 16px, leaving a 24px
   content box for a 32px button. Right-aligned inside a gutter that fits. */
.dtr>.dtd:last-child:has(.wv-row-more){
  padding:8px 7px;justify-content:flex-end;align-items:center}

/* ── Stacked percentage chart (report charts) ─────────────────────────────
   Geometry taken off their Service Reminder Compliance chart: plot 176px tall,
   month labels beneath at 12px in a mid grey, legend under the plot. The hover
   highlight lives on the SEGMENT, so it covers exactly the drawn area - the old
   column-band hover overshot the bar in both height and width. */
.spc-chart{display:block}
.spc-plot{position:relative;height:var(--plot,176px);display:flex;align-items:flex-end}
.spc-cols{display:flex;align-items:flex-end;justify-content:space-around;gap:14px;
  width:100%;height:100%}
.spc-col{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.spc-stack{width:100%;max-width:96px;height:100%;display:flex;flex-direction:column-reverse;
  border-radius:4px;overflow:hidden}
.spc-seg{width:100%;transition:filter var(--dur-fast,.12s) var(--ease,ease)}
.spc-seg.on{filter:brightness(1.18)}
.spc-xaxis{display:flex;justify-content:space-around;gap:14px;margin-top:8px}
.spc-xaxis span{flex:1 1 0;min-width:0;text-align:center;font-size:12px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spc-legend{display:flex;justify-content:center;gap:18px;margin-top:12px}

/* ── Topbar search dropdown ───────────────────────────────────────────────
   Anchored under the search field to this spec (specified here: panel
   pinned to the field's left edge at y=49, 432px wide, 263px tall, 37px rows,
   a section heading before each group). Ours used to blur the field and open a
   full-screen palette, which is a different interaction entirely. */
.tb-search{position:relative}
.tbs-drop9{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:var(--z-pop,80);
  max-height:264px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;box-shadow:0 12px 24px rgba(0,0,0,.2);padding:6px 0;scrollbar-width:thin}
.tbs-head9{padding:8px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-2)}
.tbs-row9{display:flex;align-items:center;gap:9px;width:100%;height:37px;padding:0 12px;
  background:none;border:0;color:var(--text);font-size:13px;text-align:left;cursor:pointer}
.tbs-row9:hover,.tbs-row9.sel{background:var(--surface-2)}
.tbs-ic9{display:flex;flex:none;color:var(--text-2)}
.tbs-ic9 svg{width:15px;height:15px}
.tbs-t9{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.tbs-s9{color:var(--text-2);font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.tbs-empty9{padding:18px 14px;text-align:center}
.tbs-empty9 b{display:block;font-size:13px;font-weight:600}
.tbs-empty9 span{display:block;margin-top:4px;font-size:12.5px;color:var(--text-2)}

/* ── Filters panel ────────────────────────────────────────────────────────
   Measured on the list page: 384px panel, "Filters" 18px/600, "No filters
   applied." 13px/400, a FULL-WIDTH primary "Add Filter" (32px tall, 6px radius),
   then "Popular Filters" as a 12px/600 heading over one-click field rows. */
.flt9{display:flex;flex-direction:column;gap:12px}
.flt-none9{font-size:13px;font-weight:400;color:var(--text-2)}
.flt-row9{display:flex;flex-direction:column;gap:6px}
.flt-row-top9{display:flex;align-items:center;justify-content:space-between;gap:8px}
.flt-lbl9{font-size:13px;font-weight:500}
.flt-x9{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  padding:0;border:0;border-radius:6px;background:none;color:var(--text-2);cursor:pointer}
.flt-x9:hover{background:var(--surface-2);color:var(--text)}
.flt-x9 svg{width:13px;height:13px}
.flt-add9{width:100%;height:32px;border-radius:6px;font-size:13px;font-weight:500;
  justify-content:center;gap:7px}
.flt-pop9{margin:6px 0 0;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--text-2)}
.flt-poprow9{display:block;width:100%;padding:7px 0;border:0;background:none;text-align:left;
  font-size:13px;font-weight:400;color:var(--text);cursor:pointer}
.flt-poprow9:hover{color:var(--tab-active)}

/* Fuel History alerts cell — their last visible column on this list. */
.fuel-alerts9{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.fuel-alerts9 .badge{white-space:nowrap}

/* Widget empty state — the convention is 16px in the body text colour, centred, and it
   sits in the middle of the widget rather than hugging the top. Ours was 13px
   muted, which read as a disabled label instead of an answer. */
.activity-empty{display:flex;align-items:center;justify-content:center;flex:1 1 auto;
  min-height:64px;margin:0;padding:20px 12px;text-align:center;
  font-size:16px;font-weight:400;color:var(--text)}

/* Vehicle Assignments — their hour axis: 24 columns for one day, so each column
   is narrow and the grid scrolls sideways rather than crushing the labels. */
.asg-grid.asg-hours9{grid-template-columns:230px repeat(var(--asg-days,24),minmax(58px,1fr))}
.asg-hours9 .avb-hcell{font-size:11px;white-space:nowrap}
.asg-hours9 .avb-hcell.today{color:var(--tab-active);font-weight:600}
.asg-hours9 .avb-cell.now-h9{background:color-mix(in srgb,var(--tab-active) 7%,transparent)}
.asg-vhead9{text-align:left;padding-left:12px}

/* ── Integrations directory grid ──────────────────────────────────────────
   The cards in a row were not stretching, so a longer description pushed its
   whole card down: measured Wialon starting at y=122 with height 247 beside
   Google Maps at y=138 with height 231 — visibly misaligned tiles. The stretch
   rule above lists .int-grid, but this grid is .intg-grid9 and was never added
   to it. Rows now top-align and every card fills its row height, so the footer
   actions line up across the row too. */
.intg-grid9{align-items:stretch}
.intg-grid9>*{height:100%;min-width:0}
.intg-card9{display:flex;flex-direction:column}
.intg-card9>:last-child{margin-top:auto}

/* app.css has `.card + .card{margin-top:16px}` for stacked cards in a column.
   Inside a GRID that rule is wrong: every card except the first got a 16px top
   margin, which pushed it below its own row-mate — measured Wialon at y=122 and
   Google Maps at y=138 in the same grid row. The grid's own `gap` already does
   the spacing, so the sibling margin is cancelled for grid children. */
.intg-grid9>.card+.card,.dash-grid>.card+.card,.cards-grid>.card+.card,
.rep-grid>.card+.card,.int-grid>.card+.card,.kpi-grid>.card+.card{margin-top:0}

/* Integration card: the honest one-line note under the blurb, for providers
   whose configuration is stored and validated but whose live sync needs
   credentials in the integration backend. */
.intg-note9{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--text-2)}

/* Vendor rating — five stars, filled to the stored value (1-5). */
.vend-rate9{display:inline-flex;gap:2px;align-items:center}
.vend-star9{display:inline-flex;width:13px;height:13px;color:var(--text-3,#6b6459)}
.vend-star9.on{color:#F2B705}
.vend-star9 svg{width:13px;height:13px}

/* Label chips in a list cell — one badge per attached label. */
.lbl-chips9{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.lbl-chips9 .badge{white-space:nowrap}

/* ── Table cells must never widen their row ────────────────────────────────
   Measured on Service History and Item Failures: the row box was 1392px (the
   sum of the track minimums) while its content measured 1455px, so the hover
   highlight and the bottom hairline stopped 63px short — the same defect that
   was reported for horizontally scrolled tables.
   Two causes, both here:
     1. `.dtd>span:not(.badge)` excluded badges from the ellipsis rule, so a wide
        status badge could size its own track.
     2. `.dtr>.dtd:last-child` is overflow:visible so a row-menu popup can escape
        its cell — but that also let the LAST cell's content spill past the row.
   Badges now shrink and truncate like any other cell content, and only the cell
   that actually holds a row menu keeps visible overflow. */
.dtd .badge{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtr>.dtd:last-child{overflow:hidden}
.dtr>.dtd:last-child:has(.wv-row-more),.dtr>.dtd:last-child:has(.row-menu),
.dtd.dtd-menu,.dtd:has(.icon-btn[aria-label="More actions"]){overflow:visible}

/* ── Autofilled inputs must not break the dark theme ──────────────────────
   Chrome paints its own near-white background on autofilled fields, which on the
   sign-in card rendered two pale boxes in the middle of a dark panel. There is
   no way to set the background directly, so the standard approach: an inset
   shadow the size of the field, and the caret/text colour forced back. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;
  box-shadow:0 0 0 1000px var(--surface-2) inset;
  transition:background-color 9999s ease-out 0s;
}


/* ============================================================
   THEME: real light support + the tokens that make it possible.
   --on-strong is the text colour on the strongest surface: the active nav item,
   segment buttons, tab strips. Those rules hardcoded #FFF, which is invisible
   on a light --surface-3, so they now read the token (overridden here at equal
   specificity, later in source). The chart tooltip stays fixed-dark by design.
   ============================================================ */
body, body.light, body:not(.light){--on-strong:#FFFFFF;--overlay-soft:rgba(255,255,255,.14)}
.nav-item.active{color:var(--on-strong)}
.nav-item.active .nav-ico{color:var(--on-strong)}
.nav-item.active .nav-badge{background:var(--overlay-soft);color:var(--on-strong)}
.linkish:hover{color:var(--on-strong)}
.seg-btn.active{color:var(--on-strong)}
.sv-tab.active{color:var(--on-strong)}
.tlink:hover{color:var(--on-strong);text-decoration-color:var(--on-strong)}
.detail-tab.active{color:var(--on-strong)}
.stg-item.active{color:var(--on-strong)}
.rail-item.active{color:var(--on-strong)}
.setx-tabs .seg-btn.active{color:var(--on-strong)}
.setx-tabs .seg-btn.active .setx-nav-ic{color:var(--on-strong)}
.tk-tab.active{color:var(--on-strong)}

/* The light palette. Same geometry, same orange, inverted neutrals: white
   surfaces, warm off-white app background, near-black text and actions. */
body.light{
  --bg:#F4F2EE; --surface:#FFFFFF; --surface-2:#F3F0EA; --surface-3:#E9E4DC;
  --border:#DCD5CA; --border-soft:#E8E2D8;
  --accent:#171512; --accent-hover:#000000; --on-accent:#FFFFFF;
  --ok:#1E9E56; --warn:#B07E14; --danger:#DC2626; --info:#2563EB;
  --ok-soft:rgba(30,158,86,.12); --warn-soft:rgba(176,126,20,.13);
  --danger-soft:rgba(220,38,38,.10); --info-soft:rgba(37,99,235,.12);
  --text:#171512; --text-2:#5F594F; --muted:#786F63; --placeholder:#9A9184;
  --shadow-pop:0 8px 24px rgba(23,21,18,.14),0 2px 6px rgba(23,21,18,.08);
  --shadow-modal:0 24px 64px rgba(23,21,18,.22);
  --focus:0 0 0 2px rgba(23,21,18,.28);
  --on-strong:#14110D; --overlay-soft:rgba(0,0,0,.08);
  --action-soft:rgba(23,21,18,.08);
}
body.light .drawer-overlay{background:rgba(23,21,18,.35)}

/* ── Appearance page: the three preview cards ─────────────────────────────
   Each preview is painted with its own FIXED palette so the Dark card looks
   dark even while the app is light, exactly like the category-standard screenshots.
   The System card is split diagonally between the two. */
.thm-grid9{display:grid;grid-template-columns:repeat(3,225px);gap:16px}
.thm-card9{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:none;
  cursor:pointer;text-align:left}
.thm-prev9{position:relative;height:110px;border-radius:10px;overflow:hidden;
  border:2px solid var(--border);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.thm-card9.on .thm-prev9{border-color:var(--tab-active);box-shadow:0 0 0 3px color-mix(in srgb,var(--tab-active) 25%,transparent)}
.thm-prev9 .tp-side{position:absolute;left:0;top:0;bottom:0;width:26%}
.thm-prev9 .tp-top{position:absolute;left:26%;right:0;top:0;height:16%}
.thm-prev9 .tp-body{position:absolute;left:26%;right:0;top:16%;bottom:0}
.thm-prev9 .tp-line{position:absolute;height:7px;border-radius:4px}
.thm-prev9 .tp-chip{position:absolute;border-radius:5px}
/* dark preview palette */
.thm-prev9.dark .tp-side{background:#22201E}
.thm-prev9.dark .tp-top{background:#22201E;border-bottom:1px solid #39342F}
.thm-prev9.dark .tp-body{background:#1A1917}
.thm-prev9.dark .tp-line{background:#3A3631}
.thm-prev9.dark .tp-line.hi{background:#ECE7DF}
.thm-prev9.dark .tp-chip{background:#2B2825;border:1px solid #39342F}
.thm-prev9.dark .tp-chip.acc{background:#D97757;border-color:#D97757}
/* light preview palette */
.thm-prev9.light .tp-side{background:#FFFFFF;border-right:1px solid #E3DDD2}
.thm-prev9.light .tp-top{background:#FFFFFF;border-bottom:1px solid #E3DDD2}
.thm-prev9.light .tp-body{background:#F4F2EE}
.thm-prev9.light .tp-line{background:#D8D2C7}
.thm-prev9.light .tp-line.hi{background:#171512}
.thm-prev9.light .tp-chip{background:#FFFFFF;border:1px solid #DCD5CA}
.thm-prev9.light .tp-chip.acc{background:#D97757;border-color:#D97757}
/* system = half and half */
.thm-prev9.system{display:grid;grid-template-columns:1fr 1fr}
.thm-prev9.system>.thm-half{position:relative;overflow:hidden}
.thm-lbl9{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text)}
.thm-dot9{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--border);flex:none;
  display:flex;align-items:center;justify-content:center}
.thm-card9.on .thm-dot9{border-color:var(--tab-active)}
.thm-card9.on .thm-dot9::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--tab-active)}
.thm-sub9{font-size:12px;color:var(--text-2);margin:-4px 0 0 23px}
@media (max-width:760px){.thm-grid9{grid-template-columns:1fr}}


/* ── Integration detail page, to the category-standard measurements ─────────────
   Logo tile 152x152 with a 4px radius, name 32px/600 beside it, primary CTA
   right-aligned at 36px tall / 6px radius. Sections at 24px/500. The sidebar
   labels are 12px muted over 13px values. */
.intg-hero9{display:flex;align-items:center;gap:24px;margin:8px 0 14px}
.intg-logo-xl9{width:152px;height:152px;border-radius:4px;font-size:44px;font-weight:650;
  display:flex;align-items:center;justify-content:center;flex:none;
  background:var(--surface-2);border:1px solid var(--border-soft);color:var(--text-2)}
.intg-hero-tx9{flex:1 1 auto;min-width:0}
.intg-hero-name9{margin:0;font-size:32px;font-weight:600;line-height:1.25}
.intg-hero-by9{margin:6px 0 0;font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:10px}
.intg-hero-act9 .btn{height:36px;border-radius:6px}
.intg-desc9{margin:0 0 22px;font-size:15px;line-height:1.55;color:var(--text-2);max-width:760px}
.intg-detail-grid9{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}
.intg-sec-t9{margin:0 0 12px;font-size:24px;font-weight:500}
.intg-sec-t9 + .intg-sec-t9{margin-top:0}
.intg-benefits9 + .intg-sec-t9,.intg-feats9 + .intg-sec-t9{margin-top:26px}
.intg-benefits9,.intg-feats9{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.intg-benefits9 li,.intg-feats9 li{position:relative;padding-left:26px;font-size:14px;line-height:1.5}
.intg-benefits9 li::before,.intg-feats9 li::before{content:"";position:absolute;left:2px;top:7px;
  width:7px;height:11px;border-right:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(41deg)}
.intg-detail-side9{border-left:1px solid var(--border-soft);padding-left:24px;display:flex;flex-direction:column;gap:6px}
.intg-side-lbl9{font-size:12px;color:var(--muted);margin-top:14px}
.intg-side-lbl9:first-child{margin-top:0}
.intg-side-val9{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:13px}
@media (max-width:900px){.intg-detail-grid9{grid-template-columns:1fr}
  .intg-detail-side9{border-left:0;padding-left:0;border-top:1px solid var(--border-soft);padding-top:16px}}


/* Notification Settings: their grouped Event | Push table. */
.nfs-grp9{margin:14px 0 0}
.nfs-grp-t9{font-size:13px;font-weight:600;margin:0 0 6px}
.nfs-head9{display:flex;justify-content:space-between;padding:0 16px 6px;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.nfs-row9{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--border-soft)}
.nfs-row9:last-child{border-bottom:0}
.nfs-main9{min-width:0}
.nfs-main9 b{display:block;font-size:13.5px;font-weight:550}
.nfs-main9 span{display:block;font-size:12.5px;color:var(--text-2);margin-top:2px}
.nfs-chan9{flex:none;padding-right:6px}

/* Export Account Data: the include checklist. */
.exp-grid9{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:4px 0 8px}
.exp-check9{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--border-soft);
  border-radius:8px;background:var(--surface);font-size:13px;cursor:pointer}
.exp-check9.off{opacity:.5;cursor:default}
.exp-check9 span{flex:1 1 auto;min-width:0}
.exp-n9{font-style:normal;font-size:11.5px;color:var(--muted)}
.exp-act9{margin-top:16px}
.api-tok9{font-size:12px;background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:6px;padding:2px 7px}
.vs-name9{display:flex;align-items:center;gap:8px}


/* ── Marketing home: the product frame ────────────────────────────────────
   The mockup carried its light-era palette - a white sidebar strip on a dark
   page, left-shifted with a dead right gutter. Reframed with the live design
   tokens and centred like a screenshot card on any serious SaaS site. */
.home-demo-wrap{display:flex;justify-content:center;padding:8px 24px 30px}
.dash-art{width:min(1120px,100%);margin:0 auto;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.3)}
.dash-art .demo-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:var(--surface-2);border-bottom:1px solid var(--border-soft)}
.dash-art .demo-bar i{width:10px;height:10px;border-radius:50%;background:var(--surface-3)}
.dash-art .demo-title{margin-left:8px;font-size:12px;color:var(--text-2)}
.dash-art .art-tag{margin-left:auto;font-size:11px;color:var(--muted)}
.dash-art .da-body{display:flex;background:var(--bg)}
.dash-art .da-side{width:168px;flex:none;background:var(--surface);
  border-right:1px solid var(--border-soft);padding:12px 8px;display:flex;
  flex-direction:column;gap:2px}
.dash-art .da-brand{display:flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:650;padding:4px 8px 12px;color:var(--text)}
.dash-art .da-nav{display:flex;align-items:center;gap:8px;padding:7px 9px;
  border-radius:7px;font-size:12px;color:var(--text-2)}
.dash-art .da-nav.on{background:var(--surface-3);color:var(--on-strong);font-weight:600}
.dash-art .da-nic{display:flex}.dash-art .da-nic svg{width:13px;height:13px}
.dash-art .da-main{flex:1 1 auto;min-width:0;padding:16px 18px}
.dash-art .da-title{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:12px;color:var(--text)}
.dash-art .da-live{display:inline-flex;align-items:center;gap:5px;font-size:10px;
  letter-spacing:.08em;color:var(--ok)}
.dash-art .da-live i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
@media (max-width:760px){.dash-art .da-side{display:none}}

/* ── Pricing band on the home page ─────────────────────────────────────── */
.land-pricing9{text-align:center}
.lp-grid9{display:grid;grid-template-columns:repeat(3,minmax(240px,300px));gap:18px;
  justify-content:center;margin:26px 0 14px;text-align:left}
.lp-card9{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:14px}
.lp-card9.hi{border-color:var(--tab-active);box-shadow:0 0 0 3px color-mix(in srgb,var(--tab-active) 18%,transparent)}
.lp-pop9{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--tab-active);color:#fff;font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:999px;white-space:nowrap}
.lp-name9{margin:0;font-size:15px;font-weight:600}
.lp-price9{display:flex;align-items:baseline;gap:4px}
.lp-price9 b{font-size:34px;font-weight:650;letter-spacing:-.02em}
.lp-price9 span{font-size:13px;color:var(--text-2)}
.lp-blurb9{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-2);min-height:38px}
.lp-feats9{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:7px}
.lp-feats9 li{position:relative;padding-left:22px;font-size:12.5px;line-height:1.45}
.lp-feats9 li::before{content:"";position:absolute;left:2px;top:5px;width:6px;height:10px;
  border-right:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(41deg)}
.lp-note9{font-size:12.5px;color:var(--text-2)}
@media (max-width:900px){.lp-grid9{grid-template-columns:minmax(240px,340px)}}

/* The frame is a teaser, not a full page: cap it and fade the bottom edge, the
   standard screenshot-card treatment. Also balances the widget grid's ragged
   lower rows out of view. */
.dash-art{position:relative}
.dash-art .da-body{max-height:520px;overflow:hidden}
.dash-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}

/* ── Settings takeover: full-bleed, re-asserted ───────────────────────────
   `.settings-page2{padding:0}` (line ~2583) was silently beaten by two LATER
   `.page` padding rules added during the gutter-parity work (`.page{padding:
   14px 0 44px}` and `.page{padding-left:16px;padding-right:16px}`) — equal
   specificity, later source wins. The takeover page picked up a 14/16/44px
   inset: the rail floated as an island with its scrollbar detached in the
   gutter and its last row clipped by the bottom padding. Compound selector
   (0,2,0) so no future `.page` rule can beat it by order alone. */
.page.settings-page2{padding:0;max-width:none;height:100vh;margin:0}


/* ── Saved views: the "+ Add Tab" panel and the per-tab menu ───────────────
   Measured off the reference: 320px panel, a search box at the top, group
   headings in 11px caps, rows 34px with a leading check column and the small
   "S" badge on standard views. */
.sv-panel9{width:320px;padding:0;max-width:calc(100vw - 24px)}
.sv-psearch9{display:flex;align-items:center;gap:8px;padding:12px 14px 10px;border-bottom:1px solid var(--border-soft)}
.sv-psearch9 svg{width:14px;height:14px;color:var(--muted);flex:none}
.sv-psearch9 .input{height:32px;font-size:13px;flex:1 1 auto;min-width:0}
.sv-panel-list9{padding:6px 0 8px;max-height:min(58vh,420px);overflow-y:auto}
.sv-ghd9{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px 6px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.sv-addview9{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  cursor:pointer;color:var(--tab-active);font-size:12px;font-weight:600;padding:2px 4px;border-radius:5px}
.sv-addview9:hover{background:var(--surface-3)}
.sv-addview9 svg{width:12px;height:12px}
.sv-none9{padding:10px 14px 12px;font-size:12.5px;color:var(--muted);text-align:center}
.sv-prow9{display:flex;align-items:center;gap:9px;width:100%;padding:8px 14px;background:none;
  border:0;cursor:pointer;text-align:left;font-size:13px;color:var(--text)}
.sv-prow9:hover{background:var(--surface-3)}
.sv-prow-ck9{width:14px;height:14px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--text-2)}
.sv-prow-ck9 svg{width:13px;height:13px}
.sv-prow-tx9{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-prow9.on .sv-prow-tx9{font-weight:600}
.sv-badge-s9{flex:none;width:16px;height:16px;border-radius:3px;background:var(--surface-3);
  color:var(--muted);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* A saved-view tab: the label is the hit area, the "..." opens the menu. There
   is no inline x - Close View lives in that menu, as intended here. */
.sv-tab-saved9{display:inline-flex;align-items:center;gap:0;padding:0}
.sv-tab-saved9 .sv-tab-hit9{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  cursor:pointer;color:inherit;font:inherit;padding:0 4px 0 0}
.sv-shared-ic9{display:inline-flex;color:var(--muted)}
.sv-shared-ic9 svg{width:12px;height:12px}
.sv-dots9{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border:0;background:none;cursor:pointer;color:var(--muted);border-radius:5px;padding:0}
.sv-dots9:hover{background:var(--surface-3);color:var(--text)}
.sv-dots9 svg{width:14px;height:14px}
.sv-tab-saved9 .pop-anchor{display:inline-flex}
/* Two-line menu row: "Manage Sharing" over the current sharing state. */
.sv-mi29{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.sv-mi29 small{font-size:11px;color:var(--muted)}

/* Sharing pickers in the dialog. */
.sv-share-help9{margin-top:-4px;font-size:12.5px;color:var(--text-2)}
.sv-pick-sum9{font-size:13px;margin-bottom:6px}
.sv-pick-empty9{color:var(--muted)}
.sv-pick9{max-height:168px;overflow-y:auto;border:1px solid var(--border-soft);border-radius:8px;
  background:var(--surface-2);padding:4px}
.sv-pick-row9{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;
  font-size:13px;cursor:pointer}
.sv-pick-row9:hover{background:var(--surface-3)}
.sv-pick-none9{padding:10px;font-size:12.5px;color:var(--muted)}


/* ── Export dialog: their two radio groups ─────────────────────────────────
   Section headings 13px/600 over stacked radio rows whose label is bold with a
   muted explanatory line beneath - the anatomy specified here. */
.exp-sec9{font-size:13px;font-weight:600;margin:18px 0 8px}
.exp-sec9:first-of-type{margin-top:6px}
.exp-radios9{display:flex;flex-direction:column;gap:2px}
.exp-radio9{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer}
.exp-radio9:hover{background:var(--surface-2)}
.exp-radio9 input{margin-top:2px;flex:none}
.exp-rtx9{display:flex;flex-direction:column;gap:2px;min-width:0}
.exp-rtx9 b{font-size:13px;font-weight:600}
.exp-rtx9 small{font-size:12px;line-height:1.45;color:var(--text-2)}


/* ── Dashboard widget fixes (owner screenshots, v608) ──────────────────────
   numpair: the two stats could paint over each other - a long money value at
   30px escaped its flex column into its neighbour, and the old -wide class had
   no rule behind it. Tiers come from bigStats (longest value in the pair);
   overflow-wrap is the belt-and-braces for anything longer still. */
.dw-numpair{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.dw-numpair .np{padding:6px 10px 6px 4px}
.dw-numpair .np+.np{border-left:1px solid var(--border-soft);padding-left:16px}
.np-num{overflow-wrap:anywhere}
.dw-numpair.np-t24 .np-num,.dw-numpair-wide .np-num{font-size:24px}
.dw-numpair.np-t19 .np-num{font-size:19px}
.dw-numpair.np-t16 .np-num{font-size:16px}

/* hbars: the value column was a fixed 64px (clips "US$6,800"), and at narrow
   widget widths the 150px label column pushed the grid past the card edge.
   Label ellipsises inside minmax, the track may shrink, the value column sizes
   to its own content - it cannot clip, at any width, for any amount. */
.hbar{grid-template-columns:minmax(48px,150px) minmax(24px,1fr) auto}
.hbar .hb-track{min-width:0}
.hbar .hb-v{white-space:nowrap}

/* histRow emits .hist-ic/.hist-main/.hist-title/.hist-sub; the icon tile and
   text styles were written against .hr-* names and never applied - which is why
   comment icons sat bare against the card edge. */
.hist-row .hist-ic{width:30px;height:30px;border-radius:6px;background:var(--surface-3);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;flex:none}
.hist-row .hist-ic svg{width:15px;height:15px}
.hist-row .hist-main{flex:1 1 auto;min-width:0}
.hist-row .hist-title{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.hist-row .hist-sub{font-size:12.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}

/* ═══════════════════════════════════════════════════════════════════════════
   MOVENTRA IDENTITY LAYER (Moventra New)
   The archived build ("Moventra,category-standard products") deliberately matched the reference
   pixel for pixel while the product's behaviour was being learned. This build
   keeps the behaviour and retires the borrowed look: the metrics, shapes and
   chrome below are Moventra's own, chosen to be visibly distinct from both
   reference apps (their 59px bar / 240px rail / underline tab strip / 6px
   buttons / 8px cards combination) while staying a serious, dense fleet tool.
   Palette was never the convention — black/grey/white with #D97757 is Moventra brand.
   ═══════════════════════════════════════════════════════════════════════════ */

/* chrome: taller bar, wider rail, soft elevation instead of hairlines */
/* The header is separated by a hairline, nothing more. It also carried
   `0 8px 24px rgba(0,0,0,.25)` - a 25%-black, 24px-blur drop shadow across
   the full width - which read as a dark gradient smeared under the top of
   the app, most obvious in the top-left corner against the sidebar. */
.topbar{height:64px;min-height:64px;border-bottom:0;box-shadow:0 1px 0 var(--border-soft)}
.sidebar{width:252px}
.topbar .search-wrap,.topbar .global-search{border-radius:999px}
.topbar .search-wrap .input,.topbar .global-search .input{border-radius:999px}

/* nav: left accent bar + tint for the active item, not a filled pill */
.nav-item{border-radius:10px;position:relative}
/* Active nav: one treatment, no bars or dots — a soft orange-tinted squircle
   with the ICON carrying the brand colour. Reads identically in the expanded
   rail and the 64px collapsed rail. */
.nav-item.active,.nav-item[aria-current]{background:color-mix(in srgb,var(--tab-active) 13%,transparent)}
.nav-item.active .nav-ico,.nav-item[aria-current] .nav-ico{color:var(--tab-active)}
.nav-item.active span,.nav-item[aria-current] span{color:var(--text);font-weight:600}

/* saved views: pill chips instead of an underline tab strip */
.saved-views{gap:6px;border-bottom:0;padding-bottom:2px}
.sv-tab{border:1px solid var(--border-soft);border-radius:999px;padding:5px 13px;background:var(--surface);
  box-shadow:none}
.sv-tab.on{border-color:var(--tab-active);background:color-mix(in srgb,var(--tab-active) 14%,transparent);
  color:var(--text)}
.sv-tab.on::after{display:none}
.sv-tab-saved9{padding-right:4px}
.sv-add{border-radius:999px;padding:5px 12px}

/* surfaces: larger radii, inner top highlight on cards */
.card,.dw{border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,#fff 2.5%,var(--surface)) 0,var(--surface) 42px)}
.dw .card-head h3{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);font-weight:650}
.modal{border-radius:16px}
.modal-lg{width:680px}

/* controls: rounder, one step taller */
.btn{border-radius:10px;height:34px}
.btn.btn-sm{height:28px;border-radius:8px}
.input,.field select,select.input,textarea.input{border-radius:10px}
.filter-pill,.wv-fcount{border-radius:999px}

/* lists: 52px rows on a 38px header, hover tint */
.dtr{min-height:52px}
.dthr{min-height:38px}
.dtr.click:hover{background:color-mix(in srgb,var(--tab-active) 5%,transparent)}
.dtable-wrap{border-radius:14px}

/* empty states: dashed container, quieter */
.empty,.empty-state{border:1px dashed var(--border);border-radius:14px;padding:34px 20px}

/* dialogs + popovers share the rounder language */
.pop-menu,.top-pop,.wv-pop{border-radius:12px}

/* ── Identity pass 2: auth + marketing ─────────────────────────────────────
   Same intent as the layer above — Moventra's own shapes on the public pages.
   Nothing structural moves; only the skin diverges. */
.auth-card{border-radius:18px;max-width:420px;padding:32px 30px 28px;
  background:linear-gradient(180deg,color-mix(in srgb,#fff 3%,var(--surface)) 0,var(--surface) 56px);
  box-shadow:0 24px 64px rgba(0,0,0,.35)}
.auth-card h1,.auth-card h2{letter-spacing:-.02em}

.land-hero .feat-eyebrow,.feat-eyebrow{letter-spacing:.14em;font-weight:650}
.land-h b{color:var(--tab-active)}
.price-card,.lp-card9{border-radius:18px}
.lp-card9.hi{box-shadow:0 0 0 2px var(--tab-active),0 20px 48px rgba(0,0,0,.35)}
.lp-pop9{border-radius:8px}
.land-cta .btn,.lp-card9 .btn{border-radius:12px}

/* product frame: flatter bar, rounder shell — reads as our screenshot card */
.dash-art{border-radius:18px}
.dash-art .demo-bar i{border-radius:3px;width:12px;height:6px}

/* focus ring: offset ring in brand orange — a small but distinctive tell */
.btn:focus-visible,.input:focus-visible,.sv-tab:focus-visible,.nav-item:focus-visible{
  outline:2px solid var(--tab-active);outline-offset:2px;box-shadow:none}

/* ── Identity pass 3: charts + record pages ────────────────────────────────
   Bars get capped tops and a quieter grid; donuts keep their hover ring but
   sit on a soft track; record heads pick up the same rounded language. */
.bar-fill{border-radius:6px 6px 2px 2px}
.bar-slot{border-radius:6px 6px 0 0}
.chart-grid line,.bar-grid{opacity:.5}
.pie{border-radius:50%;box-shadow:inset 0 0 0 1px var(--border-soft)}
.detail-page .back-btn,.form-page .back-btn{border-radius:999px;padding:4px 12px 4px 8px;
  border:1px solid var(--border-soft);background:var(--surface)}
.detail-head .row-avatar,.detail-page .row-avatar{border-radius:12px}
.detail-tabs .seg-btn,.detail-tab{border-radius:999px}
.fc-body .fc-group-h,.fieldsCard-h{letter-spacing:.06em}


/* ═══ IDENTITY PASS 4 — every-page own-style sweep (v4) ═══════════════════
   Selectors are component-scoped on purpose: this file grows append-only and
   a bare `.page`-level rule here would silently beat earlier page overrides
   (the settings-inset regression, twice). */

/* skip-link: it is an a11y feature and stays — but it revealed on ANY focus
   (mouse, programmatic) and wore a legacy palette: near-white text ON a
   near-white pill with a pale ring — the "white thing" in the owner's
   screenshot. Keyboard-only reveal, design-system colours. */
a.skip-link{background:var(--surface-2);color:var(--text);border:1px solid var(--tab-active);
  outline:none;box-shadow:0 12px 32px rgba(0,0,0,.45);font-weight:600}
a.skip-link:focus:not(:focus-visible){transform:translateY(-62.15px)}  /* stay hidden on non-keyboard focus */
a.skip-link:focus-visible{transform:none}

/* sidebar groups: slim caps micro-labels, quiet chevrons, hover nudge */
.nav-grp{border-radius:10px}
.nav-grp>span:not(.nav-ico){font-size:12.5px;letter-spacing:.01em}
.nav-grp:hover{background:var(--surface-2)}
.nav-item:hover{background:var(--surface-2);transition:background .12s ease}

/* collapsed rail: same tinted-squircle language on whatever is visible */
.layout.side-collapsed .nav-sec:has(.nav-item.active)>.nav-grp{
  background:color-mix(in srgb,var(--tab-active) 13%,transparent)}
.layout.side-collapsed .nav-sec:has(.nav-item.active)>.nav-grp .nav-ico,
.layout.side-collapsed .nav-sec:has(.nav-item.active)>.nav-grp svg{color:var(--tab-active)}

/* settings takeover: our rail, not the convention — pill search, caps group heads,
   tinted active row with orange text, roomier content headers */
.setx-rail .input{border-radius:999px}
.setx-rail{border-right:1px solid var(--border-soft)}
.setx-group-h,.setx-rail .side-label{font-size:11px;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.setx-tabs .seg-btn{border-radius:10px;margin:1px 8px}
.setx-tabs .seg-btn.active{
  background:color-mix(in srgb,var(--tab-active) 13%,transparent);color:var(--tab-active);font-weight:600}
.setx-content h1{letter-spacing:-.02em}
.setx-content .card,.setx-content .set-card{border-radius:14px}
.setx-content .set-sec-head:not(:has(h1,h2)){font-size:11.5px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
/* pane headers (secHead) nest an h1 inside the same class — never caps those */
.setx-content .set-sec-head:has(h1,h2){text-transform:none;letter-spacing:0}
.setx-content .set-sec-head:has(h1,h2) *{text-transform:none;letter-spacing:normal}

/* form / add-record pages: a card shell with a sticky action bar — the create
   flow stops looking like a bare document */
.form-page .form-topbar{position:sticky;top:0;z-index:5;padding:14px 18px;margin:0 -2px 14px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);border-radius:0 0 14px 14px}
.form-page .form-topbar h1{font-size:19px;letter-spacing:-.02em}
.form-page-body .card,.form-card{border-radius:14px}
.form-card>.fc-h,.form-card>h3,.form-page .card>h3{font-size:11.5px;font-weight:650;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.form-actions.bottom{position:sticky;bottom:0;z-index:5;padding:12px 4px;margin-top:8px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--border-soft)}
.form-page .input,.form-page select,.form-page textarea{border-radius:10px}

/* tables: sentence-case 12px/600 headers on a hairline — their look was
   uppercase-tracked caps; ours deliberately is not */
.dthr .dtd,.dthr>*{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)}
.dt-chk{accent-color:var(--tab-active)}
.dt-pager-btn{border-radius:999px}
.dt-bulkbar{border-radius:12px}

/* dialogs + overlays: blur behind, quieter title block */
.overlay{backdrop-filter:blur(6px)}
.modal-title{letter-spacing:-.01em}
.modal .modal-head,.modal-title{border-bottom:0}

/* topbar details: squircle avatar, pill quick-create */
.topbar .avatar,.topbar .side-acct-btn img,.top-avatar{border-radius:12px}
.topbar .icon-btn{border-radius:10px}

/* toasts: squircle, soft elevation, no colour bars */
.toast{border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.4)}


/* ── veh-form rail: final word ─────────────────────────────────────────────
   Two zombies killed here, both verified live before writing this:
   1. a WHITE 3px ::before pill on the active row (the owner's screenshot) —
      its source rule hides from CSSOM scans, so the pseudo is disabled
      outright rather than restyled;
   2. a later `.veh-rail-btn.on{background:none}` in the parity block that
      beat the tinted-squircle active style by source order. */
.veh-modal-rail .veh-rail-btn::before,.veh-modal-rail .veh-rail-btn::after,
.veh-form-rail .veh-rail-btn::before,.veh-form-rail .veh-rail-btn::after{content:none!important}
.veh-rail-btn.on{background:color-mix(in srgb,var(--tab-active) 13%,transparent)!important;
  box-shadow:none!important}
.veh-rail-btn.on svg,.veh-rail-btn.on .nav-ico{color:var(--tab-active)}

/* ═══ IDENTITY PASS 5 — owner round (v5) ═══════════════════════════════════ */

/* integrations directory rail: legacy app.css styled it with variables that do
   not exist here (--line/--fg/--hover), so their DARK fallbacks applied in
   both themes — a black box in light mode. Real tokens now; unlayered rules
   always beat layer(legacy). */
.intg-rail9.intg-rail9{background:var(--surface);border:1px solid var(--border-soft);border-radius:14px}
.intg-rail-lbl9{color:var(--muted)}
button.intg-rail-row9{color:var(--text-2);border-radius:8px}
button.intg-rail-row9:hover{background:var(--surface-2);color:var(--text)}
button.intg-rail-row9.on{background:color-mix(in srgb,var(--tab-active) 13%,transparent);color:var(--text);font-weight:600}

/* hbars: one line per row — label | bar | value. Bar length means share of
   the biggest again (stacked full-width bars read as meaningless blocks). The
   label may shrink and ellipsise; the value column sizes to itself, so it can
   never clip. Lists show SEVEN rows, then scroll. */
.hbar-row{grid-template-columns:minmax(48px,140px) minmax(24px,1fr) auto;grid-template-areas:none;row-gap:0}
.hbar-label,.hbar-val,.hbar-track{grid-area:auto}
.hbar-track{min-width:0}
.hbars{--hrow9:18px;--hgap9:10px}
.dw-body .hbars{max-height:calc(7*var(--hrow9) + 6*var(--hgap9));overflow-y:auto;
  overscroll-behavior:contain;padding-right:2px}

/* other long widget bodies scroll inside a fixed height instead of growing */
.dw-body .dw-rows,.dw-body .hist-list,.dw-body .dw-loc-list{
  max-height:238px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}

/* header hierarchy: the owner could not tell headers from body text. One
   scale, applied everywhere: page titles clearly larger, section dividers
   small-caps but BOLD and roomy, card titles unmistakably titles. */
.page > h1,.page-head h1,.detail-title{font-size:22px;font-weight:680;letter-spacing:-.02em}
.set-sec-head,.section-label{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--text-2);
  margin-top:28px;margin-bottom:10px}
.dw .card-head h3{font-size:12.5px;font-weight:700;color:var(--text-2)}
.card-head h3{font-size:14.5px;font-weight:650}
.veh-form-sec>h2{font-size:21px!important;font-weight:650!important;letter-spacing:-.02em;margin-top:2px}
.field-label,.field>span:first-child{font-weight:600}

/* light mode: hairlines were nearly invisible — their forms measure #d4d4d4.
   Ours land just beside it so the two themes finally have equal structure. */
body.light{--border:#cdd1d6;--border-soft:#dde0e4}
body.light .card,body.light .dw{background:#fff}

/* vehicle photo control (replaces the map-icon picker) */
.vphoto-box9{display:flex;align-items:flex-start;gap:16px}
.vphoto-prev9{width:132px;height:96px;flex:none;border-radius:12px;border:1px dashed var(--border);
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden}
.vphoto-prev9 svg{width:34px;height:34px}
.vphoto-prev9 img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.vphoto-act9{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* step navigation at the foot of each form pane */
.veh-step-nav9{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:26px;padding-top:14px;border-top:1px solid var(--border-soft)}
.vphoto-prev9.drag9{border-color:var(--tab-active);background:color-mix(in srgb,var(--tab-active) 10%,transparent)}


/* ── owner round 6 ────────────────────────────────────────────────────────── */
/* dashboard comments: icon small and on the RIGHT, text leads */
.dw .hist-row{align-items:center}
.dw .hist-row .hist-ic{order:2;margin-left:auto;width:22px;height:22px;border-radius:7px}
.dw .hist-row .hist-ic svg{width:12px;height:12px}
.dw .hist-row .hist-main{order:1}

/* integration detail: OUR anatomy — squircle logo, our header scale — the close-parity
   hero (152px tile / 32px name / their section sizes) retires. */
.intg-logo-xl9{width:64px;height:64px;border-radius:16px;font-size:22px}
.intg-hero-name9{font-size:24px;font-weight:650;letter-spacing:-.02em}
.intg-hero9{gap:16px;margin:4px 0 10px}
.intg-sec-t9{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.intg-desc9{font-size:14px;max-width:640px}
.intg-detail-grid9{gap:26px}
/* legacy layer paints these lists with dark-theme grey (#cfcfcf) — token it */
.intg-benefits9 li,.intg-feats9 li{color:var(--text)}

/* ── legacy variable aliases ───────────────────────────────────────────────
   The layered legacy sheet styles with names this system never defined
   (--fg, --line, --hover, ...), so its DARK fallback hexes applied in both
   themes — the black integrations rail and the grey detail lists were both
   this one bug. Aliasing the names to live tokens retires the whole class:
   var() resolves at usage time, so light mode flips these automatically. */
:root{
  --fg:var(--text); --fg-2:var(--text-2); --line:var(--border-soft);
  --hover:var(--surface-2); --panel:var(--surface);
  --warning:var(--warn); --success:var(--ok);
}
/* narrow screens: the page-head action cluster wraps instead of forcing the
   content pane to pan (dashboard measured 481px of actions on a 375px view) */
@media (max-width:560px){
  /* the HEAD row itself must wrap too — actions started at the title's right
     edge and ran off-screen even after wrapping internally */
  .page-head{flex-wrap:wrap;row-gap:10px}
  .page-actions{flex-wrap:wrap;row-gap:8px;justify-content:flex-start;max-width:100%;flex-basis:100%}
}

/* ═══ owner round 7 — spacing + pills ══════════════════════════════════════ */

/* dashboard comments: compact rows, icon back on the LEFT and small */
.dw .hist-row{align-items:center;padding:8px 10px}
.dw .hist-row .hist-ic{order:0;margin-left:0;margin-right:2px;width:20px;height:20px;border-radius:6px}
.dw .hist-row .hist-ic svg{width:11px;height:11px}
.dw .hist-row .hist-main{order:0}
.dw .hist-row .hist-title{font-size:12.5px;line-height:1.35}
.dw .hist-row .hist-sub{font-size:11.5px;margin-top:1px}

/* Fields card rhythm: title / search / groups breathe evenly */
.fields-card .fc-top{padding-bottom:4px}
.fields-card .fc-search{margin:8px 0 12px}
.fields-card .fc-group{padding:10px 0}
.fields-card .fc-group:first-of-type{padding-top:4px}

/* settings rail: tighter ladder, no doubled line beside the scrollbar —
   the rail separates by SURFACE, not by a border hugging the scrollbar */
.setx-rail{border-right:0;background:var(--surface)}
.setx-rail .setx-title{margin:8px 0 14px}
.setx-rail .back-btn{margin-bottom:2px}
.setx-rail input.input{margin-bottom:14px}
.setx-rail .setx-acct,.setx-rail [class*=acct]{margin-top:4px}

/* dashboard head select ("All groups"): sits like its neighbouring buttons */
.page-actions select,.page-actions .input{height:32px;border-radius:10px;background:var(--surface);
  border:1px solid var(--border-soft);color:var(--text);padding:0 12px;font-size:13px}

/* vehicle record right column: one gap, not margin + gap stacked */
.rec-side>.card{margin-bottom:0}
.rec-side{row-gap:14px}

/* FILTER PILLS: label + downward chevron ONLY — no leading icons, anywhere */
.wv-fcount>span:first-child:has(svg){display:none}
.wv-fcount .pop-caret{display:inline-flex}
.wv-fpill>span:has(svg):not(.wv-fpill-chev){display:none}
/* integration logo tiles: real logo on white when the file exists, monogram
   behind it as the permanent fallback (img removes itself on error) */
.intg-logo9{position:relative;overflow:hidden}
.intg-logo9 img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:#fff;padding:14%;border-radius:inherit;z-index:1}
.intg-mono9{position:relative;z-index:0}

/* report viewer */
.rv-kpis9{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rv-kpi9{display:flex;flex-direction:column;gap:2px;padding:10px 16px;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:12px;min-width:120px}
.rv-kpi9 b{font-size:19px;letter-spacing:-.01em}
.rv-kpi9 span{font-size:11.5px;color:var(--muted)}
.rv-chart9{margin:6px 0 16px}
.rv-tablewrap9{max-height:46vh;overflow:auto;border:1px solid var(--border-soft);border-radius:12px}
.rv-table9{width:100%;border-collapse:collapse;font-size:12.5px}
.rv-table9 th{position:sticky;top:0;background:var(--surface-2);text-align:left;padding:8px 12px;
  font-weight:600;color:var(--text-2);border-bottom:1px solid var(--border-soft);white-space:nowrap}
.rv-table9 td{padding:7px 12px;border-bottom:1px solid var(--border-soft)}
.rv-table9 td.num{text-align:right;font-variant-numeric:tabular-nums}
.modal-xl{width:900px;max-width:calc(100vw - 32px)}

/* ═══ owner round 8 — tint actives (no bars/underlines/dots), device record,
   richer integration detail ═════════════════════════════════════════════════ */

/* ACTIVE = SOFT TINT, everywhere. The record tabs, notification and task-panel
   tabs, notification-settings rows and theme cards all drop their orange or
   accent bars/underlines/dots for the same tinted squircle the sidebar nav and
   saved-view pills already use. Orange stays where it is an ACTION (primary
   buttons) or DATA (charts) — never a position marker. */
.veh-tab.on::after,.detail-tab.on::after,.sv-tab.active::after,.detail-tab.active::after{display:none!important;content:none!important}
.veh-tabs,.detail-tabs{gap:4px}
.veh-tab,.detail-tab{border-radius:9px}
.veh-tab.on,.detail-tab.on{background:color-mix(in srgb,var(--tab-active) 12%,transparent);color:var(--text)}
.ntf-tab,.tk-tab{border-bottom:0!important;border-radius:8px}
.ntf-tab.active,.tk-tab.active{background:color-mix(in srgb,var(--tab-active) 12%,transparent);color:var(--text)!important}
.nfs-it.active,.mr-row.sel{box-shadow:none!important;background:color-mix(in srgb,var(--tab-active) 10%,transparent)}
.thm-dot9{display:none!important}
/* row severity stripes read as stray orange bars at the table edge — the
   status badge in the row already carries the severity */
.dtr.acc-danger::before,.dtr.acc-warn::before{display:none!important}

/* ═══ devices page: state breakdown + needs-attention ═════════════════════
   Counting devices is not the same as knowing which ones need a person. The
   breakdown tiles filter the table; the attention panel lists only states that
   actually have devices in them, so it is empty when nothing is wrong. */
.dev-top9{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;
  align-items:start;margin:0 0 14px}
.dev-stats9{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.dev-stat9{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:11px 14px;border:1px solid var(--border-soft);border-radius:12px;
  background:var(--surface);cursor:pointer;text-align:left;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.dev-stat9:hover{background:var(--surface-2)}
.dev-stat9.on{border-color:color-mix(in srgb,var(--tab-active) 55%,transparent);
  background:color-mix(in srgb,var(--tab-active) 10%,transparent)}
.dev-stat-n9{font-size:21px;font-weight:650;letter-spacing:-.01em;line-height:1.1}
.dev-stat-n9.ok{color:var(--ok)} .dev-stat-n9.warn{color:var(--warn)}
.dev-stat-n9.info{color:var(--info)} .dev-stat-n9.muted{color:var(--muted)}
.dev-stat-l9{font-size:11.5px;color:var(--muted);font-weight:600}
.dev-attn9{padding:0}
.dev-attn-list9{display:flex;flex-direction:column}
.dev-attn-row9{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;
  border:0;border-top:1px solid var(--border-soft);background:none;cursor:pointer;text-align:left}
.dev-attn-list9>.dev-attn-row9:first-child{border-top:0}
.dev-attn-row9:hover{background:var(--surface-2)}
.dev-attn-tx9{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.dev-attn-tx9 b{font-size:13px;font-weight:600}
.dev-attn-tx9 small{font-size:11.5px;color:var(--muted);line-height:1.4}
.dev-attn-n9{font-size:17px;font-weight:650;flex:none;font-variant-numeric:tabular-nums}
.dev-attn-n9.warn{color:var(--warn)} .dev-attn-n9.muted{color:var(--muted)}
.dev-attn-n9.info{color:var(--info)}
@media (max-width:900px){.dev-top9{grid-template-columns:1fr}}

/* device record page */
.devd-head9{display:flex;align-items:center;gap:14px;margin:6px 0 16px;flex-wrap:wrap}
.devd-ic9{width:52px;height:52px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--border-soft);display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-2);flex:none}
.devd-ic9 svg{width:24px;height:24px}
.devd-tx9{min-width:0}
.devd-name9{margin:0;font-size:22px;font-weight:650;letter-spacing:-.01em}
.devd-by9{margin:3px 0 0;font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.devd-act9{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.devd-act9{margin-left:0;flex-basis:100%}}
.devd-note9{margin:10px 16px 14px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.devd-empty-act9{padding:0 16px 14px}

/* integration detail: sync chips, numbered go-live steps, more-in-category */
.intg-chips9{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.intg-chip9{padding:5px 12px;border-radius:999px;border:1px solid var(--border-soft);
  background:var(--surface-2);font-size:12.5px;color:var(--text)}
.intg-how9{margin:0;padding:0;list-style:none;counter-reset:ihow;display:flex;flex-direction:column;gap:10px}
.intg-how9 li{position:relative;padding-left:34px;font-size:14px;line-height:1.55;counter-increment:ihow}
.intg-how9 li::before{content:counter(ihow);position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:999px;background:var(--surface-2);border:1px solid var(--border-soft);
  font-size:11.5px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2)}
.intg-more9{margin-top:28px}
.intg-more-grid9{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:12px}
.intg-mini9{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border-soft);
  border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;min-width:0}
.intg-mini9:hover{background:var(--surface-2)}
.intg-mini9 .intg-logo9{width:32px;height:32px;border-radius:8px;font-size:12px;flex:none}
.intg-mini-nm9{font-size:13px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* logo tiles: a touch more air so full-bleed square marks don't kiss the edge */
.intg-logo9 img{padding:16%}
.intg-hero-by9{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ═══ owner round 9 — neutral chart ink, view toggles, integration tabs+list ═ */

/* DATA-VIZ drops orange (owner screenshot: the widget bars). Every chart
   fill/line/dot draws in neutral ink that follows the theme; secondary bars
   sit lighter. Orange survives ONLY on action buttons. */
:root,body{--viz9:color-mix(in srgb,var(--text) 78%,transparent);
  --viz-soft9:color-mix(in srgb,var(--text) 34%,transparent)}
.chart-bar{background:var(--viz-soft9)}
.chart-bar.hi,.chart-bar.max,.cbar.hi{background:var(--viz9)}
.hbar .hb-fill,.hbar-fill,.hb-fill{background:var(--viz9)}
.lchart .lc-line{stroke:var(--viz9)}
.lchart .lc-dot{fill:var(--viz9)}
.cbar.seg i.acc{background:var(--viz9)}
.bar-fill,.bar-cols .bar-col.on .bar-fill{background:var(--viz9)}

/* the segmented card/list switch (their pattern, our tint — never a bar) */
.view-tgl9{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border-soft);
  border-radius:10px;background:var(--surface)}
.view-tgl-b9{width:30px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:7px;background:none;color:var(--text-2);cursor:pointer}
.view-tgl-b9 svg{width:15px;height:15px}
.view-tgl-b9:hover{color:var(--text);background:var(--surface-2)}
.view-tgl-b9.on{background:color-mix(in srgb,var(--tab-active) 13%,transparent);color:var(--text)}

/* reports index: count + toggle row above the table/grid */
.rep-body-top9{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.rep-count9{font-size:12.5px;color:var(--muted)}
.rep-grid9 .report-card{cursor:pointer}
.rep-grid9 .report-head{align-items:flex-start}
.rep-card-star9{margin-left:auto}
.rep-grid9 .report-desc{flex:1 1 auto}

/* integrations: top tab strip + toggle, and the LIST view rows */
.intg-top9{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:2px 0 14px;flex-wrap:wrap}
.intg-tabs9{border-bottom:0;padding-bottom:0}
.intg-layout9.mine9{grid-template-columns:1fr}
.intg-layout9.mine9 .intg-rail9{display:none}
.intg-list9{display:flex;flex-direction:column;gap:8px}
.intg-lrow9{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border-soft);
  border-radius:12px;background:var(--surface);cursor:pointer;min-width:0}
.intg-lrow9:hover{background:var(--surface-2)}
.intg-lrow9 .intg-logo9{width:36px;height:36px;border-radius:9px;font-size:13px;flex:none}
.intg-lrow-tx9{display:flex;flex-direction:column;gap:1px;min-width:0;flex:0 0 190px}
.intg-lrow-nm9{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intg-lrow-cat9{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.intg-lrow-desc9{margin:0;flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.45;color:var(--text-2);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.intg-lrow-act9{flex:none}
@media (max-width:760px){
  .intg-lrow9{flex-wrap:wrap}
  .intg-lrow-tx9{flex:1 1 auto}
  .intg-lrow-desc9{flex-basis:100%;order:5}
}

/* legacy ops/welcome cards hardcoded #fff on the accent; on-accent follows
   the theme (white on ink-black, ink on near-white) */
.ops-welcome-number{color:var(--on-accent)!important}

/* ═══ owner round 11 — no bar-lines in ranked rows, quiet KPI tiles,
   directory polish ═══════════════════════════════════════════════════════ */

/* ranked rows: label ......... value — no track, no fill, a hairline between
   rows. Used by the dashboard rank widgets and every report insight list. */
.hbars-plain9{display:flex;flex-direction:column;--hrow9:26px;--hgap9:0px}
.hbars-plain9 .hbar-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  grid-template-columns:none;padding:5px 2px;min-height:26px;border-bottom:1px solid var(--border-soft)}
.hbars-plain9 .hbar-row:last-child{border-bottom:0}
.hbars-plain9 .hbar-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:12.5px;color:var(--text-2)}
.hbars-plain9 .hbar-val{flex:none;font-weight:650;font-size:12.5px;font-variant-numeric:tabular-nums}
.dw .hbars-plain9{max-height:none}
.rv-chart9 .hbars-plain9{max-width:560px}

/* KPI strips: compact bordered tiles, number first, quiet lowercase label —
   the loud full-width uppercase band retires (owner images: reminders,
   renewals, devices). Same grammar as the report-viewer KPI tiles. */
.kpi-strip{background:none;border:0;border-radius:0;gap:10px;flex-wrap:wrap;overflow:visible;margin-bottom:14px}
.kpi-tile{display:flex;flex-direction:column-reverse;flex:0 1 auto;min-width:130px;
  background:var(--surface);border:1px solid var(--border-soft);border-right:1px solid var(--border-soft);
  border-radius:12px;padding:10px 16px}
.kpi-label{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);
  margin:2px 0 0;white-space:nowrap}
.kpi-value{font-size:20px;font-weight:650;letter-spacing:-.01em;margin-top:0}
.page>.kpi-strip{margin-left:0;margin-right:0}

/* settings/forms overview metrics: icon beside a stacked number + label */
.set-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,220px));gap:10px}
.set-overview-card{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;
  column-gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--border-soft);
  border-radius:12px;background:var(--surface)}
.set-overview-card>span{grid-row:1 / span 2;width:36px;height:36px;border-radius:10px;
  background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;color:var(--text-2)}
.set-overview-card>span svg{width:16px;height:16px}
.set-overview-card b{font-size:18px;font-weight:650;letter-spacing:-.01em;line-height:1.15}
.set-overview-card small{font-size:11.5px;color:var(--muted)}
.set-overview-card.warn b{color:var(--warn)}

/* ═══ owner round 15 — screenshot bugs ════════════════════════════════════

   1. FOCUS RING SPREAD BEYOND THE FIELD. Search boxes wrap the input in a
      `.list-search` shell holding the magnifier, and the shell carried the
      focus ring via :focus-within — so tabbing into the box outlined the
      wrapper, the icon and the padding instead of the input. The ring now sits
      on the control that actually has focus, everywhere. */
.list-search:focus-within,.help-search:focus-within,.intg-search9:focus-within,
.lbl-box9:focus-within,.tb-search:focus-within,.fields-card .fc-search:focus-within{
  box-shadow:none;outline:none}
.list-search:focus-within{border-color:var(--border)}
input:focus-visible,textarea:focus-visible,select:focus-visible,
.input:focus,.field:focus,input.input:focus,textarea.input:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--focus)}
/* The field itself must still show focus — removing the wrapper ring without
   this left keyboard users with no indicator at all. An OUTLINE is used rather
   than a box-shadow because several later rules zero box-shadow on inputs
   inside these shells; outline hugs the field and nothing overrides it. */
/* `!important` is deliberate: several legacy rules zero the outline on inputs
   inside these shells (e.g. `.list-tools .list-search input:focus{outline:none}`),
   and the focus indicator is an accessibility requirement, not a preference. */
.list-search input:focus,.help-search input:focus,.intg-search9 input:focus,
.tb-search input:focus,.fields-card .fc-search input:focus,
.list-tools .list-search input:focus,.help-search .input:focus{
  outline:2px solid var(--accent)!important;outline-offset:1px!important;border-radius:7px}

/* 2. MARKETING NAV COLLISION. The brand had no width floor while the link row
      carried a 26px left margin, so at six links the words overlapped
      ("Moventra" printed over "Features") and the last link — Company — sat
      under the action cluster where it could not be clicked. */
.mk-nav{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
.mk-nav .brand{flex:0 0 auto;margin-right:0;white-space:nowrap}
.mk-nav .mk-links{flex:1 1 auto;min-width:0;margin-left:0;margin-right:0;
  display:flex;align-items:center;justify-content:center;gap:4px;
  overflow-x:auto;scrollbar-width:none}
.mk-nav .mk-links::-webkit-scrollbar{display:none}
.mk-nav .mk-links>a{white-space:nowrap;padding:8px 11px;flex:0 0 auto}
.mk-nav .site-nav-links{flex:0 0 auto;margin-left:0;white-space:nowrap}
@media (max-width:1100px){.mk-nav .mk-links>a{padding:8px 8px;font-size:13.5px}}

/* 3. SIGN-IN CARD. The submit button sat at its text width, floating left of a
      full-width form; the card read unfinished. Full-width submit, aligned
      helper row, and room to breathe. */
.auth-card .btn,.auth-card .btn-primary{width:100%;justify-content:center;height:44px;
  font-size:14.5px;border-radius:12px}
.auth-card .auth-forgot,.auth-card .auth-alt{display:flex;justify-content:center;width:100%}
.auth-card .field{margin-bottom:14px}
.auth-card .field input,.auth-card input.input{height:44px;font-size:14.5px}
.auth-card{padding:30px 30px 26px;max-width:420px}
.auth-card .auth-title{font-size:24px;margin-bottom:4px}
.auth-card .auth-sub{margin-bottom:20px}
.auth-links9{display:flex;justify-content:center;gap:12px;margin-top:16px;
  font-size:12.5px;color:var(--muted);flex-wrap:wrap}

/* ═══ owner round 14 — mobile polish ══════════════════════════════════════
   Measured on a 375px viewport: a dashboard widget stood 216px tall to show
   76px of content — 127px of it chrome (18px padding all round, plus a
   card-head forced to 63px because the uppercase title wrapped to two lines).
   With ~49 widgets that is thousands of pixels of pointless scrolling on a
   phone. Tightened for small screens only; the desktop rhythm is untouched. */
@media (max-width:760px){
  /* The card, its head and its body each carried their OWN padding on top of
     the card's, stacking to 121px of chrome around 76px of content. The card
     supplies the gutter on mobile; the inner boxes stop re-adding it. */
  .card.dw{padding:13px 14px;border-radius:12px}
  .dw .card-head{min-height:0;padding:0;margin:0 0 8px;align-items:flex-start}
  .dw .card-head h3{font-size:11.5px;line-height:1.3;letter-spacing:.05em}
  .dw .dw-body{min-height:0;padding:0}
  .dw .dw-rows{gap:0}
  .dw .statrow,.dw .dw-rows>*{padding-top:7px;padding-bottom:7px}
  /* KPI tiles: two per row instead of one long column */
  .kpi-strip{gap:8px}
  .kpi-tile{flex:1 1 calc(50% - 4px);min-width:0;padding:9px 12px}
  .kpi-value{font-size:18px}
  /* page heads and record heads stack rather than squeeze */
  .page-head h1,.page-head .page-title{font-size:21px}
  .devd-head9{gap:11px}
  .devd-name9{font-size:19px}
  /* section headers and detail grids go single column */
  .wo-grid,.intg-detail-grid9,.rec-grid{grid-template-columns:1fr!important}
  .intg-detail-side9{border-left:0;padding-left:0;border-top:1px solid var(--border-soft);padding-top:14px}
  /* billing sections breathe less */
  .bill-sec-h9{margin:18px 0 8px}
  .bill-sum-grid{grid-template-columns:1fr}
}
/* the live-map control rail sat 5px past a 375px viewport and was clipped by
   the content column, so its right edge was cut off on a phone */
@media (max-width:420px){
  .cc-rail{max-width:calc(100vw - 28px);box-sizing:border-box}
}
/* touch targets: the segmented view toggle measured 30x26 and row checkboxes
   15px on a phone — both under a comfortable thumb size */
@media (pointer:coarse),(max-width:760px){
  .view-tgl-b9{width:38px;height:34px}
  .view-tgl-b9 svg{width:16px;height:16px}
  .dt-chk{width:20px;height:20px}
}

/* ═══ owner round 14 — the MARKETING SITE goes responsive ══════════════════
   The public site had no width rules at all, which is why phones were sent to
   the sign-in page instead: a visitor on a phone could not read the pricing,
   the FAQ or anything else. Every one of the sixteen pages is assembled from
   the same dozen layout primitives, so one block makes the whole site work.
   Signed-in users are unaffected (the app renders at any width), and the
   installed app still opens straight at sign-in. */
@media (max-width:760px){
  /* nav: brand left, actions right, section links on their own scrollable row */
  .mk-nav{flex-wrap:wrap;row-gap:8px;padding:10px 14px;height:auto}
  .mk-nav .brand{flex:0 0 auto}
  .mk-nav .site-nav-links{margin-left:auto;gap:8px}
  .mk-nav .mk-links{order:3;flex-basis:100%;overflow-x:auto;gap:16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .mk-nav .mk-links::-webkit-scrollbar{display:none}
  .mk-nav .mk-links a{white-space:nowrap;font-size:13.5px}
  .mk-nav .nav-login{font-size:13.5px}
  /* hero + section type scale */
  .mk-hero{padding:26px 18px 8px}
  .home-h1{font-size:31px;line-height:1.12;letter-spacing:-.02em}
  .home-sub{font-size:15px}
  .home-ctas{flex-wrap:wrap;gap:8px}
  .land-h,.faq-gh9{font-size:20px}
  .land-sec{padding-left:18px;padding-right:18px}
  .land-p{font-size:14.5px}
  /* every marketing grid collapses to one column */
  .land-grid,.feature-grid,.plans-grid,.cmp-grid,.mk-books-grid,.mk-steps,
  .lp-grid9,.pintg-grid9,.pintg-cats9,.intg-more-grid9{grid-template-columns:1fr}
  .land-faq{padding-left:0;padding-right:0}
  /* stat bands and comparison rows wrap instead of squeezing */
  .stat-band{flex-wrap:wrap;gap:14px}
  .stat-band-i{flex:1 1 40%}
  /* Alternating feature rows are FLEX, not grid (a grid-template rule here did
     nothing): on a phone they were splitting 339px into 186px of copy beside
     135px of squeezed artwork. Stack them and give the art the full width. */
  .feat-row,.feat-row.flip{display:flex!important;flex-direction:column;gap:14px}
  .feat-row>.feat-copy,.feat-row>.feat-visual{flex:1 1 auto;width:100%;max-width:100%}
  .feat-visual .demo-shell,.feat-visual .focus-art{width:100%;max-width:100%}
  /* manuals and legal pages: contents list above the body, not beside it */
  .man-layout{grid-template-columns:1fr;gap:14px}
  .man-toc{position:static;border-right:0;border-bottom:1px solid var(--border-soft);
    padding:0 0 12px;margin-bottom:4px}
  .man-hero{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 18px 6px}
  .man-body h2{font-size:19px}
  /* footer: single readable column stack */
  .mkf-grid{grid-template-columns:1fr;gap:22px;padding:26px 18px}
  .mkf-brand{max-width:none}
  .mk-footer{text-align:left}
  .mkf-bottom{padding:14px 18px;font-size:12px}
  /* public help centre: categories above the answers */
  .help-page9{padding:0 14px 8px}
  .help-page9 .help-layout{grid-template-columns:1fr;gap:12px}
  .help-page9 .help-cats{flex-direction:row;flex-wrap:wrap;gap:6px}
  .help-page9 .help-cat{border:1px solid var(--border-soft);border-radius:999px;padding:6px 12px}
  .help-page9 .help-top{flex-direction:column;align-items:stretch;gap:8px}
  /* landing CTA blocks */
  .land-cta{padding:26px 18px}
  .land-cta h2{font-size:22px}
}

/* ═══ owner round 13 — public site: FAQ, help centre, integrations, sitemap ═ */

/* FAQ page: sticky section rail beside grouped accordions */
.faq-page9{display:grid;grid-template-columns:210px minmax(0,1fr);gap:36px;
  max-width:1080px;margin:0 auto;padding:0 24px}
.faq-nav9{position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;gap:2px}
.faq-nav-l9{text-align:left;border:0;background:none;color:var(--text-2);font-size:13px;
  padding:7px 10px;border-radius:8px;cursor:pointer}
.faq-nav-l9:hover{background:var(--surface-2);color:var(--text)}
.faq-group9{scroll-margin-top:96px;margin-bottom:34px}
.faq-gh9{text-align:left;font-size:20px;margin-bottom:12px}
.faq-body9 .land-faq{display:flex;flex-direction:column;gap:8px}
.faq-more9{max-width:1080px;margin:0 auto}
@media (max-width:860px){
  .faq-page9{grid-template-columns:1fr;gap:18px}
  .faq-nav9{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .faq-nav-l9{border:1px solid var(--border-soft);border-radius:999px;padding:6px 12px}
}

/* public help centre reuses the in-app help layout inside a page shell */
.help-page9{max-width:1120px;margin:0 auto;padding:0 24px 8px}
.help-page9 .help-layout{max-height:none}
.help-page9 .help-list{max-height:none;overflow:visible}
.help-page9 .help-cats{max-height:none;overflow:visible}

/* public integrations page */
.pintg-grid9{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pintg-tile9{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 12px;
  border:1px solid var(--border-soft);border-radius:14px;background:var(--surface)}
.pintg-tile9 img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:10px;padding:6px}
.pintg-nm9{font-size:12.5px;font-weight:600;color:var(--text);text-align:center}
.pintg-cats9{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.pintg-cat9{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:13px 16px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface)}
.pintg-cat9 b{font-size:13.5px}
.pintg-cat9 span{font-size:12px;color:var(--muted);white-space:nowrap}

/* public integrations directory: the app's directory components, re-seated in
   the full-width marketing shell (they normally live inside a padded page) */
.home-screen .intg-top9,
.home-screen .intg-layout9{max-width:1120px;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px}
.home-screen .intg-layout9{display:grid;grid-template-columns:236px minmax(0,1fr);gap:26px;align-items:start}
.home-screen .intg-rail9{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px}
.home-screen .intg-grid9{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.home-screen .intg-card9{text-align:left;align-items:stretch;font:inherit;color:inherit}
.home-screen .intg-top9{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.home-screen .mk-checks{max-width:820px;margin-left:auto;margin-right:auto}
@media (max-width:900px){
  .home-screen .intg-layout9{grid-template-columns:1fr}
  .home-screen .intg-rail9{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .home-screen .intg-rail-lbl9{width:100%}
}
/* third-party marks notice: present and readable, deliberately quiet */
.tp-notice9{max-width:820px;margin:6px auto 34px;padding:0 24px;font-size:11.5px;
  line-height:1.6;color:var(--muted);text-align:center}

/* partner page breadcrumb */
.mk-pcrumb9{max-width:1120px;margin:0 auto 6px;padding:0 24px;display:flex;align-items:center;
  gap:8px;font-size:13px;color:var(--muted)}
.rep-crumb-sep9{opacity:.6}
.home-screen .intg-hero9,
.home-screen .intg-desc9,
.home-screen .intg-detail-grid9,
.home-screen .intg-more9{max-width:1120px;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px}
.home-screen .intg-hero-act9{margin-left:auto}

/* sitemap */
.smap-grid9{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;
  max-width:1080px;margin:0 auto}
.smap-col9{display:flex;flex-direction:column;gap:4px;min-width:0}
.smap-l9{text-align:left;border:0;background:none;color:var(--text-2);font-size:13.5px;
  padding:5px 0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;transition:text-decoration-color var(--dur-fast) var(--ease)}
.smap-l9:hover{color:var(--text);text-decoration-color:currentColor}

/* ═══ owner round 12 — sidebar collapses as smoothly as it opens ═════════ */
/* THE ASYMMETRY (owner: "no animation when closing, only when opening"):
   the collapsed state clamped the rail with min-width AND max-width:64px on
   top of width:64px. `max-width` animates FROM `none`, and `none` is not an
   interpolatable length, so on COLLAPSE max-width snapped straight to 64px and
   clamped the width mid-transition -> instant jump. On EXPAND it snapped back
   to `none`, imposing no clamp, so width was free to ease 64 -> 252px: hence
   animation one way only. The clamps are unnecessary (the rail is
   flex:0 0 auto with an explicit width), so they go, and width transitions
   both ways. Do not reintroduce min/max-width here.
   NOTE for future debugging: this app's dev browser surfaces run with zero
   animation frames, so transitions neither progress nor emit transitionstart/
   transitionend there - never "verify" an animation by listening for those in
   the pane; read the CSS cascade instead. */
.layout.side-collapsed .sidebar{min-width:0;max-width:none}
@media (min-width:981px){
  .layout.side-collapsed .sidebar{min-width:0;max-width:none;width:64px}
}
.sidebar{transition:width var(--dur,.18s) var(--ease,ease)}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* ═══ owner round 12 — billing page sections ═════════════════════════════ */
/* Section headers give the page the same top-down spine the big fleet
   products use: Primary plan → All plans → Billing profile → Payments &
   receipts → Cancel or downgrade. Our type scale, our spacing. */
.bill-sec-h9{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:26px 0 10px}
.bill-sec-h9:first-of-type{margin-top:14px}
.bill-sec-h9 h2{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em}
.bill-prof9,.bill-pay9,.bill-cancel9{padding:4px 0}
.bill-prof9 .fc-row{padding:9px 16px}
.bill-pay9,.bill-cancel9{padding:14px 16px;display:flex;flex-direction:column;
  align-items:flex-start;gap:10px}
.bill-pay-line9{margin:0;font-size:13px;line-height:1.55;color:var(--text-2);max-width:70ch}

/* integrations directory: search in the top row, cards click through, the
   per-card boilerplate note retires for a quiet tag */
.intg-search9{flex:1 1 220px;max-width:340px}
.intg-search9 .input,.intg-search9 input{width:100%}
.intg-card9{cursor:pointer;transition:border-color var(--dur-fast) var(--ease)}
.intg-card9:hover{border-color:var(--border)}
.intg-tag9{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border-soft);border-radius:999px;padding:3px 9px}
.intg-blurb9{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.intg-acts9{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.intg-more-link9{font-size:12px;color:var(--muted)}
.intg-card9:hover .intg-more-link9{color:var(--text)}

/* ── FOCUS INDICATOR, final word ───────────────────────────────────────────
   Placed last on purpose. Earlier rules in this file and in the legacy layer
   zero the outline on inputs sitting inside search shells, so the ring has to
   be declared after all of them. The WRAPPER never rings (that was the bug the
   owner reported: focusing a search box outlined the whole pill, icon and
   padding included); the FIELD always does, because a keyboard user must be
   able to see where they are. */
.list-search input:focus,.help-search input:focus,.intg-search9 input:focus,
.tb-search input:focus,.fields-card .fc-search input:focus,
.list-tools .list-search input:focus,.help-search .input:focus,
.list-search input:focus-visible{
  outline:2px solid var(--accent)!important;
  outline-offset:1px!important;
  box-shadow:none!important;
  border-radius:7px}
.list-search:focus-within,.help-search:focus-within,.intg-search9:focus-within,
.tb-search:focus-within,.fields-card .fc-search:focus-within{
  box-shadow:none!important;outline:none!important}
/* ── PHONE TAB BAR ─────────────────────────────────────────────────────────
   A fleet manager on a phone opens the same handful of screens all day. Behind
   a hamburger every one of them cost two taps and nothing showed where you
   were. These five sit in thumb reach, the active one is lit, and "More" opens
   the full drawer so nothing is unreachable. Desktop never sees it. */
.mnav9{display:none}
@media (max-width:760px){
  .mnav9{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--border-soft);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .mnav-t9{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:48px;padding:5px 2px;border:0;background:none;cursor:pointer;
    color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.01em;
    text-decoration:none;border-radius:10px;font-family:inherit}
  .mnav-t9:active{background:var(--surface-2)}
  .mnav-ic9{display:inline-flex;align-items:center;justify-content:center;height:22px}
  .mnav-ic9 svg{width:21px;height:21px}
  .mnav-l9{line-height:1}
  .mnav-t9.on{color:var(--tab-active)}
  .mnav-t9.on .mnav-ic9{color:var(--tab-active)}
  /* the bar floats over the page, so the page needs room to scroll clear of it */
  .content{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}
  /* the hamburger is redundant once More exists */
  .topbar .tb-burger,.topbar .side-open{display:none}
}
/* ── Crash screen + offline notice ─────────────────────────────────────────
   A failed page should still look like the product, and it must give the person
   something they can quote to support. The offline bar states plainly that the
   figures on screen came from the last sync. */
.crash9{max-width:560px;margin:56px auto;padding:30px 28px;text-align:center;
  border:1px solid var(--border-soft);border-radius:16px;background:var(--surface)}
.crash-ic9{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:14px;background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger);margin-bottom:14px}
.crash-ic9 svg{width:22px;height:22px}
.crash9 h2{margin:0 0 8px;font-size:21px;font-weight:650;letter-spacing:-.01em}
.crash9 p{margin:0 auto 16px;font-size:14px;line-height:1.55;color:var(--text-2);max-width:44ch}
.crash-ref9{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:14px;
  border:1px solid var(--border-soft);border-radius:10px;background:var(--surface-2)}
.crash-ref9>span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.crash-ref9 code{font-size:14px;font-weight:650;letter-spacing:.06em;color:var(--text)}
.crash-msg9{font-size:12px!important;color:var(--muted)!important;word-break:break-word}
.crash-acts9{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.offbar9{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;
  justify-content:center;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--warn) 16%,var(--surface));
  border-top:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  color:var(--text);font-size:12.5px;line-height:1.4;text-align:center}
.offbar-ic9{display:inline-flex;color:var(--warn);flex:none}
.offbar-ic9 svg{width:16px;height:16px}
@media (max-width:760px){
  /* sits above the phone tab bar rather than under it */
  .offbar9{bottom:calc(60px + env(safe-area-inset-bottom,0px));text-align:left}
  body.is-offline9 .content{padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))!important}
}
/* ── Configuration lists · custom fields · record sets (v608) ──────────────
   These panes were read-only paragraphs; they are editable managers now, so
   they need rows that read as rows and an add box that reads as an add box. */
.cfg-card9{padding:6px 16px}
.cfg-list9{display:flex;flex-direction:column}
.cfg-row9{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--border-soft)}
.cfg-row9:last-child{border-bottom:0}
.cfg-row9.off9{opacity:.55}
.cfg-val9{flex:0 0 150px;font-size:11.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-row9 input.input,.cfg-row9 input{flex:1 1 auto;min-width:0}
.cfg-act9{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12.5px;color:var(--text-2)}
.cfg-act9 input{width:16px;height:16px;accent-color:var(--tab-active);flex:none}
.cfg-x9{flex:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--muted);border-radius:8px;cursor:pointer}
.cfg-x9:hover{background:var(--surface-2);color:var(--danger)}
.cfg-x9 svg{width:15px;height:15px}
.cfg-add9{display:flex;gap:8px;align-items:center;padding:12px 0 14px;border-top:1px solid var(--border-soft)}
.cfg-add9 input{flex:1 1 auto}
.cfg-top9{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.cf-type9{flex:0 0 96px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cf-label9{flex:1 1 auto;font-size:13.5px}
.rs-tx9{flex:1 1 auto;display:flex;flex-direction:column;gap:1px;min-width:0}
.rs-tx9 b{font-size:13.5px}
.rs-tx9 small{font-size:11.5px;color:var(--muted)}
.rs-use9{flex:none;font-size:12px;color:var(--muted)}
.rs-groups9{display:flex;flex-direction:column;gap:6px}
.cfg-missing9{display:flex;gap:14px;align-items:flex-start;padding:16px}
.cfg-missing-ic9{flex:none;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;
  justify-content:center;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.cfg-missing-ic9 svg{width:17px;height:17px}
.cfg-missing9 b{font-size:14px}
.cfg-missing9 p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--text-2);max-width:62ch}
@media (max-width:760px){
  .cfg-row9{flex-wrap:wrap;gap:8px}
  .cfg-val9{flex-basis:100%}
  .cf-type9{flex-basis:auto}
}
/* ── Settings section width on phones ──────────────────────────────────────
   .setx-body is display:grid with no explicit columns, so its single implicit
   column sized to `auto` = max-content. A wide child (the saved-view tab strip,
   a table header) therefore stretched the whole settings pane to 870px inside a
   375px viewport, and the pane scrolled sideways instead of stacking. Measured
   before/after at 375px. minmax(0,1fr) is the standard grid-blowout clamp: the
   column may not exceed the container, so children shrink instead.
   Harmless on desktop - the pane is capped at 920px there and 1fr fills it. */
.settings-page2 .setx-body{grid-template-columns:minmax(0,1fr)}
.settings-page2 .setx-body>*{min-width:0}