/* ═══════════════════════════════════════════════════════════════
   TRIĀKAR, SHARED ADMIN DESIGN SYSTEM
   Loaded by admin.html + admin-biz.html AFTER their inline styles,
   so equal-specificity rules here win by source order.

   Design-only layer: no selector here may change behavior.
   Sections:
     00 · Design tokens (brand / surfaces / status / elevation)
     01 · Palette remap, both panels, light + dark
     02 · Global primitives (type, glass, micro-interactions)
     10 · Sidebar        20 · Header
     30 · Admin dashboard
     40 · Quick Add Sale 41 · All Sales   42 · Open Orders  43 · Stock
     50 · Reviews        51 · Customers
     60 · Modals + popups
     70 · Dark-mode reconciliation
   ═══════════════════════════════════════════════════════════════ */

/* ── 00 · DESIGN TOKENS ────────────────────────────────────────── */
:root{
  /* Brand */
  --tri-orange:#C4622A;
  --tri-orange-hover:#A8501F;
  --tri-orange-light:#FBF0EB;
  --tri-orange-dim:rgba(196,98,42,.12);

  /* Base. Warmed to match the storefront's ivory (shared.css --ivory:#F4F2EC)
     instead of the near-neutral grey it sat on before, part of the "boxes
     I don't like" gap was the page background reading clinical/cold next
     to the site's warm cream. Card surface warms a hair too (#FEFDFB not
     pure #FFF) so cards don't look stark-white against the warmer page. */
  --akar-charcoal:#0F0F0D;
  --surface:#FEFDFB;
  --surface-2:#F6F3EC;
  --surface-3:#EFEAE0;
  --border-c:#E8E4DE;
  --border-strong:#D4CFC8;

  /* Text */
  --text-primary:#1A1916;
  /* Darkened Aug 2026 for legibility. --text-muted read 2.9:1 on the card surface,
     well under the 4.5:1 floor for body text, and it carries real labels, not
     decoration. Secondary moved down with it so the two stay a visible step apart.
     Measured on --surface #FEFDFB: secondary 7.3:1, muted 4.8:1. */
  --text-secondary:#5A554F;
  --text-muted:#75706A;

  /* Channel colors, marketplace brand identity, also used as
     section accents in the Business OS header nav */
  --ch-studio:#16A34A;
  --ch-amazon:#FF9900;
  --ch-flipkart-1:#FFE11B;
  --ch-flipkart-2:#2874F0;
  --ch-website:#A78BFA;

  /* Status colors, one system across both panels */
  --status-pending:#8B5CF6;
  --status-order-received:#3B82F6;
  --status-processing:#F59E0B;
  --status-printing:#F97316;
  --status-packed:#06B6D4;
  --status-dispatched:#6366F1;
  --status-delivered:#10B981;
  --status-completed:#059669;
  --status-delayed:#EF4444;
  --status-cancelled:#6B7280;
  --status-returned:#EC4899;

  /* Elevation. Values extracted from the live storefront's own card system
     (products.html .prod-card: rest 0 2px 10px rgba(22,22,20,.05), hover
     0 14px 40px rgba(22,22,20,.12); shared.css .glass-a-shadow / nav-drawer
     / trust-card land in the same family). The previous tokens here were a
     near-hairline 1-3px blur that read flat/clinical next to that, this is
     the actual gap behind "boxes I don't like": not the radius, the shadow
     had almost no depth at rest. Warm charcoal tint (22,22,20) replaces flat
     black to match the site's ink color instead of neutral grey shadows. */
  --shadow-sm:0 2px 10px rgba(22,22,20,.06);
  --shadow-md:0 10px 28px rgba(22,22,20,.10);
  --shadow-lg:0 20px 52px rgba(22,22,20,.16);
  --shadow-orange:0 4px 16px rgba(196,98,42,.20);

  /* Fields. Lifted from the storefront's .glass-input (shared.css): a near-white
     translucent fill, a hairline dark enough to actually draw an edge, and an
     inset highlight so the control reads as a recess you type into. The fill
     brightens on hover and again on focus, which is what makes a field feel
     live under the cursor instead of painted on. See section 02 for the rules. */
  --field-bg:rgba(255,255,255,.72);
  --field-bg-hover:rgba(255,255,255,.92);
  --field-bg-focus:#FFFFFF;
  --field-border:rgba(22,22,20,.13);
  --field-border-hover:rgba(22,22,20,.24);
  --field-inset:inset 0 2px 4px rgba(22,22,20,.045);
  --field-caret:#75706A;
}
html[data-theme="dark"]{
  --tri-orange:#D97742;
  --tri-orange-hover:#E08D5F;
  --tri-orange-light:rgba(217,119,66,.10);
  --tri-orange-dim:rgba(217,119,66,.16);

  --surface:#1E1D1B;
  --surface-2:#161514;
  --surface-3:#2A2927;
  --border-c:#2E2C29;
  --border-strong:#3D3B38;

  --text-primary:#F5F3F0;
  /* Same fix on the dark theme, where it was worse: muted read 3.1:1 on --surface.
     Measured on --surface #1E1D1B: secondary 7.7:1, muted 5.2:1. */
  --text-secondary:#B4AEA6;
  --text-muted:#948E86;

  /* Status colors, muted for dark backgrounds */
  --status-pending:#A78BFA;
  --status-order-received:#60A5FA;
  --status-processing:#FBBF24;
  --status-printing:#FB923C;
  --status-packed:#22D3EE;
  --status-dispatched:#818CF8;
  --status-delivered:#34D399;
  --status-completed:#10B981;
  --status-delayed:#F87171;
  --status-cancelled:#9CA3AF;
  --status-returned:#F472B6;

  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 10px 28px rgba(0,0,0,.40);
  --shadow-lg:0 20px 52px rgba(0,0,0,.55);
  --shadow-orange:0 4px 16px rgba(217,119,66,.28);

  /* Same field system inverted: on dark the recess is a lighter film over the
     card, not a white fill, and the inset goes to shadow instead of highlight. */
  --field-bg:rgba(255,255,255,.045);
  --field-bg-hover:rgba(255,255,255,.075);
  --field-bg-focus:rgba(255,255,255,.10);
  --field-border:rgba(255,255,255,.12);
  --field-border-hover:rgba(255,255,255,.24);
  --field-inset:inset 0 2px 4px rgba(0,0,0,.25);
  --field-caret:#B4AEA6;
}

/* ── 01 · PALETTE REMAP, retarget both panels' variable systems ──
   admin.html and admin-biz.html both read --bg/--bg-1/--bg-2/--bg-3,
   --border/--border-h, --text/--text-2/--text-3, --accent* everywhere.
   Redirecting them here rethemes every component in one move.       */
:root,html[data-theme="light"]{
  --bg:var(--surface-2);
  --bg-1:var(--surface);
  --bg-2:var(--surface-2);
  --bg-3:var(--surface-3);
  --border:var(--border-c);
  --border-h:var(--border-strong);
  --text:var(--text-primary);
  --text-2:var(--text-secondary);
  --text-3:var(--text-muted);
  --accent:var(--tri-orange);
  --accent-h:var(--tri-orange-hover);
  --accent-bg:var(--tri-orange-dim);
  --shadow:var(--shadow-sm);
  --shadow-h:var(--shadow-md);
  --glow-a:rgba(196,98,42,.15);
  --topbar-bg:rgba(255,255,255,.88);
}
html[data-theme="dark"]{
  --bg:var(--surface-2);
  --bg-1:var(--surface);
  --bg-2:var(--surface-3);
  --bg-3:#33312E;
  --border:var(--border-c);
  --border-h:var(--border-strong);
  --text:var(--text-primary);
  --text-2:var(--text-secondary);
  --text-3:var(--text-muted);
  --accent:var(--tri-orange);
  --accent-h:var(--tri-orange-hover);
  --accent-bg:var(--tri-orange-dim);
  --shadow:var(--shadow-sm);
  --shadow-h:var(--shadow-md);
  --glow-a:rgba(217,119,66,.22);
  --topbar-bg:rgba(30,29,27,.88);
}

/* ── 02 · GLOBAL PRIMITIVES ───────────────────────────────────── */

/* Typography scale */
.p-title{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}
.sidebar-section{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-muted)}
th,thead th{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text-secondary)}
tbody td,td{font-size:13px}

/* Numbers read in columns, tabular figures everywhere data lives */
td,.td-num,.kpi-val,.kpi-value,.calc-item span,.top-time,.gst-card .val{
  font-variant-numeric:tabular-nums;
}

/* Glass, reusable */
.glass{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6);
}
html[data-theme="dark"] .glass{
  background:rgba(22,22,20,.80);
  border:1px solid rgba(255,255,255,.08);
}

