/* ============================================================
   Telliano — Design System v3 (Premium SaaS)
   ------------------------------------------------------------
   Loaded LAST on every page (after refinement.css).
   Goal: lift the visual quality to feel like a 2026 enterprise
   SaaS product (Linear / Stripe / Vercel / Notion vibe) while
   preserving 100% of existing markup, copy, business logic,
   data, charts, tables and interactions.

   This file ONLY changes presentation. No HTML, no JS, no copy.

   Specificity strategy: uses `html body` + targeted class
   selectors so it wins over the inline page styles. Avoids
   `:where()` (zero specificity) for the rules that must
   override existing high-specificity declarations.

   Safety rails:
   - Never set .section { opacity: 0 } or `animation-fill-mode: both`
   - Never hide any existing element by default
   - Never change layout-affecting positioning that JS depends on
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. Refined token layer — surface, ink, accent, gold
   ──────────────────────────────────────────────────────────── */
html body{
  /* Background system — warm off-white instead of parchment cream */
  --ds-bg:           #F6F4EE;        /* page background (was #EDE3CC) */
  --ds-bg-elevated:  #FFFFFF;        /* card / panel surface */
  --ds-bg-muted:     #EFEBE2;        /* tinted blocks (sidebar group, alt rows) */
  --ds-bg-inverse:   #0F1A0C;        /* dark surfaces (sidebar bottom area, dark cards) */

  /* Ink scale — refined neutrals */
  --ds-ink:          #161A14;        /* primary text — near-black with green tone */
  --ds-ink-strong:   #0B0F0A;        /* maximum-emphasis text (huge KPI numbers) */
  --ds-ink-muted:    #5C6358;        /* secondary text */
  --ds-ink-faint:    #98A092;        /* tertiary text, labels, hints */
  --ds-ink-inverse:  #F2EEE3;        /* text on dark surfaces */

  /* Brand greens — refined Telliano spec */
  --ds-green-50:     #EAF1E6;
  --ds-green-100:    #D2E1C9;
  --ds-green-300:    #6E9A5A;
  --ds-green-500:    #1F5A1A;
  --ds-green-700:    #143C12;
  --ds-green-900:    #0B240A;

  /* Accent — keep brand tangerine for primary CTA only */
  --ds-accent:       #E84A00;        /* slightly toned-down tangerine */
  --ds-accent-soft:  rgba(232,74,0,0.10);

  /* Gold — for hairlines, dividers, decorative chips */
  --ds-gold:         #B89856;
  --ds-gold-soft:    rgba(184,152,86,0.18);
  --ds-gold-line:    rgba(184,152,86,0.32);

  /* Hairlines */
  --ds-line:         rgba(20, 30, 16, 0.08);
  --ds-line-strong:  rgba(20, 30, 16, 0.14);
  --ds-line-light:   rgba(20, 30, 16, 0.05);

  /* Shadow system — soft layered */
  --ds-shadow-xs:    0 1px 2px rgba(10,20,8,0.04);
  --ds-shadow-sm:    0 1px 3px rgba(10,20,8,0.06), 0 1px 2px rgba(10,20,8,0.04);
  --ds-shadow-md:    0 4px 12px rgba(10,20,8,0.06), 0 2px 4px rgba(10,20,8,0.04);
  --ds-shadow-lg:    0 16px 40px rgba(10,20,8,0.10), 0 4px 12px rgba(10,20,8,0.05);
  --ds-shadow-xl:    0 24px 64px rgba(10,20,8,0.14), 0 8px 16px rgba(10,20,8,0.06);

  /* Radius scale */
  --ds-r-xs: 6px;
  --ds-r-sm: 10px;
  --ds-r-md: 14px;
  --ds-r-lg: 18px;
  --ds-r-xl: 24px;

  /* Status colors — refined */
  --ds-success: #1F8043;
  --ds-success-soft: rgba(31,128,67,0.10);
  --ds-warning: #B86E14;
  --ds-warning-soft: rgba(184,110,20,0.12);
  --ds-danger:  #B83232;
  --ds-danger-soft: rgba(184,50,50,0.10);
  --ds-info:    #2563B8;
  --ds-info-soft: rgba(37,99,184,0.10);

  /* Reroute pre-existing tokens to the new scale —
     anything that consumed `--bg` / `--card` / `--ink` / `--cream`
     etc. now picks up the refined palette automatically. */
  --bg:           var(--ds-bg);
  --bg-soft:      var(--ds-bg-muted);
  --bg-deep:      var(--ds-bg-inverse);
  --bg-surface:   var(--ds-bg-elevated);
  --bg-elevated:  var(--ds-bg-elevated);
  --paper:        var(--ds-bg-elevated);
  --card:         var(--ds-bg-elevated);
  --parchment:    var(--ds-bg);
  --parchment-soft: var(--ds-bg-muted);
  --parchment-deep: var(--ds-line);
  --cream:        var(--ds-ink-inverse);
  --cream-muted:  rgba(242,238,227,0.62);
  --ink:          var(--ds-ink);
  --ink-muted:    var(--ds-ink-muted);
  --text:         var(--ds-ink);
  --text-muted:   var(--ds-ink-muted);
  --text-faint:   var(--ds-ink-faint);
  --border:       var(--ds-line);
  --border-soft:  var(--ds-line-light);
  --moss:         var(--ds-green-700);
  --moss-deep:    var(--ds-green-900);
  --moss-soft:    var(--ds-bg-muted);
  --moss-line:    var(--ds-line);
  --olive:        var(--ds-green-500);
  --olive-mid:    var(--ds-green-500);
  --spinach:      var(--ds-green-700);
  --dark-green:   var(--ds-green-900);
  --beige:        var(--ds-bg-muted);
  --pesto:        var(--ds-green-100);
  --dough-soft:   var(--ds-bg);
  --brand:        var(--ds-green-700);
  --gold:         var(--ds-gold);
  --gold-soft:    var(--ds-gold-soft);
  --gold-line:    var(--ds-gold-line);
  --bronze:       var(--ds-gold);
  --tangerine:    var(--ds-accent);
  --burgundy:     var(--ds-danger);
  --red-sauce:    var(--ds-danger);
  --shadow-xs:    var(--ds-shadow-xs);
  --shadow:       var(--ds-shadow-sm);
  --shadow-md:    var(--ds-shadow-md);
  --shadow-lg:    var(--ds-shadow-lg);
}

/* ────────────────────────────────────────────────────────────
   2. Page foundation — generous, calm, neutral
   ──────────────────────────────────────────────────────────── */
html body{
  background: var(--ds-bg) !important;
  color: var(--ds-ink) !important;
  font-feature-settings: "ss01", "cv11", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle page-level ambience — extremely soft radial wash so the
   surface doesn't feel like flat paint. Stays under all content. */
html body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(184,152,86,0.10), transparent 60%),
    radial-gradient(1000px 500px at 100% 8%,  rgba(31,90,26,0.05),  transparent 65%);
}

/* All real content sits above the wash */
html body > *{ position: relative; z-index: 1; }

/* ────────────────────────────────────────────────────────────
   3. Typography — strong hierarchy, editorial confidence
   ──────────────────────────────────────────────────────────── */
html body :is(h1,h2,h3,h4,h5,h6){
  color: var(--ds-ink-strong);
  letter-spacing: -0.012em;
  font-weight: 700;
}
html body h1{ font-weight: 800; letter-spacing: -0.022em; }
html body h2{ font-weight: 700; letter-spacing: -0.016em; }

/* Section headings */
html body .section-head,
html body .dash-page-head,
html body .calendar-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ds-line);
}
html body .section-head h2,
html body .dash-page-head h2{
  font-family: var(--font-body);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ds-ink-strong);
  margin: 0;
}

/* Eyebrow / overline label rhythm — used on small caps headers */
html body .overline,
html body .section-head .muted,
html body .dash-page-sub{
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-ink-faint);
}

/* Body baseline */
html body p,
html body li{ color: var(--ds-ink); }

/* ────────────────────────────────────────────────────────────
   4. Sidebar — refined panel with section-group rhythm
   ──────────────────────────────────────────────────────────── */
html body .sidebar{
  background: linear-gradient(180deg, #FBFAF6 0%, #F4F1E9 100%) !important;
  border-inline-end: 1px solid var(--ds-line) !important;
  box-shadow: 1px 0 0 var(--ds-line-light), var(--ds-shadow-xs);
}

html body .sidebar-brand,
html body .sidebar-head{
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--ds-line-light);
}

html body .sidebar-tabs{
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Group section labels (the parent rows like 'المشاهير▾') */
html body .sidebar-tabs .tab{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--ds-r-sm);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ds-ink-muted);
  background: transparent;
  border: 0;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 120ms ease;
  position: relative;
  cursor: pointer;
}
html body .sidebar-tabs .tab:hover{
  background: rgba(20,30,16,0.04);
  color: var(--ds-ink);
}
html body .sidebar-tabs .tab.active{
  background: var(--ds-green-700);
  color: #F4F0E2;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(20,30,16,0.08), inset 0 1px 0 rgba(255,255,255,0.08);
}
html body .sidebar-tabs .tab.active::before{
  display: none; /* no left bar — full pill instead */
}

/* Child / nested tabs feel like indented bullets */
html body .sidebar-tabs .tab.tab-child,
html body .sidebar-tabs .tab[data-tab-child],
html body .sidebar-tabs .tab.is-child{
  padding-inline-start: 28px;
  font-size: 0.88rem;
  color: var(--ds-ink-muted);
}

/* ────────────────────────────────────────────────────────────
   5. Topbar / header — quiet, with refined search
   ──────────────────────────────────────────────────────────── */
