/* Colour mode (2026-10-20, same as the Formula Desk's): Light and Dark. Loaded AFTER glass.css, so it wins by selector.
   Both modes switch the glass look OFF on purpose (Saiful: the cream beige hurts, she wants plain
   black and white): flat surfaces, thin lines, no blur, no gradient. Auto on a light phone sets no
   data-theme and keeps the glass look as it was. Screen only: print is A4, plain white, and untouched. */
.themebtn{flex:0 0 auto; white-space:nowrap; min-height:34px; padding:4px 12px; font-size:13px}
@media(max-width:760px){ header.top .who{white-space:normal} header.top .themebtn{order:2; min-height:32px; padding:3px 9px; font-size:12px} }
@media print{ .themebtn{display:none !important} }

@media screen{
:root[data-theme="light"]{
  color-scheme:light;
  --t-bg:#ffffff; --t-card:#ffffff; --t-soft:#f3f3f3; --t-line:#d4d4d4; --t-line2:#8f8f8f; --t-input:#ffffff;
  --t-ink:#111111; --t-mut:#4d4d4d;
  --t-accent:#1f5f9e; --t-accentink:#ffffff; --t-accentsoft:#eaf1f8;
  --t-ok:#1c6b45; --t-oksoft:#e6f3ec; --t-warn:#8a4f00; --t-warnsoft:#fdf1e0; --t-bad:#a52a2a; --t-badsoft:#fdecec;
  --t-strong:#111111; --t-strongink:#ffffff;
  --qc:#9c3468; --qcbg:#fdf1f5; --qcline:#f2cbdb; --store:#1c6b45; --storebg:#f0f8f4; --storeline:#cfe6da;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --t-bg:#101315; --t-card:#181c1f; --t-soft:#21262a; --t-line:#30373c; --t-line2:#4b555c; --t-input:#101315;
  --t-ink:#e9edf0; --t-mut:#a4afb7;
  --t-accent:#6fb0ea; --t-accentink:#06121f; --t-accentsoft:#172a3d;
  --t-ok:#6cc98a; --t-oksoft:#16291d; --t-warn:#e2ac5f; --t-warnsoft:#2e2412; --t-bad:#f08a7c; --t-badsoft:#331b18;
  --t-strong:#2b3136; --t-strongink:#ffffff;
  --qc:#ec8fba; --qcbg:#2e1b26; --qcline:#5c3045; --store:#6cc98a; --storebg:#16271d; --storeline:#2d4c3a;
}
:root[data-theme]{
  background:var(--t-bg);
  --ink:var(--t-ink); --mut:var(--t-mut); --line:var(--t-line); --bg:var(--t-bg); --card:var(--t-card);
  --accent:var(--t-accent); --info:var(--t-accent); --ok:var(--t-ok); --warn:var(--t-warn); --bad:var(--t-bad); 
  --g-ink:var(--t-ink); --g-mut:var(--t-mut); --g-copper:var(--t-accent); --g-copper-soft:var(--t-accent);
  --g-edge:var(--t-line); --g-card:var(--t-card); --g-dark:var(--t-strong);
  --g-shadow:none;
}
:root[data-theme] body{background:var(--t-bg); color:var(--t-ink)}
:root[data-theme] body::before{display:none}
:root[data-theme] h1,:root[data-theme] h2,:root[data-theme] h3{color:var(--t-ink)}
:root[data-theme] h1{font-family:inherit; font-size:21px; font-weight:650; letter-spacing:0}
@media(max-width:720px){ :root[data-theme] h1{font-size:19px} }
:root[data-theme] a{color:var(--t-accent)}
:root[data-theme] .eyebrow{color:var(--t-accent)}
:root[data-theme] .muted,:root[data-theme] .hint,:root[data-theme] .count-line,:root[data-theme] .meta,:root[data-theme] .sub,:root[data-theme] label{color:var(--t-mut)}

/* flat surfaces: no blur, no gradient, thin line */
:root[data-theme] header.top,:root[data-theme] .card,:root[data-theme] .stat,:root[data-theme] .empty,
:root[data-theme] .notice,:root[data-theme] .err,:root[data-theme] dialog{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
:root[data-theme] .item,:root[data-theme] input,:root[data-theme] select,:root[data-theme] textarea{-webkit-backdrop-filter:none; backdrop-filter:none}
:root[data-theme] header.top{background:var(--t-card); border-bottom:1px solid var(--t-line)}
:root[data-theme] .card,:root[data-theme] .stat,:root[data-theme] .item,:root[data-theme] .empty{
  background:var(--t-card); border:1px solid var(--t-line); border-radius:10px; box-shadow:none; color:var(--t-ink);
}
:root[data-theme] .card{padding:16px 18px}
@media(max-width:720px){ :root[data-theme] .card{padding:12px 10px; border-radius:10px} }
:root[data-theme] .empty{background:var(--t-card); color:var(--t-mut)}
:root[data-theme] .card::before,:root[data-theme] .stat::before,:root[data-theme] .item::before{display:none}
:root[data-theme] .stat,:root[data-theme] .item{transform:none; transition:none}
:root[data-theme] .stat{padding:16px 18px}
:root[data-theme] .stat:hover{box-shadow:none; border-color:var(--t-line2)}
:root[data-theme] .stat strong,:root[data-theme] .stat.info strong,:root[data-theme] .stat.ok strong,:root[data-theme] .stat.bad strong{color:var(--t-ink); letter-spacing:-1px; font-size:clamp(34px,4.6vw,46px)}
:root[data-theme] .stat-label{color:var(--t-mut)}
:root[data-theme] .stat.bad{background:var(--t-badsoft)}
:root[data-theme] .stat.bad strong{color:var(--t-bad)}
:root[data-theme] .stat.warn{background:var(--t-strong); border-color:var(--t-strong); color:var(--t-strongink); box-shadow:none}
:root[data-theme] .stat.warn .stat-label,:root[data-theme] .stat.warn .hint{color:var(--t-strongink); opacity:.78}
:root[data-theme] .stat.warn strong{color:var(--t-strongink)}
:root[data-theme] .notice{background:var(--t-warnsoft); border:1px solid var(--t-line); color:var(--t-warn); border-radius:8px}
:root[data-theme] .err{background:var(--t-badsoft); border:1px solid var(--t-line); color:var(--t-bad); border-radius:8px}
:root[data-theme] .readystrip{background:var(--t-soft)}
:root[data-theme] .band.now{border-left-color:var(--t-accent)}
:root[data-theme] #toast{background:var(--t-strong); color:var(--t-strongink); border:1px solid var(--t-line2)}
:root[data-theme] dialog{background:var(--t-card); color:var(--t-ink); border:1px solid var(--t-line2); border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.35)}
:root[data-theme] dialog::backdrop{background:rgba(0,0,0,.5)}

/* tabs: no sliding pill */
:root[data-theme] .brand{color:var(--t-ink); font-weight:650}
:root[data-theme] .tabs a{color:var(--t-mut); border-radius:7px}
:root[data-theme] .tabs a:hover{color:var(--t-ink); background:var(--t-soft)}
:root[data-theme] .tabs a.on,:root[data-theme] .tabs.has-pill a.on,:root[data-theme] .tabs:not(.has-pill) a.on{background:var(--t-accentsoft); color:var(--t-accent); box-shadow:none}
:root[data-theme] .tabs .glass-pill{display:none}

/* buttons */
:root[data-theme] button,:root[data-theme] button.small{
  background:var(--t-card); color:var(--t-ink); border:1px solid var(--t-line2); border-radius:8px; box-shadow:none; font-weight:600;
}
:root[data-theme] button:hover{background:var(--t-soft); border-color:var(--t-ink); transform:none}
:root[data-theme] button.primary,:root[data-theme] button.primary:hover{
  background:var(--t-accent); border:1px solid var(--t-accent); color:var(--t-accentink); box-shadow:none; transform:none;
}
:root[data-theme] button.primary:hover{filter:brightness(.92)}
:root[data-theme] button.danger{color:var(--t-bad); border-color:var(--t-bad)}
:root[data-theme] .themebtn{border-radius:999px}

/* fields */
:root[data-theme] input,:root[data-theme] select,:root[data-theme] textarea{
  background:var(--t-input); color:var(--t-ink); border:1px solid var(--t-line2); border-radius:8px; box-shadow:none;
}
:root[data-theme] input:focus,:root[data-theme] select:focus,:root[data-theme] textarea:focus{outline:2px solid var(--t-accent); outline-offset:1px; background:var(--t-input)}
:root[data-theme] input::placeholder,:root[data-theme] textarea::placeholder{color:var(--t-mut); opacity:.75}
:root[data-theme] input:disabled,:root[data-theme] select:disabled,:root[data-theme] textarea:disabled,:root[data-theme] input[readonly],:root[data-theme] textarea[readonly]{background:var(--t-soft); color:var(--t-mut); border-color:var(--t-line)}
:root[data-theme] input[type="checkbox"],:root[data-theme] input[type="radio"]{accent-color:var(--t-accent)}

/* tables: ruled rows, not floating pills */
:root[data-theme] table{border-collapse:collapse; border-spacing:0}
:root[data-theme] th{color:var(--t-mut); background:transparent; border-bottom:1px solid var(--t-line2); letter-spacing:.04em; font-size:12px}
:root[data-theme] td{background:transparent; border-bottom:1px solid var(--t-line)}
:root[data-theme] td:first-child,:root[data-theme] td:last-child{border-radius:0}
:root[data-theme] tr[data-nav]:hover td{background:var(--t-soft)}

/* pills */

/* the rest of the desk's own surfaces */
:root[data-theme] .gen-line.gen{background:var(--t-accentsoft); border-color:var(--t-line)}
:root[data-theme] .gen-out.warn,:root[data-theme] .gen-done.warn{background:var(--t-warnsoft); border-color:var(--t-line); color:var(--t-warn)}
:root[data-theme] .gen-done.ok{background:var(--t-oksoft); border-color:var(--t-line); color:var(--t-ok)}
:root[data-theme] .gen-panel{background:var(--t-card); border-color:var(--t-line2); color:var(--t-ink)}
:root[data-theme] .gen-fab{background:var(--t-accent); border-color:var(--t-accent); color:var(--t-accentink); box-shadow:0 2px 10px rgba(0,0,0,.25)}
/* the Warehouse Desk's own surfaces */
:root[data-theme] .item,:root[data-theme] .item:hover{border-radius:10px; color:var(--t-ink)}
:root[data-theme] .item .line{color:var(--t-mut)}
:root[data-theme] .item .nm{font-family:inherit; color:var(--t-ink)}
:root[data-theme] .item .price{font-family:inherit; color:var(--t-accent)}
:root[data-theme] .shot,:root[data-theme] .hero,:root[data-theme] .shotcell,:root[data-theme] .strip .sh{background:var(--t-soft)}
:root[data-theme] .hero{border:1px solid var(--t-line); border-radius:10px}
:root[data-theme] .hero .none{color:var(--t-mut)}
:root[data-theme] .strip .sh{border:1px solid var(--t-line); border-radius:7px}
:root[data-theme] .strip .sh.on{border-color:var(--t-accent); box-shadow:0 0 0 2px var(--t-accentsoft)}
:root[data-theme] .badge{background:var(--t-soft); border:1px solid var(--t-line); color:var(--t-mut); border-radius:5px; padding:2px 7px; font-weight:600}
:root[data-theme] .badge.cat,:root[data-theme] .badge.co{background:var(--t-oksoft); border-color:var(--t-line); color:var(--t-ok)}
:root[data-theme] .badge.ref,:root[data-theme] .badge.eye{background:var(--t-warnsoft); border-color:var(--t-line); color:var(--t-warn)}
:root[data-theme] .badge.off{background:var(--t-badsoft); border-color:var(--t-line); color:var(--t-bad)}
:root[data-theme] .badge.qc{background:var(--qcbg); border-color:var(--qcline); color:var(--qc); font-weight:700}
:root[data-theme] .badge.store{background:var(--storebg); border-color:var(--storeline); color:var(--store); font-weight:700}
:root[data-theme] .chip{background:var(--t-card); border:1px solid var(--t-line2); color:var(--t-mut); border-radius:999px; box-shadow:none}
:root[data-theme] .chip.on{background:var(--t-accent); border-color:var(--t-accent); color:var(--t-accentink)}
:root[data-theme] .tabs a .pip{background:var(--t-accent); color:var(--t-accentink)}
:root[data-theme] th.c-qc,:root[data-theme] td.c-qc{background:var(--qcbg)}
:root[data-theme] th.c-qc{color:var(--qc)}
:root[data-theme] th.c-store,:root[data-theme] td.c-store{background:var(--storebg)}
:root[data-theme] th.c-store{color:var(--store)}
:root[data-theme] .half{border:1px solid var(--t-line)}
:root[data-theme] .half.qc{background:var(--qcbg); border-color:var(--qcline)}
:root[data-theme] .half.store{background:var(--storebg); border-color:var(--storeline)}
:root[data-theme] .half.locked{background:var(--t-soft)}
:root[data-theme] .half.qc h3{color:var(--qc)}
:root[data-theme] .half.store h3{color:var(--store)}
:root[data-theme] .readrow{border-bottom-color:var(--t-line)}
:root[data-theme] .ok{background:var(--t-oksoft); border:1px solid var(--t-line); color:var(--t-ok); border-radius:8px}
:root[data-theme] .warnbox{background:var(--t-warnsoft); border:1px solid var(--t-line); color:var(--t-warn); border-radius:8px}
:root[data-theme] .pager{color:var(--t-mut)}
:root[data-theme] table tr.rec:hover td{background:var(--t-soft)}
:root[data-theme] .gen-out,:root[data-theme] .gen-done,:root[data-theme] .gen-line{background:var(--t-soft); border-color:var(--t-line); color:var(--t-ink)}
:root[data-theme] .gen-out.warn,:root[data-theme] .gen-done.warn{background:var(--t-warnsoft); color:var(--t-warn)}
:root[data-theme] .gen-done.ok{background:var(--t-oksoft); color:var(--t-ok)}
:root[data-theme] .gen-out.muted{color:var(--t-mut)}
:root[data-theme] .gen-fb .gen-fbtitle{color:var(--t-ink)}
}