/* Micro-interactions, table rows tint to warm orange */
tbody tr{transition:background .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1))}
tr:hover td{background:var(--tri-orange-light)!important}
tbody tr:hover{background:var(--tri-orange-light)}

/* Corner radius, one system for every input in both panels, matching the pill
   buttons here and the pill form fields on the customer site.

   !important is doing real work rather than papering over a specificity fight:
   between them admin.html and admin-biz.html carry ~57 controls with a hard-coded
   border-radius in a style attribute, and an inline declaration beats any stylesheet
   rule that is not !important. Chasing all 57 by hand would leave the next inline
   control someone adds looking wrong again, so the radius lives here as a token.

   Excluded on purpose: checkbox, radio, range and color are native controls whose
   shape is drawn by the browser, and file inputs render a button inside the field. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
select{
  border-radius:999px!important;
}
/* A pill only reads right on a single-line control. A multi-line box with a 999px
   radius curves its first and last lines inward, so textareas get a soft corner. */
textarea{border-radius:16px!important}

/* Padding is deliberately left alone. On a single-line pill the text sits on the
   vertical centre line, which is exactly where the curve is widest, so the existing
   10-12px insets still clear it. Forcing more would only loosen the dense grids. */

/* Focus ring, one system for every input in both panels. A box-shadow ring follows
   whatever border-radius the control has, so it stays a clean outline on the pills
   above rather than a rectangle around them. */
input:focus,select:focus,textarea:focus{
  border-color:var(--tri-orange)!important;
  box-shadow:0 0 0 3px var(--tri-orange-dim)!important;
}

/* Placeholder color, one system for every input in both panels. admin.html
   already styled this for its own .ff/.form-input inputs (more specific,
   still wins there); admin-biz.html had no placeholder rule at all, every
   one of its inputs fell back to the browser default grey instead of the
   muted warm tone the rest of the design system uses. */
::placeholder{color:var(--text-muted);opacity:1}

/* Buttons share the lift/settle rhythm */
.btn:hover,.btn-primary:hover,.btn-secondary:hover,.btn-save:hover{
  transform:translateY(-1px);
}
.btn:active,.btn-primary:active,.btn-secondary:active,.btn-save:active{
  transform:translateY(0);
}

/* Cards elevate with the tokenized shadows */
.kpi,.kpi-card,.chart-box,.dash-widget,.gst-card{box-shadow:var(--shadow-sm)}
.kpi:hover,.kpi-card:hover,.dash-widget:hover{box-shadow:var(--shadow-md)}
.tbl-wrap{box-shadow:var(--shadow-sm)}

/* ── 10 · SIDEBAR, both panels ───────────────────────────────── */
.sidebar{
  background:var(--surface);
  border-right:1px solid var(--border-c);
  box-shadow:2px 0 8px rgba(0,0,0,.04);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html[data-theme="dark"] .sidebar{box-shadow:2px 0 8px rgba(0,0,0,.25)}
.sidebar{border-top:none}

/* Section labels, quiet, with a hairline separating each group */
.sidebar-section{
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
  padding:16px 16px 6px;margin-top:6px;
  border-top:1px solid var(--border-c);
}
.admin-body .sidebar-section:nth-of-type(1),
.shell .sidebar .sidebar-section:nth-of-type(2){border-top:none;margin-top:0;padding-top:10px}

/* Nav items, readable sans, soft radius, warm hover */
.sidebar .tab{
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:0;text-transform:none;
  color:var(--text-secondary);
  padding:8px 12px;border-radius:6px;margin:1px 8px;
  gap:9px;
}
.sidebar .tab:hover:not(.active){
  background:var(--tri-orange-dim);color:var(--tri-orange);
  transform:none;
}
.sidebar .tab:hover:not(.active) .tab-icon{color:var(--tri-orange)}
.sidebar .tab.active{
  background:var(--tri-orange-dim);color:var(--tri-orange);
  font-weight:600;border-color:transparent;
}
.sidebar .tab.active .tab-icon{color:var(--tri-orange)}
.sidebar .tab .tab-icon{margin-right:0;transition:color .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1))}

/* Count badges, proper pills */
.tab-badge,.tab .tab-count{
  font-family:var(--sans);font-size:10px;font-weight:700;
  background:var(--tri-orange);color:#fff;
  padding:1px 7px;border-radius:999px;letter-spacing:0;
}
.tab.active .tab-badge,.tab.active .tab-count{
  background:var(--tri-orange);color:#fff;border:none;
}

/* Section icon tints, subtle wayfinding color per group.
   Order matters: each later section overrides the ones above it. */
