/* ═══════════════════════════════════════════════════════════════════════════
   US3 design-system component layer.
   Selectors are `body`-prefixed on purpose: the app injects several stylesheets
   at RUNTIME (injectCSS / us3b2InjectCSS), which land after this block in the
   cascade — the extra specificity makes these win regardless of order.
   Inline-styled nodes (e.g. #us3ScanBadge) need !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ────────────────────────────────────────────────────────────── */
body .us3b2-btn{height:38px;padding:0 15px;border-radius:9px;border:0;background:var(--brand);color:var(--brand-contrast);
  font:600 13px/1 'Hanken Grotesk',sans-serif;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;cursor:pointer;box-shadow:var(--shadow);transition:background .15s,box-shadow .15s;white-space:nowrap;}
body .us3b2-btn:hover{background:var(--brand-2);}
body .us3b2-btn.alt{background:var(--surface);color:var(--text-2);border:1px solid var(--border);box-shadow:none;}
body .us3b2-btn.alt:hover{background:var(--surface-2);color:var(--text);}
body .us3b2-btn:disabled{opacity:.5;cursor:default;box-shadow:none;}
body .us3b2-btn.wide{width:100%;}

body .btn{height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font:600 12.5px/1 'Hanken Grotesk',sans-serif;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;cursor:pointer;transition:.15s;}
body .btn:hover{background:var(--surface-2);color:var(--text);}
body .btn.primary,body .btn.save{background:var(--brand);border-color:transparent;color:var(--brand-contrast);}
body .btn.primary:hover,body .btn.save:hover{background:var(--brand-2);}
body .btn.danger,body .btn.del{background:var(--danger-weak);border-color:transparent;color:var(--danger);}

body .admin-btn{height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);font:600 12px/1 'Hanken Grotesk',sans-serif;text-transform:none;letter-spacing:0;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.15s;}
body .admin-btn:hover{background:var(--surface-2);color:var(--text);}
body .admin-btn.active{background:var(--brand-weak);color:var(--brand);border-color:transparent;}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
body .us3b2-input{height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font:500 13px 'Hanken Grotesk',sans-serif;outline:none;transition:border-color .15s;}
body textarea.us3b2-input{height:auto;min-height:80px;padding:10px 12px;line-height:1.5;}
body .us3b2-input:focus{border-color:var(--brand);}
body .us3b2-input::placeholder{color:var(--text-3);}

/* ── Technicians sub-tab pills ──────────────────────────────────────────── */
body #techSubBar{background:var(--topbar-bg);}
body #techSubBar .tsb-inner{padding:9px 22px;gap:6px;}
body .tsb-tab{height:34px;padding:0 14px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--text-3);font:600 12.5px/1 'Hanken Grotesk',sans-serif;text-transform:none;letter-spacing:0;transition:.15s;}
body .tsb-tab:hover{background:var(--surface-2);color:var(--text);border-color:var(--border);}
body .tsb-tab.active{background:var(--surface);color:var(--brand);border-color:var(--border);box-shadow:var(--shadow);}
body .tsb-tab .ti{font-size:14px;}

/* ── Cards / surfaces ───────────────────────────────────────────────────── */
body .us3w-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;}
body #us3Detail .us3w-card{background:var(--surface)!important;border-color:var(--border)!important;}
body #us3Detail{background:var(--bg)!important;color:var(--text)!important;}
body .av-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;}
body .us3id-chip{border-radius:10px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;}
body .us3id-chip:hover{background:var(--brand-weak);border-color:transparent;color:var(--brand);}

/* ── Section titles: drop the industrial uppercase/letter-spacing ───────── */
body .us3w-h,body .dc-title,body .am-title,body .mc-panel-title,body .ep-title,body .stub-t{
  text-transform:none;letter-spacing:-.01em;font-family:'Hanken Grotesk',sans-serif;font-weight:700;color:var(--text);}
