/* =====================================================================
   TELLIANO — Dashboard v3 (dark cinema)  ·  2026-08-19
   ---------------------------------------------------------------------
   Owner-approved mockup: DARK charcoal canvas + olive/gold logo,
   dark cards with warm olive borders, cream text, olive-green KPI
   accents, orange as tertiary CTA. Six KPI cards with sparklines,
   3-column middle rows, campaigns table + quick actions.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ── Tokens re-declared at html[lang] body (specificity 3, beats
      design-system.css's html body specificity-2 block) ─────────────── */
html[lang] body {
  /* Brand */
  --spinach:         #2f5c25;                /* olive-green primary */
  --spinach-2:       #3a7031;
  --spinach-deep:    #1c3617;
  --spinach-soft:    rgba(47, 92, 37, 0.18);
  --olive-line:      rgba(140, 165, 90, 0.22);
  --olive-glow:      rgba(140, 165, 90, 0.36);
  --orange:          #FF6A2C;                /* accent */
  --orange-2:        #e85a1e;
  --orange-soft:     rgba(255, 106, 44, 0.14);

  /* Neutrals — dark cinema */
  --canvas:          #0f0e0a;                /* main bg (deep near-black) */
  --canvas-2:        #131108;                /* toolbar tint */
  --paper:           #1a1710;                /* card bg */
  --paper-2:         #221e14;
  --paper-hover:     #24201a;
  --sidebar-bg:      #0e0d09;
  --topbar-bg:       #0f0e0a;

  /* Text */
  --ink:             #f2ead8;                /* cream primary */
  --ink-strong:      #ffffff;
  --ink-muted:       #b7a988;
  --ink-subtle:      #7f7359;
  --ink-inverse:     #f7efdc;
  --ink-inverse-2:   rgba(247, 239, 220, 0.75);

  /* Semantic */
  --success:         #4fc36c;
  --success-soft:    rgba(79, 195, 108, 0.15);
  --success-on-dark: #7bd591;
  --warning:         #f4c162;
  --warning-soft:    rgba(244, 193, 98, 0.15);
  --danger:          #ef7676;
  --danger-soft:     rgba(239, 118, 118, 0.15);

  /* Hairlines — warm olive-tinted */
  --hairline:        rgba(140, 165, 90, 0.14);
  --hairline-strong: rgba(140, 165, 90, 0.24);
  --hairline-dark:   rgba(255, 255, 255, 0.06);
  --hairline-dark-2: rgba(255, 255, 255, 0.14);

  /* Kill design-system tokens */
  --ds-bg:           var(--canvas);
  --ds-bg-elevated:  var(--paper);
  --ds-bg-muted:     var(--canvas-2);
  --ds-ink:          var(--ink);
  --ds-ink-strong:   var(--ink-strong);
  --ds-ink-muted:    var(--ink-muted);
  --ds-line:         var(--hairline);
  --ds-line-strong:  var(--hairline-strong);
  --dough-soft:      var(--canvas);
  --parchment:       var(--paper);
  --cream:           var(--paper);
  --text:            var(--ink);
  --text-muted:      var(--ink-muted);
  --dark-green:      var(--ink);
  --tangerine:       var(--orange);
  --white:           var(--paper);
  --red-sauce:       var(--danger);

  /* Fonts */
  /* SINGLE font stack across the whole app — Inter Tight for latin +
     IBM Plex Sans Arabic for Arabic script. No Playfair, no Manrope.
     Every alias below points at the same value so any legacy CSS
     that reads --font-serif or --font-numeric ends up on the same
     family too. */
  --font-primary: 'Inter Tight', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-sans:       var(--font-primary);
  --font-serif:      var(--font-primary);
  --font-numeric:    var(--font-primary);
  --font-display:    var(--font-primary);
  --font-display-en: var(--font-primary);
  --font-body:       var(--font-primary);

  --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-md: 13px;
  --text-base: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px;
  --text-3xl: 28px; --text-4xl: 36px; --text-5xl: 44px;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.10em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --r-full: 999px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 3px rgba(255, 106, 44, 0.35);

  --dur-fast: 150ms;
  --dur-med:  280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ───────────────────────────────────────────── */
html[lang] body {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang] body::before { display: none; }
*::selection { background: var(--orange-soft); color: var(--ink-strong); }

/* ── Sidebar — dark charcoal ───────────────────────── */
html[lang] body aside.sidebar,
html[lang] body .sidebar,
html[lang] body nav.sidebar,
html[lang] body #sidebar,
html[lang] body #appSidebar {
  background: var(--sidebar-bg) !important;
  border-inline-end: 1px solid var(--hairline) !important;
  color: var(--ink) !important;
  box-shadow: 2px 0 24px rgba(0, 0, 0, 0.35) !important;
}
html[lang] body aside.sidebar::before,
html[lang] body .sidebar::before { display: none !important; }

html[lang] body aside.sidebar .sidebar-brand,
html[lang] body .sidebar .sidebar-brand {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: var(--s-6) var(--s-5) !important;
  text-align: center !important;
}
html[lang] body .sidebar-brand .brand-logo,
html[lang] body aside.sidebar .sidebar-brand .brand-logo {
  max-height: 44px !important;
  width: auto !important;
  max-width: 84% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  /* Slight brightening for logo on dark bg */
  filter: brightness(1.05) drop-shadow(0 1px 8px rgba(0,0,0,0.35));
}
html[lang="ar"] body .sidebar-brand .brand-ar { display: block !important; }
html[lang="ar"] body .sidebar-brand .brand-en { display: none  !important; }
html[lang="en"] body .sidebar-brand .brand-en { display: block !important; }
html[lang="en"] body .sidebar-brand .brand-ar { display: none  !important; }
html[lang] body .sidebar-wordmark-fallback.hidden { display: none !important; }

html[lang] body .sidebar-subtitle,
html[lang] body aside.sidebar .sidebar-subtitle {
  color: var(--ink-muted) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  font-weight: 400 !important;
  opacity: 0.75;
}

/* Nav items */
html[lang] body aside.sidebar .sidebar-tabs .tab,
html[lang] body aside.sidebar .sidebar-tabs .dropdown-item,
html[lang] body aside.sidebar .sidebar-tabs .tab-trigger,
html[lang] body .sidebar a,
html[lang] body .sidebar [data-tab] {
  color: var(--ink-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-md) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 10px var(--s-4) !important;
  margin: 2px var(--s-3) !important;
  border-radius: var(--r-md) !important;
  border: none !important;
  position: relative;
  transition: all var(--dur-fast) var(--ease-out);
}
html[lang] body aside.sidebar .sidebar-tabs .tab:hover,
html[lang] body .sidebar a:hover,
html[lang] body .sidebar [data-tab]:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink-strong) !important;
}
html[lang] body aside.sidebar .sidebar-tabs .tab.active,
html[lang] body aside.sidebar .sidebar-tabs .dropdown-item.active,
html[lang] body .sidebar a.active,
html[lang] body .sidebar [data-tab].active {
  background: var(--spinach-soft) !important;
  color: var(--ink-strong) !important;
  box-shadow: inset 0 0 0 1px var(--olive-line) !important;
  font-weight: 600 !important;
}
html[lang] body aside.sidebar .sidebar-tabs .tab.active::before,
html[lang] body .sidebar a.active::before,
html[lang] body .sidebar [data-tab].active::before {
  display: none !important;
}
html[lang] body .sidebar-collapse-btn {
  background: var(--orange) !important;
  color: #fff !important;
  border: 2px solid var(--sidebar-bg) !important;
}
html[lang] body .sidebar-collapse-btn:hover { background: var(--orange-2) !important; }