.admin-body .sidebar .tab .tab-icon{color:#64748B}                                  /* Operations */
.admin-body .sidebar-section:nth-of-type(2) ~ .tab .tab-icon{color:#D97706}        /* Catalogue */
.admin-body .sidebar-section:nth-of-type(3) ~ .tab .tab-icon{color:#0891B2}        /* Inbox */
.admin-body .sidebar-section:nth-of-type(4) ~ .tab .tab-icon{color:#16A34A}        /* Marketing */
.admin-body .sidebar-section:nth-of-type(5) ~ .tab .tab-icon{color:#6B7280}        /* System */
.shell .sidebar .tab .tab-icon{color:#64748B}                                      /* Overview */
.shell .sidebar .sidebar-section:nth-of-type(3) ~ .tab .tab-icon{color:#16A34A}    /* Sales */
.shell .sidebar .sidebar-section:nth-of-type(4) ~ .tab .tab-icon{color:#D97706}    /* Products */
.shell .sidebar .sidebar-section:nth-of-type(5) ~ .tab .tab-icon{color:#7C3AED}    /* Finance */

/* Business OS sidebar header */
.sb-header{border-bottom:1px solid var(--border-c)}
.sb-logo{color:var(--text-muted)}
.sb-title{color:var(--text-primary)}

/* Collapsed state, icons centered, tints preserved, one shared size
   between both panels (a touch bigger so the dock-hover pop reads well) */
.shell.sb-collapsed .tab,body.sb-collapsed .tab{margin:1px 6px;border-radius:8px}
.shell.sb-collapsed .tab .tab-icon,body.sb-collapsed .tab .tab-icon{font-size:16px}

/* ── 11 · DOCK-MAGNIFY HOVER, collapsed sidebar (both panels) ───
   Hovering an icon pops it up full-size with a floating name label;
   the 2 tabs immediately above and below rise partway, macOS-dock
   style. Classes are added/removed by JS only while the sidebar is
   collapsed, so this never affects the expanded sidebar. */
.sidebar .tab{
  position:relative;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1)),color .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));
  transform-origin:center;
}
.sidebar .tab.dock-hover{
  transform:scale(1.34);z-index:6;
  background:var(--tri-orange-dim);
}
.sidebar .tab.dock-hover .tab-icon{color:var(--tri-orange)!important}
.sidebar .tab.dock-near{transform:scale(1.16);z-index:5}
.sidebar .tab.dock-far{transform:scale(1.06);z-index:4}

/* Floating label, one shared tooltip, positioned via JS with
   position:fixed so it always escapes the sidebar's own scroll clip */
.dock-tooltip{
  position:fixed;z-index:5000;top:0;left:0;
  background:var(--akar-charcoal);color:#fff;
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  padding:6px 13px;border-radius:8px;white-space:nowrap;
  box-shadow:var(--shadow-lg);pointer-events:none;
  opacity:0;transform:translateY(-50%) translateX(-6px);
  transition:opacity .14s linear,transform .2s cubic-bezier(.34,1.56,.64,1);
}
.dock-tooltip::before{
  content:'';position:absolute;left:-4px;top:50%;
  width:8px;height:8px;background:inherit;border-radius:2px;
  transform:translateY(-50%) rotate(45deg);
}
.dock-tooltip.show{opacity:1;transform:translateY(-50%) translateX(0)}
html[data-theme="dark"] .dock-tooltip{background:var(--tri-orange);color:#1A1916}

/* ── 20 · HEADER, both panels ────────────────────────────────── */
.top-bar,.biz-topbar{
  border-top:none;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--border-c);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
html[data-theme="dark"] .top-bar,
html[data-theme="dark"] .biz-topbar{box-shadow:0 1px 4px rgba(0,0,0,.3)}
.top-bar{height:52px;padding:0 20px}
@media(min-width:769px){.biz-topbar{height:52px;padding:0 18px}}

/* Brand lockup: TriĀkar · panel name */
.top-logo{
  font-size:17px;font-weight:700;letter-spacing:.02em;
  color:var(--text-primary);text-transform:none;
}
.top-badge{
  font-family:var(--sans);font-size:13px;font-weight:400;
  letter-spacing:0;text-transform:none;
  color:var(--text-secondary);background:none;border:none;
  border-left:1px solid var(--border-strong);border-radius:0;
  padding:2px 0 2px 12px;margin-left:-4px;
}
.biz-tb-brand{font-size:17px;font-weight:700;color:var(--text-primary)}
.biz-tb-brand span{
  font-size:13px;font-weight:400;color:var(--text-secondary);
  border-left:1px solid var(--border-strong);padding-left:12px;margin-left:8px;
}

/* Search, pill, surface-2, orange on focus (focus ring from §02) */
#globalSearch,.biz-tb-search input{
  background:var(--surface-2);border:1px solid var(--border-c);
  border-radius:999px;color:var(--text-primary);
}
.biz-tb-search input{padding:8px 16px}
#globalSearch{padding:7px 14px}

/* Header buttons, ONE quiet pill style for every control in both
   panels (Business OS switch no longer looks selected) */
.top-btn,.top-btn-biz,.biz-tb-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;
  background:transparent;color:var(--text-secondary);
  border:1px solid var(--border-c);border-radius:999px;
  padding:6px 12px;box-shadow:none;
}
.top-btn:hover,.top-btn-biz:hover,.biz-tb-btn:hover{
  background:var(--surface-3);color:var(--text-primary);
  border-color:var(--border-strong);
}
.biz-tb-icon{
  border-radius:999px;background:transparent;
  border:1.5px solid var(--border-c);color:var(--text-secondary);
}
.biz-tb-icon:hover{border-color:var(--border-strong);color:var(--text-primary)}

/* Business OS header clock, same treatment as Admin's #topTime */
.biz-tb-time{
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text-primary);
  white-space:nowrap;flex-shrink:0;text-align:right;
}
@media(max-width:1000px){.biz-tb-time{display:none}}

/* ── 21 · HEADER PARITY + GLOBAL SEARCH (both panels) ─────────── */
/* Business OS shell, header spans the FULL width (Admin structure:
   topbar on top, sidebar + content in a row below) */
@media(min-width:769px){
  .shell{flex-direction:column}
  .biz-body{display:flex;flex:1;min-height:0}
  .biz-body .sidebar{height:auto}
  .sb-header{display:none}   /* brand + controls now live in the topbar */
}
@media(max-width:768px){
  .biz-body{display:flex;flex-direction:column;flex:1;min-height:0}
}

/* Admin, search sits centered like Business OS */
.top-center{flex:1;display:flex;justify-content:center;min-width:0;padding:0 16px}
.top-center>div{width:100%;max-width:440px}
#globalSearch:focus{width:100%!important}
@media(max-width:768px){.top-center{display:none}}

/* Search-results dropdown, one design system for both panels */
#globalSearchResults,#bizSearchResults{
  padding:5px!important;border-radius:12px!important;
  border:1px solid var(--border-c)!important;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:var(--shadow-lg)!important;
}
html[data-theme="dark"] #globalSearchResults,
html[data-theme="dark"] #bizSearchResults{
  background:rgba(22,22,20,.94)!important;
  border-color:rgba(255,255,255,.08)!important;
}
.gs-item{
  display:flex;gap:10px;align-items:center;
  padding:8px 10px;border-radius:8px;cursor:pointer;
  transition:background .12s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));
}
.gs-item:hover{background:var(--tri-orange-dim)}
.gs-type{
  font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--tri-orange);background:var(--tri-orange-dim);
  padding:2px 8px;border-radius:999px;flex-shrink:0;
  min-width:62px;text-align:center;
}
.gs-main{flex:1;min-width:0}
.gs-label{
  display:block;font-size:12.5px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gs-sub{
  display:block;font-size:10.5px;color:var(--text-muted);font-family:var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gs-empty{padding:14px;color:var(--text-muted);font-size:12px;text-align:center}

/* Notification dropdown items, one shared template for both panels */
.notif-title{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted);padding:4px 8px 8px;
}
.notif-item{
  padding:8px 9px;border-radius:8px;cursor:pointer;
  display:flex;gap:9px;align-items:center;
  transition:background .12s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));
}
.notif-item:hover{background:var(--tri-orange-dim)}
.notif-item .notif-icon{font-size:14px;flex-shrink:0}
.notif-item .notif-text{font-size:12px;color:var(--text-primary)}
.notif-empty{padding:14px;color:var(--text-muted);font-size:12px;text-align:center}

/* Online status indicator, one working rule for both panels
   (fixes a dead @keyframes reference that never actually pulsed) */
@keyframes secPulse{0%,100%{opacity:1}50%{opacity:.35}}
.top-status{
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--green);white-space:nowrap;flex-shrink:0;
}
.top-status .pulse{
  width:5px;height:5px;border-radius:50%;background:var(--green);
  animation:secPulse 2s ease-in-out infinite;flex-shrink:0;
}
@media(max-width:1000px){.top-status{display:none}}

/* ── 22 · HEADER CATEGORY NAV + MEGA-DROPDOWN (Business OS) ──────
   Phase 3: header-driven nav, built entirely from NAV_CONFIG. Lives
   alongside the existing sidebar until Phase 5 removes it. */
.biz-tb-nav{display:flex;align-items:center;gap:2px;flex-shrink:0}
.biz-tb-cat{
  position:relative;display:flex;align-items:center;gap:5px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  color:var(--text-secondary);background:none;border:none;cursor:pointer;
  padding:7px 11px;border-radius:8px;white-space:nowrap;
  transition:color .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1)),background .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));
}
.biz-tb-cat::after{
  content:'';position:absolute;left:11px;right:11px;bottom:1px;height:2px;
  border-radius:2px;background:var(--cat-color,var(--tri-orange));
  transform:scaleX(0);transform-origin:center;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.biz-tb-cat:hover{background:var(--surface-3);color:var(--cat-color,var(--tri-orange))}
.biz-tb-cat:hover::after,.biz-tb-cat.cat-active::after{transform:scaleX(1)}
.biz-tb-cat.cat-active{color:var(--cat-color,var(--tri-orange))}
.biz-tb-cat .cat-chev{font-size:9px;opacity:.55;transition:transform .18s var(--m-e-release,cubic-bezier(.16,1.1,.3,1))}
.biz-tb-cat.cat-open .cat-chev{transform:rotate(180deg)}

.biz-tb-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:236px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--border-c);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:6px;z-index:120;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);
  transform-origin:top left;
  transition:opacity .18s linear,transform .22s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .18s;
}
html[data-theme="dark"] .biz-tb-dropdown{
  background:rgba(22,22,20,.94);border-color:rgba(255,255,255,.08);
}
.biz-tb-cat.cat-open .biz-tb-dropdown{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);
  transition:opacity .18s linear,transform .22s cubic-bezier(.34,1.56,.64,1),visibility 0s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));
}
.biz-tb-dd-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  cursor:pointer;text-align:left;width:100%;background:none;border:none;
  font-family:var(--sans);color:var(--text-primary);
  transition:background .12s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));
}
.biz-tb-dd-item:hover,.biz-tb-dd-item.dd-active{background:var(--tri-orange-dim)}
.biz-tb-dd-icon{width:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--cat-color,var(--tri-orange))}
.biz-tb-dd-label{flex:1;font-size:12.5px;font-weight:500;white-space:nowrap;text-align:left}
.biz-tb-dd-badge{
  font-size:10px;font-weight:700;background:var(--tri-orange);color:#fff;
  padding:1px 7px;border-radius:999px;flex-shrink:0;
}
.biz-tb-dd-key{
  font-family:var(--mono);font-size:9px;font-weight:700;color:var(--text-muted);
  background:var(--surface-3);padding:2px 6px;border-radius:4px;flex-shrink:0;
  text-transform:uppercase;
}
/* Sub-group label inside a dropdown, used by sections whose items carry an
   item.group (currently just Finance: Tax & Filing / Money / Operations). */
.biz-tb-dd-group{
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);
  padding:9px 10px 3px;
}
.biz-tb-dd-group:first-child{padding-top:5px}
.biz-tb-cmdk{font-size:13px}
/* Below 1080px the 5 category buttons no longer fit; fall back to the
   hamburger (opens the command palette, Phase 5) so navigation is never
   unreachable in the 769-1080px gap between "hover nav fits" and the
   existing 768px mobile breakpoint. */
@media(max-width:1080px){
  .biz-tb-nav{display:none}
  .biz-tb-cmdk{display:none}
  .biz-tb-hamburger{display:inline-flex!important}
}

/* ── 23 · COMMAND PALETTE + SHORTCUT CHEAT-SHEET (Business OS) ──
   Phase 4: Ctrl/Cmd+K fuzzy nav, Ctrl/Cmd+/ shortcut reference.
   Both mount once at the app root and read NAV_CONFIG directly. */