body .mc-panel-title,body .dc-title,body .am-title{font-size:15px;}
body .us3w-h{font-size:19px;}
/* build-02 (scanner/kit/count) headings + pills */
body .us3b2-h{text-transform:none;letter-spacing:-.01em;color:var(--text);font-weight:700;font-family:'Hanken Grotesk',sans-serif;}
body .us3b2-label{letter-spacing:.06em;font-size:10.5px;color:var(--text-3);}
body .us3b2-pill{text-transform:none;letter-spacing:0;border-radius:20px;font-family:'Hanken Grotesk',sans-serif;font-size:12px;}
body .us3b2-scanin{border-radius:12px;border:1.5px solid var(--border);letter-spacing:0;background:var(--surface-2);}
body .us3b2-scanin:focus{border-color:var(--brand);}

/* ── Tables ─────────────────────────────────────────────────────────────── */
body .rt-jobs th,body .av-table th{font:700 10px 'Hanken Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface);}
body .rt-jobs td,body .av-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;}
body .rt-jobs tbody tr:nth-child(even){background:transparent;}
body .rt-jobs tbody tr:hover{background:var(--surface-2);}

/* ── The three floating actions (top-right lookup · bottom-left tour · bottom-right US3i) ── */
/* #us3ScanBadge is styled inline in JS -> needs !important to re-skin. */
body #us3ScanBadge{top:74px!important;right:22px!important;height:38px!important;padding:0 13px!important;
  border-radius:10px!important;border:1px solid var(--border)!important;background:var(--surface)!important;
  color:var(--text-2)!important;font:600 12.5px/1 'Hanken Grotesk',sans-serif!important;text-transform:none!important;
  letter-spacing:0!important;box-shadow:var(--shadow)!important;backdrop-filter:none!important;gap:8px!important;}
body #us3ScanBadge{opacity:1!important;} /* state reads from the dot + label, not a faded button */
body #us3ScanBadge:hover{background:var(--surface-2)!important;color:var(--text)!important;}

body .us3tour-wrap{left:22px;bottom:22px;gap:5px;}
body .us3tour-fab{width:48px;height:48px;border-radius:14px;border:1px solid var(--border);background:var(--surface);
  color:var(--brand);font-size:20px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;transition:transform .15s;}
body.light .us3tour-fab{background:var(--surface);color:var(--brand);}
body .us3tour-wrap:hover .us3tour-fab{transform:translateY(-2px);}
body .us3tour-wrap>div,body .us3tour-lbl{font:700 9.5px 'Hanken Grotesk',sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3);}

/* US3i FAB (bottom-right) — keep it the one brand-filled action. */
body #us3iFab{right:22px;bottom:22px;width:56px;height:56px;border-radius:16px;box-shadow:var(--shadow-lg);}

/* ── Dashboard rhythm: one content width, one card language ─────────────── */
body #page-mc .dash-inner{max-width:1500px;}
/* these two are inline-styled in JS -> !important */
body #houstonInfoBar{border-radius:12px!important;background:var(--surface)!important;border:1px solid var(--border)!important;
  box-shadow:var(--shadow)!important;padding:12px 18px!important;margin-bottom:15px!important;}
body #houstonInfoBar span,body #houstonInfoBar a{text-transform:none!important;letter-spacing:0!important;
  font-family:'Hanken Grotesk',sans-serif!important;}
body #houstonInfoBar a{border-radius:8px!important;padding:6px 12px!important;font-weight:600!important;font-size:12.5px!important;}
/* Equipment Requests: keep it the accent card, but in the design's language */
body #equipReqContainer>div{background:var(--surface)!important;border:1px solid var(--border)!important;
  border-left:3px solid var(--warn)!important;border-radius:14px!important;box-shadow:var(--shadow)!important;padding:16px 18px!important;}
body #equipReqContainer .us3w-h,body #equipReqContainer>div>div:first-child{text-transform:none!important;letter-spacing:0!important;}