html body .topbar,
html body .app-topbar,
html body .crm-topbar{
  background: rgba(246,244,238,0.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ds-line) !important;
  box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────
   6. Cards — the workhorse surface
   Specificity escalation: many existing rules use
   `html body #dashboard .X` = (1,1,2). We mirror that pattern
   so we beat them on source order (we load LATER).
   ──────────────────────────────────────────────────────────── */
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #google, #social, #social-analytics,
              #social-monthly, #campaigns, #assets, #consultant,
              #insights, #calendar, #report, #logs, #admin) :is(.card, .dash-card, .dash-chart-card, .dash-rank-card, .dash-compare-card, .dash-branch-card, .dash-content-card, .top-content),
html body .card,
html body .dash-card,
html body .dash-chart-card,
html body .dash-rank-card,
html body .dash-compare-card,
html body .dash-branch-card,
html body .dash-content-card,
html body .top-content,
html body .feedback-card,
html body .form-section,
html body .wc-section{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  padding: 22px !important;
  position: relative;
}

/* Filter / toolbar cards keep their flex behavior, light padding */
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #google, #social, #campaigns, #insights, #calendar,
    #report, #logs, #admin) .dash-filters,
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #google, #social, #campaigns, #insights, #calendar,
    #report, #logs, #admin) .filter-row,
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #google, #social, #campaigns, #insights, #calendar,
    #report, #logs, #admin) .audit-filters{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  padding: 12px 16px !important;
}

/* Slightly deeper elevation for hero/chart cards */
html body :is(#dashboard, #customers, #influencers, #prospects, #scheduled,
              #campaigns, #insights, #report) :is(.dash-chart-card, .dash-compare-card),
html body .dash-chart-card,
html body .dash-compare-card{
  box-shadow: var(--ds-shadow-md) !important;
}

/* Card heading rhythm inside a card */
html body .card > h3:first-child,
html body .card > h2:first-child,
html body .dash-card > h3:first-child,
html body .dash-chart-card > h3:first-child,
html body .dash-rank-card > h3:first-child{
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ds-ink-strong);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ────────────────────────────────────────────────────────────
   7. KPI cards — editorial number display
   Many existing rules are scoped `#dashboard .dash-kpi` (specificity
   1,1,1). We use `:is(#dashboard, ...)` to match that specificity
   and win at equal !important weight.
   ──────────────────────────────────────────────────────────── */
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #google, #social, #social-analytics, #social-monthly,
    #campaigns, #assets, #consultant, #insights, #calendar,
    #report, #logs, #admin) .dash-kpi-grid,
html body .kpi-grid,
html body .dash-kpi-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

html body :is(#dashboard, #customers, #influencers, #prospects, #scheduled,
              #campaigns, #assets, #insights, #report) .dash-kpi,
html body .kpi-card,
html body .dash-kpi{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding-block: 22px 20px !important;
  padding-inline: 22px 22px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 130px !important;
  position: relative !important;
  overflow: hidden !important;
  border-inline-start: 1px solid var(--ds-line) !important;
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms cubic-bezier(.2,.8,.2,1),
    border-color 220ms ease !important;
}

/* Kill the old left tangerine bar inside #dashboard .dash-kpi::before */
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #campaigns, #assets, #insights, #report) .dash-kpi::before{
  display: none !important;
}

/* Replace with a refined accent strip at the top */
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #campaigns, #assets, #insights, #report) .dash-kpi::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--ds-gold) 0%, var(--ds-green-500) 60%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #campaigns, #assets, #insights, #report) .dash-kpi:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--ds-shadow-md) !important;
  border-color: var(--ds-line-strong) !important;
  cursor: pointer;
}
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #campaigns, #assets, #insights, #report) .dash-kpi:hover::after{
  opacity: 0.9 !important;
}

/* Specific accent tone per kpi color modifier */
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #campaigns, #assets, #insights, #report) .dash-kpi.k-green::after{
  background: linear-gradient(90deg, var(--ds-green-500) 0%, var(--ds-green-300) 70%, transparent 100%) !important;
  opacity: 0.7 !important;
}
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #campaigns, #assets, #insights, #report) .dash-kpi.k-amber::after,
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #campaigns, #assets, #insights, #report) .dash-kpi.k-red::after{
  background: linear-gradient(90deg, var(--ds-accent) 0%, var(--ds-warning) 70%, transparent 100%) !important;
  opacity: 0.7 !important;
}

/* KPI icon — refined plate */
:is(#dashboard, #customers, #influencers, #prospects, #scheduled,
    #campaigns, #assets, #insights, #report) .dash-kpi-icon{
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--ds-green-50) !important;
  color: var(--ds-green-700) !important;
  border: 1px solid var(--ds-line) !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 16px !important;
  inset-inline-end: 16px !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

/* KPI label — small caps, faint, letter-spaced */
html[lang] body :is(#dashboard, #customers, #influencers, #prospects, #scheduled,
                    #campaigns, #assets, #insights, #report) .dash-kpi-label,
html body .kpi-card .kpi-label,
html body .kpi-card .kpi-title{
  font-family: var(--font-body, 'Manrope', 'IBM Plex Sans Arabic', sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ds-ink-faint) !important;
  margin: 6px 0 4px !important;
  padding-inline-end: 50px !important;
  padding-block: 0 !important;
  padding-inline-start: 0 !important;
  line-height: 1.3 !important;
}

/* KPI number — bold modern sans, tight letter-spacing, tabular nums.
   Uses Manrope 800 (already loaded) for a clean Linear/Stripe feel.
   Slight negative letter-spacing tightens the digits together so
   large numbers read as one visual block. */
html[lang] body :is(#dashboard, #customers, #influencers, #prospects, #scheduled,
                    #campaigns, #assets, #insights, #report) .dash-kpi-value,
html body .kpi-card .kpi-value,
html body .kpi-card .kpi-number,
html body .kpi-card .value{
  font-family: 'Manrope', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.036em !important;
  color: var(--ds-ink-strong) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum", "ss01" !important;
  margin: 4px 0 6px !important;
  padding: 0 !important;
  font-style: normal !important;
}

/* KPI delta / trend badge */
html[lang] body :is(#dashboard, #customers, #influencers, #prospects, #scheduled,
                    #campaigns, #assets, #insights, #report) :is(.dash-kpi-trend, .dash-kpi-delta),
html body .kpi-card .kpi-delta{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  width: max-content !important;
  margin-top: auto !important;
  background: var(--ds-bg-muted) !important;
  color: var(--ds-ink-muted) !important;
}
html[lang] body :is(#dashboard, #customers, #influencers, #prospects, #scheduled,
                    #campaigns, #assets, #insights, #report) :is(.dash-kpi-trend.flat, .dash-kpi-delta.flat){
  background: var(--ds-bg-muted) !important;
  color: var(--ds-ink-muted) !important;
}
html[lang] body :is(#dashboard, #customers, #influencers, #prospects, #scheduled,
                    #campaigns, #assets, #insights, #report) :is(.dash-kpi-trend.up, .dash-kpi-delta.up){
  background: var(--ds-success-soft) !important;
  color: var(--ds-success) !important;
}
html[lang] body :is(#dashboard, #customers, #influencers, #prospects, #scheduled,
                    #campaigns, #assets, #insights, #report) :is(.dash-kpi-trend.down, .dash-kpi-delta.down){
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
}

/* ────────────────────────────────────────────────────────────
   8. Tables — generous rhythm + sticky head
   ──────────────────────────────────────────────────────────── */
html body table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
html body :is(.dash-ranking, .dash-camp-table, .audit-table, .data-table) thead th,
html body table thead th{
  background: var(--ds-bg-muted) !important;
  color: var(--ds-ink-faint) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--ds-line) !important;
  text-align: start;
}
html body :is(.dash-ranking, .dash-camp-table, .audit-table, .data-table) tbody td,
html body table tbody td{
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--ds-line-light) !important;
  font-size: 0.92rem;
  color: var(--ds-ink);
  vertical-align: middle;
}
html body :is(.dash-ranking, .dash-camp-table, .audit-table, .data-table) tbody tr:last-child td{
  border-bottom: none !important;
}

/* Hover row */
html body :is(.dash-ranking, .dash-camp-table, .audit-table, .data-table) tbody tr{
  transition: background-color 120ms ease;
}
html body :is(.dash-ranking, .dash-camp-table, .audit-table, .data-table) tbody tr:hover td{
  background: rgba(31,90,26,0.04) !important;
}

/* Numeric columns */
html body table .num,
html body table td.num,
html body table th.num,
html body table .tabular{
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* ────────────────────────────────────────────────────────────
   9. Buttons — refined, decisive
   ──────────────────────────────────────────────────────────── */
html body .btn,
html body button.btn,
html body .btn-primary,
html body .btn-secondary,
html body .btn-danger,
html body button[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--ds-r-sm);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 120ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 220ms ease;
}

html body .btn-primary,
html body button.btn-primary,
html body button[type="submit"].btn-primary{
  background: var(--ds-green-700) !important;
  color: #F4F0E2 !important;
  border-color: var(--ds-green-700) !important;
  box-shadow: 0 1px 2px rgba(20,30,16,0.10), inset 0 1px 0 rgba(255,255,255,0.08);
}
html body .btn-primary:hover:not(:disabled){
  background: var(--ds-green-500) !important;
  border-color: var(--ds-green-500) !important;
  box-shadow: 0 6px 18px rgba(20,30,16,0.16), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transform: translateY(-1px);
}

html body .btn-secondary{
  background: var(--ds-bg-elevated) !important;
  color: var(--ds-ink-strong) !important;
  border-color: var(--ds-line-strong) !important;
  box-shadow: var(--ds-shadow-xs);
}
html body .btn-secondary:hover:not(:disabled){
  background: var(--ds-bg-muted) !important;
  border-color: var(--ds-ink-muted) !important;
  transform: translateY(-1px);
}

html body .btn-danger{
  background: var(--ds-danger) !important;
  color: #fff !important;
  border-color: var(--ds-danger) !important;
}

/* Accent CTA — tangerine — reserved for "primary action of the page" */
html body .btn-accent,
html body .btn-cta{
  background: var(--ds-accent) !important;
  color: #fff !important;
  border-color: var(--ds-accent) !important;
  box-shadow: 0 6px 18px rgba(232,74,0,0.28);
}

/* ────────────────────────────────────────────────────────────
   10. Inputs — calm, generous, focus-glow
   Mirrors `html:not([data-theme="dark"]) body input:not(...)` weight
   from the page styles so we win on source order.
   ──────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html:not([data-theme="dark"]) body textarea,
html:not([data-theme="dark"]) body select,
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="number"],
html body input[type="search"],
html body input[type="date"],
html body input[type="time"],
html body input[type="password"],
html body select,
html body textarea{
  background: var(--ds-bg-elevated) !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line-strong) !important;
  border-radius: var(--ds-r-sm) !important;
  padding: 10px 12px !important;
  font-family: inherit !important;
  font-size: 0.92rem !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 0 rgba(10,20,8,0.02) inset !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
}
html:not([data-theme="dark"]) body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
html:not([data-theme="dark"]) body textarea:focus,
html:not([data-theme="dark"]) body select:focus,
html body input:focus,
html body select:focus,
html body textarea:focus{
  outline: none !important;
  border-color: var(--ds-green-500) !important;
  box-shadow: 0 0 0 4px rgba(31,90,26,0.14), 0 1px 0 rgba(10,20,8,0.02) inset !important;
}

/* ────────────────────────────────────────────────────────────
   11. Chips, pills, badges
   ──────────────────────────────────────────────────────────── */
html body .chip,
html body .link-chip,
html body .role-pill,
html body .sev-pill,
html body .platform-badge,
html body .inf-chip,
html body .auto-save-badge,
html body .wc-day-today-pill,
html body .tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--ds-bg-muted);
  color: var(--ds-ink-muted);
  border: 1px solid var(--ds-line);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