/* ── Header / topbar ─────────────────────────────── */
html[lang] body header,
html[lang] body .topbar, html[lang] body header.topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  padding: var(--s-4) var(--s-6) !important;
}
html[lang] body header h1 {
  color: var(--ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: var(--text-lg) !important;
  letter-spacing: -0.005em !important;
}

/* Header greeting */
html[lang] body .header-greeting {
  display: flex; flex-direction: column; text-align: end;
  gap: 2px; margin-inline-end: var(--s-3);
}
html[lang] body .header-greeting-name {
  font-family: var(--font-sans); font-weight: 700;
  color: var(--ink-strong); font-size: var(--text-md);
}
html[lang] body .header-greeting-role {
  color: var(--ink-muted); font-size: var(--text-xs);
}
@media (max-width: 640px) {
  html[lang] body .header-greeting { display: none; }
}

/* Primary CTA button in topbar */
html[lang] body .btn-primary,
html[lang] body header .btn-primary {
  background: var(--orange) !important;
  color: var(--ink-inverse) !important;
  border: 1px solid var(--orange-2) !important;
  font-weight: 600 !important;
}
html[lang] body .btn-primary * { color: var(--ink-inverse) !important; }
html[lang] body .btn-primary:hover { background: var(--orange-2) !important; }

/* ── Section shell ───────────────────────────────── */
html[lang] body .section {
  background: transparent !important;
  padding: var(--s-6) !important;
}
html[lang] body .section-title,
html[lang] body h2.section-title {
  color: var(--ink-strong) !important;
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  font-size: var(--text-3xl) !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 6px !important;
}
html[lang] body .section-sub {
  color: var(--ink-muted) !important;
  font-size: var(--text-md) !important;
  margin: 0 0 var(--s-6) !important;
}

/* ── Generic card layer becomes dark ─────────────── */
html[lang] body .card,
html[lang] body .panel,
html[lang] body .box {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--olive-line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Kill the branch-ops row (owner previously hid it) */
html[lang] body #dashBranchOps { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD v3 — the mockup layout lives here
   ══════════════════════════════════════════════════════════════════ */

/* Hidden legacy filter carriers — keep them in DOM for logic, off-screen */
.dash-v3-hidden {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Toolbar row */
html[lang] body .dash-v3-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap;
}
html[lang] body .dash-v3-toolbar-left,
html[lang] body .dash-v3-toolbar-right {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
html[lang] body .dash-v3-filter {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--olive-line);
  border-radius: var(--r-md);
  padding: 8px 14px;
  min-width: 180px;
}
html[lang] body .dash-v3-filter-icon { color: var(--ink-muted); font-size: 14px; }
html[lang] body .dash-v3-filter-input {
  background: transparent !important; border: none !important;
  color: var(--ink) !important; font-size: var(--text-md) !important;
  padding: 0 !important; box-shadow: none !important; outline: none !important;
  font-family: var(--font-sans) !important;
  min-width: 130px;
  appearance: none;
}
html[lang] body .dash-v3-filter-input option {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
html[lang] body .dash-v3-period-tag {
  color: var(--ink-muted); font-size: var(--text-sm);
  padding: 6px 12px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.03); border: 1px solid var(--hairline);
}
html[lang] body .dash-v3-report-btn {
  background: var(--orange) !important;
  color: var(--ink-inverse) !important;
  border: 1px solid var(--orange-2) !important;
  padding: 10px 18px !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--text-md) !important;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
html[lang] body .dash-v3-report-btn:hover {
  background: var(--orange-2) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255,106,44,0.35);
}

/* Hero */
html[lang] body .dash-v3-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-6);
  padding: 4px 2px;
}
html[lang] body .dash-v3-hero-title {
  color: var(--ink-strong) !important;
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 6px !important;
}
html[lang] body .dash-v3-hero-sub {
  color: var(--ink-muted) !important;
  font-size: var(--text-md) !important;
  margin: 0 !important;
}

/* KPI grid — 6 cards on one row on wide screens */
html[lang] body .dash-v3-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: var(--s-6);
}
@media (max-width: 1300px) { html[lang] body .dash-v3-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { html[lang] body .dash-v3-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { html[lang] body .dash-v3-kpis { grid-template-columns: 1fr; } }

html[lang] body .dash-v3-kpi {
  background: var(--paper);
  border: 1px solid var(--olive-line);
  border-radius: var(--r-lg);
  padding: 16px 16px 12px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 152px;
  position: relative;
}
html[lang] body .dash-v3-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--olive-glow);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
html[lang] body .dash-v3-kpi-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
html[lang] body .dash-v3-kpi-label {
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  max-width: 140px;
}
html[lang] body .dash-v3-kpi-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--spinach-soft);
  color: #b6d3a1;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
html[lang] body .dash-v3-kpi-value {
  color: var(--ink-strong);
  font-family: var(--font-numeric);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  direction: ltr;
  text-align: start;
  font-feature-settings: "tnum";
}
html[lang="ar"] body .dash-v3-kpi-value { text-align: right; }
html[lang] body .dash-v3-kpi-meta {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  min-height: 30px;
}
html[lang] body .dash-v3-kpi-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-numeric);
  font-weight: 700;
  font-size: var(--text-sm);
}
html[lang] body .dash-v3-kpi-trend.up   { color: var(--success-on-dark); }
html[lang] body .dash-v3-kpi-trend.down { color: var(--danger); }
html[lang] body .dash-v3-kpi-trend.flat { color: var(--ink-muted); }
html[lang] body .dash-v3-kpi-trend-note {
  color: var(--ink-subtle);
  font-size: var(--text-xs);
  font-weight: 400;
}
html[lang] body .dash-v3-kpi-spark {
  margin-top: 4px;
  height: 34px;
  position: relative;
}
html[lang] body .dash-v3-kpi-spark canvas { display: block; width: 100% !important; height: 34px !important; }

/* Rows */
html[lang] body .dash-v3-row-72,
html[lang] body .dash-v3-row-3,
html[lang] body .dash-v3-row-73 {
  display: grid;
  gap: 14px;
  margin-bottom: var(--s-5);
}
html[lang] body .dash-v3-row-72 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
html[lang] body .dash-v3-row-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[lang] body .dash-v3-row-73 { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); }
@media (max-width: 1100px) {
  html[lang] body .dash-v3-row-72 { grid-template-columns: 1fr; }
  html[lang] body .dash-v3-row-3  { grid-template-columns: 1fr; }
  html[lang] body .dash-v3-row-73 { grid-template-columns: 1fr; }
}

