/* ============================================================================
   Liquid Glass — portal-wide surface.
   Loaded AFTER tailwind.css, so these rules win at equal specificity. That is
   the whole trick: 297 pages are styled with Tailwind utilities written inline,
   and redefining the handful of utilities they actually use retints all of them
   without editing a single page.

   Applies only when header.php decides it should (cookie for a preview, flag
   file once it is live), so nothing here can reach a customer by accident.

   Three rules kept throughout:
     · glass is for CARDS, not for every white box — a `bg-white` with no shadow
       and no radius is usually a chip or a table cell, and turning those
       translucent only makes text harder to read
     · blur is expensive; it goes on large surfaces, never on small repeated ones
     · none of it reaches paper — see the print block at the end
   ========================================================================= */

:root{
  --g-ink:#1d1d1f;            /* Apple's near-black; pure black looks harsh */
  --g-ink-2:#55555a;
  --g-ink-3:#86868b;
  --g-blue:#0071e3;
  --g-line:rgba(0,0,0,.09);

  --g-surface:rgba(255,255,255,.62);
  --g-surface-solid:rgba(255,255,255,.93);   /* modals, menus — must stay legible */
  --g-hi:rgba(255,255,255,.92);              /* the specular top edge */
  --g-edge:rgba(255,255,255,.55);
  --g-shadow:0 10px 34px rgba(31,38,74,.09), 0 2px 8px rgba(31,38,74,.05);
  --g-blur:saturate(180%) blur(30px);
  --g-r:20px;
}

/* ---------- the field the glass bends ----------
   Fixed, so it stays put while the page scrolls, and desaturated enough that
   the content stays the thing you look at. */
body{
  background:#f2f3f7 !important;
  color:var(--g-ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
              Inter,"Segoe UI",Roboto,system-ui,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.011em;
}
body::before{
  content:'';position:fixed;inset:-20vh -20vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 12% 8%,  rgba(168,200,255,.55), transparent 68%),
    radial-gradient(34vw 34vw at 88% 92%, rgba(255,217,201,.50), transparent 68%),
    radial-gradient(30vw 30vw at 62% 42%, rgba(214,201,255,.42), transparent 70%);
  filter:blur(60px);
}

/* ---------- typography ---------- */
h1,h2,h3,h4,.text-2xl,.text-3xl,.text-4xl{letter-spacing:-.021em}
h1,.text-4xl{font-weight:600}
h2,.text-3xl{font-weight:600}
h3,.text-2xl{font-weight:600}
.font-bold,.font-extrabold,.font-black{font-weight:600}   /* Apple stays lighter */
.text-gray-800,.text-gray-900,.text-slate-800,.text-slate-900{color:var(--g-ink) !important}
.text-gray-600,.text-gray-500,.text-slate-600,.text-slate-500{color:var(--g-ink-2) !important}
.text-gray-400,.text-slate-400{color:var(--g-ink-3) !important}

/* ---------- CARDS ----------
   Only a white box that also carries a radius or a shadow. That combination is
   what the pages use for a card; a bare .bg-white is usually a chip or a cell. */
.bg-white.rounded,.bg-white.rounded-md,.bg-white.rounded-lg,
.bg-white.rounded-xl,.bg-white.rounded-2xl,.bg-white.rounded-3xl,
.bg-white.shadow,.bg-white.shadow-sm,.bg-white.shadow-md,
.bg-white.shadow-lg,.bg-white.shadow-xl,.bg-white.shadow-2xl{
  position:relative;
  background:rgba(255,255,255,.82) !important;
  border-radius:var(--g-r) !important;
  border-color:transparent !important;
  box-shadow:0 4px 18px rgba(31,38,74,.07), inset 0 0 0 .5px var(--g-edge) !important;
}
/* the highlight a bevelled edge would catch */
.bg-white.rounded-lg::before,.bg-white.rounded-xl::before,.bg-white.rounded-2xl::before,
.bg-white.shadow-md::before,.bg-white.shadow-lg::before,.bg-white.shadow-xl::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--g-hi) 20%,var(--g-hi) 80%,transparent);
}
/* frosted white with no blur available is just grey — go opaque instead */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .bg-white.rounded-lg,.bg-white.rounded-xl,.bg-white.shadow-lg,.bg-white.shadow-md{
    background:rgba(255,255,255,.95) !important;
  }
}
/* blur costs the most on a phone, where it matters most */
@media (max-width:640px){ :root{--g-blur:saturate(170%) blur(20px)} }

/* Anything floating over the page has to stay readable, so it gets the solid
   mix rather than the transparent one. */
.fixed.inset-0 .bg-white,[class*="z-50"] .bg-white,.modal .bg-white,
.a-pop,.spmm-panel{
  background:var(--g-surface-solid) !important;
}

/* ---------- radii, softened across the board ---------- */
.rounded-md{border-radius:10px !important}
.rounded-lg{border-radius:14px !important}
.rounded-xl{border-radius:18px !important}
.rounded-2xl{border-radius:22px !important}

/* ---------- shadows: Apple's are wide and faint ---------- */
.shadow-sm{box-shadow:0 1px 3px rgba(31,38,74,.06) !important}
.shadow,.shadow-md{box-shadow:0 4px 16px rgba(31,38,74,.07) !important}
.shadow-lg{box-shadow:0 10px 34px rgba(31,38,74,.09),0 2px 8px rgba(31,38,74,.05) !important}
.shadow-xl,.shadow-2xl{box-shadow:0 20px 52px rgba(31,38,74,.13),0 4px 12px rgba(31,38,74,.06) !important}

/* ---------- buttons ----------
   A gradient plus an inner top highlight is what makes an Apple button look
   pressed out of the surface rather than painted onto it. */