.cmdk-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.40);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;
  opacity:0;pointer-events:none;transition:opacity .15s linear;
}
.cmdk-overlay.show{opacity:1;pointer-events:auto}
.cmdk-box{
  width:min(560px,92vw);max-height:60vh;display:flex;flex-direction:column;
  background:rgba(255,255,255,.96);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6);border-radius:16px;box-shadow:var(--shadow-lg);
  transform:translateY(-10px) scale(.98);transition:transform .22s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.cmdk-overlay.show .cmdk-box{transform:translateY(0) scale(1)}
html[data-theme="dark"] .cmdk-box{background:rgba(22,22,20,.96);border-color:rgba(255,255,255,.08)}
.cmdk-input{
  width:100%;border:none;outline:none;background:transparent;
  font-family:var(--sans);font-size:16px;color:var(--text-primary);
  padding:16px 18px;border-bottom:1px solid var(--border-c);
}
.cmdk-list{overflow-y:auto;padding:6px}
.cmdk-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  cursor:pointer;background:none;border:none;width:100%;text-align:left;
  font-family:var(--sans);color:var(--text-primary);
}
.cmdk-item:hover,.cmdk-item.cmdk-active{background:var(--tri-orange-dim)}
.cmdk-icon{width:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmdk-section{font-size:10px;font-weight:700;color:var(--cmd-color,var(--tri-orange));flex-shrink:0}
.cmdk-label{flex:1;font-size:13px;font-weight:500}
.cmdk-key{
  font-family:var(--mono);font-size:9px;font-weight:700;color:var(--text-muted);
  background:var(--surface-3);padding:2px 6px;border-radius:4px;text-transform:uppercase;
}
.cmdk-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:12.5px}

.cheat-box{width:min(680px,92vw);max-height:74vh}
.cheat-grid{overflow-y:auto;padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.cheat-grid{grid-template-columns:1fr}}
.cheat-group-title{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cheat-color,var(--tri-orange));margin-bottom:8px;
}
.cheat-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:12.5px;color:var(--text-primary)}
.cheat-row .cmdk-key{margin-left:10px}
.cheat-subgroup-title{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin:8px 0 2px;
}
.cheat-subgroup-title:first-of-type{margin-top:2px}

/* ── 30 · ADMIN DASHBOARD ─────────────────────────────────────── */
.dash-widget{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:14px;padding:20px;
}
.dash-w-title{font-size:11px;letter-spacing:.06em;color:var(--text-muted)}

/* Metric cards, colored 3px top border matching the number color */
.kpi-card{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:14px;padding:20px;
  border-top:3px solid var(--border-strong);
  transition:transform .15s var(--m-e-release,cubic-bezier(.16,1.1,.3,1)),box-shadow .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));
}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi-card:has(.kpi-value[style*="--green"]){border-top-color:var(--green)}
.kpi-card:has(.kpi-value[style*="--blue"]){border-top-color:var(--blue)}
.kpi-card:has(.kpi-value[style*="--red"]){border-top-color:var(--red)}
.kpi-card:has(.kpi-value[style*="--purple"]){border-top-color:var(--purple)}
.kpi-card:has(.kpi-value[style*="--yellow"]){border-top-color:var(--yellow)}
.kpi-card:has(.kpi-value[style*="--accent"]){border-top-color:var(--tri-orange)}
.kpi-value{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.kpi-card .kpi-label{
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);
}
.kpi-card .kpi-sub{font-size:12px;color:var(--text-secondary)}

/* Open-orders widget rows */
.dash-open-row{transition:background .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));border-radius:6px}
.dash-open-row:hover{background:var(--tri-orange-light)}
.dash-open-row .btn-sm{
  background:var(--tri-orange);color:#fff;border:none;
  border-radius:999px;padding:4px 12px;font-weight:600;
}
.dash-open-row .btn-sm:hover{background:var(--tri-orange-hover);color:#fff}
.dash-pill{font-variant-numeric:normal}

/* Revenue trend bars pick up the brand gradient */
.dash-widget[data-key="revenue_trend"] .dash-w-body>div>div{
  background:linear-gradient(180deg,var(--tri-orange),var(--tri-orange-hover))!important;
  opacity:.85!important;
}

/* ── 40 · QUICK ADD SALE (Business OS) ────────────────────────── */
/* Section cards, each logical group sits on its own surface */
.qa-card{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:14px;padding:20px;margin-bottom:12px;
  box-shadow:var(--shadow-sm);
}
.qa-chip-stack>.qa-card{margin-bottom:0}
.qa-sec-title{
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);
}
.qa-card>.qa-sec-title,.qa-card>.qa-sec-head{
  border-bottom:1px solid var(--border-c);
  padding-bottom:8px;margin-bottom:14px;
}
.qa-sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qa-sec-head .qa-sec-title{border:none;padding:0;margin:0}
.qa-card .chip-label{margin-bottom:10px}
.qa-card .form-grid,.qa-card .items-wrap{margin-bottom:0}
.qa-card .items-wrap{box-shadow:none}