/* ── Responsive grids ───────────────────────────────────────────────────────
   These live in classes (NOT inline grid-template-columns) precisely so the
   breakpoints below can win — an inline style would beat any stylesheet rule. */
body .us3-tiles{grid-template-columns:repeat(5,1fr);}
body .us3-tiles4{grid-template-columns:repeat(4,1fr);}
body .us3-2col{grid-template-columns:1.6fr 1fr;}
body .us3-2col-even{grid-template-columns:1fr 1fr;}
body .us3-board{grid-template-columns:repeat(4,1fr);}
@media(max-width:1280px){ body .us3-tiles{grid-template-columns:repeat(3,1fr);} }
@media(max-width:1100px){
  body .us3-2col,body .us3-2col-even{grid-template-columns:1fr;}
  body .us3-tiles4,body .us3-board{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){ body .us3-tiles{grid-template-columns:repeat(2,1fr);} }
@media(max-width:460px){ body .us3-tiles,body .us3-tiles4,body .us3-board{grid-template-columns:1fr;} }

/* ═══ RESPONSIVE SHELL — one source of truth for the rail ═══════════════════
   The app hardcodes the OLD top-nav geometry on some pages with ID specificity:
     #page-sched   {position:fixed;top:62px;left:0;...}   (line ~217)
     #page-assetmap{position:fixed;top:62px;left:0;...}   (line ~176)
   An ID (1,0,0) always beats .page (0,1,0) no matter the source order, so those
   pages rendered UNDERNEATH the fixed sidebar (content clipped on the left).
   Re-point every offset at --rail so there is exactly one number to change. */
:root{--rail:262px;}
body #topbar{left:var(--rail);}
body #techSubBar{left:var(--rail);}
body .page{left:var(--rail);top:60px;}
body #page-sched{top:60px;left:var(--rail);right:0;bottom:0;}
body #page-assetmap{top:60px;left:var(--rail);}  /* keep its own bottom offset */
/* Never clip content — scroll it. Legacy tables carry hard min-widths (720/900/1150px),
   so at small/zoomed viewports they must be reachable, not cut off. */
body .page{overflow:auto;}
body #resvTool,body .dc-inner,body #fleetScroll,body #page-sched{overflow:auto;}
body #dcInner,body #resvTool>div{max-width:100%;}

/* Collapse the rail early enough that zoomed desktops + tablets never overlap.
   (Browser zoom shrinks the CSS viewport, so this is what makes zoom work.) */
@media(max-width:1024px){
  :root{--rail:0px;}
  body #nav{transform:translateX(-100%);box-shadow:var(--shadow-lg);}
  body.nav-open #nav{transform:none;}
  body .us3-hamb{display:flex;}
  body .us3-topsearch{display:none;}
}
@media(max-width:560px){
  body #topbar{padding:0 12px;gap:8px;}
  body .us3-crumb span{display:none;}
  body .us3-crumb svg{display:none;}
  body #dcInner,body .dc-inner{padding:16px 12px;}
  body .dc-card{flex:1 1 140px;}
  body #us3ScanBadge{top:66px!important;right:12px!important;}
  body #us3iFab{right:12px;bottom:12px;width:50px;height:50px;}
}

/* ── Decommission: ONE centered content column ──────────────────────────────
   Was three different widths — chart max-width:900px auto, table max-width:1050px
   auto, and title/cards/chips full-bleed left. Now everything shares one column. */
body #dcInner{max-width:1140px;margin:0 auto;}
body .dc-board{gap:14px;}
body .dc-card{max-width:none;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);}
body .dc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--border-strong);}
body .dc-table-wrap{max-width:none!important;margin:20px 0!important;border:1px solid var(--border)!important;border-radius:12px;}
body .dc-sub{font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;color:var(--text-2);}
body .dc-period-lbl{font-size:10.5px;letter-spacing:.08em;color:var(--text-3);margin-right:6px;}
body .qchip{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;padding:7px 14px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);}
body .qchip:hover{background:var(--surface-2);color:var(--text);}
body .qchip.active{background:var(--brand-weak);color:var(--brand);border-color:transparent;}