/* Semantic chip variants */
html body .chip.success, html body .pill-success, html body .sev-pill.low{
  background: var(--ds-success-soft) !important;
  color: var(--ds-success) !important;
  border-color: transparent !important;
}
html body .chip.warning, html body .pill-warning, html body .sev-pill.med{
  background: var(--ds-warning-soft) !important;
  color: var(--ds-warning) !important;
  border-color: transparent !important;
}
html body .chip.danger, html body .pill-danger, html body .sev-pill.high, html body .sev-pill.crit{
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
  border-color: transparent !important;
}
html body .chip.info, html body .pill-info{
  background: var(--ds-info-soft) !important;
  color: var(--ds-info) !important;
  border-color: transparent !important;
}
html body .chip.accent{
  background: var(--ds-accent-soft) !important;
  color: var(--ds-accent) !important;
  border-color: transparent !important;
}

/* ────────────────────────────────────────────────────────────
   12. Modals
   ──────────────────────────────────────────────────────────── */
html body .modal-overlay{
  background: rgba(11,15,10,0.42) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html body .modal{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-shadow-xl) !important;
  padding: 28px !important;
}
html body .modal h2{
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0 0 16px;
}

/* ────────────────────────────────────────────────────────────
   13. Charts — frame canvases with consistent rhythm
   ──────────────────────────────────────────────────────────── */
html body .dash-chart-card canvas,
html body .chart-wrap canvas{
  display: block;
  width: 100% !important;
  max-height: 320px;
}
html body .dash-chart-card .chart-head,
html body .chart-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* ────────────────────────────────────────────────────────────
   14. Calendar — refined grid
   ──────────────────────────────────────────────────────────── */
html body .cal-head{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 16px 20px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  margin-bottom: 18px;
}
html body .wc-day{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line-light) !important;
  border-radius: var(--ds-r-sm) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
html body .wc-day:hover{
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-md) !important;
  border-color: var(--ds-line-strong) !important;
}
html body .wc-day.is-today{
  border-color: var(--ds-green-500) !important;
  box-shadow: 0 0 0 1px var(--ds-green-500), var(--ds-shadow-sm) !important;
}

/* ────────────────────────────────────────────────────────────
   15. Toolbars, filter rows
   ──────────────────────────────────────────────────────────── */
html body .toolbar,
html body .filter-row,
html body .dash-filters,
html body .audit-filters{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 12px 16px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

/* ────────────────────────────────────────────────────────────
   16. Empty + info states
   ──────────────────────────────────────────────────────────── */
html body .empty,
html body .wc-empty,
html body .empty-state{
  background: var(--ds-bg-elevated) !important;
  border: 1px dashed var(--ds-line-strong) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 36px 20px !important;
  text-align: center;
  color: var(--ds-ink-muted) !important;
}

/* ────────────────────────────────────────────────────────────
   17. Brand wordmark — refined wordmark on landing/top
   ──────────────────────────────────────────────────────────── */
html body .brand,
html body .topbar .brand{
  font-family: 'Oswald', var(--font-display, sans-serif);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ds-ink-strong);
}
html body .brand .o{ color: var(--ds-accent); }

/* ────────────────────────────────────────────────────────────
   18. Public surface (apply, feedback, landing, agency, policies)
   ──────────────────────────────────────────────────────────── */
html body main:not(.crm-main),
html body .public-main{
  background: var(--ds-bg);
  padding-block: 28px;
}
html body main h1{
  font-size: clamp(1.85rem, 2.2vw, 2.4rem);
  letter-spacing: -0.022em;
  color: var(--ds-ink-strong);
  margin-bottom: 12px;
}
html body main .lede,
html body main .lead{
  font-size: 1.05rem;
  color: var(--ds-ink-muted);
  max-width: 70ch;
}

/* Policies-style tables (privacy/terms/security) */
html body main table{
  background: var(--ds-bg-elevated);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  overflow: hidden;
  box-shadow: var(--ds-shadow-xs);
}

/* Footer */
html body footer{
  border-top: 1px solid var(--ds-line);
  padding-block: 24px;
  color: var(--ds-ink-muted);
  font-size: 0.88rem;
}

/* ────────────────────────────────────────────────────────────
   19. Toasts & banners
   ──────────────────────────────────────────────────────────── */
html body .toast{
  background: var(--ds-ink-strong) !important;
  color: #F4F0E2 !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: var(--ds-shadow-xl) !important;
  padding: 12px 16px !important;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.06);
}
html body .toast.success{
  background: var(--ds-success) !important;
}
html body .toast.error,
html body .toast.danger{
  background: var(--ds-danger) !important;
}

/* ────────────────────────────────────────────────────────────
   20. Safety override — never let a section hide itself
   This is the bug that ate the dashboard last time.
   ──────────────────────────────────────────────────────────── */
html body .section.active{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ────────────────────────────────────────────────────────────
   21. Subtle dividers between in-card sub-blocks
   ──────────────────────────────────────────────────────────── */
html body .card hr,
html body .dash-card hr,
html body .panel hr{
  border: 0;
  border-top: 1px solid var(--ds-line-light);
  margin: 16px 0;
}

/* ────────────────────────────────────────────────────────────
   22. Mobile rhythm — looser cards, smaller heads
   ──────────────────────────────────────────────────────────── */
@media (max-width: 720px){
  html body .card,
  html body .dash-card,
  html body .dash-chart-card,
  html body .dash-rank-card,
  html body .kpi-card,
  html body .dash-kpi,
  html body .modal{
    padding: 16px !important;
    border-radius: var(--ds-r-sm) !important;
  }
  html body .kpi-card .kpi-value,
  html body .dash-kpi .kpi-value,
  html body .dash-kpi .kpi-number{
    font-size: 1.95rem !important;
  }
  html body .section-head h2,
  html body .dash-page-head h2{
    font-size: 1.2rem;
  }
}

/* ============================================================
   ✦ EXPANSION LAYER ✦
   Section-by-section refinements layered on top of the base
   system. Targets actual class names used in influencers.html
   for every major surface (section heads, sidebar, charts,
   calendar, customers board, scheduled, influencers table,
   campaigns, monthly content, social analytics, modals).

   Source order: appended last → wins on equal-specificity ties.
   Specificity strategy: mirror the page's existing weight
   patterns (e.g. `html body #X .Y` = 1,1,2) and chain refining
   selectors where needed.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   23. SECTION HEADS — strong typographic hierarchy
   ──────────────────────────────────────────────────────────── */
html body .section .section-title,
html body .section h2.section-title{
  font-family: var(--font-body, 'Manrope', 'IBM Plex Sans Arabic', sans-serif) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(1.35rem, 1.6vw, 1.7rem) !important;
  letter-spacing: -0.018em !important;
  color: var(--ds-ink-strong) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  position: relative;
}
html body .section .section-title::after{
  content: "" !important;
  display: block !important;
  width: 32px !important;
  height: 2px !important;
  background: var(--ds-gold) !important;
  border-radius: 99px !important;
  margin-top: 10px !important;
  opacity: 0.7 !important;
}
html body .section .section-sub{
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
  color: var(--ds-ink-muted) !important;
  margin: 14px 0 28px !important;
  max-width: 64ch !important;
}
html body .section .section-sub::before{ display: none !important; }

/* Dashboard top header (date + refresh row) */
html body #dashboard .dash-header{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 14px 18px !important;
  margin-bottom: 22px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
html body #dashboard .dash-period-display{
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.012em !important;
  color: var(--ds-ink-strong) !important;
  font-style: normal !important;
}
html body #dashboard .dash-section-title{
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ds-ink-faint) !important;
  margin: 28px 0 12px !important;
  position: relative;
  padding-inline-start: 24px !important;
}
html body #dashboard .dash-section-title::before{
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 50% !important;
  width: 16px !important;
  height: 1px !important;
  background: var(--ds-gold) !important;
  opacity: 0.6 !important;
}