/* Quick-select chips, pill + status dot */
.qchip{
  border-radius:999px;font-size:13px;font-weight:500;padding:6px 14px;
  background:var(--surface-3);color:var(--text-secondary);
  border:1px solid var(--border-c);
  display:inline-flex;align-items:center;gap:7px;
}
.qchip::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--text-muted);opacity:.5;flex-shrink:0;
}
.qchip:hover{border-color:var(--border-strong);background:var(--border-c)}
.qchip.active{background:var(--tri-orange);border-color:var(--tri-orange);color:#fff}
.qchip.active::before{background:#fff;opacity:.9}

/* Status chips, dot previews the stage color, selected fills it */
.qchip[data-s="pending"]::before{background:var(--status-pending);opacity:1}
.qchip[data-s="order_received"]::before{background:var(--status-order-received);opacity:1}
.qchip[data-s="processing"]::before{background:var(--status-processing);opacity:1}
.qchip[data-s="printing"]::before{background:var(--status-printing);opacity:1}
.qchip[data-s="packed"]::before{background:var(--status-packed);opacity:1}
.qchip[data-s="dispatched"]::before{background:var(--status-dispatched);opacity:1}
.qchip[data-s="delivered"]::before{background:var(--status-delivered);opacity:1}
.qchip[data-s="completed"]::before{background:var(--status-completed);opacity:1}
.qchip[data-s="delayed"]::before{background:var(--status-delayed);opacity:1}
.qchip[data-s="returned"]::before{background:var(--status-returned);opacity:1}
.qchip[data-s="cancelled"]::before{background:var(--status-cancelled);opacity:1}
.qchip[data-s="pending"].active{background:var(--status-pending);border-color:var(--status-pending);color:#fff}
.qchip[data-s="order_received"].active{background:var(--status-order-received);border-color:var(--status-order-received);color:#fff}
.qchip[data-s="processing"].active{background:var(--status-processing);border-color:var(--status-processing);color:#fff}
.qchip[data-s="printing"].active{background:var(--status-printing);border-color:var(--status-printing);color:#fff}
.qchip[data-s="packed"].active{background:var(--status-packed);border-color:var(--status-packed);color:#fff}
.qchip[data-s="dispatched"].active{background:var(--status-dispatched);border-color:var(--status-dispatched);color:#fff}
.qchip[data-s="delivered"].active{background:var(--status-delivered);border-color:var(--status-delivered);color:#fff}
.qchip[data-s="completed"].active{background:var(--status-completed);border-color:var(--status-completed);color:#fff}
.qchip[data-s="delayed"].active{background:var(--status-delayed);border-color:var(--status-delayed);color:#fff}
.qchip[data-s="returned"].active{background:var(--status-returned);border-color:var(--status-returned);color:#fff}
.qchip[data-s="cancelled"].active{background:var(--status-cancelled);border-color:var(--status-cancelled);color:#fff}
.qchip[data-s].active::before{background:#fff;opacity:.9}

/* Lead source + fulfillment chips, quiet orange selection (default, for
   sources with no recognizable platform brand: Studio Walk-in, Existing
   Customer, Referral, Other) */
.qchip[data-v].active{
  background:var(--tri-orange-dim);border-color:rgba(196,98,42,.4);
  color:var(--tri-orange);box-shadow:none;
}
.qchip[data-v].active::before{background:var(--tri-orange);opacity:1}

/* ── 40a · LEAD-SOURCE PLATFORM COLORS ────────────────────────────
   Recognizable platforms get their own tonal treatment (tint background +
   soft border + colored text/dot, same formula as the orange default above,
   just a different hue) instead of every source reading identically once
   picked. Placed after §40's generic .qchip[data-v].active on purpose: same
   selector specificity, later in file order wins, so these actually apply.
   A near-duplicate set of these rules used to live in admin-biz.html's own
   <style> block at equal specificity but earlier in load order, so the
   generic orange rule always won and silently ate the platform colors,
   fixed by consolidating here. */
.qchip[data-v="whatsapp"]::before{background:#25D366;opacity:.55}
.qchip[data-v="google"]::before{background:#4285F4;opacity:.55}
.qchip[data-v="instagram"]::before{background:#F0653C;opacity:.55}
/* Website reuses the purple already established elsewhere in this panel (the
   Quotation mode wash and the Dispatched status chip both run on #7C3AED), so it
   reads as part of the existing colour language rather than a new hue. */
.qchip[data-v="website"]::before{background:#7C3AED;opacity:.55}
.qchip[data-v="whatsapp"].active{
  background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.4);color:#1B7F44;
}
.qchip[data-v="google"].active{
  background:rgba(66,133,244,.14);border-color:rgba(66,133,244,.4);color:#2A5DB0;
}
.qchip[data-v="instagram"].active{
  background:rgba(240,101,60,.14);border-color:rgba(240,101,60,.4);color:#C6491F;
}
.qchip[data-v="website"].active{
  background:rgba(124,58,237,.14);border-color:rgba(124,58,237,.4);color:#5B21B6;
}
.qchip[data-v="whatsapp"].active::before,
.qchip[data-v="google"].active::before,
.qchip[data-v="instagram"].active::before,
.qchip[data-v="website"].active::before{opacity:1}
html[data-theme="dark"] .qchip[data-v="whatsapp"].active{color:#4ADE80}
html[data-theme="dark"] .qchip[data-v="google"].active{color:#7FA8F5}
html[data-theme="dark"] .qchip[data-v="instagram"].active{color:#F0895F}
html[data-theme="dark"] .qchip[data-v="website"].active{color:#A78BFA}

/* Inputs */
.form-group label{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--text-secondary);
}

/* ── Fields, the storefront's glass pill brought into both panels ──────────
   Every field used to be filled with --surface-2, which is the exact colour of
   the page background, and outlined in --border-c, one shade off that fill. On
   a card that reads as a flat beige slab: no edge, no depth, and an empty field
   looking identical to a filled one. The storefront answers this with a
   near-white translucent fill, a hairline with real contrast and an inset
   highlight, so a field looks like a recess rather than a painted rectangle.
   Same recipe here at admin density, tokens in section 00.

   background-color, not the background shorthand, because the select rule below
   layers a chevron image on top and a later shorthand would wipe it out. */
.form-group input,.form-group select,.form-group textarea,
.item-row input,.item-row select,
.filter-bar input,.filter-bar select,
.ff input,.ff select,.ff textarea,.form-input,
.biz-tb-search input,.iq-edit-input,.mapping-row select,
.month-select,input[type=month],input[type=date]{
  background-color:var(--field-bg);
  border:1.5px solid var(--field-border);
  border-radius:999px;
  box-shadow:var(--field-inset);
  transition:background-color .2s var(--m-e-glass,cubic-bezier(.32,.72,.28,1)),border-color .2s var(--m-e-glass,cubic-bezier(.32,.72,.28,1)),box-shadow .2s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));
}
/* A pill only reads right on a single-line control. A 999px radius curves a
   multi-line box's first and last lines inward, so text areas take a soft
   corner instead, same split the storefront makes. */
.form-group textarea,.ff textarea{border-radius:16px}
/* Hover and focus both lift the fill. Hover alone is a weak signal on a dense
   grid, so the step is small; focus goes all the way to solid white and picks up
   the orange ring from section 02, which is the one field you are actually in. */
.form-group input:hover,.form-group select:hover,.form-group textarea:hover,
.item-row input:hover,.item-row select:hover,
.filter-bar input:hover,.filter-bar select:hover,
.ff input:hover,.ff select:hover,.ff textarea:hover,.form-input:hover,
.biz-tb-search input:hover,.iq-edit-input:hover,.mapping-row select:hover,
.month-select:hover,input[type=month]:hover,input[type=date]:hover{
  background-color:var(--field-bg-hover);
  border-color:var(--field-border-hover);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
.item-row input:focus,.item-row select:focus,
.filter-bar input:focus,.filter-bar select:focus,
.ff input:focus,.ff select:focus,.ff textarea:focus,.form-input:focus,
.biz-tb-search input:focus,.iq-edit-input:focus,.mapping-row select:focus,
.month-select:focus,input[type=month]:focus,input[type=date]:focus{
  background-color:var(--field-bg-focus);
}
/* A disabled or readonly field must not look like something you can type in. */
.form-group input:disabled,.form-group select:disabled,.form-group textarea:disabled,
.item-row input:disabled,.item-row select:disabled,
.ff input:disabled,.ff select:disabled,.form-input:disabled,
.form-group input[readonly],.item-row input[readonly],.ff input[readonly]{
  background-color:var(--surface-2);box-shadow:none;color:var(--text-muted);
}

/* Padding. The pill radius needs more horizontal inset than the old 8px corner
   did, or the first character sits in the curve. Vertical is untouched, these
   grids are dense on purpose. */
.form-group input,.form-group select,.form-group textarea,
.ff input,.ff select,.ff textarea,.form-input{padding:10px 17px}
.item-row input,.item-row select{padding:6px 12px}
.filter-bar input,.filter-bar select{padding:6px 14px}

/* Select arrows. Both panels already draw their own chevron on `select`, but the
   old rule above set `background`, and the shorthand wiped background-image, so
   every select inside a form group was left with appearance:none and no arrow
   at all: Channel and State looked exactly like text boxes. Fixed at the root by
   using background-color above; the arrow itself is restated here because the
   panels' version is a filled triangle in #869488, a cool grey-green that is
   not in the palette. This is a stroked chevron in the text colours instead. */
select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2375706A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 2l5 4 5-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
/* :not(.badge-select) because the dark selector would otherwise outrank the status
   pill's own tighter arrow, which the light rule above is too weak to touch. */
html[data-theme="dark"] select:not(.badge-select){
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23B4AEA6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 2l5 4 5-4'/%3E%3C/svg%3E");
}
/* Room for the arrow, sized per density. .badge-select and the few selects with an
   inline background-image keep their own tighter arrow, both outrank these. */
.form-group select,.ff select,select.form-input,.month-select{padding-right:34px}
.item-row select,.filter-bar select{background-position:right 9px center;padding-right:26px}

/* Totals strip + collapsible shipping read as cards too */
.calc-row{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:14px;padding:16px 20px;box-shadow:var(--shadow-sm);
}
#panelQuickadd details{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:14px;padding:12px 20px;box-shadow:var(--shadow-sm);
}
#panelQuickadd details summary{color:var(--text-muted)}

/* Action buttons, one height, clear hierarchy:
   Save Sale solid orange · Make Invoice solid charcoal ·
   Save Order Record outlined orange · Clear ghost */
#panelQuickadd form button[type="submit"].btn,
#panelQuickadd .btn[onclick*="saveAndPrint"],
#panelQuickadd .btn[onclick*="saveOrderRecord"],
#panelQuickadd .btn[onclick*="resetQuickAdd"]{
  height:40px;border-radius:8px;padding:0 18px;font-weight:600;
}
#panelQuickadd form button[type="submit"].btn{
  background:var(--tri-orange)!important;color:#fff!important;
  box-shadow:var(--shadow-orange);
}
#panelQuickadd form button[type="submit"].btn:hover{background:var(--tri-orange-hover)!important}
#panelQuickadd .btn[onclick*="saveAndPrint"]{
  background:var(--akar-charcoal)!important;color:#fff!important;
}
#panelQuickadd .btn[onclick*="saveAndPrint"]:hover{background:#2E2E2A!important}
#panelQuickadd .btn[onclick*="saveOrderRecord"]{
  background:transparent!important;color:var(--tri-orange)!important;
  border:1px solid var(--tri-orange)!important;
}
#panelQuickadd .btn[onclick*="saveOrderRecord"]:hover{background:var(--tri-orange-dim)!important}
#panelQuickadd .btn[onclick*="resetQuickAdd"]{
  background:transparent;border:none;color:var(--text-secondary);
}
#panelQuickadd .btn[onclick*="resetQuickAdd"]:hover{color:var(--text-primary);background:var(--surface-3)}
html[data-theme="dark"] #panelQuickadd .btn[onclick*="saveAndPrint"]{
  background:var(--surface-3)!important;border:1px solid var(--border-strong)!important;
}

/* ── 41 · TABLES + ALL SALES (Business OS) ────────────────────── */
/* Table shell, white card, flat surface-2 header, roomy rows */
.tbl-wrap{border-radius:14px;border:1px solid var(--border-c);background:var(--surface)}
th,thead th{
  background:var(--surface-2);
  font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);
  border-bottom:1px solid var(--border-c);
}
td{padding:12px 14px;border-bottom:1px solid var(--border-c)}

/* Status pills, the unified palette, applied to badges AND the
   inline badge-select dropdowns (All Sales / Open Orders rows).
   background-color, not the shorthand: these outrank .badge-select, so the
   shorthand was erasing that pill's own dropdown arrow and leaving the 18px
   of clearance it reserves looking like a gap. */
.badge-pending,.badge-select.badge-pending{background-color:rgba(139,92,246,.12);color:var(--status-pending)}
.badge-order_received,.badge-select.badge-order_received{background-color:rgba(59,130,246,.12);color:var(--status-order-received)}
.badge-processing,.badge-select.badge-processing{background-color:rgba(245,158,11,.14);color:var(--status-processing)}
.badge-printing,.badge-select.badge-printing{background-color:rgba(249,115,22,.14);color:var(--status-printing)}
.badge-packed,.badge-select.badge-packed{background-color:rgba(6,182,212,.13);color:var(--status-packed)}
.badge-dispatched,.badge-select.badge-dispatched{background-color:rgba(99,102,241,.13);color:var(--status-dispatched)}
.badge-delivered,.badge-select.badge-delivered{background-color:rgba(16,185,129,.13);color:var(--status-delivered)}
.badge-completed,.badge-select.badge-completed{background-color:rgba(5,150,105,.13);color:var(--status-completed)}
.badge-delayed,.badge-select.badge-delayed{background-color:rgba(239,68,68,.12);color:var(--status-delayed)}
.badge-cancelled,.badge-select.badge-cancelled{background-color:rgba(107,114,128,.14);color:var(--status-cancelled)}
.badge-returned,.badge-select.badge-returned{background-color:rgba(236,72,153,.12);color:var(--status-returned)}
.badge-select{border-radius:999px;padding:3px 20px 3px 10px}

/* Channel dots, filled 8px circles with a soft matching glow */
.ch-dot{width:8px;height:8px}
.ch-shop .ch-dot{box-shadow:0 0 5px rgba(22,163,74,.55)}
.ch-amazon .ch-dot{box-shadow:0 0 5px rgba(255,153,0,.55)}
.ch-flipkart .ch-dot{box-shadow:0 0 5px rgba(40,116,240,.5)}
.ch-website .ch-dot{box-shadow:0 0 5px rgba(167,139,250,.55)}

/* Missing product thumbnail, warm placeholder, not a bare dash */
#salesBody span[style*="width:28px"]{
  background:var(--tri-orange-dim)!important;
  color:var(--tri-orange)!important;
  font-weight:700;
}

/* Paid lock, round toggle; edit pencil appears on row hover only */
#salesBody .btn[onclick*="togglePaidOrder"]{border-radius:999px!important;line-height:1}
#salesBody .btn[onclick*="openEditSale"]{opacity:0;transition:opacity .15s linear}
#salesBody tr:hover .btn[onclick*="openEditSale"]{opacity:1}
@media(max-width:768px){#salesBody .btn[onclick*="openEditSale"]{opacity:1}}

/* All Sales top bar, pill outline controls */
#panelSales .p-head .btn,#panelSales .p-head input[type="month"]{border-radius:999px}
#panelSales .p-head input[type="month"]{padding:6px 12px}

/* ── 42 · OPEN ORDERS (Business OS) ───────────────────────────── */
/* Summary cards, glass, with urgency-colored borders */
#openKpi .kpi{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border-c);border-radius:16px;
  box-shadow:var(--shadow-sm);padding:18px 20px;
}
html[data-theme="dark"] #openKpi .kpi{background:rgba(30,29,27,.9)}
#openKpi .kpi .kpi-val{font-size:36px;font-weight:700;letter-spacing:-.03em}
#openKpi .kpi.red{border-color:rgba(239,68,68,.5);background:linear-gradient(rgba(239,68,68,.06),rgba(255,255,255,.9) 55%)}
#openKpi .kpi.yellow{border-color:rgba(249,115,22,.5);background:linear-gradient(rgba(249,115,22,.07),rgba(255,255,255,.9) 55%)}
html[data-theme="dark"] #openKpi .kpi.red{background:linear-gradient(rgba(239,68,68,.10),rgba(30,29,27,.9) 55%)}
html[data-theme="dark"] #openKpi .kpi.yellow{background:linear-gradient(rgba(249,115,22,.10),rgba(30,29,27,.9) 55%)}

/* SLA column, colored text becomes proper status pills */
#openOrdersBody td:nth-child(2) span[style*="--red"]{
  background:var(--status-delayed);color:#fff!important;
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  display:inline-block;
}
#openOrdersBody td:nth-child(2) span[style*="--yellow"]{
  background:var(--status-printing);color:#fff!important;
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  display:inline-block;
}
#openOrdersBody td:nth-child(2) span[style*="--green"]{
  background:rgba(16,185,129,.13);color:var(--status-delivered)!important;
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;
  display:inline-block;
}

/* + Add Sale, orange glow, lifts on hover (lift comes from §02) */
#panelOpenorders .btn-primary{box-shadow:var(--shadow-orange)}

/* ── 42a · REPORTS & EXPORT (Business OS), financial gap analysis (F) ──
   The 6 export cards were identical flat bg-1 boxes with no icon and no
   color, unlike every other card family in the app (kpi-card top-border,
   biz-tb-icon tonal badges). Same tonal formula as biz-tb-icon-blue/purple/
   amber, extended with green/red so each card reads at a glance. */
.report-card{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:14px;padding:18px;border-top:3px solid var(--border-strong);
  transition:transform .15s var(--m-e-release,cubic-bezier(.16,1.1,.3,1)),box-shadow .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));box-shadow:var(--shadow-sm);
}
.report-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.report-card-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.report-card-sub{font-size:11px;color:var(--text-muted);margin-bottom:12px}
.report-card-icon{
  width:30px;height:30px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;margin-bottom:10px;
  border:1px solid transparent;
}
.report-card-green{border-top-color:var(--status-completed)}
.report-card-green .report-card-icon{background:rgba(5,150,105,.10);border-color:rgba(5,150,105,.28);color:var(--status-completed)}
.report-card-blue{border-top-color:#2563EB}
.report-card-blue .report-card-icon{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.28);color:#2563EB}
.report-card-purple{border-top-color:#7C3AED}
.report-card-purple .report-card-icon{background:rgba(124,58,237,.10);border-color:rgba(124,58,237,.28);color:#7C3AED}
.report-card-red{border-top-color:var(--status-delayed)}
.report-card-red .report-card-icon{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.28);color:var(--status-delayed)}
.report-card-amber{border-top-color:#D97706}
.report-card-amber .report-card-icon{background:rgba(217,119,6,.10);border-color:rgba(217,119,6,.28);color:#D97706}
.report-card-accent{border-top-color:var(--tri-orange)}
.report-card-accent .report-card-icon{background:var(--tri-orange-dim);border-color:rgba(196,98,42,.28);color:var(--tri-orange)}

/* ── 43 · STOCK (Business OS) ─────────────────────────────────── */
#stockBody td:nth-child(2){font-family:var(--mono);font-size:11px}
#stockBody td:nth-child(5){font-weight:700;font-size:14px}
#panelStock .btn-primary{box-shadow:var(--shadow-orange)}

/* ── 50 · REVIEWS (Admin) ─────────────────────────────────────── */
/* Filter bars, consistent fields on both panels. Fill, border and radius come
   from the shared field system in section 02, this only sets the type and the
   fixed height a filter row needs. It used to restate `background`, and being
   later in the file that shorthand quietly undid both the new fill and the
   select chevron here. */
.filter-bar select,.filter-bar input{
  font-family:var(--sans);font-size:12px;height:36px;
}

/* Review text, roomier column, controlled line rhythm */
#reviewsBody td:nth-child(5){
  min-width:260px;max-width:340px;
  font-size:12px;line-height:1.5;color:var(--text-secondary);
}

/* Rating stars, gold, slightly larger */
#reviewsBody td:nth-child(4){color:#EAB308!important;font-size:16px!important}

/* Verified tick, a proper chip, not a raw checkmark */
#reviewsBody td:nth-child(7) span{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(16,185,129,.14);font-size:12px;
}

/* Status column, pill system (hooks on the JS-emitted inline colors):
   Approved filled green · Pending filled amber · Flagged outline red ·
   Rejected filled grey */
#reviewsBody td:nth-child(9) span{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;
}
#reviewsBody td:nth-child(9) span[style*="#15803D"]{background:#15803D;color:#fff!important}
#reviewsBody td:nth-child(9) span[style*="#D97706"]{background:#D97706;color:#fff!important}
#reviewsBody td:nth-child(9) span[style*="#9333EA"]{
  background:transparent;color:var(--status-delayed)!important;
  border:1px solid var(--status-delayed);
}
#reviewsBody td:nth-child(9) span[style*="#B91C1C"]{background:#6B7280;color:#fff!important}

/* Action buttons, one consistent 28px icon-button group */
#reviewsBody td:last-child{white-space:nowrap}
#reviewsBody td:last-child .btn-secondary{
  min-width:28px;height:28px;padding:0 7px;margin-right:4px;
  border-radius:6px;font-size:12px;letter-spacing:0;text-transform:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border-c);
}
#reviewsBody td:last-child .btn-secondary:hover{
  border-color:var(--border-strong);transform:none;
}
#reviewsBody td:last-child .btn-secondary[style*="#15803D"]:hover{background:rgba(21,128,61,.12);border-color:#15803D}
#reviewsBody td:last-child .btn-secondary[style*="#B91C1C"]:hover{background:rgba(185,28,28,.10);border-color:#B91C1C}
#reviewsBody td:last-child .btn-secondary[style*="#9333EA"]:hover{background:rgba(147,51,234,.10);border-color:#9333EA}

/* ── 51 · CUSTOMERS (Admin) ───────────────────────────────────── */
/* Member ID, compact mono badge */
#customersBody td:first-child span{
  font-size:11px!important;border-radius:4px!important;
  letter-spacing:.04em!important;
}

/* Email, warms to orange with the row (rows open the user modal) */
#customersBody td:nth-child(3){transition:color .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1))}
#customersBody tr:hover td:nth-child(3){color:var(--tri-orange)}

/* aka nickname, one step smaller than the name */
#customersBody .td-name div{font-size:11px!important;margin-top:2px}

/* Disabled pill, soft red in light mode (dark keeps its own contrast) */
html:not([data-theme="dark"]) #customersBody span[style*="#7f1d1d"],
html:not([data-theme="dark"]) #umBody span[style*="#7f1d1d"]{
  background:rgba(220,38,38,.13)!important;color:#DC2626!important;
}

