/* ============================================================================
 * dashboard-dark.css — page-specific dark overrides for radar/public/dashboard.php
 * ----------------------------------------------------------------------------
 * Loaded AFTER radar-dark.css. radar-dark.css supplies the design tokens
 * (--d-*) + the search/people/company component vocabulary; this file covers
 * ONLY what radar-dark.css can't reach generically on the account dashboard:
 *
 *   1. The bespoke dashboard component classes (.stat-card, .sl-*, .ri-*,
 *      .plan-*, .nav-item, .section-*, .upgrade-cta, .shortlist-row,
 *      .progress-track, .skeleton, .spinner, .ws-pill, .plan-table).
 *   2. The page's inline Tailwind-Play hardcoded LIGHT hex utilities
 *      (bg-white / bg-[#f6f3ee] / border-[#d0c6ab] / text-[#1c1c19] etc.)
 *      that bake light surfaces straight into the markup.
 *
 * All rules are scoped under html[data-theme="dark"] so light mode is untouched.
 * Tokens (--d-*) come from radar-dark.css :root[data-theme="dark"].
 * ==========================================================================*/

/* ── 0. Roboto for parity (radar-dark.css already sets the global font, this
 *      pins the dashboard's bespoke headings which hardcode Manrope/Inter). ─ */
html[data-theme="dark"] #dash-main,
html[data-theme="dark"] aside,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .sl-hd h1,
html[data-theme="dark"] .ri-hd h1 { font-family: 'Roboto', 'Manrope', sans-serif; }

/* ============================================================================
 * 1. GENERIC TAILWIND HEX UTILITIES (the page bakes light surfaces inline)
 * ==========================================================================*/

