/* Gallery identity (2026-07-21): FigiHome brand black & white. Cool white ground,
   hairline rules, square corners, Helvetica, one red "sold dot" accent (#c8381f).
   Money keeps semantic green/red. Previous cream+gold theme: git history. */
:root{ --bg:#eeeeea; --ink:#141516; --muted:#70726e; --line:#e3e3de;
  --red:#c8381f; --pos:#2f7d46; --hoverbg:#ececea; --rowline:#eeeeea;
  --sans:'Helvetica Neue',Helvetica,-apple-system,system-ui,sans-serif;
  /* Bold refresh (2026-08-06): elevation + radius scale + dark sidebar.
     Still monochrome gallery — one red accent, semantic money greens/reds. */
  --r-lg:14px; --r-md:10px; --r-sm:8px; --r-pill:999px;
  --card:#fff; --card-line:#e9e9e4;
  --elev-1:0 1px 2px rgba(20,21,22,.05), 0 2px 6px rgba(20,21,22,.05);
  --elev-2:0 2px 8px rgba(20,21,22,.05), 0 12px 28px rgba(20,21,22,.07);
  --elev-hi:0 6px 16px rgba(20,21,22,.08), 0 22px 48px rgba(20,21,22,.12);
  --ease:cubic-bezier(.22,1,.36,1);
  /* Dark charcoal sidebar */
  --side-bg:#17181a; --side-fg:#f4f4f2; --side-muted:#9a9ca1;
  --side-hover:#232427; --side-active:#2b2d31; --side-line:#2a2c2f; }
*{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* class selectors with display:flex/grid must not defeat the hidden attribute */
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-variant-numeric:tabular-nums; /* digits align app-wide; no jiggle on updates */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* Keyboard-focus ring (mouse clicks stay clean via :focus-visible) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.search:focus-visible, .notebox:focus-visible, #dispatch-input:focus-visible,
.cb-form input:focus-visible, .cb-form select:focus-visible{ outline-offset:0; border-color:var(--ink); }

/* Shell: sidebar + content */
#shell{ display:flex; min-height:100vh; align-items:flex-start; }
#sidebar{ width:232px; flex:none; background:var(--side-bg); color:var(--side-fg); border-right:none;
  padding:22px 14px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:2; }
.sidebar-brand{ text-align:center; margin-bottom:26px; padding:4px 6px 0; }
/* Black wordmark on a white square → flip to a clean white wordmark on the dark rail */
.sidebar-logo{ height:74px; max-width:100%; filter:invert(1) brightness(1.08); mix-blend-mode:screen; }
#sidebar-nav{ display:flex; flex-direction:column; gap:3px; }
.sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--side-line); }
.me-label{ display:block; font-size:11px; color:var(--side-muted); text-transform:capitalize; padding:0 12px 8px; }
.switch-acct{ display:flex; align-items:center; gap:10px; font-family:var(--sans); font-size:13px; color:var(--side-muted); text-decoration:none; padding:10px 12px; border-radius:var(--r-sm);
  transition:background .18s var(--ease), color .18s var(--ease); }
.switch-acct .ni{ width:15px; height:15px; }
.switch-acct:hover{ background:var(--side-hover); color:var(--side-fg); }
.nav-item{ display:flex; align-items:center; gap:11px; font-family:var(--sans); font-size:13px;
  padding:10px 12px; background:none; border:none; border-radius:var(--r-sm); color:var(--side-muted); cursor:pointer; text-align:left;
  transition:background .18s var(--ease), color .18s var(--ease); }