/* Shared card — !important to beat design-system.css and refinement.css */
html[lang] body .dash-v3-card,
html[lang] body #dashboard .dash-v3-card,
html[lang] body .dash-v3-card.dash-v3-chart-card,
html[lang] body .dash-v3-card.dash-v3-donut-card,
html[lang] body .dash-v3-card.dash-v3-topcamp-card,
html[lang] body .dash-v3-card.dash-v3-camp-table,
html[lang] body .dash-v3-card.dash-v3-quick-card {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  border: 1px solid var(--olive-line) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
  color: var(--ink) !important;
}
/* KPI card too */
html[lang] body #dashboard .dash-v3-kpi {
  background: var(--paper) !important;
  border-color: var(--olive-line) !important;
}
html[lang] body .dash-v3-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
html[lang] body .dash-v3-card-header,
html[lang] body #dashboard .dash-v3-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--s-3) !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}
html[lang] body .dash-v3-card-action,
html[lang] body #dashboard .dash-v3-card-action {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  color: var(--orange) !important;
}
html[lang] body .dash-v3-card-sub,
html[lang] body #dashboard .dash-v3-card-sub {
  background: rgba(255,255,255,0.03) !important;
  color: var(--ink-muted) !important;
  border: 1px solid var(--hairline) !important;
}
html[lang] body .dash-v3-card-header h3 {
  color: var(--ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: var(--text-lg) !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
}
html[lang] body .dash-v3-card-sub {
  color: var(--ink-muted); font-size: var(--text-xs);
  padding: 4px 10px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.03); border: 1px solid var(--hairline);
}
html[lang] body .dash-v3-card-action {
  color: var(--orange); font-size: var(--text-sm);
  text-decoration: none; font-weight: 500;
}
html[lang] body .dash-v3-card-action:hover { text-decoration: underline; }

/* Legend on chart card */
html[lang] body .dash-v3-legend {
  display: inline-flex; gap: 14px; align-items: center;
  font-size: var(--text-sm); color: var(--ink-muted);
}
html[lang] body .dash-v3-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
}
html[lang] body .dash-v3-legend .dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
html[lang] body .dash-v3-legend .dot-green  { background: #6fbf6a; }
html[lang] body .dash-v3-legend .dot-orange { background: var(--orange); }

/* Chart holders */
html[lang] body .dash-v3-chart-box {
  height: 260px; position: relative;
}
html[lang] body .dash-v3-chart-box canvas { max-width: 100% !important; }
html[lang] body .dash-v3-chart-box-donut { height: 240px; display: flex; align-items: center; justify-content: center; }

/* Top campaigns list */
html[lang] body .dash-v3-topcamp-list { display: flex; flex-direction: column; gap: 12px; }
html[lang] body .dash-v3-topcamp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline);
}
html[lang] body .dash-v3-topcamp-rank {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--spinach-soft); color: var(--ink-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-numeric); font-weight: 700; font-size: var(--text-md);
  flex-shrink: 0;
  border: 1px solid var(--olive-line);
}
html[lang] body .dash-v3-topcamp-body { flex: 1; min-width: 0; }
html[lang] body .dash-v3-topcamp-name {
  color: var(--ink-strong); font-size: var(--text-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[lang] body .dash-v3-topcamp-metric {
  color: var(--ink-muted); font-size: var(--text-xs);
  font-family: var(--font-numeric); font-feature-settings: "tnum";
}
html[lang] body .dash-v3-topcamp-trend {
  font-family: var(--font-numeric); font-weight: 700; font-size: var(--text-sm);
}
html[lang] body .dash-v3-topcamp-trend.up   { color: var(--success-on-dark); }
html[lang] body .dash-v3-topcamp-trend.down { color: var(--danger); }

/* Tasks */
html[lang] body .dash-v3-tasks { display: flex; flex-direction: column; gap: 10px; }
html[lang] body .dash-v3-task {
  display: grid; grid-template-columns: 24px 48px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline);
}
html[lang] body .dash-v3-task.done .dash-v3-task-title { opacity: 0.55; text-decoration: line-through; }
html[lang] body .dash-v3-task-check input {
  appearance: none;
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--olive-line); background: transparent;
  cursor: pointer;
}
html[lang] body .dash-v3-task-check input:checked {
  background: var(--spinach); border-color: var(--spinach-2);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}
html[lang] body .dash-v3-task-date {
  text-align: center; font-family: var(--font-numeric); font-feature-settings: "tnum";
}
html[lang] body .dash-v3-task-date .d { color: var(--ink-strong); font-weight: 700; font-size: var(--text-md); line-height: 1; }
html[lang] body .dash-v3-task-date .m { color: var(--ink-muted); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; }
html[lang] body .dash-v3-task-title {
  color: var(--ink); font-size: var(--text-sm);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
html[lang] body .dash-v3-task-prio {
  font-size: var(--text-2xs); padding: 3px 10px; border-radius: 999px;
  font-weight: 600;
}
html[lang] body .dash-v3-task-prio.prio-urgent, html[lang] body .dash-v3-task-prio.prio-high {
  color: #ff9376; background: rgba(239, 118, 118, 0.16); border: 1px solid rgba(239, 118, 118, 0.32);
}
html[lang] body .dash-v3-task-prio.prio-normal, html[lang] body .dash-v3-task-prio.prio-medium {
  color: #f4c162; background: rgba(244, 193, 98, 0.14); border: 1px solid rgba(244, 193, 98, 0.32);
}
html[lang] body .dash-v3-task-prio.prio-low {
  color: var(--success-on-dark); background: rgba(79, 195, 108, 0.14); border: 1px solid rgba(79, 195, 108, 0.32);
}

/* Appointments */
html[lang] body .dash-v3-appointments { display: flex; flex-direction: column; gap: 10px; }
html[lang] body .dash-v3-appt {
  display: grid; grid-template-columns: 42px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline);
}
html[lang] body .dash-v3-appt-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--spinach) 0%, var(--spinach-2) 100%);
  color: #fff; font-weight: 700; font-family: var(--font-numeric);
  font-size: var(--text-lg);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--olive-line);
}
html[lang] body .dash-v3-appt-body { min-width: 0; }
html[lang] body .dash-v3-appt-name {
  color: var(--ink-strong); font-weight: 600; font-size: var(--text-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[lang] body .dash-v3-appt-sub { color: var(--ink-muted); font-size: var(--text-xs); margin-top: 2px; }
html[lang] body .dash-v3-appt-when { text-align: end; }
html[lang] body .dash-v3-appt-date { color: var(--ink); font-size: var(--text-sm); font-family: var(--font-numeric); font-feature-settings: "tnum"; }
html[lang] body .dash-v3-appt-time { color: var(--ink-muted); font-size: var(--text-2xs); margin-top: 2px; }
html[lang] body .dash-v3-appt-status {
  display: inline-block; margin-top: 4px;
  font-size: var(--text-2xs); padding: 3px 10px; border-radius: 999px;
  font-weight: 600;
  color: var(--success-on-dark); background: rgba(79, 195, 108, 0.14); border: 1px solid rgba(79, 195, 108, 0.32);
}
html[lang] body .dash-v3-appt-status.status-pending {
  color: var(--warning); background: var(--warning-soft); border: 1px solid rgba(244, 193, 98, 0.32);
}
html[lang] body .dash-v3-appt-status.status-cancelled {
  color: var(--danger); background: var(--danger-soft); border: 1px solid rgba(239, 118, 118, 0.32);
}

/* Activity */
html[lang] body .dash-v3-activity { display: flex; flex-direction: column; gap: 12px; }
html[lang] body .dash-v3-activity-item {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 12px; align-items: center;
}
html[lang] body .dash-v3-activity-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--spinach-soft); border: 1px solid var(--olive-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
html[lang] body .dash-v3-activity-body { min-width: 0; }
html[lang] body .dash-v3-activity-text {
  color: var(--ink); font-size: var(--text-sm);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
html[lang] body .dash-v3-activity-time { color: var(--ink-muted); font-size: var(--text-xs); margin-top: 3px; }

/* Campaigns table */
html[lang] body .dash-v3-camp-table-wrap { overflow-x: auto; }
html[lang] body .dash-v3-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
}
html[lang] body .dash-v3-table thead th {
  color: var(--ink-muted); font-weight: 500;
  padding: 8px 10px; text-align: start;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-xs); letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap;
}
html[lang] body .dash-v3-table thead th.num { text-align: end; }
html[lang] body .dash-v3-table tbody td {
  color: var(--ink); padding: 12px 10px;
  border-bottom: 1px solid var(--hairline);
}
html[lang] body .dash-v3-table tbody td.num {
  text-align: end;
  font-family: var(--font-numeric); font-feature-settings: "tnum";
  direction: ltr;
}
html[lang] body .dash-v3-table tbody tr:hover { background: rgba(255,255,255,0.03); }
html[lang] body .dash-v3-table tbody tr:last-child td { border-bottom: none; }
html[lang] body .dash-v3-table .status-pill {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 600;
}
html[lang] body .dash-v3-table .status-pill.active {
  color: var(--success-on-dark); background: rgba(79, 195, 108, 0.14); border: 1px solid rgba(79, 195, 108, 0.32);
}
html[lang] body .dash-v3-table .status-pill.completed {
  color: var(--ink-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--hairline);
}
html[lang] body .dash-v3-table .status-pill.paused {
  color: var(--warning); background: var(--warning-soft); border: 1px solid rgba(244, 193, 98, 0.32);
}

/* Quick actions grid */
html[lang] body .dash-v3-quick-card { display: flex; flex-direction: column; }
html[lang] body .dash-v3-quick-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  flex: 1;
}
html[lang] body .dash-v3-quick-tile {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--olive-line);
  color: var(--ink); cursor: pointer;
  border-radius: var(--r-md);
  padding: 20px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; transition: all var(--dur-fast) var(--ease-out);
  font-family: var(--font-sans);
  min-height: 108px;
}
html[lang] body .dash-v3-quick-tile:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--olive-glow);
  transform: translateY(-2px);
}
html[lang] body .dash-v3-quick-icon { font-size: 26px; }
html[lang] body .dash-v3-quick-label {
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

/* Empty state */
html[lang] body .dash-v3-empty {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--s-6) var(--s-3);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
}