/* Light card / panel surfaces -> dark glass-ish surface */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-\[\#fcf9f4\] { background-color: var(--d-surface-solid) !important; }

/* Nested / "low" surfaces (f6f3ee = surface-container-low, faf8f4/faf8f1 hovers) */
html[data-theme="dark"] .bg-\[\#f6f3ee\],
html[data-theme="dark"] .bg-\[\#faf8f4\],
html[data-theme="dark"] .bg-\[\#e5e2dd\] { background-color: var(--d-surface-low) !important; }

/* The dark sidebar / top-of-page already use #1c1c19 — keep, just deepen */
html[data-theme="dark"] aside.bg-\[\#1c1c19\] { background-color: #161613 !important; }

/* Sticky top bar (bg-[#fcf9f4]/90) */
html[data-theme="dark"] .sticky.top-0 {
  background-color: rgba(20,20,18,0.9) !important;
  border-bottom-color: var(--d-border-glass) !important;
}

/* Borders: the light parchment border #d0c6ab (all opacities) -> glass border */
html[data-theme="dark"] [class*="border-\[\#d0c6ab\]"] { border-color: var(--d-border-glass) !important; }
html[data-theme="dark"] [class*="border-\[\#f0ede8\]"] { border-color: var(--d-border-faint) !important; }

/* Primary brand gold borders (#705d00) -> accent at low opacity */
html[data-theme="dark"] [class*="border-\[\#705d00\]"] { border-color: var(--d-accent-soft) !important; }

/* Text colors: dark ink (#1c1c19) and brown (#4d4732) -> off-white scale.
 * The opacity-modified utilities (/30 /35 /40 /50 /60 /70) all share the
 * same base hue, so a single attribute match per base hue covers them. */
html[data-theme="dark"] [class*="text-\[\#1c1c19\]"] { color: var(--d-text) !important; }
html[data-theme="dark"] [class*="text-\[\#1c1c19\]\/30"],
html[data-theme="dark"] [class*="text-\[\#1c1c19\]\/35"],
html[data-theme="dark"] [class*="text-\[\#1c1c19\]\/40"] { color: var(--d-text-muted) !important; }
html[data-theme="dark"] [class*="text-\[\#1c1c19\]\/50"],
html[data-theme="dark"] [class*="text-\[\#1c1c19\]\/60"],
html[data-theme="dark"] [class*="text-\[\#1c1c19\]\/70"] { color: var(--d-text-3) !important; }
html[data-theme="dark"] [class*="text-\[\#4d4732\]"] { color: var(--d-text-2) !important; }
html[data-theme="dark"] [class*="text-\[\#4d4732\]\/30"],
html[data-theme="dark"] [class*="text-\[\#4d4732\]\/40"],
html[data-theme="dark"] [class*="text-\[\#4d4732\]\/50"],
html[data-theme="dark"] [class*="text-\[\#4d4732\]\/55"],
html[data-theme="dark"] [class*="text-\[\#4d4732\]\/60"] { color: var(--d-text-muted) !important; }

/* Brand-gold accents (#705d00) -> the single yellow accent */
html[data-theme="dark"] [class*="text-\[\#705d00\]"] { color: var(--d-accent) !important; }

/* Solid brand-gold fills (buttons, avatars) -> accent w/ dark ink */
html[data-theme="dark"] .bg-\[\#705d00\] { background-color: var(--d-accent) !important; color: var(--d-accent-ink) !important; }
html[data-theme="dark"] .hover\:bg-\[\#5a4b00\]:hover,
html[data-theme="dark"] .hover\:bg-\[\#5a4a00\]:hover { background-color: #c9cb5f !important; }
html[data-theme="dark"] .bg-\[\#705d00\] .material-symbols-outlined,
html[data-theme="dark"] .bg-\[\#705d00\] span { color: var(--d-accent-ink) !important; }

/* Pastel stat-icon chips (blue/purple/green-50) -> faint glass */
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-\[\#ffd700\]\/15 { background-color: var(--d-surface-low) !important; }

/* Hover-on-light-row utilities */
html[data-theme="dark"] .hover\:bg-\[\#fcf9f4\]:hover,
html[data-theme="dark"] .hover\:bg-\[\#faf8f4\]:hover { background-color: var(--d-surface-lower) !important; }

/* Generic shadows read as flat washes on dark; soften to the card shadow */
html[data-theme="dark"] .shadow-sm { box-shadow: var(--d-shadow-card) !important; }

/* ============================================================================
 * 2. BESPOKE COMPONENT CLASSES
 * ==========================================================================*/

/* ── Sidebar nav items ── */
html[data-theme="dark"] .nav-item { color: rgba(241,239,232,0.55); }
html[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.07); color: var(--d-text); }
html[data-theme="dark"] .nav-item.active-nav { background: var(--d-accent-tab-bg); color: var(--d-accent); }

/* ── Product switcher pills ── */
html[data-theme="dark"] .ws-pill { color: rgba(241,239,232,0.5); }
html[data-theme="dark"] .ws-pill:hover { color: var(--d-text); }
html[data-theme="dark"] .ws-pill.ws-active { background: var(--d-accent); color: var(--d-accent-ink); box-shadow: var(--d-shadow-btn); }

/* ── Plan badges ── */
html[data-theme="dark"] .plan-free     { background: var(--d-surface-low); color: var(--d-text-2); }
html[data-theme="dark"] .plan-pro      { background: var(--d-accent-tab-bg); color: var(--d-accent); border-color: var(--d-accent-tab-line); }
html[data-theme="dark"] .plan-business { background: rgba(108,199,155,0.14); color: var(--d-pos); border-color: rgba(108,199,155,0.34); }

/* ── Stat cards (glass surface + accent hairline parity) ── */
html[data-theme="dark"] .stat-card {
  position: relative;
  background: var(--d-surface-grad);
  border: 1px solid var(--d-border-glass);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow-card);
  backdrop-filter: var(--d-blur); -webkit-backdrop-filter: var(--d-blur);
}
html[data-theme="dark"] .stat-card::before {
  content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 1px;
  background: var(--d-hairline); opacity: 0.55;
}
html[data-theme="dark"] .stat-card:hover {
  border-color: var(--d-accent-soft);
  background: var(--d-surface-grad-hover);
  box-shadow: 0 10px 36px rgba(0,0,0,0.4);
}

/* ── Progress / meter tracks + fills ── */
html[data-theme="dark"] .progress-track { background: var(--d-rail); }
html[data-theme="dark"] #searches-progress,
html[data-theme="dark"] [id$="-bar"].bg-\[\#705d00\] { background: var(--d-heatbar) !important; }

/* ── Skeleton + spinners ── */
html[data-theme="dark"] .skeleton { background: var(--d-surface-low); }
html[data-theme="dark"] .spinner { border-color: rgba(222,224,115,0.25); border-top-color: var(--d-accent); }

/* ── Section headings ── */
html[data-theme="dark"] .section-title { color: var(--d-text); }
html[data-theme="dark"] .section-sub   { color: var(--d-text-muted); }

/* ── Plan comparison table ── */
html[data-theme="dark"] .plan-table th,
html[data-theme="dark"] .plan-table td { border-bottom-color: var(--d-border-faint); }
html[data-theme="dark"] .plan-table th { color: var(--d-text-muted); background: var(--d-surface-low); }
html[data-theme="dark"] .plan-check { color: var(--d-pos); }
html[data-theme="dark"] .plan-cross { color: var(--d-text-muted); }

/* ── Upgrade CTA card (already dark gradient — give it the accent edge) ── */
html[data-theme="dark"] .upgrade-cta,
html[data-theme="dark"] .ri-upsell {
  position: relative;
  background: linear-gradient(135deg, #23231f 0%, #161613 100%);
  border: 1px solid var(--d-border-glass);
}
html[data-theme="dark"] .upgrade-cta::before,
html[data-theme="dark"] .ri-upsell::before {
  content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 1px;
  background: var(--d-hairline);
}
html[data-theme="dark"] .btn-upgrade-sm,
html[data-theme="dark"] .ri-upsell a.cta {
  background: var(--d-accent) !important; color: var(--d-accent-ink) !important;
  box-shadow: var(--d-shadow-btn);
}
html[data-theme="dark"] .btn-upgrade-sm:hover { box-shadow: 0 5px 16px rgba(222,224,115,0.35); }

/* ============================================================================
 * 3. SHORTLIST DASHBOARD (.sl-*)
 * ==========================================================================*/
html[data-theme="dark"] .sl-hd h1 { color: var(--d-text); }
html[data-theme="dark"] .sl-hd p  { color: var(--d-text-muted); }
html[data-theme="dark"] .sl-hd .sl-count { color: var(--d-accent); }

html[data-theme="dark"] .sl-btn {
  background: var(--d-control-bg); border-color: var(--d-border-input); color: var(--d-text-2);
}
html[data-theme="dark"] .sl-btn:hover { background: var(--d-surface-lower); border-color: var(--d-accent-soft); color: var(--d-accent); }
html[data-theme="dark"] .sl-btn[disabled]:hover { background: var(--d-control-bg); border-color: var(--d-border-input); color: var(--d-text-2); }
html[data-theme="dark"] .sl-btn.sl-primary { background: var(--d-accent); color: var(--d-accent-ink); border-color: var(--d-accent); }
html[data-theme="dark"] .sl-btn.sl-primary:hover { background: #c9cb5f; border-color: #c9cb5f; color: var(--d-accent-ink); }
html[data-theme="dark"] .sl-btn.sl-danger { color: var(--d-neg); border-color: rgba(212,131,111,0.3); }
html[data-theme="dark"] .sl-btn.sl-danger:hover { background: rgba(212,131,111,0.1); border-color: var(--d-neg); color: var(--d-neg); }

html[data-theme="dark"] .sl-empty {
  background: var(--d-surface-grad); border: 1px dashed var(--d-border-glass); color: var(--d-text-2);
}
html[data-theme="dark"] .sl-empty .material-symbols-outlined { color: var(--d-accent-soft); }
html[data-theme="dark"] .sl-empty h3 { color: var(--d-text); }
html[data-theme="dark"] .sl-empty p  { color: var(--d-text-muted); }
html[data-theme="dark"] .sl-empty a  { color: var(--d-accent); }

html[data-theme="dark"] .sl-table-wrap {
  background: var(--d-surface-grad); border: 1px solid var(--d-border-glass);
  box-shadow: var(--d-shadow-card);
}
html[data-theme="dark"] .sl-table thead th {
  background: var(--d-surface-low); color: var(--d-text-muted); border-bottom-color: var(--d-border-glass);
}
html[data-theme="dark"] .sl-table thead th:hover { background: var(--d-surface-lower); }
html[data-theme="dark"] .sl-table tbody tr { border-bottom-color: var(--d-border-faint); }
html[data-theme="dark"] .sl-table tbody tr:hover { background: var(--d-surface-low); }
html[data-theme="dark"] .sl-table .sl-logo { background: var(--d-surface-low); border-color: var(--d-border-glass); }
html[data-theme="dark"] .sl-table .sl-logo-fallback { background: var(--d-accent); color: var(--d-accent-ink); }
html[data-theme="dark"] .sl-table .sl-name { color: var(--d-text); }
html[data-theme="dark"] .sl-table .sl-name:hover { color: var(--d-accent); }
html[data-theme="dark"] .sl-table .sl-w { color: var(--d-text-muted); }
html[data-theme="dark"] .sl-chip { background: var(--d-chip-bg); border-color: var(--d-border-glass); color: var(--d-text-2); }
html[data-theme="dark"] .sl-chip.sl-locked-chip { background: var(--d-surface-low); color: var(--d-text-muted); }
html[data-theme="dark"] .sl-ind { color: var(--d-text-2); }
html[data-theme="dark"] .sl-ind.has { color: var(--d-pos); }
html[data-theme="dark"] .sl-ind .sl-count-pill { background: var(--d-pos); color: var(--d-pos-bg); }
html[data-theme="dark"] .sl-actions-cell button {
  background: none; border-color: var(--d-border-glass); color: var(--d-text-2);
}
html[data-theme="dark"] .sl-actions-cell button:hover { background: var(--d-surface-lower); border-color: var(--d-accent-soft); color: var(--d-accent); }
html[data-theme="dark"] .sl-actions-cell button.pushed { background: var(--d-pos-bg); border-color: var(--d-pos); color: var(--d-pos); }
html[data-theme="dark"] .sl-actions-cell button.failed { background: var(--d-neg-bg); border-color: var(--d-neg); color: var(--d-neg); }
html[data-theme="dark"] .sl-actions-cell button.removebtn { color: var(--d-neg); border-color: rgba(212,131,111,0.2); }
html[data-theme="dark"] .sl-actions-cell button.removebtn:hover { background: var(--d-neg-bg); border-color: var(--d-neg); }
html[data-theme="dark"] .sl-loader { border-color: rgba(222,224,115,0.25); border-top-color: var(--d-accent); }
html[data-theme="dark"] .sl-toast {
  background: var(--d-surface-solid); border-color: var(--d-border-glass); color: var(--d-text);
  box-shadow: var(--d-shadow-card);
}
html[data-theme="dark"] .sl-toast.ok  { border-color: var(--d-pos); color: var(--d-pos); }
html[data-theme="dark"] .sl-toast.err { border-color: var(--d-neg); color: var(--d-neg); }

/* ============================================================================
 * 4. INTEGRATIONS (.ri-*)
 * ==========================================================================*/
html[data-theme="dark"] .ri-hd h1 { color: var(--d-text); }
html[data-theme="dark"] .ri-hd p  { color: var(--d-text-muted); }
html[data-theme="dark"] .ri-upsell h3 { color: var(--d-text); }
html[data-theme="dark"] .ri-upsell p  { color: var(--d-text-3); }

html[data-theme="dark"] .ri-card {
  position: relative;
  background: var(--d-surface-grad); border: 1px solid var(--d-border-glass);
  box-shadow: var(--d-shadow-card);
  backdrop-filter: var(--d-blur); -webkit-backdrop-filter: var(--d-blur);
}
html[data-theme="dark"] .ri-card::before {
  content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 1px;
  background: var(--d-hairline); opacity: 0.5;
}
html[data-theme="dark"] .ri-card:hover { border-color: var(--d-accent-soft); box-shadow: 0 10px 32px rgba(0,0,0,0.4); }
html[data-theme="dark"] .ri-card h3 { color: var(--d-text); }
html[data-theme="dark"] .ri-card .sub { color: var(--d-text-muted); }
html[data-theme="dark"] .ri-status { color: var(--d-text-muted); }
html[data-theme="dark"] .ri-status .dot { background: var(--d-text-muted); }
html[data-theme="dark"] .ri-status.connected { color: var(--d-pos); }
html[data-theme="dark"] .ri-status.connected .dot { background: var(--d-pos); }
html[data-theme="dark"] .ri-btn.primary { background: var(--d-accent); color: var(--d-accent-ink); }
html[data-theme="dark"] .ri-btn.primary:hover { background: #c9cb5f; }
html[data-theme="dark"] .ri-btn.ghost { background: var(--d-control-bg); color: var(--d-text-2); border-color: var(--d-border-input); }
html[data-theme="dark"] .ri-btn.ghost:hover { background: var(--d-surface-lower); }
html[data-theme="dark"] .ri-btn.danger { background: transparent; color: var(--d-neg); border-color: rgba(212,131,111,0.35); }
html[data-theme="dark"] .ri-btn.danger:hover { background: rgba(212,131,111,0.08); }
html[data-theme="dark"] .ri-btn .spinner { border-color: rgba(28,28,26,0.35); border-top-color: var(--d-accent-ink); }
html[data-theme="dark"] .ri-scopes { background: var(--d-surface-low); color: var(--d-text-2); }
html[data-theme="dark"] .ri-scopes b { color: var(--d-text); }
html[data-theme="dark"] .ri-toast {
  background: var(--d-surface-solid); border-color: var(--d-border-glass); color: var(--d-text);
  box-shadow: var(--d-shadow-card);
}
html[data-theme="dark"] .ri-toast.ok  { border-color: var(--d-pos); color: var(--d-pos); }
html[data-theme="dark"] .ri-toast.err { border-color: var(--d-neg); color: var(--d-neg); }

/* ============================================================================
 * 5. SHORTLIST/RC ROWS + MISC INLINE-STYLED BLOCKS
 * ==========================================================================*/
html[data-theme="dark"] .shortlist-row { border-bottom-color: var(--d-border-faint); }
html[data-theme="dark"] .shortlist-row:hover { background: var(--d-surface-low); }

/* Inputs/selects/textarea in Settings + Market.ai launcher are inline-styled
 * (bg-[#f6f3ee] border-[#d0c6ab]); make them readable on dark. */
html[data-theme="dark"] #dash-main input[type="text"],
html[data-theme="dark"] #dash-main input[type="email"],
html[data-theme="dark"] #dash-main input[type="password"],
html[data-theme="dark"] #dash-main textarea,
html[data-theme="dark"] #dash-main select {
  background: var(--d-control-bg) !important; color: var(--d-text) !important;
  border-color: var(--d-border-input) !important;
}
html[data-theme="dark"] #dash-main input::placeholder,
html[data-theme="dark"] #dash-main textarea::placeholder { color: var(--d-text-muted); }
html[data-theme="dark"] #dash-main input[readonly] { color: var(--d-text-muted) !important; }

/* Market.ai "Open Market.ai" button already uses #dee073 — keep ink legible */
html[data-theme="dark"] .btn-upgrade-sm[style*="dee073"] { color: var(--d-accent-ink) !important; }

/* Red destructive text links (Sign Out etc.) */
html[data-theme="dark"] .text-red-400,
html[data-theme="dark"] .text-red-500,
html[data-theme="dark"] [class*="text-red-400\/70"] { color: var(--d-neg) !important; }

/* ===== market.ai polish (2026-06-02) ===== */

/* Market.ai upsell banner inline light gradient (#fff8d8 -> #ffe98f) -> dark gradient */
html[data-theme="dark"] [style*="#fff8d8"][style*="#ffe98f"] {
  background: linear-gradient(135deg, #23231f 0%, #161613 100%) !important;
  color: var(--d-text) !important;
}

/* .stat-card hover lift (border/bg hover already present above; add transform + transition) */
html[data-theme="dark"] .stat-card {
  transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease !important;
}
html[data-theme="dark"] .stat-card:hover { transform: translateY(-2px) !important; }

/* Integrations tab cards .ri-card hover lift */
html[data-theme="dark"] .ri-card {
  transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease !important;
}
html[data-theme="dark"] .ri-card:hover {
  border-color: rgba(222,224,115,0.35) !important;
  transform: translateY(-2px) !important;
  background: var(--d-surface-grad-hover) !important;
}

/* .ri-upsell a.cta light brand gradient (#705d00 -> #ffd700) -> solid accent */
html[data-theme="dark"] .ri-upsell a.cta {
  background: var(--d-accent) !important;
  background-image: none !important;
  color: var(--d-accent-ink) !important;
  box-shadow: var(--d-shadow-btn) !important;
}
html[data-theme="dark"] .ri-upsell a.cta:hover {
  background: #c9cb5f !important;
  box-shadow: 0 5px 16px rgba(222,224,115,0.35) !important;
}

/* .ri-grid gap */
html[data-theme="dark"] .ri-grid { gap: 20px !important; }

/* .ri-card.coming opacity hides dark-ink text — restore legible text */
html[data-theme="dark"] .ri-card.coming h3 { color: var(--d-text) !important; }
html[data-theme="dark"] .ri-card.coming .sub { color: var(--d-text-2) !important; }

/* .ri-btn.ghost:hover border */
html[data-theme="dark"] .ri-btn.ghost:hover { border-color: var(--d-accent-soft) !important; }