/* Toolbar, consistent fields everywhere a panel header search/filter control
   sits in .p-actions (was scoped to #panelCustomers only, every other panel's
   toolbar input/select, Callbacks, Messages, Enquiries, Recycle Bin, Activity
   Log, Settings, kept its own shorter inline padding and 6px radius, a visibly
   shorter search box next to Customers' 36px one). One shared height/radius
   for every panel toolbar field now. */
.p-actions select,.p-actions input{
  border-radius:8px;height:36px;background:var(--surface-2);
  border:1px solid var(--border-c);padding:0 12px;
}
#panelCustomers .p-actions .btn-secondary{
  color:var(--tri-orange);border-color:rgba(196,98,42,.4);border-radius:8px;
}
#panelCustomers .p-actions .btn-secondary:hover{
  background:var(--tri-orange-dim);border-color:var(--tri-orange);color:var(--tri-orange);
}

/* ── 60 · MODALS + POPUPS, both panels ───────────────────────── */
/* Backdrop, one formula everywhere */
#orderModal,#userModal,#reviewModal,#promoModal,#recordModal,
#orderDetailModal,#editSaleModal,#recycleBinModal,#customerModal,
#storyModal,#filamentLowStockModal,#openOrdersDrawer{
  background:rgba(0,0,0,.40)!important;
  backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;
}

