@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600&display=swap');
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

/* ============== Page shell: header spans the top; the sidebar
   (#tabsNav) and the content (#content) share the row below it, as a
   2-column grid whose left column widens from 0 to the sidebar's
   width when open — #content, centered within its own column via the
   main{} rule further down, visibly slides over as that column
   shrinks, and slides back when the sidebar closes. ============== */
body:not(.login-page){display:grid;grid-template-columns:0 minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh;
  transition:grid-template-columns .25s ease;}
body.nav-open{grid-template-columns:240px minmax(0,1fr);}
.site-header{grid-column:1 / -1;grid-row:1;position:sticky;top:0;z-index:70;}
#tabsNav{grid-column:1;grid-row:2;position:sticky;top:0;align-self:stretch;}
/* min-width:0 is load-bearing: a grid item's automatic minimum size
   defaults to its content's min-content width, so without this, wide
   un-wrapped content (a table, a row of fields) forces #content past its
   own 1fr track instead of actually shrinking to it — minmax(0,1fr) on
   the track alone only stops the TRACK from growing, not the item. */
#content{grid-column:2;grid-row:2;min-width:0;}
#portalFooter{grid-column:1 / -1;}
.nav-backdrop{display:none;}
/* Below 760px there isn't room to both push #content over AND leave it
   usable — pushing by min(80vw,240px) on a 375px phone left barely 135px
   for #content. Instead the sidebar becomes a fixed overlay drawer (standard
   mobile pattern): #content always keeps the full width, #tabsNav floats
   on top and slides in from the left, and a dimmed backdrop (js/nav.js's
   ensureNavBackdrop()) sits behind it and closes it on tap. */
@media (max-width:760px){
  body.nav-open{grid-template-columns:0 minmax(0,1fr);}
  #tabsNav{position:fixed;top:0;left:0;bottom:0;width:0;z-index:80;transition:width .25s ease;}
  body.nav-open #tabsNav{width:min(80vw,280px);}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(8,16,30,.5);z-index:75;
    opacity:0;pointer-events:none;transition:opacity .2s ease;}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto;}
}

/* ============== Site header: hamburger+brand, search, then the
   existing right-side cluster, as a 3-column grid (1fr/auto/1fr) so
   the search box sits on the header's true centre line regardless of
   how wide the brand or the right-side cluster are ============== */