/* ────────────────────────────────────────────────────────────
   24. SIDEBAR — dark olive panel per brand identity
   Spinach #154010 → dark-green #14260F gradient with cream text,
   refined active tab uses tangerine pill, hover sits on a soft
   warm tint, dividers in olive-lifted hairlines.
   ──────────────────────────────────────────────────────────── */
html body .sidebar{
  background: linear-gradient(180deg, #143C12 0%, #0F2A0E 100%) !important;
  border-inline-end: 1px solid rgba(201,168,107,0.18) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,0.04) !important;
  padding: 0 !important;
  color: #E8DCC5 !important;
}
html body .sidebar-tabs{
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body .sidebar-tabs .tab{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: rgba(232,220,197,0.78) !important;
  background: transparent !important;
  border: 0 !important;
  font-style: normal !important;
  text-align: start !important;
  transition: background-color 140ms ease, color 140ms ease !important;
  position: relative;
}
html body .sidebar-tabs .tab:hover{
  background: rgba(255,255,255,0.05) !important;
  color: #FBF7F3 !important;
}
html body .sidebar-tabs .tab.active{
  background: linear-gradient(180deg, rgba(255,85,0,0.18) 0%, rgba(255,85,0,0.10) 100%) !important;
  color: #FFD9B8 !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,85,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
html body .sidebar-tabs .tab.active::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset-inline-start: 4px !important;
  top: 22% !important;
  bottom: 22% !important;
  width: 3px !important;
  border-radius: 2px !important;
  background: var(--ds-accent, #FF5500) !important;
  box-shadow: 0 0 8px rgba(255,85,0,0.5);
}
html body .sidebar-tabs .tab.tab-child,
html body .sidebar-tabs .tab.is-child{
  padding-inline-start: 32px !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
  color: rgba(232,220,197,0.65) !important;
}
html body .sidebar-tabs .tab.tab-child:hover,
html body .sidebar-tabs .tab.is-child:hover{
  color: #FBF7F3 !important;
}

/* Sidebar brand area */
html body .sidebar-brand,
html body .sidebar-head{
  padding: 22px 22px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
html body .sidebar .brand,
html body .sidebar-brand .brand,
html body .sidebar-head .brand{
  color: #FBF7F3 !important;
}
html body .sidebar .brand .o,
html body .sidebar-brand .brand .o{
  color: var(--ds-accent, #FF5500) !important;
}

/* Sidebar logo PNG — the brand mark ships dark-on-light. On the dark
   olive sidebar surface, invert it to cream so the wordmark reads.
   `brightness(0) invert(1)` flattens to pure white, then a cream tint
   via sepia + hue-rotate brings it close to brand cream (#E8DCC5).
   The orange "O" loses its hue under this filter but the wordmark
   still reads clearly and the brand chrome below carries the accent. */
html body .sidebar-brand .brand-logo,
html body .sidebar-head .brand-logo{
  filter:
    brightness(0)
    invert(1)
    sepia(0.18)
    saturate(0.55)
    hue-rotate(355deg)
    brightness(0.96) !important;
  opacity: 0.95;
  max-height: 48px !important;
  margin: 0 auto 8px !important;
}

/* Sidebar wordmark fallback (text "TELLIANO") — already styled by the
   .brand rule above; explicit re-assert for the sidebar context so
   the cream + orange "O" wins even if the image fallback never fires. */
html body .sidebar-wordmark,
html body .sidebar-wordmark-fallback{
  color: #F4EBD8 !important;
  font-family: 'Oswald', var(--font-display, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;
}
html body .sidebar-wordmark .o,
html body .sidebar-wordmark-fallback .o{
  color: var(--ds-accent, #FF5500) !important;
}
html body .sidebar-subtitle{
  color: rgba(232,220,197,0.55) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin-top: 4px !important;
}

/* Section dividers / group titles inside sidebar */
html body .sidebar .sidebar-section-title,
html body .sidebar .nav-group-label{
  color: rgba(232,220,197,0.45) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 14px 18px 6px !important;
}

/* User profile pill at bottom */
html body .user-profile-pill,
html body .sidebar-user-row,
html body .sidebar .user-profile,
html body .sidebar .sidebar-user{
  padding: 14px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(0,0,0,0.18) !important;
  color: rgba(232,220,197,0.85) !important;
}
html body .sidebar .user-name,
html body .sidebar .user-profile-name{
  color: #FBF7F3 !important;
}
html body .sidebar .user-role,
html body .sidebar .user-profile-role{
  color: rgba(232,220,197,0.55) !important;
}

/* Dropdown arrow / chevron in sidebar */
html body .sidebar-tabs .tab .dropdown-arrow,
html body .sidebar-tabs .tab .chevron{
  color: rgba(232,220,197,0.55) !important;
}

/* Sidebar collapse / toggle button — readable on dark */
html body .sidebar-toggle,
html body .sidebar-collapse-btn{
  color: rgba(232,220,197,0.78) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
html body .sidebar-toggle:hover,
html body .sidebar-collapse-btn:hover{
  background: rgba(255,255,255,0.10) !important;
  color: #FBF7F3 !important;
}

/* ────────────────────────────────────────────────────────────
   25. CHARTS — frame canvases with quiet rhythm
   ──────────────────────────────────────────────────────────── */
html body :is(#dashboard, #social-analytics, #insights, #report) .chart-box,
html body :is(#dashboard, #social-analytics, #insights, #report) .chart-box-large,
html body :is(#dashboard, #social-analytics, #insights, #report) .chart-box-medium{
  background: linear-gradient(180deg, rgba(246,244,238,0) 0%, rgba(246,244,238,0.4) 100%) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 8px 0 0 !important;
}
html body canvas{
  border-radius: 8px;
}

/* Chart card header refinement — already non-italic via earlier edit,
   but bump weight + add meta chip */
html body #dashboard .dash-card-header{
  align-items: center !important;
  padding: 0 0 14px !important;
  margin: 0 0 18px !important;
  border-bottom: 1px solid var(--ds-line) !important;
  min-height: 48px;
}
html[lang] body #dashboard .dash-card-meta,
html body #dashboard .dash-card-meta{
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--ds-ink-faint) !important;
  background: var(--ds-bg-muted) !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--ds-line) !important;
}

/* ────────────────────────────────────────────────────────────
   26. RANK / TOP CONTENT CARDS — refined data card with badges
   ──────────────────────────────────────────────────────────── */
html body :is(#dashboard, #social-analytics) .dash-rank-card,
html body :is(#dashboard, #social-analytics) .dash-content-card{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 22px !important;
  box-shadow: var(--ds-shadow-sm) !important;
  overflow: hidden !important;
}

/* Branch comparison cards */
html body :is(#dashboard, #customers) .dash-branch-card{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 20px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  position: relative;
  overflow: hidden !important;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
}
html body :is(#dashboard, #customers) .dash-branch-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--ds-shadow-md) !important;
  border-color: var(--ds-line-strong) !important;
}
html body :is(#dashboard, #customers) .dash-branch-card::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--ds-green-500), var(--ds-gold) 80%, transparent) !important;
  opacity: 0.6 !important;
}

/* ────────────────────────────────────────────────────────────
   27. CUSTOMERS / FEEDBACK BOARD — refined per-card surface
   ──────────────────────────────────────────────────────────── */
html body :is(#customers, #google) .feedback-card,
html body :is(#customers, #google) .review-card,
html body :is(#customers, #google) .post-card{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 18px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}
html body :is(#customers, #google) :is(.feedback-card, .review-card, .post-card):hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--ds-shadow-md) !important;
  border-color: var(--ds-line-strong) !important;
}

/* Star ratings — clean gold */
html body .stars,
html body .rating-stars{ color: var(--ds-gold) !important; }

/* ────────────────────────────────────────────────────────────
   28. SCHEDULED VISITS — refined Telegram panel + calendar list
   ──────────────────────────────────────────────────────────── */
html body :is(#scheduled, #calendar) .wc-section,
html body :is(#scheduled, #calendar) .telegram-panel,
html body :is(#scheduled, #calendar) .tg-panel{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 20px !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

/* Calendar grid days */
html body :is(#calendar, #scheduled) .wc-day{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line-light) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  min-height: 96px !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
}
html body :is(#calendar, #scheduled) .wc-day:hover{
  transform: translateY(-1px) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  border-color: var(--ds-line-strong) !important;
}
html body :is(#calendar, #scheduled) .wc-day.is-today{
  border: 1px solid var(--ds-green-500) !important;
  box-shadow:
    0 0 0 1px var(--ds-green-500),
    var(--ds-shadow-sm) !important;
  background: linear-gradient(180deg, rgba(31,90,26,0.06) 0%, var(--ds-bg-elevated) 60%) !important;
}
html body :is(#calendar, #scheduled) .wc-day-num{
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.008em !important;
  color: var(--ds-ink-strong) !important;
}
html body :is(#calendar, #scheduled) .wc-event-chip,
html body :is(#calendar, #scheduled) .wc-match{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: var(--ds-green-50) !important;
  color: var(--ds-green-700) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  border: 1px solid rgba(31,90,26,0.18) !important;
  margin-top: 4px !important;
}

/* ────────────────────────────────────────────────────────────
   29. INFLUENCERS TABLE — proper SaaS data table
   ──────────────────────────────────────────────────────────── */
html body #influencers table{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  box-shadow: var(--ds-shadow-sm) !important;
}
html body #influencers table thead th{
  background: var(--ds-bg-muted) !important;
  color: var(--ds-ink-faint) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  text-align: start !important;
  border-bottom: 1px solid var(--ds-line) !important;
}
html body #influencers table tbody td{
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--ds-line-light) !important;
  font-size: 0.92rem !important;
  color: var(--ds-ink) !important;
  vertical-align: middle !important;
}
html body #influencers table tbody tr:last-child td{
  border-bottom: none !important;
}
html body #influencers table tbody tr:hover td{
  background: rgba(31,90,26,0.04) !important;
}

/* Influencer name cell with avatar */
html body #influencers .influencer-cell,
html body #influencers .inf-cell-name{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html body #influencers .inf-avatar,
html body #influencers .influencer-avatar{
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  background: var(--ds-green-50) !important;
  color: var(--ds-green-700) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  border: 1px solid var(--ds-line) !important;
}

/* Platform pills */
html body .platform-badge,
html body .inf-chip{
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  background: var(--ds-bg-muted) !important;
  color: var(--ds-ink-muted) !important;
  border: 1px solid var(--ds-line) !important;
}

/* ────────────────────────────────────────────────────────────
   30. CAMPAIGNS — refined campaign card grid
   ──────────────────────────────────────────────────────────── */
html body #campaigns .dash-camp-table,
html body #campaigns table{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

/* ────────────────────────────────────────────────────────────
   31. CONSULTANT — insight cards refined
   ──────────────────────────────────────────────────────────── */
html body #consultant .insight-card,
html body #consultant .question-card,
html body #consultant .consultant-card{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 20px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}
html body #consultant :is(.insight-card, .question-card, .consultant-card):hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--ds-shadow-md) !important;
  border-color: var(--ds-green-300) !important;
  cursor: pointer;
}

/* ────────────────────────────────────────────────────────────
   32. ASSETS LIBRARY — refined thumbnail cards
   ──────────────────────────────────────────────────────────── */
html body #assets .asset-card{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}
html body #assets .asset-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--ds-shadow-md) !important;
  border-color: var(--ds-line-strong) !important;
}

/* ────────────────────────────────────────────────────────────
   33. SOCIAL ANALYTICS — refined section cards
   ──────────────────────────────────────────────────────────── */
html body :is(#social, #social-analytics, #social-monthly) :is(.sa-summary-card, .sa-audience-card, .sa-section, .sa-kpi, .sm-platform-card, .sm-chart-card, .sm-kpi){
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 20px !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

/* ────────────────────────────────────────────────────────────
   34. ADMIN — settings rows + RBAC table
   ──────────────────────────────────────────────────────────── */
html body #admin .settings-row,
html body #admin .admin-row{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 18px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  margin-bottom: 12px !important;
}
html body #admin .settings-row-label{
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--ds-ink-strong) !important;
  margin-bottom: 8px !important;
}

/* ────────────────────────────────────────────────────────────
   35. AUDIT LOG TABLE — refined dense data view
   ──────────────────────────────────────────────────────────── */
html body #logs .audit-table{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--ds-shadow-xs) !important;
}
html body #logs .audit-row-detail{
  background: var(--ds-bg-muted) !important;
  border-top: 1px dashed var(--ds-line-strong) !important;
  padding: 16px !important;
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
  font-size: 0.82rem !important;
  color: var(--ds-ink) !important;
}

