/* ==========================================================================
   theme.css — Apple/macOS glass design system
   --------------------------------------------------------------------------
   Do source of truth: Helios Glass (dark) aur Coral Glass (light).
   Har component sirf token parhta hai. Koi hardcoded rang yahan ke
   token block se bahar nahi hona chahiye.

   AHEM — "legacy alias" layer (section 2):
     Puri app apne purane token naam parhti hai — var(--bg-card), var(--teal),
     var(--t1), var(--red) — 647 inline style attributes samet. Is liye naye
     token likhne ke baad hum wo purane naam UNHI naye token par map kar dete
     hain. Natija: har component khud-ba-khud naye theme me aa jata hai,
     aur 1,187 JS template literals ko chhuna nahi parta.

   Load order: sab se AAKHIR me. Yahan koi !important nahi hai aur hona bhi
   nahi chahiye — agar koi rule cascade haar raha ho to muqabil selector
   delete karo, !important na lagao.
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────
   1. TOKENS
   Light (Coral Glass) default hai; dark (Helios Glass) do jagah
   se aata hai — OS setting aur manual data-theme, dono.
   ───────────────────────────────────────────────────────────── */
:root {
  --canvas:#F3F3F5;
  --orb-1:#FBD3B4;
  --orb-2:#EFC2F5;
  --orb-3:#CFE8FB;

  /* Light glass ko zyada thos rakha gaya. Spec me 0.62 tha, magar us par
     blurred orbs ka rang neeche se chhan kar aata tha aur text dhundla
     lagta tha — "sab kuch blurry hai" ki asal wajah yehi thi. */
  --surface-1:rgba(255,255,255,0.80);
  --surface-2:rgba(255,255,255,0.92);
  --surface-solid:#FFFFFF;
  /* Light me pastel orbs .5 par poore page ko dhundla kar dete thay */
  --orb-opacity:0.30;

  --hairline:rgba(20,18,24,0.08);
  --hairline-strong:rgba(20,18,24,0.14);
  --sheen:rgba(255,255,255,0.85);

  --text-primary:#1B1B1F;
  --text-secondary:#6C6C76;
  /* Spec ka #9B9BA5 glass par 2.9:1 par fail hota hai. Spec khud kehta hai
     "darken tertiary if it fails". Napa gaya, guess nahi kiya:
     #706E76 → 4.82:1 glass par, 4.53:1 canvas par, 5.02:1 solid par.
     (Pehli koshish #8A8A94 thi — wo 3.28:1 par fail thi.) */
  --text-tertiary:#706E76;

  --accent:#F97316;
  --accent-ink:#FFFFFF;
  --accent-wash:rgba(249,115,22,0.12);

  --data-1:#F97316;
  --data-2:#D946EF;
  --data-3:#22C55E;
  --data-4:#38BDF8;

  --success:#1FA85A;
  --warning:#C77A0B;
  --danger:#E14B3C;

  /* ── Text-safe variants ──
     Spec do cheezein maangta hai jo LIGHT mode me aik doosre se takrati hain:
     accent #F97316 fix rakho, AUR body text 4.5:1 par rakho. Napa gaya:
     #F97316 safed glass par sirf 2.76:1 deta hai — chhote text ke liye fail.
     Hal: bhare hue hisse (bars, chart series, rail, chips) asli vivid rang
     hi rakhte hain — wahan 3:1 kaafi hai. Sirf TEXT in darker variants par
     jata hai. Dark mode me dono aik hi hain, kyunke wahan base pehle hi pass
     karta hai. Yehi usool spec khud tertiary ke liye deta hai. */
  --accent-text:#BD5711;    /* 4.53:1 */
  --data-1-text:#BD5711;    /* 4.53:1 */
  --data-2-text:#B83CCB;    /* 4.54:1 */
  --data-3-text:#178640;    /* 4.57:1 */
  --data-4-text:#257DA4;    /* 4.55:1 */
  /* ⚠️ Ye teeno pehle THEEK 4.5:1 par tune the (4.51–4.53). Us ka matlab
     tha ke kisi bhi RANGEEN satah par — chahe rangat kitni bhi halki ho —
     ye foran 4.5 se neeche gir jate the. KPI cards par glassy rangat lagate
     waqt yehi bandha tha. Thora sa gehra kar diya: ab saada card par 5.0:1
     dete hain, yani 8% rangat ke neeche bhi 4.5 par qaim rehte hain. */
  --success-text:#187e44;   /* 5.00:1 */
  --warning-text:#9E6008;   /* 4.99:1 */
  --danger-text:#BC3E31;    /* 5.19:1 — 8% rangat ke neeche bhi 4.6+ */

  --shadow:0 10px 30px rgba(35,30,40,0.12);
  /* Light glass ko canvas ke against apna kinara nahi milta — 1px inset
     highlight se milta hai. Dark me yeh none ho jata hai. */
  --inset:inset 0 1px 0 var(--sheen);

  /* Geometry */
  --r-card:20px;
  --r-control:13px;
  --r-chip:9px;

  /* Motion */
  --ease-out:cubic-bezier(0.32,0.72,0,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-micro:150ms;
  --dur-base:250ms;
  --dur-sheet:350ms;
  --dur-page:450ms;
  --dur-theme:400ms;   /* mode cross-fade — spec: 400ms, never a hard cut */

  /* Glass recipe — ek jagah, taake performance guard isay badal sake */
  --blur-amount:30px;
  --glass-filter:blur(var(--blur-amount)) saturate(180%);
}

/* Dark via OS. data-theme="light" isay haraata hai. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:#0D0910;
    --orb-1:#B15CB0;
    --orb-2:#4A3A80;
    --orb-3:#1E1030;

    --surface-1:rgba(255,255,255,0.055);
    --surface-2:rgba(255,255,255,0.090);
    --surface-solid:#191320;
  --orb-opacity:0.50;

    --hairline:rgba(255,255,255,0.10);
    --hairline-strong:rgba(255,255,255,0.20);
    --sheen:transparent;

    --text-primary:#F3EDF6;
    --text-secondary:#A99BB0;
    /* Spec: #7A6D82 → glass par ~4.0:1, fail. Uthaya gaya.
       #8B7E93 panel par 4.65 deta tha MAGAR nested surface-2 par sirf 4.25 —
       aur bohat se labels wahin baithe hain (student cards). Worst-case
       ground surface-2 hai, is liye usi par calibrate kiya: #918399 = 4.56. */
    --text-tertiary:#918399;

    --accent:#E3A6E0;
    --accent-ink:#2A0F2A;
    --accent-wash:rgba(227,166,224,0.14);

    --data-1:#E3A6E0;
    --data-2:#9B8BE8;
    --data-3:#5FD3C0;
    --data-4:#F0A6B8;

    --success:#5FD3C0;
    --warning:#F3C77A;
    --danger:#FF7A8A;

    /* Dark me base pehle hi pass karta hai, to text variants wahi hain */
    --accent-text:var(--accent);
    --data-1-text:var(--data-1);
    --data-2-text:var(--data-2);
    --data-3-text:var(--data-3);
    --data-4-text:var(--data-4);
    --success-text:var(--success);
    --warning-text:var(--warning);
    --danger-text:var(--danger);

    --shadow:0 10px 34px rgba(0,0,0,0.55);
    --inset:none;
  }
}

/* Dark via manual toggle — dono taraf jeetne ke liye dobara. */
:root[data-theme="dark"] {
  --canvas:#0D0910;
  --orb-1:#B15CB0;
  --orb-2:#4A3A80;
  --orb-3:#1E1030;

  --surface-1:rgba(255,255,255,0.055);
  --surface-2:rgba(255,255,255,0.090);
  --surface-solid:#191320;
  --orb-opacity:0.50;

  --hairline:rgba(255,255,255,0.10);
  --hairline-strong:rgba(255,255,255,0.20);
  --sheen:transparent;

  --text-primary:#F3EDF6;
  --text-secondary:#A99BB0;
  --text-tertiary:#918399;

  --accent:#E3A6E0;
  --accent-ink:#2A0F2A;
  --accent-wash:rgba(227,166,224,0.14);

  --data-1:#E3A6E0;
  --data-2:#9B8BE8;
  --data-3:#5FD3C0;
  --data-4:#F0A6B8;

  --success:#5FD3C0;
  --warning:#F3C77A;
  --danger:#FF7A8A;

  --accent-text:var(--accent);
  --data-1-text:var(--data-1);
  --data-2-text:var(--data-2);
  --data-3-text:var(--data-3);
  --data-4-text:var(--data-4);
  --success-text:var(--success);
  --warning-text:var(--warning);
  --danger-text:var(--danger);

  --shadow:0 10px 34px rgba(0,0,0,0.55);
  --inset:none;
}


/* ─────────────────────────────────────────────────────────────
   2. LEGACY ALIAS LAYER
   Purane token naam → naye token. Isi wajah se 647 inline var()
   usages aur maujooda component CSS bina chhue re-skin ho jate hain.
   ───────────────────────────────────────────────────────────── */
:root,
body.mc-theme,
body.dark-mode {
  /* Surfaces
     ⚠️ --bg-page aur --bg-deep pehle `transparent` thay. Wo ghalat tha:
     yeh sirf page ka background nahi, andar ki SATAH ke tor par bhi use
     hote hain — store card ke SALES/PROFIT/ORDERS tiles (.sc-fig),
     .form-panel, .bar-track, image placeholders, aur admin.js ke kai
     inner cards. Transparent hone se wo sab chapte ho gaye thay aur
     "kuch nazar nahi aa raha" ki yehi wajah thi.
     Page ka apna background theme.css khud `body{background:var(--canvas)}`
     aur `.page-body{background:transparent}` se deta hai, is liye inhe
     satah banane me koi nuqsan nahi. */
  --bg-page:var(--surface-2);
  --bg-deep:var(--surface-2);
  --bg-card:var(--surface-1);
  --bg-dark:var(--surface-1);
  --bg-hover:var(--surface-2);
  --bg-input:var(--surface-2);

  /* Brand / primary — teal poori app me "primary" ke tor par use hota hai */
  --teal:var(--accent-text);
  --teal-dark:var(--accent-text);
  --teal-light:var(--accent-wash);
  --teal-dim:var(--accent-wash);
  --teal-border:var(--hairline-strong);
  --teal-header:var(--surface-1);

  /* Status / accents — positional nahi, ma'ani wale */
  --orange:var(--warning-text);
  --orange-d:var(--warning-text);
  --orange-dim:var(--accent-wash);
  --orange-b:var(--hairline-strong);

  --blue:var(--data-4-text);
  --blue-l:var(--data-4-text);
  --blue-dim:var(--accent-wash);
  --blue-b:var(--hairline-strong);

  --green:var(--success-text);
  --green-dim:var(--accent-wash);
  --green-light:var(--accent-wash);

  --yellow:var(--warning-text);
  --yellow-dim:var(--accent-wash);
  --amber-light:var(--accent-wash);

  --red:var(--danger-text);
  --red-dim:var(--accent-wash);
  --red-light:var(--accent-wash);

  --purple:var(--data-2-text);
  --purple-dim:var(--accent-wash);
  --purple-light:var(--accent-wash);
  --purple-dark:var(--data-2-text);

  /* Text */
  --white:var(--text-primary);
  --t1:var(--text-primary);
  --t2:var(--text-secondary);
  --t3:var(--text-tertiary);
  --text-dim:var(--text-tertiary);

  /* Borders */
  --border:var(--hairline);
  --border-md:var(--hairline-strong);

  /* Radii — spec: 20 card / 13 control / 9 chip */
  --r-sm:var(--r-chip);
  --r-md:var(--r-control);
  --r-lg:var(--r-card);
  --r-xl:var(--r-card);
  --radius-sm:var(--r-chip);
  --radius-md:var(--r-control);
  --radius-lg:var(--r-card);
  --radius-xl:var(--r-card);

  /* Type — ek hi system stack, koi webfont nahi */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",sans-serif;
  --display:var(--font);
  --ff-display:var(--font);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ff-mono:var(--mono);

  /* flowmapp-clay ke glass naam — inhe zinda rakha, warna wo pages
     jo abhi tak us par hain toot jayenge. */
  --glass-fill:var(--surface-1);
  --glass-fill-2:var(--surface-2);
  --glass-fill-strong:var(--surface-2);
  --glass-brd:var(--hairline);
  --glass-blur:blur(var(--blur-amount));
  --glass-blur-lite:blur(12px);
  --glass-sh:var(--shadow);
  --glass-sh-sm:var(--shadow);
  --fm-ink:var(--text-primary);
  --fm-carbon:var(--text-primary);
  --fm-graphite:var(--text-secondary);
  --fm-pencil:var(--text-tertiary);
  --fm-paper:var(--surface-solid);
  --fm-signal:var(--accent);
  --fm-voltage:var(--accent);
  --fm-sky:var(--accent-wash);

  /* semantic.css — ma'ani wale rang, ma'ani ke sath map hue */
  --s-sales:var(--data-4-text);
  --s-cost:var(--warning-text);
  --s-profit:var(--success-text);
  --s-alert:var(--danger-text);
  --s-volume:var(--data-2-text);
  --s-wait:var(--warning-text);
  --s-done:var(--success-text);
  --s-money:var(--data-2-text);
  --s-sales-t:var(--accent-wash);
  --s-cost-t:var(--accent-wash);
  --s-profit-t:var(--accent-wash);
  --s-alert-t:var(--accent-wash);
  --s-volume-t:var(--accent-wash);
  --s-wait-t:var(--accent-wash);
  --s-done-t:var(--accent-wash);
  --s-money-t:var(--accent-wash);
  --s-ink:var(--text-primary);
  --s-mid:var(--text-secondary);
  --s-faint:var(--text-tertiary);
  --s-role:var(--accent-text);

  /* ── Page-local palettes (office.css · diet-planner.css · student.css) ──
     Yeh sheets apne alag token set rakhti hain jo SIRF light ke liye likhe
     gaye thay — misal: --of-ink:#0d1b2a (kaala text) aur
     --of-pane:rgba(255,255,255,.58) (safed pane).
     Dark mode me wo safed panes halke grey slab ban jate thay aur kaala text
     unke andar doob jata tha. Isi wajah se Office management, To-list catalog
     (jo .of-kpi use karta hai) aur Diet planner dhundle nazar aa rahe thay.
     Ab yeh bhi theme tokens se aate hain, to mode ke sath badalte hain. */
  --of-ink:var(--text-primary);
  --of-quiet:var(--text-secondary);
  --of-past:var(--text-tertiary);
  --of-line:var(--hairline);
  --of-pane:var(--surface-2);
  --of-edge:var(--hairline);
  --of-live:var(--success-text);
  --of-next:var(--data-4-text);
  --of-late:var(--danger-text);

  --diet-ink:var(--text-primary);
  --diet-quiet:var(--text-secondary);
  --diet-line:var(--hairline);
  --diet-pane:var(--surface-2);
  --diet-edge:var(--hairline);
  --diet-blue:var(--data-4);
  --diet-green:var(--success);
  --diet-amber:var(--warning);
  --diet-rose:var(--danger);

  --st:var(--warning-text);
  --st-deep:var(--warning-text);
  --st-tint:var(--accent-wash);
  --st-line:var(--hairline-strong);

  /* Role tints — sab accent, kyunke rang se ma'ani nahi diya jata */
  --role-admin:var(--accent);
  --role-partner:var(--accent);
  --role-investor:var(--accent);
  --role-employee:var(--accent);
  --role-student:var(--accent);
}


/* ── ⚠️ office.css aur diet-planner.css apne tokens CONTAINER CLASS par
   likhte hain (`.of { --of-ink:… }`, `.diet { --diet-ink:… }`), :root par
   nahi. Is liye ancestor level ka alias unke andar haar jata tha — Office
   aur To-list catalog me purane literals (#0d1b2a kaala text, #00b87c) hi
   chalte rehte thay. Wahi selector dobara, theme.css baad me load hoti hai
   to yeh jeet jata hai. ── */
.of {
  --of-ink:var(--text-primary);
  --of-quiet:var(--text-secondary);
  --of-past:var(--text-tertiary);
  --of-line:var(--hairline);
  --of-pane:var(--surface-2);
  --of-edge:var(--hairline);
  --of-live:var(--success-text);
  --of-next:var(--data-4-text);
  --of-late:var(--danger-text);
}
.diet {
  --diet-ink:var(--text-primary);
  --diet-quiet:var(--text-secondary);
  --diet-line:var(--hairline);
  --diet-pane:var(--surface-2);
  --diet-edge:var(--hairline);
  --diet-blue:var(--data-4);
  --diet-green:var(--success);
  --diet-amber:var(--warning);
  --diet-rose:var(--danger);
}


/* ─────────────────────────────────────────────────────────────
   3. BASE + AMBIENT ORBS
   Blur ko refract karne ke liye kuch chahiye. Warna glass
   sirf flat grey plastic lagta hai.
   ───────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }

/* ⚠️ `color-scheme` app ke theme ke SATH bandha hona chahiye, OS ke sath
   nahi. Pehle sirf `light dark` tha — us ka matlab "browser khud chun le",
   aur browser OS ki setting dekhta hai. Is liye OS light par hote hue app
   dark me chalane par native <select> ka dropdown SAFED khulta tha aur
   uske options halke grey — bilkul na parhe jaane wale (screenshot me
   wahi tha). Ab teen soorat saaf likhi hain, wahi tarteeb jo baqi tokens
   ki hai, to dropdown app ke theme ko follow karta hai. */