.site-header{background:var(--navy);padding:10px 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px;}
.hdr-left{grid-column:1;justify-self:start;min-width:0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.hdr-menu-btn{flex:0 0 auto;background:transparent;border:1px solid rgba(255,255,255,.25);
  border-radius:8px;color:#fff;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .12s;}
.hdr-menu-btn:hover{background:rgba(255,255,255,.12);}
.hdr-brand{flex:0 0 auto;display:flex;align-items:center;gap:10px;text-decoration:none;}
.hdr-logo{height:34px;width:auto;display:block;}
.hdr-title{color:#fff;font-weight:800;font-size:13.5px;line-height:1.3;letter-spacing:.01em;}

/* ============== Page header (title + whoami) — every page's js/nav.js
   unconditionally hides this (redundant with the sidebar) right after
   renderHeader() runs, so it should never actually be seen — display:none
   by default (not just via JS) stops the raw "Home / Intake (New/RMA) →
   Requests → ..." text flashing on screen for a moment on every page load,
   before scripts finish running. ============== */
header.page-header{display:none;padding:18px 28px 14px;background:var(--card);border-bottom:1px solid var(--line);}
header.page-header h1{margin:0 0 2px;font-size:20px;letter-spacing:-0.01em;}
header.page-header p{margin:0;color:var(--sub);font-size:13px;}

/* ============== Header search (moved here from Home so it works on
   every page — js/domain.js builds the result cards) ============== */
.hdr-search{grid-column:2;justify-self:center;position:relative;width:min(40vw,440px);min-width:220px;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:0 12px;height:38px;}
.hdr-search-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);
  border:none;background:none;padding:2px;margin:0;cursor:pointer;border-radius:5px;transition:background .12s,color .12s;}
.hdr-search-icon:hover,.hdr-search-icon:focus-visible{color:#fff;background:rgba(255,255,255,.14);}
.hdr-search-icon:focus-visible{outline:2px solid var(--accent-bright);outline-offset:1px;}
.hdr-search input[type=text]{flex:1 1 auto;background:none;border:none;color:#fff;font-size:13px;padding:0;height:100%;border-radius:0;box-shadow:none;}
.hdr-search input[type=text]::placeholder{color:rgba(255,255,255,.55);}
.hdr-search input[type=text]:focus, .hdr-search input[type=text]:hover{background:none;border:none;outline:none;box-shadow:none;}
.hdr-search-results{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:clamp(480px,94vw,1180px);max-height:70vh;overflow-y:auto;
  z-index:55;}
.hdr-search-results:empty{display:none;}
.hdr-search-results tbody tr{cursor:pointer;}
.hdr-search-results tbody tr:hover{background:var(--teal-bg,rgba(16,169,214,.08));}

/* ============== Sidebar (#tabsNav): closed (0-width) by default,
   js/nav.js toggles body.nav-open to expand it and push #content ============== */
nav.tabs{overflow:hidden;background:var(--navy-700);border-right:0 solid #0B2342;padding:10px 0;
  display:flex;flex-direction:column;gap:2px;transition:border-right-width .25s ease, padding-left .25s ease, padding-right .25s ease;}
body.nav-open #tabsNav{border-right-width:1px;padding-left:8px;padding-right:8px;}
nav.tabs a{display:flex;align-items:center;gap:12px;white-space:nowrap;border:none;background:transparent;
  padding:10px 12px;font-size:13px;font-weight:600;color:rgba(255,255,255,.72);cursor:pointer;transition:.15s;text-decoration:none;}
nav.tabs a svg{flex:0 0 auto;}
nav.tabs a:hover{background:rgba(255,255,255,.08);color:#fff;}
nav.tabs a.active{color:#fff;background:rgba(16,169,214,.16);border-left:3px solid var(--accent-bright, #10A9D6);padding-left:9px;}
nav.tabs a[data-tab="intake"].active{border-left-color:var(--teal);}
nav.tabs a[data-tab="history"].active{border-left-color:var(--purple);}
nav.tabs a[data-tab="notify"].active{border-left-color:var(--pink);}
nav.tabs a[data-tab="requests"].active{border-left-color:var(--purple);}
nav.tabs a[data-tab="testing"].active{border-left-color:var(--coral);}
nav.tabs a[data-tab="report"].active{border-left-color:var(--pink);}
nav.tabs a[data-tab="admin"].active{border-left-color:var(--navy);}

/* width:100% is load-bearing, not decorative: margin:0 auto alone makes a
   block "opt out" of stretching to fill its grid track (auto margins
   absorb the stretch instead), so without it #content/main sizes itself
   by shrink-to-fit on its own content — on a phone-width screen, wide
   un-wrapped content (a table, a row of fields) then grows main past the
   real viewport instead of being constrained by it. width:100% forces it
   to fill the track it's actually given; max-width still caps/centers it
   on wide screens exactly as before. */
main{width:100%;padding:24px 28px 60px;max-width:1180px;margin:0 auto;}
/* One consistent gap between every top-level section on a page (a
   card, a .grid row, a .stat-row, whatever) — the old .card + .card
   rule below only fired when two literal .card elements happened to
   be adjacent siblings, which missed most real page layouts (a .grid
   row or .stat-row next to a card) and produced inconsistent gaps
   from page to page. This matches at #content's own direct children
   only, so it doesn't touch spacing already handled inside a section
   (e.g. Home's dash-top-grid/attn-grid internals). */
#content > * + *{margin-top:20px;}
.grid{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start;}
@media (max-width:900px){.grid{grid-template-columns:1fr;}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;}
.card + .card{margin-top:16px;}
/* .grid's two cards sit side by side, not stacked — the rule above
   was still pushing the second one down, misaligning their top edges
   (same bug already fixed for .dash-side/.attn-grid/.dash-tables). */
.grid > .card + .card{margin-top:0 !important;}
.card h2{margin:0 0 4px;font-size:15px;}
.card .hint{margin:0 0 16px;color:var(--sub);font-size:12.5px;}
label{display:block;font-size:12.5px;font-weight:600;color:var(--sub);margin:12px 0 5px;}
label:first-of-type{margin-top:0;}
input[type=text], input[type=number], input[type=date], input[type=password], select, textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;background:#fff;color:var(--ink);font-family:inherit;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--teal);outline-offset:1px;}
.row{display:flex;gap:10px;flex-wrap:wrap;}
.row > *{flex:1 1 180px;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:8px;border:1px solid transparent;font-size:13px;font-weight:700;cursor:pointer;transition:.12s;}
/* A form's main submit/action button (Save Purchase Order, Record
   Indent, etc.) sits at the end of its card, right-aligned instead of
   stuck to the left edge like a stray label would be. */
.btn.btn-end{display:block;margin-left:auto;width:max-content;}
.btn-teal{background:var(--teal);color:#fff;} .btn-teal:hover{background:var(--teal-dark);}
.btn-purple{background:var(--purple);color:#fff;}
.btn-coral{background:var(--coral);color:#fff;}
.btn-amber{background:var(--amber);color:#fff;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-pink{background:var(--pink);color:#fff;}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink);}
.btn-ghost:hover{background:var(--bg);}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:7px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
/* Most tables in the app (Requests, Batches, Admin, Testing, etc.) aren't
   wrapped in .table-scroll — on a phone-width screen a wide table would
   otherwise force the whole page to scroll sideways. Scoped to mobile only
   so desktop/tablet layouts (already tuned) are untouched; modals and
   dropdowns are appended straight to <body> (position:fixed/absolute), not
   nested inside a .card, so this can't clip them. */
@media (max-width:760px){
  .card{overflow-x:auto;}
}
th{text-align:left;color:var(--sub);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--line);}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.b-teal{background:var(--teal-bg);color:var(--teal-dark);}
.b-purple{background:var(--purple-bg);color:var(--purple);}
.b-coral{background:var(--coral-bg);color:var(--coral);}
.b-amber{background:var(--amber-bg);color:var(--amber);}
.b-navy{background:var(--navy-bg);color:var(--navy);}
.b-pink{background:var(--pink-bg);color:var(--pink);}
.empty{padding:30px 10px;text-align:center;color:var(--sub);font-size:13px;}
.stat-row{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.stat{flex:1;min-width:120px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.stat .n{font-size:22px;font-weight:800;line-height:1;}
.stat .l{font-size:11.5px;color:var(--sub);margin-top:4px;}
.mac-boxes{display:flex;align-items:center;gap:4px;}
.mac-boxes input{width:38px;text-align:center;padding:7px 0;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace;font-weight:700;}
.mac-colon{color:var(--sub);font-weight:700;}
.device-panel{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:12px;background:var(--bg);}
.device-panel h3{margin:0 0 12px;font-size:13.5px;}
/* Device History dialog layout: summary facts grid + a dotted-line event
   timeline (newest first), reused by both the search dialog and the
   standalone Device History page. Inside a modal the outer .device-panel
   border/padding is dropped so it doesn't double up with the modal's own. */
.modal .device-panel.dh{border:none;padding:0;margin-top:0;background:transparent;}
.dh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px;}
.dh-head h3{margin:0;font-size:22px;font-weight:800;color:var(--ink);}
.dh-serial{font-size:14px;color:var(--sub);margin-top:2px;}
.dh-summary{border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;row-gap:14px;column-gap:24px;background:var(--card);}
.dh-summary .dh-row3{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:24px;row-gap:14px;}
.dh-field label{display:block;font-size:11.5px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px;}
.dh-val{font-size:14.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px;}
.dh-val.dh-mono{font-family:ui-monospace,Menlo,monospace;}
.dh-copy{border:none;background:none;color:var(--sub);cursor:pointer;padding:2px;display:inline-flex;border-radius:5px;}
.dh-copy:hover{color:var(--accent-bright);background:var(--teal-bg,rgba(16,169,214,.1));}
.dh-events-title{margin:22px 0 10px;font-size:15px;font-weight:800;color:var(--ink);}
.dh-timeline{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);}
.dh-timeline .dh-row{display:grid;grid-template-columns:28px 180px 1fr 170px;column-gap:14px;align-items:start;padding:13px 16px;border-bottom:1px solid var(--line);}
.dh-timeline .dh-row:last-child{border-bottom:none;}
.dh-row-head{background:var(--cream-200);font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.03em;padding-top:10px;padding-bottom:10px;}
.dh-dotcol{position:relative;display:flex;justify-content:center;align-self:stretch;}
.dh-dotcol::before{content:"";position:absolute;top:-13px;bottom:-13px;left:50%;width:2px;background:var(--line);transform:translateX(-50%);}
.dh-row-latest .dh-dotcol::before{top:50%;}
.dh-row:last-child .dh-dotcol::before{bottom:50%;}
.dh-dot{width:11px;height:11px;border-radius:50%;background:var(--card);border:2px solid var(--sub);margin-top:4px;position:relative;z-index:1;}
.dh-row-latest .dh-dot{width:14px;height:14px;margin-top:2px;background:var(--accent-bright);border-color:var(--accent-bright);box-shadow:0 0 0 4px var(--teal-bg,rgba(16,169,214,.18));}
.dh-ev-name{font-weight:700;color:var(--ink);font-size:13.5px;}
.dh-row-latest .dh-ev-name{color:var(--accent-bright);}
.dh-ev-detail{color:var(--sub);font-size:13px;line-height:1.4;}
.dh-ev-time{color:var(--sub);font-size:12.5px;text-align:right;white-space:nowrap;}
@media (max-width:620px){
  .dh-summary{grid-template-columns:1fr;}
  .dh-summary .dh-row3{grid-template-columns:1fr;}
  /* Column headers ("Event/Details/Date") don't carry over to a single
     stacked column — each row already labels itself (bold event name). */
  .dh-timeline .dh-row-head{display:none;}
  /* Without explicit columns here, grid auto-placement packs ev-name into
     column 2 of row 1 (next to the dot) but then wraps back to column 1
     for ev-detail/ev-time — overlapping the dot and each other. Forcing
     all three into column 2 lets them stack normally down that column,
     with the dot (spanning every row) as the connecting line beside them. */
  .dh-timeline .dh-row{grid-template-columns:20px 1fr;row-gap:2px;}
  .dh-dotcol{grid-column:1;grid-row:1 / -1;}
  .dh-ev-name,.dh-ev-detail,.dh-ev-time{grid-column:2;}
  .dh-ev-time{text-align:left;}
}
.queue-item{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:8px;background:#fff;border:1px solid var(--line);margin-bottom:6px;font-size:13px;gap:10px;flex-wrap:wrap;}
.current-box{border:2px solid var(--coral);background:var(--coral-bg);border-radius:12px;padding:16px;text-align:center;margin-bottom:14px;}
.current-box .serial{font-size:19px;font-weight:800;font-family:ui-monospace,Menlo,monospace;}
.current-box .spec{font-size:12px;color:var(--sub);margin-top:2px;}
.link-btn{background:none;border:none;color:var(--teal-dark);font-weight:700;font-size:12.5px;cursor:pointer;padding:0;}
.modal-overlay{position:fixed;inset:0;background:rgba(20,22,28,.45);display:flex;align-items:center;justify-content:center;z-index:90;padding:20px;}
.modal{background:#fff;border-radius:14px;padding:22px;width:100%;max-width:460px;max-height:88vh;overflow:auto;}
.modal h3{margin:0 0 14px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
.close-x{float:right;background:none;border:none;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--sub);}
.sticker-canvas-wrap{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;}
.sticker-canvas-wrap canvas{border:1px solid var(--line);border-radius:8px;background:#fff;}
.dl-link{display:block;width:100%;text-align:center;font-size:11.5px;margin-top:6px;color:var(--teal-dark);text-decoration:none;font-weight:700;background:none;border:none;cursor:pointer;padding:4px 0;}
.gear{background:none;border:none;cursor:pointer;font-size:15px;color:var(--sub);}
.note{background:var(--amber-bg);color:var(--amber);border-radius:8px;padding:8px 12px;font-size:12px;margin-top:10px;}
.toggle-group{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:9px;border:1px solid var(--line);}
.toggle-group button{flex:1;padding:8px;border:none;background:transparent;border-radius:6px;font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer;}
.toggle-group button.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.req-item-row{border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px;background:var(--bg);position:relative;}
.req-item-row .remove-x{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--sub);cursor:pointer;font-size:11px;font-weight:700;}
.acc-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px;}
.acc-row label{margin-top:0;}
.loc-pick{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:12.5px;cursor:pointer;background:#fff;}
.loc-pick:hover{background:var(--teal-bg);}
.progress-line{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--line);}
.progress-line:last-child{border-bottom:none;}
.checkbox-row{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-top:8px;}
.checkbox-row input{width:auto;}
.gate-card{max-width:420px;margin:70px auto;text-align:center;}
.login-hint{background:var(--purple-bg);color:var(--purple);border-radius:8px;padding:10px 12px;font-size:12px;margin-top:14px;text-align:left;}
.col-picker{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 14px;margin-top:8px;}
@media (max-width:700px){.col-picker{grid-template-columns:1fr 1fr;}}
.col-picker label{display:flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);margin:0;font-size:12.5px;}
.col-picker input{width:auto;}
.col-group-title{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--sub);margin-top:14px;}
.col-group-title:first-child{margin-top:0;}
.preset-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
@media (max-width:700px){.preset-cards{grid-template-columns:1fr;}}
.preset-card{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;transition:.12s;}
.preset-card:hover{border-color:var(--teal);background:var(--teal-bg);}
.preset-card.selected{border-color:var(--teal);background:var(--teal-bg);}
.preset-card b{font-size:13px;}
.preset-card p{margin:4px 0 0;font-size:11.5px;color:var(--sub);}

.stat.click{cursor:pointer;transition:border-color .12s, box-shadow .12s;}
.stat.click:hover{border-color:var(--purple);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.stat.click.active{border-color:var(--purple);background:var(--purple-bg);}
tr.click-row{cursor:pointer;} tr.click-row:hover td{background:var(--purple-bg);}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;font-size:12.5px;margin-top:6px;}
table.review{font-size:11.5px;} table.review th,table.review td{white-space:nowrap;padding:5px 8px;}

/* ==================================================================
   CLOUD TELESOL THEME — colours borrowed from cloudtelesol.co.in
   (deep navy scale, electric cyan-blue accent, gold, warm cream).
   Purely visual: every rule below only changes colours / spacing /
   shadows. No markup or behaviour is touched.
   ================================================================== */
:root{
  /* Cnergee visual system — the single source of every colour in the portal */
  --navy-900:#0B2342; --navy-800:#0B2342; --navy-700:#0B2342; --navy-600:#12345A; --navy-500:#12345A;
  --accent:#10A9D6; --accent-bright:#10A9D6; --accent-glow:#10A9D6; --accent2:#12345A; --gold:#F2B84B;
  --cream-100:#FFFFFF; --cream-200:#F5F7FA; --cream-300:#E2E8F0;

  /* the portal's semantic colours, all mapped onto the palette */
  --teal:#16A34A;   --teal-dark:#15803D; --teal-bg:#E8F7EE;      /* success / confirm */
  --purple:#12345A; --purple-bg:#E6EBF2;                          /* secondary (Navy 2) */
  --coral:#DC2626;  --coral-bg:#FDECEC;                           /* danger / alerts */
  --amber:#D97706;  --amber-bg:#FDF3E4;                           /* warning */
  --navy:#0B2342;   --navy-bg:#E6EBF2;                            /* primary */
  --pink:#F2B84B;   --pink-bg:#FDF5E3;                            /* brand gold */
  --ink:#102A43; --sub:#64748B; --line:#E2E8F0; --bg:#F5F7FA; --card:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(11,35,66,.06);
  --shadow-md:0 1px 2px rgba(11,35,66,.05), 0 10px 28px rgba(11,35,66,.07);
  color-scheme: light;
}
::selection{background:rgba(16,169,214,.28);}
/* portal background: the cloud/globe network image at full clarity,
   fixed behind everything, fit to fill the screen (not the login
   page — that has its own background, see css/theme.css body.login-page) */
html{
  background-color:#fff;
  background-image:url('../assets/background.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body{background:transparent;color:var(--ink);}

/* ---------- top: brand header, page title, tabs (dark navy like the website) ---------- */
.site-header{
  position:sticky;top:0;background:radial-gradient(900px 140px at 50% -40px,rgba(11,35,66,.5),transparent 70%),
             linear-gradient(135deg,#0B2342 0%,#0B2342 55%,#12345A 100%);
  padding:16px 28px 7px;border-top:3px solid #0B2342;
}
.hdr-title{color:#F5F9FF;font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:1px;text-transform:uppercase;line-height:1.35;}
.hdr-logo{filter:drop-shadow(0 0 10px rgba(242,184,75,.35));}

header.page-header{background:var(--navy-800);border-bottom:1px solid rgba(255,255,255,.08);padding:16px 28px 12px;}
header.page-header h1{color:#FFFFFF;font-size:21px;letter-spacing:.01em;}
header.page-header p{color:rgba(255,255,255,.62);}

nav.tabs{background:var(--navy-700);box-shadow:0 14px 34px rgba(11,35,66,.25);}
nav.tabs a{color:rgba(255,255,255,.72);}
nav.tabs a:hover{background:rgba(255,255,255,.08);color:#fff;}
nav.tabs a.active,
nav.tabs a[data-tab].active{color:#fff;background:rgba(16,169,214,.14);box-shadow:0 0 0 1px rgba(16,169,214,.3), 0 0 12px rgba(16,169,214,.35);}

/* ---- logo + title, left end of the header ---- */
.hdr-brand{position:relative;overflow:hidden;border-radius:8px;}
.hdr-brand .hdr-logo{filter:drop-shadow(0 0 10px rgba(242,184,75,.55));transition:transform .2s;}
.hdr-brand:hover .hdr-logo{transform:scale(1.08);}
.hdr-brand::before{
  content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%);
  transform:skewX(-20deg);mix-blend-mode:overlay;pointer-events:none;
  animation:tabsLogoShine 3.4s ease-in-out infinite;
}
@keyframes tabsLogoShine{
  0%{left:-60%;}
  35%{left:130%;}
  100%{left:130%;}
}

/* ---------- content ---------- */
main{max-width:1240px;}
.card{background:linear-gradient(135deg,#F0ECFB 0%,#E9F2FD 100%);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:22px;}
.card h2{color:var(--navy);font-size:15.5px;padding-left:11px;border-left:3px solid var(--accent-bright);line-height:1.25;margin-bottom:6px;}
.card .hint{color:var(--sub);}
label{color:#64748B;}
input[type=text], input[type=number], input[type=date], input[type=password], select, textarea{
  border:1px solid rgba(11,35,66,.18);border-radius:9px;background:var(--cream-100);transition:border-color .15s, box-shadow .15s, background .15s;
}
input[type=text]:hover, input[type=number]:hover, input[type=date]:hover, input[type=password]:hover, select:hover, textarea:hover{border-color:rgba(16,169,214,.5);}
input:focus, select:focus, textarea:focus{outline:none;border-color:var(--accent-bright);box-shadow:0 0 0 3px rgba(16,169,214,.2);background:#fff;}
input[readonly]{background:#F1F4F8 !important;}

/* buttons */
.btn{border-radius:10px;letter-spacing:.01em;box-shadow:var(--shadow-sm);transition:transform .12s, box-shadow .15s, filter .15s;}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(11,35,66,.16);}
.btn:active{transform:translateY(0);}
.btn-teal{background:linear-gradient(135deg,#10A9D6,#10A9D6);}
.btn-teal:hover{background:linear-gradient(135deg,#10A9D6,#0090C8);}
.btn-purple{background:linear-gradient(135deg,#10A9D6,#12345A);}
.btn-coral{background:linear-gradient(135deg,#DC2626,#DC2626);}
.btn-amber{background:linear-gradient(135deg,#D97706,#D97706);}
.btn-navy{background:linear-gradient(135deg,#12345A,#0B2342);}
.btn-pink{background:linear-gradient(135deg,#F2B84B,#F2B84B);color:#102A43;}
.btn-ghost{background:#fff;border-color:rgba(11,35,66,.2);color:var(--navy);}
.btn-ghost:hover{background:#F5F7FA;border-color:var(--accent);}
.link-btn,.dl-link{color:var(--accent);}
.link-btn:hover{color:var(--accent-bright);text-decoration:underline;}
.gear{color:var(--accent);}
.gear:hover{color:var(--accent-bright);}

/* tables */
th{color:#64748B;background:rgba(16,169,214,.07);border-bottom:1px solid rgba(16,169,214,.18);}
th:first-child{border-radius:8px 0 0 8px;} th:last-child{border-radius:0 8px 8px 0;}
tbody tr{transition:background .12s;}
tbody tr:hover td{background:rgba(16,169,214,.06);}
td{border-bottom:1px solid rgba(11,35,66,.08);}

/* badges */
.badge{letter-spacing:.02em;}
.b-teal{color:#16A34A;} .b-purple{color:#12345A;} .b-coral{color:#DC2626;} .b-amber{color:#D97706;} .b-navy{color:var(--navy-600);} .b-pink{color:#D97706;}

/* panels & list rows */
.device-panel,.req-item-row{background:rgba(16,169,214,.035);border-color:rgba(16,169,214,.16);border-radius:13px;}
.queue-item{background:#F5F7FA;border-color:rgba(11,35,66,.1);border-radius:10px;transition:border-color .15s, box-shadow .15s;}
.queue-item:hover{border-color:rgba(16,169,214,.35);box-shadow:var(--shadow-sm);}
.note{border-left:3px solid var(--amber);border-radius:9px;}
.empty{color:var(--sub);}
.toggle-group{background:#F5F7FA;border-color:rgba(11,35,66,.1);}
.toggle-group button.active{color:var(--accent);box-shadow:0 1px 3px rgba(11,35,66,.14);}
.preset-card:hover,.preset-card.selected{border-color:var(--accent-bright);background:var(--teal-bg);}
.preset-card.selected{box-shadow:0 0 0 3px rgba(16,169,214,.22), 0 0 14px rgba(16,169,214,.3);}
.loc-pick:hover{background:var(--teal-bg);}
.current-box{border-color:var(--coral);}
.mac-boxes input{background:#fff;}

/* ---------- DASHBOARD tiles ---------- */
/* flex, not grid: a flex row sizes itself independently of any row above/below it,
   so a half-full last row (e.g. 4 tiles instead of 8) stretches to fill the width
   instead of leaving the grid's unused column tracks empty. */
.stat-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.stat-row .stat{flex:1 1 158px;}
.stat{position:relative;overflow:hidden;background:linear-gradient(160deg,#FFFFFF 0%,#FFFFFF 100%);border:1px solid rgba(11,35,66,.1);
      border-radius:16px;padding:18px 18px 16px;box-shadow:var(--shadow-md);min-width:0;}
.stat::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--tile,var(--accent-bright));}
.stat::after{content:"";position:absolute;right:-26px;top:-26px;width:90px;height:90px;border-radius:50%;background:var(--tile,var(--accent-bright));opacity:.09;}
.stat .n{font-size:30px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.05;margin-top:8px;}
.stat .l{font-size:11.5px;font-weight:700;color:#64748B;margin-top:0;text-transform:uppercase;letter-spacing:.05em;line-height:1.3;}
.stat .l + .l{text-transform:none;letter-spacing:0;font-weight:500;color:var(--sub);}
.stat-row .stat:nth-child(8n+1){--tile:#10A9D6;}
.stat-row .stat:nth-child(8n+2){--tile:#12345A;}
.stat-row .stat:nth-child(8n+3){--tile:#F2B84B;}
.stat-row .stat:nth-child(8n+4){--tile:#D97706;}
.stat-row .stat:nth-child(8n+5){--tile:#16A34A;}
.stat-row .stat:nth-child(8n+6){--tile:#10A9D6;}
.stat-row .stat:nth-child(8n+7){--tile:#12345A;}
.stat-row .stat:nth-child(8n+8){--tile:#DC2626;}
.stat.click:hover{border-color:var(--tile,var(--accent));transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,35,66,.14);}
.stat.click{transition:transform .15s, box-shadow .15s, border-color .15s, background .15s;}
.stat.click.active{border-color:var(--tile,var(--accent));background:linear-gradient(160deg,#E8F6FB 0%,#E0F2F9 100%);box-shadow:0 0 0 3px rgba(16,169,214,.22), var(--shadow-md);}
tr.click-row:hover td{background:rgba(16,169,214,.09);}
#dashDetailCard{border-top:4px solid var(--accent-bright);}
.kv-grid > div{background:rgba(16,169,214,.05);border-radius:10px;padding:8px 12px;}

/* ---------- modals & toasts ---------- */
.modal-overlay{background:rgba(11,35,66,.62);}
.modal{border-radius:18px;border-top:4px solid var(--accent-bright);box-shadow:0 24px 60px rgba(11,35,66,.35);background:#FFFFFF;}
.modal h3{color:var(--navy);}
.close-x{color:var(--sub);} .close-x:hover{color:var(--coral);}

/* ---------- sign-in card ---------- */
.gate-card{border-top:4px solid var(--accent-bright);}
.login-hint{background:var(--teal-bg);color:#12345A;}

/* scrollbars */
*{scrollbar-color:rgba(16,169,214,.45) transparent;scrollbar-width:thin;}

.gate-card h2{border-left:none;padding-left:0;}

.site-header img.logo{height:46px;filter:drop-shadow(0 0 12px rgba(242,184,75,.45));}

/* ---- Factory PO page: a narrow "Raise Purchase Order" form on the left,
   "All Purchase Orders" filling the rest of the row on the right — the
   list's "By" column stays readable at any width since it's nowrap with
   its own horizontal scroll (below), not squeezed into wrapping text. ---- */
.po-page .po-grid{grid-template-columns:300px minmax(0,1fr);align-items:start;margin:20px 0;}
.po-page td,.po-page th{padding:8px 6px;font-size:12.5px;word-break:normal;overflow-wrap:break-word;}
.po-page td .btn{margin:2px 3px 2px 0;}
.po-page #mfCard table{font-size:12px;}
.po-page th{white-space:nowrap;}
.po-page td:nth-child(4),.po-page td:nth-child(5),.po-page td:nth-child(6),.po-page td:nth-child(7){white-space:nowrap;}

/* ==================================================================
   HOME DASHBOARD — greeting banner, quick actions, recent activity.
   Layout/visual only: no tile, table or card here changes what it
   shows or does — see js/page-home.js.
   ================================================================== */
.dash-greet{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
/* Same consistent gap as #content's own top-level sections (see above),
   one level down inside Home's single wrapper. */
.home-dash > * + *{margin-top:20px;}
.dash-greet-sub{font-size:36px;color:#0B2342;font-weight:500;}
.dash-greet-name{font-size:36px;font-weight:500;color:#0B2342;}
.dash-greet-activity{font-size:13.5px;color:rgba(11,35,66,.78);margin-top:4px;}

/* ---- right end of the header: notifications + date/time + user menu ---- */
.hdr-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:16px;min-width:0;}
.hdr-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35;padding-right:14px;border-right:1px solid rgba(255,255,255,.18);}
.hdr-date{font-size:11px;color:rgba(255,255,255,.6);letter-spacing:.03em;}
.hdr-time{font-size:14px;font-weight:700;color:#fff;}
.hdr-bell{position:relative;display:flex;align-items:center;color:rgba(255,255,255,.75);transition:color .12s;}
.hdr-bell:hover,.hdr-bell.active{color:#fff;}
.hdr-bell-dot{position:absolute;top:-3px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px var(--navy-800);}
.hdr-user{position:relative;}
.hdr-user-btn{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:4px 2px;color:#fff;}
.hdr-avatar{display:flex;color:rgba(255,255,255,.85);}
.hdr-name{font-size:13px;font-weight:700;color:#fff;}
.hdr-user-btn svg:last-child{color:rgba(255,255,255,.65);transition:transform .15s;}
.hdr-user-btn[aria-expanded="true"] svg:last-child{transform:rotate(180deg);}
.hdr-user-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:160px;z-index:55;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.2);padding:6px;flex-direction:column;gap:2px;}
.hdr-user-menu.open{display:flex;}
.hdr-user-menu a, .hdr-user-menu button{display:block;width:100%;text-align:left;background:none;border:none;border-radius:7px;
  padding:9px 12px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none;}
.hdr-user-menu a:hover, .hdr-user-menu button:hover{background:var(--bg);}
.hdr-user-menu button{color:var(--coral);}
@media (max-width:680px){
  .hdr-clock{display:none;}
  .hdr-name{display:none;}
}
/* Below this, the 3-column grid (logo/title | search | icons) doesn't
   have room to keep all three on one line — stack them instead, same
   as the old flex-wrap header used to. */
@media (max-width:860px){
  .site-header{display:flex;flex-wrap:wrap;row-gap:10px;}
  .hdr-left, .hdr-search, .hdr-right{grid-column:auto;justify-self:auto;}
  .hdr-search{order:3;flex:1 1 100%;width:auto;max-width:none;}
  .hdr-right{order:2;margin-left:auto;}
}

/* ---- footer ribbon ---- */
.site-footer{text-align:center;font-size:11.5px;color:rgba(255,255,255,.75);background:var(--navy-800);padding:10px 16px;letter-spacing:.02em;}

.dash-top-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:stretch;margin-top:20px;margin-bottom:18px;}
@media (max-width:980px){.dash-top-grid{grid-template-columns:1fr;}}
.dash-side{display:flex;flex-direction:column;gap:16px;min-width:0;}
.dash-side .card{margin-top:0 !important;}
/* Recent Activity grows to fill whatever extra height the left column's
   tables give it, so its box ends on the same line as theirs, instead of
   stopping short at its own natural content height */
.dash-side .act-card{flex:1;display:flex;flex-direction:column;min-height:0;}

.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.qa-btn{display:flex;align-items:center;gap:8px;padding:10px 10px;border-radius:10px;background:var(--teal-bg);color:var(--navy);text-decoration:none;font-size:12.5px;font-weight:700;border:1px solid rgba(16,169,214,.16);transition:transform .12s, box-shadow .12s, background .12s;}
.qa-btn:hover{background:#fff;border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-1px);}

.act-card .act-list{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;}
.act-row{display:flex;gap:10px;padding:8px 2px;border-bottom:1px dashed var(--line);}
.act-row:last-child{border-bottom:none;}
.act-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent-bright);margin-top:5px;}
.act-body{min-width:0;}
.act-label{font-size:12.5px;color:var(--ink);line-height:1.35;}
.act-meta{font-size:11px;color:var(--sub);margin-top:1px;}

.section-heading{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--coral);margin:20px 2px 10px;}
.attn-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;}
.attn-grid .card{margin-top:0 !important;flex:1 1 300px;min-width:0;}

/* "Devices at Clients" / "Requests by Client": scroll inside the card
   instead of stretching the whole page — the client list can be long. */
/* the two client tables share the space evenly here (the generic .grid's
   fixed 380px+1fr is meant for a form beside a list, not two equal tables),
   and auto-fit sizes off the actual nested column width, not the viewport,
   which matters since this sits inside dash-top-grid's narrower left column */
.dash-tables{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:20px;align-items:stretch;}
.dash-tables .card{display:flex;flex-direction:column;margin-top:0 !important;}
.dash-tables .table-scroll{height:340px;}
.table-scroll{max-height:340px;overflow-y:auto;}
.table-scroll table{margin:0;}
.table-scroll thead th{position:sticky;top:0;background:var(--card);z-index:1;box-shadow:0 1px 0 rgba(11,35,66,.08);}

/* ---- Home: one gold accent instead of a different colour per tile,
   and a denser pass (cards, queue rows) so Indent Reminders and Ongoing
   Batches stay compact — except the six headline tiles themselves, which
   are the page's main numbers and are sized up to be dominant instead. ---- */
.home-dash .stat-row .stat{--tile:var(--gold);}
.home-dash .qa-btn:hover{background:#F5F7FA;}
.home-dash .card{padding:14px 16px;}
.home-dash .card + .card{margin-top:10px;}
.home-dash .card h2{font-size:18px;border-left-color:var(--gold);}
.home-dash .stat{padding:26px 22px 24px;}
.home-dash .stat .n{font-size:40px;margin-top:10px;}
.home-dash .stat .l{font-size:15px;margin-top:0;line-height:1.35;}
.home-dash .stat-row{gap:16px;margin-bottom:20px;}
.home-dash .stat-row .stat{flex:1 1 220px;}
.home-dash .dash-top-grid{grid-template-columns:minmax(0,1fr) 250px;gap:14px;}
.home-dash .queue-item{padding:5px 8px;font-size:12px;margin-bottom:4px;}
.home-dash .badge{font-size:10px;padding:1px 7px;}
.home-dash #dashDetailCard{border-top-color:var(--gold);}

/* ==================================================================
   ANGULAR PASS — smaller corner radii everywhere a "box" appears.
   True circles (the tiny activity dot, the decorative tile blob) are
   left round on purpose; they aren't boxes. Placed last so it wins
   over the earlier rounder values for the same selectors.
   ================================================================== */
.card, .modal, .stat, .device-panel, .req-item-row, .current-box,
.qa-btn, .dash-clock-item, .kv-grid > div, .sticker-canvas-wrap canvas{border-radius:6px;}
.btn, input[type=text], input[type=number], input[type=date], input[type=password],
select, textarea, .queue-item, .note, .toggle-group, .login-hint, .preset-card, .loc-pick{border-radius:4px;}
.btn-sm, .toggle-group button, .badge{border-radius:3px;}
nav.tabs a{border-radius:5px;}
th:first-child{border-radius:4px 0 0 0;} th:last-child{border-radius:0 4px 0 0;}

/* ============== Cream boxes: 50% transparent, no accents, dark text ============== */
.card, .stat{
  background:linear-gradient(135deg,#F0ECFB 0%,#E9F2FD 100%);
  border:1px solid rgba(11,35,66,.14);
  box-shadow:0 4px 14px rgba(0,0,0,.14);
  color:#0B2342;
  --ink:#0B2342; --sub:#0B2342;
}
.card h2, .home-dash .card h2{color:#0B2342;border-left:none;padding-left:0;}
.card label{color:#0B2342;}
.card label span{color:#0B2342;}
.card .hint, .card .kv-grid, .card .empty{color:#0B2342;}
.card a:not(.btn), .card .link-btn{color:#0B2342;text-decoration:underline;}
.card th{color:#0B2342;background:rgba(11,35,66,.08);border-bottom-color:rgba(11,35,66,.2);}
.card td{border-bottom-color:rgba(11,35,66,.12);color:#0B2342;}
.card tbody tr:hover td{background:rgba(11,35,66,.05);}
.queue-item, .device-panel, .req-item-row, .current-box{background:#FFFFFF;border-color:rgba(11,35,66,.12);color:#0B2342;}
.toggle-group{background:#FFFFFF;border-color:rgba(11,35,66,.15);}
.kv-grid > div{background:#FFFFFF;}
.card .note{background:#FFFFFF;border-left:none;color:#0B2342;}
.stat::before, .stat::after{display:none;}
.stat .n{color:#0B2342;}
.stat .l{color:#0B2342;}
.stat .l + .l{color:#0B2342;}
.stat.click:hover{border-color:rgba(11,35,66,.3);box-shadow:0 6px 16px rgba(0,0,0,.2);}
.stat.click.active{background:#FFFFFF;border-color:rgba(16,169,214,.6);box-shadow:0 0 0 3px rgba(16,169,214,.22), 0 0 14px rgba(16,169,214,.3);}

/* ============== Tab buttons: restrained navigation motion ============== */
nav.tabs a{position:relative;transition:color .2s ease, background-color .2s ease;}
@media (prefers-reduced-motion: reduce){nav.tabs a{transition:none;}}

/* Indent order totals: total tile light green, per-device tiles light red */
.stat.tone-ok{background:#DCFCE7;}
.stat.tone-alert{background:#FEE2E2;}

/* Boxes: plain border at rest; a soft cyan glow appears only on hover */
.card, .stat, .modal, .queue-item, .device-panel, .req-item-row, .current-box, .toggle-group, .kv-grid > div, .card .note{
  border:1px solid rgba(16,169,214,.3);
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.card:hover, .stat:hover, .modal:hover, .queue-item:hover, .device-panel:hover, .req-item-row:hover, .current-box:hover, .toggle-group:hover, .kv-grid > div:hover, .card .note:hover{
  border-color:rgba(16,169,214,.65);
  box-shadow:0 0 8px rgba(16,169,214,.2);
}

#stickersSections{margin-top:16px;}

/* ============== Home KPI dashboard v2 ==============
   Top: 3 icon stat cards. Middle: QC Store / On Field, each a big number
   over its own breakdown bar chart. Bottom: the Factory -> QC store ->
   Client flow. */
.kpi-dash{margin-bottom:20px;}
.kpi-top-row{display:flex;gap:14px;margin-bottom:14px;}
.icon-stat{flex:1 1 0;display:flex;align-items:center;gap:14px;padding:18px 20px;min-width:0;}
.icon-stat-badge{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;}
.dash-icon-img{display:block;width:100%;height:100%;object-fit:contain;}
.dash-icon-img-sm{width:70%;height:70%;}
.icon-stat-n{font-size:26px;font-weight:800;color:#0B2342;line-height:1;}
.icon-stat-l{font-size:13px;color:#475569;margin-top:4px;}
.icon-stat-sub{font-size:11.5px;color:#64748B;margin-top:2px;}
.icon-stat-badge svg{display:block;width:100%;height:100%;}

.kpi-big-row-v2{display:flex;gap:14px;align-items:stretch;margin-bottom:14px;}
.big-detail-box{flex:1 1 0;min-width:0;padding:20px 22px;}
.big-detail-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.big-detail-icon{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;}
.big-detail-icon.small{width:30px;height:30px;}
.big-detail-head .l{font-size:14px;font-weight:700;color:#0B2342;text-transform:none;letter-spacing:0;}
.big-detail-head .n{font-size:38px;font-weight:800;color:#0B2342;line-height:1.1;margin-top:2px;}

.bar-list{display:flex;flex-direction:column;gap:10px;}
.bar-row{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.bar-label{flex:0 0 76px;color:#0B2342;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{flex:1 1 0;height:8px;background:rgba(11,35,66,.08);border-radius:4px;overflow:hidden;display:flex;}
.bar-fill{height:100%;background:#0E8FB5;border-radius:4px;}
.bar-track.stacked{gap:1px;}
.bar-seg{height:100%;}
.bar-seg:first-child{border-radius:4px 0 0 4px;}
.bar-seg:last-child{border-radius:0 4px 4px 0;}
.bar-value{flex:none;width:32px;text-align:right;font-weight:700;color:#0B2342;}

.field-note{font-size:11.5px;color:#64748B;margin-bottom:10px;line-height:1.5;}
.field-legend-item{display:inline-flex;align-items:center;gap:4px;margin-left:4px;}
.field-legend-item .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

.flow-box{display:flex;flex-direction:column;gap:16px;padding:20px 26px;}
.flow-title{display:flex;align-items:center;gap:10px;font-size:14px;color:#0B2342;}
.flow-title .dash-icon-img{width:22px;height:22px;}
.flow-row{display:flex;align-items:center;}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:90px;}
.flow-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.flow-label{font-size:12.5px;font-weight:700;color:#0B2342;}
.flow-arrow{flex:1 1 0;height:2px;background:rgba(16,169,214,.4);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;min-width:40px;}
.flow-arrow::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;height:0;border:5px solid transparent;border-left-color:rgba(16,169,214,.7);}
.flow-arrow .flow-num{background:#FFFFFF;padding:4px 14px;position:relative;z-index:1;border-radius:20px;font-size:19px;font-weight:800;color:#0B2342;border:1px solid rgba(16,169,214,.4);}

@media (max-width:760px){
  .kpi-top-row, .kpi-big-row-v2{flex-direction:column;}
  .flow-row{flex-direction:column;gap:10px;}
  .flow-arrow{width:2px;height:28px;min-width:0;}
  .flow-arrow::after{right:auto;top:auto;bottom:0;left:50%;transform:translateX(-50%) rotate(90deg);}
}

/* ============== Dashboard decoration: soft waves + real art ==============
   Purely decorative, pointer-events:none, kept behind the real content via
   an explicit content wrapper (position:relative;z-index:1) since an
   absolutely-positioned decoration would otherwise paint over static
   siblings regardless of DOM order. */
/* scaled by width only (height:auto keeps its natural proportions) so it
   never gets stretched tall on a wide, short card like the full-row tile */
.icon-stat-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;max-height:100%;z-index:0;pointer-events:none;}
.icon-stat-badge,.icon-stat-text{position:relative;z-index:1;}
/* a soft top-to-bottom colour wash per card, matching its tone */
.stat.icon-stat-coral{background:linear-gradient(180deg,#FFFFFF 0%,#FBDFDF 100%);}
.stat.icon-stat-navy{background:linear-gradient(180deg,#FFFFFF 0%,#DCEEFB 100%);}
.stat.icon-stat-amber{background:linear-gradient(180deg,#FFFFFF 0%,#FBF0C7 100%);}
.stat.icon-stat-green{background:linear-gradient(180deg,#FFFFFF 0%,#DFF3E5 100%);}

.decor-card{position:relative;overflow:hidden;background:linear-gradient(90deg,#FFFFFF 0%,#FFFFFF 55%,#EFF8FD 100%);}
.decor-img{position:absolute;z-index:0;pointer-events:none;object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 45%, transparent 78%);
  mask-image:radial-gradient(ellipse at center, #000 45%, transparent 78%);}
.decor-card-wave{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.decor-card-content{position:relative;z-index:1;}
.decor-img-warehouse-banner{right:270px;top:50%;transform:translateY(-50%);width:130px;opacity:0.18;}
.big-detail-content{position:relative;z-index:1;}
.decor-img-warehouse{right:-4px;top:6px;width:130px;opacity:0.5;}
.decor-img-map{right:-6px;top:4px;width:180px;opacity:0.5;}
/* soft colour wash on the two big detail boxes, same spectrum treatment as the KPI cards */
.stat.big-detail-box[data-key="qc"]{background:linear-gradient(180deg,#FFFFFF 0%,#E2F6E8 100%);}
.stat.big-detail-box[data-key="field"]{background:linear-gradient(180deg,#FFFFFF 0%,#EEE6FA 100%);}

.flow-wave{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.flow-content{position:relative;z-index:1;}

@media (max-width:760px){
  .decor-img-warehouse,.decor-img-map,.decor-img-warehouse-banner{display:none;}
}

.indent-reminder-card{background:linear-gradient(to top left,#FBE3E3 0%,#FFFFFF 50%,#FFFFFF 100%);}

.devices-detail-card{background:#F5FAFE;}

/* small, right-anchored (opposite the number/label on the left), sitting
   over the wave rather than replacing it */
.icon-stat-illus{position:absolute;right:8px;bottom:8px;width:22%;max-width:90px;height:auto;object-fit:contain;z-index:0;pointer-events:none;}

/* Needs Your Attention cards: same tone wash + wave treatment as the KPI cards */
.attn-card{position:relative;overflow:hidden;}
.attn-card-content{position:relative;z-index:1;}
.attn-card-coral{background:linear-gradient(180deg,#FFFFFF 0%,#FBDFDF 100%);}
.attn-card-navy{background:linear-gradient(180deg,#FFFFFF 0%,#DCEEFB 100%);}
.attn-card-amber{background:linear-gradient(180deg,#FFFFFF 0%,#FBF0C7 100%);}
.attn-card-green{background:linear-gradient(180deg,#FFFFFF 0%,#DFF3E5 100%);}

.spectrum-card{background:linear-gradient(135deg,#F0ECFB 0%,#E9F2FD 100%);}

/* Inventory Movement: the original tile names under each moving number */
.flow-arrow .flow-cap{position:absolute;top:calc(50% + 18px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:11px;font-weight:700;color:#0B2342;opacity:.75;letter-spacing:.01em;}
@media (max-width:760px){.flow-arrow .flow-cap{top:auto;left:calc(50% + 24px);transform:none;}}

/* ==================================================================
   RESPONSIVE PASS — phones, tablets and small laptops.
   Layout only: no colours, labels or features change, and nothing
   here applies above 1180px, so the desktop view stays as it was.
   ================================================================== */

/* Boxes in a grid may shrink to their column; wide tables then scroll
   inside their own card instead of pushing the whole page sideways. */
@media (max-width:1180px){
  .grid > *, .dash-top-grid > *, .attn-grid > *, .dash-tables > *{min-width:0;}
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* Header: below 1100px the search box moves to its own full-width row
   (as it already did below 860px), so the menu button, logo and title
   stay together on one line on tablets and small laptops. */
.hdr-left{flex-wrap:nowrap;}
@media (max-width:1100px){
  .site-header{display:flex;flex-wrap:wrap;row-gap:10px;}
  .hdr-left, .hdr-search, .hdr-right{grid-column:auto;justify-self:auto;}
  .hdr-search{order:3;flex:1 1 100%;width:auto;max-width:none;min-width:0;}
  .hdr-right{order:2;margin-left:auto;}
}
/* search results fit the screen on phones (they were at least 480px wide) */
@media (max-width:760px){
  .hdr-search-results{width:calc(100vw - 24px);left:50%;}
}
@media (max-width:420px){
  .site-header{padding:10px 12px;}
  .hdr-left{gap:10px;}
  .hdr-title{font-size:11.5px;letter-spacing:.6px;}
  .hdr-right{gap:10px;}
}

/* Side menu: up to 1024px it slides over the page (with the dimmed
   backdrop) instead of squeezing the page into a narrow column. */
@media (max-width:1024px){
  body.nav-open{grid-template-columns:0 minmax(0,1fr);}
  #tabsNav{position:fixed;top:0;left:0;bottom:0;width:0;z-index:80;transition:width .25s ease;overflow-y:auto;}
  body.nav-open #tabsNav{width:min(80vw,280px);}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(8,16,30,.5);z-index:75;
    opacity:0;pointer-events:none;transition:opacity .2s ease;}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto;}
}

/* Home dashboard: the Quick Actions / Recent Activity column moves
   below the main tiles instead of squeezing them into a sliver. */
@media (max-width:980px){
  .home-dash .dash-top-grid{grid-template-columns:1fr;}
  .dash-side .act-card .act-list{max-height:360px;}
}
@media (max-width:760px){
  .home-dash .stat .n{font-size:32px;}
  .home-dash .stat{padding:18px 16px;}
  /* stacked tiles keep their full height (flex-basis 0 collapsed them) */
  .kpi-top-row > *, .kpi-big-row-v2 > *{flex:0 0 auto;}
}

/* Page padding and form controls on phones. 16px text in fields stops
   iPhones from zooming in every time a field is tapped. */
@media (max-width:760px){
  main{padding:16px 12px 48px;}
  .card{padding:16px 14px;}
  input[type=text], input[type=number], input[type=date], input[type=password],
  input[type=email], input[type=tel], input[type=search], select, textarea{font-size:16px;}
  .hdr-search input[type=text]{font-size:15px;}
  /* the whole overlay scrolls, so the end of a long pop-up (e.g. Device
     History's oldest events) is never stuck behind the phone's browser bar */
  .modal-overlay{padding:10px 10px 80px;align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .modal{max-width:100% !important;max-height:none;overflow:visible;}
  .btn{min-height:38px;}
}

/* Device Map: keep the map underneath the side menu and the sticky header
   (Leaflet's own layers use z-index 400+, which floated over the menu) */
.leaflet-container{isolation:isolate;z-index:0;}

/* Inventory Movement on phones: number, caption and arrow stacked in the
   middle, so the caption is never cut off or squeezed beside the number */
@media (max-width:760px){
  .flow-row{gap:10px;}
  .flow-arrow{flex:0 0 auto;width:auto;height:auto;background:none;flex-direction:column;gap:5px;padding:6px 0 20px;}
  .flow-node{flex:0 0 auto;}
  .flow-arrow .flow-cap{position:static;transform:none;white-space:normal;text-align:center;font-size:11.5px;line-height:1.3;}
  .flow-arrow::after{top:auto;bottom:0;left:50%;right:auto;transform:translateX(-50%) rotate(90deg);}
}