/* ===========================================================
   MALMAL — v2 editorial theme (design_handoff_malmal_v2):
   warm paper, ink sidebar, brand red as large color blocks,
   green reserved for verified / paid / delivered.
   Legacy var names (teal/gold/ivory/tint/grad…) are kept as ALIASES
   mapped onto the v2 tokens so existing markup/JS keeps working.
   =========================================================== */
:root {
  /* ---- v2 design tokens (light) ---- */
  --brand: #B3261E;        /* primary buttons, active marks, big red panels */
  --brand-deep: #7A1712;   /* text on blush, gradient end */
  --blush: #F6E4DF;        /* warning / held / overdue tiles */
  --green: #0F8A5F;        /* verified, success, progress */
  --green-deep: #0A6B49;   /* green text, green panels */
  --mint: #E3F3EA;         /* success tiles and pills */
  --amber: #A86A12;        /* pending / quoting / in review (text) */
  --amber-bg: #F8EBD3;     /* pending tiles and pills */
  --ink: #17110F;          /* text, sidebar, dark cards, secondary buttons */
  --ink-2: #4F4541;        /* body text */
  --ink-3: #857A75;        /* muted text, mono labels */
  --paper: #F7F3EE;        /* page background */
  --card: #FFFDFB;         /* cards */
  --line: rgba(23, 17, 15, .10);
  --line-2: rgba(23, 17, 15, .16);
  --on-dark-green: #6FE0B0; /* accents inside ink cards */
  --on-dark-pink: #FFB4AE;
  --on-ink: #FFFFFF;        /* text on ink / brand surfaces */
  --on-ink-soft: rgba(255, 255, 255, .72);
  --ink-fill: #17110F;      /* ink SURFACE under white text — stays dark in both modes (unlike --ink, which flips) */
  /* Brand red used as TEXT or a mark (mode-aware — brightened on dark). --brand / --brand-deep
     stay fixed because they also fill surfaces (buttons, bands, panels) under white text. */
  --brand-text: #B3261E;
  --brand-text-deep: #7A1712;   /* deep accent text; red text on blush tiles */
  /* App shell surfaces */
  --side-bg: #17110F;                  /* ink sidebar — dark in BOTH modes */
  --side-line: rgba(255, 255, 255, .09);
  --hdr-bg: rgba(247, 243, 238, .9);   /* translucent paper header */

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Noto Naskh Arabic', system-ui, sans-serif;
  --font-ui: 'Geist', 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, 'Noto Naskh Arabic', monospace; /* Arabic in mono labels joins properly */

  /* Radii */
  --r-card: 22px;
  --r-hero: 24px;
  --r-control: 12px;
  --r-chip: 9px;

  /* Shadows — mostly flat with 1px borders */
  --shadow: 0 1px 0 rgba(23, 17, 15, .04);
  --shadow-brand: 0 12px 24px -14px rgba(179, 38, 30, .9);   /* primary button */
  --shadow-lift: 0 24px 44px -26px rgba(23, 17, 15, .6);     /* selected cards */

  /* ---- Legacy aliases → v2 (keep old markup working) ---- */
  /* red / teal families were the brand accent (titles, links, borders): text-role red */
  --red-900: var(--brand-text-deep);
  --red-700: var(--brand-text);
  --red-500: var(--brand-text);
  --red-300: #D86A63;
  --teal-900: var(--brand-text-deep);
  --teal-700: var(--brand-text);
  --teal-500: var(--brand-text);
  --teal-400: #D86A63;
  /* orange was the "active accent" (underlines, pills, gradient text): text-role red.
     Its two filled surfaces (.btn-gold, .roletab.auto.active) use the fixed brand reds. */
  --orange-700: var(--brand-text-deep);
  --orange-500: var(--brand-text);
  --orange-300: #D86A63;
  --orange-100: var(--blush);
  /* gold was labels / ornament / dividers: now muted ink + hairlines */
  --gold-900: var(--ink-3);    /* uppercase labels, table headers */
  --gold-700: var(--ink-3);    /* ornament glyph */
  --gold-600: var(--brand-text);
  --gold-500: var(--line-2);   /* ornament rules, flourishes, borders */
  --gold-300: var(--on-dark-pink); /* accent numbers on dark surfaces */
  /* silver → neutral hairlines */
  --silver-700: var(--ink-3);
  --silver-500: var(--line-2);
  --silver-300: var(--line);
  --silver-100: var(--paper);
  /* success */
  --ok-700: var(--green-deep);
  --ok-500: var(--green);
  /* paper surfaces (legacy ivory names) */
  --ivory-50: var(--card);
  --ivory-100: var(--paper);
  --ivory-200: #F1EBE4;
  --ivory-300: #EAE2DA;
  /* states */
  --warn-900: var(--amber);
  --warn-600: var(--amber);
  --danger-600: var(--brand-text-deep);  /* held / anomaly: red text on blush */
  --danger-900: #5A100D;
  /* primary-action gradient (fixed in both modes) */
  --maroon-900: var(--brand-deep);
  --maroon-700: #96201A;
  --maroon-500: var(--brand);

  --ink-soft: var(--ink-2);

  /* mode-aware surfaces & tints */
  --surface: var(--card);
  --tint-red: var(--blush);
  --tint-orange: var(--amber-bg);
  --tint-silver: var(--paper);
  --tint-teal: var(--mint);          /* legacy name: the VERIFIED/positive tint */
  --tint-teal-deep: #CDE9DA;
  --tint-warn: var(--amber-bg);
  --tint-danger: var(--blush);
  --tint-danger-deep: #EFCFC8;
  /* brand gradients — fixed in BOTH modes */
  --grad-teal-a: var(--brand-deep);
  --grad-teal-b: var(--brand);
  --grad-teal-c: #D86A63;
  --on-brand: #FFFFFF;
  --on-brand-soft: rgba(255, 255, 255, .78);
}

/* ===================== DARK MODE =====================
   The v2 prototype is light-only; these are the dark values for every v2
   token. Surfaces invert to warm charcoal; text-facing accents are
   brightened so brand / green / amber text stays readable (AA) on them. */
html[data-theme="dark"] {
  /* v2 tokens (dark). --brand / --brand-deep are NOT overridden: they fill surfaces that carry
     white text (buttons, bands, red panels) and must stay the deep red in both modes. */
  --brand-text: #EC6E64;        /* red as text / marks, brightened for dark cards */
  --brand-text-deep: #FFB4AE;   /* deep accent text; red text on the dark blush tile */
  --blush: #3B1C19;
  --green: #3FCF9A;
  --green-deep: #6FE0B0;
  --mint: #10302A;
  --amber: #E4AE57;
  --amber-bg: #3A2A12;
  --ink: #F3EDE7;          /* text */
  --ink-2: #D4CAC3;
  --ink-3: #A0948D;
  --paper: #15100E;        /* page */
  --card: #221B18;         /* cards */
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);
  --on-ink: #FFFFFF;
  --on-ink-soft: rgba(255, 255, 255, .72);
  --side-bg: #251D1A;                  /* lifted above the dark page so the panel edge still reads */
  --ink-fill: #2A2320;      /* lifted off the dark paper so ink cards still read as cards */
  --side-line: rgba(255, 255, 255, .12);
  --hdr-bg: rgba(21, 16, 14, .9);
  --shadow: 0 1px 0 rgba(0, 0, 0, .35);
  --shadow-lift: 0 24px 44px -26px rgba(0, 0, 0, .8);

  /* legacy aliases that carried fixed hex (re-point for dark) */
  --red-300: #F08F89;
  --teal-400: #F08F89;
  --orange-300: #F08F89;
  --ivory-200: #2A2220;
  --ivory-300: #332A27;
  --danger-900: #FFC9C4;
  --tint-teal-deep: #164438;
  --tint-danger-deep: #4A2420;
  --on-brand-soft: rgba(255, 255, 255, .78);
}
html[data-theme="dark"] body {
  background: var(--paper);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-ui);
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Editorial display type (Bricolage): big grotesque headlines, tight tracking */
.display, h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.03em; line-height: 1.05; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

/* ---- Layout ---- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.app-main { padding: 26px 0 60px; }

/* (The old red topbar + role tabs were replaced by the v2 app shell — see "App shell" below.) */

/* ---- Sub tabs ---- */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1.5px solid var(--line); }
.subtab {
  border: none; background: none; padding: 10px 14px; font-weight: 600; font-size: 13.5px;
  color: var(--ink-soft); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1.5px;
}
.subtab:hover { color: var(--teal-700); }
.subtab.active { color: var(--teal-900); border-bottom-color: var(--orange-500); }