html { color-scheme:light; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { color-scheme:dark; }
}
html[data-theme="dark"]  { color-scheme:dark; }
html[data-theme="light"] { color-scheme:light; }

body {
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font);
  font-size:15px;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--dur-theme) var(--ease-out),
             color var(--dur-theme) var(--ease-out);
}

/* Fixed ambient layer. JS ki zaroorat nahi — body ka pseudo-element. */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(46vw 46vw at 8% 4%,   var(--orb-1) 0%, transparent 62%),
    radial-gradient(40vw 40vw at 96% 26%, var(--orb-2) 0%, transparent 62%),
    radial-gradient(52vw 52vw at 34% 96%, var(--orb-3) 0%, transparent 62%);
  filter:blur(100px);
  opacity:var(--orb-opacity);
  animation:orb-drift 28s var(--ease-out) infinite alternate;
  transition:background var(--dur-theme) var(--ease-out);
}
@keyframes orb-drift {
  to { transform:translate3d(3vw,-2vh,0) scale(1.1); }
}


/* ─────────────────────────────────────────────────────────────
   4. TYPOGRAPHY — 34/28/22/17/15/13/11, 600 ceiling
   ───────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family:var(--font); text-wrap:balance; margin:0 0 8px; }
h1 { font-size:34px; font-weight:600; letter-spacing:-0.03em; line-height:1.15; }
h2 { font-size:28px; font-weight:600; letter-spacing:-0.03em; line-height:1.2; }
h3 { font-size:22px; font-weight:600; letter-spacing:-0.01em; line-height:1.25; }
h4 { font-size:17px; font-weight:500; letter-spacing:-0.01em; }
h5,h6 { font-size:15px; font-weight:500; letter-spacing:0; }

/* 600 hard ceiling. Presence size/spacing/colour se aati hai, weight se nahi. */
b,strong,th,
.panel-title,.metric-value,.metric-label,.topbar-title,
.nav-item,.btn-primary,.btn-ghost,.filter-pill,.modal-title {
  font-weight:600;
}

/* Har number tabular — update par figures hilne na paayein */
.metric-value,.metric-sub,.stat-value,td,th,
.of-kpi,.mono,[class*="-num"],[class*="amount"],[class*="total"] {
  font-variant-numeric:tabular-nums;
}

.eyebrow,.nav-section-label {
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-tertiary);
}

code,pre,.mono { font-family:var(--mono); }


/* ─────────────────────────────────────────────────────────────
   5. GLASS SURFACES
   saturate(180%) hi wo cheez hai jo isay macOS vibrancy banati hai,
   warna generic frosted glass. Isay na hatao.
   ───────────────────────────────────────────────────────────── */
.panel,
.metric-card,
.store-card,
.note-card,
.account-selector,
.modal-card,
.glass {
  position:relative;
  z-index:1;
  /* ── Rangeen sheeshe wali satah — wahi zaban jo "My earnings" card ki hai ──
     Har panel par do halki rangat aur ek tirchhi laminate chamak. Pehle sab
     panel flat surmai thay aur sirf earnings card rangeen tha; ab poora
     safha ek hi zaban bolta hai.

     ⚠️ Rangat 5% par bandhi hui hai, aur ye SOCH kar hai. Naapa gaya:
     `--text-tertiary` dark theme me sirf 5% tint tak 4.5:1 rakhta hai
     (secondary 17.5% tak, magar tertiary hi sab se pehle tootta hai).
     Panels tertiary text se bhare hote hain — "99% · Excellent", "3 pending",
     table ki tareekhein. Is liye satah ki rangat halki hi rehti hai.

     Pehle upar ek 3px ki rangeen patti aur ring bhi thi; hata di gayi —
     har card par bijli si lakeer nazar aati thi aur safha shor karta tha.
     Ab rangat sirf satah par hai, kinare saade.

     Earnings card 30% par isi liye chal jata hai ke us ka SAB text
     --text-primary hai (jo 44% tak theek rehta hai). Farq jaan-boojh kar
     hai: hero card gehra, baqi panel halke.

     Pseudo-element istemal nahi kiya: `.metric-card::before` (style.css)
     aur `.metric-card[data-sem]::after` (semantic.css) pehle se lage hue
     hain. Is liye sab kuch background ki parton me hai. */
  --panel-hue: var(--data-1);
  --panel-hue-2: var(--data-2);
  background:
    radial-gradient(125% 95% at 3% 0%,
      color-mix(in srgb, var(--panel-hue) 5%, transparent) 0%, transparent 56%),
    radial-gradient(115% 90% at 97% 4%,
      color-mix(in srgb, var(--panel-hue-2) 4%, transparent) 0%, transparent 60%),
    linear-gradient(104deg, transparent 41%,
      color-mix(in srgb, var(--text-primary) 3%, transparent) 47%, transparent 54%),
    var(--surface-1);
  backdrop-filter:var(--glass-filter);
  -webkit-backdrop-filter:var(--glass-filter);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  box-shadow:var(--inset),var(--shadow);
  contain:paint;
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}

.panel:hover,
.metric-card:hover,
.store-card:hover,
.note-card:hover {
  transform:translateY(-3px);
  border-color:var(--hairline-strong);
}

/* Glass ke andar glass nahi. Andar wale surface-2 lete hain, apna blur nahi. */
.panel .panel,
.panel .metric-card,
.panel .note-card,
.metric-card .metric-card,
.modal-card .panel,
.inner-surface {
  background:var(--surface-2);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:var(--r-control);
  box-shadow:none;
}
.panel .panel:hover,
.panel .metric-card:hover { transform:none; }


/* ─────────────────────────────────────────────────────────────
   6. PRIMITIVES
   ───────────────────────────────────────────────────────────── */
.btn-primary,.btn-ghost,.btn-icon,button,.filter-pill {
  font-family:var(--font);
  cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out);
}
.btn-primary:hover,.btn-ghost:hover,.btn-icon:hover,.filter-pill:hover { transform:scale(1.02); }
.btn-primary:active,.btn-ghost:active,.btn-icon:active,.filter-pill:active { transform:scale(0.97); }

/* Bhari hui primary button — wahi jori jo pill me hai, taake dono modes
   me safed-par-orange (2.76:1) jaisa masla na ho. */
.btn-primary {
  height:36px;
  padding:0 18px;
  background:var(--accent-text);
  color:var(--surface-solid);
  border:none;
  border-radius:var(--r-control);
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.01em;
}

.btn-ghost {
  height:36px;
  padding:0 16px;
  background:var(--surface-2);
  color:var(--text-primary);
  border:1px solid var(--hairline);
  border-radius:var(--r-control);
  font-size:13px;
  font-weight:500;
}
.btn-ghost:hover { border-color:var(--hairline-strong); }

.btn-icon {
  width:32px;
  height:32px;
  display:inline-grid;
  place-items:center;
  background:var(--surface-2);
  color:var(--text-secondary);
  border:1px solid var(--hairline);
  border-radius:var(--r-chip);
}
.btn-icon:hover { color:var(--text-primary); border-color:var(--hairline-strong); }

.field-input,input[type="text"],input[type="number"],input[type="date"],
input[type="email"],input[type="password"],input[type="search"],select,textarea {
  height:36px;
  padding:0 12px;
  background:var(--surface-2);
  color:var(--text-primary);
  border:1px solid var(--hairline);
  border-radius:var(--r-control);
  font-family:var(--font);
  font-size:15px;
  transition:border-color var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-micro) var(--ease-out);
}
textarea { height:auto; padding:10px 12px; line-height:1.5; }
.field-input::placeholder,input::placeholder,textarea::placeholder { color:var(--text-tertiary); }
.field-input:focus,input:focus,select:focus,textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.field-input:disabled,input:disabled,select:disabled { opacity:.5; cursor:not-allowed; }

/* ⚠️ Native dropdown ke options ko background KHUD dena parta hai.
   <option> ka default background transparent hota hai, aur Windows Chrome
   popup ke peechhe apni SAFED sheet paint karta hai — chahe html par
   `color-scheme:dark` theek se lagi ho (naapa: htmlColorScheme "dark",
   optBg "rgba(0,0,0,0)"). Text select se `--text-primary` (halka safed)
   inherit karta tha, natija safed-par-safed: options bilkul na parhe jaate.
   Pehle sirf `.time-select option` aur `.mkt-select option` par patch tha,
   is liye har DUSRA select (store modal ka Market bhi) toota hua tha. Ab ek
   hi jagah, HAR select ke liye. */
select option,select optgroup {
  background-color:var(--surface-solid);
  color:var(--text-primary);
  font-weight:400;
}
/* Chuna hua option — apna jora rakhna parta hai, warna popup ka default
   highlight rang aa jata hai aur text us par ghayab ho jata.
   ⚠️ Rang GHAIR-SHAFFAF hona zaroori hai. Pehle yahan `--accent-wash` tha,
   magar wo halki alpha wali wash hai — popup ki safed sheet us ke aar-paar
   se jhalakti thi aur ratio 1.05:1 reh gaya (naapa). Wahi bhari `-text`
   variant + solid surface jora, jo filled buttons me chalta hai. */
select option:checked {
  background-color:var(--accent-text);
  color:var(--surface-solid);
}

/* Validation — rang ke sath hamesha lafz bhi (rang akela ma'ani nahi deta) */
.field-input.invalid,input.invalid,.pm-input.invalid,[aria-invalid="true"] {
  border-color:var(--danger);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.field-hint { font-size:13px; color:var(--text-tertiary); }
.field-error { font-size:13px; color:var(--danger); font-weight:500; }
.field-success { font-size:13px; color:var(--success); font-weight:500; }

input[type="checkbox"],input[type="radio"] {
  width:17px; height:17px;
  accent-color:var(--accent);
  cursor:pointer;
}

.filter-pill {
  height:30px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  background:transparent;
  color:var(--text-secondary);
  border:1px solid var(--hairline);
  border-radius:var(--r-chip);
  font-size:13px;
  font-weight:500;
}
/* Bhari hui active pill. style.css har role ke liye
   `background:var(--teal); color:#fff` deta tha — dark mode me wo halke
   gulabi par safed likhai ban jati thi (1.13:1). Yahan jori aisi hai jo
   DONO modes me chalti hai:
     fill  = --accent-text  (light me gehra, dark me halka)
     ink   = --surface-solid (light me safed, dark me gehra)
   Yani fill aur ink hamesha aik doosre ke ulat rehte hain. */
.filter-pill.active,
.filter-pill.active-admin,
.filter-pill.active-investor,
.filter-pill.active-partner,
.filter-pill.active-employee {
  background:var(--accent-text);
  color:var(--surface-solid);
  border-color:var(--accent-text);
  font-weight:600;
  box-shadow:none;
}

.badge,.chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 9px;
  border-radius:var(--r-chip);
  background:var(--accent-wash);
  color:var(--text-primary);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.01em;
}


/* ─────────────────────────────────────────────────────────────
   7. CHROME — sidebar, topbar, nav
   ───────────────────────────────────────────────────────────── */
/* ⚠️ Yahan `position` ko HARGIZ na chhero.
   .sidebar `position:fixed; height:100vh` hai aur .topbar `position:sticky`.
   Ek dafa main ne yahan `position:relative` likh diya tha — sidebar flow me
   aa gaya, 100vh ki jagah kha gaya, aur poora page 800px neeche chala gaya.
   In dono ke apne z-index (100 aur 50) orb layer (0) se pehle hi oopar hain. */
.sidebar,.topbar {
  background:var(--surface-1);
  backdrop-filter:var(--glass-filter);
  -webkit-backdrop-filter:var(--glass-filter);
  border-color:var(--hairline);
}

/* Orb layer positioned hai (z-index:0), is liye wo normal in-flow content ke
   OOPAR paint hota. Content ko us se aage lane ke liye page-body ko apna
   stacking context de dete hain — har element ko alag se karne ke bajaye. */
.page-body {
  position:relative;
  z-index:1;
  background:transparent;
}
.topbar-title { font-size:22px; font-weight:600; letter-spacing:-0.01em; color:var(--text-primary); }

/* Nav ka rhythm tight — pehle har item 40px tha aur labels door door
   lagte thay. Ab 34px, gap 1px: aik nazar me poori fehrist aa jati hai. */
.sidebar-nav { padding-top:6px; padding-bottom:6px; }
.nav-item {
  position:relative;
  display:flex; align-items:center; gap:10px;
  min-height:34px; padding:0 11px;
  background:transparent;
  border:none;
  border-radius:var(--r-chip);
  color:var(--text-secondary);
  font-size:14px;
  font-weight:500;
  transition:color var(--dur-base) var(--ease-out);
}
.nav-item + .nav-item { margin-top:1px; }
.nav-item svg { width:15px; height:15px; flex:none; }
.nav-item:hover { color:var(--text-primary); }
/* Active item ka rang accent NAHI. Light mode me accent (#F97316) 14px text
   par sirf 1.91:1 deta tha — parhne layak nahi. Active hone ki khabar
   bhari hui rail aur weight 600 se milti hai, rang se nahi. */
.nav-item.active { color:var(--text-primary); font-weight:600; }

/* Section labels ko bhi qareeb laaya gaya */
.nav-section-label {
  padding:0 11px;
  margin:12px 0 5px;
  font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-tertiary);
}
.nav-section-label:first-child { margin-top:2px; }

/* Highlight nav-item ke peeche se slide karta hai. Position JS
   (theme-nav.js) set karta hai; JS na chale to active item apna
   background le leta hai — graceful fallback. */
.nav-rail {
  position:absolute;
  /* ⚠️ `top:0` zaroori hai. Iske baghair absolute element apni *static*
     position se shuru hota hai — yani nav ki padding ke andar se (~10px
     neeche) — aur theme.js ka translateY 0 se ginta hai, to rail har dafa
     7px ooncha reh jata tha. Base ko yahan pin kar diya. */
  top:0;
  left:6px; right:6px;
  height:0;
  border-radius:var(--r-control);
  /* Bhara hua highlight, khali outline nahi. Pehle 1px solid accent ka
     border tha — wo selection ki tarah nahi, kisi input ya focus ring ki
     tarah dikhta tha. macOS sidebar me chuna hua row bhara hota hai. */
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  pointer-events:none;
  opacity:0;
  transition:transform var(--dur-base) var(--ease-out),
             height var(--dur-base) var(--ease-out),
             opacity var(--dur-base) var(--ease-out);
}
.nav-rail.ready { opacity:1; }
.nav-rail.ready ~ .nav-item.active,
nav:has(.nav-rail.ready) .nav-item.active { background:transparent; }
nav:not(:has(.nav-rail.ready)) .nav-item.active { background:var(--accent-wash); }

/* Segmented control — pill spring par slide karti hai, kudti nahi */
.acc-tab,.console-tab,.ri-case-tab {
  position:relative;
  background:transparent;
  border:none;
  color:var(--text-secondary);
  /* 13px se 15px — bar poori chaurai leta hai magar naam itne chhote thay ke
     parhne ke liye jhukna parta tha. Ab body text jitne. */
  font-size:15px;
  font-weight:500;
  border-radius:var(--r-chip);
  transition:color var(--dur-base) var(--ease-out);
}
.acc-tab.active,.console-tab.active,.ri-case-tab.active { color:var(--text-primary); font-weight:600; }
.seg-pill {
  position:absolute;
  top:3px; bottom:3px;
  border-radius:var(--r-chip);
  background:var(--surface-2);
  border:1px solid var(--hairline);
  pointer-events:none;
  transition:transform var(--dur-base) var(--ease-spring),
             width var(--dur-base) var(--ease-spring);
}


/* ─────────────────────────────────────────────────────────────
   8. OVERLAYS — iOS sheet presentation
   ───────────────────────────────────────────────────────────── */
.modal-bg {
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.32);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity var(--dur-sheet) var(--ease-out);
}
.modal-bg.open { display:grid; opacity:1; }

.modal-card {
  transform:scale(.94);
  opacity:0;
  transition:transform var(--dur-sheet) var(--ease-out),
             opacity var(--dur-sheet) var(--ease-out);
}
.modal-bg.open .modal-card { transform:scale(1); opacity:1; }
.modal-title { font-size:22px; font-weight:600; letter-spacing:-0.01em; }

/* Sheet khule to peeche ka page peechay hat jata hai */
body.sheet-open .page-body,
body.sheet-open .sidebar,
body.sheet-open .topbar {
  transform:scale(.98);
  filter:brightness(.92);
  transition:transform var(--dur-sheet) var(--ease-out),
             filter var(--dur-sheet) var(--ease-out);
}

/* Dropdown / popover — apne anchor se scale hota hai */
.dropdown,.popover,.notif-panel {
  transform-origin:top right;
  transform:scale(.96);
  opacity:0;
  background:var(--surface-1);
  backdrop-filter:var(--glass-filter);
  -webkit-backdrop-filter:var(--glass-filter);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  box-shadow:var(--inset),var(--shadow);
  transition:transform 200ms var(--ease-out),opacity 200ms var(--ease-out);
}
.dropdown.open,.popover.open,.notif-panel.open { transform:scale(1); opacity:1; }

/* Drawer — kinare se */
.drawer,.st-drawer,#lessonDrawer {
  background:var(--surface-1);
  backdrop-filter:var(--glass-filter);
  -webkit-backdrop-filter:var(--glass-filter);
  border-left:1px solid var(--hairline);
  transition:transform var(--dur-sheet) var(--ease-out);
}