/* ────────────────────────────────────────────────────────────
   36. LANGUAGE TOGGLE / TOPBAR ACTION BAR
   ──────────────────────────────────────────────────────────── */
html body .lang-toggle,
html body .lang-btn{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  color: var(--ds-ink-strong) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  transition: background-color 140ms ease, border-color 140ms ease !important;
}
html body .lang-toggle:hover,
html body .lang-btn:hover{
  background: var(--ds-bg-muted) !important;
  border-color: var(--ds-ink-muted) !important;
}

/* ────────────────────────────────────────────────────────────
   37. APPLY-SHARE block (CRM share link panel)
   ──────────────────────────────────────────────────────────── */
html body .apply-share-block,
html body .share-link-panel{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 18px 20px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

/* ────────────────────────────────────────────────────────────
   38. EMPTY STATES — refined typography + soft border
   ──────────────────────────────────────────────────────────── */
html body .empty,
html body .empty-state,
html body .wc-empty{
  background: linear-gradient(180deg, var(--ds-bg-elevated) 0%, var(--ds-bg-muted) 100%) !important;
  border: 1px dashed var(--ds-line-strong) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 48px 24px !important;
  text-align: center !important;
  color: var(--ds-ink-muted) !important;
  font-size: 0.95rem !important;
}

/* ────────────────────────────────────────────────────────────
   39. AUTH OVERLAY — premium login screen
   ──────────────────────────────────────────────────────────── */
html body .auth-overlay,
html body .login-box{
  background: var(--ds-bg-elevated) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-lg) !important;
  padding: 32px !important;
  box-shadow: var(--ds-shadow-xl) !important;
}

/* ────────────────────────────────────────────────────────────
   40. PUBLIC PAGES — apply / feedback / landing / agency hero
   ──────────────────────────────────────────────────────────── */
html body main h1{
  font-family: var(--font-body, 'Manrope', 'IBM Plex Sans Arabic', sans-serif) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -0.024em !important;
  color: var(--ds-ink-strong) !important;
}
html body main .lede,
html body main .lead,
html body main h1 + p{
  font-size: 1.08rem !important;
  color: var(--ds-ink-muted) !important;
  line-height: 1.65 !important;
  max-width: 68ch !important;
}
html body main .callout{
  background: var(--ds-green-50) !important;
  border: 1px solid rgba(31,90,26,0.16) !important;
  border-inline-start: 3px solid var(--ds-green-500) !important;
  border-radius: var(--ds-r-md) !important;
  padding: 14px 18px !important;
  color: var(--ds-ink) !important;
  margin: 16px 0 24px !important;
}

/* Public-page form sections */
html body .form-section,
html body main form > *{
  border-radius: var(--ds-r-md);
}
html body label{
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  color: var(--ds-ink-strong) !important;
  letter-spacing: -0.005em !important;
}

/* ────────────────────────────────────────────────────────────
   41. RTL/LTR sensitivity — keep numbers LTR
   ──────────────────────────────────────────────────────────── */
html body .dash-kpi-value,
html body .kpi-value,
html body table .num,
html body .tabular{
  direction: ltr !important;
  unicode-bidi: embed !important;
}

/* ────────────────────────────────────────────────────────────
   42. PRINT — clean A4
   ──────────────────────────────────────────────────────────── */
@media print{
  html body{
    background: #fff !important;
  }
  html body .sidebar,
  html body .topbar,
  html body .dash-filters,
  html body .modal-overlay,
  html body .cc-banner{ display: none !important; }
  html body .card,
  html body .dash-card,
  html body .dash-chart-card,
  html body .dash-rank-card,
  html body .dash-kpi{
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

/* ============================================================
   ✦ CANVAS LAYER ✦  — break the box, page becomes the canvas
   ------------------------------------------------------------
   Removes card chrome from non-essential containers. Sections
   are separated by spacing + typography instead of walls.
   Cards remain ONLY where they add real value:
     • KPI cards (lighter form)
     • Modals + Toasts
     • Sidebar
     • Asset thumbnails (file previews)
     • Calendar day cells
   Everything else (charts, rankings, branches, feedback list,
   tables, filter rows, admin rows, audit) becomes transparent.
   ============================================================ */

/* C1. Section rhythm — vertical breathing room IS the divider */
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #google, #social, #social-analytics,
              #social-monthly, #campaigns, #assets, #consultant,
              #insights, #calendar, #report, #logs, #admin) > *{
  margin-block: 0 clamp(36px, 4vw, 56px) !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #google, #social, #social-analytics,
              #social-monthly, #campaigns, #assets, #consultant,
              #insights, #calendar, #report, #logs, #admin) > *:last-child{
  margin-bottom: 0 !important;
}

/* C2. Strip card chrome from non-essential containers */
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #google, #social, #social-analytics,
              #social-monthly, #campaigns, #assets, #consultant,
              #insights, #calendar, #report, #logs, #admin) :is(
  .dash-chart-card,
  .dash-rank-card,
  .dash-compare-card,
  .dash-branch-card,
  .dash-content-card,
  .top-content,
  .dash-ranking-wrap,
  .dash-timeline,
  .dash-top-content,
  .dash-camp-table,
  .feedback-card,
  .review-card,
  .post-card,
  .audit-row,
  .form-section,
  .wc-section,
  .telegram-panel,
  .tg-panel,
  .sa-summary-card,
  .sa-audience-card,
  .sa-section,
  .sm-platform-card,
  .sm-chart-card,
  .insight-card,
  .question-card,
  .consultant-card,
  .apply-share-block,
  .share-link-panel,
  .card,
  .dash-card){
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Filter / toolbar rows — inline control rows on the canvas.
   Note: `.dash-filters` keeps its grid layout (4 filters + reset)
   from the page rule at line ~4239; we just strip its chrome here. */
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #google, #social, #social-analytics,
              #social-monthly, #campaigns, #assets, #consultant,
              #insights, #calendar, #report, #logs, #admin) :is(
  .filter-row, .audit-filters, .toolbar){
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 18px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
/* Dashboard filters — restore grid (4 filters + reset, side-by-side) */
html body #dashboard .dash-filters{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 22px !important;
  margin-bottom: 28px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 2fr auto !important;
  align-items: end !important;
  gap: clamp(14px, 1.5vw, 22px) !important;
  flex-wrap: nowrap !important;
}
@media (max-width: 980px){
  html body #dashboard .dash-filters{
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 560px){
  html body #dashboard .dash-filters{
    grid-template-columns: 1fr !important;
  }
}