/* Floating refresh */
html[lang] body .dash-v3-refresh {
  position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange); color: #fff;
  border: 2px solid var(--sidebar-bg);
  font-size: 20px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 106, 44, 0.45);
  transition: transform var(--dur-fast) var(--ease-out);
}
html[lang] body .dash-v3-refresh:hover { background: var(--orange-2); transform: rotate(-45deg); }

/* Kill any old dashboard sections we no longer render inside #dashboard */
html[lang] body #dashboard .dash-header,
html[lang] body #dashboard .dash-filters,
html[lang] body #dashboard .dash-kpi-grid:not(#kpiGrid),
html[lang] body #dashboard .dash-branch-ops-row,
html[lang] body #dashboard .dash-pm-widget,
html[lang] body #dashboard .dashboard-block-header {
  display: none !important;
}

/* Keep the shared "card" surface dark when it lands elsewhere on this section */
html[lang] body #dashboard .card {
  background: var(--paper) !important;
  border-color: var(--olive-line) !important;
  color: var(--ink) !important;
}

/* Make Chart.js text legible on the dark cards */
html[lang] body #dashboard canvas { color-scheme: dark; }

/* ══════════════════════════════════════════════════════════════════
   FONT UNIFICATION — force every element onto the single primary
   family. This kills every leftover Playfair Display / Manrope /
   Georgia declaration from design-system.css, refinement.css and
   inline styles across the codebase.
   ══════════════════════════════════════════════════════════════════ */