/* Toast — spring ke sath upar se */
.toast,#toast {
  position:fixed;
  z-index:200;
  background:var(--surface-solid);
  color:var(--text-primary);
  border:1px solid var(--hairline);
  border-radius:var(--r-control);
  box-shadow:var(--shadow);
  font-size:15px;
  font-weight:500;
  transform:translateY(-14px);
  opacity:0;
  transition:transform var(--dur-base) var(--ease-spring),
             opacity var(--dur-base) var(--ease-out);
}
.toast.show,#toast.show { transform:translateY(0); opacity:1; }

.tooltip,.mc-line-tooltip {
  background:var(--surface-solid);
  color:var(--text-primary);
  border:1px solid var(--hairline);
  border-radius:var(--r-chip);
  box-shadow:var(--shadow);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}


/* ─────────────────────────────────────────────────────────────
   9. DATA — tables, metrics, states
   Table rows par blur NAHI. Ek viewport me ~8 backdrop-filter ki
   had hai; ek lambi list usay akele hi phaar deti hai.
   ───────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-control);
  border:1px solid var(--hairline);
}
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th {
  position:sticky;
  top:0;
  background:var(--surface-solid);
  color:var(--text-tertiary);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.08em;
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--hairline);
  white-space:nowrap;
}
tbody td {
  background:var(--surface-solid);
  color:var(--text-secondary);
  padding:10px 14px;
  border-bottom:1px solid var(--hairline);
}
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--surface-2); }
tbody td:first-child { color:var(--text-primary); font-weight:500; }

.metric-label { font-size:13px; font-weight:500; color:var(--text-secondary); }
.metric-value { font-size:28px; font-weight:600; letter-spacing:-0.03em; color:var(--text-primary); line-height:1.1; }
.metric-sub   { font-size:11px; color:var(--text-tertiary); }
.metric-sub.pos { color:var(--success); }
.metric-sub.neg { color:var(--danger); }

/* Skeleton — 1.4s shimmer sweep */
.skeleton {
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-1) 50%,var(--surface-2) 75%);
  background-size:200% 100%;
  border-radius:var(--r-chip);
  animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position:-200% 0; } }

.empty-state { text-align:center; padding:40px 24px; color:var(--text-secondary); }
.empty-state-title { font-size:17px; font-weight:500; color:var(--text-primary); margin-bottom:4px; }
/* Page transition — poora section 12px upar se aata hai.
   ------------------------------------------------------------------
   ⚠️ YAHAN "har click par blink" ka asli sabab tha.

   Pehle yahan children par bhi wohi animation thi, 40ms ke stagger ke
   sath:

     .section-fade > *            { animation:section-in 450ms both }
     .section-fade > *:nth-child(6){ animation-delay:240ms }

   Masla: `section-fade` har section ka PERMANENT class hai, aur `> *`
   us ke bachon par lagta hai. CSS animation har NAYE element par shuru
   hoti hai — aur is app me har render `innerHTML` dobara likhta hai
   (renderMetrics, loadCostsSection, renderPrayerTracker, office tabs,
   users ka role filter, products ka store filter — sab). To jo animation
   sirf page badalne ke liye bani thi, wo HAR data update par dobara chal
   padti thi.

   `both` (fill-mode) ne isay saaf nazar aane wala bana diya: delay ke
   dauran element `from` haalat par ruka rehta hai — yani opacity 0. Napa
   gaya: re-render ke foran baad chaaron bachon ki opacity 0 aur 12px
   neeche, 40–240ms tak wahi, phir 450ms ki fade. Kul 690ms tak content
   ghayab — yehi "blink phir update" tha.

   Section KHUD par animation rakhna mehfooz hai: wo element kabhi dobara
   nahi banta, is liye `innerHTML` badalne par dobara nahi chalti (napa
   gaya: currentTime 450 par `finished` hi rehti hai). Sirf display
   none→block par chalti hai — yani asal page transition par, jahan iski
   zaroorat hai. Is liye section ka fade barqarar hai, bachon ka stagger
   hata diya gaya.
   ------------------------------------------------------------------ */
.section-fade { animation:section-in var(--dur-page) var(--ease-out) both; }
@keyframes section-in {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}


/* ─────────────────────────────────────────────────────────────
   9b. PORTED FROM flowmapp-clay.css
   Yeh rules SIRF flowmapp-clay me thay — kahin aur nahi. Us file ko
   retire karne se pehle inhe yahan lana zaroori tha, warna product
   modal aur brand logos bilkul be-style ho jate.
   Tokenised, aur weight ceiling 600 ke andar.
   ───────────────────────────────────────────────────────────── */