.nav-item:hover:not(.on){ background:var(--side-hover); color:var(--side-fg); }
.nav-item.on{ color:#fff; font-weight:700; background:var(--side-active); }
.nav-item .nav-icon .ni{ transition:transform .18s var(--ease); }
.nav-item:hover .nav-icon .ni{ transform:scale(1.08); }
.nav-icon{ font-size:15px; line-height:1; }
#content{ flex:1; min-width:0; padding:28px 32px; max-width:1480px; margin:0 auto; } /* fills a 16" screen; centers in the leftover on ultra-wide */

@media(max-width:760px){
  #shell{ flex-direction:column; }
  /* Stack: logo on top, tab icons in a centered wrapping row below it. The
     account button is lifted out of the column flow into the top-right corner
     so nothing below the icons can pull them off-centre. */
  #sidebar{ width:100%; height:auto; position:relative; border-right:none; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:center; gap:8px; padding:12px 12px; }
  .sidebar-brand{ margin-bottom:0; }
  .sidebar-logo{ height:40px; }
  #sidebar-nav{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:2px 4px; width:100%; }
  .nav-item{ border-left:none; border-bottom:2px solid transparent; padding:8px 11px; }
  .nav-item.on{ border-bottom-color:var(--red); }
  .nav-item span:not(.nav-icon){ display:none; }
  .sidebar-foot{ position:absolute; top:10px; right:10px; margin:0; padding:0; border-top:none; }
  .me-label{ display:none; }
  .switch-acct{ padding:8px 9px; border:1px solid var(--line); border-radius:6px; border-left:1px solid var(--line); color:var(--muted); }
  .switch-acct span{ display:none; }
  #content{ padding:18px 16px; }
  .searchrow{ flex-wrap:wrap; }
  /* Tables keep ALL their columns — the 700px zoom-out viewport gives them room,
     so nothing is hidden and nothing is cut off. */
}

/* View header (per-tab title + freshness/refresh) */
.view-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.view-title{ font-family:var(--sans); font-size:22px; font-weight:700; letter-spacing:-.02em; text-transform:uppercase; margin:0; }
.view-actions{ display:flex; align-items:center; gap:10px; }
.freshness{ font-family:var(--sans); font-size:11px; padding:5px 11px; border:1px solid var(--line); background:#fff; }
.freshness.green{ color:var(--pos); border-color:currentColor; }
.freshness.amber{ color:#8a6d1f; border-color:currentColor; }
.freshness.red{ color:var(--red); border-color:currentColor; }
.refresh-btn{ font-family:var(--sans); font-size:11px; padding:6px 12px;
  border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; }
.refresh-btn:disabled{ opacity:.55; cursor:default; }

/* Stats: period tabs */
#tabs{ display:flex; gap:6px; margin-bottom:22px; font-family:var(--sans); flex-wrap:wrap; }
#cr-period-tabs{ display:flex; gap:6px; margin-bottom:18px; font-family:var(--sans); flex-wrap:wrap; }
.tab{ font-size:12px; padding:7px 16px; background:#fff; border:1px solid var(--line); color:var(--muted); cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.tab:hover:not(.on){ border-color:var(--ink); color:var(--ink); }
.tab.on{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; letter-spacing:.5px; }

/* Shared interaction feedback for chip/segment/pagination controls */
.chip, .seg-btn, .pg-arrow, .pg-num, .nav-item, .refresh-btn, .export{ transition:background .15s ease, color .15s ease, border-color .15s ease; }
.chip:hover:not(.on){ border-color:var(--ink); color:var(--ink); }
.seg-btn:hover:not(.on){ color:var(--ink); }
.pg-num:hover:not(.on), .pg-arrow:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.refresh-btn:hover:not(:disabled), .export:hover:not(:disabled){ background:#343536; }
.wa{ transition:background .15s ease, border-color .15s ease; }

.cols{ display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:760px){ .cols{ grid-template-columns:1fr; } }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:760px){ .cols2{ grid-template-columns:1fr; } }

.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.panel-head .lead-title{ margin:0; }
.seg{ display:inline-flex; background:#fff; border:1px solid var(--line); padding:2px; }
.seg-btn{ font-family:var(--sans); font-size:10px; letter-spacing:.4px; text-transform:uppercase;
  padding:4px 9px; border:none; background:none; color:var(--muted); cursor:pointer; }
.seg-btn.on{ background:var(--ink); color:#fff; font-weight:600; }

/* Cards: white with hairline borders, square corners, no soft shadows */
.panel{ background:#fff; border:1px solid var(--line); border-radius:2px; padding:16px 16px 8px; }
.lead-title{ font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; }

.row{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--rowline); }
.row:last-child{ border-bottom:none; }
.rk{ width:16px; font-size:15px; font-weight:700; }
.rk.gold{ color:var(--red); }
.thumb{ width:38px; height:38px; border-radius:2px; flex:none; object-fit:cover; border:1px solid var(--line); background:#ececea; }
/* Pop-out image preview on the Top Products leaderboard thumbnails (same as Shopping). */
#panel-product .thumb{ transform-origin:center left; cursor:zoom-in;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s var(--ease); }
#panel-product .row:hover .thumb{ transform:scale(3.6); box-shadow:var(--elev-2); position:relative; z-index:7; }
.nm{ flex:1; }
.nm-name{ font-size:14px; line-height:1.1; }
.bar{ height:4px; background:#e7e7e3; margin-top:5px; overflow:hidden; width:90%; }
.bar > i{ display:block; height:100%; width:0; background:var(--ink); }
.vals{ text-align:right; font-family:var(--sans); }
.egp{ font-size:13px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.egp small{ font-weight:400; color:var(--muted); font-size:10px; }
.pct{ font-size:11px; color:var(--pos); margin-top:2px; white-space:nowrap; }
.soon-box,.empty{ text-align:center; padding:26px 8px; color:#9a9c98; font-family:var(--sans); font-size:12px; }

/* Meta Ads drill-down: Campaign > Ad Set > Ad */
.ad-node{ border:1px solid var(--line); border-radius:2px; margin-bottom:8px; background:#fff; overflow:hidden; }
.ad-node-head{ display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer; }
.ad-leaf .ad-node-head{ cursor:default; }
.ad-node-tog{ font-size:10px; color:var(--muted); transition:transform .15s ease; flex:none; width:10px; }
.ad-node.open > .ad-node-head .ad-node-tog{ transform:rotate(90deg); }
.ad-node-name{ flex:1; font-family:var(--sans); font-size:14px; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-node-stats{ font-family:var(--sans); font-size:12px; color:var(--muted); white-space:nowrap; flex:none; font-variant-numeric:tabular-nums; }
.ad-node-stats b{ color:var(--ink); }
.ad-node-head:hover{ background:#f7f7f4; }
.ad-node-kids{ padding:4px 8px 8px 22px; background:#f7f7f4; }
.ad-camp{ border-color:#cfcfc9; }
.ad-camp > .ad-node-head .ad-node-name{ font-weight:700; }
.ad-set{ border-color:var(--line); }
.ad-set > .ad-node-head .ad-node-name{ font-weight:600; font-size:13px; }
.ad-leaf{ border-style:dashed; }
.ad-leaf .ad-node-name{ font-size:13px; }
.ad-leaf-detail{ font-family:var(--sans); font-size:11px; color:var(--muted); padding:0 13px 10px; }

/* Meta Ads detail grid — every metric */
.ad-details{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:14px; }
.ad-stat{ background:#fff; border:1px solid var(--line); border-radius:2px; padding:11px 13px; }
.ad-stat-v{ font-family:var(--sans); font-size:18px; font-weight:700; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums; }
.ad-stat-l{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.4px; }
.ad-stat-h{ font-family:var(--sans); font-size:10px; color:#9a9c98; margin-top:3px; }

/* Slim "coming soon" strip */
.ad-strip{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px; padding:12px 16px;
  background:#fff; border:1px dashed #cfcfc9; border-radius:2px; }
.ad-strip-t{ font-family:var(--sans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.ad-strip-s{ font-family:var(--sans); font-size:12px; color:#9a9c98; }

.kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:18px; }
@media(max-width:760px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:2px; padding:14px 16px; }
.kpi-label{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.kpi-value{ font-size:24px; font-weight:700; margin-top:6px; line-height:1; font-variant-numeric:tabular-nums; }
.kpi-value small{ font-size:11px; font-weight:400; color:var(--muted); }
.kpi-sub{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:6px; }
.kpi-delta{ display:inline-block; margin-top:8px; font-family:var(--sans); font-size:11px; padding:2px 8px; border:1px solid currentColor; }
.kpi-delta.up{ color:var(--pos); }
.kpi-delta.down{ color:var(--red); }
.kpi-delta.flat{ color:var(--muted); }
.kpi-delta.none{ display:none; }

/* Revenue is the north-star metric: white card, 2px ink frame, red "sold" dot */
.kpi.hero{ background:#fff; border:2px solid var(--ink); }
.kpi.hero .kpi-label::before{ content:'●'; color:var(--red); margin-right:6px; font-size:8px; vertical-align:2px; }
.kpi.hero .kpi-value{ font-size:27px; }

/* Daily trend: bar chart */
.trend-panel{ margin-bottom:18px; }
.t-plot{ position:relative; touch-action:pan-y; }
.tb-bars{ position:relative; display:flex; align-items:flex-end; gap:2px; height:210px; padding-top:14px; }
.tb-bar{ flex:1; min-width:2px; background:var(--ink); transition:height .7s cubic-bezier(.22,1,.36,1), background .1s ease; }
.tb-bar.last{ background:var(--red); }
.tb-bar.hot{ background:var(--red); }
.t-grid-h{ position:absolute; left:0; right:0; height:1px; background:#e7e7e3; pointer-events:none; }
.t-ylabel{ position:absolute; right:2px; transform:translateY(-50%); font-family:var(--sans); font-size:10px;
  color:#9a9c98; background:rgba(255,255,255,.8); padding:0 3px; pointer-events:none; z-index:1; }
.t-tip{ position:absolute; top:-2px; transform:translate(-50%,-100%); background:var(--ink); color:#fff;
  font-family:var(--sans); padding:6px 10px; white-space:nowrap; pointer-events:none;
  display:flex; flex-direction:column; gap:1px; z-index:2; }
.t-tip-d{ font-size:10px; color:#b9b9b5; letter-spacing:.3px; }
.t-tip-v{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; } .t-tip-v small{ font-weight:400; opacity:.6; font-size:10px; }
.t-axis{ display:flex; justify-content:space-between; margin-top:6px; font-family:var(--sans); font-size:10px; color:var(--muted); }
.t-axis span{ flex:1; }
.t-cap{ font-family:var(--sans); font-size:10px; color:var(--muted); margin-top:8px; text-align:right; letter-spacing:.3px; }

.dead-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.dead-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
.dead-page-info{ font-family:var(--sans); font-size:12px; color:var(--muted); }
.dead{ display:flex; align-items:center; gap:9px; padding:7px; border:1px solid var(--line); border-radius:2px; }
.dead .thumb{ width:30px; height:30px; }
.dead-link{ text-decoration:none; color:inherit; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.dead-link:hover{ border-color:var(--ink); }
.dead-name{ font-size:12px; line-height:1.2; }
.dead-sub{ display:block; font-family:var(--sans); font-size:10px; color:var(--muted); margin-top:2px; }
#panel-restock{ display:grid; grid-template-columns:1fr; gap:8px; }
#panel-restock .dead.urgent{ border-color:var(--red); }
#panel-restock .dead.urgent .dead-sub{ color:var(--red); }
/* Same pop-out image preview as the Shopping tab, for the Restock / Not-selling /
   Newly-out-of-stock product cards. */
#stats-view .dead .thumb{ transform-origin:center left; cursor:zoom-in;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s var(--ease); }
#stats-view .dead:hover .thumb{ transform:scale(3.6); box-shadow:var(--elev-2); position:relative; z-index:7; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.kpi, .panel, .trend-panel{ animation:fadeUp .5s cubic-bezier(.22,1,.36,1) backwards; }
.kpis .kpi:nth-child(2){ animation-delay:.05s; }
.kpis .kpi:nth-child(3){ animation-delay:.10s; }
.kpis .kpi:nth-child(4){ animation-delay:.15s; }
.kpis .kpi:nth-child(5){ animation-delay:.20s; }
.kpi-delta .g{ display:inline-block; }
@media (prefers-reduced-motion: reduce){
  .kpi,.panel,.trend-panel{ animation:none !important; }
  .bar > i, .tb-bar{ transition:none !important; }
}

/* Customer-health strip (Customers tab) */
.cust-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
@media(max-width:760px){ .cust-metrics{ grid-template-columns:repeat(2,1fr); } }
.cm-card{ background:#fff; border:1px solid var(--line); border-radius:2px; padding:14px 16px; }
.cm-label{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.cm-value{ font-size:24px; font-weight:700; margin-top:6px; line-height:1; font-variant-numeric:tabular-nums; }
.cm-value small{ font-size:13px; font-weight:400; color:var(--muted); }
.cm-sub{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:7px; }
.cm-card.cm-hero{ background:#fff; border:2px solid var(--ink); }
.cm-hero .cm-label::before{ content:'●'; color:var(--red); margin-right:6px; font-size:8px; vertical-align:2px; }
.cm-hero .cm-value{ font-size:28px; }

/* Search / filters (Customers + Orders) */
.searchrow{ display:flex; gap:8px; margin-bottom:14px; }
.search-mode{ flex:none; font-family:var(--sans); font-size:13px; padding:0 12px; border:1px solid var(--line);
  border-radius:2px; background:#fff; color:var(--ink); cursor:pointer; }
.search{ flex:1; min-width:0; font-family:var(--sans); font-size:15px; padding:13px 16px; border:1px solid var(--line);
  border-radius:2px; background:#fff; }
#filters, #o-filters{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.chip{ font-family:var(--sans); font-size:12px; padding:7px 14px; background:#fff;
  border:1px solid var(--line); color:var(--muted); cursor:pointer; }
.chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
.chip.guide{ margin-left:auto; }
.guide-box{ font-family:var(--sans); font-size:12px; line-height:1.9; color:#4c4d4a; background:#fff;
  border:1px solid var(--line); border-radius:2px; padding:14px 16px; margin-bottom:14px; }

.bulkbar{ display:flex; align-items:center; justify-content:space-between; font-family:var(--sans); font-size:12px; color:var(--muted); margin-bottom:10px; }
.export{ font-family:var(--sans); font-size:12px; padding:8px 16px; border:1px solid var(--ink);
  background:var(--ink); color:#fff; cursor:pointer; }
.export:disabled{ opacity:.4; cursor:default; }

/* Data tables (Customers + Orders) */
/* Keep wide tables scrolling inside their own box so the page body never scrolls sideways on phones. */
.table-wrap{ overflow-x:auto; }
.table-wrap .dtable{ min-width:640px; }
.dtable{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); }
.dtable thead th{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:var(--muted); text-align:left; padding:12px 14px; border-bottom:1px solid var(--ink); }
.dtable tbody tr.drow{ cursor:pointer; }
.dtable tbody tr.drow:hover{ background:#f7f7f4; }
.dtable td{ padding:12px 14px; border-bottom:1px solid var(--rowline); font-size:13px; vertical-align:middle; font-family:var(--sans); }
.dtable tr:last-child td{ border-bottom:none; }
.col-check{ width:36px; }
.col-action{ width:44px; text-align:right; }
.col-main{ display:flex; align-items:center; gap:10px; }
.cname-n{ font-family:var(--sans); font-size:14px; } .cname-s{ font-size:11px; color:var(--muted); margin-top:2px; }
.badges{ display:flex; gap:5px; flex-wrap:wrap; }
.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:10px; padding:3px 10px 3px 8px; border:1px solid var(--line); background:none; color:var(--muted); }
.badge .gi, .chip .gi, .tag .gi{ width:12px; height:12px; flex:none; }
.badge.risky{ border-color:currentColor; color:var(--red); } .badge.vip{ border-color:currentColor; color:#8a6d1f; }
.badge.vvip{ background:var(--ink); color:#fff; border-color:var(--ink); }
.wa{ flex:none; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  line-height:1; padding:7px 9px; border-radius:2px; border:1px solid var(--line); background:#fff; color:var(--muted); }
.wa .gi{ width:16px; height:16px; }
.wa:hover{ background:#eaf6ec; border-color:#cfe6d4; color:var(--pos); }
.matched{ font-family:var(--sans); font-size:11px; padding:2px 8px; border:1px solid var(--ink); color:var(--ink); font-weight:600; white-space:nowrap; }

.drow-detail td{ background:#f7f7f4; padding:16px 14px; }
.detail{ font-family:var(--sans); font-size:12px; display:grid; gap:10px; }
.detail .stat{ color:#4c4d4a; } .detail .stat b{ color:var(--ink); }
.tagrow{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{ font-size:11px; padding:5px 11px; border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; }
.tag.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.notebox{ width:100%; font-family:var(--sans); font-size:12px; padding:8px 10px; border:1px solid var(--line); border-radius:2px; resize:vertical; }
.savestate{ font-size:11px; color:var(--muted); }

/* Status chips: outline style, semantic text colors */
.stchip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:10px; padding:3px 10px 3px 8px;
  border:1px solid currentColor; background:none; font-weight:600; white-space:nowrap; }
.stchip::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-pending{ color:#6f6a60; }
.st-out{ color:#1a56b8; }
.st-delivered{ color:#188038; }
.st-returned{ color:#c05c0a; }
.st-cancelled{ color:var(--red); }
.st-bosta{ color:#7b1fa2; }
.st-noanswer{ color:#c05c0a; }
.st-postponed{ color:#7b1fa2; }

/* Feedback sentiment chips (Feedback tab + Orders tab) */
.stchip.fb-positive{ color:#2f8a4e; }
.stchip.fb-neutral{ color:#8a6d1f; }
.stchip.fb-negative{ color:var(--red); }
.fb-mini{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  font-size:11px; vertical-align:middle; margin-left:4px; border:1px solid var(--line); }
.fb-mini.fb-positive{ border-color:#9ec7a8; } .fb-mini.fb-neutral{ border-color:#d3bd7d; } .fb-mini.fb-negative{ border-color:#dba49a; }
.fb-mini.bosta-warn{ border-color:#dbb28c; }

/* Feedback tab: donut + legend */
#fb-period-tabs{ display:flex; gap:6px; margin-bottom:18px; font-family:var(--sans); flex-wrap:wrap; }
.fb-donut-wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:6px 0 14px; }
.fb-donut{ flex:none; }
.fb-donut-num{ font-family:var(--sans); font-size:30px; font-weight:700; fill:var(--ink); }
.fb-donut-lbl{ font-family:var(--sans); font-size:10px; letter-spacing:.5px; fill:var(--muted); text-transform:uppercase; }
.fb-legend{ display:grid; gap:10px; flex:1; min-width:150px; }
.fb-leg{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:13px; }
.fb-dot{ width:11px; height:11px; flex:none; }
.fb-leg-l{ flex:1; } .fb-leg-v{ font-weight:600; color:#4c4d4a; }

/* Feedback tab: comments */
#fb-comments{ display:grid; gap:10px; }
.fb-comment{ border:1px solid var(--line); border-radius:2px; padding:11px 13px; }
.fb-c-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.fb-c-ord{ font-family:var(--sans); font-size:12px; color:#4c4d4a; }
.fb-c-date{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-left:auto; }
.fb-c-text{ font-family:var(--sans); font-size:14px; color:var(--ink); line-height:1.45; }

.timeline{ display:grid; gap:8px; }
.tl-row{ display:flex; align-items:center; gap:10px; padding-left:10px; border-left:2px solid var(--line); }
.tl-meta{ font-size:11px; color:var(--muted); }

.manual-status{ display:flex; align-items:center; gap:8px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--rowline); }
.manual-status .status-select{ font-family:var(--sans); font-size:12px; padding:6px 10px; border:1px solid var(--line); border-radius:2px; background:#fff; }
.manual-status .status-save{ font-family:var(--sans); font-size:12px; padding:6px 14px; border:1px solid var(--ink);
  background:var(--ink); color:#fff; cursor:pointer; }

/* Pagination */
.tfoot-bar{ display:flex; align-items:center; justify-content:space-between; margin-top:14px;
  font-family:var(--sans); font-size:12px; color:var(--muted); flex-wrap:wrap; gap:10px; }
.page-size select{ font-family:var(--sans); font-size:12px; border:1px solid var(--line); border-radius:2px; padding:4px 8px; margin:0 4px; }
.pagination{ display:flex; gap:4px; align-items:center; }
.pg-arrow,.pg-num{ font-family:var(--sans); font-size:12px; min-width:28px; height:28px; padding:0 6px;
  border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; }
.pg-num.on{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
.pg-arrow:disabled{ opacity:.4; cursor:default; }
.pg-ellipsis{ padding:0 4px; color:var(--muted); }

/* Courier portal */
#courier-app{ max-width:700px; margin:0 auto; padding:24px 20px 60px; }
.figi-top{ display:flex; flex-direction:column; align-items:center; text-align:center; margin:8px 0 28px; }
.figi-logo{ height:76px; max-width:100%; mix-blend-mode:multiply; }
.figi-sub{ font-family:var(--sans); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1.6px; color:var(--ink); margin-top:10px; }
#brand-tabs{ display:flex; justify-content:center; gap:8px; margin:0 0 14px; }
#brand-tabs .btab{ font-family:var(--sans); font-size:13px; padding:8px 22px; background:#fff;
  border:1px solid var(--line); color:var(--muted); cursor:pointer; border-radius:2px; }
#brand-tabs .btab.on{ background:var(--brand-accent,#141516); color:#fff; border-color:var(--brand-accent,#141516); font-weight:700; }
#courier-tabs{ display:flex; justify-content:center; gap:8px; margin-bottom:18px; }
#courier-tabs .tab{ font-family:var(--sans); font-size:13px; padding:9px 20px; background:#fff;
  border:1px solid var(--line); color:var(--muted); cursor:pointer; }
#courier-tabs .tab.on{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
#dispatch-input{ width:100%; font-family:var(--sans); font-size:16px; padding:14px; border:1px solid var(--line);
  border-radius:2px; resize:vertical; margin-bottom:10px; }
#courier-app .lead-title{ font-size:13px; letter-spacing:.4px; }

/* Running collection tally on the Status page — sticky so it stays visible while
   the driver scrolls their order list, and shows the total to hand over when done. */
.cr-totals{ position:sticky; top:0; z-index:5; display:flex; gap:10px; margin:0 0 16px;
  background:var(--ink); border-radius:2px; padding:12px 14px; }
.crt-item{ flex:1; display:flex; flex-direction:column; gap:3px; text-align:center; }
.crt-item + .crt-item{ border-right:1px solid rgba(255,255,255,.18); }
.crt-label{ font-family:var(--sans); font-size:12px; color:rgba(255,255,255,.72); }
.crt-val{ font-family:var(--sans); font-size:24px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.crt-val small{ font-size:12px; font-weight:400; color:rgba(255,255,255,.72); }

/* Customer-info blocks (bigger, block layout for on-the-road readability) */
.cb-count{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--pos); margin:6px 0 12px; }
.cblock{ background:#fff; border:1px solid var(--line); border-radius:2px; padding:16px; margin-bottom:14px; }
.cb-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.cb-ord{ font-family:var(--sans); font-weight:700; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; }
.cb-name{ font-family:var(--sans); font-size:18px; color:var(--ink); }
.cb-info{ display:flex; flex-direction:column; gap:8px; }
.phone-copy{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
  font-size:17px; font-weight:600; letter-spacing:.5px; padding:8px 14px; border:1px solid var(--line); border-radius:2px;
  background:var(--bg); color:var(--ink); cursor:pointer; }
.phone-copy:active{ background:#e3e3de; }
.phone-copy .pc-ico{ font-size:14px; opacity:.7; }
.cb-phone{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wa-btn{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:14px; font-weight:600;
  padding:8px 14px; border-radius:2px; background:#25d366; color:#fff; text-decoration:none; }
.wa-btn:active{ background:#1eb457; }
.cb-noloc{ font-family:var(--sans); font-size:13px; color:#9a9c98; }
.cb-addr{ font-family:var(--sans); font-size:14px; color:#4c4d4a; line-height:1.5; }
.cb-loc{ align-self:flex-start; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--red);
  text-decoration:none; padding:4px 0; }
.cb-form{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line); }
.cb-form label{ display:flex; flex-direction:column; gap:5px; font-family:var(--sans); font-size:12px; color:var(--muted); }
.cb-form-wide{ flex:1 1 100%; }

/* brand accent drives the courier sub-tabs, tally bar, and action accents —
   placed after the base rules above so it wins the cascade at equal specificity */
#courier-app .tab.on{ background:var(--brand-accent,#141516); border-color:var(--brand-accent,#141516); }
#courier-app .cr-totals{ background:var(--brand-accent,#141516); }
#courier-app .cb-loc{ color:var(--brand-accent,var(--red)); }
.cb-form select, .cb-form input{ font-family:var(--sans); font-size:15px; padding:10px 12px; border:1px solid var(--line);
  border-radius:2px; background:#fff; color:var(--ink); min-width:110px; }
.cb-form .price-input{ min-width:90px; }
.cb-form-wide input{ width:100%; box-sizing:border-box; }
.cb-form .status-submit{ padding:11px 22px; font-size:15px; }
.cb-form .savestate{ font-family:var(--sans); font-size:13px; color:var(--pos); align-self:center; }
#copy-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:#fff;
  font-family:var(--sans); font-size:14px; font-weight:600; padding:10px 20px; z-index:50; }

/* ============ Finance tab ============ */
.fin-picker{ display:flex; align-items:center; gap:6px; }
.fin-nav{ width:30px; height:30px; border:1px solid var(--line); background:#fff;
  font-size:18px; line-height:1; color:var(--ink); cursor:pointer; font-family:var(--sans); }
.fin-nav:hover:not(:disabled){ border-color:var(--ink); }
.fin-nav:disabled{ opacity:.35; cursor:default; }
.fin-month{ min-width:132px; text-align:center; font-family:var(--sans); font-size:13px; font-weight:600; }

.cm-card.cm-warn{ border-color:var(--red); }
.cm-warn .cm-label{ color:var(--red); }
.fin-net.pos{ color:var(--pos); } .fin-net.neg{ color:var(--red); }
.fin-cols{ grid-template-columns:1.15fr .85fr; }
@media(max-width:760px){ .fin-cols{ grid-template-columns:1fr; } }

/* P&L statement */
.pl-group{ margin-bottom:14px; }
.pl-head{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:4px;
  display:flex; justify-content:space-between; align-items:baseline; }
.pl-hint, .pl-note{ font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:10px;
  color:#9a9c98; font-weight:400; }
.pl-note{ margin-left:8px; font-style:italic; }
.pl-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px;
  border-bottom:1px solid var(--rowline); }
.pl-label{ font-size:15px; }
.pl-amt{ font-family:var(--sans); font-size:14px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pl-line.in .pl-amt{ color:var(--pos); }
.pl-line.out .pl-amt{ color:var(--muted); }
.pl-line.manual .pl-amt{ color:var(--red); }
.pl-line.manual.paid{ opacity:.55; }
.pl-line.manual.paid .pl-label{ text-decoration:line-through; }
.pl-check{ display:flex; align-items:center; gap:10px; cursor:pointer; margin:0; }
.exp-paid{ width:17px; height:17px; accent-color:var(--ink); cursor:pointer; flex:none; }
.pl-recur{ font-family:var(--sans); font-size:9px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); border:1px solid var(--line); padding:2px 6px; margin-left:8px; vertical-align:middle; }
.pl-empty{ font-family:var(--sans); font-size:12px; color:#9a9c98; padding:12px 2px; }
.pl-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:12px;
  padding-top:12px; border-top:2px solid var(--ink); font-family:var(--sans); font-weight:700; font-size:15px; }
.pl-total .fin-net{ font-size:19px; }
.pl-topay{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--sans);
  font-size:12px; color:var(--red); }

/* Manual-cost manager */
.exp-form{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center; }
.exp-in{ font-family:var(--sans); font-size:13px; padding:8px 10px; border:1px solid var(--line);
  border-radius:2px; background:#fff; color:var(--ink); }
.exp-in-name{ flex:1 1 180px; } .exp-in-amt{ width:110px; }
.exp-add{ cursor:pointer; }
.exp-cancel{ font-family:var(--sans); font-size:12px; padding:8px 12px;
  border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; }
.exp-list{ display:flex; flex-direction:column; }
.exp-row{ display:grid; grid-template-columns:120px 1fr auto auto auto; align-items:center; gap:10px;
  padding:9px 2px; border-bottom:1px solid var(--rowline); }
.exp-cat{ font-family:var(--sans); font-size:11px; color:var(--muted); }
.exp-name{ font-size:14px; }
.exp-amt{ font-family:var(--sans); font-size:13px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Line-icon marks — inherit currentColor so they sit in the black-&-white palette. */
.fic{ width:1em; height:1em; vertical-align:-0.14em; flex:none; }
.pl-label .fic, .exp-cat .fic{ margin-inline-end:1px; }
.exp-edit, .exp-del, .min-edit, .min-del, .pur-edit, .pur-del{
  background:none; border:none; cursor:pointer; opacity:.45; padding:2px 4px;
  color:var(--ink); display:inline-flex; align-items:center; line-height:1;
  transition:opacity .15s, color .15s; }
.exp-edit .fic, .min-edit .fic, .pur-edit .fic,
.exp-del .fic, .min-del .fic, .pur-del .fic{ width:15px; height:15px; }
.exp-edit:hover, .min-edit:hover, .pur-edit:hover{ opacity:1; }
.exp-del:hover, .min-del:hover, .pur-del:hover{ opacity:1; color:var(--red); }
@media(max-width:760px){ .exp-row{ grid-template-columns:1fr auto auto auto; } .exp-cat{ display:none; } }

/* Net-profit trend (Finance) */
.tr-row{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:10px; width:100%;
  padding:7px 6px; background:none; border:none; cursor:pointer; font-family:var(--sans); text-align:left; }
.tr-row:hover{ background:var(--hoverbg); }
.tr-row.on{ background:var(--hoverbg); box-shadow:inset 2px 0 0 var(--red); }
.tr-lbl{ font-size:11px; color:var(--muted); }
.tr-track{ height:9px; background:#e7e7e3; overflow:hidden; }
.tr-bar{ display:block; height:100%; }
.tr-bar.pos{ background:var(--ink); }
.tr-bar.neg{ background:var(--red); }
.tr-val{ font-size:12px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tr-val.pos{ color:var(--pos); } .tr-val.neg{ color:var(--red); }

.pl-line.muted .pl-amt{ color:#8a6d1f; opacity:.85; }

/* Bosta live timeline (order detail) */
.bosta-tl{ margin-top:6px; padding:10px 12px; border:1px solid var(--line); background:#fff; }
.btl-head{ font-family:var(--sans); font-size:9.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin-bottom:8px; }
.btl-row{ display:flex; align-items:baseline; gap:9px; padding:3px 0; font-family:var(--sans); font-size:12px; }
.btl-dot{ flex:none; font-size:9px; color:var(--ink); }
.btl-row.todo{ opacity:.45; }
.btl-row.done:last-of-type .btl-dot{ color:var(--red); }
.btl-label{ min-width:120px; font-weight:600; }
.btl-when{ color:var(--muted); font-variant-numeric:tabular-nums; }
.btl-loading{ font-family:var(--sans); font-size:11px; color:#9a9c98; }

/* Manual-cost manager: monthly vs one-time sections */
.exp-sec-head{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--sans);
  font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:6px; margin:18px 0 4px; }
.exp-sec-sum{ font-size:11px; letter-spacing:0; text-transform:none; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* Newly out of stock: vendor is the reorder signal */
.oos-card{ border-color:#dcc9c4; }
.oos-vendor{ display:block; font-family:var(--sans); font-size:11px; font-weight:700; color:var(--red); margin-top:2px; }

/* Trend panel: range + mode toggles side by side */
.trend-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Driver profile cards (Couriers tab) */
.drv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; padding-bottom:8px; }
.drv-card{ border:1px solid var(--line); border-radius:2px; background:#fff; padding:14px 15px; }
.drv-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.drv-avatar{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:14px; font-weight:700; flex:none; }
.drv-name{ font-family:var(--sans); font-size:15px; font-weight:700; flex:1; }
.drv-outnow{ font-family:var(--sans); font-size:10px; font-weight:600; color:var(--ink);
  border:1px solid var(--ink); padding:3px 8px; white-space:nowrap; }
.drv-live{ color:var(--red); text-transform:uppercase; letter-spacing:.08em; font-size:8.5px; margin-left:3px; }
.drv-body{ display:flex; align-items:center; gap:14px; }
.drv-donut{ flex:none; }
.drv-donut-num{ font-family:var(--sans); font-size:22px; font-weight:700; fill:var(--ink); }
.drv-donut-lbl{ font-family:var(--sans); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; fill:var(--muted); }
.drv-stats{ display:grid; gap:7px; min-width:0; }
.drv-stat{ font-family:var(--sans); font-size:12.5px; }
.drv-stat b{ font-variant-numeric:tabular-nums; }
.drv-mut{ color:var(--muted); font-size:11px; }
.drv-money{ display:flex; flex-direction:column; gap:5px; padding:9px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.drv-mrow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--sans); font-size:12.5px; }
.drv-mrow .k{ color:var(--muted); font-size:11.5px; }
.drv-mrow .v{ font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.drv-mrow .v small{ font-weight:400; color:var(--muted); font-size:10px; }
.drv-msub{ margin-top:-4px; text-align:right; font-family:var(--sans); font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.drv-mnet{ padding-top:5px; border-top:1px dashed var(--line); }
.drv-mnet .k{ color:var(--ink); font-weight:600; }
.drv-legend{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:2px; }
.drv-leg{ font-family:var(--sans); font-size:10px; color:var(--muted); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.drv-leg i{ width:8px; height:8px; display:inline-block; }
.drv-card.drv-total{ border-color:var(--ink); border-width:2px; }
.drv-total .drv-avatar{ background:#fff; color:var(--ink); border:2px solid var(--ink); }

/* Cashflow section (Finance tab) */
.cf-cols{ display:grid; grid-template-columns:1fr 1.1fr; gap:20px; padding-bottom:8px; }
@media(max-width:760px){ .cf-cols{ grid-template-columns:1fr; } }

/* ===== Motion pass (2026-07-21): view transitions, donut sweep, paid feedback,
   nav indicator, empty states. All guarded for prefers-reduced-motion. ===== */

/* 1 · View transitions: each tab fades + rises in when shown */
@keyframes viewIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
#content > section:not([hidden]){ animation: viewIn .18s cubic-bezier(.22,1,.36,1); }

/* 2 · Donut sweep-in: a bg-colored cover circle un-draws to reveal segments.
   JS sets the final stroke-dashoffset; the transition does the sweep (no CSS-var
   keyframes — Safari resolves those unreliably). */
.donut-cover{ stroke-dashoffset:0; transition: stroke-dashoffset .9s cubic-bezier(.22,1,.36,1) .1s; }

/* 3 · Paid feedback: checkbox pop + strikethrough that draws itself */
@keyframes cbPop{ 50%{ transform:scale(1.3); } }
.exp-paid:checked{ animation: cbPop .18s ease-out; }
.pl-line.strike-anim .pl-label{ text-decoration:none; position:relative; }
.pl-line.strike-anim .pl-label::after{ content:''; position:absolute; left:0; top:55%; height:1.5px;
  width:100%; background:currentColor; animation: strikeDraw .35s cubic-bezier(.22,1,.36,1); }
@keyframes strikeDraw{ from{ width:0; } }

/* 5 · Sidebar: the red pill slides between nav items (desktop only) */
#sidebar-nav{ position:relative; }
#nav-ind{ position:absolute; left:-14px; width:3px; margin-top:9px; height:20px !important; background:var(--red);
  border-radius:0 3px 3px 0; box-shadow:0 0 10px rgba(200,56,31,.55);
  transition: top .3s var(--ease), height .3s var(--ease); }
@media(max-width:760px){ #nav-ind{ display:none; } }

/* 6 · Gallery empty states: red dot + quiet line */
.empty::before{ content:'●'; display:block; color:var(--red); font-size:7px; margin-bottom:8px; }

@media (prefers-reduced-motion: reduce){
  #content > section:not([hidden]){ animation:none; }
  .donut-cover{ display:none; }
  .exp-paid:checked{ animation:none; }
  .pl-line.strike-anim .pl-label::after{ animation:none; }
  #nav-ind{ transition:none; }
}
.drv-neg{ color:var(--red); }
.issue-why{ font-family:var(--sans); font-size:11px; color:var(--red); margin-top:2px; }
.st-retcancel{ color:#8a1f14; }
.st-refunded{ color:#b3261e; }
.st-replace{ color:#1a56b8; }

/* Monochrome stroke icons (replace emoji section markers) */
.ti, .ni{ stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ti{ width:14px; height:14px; vertical-align:-2px; margin-right:8px; }
.gi{ stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  width:13px; height:13px; vertical-align:-2px; flex:none; display:inline-block; }
.ni{ width:16px; height:16px; display:block; }
/* Ruled section headers: hairline under every panel title */
.panel > .lead-title:first-child{ border-bottom:1px solid var(--rowline); padding-bottom:9px; margin-bottom:13px; }
.panel-head{ border-bottom:1px solid var(--rowline); padding-bottom:9px; }

/* Feedback comments: called checkbox + delete */
.fb-c-called{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:11px;
  color:var(--muted); cursor:pointer; margin-left:auto; white-space:nowrap; }
.fb-called-cb{ width:14px; height:14px; accent-color:var(--pos); cursor:pointer; }
.fb-comment.fb-called{ opacity:.62; }
.fb-comment.fb-called .fb-c-called{ color:var(--pos); font-weight:600; }
.fb-c-del{ background:none; border:none; cursor:pointer; font-size:13px; opacity:.45; padding:2px 4px; font-family:var(--sans); }
.fb-c-del:hover{ opacity:1; }
.fb-c-del.arm{ opacity:1; color:#fff; background:var(--red); font-size:11px; font-weight:600; padding:3px 8px; }
.fb-comment .fb-c-date{ margin-left:0; }

/* ---- Courier portal links on driver cards ---- */
.drv-link{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.drv-link:hover{ border-bottom-color:var(--red); color:var(--red); }

/* ---- Assistant tab: sessions rail + chat ---- */
.as-panel{ display:grid; grid-template-columns:224px 1fr; height:calc(100vh - 190px); min-height:440px; padding:0; overflow:hidden; }
#as-rail{ border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--bg); }
.as-new{ margin:12px 12px 10px; padding:9px 12px; border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-family:var(--sans); font-size:12px; font-weight:600; border-radius:2px; cursor:pointer; text-align:center;
  transition:background .15s ease, border-color .15s ease; }
.as-new:hover{ background:var(--red); border-color:var(--red); }
.as-rail-label{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.4px;
  color:var(--muted); padding:2px 14px 8px; border-bottom:1px solid var(--line); }
#as-sessions{ flex:1; overflow-y:auto; min-height:0; }
.as-sess{ display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer;
  border-bottom:1px solid var(--rowline); font-family:var(--sans); position:relative; }
.as-sess:hover{ background:var(--hoverbg); }
.as-sess.on{ background:#fff; }
.as-sess.on::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--red); }
.as-sess-title{ flex:1; min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.as-sess.on .as-sess-title{ font-weight:700; }
.as-sess-date{ font-size:10px; color:var(--muted); flex:none; }
.as-sess-del{ background:none; border:none; cursor:pointer; color:var(--muted); font-size:11px; padding:2px 4px;
  opacity:0; flex:none; font-family:var(--sans); }
.as-sess:hover .as-sess-del, .as-sess-del:focus-visible{ opacity:1; }
.as-sess-del:hover{ color:var(--red); }
.as-sess-del.arm{ opacity:1; color:#fff; background:var(--red); font-size:10px; font-weight:600; padding:3px 7px; border-radius:2px; }
.as-rail-empty{ padding:16px 14px; font-family:var(--sans); font-size:11.5px; color:var(--muted); }

.as-main{ display:flex; flex-direction:column; min-height:0; min-width:0; background:#fff; }
#as-log{ flex:1; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.as-msg{ max-width:76%; padding:10px 14px; font-family:var(--sans); font-size:13.5px; line-height:1.6;
  border:1px solid var(--line); border-radius:2px; background:#fff; overflow-wrap:break-word;
  animation:asIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes asIn{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none;} }
.as-msg bdi{ unicode-bidi:plaintext; }
.as-user{ align-self:flex-end; background:var(--ink); color:#fff; border-color:var(--ink); }
.as-bot{ align-self:flex-start; background:var(--bg); }
.as-li{ padding-inline-start:14px; position:relative; }
.as-li::before{ content:''; position:absolute; inset-inline-start:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--red); }
.as-gap{ height:6px; }
.as-loading{ color:var(--muted); font-family:var(--sans); font-size:13px; padding:20px; }

.as-empty{ margin:auto; text-align:center; padding:24px 16px; max-width:440px; }
.as-empty-title{ font-family:var(--sans); font-size:19px; font-weight:700; letter-spacing:-.01em; }
.as-empty-sub{ font-family:var(--sans); font-size:12px; color:var(--muted); margin:8px 0 18px; }
.as-chips{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.as-chip{ border:1px solid var(--line); background:#fff; font-family:var(--sans); font-size:13px; color:var(--ink);
  padding:9px 16px; border-radius:2px; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.as-chip:hover{ border-color:var(--red); color:var(--red); }

#as-form{ display:flex; gap:8px; border-top:1px solid var(--line); padding:12px 14px; background:#fff; align-items:flex-end; }
#as-input{ flex:1; border:1px solid var(--line); border-radius:2px; padding:10px 12px; font-family:var(--sans);
  font-size:13.5px; background:var(--bg); resize:none; max-height:120px; line-height:1.5; }
#as-input:focus{ outline:2px solid var(--ink); outline-offset:-1px; }
#as-send{ border:1px solid var(--ink); background:var(--ink); color:#fff; font-family:var(--sans); font-size:13px;
  font-weight:600; padding:10px 18px; border-radius:2px; cursor:pointer; flex:none;
  transition:background .15s ease, border-color .15s ease; }
#as-send:hover:not(:disabled){ background:var(--red); border-color:var(--red); }
#as-send:disabled{ opacity:.4; cursor:default; }
.as-dots{ display:inline-flex; gap:4px; padding:3px 2px; }
.as-dots i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:asDot 1s infinite ease-in-out; }
.as-dots i:nth-child(2){ animation-delay:.15s; }
.as-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes asDot{ 0%,100%{ opacity:.25; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }
@media (prefers-reduced-motion: reduce){
  .as-dots i{ animation:none; }
  .as-msg{ animation:none; }
}
@media (max-width:760px){
  .as-panel{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:calc(100vh - 220px); }
  #as-rail{ border-right:none; border-bottom:1px solid var(--line); flex-direction:row; align-items:center; gap:4px; overflow:hidden; }
  .as-new{ margin:8px 8px 8px 10px; white-space:nowrap; }
  .as-rail-label{ display:none; }
  #as-sessions{ display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden; border-bottom:none; }
  .as-sess{ border-bottom:none; border-right:1px solid var(--rowline); max-width:170px; flex:none; padding:8px 10px; }
  .as-sess.on::before{ width:100%; height:2px; bottom:auto; }
  .as-sess-date{ display:none; }
  .as-msg{ max-width:92%; }
}

/* ---- Paymob section (Finance tab) ---- */
.pm-actions{ display:flex; gap:8px; margin:14px 0 10px; flex-wrap:wrap; }
.pm-export-all{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.pm-export-all:hover{ border-color:var(--ink); background:#fff; }
.pm-list{ max-height:420px; overflow-y:auto; border-top:1px solid var(--rowline); }
.pm-row{ display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--rowline);
  font-family:var(--sans); font-size:12.5px; }
.pm-ord{ font-weight:700; width:64px; flex:none; }
.pm-cust{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-date{ color:var(--muted); width:52px; flex:none; }
.pm-amt{ font-weight:700; width:100px; text-align:right; flex:none; font-variant-numeric:tabular-nums; }
.stchip.pm-complete{ color:var(--pos); }
.stchip.pm-window{ color:#8a6d1f; }
.stchip.pm-await{ color:var(--muted); }
.stchip.pm-attn{ color:var(--red); font-weight:700; }
.stchip.pm-refunded{ color:#7b1fa2; }
.cm-card.pm-attn-card{ border-color:var(--red); }
.cm-card.pm-attn-card .cm-value{ color:var(--red); }
@media (max-width:760px){ .pm-cust{ display:none; } }
.pm-cb{ accent-color:var(--ink); width:15px; height:15px; flex:none; cursor:pointer; }
.pm-row.pm-sel{ background:var(--hoverbg); }
.pm-selall{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:12px;
  color:var(--muted); cursor:pointer; padding:6px 4px; }
.pm-selall input{ accent-color:var(--ink); width:14px; height:14px; }
.pm-fee{ font-weight:400; font-size:10.5px; color:var(--muted); }
.pm-filters{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 0; }
.pm-refund-btn{ font-family:var(--sans); font-size:10.5px; font-weight:600; border:1px solid var(--red);
  color:var(--red); background:#fff; padding:4px 10px; border-radius:2px; cursor:pointer; flex:none; white-space:nowrap; }
.pm-refund-btn:hover{ background:var(--red); color:#fff; }
.pm-refund-btn.arm{ background:var(--red); color:#fff; }
.pm-refund-btn:disabled{ opacity:.5; cursor:default; }
.pm-refund-btn.pm-undo{ border-color:var(--line); color:var(--muted); font-weight:400; }
.pm-refund-btn.pm-undo:hover{ border-color:var(--ink); color:var(--ink); background:#fff; }

/* ---- Messenger VA tab ---- */
.va-testbanner{ font-family:var(--sans); font-size:12.5px; border:1px solid var(--red); color:var(--red);
  background:#fff; padding:10px 14px; margin-bottom:16px; border-radius:2px; }
#va-period-tabs{ display:flex; gap:6px; margin-bottom:18px; font-family:var(--sans); flex-wrap:wrap; }
#va-plat-tabs{ display:flex; align-items:center; gap:6px; margin:-6px 0 18px; font-family:var(--sans); flex-wrap:wrap; }
#va-plat-tabs .va-pf-label{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.va-pf{ font-family:var(--sans); font-size:11px; padding:5px 12px; background:#fff; border:1px solid var(--line);
  color:var(--muted); cursor:pointer; border-radius:2px; letter-spacing:.03em; }
.va-pf:hover:not(.on){ border-color:var(--ink); color:var(--ink); }
.va-pf.on{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
.va-conv{ border-bottom:1px solid var(--rowline); padding:10px 0; }
.va-conv:last-child{ border-bottom:none; }
.va-conv-head{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.va-plat{ font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.06em; border:1px solid var(--ink);
  padding:2px 6px; flex:none; }
.va-name{ font-family:var(--sans); font-size:13.5px; font-weight:600; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.va-new{ font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.06em; color:#fff;
  background:var(--red); padding:2px 6px; border-radius:8px; flex:none; }
.va-conv-unread .va-name{ font-weight:700; }
.stchip.va-bot{ color:var(--pos); }
.stchip.va-human{ color:#8a6d1f; }
.stchip.va-ticket{ color:var(--red); }
.va-preview{ font-family:var(--sans); font-size:12px; color:var(--muted); margin:5px 0 0 2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.va-transcript{ margin-top:10px; border:1px solid var(--line); border-radius:2px; background:var(--bg);
  padding:12px; display:flex; flex-direction:column; gap:8px; max-height:380px; overflow-y:auto; }
.va-m{ max-width:80%; padding:8px 11px; font-family:var(--sans); font-size:12.5px; line-height:1.55;
  border:1px solid var(--line); border-radius:2px; background:#fff; overflow-wrap:break-word; position:relative; }
.va-m-in{ align-self:flex-start; }
.va-m-bot{ align-self:flex-end; background:var(--ink); color:#fff; border-color:var(--ink); }
.va-m-bot .va-m-t{ color:#b9bab6; }
.va-m-staff{ align-self:flex-end; border-color:var(--red); }
.va-m-who{ font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--red); display:block; margin-top:3px; }
.va-m-t{ font-size:9.5px; color:var(--muted); margin-top:4px; }
.va-m-media{ font-size:11px; color:var(--muted); margin-top:3px; }
.va-m-bot .va-m-media{ color:#b9bab6; }
.va-tk{ border-bottom:1px solid var(--rowline); padding:11px 0; }
.va-tk:last-child{ border-bottom:none; }
.va-tk-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.stchip.va-tk-refund{ color:var(--red); font-weight:700; }
.stchip.va-tk-handoff{ color:#1a56b8; }
.va-tk-ord{ font-family:var(--sans); font-size:12px; font-weight:700; }
.va-tk-phone{ font-family:var(--sans); font-size:12px; font-weight:600; color:var(--pos); text-decoration:none;
  border-bottom:1px solid transparent; }
.va-tk-phone:hover{ border-bottom-color:var(--pos); }
.va-tk-sum{ font-family:var(--sans); font-size:12.5px; margin-top:6px; }
.va-tk-why{ font-family:var(--sans); font-size:11.5px; color:var(--muted); margin-top:3px; }
.va-tk-done{ opacity:.55; }
.va-tk-res{ font-family:var(--sans); font-size:10.5px; color:var(--pos); }
.va-tk-hist{ font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--muted); padding:12px 0 4px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.pm-exp{ font-family:var(--sans); font-size:9.5px; font-weight:600; color:var(--pos); border:1px solid currentColor;
  padding:2px 6px; border-radius:2px; flex:none; white-space:nowrap; letter-spacing:.04em; }

/* ---- Calendar tab ---- */
.nav-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; margin-left:6px; font-family:var(--sans); font-size:10px; font-weight:600; color:#fff; background:var(--red); border-radius:8px; }
/* Big full-width calendar on top, agenda stacked below */
.cal-layout{ display:block; }
.cal-grid-head{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:12px; }
.cal-mtitle{ font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; min-width:180px; text-align:center; }
.cal-nav{ font-family:var(--sans); border:1px solid var(--line); background:#fff; width:30px; height:30px; border-radius:2px; cursor:pointer; color:var(--ink); font-size:15px; }
.cal-nav:hover{ border-color:var(--ink); }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); font-family:var(--sans); font-size:10px; letter-spacing:.08em; color:var(--muted); text-align:left; }
.cal-dow span{ padding:0 8px 5px; }
.cal-weeks{ border:1px solid var(--line); border-radius:2px; overflow:hidden; background:#fff; }
.cal-week{ position:relative; border-top:1px solid var(--line); }
.cal-week:first-child{ border-top:none; }
.cal-week-bg{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,1fr); }
.cal-daycell{ border-left:1px solid var(--line); padding:5px 7px; }
.cal-daycell:first-child{ border-left:none; }
.cal-daycell[data-day]{ cursor:pointer; }
.cal-daycell[data-day]:hover{ background:#faf9f6; }
.cal-daycell.out{ background:#f7f6f2; }
.cal-dnum{ font-family:var(--sans); font-size:12px; color:var(--muted); }
.cal-daycell.today .cal-dnum{ background:var(--ink); color:#fff; border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; margin:-1px 0; }
.cal-week-bars{ position:absolute; inset:0; pointer-events:none; }
.cal-barlbl{ position:absolute; height:19px; line-height:18px; padding:0 7px; font-family:var(--sans); font-size:11px; border-radius:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; pointer-events:auto; box-sizing:border-box; }
.cal-bar-holiday{ background:#ececea; color:var(--ink); border-left:3px solid var(--ink); }
.cal-bar-occasion{ background:#eeeeeb; color:var(--muted); border-left:3px solid var(--muted); }
.cal-bar-event{ background:#e6f0ea; color:#276b3f; border-left:3px solid var(--pos); }
.cal-bar-discount{ background:#f7e7e3; color:var(--red); border-left:3px solid var(--red); }
.cal-agenda{ margin-top:28px; }
.cal-agenda-head,.cal-upcoming-h{ font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; display:flex; justify-content:space-between; margin:4px 0 8px; }
.cal-upcoming-h{ color:var(--red); }
.cal-mhead{ font-family:var(--sans); font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin:14px 0 6px; }
.cal-row{ display:grid; grid-template-columns:auto auto 1fr auto auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line); }
.cal-tag{ font-family:var(--sans); font-size:10px; padding:2px 6px; border:1px solid var(--line); border-radius:2px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.cal-holiday{ color:var(--ink); border-color:var(--ink); }
.cal-occasion{ color:var(--muted); }
.cal-event{ color:var(--pos); border-color:var(--pos); }
.cal-discount{ color:var(--red); border-color:var(--red); }
.cal-date{ font-family:var(--sans); font-size:12px; color:var(--muted); white-space:nowrap; }
.cal-title{ font-family:var(--sans); font-size:13px; color:var(--ink); }
.cal-code{ margin-left:8px; font-family:var(--sans); font-size:11px; color:var(--red); border:1px solid var(--red); padding:1px 5px; border-radius:2px; }
.cal-note{ margin-left:8px; font-family:var(--sans); font-size:11px; color:var(--muted); }
.cal-away{ font-family:var(--sans); font-size:11px; color:var(--muted); white-space:nowrap; }
.cal-edit{ background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; }
.cal-edit:hover{ color:var(--ink); }
.cal-upcoming-box{ border:1px solid var(--red); border-radius:2px; padding:10px 14px; margin-bottom:18px; }
.cal-upcoming-box .cal-row:first-of-type{ border-top:none; }
.cal-pasttoggle{ font-family:var(--sans); font-size:10px; color:var(--muted); text-transform:none; letter-spacing:0; cursor:pointer; }
/* modal */
.cal-modal{ position:fixed; inset:0; background:rgba(20,21,22,.35); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; z-index:50; }
.cal-modal-box{ background:#fff; border:1px solid var(--line); border-radius:2px; padding:18px; width:min(420px,100%); max-height:88vh; overflow:auto; }
.cal-modal-h{ font-family:var(--sans); font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; color:var(--ink); }
.cal-modal-box label{ display:block; font-family:var(--sans); font-size:11px; color:var(--muted); margin-bottom:10px; }
.cal-modal-box input,.cal-modal-box select,.cal-modal-box textarea{ display:block; width:100%; margin-top:3px; padding:6px 8px; border:1px solid var(--line); border-radius:2px; font:inherit; color:var(--ink); box-sizing:border-box; }
.cal-modal-box textarea{ min-height:52px; resize:vertical; }
.cal-modal-box .cal-inline{ display:flex; align-items:center; gap:6px; }
.cal-modal-box .cal-inline input{ width:auto; margin:0; }
.cal-modal-actions{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.cal-seed{ font-family:var(--sans); font-size:9px; color:var(--muted); border:1px solid var(--line); padding:1px 4px; border-radius:2px; }
.cal-danger{ color:var(--red); border-color:var(--red); }
.cal-invalid{ border-color:var(--red)!important; }
@media(prefers-reduced-motion:no-preference){ .cal-modal-box{ animation:cal-pop .16s ease-out; } @keyframes cal-pop{ from{ transform:translateY(-6px); opacity:0 } to{ transform:none; opacity:1 } } }

/* ---- Shopping tab (vendor purchase planning, admin-only) ---- */
.shop-heroes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.shop-hero{ position:relative; border:1px solid var(--line); border-radius:2px; padding:10px; background:#fff;
  display:flex; flex-direction:column; gap:8px; color:inherit; text-decoration:none; }
a.shop-hero:hover{ background:var(--hoverbg); }
.shop-hero.urgent-row{ border-left:3px solid var(--red); }
.shop-hero .thumb{ width:44px; height:44px; object-fit:cover; border-radius:2px; background:var(--hoverbg); flex:none; }
.shop-share{ font-size:22px; font-weight:700; }
.shop-hero-stats{ display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--muted); font-size:12px; }
.shop-star{ color:var(--ink); }
.shop-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.shop-bar label{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.shop-bar select{ border:1px solid var(--line); border-radius:2px; padding:6px 8px; background:#fff; font:inherit; max-width:280px; }
.shop-summary{ display:flex; gap:14px; color:var(--muted); font-size:13px; flex-wrap:wrap; }
.shop-summary strong{ color:var(--ink); }
.shop-group-title{ text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--muted); margin:14px 0 6px; }
.shop-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-bottom:1px solid var(--rowline);
  border-radius:var(--r-md);
  transition:background .18s var(--ease), transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .2s var(--ease); }
.shop-row:hover{ background:#fff; border-bottom-color:transparent; transform:translateY(-2px);
  box-shadow:var(--elev-1); position:relative; z-index:1; }
.shop-row.urgent-row{ border-left:3px solid var(--red); padding-left:9px; }
.shop-row .thumb{ width:38px; height:38px; object-fit:cover; border-radius:var(--r-sm); background:var(--hoverbg); flex:none; }
/* Soften the hero cards + pop the product image out as a preview on hover. */
.shop-hero{ border-radius:var(--r-md);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .2s var(--ease), background .15s var(--ease); }
a.shop-hero:hover{ transform:translateY(-4px); box-shadow:var(--elev-2); background:#fff; }
#shopping-view .thumb{ transform-origin:center left; cursor:zoom-in;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s var(--ease); }
.shop-row:hover .thumb, .shop-hero:hover .thumb{ transform:scale(3.4); box-shadow:var(--elev-2); position:relative; z-index:7; }
.shop-name{ flex:1; min-width:0; }
.shop-name a{ color:inherit; text-decoration:none; }
.shop-name a:hover{ text-decoration:underline; }
.shop-sub{ display:block; color:var(--muted); font-size:12px; }
.shop-qty{ margin-left:auto; text-align:right; font-weight:700; font-size:16px; min-width:72px; flex:none; }
.shop-qty small{ display:block; font-weight:400; color:var(--muted); font-size:11px; }
.status-chip, .cover-chip{ display:inline-block; border:1px solid var(--line); border-radius:2px; padding:1px 6px;
  font-size:11px; color:var(--muted); white-space:nowrap; flex:none; }
.cover-chip.low{ border-color:var(--ink); color:var(--ink); }
.cover-chip.urgent, .status-chip.oos{ border-color:var(--red); color:var(--red); }
.shop-toggle{ background:none; border:1px solid var(--line); border-radius:2px; padding:6px 10px; font:inherit;
  cursor:pointer; margin-top:8px; color:var(--ink); }
.shop-toggle:hover{ background:var(--hoverbg); }

/* Select-for-export checkboxes + sticky export bar */
.shop-sel{ display:inline-flex; align-items:center; flex:none; cursor:pointer; }
.shop-sel input{ width:16px; height:16px; margin:0; accent-color:var(--ink); cursor:pointer; }
.shop-sel.hero{ position:absolute; top:8px; left:8px; z-index:2; padding:2px;
  background:#fff; border:1px solid var(--line); border-radius:3px; }
.shop-export-bar{ position:sticky; bottom:0; z-index:5; display:flex; align-items:center;
  justify-content:space-between; gap:12px 14px; flex-wrap:wrap; margin-top:14px;
  padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:2px; }
.shop-sel-count{ font-size:13px; font-weight:700; color:var(--ink); }
.shop-export-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Refund/postpone confirmation cases (Feedback tab) */
.confirm-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:10px; }
.confirm-card.confirm-flag{ border-color:var(--red); box-shadow:inset 3px 0 0 var(--red); }
.confirm-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.confirm-ord{ font-family:var(--sans); font-size:13px; color:var(--ink); }
.confirm-ans{ font-family:var(--sans); font-size:11px; padding:2px 9px; border:1px solid currentColor; border-radius:var(--r-pill); white-space:nowrap; }
.confirm-ans.neg{ color:var(--red); } .confirm-ans.pos{ color:var(--pos); }
.confirm-ans.neu{ color:var(--muted); } .confirm-ans.warn{ color:#8a6d1f; }
.confirm-reason{ font-family:var(--sans); font-size:12.5px; color:#4c4d4a; font-style:italic; margin-top:8px; }
.confirm-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.confirm-btn.arm{ border-color:var(--red); color:var(--red); }

/* ---- Stock tab (AYA) ---- */
.sw-summary{ display:flex; flex-wrap:wrap; gap:12px; }
.sw-card{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:2px; padding:10px 14px; min-width:118px; }
.sw-card b{ font-size:20px; }
.sw-card span{ color:var(--muted); font-size:12px; }
.sw-dot{ width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none; }
.sw-dot.st-out{ background:var(--red); }
.sw-dot.st-crit{ background:var(--red); opacity:.55; }
.sw-dot.st-low{ background:#b8860b; }
.sw-dot.st-ok{ background:var(--pos); }
.sw-bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:14px; }
.sw-filter{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.sw-filter select, .sw-filter input, #stock-search{ font:inherit; border:1px solid var(--line); border-radius:2px; padding:6px 8px; background:#fff; color:var(--ink); }
#stock-threshold{ width:58px; }
.sw-add{ position:relative; flex:1; min-width:220px; }
#stock-search{ width:100%; }
.sw-results{ position:absolute; z-index:20; top:100%; left:0; right:0; background:#fff; border:1px solid var(--line); border-top:none; max-height:300px; overflow:auto; }
.sw-res{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; padding:8px 10px; background:none; border:none; border-bottom:1px solid var(--rowline); cursor:pointer; color:var(--ink); }
.sw-res:hover{ background:var(--hoverbg); }
.sw-res[disabled]{ opacity:.5; cursor:default; }
.sw-res-meta{ font-size:11px; color:var(--muted); }
.sw-res-empty{ padding:8px 10px; color:var(--muted); font-size:12px; }
.sw-table{ width:100%; border-collapse:collapse; font-size:13px; }
.sw-table th, .sw-table td{ padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.sw-table th{ font-weight:600; color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.04em; white-space:nowrap; }
.al-right{ text-align:right; }
.al-left{ text-align:left; }
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover, th.on{ color:var(--ink); }
.sw-prod{ display:flex; align-items:center; gap:10px; }
.sw-prod .thumb{ width:38px; height:38px; object-fit:cover; border:1px solid var(--line); border-radius:2px; background:var(--bg); flex:none; }
.sw-prod a{ color:var(--ink); text-decoration:none; font-weight:500; }
.sw-prod a:hover{ text-decoration:underline; }
.sw-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.sw-tag{ font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:2px; padding:1px 5px; }
.sw-star{ color:#c8a227; }
.sw-chip{ display:inline-block; font-size:11px; padding:2px 8px; border-radius:2px; border:1px solid; white-space:nowrap; }
.sw-chip.st-out{ color:var(--red); border-color:var(--red); }
.sw-chip.st-crit{ color:var(--red); border-color:var(--red); font-weight:600; }
.sw-chip.st-low{ color:#b8860b; border-color:#b8860b; }
.sw-chip.st-ok{ color:var(--pos); border-color:#cfe0d3; }
.sw-x{ border:none; background:none; color:var(--muted); cursor:pointer; font-size:13px; padding:4px 6px; border-radius:2px; }
.sw-x:hover{ color:var(--red); background:#faeae7; }
.sw-section{ margin-bottom:18px; }
.sw-sec-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.sw-sec-title{ font-size:15px; text-transform:uppercase; letter-spacing:.04em; margin:0; }
.sw-sec-count{ font-size:12px; color:var(--muted); }
.sw-sec-vendor{ margin-left:auto; }
.sw-tops-wrap{ margin-bottom:14px; }
.sw-tops-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--red); margin-bottom:8px; }
.sw-tops{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.sw-top{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:2px; padding:8px; text-decoration:none; color:var(--ink); background:#fff; }
.sw-top:hover{ background:var(--hoverbg); }
.sw-top .thumb{ width:44px; height:44px; object-fit:cover; border:1px solid var(--line); border-radius:2px; background:var(--bg); flex:none; }
.sw-top-body{ min-width:0; }
.sw-top-name{ font-weight:500; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sw-top-meta{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:11px; color:var(--muted); }
.sw-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sw-sec-bar{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.sw-sec-bar .sw-sec-count{ margin-left:auto; }
.sw-search{ font:inherit; font-size:13px; border:1px solid var(--line); border-radius:2px; padding:6px 9px; background:#fff; color:var(--ink); min-width:170px; }
.al-center{ text-align:center; }
.sw-selcol{ width:34px; }
.sw-check, .sw-check-all{ width:15px; height:15px; cursor:pointer; accent-color:var(--ink); vertical-align:middle; }
.sw-table tr.sel{ background:#f4f6fb; }
.sw-bulk{ display:flex; align-items:center; gap:12px; padding:8px 12px; margin-bottom:12px; background:var(--ink); color:#fff; border-radius:2px; }
.sw-bulk b{ font-size:15px; }
.sw-bulk-remove{ font:inherit; font-size:12px; padding:5px 12px; background:var(--red); color:#fff; border:none; border-radius:2px; cursor:pointer; }
.sw-bulk-remove:disabled{ opacity:.6; cursor:default; }
.sw-bulk-clear{ font:inherit; font-size:12px; padding:5px 12px; background:none; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:2px; cursor:pointer; }
/* Overview: unified "restock first" grouped by section */
.sw-ov-group{ margin-bottom:16px; }
.sw-ov-group:last-child{ margin-bottom:0; }
.sw-ov-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:4px; }
/* Mobile (AYA mostly uses her phone) */
@media(max-width:760px){
  .sw-summary{ gap:8px; }
  .sw-card{ flex:1 1 calc(50% - 4px); min-width:0; padding:8px 10px; }
  .sw-card b{ font-size:17px; }
  .sw-add{ flex:1 1 100%; min-width:0; }
  #stock-search, #stock-threshold, .sw-filter select, .sw-search{ font-size:16px; }   /* prevents iOS zoom-on-focus */
  .sw-search{ flex:1 1 100%; min-width:0; }
  /* Fit the table to the phone: drop low-priority columns, let product names wrap. */
  .sw-hm{ display:none; }
  .sw-table{ min-width:0; width:100%; }
  .sw-table th, .sw-table td{ padding:7px 6px; }
  .sw-prod{ gap:7px; }
  .sw-prod .thumb{ width:34px; height:34px; }
  .sw-name{ white-space:normal; }
  .sw-selcol{ width:26px; }
  .sw-tops{ grid-template-columns:1fr; }
  .sw-sec-bar .sw-sec-count{ margin-left:0; }
  /* AYA's stock tabs all share one icon, so on mobile show text PILLS instead of
     icon-only (which would be indistinguishable). Scoped to her tabs — admin nav untouched. */
  .nav-item[data-view="ov"] span:not(.nav-icon),
  .nav-item[data-view^="st-"] span:not(.nav-icon){ display:inline; }
  .nav-item[data-view="ov"] .nav-icon,
  .nav-item[data-view^="st-"] .nav-icon{ display:none; }
  .nav-item[data-view="ov"], .nav-item[data-view^="st-"]{
    border:1px solid var(--line); border-radius:16px; padding:6px 12px; font-size:12px; color:var(--ink); }
  .nav-item[data-view="ov"].on, .nav-item[data-view^="st-"].on{
    background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
}

/* ============================================================================
   BOLD REFRESH (2026-08-06) — dark charcoal rail + real elevation + rounding.
   Appended last so it wins the cascade over the flat base rules above.
   Gallery DNA kept: monochrome surfaces, ONE red accent, semantic money colors.
   ========================================================================== */

#content{ padding:30px 34px; }
.view-title{ font-size:23px; }

/* --- Cards: rounded, soft layered depth, no hairline (shadow defines the edge) --- */
.panel, .trend-panel{ border:0; border-radius:var(--r-lg); box-shadow:var(--elev-1); padding:18px 18px 10px; }
/* Stacked panels are now big shadowed cards — give them real breathing room so
   sections (e.g. Finance Paymob / Cashflow) don't touch. */
section.panel{ margin-bottom:20px; }
.kpi, .cm-card{ border:0; border-radius:var(--r-md); box-shadow:var(--elev-1); padding:16px 18px; }
.ad-stat{ border:0; border-radius:var(--r-md); box-shadow:var(--elev-1); }
.dead, .cblock, .fb-comment, .ad-node, .bosta-tl, .sw-card, .guide-box, .as-panel{ border-radius:var(--r-md); }
.thumb{ border-radius:var(--r-sm); }

/* Bigger hero numbers; an inset ink ring replaces the flat 2px border */
.kpi-value{ font-size:27px; }
.cm-value{ font-size:26px; }
.kpi.hero{ border:0; box-shadow:var(--elev-2), inset 0 0 0 1.5px var(--ink); }
.kpi.hero .kpi-value{ font-size:34px; }
.cm-card.cm-hero, .cm-card.cm-warn, .cm-card.pm-attn-card{ border:0; }
.cm-hero{ box-shadow:var(--elev-2), inset 0 0 0 1.5px var(--ink); }
.cm-hero .cm-value{ font-size:32px; }
.cm-warn, .pm-attn-card{ box-shadow:var(--elev-1), inset 0 0 0 1.5px var(--red); }

/* Tables float as one rounded surface */
.dtable{ border:0; border-radius:var(--r-lg); box-shadow:var(--elev-1); overflow:hidden; }
.table-wrap{ border-radius:var(--r-lg); }

/* --- Hover motion: cards spring up with a bouncy pop + shadow bloom. --- */
@media(prefers-reduced-motion:no-preference){
  /* overshoot easing on transform = a lively little bounce, not a flat slide */
  .kpi, .cm-card, .drv-card, .ad-stat, .dead-link, .tr-row{
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .24s var(--ease), background .15s var(--ease); }
  .kpi:hover, .cm-card:hover, .drv-card:hover, .ad-stat:hover{
    transform:translateY(-9px) scale(1.03); box-shadow:var(--elev-2); }
  /* hero / attention cards keep their inset ring while they pop */
  .kpi.hero:hover, .cm-hero:hover{ transform:translateY(-9px) scale(1.03);
    box-shadow:var(--elev-2), inset 0 0 0 1.5px var(--ink); }
  .cm-warn:hover, .pm-attn-card:hover{ transform:translateY(-9px) scale(1.03);
    box-shadow:var(--elev-2), inset 0 0 0 1.5px var(--red); }
  /* big panels lift a touch too, so the whole surface feels alive */
  .panel, .trend-panel{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .28s var(--ease); }
  .panel:hover, .trend-panel:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); }
  .dead-link:hover{ box-shadow:var(--elev-1); }
}

/* --- Controls become soft pills / rounded --- */
.tab, .chip, #brand-tabs .btab, #courier-tabs .tab, .pg-num, .pg-arrow, .search-mode,
.badge, .stchip, .tag, .matched, .seg, .seg-btn{ border-radius:var(--r-pill); }
.search, .notebox, .exp-in, .cb-form input, .cb-form select, #dispatch-input, #as-input,
.status-select, .status-save, .page-size select, .fin-nav, .refresh-btn, .export, .as-new,
.exp-cancel, .wa, .fb-c-del.arm, .pm-refund-btn{ border-radius:var(--r-sm); }

/* Primary/secondary buttons: subtle depth + a lift on hover */
.refresh-btn, .export, .status-save{ box-shadow:var(--elev-1);
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.refresh-btn:hover:not(:disabled), .export:hover:not(:disabled), .status-save:hover{
  transform:translateY(-1px); box-shadow:var(--elev-2); }
.refresh-btn:active:not(:disabled), .export:active:not(:disabled){ transform:translateY(0); box-shadow:var(--elev-1); }

/* Freshness / live-status pill gets a status dot; green (fresh) softly pulses */
.freshness{ display:inline-flex; align-items:center; gap:7px; border-radius:var(--r-pill); }
.freshness::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.freshness.green::before{ animation:livePulse 2.4s var(--ease) infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(47,125,70,.5); } 70%{ box-shadow:0 0 0 6px rgba(47,125,70,0); } 100%{ box-shadow:0 0 0 0 rgba(47,125,70,0); } }

/* Sticky courier tally + assistant surface: give them the same soft depth */
.cr-totals{ border-radius:var(--r-md); box-shadow:var(--elev-2); }
.as-msg{ border-radius:var(--r-md); }

/* --- Motion: a slightly richer, staggered rise-in (reduced-motion safe below) --- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
/* `backwards` (not `both`): the entrance fills only the START, so it does NOT lock
   `transform` afterward — otherwise :hover lifts are ignored (only shadow shows). */
.kpi, .panel, .trend-panel, .cm-card, .drv-card{ animation:riseIn .52s var(--ease) backwards; }
.cust-metrics .cm-card:nth-child(2), .drv-grid .drv-card:nth-child(2){ animation-delay:.05s; }
.cust-metrics .cm-card:nth-child(3), .drv-grid .drv-card:nth-child(3){ animation-delay:.10s; }
.cust-metrics .cm-card:nth-child(4), .drv-grid .drv-card:nth-child(4){ animation-delay:.15s; }
.drv-grid .drv-card:nth-child(n+5){ animation-delay:.20s; }

@media (prefers-reduced-motion: reduce){
  .kpi, .panel, .trend-panel, .cm-card, .drv-card{ animation:none !important; }
  .freshness.green::before{ animation:none; }
  .refresh-btn, .export, .status-save{ transition:none; }
}

/* --- Mobile: the rail is dark now, so recolor the tab pills / account button --- */
@media(max-width:760px){
  #content{ padding:18px 15px; }
  .switch-acct{ border:1px solid var(--side-line) !important; color:var(--side-fg) !important; }
  .nav-item[data-view="ov"], .nav-item[data-view^="st-"]{
    border-color:var(--side-line); color:var(--side-fg); }
  .nav-item[data-view="ov"].on, .nav-item[data-view^="st-"].on{
    background:#fff; color:var(--ink); border-color:#fff; }
}

/* ===== Videos tab — drag-and-drop 360 video uploader ===== */
.vid-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.vid-toolbar .search{ flex:1; min-width:180px; }
.vid-toggle{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); white-space:nowrap; cursor:pointer; }

/* Tray: horizontal strip of draggable video chips */
.vid-tray{ display:flex; gap:12px; overflow-x:auto; padding:4px 2px 10px; }
.vid-chip{ flex:0 0 auto; width:120px; cursor:grab; user-select:none;
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff; padding:6px; text-align:center;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.vid-chip:hover{ box-shadow:var(--elev-1); transform:translateY(-1px); }
.vid-chip:active{ cursor:grabbing; }
.vid-chip.armed{ border-color:var(--red); box-shadow:0 0 0 2px rgba(200,56,31,.18); }
.vid-chip.uploading{ opacity:.55; pointer-events:none; }
.vid-thumb{ position:relative; aspect-ratio:1; border-radius:4px; overflow:hidden; background:#141516; display:flex; align-items:center; justify-content:center; }
.vid-thumb img{ width:100%; height:100%; object-fit:cover; }
.vid-thumb .vid-play{ position:absolute; color:#fff; font-size:22px; opacity:.9; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none; }
.vid-thumb.noimg{ background:#20211f; }
.vid-name{ margin-top:5px; font-size:11px; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.vid-spin{ margin-top:4px; font-size:10px; color:var(--red); font-weight:600; }

/* Product grid: square tiles */
.vid-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); gap:12px; }
.vid-tile{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; cursor:pointer;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.vid-tile:hover{ box-shadow:var(--elev-1); transform:translateY(-1px); }
.vid-tile:focus-visible{ outline:2px solid var(--red); outline-offset:1px; }
.vid-tile.drop-hover{ border-color:var(--red); box-shadow:0 0 0 3px rgba(200,56,31,.22); transform:translateY(-2px); }
.vid-tile-img{ position:relative; aspect-ratio:1; background:#f0f0ec; display:flex; align-items:center; justify-content:center; }
.vid-tile-img img{ width:100%; height:100%; object-fit:cover; }
.vid-noimg{ font-size:11px; color:var(--muted); }
.vid-badge{ position:absolute; top:5px; left:5px; background:rgba(20,21,22,.82); color:#fff; font-size:10px; font-weight:600;
  padding:2px 6px; border-radius:var(--r-pill); letter-spacing:.02em; }
.vid-drop-hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(200,56,31,.85); color:#fff; font-size:12px; font-weight:700; opacity:0; transition:opacity .12s var(--ease); pointer-events:none; }
.vid-tile.drop-hover .vid-drop-hint{ opacity:1; }
.vid-tile-spin{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.8); color:var(--red); font-size:12px; font-weight:700; }
.vid-tile.uploading{ pointer-events:none; }
.vid-tile.uploading .vid-tile-spin{ display:flex; }
.vid-tile-name{ padding:6px 7px; font-size:11px; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Toast */
#vid-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:var(--r-pill); font-size:13px; font-weight:500;
  box-shadow:var(--elev-2); opacity:0; pointer-events:none; z-index:60; transition:opacity .2s var(--ease), transform .2s var(--ease); max-width:88vw; }
#vid-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#vid-toast.bad{ background:var(--red); }
@media (prefers-reduced-motion: reduce){ .vid-chip, .vid-tile, #vid-toast{ transition:none; } }

/* ============================================================
   Khod Kart brand theme (overrides — cascade wins)
   Palette: Primary Red #FF2D1A, Golden Yellow #FFBE3D,
   Red Shadow #CC1500, Ink Black #1A1A1A, white paper.
   KK brand rule: red is dominant, NO green — positive money
   is ink-black (not FigiHome's green), negative is KK red.
   ============================================================ */
:root{
  --bg:#f6f3ef;
  --ink:#1a1a1a; --muted:#7a736c; --line:#e7e0d8;
  --red:#ff2d1a; --red-shadow:#cc1500; --gold:#ffbe3d;
  --brand-accent:#ff2d1a;
  --pos:#1a1a1a;            /* KK: no green — profit shows ink-black */
  --neg:#ff2d1a;
  --card:#fff; --card-line:#ece5dd; --rowline:#f2ece4; --hoverbg:#f4efe8;
  /* Black sidebar with warm-red hover/active (KK box is a red/black object) */
  --side-bg:#1a1a1a; --side-fg:#faf7f4; --side-muted:#b7ada6;
  --side-hover:#2a1613; --side-active:#3a1c16; --side-line:#33241f;
}
/* KK logo is already colour on transparent — kill FigiHome's invert. */
.sidebar-logo{ filter:none; mix-blend-mode:normal; height:60px; }
/* Active nav edge + selected item in KK red. */
#nav-ind{ background:var(--red); }
.nav-item.on{ color:#fff; }
.nav-item.on .nav-icon{ color:var(--gold); }
.me-label{ color:var(--side-muted); font-size:12px; letter-spacing:.3px; }
/* View titles: heavy italic nod to KK's chunky display type
   (exact "Ortland" font is not on disk — heavy italic fallback). */
.view-title{ font-style:italic; letter-spacing:-.01em; }
/* Last-synced pill for the Finance refresh control. */
.sync-pill{ font-family:var(--sans); font-size:11px; padding:5px 10px;
  border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted);
  display:inline-flex; align-items:center; }
.sync-pill.stale{ color:var(--red); border-color:var(--red); font-weight:600; }
.sync-pill.spin{ opacity:.6; }

/* KK logo is a dark/red mark — give it a light badge so it reads on the black sidebar. */
.sidebar-brand{ background:#faf7f4; border-radius:14px; padding:14px 8px 12px; margin:2px 6px 22px; }
.sidebar-brand .sidebar-logo{ height:50px; filter:none; mix-blend-mode:normal; }
@media (max-width:760px){ .sidebar-brand{ padding:6px; margin:0 4px; } .sidebar-brand .sidebar-logo{ height:34px; } }

/* Colourful KK wordmark (yellow fill + red 3D shadow, transparent) — reads on black; no badge. */
.sidebar-brand{ background:none; padding:10px 8px 0; margin:2px 6px 20px; }
.sidebar-brand .sidebar-logo{ height:66px; filter:none; mix-blend-mode:normal; }
@media (max-width:760px){ .sidebar-brand{ padding:4px; margin:0 4px; } .sidebar-brand .sidebar-logo{ height:38px; } }

/* ---- Light sidebar (user request): white sidebar, transparent colourful KK logo, larger ---- */
:root{
  --side-bg:#ffffff; --side-fg:#1a1a1a; --side-muted:#8a827a;
  --side-hover:#f5efe8; --side-active:#fdecea; --side-line:#ece5dd;
}
#sidebar{ border-right:1px solid var(--side-line); }
.nav-item{ color:var(--side-fg); }
.nav-item:hover{ background:var(--side-hover); }
.nav-item.on{ background:var(--side-active); color:var(--red); }
.nav-item.on .nav-icon{ color:var(--red); }
#nav-ind{ background:var(--red); }
.me-label{ color:var(--side-muted); }
.sidebar-brand{ background:none; padding:14px 6px 6px; margin:0 6px 18px; }
.sidebar-brand .sidebar-logo{ height:96px; width:auto; max-width:100%; filter:none; mix-blend-mode:normal; }
@media (max-width:760px){ .sidebar-brand .sidebar-logo{ height:52px; } }