/* Container, glass card */
#orderModal>div,#userModal>div,#reviewModal>div,#promoModal>div,#recordModal>div,
#orderDetailModal>div,#editSaleModal>div,#recycleBinModal>div,#customerModal>div,
#storyModal>div,#filamentLowStockModal>div,#openOrdersDrawer>div{
  background:rgba(255,255,255,.95)!important;
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px!important;
  box-shadow:var(--shadow-lg)!important;
}
html[data-theme="dark"] #orderModal>div,html[data-theme="dark"] #userModal>div,
html[data-theme="dark"] #reviewModal>div,html[data-theme="dark"] #promoModal>div,
html[data-theme="dark"] #recordModal>div,html[data-theme="dark"] #orderDetailModal>div,
html[data-theme="dark"] #editSaleModal>div,html[data-theme="dark"] #recycleBinModal>div,
html[data-theme="dark"] #customerModal>div,
html[data-theme="dark"] #storyModal>div,html[data-theme="dark"] #filamentLowStockModal>div,
html[data-theme="dark"] #openOrdersDrawer>div{
  background:rgba(22,22,20,.92)!important;
  border:1px solid rgba(255,255,255,.08);
}

/* Order-modal header (A5), sticky, calm, nav buttons on the system */
#omHeader{
  background:transparent;border-bottom:1px solid var(--border-c);
  padding:16px 24px;border-radius:16px 16px 0 0;
}
.om-nav-btn{border-radius:8px}
.om-nav-btn:hover:not([disabled]){
  background:var(--tri-orange-dim);border-color:rgba(196,98,42,.35);
  color:var(--tri-orange);box-shadow:none;
}

/* Notification dropdown + global search results, floating glass */
#notifDropdown,#globalSearchResults,#custSuggestBox{
  border-radius:12px!important;border:1px solid var(--border-c)!important;
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:var(--shadow-lg)!important;
}
html[data-theme="dark"] #notifDropdown,
html[data-theme="dark"] #globalSearchResults,
html[data-theme="dark"] #custSuggestBox{
  background:rgba(22,22,20,.92)!important;
  border-color:rgba(255,255,255,.08)!important;
}
/* Fixed 290px dropdowns get tight on narrow phones, self-clamp to
   whichever is smaller, no breakpoint needed */
#notifDropdown,#globalSearchResults,#bizSearchResults{
  width:min(290px,calc(100vw - 32px))!important;
}
@media(max-width:480px){
  #notifDropdown,#globalSearchResults,#bizSearchResults{
    right:16px!important;left:auto!important;
  }
}

/* Toasts join the glass family */
#toast,.toast{
  border-radius:10px;box-shadow:var(--shadow-lg);
  background:rgba(255,255,255,.92);
}
html[data-theme="dark"] #toast,html[data-theme="dark"] .toast{background:rgba(22,22,20,.92)}