/* Add / Edit Product modal — .pm-* form */
.pm-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; }
.pm-head-title { font-size:22px; font-weight:600; color:var(--text-primary); letter-spacing:-0.01em; }
.pm-head-sub { font-size:13px; color:var(--text-tertiary); margin-top:3px; line-height:1.35; }
.pm-body { display:flex; flex-direction:column; gap:16px; }
.pm-image-row { display:flex; gap:14px; align-items:flex-start; }
.pm-thumb {
  width:82px; height:82px; flex-shrink:0;
  border-radius:var(--r-control);
  border:1px solid var(--hairline);
  background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-tertiary); overflow:hidden;
}
.pm-thumb img { width:100%; height:100%; object-fit:cover; }
.pm-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pm-field { display:flex; flex-direction:column; gap:6px; }
.pm-field label { font-size:13px; font-weight:500; color:var(--text-secondary); letter-spacing:0; }
.pm-field .req { color:var(--danger); font-weight:600; margin-left:1px; }
.pm-input {
  width:100%; box-sizing:border-box;
  font-family:var(--font); font-size:15px;
  color:var(--text-primary);
  background:var(--surface-2);
  border:1px solid var(--hairline);
  border-radius:var(--r-control);
  padding:10px 14px; outline:none;
  transition:border-color var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-micro) var(--ease-out);
}
.pm-input::placeholder { color:var(--text-tertiary); }
.pm-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.pm-input.invalid { border-color:var(--danger); box-shadow:0 0 0 3px var(--accent-wash); }
textarea.pm-input { resize:vertical; min-height:72px; line-height:1.5; }
.pm-input-prefix {
  display:flex; align-items:center;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  border-radius:var(--r-control);
  overflow:hidden;
  transition:border-color var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-micro) var(--ease-out);
}
.pm-input-prefix:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.pm-input-prefix .prefix { padding:0 2px 0 14px; color:var(--text-tertiary); font-weight:600; font-size:15px; }
.pm-input-prefix .pm-input { border:none; box-shadow:none; background:transparent; border-radius:0; padding-left:6px; }
.pm-hint { font-size:11px; color:var(--text-tertiary); line-height:1.35; }
.pm-err { font-size:13px; color:var(--danger); font-weight:500; }
.pm-err:empty { display:none; }
.pm-foot {
  display:flex; gap:10px; justify-content:flex-end; align-items:center;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--hairline);
}
.pm-modal { border-radius:var(--r-card); }
.pm-backdrop { background:rgba(0,0,0,.32); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

/* Brand logos — background-image se aate hain, andar ka SVG chhupa
   hota hai. Palette ka hissa nahi, functional branding hai. */
.brand-icon,
.brand-icon-sm,
.logo-mark,
.brand-mark {
  background-color:var(--surface-solid);
  background-image:url('/assets/ecom-app-icon.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:88% 88%;
  overflow:hidden;
}
.brand-icon > svg,
.brand-icon-sm > svg,
.logo-mark > svg,
.brand-mark > svg { display:none; }
.session-check .brand-icon {
  background:var(--surface-solid) url('/assets/ecom-app-icon.png') center/88% 88% no-repeat;
}

/* Mission-Control chart text — SVG fill, is liye colour token se */
.mc-bar-val { fill:var(--text-primary); font-size:11px; font-weight:600; font-family:var(--font); }
.mc-bar-lbl { fill:var(--text-tertiary); font-size:11px; font-family:var(--font); }
.mc-heat-cell { background:var(--surface-2); }

/* ── Weekly-volume column chart ────────────────────────────────────
   Masla: is svg ka koi CSS hi nahi tha. viewBox 640×200 tha aur
   width khud 100% ho jati thi, to 2560px screen par panel 1129px
   chaura hua aur svg 1.71× BARA ho gaya — 341px lamba, aur andar ka
   11px text 18.8px par chhap raha tha (napa gaya). Neeche wale
   graphs isi liye "bohut bare" lag rahe thay.

   Hal: height pixel me pakki, aur mcRenderBars() viewBox ko container
   ki ASAL pixel chaurai par set karta hai. Scale hamesha 1:1 rehta
   hai, is liye 11px ka text har screen par 11px hi rehta hai. */
.mc-bars-wrap { height:168px; }
.mc-bars-svg  { display:block; width:100%; height:168px; }
.mc-bar-base  { stroke:var(--hairline); stroke-width:1; }


/* ─────────────────────────────────────────────────────────────
   9b-2. MARGIN & RISK PANELS
   Chaar panel: margin health, tracking age, margin-vs-volume
   scatter, listing funnel. Rang sirf token se, aur har rang ke
   sath lafz bhi — rang akela kabhi maani na uthaye.
   ───────────────────────────────────────────────────────────── */

/* Tone → rang. Ek hi jagah, to naya panel add karna sasta hai. */
[data-tone="danger"]  { --mo-c:var(--danger);  --mo-ct:var(--danger-text);  }
[data-tone="warning"] { --mo-c:var(--warning); --mo-ct:var(--warning-text); }
[data-tone="success"] { --mo-c:var(--success); --mo-ct:var(--success-text); }
[data-tone="data-4"]  { --mo-c:var(--data-4);  --mo-ct:var(--data-4-text);  }

/* ── Margin distribution strip ──
   8px se 14px — ye panel ka wahid "graph" hai, is liye patli lakeer ki
   jagah ab asal bar lagta hai aur chhote hisse (Loss/Thin) bhi nazar
   aate hain. */
.mo-strip { display:flex; gap:2px; height:14px; border-radius:999px; overflow:hidden; margin-bottom:10px; }
.mo-seg   { background:var(--mo-c); min-width:4px; }

.mo-key   { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:11px; }
.mo-key-i { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); }
.mo-key-i i { width:8px; height:8px; border-radius:2px; background:var(--mo-c); flex:none; }
.mo-key-i b { font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }

.mo-alert {
  font-size:12px; color:var(--text-primary);
  background-color:color-mix(in srgb, var(--danger) 14%, transparent);
  box-shadow:inset 0 0 0 1px var(--danger);
  padding:6px 10px; border-radius:var(--r-chip); margin-bottom:10px;
}
.mo-alert b { font-weight:600; }

/* ── Worst-orders list ── */
.mo-rows { display:flex; flex-direction:column; }
/* Store apna column — pehle order id ke neeche tha (do lines) aur koi
   column bhi content par depend karta to rows tirchhi ho jati thin.
   Ab sab kuch pakki chaurai / fr par, is liye qatar seedhi banti hai. */
.mo-row {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.62fr) 96px 96px 92px 66px;
  gap:9px; align-items:center; padding:9px 0;
  border-bottom:1px solid var(--hairline); font-size:13px;
  font-variant-numeric:tabular-nums;
}
.mo-row:last-child { border-bottom:0; }
.mo-row-oid   { font-weight:500; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mo-row-store { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mo-row-sub   { font-size:11px; font-weight:400; color:var(--text-tertiary); }
.mo-row-num  { text-align:right; color:var(--text-secondary); white-space:nowrap; }
.mo-row-num[data-tone] b { color:var(--mo-ct); font-weight:600; }
.mo-row-pct  {
  text-align:center; font-weight:600; font-size:11px;
  color:var(--text-primary); padding:2px 0; border-radius:var(--r-chip);
  background-color:color-mix(in srgb, var(--mo-c) 20%, transparent);
  box-shadow:inset 0 0 0 1px var(--mo-c);
}

/* ── Tracking age buckets ── */
.mo-age {
  display:grid; grid-template-columns:64px 1fr 34px 68px auto;
  gap:9px; align-items:center; padding:8px 0;
  border-bottom:1px solid var(--hairline); font-size:12px;
  font-variant-numeric:tabular-nums;
}
.mo-age:last-of-type { border-bottom:0; }
.mo-age-l { color:var(--text-secondary); white-space:nowrap; }
.mo-age-track { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.mo-age-fill  { height:100%; border-radius:999px; background:var(--mo-c); min-width:3px; }
.mo-age-n { text-align:right; font-weight:600; color:var(--text-primary); }
.mo-age-v { text-align:right; color:var(--text-secondary); }
.mo-age-h { font-size:11px; color:var(--mo-ct); white-space:nowrap; }

.mo-foot { margin-top:9px; font-size:11px; color:var(--text-tertiary); }
.mo-foot b { font-weight:600; color:var(--text-secondary); }

/* ── Scatter ──
   Height pixel me pakki aur viewBox container ki asal chaurai par —
   wahi 1:1 usool jo .mc-bars-svg par hai, warna text scale ho jata hai. */
.mo-scatter-wrap { height:190px; }
.mo-scatter-svg  { display:block; width:100%; height:190px; overflow:visible; }
.mo-sc-axis { stroke:var(--hairline-strong); stroke-width:1; }
.mo-sc-thin { stroke:var(--warning); stroke-width:1; stroke-dasharray:3 3; opacity:.75; }
.mo-sc-zero { stroke:var(--danger);  stroke-width:1; stroke-dasharray:3 3; opacity:.75; }
.mo-sc-t    { fill:var(--text-tertiary); font-size:10px; font-family:var(--font); }
.mo-sc-dot  { stroke:var(--surface-solid); stroke-width:1.5; }

.mo-note { margin-top:8px; font-size:11px; color:var(--text-secondary); line-height:1.5; }
.mo-note b { font-weight:600; color:var(--text-primary); }

/* ── Listing funnel ── */
.mo-fun {
  display:grid; grid-template-columns:96px 1fr 40px auto;
  gap:9px; align-items:center; padding:8px 0;
  border-bottom:1px solid var(--hairline); font-size:12px;
  font-variant-numeric:tabular-nums;
}
.mo-fun:last-child { border-bottom:0; }
.mo-fun-l { color:var(--text-secondary); }
.mo-fun-track { height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.mo-fun-fill  { height:100%; border-radius:999px; background:var(--mo-c); min-width:3px; }
.mo-fun-n { text-align:right; font-weight:600; color:var(--text-primary); }
.mo-fun-d { font-size:11px; color:var(--text-tertiary); white-space:nowrap; }

/* ── Sales vs profit: donut + breakdown ──
   Donut baayen, chaar qatarein daayen. Neeche 560px se qatarein donut
   ke neeche chali jati hain (bars 60px se kam me bekar lagti hain). */
.svp { display:flex; align-items:center; gap:18px; }
.svp-donut { position:relative; width:132px; height:132px; flex:none; }
.svp-center {
  position:absolute; inset:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.svp-pct {
  font-size:22px; font-weight:600; letter-spacing:-0.01em; line-height:1.1;
  color:var(--text-primary); font-variant-numeric:tabular-nums;
}
.svp-cap { font-size:11px; color:var(--text-tertiary); margin-top:1px; }

.svp-rows { flex:1; min-width:0; display:flex; flex-direction:column; }
.svp-row {
  display:grid; grid-template-columns:66px 1fr auto;
  gap:10px; align-items:center; padding:6px 0;
  font-size:12px; font-variant-numeric:tabular-nums;
}
.svp-l     { color:var(--text-secondary); }
.svp-track { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.svp-fill  { height:100%; border-radius:999px; background:var(--mo-c); min-width:3px; }
.svp-v     { text-align:right; font-weight:600; color:var(--text-primary); white-space:nowrap; }

@media (max-width:560px) {
  .svp { flex-direction:column; align-items:stretch; gap:12px; }
  .svp-donut { align-self:center; }
}

/* ── To-list catalog: row panel se GEHRI ──
   `--of-pane` = `--surface-2` = dark me rgba(255,255,255,.09) — yani SAFED
   tint. Is liye har product ka row apne panel se HALKA lag raha tha aur
   "techy" ke bajaye dhula hua. Ab row canvas ki taraf jhukti hai: dark me
   gehri (near-black), light me halki grey. Ek hi declaration dono theme me
   theek kaam karti hai kyunke --canvas khud theme ke sath badalta hai. */
.of .of-row {
  background:color-mix(in srgb, var(--canvas) 78%, transparent);
  border-color:var(--hairline-strong);
}
.of .of-row:hover {
  background:color-mix(in srgb, var(--canvas) 88%, transparent);
  border-color:var(--accent);
}
/* Row ke andar ke neutral chips row se thora oopar uthe hue rehne chahiye,
   warna gehri row par wo ghayab ho jate hain. */
.of .of-row .cat-chip { background:var(--surface-2); border-color:var(--hairline-strong); }

/* ── Store cards ──
   (a) Card gehra + glassy — text par contrast milta hai.
   (b) Sab card barabar lambai ke: grid row me stretch, aur andar flex
       column, to AliExpress wala hissa neeche pin ho jata hai.
   (c) AliExpress list ki lambai capped — pehle jis store ki id save thi
       uska card doosron se kaafi lamba ho jata tha (screenshot me wahi
       farq nazar aa raha tha). */
/* Minimum 220px se 264px kiya: 220px par AliExpress row ke chaar action
   buttons (109px) ke baad content ke liye sirf 55px bachte thay — tag do
   lines me tootta aur email 10px ki reh jati thi (napa gaya). 264px par
   tag + truncated email aaraam se ek line me aa jate hain. */
.store-grid {
  align-items:stretch;
  grid-template-columns:repeat(auto-fill, minmax(264px, 1fr));
}
.store-card {
  display:flex; flex-direction:column;
  /* ⚠️ Ye rule apna `background` khud rakhta hai, is liye upar wali rangeen
     parat yahan mit jati thi (naapa: store-card par 0 gradients jabke baqi
     panels par 4). Wahi parat yahan dobara, magar store-card ke apne base
     rang par — warna ye akela panel flat surmai reh jata. */
  /* ⚠️ Store-card ki satah baqi panels se ZIADA shaffaf hai (canvas 74%),
     is liye us par gunjaish hi nahi. Naapa gaya: light theme me tertiary
     text BINA kisi tint ke 4.53:1 par hai — yani 0.4% se ziada rangat
     lagate hi toot jata hai. (Ye pehle se aisa tha.) Is liye yahan satah
     par rangat nahi dali gayi. */
  background:
    color-mix(in srgb, var(--canvas) 74%, transparent);
  border-color:var(--hairline-strong);
  backdrop-filter:var(--glass-filter);
  -webkit-backdrop-filter:var(--glass-filter);
}
.store-card .alix { margin-top:auto; }
.store-card .alix-list { max-height:132px; overflow-y:auto; }

/* ⚠️ AliExpress row ke compact rules yahan NAHI ho sakte: wo <style>
   store-aliexpress.js se aata hai aur head me theme.css ke BAAD lagta
   hai, is liye yahan likha hua kabhi jeet nahi sakta (napa gaya — row
   64px par ruka reh gaya tha). Wo rules usi file me hain. */

/* ── Role chip (partner / employee / admin / investor) ──
   Rang FILL me, text --rc-ink se (audited variant). Pehle text par hi
   vivid rang laga tha aur light mode me parha nahi jata tha. */
.split-role-chip {
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:600; line-height:1;
  padding:3px 9px; border-radius:var(--r-chip);
  text-transform:capitalize; letter-spacing:.01em;
  color:var(--text-primary);
  background-color:color-mix(in srgb, var(--rc, var(--text-tertiary)) 20%, transparent);
  box-shadow:inset 0 0 0 1px var(--rc, var(--hairline-strong));
  white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   PROFIT SPLITS — allocation ledger
   ------------------------------------------------------------------
   Bunyadi khyaal: split ek BATWARA hai — ek muqarrar raqam ke hisse.
   Pehle har banday ka apna slider aur apni alag choti bar thi, aur
   "kul 100% hona chahiye" wali shart sirf neeche ek jumle me thi. Yani
   sab se ahem baat kahin nazar hi nahi aati thi.

   Ab EK bar hai jis me sab hissedaar ek hi lambai ke liye muqabla karte
   hain. Isi ek tabdeeli se paanch choti bars khatam hui (wahi maloomat,
   jama shakal me), aur 150% ab GHALAT LAGTA hai — bataya nahi jata.

   Rang sirf DO jagah: bar ka segment aur slider ka thumb. Naam aur raqam
   --text-primary par — rangeen naam koi maani nahi deta tha.
   ══════════════════════════════════════════════════════════════════ */
.sp-sub { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.sp-sub b { font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }

/* ── Signature: allocation bar ── */
.alloc { margin:4px 0 14px; }
.alloc-track {
  position:relative; display:flex; height:26px;
  border-radius:var(--r-chip); overflow:hidden;
  background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);
}
.alloc-seg {
  height:100%; min-width:2px;
  border-right:1px solid var(--canvas);
  transition:width var(--dur-micro) linear;
}
.alloc-seg:last-of-type { border-right:0; }
/* Bacha hua hissa — bhara nahi, sirf halki dhaari. Khali jagah "khali"
   lagni chahiye, kisi ka hissa nahi. */
.alloc-free {
  height:100%;
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--text-primary) 9%, transparent) 0 5px,
    transparent 5px 10px);
}
/* 100% ka nishan. total 100 se zyada ho to ye andar khisak aata hai aur
   us se aage ka sab kuch "budget se bahar" ban jata hai. */
.alloc-mark {
  position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--text-primary); opacity:.85;
  transform:translateX(-1px); pointer-events:none;
  transition:left var(--dur-micro) linear;
}

/* ── Ek hissedaar = ek qatar ──
   Grid, koi column content par depend nahi karta — is liye naam, %, aur
   raqam har row me bilkul qatar me aate hain. */
.srows { margin-top:2px; }
.srow {
  display:grid;
  grid-template-columns:10px minmax(0,1fr) 74px 104px minmax(120px,1.1fr) 58px 92px 28px;
  gap:10px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--hairline);
}
.srow:last-child { border-bottom:0; }
.srow:hover { background-color:color-mix(in srgb, var(--text-primary) 4%, transparent); }
.srow-dot  { width:10px; height:10px; border-radius:50%; }
.srow-name { font-size:15px; font-weight:500; color:var(--text-primary);
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srow-role { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
             color:var(--rc-ink, var(--text-secondary)); white-space:nowrap; }

/* Label ek GHOST field hai: zyadatar rows par khali hota hai, is liye
   aaram se baitha rehta hai aur sirf hover/focus par input jaisa dikhta
   hai. Pehle har row par bara khali dabba sab se numaya cheez tha. */
/* ⚠️ Specificity: `input.srow-label` chahiye, sirf `.srow-label` nahi —
   theme.css me `.field-input, input[type="text"], …` ka group selector
   (0,1,1) hai jo bare class (0,1,0) ko haraa deta hai. Usi wajah se ghost
   field ka background var(--surface-2) reh jata tha aur height 36px (napa
   gaya), jis se poori row 55px ki ho jati thi. */
input.srow-label {
  font-size:12px; font-family:inherit; width:100%; min-width:0;
  height:auto; padding:4px 8px; border-radius:8px; outline:none;
  background:transparent; border:1px dashed transparent; box-shadow:none;
  color:var(--text-primary);
  transition:background-color var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out);
}
input.srow-label::placeholder { color:var(--text-tertiary); }
.srow:hover input.srow-label,
input.srow-label:focus { background:var(--surface-2); border-color:var(--hairline-strong); }
input.srow-label:focus { border-style:solid; border-color:var(--accent); box-shadow:none; }

.srow-range { width:100%; min-width:0; }
.srow-pct {
  font-size:17px; font-weight:600; text-align:right;
  color:var(--text-primary); font-variant-numeric:tabular-nums;
}
.srow-pct i { font-style:normal; font-size:12px; font-weight:500; color:var(--text-tertiary); margin-left:1px; }
.srow-amt {
  font-size:15px; font-weight:600; text-align:right;
  color:var(--text-primary); font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* Remove sirf hover par — mustaqil nazar aane wala destructive button
   ghalti se dab jata hai. Touch par hamesha nazar aata hai. */
.srow-x {
  appearance:none; -webkit-appearance:none; background:none; border:0; padding:0;
  width:28px; height:28px; display:grid; place-items:center; cursor:pointer;
  border-radius:var(--r-chip); color:var(--text-tertiary);
  opacity:0; transition:opacity var(--dur-micro) var(--ease-out);
}
.srow:hover .srow-x, .srow-x:focus-visible { opacity:1; }
.srow-x:hover { color:var(--danger-text); background:color-mix(in srgb, var(--danger) 14%, transparent); }
@media (hover:none) { .srow-x { opacity:1; } }

.sp-empty { padding:30px 4px; text-align:center; font-size:13px; color:var(--text-secondary); line-height:1.6; }
.sp-empty b { font-weight:600; color:var(--text-primary); }

/* Footer: halat baayen, amal daayen */
.sp-foot {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline);
}
.sp-foot .total-check { margin:0; flex:1; min-width:220px; font-size:13px; }
.sp-foot .total-check b { font-weight:600; }

/* ⚠️ style.css `.total-check` par WAJIH green/red TEXT ke tor par lagata
   hai — light mode me 4.01:1 (napa gaya, fail). `-text` variant se bhi
   3.91:1 hi bana kyunke background khud rangeen tint hai.
   Is liye wahi audited pattern jo baqi poore page par hai: rang FILL aur
   RING me, text hamesha --text-primary. Icon aur border rang ka kaam kar
   dete hain, lafz parhne ke liye reh jate hain. */
.total-check.ok, .total-check.err { color:var(--text-primary); }
.total-check.ok {
  background-color:color-mix(in srgb, var(--success) 16%, transparent);
  border:1px solid var(--success);
}
.total-check.err {
  background-color:color-mix(in srgb, var(--danger) 16%, transparent);
  border:1px solid var(--danger);
}
/* Icon par rang — wahi jagah jahan rang maani deta hai */
.total-check.ok  svg { color:var(--success-text); }
.total-check.err svg { color:var(--danger-text); }

/* ══════════════════════════════════════════════════════════════════
   MOBILE — dhanchay ki teen ghaltiyan
   ------------------------------------------------------------------
   ⚠️ Asal masla INLINE STYLES tha. `style="display:grid;
   grid-template-columns:1fr 1fr"` aur `style="flex-wrap:wrap"` ko koi
   media query hara nahi sakti (inline ki specificity sab se oopar hai).
   Is liye phone par bhi do panel BARABAR chalte rehte thay aur daayen
   wala screen se bahar kat jata tha — aur account tabs teen qataron me
   tootte thay bajaye scroll hone ke.
   Hal: dono ko class bana diya (.dash-pair aur .tabstrip), phir hi
   responsive rules kaam karte hain.
   ══════════════════════════════════════════════════════════════════ */
.dash-pair {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; margin-bottom:14px;
}
.tabstrip { display:flex; gap:6px; flex-wrap:wrap; min-width:0; }

/* Tang screen par: panel ek ke neeche ek, aur tabs ek qatar me scroll */
@media (max-width:900px) {
  .dash-pair { grid-template-columns:1fr; }
  /* max-width:100% zaroori hai: iske baghair strip apne content jitni
     chaurai (972px) le leti hai aur PARENT scroll karta hai — jis se
     "Account:" ka label bhi tabs ke sath khisak jata hai. Cap lagne par
     strip khud scroll karti hai aur label apni jagah rehta hai. */
  .tabstrip {
    flex-wrap:nowrap; overflow-x:auto; max-width:100%; min-width:0;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tabstrip::-webkit-scrollbar { display:none; }
  .tabstrip > * { flex:none; white-space:nowrap; }
  /* Account: ka label tabs ke OOPAR — barabar me baith kar wo tabs ko
     teen qataron me dhakel deta tha */
  .account-selector { flex-direction:column; align-items:stretch; gap:8px; }
  /* Panel header: caption title ke neeche, sath me nahi — warna dono ek
     doosre me ghus kar "Margin neeche- vs daayen" jaisa parh na aane wala
     matn ban jata tha */
  .panel-header { flex-wrap:wrap; row-gap:4px; }
  .panel-header > *:not(.panel-title) { flex-basis:100%; }
}

/* Splits ke store tabs desktop par bhi ek qatar me (11 stores) */
#splitStoreTabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px; }
#splitStoreTabs .acc-tab { flex:none; }

/* ── Mobile topbar ──
   Phone par brand ka naam (nowrap, 22px) + bell + date select + toggle
   ek sath nahi aa sakte — is liye sab ek doosre par charh jate thay
   (screenshot me naam bell aur select ke neeche se nikal raha tha).
   Chhoti screen par naam hata dete hain: logo pehchan ke liye kaafi hai,
   aur page ka naam greeting me pehle se likha hota hai. */
@media (max-width:720px) {
  .topbar { padding-left:12px; padding-right:12px; gap:8px; }
  .topbar-brand { flex:none; }
  .topbar-brand-name, .topbar-brand-sub { display:none; }
  .topbar-right { min-width:0; gap:8px; }
  .time-select { height:34px; font-size:13px; padding:0 28px 0 10px; min-width:0; }
  .topbar-right #topFilter { min-width:0; }
}
/* Bohut tang: select bhi sirf zaroori chaurai le */
@media (max-width:430px) {
  .time-select { max-width:150px; }
}

@media (max-width:1340px) {
  .srow { grid-template-columns:10px minmax(0,1fr) 70px minmax(110px,1fr) 54px 88px 28px; }
  .srow-label { display:none; }   /* optional metadata pehle girti hai */
}

/* ── Filter pill ka count ──
   Ginti pill ke andar, thora dabi hui — filter LAGANE se pehle hi pata
   chal jata hai ke us darje me kitni cheezein hain. */
.fp-n {
  margin-left:6px; font-weight:600; font-size:11px;
  opacity:.72; font-variant-numeric:tabular-nums;
}

/* ── Tables: text bara ──
   Panel me jagah kaafi thi magar 13px body aur 11px header par sab kuch
   chhota lag raha tha. Ab body 14px, header 12px — wahi type scale jo
   baqi site par hai. */
/* ⚠️ Specificity: `.table-wrap table` (0,1,1) chahiye, sirf `table` (0,0,1)
   nahi — style.css me `.table-wrap table{font-size:12px}` hai jo bare
   `table` ko haraa deta tha (napa gaya: 12px reh jata tha). */
table,
.table-wrap table { font-size:14px; }
thead th { font-size:12px; letter-spacing:0.06em; padding:12px 14px; }
tbody td { padding:12px 14px; }
.badge, .chip { font-size:12px; padding:3px 10px; }
/* Phone par chhota rehna theek hai — wahi irada jo style.css ka tha,
   magar yahan saaf likha hua taake dobara na khoye. */
@media (max-width:768px) {
  table, .table-wrap table { font-size:12px; }
  thead th, tbody td { padding:9px 10px; }
}

/* ── Cost management ── */
.cost-auto {
  background:var(--surface-2); border:1px solid var(--hairline-strong);
  border-radius:12px; padding:14px; margin-bottom:12px;
}
.cost-auto-label {
  font-size:12px; font-weight:600; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;
}
.cost-row { display:flex; align-items:center; gap:10px; padding:7px 0; }
.cost-desc { flex:1; min-width:0; font-size:14px; color:var(--text-secondary); }
.cost-when { font-size:12px; color:var(--text-tertiary); white-space:nowrap; }
.cost-amt  { font-size:15px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Category badge — rang fill aur ring me, text hamesha parhne wala */
.cost-cat-badge {
  flex:none; font-size:12px; font-weight:600; letter-spacing:.01em;
  padding:3px 10px; border-radius:var(--r-chip); white-space:nowrap;
  color:var(--text-primary);
  background-color:color-mix(in srgb, var(--chip, var(--text-tertiary)) 20%, transparent);
  box-shadow:inset 0 0 0 1px var(--chip, var(--hairline-strong));
}
.cost-total {
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--hairline); padding-top:11px; margin-top:4px;
}
.cost-net { border-top:0; padding-top:6px; }
.cost-total-l { font-size:14px; font-weight:500; color:var(--text-secondary); }
.cost-total-v { font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; }
.cost-net-v   { font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ── Profit & splits: do column ──
   Baayen mera hissa (chaurai me chhota — sirf chaar column), daayen split
   editor (usay sliders ke liye jagah chahiye). `align-items:start` zaroori
   hai: warna chhota panel bara panel ki lambai tak khinch kar apne andar
   khali khadda dikhata hai — wahi masla jo hero row me tha. */
.splits-2col {
  display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:14px; align-items:start;
}
.splits-left, .splits-right { min-width:0; }
/* Mera hissa ki table lambi ho sakti hai (11 stores) — chipak jati hai
   taake daayen taraf split badalte waqt bhi nazar me rahe. */
.splits-left { position:sticky; top:74px; }

@media (max-width:1180px) {
  .splits-2col { grid-template-columns:1fr; }
  .splits-left { position:static; }
}

/* ── Recent orders — ek order, ek qatar ──
   Pehle id oopar aur "date · store" neeche thay (do lines, ~84px). Ab
   columns me: id | date | store | amount | status. */
.ro-list { font-variant-numeric:tabular-nums; }
/* ⚠️ Aakhri column pehle `auto` tha — yani status ke LAFZ jitni chaurai.
   "Tracking Pending" chaura hai, "Pending" chhota; is liye har row me
   bache hue `fr` columns ki chaurai badal jati thi aur date/store/amount
   qatar me nahi aate thay (screenshot me yehi tirchhapan tha).
   Ab koi column content par depend nahi karta — status ki chaurai pakki
   hai, to sab rows ka grid bilkul ek jaisa banta hai. */
.ro-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px minmax(0,0.55fr) 78px 152px;
  gap:10px; align-items:center;
  padding:8px 2px; border-bottom:1px solid var(--hairline);
  font-size:13px;
}
.ro-row:last-child { border-bottom:0; }
.ro-row:hover { background-color:color-mix(in srgb, var(--text-primary) 4%, transparent); }
.ro-id    { color:var(--text-primary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ro-date  { color:var(--text-tertiary); font-size:12px; white-space:nowrap; }
.ro-store { color:var(--text-secondary); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ro-amt   { color:var(--text-primary); font-weight:600; text-align:right; white-space:nowrap; }
/* start, end nahi: chip ke andar icon hota hai, aur baayen se align karne
   par saare icons ek seedhi lakeer me aate hain. `end` par sirf daayen
   kinare milte thay aur label ki shuruaat har row me hat jati thi. */
.ro-st    { justify-self:start; white-space:nowrap; }

@media (max-width:1240px) {
  .ro-row { grid-template-columns:minmax(0,1fr) 88px 74px 140px; }
  .ro-store { display:none; }
}

/* ── My profit share — compact table ──
   Pehle har store ek 3-qatar wala tall card tha; 11 stores par page
   bohut lamba ho jata aur beech me khali jagah reh jati thi. */
/* ── My share table — DAAYEN panel ke barabar type scale ──
   Pehle ye 11/12/13px par tha jabke daayen panel 15/17px par — dono
   halves alag alag page lagte thay. Ab dono ek hi paimane par:
   naam 15px (srow-name jaisa), header 12px (baqi tables jaisa),
   raqam 15px tabular. */
.msh-list { font-variant-numeric:tabular-nums; }
.msh-head, .msh-row {
  display:grid; grid-template-columns:minmax(0,1fr) 66px 112px 112px;
  gap:10px; align-items:center; padding:9px 2px;
}
.msh-head {
  font-size:12px; font-weight:600; color:var(--text-tertiary);
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--hairline);
}
.msh-head span:not(:first-child),
.msh-row  span:not(:first-child) { text-align:right; }
.msh-row { border-bottom:1px solid var(--hairline); font-size:15px; }
.msh-row:last-child { border-bottom:0; }
.msh-row:hover { background-color:color-mix(in srgb, var(--text-primary) 4%, transparent); }
.msh-name { color:var(--text-primary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msh-pct  { color:var(--text-secondary); font-size:13px; }
.msh-num  { color:var(--text-secondary); }
.msh-earn { color:var(--text-primary); font-weight:600; }

/* Do sartaaj raqam — page ka jawab, is liye sab se bara type.
   Baqi sab isi ke gird chup rehta hai. */
.msh-top { display:flex; flex-direction:column; gap:2px; margin-bottom:16px; }
.msh-top-row {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0;
}
.msh-top-l { font-size:14px; color:var(--text-secondary); }
.msh-top-v { font-size:22px; font-weight:600; letter-spacing:-.02em;
              color:var(--text-primary); font-variant-numeric:tabular-nums; }
.msh-top-row.is-mine .msh-top-v { font-size:28px; color:var(--accent-text); }

@media (max-width:720px) {
  .msh-head, .msh-row { grid-template-columns:minmax(0,1fr) 50px 92px; }
  .msh-head span:nth-child(3), .msh-row span:nth-child(3) { display:none; }
}

/* ══ MY EARNINGS — ek virtual card ══
   Qad bandha hua hai: pehle yahan line chart tha (190px + header). Card us
   se bara nahi hona chahiye, is liye per-account list ki jagah card ke ANDAR
   chips hain — account 3 hon ya 30, qad wahi rehta.

   Rangat: har account ka apna rang (--data-1..4 + success + warning). Wahi
   rang chip ke dot me, share bar me, aur account chunne par poore card ki
   rangat me aata hai. Rang AKELA kabhi maani nahi deta — naam har jagah
   sath likha hai; rang sirf pehchanne ki raftaar barhata hai. */
.vcard {
  --vc-1: var(--data-1);
  --vc-2: var(--data-2);
  --vc-3: var(--data-4);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:238px;
  border-radius:var(--r-card);
  padding:18px 20px 16px;
  /* Teen rango ki rangat — asal premium card ki laminate jaisi. Ek hi rang
     se card patla aur be-jaan lagta tha. */
  background:
    radial-gradient(120% 90% at 6% 0%,  color-mix(in srgb, var(--vc-1) 30%, transparent) 0%, transparent 58%),
    radial-gradient(110% 85% at 92% 8%, color-mix(in srgb, var(--vc-2) 24%, transparent) 0%, transparent 62%),
    radial-gradient(120% 120% at 70% 108%, color-mix(in srgb, var(--vc-3) 20%, transparent) 0%, transparent 60%),
    var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--hairline-strong), var(--shadow);
  transition:background var(--dur-theme) var(--ease-out);
}
/* Laminate chamak — sirf sajawat, is liye pointer se bahar. */
.vcard::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(102deg, transparent 38%,
      color-mix(in srgb, var(--text-primary) 7%, transparent) 46%, transparent 54%),
    radial-gradient(115% 75% at 88% -8%,
      color-mix(in srgb, var(--text-primary) 8%, transparent) 0%, transparent 62%);
}
.vcard > * { position:relative; z-index:1; }

.vcard-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* Flag aur aankh — dono daayen kone me, ek sath */
.vcard-head-r { display:flex; align-items:center; gap:8px; flex:none; }
/* Raqam chhupane ka switch. 32px ka hit area — ungli se lagne layak,
   magar dekhne me halka, taake raqam se dhyan na bate. */
.vcard-eye {
  display:grid; place-items:center;
  width:32px; height:32px; padding:0;
  font:inherit;
  /* ⚠️ --text-secondary tha, magar card ki 30% rangat ke neeche wo 2.88:1
     par gir jata hai (naapa) — graphic ke liye 3:1 chahiye. Card ka baqi
     sab text bhi isi wajah se --text-primary par hai. */
  color:var(--text-primary);
  background:transparent; border:none; border-radius:var(--r-chip);
  cursor:pointer;
  transition:color var(--dur-micro) var(--ease-out),
             background-color var(--dur-micro) var(--ease-out);
}
.vcard-eye:hover { background:var(--surface-2); }
.vcard-eye:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Chhupi hui halat me switch khud bata de ke wo LAGA hua hai — warna banda
   soch me par jata hai ke raqam ghayab kyun hai. */
.vcard-eye[aria-pressed="true"] { color:var(--text-primary); background:var(--surface-2); }
/* Nuqte raqam jitni jagah lein, warna card ka dhancha uchhalta hai */
.vcard-amount { min-height:1.1em; }
.vcard-label {
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-primary);
}
.vcard-amount {
  margin-top:10px;
  font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1.1;
  color:var(--text-primary); font-variant-numeric:tabular-nums;
}
.vcard-meta {
  margin-top:5px; font-size:13px; color:var(--text-primary);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.vcard-dot { color:var(--text-primary); }

/* Share bar — kis account se kitna paisa. Pehle yahan khali khadda tha
   (chips margin-top:auto se neeche chipki hui thin). Ab wo jagah kaam ki
   maloomat deti hai: ek nazar me pata chalta hai paisa kahan se aa raha. */
.vcard-bar {
  margin-top:auto; margin-bottom:12px;
  display:flex; gap:3px; height:8px;
  border-radius:999px; overflow:hidden;
}
.vcard-seg {
  min-width:4px; border-radius:999px;
  transition:opacity var(--dur-micro) var(--ease-out);
}
/* Ek account chuna ho to baqi mudham — magar ghayab nahi, taake nisbat
   phir bhi nazar aaye. */
.vcard-seg.dim { opacity:.28; }

/* Account chips — ek qatar, zaroorat par khisakti hai. */
/* Account chips — ek qatar, ungli se khiskati hai.
   Char cheezein zaroori thin, teen ghayab thin:
     · momentum scrolling (iOS par warna jhatke se rukti hai)
     · overscroll-behavior — warna aakhir tak khisak kar aage khiskane se
       browser PICHHE chala jata hai (page back), jo bohat bura lagta hai
     · touch-action:pan-x — ungli tirchhi chale to bhi qatar khiske,
       poora safha na hile
     · aur sab se ahem: ISHARA ke aur bhi hain. Scrollbar chhupi hui hai,
       is liye bina ishare ke banda samajhta hi nahi ke swipe ho sakta hai.
       Daayen kinare par halka sa jhaad (mask) — jo aakhir par pohanch kar
       khud khatm ho jata hai. */
.vcard-chips {
  display:flex; gap:6px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scroll-snap-type:x proximity;
  padding-bottom:2px;
}
.vcard-chips::-webkit-scrollbar { display:none; }
.vchip { scroll-snap-align:start; }
/* Jhaad sirf tab jab waqai aur chips hain (JS class lagata hai) */
.vcard-chips.can-scroll-r {
  mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.vcard-chips.can-scroll-l.can-scroll-r {
  mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
}
.vcard-chips.can-scroll-l:not(.can-scroll-r) {
  mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
}
.vchip {
  --chip-hue: var(--accent);
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  font:inherit; font-size:12px; font-weight:500; line-height:1.4;
  color:var(--text-primary);
  background:transparent;
  border:none; border-radius:var(--r-chip);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);
  cursor:pointer; white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-out),
             background-color var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-micro) var(--ease-out);
}
/* Account ka rang — chhota sa dot. "All" chip par koi dot nahi (us ka koi
   ek rang hai hi nahi). */
.vchip i {
  width:7px; height:7px; border-radius:50%;
  background:var(--chip-hue); flex:none;
}
.vchip:hover {
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--chip-hue) 55%, var(--hairline-strong));
}
.vchip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Chuna hua chip — bhara hua, taake rang ke ilawa waza'at bhi farq bataye. */
.vchip.on {
  color:var(--surface-solid);
  background-color:var(--accent-text);
  box-shadow:none;
}
.vchip.on i { background:var(--surface-solid); }

.vcard-foot {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:14px; flex-wrap:wrap;
}
.vcard-name { font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--text-primary); }
.vcard-paid { font-size:12px; color:var(--text-primary); font-variant-numeric:tabular-nums; }