.bg-blue-600,.bg-blue-500,.bg-indigo-600,.bg-blue-700{
  background-image:linear-gradient(180deg,#0a84ff,#0071e3) !important;
  background-color:#0071e3 !important;
  box-shadow:0 6px 18px rgba(0,113,227,.30),inset 0 1px 0 rgba(255,255,255,.26) !important;
  border:0 !important;
}
.bg-green-600,.bg-green-500,.bg-emerald-600{
  background-image:linear-gradient(180deg,#34c759,#28a745) !important;
  background-color:#28a745 !important;
  box-shadow:0 6px 18px rgba(40,167,69,.28),inset 0 1px 0 rgba(255,255,255,.26) !important;
  border:0 !important;
}
.bg-red-600,.bg-red-500{
  background-image:linear-gradient(180deg,#ff453a,#e5342a) !important;
  background-color:#e5342a !important;
  box-shadow:0 6px 18px rgba(229,52,42,.26),inset 0 1px 0 rgba(255,255,255,.24) !important;
  border:0 !important;
}
.bg-amber-500,.bg-yellow-500,.bg-orange-500{
  background-image:linear-gradient(180deg,#ffb340,#ff9f0a) !important;
  background-color:#ff9f0a !important;
  box-shadow:0 6px 18px rgba(255,159,10,.26),inset 0 1px 0 rgba(255,255,255,.28) !important;
  border:0 !important;
}
.bg-slate-800,.bg-gray-800,.bg-slate-900,.bg-gray-900{
  background-image:linear-gradient(180deg,#3a3a3c,#1d1d1f) !important;
  box-shadow:0 6px 18px rgba(29,29,31,.24),inset 0 1px 0 rgba(255,255,255,.14) !important;
}
button,.btn,a.bg-blue-600,a.bg-green-600,a.bg-red-600,
input[type=submit],input[type=button]{
  border-radius:999px;
  font-weight:500;
  letter-spacing:-.012em;
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,filter .18s;
}
button:hover,.btn:hover,a.bg-blue-600:hover,a.bg-green-600:hover{transform:translateY(-1px);filter:saturate(1.06)}
button:active,.btn:active{transform:scale(.985)}
/* square corners belong to a few things — do not round them into pills */
.rounded-none,.rounded-sm,td button,th button,table button{border-radius:10px}

/* ---------- form controls ---------- */
input[type=text],input[type=number],input[type=email],input[type=password],
input[type=tel],input[type=date],input[type=search],input[type=url],
select,textarea{
  background:rgba(255,255,255,.82) !important;
  border:0 !important;
  border-radius:12px !important;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.10),inset 0 1px 2px rgba(31,38,74,.04) !important;
  color:var(--g-ink);
  letter-spacing:-.011em;
  transition:background .16s,box-shadow .16s;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 0 0 4px rgba(0,113,227,.17),inset 0 0 0 1px var(--g-blue) !important;
}
input::placeholder,textarea::placeholder{color:var(--g-ink-3)}

/* ---------- tables ---------- */
table{border-collapse:separate;border-spacing:0}
thead,thead tr,.bg-gray-100,.bg-gray-50,.bg-slate-100,.bg-slate-50{
  background:rgba(255,255,255,.5) !important;
}
thead th{
  font-weight:600;color:var(--g-ink-2);letter-spacing:-.004em;
  border-bottom:.5px solid var(--g-line) !important;
}
tbody tr{transition:background .14s}
tbody tr:hover{background:rgba(255,255,255,.55) !important}
td,th{border-color:var(--g-line) !important}
.divide-y > * + *{border-top-color:var(--g-line) !important}

/* ---------- the menu, properly ----------
   A translucent bar with the page sliding under it is the single most
   recognisable piece of this look — it is what the macOS menu bar and every iOS
   nav bar do — so this is the one place the blur genuinely earns its cost.

   The links were set at 11.5px, which is smaller than anything Apple ships and
   is what made the bar feel cramped rather than calm. Fifteen of them at 13px
   still fit; the room comes from tighter tracking and pill padding instead of
   shrinking the type.
   ========================================================================= */
header.apple-header{
  background:rgba(250,250,252,.72) !important;
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  backdrop-filter:saturate(180%) blur(26px);
  border-bottom:.5px solid rgba(0,0,0,.10) !important;
  box-shadow:none !important;
}
.apple-nav{
  background:transparent !important;
  border-top:.5px solid rgba(0,0,0,.06);
}
/* Fifteen links have to fit whatever the laptop. Measured: at 11.5px they
   already ran 1050px wide and overflowed a 1009px window — that was true before
   any of this — and taking them to 13px pushed that to 1240. So the size steps
   down with the window instead of being one number that only suits a big
   monitor. Comfortable at 1440, tight but whole at 1024. */
.a-link{
  font-size:12px !important;
  font-weight:500;
  letter-spacing:-.014em;
  color:#1d1d1f !important;
  padding:6px 8px !important;
  border-radius:999px;
  white-space:nowrap;
  transition:background .18s cubic-bezier(.16,1,.3,1),color .18s;
}
@media (min-width:1180px){ .a-link{font-size:12.5px !important;padding:6px 9px !important} }
@media (min-width:1340px){ .a-link{font-size:13px !important;padding:7px 11px !important} }
@media (max-width:1080px){ .a-link{font-size:11.5px !important;padding:5px 6px !important;letter-spacing:-.016em} }
.a-link:hover{background:rgba(0,0,0,.055);color:#000 !important}
.a-link:active{background:rgba(0,0,0,.09)}
/* whichever page you are on should be obvious without hunting */
.a-link[aria-current],.a-link.active,.a-link.is-active{
  background:rgba(0,113,227,.10);color:var(--g-blue) !important;
}

/* ---------- dropdowns: a floating sheet, not a bordered box ---------- */
.a-pop,.a-mega{
  padding:7px !important;
  border-radius:18px !important;
  background:rgba(252,252,254,.86) !important;
  -webkit-backdrop-filter:saturate(180%) blur(30px) !important;
  backdrop-filter:saturate(180%) blur(30px) !important;
  border:0 !important;
  box-shadow:0 20px 52px rgba(31,38,74,.18),
             0 2px 6px rgba(31,38,74,.06),
             inset 0 0 0 .5px rgba(255,255,255,.85) !important;
}
.a-pop-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px !important;
  margin:1px 0 !important;
  border-radius:12px !important;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:-.012em;
  color:#1d1d1f;
  transition:background .16s,color .16s,transform .16s cubic-bezier(.16,1,.3,1);
}
.a-pop-item:hover{
  background:rgba(0,113,227,.09) !important;
  color:var(--g-blue);
}
.a-pop-item:active{transform:scale(.99)}
/* the coloured icon tiles keep their colour, lose the hard square */
.a-pop-ico{
  width:30px;height:30px;flex:none;
  border-radius:9px !important;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.05);
}

/* ---------- the Control Center mega menu ----------
   The markup was already right — seven groups, forty-six tools, an icon tile
   and a written description for every one, and a search box. The styling was
   throwing it away:

     · column-count:1 put all forty-six in a single narrow column, so the
       "mega menu" was a list you scrolled
     · .a-mm-d {display:none} hid every one of those descriptions
     · 4px item padding, a 24px tile and 9.5px headings left no air at all

   Three columns, the descriptions turned back on, and Apple's own type sizes.
   ========================================================================= */
.a-mega{
  /* right-0 anchors this to a parent that can itself sit past the window edge,
     so a hard cap goes here as well */
  width:min(1060px, calc(100vw - 2rem)) !important;
  max-width:calc(100vw - 1.5rem) !important;
  padding:0 !important;
  border-radius:22px !important;
  /* SOLID, not glass. Forty-six names and forty-six descriptions is dense
     reading, and letting the page show through behind small grey type made it
     work to scan. Translucency is worth it on a nav bar you look past; it is not
     worth it on a panel you actually read. The depth comes from the shadow. */
  background:#fcfcfe !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border:0 !important;
  box-shadow:0 28px 72px rgba(31,38,74,.22),
             0 3px 10px rgba(31,38,74,.08),
             inset 0 0 0 .5px rgba(0,0,0,.06) !important;
}

/* the title bar */
.a-mega > div:first-child{padding:14px 18px !important;border-bottom:.5px solid rgba(0,0,0,.07) !important}
.a-mega h3{font-size:15px !important;font-weight:600;letter-spacing:-.018em}

.a-mm-search{
  width:270px !important;
  padding:7px 12px !important;
  gap:8px !important;
  background:#f2f2f5 !important;
  border:0 !important;
  border-radius:999px !important;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08) !important;
  transition:box-shadow .18s,background .18s;
}
.a-mm-search:focus-within{
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(0,113,227,.16), inset 0 0 0 1px var(--g-blue) !important;
}
.a-mm-search input{
  background:transparent !important;box-shadow:none !important;border:0 !important;
  padding:0 !important;font-size:13.5px !important;letter-spacing:-.011em;
}
.a-mm-search input:focus{box-shadow:none !important;background:transparent !important}
.a-mm-search kbd{
  font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--g-ink-3);background:rgba(0,0,0,.05);
  padding:3px 5px;border-radius:5px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06);
}

/* three columns, groups kept whole */
.a-mm-body{padding:16px 18px 18px !important;max-height:74vh !important}
.a-mm-cols{column-count:3 !important;column-gap:26px !important}
@media (max-width:1100px){ .a-mm-cols{column-count:2 !important} }
@media (max-width:820px){  .a-mm-cols{column-count:1 !important} }
.a-mm-grp{margin:0 0 18px !important;break-inside:avoid}

.a-mm-grp-h{
  padding:0 8px 8px !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.055em !important;
  color:var(--g-ink-3) !important;
  gap:7px !important;
}
.a-mm-grp-h svg{width:13px;height:13px}

/* the item: tile, name, and the description that was written and then hidden */
.a-mm-item{
  align-items:flex-start !important;
  gap:11px !important;
  padding:8px 9px !important;
  border-radius:12px !important;
  transition:background .16s ease, transform .2s cubic-bezier(.16,1,.3,1) !important;
}
.a-mm-item:hover{background:rgba(0,113,227,.075) !important}
.a-mm-item:active{transform:scale(.99)}
.a-mm-ico{
  width:32px !important;height:32px !important;
  border-radius:9px !important;
  margin-top:1px;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7), 0 1px 3px rgba(31,38,74,.06) !important;
  transition:transform .24s cubic-bezier(.16,1,.3,1);
}
.a-mm-ico svg{width:16px;height:16px}
.a-mm-item:hover .a-mm-ico{transform:scale(1.07)}
.a-mm-t{
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:-.012em !important;
  line-height:1.35 !important;
  color:var(--g-ink) !important;
}
.a-mm-item:hover .a-mm-t{color:var(--g-blue) !important}
/* one line, clipped — the point is a hint, not a paragraph */
.a-mm-d{
  display:block !important;
  font-size:11.5px !important;
  line-height:1.4 !important;
  /* a step darker than the usual muted grey — this is the text people read */
  color:#6b6b70 !important;
  letter-spacing:-.006em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px;
}

