/* ═══════════════════════════════════════════════════════════════
   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 */
  --akar-charcoal:#0F0F0D;
  --surface:#FFFFFF;
  --surface-2:#F8F7F5;
  --surface-3:#F0EDE8;
  --border-c:#E8E4DE;
  --border-strong:#D4CFC8;

  /* Text */
  --text-primary:#1A1916;
  --text-secondary:#6B6560;
  --text-muted:#9C9690;

  /* 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 */
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 12px 32px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.06);
  --shadow-orange:0 4px 16px rgba(196,98,42,.20);
}
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;
  --text-secondary:#A8A29B;
  --text-muted:#6F6A63;

  /* 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 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,.55),0 4px 8px rgba(0,0,0,.35);
  --shadow-orange:0 4px 16px rgba(217,119,66,.28);
}

/* ── 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 ease}
tr:hover td{background:var(--tri-orange-light)!important}
tbody tr:hover{background:var(--tri-orange-light)}

/* Focus ring, one system for every input in both panels */
input:focus,select:focus,textarea:focus{
  border-color:var(--tri-orange)!important;
  box-shadow:0 0 0 3px var(--tri-orange-dim)!important;
}

/* 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 ease}

/* 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 ease,color .15s ease;
  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 ease,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:1px 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;color:var(--text-muted);
  white-space:nowrap;flex-shrink:0;
}
@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 ease;
}
.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 ease;
}
.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}}

/* ── 30 · ADMIN DASHBOARD ─────────────────────────────────────── */
.dash-widget{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:12px;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:12px;padding:20px;
  border-top:3px solid var(--border-strong);
  transition:transform .15s ease,box-shadow .15s ease;
}
.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 ease;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:12px;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 */
.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}

/* Inputs */
.form-group label{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--text-secondary);
}
.form-group input,.form-group select,.form-group textarea{
  background:var(--surface-2);border:1px solid var(--border-c);
  border-radius:8px;padding:10px 14px;
}

/* Totals strip + collapsible shipping read as cards too */
.calc-row{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:12px;padding:16px 20px;box-shadow:var(--shadow-sm);
}
#panelQuickadd details{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:12px;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:12px;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) */
.badge-pending,.badge-select.badge-pending{background:rgba(139,92,246,.12);color:var(--status-pending)}
.badge-order_received,.badge-select.badge-order_received{background:rgba(59,130,246,.12);color:var(--status-order-received)}
.badge-processing,.badge-select.badge-processing{background:rgba(245,158,11,.14);color:var(--status-processing)}
.badge-printing,.badge-select.badge-printing{background:rgba(249,115,22,.14);color:var(--status-printing)}
.badge-packed,.badge-select.badge-packed{background:rgba(6,182,212,.13);color:var(--status-packed)}
.badge-dispatched,.badge-select.badge-dispatched{background:rgba(99,102,241,.13);color:var(--status-dispatched)}
.badge-delivered,.badge-select.badge-delivered{background:rgba(16,185,129,.13);color:var(--status-delivered)}
.badge-completed,.badge-select.badge-completed{background:rgba(5,150,105,.13);color:var(--status-completed)}
.badge-delayed,.badge-select.badge-delayed{background:rgba(239,68,68,.12);color:var(--status-delayed)}
.badge-cancelled,.badge-select.badge-cancelled{background:rgba(107,114,128,.14);color:var(--status-cancelled)}
.badge-returned,.badge-select.badge-returned{background: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 ease}
#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)}

/* ── 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 */
.filter-bar select,.filter-bar input{
  font-family:var(--sans);font-size:12px;
  background:var(--surface-2);border:1px solid var(--border-c);
  border-radius:8px;padding:8px 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 ease}
#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 + orange outline Export CSV */
#panelCustomers .p-actions select,#panelCustomers .p-actions input{
  border-radius:8px;height:36px;background:var(--surface-2);
}
#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{
  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{
  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{
  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 */
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .filter-bar select,
html[data-theme="dark"] .filter-bar input{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}
}