.vcard-empty { justify-content:flex-start; }
.vcard-note { margin:10px 0 0; font-size:13px; color:var(--text-secondary); }

/* Bar na ho (sirf ek account, ya sab sifar) to chips khud neeche chipak
   jayen — warna upar khali jagah reh jati hai. */
.vcard-bar + .vcard-chips { margin-top:0; }
.vcard-meta + .vcard-chips { margin-top:auto; padding-top:14px; }

@media (max-width:720px) {
  .vcard { min-height:224px; padding:16px; }
  .vcard-amount { font-size:28px; }
}
/* ── 10+ din se undelivered ──
   Panel me buckets ke NEECHE aati hai aur bachi hui lambai kha jati
   hai (flex:1 + overflow-y:auto). Isi wajah se us panel ka khali
   khadda bhi khatam ho jata hai — list jitni jagah mile utni bhar
   leti hai, zyada rows hon to andar scroll ho jati hai. */
.stuck-wrap { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:12px; }

.stuck-head {
  display:flex; align-items:center; gap:8px;
  padding-top:11px; border-top:1px solid var(--hairline); margin-bottom:6px;
}
.stuck-t { font-size:12px; font-weight:500; color:var(--text-primary); }
.stuck-n { font-size:11px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.stuck-copyall {
  appearance:none; -webkit-appearance:none; margin-left:auto;
  background:none; border:0; padding:3px 8px; border-radius:var(--r-chip);
  font:inherit; font-size:11px; font-weight:500; color:var(--text-secondary);
  cursor:pointer; box-shadow:inset 0 0 0 1px var(--hairline-strong);
  transition:color var(--dur-micro) var(--ease-out);
}
.stuck-copyall:hover { color:var(--text-primary); }
.stuck-copyall:focus-visible { outline:2px solid var(--accent-text); outline-offset:1px; }

/* `flex:1` bachi hui jagah bhar deta hai (panel ka khali khadda khatam),
   aur `max-height` list ko page lamba karne se rokta hai. Dono zaroori
   hain: sirf flex:1 rakha tha to 34 rows par panel 1508px ka ho gaya
   (napa gaya) — scroll hi nahi hota tha kyunke usay koi rok nahi raha tha. */
.stuck-list { flex:1 1 auto; min-height:0; max-height:320px; overflow-y:auto; }

.stuck-row {
  display:grid; grid-template-columns:34px minmax(0,1fr) minmax(0,1.1fr) 62px 24px;
  gap:8px; align-items:center;
  padding:7px 2px; border-bottom:1px solid var(--hairline);
  font-size:12px; font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background-color var(--dur-micro) var(--ease-out);
}
.stuck-row:last-child { border-bottom:0; }
.stuck-row:hover { background-color:color-mix(in srgb, var(--text-primary) 5%, transparent); }
.stuck-row:focus-visible { outline:2px solid var(--accent-text); outline-offset:-2px; border-radius:var(--r-chip); }

.stuck-days {
  text-align:center; font-size:11px; font-weight:600;
  color:var(--text-primary); padding:1px 0; border-radius:var(--r-chip);
  background-color:color-mix(in srgb, var(--mo-c) 20%, transparent);
  box-shadow:inset 0 0 0 1px var(--mo-c);
}
.stuck-id   { color:var(--text-primary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stuck-meta { color:var(--text-tertiary); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stuck-amt  { text-align:right; color:var(--text-secondary); white-space:nowrap; }
.stuck-copy {
  appearance:none; -webkit-appearance:none;
  background:none; border:0; padding:0; margin:0;
  width:24px; height:22px; display:grid; place-items:center;
  border-radius:var(--r-chip); cursor:pointer;
  transition:opacity var(--dur-micro) var(--ease-out);
}
.stuck-copy svg { fill:none; stroke:var(--text-tertiary); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.stuck-row:hover .stuck-copy svg,
.stuck-copy:focus-visible svg { stroke:var(--text-primary); }
.stuck-copy:focus-visible { outline:2px solid var(--accent-text); outline-offset:1px; }

/* Orders page par pahunche hue order ka nishan. Jaan-boojh kar koi
   animation nahi — class lagti hai aur 2.6s baad hat jati hai. */
#ordersTableBody tr.order-hit > td {
  background-color:color-mix(in srgb, var(--accent) 16%, transparent);
}

@media (max-width:1100px) {
  .stuck-row { grid-template-columns:32px minmax(0,1fr) 58px 24px; }
  .stuck-meta { display:none; }
}

/* ── Aaj kya karna hai ──
   Ye panel column ka aakhri hai, is liye `.panel:last-child{flex:1}`
   se bachi hui saari lambai isay milti hai. List us lambai ko istemal
   karti hai: flex:1 + overflow-y:auto, to zyada rukawatein hon to
   andar scroll ho jata hai aur kam hon to qatarein oopar beth jati
   hain. Isi liye stretch hona ab masla nahi, fayda hai. */
.todo-wrap { flex:1 1 auto; min-height:0; overflow-y:auto; }

.todo-row {
  appearance:none; -webkit-appearance:none;
  display:grid; grid-template-columns:34px 1fr 14px;
  gap:10px; align-items:center; width:100%; text-align:left;
  padding:9px 4px; margin:0;
  background:none; border:0; border-bottom:1px solid var(--hairline);
  font:inherit; cursor:pointer;
  transition:background-color var(--dur-micro) var(--ease-out);
}
.todo-row:last-child { border-bottom:0; }
.todo-row:hover { background-color:color-mix(in srgb, var(--text-primary) 5%, transparent); }
.todo-row:focus-visible { outline:2px solid var(--accent-text); outline-offset:-2px; border-radius:var(--r-chip); }

.todo-n {
  display:grid; place-items:center; height:26px; border-radius:var(--r-chip);
  font-size:12px; font-weight:600; color:var(--text-primary);
  font-variant-numeric:tabular-nums;
  background-color:color-mix(in srgb, var(--mo-c) 22%, transparent);
  box-shadow:inset 0 0 0 1px var(--mo-c);
}
.todo-txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.todo-l { font-size:12px; font-weight:500; color:var(--text-primary); }
.todo-h { font-size:11px; color:var(--text-tertiary); }
.todo-go {
  fill:none; stroke:var(--text-tertiary); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.todo-row:hover .todo-go { stroke:var(--text-primary); }

/* ── Product P&L table ──
   Sticky header vertical scroll ke sath chalti hai (overflow-y).
   ⚠️ overflow-X par sticky top pin NAHI hoti — is liye tang screen par
   columns girate hain, horizontal scroll nahi dete. */
.pnl-scroll { max-height:352px; overflow-y:auto; overflow-x:hidden; }
.pnl { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.pnl thead th {
  position:sticky; top:0; z-index:2;
  background:var(--surface-solid);
  border-bottom:1px solid var(--hairline);
  padding:0 0 6px; text-align:right;
}
.pnl-th {
  appearance:none; -webkit-appearance:none; background:none; border:0; margin:0;
  padding:4px 6px; width:100%; font:inherit; font-size:11px; font-weight:500;
  color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em;
  text-align:right; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:flex-end; gap:3px;
  transition:color var(--dur-micro) var(--ease-out);
}
.pnl-th:hover, .pnl-th[data-on="true"] { color:var(--text-primary); }
.pnl-th:focus-visible { outline:2px solid var(--accent-text); outline-offset:1px; border-radius:var(--r-chip); }
.pnl-caret { font-size:9px; line-height:1; }
.pnl-caret[data-dir="asc"] { transform:rotate(180deg); }

.pnl th.pnl-sku, .pnl th.pnl-name, .pnl th.pnl-store { text-align:left; }
.pnl th.pnl-sku .pnl-th,
.pnl th.pnl-name .pnl-th,
.pnl th.pnl-store .pnl-th { justify-content:flex-start; text-align:left; }

.pnl tbody td {
  padding:8px 6px; font-size:12px;
  border-bottom:1px solid var(--hairline);
  color:var(--text-secondary); white-space:nowrap;
}
.pnl tbody tr:last-child td { border-bottom:0; }
.pnl tbody tr:hover td { background:color-mix(in srgb, var(--text-primary) 4%, transparent); }

.pnl-sku   { color:var(--text-tertiary); font-size:11px; width:52px; }
.pnl-name  {
  color:var(--text-primary); font-weight:500;
  max-width:1px; width:36%;              /* table-layout auto me shrink karne deta hai */
  overflow:hidden; text-overflow:ellipsis;
}
.pnl-n     { text-align:right; }
.pnl-store { color:var(--text-secondary); }
.pnl-profit { font-weight:600; color:var(--mo-ct); }
.pnl-margin {
  display:inline-block; padding:1px 7px; border-radius:var(--r-chip);
  font-weight:600; color:var(--text-primary);
  background-color:color-mix(in srgb, var(--mo-c) 20%, transparent);
  box-shadow:inset 0 0 0 1px var(--mo-c);
}

/* Tang screen par kam kaam ke columns girao — horizontal scroll se behtar */
@media (max-width:1240px) {
  .pnl-sku { display:none; }
}
@media (max-width:1100px) {
  .pnl th:nth-child(5), .pnl td:nth-child(5),   /* Cost */
  .pnl th:nth-child(8), .pnl td:nth-child(8) {  /* Unit */
    display:none;
  }
}
@media (max-width:820px) {
  .pnl th:nth-child(9), .pnl td:nth-child(9) { display:none; }  /* Store */
}

/* ── Empty / all-clear states ── */
.mo-empty, .mo-ok { font-size:12px; line-height:1.55; padding:14px 2px; }
.mo-empty { color:var(--text-tertiary); }
.mo-empty strong { font-weight:600; color:var(--text-secondary); }
.mo-ok    { color:var(--success-text); }

/* Tang screen par sab se kam kaam ka khana chhupta hai. Column ki
   ginti bache hue bachon se BARABAR honi chahiye — warna aakhri bacha
   agli implicit row me chala jata hai.
   ⚠️ `:nth-of-type(2)` pehle istemal kiya tha: wo galat cell utha raha
   tha (sale, cost nahi) kyunke nth-of-type sab bhai div ginta hai,
   sirf .mo-row-num nahi — test me pakra gaya. Ab class se target hai. */
@media (max-width:1100px) {
  .mo-row    { grid-template-columns:minmax(72px,1fr) 88px 88px 62px; }  /* store + cost girao */
  .mo-c-cost, .mo-row-store { display:none; }
  .mo-age    { grid-template-columns:60px 1fr 30px 62px; }  /* 5 → 4 khane */
  .mo-age-h  { display:none; }
}
/* Phone: "sale" bhi gir jata hai. Order ID KABHI nahi girti — uske baghair
   raqam kis order ki hai ye pata hi nahi chalta (screenshot me yehi masla
   tha: sirf £ aur % dikh rahe thay, order ka naam nahi). */
@media (max-width:560px) {
  .mo-row    { grid-template-columns:minmax(0,1fr) 78px 62px; }
  .mo-c-sale { display:none; }
  .mo-row-sub { display:none; }          /* " sale" / " cost" ke lafz */
  .mo-strip  { height:12px; }
}

/* Office / catalog numbers — tabular */
.of-t,.card-price,.mini-amount { font-variant-numeric:tabular-nums; }


/* ─────────────────────────────────────────────────────────────
   9c. DASHBOARD OVERVIEW LAYOUT
   Har role ke overview page ka dhancha. Rang sirf tokens se —
   reference se sirf layout liya gaya hai, palette nahi.
   ───────────────────────────────────────────────────────────── */

/* ── Greeting + search row ── */
.dash-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:18px;
}
.dash-greet h2 {
  font-size:28px; font-weight:600; letter-spacing:-0.03em;
  color:var(--text-primary); margin:0 0 4px;
}
.dash-greet p { font-size:15px; color:var(--text-secondary); margin:0; }

.dash-search {
  display:flex; align-items:center; gap:9px;
  min-width:min(360px,100%); height:44px; padding:0 14px;
  background:var(--surface-1);
  backdrop-filter:var(--glass-filter); -webkit-backdrop-filter:var(--glass-filter);
  border:1px solid var(--hairline); border-radius:var(--r-control);
  box-shadow:var(--inset),var(--shadow);
}
.dash-search svg { color:var(--text-tertiary); flex:none; }
.dash-search input {
  flex:1; height:auto; min-width:0; padding:0; margin:0;
  background:none; border:none; box-shadow:none;
  color:var(--text-primary); font:400 15px var(--font);
  /* appearance:none — UA searchfield ke andar ka apna padding/decoration
     caret ko aage-peeche hilata tha. Line-height bhi pakki, warna baseline
     har harf par thora khiskti thi. */
  appearance:none; -webkit-appearance:none;
  line-height:20px;
}
.dash-search input:focus { outline:none; border:none; box-shadow:none; }
/* Agar kabhi type="search" wapas aaye to bhi UA ka clear/decoration na aaye */
.dash-search input::-webkit-search-decoration,
.dash-search input::-webkit-search-cancel-button,
.dash-search input::-webkit-search-results-button,
.dash-search input::-webkit-search-results-decoration { display:none; -webkit-appearance:none; }
.dash-search kbd {
  flex:none; font:500 11px var(--mono);
  color:var(--text-tertiary); background:var(--surface-2);
  border:1px solid var(--hairline); border-radius:var(--r-chip);
  padding:3px 6px;
}

/* ── KPI cards — label · value · delta · sparkline ──
   Icon badge aur baayen ki rangeen patti jaan-boojh kar nahi hai: card ka
   kaam number parhwana hai. Rang sirf delta aur sparkline me hai. ── */
.metrics-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px; margin-bottom:16px;
}
.metric-card { padding:17px 19px; }
.kpi-top { margin-bottom:2px; }
.metric-card .metric-label {
  font-size:13px; font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--text-secondary); margin-bottom:5px;
}
.kpi-value {
  font-size:30px; font-weight:600; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums; color:var(--text-primary); line-height:1.05;
}
/* semantic.css apne data-sem cards par baayen 4px patti aur rangeen number
   lagata hai. Overview ke KPI cards par wo nahi chahiye — number ka rang
   text-primary hi rehna chahiye taake parha ja sake. */
#metricsGrid .metric-card[data-sem]::after,
#empMetrics .metric-card[data-sem]::after,
#partnerMetrics .metric-card[data-sem]::after,
#invMetrics .metric-card[data-sem]::after { display:none; }
#metricsGrid .metric-card[data-sem],
#empMetrics .metric-card[data-sem],
#partnerMetrics .metric-card[data-sem],
#invMetrics .metric-card[data-sem] { padding-left:19px; }
.kpi-delta {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:500; font-variant-numeric:tabular-nums;
  margin-top:3px;
}
.kpi-delta.up   { color:var(--success-text); }
.kpi-delta.down { color:var(--danger-text); }
.kpi-delta.flat { color:var(--text-tertiary); }
/* Jis card ki koi sparkline nahi ("Needs a note") us ke neeche 45px ka
   khali khadda reh jata tha — kyunke baqi cards me wahan lakeer hoti hai
   aur grid sab ko barabar oonchai deti hai. Ab wo card apna maal beech me
   le aata hai aur adad bara ho jata hai: khali jagah bhar bhi jati hai aur
   adad — jo is card ka poora maqsad hai — theek se nazar bhi aata hai.
   Baayen se seedh baqi cards jaisi hi rehti hai, warna qatar tooti lagti. */
.metric-card.no-spark {
  /* Chaaron taraf se markaz me — sirf ooper-neeche nahi. Pehle sirf
     `justify-content:center` tha, is liye maal baayen kinare par chipka
     rehta tha aur card adha khali lagta tha. */
  display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
}
/* Label ke dot ko bhi lafz ke sath markaz me lana parta hai, warna wo
   akela baayen reh jata hai. */
.metric-card.no-spark .metric-label { display:flex; align-items:center; justify-content:center; gap:6px; }
.metric-card.no-spark .kpi-value { font-size:44px; }
.metric-card.no-spark .kpi-top { margin-bottom:4px; }

/* P&L ki qatar ab click hoti hai — to-list par wahi product khulta hai.
   Ishara sirf pointer se nahi: hover/focus par qatar roshan hoti hai, aur
   keyboard se bhi chalti hai (tabindex + Enter/Space). */
.pnl-row { cursor:pointer; }
.pnl-row:hover { background:var(--accent-wash); }
.pnl-row:focus-visible {
  outline:2px solid var(--accent); outline-offset:-2px;
  background:var(--accent-wash);
}

/* ⚠️ Card ko flex column banaya aur chart ko `margin-top:auto` — is se har
   card ka chart BILKUL neeche se lagta hai, chahe upar ki lakeerein kam hon
   ya zyada. Pehle chart seedha delta ke baad aata tha, is liye jis card par
   foot ki line thi us ka chart neeche khisak jata aur jis par nahi thi us ka
   upar reh jata — qatar tooti hui lagti thi. */
/* ══ KPI cards — "My earnings" jaisi glassy rangat ══
   Wahi zaban: apne rang ki do jhalak + ek tirchhi laminate chamak. Baqi
   panels 5% par hain; KPI cards 8% par, kyunke inhe alag se numaya hona
   chahiye.
   ⚠️ 8% se ooper NAHI. Naapa gaya: light theme me `.metric-label`
   (--text-secondary) sirf 9.5% rangat tak 4.5:1 rakhta hai. Delta ke rang
   pehle theek 4.5 par thay — un ko thora gehra kiya (upar dekhein), warna
   ye rangat un ko tor deti. */
.metric-card {
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 92% at 5% 0%,
      color-mix(in srgb, var(--panel-hue) 8%, transparent) 0%, transparent 60%),
    radial-gradient(115% 88% at 95% 6%,
      color-mix(in srgb, var(--panel-hue-2) 6%, transparent) 0%, transparent 62%),
    linear-gradient(103deg, transparent 40%,
      color-mix(in srgb, var(--text-primary) 4%, transparent) 47%, transparent 55%),
    var(--surface-1);
}
.kpi-spark {
  display:block; width:100%; height:38px;
  margin-top:auto; padding-top:12px;
  overflow:visible;
}
.kpi-spark path.line {
  fill:none; stroke-width:1.7; vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Bharav ka feekapan ab gradient me hai (dashSparkline), yahan opacity nahi —
   warna dono mil kar bharav bilkul ghayab kar dete. */
.kpi-spark path.area { stroke:none; }
.kpi-spark circle.tip { vector-effect:non-scaling-stroke; }

/* ── Three-column band: main · actions · rail ── */
.dash-grid {
  display:grid; grid-template-columns:1.55fr .85fr .95fr;
  gap:12px; margin-bottom:18px;
  /* `align-items:start` tha — us se har column sirf apne content jitni
     ooncha hota tha aur chhoti column ke neeche khali jagah reh jati thi.
     `stretch` se teeno column qatar ki poori lambai lete hain, aur neeche
     wala `.panel:last-child{flex:1}` bachi jagah bhar deta hai. */
  align-items:stretch;
}
.dash-col { display:flex; flex-direction:column; gap:12px; min-width:0; }
/* Teen columns kabhi barabar lambai ke nahi hote. Aakhri panel bachi hui
   jagah kha leta hai, warna chhoti column ke neeche khali khadda reh jata
   tha — wahi "empty space" jo nazar aa raha tha. */
.dash-col > .panel:last-child { flex:1 1 auto; }

/* ── Quick actions — ek qatar me chaar tiles, icon oopar, label neeche ── */
.action-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px;
}
.action-card {
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:16px 12px; text-align:center; width:100%;
  background:var(--surface-2);
  border:1px solid var(--hairline); border-radius:var(--r-control);
  cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.action-card:hover { transform:translateY(-2px); border-color:var(--hairline-strong); }
.action-card:active { transform:scale(.985); }
.action-icon {
  width:38px; height:38px; flex:none; border-radius:var(--r-chip);
  display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent);
}
.action-title { font-size:13px; font-weight:500; color:var(--text-primary); line-height:1.3; }
.action-desc  { display:none; }   /* tile par sirf naam — tafseel ki jagah nahi */

/* ── Health card — header me score pill, phir har maap ki apni lakeer ──
   Donut ki jagah bars: char maaap ko aik doosre se compare karna asaan
   hota hai jab sab aik hi paimane par seedhi lakeeron me hon. ── */
/* ══ Data health ka score — dial ══
   Pehle ye header ke kone me 13px ki pill thi: panel ka sab se ahem adad,
   aur likhne me sab se chhota. Ab apna dial hai — chaaron gird arc us ke
   apne score jitna bhara hua, aur beech me bara adad.
   Rang akela maani nahi deta: sath me lafz bhi likha hai (Excellent / Good
   / Fair / Needs work), aur arc ki lambai khud ek doosra ishara hai. */
.health-hero {
  display:flex; align-items:center; gap:16px;
  margin-bottom:18px;
}
.health-dial {
  --dial:0;                       /* 0–100 */
  --dial-col:var(--success);
  position:relative; flex:none;
  width:104px; height:104px; border-radius:50%;
  /* Arc — bhara hua hissa score jitna, baqi hairline. Fill hai, text nahi,
     is liye 3:1 kaafi hai aur vivid token theek rehta hai. */
  background:conic-gradient(
    var(--dial-col) calc(var(--dial) * 1%),
    var(--surface-2) calc(var(--dial) * 1%)
  );
  display:grid; place-items:center;
  /* ⚠️ Track ka rang akela kaafi nahi. Light theme me jo bhi neutral itna
     gehra ho ke panel par nazar aaye, wo --success/--warning se 3:1 door
     nahi reh pata (naapa: har darje par ya to 1.11 visibility ya 2.74 arc
     — dono kabhi sath nahi milte). Is liye patti ki HADD do bareek ringon
     se banai gayi hai; track halka reh sakta hai aur arc us se saaf alag
     rehta hai. */
  box-shadow:inset 0 0 0 1px var(--hairline-strong);
}
/* Andar ka gola — arc ko patli patti bana deta hai */
.health-dial-in {
  width:80px; height:80px; border-radius:50%;
  background:var(--surface-solid);
  box-shadow:0 0 0 1px var(--hairline-strong);
  /* ⚠️ Yahan pehle `align-items:baseline` tha. Baseline alignment poore
     group ko dabbe ke UPAR chipka deta hai, beech me nahi — naapa gaya:
     adad markaz se 23px ooncha tha, is liye ring ke andar se nikla hua
     lagta tha. Ab dabba grid hai (chaaron taraf se markaz), aur baseline
     ka rishta andar wale `.health-dial-v` me rehta hai — dono baatein
     ek sath. */
  display:grid; place-items:center;
}
/* Adad aur nishan ka aapas ka rishta — "%" adad ki baseline par baithta hai */
.health-dial-v { display:flex; align-items:baseline; gap:1px; }
.health-dial-n {
  font-size:34px; font-weight:600; letter-spacing:-.03em; line-height:1;
  color:var(--text-primary); font-variant-numeric:tabular-nums;
}
/* Nishan chhota aur halka — adad khud sartaaj rehta hai */
.health-dial-p { font-size:14px; font-weight:500; color:var(--text-secondary); }

.health-hero-t { min-width:0; }
.health-hero-word {
  font-size:17px; font-weight:600; letter-spacing:-.01em;
  color:var(--text-primary);
}
.health-hero-sub { margin-top:3px; font-size:13px; color:var(--text-secondary); }

@media (max-width:720px) {
  .health-dial { width:92px; height:92px; }
  .health-dial-in { width:70px; height:70px; }
  .health-dial-n { font-size:29px; }
}
.health-rows { display:flex; flex-direction:column; gap:14px; }
.health-row { display:grid; grid-template-columns:34px 1fr; gap:11px; align-items:start; }
.health-badge {
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:600;
  background:var(--accent-wash); color:var(--accent);
}
.health-name { font-size:13px; font-weight:500; color:var(--text-primary); }
.health-word { font-size:11px; color:var(--text-secondary); margin-top:1px; }
.health-bar {
  height:5px; border-radius:3px; background:var(--surface-2);
  margin-top:7px; overflow:hidden;
}
.health-bar > span {
  display:block; height:100%; border-radius:3px;
  background:var(--bar,var(--accent));
  transition:width 900ms var(--ease-out);
}

/* ── Best sellers — numbered list ── */
.seller-list { display:flex; flex-direction:column; }
.seller-item {
  display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--hairline);
}
.seller-item:last-child { border-bottom:none; }
.seller-num {
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--surface-2); color:var(--text-secondary);
  border:1px solid var(--hairline);
}
.seller-item:first-child .seller-num { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.seller-title { font-size:13px; font-weight:500; color:var(--text-primary);
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seller-meta  { font-size:11px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }

/* ── Compact order rows (overview preview) ── */
.mini-row {
  display:grid; grid-template-columns:1fr auto; gap:10px;
  align-items:center; padding:9px 0; border-bottom:1px solid var(--hairline);
}
.mini-row:last-child { border-bottom:none; }
.mini-who  { font-size:13px; font-weight:500; color:var(--text-primary);
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-meta { font-size:11px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.mini-amt  { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
             color:var(--text-primary); text-align:right; }

/* ── Best-sellers strip ── */
.seller-strip {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px;
}
.seller {
  background:var(--surface-2); border:1px solid var(--hairline);
  border-radius:var(--r-control); padding:11px; position:relative;
}
.seller-rank {
  position:absolute; top:8px; left:8px;
  width:19px; height:19px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
}
.seller-thumb {
  width:100%; aspect-ratio:1/1; border-radius:var(--r-chip);
  background:var(--surface-1); object-fit:cover; display:block; margin-bottom:9px;
}
.seller-name { font-size:13px; font-weight:500; color:var(--text-primary);
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seller-sold { font-size:11px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }

@media (max-width:1180px) {
  .dash-grid { grid-template-columns:1fr 1fr; }
  .dash-grid > .dash-col:first-child { grid-column:1 / -1; }
}
@media (max-width:760px) {
  .dash-grid { grid-template-columns:1fr; }
  .dash-grid > .dash-col:first-child { grid-column:auto; }
  .dash-head { flex-direction:column; }
  .dash-search { width:100%; }
  .dash-greet h2 { font-size:22px; }
}


/* ─────────────────────────────────────────────────────────────
   9d. DENSITY + SOLIDITY PASS
   Do shikayatein: (1) buttons/cards bohat jagah kha rahe thay,
   (2) rangeen chips itne halke thay ke nazar hi nahi aate thay.
   Yahan spacing kasi gayi hai aur tints ko thos kiya gaya hai.
   ───────────────────────────────────────────────────────────── */

/* ── Panels: 24px → 18px. Chhote panels par 24 bohat zyada tha ── */
.panel { padding:18px; }
.panel-header { margin-bottom:12px; }

/* ── KPI cards ── */
.metric-card { padding:14px 16px; }
.kpi-value { font-size:27px; }

/* ── Quick-action tiles: pehle 6 tiles poora column kha rahe thay ── */
.action-grid { grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; }
.action-card { padding:12px 8px; gap:7px; border-radius:var(--r-chip); }
.action-icon { width:30px; height:30px; }
.action-icon svg { width:15px; height:15px; }
.action-title { font-size:12px; }

/* ── Office / catalog KPI tiles ── */
.of-kpi { padding:12px 14px; border-radius:var(--r-control); }
.of-kpi-l { font-size:10px; }
.of-kpi-v { font-size:20px; margin-top:5px; }
.of-kpi-s { font-size:11px; margin-top:3px; }

/* ── Health + seller rows thora kase ── */
.health-rows { gap:11px; }
.health-badge { width:30px; height:30px; font-size:12px; }
.health-row { grid-template-columns:30px 1fr; gap:10px; }
.seller-item { padding:8px 0; }
.mini-row { padding:7px 0; }


/* ── SOLID CHIPS ──────────────────────────────────────────────
   Sab chips 10–12% tint par thay — halke rang ke text ke sath wo
   background ki tarah hi lagte thay. Ab fill 22% aur kinara 45%
   currentColor se banta hai, to har chip ka apna wazan hai aur
   status aik nazar me parha jata hai. currentColor use karne ki
   wajah: renderers inline `color` set karte hain, background nahi —
   is liye ek rule sab statuses par chal jata hai. */
.badge,
.status-badge,
.cat-chip,
.cat-demand,
.cat-trend {
  background-color:color-mix(in srgb, currentColor 22%, transparent);
  /* ⚠️ `border-color` is engine par na color-mix() se chalta hai na plain
     currentColor se (fresh element par bhi transparent aata hai — napa gaya).
     Is liye kinara box-shadow ke inset ring se banaya hai, jo currentColor
     ke sath bharosemand chalta hai. */
  box-shadow:inset 0 0 0 1px currentColor;
  font-weight:600;
}

.cat-chip i,
.cat-demand i { opacity:1; color:inherit; }
.cat-chip b,
.cat-demand b { color:inherit; }

/* ── SOLID STATUS CHIP ──
   Masla: renderers inline `color` par status ka rang lagate thay, to text
   hi rangeen hota tha. Light mode me wo halke amber/green safed tint par
   1.26:1 par aa jate thay — bilkul na parhe jaane wale.
   Hal: rang FILL aur RING me, text hamesha --text-primary. Rang pehchan
   deta hai, text parhne ke liye rehta hai, aur label khud status likhta
   hai — to ma'ani sirf rang par nahi. */
.chip-solid {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:var(--r-chip);
  font-size:11px; font-weight:600; white-space:nowrap;
  background-color:color-mix(in srgb, var(--chip,var(--accent)) 20%, transparent);
  box-shadow:inset 0 0 0 1px var(--chip,var(--accent));
  color:var(--text-primary);
  border:none;
}

/* Orders page ke status filter pills — wahi usool, magar pill ki shakal me.
   Chuna hua pill bhara hua hota hai taake "kaunsa filter on hai" foran
   nazar aaye, baqi halke fill + ring par rehte hain. */
.filter-pill.status-chip {
  background-color:color-mix(in srgb, var(--chip,var(--accent)) 16%, transparent);
  box-shadow:inset 0 0 0 1px var(--chip,var(--accent));
  color:var(--text-primary);
  border-color:transparent;
  font-weight:500;
}
.filter-pill.status-chip::before {
  content:''; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--chip,var(--accent)); margin-right:2px;
}
.filter-pill.status-chip:hover { background-color:color-mix(in srgb, var(--chip,var(--accent)) 26%, transparent); }
.filter-pill.status-chip.active-admin {
  background-color:color-mix(in srgb, var(--chip,var(--accent)) 42%, transparent);
  box-shadow:inset 0 0 0 1.5px var(--chip,var(--accent));
  color:var(--text-primary);
  font-weight:600;
}

/* style.css ke tinted badge variants (10% fill) — inhe bhi thos karo.
   Text ka rang wahi rehta hai; sirf fill aur kinara mazboot hue. */
.badge-shipped,.badge-delivered,.badge-processed,.badge-dispatched,
.badge-pending,.badge-cancelled,.badge-paid,.badge-active,
.badge-admin,.badge-investor,.badge-partner,.badge-employee {
  background-color:color-mix(in srgb, currentColor 22%, transparent);
  border-width:1px;
  border-style:solid;
  border-color:currentColor;
}
/* Pending ka pulse hata diya — har qatar me hilti hui cheez
   parhne me rukawat banti hai, aur spec bouncing loaders mana karta hai. */
.badge-pending { animation:none; }


/* ── TIME FILTER SELECT (topbar) ────────────────────────────────
   Teen masle thay:
     1. Dark mode me native dropdown safed rehta tha aur options
        nazar nahi aate thay — `color-scheme` set nahi tha.
     2. Chevron ka rang SVG me safed hardcoded tha, to light mode me
        ghayab. Ab poora background-image ek token hai.
     3. `.theme-toggle` position:fixed hai (z-index 500) aur topbar ke
        content par charh jata tha — isi liye overlap dikh raha tha.
   Text bhi Apple UI jaisa: system stack, 15px, -0.01em. */
:root {
  --select-chevron:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236C6C76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --select-chevron:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A99BB0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  --select-chevron:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A99BB0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ⚠️ `color-scheme` hi wo cheez hai jo native dropdown ko dark banati
   hai — options ko CSS se style nahi kiya ja sakta. */
select,
.time-select {
  color-scheme:inherit;
}
.time-select {
  appearance:none; -webkit-appearance:none;
  height:34px;
  padding:0 32px 0 13px;
  background-color:var(--surface-2);
  background-image:var(--select-chevron);
  background-repeat:no-repeat;
  background-position:right 12px center;
  border:1px solid var(--hairline);
  border-radius:var(--r-control);
  color:var(--text-primary);
  font:500 15px/1 var(--font);
  letter-spacing:-0.01em;
  min-width:150px;
  cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-micro) var(--ease-out);
}
.time-select:hover { border-color:var(--hairline-strong); }
.time-select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Fixed theme-toggle ke liye jagah chhoro, warna wo topbar ke
   control par charh jata hai (pic 2 ka overlap). */
/* padding-right:64px HATA diya — wo sirf fixed toggle ke liye jagah
   rakhne ko tha. Toggle ab flex row me hai, is liye jagah khud ban
   jati hai aur ye padding ab bekar khali hissa banata tha. */
.topbar { padding-right:20px; }

/* ── Topbar ke teen controls ek line me ──
   Pehle teen alag alag qad thay: bell 36px (inline style), time-select
   34px, aur theme-toggle `position:fixed` — yani wo topbar ke flow me hi
   nahi tha. Is liye teeno ke markaz mel nahi khate thay.
   Ab teeno 36px, aur topbar-right sab ko beech me rakhta hai. */
.topbar-right { display:flex; align-items:center; gap:10px; }
/* Select ke oopar ka column-wrapper apni jagah beech me rahe */
.topbar-right > div { display:flex; align-items:center; }
.topbar-right #topFilter { align-items:center; }
.time-select { height:36px; }
/* ⚠️ Toggle pehle `position:fixed; top:12px` par tha — yani uski jagah
   topbar ki lambai ka hisab kar ke tay hoti thi, aur wo hisab galat hote
   hi teeno control ki line toot jati thi (screenshot me toggle oopar tha).
   Ab wo topbar ke flex row ka asal hissa hai: `position:static` se flexbox
   khud markaz par rakh deta hai, topbar chahe kitni bhi lambi ho. */
.topbar-right .theme-toggle {
  position:static; top:auto; right:auto; z-index:auto;
  width:36px; height:36px; flex:none;
}
/* Baqi pages par (jahan toggle abhi body ka bacha hai) purana behaviour
   waisa hi rehta hai. */
.theme-toggle { width:36px; height:36px; }
.theme-toggle {
  background:var(--surface-2);
  border:1px solid var(--hairline);
  color:var(--text-secondary);
  box-shadow:var(--shadow);
}
.theme-toggle:hover { color:var(--text-primary); border-color:var(--hairline-strong); }


/* ─────────────────────────────────────────────────────────────
   10. ACCESSIBILITY
   ───────────────────────────────────────────────────────────── */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  body::before { animation:none; }
  .panel:hover,.metric-card:hover,.store-card:hover,.note-card:hover,
  .btn-primary:hover,.btn-ghost:hover,.btn-icon:hover,.filter-pill:hover,
  .btn-primary:active,.btn-ghost:active,.btn-icon:active,.filter-pill:active {
    transform:none;
  }
}

@media (prefers-contrast: more) {
  .panel,.metric-card,.store-card,.note-card,.account-selector,
  .modal-card,.sidebar,.topbar,.dropdown,.popover,.notif-panel,.glass {
    background:var(--surface-solid);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-color:var(--hairline-strong);
  }
  body::before { display:none; }
}


/* ─────────────────────────────────────────────────────────────
   11. PERFORMANCE GUARDS
   ───────────────────────────────────────────────────────────── */

/* backdrop-filter na ho to solid — jaan-boojh kar aisa lage, toota hua na */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .panel,.metric-card,.store-card,.note-card,.account-selector,
  .modal-card,.sidebar,.topbar,.dropdown,.popover,.notif-panel,.glass {
    background:var(--surface-solid);
    border-color:var(--hairline-strong);
  }
  body::before { opacity:.32; }
}

/* Chhota mobile / touch — orb rok do, blur 12px par le aao */
@media (hover:none) and (pointer:coarse) {
  :root { --blur-amount:12px; }
  body::before { animation:none; }
}

/* Touch targets 44px */
@media (max-width:768px) {
  .btn-primary,.btn-ghost,.field-input,input,select { height:44px; }
  .btn-icon { width:44px; height:44px; }
  .nav-item { min-height:44px; }
}

/* 360px tak */
@media (max-width:400px) {
  h1 { font-size:28px; }
  h2 { font-size:22px; }
  .metric-value { font-size:22px; }
}

/* ══════════════════════════════════════════════════════════════════
   ORDERS TABLE — Item ID khana (multi-item orders)
   ------------------------------------------------------------------
   Ek eBay order me buyer do alag listings khareed leta hai, aur sheet me
   dono Item IDs ek hi khane me aati hain: "377159991243 + 377373587414".

   Pehle wo poora string 11px ke tang khane me ek lambi lakeer ban jata
   tha — dusri ID kat kar ghayab. Ab har ID apni chip me, wrap ho kar
   doosri satar par chali jati hai, aur chip par click se wohi ek ID
   copy hoti hai (poora "A + B" string nahi, jo kahin paste karne ke
   kaam ka nahi tha).

   Rang sirf tokens se; bhari hui chip par text hamesha --text-primary.
   ══════════════════════════════════════════════════════════════════ */
.iid-cell  { font-size:12px; }
.iid-wrap  { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.iid {
  appearance:none; -webkit-appearance:none; cursor:pointer; border:0;
  font:inherit; font-family:var(--mono); font-size:12px; font-weight:500;
  padding:2px 7px; border-radius:var(--r-chip); white-space:nowrap;
  background:var(--surface-2); color:var(--text-primary);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.iid:hover { box-shadow:inset 0 0 0 1px var(--hairline-strong); }
.iid:focus-visible { outline:2px solid var(--accent-text); outline-offset:1px; }
/* Copy ho gayi — nishan chip par hi, toast ka intezar nahi */
.iid.iid-ok {
  background-color:color-mix(in srgb, var(--success) 22%, transparent);
  box-shadow:inset 0 0 0 1px var(--success);
  color:var(--text-primary);
}
/* "2 items" — ginti rang me nahi, likhi hui hai (rang par kabhi maana
   nahi chhora jata; rang sirf saath deta hai) */
.iid-n {
  font-size:11px; font-weight:600; white-space:nowrap;
  padding:2px 6px; border-radius:var(--r-chip);
  color:var(--text-primary);
  background-color:color-mix(in srgb, var(--data-4) 18%, transparent);
  box-shadow:inset 0 0 0 1px var(--data-4);
}
.iid-none { color:var(--text-tertiary); }

/* ══════════════════════════════════════════════════════════════════
   STORE ASSIGNMENT PICKER — Store modal ke "Partners" / "Employees"
   ------------------------------------------------------------------
   Pehle ek `<select>` tha — ek waqt me sirf ek partner, ek employee.
   Ab har candidate apna chip hai; tap se on/off, ek se ziada tick ho
   sakte hain. Fill+ring on state, text hamesha --text-primary.
   ══════════════════════════════════════════════════════════════════ */
.sm-pick-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.sm-pick {
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:6px 12px; border-radius:var(--r-chip);
  font:inherit; font-size:13px; font-weight:500;
  background:var(--surface-2); color:var(--text-secondary);
  border:1px solid var(--hairline-strong);
  transition:transform var(--dur-micro) var(--ease-out);
}
.sm-pick:hover { border-color:var(--accent); color:var(--text-primary); }
.sm-pick:active { transform:scale(.96); }
.sm-pick.on {
  color:var(--text-primary);
  background-color:color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
@media (prefers-reduced-motion:reduce) { .sm-pick:active { transform:none; } }

/* ══════════════════════════════════════════════════════════════════
   ROLE AVATAR FALLBACK — jab kisi ki tasveer set na ho
   ------------------------------------------------------------------
   ⚠️ style.css ke `.av-*` bilkul NA-PARHNE-WALAY thay. Napa gaya:

     av-admin    1.00:1  (dono theme) — safed par safed, harf ghayab
     av-student  1.15:1  dark
     av-investor 1.82:1  dark
     av-employee 1.94:1  dark
     av-partner  2.90:1  dark

   Wajah: wo `--teal-header` / `--green` / `--purple` par bharte hain aur
   un par `#fff` likhte hain. Naye theme me `--teal-header` khud
   `--surface-1` (yani SAFED) ban gaya, aur baqi tokens dark theme me
   halke ho gaye — to safed text un par doob gaya.

   Ab wahi jori jo `.btn-primary` par chalti hai: `-text` variant ka
   bharav + `--surface-solid` ka harf. Ye dono theme me apne aap ulat
   jati hai (light me gehra bharav + safed harf, dark me halka bharav +
   gehra harf), is liye kabhi doobta nahi. Role ka farq barqarar hai —
   sirf har role ka apna `-text` token use hota hai.

   `!important` ki zaroorat nahi: theme.css style.css ke BAAD load hoti
   hai, is liye ye qudrati tor par jeet jati hai.
   ══════════════════════════════════════════════════════════════════ */
.av-admin    { background:var(--accent-text);  color:var(--surface-solid); }
.av-investor { background:var(--success-text); color:var(--surface-solid); }
.av-partner  { background:var(--data-2-text);  color:var(--surface-solid); }
.av-employee { background:var(--data-4-text);  color:var(--surface-solid); }
.av-student  { background:var(--warning-text); color:var(--surface-solid); }

/* ══════════════════════════════════════════════════════════════════
   DASH GRID — fit-to-content variant (.dash-grid-fit)
   ------------------------------------------------------------------
   Asal `.dash-grid` teeno column ko qatar ki poori lambai deta hai aur
   aakhri panel ko `flex:1` se bachi jagah bharne deta hai. Admin par ye
   theek hai: wahan har column me TEEN panel hain aur aakhri panel ek
   lambi list hai (Best sellers / todo), jo jagah ka fayda utha leti hai.

   Partner par sirf DO panel hain per column (Quick actions aur Best
   sellers jaan-boojh kar nahi), aur aakhri panel donon jagah aisa hai jo
   PHAIL nahi sakta — Order status ke andar 132px ka tay-shuda donut hai,
   aur "What needs doing today" me sirf teen qatarein. Natija napa gaya:
     baayen column   988px (Recent orders 643px)
     Order status    630px panel, jis me 416px KHALI
     todo panel      703px, andar sirf ~180px ki qatarein
   Yani bara khokhla dabba — wahi jo screenshot me nazar aa raha tha.

   Is liye partner ka grid content ke mutabiq lambai leta hai: koi panel
   zabardasti nahi phailta. Neeche ka kinara thoda oonchaneecha rehta hai,
   magar khali BORDERED khadda nahi banta — aur wo dekhne me kahin behtar
   hai.
   ══════════════════════════════════════════════════════════════════ */
.dash-grid.dash-grid-fit { align-items:start; }
.dash-grid.dash-grid-fit > .dash-col > .panel:last-child { flex:0 0 auto; }
/* todo list ab bachi jagah nahi khati — apni qataron jitni ooncha */
.dash-grid.dash-grid-fit .todo-wrap { flex:0 1 auto; overflow-y:visible; }

/* ══════════════════════════════════════════════════════════════════
   BULK PASTE PREVIEW — counter tags
   ------------------------------------------------------------------
   Admin ke bulk forms me ye tags inline hardcoded hex par thay
   (`color:#5DCAA5`, `#F0B84A`, `#F09595`). Employee ke naye bulk form
   ke liye tokens par le aaye — fill+ring, aur text hamesha
   --text-primary, taake dono theme me parha jaye.
   ══════════════════════════════════════════════════════════════════ */
.bulk-tag {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 2px 10px; border-radius: var(--r-chip);
  color: var(--text-primary);
}
.bulk-tag.new  { background: color-mix(in srgb, var(--success) 20%, transparent); box-shadow: inset 0 0 0 1px var(--success); }
.bulk-tag.dup  { background: color-mix(in srgb, var(--warning) 20%, transparent); box-shadow: inset 0 0 0 1px var(--warning); }
.bulk-tag.auto { background: color-mix(in srgb, var(--data-4)  20%, transparent); box-shadow: inset 0 0 0 1px var(--data-4);  }
.bulk-tag.err  { background: color-mix(in srgb, var(--danger)  20%, transparent); box-shadow: inset 0 0 0 1px var(--danger);  }

/* Preview table ki chhoti row-tags */
.bulk-row-tag { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-chip); color: var(--text-primary); white-space: nowrap; }
.bulk-row-tag.new  { background: color-mix(in srgb, var(--success) 20%, transparent); box-shadow: inset 0 0 0 1px var(--success); }
.bulk-row-tag.upd  { background: color-mix(in srgb, var(--data-4)  20%, transparent); box-shadow: inset 0 0 0 1px var(--data-4);  }
.bulk-row-tag.same { background: var(--surface-2); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--hairline); }

/* ══════════════════════════════════════════════════════════════════
   MARKETS — flag, badge, aur topbar ka market filter
   ------------------------------------------------------------------
   Flags inline SVG hain (config.js me), emoji nahi — Windows par emoji
   flags asli flag nahi bante, do harf ban kar reh jate hain.

   Flag ke sath naam HAMESHA likha hota hai. Flag akela maani nahi
   uthata: rang-blindness aur chhote size, dono me do flags aapas me
   mil sakte hain.
   ══════════════════════════════════════════════════════════════════ */
.mkt-flag {
  display: block; flex: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25);   /* halka kinara, warna safed flag ghul jata hai */
}
.mkt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 2px 9px 2px 6px; border-radius: var(--r-chip);
  background: var(--surface-2); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

/* ── Topbar ka market filter ──
   Date filter ke barabar, usi qatar me — 36px qad, wahi control shakal. */
.mkt-select-wrap { position: relative; display: flex; align-items: center; flex: none; }
.mkt-select-flag {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
select.mkt-select {
  appearance: none; -webkit-appearance: none;
  height: 36px;
  padding: 0 30px 0 34px;                 /* baayen flag ki jagah, daayen chevron ki */
  background-color: var(--surface-2);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  color: var(--text-primary);
  font: 500 15px/1 var(--font);
  letter-spacing: -0.01em;
  cursor: pointer;
  min-width: 132px;
}
/* Market filter + date filter ki qatar. Market filter is ka SEEDHA bachcha
   hai aur `#topFilter` us ka bhai — is liye jab showSection() `#topFilter`
   ko chhupata hai (overview/orders ke ilawa har section par), market filter
   phir bhi nazar aata hai. Dono nazar aayein to ek hi qatar me, lambai me
   nahi. */
.topbar-controls { display:flex; align-items:center; gap:8px; }

select.mkt-select:hover { border-color: var(--hairline-strong); }
select.mkt-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Koi market chuni hui ho to filter khud bata de ke wo lagi hui hai */
select.mkt-select[data-on="1"] {
  background-color: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  border-color: var(--accent);
}

/* Store card / table ki market qatar */
.sc-market { display: flex; align-items: center; gap: 7px; }
.sc-market > span:last-child { font-size: 12px; color: var(--text-secondary); }

@media (max-width: 900px) {
  select.mkt-select { min-width: 0; font-size: 13px; padding: 0 26px 0 30px; }
}
@media (max-width: 640px) {
  /* Tang screen par sirf flag + chevron — naam chhup jata hai, magar
     `title` aur chuna hua option phir bhi naam batate hain. */
  select.mkt-select { min-width: 62px; color: transparent; padding: 0 22px 0 28px; }
  /* Sirf GHAIR-chune options ka rang wapas lena hai (control par
     `color:transparent` hai, aur options us se inherit kar lete).
     `:not(:checked)` zaroori hai: bina us ke ye rule chune hue option ka
     jora bhi tor deta tha — halka safed text bhare pink par, 1.16:1
     (naapa). !important lagane ke bajaye takrane wala selector theek. */
  select.mkt-select option:not(:checked) { color: var(--text-primary); }
}

/* Account tab me market ka flag — naam ke saath, ek line me */
.acc-tab { display: inline-flex; align-items: center; gap: 6px; }
.acc-tab .mkt-flag { flex: none; }

/* ══ MARKETING — buyer contact list ══
   Do jagah chalti hai: admin ka table aur marketing employee ke cards.
   Rang kabhi akela maani nahi deta — status ka lafz hamesha sath likha
   hota hai, `data-tone` sirf pehchanne ki raftaar barhata hai. */
.mk-scroll { overflow-x:auto; }
.mk-table { width:100%; border-collapse:collapse; font-size:13px; }
.mk-table th {
  text-align:left; padding:8px 10px; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-tertiary); border-bottom:1px solid var(--hairline);
}
.mk-table td { padding:9px 10px; border-bottom:1px solid var(--hairline); vertical-align:top; }
.mk-table tbody tr:hover { background:var(--surface-2); }
.mk-name { font-weight:500; color:var(--text-primary); }
.mk-sub  { font-size:12px; color:var(--text-secondary); }
/* ⚠️ `.filter-pill` inline-flex hai, is liye label aur ginti ke beech ka
   space GIR jata hai — screen par "All0" likha aata tha. Flex items ke
   darmiyan faasla margin/gap se hi banta hai, text ke space se nahi. */
.mk-count { margin-left:6px; font-variant-numeric:tabular-nums; opacity:.75; }

/* WhatsApp — number khud button hai. Hara rang sirf tab jab sheet kehti
   hai ke WhatsApp hai; warna saada, taake ummeed jhooti na bane. */
.mk-wa {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 9px; min-height:32px;
  font-size:12px; font-variant-numeric:tabular-nums;
  color:var(--text-primary); text-decoration:none;
  border-radius:var(--r-chip);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);
  white-space:nowrap;
  transition:background-color var(--dur-micro) var(--ease-out);
}
.mk-wa:hover { background:var(--surface-2); }
.mk-wa:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mk-wa-wrap[data-tone="good"] .mk-wa { box-shadow:inset 0 0 0 1px var(--success); }
.mk-wa-wrap[data-tone="bad"]  .mk-wa { opacity:.7; }

.mk-link {
  font-size:12px; color:var(--accent-text); text-decoration:none;
  display:inline-flex; align-items:center; min-height:32px;
}
.mk-link:hover { text-decoration:underline; }
.mk-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Note aur chhote select — table ke andar rehne ke liye compact */
.mk-note {
  width:100%; min-width:130px; height:32px; padding:0 8px;
  font-size:12px; font-family:var(--font);
  color:var(--text-primary); background:var(--surface-2);
  border:1px solid var(--hairline); border-radius:var(--r-control);
}
.mk-note:focus { outline:none; border-color:var(--accent); }
.mk-mini {
  height:32px; padding:0 8px; font-size:12px; font-family:var(--font);
  color:var(--text-primary); background:var(--surface-2);
  border:1px solid var(--hairline); border-radius:var(--r-control);
}
.mk-mini:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

.mk-bulk {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 12px; margin-bottom:10px;
  background:var(--accent-wash); border-radius:var(--r-control);
}
.mk-bulk-n { font-size:12px; font-weight:600; color:var(--text-primary); }

/* ── Employee ke cards ── */
.mk-cards { display:flex; flex-direction:column; gap:10px; }
.mk-card {
  padding:13px 14px;
  background:var(--surface-2); border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.mk-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.mk-card-meta {
  margin-top:5px; font-size:12px; color:var(--text-secondary);
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.mk-dot { color:var(--text-tertiary); }
.mk-admin-note {
  margin-top:8px; padding:7px 10px; font-size:12px;
  color:var(--text-primary); background:var(--accent-wash);
  border-radius:var(--r-control);
}
.mk-card-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.mk-card-result { display:flex; flex-direction:column; gap:7px; margin-top:11px; }

/* Status ka chip — lafz hamesha andar likha hota hai */
.mk-chip {
  flex:none; padding:3px 9px; border-radius:var(--r-chip);
  font-size:11px; font-weight:500; white-space:nowrap;
  color:var(--text-primary);
  box-shadow:inset 0 0 0 1px var(--hairline-strong);
}
.mk-chip[data-tone="good"] { background:color-mix(in srgb, var(--success) 16%, transparent); }
.mk-chip[data-tone="bad"]  { background:color-mix(in srgb, var(--danger)  16%, transparent); }
.mk-chip[data-tone="warn"] { background:color-mix(in srgb, var(--warning) 16%, transparent); }
.mk-chip[data-tone="info"] { background:color-mix(in srgb, var(--data-4)  16%, transparent); }

@media (max-width:720px) {
  .mk-table { font-size:12px; }
  .mk-note { min-width:110px; }
}

/* Delete — mitane wala kaam, is liye rang bhi wahi. Rang akela ishara nahi:
   icon kooray ka dabba hai, aur dabane par poochha bhi jata hai. */
.mk-del { color:var(--text-secondary); }
.mk-del:hover {
  color:var(--danger-text);
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  border-color:transparent;
}
.mk-del:focus-visible { outline:2px solid var(--danger); outline-offset:1px; }
/* Bulk bar ka delete — bhara hua, taake Assign ke sath ghalti se na dab jaye */
.mk-del-btn {
  background:var(--danger-text);
  color:var(--surface-solid);
  box-shadow:none;
}
.mk-del-btn:hover { filter:brightness(1.08); }

/* Marketing pager — orders page jaisa */
.mk-pager {
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-bottom:10px;
}
.mk-pager-n {
  font-size:12px; color:var(--text-secondary);
  font-variant-numeric:tabular-nums; text-align:center;
}

/* Chips ki qatar + arrow buttons. Arrow sirf us taraf jahan waqai aur chips
   hain — dono taraf hamesha dikhana jhoot bolta hai. */
.vcard-chipwrap { position:relative; display:flex; align-items:center; min-width:0; }
.vcard-chipwrap .vcard-chips { flex:1 1 auto; min-width:0; }
.vchip-nav {
  position:absolute; z-index:2; top:50%; transform:translateY(-50%);
  width:30px; height:30px; padding:0;
  display:none; place-items:center;
  font:inherit; font-size:17px; line-height:1;
  color:var(--surface-solid); background:var(--accent-text);
  border:none; border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.vchip-nav.prev { left:-4px; }
.vchip-nav.next { right:-4px; }
.vcard-chipwrap.has-prev .vchip-nav.prev,
.vcard-chipwrap.has-next .vchip-nav.next { display:grid; }
.vchip-nav:hover { filter:brightness(1.08); }
.vchip-nav:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Kheenchte waqt text select na ho aur ungli/pointer "pakri hui" lage */
.vcard-chips.dragging { cursor:grabbing; user-select:none; scroll-snap-type:none; }
.vcard-chips.dragging .vchip { pointer-events:none; }

/* "Order pending" ka pill — ye store ki chhaanti nahi, KAAM ki qatar hai.
   Ek hi bar me dono qism ke pill hon to farq nazar aana chahiye, is liye
   is par apni ring aur halka warning rang. Rang akela ishara nahi — lafz
   "Order pending" khud sab keh deta hai. */
.filter-pill.fp-work {
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warning) 55%, transparent);
  background:color-mix(in srgb, var(--warning) 10%, transparent);
  color:var(--text-primary);
}
.filter-pill.fp-work:hover {
  background:color-mix(in srgb, var(--warning) 16%, transparent);
}

/* Pending ke ANDAR ki chhaanti — nazar aana chahiye ke ye upar wali bar ke
   TAABE hai, us ki barabar nahi. Is liye halki dhaansi hui patti me, chhote
   pill, aur baayen ek lafz jo bataye ye kis cheez ki chhaanti hai. */
.fp-subwrap {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 10px; margin-bottom:12px;
  background:var(--surface-2); border-radius:var(--r-control);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.fp-sublabel {
  font-size:12px; font-weight:600; color:var(--text-secondary);
  margin-right:2px;
}
.filter-pill.fp-sub { height:27px; padding:0 11px; font-size:13px; }

/* "Product add nahi hua" — kaam ki alag qism, is liye alag dabba.
   Warning ka rang, magar lafz khud sab keh dete hain. */
.pend-missing {
  padding:12px 14px; margin-bottom:14px;
  background:color-mix(in srgb, var(--warning) 9%, transparent);
  border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warning) 40%, transparent);
}
.pend-missing-head { font-size:14px; color:var(--text-primary); margin-bottom:4px; }
/* ⚠️ --text-secondary is warning-rangat wale dabbe par 4.28:1 par gir jata
   hai (naapa, light theme). Ye line hidayat hai — parhi jani chahiye — is
   liye --text-primary. Wahi wajah jo earnings card par thi. */
.pend-missing-sub  { font-size:12px; color:var(--text-primary); margin:0 0 10px; line-height:1.5; }

/* Inverted health rows par qabool hadd — number ke sath hi, taake banda
   ko "5% late" dekh kar andaza ho ke hadd 2% thi. */
.health-tol {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--text-tertiary) 8%, var(--surface-solid));
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Office fines ──────────────────────────────────────────────────────── */
.fine-pill {
  padding: 2px 10px;
  border-radius: var(--r-chip);
  background: var(--surface-2);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.fine-pill-bad {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-solid));
  color: var(--danger-text);
  font-weight: 600;
}