/* a scrollbar you can live with */
.a-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}
.a-scroll::-webkit-scrollbar{width:9px}
.a-scroll::-webkit-scrollbar-track{background:transparent}
.a-scroll::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.16);border-radius:99px;border:3px solid transparent;background-clip:content-box;
}
.a-scroll::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28);background-clip:content-box}

/* ---------- mobile header + drawer ---------- */
.spmm-head{
  background:rgba(250,250,252,.80) !important;
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border-bottom:.5px solid rgba(0,0,0,.09) !important;
}
.spmm-panel{
  background:rgba(250,250,252,.88) !important;
  -webkit-backdrop-filter:saturate(180%) blur(30px);
  backdrop-filter:saturate(180%) blur(30px);
  box-shadow:0 0 70px rgba(31,38,74,.22) !important;
  border:0 !important;
}
.spmm-overlay{
  background:rgba(0,0,0,.26) !important;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.spmm-link{
  border-radius:12px;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:-.012em;
  transition:background .16s;
}
.spmm-link:hover,.spmm-link:active{background:rgba(0,0,0,.055)}
.spmm-sec{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--g-ink-3);
}
.spmm-tile{border-radius:14px}
.spmm-logout{border-radius:999px}

/* bottom bar on phones */
.sp-bottomnav{
  background:rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-top:.5px solid rgba(0,0,0,.08) !important;
  box-shadow:none !important;
}

/* ---------- badges and pills keep their meaning, lose the hard edges ---------- */
.bg-green-100,.bg-blue-100,.bg-red-100,.bg-yellow-100,.bg-amber-100,
.bg-indigo-100,.bg-purple-100,.bg-gray-100.rounded-full{
  border-radius:999px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.6);
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- page-named surfaces ----------
   Not every page builds its cards from Tailwind utilities. The busy ones —
   index, order status, the admin order screen — define their own classes in
   their own <style>, and a utility-only rule never reaches them. These are
   those classes, found by looking for a white background in each page's CSS
   rather than by guessing at names.

   Those page <style> blocks come AFTER this file in the document, so !important
   is what carries these; it is doing real work here, not papering over a
   specificity mistake.  */
/* ---------- page-named surfaces ----------
   Cut down to the four that are genuinely plain white.
   The first version of this list was written from class NAMES and it broke real
   screens: `.qa-card` on the dashboard sets `color:#fff` over a coloured
   gradient, so forcing a white background left white text on white — the three
   quick-action cards went blank. `.glass-card`, `.snap-card`, `.os-card` and
   `.search-glass` were already translucent with their own backdrop-filter, and
   overriding them only flattened a design that was already right.

   So each candidate was checked against what its page actually declares, and
   anything coloured, light-texted, or already glass is left alone. A retheme
   that repaints working UI is not a retheme, it is damage. */
.mobile-order-card,.mh-stat,.category-card,.parked-card{
  background:rgba(255,255,255,.82) !important;
  border:0 !important;
  border-radius:16px !important;
  box-shadow:0 3px 14px rgba(31,38,74,.07), inset 0 0 0 .5px var(--g-edge) !important;
}

/* A modal has content behind it, so it takes the solid mix — a translucent
   dialog over a busy table is unreadable. */
.modal-glass,.bld-modal-card{
  background:var(--g-surface-solid) !important;
  -webkit-backdrop-filter:saturate(180%) blur(30px) !important;
  backdrop-filter:saturate(180%) blur(30px) !important;
  border:0 !important;
  border-radius:24px !important;
  box-shadow:0 24px 64px rgba(31,38,74,.22), inset 0 0 0 .5px rgba(255,255,255,.7) !important;
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  /* only the four this file actually restyles; the pages that were already
     translucent ship their own fallback and must not be overridden here */
  .mobile-order-card,.mh-stat,.category-card,.parked-card{
    background:rgba(255,255,255,.95) !important;
  }
}

/* ---------- paper ----------
   Translucency, blur and shadows are meaningless on paper and cost ink. Every
   report and challan in this portal is printed, so this block is not optional.
   ========================================================================= */