/* Section heads on the canvas — typographic with gold marker.
   Explicit `border: 0` first to kill the legacy inline
   `.section [class*="card" i]` rule that puts a cream border on
   every 4 sides of `.dash-card-header` (because the classname
   contains "card"). Then re-add ONLY the bottom hairline. */
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #google, #social, #social-analytics,
              #social-monthly, #campaigns, #assets, #consultant,
              #insights, #calendar, #report, #logs, #admin) .dash-card-header,
html body .section .dash-card-header{
  margin: 0 0 18px !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ds-line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 0 !important;
  flex-wrap: wrap !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #google, #social, #social-analytics,
              #social-monthly, #campaigns, #assets, #consultant,
              #insights, #calendar, #report, #logs, #admin) .dash-card-header h3{
  font-family: var(--font-body, 'Manrope', 'IBM Plex Sans Arabic', sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.014em !important;
  color: var(--ds-ink-strong) !important;
  margin: 0 !important;
  font-style: normal !important;
  text-transform: none !important;
  position: relative;
  padding-inline-start: 14px !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #google, #social, #social-analytics,
              #social-monthly, #campaigns, #assets, #consultant,
              #insights, #calendar, #report, #logs, #admin) .dash-card-header h3::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 8% !important;
  bottom: 8% !important;
  width: 3px !important;
  background: var(--ds-gold) !important;
  border-radius: 2px !important;
  opacity: 0.75;
}

/* C3. Tables — no outer frame, clean rows on canvas */
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #logs, #insights, #report) table,
html body #influencers table{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #logs, #insights, #report) table thead th,
html body #influencers table thead th{
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--ds-line-strong) !important;
  color: var(--ds-ink-faint) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 12px 14px !important;
  text-align: start !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #logs, #insights, #report) table tbody td,
html body #influencers table tbody td{
  background: transparent !important;
  border-bottom: 1px solid var(--ds-line) !important;
  padding: 14px !important;
  font-size: 0.92rem !important;
  color: var(--ds-ink) !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #logs, #insights, #report) table tbody tr:last-child td,
html body #influencers table tbody tr:last-child td{
  border-bottom: 0 !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #logs, #insights, #report) table tbody tr:hover td,
html body #influencers table tbody tr:hover td{
  background: rgba(20,30,16,0.025) !important;
}

/* C4. KPI cards — lighter, integrated, no border */
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #insights, #report) .dash-kpi,
html body .kpi-card{
  background: rgba(255,255,255,0.62) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  box-shadow:
    0 0 0 1px rgba(20,30,16,0.04),
    0 1px 2px rgba(10,20,8,0.03) !important;
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  backdrop-filter: saturate(140%) blur(4px);
  position: relative !important;
  overflow: hidden !important;
  border-inline-start: 0 !important;
  min-height: 120px !important;
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms cubic-bezier(.2,.8,.2,1) !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #insights, #report) .dash-kpi:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 1px rgba(20,30,16,0.08),
    0 12px 28px rgba(10,20,8,0.10) !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #insights, #report) .dash-kpi::after{
  height: 2px !important;
  opacity: 0.30 !important;
  background: linear-gradient(90deg, transparent 0%, var(--ds-gold) 50%, transparent 100%) !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #insights, #report) .dash-kpi:hover::after{
  opacity: 0.7 !important;
}
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #campaigns, #assets, #insights, #report) .dash-kpi-icon{
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: rgba(31,90,26,0.07) !important;
  color: var(--ds-green-700) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0.88rem !important;
}

/* C5. Branch tiles — integrated, no border box */
html body :is(#dashboard, #customers) .dash-branch-card{
  background: rgba(255,255,255,0.5) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 18px !important;
  box-shadow: 0 0 0 1px rgba(20,30,16,0.04) !important;
  position: relative;
  overflow: hidden !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
}
html body :is(#dashboard, #customers) .dash-branch-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 0 0 1px rgba(20,30,16,0.08), 0 12px 28px rgba(10,20,8,0.08) !important;
}
html body :is(#dashboard, #customers) .dash-branch-card::after{
  height: 2px !important;
  opacity: 0.35 !important;
}

/* C6. Feedback / review / post — list items with hairline */
html body :is(#customers, #google) :is(.feedback-card, .review-card, .post-card){
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 !important;
  transform: none !important;
  transition: background-color 160ms ease !important;
}
html body :is(#customers, #google) :is(.feedback-card, .review-card, .post-card):hover{
  transform: none !important;
  box-shadow: none !important;
  background: rgba(20,30,16,0.015) !important;
}
html body :is(#customers, #google) :is(.feedback-card, .review-card, .post-card):last-child{
  border-bottom: 0 !important;
}

/* C7. Insight / consultant cards — quiet panels */
html body #consultant :is(.insight-card, .question-card, .consultant-card){
  background: rgba(255,255,255,0.55) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 0 0 1px rgba(20,30,16,0.04) !important;
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease !important;
}
html body #consultant :is(.insight-card, .question-card, .consultant-card):hover{
  background: rgba(255,255,255,0.85) !important;
  box-shadow: 0 0 0 1px rgba(20,30,16,0.08), 0 8px 24px rgba(10,20,8,0.08) !important;
  transform: translateY(-1px) !important;
}

/* C8. Admin settings — flat list */
html body #admin :is(.settings-row, .admin-row){
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 !important;
  margin: 0 !important;
}
html body #admin :is(.settings-row, .admin-row):last-child{
  border-bottom: 0 !important;
}

/* C9. Scheduled panels — quiet rhythm */
html body :is(#scheduled, #calendar) :is(.wc-section, .telegram-panel, .tg-panel){
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 28px !important;
  margin-bottom: 28px !important;
}

/* C10. Dashboard header — quiet, not a card */
html body #dashboard .dash-header{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 18px !important;
  margin-bottom: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
html body #dashboard .dash-section-title{
  background: transparent !important;
  border: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--ds-ink-faint) !important;
  margin: 8px 0 18px !important;
  padding: 0 !important;
}
html body #dashboard .dash-section-title::before{ display: none !important; }

/* C11. Empty states — quiet centered text, no dashed box */
html body :is(#dashboard, #customers, #influencers, #prospects,
              #scheduled, #google, #social, #campaigns, #assets,
              #consultant, #insights, #calendar, #report, #logs,
              #admin) :is(.empty, .empty-state, .wc-empty){
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 60px 24px !important;
  text-align: center !important;
  color: var(--ds-ink-faint) !important;
  font-size: 1rem !important;
}

/* C12. Audit log — dense canvas list */
html body #logs .audit-table{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body #logs .audit-row-detail{
  background: rgba(20,30,16,0.03) !important;
  border: 0 !important;
  border-inline-start: 2px solid var(--ds-gold) !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
  font-size: 0.82rem !important;
}

/* C13. Filter chips — fluid pill row */
html body :is(.filter-chip, .dash-filter-chip, .chip-filter){
  background: transparent !important;
  border: 1px solid var(--ds-line-strong) !important;
  color: var(--ds-ink-muted) !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
}
html body :is(.filter-chip, .dash-filter-chip, .chip-filter):hover{
  background: rgba(20,30,16,0.03) !important;
  border-color: var(--ds-ink-muted) !important;
  color: var(--ds-ink-strong) !important;
}
html body :is(.filter-chip, .dash-filter-chip, .chip-filter).active{
  background: var(--ds-green-700) !important;
  border-color: var(--ds-green-700) !important;
  color: #F4F0E2 !important;
}

/* C14. Chart canvas — sits naturally on canvas */
html body :is(#dashboard, #social-analytics, #insights, #report) :is(.chart-box, .chart-box-large, .chart-box-medium){
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* C15. Asset cards — keep (need file definition) but lighter */
html body #assets .asset-card{
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}
html body #assets .asset-card:hover{
  background: var(--ds-bg-elevated) !important;
  box-shadow: 0 8px 24px rgba(10,20,8,0.08) !important;
  border-color: var(--ds-line-strong) !important;
  transform: translateY(-2px) !important;
}

/* C16. Apply-share — hairline-bracket inline panel */
html body :is(.apply-share-block, .share-link-panel){
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ds-line) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

/* C17. Public-page heading rhythm */
html body main{ padding-block: 40px !important; }
html body main h2{
  margin-top: 36px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--ds-line) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em !important;
}

/* C18. Page canvas — warm peach-cream per brand identity.
   The base sits between "dough soft" (#FBF7F3) and "beige" (#EBDED4),
   tinted toward tangerine so the page reads as warm/orange without
   becoming neon. Two radial washes layer the brand orange (tangerine)
   from the top corners for the editorial glow.
   Selector mirrors page's `html:not([data-theme="dark"]) body` weight
   so source order wins. */