html[lang] body,
html[lang] body *,
html[lang] body *::before,
html[lang] body *::after {
  font-family: var(--font-primary) !important;
}
/* Numbers keep tabular alignment but the family stays the same */
html[lang] body [class*="value"],
html[lang] body [class*="number"],
html[lang] body .num,
html[lang] body table td.num,
html[lang] body table th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Icons / emoji fonts must NOT be overridden */
html[lang] body i.material-icons,
html[lang] body i.fa,
html[lang] body i.fas,
html[lang] body i.far,
html[lang] body i.fab,
html[lang] body i[class^="icon-"],
html[lang] body i[class*=" icon-"] {
  font-family: revert !important;
}
/* Prevent design-system.css from italicising headings */
html[lang] body h1, html[lang] body h2, html[lang] body h3,
html[lang] body h4, html[lang] body h5, html[lang] body h6 {
  font-style: normal !important;
  font-family: var(--font-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDE
   Activated when applyTheme('light') is called — it toggles the
   is-light-theme class on <html>. This flips every token to a
   cream/olive palette while leaving the dark theme untouched.
   ══════════════════════════════════════════════════════════════════ */
html.is-light-theme[lang] body,
html.is-light-theme body {
  /* Brand — olive stays the same, orange stays the same */
  --spinach:         #154010;
  --spinach-2:       #1a5014;
  --spinach-deep:    #0f2f0c;
  --spinach-soft:    rgba(21, 64, 16, 0.10);
  --olive-line:      rgba(20, 64, 16, 0.14);
  --olive-glow:      rgba(20, 64, 16, 0.32);

  /* Neutrals — cream */
  --canvas:          #f6ede0;
  --canvas-2:        #eee2cf;
  --paper:           #fdf7ea;
  --paper-2:         #ffffff;
  --paper-hover:     #f9f0dd;
  --sidebar-bg:      #f9f2e2;
  --topbar-bg:       #fdf7ea;

  /* Text */
  --ink:             #1a1a15;
  --ink-strong:      #0a0a05;
  --ink-muted:       #6b6558;
  --ink-subtle:      #9a9280;
  --ink-inverse:     #f7efdc;

  /* Hairlines */
  --hairline:        rgba(20, 53, 15, 0.08);
  --hairline-strong: rgba(20, 53, 15, 0.16);
}

/* Body / sections in light mode */
html.is-light-theme body {
  background: #f6ede0 !important;
  color: #1a1a15 !important;
}
html.is-light-theme .sidebar {
  background: #f9f2e2 !important;
  color: #1a1a15 !important;
}
html.is-light-theme .sidebar-tabs .tab,
html.is-light-theme .sidebar a,
html.is-light-theme .sidebar [data-tab] {
  color: #1a1a15 !important;
}
html.is-light-theme .sidebar-tabs .tab.active,
html.is-light-theme .sidebar [data-tab].active {
  background: #154010 !important;
  color: #f7efdc !important;
}
html.is-light-theme .sidebar-user-btn,
html.is-light-theme .sidebar-user-btn * {
  color: #154010 !important;
  fill: #154010 !important;
  stroke: #154010 !important;
}
/* Cards on light theme flip to cream paper */
html.is-light-theme .section [class*="card" i]:not(.dash-v3-card):not(.modal):not(.login-box):not(.tl-legal-card),
html.is-light-theme .section .dash-v3-card,
html.is-light-theme .section .kpi-card,
html.is-light-theme .section .insights-hero-tile {
  background: #fdf7ea !important;
  background-color: #fdf7ea !important;
  border-color: rgba(20, 53, 15, 0.08) !important;
  color: #1a1a15 !important;
}
html.is-light-theme .section [class*="card" i] *:not(input):not(textarea):not(select):not(button):not(a) {
  color: #1a1a15 !important;
}
html.is-light-theme .section [class*="card" i] h1,
html.is-light-theme .section [class*="card" i] h2,
html.is-light-theme .section [class*="card" i] h3,
html.is-light-theme .section [class*="card" i] strong {
  color: #154010 !important;
}
/* KPI values on light theme */
html.is-light-theme .dash-v3-kpi-value,
html.is-light-theme .kpi-value,
html.is-light-theme .insights-hero-value {
  color: #154010 !important;
}
html.is-light-theme .dash-v3-kpi-label,
html.is-light-theme .kpi-label {
  color: #6b6558 !important;
}
/* Inputs on light theme */
html.is-light-theme .section input[type="text"],
html.is-light-theme .section input[type="search"],
html.is-light-theme .section input[type="email"],
html.is-light-theme .section input[type="tel"],
html.is-light-theme .section input[type="number"],
html.is-light-theme .section input[type="date"],
html.is-light-theme .section textarea,
html.is-light-theme .section select {
  background: #ffffff !important;
  color: #1a1a15 !important;
  border-color: rgba(20, 53, 15, 0.16) !important;
}
/* Section titles + text */
html.is-light-theme .section-title,
html.is-light-theme h2.section-title {
  color: #0a0a05 !important;
}
html.is-light-theme .section-sub {
  color: #6b6558 !important;
}
/* Tables on light theme */
html.is-light-theme .section table tbody td {
  color: #1a1a15 !important;
  border-bottom-color: rgba(20,53,15,0.08) !important;
}
html.is-light-theme .section table thead th {
  color: #6b6558 !important;
  border-bottom-color: rgba(20,53,15,0.08) !important;
}
/* Header greeting in light mode */
html.is-light-theme .header-greeting-name { color: #0a0a05 !important; }
html.is-light-theme .header-greeting-role { color: #6b6558 !important; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR STICKY HEADER + FOOTER
   Owner request: the logo block at the top and the user profile
   block at the bottom stay fixed while the nav in the middle
   scrolls. Sidebar becomes a flex-column with only the middle
   region overflowing.
   ══════════════════════════════════════════════════════════════════ */
html[lang] body aside.sidebar,
html[lang] body .sidebar,
html[lang] body #appSidebar {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
html[lang] body aside.sidebar .sidebar-brand,
html[lang] body .sidebar .sidebar-brand {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: inherit !important;
  background-color: var(--sidebar-bg, #0e0d09) !important;
}
html[lang] body aside.sidebar .sidebar-tabs,
html[lang] body .sidebar .sidebar-tabs {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
html[lang] body aside.sidebar .sidebar-tabs::-webkit-scrollbar {
  width: 6px;
}
html[lang] body aside.sidebar .sidebar-tabs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}
html[lang] body aside.sidebar .sidebar-user,
html[lang] body .sidebar .sidebar-user {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
  background: inherit !important;
  background-color: var(--sidebar-bg, #0e0d09) !important;
  border-top: 1px solid var(--hairline) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK SWEEP — kill every remaining cream/white box across every
   tab and give it the same paper+olive-line treatment used on the
   dashboard. Selector list is exhaustive (dozens of legacy card
   classes) with triple-class specificity where needed to beat the
   inline design-system rules.
   ══════════════════════════════════════════════════════════════════ */
html[lang] body .section .inf-search-bar,
html[lang] body .section .inf-advanced,
html[lang] body .section .tg-result,
html[lang] body .section .owner-all-card,
html[lang] body .section .info-banner,
html[lang] body .section .insights-actions,
html[lang] body .section .insights-trend-card,
html[lang] body .section .insights-panel,
html[lang] body .section .insights-hero-panel,
html[lang] body .section .camp-card,
html[lang] body .section .camp-mini,
html[lang] body .section .camp-block,
html[lang] body .section .consultant-qcard,
html[lang] body .section .consultant-pb,
html[lang] body .section .consultant-ans,
html[lang] body .section .consultant-hero,
html[lang] body .section .consultant-input-wrap,
html[lang] body .section .cal-summary-card,
html[lang] body .section .cal-day,
html[lang] body .section .cal-side-card,
html[lang] body .section .cal-upcoming-item,
html[lang] body .section .cal-month-group,
html[lang] body .section .cal-event-date,
html[lang] body .section .wc-match,
html[lang] body .section .wc-card,
html[lang] body .section .apply-share-block,
html[lang] body .section .apply-share-block-min,
html[lang] body .section .pm-project-card,
html[lang] body .section .pm-panel,
html[lang] body .section .pm-hero,
html[lang] body .section .ugc-camp-card,
html[lang] body .section .ugc-panel,
html[lang] body .section .contest-card,
html[lang] body .section .voucher-card,
html[lang] body .section .voucher-panel,
html[lang] body .section .vouchers-add,
html[lang] body .section .vouchers-portals,
html[lang] body .section .voucher-stats,
html[lang] body .section .voucher-list-wrap,
html[lang] body .section .asset-card,
html[lang] body .section .assets-toolbar,
html[lang] body .section .sa-account-card,
html[lang] body .section .sa-panel,
html[lang] body .section .sa-empty,
html[lang] body .section .sa-modal-card,
html[lang] body .section .sm-platform-card,
html[lang] body .section .sm-chart-card,
html[lang] body .section .sm-panel,
html[lang] body .section .sm-content-card,
html[lang] body .section .content-item,
html[lang] body .section .content-drop-zone,
html[lang] body .section .content-file-card,
html[lang] body .section .fbz-panel,
html[lang] body .section .cnp-panel,
html[lang] body .section .an-panel,
html[lang] body .section .sched-header,
html[lang] body .section .sched-tg,
html[lang] body .section .sched-branch-links,
html[lang] body .section .sched-branch-link,
html[lang] body .section .schedule-item,
html[lang] body .section .prospect-card,
html[lang] body .section .empty-state,
html[lang] body .section .empty {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  background-image: none !important;
  border-color: var(--olive-line) !important;
  color: var(--ink) !important;
}
/* Text on these cards — labels + meta + values all cream */
html[lang] body .section .inf-search-bar *,
html[lang] body .section .inf-advanced *,
html[lang] body .section .tg-result *,
html[lang] body .section .owner-all-card *,
html[lang] body .section .apply-share-block *,
html[lang] body .section .apply-share-block-min *,
html[lang] body .section .consultant-qcard *,
html[lang] body .section .pm-project-card *,
html[lang] body .section .ugc-camp-card *,
html[lang] body .section .contest-card *,
html[lang] body .section .voucher-card *,
html[lang] body .section .asset-card *,
html[lang] body .section .sa-account-card *,
html[lang] body .section .sm-platform-card *,
html[lang] body .section .info-banner *,
html[lang] body .section .camp-card *,
html[lang] body .section .cal-day *,
html[lang] body .section .cal-summary-card *,
html[lang] body .section .cal-side-card *,
html[lang] body .section .cal-upcoming-item *,
html[lang] body .section .wc-match *,
html[lang] body .section .sched-header *,
html[lang] body .section .sched-branch-link *,
html[lang] body .section .schedule-item * {
  color: var(--ink) !important;
}
/* Strong titles inside dark cards → white */
html[lang] body .section .inf-search-bar h1, html[lang] body .section .inf-search-bar h2, html[lang] body .section .inf-search-bar h3,
html[lang] body .section .camp-card h3, html[lang] body .section .camp-card h4, html[lang] body .section .camp-card strong,
html[lang] body .section .consultant-qcard strong,
html[lang] body .section .pm-project-card h3, html[lang] body .section .pm-project-card strong,
html[lang] body .section .ugc-camp-card h3, html[lang] body .section .ugc-camp-card strong,
html[lang] body .section .contest-card h3, html[lang] body .section .contest-card strong,
html[lang] body .section .voucher-card strong,
html[lang] body .section .asset-card strong,
html[lang] body .section .sa-account-card h3, html[lang] body .section .sa-account-card strong,
html[lang] body .section .sm-platform-card h3, html[lang] body .section .sm-platform-card strong,
html[lang] body .section .apply-share-block h3, html[lang] body .section .apply-share-block strong,
html[lang] body .section .cal-day.today, html[lang] body .section .cal-summary-card h3,
html[lang] body .section .sched-header h2, html[lang] body .section .sched-header h3 {
  color: var(--ink-strong) !important;
}
/* Small meta / muted text inside cards */
html[lang] body .section .camp-meta,
html[lang] body .section .camp-sub,
html[lang] body .section .card-meta,
html[lang] body .section .muted,
html[lang] body .section .sub,
html[lang] body .section .helper,
html[lang] body .section small {
  color: var(--ink-muted) !important;
}

/* ── Form inputs on dark surfaces ─────────────────────────────── */
html[lang] body .section input[type="text"],
html[lang] body .section input[type="search"],
html[lang] body .section input[type="email"],
html[lang] body .section input[type="url"],
html[lang] body .section input[type="tel"],
html[lang] body .section input[type="number"],
html[lang] body .section input[type="date"],
html[lang] body .section input[type="time"],
html[lang] body .section input[type="password"],
html[lang] body .section textarea,
html[lang] body .section select {
  background: rgba(255,255,255,0.03) !important;
  color: var(--ink) !important;
  border: 1px solid var(--olive-line) !important;
  border-radius: var(--r-md) !important;
}
html[lang] body .section input::placeholder,
html[lang] body .section textarea::placeholder {
  color: var(--ink-subtle) !important;
  opacity: 1;
}
html[lang] body .section input:focus,
html[lang] body .section textarea:focus,
html[lang] body .section select:focus {
  border-color: var(--orange) !important;
  outline: none !important;
  box-shadow: var(--shadow-focus) !important;
}
html[lang] body .section select option {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* Chips / pills / tags */
html[lang] body .section .chip,
html[lang] body .section .pill,
html[lang] body .section .tag,
html[lang] body .section .filter-chip {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
}
html[lang] body .section .chip.active,
html[lang] body .section .pill.active,
html[lang] body .section .filter-chip.active,
html[lang] body .section .chip[aria-pressed="true"] {
  background: var(--spinach-soft) !important;
  color: var(--ink-strong) !important;
  border-color: var(--olive-line) !important;
}

/* Branch badge — keep the accent tinted */
html[lang] body .section .branch-badge {
  background: var(--spinach-soft) !important;
  color: var(--ink-strong) !important;
  border: 1px solid var(--olive-line) !important;
}

/* Ghost / secondary buttons that used to be cream */
html[lang] body .section button:not(.btn-primary):not(.dash-v3-report-btn):not(.dash-v3-refresh):not(.orange):not([class*="orange"]) {
  background-color: rgba(255,255,255,0.04);
  color: var(--ink);
  border-color: var(--olive-line);
}

/* Progress bars / meters keep the orange fill but the track goes dark */
html[lang] body .section .progress,
html[lang] body .section .meter,
html[lang] body .section [class*="progress-track"],
html[lang] body .section [class*="meter-track"] {
  background: rgba(255,255,255,0.05) !important;
}

/* Score-bar (Influencers ranking) — dark track, orange fill kept via ::before */
html[lang] body .section .score-bar {
  background: rgba(255,255,255,0.06) !important;
}

/* Consultant question-card icon squares */
html[lang] body .section .consultant-qcard-icon {
  background: var(--spinach-soft) !important;
  color: var(--ink-strong) !important;
}

/* Calendar — day cells + legend chips */
html[lang] body .section .cal-day {
  background: rgba(255,255,255,0.02) !important;
  border-color: var(--hairline) !important;
}
html[lang] body .section .cal-day.other-month { background: transparent !important; opacity: 0.4; }
html[lang] body .section .cal-day.today {
  background: var(--spinach-soft) !important;
  border-color: var(--olive-line) !important;
}
html[lang] body .section .cal-day-num { color: var(--ink) !important; }
html[lang] body .section .cal-legend { color: var(--ink-muted) !important; }
html[lang] body .section .cal-nav-arrow {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
  border-color: var(--olive-line) !important;
}
html[lang] body .section .cal-summary-card { border-color: var(--olive-line) !important; }
html[lang] body .section .cal-summary-days,
html[lang] body .section .cal-upcoming-item .cal-event-date { color: var(--ink-strong) !important; }

/* Table wrap containers that used to be cream */
html[lang] body .section .table-wrap,
html[lang] body .section .ranking-wrap,
html[lang] body .section .dash-ranking-wrap {
  background: var(--paper) !important;
  border: 1px solid var(--olive-line) !important;
  border-radius: var(--r-md);
}

/* ── Nuclear specificity match — beats the winning inline rule
   `html body .section [class*="card" i]:not(.asset-card)` (0,0,4,3)
   by matching the same attribute pattern with one extra layer. ─── */
html[lang] body .section [class*="card" i]:not(.dash-v3-card):not(.modal):not(.login-box):not(.tl-legal-card) {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  background-image: none !important;
  border-color: var(--olive-line) !important;
  color: var(--ink) !important;
}
/* Same trick for calendar day cells + summary blocks */
html[lang] body .section .cal-day.cal-day,
html[lang] body .section .cal-summary-card.cal-summary-card,
html[lang] body .section .cal-side-card.cal-side-card,
html[lang] body .section .cal-upcoming-item.cal-upcoming-item,
html[lang] body .section .cal-month-group.cal-month-group,
html[lang] body .section .wc-match.wc-match,
html[lang] body .section .cal-type-badge.cal-type-badge,
html[lang] body .section .owner-all-card.owner-all-card,
html[lang] body .section .insights-action-icon.insights-action-icon,
html[lang] body .section .consultant-qcard.consultant-qcard {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  border-color: var(--olive-line) !important;
  color: var(--ink) !important;
}
html[lang] body .section .cal-day.cal-day { background: rgba(255,255,255,0.02) !important; }
html[lang] body .section .cal-day.cal-day.today { background: var(--spinach-soft) !important; }

/* Extra-specific overrides for the last stubborn cream containers.
   Using html[lang] body#body was not enough on some, so we go with
   quintuple-class where the class name allows, and use html[lang] body
   .section > * prefix otherwise. */
html[lang] body #scheduled .owner-all-card.owner-all-card.owner-all-card,
html[lang] body #scheduled .owner-all-card.owner-all-card.owner-all-card * {
  background: transparent !important;
  color: var(--ink) !important;
}
html[lang] body #scheduled .owner-all-card.owner-all-card.owner-all-card {
  background: var(--paper) !important;
  border-color: var(--olive-line) !important;
}
html[lang] body #scheduled input, html[lang] body #scheduled span {
  background-color: transparent !important;
}
html[lang] body #scheduled input[type="text"],
html[lang] body #scheduled input[type="search"] {
  background: rgba(255,255,255,0.03) !important;
}
/* Calendar day + world-cup match — brute force with fivefold class */
html[lang] body #calendar .cal-day.cal-day.cal-day.cal-day {
  background: rgba(255,255,255,0.02) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}
html[lang] body #calendar .cal-day.cal-day.cal-day.cal-day.today {
  background: var(--spinach-soft) !important;
  border-color: var(--olive-line) !important;
}
html[lang] body #calendar .wc-match.wc-match.wc-match {
  background: var(--paper) !important;
  border-color: var(--olive-line) !important;
  color: var(--ink) !important;
}
html[lang] body #calendar .wc-match.wc-match.wc-match * {
  color: var(--ink) !important;
}
/* Inline <code> — dim the highlight to a warm dark tint */
html[lang] body code,
html[lang] body .section code {
  background: rgba(255,255,255,0.05) !important;
  color: var(--ink-strong) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 4px;
  padding: 1px 6px;
}

