/* ================================================================
   Dark dashboard theme — scoped to body.dash-dark
   Applies to all /admin/* and /promoter/* pages so the dashboards
   match the ambassador / public-site aesthetic (true near-black).
   Loaded after app.css so it overrides.

   2026-06-06 — Palette repulled from #0b1220/#0f172a slate-blue to
   #0a0a0a/#141414 near-black to match body.landing-dark (used on
   homepage, /services, /ambassador/*, /promoter/login, etc.). The
   slate-blue artifact came from an earlier dashboards-feel-like-Stripe
   moment; now everything flows on one palette. Tokens only — every
   downstream selector already references --dd-* so nothing else
   needed touching.
   ================================================================ */

body.dash-dark {
  /* Near-black palette — same family as body.landing-dark (#0a0a0a body,
     #141414 cards). Three surface tiers give us depth without leaving the
     near-black register. */
  --dd-bg:           #0a0a0a;   /* page background (was #0b1220 slate) */
  --dd-bg-alt:       #0a0a0a;   /* gradient endpoint — now flat */
  --dd-surface:      #141414;   /* primary card surface (was #1e293b) */
  --dd-surface-2:    #0f0f0f;   /* sunk / input field bg (was #0f172a) */
  --dd-surface-3:    #1a1a1a;   /* card header / hover lift (was #15233a) */
  --dd-border:       rgba(255,255,255,0.08);
  --dd-border-soft:  rgba(255,255,255,0.05);
  --dd-text:         #f8fafc;
  --dd-text-soft:    #cbd5e1;
  --dd-text-muted:   #94a3b8;
  --dd-text-faint:   #64748b;
  --dd-accent:       #ec6b1c;
  --dd-accent-soft:  rgba(236, 107, 28, 0.15);

  /* Override the light-theme tokens from app.css so any component that uses
     `var(--bg-sunk)` / `var(--fg)` etc. on a dash page picks a dark surface
     instead of the original `#f1f5f9`. Without these overrides the admin
     support inbox detail page renders inset boxes (Original message, AI
     draft, Claude review reason) as near-white panels on a dark page,
     making the white-on-white text unreadable. */
  --bg-sunk:    var(--dd-surface-3);
  --bg-soft:    var(--dd-surface-2);
  --bg-card:    var(--dd-surface);
  --bg-app:     var(--dd-bg);
  --fg:         var(--dd-text);
  --fg-muted:   var(--dd-text-muted);
  --border:     var(--dd-border);
  --border-soft: var(--dd-border-soft);

  /* Flat near-black — no gradient. landing-dark is flat #0a0a0a; matching it. */
  background: var(--dd-bg);
  color: var(--dd-text);
  min-height: 100vh;
}