html:not([data-theme="dark"]) body,
html, body{
  background: #FBEEDC !important;
}
html[data-theme="dark"] body{
  background: var(--moss-deep, #14260F) !important;
}
html body::before{
  background:
    radial-gradient(1600px 800px at  8% -10%, rgba(255,85,0,0.10), transparent 60%),
    radial-gradient(1400px 700px at 100%  4%, rgba(255,122,44,0.08), transparent 65%),
    radial-gradient(1200px 600px at 50% 110%, rgba(184,152,86,0.10), transparent 60%) !important;
}

/* Update the rerouted --ds-bg token so all consumers pick up the warm
   peach-cream automatically. */
html body{
  --ds-bg: #FBEEDC !important;
  --bg: #FBEEDC !important;
  --parchment: #FBEEDC !important;
  --dough-soft: #FBEEDC !important;
}

/* ============================================================
   ✦ NUMBER TYPOGRAPHY — Manrope 800 everywhere ✦
   Applies the "Linear/Stripe SaaS" number treatment to every
   numeric display across the site (CRM + admin + public pages).
   Replaces the earlier Playfair serif digits on:
     • Dashboard KPIs (already covered)
     • Dashboard date banner
     • Calendar day numbers
     • Calendar summary counters
     • Branch card stats
     • Social analytics KPIs
     • Social media KPI values
     • Insight card metrics
     • Any generic .value / .num / .count / .stat-value
     • Admin retention day inputs (visual only, input stays sans)
     • Public feedback totals
   ============================================================ */

/* Big-number display class — the "hero" numeric read on any page */
html body :is(
  .dash-kpi-value,
  .dash-kpi-number,
  .kpi-card .kpi-value,
  .kpi-card .kpi-number,
  .kpi-card .value,
  .dash-period-display,
  .dash-summary-card .value,
  .dash-branch-card .value,
  .dash-branch-card .branch-count,
  .sa-kpi-current,
  .sa-kpi .value,
  .sm-kpi .value,
  .sm-kpi-value,
  .stat-value,
  .stat-number,
  .metric-value,
  .metric-number,
  .count-big,
  .insight-value,
  .insight-metric,
  .compare-value,
  .qoq-value,
  .cal-summary-card .value,
  .rank-count,
  .top-count){
  font-family: 'Manrope', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.032em !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum", "ss01" !important;
  font-style: normal !important;
  line-height: 1.05 !important;
}

/* Medium / inline numeric class — table cells, chip counts, badges */
html body :is(
  .num,
  .tabular,
  .cell-num,
  .table-num,
  .cal-month-count,
  .cal-day-num,
  .wc-day-num,
  .role-count,
  .badge-count,
  .filter-count,
  .table-cell.num,
  td.num,
  th.num){
  font-family: 'Manrope', 'IBM Plex Sans Arabic', -apple-system, ui-sans-serif, system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" !important;
  font-style: normal !important;
  letter-spacing: -0.005em !important;
}

/* Calendar day-cell number — smaller display but still bold sans */
html body :is(.wc-day-num, .cal-day-num){
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.012em !important;
  color: var(--ds-ink-strong, #0B0F0A) !important;
}

/* Dashboard date banner — was Playfair, now a warm Manrope semibold
   so it still feels like a display element but matches the numbers. */
html body #dashboard .dash-period-display,
html body .dash-period-display{
  font-family: 'Manrope', 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.018em !important;
  color: var(--ds-ink-strong) !important;
  font-style: normal !important;
}

/* Admin retention-days numeric inputs (they're inputs, but ensure
   the value display uses tabular nums) */
html body input[type="number"]{
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" !important;
}

/* Any element explicitly opting in via [data-num] attribute */
html body [data-num]{
  font-family: 'Manrope', 'IBM Plex Sans Arabic', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
}

/* ============================================================
   ✦ USER PROFILE POPOVER ✦
   The sidebar pill at the bottom is now a button that opens a
   popover showing the full name, email, and role. The button
   itself is styled as a subtle interactive surface (cream text
   over the olive sidebar) and the popover uses the shared
   .user-popover shell with a "hero" avatar block on top.
   ============================================================ */

/* Turn the pill from a plain div into an interactive button */
html body .sidebar-user-info{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: inherit !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: start !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease !important;
}
html body .sidebar-user-info:hover{
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html body .sidebar-user-info:focus-visible{
  outline: none !important;
  border-color: rgba(255,85,0,0.5) !important;
  box-shadow: 0 0 0 3px rgba(255,85,0,0.18) !important;
}
html body .sidebar-user-info:active{ transform: scale(0.99); }

/* Profile popover hero — big avatar + name + role chip */
html body #profilePanel .profile-hero{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 4px 18px;
  border-bottom: 1px solid var(--ds-line);
  margin-bottom: 16px;
}
html body #profilePanel .profile-avatar{
  width: 54px;
  height: 54px;
  border-radius: 9999px;
  background: linear-gradient(180deg, var(--ds-green-500) 0%, var(--ds-green-700) 100%);
  color: #F4EBD8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  box-shadow:
    0 4px 12px rgba(20,30,16,0.15),
    inset 0 1px 0 rgba(255,255,255,0.14);
  flex-shrink: 0;
}
html body #profilePanel .profile-hero-text{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
html body #profilePanel .profile-name{
  font-family: 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.012em;
  color: var(--ds-ink-strong);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
html body #profilePanel .profile-role-pill{
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(31,90,26,0.12);
  color: var(--ds-green-700);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 1px solid rgba(31,90,26,0.20);
  width: max-content;
  max-width: 100%;
}

/* Profile-field list — label above value, subtle hairline row rhythm */
html body #profilePanel .profile-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-line-light, rgba(20,30,16,0.05));
}
html body #profilePanel .profile-field:last-child{
  border-bottom: 0;
}
html body #profilePanel .profile-field-label{
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-ink-faint);
}
html body #profilePanel .profile-field-value{
  font-family: 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ds-ink);
  overflow-wrap: anywhere;
}
html body #profilePanel .profile-field-value[dir="ltr"]{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================
   ✦ DARK MODE ✦
   When html[data-theme="dark"] is set, invert the entire palette:
     • Surfaces  → deep moss (#0F1A0C base, #14260F cards)
     • Text      → cream (#E8DCC5) primary, muted at low alpha
     • Hairlines → light alpha (rgba white 0.08)
     • Accents   → tangerine + gold stay the same (readable on dark)
   Every high-specificity rule from the light-mode blocks above is
   mirrored under an `html[data-theme="dark"]` prefix so it wins.
   ============================================================ */

/* Token layer — dark palette */
html[data-theme="dark"] body{
  --ds-bg:           #0F1A0C !important;
  --ds-bg-elevated:  #17281A !important;
  --ds-bg-muted:     #1A2E1D !important;
  --ds-bg-inverse:   #FBEEDC !important;
  --ds-ink:          #E8DCC5 !important;
  --ds-ink-strong:   #FBF7F3 !important;
  --ds-ink-muted:    rgba(232,220,197,0.72) !important;
  --ds-ink-faint:    rgba(232,220,197,0.48) !important;
  --ds-ink-inverse:  #161A14 !important;
  --ds-line:         rgba(255,255,255,0.10) !important;
  --ds-line-strong:  rgba(255,255,255,0.18) !important;
  --ds-line-light:   rgba(255,255,255,0.06) !important;
  --bg:              #0F1A0C !important;
  --bg-elevated:     #17281A !important;
  --card:            #17281A !important;
  --paper:           #17281A !important;
  --parchment:       #0F1A0C !important;
  --dough-soft:      #0F1A0C !important;
  --ink:             #E8DCC5 !important;
  --ink-muted:       rgba(232,220,197,0.72) !important;
  --text:            #E8DCC5 !important;
  --text-muted:      rgba(232,220,197,0.72) !important;
  --text-faint:      rgba(232,220,197,0.48) !important;
  --border:          rgba(255,255,255,0.10) !important;
  --border-soft:     rgba(255,255,255,0.06) !important;
  --cream:           #E8DCC5 !important;
}

/* Body + page ambient wash */
html[data-theme="dark"] body,
html[data-theme="dark"] html,
html[data-theme="dark"]{
  background: #0F1A0C !important;
  color: #E8DCC5 !important;
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(1600px 800px at  8% -10%, rgba(255,85,0,0.09), transparent 60%),
    radial-gradient(1400px 700px at 100%  4%, rgba(255,122,44,0.06), transparent 65%),
    radial-gradient(1200px 600px at 50% 110%, rgba(184,152,86,0.05), transparent 60%) !important;
}

/* Primary text everywhere — cream */
html[data-theme="dark"] body,
html[data-theme="dark"] body p,
html[data-theme="dark"] body li,
html[data-theme="dark"] body span,
html[data-theme="dark"] body div,
html[data-theme="dark"] body td,
html[data-theme="dark"] body dt,
html[data-theme="dark"] body dd,
html[data-theme="dark"] body label{
  color: #E8DCC5 !important;
}
html[data-theme="dark"] body :is(h1, h2, h3, h4, h5, h6){
  color: #FBF7F3 !important;
}
html[data-theme="dark"] body .muted,
html[data-theme="dark"] body .section-sub,
html[data-theme="dark"] body .cal-subtitle,
html[data-theme="dark"] body .overline,
html[data-theme="dark"] body .list-row-sub{
  color: rgba(232,220,197,0.68) !important;
}

/* Cards — split into two behaviors on dark:
   1) "Canvas cards" (charts, rank/compare/content/top, feedback list,
      wc-section, sa/sm sections) — stay TRANSPARENT so the page reads
      as one dark canvas separated by spacing, matching light mode.
   2) "Real cards" (modal, popover, .card fallback) — get the dark
      surface so they still look like elevated dialogs. */

/* 1) Canvas cards — no chrome, just cream text on the moss canvas.
   Selector mirrors the light-mode Canvas Layer weight (with ID scope)
   so it beats those rules on dark. */
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers,
  #prospects, #scheduled, #google, #social, #social-analytics,
  #social-monthly, #campaigns, #assets, #consultant, #insights,
  #calendar, #report, #logs, #admin) :is(
    .dash-chart-card, .dash-rank-card, .dash-compare-card,
    .dash-branch-card, .dash-content-card, .top-content,
    .feedback-card, .review-card, .post-card, .wc-section,
    .telegram-panel, .tg-panel, .sa-summary-card, .sa-audience-card,
    .sa-section, .sm-platform-card, .sm-chart-card,
    .insight-card, .question-card, .consultant-card, .form-section),
html[data-theme="dark"] body :is(
  .dash-chart-card, .dash-rank-card, .dash-compare-card,
  .dash-branch-card, .dash-content-card, .top-content,
  .feedback-card, .review-card, .post-card, .wc-section,
  .telegram-panel, .tg-panel, .sa-summary-card, .sa-audience-card,
  .sa-section, .sm-platform-card, .sm-chart-card,
  .insight-card, .question-card, .consultant-card, .form-section){
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #E8DCC5 !important;
}

/* 2) Real cards (dialogs / popovers / plain .card fallback) — surface */
html[data-theme="dark"] body :is(
  .card, .modal, .user-popover, .dash-card, .branch-card){
  background: #17281A !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 8px 24px rgba(0,0,0,0.30) !important;
  color: #E8DCC5 !important;
}
/* But if a plain .card was a canvas-stripped chart card in light mode,
   keep it transparent on dark too. */
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers,
  #prospects, #scheduled, #google, #social, #social-analytics,
  #social-monthly, #campaigns, #assets, #consultant, #insights,
  #calendar, #report, #logs, #admin) > .card,
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers,
  #prospects, #scheduled, #google, #social, #social-analytics,
  #social-monthly, #campaigns, #assets, #consultant, #insights,
  #calendar, #report, #logs, #admin) > * > .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Dashboard KPI glassy card variant */
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers,
  #prospects, #scheduled, #campaigns, #assets, #insights, #report) .dash-kpi{
  background: rgba(255,255,255,0.03) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.20) !important;
}
html[data-theme="dark"] body .dash-kpi-value,
html[data-theme="dark"] body .kpi-value,
html[data-theme="dark"] body .dash-period-display,
html[data-theme="dark"] body .stat-value{
  color: #FBF7F3 !important;
}
html[data-theme="dark"] body .dash-kpi-label,
html[data-theme="dark"] body .kpi-label{
  color: rgba(232,220,197,0.55) !important;
}
html[data-theme="dark"] body .dash-kpi-icon{
  background: rgba(255,255,255,0.06) !important;
  color: #F4EBD8 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Tables — dark surface, cream text, soft hairlines */
html[data-theme="dark"] body table thead th,
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers,
  #prospects, #scheduled, #campaigns, #assets, #logs, #insights, #report) table thead th{
  background: transparent !important;
  color: rgba(232,220,197,0.55) !important;
  border-bottom-color: rgba(255,255,255,0.18) !important;
}
html[data-theme="dark"] body table tbody td,
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers,
  #prospects, #scheduled, #campaigns, #assets, #logs, #insights, #report) table tbody td{
  color: #E8DCC5 !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