/* ══════════════════════════════════════════════════════════════════
   TEXT COLOR SWEEP — every text node inside a dark card must be
   readable. Cream for strong titles + numbers, muted-cream for
   body copy, subtle-cream for meta. Any legacy dark-green / near-
   black text is forced light.
   ══════════════════════════════════════════════════════════════════ */
html[lang] body .section [class*="card" i]:not(.dash-v3-card):not(.modal):not(.login-box):not(.tl-legal-card),
html[lang] body .section .dash-v3-card,
html[lang] body .section .kpi-card,
html[lang] body .section .insights-hero-tile,
html[lang] body .section .agency-share-block,
html[lang] body .section .agency-deadline-block,
html[lang] body .section .agency-archive-bar,
html[lang] body .section .apply-share-block,
html[lang] body .section .owner-all-card,
html[lang] body .section .inf-search-bar,
html[lang] body .section .inf-advanced,
html[lang] body .section .tg-result,
html[lang] body .section .info-banner {
  color: var(--ink) !important;
}
/* Direct descendants — force all text nodes to legible cream */
html[lang] body .section [class*="card" i]:not(.dash-v3-card):not(.modal):not(.login-box):not(.tl-legal-card) *:not(input):not(textarea):not(select):not(option):not(button):not(a),
html[lang] body .section .dash-v3-card *:not(input):not(textarea):not(select):not(option):not(button):not(a):not(canvas),
html[lang] body .section .kpi-card *:not(input):not(textarea):not(select):not(option):not(button):not(a),
html[lang] body .section .insights-hero-tile *:not(input):not(textarea):not(select):not(option):not(button):not(a),
html[lang] body .section .agency-share-block *:not(input):not(textarea):not(select):not(option):not(button):not(a),
html[lang] body .section .agency-deadline-block *:not(input):not(textarea):not(select):not(option):not(button):not(a),
html[lang] body .section .owner-all-card *:not(input):not(textarea):not(select):not(option):not(button):not(a),
html[lang] body .section .apply-share-block *:not(input):not(textarea):not(select):not(option):not(button):not(a),
html[lang] body .section .info-banner *:not(input):not(textarea):not(select):not(option):not(button):not(a) {
  color: var(--ink) !important;
}
/* Headings inside dark cards → bright white */
html[lang] body .section [class*="card" i]:not(.dash-v3-card):not(.modal):not(.login-box) h1,
html[lang] body .section [class*="card" i]:not(.dash-v3-card):not(.modal):not(.login-box) h2,
html[lang] body .section [class*="card" i]:not(.dash-v3-card):not(.modal):not(.login-box) h3,
html[lang] body .section [class*="card" i]:not(.dash-v3-card):not(.modal):not(.login-box) h4,
html[lang] body .section [class*="card" i]:not(.dash-v3-card):not(.modal):not(.login-box) h5,
html[lang] body .section .dash-v3-card h1, html[lang] body .section .dash-v3-card h2,
html[lang] body .section .dash-v3-card h3, html[lang] body .section .dash-v3-card h4,
html[lang] body .section .agency-share-block h1, html[lang] body .section .agency-share-block h2,
html[lang] body .section .agency-share-block h3, html[lang] body .section .agency-share-block h4,
html[lang] body .section .agency-deadline-block h1, html[lang] body .section .agency-deadline-block h2,
html[lang] body .section .agency-deadline-block h3, html[lang] body .section .agency-deadline-block h4,
html[lang] body .section .owner-all-card h1, html[lang] body .section .owner-all-card h2,
html[lang] body .section .owner-all-card h3, html[lang] body .section .owner-all-card h4,
html[lang] body .section .apply-share-block h1, html[lang] body .section .apply-share-block h2,
html[lang] body .section .apply-share-block h3, html[lang] body .section .apply-share-block h4,
html[lang] body .section .info-banner h1, html[lang] body .section .info-banner h2,
html[lang] body .section .info-banner h3, html[lang] body .section .info-banner h4 {
  color: var(--ink-strong) !important;
}
/* Bold + strong inside cards → bright white */
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) strong,
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) b,
html[lang] body .section .agency-share-block strong, html[lang] body .section .agency-share-block b,
html[lang] body .section .agency-deadline-block strong, html[lang] body .section .agency-deadline-block b,
html[lang] body .section .owner-all-card strong, html[lang] body .section .owner-all-card b,
html[lang] body .section .apply-share-block strong, html[lang] body .section .apply-share-block b,
html[lang] body .section .info-banner strong, html[lang] body .section .info-banner b {
  color: var(--ink-strong) !important;
}
/* Muted / secondary / helper text inside cards */
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) .muted,
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) .sub,
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) .helper,
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) small,
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) p:not(.dash-v3-kpi-value):not(.stat-value),
html[lang] body .section .agency-share-block small,
html[lang] body .section .agency-deadline-block small,
html[lang] body .section .owner-all-card small,
html[lang] body .section .apply-share-block small,
html[lang] body .section .info-banner p {
  color: var(--ink-muted) !important;
}
/* Any legacy dark-olive / spinach text becomes light on dark surface */
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) [style*="color:#154010"],
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) [style*="color: #154010"],
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) [style*="color:#14350f"],
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) [style*="color:#0a0a05"],
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) [style*="color:#1a1a15"],
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) [style*="color:#2e2517"] {
  color: var(--ink) !important;
}
/* Links inside dark cards stay orange for the accent */
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) a,
html[lang] body .section .dash-v3-card a,
html[lang] body .section .agency-share-block a,
html[lang] body .section .owner-all-card a {
  color: var(--orange) !important;
}
html[lang] body .section [class*="card" i]:not(.modal):not(.login-box) a:hover,
html[lang] body .section .dash-v3-card a:hover {
  color: var(--orange-2) !important;
}
/* Table text inside sections stays cream */
html[lang] body .section table tbody td,
html[lang] body .section table tbody td * {
  color: var(--ink) !important;
}
html[lang] body .section table tbody td strong,
html[lang] body .section table tbody td b {
  color: var(--ink-strong) !important;
}