/* ---------- Header / nav ---------- */
body.dash-dark .site-header {
  background: rgba(10, 10, 10, 0.92);
  border-bottom: 1px solid var(--dd-border);
  backdrop-filter: blur(8px);
}
body.dash-dark .brand { color: var(--dd-text); }
body.dash-dark .brand-mark { background: var(--dd-accent); color: #0a0a0a; }
body.dash-dark .nav a { color: var(--dd-text-soft); }
body.dash-dark .nav a:hover { color: var(--dd-text); }
body.dash-dark .nav a.btn-secondary {
  border: 1px solid var(--dd-border);
  color: var(--dd-text-soft);
  background: transparent;
  border-radius: 999px;
}
body.dash-dark .nav a.btn-secondary:hover {
  border-color: var(--dd-accent);
  color: var(--dd-text);
}
body.dash-dark .nav a.btn-primary {
  background: var(--dd-accent);
  color: #0a0a0a;
  border-radius: 999px;
  font-weight: 700;
}
body.dash-dark .nav a.btn-primary:hover { filter: brightness(1.1); }

/* ---------- Dash shell + sidebar ---------- */
body.dash-dark .dash-shell {
  background: transparent;
}
body.dash-dark .dash-sidebar {
  background: var(--dd-bg);
  border-right: 1px solid var(--dd-border);
  color: var(--dd-text-soft);
}
body.dash-dark .dash-sidebar .eyebrow {
  color: var(--dd-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.dash-dark .dash-sidebar > div:first-child {
  border-bottom-color: var(--dd-border) !important;
}
body.dash-dark .menu a {
  color: var(--dd-text-soft);
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  display: block;
  text-decoration: none;
}
body.dash-dark .menu a:hover {
  background: rgba(255,255,255,0.04);
  color: var(--dd-text);
}
body.dash-dark .menu a.active {
  background: var(--dd-accent-soft);
  color: var(--dd-accent);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--dd-accent);
}
body.dash-dark .menu .group-label {
  color: var(--dd-text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 12px 6px;
}

body.dash-dark .dash-main { color: var(--dd-text); }

/* ---------- Headings ---------- */
body.dash-dark h1,
body.dash-dark h2,
body.dash-dark h3,
body.dash-dark h4 { color: var(--dd-text); }
body.dash-dark h1 { font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Eyebrow + utility text ---------- */
body.dash-dark .eyebrow {
  color: var(--dd-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.dash-dark .muted { color: var(--dd-text-muted); }
body.dash-dark .mono-sm { color: var(--dd-text-muted); }
body.dash-dark p { color: var(--dd-text-soft); }
body.dash-dark a { color: var(--dd-accent); }
body.dash-dark a:hover { filter: brightness(1.15); }
body.dash-dark code {
  background: var(--dd-surface-2);
  color: var(--dd-text-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
body.dash-dark hr {
  border: 0;
  border-top: 1px solid var(--dd-border);
}

/* ---------- Cards ---------- */
body.dash-dark .card,
body.dash-dark .card-flat,
body.dash-dark .card-padless {
  background: var(--dd-surface);
  border: 1px solid var(--dd-border);
  color: var(--dd-text-soft);
  border-radius: 14px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.4);
}
body.dash-dark .card-flat { box-shadow: none; background: var(--dd-surface-3); }
body.dash-dark .card-header {
  background: var(--dd-surface-3);
  border-bottom: 1px solid var(--dd-border);
  padding: var(--s-4, 16px) var(--s-5, 20px);
  border-radius: 14px 14px 0 0;
}
body.dash-dark .card-header h3 { margin: 0; color: var(--dd-text); }

/* ---------- Stat cards (overview metrics) ---------- */
body.dash-dark .stat-card {
  background: var(--dd-surface);
  border: 1px solid var(--dd-border);
  border-radius: 12px;
  padding: var(--s-4, 16px) var(--s-5, 20px);
}
body.dash-dark .stat-card .label {
  color: var(--dd-text-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.dash-dark .stat-card .value {
  color: var(--dd-text);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

/* ---------- Tables ---------- */
body.dash-dark .table { color: var(--dd-text-soft); border-collapse: collapse; }
body.dash-dark .table thead th {
  background: var(--dd-surface-3);
  color: var(--dd-text-faint);
  border-bottom: 1px solid var(--dd-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 16px;
}
body.dash-dark .table tbody td {
  border-bottom: 1px solid var(--dd-border-soft);
  padding: 14px 16px;
  color: var(--dd-text-soft);
}
body.dash-dark .table tbody tr:hover td { background: rgba(255,255,255,0.025); }
body.dash-dark .table tbody tr:last-child td { border-bottom: 0; }
body.dash-dark .table strong { color: var(--dd-text); }
body.dash-dark .table a { color: var(--dd-accent); }
/* Table-cell buttons need explicit text color because `.table a`
   (above) otherwise overrides to orange — invisible against the orange
   .btn-primary background. Caught 2026-06-08 on the cross-share
   recent-assets table. */
body.dash-dark .table a.btn-primary,
body.dash-dark .table a.btn-primary:hover { color: #0a0a0a; }
body.dash-dark .table a.btn-secondary,
body.dash-dark .table a.btn-ghost { color: var(--dd-text-soft); }

/* ---------- Form inputs ---------- */
body.dash-dark .input,
body.dash-dark .select,
body.dash-dark .textarea,
body.dash-dark input[type=text],
body.dash-dark input[type=email],
body.dash-dark input[type=password],
body.dash-dark input[type=number],
body.dash-dark input[type=date],
body.dash-dark input[type=time],
body.dash-dark input[type=datetime-local],
body.dash-dark input[type=search],
body.dash-dark input[type=url],
body.dash-dark select,
body.dash-dark textarea {
  background: var(--dd-surface-2);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--dd-text);
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.dash-dark .input::placeholder,
body.dash-dark textarea::placeholder,
body.dash-dark input::placeholder { color: var(--dd-text-faint); }
body.dash-dark .input:focus,
body.dash-dark .select:focus,
body.dash-dark .textarea:focus,
body.dash-dark input:focus,
body.dash-dark select:focus,
body.dash-dark textarea:focus {
  outline: none;
  border-color: var(--dd-accent);
  box-shadow: 0 0 0 3px rgba(236,107,28,0.18);
}
body.dash-dark .field label,
body.dash-dark label {
  color: var(--dd-text-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.dash-dark .field .help,
body.dash-dark .help,
body.dash-dark span.help { color: var(--dd-text-muted); font-size: 12px; }

/* ---------- Buttons ---------- */
body.dash-dark .btn-primary {
  background: var(--dd-accent);
  color: #0a0a0a;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(236,107,28,0.5);
}
body.dash-dark .btn-primary:hover { filter: brightness(1.1); }
body.dash-dark .btn-secondary {
  background: var(--dd-surface-3);
  border: 1px solid var(--dd-border);
  color: var(--dd-text-soft);
  border-radius: 8px;
}
body.dash-dark .btn-secondary:hover {
  border-color: var(--dd-accent);
  color: var(--dd-text);
}
body.dash-dark .btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--dd-text-soft);
  border-radius: 8px;
}
body.dash-dark .btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--dd-text);
}
body.dash-dark .btn-block { width: 100%; }
body.dash-dark .btn-lg { padding: 14px 22px; font-size: 16px; }

/* ---------- Badges ---------- */
body.dash-dark .badge {
  background: var(--dd-surface-3);
  color: var(--dd-text-soft);
  border: 1px solid var(--dd-border);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
body.dash-dark .badge-success {
  background: rgba(34,197,94,0.12);
  color: #86efac;
  border-color: rgba(34,197,94,0.3);
}
body.dash-dark .badge-warning {
  background: rgba(217,119,6,0.12);
  color: #fcd34d;
  border-color: rgba(217,119,6,0.3);
}
body.dash-dark .badge-danger {
  background: rgba(220,38,38,0.12);
  color: #fca5a5;
  border-color: rgba(220,38,38,0.3);
}
body.dash-dark .badge-info {
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
  border-color: rgba(59,130,246,0.3);
}
body.dash-dark .badge-neutral {
  background: var(--dd-surface-3);
  color: var(--dd-text-muted);
  border-color: var(--dd-border);
}

/* ---------- Alerts ---------- */
body.dash-dark .alert {
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid;
}
body.dash-dark .alert-success {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.3);
  color: #d1fae5;
}
body.dash-dark .alert-warning {
  background: rgba(217,119,6,0.1);
  border-color: rgba(217,119,6,0.35);
  color: #fef3c7;
}
body.dash-dark .alert-danger {
  background: rgba(220,38,38,0.1);
  border-color: rgba(220,38,38,0.35);
  color: #fecaca;
}
body.dash-dark .alert-info {
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.3);
  color: #bfdbfe;
}

/* ---------- Empty states ---------- */
body.dash-dark .empty-state {
  text-align: center;
  color: var(--dd-text-muted);
}
body.dash-dark .empty-state h3 { color: var(--dd-text); }

/* ---------- Misc ---------- */
body.dash-dark .checkfield label { text-transform: none; letter-spacing: 0; color: var(--dd-text-soft); }
body.dash-dark .row.between { color: inherit; }
body.dash-dark .activity-cell { color: var(--dd-text-muted); }
body.dash-dark .activity-cell .activity-money { color: var(--dd-text); }

/* ============ AUTH SHELL (login + signup pages) ============
   Applies whenever body has landing-dark + the page uses .auth-shell. */
body.landing-dark .auth-shell {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* No background — inherits the #0a0a0a from body.landing-dark so the auth
     pages flow visually with the rest of the public site (homepage, services,
     legal pages all use the same base). */
  padding: var(--s-10, 40px) var(--s-5, 20px);
}
body.landing-dark .auth-card {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 44px);
  max-width: 440px;
  width: 100%;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
}
body.landing-dark .auth-card h1 {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2, 8px);
}
body.landing-dark .auth-card .lead {
  color: #94a3b8;
  font-size: 15px;
  margin: 0 0 var(--s-6, 24px);
}
body.landing-dark .auth-card .field { margin-bottom: var(--s-4, 16px); }
body.landing-dark .auth-card label {
  display: block;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
body.landing-dark .auth-card .input,
body.landing-dark .auth-card input[type=text],
body.landing-dark .auth-card input[type=email],
body.landing-dark .auth-card input[type=password] {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.12);
  color: #f8fafc;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.landing-dark .auth-card input:focus {
  outline: none;
  border-color: #ec6b1c;
  box-shadow: 0 0 0 3px rgba(236,107,28,0.18);
}
body.landing-dark .auth-card .help {
  color: #64748b;
  font-size: 12px;
}
body.landing-dark .auth-card .btn-primary {
  background: #ec6b1c !important;
  color: #0a0a0a !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 800;
  font-size: 16px;
  width: 100%;
  box-shadow: 0 8px 22px -8px rgba(236,107,28,0.6);
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
body.landing-dark .auth-card .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
body.landing-dark .auth-card .alert-danger {
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.4);
  color: #fecaca;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: var(--s-4, 16px);
  font-size: 14px;
}
body.landing-dark .auth-card .alert-info {
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.35);
  color: #bfdbfe;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: var(--s-4, 16px);
  font-size: 14px;
}
body.landing-dark .auth-card .muted { color: #64748b; }
body.landing-dark .auth-card a { color: #ec6b1c; }
body.landing-dark .auth-card a:hover { filter: brightness(1.15); }

/* Help page TOC sidebar */
body.dash-dark .help-toc a { color: var(--dd-text-muted); }
body.dash-dark .help-toc a:hover { background: rgba(255,255,255,0.04); color: var(--dd-text); }
body.dash-dark .help-toc .group-label { color: var(--dd-text-faint); }
body.dash-dark .help-content h2 {
  border-bottom-color: var(--dd-border);
}
body.dash-dark .help-content code { background: var(--dd-surface-2); }
body.dash-dark .help-content .callout {
  background: var(--dd-surface);
  border-left-color: var(--dd-accent);
}
body.dash-dark .help-content .callout.warn { background: rgba(217,119,6,0.06); border-left-color: #d97706; }
body.dash-dark .help-content table.steps td { border-bottom-color: var(--dd-border); color: var(--dd-text-soft); }
body.dash-dark .help-content table.steps td:first-child { color: var(--dd-accent); }

/* ===========================================================================
   Run Up / analytics components (.ru-*)
   These classes are used by admin/runup.php and other admin pages but were
   never given CSS, so those sections rendered as raw stacked text (and didn't
   reflow on mobile). Defined here once, globally, for the dark admin theme.

   LIQUID is applied ONLY to the hero strip (clamp-based fluid padding + number
   size) so it scales smoothly on phones; everything else uses conventional
   fixed sizing + a breakpoint, to avoid liquid distorting other elements.
   =========================================================================== */

/* --- Hero strip (LIQUID, hero only) --- */
body.dash-dark .ru-hero {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.6vw, 16px);
  margin: 20px 0 28px;
}
body.dash-dark .ru-hero-stat {
  flex: 1 1 clamp(130px, 22vw, 180px);
  border: 1px solid var(--dd-border);
  border-radius: 14px;
  padding: clamp(12px, 2.4vw, 20px);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
}
body.dash-dark .ru-hero-num {
  font-size: clamp(20px, 4.8vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dd-text);
}
body.dash-dark .ru-hero-lbl {
  font-size: clamp(10px, 1.4vw, 12px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dd-text-muted);
  margin-top: 6px;
}

/* --- Filter chips --- */
body.dash-dark .ru-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
body.dash-dark .ru-chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--dd-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dd-text-soft);
  text-decoration: none;
  background: var(--dd-surface);
}
body.dash-dark .ru-chip:hover { border-color: var(--dd-accent); color: var(--dd-text); }
body.dash-dark .ru-chip-active { background: var(--dd-accent); border-color: var(--dd-accent); color: #fff; }

/* --- Table --- */
body.dash-dark .ru-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--dd-border);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}
body.dash-dark .ru-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
body.dash-dark .ru-table th,
body.dash-dark .ru-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--dd-border);
  text-align: left;
  white-space: nowrap;
  color: var(--dd-text-soft);
}
body.dash-dark .ru-table tr:last-child td { border-bottom: none; }
body.dash-dark .ru-table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--dd-text-muted); background: rgba(255,255,255,0.02);
}
body.dash-dark .ru-table tbody tr:hover { background: rgba(255,255,255,0.025); }
body.dash-dark .ru-cell-sub { font-size: 11px; color: var(--dd-text-muted); margin-top: 2px; }

/* --- Post-count badges --- */
body.dash-dark .ru-post-counts { display: inline-flex; gap: 6px; align-items: center; }
body.dash-dark .ru-pc {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(148,163,184,0.15); color: var(--dd-text-muted);
}
body.dash-dark .ru-pc-live { background: rgba(52,211,153,0.15); color: #34d399; }
body.dash-dark .ru-pc-pending { background: rgba(251,191,36,0.15); color: #fbbf24; }
body.dash-dark .ru-pc-failed { background: rgba(248,113,113,0.15); color: #f87171; }
body.dash-dark .ru-status-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em;
}

/* --- Mobile breakpoint (conventional, non-liquid) --- */
@media (max-width: 640px) {
  body.dash-dark .ru-hero-stat { flex: 1 1 calc(50% - 8px); }
}

/* ===========================================================================
   MOBILE ADMIN NAV
   app.css hides .dash-sidebar entirely below 960px with no replacement, so the
   full admin menu (Affiliates, Audience, Cross-share, Run Up, Social analytics,
   Support inbox, …) becomes unreachable on a phone. Instead of hiding it, we
   turn the sidebar into a horizontal, scrollable pill nav pinned above the
   content — every destination stays one tap away.
   =========================================================================== */
@media (max-width: 960px) {
  body.dash-dark .dash-shell { display: block; }
  body.dash-dark .dash-sidebar {
    display: block;
    width: 100%;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--dd-border);
    margin-bottom: 16px;
    padding-bottom: 8px;
  }
  /* Hide the "BuzzHive Admin / username" header block to save vertical space. */
  body.dash-dark .dash-sidebar > div:first-child { display: none; }
  /* Lay the menu out as a horizontal scrolling strip of pills. */
  body.dash-dark .dash-sidebar .menu {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 4px 2px 8px;
    -webkit-overflow-scrolling: touch;
  }
  body.dash-dark .dash-sidebar .menu a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
    border: 1px solid var(--dd-border);
    border-radius: 999px;
    font-size: 13px;
  }
  /* The inline "Account" group label doesn't make sense in a horizontal row. */
  body.dash-dark .dash-sidebar .menu .group-label { display: none; }
}