html[data-theme="dark"] body table tbody tr:hover td,
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers,
  #prospects, #scheduled, #campaigns, #assets, #logs, #insights, #report) table tbody tr:hover td{
  background: rgba(255,255,255,0.03) !important;
}

/* Inputs / selects / textareas — dark surface, cream text */
html[data-theme="dark"] body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body select{
  background: rgba(255,255,255,0.04) !important;
  color: #F4EBD8 !important;
  border-color: rgba(255,255,255,0.16) !important;
}
html[data-theme="dark"] body input::placeholder,
html[data-theme="dark"] body textarea::placeholder{
  color: rgba(232,220,197,0.35) !important;
}
html[data-theme="dark"] body input:focus,
html[data-theme="dark"] body textarea:focus,
html[data-theme="dark"] body select:focus{
  border-color: rgba(255,85,0,0.55) !important;
  box-shadow: 0 0 0 4px rgba(255,85,0,0.14) !important;
}

/* Buttons — keep primary green, but polish secondary/ghost for dark */
html[data-theme="dark"] body .btn-secondary,
html[data-theme="dark"] body button.btn-secondary{
  background: rgba(255,255,255,0.05) !important;
  color: #F4EBD8 !important;
  border-color: rgba(255,255,255,0.14) !important;
}
html[data-theme="dark"] body .btn-secondary:hover:not(:disabled){
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(201,168,107,0.35) !important;
}
html[data-theme="dark"] body .btn-ghost{
  color: #E8DCC5 !important;
  background: transparent !important;
}
html[data-theme="dark"] body .btn-ghost:hover{
  background: rgba(255,255,255,0.06) !important;
}

/* Chips / pills — soft dark backgrounds, cream text */
html[data-theme="dark"] body :is(.chip, .link-chip, .role-pill,
  .platform-badge, .inf-chip, .auto-save-badge, .tag){
  background: rgba(255,255,255,0.05) !important;
  color: rgba(232,220,197,0.85) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Modals + popovers — deep moss with cream text */
html[data-theme="dark"] body .modal-overlay{
  background: rgba(0,0,0,0.55) !important;
}
html[data-theme="dark"] body .modal,
html[data-theme="dark"] body .user-popover{
  background: #17281A !important;
  color: #E8DCC5 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Sidebar — was already dark-olive; make sure text stays cream */
html[data-theme="dark"] body .sidebar-tabs .tab{
  color: rgba(232,220,197,0.78) !important;
}
html[data-theme="dark"] body .sidebar-tabs .tab:hover{
  color: #FBF7F3 !important;
}

/* Section heads + gold marker still readable on dark */
html[data-theme="dark"] body .section .section-title,
html[data-theme="dark"] body .section h2.section-title{
  color: #FBF7F3 !important;
}
html[data-theme="dark"] body .section .section-title::after{
  background: var(--ds-gold, #B89856) !important;
}
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers, #prospects,
  #scheduled, #campaigns, #assets, #consultant, #insights, #calendar,
  #report, #logs, #admin) .dash-card-header h3{
  color: #FBF7F3 !important;
}
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers, #prospects,
  #scheduled, #campaigns, #assets, #consultant, #insights, #calendar,
  #report, #logs, #admin) .dash-card-header{
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Filter chips + toolbar dividers */
html[data-theme="dark"] body :is(#dashboard, #customers, #influencers, #prospects,
  #scheduled, #google, #social, #campaigns, #assets, #consultant, #insights,
  #calendar, #report, #logs, #admin) :is(.dash-filters, .filter-row,
  .audit-filters, .toolbar){
  border-bottom-color: rgba(255,255,255,0.10) !important;
}
html[data-theme="dark"] body :is(.filter-chip, .dash-filter-chip, .chip-filter){
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(232,220,197,0.72) !important;
}
html[data-theme="dark"] body :is(.filter-chip, .dash-filter-chip, .chip-filter):hover{
  background: rgba(255,255,255,0.05) !important;
  color: #FBF7F3 !important;
}

/* Empty states — quiet centered text */
html[data-theme="dark"] body :is(.empty, .empty-state, .wc-empty){
  background: transparent !important;
  color: rgba(232,220,197,0.55) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Calendar day cells */
html[data-theme="dark"] body :is(#calendar, #scheduled) .wc-day{
  background: #17281A !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) !important;
}
html[data-theme="dark"] body :is(#calendar, #scheduled) .wc-day.is-today{
  background: linear-gradient(180deg, rgba(31,90,26,0.24) 0%, #17281A 60%) !important;
}
html[data-theme="dark"] body :is(#calendar, #scheduled) .wc-day-num,
html[data-theme="dark"] body :is(.wc-day-num, .cal-day-num){
  color: #FBF7F3 !important;
}

/* Feedback / review / post — list items on dark */
html[data-theme="dark"] body :is(#customers, #google) :is(.feedback-card, .review-card, .post-card){
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  color: #E8DCC5 !important;
}

/* Admin sidebar-title / eyebrow inside dark admin */
html[data-theme="dark"] body #adminShell .sidebar-title,
html[data-theme="dark"] body .card-title{
  color: rgba(232,220,197,0.72) !important;
}
html[data-theme="dark"] body .card-title::before{
  background: var(--ds-gold, #B89856) !important;
}

/* Admin branch cards on dark */
html[data-theme="dark"] body .branch-card{
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 1px 0 rgba(0,0,0,0.20) !important;
}
html[data-theme="dark"] body .branch-title{
  color: #F4EBD8 !important;
}
html[data-theme="dark"] body .branch-ops-line{
  color: #E8DCC5 !important;
}
html[data-theme="dark"] body .branch-ops-line b{
  color: rgba(232,220,197,0.55) !important;
}

/* Profile popover on dark */
html[data-theme="dark"] body #profilePanel .profile-name,
html[data-theme="dark"] body #profilePanel .profile-field-value{
  color: #F4EBD8 !important;
}
html[data-theme="dark"] body #profilePanel .profile-field-label{
  color: rgba(232,220,197,0.55) !important;
}
html[data-theme="dark"] body #profilePanel .profile-hero{
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] body #profilePanel .profile-field{
  border-bottom-color: rgba(255,255,255,0.05) !important;
}
html[data-theme="dark"] body #profilePanel .profile-role-pill{
  background: rgba(201,168,107,0.15) !important;
  color: #DDC48A !important;
  border-color: rgba(201,168,107,0.30) !important;
}

/* Chart card headers meta chip in dark */
html[data-theme="dark"] body #dashboard .dash-card-meta{
  background: rgba(255,255,255,0.05) !important;
  color: rgba(232,220,197,0.65) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Sidebar user info button on dark (already dark, but confirm) */
html[data-theme="dark"] body .sidebar-user-info:hover{
  background: rgba(255,255,255,0.06) !important;
}

/* Toast on dark */
html[data-theme="dark"] body .toast{
  background: #F4EBD8 !important;
  color: #14260F !important;
}