.fine-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 12px; }
.fine-filter {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 5px 11px;
  border: 1px solid var(--hairline); border-radius: var(--r-chip);
  background: var(--surface-1);
  font-size: 12px; color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.fine-filter:hover { border-color: var(--hairline-strong); color: var(--text-primary); }
/* Chuna hua sirf rang se nahi — border bhi mota hota hai. */
.fine-filter.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--text-primary);
}
/* Badge panel > filter > badge — teen translucent parton par baithta tha,
   aur dark me 4.42:1 par gir jata. Solid par mix karne se natija tay hai. */
.fine-filter span {
  padding: 0 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-tertiary) 10%, var(--surface-solid));
  font-size: 10px; color: var(--text-secondary);
}

.fine-chip {
  display: inline-block; padding: 2px 9px;
  border-radius: var(--r-chip);
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.fine-chip.fine-ok   { background: color-mix(in srgb, var(--success) 8%, var(--surface-solid)); color: var(--success-text); }
.fine-chip.fine-bad  { background: color-mix(in srgb, var(--danger)  8%, var(--surface-solid)); color: var(--danger-text); }
.fine-chip.fine-wait { background: color-mix(in srgb, var(--text-tertiary) 8%, var(--surface-solid)); color: var(--text-secondary); }

.fine-btn { min-height: 28px; padding: 4px 9px; font-size: 11px; }

/* Fines panel header: pehle title-pills wala div 0 width par simat jata tha
   aur button poori satar le kar us ke OOPAR chadh jata tha (mobile.css
   panel-header ke buttons ko flex:0 1 100% deti hai). Dono ko sahi jagah
   par pakka kar dete hain. */
.fine-head {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 140px; flex-wrap: wrap;
}
.fine-panel .panel-header > button { flex: 0 0 auto; }

/* Table: Reason ko jagah chahiye (wahi text WhatsApp par jata hai), Action
   ko nahi. Bina width diye browser Action ko 180px aur Reason ko 74px de
   raha tha, jis se wajah ek-ek lafz kar ke tootti thi. */
/* table-layout:fixed ke baghair percentages sirf mashwara hoti hain —
   browser content dekh kar khud tay karta hai, aur Action ko 180px jab ke
   Reason ko 89px de raha tha. */
.fine-panel table { min-width: 860px; table-layout: fixed; }
.fine-panel th:nth-child(1), .fine-panel td:nth-child(1) { width: 14%; }
.fine-panel th:nth-child(2), .fine-panel td:nth-child(2) { width: 9%; }
.fine-panel th:nth-child(3), .fine-panel td:nth-child(3) { width: 30%; }
.fine-panel th:nth-child(4), .fine-panel td:nth-child(4) { width: 9%; }
.fine-panel th:nth-child(5), .fine-panel td:nth-child(5) { width: 11%; }
.fine-panel th:nth-child(6), .fine-panel td:nth-child(6) { width: 8%; }
.fine-panel th:nth-child(7), .fine-panel td:nth-child(7) { width: 19%; }
/* Reason lambi ho sakti hai — todhne dein, kaatne na dein. */
.fine-panel td:nth-child(3) { white-space: normal; word-break: break-word; }