/* ---- Cards ---- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px; box-shadow: none; position: relative; overflow: hidden;
}
.card.flush { padding: 0; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); display: flex; align-items: center; gap: 8px; margin: 0; }
.card-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }

/* ---- Gold ornament ---- */
.ornament { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold-700); margin: 6px 0 14px; }
.ornament::before, .ornament::after {
  content: ''; height: 1.5px; flex: 1; max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.ornament::after { background: linear-gradient(90deg, var(--gold-500), transparent); }
.ornament-glyph { font-size: 14px; letter-spacing: 6px; }
.corner-flourish { position: absolute; width: 60px; height: 60px; opacity: .5; pointer-events: none; }
.corner-flourish.tl { top: 8px; left: 8px; }
.corner-flourish.br { bottom: 8px; right: 8px; transform: rotate(180deg); }

/* ---- Buttons ---- */
.btn { border: none; border-radius: var(--r-control); padding: 11px 18px; font-weight: 600; font-size: 14px; cursor: pointer; transition: .18s cubic-bezier(.2,.7,.3,1); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-family: inherit; line-height: 1.2; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary, .btn-brand, .btn-gold { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover:not(:disabled), .btn-brand:hover:not(:disabled), .btn-gold:hover:not(:disabled) { background: var(--brand-deep); transform: translateY(-1px); }
.btn-teal { background: var(--green); color: #fff; }
.btn-teal:hover:not(:disabled) { background: var(--green-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background: var(--paper); border-color: var(--ink-3); }
.btn-ink { background: var(--ink-fill); color: #fff; }
.btn-ink:hover:not(:disabled) { filter: brightness(1.18); }
.btn-white { background: #fff; color: #17110F; }
.btn-white:hover:not(:disabled) { background: #F7F3EE; }
.btn-outline-white { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-outline-white:hover:not(:disabled) { border-color: #fff; }
.btn-lg { padding: 16px 22px; font-size: 15.5px; border-radius: 14px; }
.btn-sm { padding: 8px 13px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; justify-content: center; }

/* ---- Forms ---- */
label.fl, .fl { display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .02em; }
.inp, select.inp, textarea.inp {
  width: 100%; padding: 11px 13px; border-radius: var(--r-control); border: 1px solid var(--line-2);
  background: var(--card); font-size: 14px; color: var(--ink); font-family: inherit; box-sizing: border-box;
}
.inp:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,17,15,.08); }
textarea.inp { resize: vertical; min-height: 92px; }
.field + .field { margin-top: 12px; }

/* ---- Pills / badges ---- */
/* v2 pills: Geist Mono, 8px radius. Legacy variants map onto the v2 palette; .pv-* are the v2 names. */
.pill, .pv { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; flex: none; }
.pill-teal, .pv-mint { background: var(--mint); color: var(--green-deep); }
.pill-gold, .pv-outline { border: 1px solid var(--line-2); color: var(--ink-2); background: transparent; }
.pill-red, .pill-danger, .pv-blush { background: var(--blush); color: var(--brand-text-deep); }
.pill-orange, .pill-warn, .pv-amber { background: var(--amber-bg); color: var(--amber); }
.pill-silver, .pill-ghost, .pv-paper { background: var(--paper); color: var(--ink-3); border: 1px solid var(--line); }
.pv-ink { background: var(--ink-fill); color: #fff; }
.badge-verified, .ok { color: var(--green-deep); }
.pink { color: var(--brand-text-deep); }
.small { font-size: 12.5px; }

/* ---- Stat tiles ---- */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; }
.stat-value { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.stat-label { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 8px; }

/* ---- Tables ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: start; font-family: var(--font-mono); font-weight: 500; color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; padding: 8px; border-bottom: 1px solid var(--line-2); }
.tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: none; }

/* ---- Option tiles (Cheapest / Best Value / Simplest) ---- */

/* ---- Per-drug winner rows ---- */
.drugrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.drugrow + .drugrow { margin-top: 8px; }
.drugrow.anomaly { border-color: var(--brand); background: var(--blush); }
.drug-name { font-weight: 700; }
.drug-meta { font-size: 12px; color: var(--ink-soft); }

/* ---- Animations ---- */
.fade-in { animation: fadeIn .45s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Toast ---- */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; }
.toast { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 14px; font-weight: 500; font-size: 14.5px; color: #fff; background: var(--ink-fill); box-shadow: 0 20px 40px -20px rgba(23,17,15,.7); max-width: min(92vw, 540px); animation: fadeIn .3s cubic-bezier(.2,.7,.3,1) both; }
.toast::before { font-weight: 700; flex: none; }
.toast.success::before { content: '✓'; color: var(--on-dark-green); }
.toast.error::before { content: '!'; color: var(--on-dark-pink); }
.toast.warn::before { content: '!'; color: #E4AE57; }

/* ---- Sign in / Create account (v2 — the website Sign-in page) ----
   Red brand panel (fixed --brand surface, 44px grid) + a card with Sign in / Create account tabs. */
.auth-wrap { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 14px; }
.auth-hero {
  border-radius: 30px; background: var(--brand); color: #fff; padding: clamp(28px, 4vw, 52px); min-height: 520px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), radial-gradient(90% 80% at 0% 100%, #7A1712, transparent 60%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}
html[dir=rtl] .auth-hero { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), radial-gradient(90% 80% at 100% 100%, #7A1712, transparent 60%); }
.auth-kicker { font-family: var(--font-mono); font-size: 12.5px; opacity: .85; text-transform: uppercase; }
.auth-hero-title { margin: 0; font-family: var(--font-display); font-size: clamp(44px, 6vw, 84px); line-height: .9; letter-spacing: -.05em; font-weight: 800; color: #fff; }
.auth-hero-sub { margin: 20px 0 0; font-size: 17px; line-height: 1.6; opacity: .85; max-width: 400px; }
.auth-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; }
.auth-points li::before { content: '✓  '; color: #FFB4AE; }
.auth-panel { border-radius: 30px; background: var(--card); border: 1px solid var(--line); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.seg { display: flex; background: var(--paper); border-radius: 14px; padding: 4px; border: 1px solid var(--line); }
.seg button { flex: 1; text-align: center; padding: 11px; border-radius: 11px; font-weight: 600; font-size: 14.5px; cursor: pointer; border: none; background: transparent; color: var(--ink-3); font-family: inherit; transition: .15s; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 4px 14px -8px rgba(23,17,15,.4); }
.auth-title { margin: 28px 0 0; font-family: var(--font-display); font-size: 38px; letter-spacing: -.04em; font-weight: 800; line-height: 1.05; color: var(--ink); }
.auth-sub { margin: 8px 0 0; font-size: 14px; color: var(--ink-3); }
.auth-form { display: flex; flex-direction: column; margin-top: 6px; }
.auth-label { display: block; margin-top: 18px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.inp-lg { padding: 14px 15px; font-size: 15.5px; border-radius: 13px; }
.auth-cta { margin-top: 24px; }
/* Password field + show/hide (eye) button */
.pw-wrap { position: relative; display: block; }
.pw-wrap > .inp { width: 100%; padding-right: 50px; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pw-eye:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pw-eye[aria-pressed="true"] { color: var(--ink); }
html[dir=rtl] .pw-wrap > .inp { padding-right: 15px; padding-left: 50px; }
html[dir=rtl] .pw-eye { right: auto; left: 6px; }
.code-step { margin-top: 4px; }
.code-sent { margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--green-deep); }
.code-step .auth-label { margin-top: 8px; }
.otp-inp { font-family: var(--font-mono); font-size: 22px; letter-spacing: .4em; text-align: center; border: 1.5px solid var(--green); background: var(--mint); color: var(--ink); }
.otp-inp:focus { border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(15,138,95,.15); }
.auth-hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 26px 0 4px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.auth-link { margin-top: 18px; font-size: 13px; color: var(--ink-3); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.auth-link:hover { color: var(--ink); }
.auth-link[hidden] { display: none; }
.auth-link-quiet { margin-top: 10px; text-decoration: none; }
/* Password label + "Forgot password?" on one line (wraps on narrow screens; RTL follows the flow). */
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 18px; margin-bottom: 8px; }
.auth-label-row .auth-label { margin: 0; }
.auth-link-sm { font-size: 12.5px; font-weight: 600; color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.auth-link-sm:hover { color: var(--brand-text-deep); }
.auth-resend { align-self: flex-start; margin-top: 10px; color: var(--ink-3); }
.auth-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); text-align: center; line-height: 1.5; }
.role-tiles { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-tile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; transition: .15s; }
.role-tile b { font-weight: 600; font-size: 15px; color: var(--ink); }
.role-tile span { font-size: 13px; color: var(--ink-3); }
.role-tile input, .chip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.role-tile:hover { border-color: var(--ink-3); }
.role-tile:has(input:checked) { border: 2px solid var(--ink); padding: 15px; box-shadow: var(--shadow-lift); }
.role-tile:has(input:focus-visible), .chip-radio:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23,17,15,.18); }
.chip-radio { position: relative; }
.chip-radio:has(input:checked) { background: var(--ink-fill); color: #fff; border-color: var(--ink-fill); }
html[data-theme="dark"] .chip-radio:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.check-line { margin-top: 18px; display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 13px; background: var(--card); color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.check-line input { accent-color: var(--ink); width: 16px; height: 16px; margin: 1px 0 0; flex: 0 0 auto; }
.check-line:has(input:checked) { border-color: var(--ink); background: var(--paper); color: var(--ink); }
@media (max-width: 560px) {
  .auth-hero { min-height: 0; border-radius: 24px; gap: 18px; }
  .auth-points { display: none; }            /* keep the form near the top on phones */
  .auth-hero-sub { margin-top: 12px; font-size: 15px; }
  .auth-panel { border-radius: 24px; }
  .auth-title { font-size: 30px; }
  .role-tiles { grid-template-columns: 1fr; }
}

.muted { color: var(--ink-soft); }
.hidden { display: none !important; }
.sparkline { width: 100%; height: 60px; }
.spark-dot { fill: var(--orange-500); }

/* ---- URGENT priority toggle (§4) ---- */
.prio-toggle { display: flex; gap: 8px; }
.prio { flex: 1; padding: 11px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-weight: 800; font-size: 13.5px; cursor: pointer; text-align: center; transition: .15s; color: var(--ink-soft); }
.prio.std.active { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.prio.urg.active { border-color: var(--brand); background: var(--blush); color: var(--brand-text-deep); }
.prio small { display: block; font-weight: 500; font-size: 11px; margin-top: 2px; }
.card.urgent-border { border-color: var(--red-500); box-shadow: 0 10px 30px -12px rgba(225,27,34,.3); }

/* ---- Expiry threshold pills ---- */
.expiry-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.expill { padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); font-weight: 500; font-size: 14px; cursor: pointer; color: var(--ink-2); transition: .15s; font-family: inherit; white-space: nowrap; }
.expill.active { border-color: var(--ink-fill); background: var(--ink-fill); color: #fff; }

/* ---- 5-stage order status tracker (§4 My Orders) ---- */
.tracker { display: flex; align-items: flex-start; margin: 12px 0 4px; }
.tstage { flex: 1; text-align: center; position: relative; }
.tstage .dot { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto; background: var(--paper); border: 2px solid var(--line-2); position: relative; z-index: 2; box-sizing: border-box; }
.tstage.done .dot { background: var(--ink-fill); border-color: var(--ink-fill); }
.tstage .tlabel { font-size: 10.5px; font-weight: 700; color: var(--ink-faint, #8a988f); margin-top: 5px; }
.tstage.done .tlabel { color: var(--ink); }
.tstage::before { content: ''; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--line-2); z-index: 1; }
.tstage:first-child::before { display: none; }
.tstage.done::before { background: var(--ink); }

/* ---- Verification doc chips (§6 Verify queue) ---- */

/* ---- Clickable analytics stats (§6) ---- */
.statbtn { cursor: pointer; text-align: left; width: 100%; font-family: inherit; transition: .15s; position: relative; }
.statbtn:hover { transform: translateY(-2px); border-color: var(--ink-3); box-shadow: var(--shadow-lift); }
.statbtn::after { content: '›'; position: absolute; inset-inline-end: 13px; top: 12px; color: var(--ink-3); font-size: 18px; font-weight: 800; opacity: 0; transition: .15s; }
.statbtn:hover::after { opacity: 1; }

/* ---- Maroon report header (§6 Reports) ---- */
.report-head { background: linear-gradient(120deg, var(--maroon-900), var(--maroon-500)); color: var(--on-brand); border-radius: 16px; padding: 18px 20px; }
.report-head .rh-hash { font-family: var(--font-mono); font-size: 11px; opacity: .85; word-break: break-all; }
.badgegrid { display: flex; gap: 8px; flex-wrap: wrap; }
.compbadge { padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--gold-300); background: var(--ivory-200); color: var(--gold-900); font-weight: 700; font-size: 12px; }

/* ---- Supplier profile band (§5) ---- */

/* ---- Components previously unstyled (option grid, confirmed banner, auto hero) ---- */
/* v2 option cards: Cheapest (mint) · ★ Best value (ink) · Simplest (card); selected = 2px border + lift + filled radio */
.opts { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.opt { cursor: pointer; border-radius: var(--r-hero); padding: 24px; text-align: start; font-family: inherit; border: 2px solid transparent; min-width: 0; transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s; }
.opt.cheapest { background: var(--mint); color: var(--green-deep); }
.opt.best { background: var(--ink-fill); color: #fff; }
.opt.simplest { background: var(--card); color: var(--ink); border-color: var(--line); }
.opt.sel { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.opt.cheapest.sel, .opt.simplest.sel { border-color: var(--ink); }
.opt.best.sel { border-color: var(--brand); }
.opt-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.opt-tag { font-family: var(--font-mono); font-size: 12px; }
.opt.cheapest .opt-tag { color: var(--green-deep); } .opt.best .opt-tag { color: var(--on-dark-pink); } .opt.simplest .opt-tag { color: var(--ink-3); }
.opt-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; box-sizing: border-box; }
.opt.best .opt-radio { border-color: rgba(255,255,255,.4); }
.opt.sel .opt-radio { background: #fff; border-width: 6px; border-color: var(--ink); }
.opt.best.sel .opt-radio { border-color: var(--brand); }
.opt-fig { font-family: var(--font-display); font-size: clamp(36px, 3.6vw, 50px); font-weight: 800; letter-spacing: -.045em; line-height: 1; margin-top: 22px; }
.opt-sub { font-size: 14px; margin-top: 10px; opacity: .72; }
.auto-hero { background: linear-gradient(120deg, var(--grad-teal-a), var(--grad-teal-b) 60%, var(--gold-600)); color: var(--on-brand); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); }
.confirmed-banner { background: var(--mint); color: var(--green-deep); border-radius: 16px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.confirmed-banner .check { width: 42px; height: 42px; border-radius: 50%; background: var(--green-deep); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 800; flex: none; }
.order-line { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.order-line:last-child { border-bottom: none; }
.sms-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--green-deep); font-weight: 600; }
.photo-verify { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); background: var(--paper); border: 1px solid var(--line); padding: 4px 10px; border-radius: 8px; }

/* ---- Theme toggle (sun/moon) ---- */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 11px; border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12); color: var(--on-brand); font-size: 16px; cursor: pointer;
  display: grid; place-items: center; transition: .15s;
}
.theme-toggle:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }

/* ---- Grouped order box / credit statements ---- */
.group-box { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 16px; margin-bottom: 12px; }
.group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.group-lines { margin-top: 9px; border-top: 1px dashed var(--line); }
.group-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.group-line:last-child { border-bottom: none; }

/* ---- Clickable watch cards ---- */
.watch-card { cursor: pointer; }
.watch-card:hover { border-color: var(--gold-500); }
.watch-detail { margin-top: 10px; border-top: 1.5px dashed var(--line); padding-top: 10px; }

/* ---- Professional empty state (Broadcast status panel) ---- */
.estate { max-width: 560px; margin: 0 auto; text-align: center; padding: 26px 18px 18px; }
.estate-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--maroon-900), var(--maroon-500) 55%, var(--gold-500)); }
.estate-badge {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; color: var(--orange-700);
  background: var(--tint-orange); border: 1.5px solid var(--orange-300);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--tint-orange) 55%, transparent);
}
.estate-badge svg { width: 34px; height: 34px; }
.estate h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--ink); }
.estate p { margin: 0 auto; font-size: 13px; color: var(--ink-soft); line-height: 1.65; max-width: 400px; }
.estate .btn { margin-top: 16px; }
.estate-steps { display: flex; align-items: flex-start; justify-content: center; gap: 6px;
  margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.estate-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 86px; }
.estate-step .num {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; font-family: var(--font-mono);
  background: var(--tint-orange); color: var(--orange-700); border: 1.5px solid var(--orange-300);
}
.estate-step .cap { font-size: 11px; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }
.estate-arrow { color: var(--gold-500); font-size: 13px; margin-top: 5px; }

/* ---- Notification bell (Part 1) ---- */
.bell-wrap { position: relative; display: inline-block; }
.bell-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--red-500); color: #fff; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; font-family: var(--font-mono); }
.bell-badge[hidden] { display: none; } /* no "0" badge on an empty account */
.bell-panel { position: absolute; right: 0; top: 44px; width: 340px; max-height: 60vh; overflow-y: auto;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 80; padding: 6px; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; color: var(--ink); }
.bell-link { background: none; border: none; color: var(--orange-700); font-weight: 700; font-size: 12px; cursor: pointer; }
.bell-item { padding: 9px 10px; border-radius: 10px; border-bottom: 1px solid var(--line); }
.bell-item:last-child { border-bottom: none; }
.bell-item.unread { background: var(--tint-orange); }
.bell-title { font-weight: 700; font-size: 13px; color: var(--ink); }
.bell-body { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }
.bell-time { font-size: 10.5px; color: var(--ink-soft); opacity: .7; margin-top: 3px; font-family: var(--font-mono); }
.bell-empty { padding: 18px; text-align: center; color: var(--ink-soft); font-size: 13px; }

/* ---- Part 4.1: Arabic RTL (additive overrides — never edit the base LTR rules) ---- */
/* Arabic: Noto Naskh leads so Arabic text, digits and punctuation share one metric; Latin glyphs
   still fall through to Geist / Bricolage. */
html[dir=rtl] body { font-family: 'Noto Naskh Arabic', var(--font-ui); }
html[dir=rtl] .display, html[dir=rtl] h1, html[dir=rtl] h2, html[dir=rtl] h3 { font-family: 'Noto Naskh Arabic', var(--font-display); letter-spacing: 0; }
html[dir=rtl] .tbl th, html[dir=rtl] .tbl td { text-align: right; }
html[dir=rtl] .bell-panel { right: auto; left: 0; }
html[dir=rtl] .bell-badge { right: auto; left: -4px; }
html[dir=rtl] .statbtn::after { content: '‹'; right: auto; left: 13px; }
html[dir=rtl] .corner-flourish.br { right: auto; left: 10px; transform: scaleX(-1); }
html[dir=rtl] .estate-arrow { transform: scaleX(-1); }

/* ---- Part 3: finance — line chart, currency toggle ---- */
.line-chart { display: block; margin: 4px 0; border-radius: 10px; }
#currency-toggle { font-family: var(--font-mono); letter-spacing: .3px; }

/* ---- Part 2: cold-chain toggle, substitute chips, shipment trail ---- */
.cc-toggle {
  border: 1px solid var(--line-2); background: var(--card); border-radius: 10px;
  font-size: 15px; line-height: 1; cursor: pointer; color: var(--ink-3);
  display: grid; place-items: center; height: 36px; width: 36px; flex: none; transition: .12s;
}
.cc-toggle:hover { border-color: var(--ink); color: var(--ink); }
.cc-toggle.on { background: var(--mint); border-color: var(--green); color: var(--green-deep); }
.sub-chip {
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-2); font-family: inherit;
  border-radius: 8px; padding: 3px 9px; font-size: 11.5px; font-weight: 500; cursor: pointer;
}
.sub-chip:hover { border-color: var(--ink); color: var(--ink); }
.ship-trail-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); }
.ship-step { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 12.5px; color: var(--ink-soft); }
.ship-step .ship-text { flex: 1; }
.ship-step .ship-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line-2); flex: none; }
.ship-step.now .ship-dot { background: var(--brand); box-shadow: 0 0 0 3px var(--blush); }
.ship-step.now { color: var(--ink); font-weight: 600; }

/* ---- Quote validity / star rating bits (Part 1) ---- */
.pill-expired { background: var(--paper); color: var(--ink-3); border: 1px solid var(--line); }
.stars-input { display: inline-flex; gap: 3px; font-size: 22px; cursor: pointer; }
.stars-input .st { color: var(--line-2); transition: .1s; }
.stars-input .st.on { color: var(--amber); }
.review-row { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.review-row:last-child { border-bottom: none; }

/* ===========================================================
   v2 APP SHELL — ink sidebar (role-based nav) + breadcrumb header
   Sidebar is dark in both modes. ☰ (Gmail-style): desktop = full ↔ icon rail (remembered); tablet =
   rail + a drawer over the page; phone = no rail, drawer only. Classes on <html> drive it (app.js +
   theme-init.js): .nav-rail · .nav-tab · .nav-off · .nav-open — see "☰ MENU" below.
   =========================================================== */
.shell { display: flex; min-height: 100vh; }
.side {
  flex: none; width: 252px; min-width: 0; background: var(--side-bg); color: #fff; border-inline-end: 1px solid var(--side-line);
  padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh; overflow-x: hidden; overflow-y: auto;
  transition: width .2s cubic-bezier(.2, .7, .3, 1);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.side-top { display: flex; align-items: flex-start; gap: 8px; }
.side-top .side-logo { flex: 1; min-width: 0; }
.side-logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 22px; cursor: pointer; }
.side-logo-mark {
  width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; flex: none;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 17px;
}
.side-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.5px; color: #fff; }
.side-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; } /* long nav scrolls; footer stays anchored */
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; margin: 2px 0; border: none; border-radius: 12px; background: transparent;
  color: rgba(255,255,255,.62); font: inherit; font-size: 14.5px; font-weight: 500; text-align: start;
  cursor: pointer; white-space: nowrap; transition: background .2s, color .2s;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.09); }