/* Monthly Content (social-monthly) — agency workflow blocks */
html[lang] body #social-monthly .agency-share-block,
html[lang] body #social-monthly .agency-deadline-block,
html[lang] body #social-monthly .agency-archive-bar {
  background: var(--paper) !important;
  border: 1px solid var(--olive-line) !important;
  color: var(--ink) !important;
}
html[lang] body #social-monthly .agency-share-block *,
html[lang] body #social-monthly .agency-deadline-block *,
html[lang] body #social-monthly .agency-archive-bar * {
  color: var(--ink) !important;
}
html[lang] body #social-monthly .agency-share-block h2,
html[lang] body #social-monthly .agency-share-block h3,
html[lang] body #social-monthly .agency-share-block strong,
html[lang] body #social-monthly .agency-deadline-block h3,
html[lang] body #social-monthly .agency-deadline-block strong {
  color: var(--ink-strong) !important;
}
html[lang] body #social-monthly .agency-sync-pill,
html[lang] body #social-monthly .agency-token-row,
html[lang] body #social-monthly .agency-deadline-row-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink) !important;
}
html[lang] body #social-monthly .agency-status-badge {
  background: var(--spinach-soft) !important;
  color: var(--ink-strong) !important;
  border: 1px solid var(--olive-line) !important;
}
html[lang] body #social-monthly .agency-view-count {
  background: rgba(255,106,44,0.14) !important;
  color: var(--orange) !important;
  border: 1px solid rgba(255,106,44,0.32) !important;
}
/* Overdue chip inside the deadline row keeps its danger tint */
html[lang] body #social-monthly .agency-deadline-row-item [class*="overdue"],
html[lang] body #social-monthly .agency-deadline-row-item [class*="danger"] {
  background: rgba(239,118,118,0.14) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(239,118,118,0.32) !important;
}
/* The active/archive segmented control switches — active tab uses orange
   accent, inactive stays subtle */