@media print{
  body{background:#fff !important}
  body::before{display:none !important}
  *{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }
  .bg-white,[class*="bg-white"]{background:#fff !important}
  header.apple-header,.apple-nav,.spmm-head,.sp-bottomnav{display:none !important}
}

/* ============================================================================
   NIGHT
   Two states, and <html> always carries one of them:
     · data-theme="light"  (the default when no choice has been made)
     · data-theme="dark"

   Deliberately NOT keyed off prefers-color-scheme. Every surface rule below is
   written against the attribute, so a "follow the device" state would have
   flipped the colour tokens while leaving the cards light — dark text on a white
   card. One switch, two outcomes, nothing half-applied.

   The attribute is written on <html> by header.php from a cookie, BEFORE any
   markup, so the page never flashes white on its way to dark.

   The portal is 297 pages of hard-coded light Tailwind classes, so this works
   the same way the light layer does: redefine the handful of utilities the pages
   actually use. Anything already coloured — the gradient action cards, the
   status badges — keeps its colour; only surfaces and text flip.
   ========================================================================= */

:root[data-theme="dark"]{
  --g-ink:#f5f5f7;
  --g-ink-2:#a1a1a6;
  --g-ink-3:#8a8a8f;
  --g-blue:#0a84ff;
  --g-line:rgba(255,255,255,.10);
  --g-surface:rgba(32,32,36,.92);
  --g-surface-solid:#2c2c2e;
  --g-hi:rgba(255,255,255,.14);
  --g-edge:rgba(255,255,255,.09);
  --g-shadow:0 10px 34px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.30);
}

/* ---------- page ---------- */
[data-theme="dark"] body{
  /* True black, the way iOS does it. Measured before this change: the page was
     #0a0a0c and cards composited to about rgb(23,23,25) — 0.009 apart in
     luminance, which is to say the cards were not visible as cards at all.
     Dark mode needs elevation to run the other way: a floor you can rise from,
     surfaces clearly lighter than it, and an edge on each one. */
  background:#000000 !important;
  color:#f5f5f7;
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(38vw 38vw at 12% 8%,  rgba(56,96,190,.30), transparent 68%),
    radial-gradient(34vw 34vw at 88% 92%, rgba(180,86,60,.24), transparent 68%),
    radial-gradient(30vw 30vw at 62% 42%, rgba(112,84,190,.22), transparent 70%);
}

/* ---------- text ---------- */
[data-theme="dark"] .text-gray-800,[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-slate-800,[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-black{ color:#f5f5f7 !important }
[data-theme="dark"] .text-gray-700,[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-gray-600,[data-theme="dark"] .text-slate-600{ color:#c7c7cc !important }
[data-theme="dark"] .text-gray-500,[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-gray-400,[data-theme="dark"] .text-slate-400{ color:#a1a1a6 !important }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] b,
[data-theme="dark"] strong,[data-theme="dark"] label{ color:#f5f5f7 }

/* ---------- surfaces ---------- */
[data-theme="dark"] .bg-white.rounded,[data-theme="dark"] .bg-white.rounded-md,
[data-theme="dark"] .bg-white.rounded-lg,[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .bg-white.rounded-2xl,[data-theme="dark"] .bg-white.rounded-3xl,
[data-theme="dark"] .bg-white.shadow,[data-theme="dark"] .bg-white.shadow-sm,
[data-theme="dark"] .bg-white.shadow-md,[data-theme="dark"] .bg-white.shadow-lg,
[data-theme="dark"] .bg-white.shadow-xl,[data-theme="dark"] .bg-white.shadow-2xl,
[data-theme="dark"] .mobile-order-card,[data-theme="dark"] .mh-stat,
[data-theme="dark"] .category-card,[data-theme="dark"] .parked-card{
  background:rgba(32,32,36,.92) !important;
  box-shadow:0 8px 26px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.13) !important;
}
/* the top-edge highlight has to invert or it draws a white line on black */
[data-theme="dark"] .bg-white.rounded-lg::before,[data-theme="dark"] .bg-white.rounded-xl::before,
[data-theme="dark"] .bg-white.rounded-2xl::before,[data-theme="dark"] .bg-white.shadow-md::before,
[data-theme="dark"] .bg-white.shadow-lg::before,[data-theme="dark"] .bg-white.shadow-xl::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13) 20%,rgba(255,255,255,.13) 80%,transparent);
}
/* plain white boxes that are not cards — chips, cells, wrappers */
[data-theme="dark"] .bg-white{ background:rgba(32,32,36,.92) }
[data-theme="dark"] .bg-gray-50,[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-slate-50,[data-theme="dark"] .bg-slate-100{
  background:rgba(255,255,255,.07) !important;
}

/* pages that style their own cards */
[data-theme="dark"] .os-card,[data-theme="dark"] .odm-card,[data-theme="dark"] .tt-panel,
[data-theme="dark"] .apple-card,[data-theme="dark"] .po-card,[data-theme="dark"] .parked-panel,
[data-theme="dark"] .rep-cust-card,[data-theme="dark"] .sp-slab-box,
[data-theme="dark"] .glass-card,[data-theme="dark"] .snap-card,
[data-theme="dark"] .stat-tile,[data-theme="dark"] .search-glass,
[data-theme="dark"] .brd-stat,[data-theme="dark"] .cat-card{
  background:rgba(32,32,36,.92) !important;
  background-image:none !important;
  box-shadow:0 8px 26px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.13) !important;
  color:#f5f5f7;
}

/* ---------- form controls ---------- */
[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=email],[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=tel],[data-theme="dark"] input[type=date],
[data-theme="dark"] input[type=search],[data-theme="dark"] input[type=url],
[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:rgba(255,255,255,.09) !important;
  color:#f5f5f7 !important;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16) !important;
}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{
  background:rgba(255,255,255,.10) !important;
  box-shadow:0 0 0 4px rgba(10,132,255,.28), inset 0 0 0 1px #0a84ff !important;
}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{ color:#7c7c82 }
/* the native dropdown arrow is drawn dark — swap it for a light one */
[data-theme="dark"] select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a1a6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 14px center !important;
}

/* ---------- tables ---------- */
[data-theme="dark"] thead,[data-theme="dark"] thead tr{ background:rgba(255,255,255,.045) !important }
[data-theme="dark"] thead th{ color:#a1a1a6; border-bottom-color:rgba(255,255,255,.10) !important }
[data-theme="dark"] tbody tr:hover{ background:rgba(255,255,255,.045) !important }
[data-theme="dark"] td,[data-theme="dark"] th{ border-color:rgba(255,255,255,.09) !important }
[data-theme="dark"] .divide-y > * + *{ border-top-color:rgba(255,255,255,.09) !important }
[data-theme="dark"] .border,[data-theme="dark"] [class*="border-gray-"],
[data-theme="dark"] [class*="border-slate-"]{ border-color:rgba(255,255,255,.10) !important }

/* ---------- chrome ---------- */
[data-theme="dark"] header.apple-header{
  background:rgba(22,22,24,.78) !important;
  border-bottom-color:rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .apple-nav{ border-top-color:rgba(255,255,255,.07) }
[data-theme="dark"] .a-link{ color:#e8e8ed !important }
[data-theme="dark"] .a-link:hover{ background:rgba(255,255,255,.09); color:#fff !important }
[data-theme="dark"] .a-link[aria-current],[data-theme="dark"] .a-link.active{
  background:rgba(10,132,255,.18); color:#5ea9ff !important;
}
[data-theme="dark"] .a-pop{
  background:rgba(44,44,46,.94) !important;
  box-shadow:0 20px 52px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .a-pop-item{ color:#e8e8ed }
[data-theme="dark"] .a-pop-item:hover{ background:rgba(10,132,255,.16) !important; color:#5ea9ff }

/* the mega menu stays solid in dark too — it is a panel you read */
[data-theme="dark"] .a-mega{
  background:#2c2c2e !important;
  box-shadow:0 28px 72px rgba(0,0,0,.62), 0 3px 10px rgba(0,0,0,.4),
             inset 0 0 0 .5px rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .a-mega > div:first-child{ border-bottom-color:rgba(255,255,255,.10) !important }
[data-theme="dark"] .a-mega h3{ color:#f5f5f7 !important }
[data-theme="dark"] .a-mm-search{
  background:rgba(255,255,255,.08) !important;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.13) !important;
}
[data-theme="dark"] .a-mm-search input{ color:#f5f5f7 !important }
[data-theme="dark"] .a-mm-search kbd{ color:#8a8a8f;background:rgba(255,255,255,.08) }
[data-theme="dark"] .a-mm-grp-h{ color:#8a8a8f !important }
[data-theme="dark"] .a-mm-t{ color:#f5f5f7 !important }
[data-theme="dark"] .a-mm-d{ color:#98989d !important }
[data-theme="dark"] .a-mm-item:hover{ background:rgba(10,132,255,.16) !important }
[data-theme="dark"] .a-mm-item:hover .a-mm-t{ color:#5ea9ff !important }
[data-theme="dark"] .a-scroll{ scrollbar-color:rgba(255,255,255,.22) transparent }
[data-theme="dark"] .a-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.20) }

/* the pastel icon tiles are invisible on black — darken the fill, brighten the glyph */
[data-theme="dark"] .a-tile-blue    { background:rgba(10,132,255,.22)  !important; color:#6cb6ff !important }
[data-theme="dark"] .a-tile-emerald { background:rgba(48,209,88,.20)   !important; color:#5fe081 !important }
[data-theme="dark"] .a-tile-violet  { background:rgba(140,110,255,.22) !important; color:#b39dff !important }
[data-theme="dark"] .a-tile-amber   { background:rgba(255,159,10,.20)  !important; color:#ffc266 !important }
[data-theme="dark"] .a-tile-rose    { background:rgba(255,69,88,.20)   !important; color:#ff8fa0 !important }
[data-theme="dark"] .a-tile-indigo  { background:rgba(94,106,255,.22)  !important; color:#a3adff !important }
[data-theme="dark"] .a-tile-cyan    { background:rgba(50,200,220,.20)  !important; color:#7fdfe8 !important }
[data-theme="dark"] .a-tile-fuchsia { background:rgba(214,94,220,.20)  !important; color:#e9a3ee !important }

/* mobile chrome */
[data-theme="dark"] .spmm-head{
  background:rgba(18,18,20,.82) !important; border-bottom-color:rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .spmm-panel{
  background:rgba(22,22,24,.94) !important; box-shadow:0 0 70px rgba(0,0,0,.7) !important;
}
[data-theme="dark"] .spmm-overlay{ background:rgba(0,0,0,.55) !important }
[data-theme="dark"] .spmm-link,[data-theme="dark"] .spmm-name{ color:#e8e8ed }
[data-theme="dark"] .spmm-link:hover,[data-theme="dark"] .spmm-link:active{ background:rgba(255,255,255,.08) }
[data-theme="dark"] .spmm-sec{ color:#8a8a8f }
[data-theme="dark"] .sp-bottomnav{
  background:rgba(18,18,20,.86) !important; border-top-color:rgba(255,255,255,.10) !important;
}

/* the notification panel is its own little world */
[data-theme="dark"] .nb-panel{
  background:#2c2c2e !important; border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.6) !important;
}
[data-theme="dark"] .nb-head{ border-bottom-color:rgba(255,255,255,.10) !important }
[data-theme="dark"] .nb-head b{ color:#f5f5f7 !important }
[data-theme="dark"] .nb-item{ border-bottom-color:rgba(255,255,255,.07) !important; color:#e8e8ed }
[data-theme="dark"] .nb-item:hover{ background:rgba(255,255,255,.05) !important }
[data-theme="dark"] .nb-link{ color:#5ea9ff !important }

/* pale status badges glow on black; deepen the fill, lift the text */
[data-theme="dark"] .bg-green-100 { background:rgba(48,209,88,.18)  !important }
[data-theme="dark"] .bg-blue-100  { background:rgba(10,132,255,.18) !important }
[data-theme="dark"] .bg-red-100   { background:rgba(255,69,58,.18)  !important }
[data-theme="dark"] .bg-yellow-100,[data-theme="dark"] .bg-amber-100{ background:rgba(255,159,10,.18) !important }
[data-theme="dark"] .bg-indigo-100,[data-theme="dark"] .bg-purple-100{ background:rgba(120,110,255,.18) !important }
[data-theme="dark"] .text-green-700,[data-theme="dark"] .text-green-800{ color:#5fe081 !important }
[data-theme="dark"] .text-blue-700,[data-theme="dark"] .text-blue-800{ color:#6cb6ff !important }
[data-theme="dark"] .text-red-700,[data-theme="dark"] .text-red-800{ color:#ff8fa0 !important }
[data-theme="dark"] .text-yellow-700,[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-yellow-800,[data-theme="dark"] .text-amber-800{ color:#ffc266 !important }

/* ---------- hard-coded dark text ----------
   Measured on the dashboard in dark: 26 elements were drawing near-black text on
   a near-black card — contrast 1.1, i.e. invisible. Two causes, neither of which
   a .text-gray-* override can reach:

     · Tailwind arbitrary values, `text-[#1d1d1f]`, with the colour baked into
       the class name
     · classes that name their own colour — .sp-logo-side, .nt-text, .a-mm-t,
       and index.php's own .nm/.pri/.jn/.q/.orn

   So they are named here. An attribute selector matches the arbitrary ones by
   the literal text of the class.  */
[data-theme="dark"] [class*="text-[#1d1d1f]"],
[data-theme="dark"] [class*="text-[#0f172a]"],
[data-theme="dark"] [class*="text-[#1a1a2e]"],
[data-theme="dark"] [class*="text-[#424245]"]{ color:#f5f5f7 !important }
[data-theme="dark"] [class*="text-[#86868b]"],
[data-theme="dark"] [class*="text-[#6e6e73]"]{ color:#a1a1a6 !important }

/* the wordmark, the ticker, and the menu label */
[data-theme="dark"] .sp-logo-side,
[data-theme="dark"] .nt-text,
[data-theme="dark"] .a-mega-label{ color:#f5f5f7 !important }
[data-theme="dark"] .nb-ico,[data-theme="dark"] .nb-more{ color:#a1a1a6 !important }

/* index.php names its own. Only the ones that sit on a surface this file
   darkened — the quote card keeps its cream paper and its brown ink, so .vqp-q,
   .q, .a and .orn are deliberately absent. */
[data-theme="dark"] .nm,[data-theme="dark"] .pri,[data-theme="dark"] .jn,
[data-theme="dark"] .snap-num,[data-theme="dark"] .sn{
  color:#f5f5f7 !important;
}
[data-theme="dark"] .snap-lbl{ color:#a1a1a6 !important }

/* A backstop, not a substitute for the list above: any element whose colour is
   still one of the two near-blacks this portal uses gets lifted. Written with
   the attribute so it cannot leak into the light theme. */
[data-theme="dark"] [style*="#1d1d1f"],
[data-theme="dark"] [style*="#0f172a"]{ color:#f5f5f7 !important }

/* ---------- the switch itself ---------- */
.sp-theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;border:0;cursor:pointer;
  border-radius:999px;background:rgba(0,0,0,.05);color:#1d1d1f;
  transition:background .18s,transform .2s cubic-bezier(.16,1,.3,1);
}
.sp-theme-btn:hover{background:rgba(0,0,0,.09)}
.sp-theme-btn:active{transform:scale(.92)}
.sp-theme-btn svg{width:17px;height:17px}
[data-theme="dark"] .sp-theme-btn{background:rgba(255,255,255,.10);color:#f5f5f7}
[data-theme="dark"] .sp-theme-btn:hover{background:rgba(255,255,255,.16)}
/* only one of the two glyphs shows at a time */
.sp-theme-btn .sp-moon{display:none}
[data-theme="dark"] .sp-theme-btn .sp-sun{display:none}
[data-theme="dark"] .sp-theme-btn .sp-moon{display:block}


/* ---------- page-declared light surfaces ----------
   Generated by reading the CSS of the nine busiest pages and pulling out every
   class that paints itself white or near-white. Hand-listing them missed most of
   it: admin_add_order's whole page wrapper, .admin-order-page, was #f2f2f7 — a
   light grey sheet on a black body, which is what looked wrong.

   Neutral surfaces take the standard card colour. Anything with a real tint keeps
   its hue and is dropped to a dark version, so a green chip stays green and an
   amber note stays amber. Judged on the spread between channels, not on HLS
   saturation, which calls #f8fafc "saturated" when it is plainly grey. */
[data-theme="dark"] .action-icon,
[data-theme="dark"] .apple-input,
[data-theme="dark"] .bld-modal-card,
[data-theme="dark"] .bld-modal-foot,
[data-theme="dark"] .brd-fhead,
[data-theme="dark"] .brd-firm,
[data-theme="dark"] .brd-job,
[data-theme="dark"] .brd-route,
[data-theme="dark"] .brd-stat,
[data-theme="dark"] .cart-compact-input,
[data-theme="dark"] .cart-remove-btn,
[data-theme="dark"] .cat-name,
[data-theme="dark"] .category-card,
[data-theme="dark"] .disabled-overlay,
[data-theme="dark"] .history-row,
[data-theme="dark"] .item-search-results,
[data-theme="dark"] .mh-empty,
[data-theme="dark"] .mh-job,
[data-theme="dark"] .mh-stat,
[data-theme="dark"] .mobile-order-card,
[data-theme="dark"] .moc-chip,
[data-theme="dark"] .modal-glass,
[data-theme="dark"] .odm-card,
[data-theme="dark"] .odm-chip,
[data-theme="dark"] .odm-foot,
[data-theme="dark"] .odm-x,
[data-theme="dark"] .os-card,
[data-theme="dark"] .os-rename-input,
[data-theme="dark"] .os-thumb,
[data-theme="dark"] .parked-card,
[data-theme="dark"] .parked-panel,
[data-theme="dark"] .ph-count,
[data-theme="dark"] .pin-btn-in-result,
[data-theme="dark"] .po-chip,
[data-theme="dark"] .po-modal,
[data-theme="dark"] .po-status,
[data-theme="dark"] .pp-used-in,
[data-theme="dark"] .pri,
[data-theme="dark"] .qa-active,
[data-theme="dark"] .qa-c-cancel,
[data-theme="dark"] .qa-confirm,
[data-theme="dark"] .qa-modal,
[data-theme="dark"] .qa-search-input,
[data-theme="dark"] .qa-search-results,
[data-theme="dark"] .qa-tabs,
[data-theme="dark"] .qa-textarea,
[data-theme="dark"] .rc-active,
[data-theme="dark"] .search-glass,
[data-theme="dark"] .slider-btn,
[data-theme="dark"] .snap-card,
[data-theme="dark"] .sp-slab-row,
[data-theme="dark"] .tab-pill-approval,
[data-theme="dark"] .tt-arrow,
[data-theme="dark"] .whatsapp{
  background:rgba(32,32,36,.92) !important;
  border-color:rgba(255,255,255,.12) !important;
}
[data-theme="dark"] .odm-note{ background:rgb(46,45,42) !important; border-color:rgba(255,255,255,.12) !important }
[data-theme="dark"] .po-cancelled{ background:rgb(46,40,40) !important; border-color:rgba(255,255,255,.12) !important }
[data-theme="dark"] .po-completed{ background:rgb(38,46,42) !important; border-color:rgba(255,255,255,.12) !important }
[data-theme="dark"] .po-dispatched{ background:rgb(40,46,42) !important; border-color:rgba(255,255,255,.12) !important }
[data-theme="dark"] .pp-stock-row{ background:rgb(46,45,42) !important; border-color:rgba(255,255,255,.12) !important }
[data-theme="dark"] .sp-uv-badge{ background:rgb(42,45,46) !important; border-color:rgba(255,255,255,.12) !important }
[data-theme="dark"] .wip{ background:rgb(46,45,42) !important; border-color:rgba(255,255,255,.12) !important }
[data-theme="dark"] .y{ background:rgb(46,35,20) !important; border-color:rgba(255,255,255,.12) !important }


/* ---------- variables the pages theme themselves with ----------
   .admin-order-page paints itself `var(--apple-light)`, not a literal colour, so
   scanning for hex values walked straight past the biggest surface on the page:
   a #f2f2f7 sheet covering the whole screen on a black body. Overriding the
   variable retints everything downstream in one line.

   Only the two that are genuinely surfaces. --b1 and --b2 in the same file are a
   cyan and a pink used as gradient stops; darkening those would have broken the
   thing they decorate. */
[data-theme="dark"]{
  --apple-light:transparent !important;  /* the page wrapper — let the real page show */
  --apple-card:#202024 !important;       /* was #FFFFFF */
}


/* ---------- tinted Tailwind fills ----------
   The -50 shades were the last thing still glowing white on the black pages:
   a `bg-blue-50` note on admin_add_order is rgb(239,246,255), which is white for
   all practical purposes. Covering the whole -50/-100/-200 scale rather than the
   two that happened to be on screen, so the next page does not surprise us. */
[data-theme="dark"] .bg-blue-50{  background:rgba(10,132,255,.10) !important }
[data-theme="dark"] .bg-blue-100{ background:rgba(10,132,255,.16) !important }
[data-theme="dark"] .bg-blue-200{ background:rgba(10,132,255,.22) !important }
[data-theme="dark"] .bg-indigo-50{  background:rgba(94,106,255,.10) !important }
[data-theme="dark"] .bg-indigo-100{ background:rgba(94,106,255,.16) !important }
[data-theme="dark"] .bg-indigo-200{ background:rgba(94,106,255,.22) !important }
[data-theme="dark"] .bg-violet-50{  background:rgba(140,110,255,.10) !important }
[data-theme="dark"] .bg-violet-100{ background:rgba(140,110,255,.16) !important }
[data-theme="dark"] .bg-violet-200{ background:rgba(140,110,255,.22) !important }
[data-theme="dark"] .bg-purple-50{  background:rgba(140,110,255,.10) !important }
[data-theme="dark"] .bg-purple-100{ background:rgba(140,110,255,.16) !important }
[data-theme="dark"] .bg-purple-200{ background:rgba(140,110,255,.22) !important }
[data-theme="dark"] .bg-green-50{  background:rgba(48,209,88,.10) !important }
[data-theme="dark"] .bg-green-100{ background:rgba(48,209,88,.16) !important }
[data-theme="dark"] .bg-green-200{ background:rgba(48,209,88,.22) !important }
[data-theme="dark"] .bg-emerald-50{  background:rgba(48,209,88,.10) !important }
[data-theme="dark"] .bg-emerald-100{ background:rgba(48,209,88,.16) !important }
[data-theme="dark"] .bg-emerald-200{ background:rgba(48,209,88,.22) !important }
[data-theme="dark"] .bg-teal-50{  background:rgba(50,200,190,.10) !important }
[data-theme="dark"] .bg-teal-100{ background:rgba(50,200,190,.16) !important }
[data-theme="dark"] .bg-teal-200{ background:rgba(50,200,190,.22) !important }
[data-theme="dark"] .bg-cyan-50{  background:rgba(50,200,220,.10) !important }
[data-theme="dark"] .bg-cyan-100{ background:rgba(50,200,220,.16) !important }
[data-theme="dark"] .bg-cyan-200{ background:rgba(50,200,220,.22) !important }
[data-theme="dark"] .bg-red-50{  background:rgba(255,69,58,.10) !important }
[data-theme="dark"] .bg-red-100{ background:rgba(255,69,58,.16) !important }
[data-theme="dark"] .bg-red-200{ background:rgba(255,69,58,.22) !important }
[data-theme="dark"] .bg-rose-50{  background:rgba(255,69,88,.10) !important }
[data-theme="dark"] .bg-rose-100{ background:rgba(255,69,88,.16) !important }
[data-theme="dark"] .bg-rose-200{ background:rgba(255,69,88,.22) !important }
[data-theme="dark"] .bg-pink-50{  background:rgba(214,94,160,.10) !important }
[data-theme="dark"] .bg-pink-100{ background:rgba(214,94,160,.16) !important }
[data-theme="dark"] .bg-pink-200{ background:rgba(214,94,160,.22) !important }
[data-theme="dark"] .bg-amber-50{  background:rgba(255,159,10,.10) !important }
[data-theme="dark"] .bg-amber-100{ background:rgba(255,159,10,.16) !important }
[data-theme="dark"] .bg-amber-200{ background:rgba(255,159,10,.22) !important }
[data-theme="dark"] .bg-yellow-50{  background:rgba(255,190,20,.10) !important }
[data-theme="dark"] .bg-yellow-100{ background:rgba(255,190,20,.16) !important }
[data-theme="dark"] .bg-yellow-200{ background:rgba(255,190,20,.22) !important }
[data-theme="dark"] .bg-orange-50{  background:rgba(255,130,40,.10) !important }
[data-theme="dark"] .bg-orange-100{ background:rgba(255,130,40,.16) !important }
[data-theme="dark"] .bg-orange-200{ background:rgba(255,130,40,.22) !important }

/* ---------- inputs that are meant to disappear ----------
   order_status wraps its search in a `.search-glass` pill and marks the input
   `bg-transparent` so the two read as one control. Giving every input a fill
   painted a box inside a box — which is what looked wrong, in BOTH themes; the
   light one was just less obvious against white.

   Checked rather than assumed: .qa-search-input and .qo-cust-input sit in
   wrappers that have no background of their own, so those still want the fill
   and are deliberately not listed here. The focus ring moves to the pill. */
input.bg-transparent,textarea.bg-transparent,
.search-glass input,.a-mm-search input{
  background:transparent !important;
  box-shadow:none !important;
}
input.bg-transparent:focus,textarea.bg-transparent:focus,
.search-glass input:focus,.a-mm-search input:focus{
  background:transparent !important;
  box-shadow:none !important;
}
/* The dark rule above is [data-theme="dark"] input[type=text] — specificity
   (0,2,1) — so the plain selectors lose to it and the box came back. Repeating
   them under the attribute beats the generic input rule at equal weight. */
[data-theme="dark"] input.bg-transparent,
[data-theme="dark"] textarea.bg-transparent,
[data-theme="dark"] .search-glass input,
[data-theme="dark"] .a-mm-search input,
[data-theme="dark"] input.bg-transparent:focus,
[data-theme="dark"] .search-glass input:focus,
[data-theme="dark"] .a-mm-search input:focus{
  background:transparent !important;
  box-shadow:none !important;
}

/* the status tabs: a light pill with dark text, sitting on a black page */
[data-theme="dark"] .tab-pill,[data-theme="dark"] .tab-nav-link{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#e8e8ed !important;
}
[data-theme="dark"] .tab-pill.active,[data-theme="dark"] .tab-nav-link.active,
[data-theme="dark"] .tab-pill[aria-current]{
  background:rgba(10,132,255,.20) !important;
  color:#6cb6ff !important;
}
[data-theme="dark"] .tab-lbl{ color:inherit !important }
[data-theme="dark"] .tab-count{
  background:rgba(255,255,255,.13) !important;
  color:#e8e8ed !important;
}
.search-glass:focus-within{
  box-shadow:0 0 0 4px rgba(0,113,227,.16), inset 0 0 0 1px var(--g-blue) !important;
}
[data-theme="dark"] .search-glass:focus-within{
  box-shadow:0 0 0 4px rgba(10,132,255,.28), inset 0 0 0 1px #0a84ff !important;
}


/* ---------- colours written straight into the markup ----------
   Some badges carry their colour in a style attribute rather than a class —
   style="background:#fef2f2;color:#dc2626" and the like. A class-based override
   can never reach those, so they stayed bright pink on a black page.

   An author rule marked !important does outrank an inline style, which is the
   one case where reaching for !important is the correct tool rather than a
   shortcut. Backgrounds keep their hue and drop dark; the paired text colour is
   lifted so the pair still reads. 35 distinct colours, found by scanning the
   markup rather than by spotting them one at a time. */
[data-theme="dark"] [style*="background:#e0f7fb"],[data-theme="dark"] [style*="background: #e0f7fb"],[data-theme="dark"] [style*="background-color:#e0f7fb"],[data-theme="dark"] [style*="background-color: #e0f7fb"]{ background:rgb(42,47,48) !important }
[data-theme="dark"] [style*="background:#e2e8f0"],[data-theme="dark"] [style*="background: #e2e8f0"],[data-theme="dark"] [style*="background-color:#e2e8f0"],[data-theme="dark"] [style*="background-color: #e2e8f0"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#e4ecff"],[data-theme="dark"] [style*="background: #e4ecff"],[data-theme="dark"] [style*="background-color:#e4ecff"],[data-theme="dark"] [style*="background-color: #e4ecff"]{ background:rgb(42,44,48) !important }
[data-theme="dark"] [style*="background:#e8c500"],[data-theme="dark"] [style*="background: #e8c500"],[data-theme="dark"] [style*="background-color:#e8c500"],[data-theme="dark"] [style*="background-color: #e8c500"]{ background:rgb(48,40,22) !important }
[data-theme="dark"] [style*="background:#ecfdf5"],[data-theme="dark"] [style*="background: #ecfdf5"],[data-theme="dark"] [style*="background-color:#ecfdf5"],[data-theme="dark"] [style*="background-color: #ecfdf5"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#eef2ff"],[data-theme="dark"] [style*="background: #eef2ff"],[data-theme="dark"] [style*="background-color:#eef2ff"],[data-theme="dark"] [style*="background-color: #eef2ff"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#efe0d1"],[data-theme="dark"] [style*="background: #efe0d1"],[data-theme="dark"] [style*="background-color:#efe0d1"],[data-theme="dark"] [style*="background-color: #efe0d1"]{ background:rgb(48,44,41) !important }
[data-theme="dark"] [style*="background:#efe5d6"],[data-theme="dark"] [style*="background: #efe5d6"],[data-theme="dark"] [style*="background-color:#efe5d6"],[data-theme="dark"] [style*="background-color: #efe5d6"]{ background:rgb(48,45,42) !important }
[data-theme="dark"] [style*="background:#eff6ff"],[data-theme="dark"] [style*="background: #eff6ff"],[data-theme="dark"] [style*="background-color:#eff6ff"],[data-theme="dark"] [style*="background-color: #eff6ff"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#f0f0f3"],[data-theme="dark"] [style*="background: #f0f0f3"],[data-theme="dark"] [style*="background-color:#f0f0f3"],[data-theme="dark"] [style*="background-color: #f0f0f3"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#f0fdfa"],[data-theme="dark"] [style*="background: #f0fdfa"],[data-theme="dark"] [style*="background-color:#f0fdfa"],[data-theme="dark"] [style*="background-color: #f0fdfa"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#f1f5f9"],[data-theme="dark"] [style*="background: #f1f5f9"],[data-theme="dark"] [style*="background-color:#f1f5f9"],[data-theme="dark"] [style*="background-color: #f1f5f9"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#f2e8ff"],[data-theme="dark"] [style*="background: #f2e8ff"],[data-theme="dark"] [style*="background-color:#f2e8ff"],[data-theme="dark"] [style*="background-color: #f2e8ff"]{ background:rgb(45,43,48) !important }
[data-theme="dark"] [style*="background:#f3e8ff"],[data-theme="dark"] [style*="background: #f3e8ff"],[data-theme="dark"] [style*="background-color:#f3e8ff"],[data-theme="dark"] [style*="background-color: #f3e8ff"]{ background:rgb(45,43,48) !important }
[data-theme="dark"] [style*="background:#f4f4f7"],[data-theme="dark"] [style*="background: #f4f4f7"],[data-theme="dark"] [style*="background-color:#f4f4f7"],[data-theme="dark"] [style*="background-color: #f4f4f7"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#f6f9fd"],[data-theme="dark"] [style*="background: #f6f9fd"],[data-theme="dark"] [style*="background-color:#f6f9fd"],[data-theme="dark"] [style*="background-color: #f6f9fd"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#f8fafc"],[data-theme="dark"] [style*="background: #f8fafc"],[data-theme="dark"] [style*="background-color:#f8fafc"],[data-theme="dark"] [style*="background-color: #f8fafc"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#f9fafb"],[data-theme="dark"] [style*="background: #f9fafb"],[data-theme="dark"] [style*="background-color:#f9fafb"],[data-theme="dark"] [style*="background-color: #f9fafb"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#fafafc"],[data-theme="dark"] [style*="background: #fafafc"],[data-theme="dark"] [style*="background-color:#fafafc"],[data-theme="dark"] [style*="background-color: #fafafc"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#fbbf24"],[data-theme="dark"] [style*="background: #fbbf24"],[data-theme="dark"] [style*="background-color:#fbbf24"],[data-theme="dark"] [style*="background-color: #fbbf24"]{ background:rgb(48,36,22) !important }
[data-theme="dark"] [style*="background:#fde68a"],[data-theme="dark"] [style*="background: #fde68a"],[data-theme="dark"] [style*="background-color:#fde68a"],[data-theme="dark"] [style*="background-color: #fde68a"]{ background:rgb(48,43,26) !important }
[data-theme="dark"] [style*="background:#fdf3d7"],[data-theme="dark"] [style*="background: #fdf3d7"],[data-theme="dark"] [style*="background-color:#fdf3d7"],[data-theme="dark"] [style*="background-color: #fdf3d7"]{ background:rgb(48,46,40) !important }
[data-theme="dark"] [style*="background:#fee2e2"],[data-theme="dark"] [style*="background: #fee2e2"],[data-theme="dark"] [style*="background-color:#fee2e2"],[data-theme="dark"] [style*="background-color: #fee2e2"]{ background:rgb(48,42,42) !important }
[data-theme="dark"] [style*="background:#fef2f2"],[data-theme="dark"] [style*="background: #fef2f2"],[data-theme="dark"] [style*="background-color:#fef2f2"],[data-theme="dark"] [style*="background-color: #fef2f2"]{ background:rgba(32,32,36,.92) !important }
[data-theme="dark"] [style*="background:#fef3c7"],[data-theme="dark"] [style*="background: #fef3c7"],[data-theme="dark"] [style*="background-color:#fef3c7"],[data-theme="dark"] [style*="background-color: #fef3c7"]{ background:rgb(48,45,37) !important }
[data-theme="dark"] [style*="background:#fefce8"],[data-theme="dark"] [style*="background: #fefce8"],[data-theme="dark"] [style*="background-color:#fefce8"],[data-theme="dark"] [style*="background-color: #fefce8"]{ background:rgb(48,47,43) !important }
[data-theme="dark"] [style*="background:#fffbeb"],[data-theme="dark"] [style*="background: #fffbeb"],[data-theme="dark"] [style*="background-color:#fffbeb"],[data-theme="dark"] [style*="background-color: #fffbeb"]{ background:rgb(48,47,44) !important }
[data-theme="dark"] [style*="background:#ffffff"],[data-theme="dark"] [style*="background: #ffffff"],[data-theme="dark"] [style*="background-color:#ffffff"],[data-theme="dark"] [style*="background-color: #ffffff"]{ background:rgba(32,32,36,.92) !important }


/* inline text colours, lifted toward white so the hue survives the move */
[data-theme="dark"] [style*="color:#0071e3"],[data-theme="dark"] [style*="color: #0071e3"]{ color:rgb(122,181,240) !important }
[data-theme="dark"] [style*="color:#047857"],[data-theme="dark"] [style*="color: #047857"]{ color:rgb(124,184,167) !important }
[data-theme="dark"] [style*="color:#059669"],[data-theme="dark"] [style*="color: #059669"]{ color:rgb(125,200,177) !important }
[data-theme="dark"] [style*="color:#065f46"],[data-theme="dark"] [style*="color: #065f46"]{ color:rgb(125,171,158) !important }
[data-theme="dark"] [style*="color:#0d9488"],[data-theme="dark"] [style*="color: #0d9488"]{ color:rgb(129,199,193) !important }
[data-theme="dark"] [style*="color:#0e7490"],[data-theme="dark"] [style*="color: #0e7490"]{ color:rgb(129,182,197) !important }
[data-theme="dark"] [style*="color:#0f172a"],[data-theme="dark"] [style*="color: #0f172a"]{ color:rgb(130,134,144) !important }
[data-theme="dark"] [style*="color:#0f766e"],[data-theme="dark"] [style*="color: #0f766e"]{ color:rgb(130,183,179) !important }
[data-theme="dark"] [style*="color:#10b981"],[data-theme="dark"] [style*="color: #10b981"]{ color:rgb(130,218,189) !important }
[data-theme="dark"] [style*="color:#111827"],[data-theme="dark"] [style*="color: #111827"]{ color:rgb(131,134,142) !important }
[data-theme="dark"] [style*="color:#16a34a"],[data-theme="dark"] [style*="color: #16a34a"]{ color:rgb(133,207,160) !important }
[data-theme="dark"] [style*="color:#1a7f37"],[data-theme="dark"] [style*="color: #1a7f37"]{ color:rgb(135,188,151) !important }
[data-theme="dark"] [style*="color:#1d1d1f"],[data-theme="dark"] [style*="color: #1d1d1f"]{ color:rgb(137,137,138) !important }
[data-theme="dark"] [style*="color:#1d4ed8"],[data-theme="dark"] [style*="color: #1d4ed8"]{ color:rgb(137,162,234) !important }
[data-theme="dark"] [style*="color:#1f2937"],[data-theme="dark"] [style*="color: #1f2937"]{ color:rgb(138,143,151) !important }
[data-theme="dark"] [style*="color:#2563eb"],[data-theme="dark"] [style*="color: #2563eb"]{ color:rgb(141,173,244) !important }
[data-theme="dark"] [style*="color:#2a4a36"],[data-theme="dark"] [style*="color: #2a4a36"]{ color:rgb(144,160,150) !important }
[data-theme="dark"] [style*="color:#3548c8"],[data-theme="dark"] [style*="color: #3548c8"]{ color:rgb(149,159,226) !important }
[data-theme="dark"] [style*="color:#4338ca"],[data-theme="dark"] [style*="color: #4338ca"]{ color:rgb(157,151,227) !important }
[data-theme="dark"] [style*="color:#475569"],[data-theme="dark"] [style*="color: #475569"]{ color:rgb(159,166,177) !important }
[data-theme="dark"] [style*="color:#4b5563"],[data-theme="dark"] [style*="color: #4b5563"]{ color:rgb(161,166,173) !important }
[data-theme="dark"] [style*="color:#4f46e5"],[data-theme="dark"] [style*="color: #4f46e5"]{ color:rgb(163,158,241) !important }
[data-theme="dark"] [style*="color:#6366f1"],[data-theme="dark"] [style*="color: #6366f1"]{ color:rgb(173,175,247) !important }
[data-theme="dark"] [style*="color:#64748b"],[data-theme="dark"] [style*="color: #64748b"]{ color:rgb(174,182,194) !important }
[data-theme="dark"] [style*="color:#6b4c1e"],[data-theme="dark"] [style*="color: #6b4c1e"]{ color:rgb(178,161,138) !important }
[data-theme="dark"] [style*="color:#6b7280"],[data-theme="dark"] [style*="color: #6b7280"]{ color:rgb(178,181,188) !important }
[data-theme="dark"] [style*="color:#7c3aed"],[data-theme="dark"] [style*="color: #7c3aed"]{ color:rgb(186,152,245) !important }
[data-theme="dark"] [style*="color:#7c4a1e"],[data-theme="dark"] [style*="color: #7c4a1e"]{ color:rgb(186,160,138) !important }
[data-theme="dark"] [style*="color:#7e22ce"],[data-theme="dark"] [style*="color: #7e22ce"]{ color:rgb(187,140,229) !important }
[data-theme="dark"] [style*="color:#854d0e"],[data-theme="dark"] [style*="color: #854d0e"]{ color:rgb(191,162,129) !important }
[data-theme="dark"] [style*="color:#86868b"],[data-theme="dark"] [style*="color: #86868b"]{ color:rgb(192,192,194) !important }
[data-theme="dark"] [style*="color:#92400e"],[data-theme="dark"] [style*="color: #92400e"]{ color:rgb(198,155,129) !important }
[data-theme="dark"] [style*="color:#92610e"],[data-theme="dark"] [style*="color: #92610e"]{ color:rgb(198,172,129) !important }
[data-theme="dark"] [style*="color:#991b1b"],[data-theme="dark"] [style*="color: #991b1b"]{ color:rgb(201,136,136) !important }
[data-theme="dark"] [style*="color:#b45309"],[data-theme="dark"] [style*="color: #b45309"]{ color:rgb(216,165,127) !important }
[data-theme="dark"] [style*="color:#b91c1c"],[data-theme="dark"] [style*="color: #b91c1c"]{ color:rgb(218,136,136) !important }
[data-theme="dark"] [style*="color:#c0392b"],[data-theme="dark"] [style*="color: #c0392b"]{ color:rgb(222,152,144) !important }
[data-theme="dark"] [style*="color:#c2410c"],[data-theme="dark"] [style*="color: #c2410c"]{ color:rgb(223,156,128) !important }
[data-theme="dark"] [style*="color:#d97706"],[data-theme="dark"] [style*="color: #d97706"]{ color:rgb(235,184,125) !important }
[data-theme="dark"] [style*="color:#dc2626"],[data-theme="dark"] [style*="color: #dc2626"]{ color:rgb(236,142,142) !important }
[data-theme="dark"] [style*="color:#ef4444"],[data-theme="dark"] [style*="color: #ef4444"]{ color:rgb(246,157,157) !important }
[data-theme="dark"] [style*="color:#ff3b30"],[data-theme="dark"] [style*="color: #ff3b30"]{ color:rgb(255,153,147) !important }
[data-theme="dark"] [style*="color:#ff3b3b"],[data-theme="dark"] [style*="color: #ff3b3b"]{ color:rgb(255,153,153) !important }


/* ---------- Dock magnification, status filter chips ----------
   The scale itself is written from JS; this is the setup that lets it look
   right: growth from the bottom edge, room above the row so a lifted chip is
   not clipped, and the chip's own transition disabled while the pointer is
   moving (a 0.35s ease on transform would lag a whole third of a second behind
   the cursor). */
.os-chiprow{
  overflow:visible;
  /* A chip grows upward from its bottom edge: 42% of its height plus a 9px
     lift. On a 26px chip that is 20px, and 14px of padding clipped the top of
     it. 22px clears the tallest chip the row uses. */
  padding-top:22px;
  margin-top:-8px;           /* claw the extra space back so nothing shifts down */
  align-items:flex-end;
}
.os-chiprow .tab-pill{
  transform-origin:center bottom;
  /* Its own compositor layer, so a scale is a GPU transform of an already
     painted texture rather than a re-rasterise of the text every frame.
     backface-visibility keeps the promotion in browsers that ignore
     will-change on an element that is not animating yet. */
  will-change:transform;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
}
/* while the pointer is over the row, follow it immediately */
.os-chiprow.dock-live .tab-pill{
  transition:background .18s ease, color .18s ease, box-shadow .18s ease !important;
}
/* on the way out, glide back rather than snapping */
.os-chiprow .tab-pill{
  transition:transform .34s cubic-bezier(.16,1,.3,1),
             background .18s ease, color .18s ease, box-shadow .18s ease;
}
/* a hovered chip lifts off the row a little */
.os-chiprow.dock-live .tab-pill[data-dock-hot="1"]{
  box-shadow:0 10px 24px rgba(31,38,74,.16), inset 0 0 0 .5px rgba(255,255,255,.6);
  z-index:2;
}
[data-theme="dark"] .os-chiprow.dock-live .tab-pill[data-dock-hot="1"]{
  box-shadow:0 10px 26px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.16);
}
/* a finger has no hover, so the chips simply sit still and tap normally */
@media (hover:none){
  .os-chiprow{padding-top:0}
  .os-chiprow .tab-pill{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  .os-chiprow .tab-pill{transform:none !important;transition:none !important}
}

/* ---------- paper is always light ----------
   A dark report would empty a toner cartridge and be unreadable. */
@media print{
  [data-theme="dark"] body,[data-theme="dark"] *{
    background:#fff !important;
    color:#000 !important;
    box-shadow:none !important;
    border-color:#ddd !important;
  }
  .sp-theme-btn{display:none !important}
}