/* ── 70 · BRAND FONT + DARK-MODE RECONCILIATION ───────────────── */
@font-face{
  font-family:"Glorida";
  src:url("/assets/fonts/Glorida.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
.top-logo,.biz-tb-brand,.sb-title{
  font-family:"Glorida",var(--sans),sans-serif;
}
.biz-tb-brand span{font-family:var(--sans)}

/* Sidebar icon tints, one step brighter on dark backgrounds */
html[data-theme="dark"] .admin-body .sidebar .tab .tab-icon,
html[data-theme="dark"] .shell .sidebar .tab .tab-icon{color:#8B9BB0}
html[data-theme="dark"] .admin-body .sidebar-section:nth-of-type(2) ~ .tab .tab-icon{color:#F0A64A}
html[data-theme="dark"] .admin-body .sidebar-section:nth-of-type(3) ~ .tab .tab-icon{color:#38BDF8}
html[data-theme="dark"] .admin-body .sidebar-section:nth-of-type(4) ~ .tab .tab-icon{color:#4ADE80}
html[data-theme="dark"] .admin-body .sidebar-section:nth-of-type(5) ~ .tab .tab-icon{color:#9CA3AF}
html[data-theme="dark"] .shell .sidebar .sidebar-section:nth-of-type(3) ~ .tab .tab-icon{color:#4ADE80}
html[data-theme="dark"] .shell .sidebar .sidebar-section:nth-of-type(4) ~ .tab .tab-icon{color:#F0A64A}
html[data-theme="dark"] .shell .sidebar .sidebar-section:nth-of-type(5) ~ .tab .tab-icon{color:#A78BFA}
html[data-theme="dark"] .sidebar .tab.active .tab-icon,
html[data-theme="dark"] .sidebar .tab:hover:not(.active) .tab-icon{color:var(--tri-orange)}

/* Inputs sit a step above the card surface in dark mode. That step now comes
   from the --field-bg token (a light film over whatever card it sits on, so it
   works on --surface and --surface-2 alike), which the shared field rules
   already apply. Only the controls outside that system are listed here. */
html[data-theme="dark"] .iq-edit-input,
html[data-theme="dark"] .mapping-row select{background:var(--surface-3)}

/* Chip + hover states that need a visible step on dark surfaces */
html[data-theme="dark"] .qchip:hover{background:#3D3B38;border-color:#4A4844}
html[data-theme="dark"] .kpi-card{border-top-color:#3D3B38}

/* Filled review pills, darker fills so white text keeps contrast */
html[data-theme="dark"] #reviewsBody td:nth-child(9) span[style*="#15803D"]{background:#166534}
html[data-theme="dark"] #reviewsBody td:nth-child(9) span[style*="#D97706"]{background:#B45309}
html[data-theme="dark"] #reviewsBody td:nth-child(9) span[style*="#B91C1C"]{background:#4B5563}

/* Reviews stars, softer gold on dark */
html[data-theme="dark"] #reviewsBody td:nth-child(4){color:#FACC15!important}

/* ── 80 · MOBILE DENSITY + TOUCH TARGETS (both panels) ────────────
   Desktop-tuned 20px card padding and small notif rows never got a
   mobile pass, this reclaims width/height on a 375px screen and
   brings interactive rows closer to a comfortable tap size. */
@media(max-width:768px){
  .qa-card,.kpi-card,.dash-widget,.gst-card{padding:14px}
  .notif-item{padding:12px 10px}
  .notif-item .notif-text{font-size:13px}
}

/* ── 60 · IN-APP DIALOGS ────────────────────────────────────────
   Styling for bizConfirm/bizPrompt/bizAlert/bizForm (js/admin-dialog.js), the
   replacement for the browser's own confirm/prompt/alert in both admin panels.
   Lives here because admin.html and admin-biz.html both already load this file.
   Buttons carry their own classes rather than reusing .btn-primary/.btn-ghost,
   so the component looks identical in both panels regardless of what each one
   does to its own button styles. */
.biz-dlg-ov{
  position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(16,22,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .16s linear;
}
.biz-dlg-ov.show{opacity:1}
.biz-dlg{
  width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--bg-1);border:1px solid var(--border-h);border-radius:14px;padding:20px 22px 18px;
  box-shadow:0 18px 48px rgba(16,32,24,.22),0 3px 10px rgba(16,32,24,.10);
  transform:translateY(10px) scale(.98);transition:transform .18s cubic-bezier(.34,1.3,.64,1);
}
.biz-dlg-ov.show .biz-dlg{transform:translateY(0) scale(1)}
.biz-dlg-title{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.01em}
.biz-dlg-body p{font-size:12.5px;line-height:1.55;color:var(--text-2);margin:0 0 8px}
.biz-dlg-body p:last-child{margin-bottom:0}
.biz-dlg-fields{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.biz-dlg-field{display:block}
.biz-dlg-field>span{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.biz-dlg-field input,.biz-dlg-field textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;
  padding:9px 11px;font-family:inherit;font-size:13px;color:var(--text);resize:vertical;
}
.biz-dlg-field input:focus,.biz-dlg-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.biz-dlg-invalid{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-bg)!important}
.biz-dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.biz-dlg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:9px 16px;
  border-radius:8px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;
  background:var(--bg-2);color:var(--text-2);border:1px solid var(--border);transition:var(--m-tr-press);
}
.biz-dlg-btn:hover{border-color:var(--border-h);color:var(--text)}
.biz-dlg-btn-primary{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(196,98,42,.22)}
.biz-dlg-btn-primary:hover{background:var(--accent-h);color:#fff;border-color:transparent}
.biz-dlg-btn-danger{background:var(--red);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(185,28,28,.22)}
.biz-dlg-btn-danger:hover{filter:brightness(1.07);color:#fff;border-color:transparent}
/* Key hint inside each button. Printed rather than left as folklore: Enter and Esc
   already worked, nobody knew. Sized down and dimmed so it reads as an annotation on
   the label, never as part of it. */
.biz-dlg-kbd{
  font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:1;letter-spacing:.02em;
  padding:3px 5px;border-radius:4px;margin-left:2px;
  background:rgba(0,0,0,.10);border:1px solid rgba(0,0,0,.08);color:inherit;opacity:.62;
}
.biz-dlg-btn-primary .biz-dlg-kbd,.biz-dlg-btn-danger .biz-dlg-kbd{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.22);opacity:.85}
html[data-theme="dark"] .biz-dlg-btn .biz-dlg-kbd{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .biz-dlg-btn-primary .biz-dlg-kbd,html[data-theme="dark"] .biz-dlg-btn-danger .biz-dlg-kbd{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.22)}
/* A pointer user gets no value from the chips and they crowd a narrow sheet. */
@media(hover:none),(max-width:640px){ .biz-dlg-kbd{display:none} }
body.biz-dlg-open{overflow:hidden}
/* Thumb-reachable on a phone: sheet from the bottom, full-width buttons. */
@media(max-width:640px){
  .biz-dlg-ov{align-items:flex-end;padding:0}
  .biz-dlg{max-width:none;border-radius:16px 16px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(24px)}
  .biz-dlg-actions{flex-direction:column-reverse}
  .biz-dlg-btn{width:100%;padding:13px 16px;font-size:13.5px}
}

/* ══ §24 Back-to-top ═══════════════════════════════════════════════════════
   Injected by js/admin-scrolltop.js on both admin.html and admin-biz.html.
   Hidden until you are 400px down, so it never sits over a page you have not
   scrolled. */
.ta-scrolltop{
  position:fixed;right:20px;bottom:20px;z-index:170;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-1,#fff);color:var(--text-2,#444);
  border:1px solid var(--border,rgba(0,0,0,.12));
  box-shadow:0 4px 14px rgba(16,32,24,.14);
  cursor:pointer;padding:0;
  /* Not just hidden: also non-interactive, or it would swallow clicks meant for
     whatever is underneath it at the top of the page. */
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .18s linear,transform .18s var(--m-e-release,cubic-bezier(.16,1.1,.3,1)),visibility .18s var(--m-e-glass,cubic-bezier(.32,.72,.28,1)),background .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1)),color .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1)),border-color .15s var(--m-e-glass,cubic-bezier(.32,.72,.28,1));
}
.ta-scrolltop.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.ta-scrolltop:hover{background:var(--accent,#C4622A);border-color:var(--accent,#C4622A);color:#fff}
.ta-scrolltop:focus-visible{outline:2px solid var(--accent,#C4622A);outline-offset:2px}
.ta-scrolltop:active{transform:translateY(1px)}
/* Add Order pins an action bar to the bottom of the viewport; clear it rather
   than covering the Save button. --ta-bar-h is set from the bar's real height. */
.ta-scrolltop.above-bar{bottom:calc(var(--ta-bar-h,76px) + 16px)}
@media(max-width:768px){
  .ta-scrolltop{right:14px;bottom:14px;width:46px;height:46px}
  .ta-scrolltop.above-bar{bottom:calc(var(--ta-bar-h,76px) + 12px + env(safe-area-inset-bottom,0px))}
}

/* ══ §25 Mobile blur cost reduction ══════════════════════════════════════
   Same rationale as shared.css: mobile GPUs recomposite backdrop-filter far
   more expensively than desktop, and the admin panels are dense with glass
   surfaces (cards, dropdowns, modals) rendered inside large scrollable
   tables, which is exactly the combination that made admin feel heavy on
   phones. Every backdrop-filter consumer in this file is re-targeted here
   with a lighter blur, matching selectors and !important flags 1:1 so this
   always wins by source order without fighting specificity. */
@media(max-width:768px){
  .glass,
  #globalSearchResults,#bizSearchResults,
  html[data-theme="dark"] #globalSearchResults,html[data-theme="dark"] #bizSearchResults,
  .biz-tb-dropdown,html[data-theme="dark"] .biz-tb-dropdown,
  #notifDropdown,#custSuggestBox,
  html[data-theme="dark"] #notifDropdown,html[data-theme="dark"] #custSuggestBox{
    backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);
  }
  #openKpi .kpi{
    backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  }
  #orderModal,#userModal,#reviewModal,#promoModal,#recordModal,
  #orderDetailModal,#editSaleModal,#recycleBinModal,#customerModal,
  #storyModal,#filamentLowStockModal,#openOrdersDrawer,
  .cmdk-overlay,.biz-dlg-ov{
    backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important;
  }
  #orderModal>div,#userModal>div,#reviewModal>div,#promoModal>div,#recordModal>div,
  #orderDetailModal>div,#editSaleModal>div,#recycleBinModal>div,#customerModal>div,
  #storyModal>div,#filamentLowStockModal>div,#openOrdersDrawer>div,
  .cmdk-box{
    backdrop-filter:blur(10px) saturate(1.2)!important;-webkit-backdrop-filter:blur(10px) saturate(1.2)!important;
  }
}
@media(prefers-reduced-motion:reduce){ .ta-scrolltop{transition:opacity .18s linear,visibility .18s var(--m-e-glass,cubic-bezier(.32,.72,.28,1))} }