/* ── Theme leaks: surfaces that were hardcoded dark and broke LIGHT mode ─── */
/* Device Lookup popover — inline cssText in JS, so !important. Its badge was
   re-skinned earlier, which left a clean button opening a black slab. */
body #us3ScanPop{top:118px!important;right:22px!important;background:var(--surface)!important;
  border:1px solid var(--border)!important;border-radius:14px!important;color:var(--text)!important;
  box-shadow:var(--shadow-lg)!important;}
body #us3ScanPop input{background:var(--surface-2)!important;border:1px solid var(--border)!important;
  color:var(--text)!important;border-radius:9px!important;}
body #us3ScanPop input::placeholder{color:var(--text-3)!important;}
/* US3ID switcher / Command Center (runtime-injected, hardcoded #141b2e slabs) */
body .us3id-modal,body .us3id-toast{background:var(--surface);color:var(--text);border:1px solid var(--border);}
body .us3id-tbl select,body .us3id-psel,body .us3id-link,body .us3id-statbox{
  background:var(--surface-2);color:var(--text);border:1px solid var(--border);}
body .us3id-tile,body .us3id-bench{background:var(--surface-2);border:1px solid var(--border);}
/* Tour card (the fab was fixed earlier; the card itself was still a dark modal) */
body .us3tour-box{background:var(--surface);color:var(--text);border-color:var(--border);}
body .us3tour-box p{color:var(--text-2);}
body .us3tour-ghost{color:var(--text-2);border:1px solid var(--border);}
/* Tech sub-bar shadow was light-mode-only via a legacy body.light rule */
body.light #techSubBar{box-shadow:var(--shadow);}

/* ── Misc polish ────────────────────────────────────────────────────────── */
body .us3prow{border-radius:9px;padding:9px 11px;}
body .us3prow:hover{background:var(--surface-2);}
body .us3badge{border-radius:20px;font-family:'IBM Plex Mono',monospace;font-weight:600;}
body .us3b2-empty,body .us3w-empty{color:var(--text-3);font-family:'Hanken Grotesk',sans-serif;}
body .us3b2-warn{border-radius:10px;background:var(--danger-weak);border:1px solid var(--danger);color:var(--danger);padding:10px 14px;}

/* Equipment Requests title/buttons are inline-styled in JS -> !important */
body #equipReqContainer>div>div:first-child span:first-child{text-transform:none!important;letter-spacing:-.01em!important;
  color:var(--text)!important;font-size:15px!important;}
body #equipReqContainer button{height:36px!important;padding:0 14px!important;border-radius:9px!important;
  text-transform:none!important;letter-spacing:0!important;font:600 12.5px 'Hanken Grotesk',sans-serif!important;}

/* ── Floating actions must not collide with the sidebar ─────────────────── */
/* The rail owns x<--rail — park the tour/help fab just inside the content.
   MUST track --rail: a fixed 284px stranded the fab on top of content between
   861-1024px (rail already collapsed, old override only fired at <=860). */
body .us3tour-wrap{left:calc(var(--rail) + 22px);bottom:22px;}

/* ── Sidebar footer: identity chip + sign-out stack instead of overlapping ─ */
body .us3-userbox .nr{flex-wrap:wrap;gap:7px;padding:4px;}
body .us3-userbox .us3-uav{display:none;}
body .us3-userbox .us3id-chip{margin-left:0!important;flex:1 1 100%;justify-content:flex-start;font-size:11.5px;}
body .us3-userbox #userDisplay{flex:1 1 100%;min-width:0;display:flex!important;align-items:center;justify-content:space-between;gap:8px;}
body .us3-userbox #userName{font-size:12px;}