.nav-item.active::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 3px; background: var(--brand);
}
.nav-ico { width: 18px; height: 18px; flex: none; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-badge { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 7px; background: var(--brand); color: #fff; }
.nav-divider { height: 1px; background: var(--side-line); margin: 10px 8px; }
/* Grouped nav (v3): small mono group labels (BUY · MONEY · ORGANISATION …). */
.nav-group { padding-top: 6px; }
.nav-group:first-child { padding-top: 0; }
.nav-group-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.34); padding: 10px 12px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-group:first-child .nav-group-label { padding-top: 2px; }
.nav-group .nav-item { padding: 9px 12px; margin: 1px 0; border-radius: 11px; font-size: 14px; }
html[dir="rtl"] .nav-group-label { letter-spacing: 0; } /* spacing would break Arabic letter joins */

.side-org { margin: 8px 4px 10px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--side-line); }
.side-org-row { display: flex; align-items: center; gap: 10px; }
.side-org-mark { width: 34px; height: 34px; border-radius: 10px; color: #fff; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.side-org-text { min-width: 0; line-height: 1.25; }
.side-org-name { font-weight: 600; font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-org-sub { font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-org-verified { margin-top: 11px; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .3px; color: var(--on-dark-green); }
.side-org-verified.pending { color: #E4AE57; }

.side-foot { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 0; }
.side-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.side-note { font-size: 12px; color: rgba(255,255,255,.55); padding: 2px 6px; }
.side-logout {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--side-line);
  background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .15s;
}
.side-logout:hover { background: rgba(255,255,255,.14); }

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hdr {
  flex: none; position: sticky; top: 0; z-index: 40;
  padding: 18px clamp(16px, 3vw, 36px); display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--line); background: var(--hdr-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hdr-titles { flex: 1; min-width: 0; }
.hdr-crumb { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-title {
  font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.04em; font-weight: 800; line-height: 1.05;
  margin: 2px 0 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-search {
  display: flex; align-items: center; gap: 9px; width: 240px; flex: none; color: var(--ink-3);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 13px; transition: .15s;
}
.hdr-search input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); padding: 10px 0; outline: none; }
.hdr-search input::placeholder { color: var(--ink-3); }
.hdr-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(179,38,30,.12); }
.hdr-ico {
  position: relative; width: 42px; height: 42px; flex: none; border-radius: 12px; padding: 0;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font: inherit; font-size: 17px;
  display: grid; place-items: center; cursor: pointer; transition: .15s;
}
.hdr-ico:hover { border-color: var(--line-2); transform: translateY(-1px); }
.hdr-ico .bell-badge { top: 6px; right: 6px; }
html[dir=rtl] .hdr-ico .bell-badge { right: auto; left: 6px; }
.btn-new {
  display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap;
  background: var(--brand); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600;
  padding: 11px 16px; border: none; border-radius: 12px; cursor: pointer; box-shadow: var(--shadow-brand); transition: .15s;
}
.btn-new:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-new b { font-size: 17px; line-height: 1; font-weight: 600; }

/* Content: 1320px max, page padding; the enter animation is .fade-in (0.45s rise/fade). */
.app-main { width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(16px, 3vw, 36px); box-sizing: border-box; }
/* Navigation now lives in the sidebar. The portals' sub-tab buttons stay in the DOM (hidden) so
   their state, click handlers and deep-links keep working; the sidebar mirrors them. */
.subtabs { display: none; }

@media (max-width: 979px) {
  .hdr-search { display: none; }
}
@media (min-width: 980px) and (max-width: 1099.98px) {
  /* room for ☰ + the page title on narrow desktops: a shorter search box, "+" without its label (as on phones) */
  .hdr-search { width: 170px; }
  .btn-new { padding: 11px 14px; }
  .btn-new-label { display: none; }
}

/* ===========================================================
   ☰ MENU — full sidebar · icon rail · drawer
   .nav-rail  the sidebar shows as the 76px icon rail (desktop by choice, tablets by default)
   .nav-tab   tablet: the sidebar floats (fixed) over a 76px gap, so the drawer opens OVER the page
   .nav-off   phone: no rail — the sidebar is an off-canvas drawer
   .nav-open  the drawer is open (tablet/phone): full sidebar, dim backdrop, page behind locked
   =========================================================== */
/* footer switches: text in the full sidebar, an icon in the rail */
.theme-toggle.tool-btn { width: auto; padding: 0 9px; font-size: 12px; font-weight: 800; }
.tool-ico { display: none; }
.side-logout.tool-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ☰ in the header (first item: left in LTR, right in RTL) and ✕ inside the drawer */
.nav-toggle { color: var(--ink); }
.nav-toggle svg, .nav-close svg { display: block; }
.nav-close {
  display: none; flex: none; width: 40px; height: 40px; margin-top: 2px; padding: 0; border-radius: 12px;
  border: 1px solid var(--side-line); background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  place-items: center; transition: background .15s;
}
.nav-close:hover { background: rgba(255,255,255,.16); }
.nav-open .nav-close { display: grid; }
.nav-toggle:focus-visible, .nav-close:focus-visible, .side .nav-item:focus-visible, .side-tools .theme-toggle:focus-visible, .side-logout:focus-visible {
  outline: 2px solid var(--on-dark-green); outline-offset: 2px;
}
.nav-toggle:focus-visible { outline-color: var(--brand-text); } /* #B3261E light · #EC6E64 dark (≥3:1 on the header) */
.side .nav-item:focus-visible { outline-offset: -2px; } /* inside the item: .side-nav's scroll box clips outside rings */

/* the icon rail */
.nav-rail .side { width: 76px; padding: 18px 10px 12px; }
.nav-rail .side-top { justify-content: center; }
.nav-rail .side-logo { justify-content: center; padding: 4px 0 18px; }
.nav-rail .side-wordmark, .nav-rail .nav-label, .nav-rail .nav-divider, .nav-rail .side-org-text,
.nav-rail .side-org-verified, .nav-rail .side-note, .nav-rail .nav-group-label, .nav-rail .side .tool-txt { display: none; }
.nav-rail .nav-item { justify-content: center; padding: 12px; }
.nav-rail .nav-group .nav-item { justify-content: center; padding: 11px; }
.nav-rail .nav-group + .nav-group { border-top: 1px solid var(--side-line); margin-top: 6px; padding-top: 6px; }
/* a count badge becomes a small red dot on the icon (the count is in the tooltip + the button's name) */
.nav-rail .nav-badge {
  position: absolute; top: 8px; inset-inline-end: 13px; width: 9px; height: 9px; padding: 0; border-radius: 50%;
  font-size: 0; line-height: 0; overflow: hidden; box-shadow: 0 0 0 2px var(--side-bg);
}
.nav-rail .side-org { padding: 10px 0; display: grid; place-items: center; margin: 8px 0; }
.nav-rail .side-tools { flex-direction: column; align-items: center; }
.nav-rail .side-tools .theme-toggle { width: 40px; height: 40px; padding: 0; }
.nav-rail .side .tool-ico { display: block; }
.nav-rail .side .tool-glyph { font-size: 14px; font-weight: 800; line-height: 1; }
.nav-rail .side-logout { width: 40px; height: 40px; padding: 0; align-self: center; }

/* tablet: the sidebar floats over a fixed 76px gap → opening/closing never moves the page */
.nav-tab .side {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; height: auto; z-index: 30;
  transition: width .2s cubic-bezier(.2, .7, .3, 1), z-index 0s linear .2s;
}
.nav-tab.nav-open .side { z-index: 70; transition: width .2s cubic-bezier(.2, .7, .3, 1), z-index 0s; }
.nav-tab body:not(.logged-out) .shell-main { margin-inline-start: 76px; }

/* phone: no rail — an off-canvas drawer from the start side (left in LTR, right in RTL) */
.side { --side-away: -100%; }
html[dir="rtl"] .side { --side-away: 100%; }
.nav-off .side {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; height: auto; z-index: 70;
  width: min(85vw, 300px); transform: translateX(var(--side-away)); visibility: hidden;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .25s;
}

/* the open drawer: the full sidebar over the page (tablet: its usual 252px; phone: ~85% of the width, max 300px) */
.nav-open .side { box-shadow: 0 0 48px rgba(0,0,0,.4); overscroll-behavior: contain; }
.nav-off.nav-open .side { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.2, .7, .3, 1), visibility 0s; }
.nav-backdrop { display: none; position: fixed; inset: 0; z-index: 65; background: rgba(20, 8, 8, .5); }
.nav-open .nav-backdrop { display: block; animation: nav-fade .2s ease; }
@keyframes nav-fade { from { opacity: 0; } }
html.nav-open { overflow: hidden; } /* the page behind doesn't scroll (root only — on <body> it would break the sticky header) */
html.nav-open.nav-gutter { scrollbar-gutter: stable; } /* …and doesn't shift: the scrollbar's room is kept */

/* short screens (e.g. a phone in landscape = the tablet band): the menu keeps its items' height and the
   whole sidebar scrolls, instead of the menu list being squeezed to nothing between the logo and the footer */
@media (max-height: 600px) {
  .side-nav { flex: 1 0 auto; overflow: visible; }
}

/* touch: targets of at least 44px */
@media (pointer: coarse) {
  .nav-toggle, .nav-close { width: 44px; height: 44px; }
  .side .nav-item, .nav-group .nav-item { min-height: 44px; }
  .side-tools .theme-toggle { min-width: 44px; height: 44px; }
  .nav-rail .side-tools .theme-toggle, .nav-rail .side-logout { width: 44px; height: 44px; }
  .side-logout { min-height: 44px; }
}
.nav-open .side .nav-item { min-height: 44px; }

/* rail tooltip (one fixed element on <body> — the sidebar's scroll box would clip it) */
.nav-tip {
  position: fixed; z-index: 95; top: 0; transform: translateY(-50%); max-width: 260px;
  padding: 6px 10px; border-radius: 8px; background: #17110F; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transition: opacity .12s;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.nav-tip.on { opacity: 1; }
html[data-theme="dark"] .nav-tip { background: #3A302C; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.4); }

/* "reduce motion": no slide / width / fade animations */
@media (prefers-reduced-motion: reduce) {
  .side, .nav-off .side, .nav-off.nav-open .side, .nav-tab .side, .nav-tab.nav-open .side, .nav-tip { transition: none; }
  .nav-open .nav-backdrop { animation: none; }
}
/* phones: the header keeps title + icons + an icon-only New request inside the viewport */
@media (max-width: 560px) {
  .hdr { gap: 8px; }
  .hdr-titles { flex: 1 1 auto; min-width: 0; }
  .hdr-title { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdr-crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdr-crumb-tab { display: none; }
  .btn-new { padding: 0 12px; }
  .btn-new-label { display: none; }
}

/* ===========================================================
   v2 SCREENS — editorial components (step 3)
   Dashboard · New request · Quotes · Orders · Credit. Logical
   properties throughout so RTL mirrors for free; colours come
   from the tokens above (incl. --ink-fill for dark ink surfaces).
   =========================================================== */
.notice { border-radius: 14px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; }
.notice-amber { background: var(--amber-bg); color: var(--amber); }
.notice-mint { background: var(--mint); color: var(--green-deep); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* tiles (KPI cards) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.tile { border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); padding: 22px; text-align: start; font-family: inherit; color: var(--ink); min-width: 0; }
.tile-k { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; }
.tile-v { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 10px; }
.tile-s { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.tile-blush { background: var(--blush); border-color: transparent; }
.tile-blush .tile-k, .tile-blush .tile-v { color: var(--brand-text-deep); }
.tile-blush .tile-s { color: var(--brand-text); }
.tile-mint { background: var(--mint); border-color: transparent; }
.tile-mint .tile-k, .tile-mint .tile-v, .tile-mint .tile-s { color: var(--green-deep); }
.tile-ink { background: var(--ink-fill); color: #fff; border-color: transparent; }
.tile-ink .tile-k { color: var(--on-dark-green); } .tile-ink .tile-s { color: rgba(255,255,255,.7); }
button.tile { cursor: pointer; transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s; }
button.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* dashboard */
.ov-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ov-greet { font-family: var(--font-display); font-size: clamp(34px, 4vw, 54px); line-height: .95; letter-spacing: -.05em; font-weight: 800; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.ov-meta { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; text-align: end; }
.ov-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.ov-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ov-row1 { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-saved {
  flex: 2 1 440px; min-width: 0; border-radius: var(--r-hero); background: var(--brand); color: #fff; padding: 28px; cursor: pointer; border: none; text-align: start; font-family: inherit;
  container-type: inline-size; /* .hero-fig is capped to this card width */
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 40px 40px;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.hero-saved:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.hero-k { font-family: var(--font-mono); font-size: 12px; opacity: .8; text-transform: uppercase; }
.hero-fig { font-family: var(--font-display); --big: clamp(56px, 6vw, 84px); font-size: min(var(--big), calc(180cqi / var(--n, 6))); font-weight: 800; letter-spacing: -.05em; line-height: .9; margin-top: 14px; }
.hero-sub { margin-top: 10px; font-size: 14.5px; opacity: .85; max-width: 420px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bar { width: 22px; border-radius: 6px; background: rgba(255,255,255,.28); }
.bar.now { background: #fff; }
.bar-m { font-family: var(--font-mono); font-size: 10.5px; opacity: .7; }
.live-card { flex: 1 1 260px; min-width: 0; border-radius: var(--r-hero); background: var(--ink-fill); color: #fff; padding: 24px; display: flex; flex-direction: column; }
.live-k { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-green); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-dark-green); animation: blink 1.6s infinite; flex: none; }
.live-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: 14px; }
.live-sub { font-size: 13.5px; color: rgba(255,255,255,.7); margin-top: 8px; }
.live-card .spacer { flex: 1; min-height: 16px; }
.live-card .btn { align-self: flex-start; margin-top: 18px; }
.prog { height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 14px; }
.prog > i { display: block; height: 100%; background: var(--on-dark-green); border-radius: 6px; transition: width .4s cubic-bezier(.2,.7,.3,1); }
.ov-tiles { margin-top: 14px; }
.ov-row3 { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }

/* list cards (flush rows under a display heading) */
.card-list { padding: 0; }
.list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 22px 12px; flex-wrap: wrap; }
.list-head h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.list-head.col { flex-direction: column; align-items: flex-start; gap: 3px; }
.list-head p { margin: 0; font-size: 13.5px; }
.lrow { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border: none; border-top: 1px solid var(--line); width: 100%; background: none; font-family: inherit; color: inherit; text-align: start; }
button.lrow { cursor: pointer; } button.lrow:hover { background: var(--paper); }
.lrow-id { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); width: 64px; flex: none; }
.lrow-main { flex: 1; min-width: 0; }
.lrow-title { font-weight: 600; font-size: 14.5px; }
.lrow-sub { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.lrow-amt { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.linkbtn { background: none; border: none; padding: 0; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; opacity: .8; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { opacity: 1; }
.linkbtn.pink { color: var(--brand-text); opacity: 1; font-weight: 600; text-decoration: none; }
.linkbtn.pink:hover { text-decoration: underline; }
.attn { padding: 20px 22px; }
.attn-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.attn-item { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--paper); border: none; width: 100%; text-align: start; font-family: inherit; color: var(--ink); align-items: flex-start; }
button.attn-item { cursor: pointer; }
.attn-item.blush { background: var(--blush); } .attn-item.mint { background: var(--mint); }
.attn-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--ink-fill); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.attn-item.blush .attn-ico { background: var(--brand); } .attn-item.mint .attn-ico { background: var(--green-deep); }
.attn-t { font-weight: 600; font-size: 14.5px; } .attn-s { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.attn-item.blush .attn-t { color: var(--brand-text-deep); } .attn-item.mint .attn-t { color: var(--green-deep); }

/* new request */
.stepchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.stepchip { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink-3); text-transform: uppercase; }
.stepchip.on { background: var(--ink-fill); color: #fff; border-color: var(--ink-fill); }
.req-layout { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.req-main { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.req-side { flex: 1 1 300px; min-width: 0; position: sticky; top: 78px; }
.drugline { display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.row-n { font-size: 12.5px; color: var(--ink-3); width: 22px; flex: none; }
.row-main { flex: 1 1 180px; min-width: 0; }
.inp-flat { border-color: transparent; background: transparent; padding: 8px 10px; }
.inp-flat:hover { border-color: var(--line); } .inp-flat:focus { background: var(--card); }
.drugline .drug { font-weight: 600; font-size: 15px; }
.drugline .country { width: auto; flex: 0 0 auto; font-size: 13px; color: var(--ink-2); }
.rfq-hint { font-size: 12.5px; margin: 0 10px 2px; display: none; gap: 6px; flex-wrap: wrap; align-items: center; }
.rfq-hint.show { display: flex; }
.hint-fix { color: var(--green-deep); } .hint-warn { color: var(--amber); }
.stepper { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; flex: none; }
.stepper button { width: 30px; padding: 6px 0; border: none; background: none; color: var(--ink-2); cursor: pointer; font-size: 15px; font-family: inherit; }
.stepper button:hover { background: var(--paper); }
.stepper .qty { width: 64px; text-align: center; border: none; border-radius: 0; padding: 6px 2px; font-family: var(--font-mono); font-size: 13.5px; background: transparent; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.stepper .qty:focus { outline: none; background: var(--paper); box-shadow: none; }
.stepper .qty::-webkit-outer-spin-button, .stepper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.row-rm { width: 30px; height: 30px; border-radius: 9px; border: none; background: none; color: var(--ink-3); cursor: pointer; flex: none; font-size: 14px; }
.row-rm:hover { background: var(--blush); color: var(--brand-text-deep); }
.add-row { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
.add-row .inp { flex: 1; min-width: 0; }
.upload-row { display: flex; align-items: center; gap: 12px; padding: 15px 22px; border-top: 1px solid var(--line); background: var(--paper); flex-wrap: wrap; }
.upload-tile { width: 36px; height: 36px; border-radius: 10px; border: 1.5px dashed var(--line-2); background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; flex: none; }
.upload-tile:hover { border-color: var(--ink); color: var(--ink); }
.upload-text { flex: 1; min-width: 160px; } .upload-title { font-weight: 600; font-size: 14px; cursor: pointer; }
.parse-summary:not(:empty), .template-picker:not(:empty) { padding: 10px 22px 14px; border-top: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.req-label { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.chips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 9px 13px; font-size: 14px; font-weight: 500; border-radius: 10px; cursor: pointer; white-space: nowrap; background: var(--card); color: var(--ink-2); border: 1px solid var(--line-2); font-family: inherit; transition: .15s; }
.chip:hover { border-color: var(--ink-3); }
.chip.on { background: var(--ink-fill); color: #fff; border-color: var(--ink-fill); }
.urgent-row { margin-top: 22px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); width: 100%; cursor: pointer; text-align: start; font-family: inherit; color: var(--ink); transition: .2s; }
.urgent-row.on { background: var(--blush); border-color: var(--brand); }
.urgent-text { display: flex; flex-direction: column; gap: 1px; } .urgent-text b { font-weight: 600; font-size: 14.5px; }
.switch { width: 42px; height: 24px; border-radius: 12px; background: var(--line-2); position: relative; flex: none; transition: .2s; }
.switch .knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s cubic-bezier(.2,.7,.3,1); }
.urgent-row.on .switch { background: var(--brand); }
.urgent-row.on .switch .knob { inset-inline-start: 21px; }
.summary-card { background: var(--ink-fill); color: #fff; border-radius: var(--r-hero); padding: 26px; font-family: var(--font-mono); }
.sum-k { font-size: 12px; opacity: .55; text-transform: uppercase; }
.sum-sent { opacity: 1; color: var(--on-dark-green); text-transform: none; font-size: 13px; }
.sum-rows { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.sum-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.sum-rows > div > span:first-child { opacity: .6; }
.sent-rows > div { flex-wrap: wrap; row-gap: 3px; }
.sent-rows > div > span:nth-child(2) { opacity: .7; font-size: 12.5px; }
.sent-rows .sent-n, .sent-rows .sent-none { flex-basis: 100%; font-family: var(--font-ui); font-size: 12.5px; }
.sent-rows .sent-n { color: var(--on-dark-green); }
.sent-rows .sent-none { color: var(--on-dark-pink); }
.sum-divider { margin-top: 20px; padding-top: 18px; border-top: 1.5px dashed rgba(255,255,255,.22); font-family: var(--font-ui); }
.sum-goes { font-size: 13px; opacity: .6; }
.sum-big { font-family: var(--font-display); font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 6px; }
.sum-big.small { font-size: 26px; letter-spacing: -.03em; line-height: 1.1; }
.sum-green { font-size: 13px; color: var(--on-dark-green); margin-top: 6px; }
.summary-card .pink-dark { color: var(--on-dark-pink); }
.summary-card .btn-block { margin-top: 22px; }
.sum-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sum-actions .btn-block { margin-top: 0; }
.sum-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.sum-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.sum-form .inp { flex: 1; min-width: 140px; }
.sum-hint { font-size: 11.5px; opacity: .5; margin-top: 12px; line-height: 1.5; }
/* Waiting for REAL supplier quotes (no simulated responses). */
.sum-wait { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 13px; line-height: 1.5; opacity: .88; }
.sum-wait .recv-dot { margin-top: 6px; }
.summary-card .inp { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.summary-card .inp::placeholder { color: rgba(255,255,255,.45); }
.summary-card .inp:focus { border-color: #fff; box-shadow: none; }
.summary-card select.inp option { color: #17110F; }

/* quotes */
.results { margin-top: 16px; }
.results:empty { margin: 0; }
.recv-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: var(--amber-bg); color: var(--amber); flex-wrap: wrap; }
.recv-banner.done { background: var(--mint); color: var(--green-deep); }
.recv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; animation: blink 1.2s infinite; }
.recv-banner.done .recv-dot { background: var(--green); animation: none; }
.recv-text { flex: 1; min-width: 160px; font-weight: 600; font-size: 14.5px; }
.recv-banner .prog { width: min(240px, 30vw); margin: 0; background: rgba(23,17,15,.1); }
.recv-banner .prog > i { background: var(--amber); } .recv-banner.done .prog > i { background: var(--green); }
.qline { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.qline.held { background: var(--blush); }
.qline.held .ql-supname, .qline.held .ql-unit, .qline.held .vs-text { color: var(--brand-text-deep); }
.ql-drug, .ql-sup { flex: 1 1 200px; min-width: 0; }
.ql-name { font-weight: 600; font-size: 15px; } .ql-supname { font-weight: 600; font-size: 14px; }
.ql-vs { flex: 1 1 120px; max-width: 170px; }
.vsbar { height: 5px; border-radius: 5px; background: rgba(23,17,15,.08); overflow: hidden; }
html[data-theme="dark"] .vsbar { background: rgba(255,255,255,.12); }
.vsbar > i { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.qline.held .vsbar > i { background: var(--brand); }
.vs-text { color: var(--green-deep); margin-top: 5px; font-size: 11.5px; }
.ql-price { text-align: end; flex: none; min-width: 84px; margin-inline-start: auto; } /* stays at the row end when the row wraps */
.ql-unit { font-weight: 600; font-size: 15.5px; }
.ql-price .linkbtn { color: var(--brand-text); opacity: .85; font-size: 11.5px; text-decoration: none; margin-top: 2px; }
.qline.unfilled { opacity: .8; }
.deliver-row { padding: 16px 22px 20px; border-top: 1px solid var(--line); max-width: 520px; }
.confirm-bar { position: sticky; bottom: 12px; margin-top: 14px; background: var(--ink-fill); color: #fff; border-radius: 20px; padding: 16px 16px 16px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; box-shadow: 0 20px 40px -20px rgba(23,17,15,.7); z-index: 5; }
html[dir=rtl] .confirm-bar { padding: 16px 24px 16px 16px; }
.cb-main { flex: 1; min-width: 200px; }
.cb-k { font-size: 11.5px; opacity: .55; }
.cb-total { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-top: 2px; }
.cb-note { font-size: 13.5px; color: var(--on-dark-green); } .cb-note.pink { color: var(--on-dark-pink); }
.cf-form { border: 1px solid var(--brand); border-radius: 14px; padding: 12px 14px; margin: 0 22px 12px; background: var(--blush); }
.cf-form .cf-title { font-weight: 600; color: var(--brand-text-deep); font-size: 13.5px; margin-bottom: 8px; }

/* orders */
.orders-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 14px; align-items: start; }
.chips-head { margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.orow { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: none; border-top: 1px solid var(--line); border-inline-start: 3px solid transparent; width: 100%; background: none; cursor: pointer; text-align: start; font-family: inherit; color: var(--ink); transition: background .15s; }
.chips-head + .orow { border-top: none; }
.orow:hover { background: var(--paper); }
.orow.sel { background: var(--paper); border-inline-start-color: var(--brand); }
.orow-main { flex: 1; min-width: 0; }
.orow-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.orow-top .mono { font-size: 13px; }
.orow-title { font-weight: 600; font-size: 15px; }
.orow-right { text-align: end; flex: none; }
.orow-total { font-weight: 600; font-size: 14.5px; }
.orow-right > div + div { margin-top: 5px; }
.od-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.od-head h3 { margin: 2px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.od-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vtrack { margin-top: 24px; }
.vt { display: flex; gap: 16px; }
.vt-rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.vt-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; background: var(--ink-fill); box-sizing: border-box; flex: none; }
.vt-dot.cur { background: var(--brand); box-shadow: 0 0 0 5px var(--blush); }
.vt-dot.up { background: transparent; border: 1.5px solid var(--line-2); }
.vt-line { width: 2px; flex: 1; min-height: 22px; background: var(--line-2); }
.vt-line.done { background: var(--ink); }
.vt:last-child .vt-line { display: none; }
.vt-body { padding-bottom: 20px; min-width: 0; flex: 1; }
.vt-t { font-weight: 600; font-size: 15px; color: var(--ink); } .vt.up .vt-t { color: var(--ink-3); }
.vt-n { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.checkin { margin-top: 4px; padding: 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.checkin-t { font-weight: 600; font-size: 15px; } .checkin-s { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.checkin .chips { margin-top: 12px; gap: 8px; }
.od-lines { margin-top: 16px; border-top: 1px solid var(--line); }
.od-line { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; flex-wrap: wrap; align-items: center; }
.od-line:last-child { border-bottom: none; }
.od-foot { margin-top: 16px; padding-top: 16px; border-top: 1.5px dashed var(--line-2); display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 13.5px; flex-wrap: wrap; }
.od-foot .total { font-weight: 600; font-size: 16px; }
.od-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.od-panel { margin-top: 10px; }
.od-panel .inp + .inp, .od-panel .btn { margin-top: 6px; }

/* credit */
.rel-card { margin-top: 14px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.rel-card .card-title { font-size: 17px; }
.chips-inline { display: flex; gap: 6px; flex-wrap: wrap; }
.ledger-item { border-top: 1px solid var(--line); }
.ledger-row { display: flex; align-items: center; gap: 14px; padding: 15px 22px; flex-wrap: wrap; }
.ledger-id { font-size: 13px; width: 72px; flex: none; }
.ledger-main { flex: 1 1 200px; min-width: 0; }
.ledger-who { font-weight: 600; font-size: 14.5px; }
.ledger-amt { font-weight: 600; font-size: 15px; }
.ledger-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ledger-lines { padding: 0 22px 12px; }
.ledger-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 13px; flex-wrap: wrap; }
.ledger-item.overdue .ledger-row { background: color-mix(in srgb, var(--blush) 45%, transparent); }

/* billing (v2): ink plan card · invoices list · plan ladder */
.bill-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 14px; align-items: start; }
.plan-card { border-radius: var(--r-hero); background: var(--ink-fill); color: #fff; padding: 28px; min-width: 0; }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-k { font-family: var(--font-mono); font-size: 12px; opacity: .55; text-transform: uppercase; }
.plan-status { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; }
.plan-status.ok { color: var(--on-dark-green); } .plan-status.amber { color: #E4AE57; } .plan-status.pink { color: var(--on-dark-pink); } .plan-status.dim { opacity: .6; }
.plan-head { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.plan-name { font-family: var(--font-display); font-size: clamp(36px, 11vw, 56px); font-weight: 800; letter-spacing: -.05em; line-height: 1; overflow-wrap: anywhere; }
.plan-price { font-family: var(--font-mono); font-size: 20px; } .plan-price .per { opacity: .5; font-size: 14px; }
.plan-sub { margin-top: 6px; font-size: 14px; opacity: .7; }
.plan-cycle { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.chip-dark { font-family: var(--font-mono); font-size: 12px; padding: 7px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; white-space: nowrap; transition: .15s; }
.chip-dark:hover { border-color: #fff; }
.chip-dark.on { background: #fff; color: #17110F; border-color: #fff; }
.plan-vol-k { margin-top: 26px; font-size: 13px; opacity: .7; }
.plan-vol { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; gap: 12px; flex-wrap: wrap; }
.plan-vol-fig { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.plan-band { font-family: var(--font-mono); font-size: 12.5px; opacity: .6; text-transform: uppercase; }
.plan-prog { margin-top: 10px; height: 8px; border-radius: 8px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.plan-prog > i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #6FE0B0, #0F8A5F); border-radius: 8px; transition: width .4s cubic-bezier(.2,.7,.3,1); }
html[dir=rtl] .plan-prog > i { background: linear-gradient(270deg, #6FE0B0, #0F8A5F); }
.plan-note { margin-top: 10px; font-size: 13px; opacity: .65; }
.plan-next { margin-top: 4px; font-size: 13px; color: var(--on-dark-green); }
.compare { margin-top: 24px; padding: 16px; border-radius: 14px; background: rgba(111,224,176,.1); border: 1px solid rgba(111,224,176,.25); }
.compare-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.compare-fig { font-family: var(--font-mono); font-weight: 600; font-size: 18px; }
.compare-flat { margin-top: 6px; font-size: 13px; color: var(--on-dark-green); }
.plan-foot { margin-top: 16px; font-size: 12px; opacity: .5; line-height: 1.5; }
.inv-row { flex-wrap: wrap; }
.inv-row .lrow-main { flex: 1 1 160px; }
.inv-row .btn { margin-inline-start: auto; }
.inv-row .lrow-title { font-size: 15px; }
.pay-form { margin: 8px 22px 20px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); }
.pay-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.pay-grid { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.pay-grid label { display: block; } .pay-grid .grow { flex: 1; min-width: 180px; }
.plan-tiles { margin-top: 14px; }
.tile.cur { border: 2px solid var(--ink); }
.tile-v .per { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-inline-start: 3px; }
.tile-k .pv { margin-inline-start: 6px; vertical-align: middle; text-transform: none; }

/* app-wide loading / empty-state text (used by every screen; previously unstyled) */
.loading, .empty { color: var(--ink-3); font-size: 13.5px; }

/* supplier (v2): stat tiles · pre-filled quote card · open requests · verification panel + documents */
.sup-tiles { margin-bottom: 14px; }
.tiles-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); } /* four compact stat tiles stay on one row */
.sup-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 14px; align-items: start; }
.list-sub { padding: 0 22px 12px; font-size: 13.5px; color: var(--ink-3); }
.quote-head { padding: 20px 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.quote-title { margin: 4px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.quote-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.countdown { font-family: var(--font-mono); font-size: 12.5px; color: var(--brand-text); background: var(--blush); padding: 7px 10px; border-radius: 9px; white-space: nowrap; flex: none; }
.pa-line { border-top: none; }
.pa-line + .pa-line { border-top: 1px solid var(--line); }
.stock-toggle { cursor: pointer; border: none; }
.pa-line.out .ql-drug, .pa-line.out .pa-price { opacity: .6; } .pa-line.out .pa-price { text-decoration: line-through; }
.pa-edit-form { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 4px; }
.pa-edit-form[hidden] { display: none; } /* the class display beats the UA [hidden] rule otherwise */
.quote-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.quote-total { font-size: 13.5px; margin-inline-start: auto; color: var(--ink-2); } .quote-total b { color: var(--ink); font-weight: 600; }
.btn-green { background: #0A6B49; color: #fff; }             /* fixed green surface — --green-deep flips to a light text colour in dark mode */
.btn-green:hover:not(:disabled) { background: #0F8A5F; transform: translateY(-1px); }
.btn-sent, .btn-sent:disabled { background: var(--mint); color: var(--green-deep); opacity: 1; }
.req-row { border-top: 1px solid var(--line); } .req-row .lrow { border-top: none; }
.req-row .lrow, .doc-row { flex-wrap: wrap; }
.req-row .lrow-main, .doc-row .lrow-main { flex: 1 1 160px; }
.req-right { text-align: end; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.req-left { white-space: nowrap; }
.qform { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; padding: 0 22px 16px; }
.qform .btn { align-self: end; }
@media (max-width: 560px) { .req-right { flex: 0 0 100%; max-width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 4px; } }
.docs-wrap { max-width: 760px; }
.verify-panel { border-radius: var(--r-hero); background: #0A6B49; color: #fff; padding: 28px; background-image: radial-gradient(70% 90% at 100% 0%, #14A06F, transparent 60%); }
.verify-panel.pending { background: var(--ink-fill); background-image: none; }
.vp-k { font-family: var(--font-mono); font-size: 12px; opacity: .9; text-transform: uppercase; }
html[dir=rtl] .verify-panel { background-image: radial-gradient(70% 90% at 0% 0%, #14A06F, transparent 60%); }
.verify-panel.pending .vp-k { color: #E4AE57; opacity: 1; }
.vp-title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 12px; overflow-wrap: anywhere; }
.vp-sub { font-size: 14.5px; opacity: .85; margin-top: 8px; }
.vp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pv-onink { background: rgba(255,255,255,.14); color: #fff; }
.doc-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.doc-ico.ok { background: var(--mint); color: var(--green-deep); } .doc-ico.wait { background: var(--amber-bg); color: var(--amber); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.kv:last-of-type { border-bottom: none; }
.rv-row { padding: 12px 22px; border-top: 1px solid var(--line); font-size: 13.5px; }
.rv-stars { color: var(--amber); }

/* admin (v2): review queue · held quotes · counterfeit reports */
.cf-row { border-top: 1px solid var(--line); }
.cf-row .lrow { border-top: none; flex-wrap: wrap; }
.cf-row .lrow-main, .held-row .lrow-main { flex: 1 1 180px; }
.held-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.held-row { flex-wrap: wrap; }
.held-right { text-align: end; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.held-price { font-weight: 600; font-size: 15.5px; }
.held-actions { margin-top: 6px; }
.cf-ico { background: var(--blush); color: var(--brand-text-deep); }
.cf-photo { display: block; max-width: 220px; border-radius: 10px; border: 1px solid var(--line); margin: 0 22px 12px; margin-inline-start: 72px; }
.cf-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 22px 16px; padding-inline-start: 72px; }
.cf-actions .inp { flex: 1 1 200px; max-width: 320px; padding: 7px 10px; }
@media (max-width: 560px) {
  .doc-chips, .cf-actions { padding-inline-start: 22px; }
  .cf-photo { margin-inline-start: 22px; }
  .held-right { flex-basis: 100%; align-items: flex-start; text-align: start; }
  .held-actions { justify-content: flex-start; }
}

/* dark mode: "selected = ink fill" would vanish against dark cards, so small selected controls invert
   (light fill, dark text); the large ink surfaces keep --ink-fill. */
html[data-theme="dark"] .chip.on, html[data-theme="dark"] .expill.active, html[data-theme="dark"] .stepchip.on,
html[data-theme="dark"] .btn-ink, html[data-theme="dark"] .pv-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-theme="dark"] .btn-ink:hover:not(:disabled) { filter: brightness(.92); }

@media (max-width: 760px) {
  .req-side { position: static; }
  .confirm-bar { bottom: 8px; }
  .ql-vs { flex-basis: 100%; }
}

/* ===== v3 shared patterns (MORE_SCREENS): tiles, chips with counts, empty state, list + detail ===== */
.tile-amber { background: var(--amber-bg); border-color: transparent; }
.tile-amber .tile-k, .tile-amber .tile-v { color: var(--amber); }
.tile-amber .tile-s { color: var(--ink-2); }
.pv-red { background: var(--brand); color: #fff; }
.chip-n { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; padding: 1px 6px; border-radius: 6px; background: var(--paper); color: var(--ink-3); margin-inline-start: 7px; }
.chip.on .chip-n { background: rgba(255,255,255,.18); color: #fff; }
html[data-theme="dark"] .chip.on .chip-n { background: rgba(0,0,0,.1); color: var(--paper); }
.empty-v3 { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--mint); }
.empty-v3-ico { width: 34px; height: 34px; border-radius: 10px; background: #0A6B49; color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 700; flex: none; }
.empty-v3-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.03em; line-height: 1.15; color: var(--green-deep); }
.empty-v3-line { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.card-list > .empty-v3 { margin: 4px 22px 22px; }
.split-v3 { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.split-list { flex: 1 1 300px; min-width: 0; }
.split-detail { flex: 2 1 460px; min-width: 0; }
@media (max-width: 760px) { .split-list, .split-detail { flex-basis: 100%; } }
.lrow.sel { background: var(--paper); box-shadow: inset 3px 0 0 var(--brand); }
html[dir="rtl"] .lrow.sel { box-shadow: inset -3px 0 0 var(--brand); }
.xn { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--ink-fill); color: #fff; white-space: nowrap; }
.chev { display: inline-block; transition: transform .2s; }
html[dir="rtl"] .chev { transform: scaleX(-1); }
[aria-expanded="true"] .chev { transform: rotate(90deg); }
html[dir="rtl"] [aria-expanded="true"] .chev { transform: rotate(90deg); }
.mono-k { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; }
.panel-ink { border-radius: var(--r-card); background: var(--ink-fill); color: #fff; padding: 22px; }
.panel-ink .mono-k { color: rgba(255,255,255,.6); }
.row-v3 { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-top: 14px; }
.sec-v3 { margin-top: 14px; }
.h3-v3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.scroll-x { overflow-x: auto; }

/* ===== Inventory (v3) ===== */
.inv-approvals { flex: 3 1 460px; min-width: 0; margin: 0; }
.inv-runway { flex: 2 1 320px; min-width: 0; }
.draft-row { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.draft-main { flex: 1 1 240px; min-width: 0; }
.draft-meta { margin-top: 3px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-transform: uppercase; overflow-wrap: anywhere; }
.runway-check { border: none; background: none; padding: 0; cursor: pointer; font-family: var(--font-mono); font-size: 11.5px; color: #6FE0B0; white-space: nowrap; }
.runway-check:hover { text-decoration: underline; text-underline-offset: 3px; }
.runway-head { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: 10px; }
.runway-row { margin-top: 14px; }
.runway-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.runway-top .mono { font-size: 12.5px; white-space: nowrap; }
.runway-drug { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.runway-bar { margin-top: 6px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.runway-bar > i { display: block; height: 100%; border-radius: 6px; }
.runway-scale { margin-top: 10px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.38); text-transform: uppercase; }
.runway-note { margin: 16px 0 0; font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.5; }
/* One column grid for the stock table; header and rows (and the inline edit / add forms) are subgrids, so the status
   and button columns fit their widest cell in every language (Somali labels run long) and rows stay aligned.
   Narrow screens scroll it sideways. */
.stock-grid { display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(120px, 1.3fr) 76px 76px 80px minmax(110px, 1fr) fit-content(96px) max-content; column-gap: 12px; min-width: min-content; }
.stock-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 12px 22px; border-top: 1px solid var(--line); margin: 0; }
.stock-row > .mono { font-size: 13.5px; }
.stock-head { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; padding-top: 9px; padding-bottom: 9px; }
.stock-row.editing { background: var(--paper); }
.stock-bar { position: relative; flex: 1; max-width: 96px; height: 6px; border-radius: 4px; background: var(--paper); border: 1px solid var(--line); }
.stock-bar > i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; border-radius: 4px; }
.stock-bar::after { content: ''; position: absolute; inset-inline-start: 50%; top: -4px; bottom: -4px; width: 1.5px; background: var(--ink-3); } /* the tick = reorder point */
.inp-cell { width: 100%; min-width: 0; padding: 7px 9px; font-size: 13px; border-radius: 9px; }

/* ===== Savings (v3) ===== */
.sav-note { display: flex; justify-content: flex-end; }
.sav-hero { flex: 2 1 440px; min-width: 0; border-radius: 26px; padding: 28px; container-type: inline-size; }
.sav-hero.pos { background: var(--mint); color: var(--green-deep); }
.sav-hero.neg { background: var(--blush); color: var(--brand-text-deep); }
.sav-hero .mono-k { color: inherit; opacity: .85; }
/* Hero totals: the design size (--big), capped so a long total still fits its card on one line — at these sizes the
   face runs up to ~.52em per character (it widens as it gets smaller), and --n is the character count (fitLen in ui.js). */
.sav-big { font-family: var(--font-display); --big: clamp(52px, 6vw, 80px); font-size: min(var(--big), calc(180cqi / var(--n, 6))); font-weight: 800; letter-spacing: -.05em; line-height: .9; margin-top: 14px; overflow-wrap: anywhere; }
.sav-hero.pos .sav-big { color: var(--green-deep); }
.sav-hero.neg .sav-big { color: var(--brand-text); }
.sav-cap { margin: 12px 0 0; font-size: 15px; max-width: 460px; line-height: 1.5; color: inherit; }
.sav-stats { margin-top: 22px; display: flex; gap: 28px; flex-wrap: wrap; }
.sav-stat-v { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin-top: 3px; }
.sav-months { flex: 1 1 300px; min-width: 0; margin: 0; container-type: inline-size; }
.mchart { margin-top: 14px; height: 168px; display: flex; gap: 10px; position: relative; }
.mchart::before { content: ''; position: absolute; inset-inline: 0; top: 84px; height: 1px; background: var(--line-2); }
.mcol { flex: 1; min-width: 0; }
.mcol-up, .mcol-down { height: 84px; display: flex; justify-content: center; }
.mcol-up { align-items: flex-end; }
.mcol-down { align-items: flex-start; }
.mbar-up { width: 26px; max-width: 100%; border-radius: 6px 6px 0 0; background: var(--green); }
.mbar-down { width: 26px; max-width: 100%; border-radius: 0 0 6px 6px; background: var(--brand); }
.mdot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); margin-bottom: -3px; }
.mlabels { display: flex; gap: 10px; margin-top: 10px; }
.mlabel { flex: 1; min-width: 0; text-align: center; }
.mlabel-m { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; }
.mlabel-v { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
/* A narrow chart card (a phone, or squeezed beside the hero) tightens the six columns and drops the currency sign
   from the month labels; the hero above already shows the currency. */
@container (max-width: 400px) { .mchart, .mlabels { gap: 4px; } .mlabel-v { font-size: 10px; letter-spacing: -.02em; } .mlabel-cur { display: none; } }
.sav-grid { min-width: 700px; }
.sav-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) 70px 104px minmax(220px, 1.6fr) 104px; gap: 14px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--line); }
.sav-row .num { text-align: end; }
.sav-row > .mono { font-size: 13px; color: var(--ink-2); }
.sav-head { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; padding-top: 8px; padding-bottom: 8px; }
.dv-head { display: flex; justify-content: space-between; gap: 8px; }
.dv { display: flex; align-items: center; height: 18px; }
.dv-side { flex: 1; display: flex; }
.dv-neg { justify-content: flex-end; }
.dv-pos { justify-content: flex-start; }
.dv-axis { width: 1.5px; height: 18px; background: var(--line-2); flex: none; }
.dv-neg > i { display: block; height: 10px; border-start-start-radius: 5px; border-end-start-radius: 5px; background: var(--brand); }
.dv-pos > i { display: block; height: 10px; border-start-end-radius: 5px; border-end-end-radius: 5px; background: var(--green); }
.sav-tile-drug { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin-top: 8px; color: var(--ink); }
.sav-formula { margin: 14px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); line-height: 1.6; text-transform: uppercase; }

/* ===== Audit trail (v3) ===== */
.aud-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--mint); flex-wrap: wrap; }
.aud-banner b { font-weight: 600; font-size: 14.5px; color: var(--green-deep); }
.aud-check { width: 26px; height: 26px; border-radius: 8px; background: #0A6B49; color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.aud-banner-text { font-size: 14px; color: var(--ink-2); flex: 1 1 300px; }
.aud-rfq { display: block; text-align: start; cursor: pointer; }
.aud-rfq:hover { background: var(--paper); }
.aud-rfq-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.aud-detail { margin: 0; padding: 24px; }
.aud-title { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--ink); }
.aud-tags { margin-top: 10px; display: flex; gap: 7px; flex-wrap: wrap; }
.aud-tag { font-family: var(--font-mono); font-size: 11.5px; padding: 5px 9px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; text-transform: uppercase; }
.tl { list-style: none; margin: 22px 0 0; padding: 0; }
.tl-item { display: flex; gap: 14px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 16px; padding-top: 4px; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--ink-3); }
.tl-dot.ink { background: var(--ink); }
.tl-dot.muted { background: var(--ink-3); }
.tl-dot.amber { background: var(--amber); }
.tl-dot.green { background: var(--green); }
.tl-dot.red { background: var(--brand-text); }
.tl-dot.ring { background: var(--card); border: 2.5px solid var(--ink); }
.tl-dot.next { background: var(--card); border: 2px dashed var(--ink-3); }
.tl-line { width: 2px; flex: 1; min-height: 22px; margin-top: 4px; background: var(--line-2); }
.tl-body { flex: 1; min-width: 0; padding-bottom: 20px; }
.tl-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-code { font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.tl-title { margin-top: 5px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.tl-item.next .tl-title { color: var(--ink-3); }
.tl-text { margin-top: 2px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.aud-toggle { margin-top: 8px; border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-text); white-space: nowrap; }
.aud-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.aud-quotes { margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
.aud-q { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; background: var(--card); }
.aud-q + .aud-q { border-top: 1px solid var(--line); }
.aud-q.held { background: var(--blush); }
.aud-q.chosen { background: var(--paper); }
.aud-q-who { flex: 1 1 150px; min-width: 0; font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.aud-q > .pv { margin-inline-start: auto; }
.aud-q.held > .pv { background: var(--card); }

/* ===== Expandable row (v3 shared): toggle + chevron, line items in a --paper inset ===== */
.xrow { border-top: 1px solid var(--line); }
.xrow-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px; flex-wrap: wrap; }
.xrow-toggle { display: flex; align-items: center; gap: 14px; flex: 1 1 300px; min-width: 0; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; text-align: start; }
.xrow-chev { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; font-size: 16px; line-height: 1; color: var(--ink-3); background: var(--paper); }
.xrow-toggle:hover .xrow-chev { color: var(--ink); }
.xrow-body { padding: 0 22px 16px; padding-inline-start: clamp(22px, 7vw, 106px); }
.xrow-inset { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
.xline { display: flex; align-items: center; gap: 14px; padding: 11px 14px; flex-wrap: wrap; }
.xline + .xline { border-top: 1px solid var(--line); }
.xline-main { flex: 1 1 180px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.xline-amt { font-size: 13.5px; font-weight: 600; }

/* ===== Supplier notifications (v3) ===== */
.ntoolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.ntoolbar .chips { flex: 1 1 auto; }
.ntoolbar .linkbtn { font-size: 13.5px; white-space: nowrap; }
.nday { margin-top: 22px; }
.nday-k { margin: 0; padding: 0 4px 8px; font-weight: 400; }
.nlist { display: flex; flex-direction: column; gap: 10px; }
.ncard { display: flex; gap: 14px; padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--card) 55%, transparent); border: 1px solid var(--line); }
.ncard.unread { background: var(--card); border-color: var(--line-2); box-shadow: inset 3px 0 0 var(--brand); cursor: pointer; }
html[dir="rtl"] .ncard.unread { box-shadow: inset -3px 0 0 var(--brand); }
.nico { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.nico.amber { background: var(--amber-bg); color: var(--amber); }
.nico.mint { background: var(--mint); color: var(--green-deep); }
.nico.red { background: var(--brand); color: #fff; }
.nico.ink { background: var(--ink-fill); color: #fff; }
.nico.blush { background: var(--blush); color: var(--brand-text); }
.nico.muted { background: var(--paper); color: var(--ink-3); border: 1px solid var(--line); }
/* dark: small ink tiles would vanish on dark cards, so they invert like the selected controls */
html[data-theme="dark"] .nico.ink, html[data-theme="dark"] .lim-i { background: var(--ink); color: var(--paper); }
.nmain { flex: 1; min-width: 0; }
.ntop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ntitle { font-weight: 600; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.ndot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.nmeta { margin-inline-start: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; text-transform: uppercase; }
.nbody { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.nquote { margin-top: 12px; display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.nq-v { font-family: var(--font-mono); font-size: 16px; font-weight: 600; margin-top: 2px; color: var(--ink); white-space: nowrap; }
.nq-s { font-size: 14px; font-weight: 500; margin-top: 3px; color: var(--ink); }
.nedit { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ninp { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); padding: 0 10px; }
.ninp:focus-within { border-color: var(--ink-3); }
.ninp > span { font-family: var(--font-mono); color: var(--ink-3); }
.ninp input { width: 84px; border: 0; outline: none; padding: 9px 6px; background: transparent; font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.nexplain { margin-top: 12px; width: 100%; min-height: 64px; resize: vertical; }
.nacts { margin-top: 12px; display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; }
.nacts .linkbtn { font-size: 13px; }
.ndone { margin-top: 12px; }
/* grouped RFQ notification: one card per drug list, one row per line it holds */
.nlines { margin-top: 12px; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.nline { padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.nline:last-child { border-bottom: 0; padding-bottom: 2px; }
.nline .ntitle { font-size: 14.5px; }
.nmain .pv { white-space: normal; max-width: 100%; } /* a long status (Somali) wraps inside a narrow card instead of running out of it */
.nmore { margin-top: 16px; display: flex; justify-content: center; }

/* ===== Supplier credit · receivables (v3) ===== */
.rcv-row { margin-top: 0; }
.rcv-hero { flex: 2 1 440px; min-width: 0; border-radius: 26px; padding: 28px; container-type: inline-size; }
.rcv-big { font-family: var(--font-display); --big: clamp(52px, 6vw, 80px); font-size: min(var(--big), calc(180cqi / var(--n, 6))); font-weight: 800; letter-spacing: -.05em; line-height: .9; margin-top: 14px; overflow-wrap: anywhere; }
.rcv-sub { margin: 10px 0 0; font-size: 14.5px; color: rgba(255,255,255,.72); overflow-wrap: anywhere; }
.rcv-tl { margin-top: 28px; }
.rcv-scale { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; }
.rcv-track { margin-top: 8px; height: 46px; position: relative; border-top: 1px solid rgba(255,255,255,.2); }
.rcv-mark { position: absolute; top: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rcv-mark > i { width: 2px; height: 14px; background: #6FE0B0; }
.rcv-mark.late > i { background: #FF8A84; }
.rcv-mark > span { margin-top: 5px; font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; text-transform: uppercase; }
.rcv-mark.late > span { color: #FFB4AE; }
.rcv-mark.flip { align-items: flex-end; transform: translateX(calc(-100% + 2px)); }
html[dir="rtl"] .rcv-mark.flip { transform: translateX(calc(100% - 2px)); }
.rcv-note { margin: 12px 0 0; font-size: 12.5px; color: rgba(255,255,255,.55); }
.rcv-side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-self: stretch; }
.rcv-side > .tile { flex: 1; }
.st-id { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); flex: none; }
.st-main { min-width: 0; }
.st-who { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.st-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.st-amt { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.st-amt.late { color: var(--brand-text); }
.st-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.st-settle { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; padding: 0 22px 16px; padding-inline-start: clamp(22px, 7vw, 106px); }
.st-settle .inp { width: auto; max-width: 230px; padding: 7px 10px; font-size: 13.5px; }
.sc-disclaimer { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
/* phones: big hero figures shrink instead of breaking mid-number; the timeline keeps its two end labels */
@media (max-width: 560px) {
  .rcv-hero, .sav-hero { padding: 22px; }
  .rcv-big, .sav-big { --big: clamp(34px, 11vw, 52px); }
  .rcv-mid { display: none; }
  .rcv-scale > span { white-space: nowrap; }
}

/* ===== Supplier credit limits (v3) ===== */
.lim-info { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.lim-i { width: 28px; height: 28px; border-radius: 8px; background: var(--ink-fill); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; flex: none; }
.lim-info p { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.lim-info b { color: var(--ink); font-weight: 600; }
.lim-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 14px; align-items: start; }
.lim-card { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
.lim-head { display: flex; align-items: center; gap: 12px; }
.lim-init { width: 44px; height: 44px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ink); }
.lim-who { flex: 1; min-width: 0; }
.lim-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.lim-who .mono-k { margin-top: 3px; font-size: 11.5px; }
.lim-rel { margin-top: 20px; display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.lim-pct { margin-top: 6px; font-family: var(--font-display); font-size: 48px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--green-deep); }
.lim-pct.new { color: var(--ink-3); }
.lim-pct.poor { color: var(--brand-text); }
.lim-strip { flex: 1; min-width: 180px; }
.lim-sq { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.lim-sq > i { width: 14px; height: 14px; border-radius: 4px; }
.lim-sq > i.ok { background: var(--green); }
.lim-sq > i.late { background: var(--brand); opacity: .85; }
.lim-sq > i.open { box-shadow: inset 0 0 0 2px var(--brand); }
.lim-sq > b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-3); }
.lim-hist { margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); text-transform: uppercase; }
.lim-hist-note { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.lim-box { margin-top: 20px; padding: 16px; border-radius: 16px; background: var(--paper); }
.lim-box-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lim-ceil { text-align: end; }
.lim-box-v { margin-top: 3px; font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--ink); }
.lim-box-v.over { color: var(--brand-text); }
.lim-bar { margin-top: 12px; height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; }
.lim-bar > i { display: block; height: 100%; border-radius: 6px; background: var(--ink); transition: width .3s; }
.lim-bar.over > i { background: var(--brand); }
.lim-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.lim-note.over { color: var(--brand-text-deep); }
.lim-set { margin-top: 16px; }
.lim-set-row { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lim-set-row .chip { font-size: 13.5px; padding: 8px 12px; }
.lim-set-row .ninp input { width: 76px; }
.lim-ro { margin: 16px 0 0; }

/* ===== v3 shared: toolbar row, avatar tile, two-step confirm panel ===== */
.toolbar-v3 { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.toolbar-v3 > .chips { flex: 1 1 auto; }
.toolbar-v3 > .mono-k { font-size: 11.5px; }
.av { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); }
.av.on { background: var(--ink-fill); color: #fff; border-color: transparent; }
html[data-theme="dark"] .av.on { background: var(--ink); color: var(--paper); }
.confirm-v3 { margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--blush); }
.confirm-v3 > .mono-k { color: var(--brand-text-deep); font-size: 11.5px; }
.confirm-v3-text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.confirm-v3-acts { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.empty-pad { padding: 28px 22px; text-align: center; font-size: 14px; color: var(--ink-3); }

/* ===== Admin · Facility KYC (v3) ===== */
.kyc-row { cursor: pointer; }
.kyc-row:hover { background: var(--paper); }
.kyc-name-s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kyc-sub { display: block; margin-top: 2px; font-size: 11.5px; }
.kyc-detail { margin: 0; padding: 26px; }
.kyc-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.kyc-id { flex: 1; min-width: 0; }
.kyc-name { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--ink); overflow-wrap: anywhere; }
.kyc-contact { margin-top: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.kyc-type { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kyc-type .inp { width: auto; padding: 7px 10px; font-size: 13.5px; }
.kyc-note { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.kyc-acts { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kyc-rej { color: var(--brand-text); }
.kyc-hint { font-size: 13px; color: var(--ink-3); }
.kyc-hint.warn { color: var(--amber); }
.kyc-result { margin-top: 18px; padding: 14px 16px; border-radius: 14px; font-weight: 600; font-size: 14.5px; }
.kyc-result.verified { background: var(--mint); color: var(--green-deep); }
.kyc-result.rejected { background: var(--blush); color: var(--brand-text-deep); }

/* ===== Admin · Analytics (v3) ===== */
.an-hero { flex: 2 1 460px; min-width: 0; border-radius: 26px; padding: 28px; container-type: inline-size; color: #fff; background-color: var(--brand);
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), radial-gradient(90% 90% at 100% 0%, #D8473C, transparent 60%);
  background-size: 40px 40px, 40px 40px, 100% 100%; }
html[dir="rtl"] .an-hero { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), radial-gradient(90% 90% at 0% 0%, #D8473C, transparent 60%); }
.an-hero .mono-k { color: rgba(255,255,255,.8); }
.an-big { margin-top: 14px; font-family: var(--font-display); --big: clamp(56px, 6vw, 84px); font-size: min(var(--big), calc(180cqi / var(--n, 6))); font-weight: 800; letter-spacing: -.05em; line-height: .9; overflow-wrap: anywhere; }
.an-sub { margin: 10px 0 0; font-size: 14.5px; opacity: .85; }
.an-funnel { margin-top: 24px; display: flex; flex-direction: column; gap: 4px; }
.an-frow { display: flex; align-items: center; gap: 12px; padding: 4px 6px; margin-inline: -6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; text-align: start; }
.an-frow:hover { background: rgba(255,255,255,.08); }
.an-fk { width: 64px; flex: none; font-family: var(--font-mono); font-size: 11.5px; opacity: .8; text-transform: uppercase; }
.an-fbar { flex: 1; min-width: 60px; height: 10px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.an-fbar > i { display: block; height: 100%; border-radius: 6px; background: #fff; }
.an-fv { width: 44px; flex: none; text-align: end; font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.an-fn { width: 120px; flex: none; font-family: var(--font-mono); font-size: 11px; opacity: .75; text-transform: uppercase; }
.an-tiles { flex: 1 1 280px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile-btn { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tile-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.an-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.an-head .mono-k { font-size: 11px; }
.an-p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.an-fac { flex: 1 1 340px; min-width: 0; margin: 0; padding: 22px; }
.an-share { margin-top: 16px; display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--paper); }
.an-share > i { flex-basis: 0; min-width: 4px; }
.an-types { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.an-type { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; background: none; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.an-type:hover { background: var(--paper); }
.an-type.on { background: var(--paper); border-color: var(--line-2); }
.an-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.an-type-main { flex: 1; min-width: 0; }
.an-type-l { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.an-type-main .mono-k { display: block; margin-top: 1px; font-size: 11.5px; }
.an-type-v { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.an-faclist { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.an-faclist-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.an-fac-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.an-fac-name { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.an-more { padding-top: 8px; }
.an-anom { flex: 2 1 460px; min-width: 0; margin: 0; }
.an-anom-head { padding: 20px 22px 12px; }
.an-l4 { font-family: var(--font-mono); font-size: 11.5px; padding: 4px 8px; border-radius: 7px; background: var(--brand); color: #fff; }
.an-anom-head .an-head { justify-content: flex-start; align-items: center; }
.an-group { border-top: 1px solid var(--line); padding: 16px 22px; }
.an-ghead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.an-av { background: var(--blush); color: var(--brand-text); border-color: transparent; }
.an-gmain { flex: 1; min-width: 0; }
.an-gname { font-weight: 600; font-size: 15px; color: var(--ink); }
.an-gmain .mono-k { margin-top: 1px; font-size: 11.5px; }
.an-quotes { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.an-q { padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.an-q.frozen { background: color-mix(in srgb, var(--blush) 60%, transparent); }
.an-q-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.an-q-main { flex: 1 1 190px; min-width: 0; }
.an-q-drug { font-weight: 600; font-size: 14px; color: var(--ink); }
.an-q-main .mono-k { margin-top: 1px; font-size: 11.5px; }
.an-q-bar { flex: 1 1 150px; min-width: 130px; }
.an-q-track { position: relative; height: 8px; border-radius: 5px; background: var(--line); }
.an-q-track > i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--brand); }
.an-q-track > b { position: absolute; inset-inline-end: 0; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.an-q-scale { display: flex; justify-content: space-between; margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; }
.an-q-why { margin-top: 8px; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.an-q-hist { margin-top: 8px; font-size: 12.5px; }
.an-hist { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.an-hist-facts { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-2); margin-bottom: 6px; }
.an-ev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 12.5px; }
.an-ev-d { flex: 1 1 200px; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.an-pad { padding: 4px 22px 22px; }
.an-all { margin-top: 10px; font-size: 13px; }
.an-hb .list-head p { margin-top: 2px; }
.hb-addrs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-addr { padding: 12px 14px; }
.hb-addr + .hb-addr { border-top: 1px solid var(--line); }
.hb-addr-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.hb-addr-top b { overflow-wrap: anywhere; }
.hb-ord { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.hb-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); }
.drill-back { font-size: 13.5px; }
.drill-tbl { min-width: 720px; }
.drill-type { width: auto; padding: 4px 8px; font-size: 12px; }
@media (max-width: 560px) {
  .an-hero { padding: 22px; }
  .an-big { --big: clamp(38px, 12vw, 56px); }
  .an-fn { display: none; }
  .an-tiles { grid-template-columns: 1fr; }
}

/* ===== Admin · Reports (v3) ===== */
.rep-card { flex: 3 1 480px; min-width: 0; margin: 0; padding: 24px; }
.rep-step { margin-top: 22px; font-size: 11.5px; }
.rep-insts { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.rep-inst { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: background .15s, border-color .15s; }
.rep-inst:hover { border-color: var(--ink-3); }
.rep-inst.on { background: var(--ink-fill); border-color: var(--ink-fill); color: #fff; }
.rep-inst-k { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 8px; background: var(--paper); color: var(--ink); }
.rep-inst.on .rep-inst-k { background: var(--brand); color: #fff; }
.rep-inst-d { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.rep-inst.on .rep-inst-d { color: rgba(255,255,255,.7); }
.rep-period { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rep-range { color: var(--ink-2); margin-inline-start: 4px; }
.rep-custom { margin-top: 10px; display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; }
.rep-custom .inp { width: auto; padding: 7px 10px; font-size: 13.5px; }
.rep-go { margin-top: 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rep-result { margin-top: 20px; border-radius: 18px; background: var(--ink-fill); color: #fff; padding: 20px; }
.rep-result-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rep-file-wrap { min-width: 0; }
.rep-ok { font-family: var(--font-mono); font-size: 11.5px; color: #6FE0B0; text-transform: uppercase; }
.rep-file { margin-top: 6px; font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.03em; word-break: break-all; }
.rep-dl { display: flex; gap: 8px; flex-wrap: wrap; }
.rep-dl-pdf { background: #fff; color: #17110F; }
.rep-dl-csv { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); }
.rep-metrics { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px; }
.rep-m { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.07); min-width: 0; }
.rep-m-v { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.rep-m-k { margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.6); text-transform: uppercase; }
.rep-m-s { margin-top: 4px; font-size: 11.5px; color: rgba(255,255,255,.7); }
.rep-hash { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.07); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; word-break: break-all; color: rgba(255,255,255,.78); text-align: start; }
.rep-hash-note { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; }
.rep-badges { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.rep-badge { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.88); }
.rep-badge-note { margin-top: 8px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.rep-mail { flex: 2 1 340px; min-width: 0; margin: 0; }
.rep-mail-head { padding: 20px 22px 12px; }
.rep-mail-head .chips { margin-top: 12px; }
.rep-mail-head .an-head { align-items: center; }
/* "Emails today: N / limit" (admin dashboard + Email log) */
.an-mail { padding: 14px 18px; }
.an-mail-top { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.an-mail-v { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.an-mail-top .linkbtn { margin-inline-start: auto; font-size: 13px; }
.an-mail-bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 10px; }
.an-mail-bar > i { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.an-mail.warn .an-mail-bar > i { background: var(--amber); }
.an-mail.over .an-mail-bar > i { background: var(--brand); }
.an-mail-note { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.rep-mail-today { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 14px; }
.rep-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); font-size: 13px; }
.rep-mail-stats { margin-top: 8px; }
.rep-msgs { max-height: 560px; overflow: auto; }
.rep-msg { padding: 13px 22px; border-top: 1px solid var(--line); }
.rep-msg-top { display: flex; justify-content: space-between; gap: 10px; }
.rep-to { font-weight: 600; font-size: 13.5px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.rep-bubble { margin-top: 6px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: var(--paper); font-size: 13px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
html[dir="rtl"] .rep-bubble { border-radius: 14px 4px 14px 14px; }
.rep-msg-foot { margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rep-msg-foot .mono-k { font-size: 10.5px; }
.rep-reason { margin-top: 4px; }

/* ===== Admin · Credit ledger (v3) ===== */
.led-aging { margin-top: 24px; display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.08); }
.led-aging > i { flex-basis: 0; min-width: 4px; }
.led-legend { margin-top: 12px; display: flex; gap: 12px 22px; flex-wrap: wrap; }
.led-lk { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; }
.led-lk > span { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.led-lv { margin-top: 4px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.led-over { flex: 1 1 260px; min-width: 0; border-radius: 26px; background: var(--blush); padding: 24px; display: flex; flex-direction: column; align-self: stretch; }
.led-over .mono-k { color: var(--brand-text-deep); }
.led-over-n { margin-top: 12px; font-family: var(--font-display); font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--brand-text); }
.led-over-t { margin-top: 6px; font-size: 14.5px; color: var(--brand-text-deep); }
.led-fill { flex: 1; min-height: 14px; }
.led-over p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--brand-text-deep); }
.led-head { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 20px 22px 14px; }
.led-head .h3-v3 { flex: 1 1 200px; }
/* One column grid for the whole table; header and rows are subgrids of it, so each column takes the width of its
   widest cell (a long status in Somali, say) and every row stays aligned. Narrow screens scroll it sideways. */
.led-table { display: grid; grid-template-columns: max-content minmax(170px, 1.6fr) minmax(130px, 1fr) max-content max-content max-content; column-gap: 12px; min-width: min-content; }
.led-grid { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 12px; align-items: center; padding: 13px 22px; }
.led-th { padding-top: 9px; padding-bottom: 9px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; border-top: 1px solid var(--line); }
.led-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--line); }
.led-id { border: 0; background: none; padding: 0; font: inherit; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; text-align: start; }
.led-id .chev { color: var(--ink-3); }
.led-who { min-width: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.led-who b { font-weight: 600; }
.led-arrow { color: var(--ink-3); }
html[dir="rtl"] .led-arrow { display: inline-block; transform: scaleX(-1); }
.led-meta { font-size: 13px; color: var(--ink-2); }
.led-amt { font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-align: end; color: var(--ink); }
.led-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.led-lines { grid-column: 2 / -1; padding: 0 0 14px; padding-inline-end: 22px; } /* lines start under the parties column */

/* ===== Admin · Finance (v3) + market price index ===== */
.fx-card { flex: 1 1 340px; min-width: 0; border-radius: 26px; padding: 28px; }
.fx-now { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.fx-big { font-family: var(--font-display); font-size: clamp(52px, 5.4vw, 76px); font-weight: 800; letter-spacing: -.05em; line-height: .9; }
.fx-set { margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,.5); text-transform: uppercase; }
.fx-box { margin-top: 22px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.07); }
.fx-box .mono-k { font-size: 11px; color: rgba(255,255,255,.55); }
.fx-row { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.fx-inp { flex: 1; min-width: 120px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.06); color: #fff; font-family: var(--font-mono); font-size: 15px; }
.fx-inp:focus { outline: 2px solid rgba(255,255,255,.35); outline-offset: 1px; }
.fx-prev { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,.65); text-transform: uppercase; }
.fx-prev.big { color: #FF8A84; }
.fx-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.55); }
.fin-index { flex: 2 1 520px; min-width: 0; }
.fin-index > .card { margin: 0; }
.mi-head { padding: 20px 22px 14px; display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mi-head-main { flex: 1 1 280px; min-width: 0; }
.mi-back { display: inline-block; margin-bottom: 8px; font-size: 13.5px; }
.mi-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mi-tag { font-family: var(--font-mono); font-size: 11px; padding: 5px 9px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; text-transform: uppercase; }
.mi-tag.mint { background: var(--mint); border-color: transparent; color: var(--green-deep); }
/* One column grid for the table; header and rows are subgrids, so the average and quote-count columns take the width
   of their longest value (shilling prices run long) and every row stays aligned. Narrow screens scroll it sideways.
   The row padding (22px) lands inside the first and last columns, so the trend column is the line width + 22px. */
.mi-table { display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(160px, 1.5fr) max-content max-content 144px; column-gap: 12px; min-width: min-content; }
.mi-table > .mi-thin, .mi-table > .an-pad { grid-column: 1 / -1; }
.mi-grid { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 12px 22px; border-top: 1px solid var(--line); }
.mi-th { padding-top: 9px; padding-bottom: 9px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; }
.mi-drug { font-weight: 600; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.mi-range { position: relative; height: 14px; }
.mi-range > i { position: absolute; display: block; }
.mi-axis { inset-inline: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--line); }
.mi-span { top: 4px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 28%, transparent); }
.mi-avg { top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--card); box-sizing: border-box; }
.mi-row.thin .mi-span { background: var(--line-2); }
.mi-row.thin .mi-avg { background: var(--ink-3); }
.mi-ends { display: flex; justify-content: space-between; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.mi-avgv { font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-align: end; color: var(--ink); }
.mi-n { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); text-align: end; }
.mi-th .mi-avgv, .mi-th .mi-n { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.mi-row.thin .mi-n { color: var(--amber); }
.mi-trend { display: block; }
html[dir="rtl"] .mi-trend { transform: scaleX(-1); }
.mi-none { font-size: 11px; }
.mi-thin { display: block; width: 100%; padding: 13px 22px; border: 0; border-top: 1px solid var(--line); background: var(--paper); color: var(--brand-text); font: inherit; font-size: 13.5px; font-weight: 600; text-align: start; cursor: pointer; }
.mi-thin:hover { text-decoration: underline; text-underline-offset: 3px; }
.mi-foot { margin: 0; padding: 14px 22px 18px; font-size: 12px; line-height: 1.5; color: var(--ink-3); border-top: 1px solid var(--line); }
/* Beside the FX card (Finance) or on a phone the index card is narrow: tighter columns and a smaller trend line,
   so all five columns show without scrolling at desktop widths. */
.mi-card { container-type: inline-size; }
@container (max-width: 650px) {
  .mi-table { grid-template-columns: minmax(110px, 1.3fr) minmax(120px, 1.5fr) max-content max-content 106px; column-gap: 10px; }
  .mi-trend { width: 84px; height: auto; }
}

/* ===== Admin · Disputes (v3) ===== */
.ds-row { display: block; cursor: pointer; }
.ds-row:hover { background: var(--paper); }
.ds-row-title { display: block; margin-top: 5px; }
.ds-row .lrow-sub { display: block; margin-top: 2px; }
.ds-detail { margin: 0; padding: 24px; }
.ds-thread { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.ds-msg { display: flex; }
.ds-msg.right { justify-content: flex-end; }
.ds-bubble { max-width: min(82%, 520px); padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.ds-msg.right .ds-bubble { border-radius: 16px 4px 16px 16px; background: var(--ink-fill); border-color: transparent; color: #fff; }
html[dir="rtl"] .ds-bubble { border-radius: 16px 4px 16px 16px; }
html[dir="rtl"] .ds-msg.right .ds-bubble { border-radius: 4px 16px 16px 16px; }
.ds-meta { display: flex; justify-content: space-between; gap: 14px; font-family: var(--font-mono); font-size: 11px; opacity: .7; }
.ds-text { margin-top: 6px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ds-photo { display: block; margin-top: 10px; max-width: 220px; max-height: 160px; border-radius: 10px; object-fit: cover; }
.ds-note { margin: 10px 0 0; }
.ds-send { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.ds-send .inp { flex: 1 1 260px; min-width: 0; }
.ds-acts { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ds-fill { flex: 1; }
.ds-resolve .inp { margin-top: 8px; width: 100%; }
.ds-empty { border-radius: 26px; background: var(--mint); padding: clamp(26px, 4vw, 48px); display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.ds-empty-ico { width: 64px; height: 64px; border-radius: 18px; background: #0A6B49; color: #fff; display: grid; place-items: center; font-size: 28px; flex: none; }
.ds-empty-main { flex: 1 1 300px; min-width: 0; }
.ds-empty-title { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--green-deep); }
.ds-empty-main p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.ds-empty-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.ds-empty-stats .mono-k { color: var(--green-deep); font-size: 11.5px; }
.ds-empty-n { margin-top: 4px; font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }

/* ===== Admin · Recalls (v3) ===== */
.rc-list { flex: 3 1 480px; min-width: 0; }
.rc-cards { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.rc-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: inset 4px 0 0 var(--line-2); }
html[dir="rtl"] .rc-card { box-shadow: inset -4px 0 0 var(--line-2); }
.rc-card.sev-high { box-shadow: inset 4px 0 0 var(--brand); }
.rc-card.sev-medium { box-shadow: inset 4px 0 0 var(--amber); }
html[dir="rtl"] .rc-card.sev-high { box-shadow: inset -4px 0 0 var(--brand); }
html[dir="rtl"] .rc-card.sev-medium { box-shadow: inset -4px 0 0 var(--amber); }
.rc-card.closed { background: color-mix(in srgb, var(--card) 55%, transparent); }
.rc-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.rc-main { flex: 1 1 260px; min-width: 0; }
.rc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-meta .mono-k { font-size: 11.5px; }
.rc-drug { margin-top: 8px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); overflow-wrap: anywhere; }
.rc-line { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rc-batch { font-family: var(--font-mono); font-size: 12.5px; padding: 5px 9px; border-radius: 8px; background: var(--ink-fill); color: #fff; white-space: nowrap; text-transform: uppercase; }
html[data-theme="dark"] .rc-batch { background: var(--ink); color: var(--paper); }
.rc-reason { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.rc-sup { margin-top: 6px; }
.rc-proof { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--paper); display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; }
.rc-proof-main { flex: 1 1 220px; min-width: 0; }
.rc-proof-main .mono-k { font-size: 11px; }
.rc-proof-n { margin-top: 3px; font-weight: 600; font-size: 14px; color: var(--ink); }
.rc-proof > .mono-k { font-size: 11.5px; white-space: nowrap; }
.rc-ok { color: var(--green-deep); }
.rc-form { flex: 2 1 320px; min-width: 0; border-radius: 22px; background: var(--ink-fill); color: #fff; padding: 22px; display: flex; flex-direction: column; align-self: flex-start; }
.rc-form h3 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.rc-form-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.6); }
.rc-form .mono-k { margin-top: 16px; font-size: 11px; color: rgba(255,255,255,.55); }
.rc-inp { width: 100%; margin-top: 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 14px; resize: vertical; }
.rc-inp.mono { font-family: var(--font-mono); }
.rc-inp::placeholder { color: rgba(255,255,255,.4); }
.rc-inp:focus { outline: 2px solid rgba(255,255,255,.35); outline-offset: 1px; }
.rc-seg { margin-top: 7px; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.07); }
.rc-seg-b { flex: 1; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.6); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rc-seg-b.on { background: #fff; color: #17110F; }
.rc-seg-b.on.high { background: var(--brand); color: #fff; }
.rc-sev-note { margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; text-transform: uppercase; color: rgba(255,255,255,.6); }
.rc-sev-note.sev-medium { color: #F2C27B; }
.rc-sev-note.sev-high { color: #FF8A84; }
.rc-go { margin-top: 18px; width: 100%; justify-content: center; }
.rc-match { margin-top: 10px; text-align: center; color: rgba(255,255,255,.45) !important; }

/* ===== Admin · Account sharing (v3) ===== */
.sh-wrap .lim-info .mono-k { display: block; margin-top: 4px; font-size: 11.5px; }
.sh-top { display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-detail { margin: 0; padding: 24px; }
.sh-signals { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.sh-sig { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); }
.sh-sig.hot { background: var(--blush); color: var(--brand-text-deep); }
.sh-sig .xn { font-weight: 500; }
.sh-facts { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.sh-facts .tile { padding: 16px; }
.sh-facts .tile-v { font-size: 26px; }
.sh-facts .tile-s { overflow-wrap: anywhere; }
.sh-k { margin-top: 18px; font-size: 11.5px; }
.sh-jump { display: flex; align-items: center; gap: 8px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sh-ids { width: 96px; flex: none; }
.sh-cities { font-weight: 600; font-size: 14px; color: var(--ink); flex: 1 1 160px; min-width: 0; }
html[dir="rtl"] .sh-cities { unicode-bidi: plaintext; }
.sh-none, .sh-basis { margin-top: 8px; }
.sh-dev { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sh-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; }
.sh-dot.on { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
.sh-dev-name { font-weight: 600; font-size: 14px; flex: 1 1 140px; min-width: 0; color: var(--ink); }
.sh-dev-city { font-size: 13px; color: var(--ink-2); }
.sh-dev .mono-k { font-size: 11px; }
.sh-reason { margin-top: 10px; width: 100%; }
.sh-ro { margin: 16px 0 0; }

/* ===== Admin · Suspend (v3) ===== */
.su-list { flex: 3 1 460px; min-width: 0; margin: 0; }
.su-intro { margin: 0; padding: 0 22px 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.su-row { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.su-main { flex: 1 1 240px; min-width: 0; }
.su-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.su-meta { margin-top: 2px; font-size: 11.5px; overflow-wrap: anywhere; text-transform: none; }
.su-reason { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.su-side { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.su-form { flex: none; }
.su-select { background: #2A221F; }
.su-effects { margin-top: 14px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.06); }
.su-effects .mono-k { margin-top: 0; }
.su-eff { display: flex; gap: 10px; align-items: flex-start; margin-top: 9px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.85); }
.su-eff-m { font-family: var(--font-mono); flex: none; width: 14px; text-align: center; color: rgba(255,255,255,.6); }
.su-eff-m.bad { color: #FF8A84; }
.su-eff-m.ok { color: #6FE0B0; }
.su-confirm { margin-top: 16px; padding: 14px; border-radius: 14px; border: 1px solid #FF8A84; background: rgba(179,38,30,.2); }
.su-confirm-t { font-weight: 600; font-size: 14.5px; }
.su-confirm-s { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.7); }
.su-cancel { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.su-temp { margin: 0; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.su-temp .an-p { margin: 0; }
.su-temp .inp { width: 100%; }
.su-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.su-tp { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); }
.su-tp-pw { font-size: 17px; letter-spacing: 1px; color: var(--ink); overflow-wrap: anywhere; }
.su-tp .btn { align-self: flex-start; }

/* ===== Admin · Admins & roles (v3) ===== */
/* Team table: one column grid; header and rows are subgrids, so role / 2FA / status / actions take the width of
   their widest cell in every language and name + email share the rest. Narrow screens scroll it sideways. */
.at-table { display: grid; grid-template-columns: minmax(170px, 1.4fr) minmax(170px, 1.2fr) max-content max-content max-content max-content; column-gap: 12px; min-width: min-content; }
.at-grid { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 13px 22px; }
.at-th { padding-top: 9px; padding-bottom: 9px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; border-top: 1px solid var(--line); }
.at-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--line); }
.at-row.off { background: color-mix(in srgb, var(--paper) 60%, transparent); }
.at-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.at-name { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-you { font-size: 10.5px; }
.at-email { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-role { width: 100%; padding: 7px 9px; font-size: 13.5px; }
.at-acts { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.at-rm { width: 34px; padding-inline: 0; justify-content: center; color: var(--brand-text); }
.at-ask { grid-column: 1 / -1; padding: 0 22px 14px; }
.at-ask .confirm-v3 { margin-top: 0; }
.at-add { border-top: 1px solid var(--line); padding: 16px 22px 18px; background: var(--paper); }
.at-add .mono-k { font-size: 11.5px; }
.at-add-row { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; align-items: center; }
.at-add-row .inp { width: 100%; min-width: 0; }
.at-added { margin-top: 12px; }
.at-perms { flex: 3 1 480px; min-width: 0; margin: 0; }
/* Permission matrix: same idea, so a long role name (Somali, Arabic) widens its own column only. */
.at-ptable { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(64px, max-content)); column-gap: 10px; min-width: min-content; }
.at-pgrid { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 11px 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.at-c { text-align: center; }
.at-c.yes { color: var(--green-deep); font-weight: 700; }
.at-c.no { color: var(--ink-3); }
.at-flags { flex: 2 1 320px; min-width: 0; margin: 0; }
.at-flag { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); }
.at-flag-main { flex: 1; min-width: 0; }
.at-flag-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.at-flag .mono-k { margin-top: 2px; font-size: 11px; text-transform: none; }

/* ===== Admin · WhatsApp bot (v3) ===== */
.bt-console { flex: 1 1 360px; min-width: 0; max-width: 540px; border-radius: 24px; background: var(--ink-fill); overflow: hidden; display: flex; flex-direction: column; height: 640px; max-height: calc(100dvh - 170px); min-height: 460px; }
.bt-head { padding: 16px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.bt-logo { width: 38px; height: 38px; border-radius: 12px; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; display: grid; place-items: center; flex: none; }
.bt-head-main { flex: 1; min-width: 0; }
.bt-name { color: #fff; font-weight: 600; font-size: 15px; }
.bt-live { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: #6FE0B0; text-transform: uppercase; }
.bt-dot { width: 7px; height: 7px; border-radius: 50%; background: #6FE0B0; }
.bt-scroll { flex: 1; min-height: 0; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.bt-msg { display: flex; }
.bt-msg.me { justify-content: flex-end; }
.bt-bubble { max-width: 86%; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.88); }
.bt-msg.me .bt-bubble { border-radius: 14px 4px 14px 14px; background: var(--brand); color: #fff; }
html[dir="rtl"] .bt-bubble { border-radius: 14px 4px 14px 14px; }
html[dir="rtl"] .bt-msg.me .bt-bubble { border-radius: 4px 14px 14px 14px; }
.bt-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; font-family: var(--font-mono); }
.bt-msg.me .bt-text { font-family: var(--font-ui); }
.bt-time { margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; opacity: .55; text-align: end; }
.bt-foot { padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.bt-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.bt-chip { font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: rgba(255,255,255,.82); cursor: pointer; }
.bt-chip:hover { border-color: #fff; color: #fff; }
.bt-input { display: flex; gap: 8px; }
.bt-inp { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 11px 13px; background: rgba(255,255,255,.06); color: #fff; font-family: var(--font-mono); font-size: 14px; }
.bt-inp::placeholder { color: rgba(255,255,255,.4); }
.bt-inp:focus { outline: 2px solid rgba(255,255,255,.35); outline-offset: 1px; }
.bt-outbox { flex: 2 1 440px; min-width: 0; margin: 0; }
.bt-out { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); }
.bt-when { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--ink-3); padding-top: 2px; }
.bt-when b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bt-out-main { min-width: 0; }
.bt-to { font-weight: 600; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.bt-out-text { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.bt-out .mono-k { margin-top: 4px; font-size: 10.5px; }

/* ===== Admin · Audit trail (v3) ===== */
.au-hero { flex: 2 1 460px; min-width: 0; border-radius: 26px; padding: 26px; overflow: hidden; }
.au-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.au-status { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: #6FE0B0; text-transform: uppercase; }
.au-status.bad { color: #FF8A84; }
.au-sdot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.au-verify { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); }
.au-verify:hover:not(:disabled) { border-color: #fff; }
.au-big { margin-top: 14px; font-family: var(--font-display); font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.au-text { margin: 8px 0 0; max-width: 520px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7); }
.au-chain { margin-top: 20px; display: flex; align-items: center; overflow: hidden; }
/* Each block + link is 66px. When the hero is too narrow for all eight, drop the OLDEST whole blocks so the
   newest (highlighted) one always shows and no block is cut in half. */
.au-hero { container-type: inline-size; }
@container (max-width: 513px) { .au-block-wrap:nth-last-child(n+8) { display: none; } }
@container (max-width: 447px) { .au-block-wrap:nth-last-child(n+7) { display: none; } }
@container (max-width: 381px) { .au-block-wrap:nth-last-child(n+6) { display: none; } }
@container (max-width: 315px) { .au-block-wrap:nth-last-child(n+5) { display: none; } }
@container (max-width: 249px) { .au-block-wrap:nth-last-child(n+4) { display: none; } }
@container (max-width: 183px) { .au-block-wrap:nth-last-child(n+3) { display: none; } }
.au-block-wrap { display: flex; align-items: center; flex: none; }
.au-block { width: 52px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11.5px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.85); }
.au-block-wrap:last-child .au-block { background: rgba(111,224,176,.16); border-color: #6FE0B0; color: #6FE0B0; }
.au-link { width: 14px; height: 2px; background: rgba(255,255,255,.25); }
.au-note { margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; }
.au-export-row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.au-row { border-top: 1px solid var(--line); }
.au-line { display: flex; align-items: center; gap: 8px 12px; padding: 12px 22px; width: 100%; flex-wrap: wrap; border: 0; background: none; font: inherit; color: inherit; text-align: start; }
.au-line.multi { cursor: pointer; }
.au-line.multi:hover { background: var(--paper); }
.au-when { width: 66px; flex: none; display: flex; flex-direction: column; gap: 1px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.au-when b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.au-code { font-family: var(--font-mono); font-size: 11.5px; padding: 3px 8px; border-radius: 7px; white-space: nowrap; flex: none; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.au-code.security { background: var(--blush); color: var(--brand-text-deep); border-color: transparent; }
.au-code.credit { background: var(--mint); color: var(--green-deep); border-color: transparent; }
.au-code.suppliers { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.au-code.admin { background: var(--ink-fill); color: #fff; border-color: transparent; }
html[data-theme="dark"] .au-code.admin { background: var(--ink); color: var(--paper); }
.au-detail { flex: 1 1 240px; min-width: 0; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.au-actor { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.au-hash { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.au-items { padding: 0 22px 12px; padding-inline-start: clamp(22px, 8vw, 100px); }
.au-item { display: flex; gap: 8px 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; flex-wrap: wrap; align-items: baseline; }
.au-limit { margin: 0; padding: 12px 22px 16px; border-top: 1px solid var(--line); }

/* ===== One login (logged out): no sidebar — the header carries the brand, "Log in" and the switches ===== */
.logged-out .side { display: none; }
.hdr-brand { display: flex; align-items: center; gap: 9px; flex: none; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); }
.hdr-brand .side-logo-mark { width: 34px; height: 34px; }
.hdr-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.5px; color: var(--ink); }
.logged-out .hdr-titles { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.hdr-tools { display: flex; gap: 6px; align-items: center; flex: none; }
.hdr-tools .theme-toggle { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.hdr-tools .theme-toggle:hover { background: var(--paper); border-color: var(--line-2); }
@media (max-width: 560px) { .hdr-wordmark { display: none; } .logged-out .hdr-titles { padding-inline-start: 10px; } }

/* ===== Confirm your email (accounts made before confirmed sign-up) ===== */
.confirm-banner { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; background: var(--amber-bg); color: var(--amber); }
.ce-ico { font-size: 18px; flex: none; }
.ce-text { flex: 1 1 260px; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.ce-form { display: flex; gap: 8px; align-items: center; flex: none; }
.ce-code { width: 140px; padding: 8px 10px; font-size: 16px; letter-spacing: 4px; }
.ce-code::placeholder { font-size: 13px; letter-spacing: 0; } /* "6-digit code" fits the narrow box */
.confirm-banner .linkbtn { color: inherit; font-weight: 600; }

/* ===== Related company (same owner): quotes chosen by hand, read-only links card ===== */
.qline.rel-alt { background: color-mix(in srgb, var(--amber-bg) 55%, transparent); border-top-style: dashed; }
.qline.rel-alt .ql-drug { display: flex; align-items: center; }
.rel-choose { margin-top: 4px; color: var(--amber); font-weight: 600; }
.qline.rel-picked { background: color-mix(in srgb, var(--amber-bg) 40%, transparent); }
.rel-reason { margin-top: 4px; color: var(--ink-2); overflow-wrap: anywhere; }
.rel-form { padding: 12px 22px 16px; border-top: 1px dashed var(--line); background: var(--paper); }
.rel-form textarea { width: 100%; margin-top: 6px; }
.rel-form-acts { margin-top: 8px; display: flex; gap: 8px; }
.links-card { margin-top: 14px; }
.rel-row { display: flex; align-items: center; gap: 10px 14px; padding: 13px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rel-main { flex: 1 1 220px; min-width: 0; }
.rel-who { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.req-row.focus { box-shadow: inset 3px 0 0 var(--brand); background: color-mix(in srgb, var(--blush) 35%, transparent); }
html[dir="rtl"] .req-row.focus { box-shadow: inset -3px 0 0 var(--brand); }

/* ===== Admin · Related accounts ===== */
.ra-top { align-items: flex-start; }
.ra-list { flex: 3 1 460px; min-width: 0; margin: 0; }
.ra-sub { margin: 0; padding: 0 22px 14px; }
.ra-row { border-top: 1px solid var(--line); }
.ra-line { display: flex; align-items: center; gap: 10px 14px; padding: 14px 22px; flex-wrap: wrap; }
.ra-main { flex: 1 1 240px; min-width: 0; }
.ra-who { font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.ra-who b { font-weight: 600; }
.ra-arrow { color: var(--ink-3); margin: 0 2px; }
.ra-main .mono-k { margin-top: 3px; text-transform: none; font-size: 11.5px; overflow-wrap: anywhere; }
.ra-note { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.ra-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.ra-rm { width: 34px; padding-inline: 0; justify-content: center; color: var(--brand-text); }
.ra-reasons { display: flex; gap: 6px; flex-wrap: wrap; }
.ra-edit { padding: 0 22px 16px; }
.ra-edit textarea { width: 100%; margin-top: 6px; }
.ra-edit .confirm-v3-acts { margin-top: 10px; }
.ra-seg button { padding: 8px; font-size: 13.5px; }
.ra-rule-text { margin: 6px 0 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.ra-ask { padding: 0 22px 14px; }
.ra-ask .confirm-v3 { margin-top: 0; }
.ra-form .rc-seg-b { font-size: 12.5px; padding: 8px 6px; }

/* ===== Verification documents: the Shati Dowlada Hoose at sign-up · upload fields · banner · Documents page ·
   viewer · admin review. Files are fetched with the login token and shown as blobs (never public links). ===== */
.notice-blush { background: var(--blush); color: var(--brand-text-deep); }
.doc-banner { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.doc-banner-text { flex: 1 1 260px; min-width: 0; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.doc-ico.bad { background: var(--blush); color: var(--brand-text-deep); }

/* the required license section (Create account · "upload to continue") */
.shati-box { margin: 20px 0 0; padding: 12px 16px 16px; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--paper); min-width: 0; }
.shati-legend { padding: 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.shati-hint { margin-top: 2px; }
.auth-form .docf .inp { padding: 13px 14px; font-size: 15px; border-radius: 13px; }

/* upload fields: one picked file (thumbnail or PDF badge) + number + expiry */
.docf { margin-top: 12px; min-width: 0; }
.docf-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } /* reached through its label */
.docf-drop { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--line-2); border-radius: 13px; background: var(--card); cursor: pointer; transition: border-color .12s; }
.docf-drop:hover, .docf-input:focus-visible + .docf-drop { border-color: var(--ink); }
.docf-input:focus-visible + .docf-drop { outline: 2px solid var(--ink); outline-offset: 2px; }
.docf-drop.busy { opacity: .6; pointer-events: none; }
.docf-drop[hidden], .docf-picked[hidden] { display: none; } /* display:flex would beat the [hidden] attribute */
.docf-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--ink-fill); color: #fff; display: grid; place-items: center; font-size: 18px; flex: none; }
.docf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.docf-t { font-weight: 600; font-size: 14px; color: var(--ink); }
.docf-s { font-size: 12px; color: var(--ink-3); }
.docf-picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); min-width: 0; }
.docf-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); background: #fff; flex: none; }
.docf-pdf { width: 56px; height: 56px; border-radius: 9px; background: var(--blush); color: var(--brand-text-deep); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px; flex: none; }
.docf-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.docf-name { font-weight: 600; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docf-change { flex: none; cursor: pointer; }
.docf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 0 12px; }
.docf-field { min-width: 0; }
.docf-field .auth-label { margin-top: 14px; }
.docf-field .inp { width: 100%; }

/* Documents page (Supplier → Documents · Facility → Organisation → Documents) */
.dz-sub { line-height: 1.5; }
.dz-row .lrow { flex-wrap: wrap; }
.dz-row .lrow-main { flex: 1 1 150px; } /* keeps the status icon beside the title on phones */
.dz-note { margin-top: 3px; }
.dz-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.dz-form { margin: 0 22px 16px; padding: 4px 16px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.dz-form-acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dz-ro { padding-top: 12px; border-top: 1px solid var(--line); margin-bottom: 0; }

/* in-place viewer ("View my file") */
.docv-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(20, 8, 8, .62); display: grid; place-items: center; padding: 16px; }
.docv { width: min(920px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--card); color: var(--ink); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lift); }
.docv-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.docv-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docv-acts { flex: none; font-size: 13px; }
.docv-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; flex: none; font-size: 14px; }
.docv-body { flex: 1 1 auto; overflow: auto; background: var(--paper); display: grid; place-items: center; min-height: 240px; }
.docv-img { display: block; max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; background: #fff; }
.docv-pdf { display: block; width: 100%; height: calc(100vh - 120px); border: 0; background: #fff; }

/* admin review (Verify · Facility KYC): one card per document type, each upload with its file in place */
.rv-docs { margin-top: 14px; }
.drt-list { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
.drt { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--card); min-width: 0; }
.drt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.drt-label { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.drt-none { margin-top: 8px; }
.drd { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 14px; align-items: start; }
.drd + .drd { padding-top: 12px; border-top: 1px dashed var(--line-2); }
@container (max-width: 520px) { .drd { grid-template-columns: minmax(0, 1fr); } }
.drd-prev { border-radius: 12px; background: var(--paper); border: 1px solid var(--line); min-height: 140px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.drd-show { appearance: none; border: 0; background: none; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 140px; width: 100%; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.drd-show:hover { color: var(--ink); }
.drd-show:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.drd-imglink { display: block; }
.drd-img { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #fff; }
.drd-pdf { display: block; width: 100%; height: 300px; border: 0; background: #fff; }
.drd-tab { display: block; padding: 7px 10px; font-size: 12px; text-align: center; border-top: 1px solid var(--line); }
.drd-loading { padding: 24px 12px; text-align: center; }
.drd-meta { min-width: 0; }
.drd-top { display: flex; gap: 6px; flex-wrap: wrap; }
.drd-line { margin-top: 7px; font-size: 13px; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; }
.drd-file { margin-top: 4px; overflow-wrap: anywhere; }
.drd-acts { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.drd-reject { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.drd-reject textarea { width: 100%; }
.dr-hist { margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.dr-hist summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.dr-hist-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ===========================================================
   CREDIT DUE-DATE CALENDAR (facility + supplier Credit screens) — ui.js mountDueCalendar
   =========================================================== */
.dcal { padding-bottom: 18px; }
.dcal-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.dcal-head h3 { margin-inline-end: auto; }
.dcal-nav { display: flex; align-items: center; gap: 6px; }
.dcal-arrow {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.dcal-arrow:hover { border-color: var(--line-2); }
.dcal-arrow svg { display: block; }
html[dir="rtl"] .dcal-arrow svg { transform: scaleX(-1); } /* the chevrons point the reading way */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dcal-month { min-width: 140px; text-align: center; font-weight: 600; color: var(--ink); }
.dcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 4px 22px 0; }
.dcal-wd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; text-align: center; padding: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[dir="rtl"] .dcal-wd { text-transform: none; }
.dcal-day {
  position: relative; min-height: 64px; min-width: 0; padding: 6px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; text-align: start; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; transition: border-color .15s, background .15s;
}
.dcal-day:hover { border-color: var(--line-2); }
.dcal-day.other { opacity: .45; }
.dcal-day.today .dcal-n { background: var(--ink-fill); color: #fff; border-radius: 999px; padding: 0 6px; }
html[data-theme="dark"] .dcal-day.today .dcal-n { background: var(--ink); color: var(--paper); }
.dcal-day.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.dcal-day.has.overdue { background: var(--blush); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.dcal-day.has.soon { background: var(--amber-bg); }
.dcal-day:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 1px; }
.dcal-n { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.dcal-dots { display: flex; gap: 3px; }
.dcal-dots i, .dcal-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink-2); }
.dcal-dots i.overdue, .dcal-legend i.overdue { background: var(--brand); }
.dcal-dots i.soon, .dcal-legend i.soon { background: var(--amber); }
.dcal-dots i.due, .dcal-legend i.due { background: var(--ink-2); }
.dcal-dots i.paid, .dcal-legend i.paid { background: var(--green); }
.dcal-amt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 22px 0; font-size: 12px; color: var(--ink-3); }
.dcal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dcal-list { margin: 14px 22px 0; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dcal-list-k { margin-bottom: 2px; }
.dcal-item { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.dcal-who { flex: 1 1 180px; min-width: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.dcal-amt2 { font-weight: 600; }
.dcal-none { margin: 0; }
.dcal-hint { margin: 12px 22px 0; }
@media (max-width: 560px) {
  .dcal-grid { gap: 3px; padding: 4px 12px 0; }
  .dcal-day { min-height: 46px; padding: 4px; align-items: center; }
  .dcal-amt { display: none; } /* phones: the dots say it; the list below has the amounts */
  .dcal-legend, .dcal-hint { padding-inline: 12px; margin-inline: 0; }
  .dcal-hint { padding: 0 12px; }
  .dcal-list { margin-inline: 12px; }
  .dcal-month { min-width: 0; }
  .dcal-add-l { display: none; }
}
/* the supplier's offered credit days in a quote form / draft */
.qf-days { display: flex; align-items: center; gap: 6px; min-width: 0; }
.qf-days .inp { width: 64px; flex: none; }
.qf-days span { font-size: 12px; line-height: 1.15; color: var(--ink-3); white-space: normal; min-width: 0; }
.ql-credit { font-weight: 600; color: var(--ink-2); }