html[lang] body #social-monthly [role="tablist"] button,
html[lang] body #social-monthly .seg-btn {
  background: rgba(255,255,255,0.03) !important;
  color: var(--ink-muted) !important;
  border: 1px solid var(--hairline) !important;
}
html[lang] body #social-monthly [role="tablist"] button[aria-selected="true"],
html[lang] body #social-monthly .seg-btn.active {
  background: var(--spinach-soft) !important;
  color: var(--ink-strong) !important;
  border-color: var(--olive-line) !important;
}

/* ── Sidebar profile action buttons — icons in WHITE ─────────
   The three tiles under the user card (settings / notifications / logout)
   were rendering with a dark olive icon on a dark surface, so they read
   as invisible. Owner asked for the icons to be white for legibility. */
html[lang] body .sidebar-user-btn,
html[lang] body .sidebar-user-btn * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: currentColor !important;
}
html[lang] body .sidebar-user-btn svg,
html[lang] body .sidebar-user-btn svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
html[lang] body .sidebar-user-btn:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* ══════════════════════════════════════════════════════════════════
   UNIFIED KPI CARDS — dark theme applied to every KPI-style box
   across the app (customer feedback, complaints, social analytics,
   insights, campaigns, etc.). Any element carrying .kpi-card or
   .insights-hero-tile is treated the same way the dashboard's
   .dash-v3-kpi is styled: warm-paper background, olive-line border,
   cream text, olive-tinted icon square.
   ══════════════════════════════════════════════════════════════════ */

html[lang] body .section .kpi-card.kpi-card.kpi-card,
html[lang] body .section .insights-hero-tile.insights-hero-tile.insights-hero-tile,
html[lang] body .section .sa-kpi-card.sa-kpi-card.sa-kpi-card,
html[lang] body .section .fbz-kpi.fbz-kpi.fbz-kpi,
html[lang] body .section .cnp-kpi.cnp-kpi.cnp-kpi,
html[lang] body .section .an-kpi.an-kpi.an-kpi {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--olive-line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
html[lang] body .kpi-card:hover,
html[lang] body .insights-hero-tile:hover,
html[lang] body .sa-kpi-card:hover,
html[lang] body .fbz-kpi:hover,
html[lang] body .cnp-kpi:hover,
html[lang] body .an-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--olive-glow) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
}

/* Kill the coloured left rail some KPI cards paint over the border */
html[lang] body .kpi-card::before,
html[lang] body .insights-hero-tile::before {
  background: transparent !important;
  display: none !important;
}

/* Icon squares — olive-soft background, cream/olive colour */
html[lang] body .kpi-card .kpi-icon,
html[lang] body .insights-hero-tile .kpi-icon,
html[lang] body .sa-kpi-card .kpi-icon {
  background: var(--spinach-soft) !important;
  color: #b6d3a1 !important;
  border: 1px solid var(--olive-line) !important;
}

/* Numbers */
html[lang] body .kpi-card .kpi-value,
html[lang] body .insights-hero-tile .insights-hero-value,
html[lang] body .sa-kpi-card .sa-kpi-value,
html[lang] body .fbz-kpi .fbz-kpi-value,
html[lang] body .cnp-kpi .cnp-kpi-value,
html[lang] body .an-kpi .an-kpi-value {
  color: var(--ink-strong) !important;
  font-family: var(--font-numeric) !important;
  font-weight: 700 !important;
  font-feature-settings: "tnum" !important;
}

/* Labels — muted cream */
html[lang] body .kpi-card .kpi-label,
html[lang] body .insights-hero-tile .insights-hero-label,
html[lang] body .sa-kpi-card .sa-kpi-label,
html[lang] body .fbz-kpi .fbz-kpi-label,
html[lang] body .cnp-kpi .cnp-kpi-label,
html[lang] body .an-kpi .an-kpi-label {
  color: var(--ink-muted) !important;
}

/* Trend / delta pills inside these cards */
html[lang] body .kpi-card .kpi-trend,
html[lang] body .kpi-card .kpi-delta,
html[lang] body .insights-hero-tile .insights-hero-delta {
  color: var(--success-on-dark) !important;
}
html[lang] body .kpi-card .kpi-trend.down,
html[lang] body .kpi-card .kpi-delta.down,
html[lang] body .insights-hero-tile .insights-hero-delta.down {
  color: var(--danger) !important;
}
html[lang] body .insights-hero-tile .insights-hero-delta .vs {
  color: var(--ink-muted) !important;
}

/* KPI grid gap */
html[lang] body .kpi-grid {
  gap: 14px !important;
}

/* ── Analytics section trend chart card + info banner ── */
html[lang] body .insights-trend-card,
html[lang] body .insights-banner,
html[lang] body .analytics-empty,
html[lang] body .sa-empty,
html[lang] body .fbz-info,
html[lang] body .cnp-info {
  background: var(--paper) !important;
  border: 1px solid var(--olive-line) !important;
  color: var(--ink) !important;
}

/* ── Section titles + subs across the app on dark canvas ── */
html[lang] body .section .section-title,
html[lang] body .section h2.section-title {
  color: var(--ink-strong) !important;
}
html[lang] body .section .section-sub {
  color: var(--ink-muted) !important;
}

/* Card action buttons that were relying on cream backgrounds */
html[lang] body .section .card {
  background: var(--paper) !important;
  border-color: var(--olive-line) !important;
  color: var(--ink) !important;
}
html[lang] body .section .card .card-title,
html[lang] body .section .card h3,
html[lang] body .section .card h4 {
  color: var(--ink-strong) !important;
}
html[lang] body .section .card .card-sub,
html[lang] body .section .card p,
html[lang] body .section .card .muted {
  color: var(--ink-muted) !important;
}

/* Tables inside sections */
html[lang] body .section table thead th {
  color: var(--ink-muted) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
}
html[lang] body .section table tbody td {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--hairline) !important;
}
html[lang] body .section table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}