/* ═══════════════════════════════════════════════════════════════
   SwisChat — Theme Variables & Light-mode Overrides
   Loaded AFTER app.css. Defines semantic design tokens for
   Dark / Light modes and comprehensive component overrides.
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   1.  SEMANTIC TOKENS  (dark = default)
   ────────────────────────────────────────── */
:root {
  /* Brand accent — constant across both themes */
  --accent:        #dc2626;
  --accent-hover:  #b91c1c;
  --accent-glow:   rgba(220, 38, 38, 0.18);
  --accent-soft:   rgba(220, 38, 38, 0.10);
  --accent-border: rgba(220, 38, 38, 0.28);
  --accent-text:   #ffffff;

  /* Surfaces */
  --color-bg-page:       #0f0f0f;
  --color-bg-card:       #111111;
  --color-bg-elevated:   #161616;
  --color-bg-input:      rgba(255, 255, 255, 0.05);
  --color-bg-hover:      #1a1a1a;
  --color-bg-active:     #222222;
  --color-bg-overlay:    rgba(0, 0, 0, 0.6);
  --color-bg-navbar:     rgba(17, 17, 17, 0.95);

  /* Text */
  --color-text-primary:   #ffffff;
  --color-text-secondary: #a1a1aa;
  --color-text-muted:     #6b7280;
  --color-text-disabled:  #52525b;
  --color-text-inverse:   #09090b;
  --color-text-on-accent: #ffffff;

  /* Borders */
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.10);
  --color-border-strong:  rgba(255, 255, 255, 0.14);

  /* Scrollbar */
  --scrollbar-track:       #111111;
  --scrollbar-thumb:       #333333;
  --scrollbar-thumb-hover: #444444;
}

/* ──────────────────────────────────────────
   2.  LIGHT-MODE SEMANTIC OVERRIDES
   ────────────────────────────────────────── */
html[data-theme="light"] {
  /* ── Surfaces ── */
  --color-bg-page:     #f4f4f5;
  --color-bg-card:     #ffffff;
  --color-bg-elevated: #fafafa;
  --color-bg-input:    #ffffff;
  --color-bg-hover:    #f1f1f3;
  --color-bg-active:   #e4e4e7;
  --color-bg-overlay:  rgba(0, 0, 0, 0.35);
  --color-bg-navbar:   rgba(255, 255, 255, 0.95);

  /* ── Text ── */
  --color-text-primary:   #09090b;
  --color-text-secondary: #52525b;
  --color-text-muted:     #71717a;
  --color-text-disabled:  #d4d4d8;
  --color-text-inverse:   #ffffff;

  /* ── Borders ── */
  --color-border-subtle:  rgba(0, 0, 0, 0.07);
  --color-border-default: rgba(0, 0, 0, 0.12);
  --color-border-strong:  rgba(0, 0, 0, 0.18);

  /* ── Scrollbar ── */
  --scrollbar-track:       #f1f1f3;
  --scrollbar-thumb:       #d4d4d8;
  --scrollbar-thumb-hover: #a1a1aa;

  /* ───────────────────────────────────────
     Override existing app.css :root vars
     so every var(--xxx) reference adapts
     ─────────────────────────────────────── */

  /* Neutrals (background) */
  --black:     #ffffff;
  --ink:       #f4f4f5;
  --dark:      #f4f4f5;
  --dark-card: #ffffff;
  --dark-2:    #fafafa;
  --dark-3:    #f1f1f3;

  /* Neutrals (text) – these adapt contextually */
  --mid:       #52525b;
  --muted:     #71717a;

  /* Light/Paper – keep same */
  --light:     #f3f4f6;
  --light2:    #e5e7eb;
  --paper:     #f4f4f5;
  --paper2:    #ececee;
  --white:     #ffffff;

  /* Borders */
  --border:       rgba(0, 0, 0, 0.10);
  --border2:      rgba(0, 0, 0, 0.14);
  --border-dark:  rgba(0, 0, 0, 0.08);
  --border-dark2: rgba(0, 0, 0, 0.12);

  /* Glass */
  --glass:      rgba(255, 255, 255, 0.92);
  --glass-dark: rgba(255, 255, 255, 0.95);

  /* Shadows – softer in light mode */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl:     0 20px 60px rgba(0, 0, 0, 0.10);
  --shadow-red:    0 4px 24px rgba(220, 38, 38, 0.20);
  --shadow-red-lg: 0 8px 40px rgba(220, 38, 38, 0.25);
}

/* ──────────────────────────────────────────
   3.  GLOBAL THEME TRANSITION
   ────────────────────────────────────────── */
html[data-theme] body,
html[data-theme] .navbar,
html[data-theme] .mobile-drawer,
html[data-theme] .sidebar,
html[data-theme] .dash-sidebar,
html[data-theme] .dash-main,
html[data-theme] .dashboard-wrap,
html[data-theme] .auth-page,
html[data-theme] .auth-left-panel,
html[data-theme] .auth-right-panel,
html[data-theme] .auth-form-card,
html[data-theme] .setup-page,
html[data-theme] .setup-card,
html[data-theme] .dash-card,
html[data-theme] .sticky-bottom-bar,
html[data-theme] .field-input,
html[data-theme] .field-textarea,
html[data-theme] .field-select,
html[data-theme] .toast,
html[data-theme] .modal-card,
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select {
  transition: background-color 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

/* ──────────────────────────────────────────
   4.  SCROLLBAR THEMING
   ────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ──────────────────────────────────────────
   5.  THEME TOGGLE COMPONENT
   ────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 0;
}
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.theme-btn:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-hover);
}
.theme-btn.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
.theme-btn.active:hover {
  background: var(--accent-hover);
  color: #ffffff;
}

/* ══════════════════════════════════════════
   6.  COMPREHENSIVE LIGHT-MODE COMPONENT
       OVERRIDES
       (catch every hard-coded dark value
        so all pages render correctly)
   ══════════════════════════════════════════ */

/* ── Body ── */
html[data-theme="light"] body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}
html[data-theme="light"] body.dark-theme {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}

/* ── Navbar ── */
html[data-theme="light"] .navbar,
html[data-theme="light"] .navbar.dark-nav {
  background: var(--color-bg-navbar);
  border-bottom-color: var(--color-border-default);
}
html[data-theme="light"] .navbar.scrolled,
html[data-theme="light"] .navbar.dark-nav.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .nav-logo-text,
html[data-theme="light"] .navbar.dark-nav .nav-logo-text {
  color: var(--color-text-primary);
}
html[data-theme="light"] .nav-link,
html[data-theme="light"] .navbar.dark-nav .nav-link {
  color: var(--color-text-muted);
}
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .navbar.dark-nav .nav-link:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
html[data-theme="light"] .nav-toggle,
html[data-theme="light"] .navbar.dark-nav .nav-toggle {
  border-color: var(--color-border-default);
  background: var(--color-bg-card);
  color: var(--color-text-muted);
}

/* ── Mobile Drawer ── */
html[data-theme="light"] .mobile-drawer,
html[data-theme="light"] .mobile-drawer.dark-drawer {
  background: var(--color-bg-card);
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .mobile-drawer.dark-drawer .drawer-header {
  border-bottom-color: var(--color-border-default);
}
html[data-theme="light"] .mobile-drawer.dark-drawer .drawer-close {
  border-color: var(--color-border-default);
  background: var(--color-bg-hover);
  color: var(--color-text-muted);
}
html[data-theme="light"] .mobile-drawer.dark-drawer .drawer-link {
  color: var(--color-text-secondary);
}
html[data-theme="light"] .mobile-drawer.dark-drawer .drawer-footer {
  border-top-color: var(--color-border-default);
}

/* ── Sticky bottom bar ── */
html[data-theme="light"] .sticky-bottom-bar {
  background: var(--color-bg-navbar);
  border-top-color: var(--color-border-default);
}
html[data-theme="light"] .sticky-bar-item {
  color: var(--color-text-muted);
}

/* ── Auth Pages ── */
html[data-theme="light"] .auth-left-panel {
  background: var(--color-bg-page);
}
html[data-theme="light"] .auth-left-inner h2 {
  color: var(--color-text-primary);
}
html[data-theme="light"] .auth-left-inner p {
  color: var(--color-text-muted);
}
html[data-theme="light"] .auth-perk {
  color: var(--color-text-secondary);
}
html[data-theme="light"] .auth-right-panel {
  background: var(--color-bg-elevated);
}
html[data-theme="light"] .auth-form-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] .auth-form-card h3 {
  color: var(--color-text-primary);
}
html[data-theme="light"] .auth-form-card .sub {
  color: var(--color-text-muted);
}

/* ── Form Elements ── */
html[data-theme="light"] .field-label,
html[data-theme="light"] .dark-theme .field-label {
  color: var(--color-text-primary);
}
html[data-theme="light"] .field-input,
html[data-theme="light"] .field-textarea,
html[data-theme="light"] .field-select,
html[data-theme="light"] .dark-theme .field-input,
html[data-theme="light"] .dark-theme .field-textarea,
html[data-theme="light"] .dark-theme .field-select {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
html[data-theme="light"] .field-input::placeholder,
html[data-theme="light"] .dark-theme .field-input::placeholder {
  color: var(--color-text-muted);
}
html[data-theme="light"] .color-text,
html[data-theme="light"] .dark-theme .color-text {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
html[data-theme="light"] .radio-option,
html[data-theme="light"] .dark-theme .radio-option {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}
html[data-theme="light"] .checkbox-option,
html[data-theme="light"] .dark-theme .checkbox-option {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}
html[data-theme="light"] .list-item input,
html[data-theme="light"] .dark-theme .list-item input {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
html[data-theme="light"] .toggle-slider,
html[data-theme="light"] .dark-theme .toggle-slider {
  background: var(--light2);
}
html[data-theme="light"] .add-item-btn,
html[data-theme="light"] .dark-theme .add-item-btn {
  border-color: var(--color-border-default);
  color: var(--color-text-muted);
}

/* ── Setup Wizard ── */
html[data-theme="light"] .setup-page {
  background: var(--color-bg-page);
}
html[data-theme="light"] .setup-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .setup-card-title {
  color: var(--color-text-primary);
}
html[data-theme="light"] .setup-card-sub {
  color: var(--color-text-muted);
}
html[data-theme="light"] .setup-step {
  color: var(--color-text-disabled);
}
html[data-theme="light"] .setup-step-num {
  border-color: var(--color-border-default);
}
html[data-theme="light"] .setup-connector {
  background: var(--color-border-default);
}

/* ── Dashboard ── */
html[data-theme="light"] .dashboard-wrap {
  background: var(--color-bg-page);
}
html[data-theme="light"] .dash-sidebar {
  background: var(--color-bg-card);
  border-right-color: var(--color-border-default);
}
html[data-theme="light"] .dash-sidebar-top {
  border-bottom-color: var(--color-border-default);
}
html[data-theme="light"] .tab-header {
  color: var(--color-text-secondary);
}
html[data-theme="light"] .tab-header:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
html[data-theme="light"] .tab-header.active,
html[data-theme="light"] .sidebar-tab.active .tab-header {
  background: var(--accent-soft);
  color: var(--accent);
}
html[data-theme="light"] .tab-arrow {
  color: var(--color-text-disabled);
}
html[data-theme="light"] .sub-link {
  color: var(--color-text-muted);
}
html[data-theme="light"] .sub-link::before {
  background: var(--color-border-default);
}
html[data-theme="light"] .sub-link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}
html[data-theme="light"] .sub-link.active {
  color: var(--accent);
  background: var(--accent-soft);
}
html[data-theme="light"] .dash-main {
  background: var(--color-bg-page);
}
html[data-theme="light"] .dash-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .dash-section-title {
  color: var(--color-text-primary);
}
html[data-theme="light"] .field-hint {
  color: var(--color-text-muted);
}

/* ── Breadcrumbs & text in dashboard ── */
html[data-theme="light"] .dash-main [style*="rgba(255,255,255"],
html[data-theme="light"] .dash-main a[style*="rgba(255,255,255"] {
  color: var(--color-text-muted) !important;
}
html[data-theme="light"] #dash-breadcrumb-name {
  color: var(--color-text-secondary) !important;
}
html[data-theme="light"] #save-status {
  color: var(--color-text-muted) !important;
}

/* ── Panel loading ── */
html[data-theme="light"] #panel-loading {
  background: var(--color-bg-card);
}
html[data-theme="light"] .loading-text {
  color: var(--color-text-primary);
}
html[data-theme="light"] .loading-sub {
  color: var(--color-text-muted);
}

/* ── Dashboard error ── */
html[data-theme="light"] .dash-error-container {
  background: var(--color-bg-card);
}
html[data-theme="light"] .dash-error-text {
  color: var(--color-text-primary);
}
html[data-theme="light"] .dash-error-sub {
  color: var(--color-text-muted);
}

/* ── My Bots Page ── */
html[data-theme="light"] .mybots-page,
html[data-theme="light"] .bots-page {
  background: var(--color-bg-page);
}
html[data-theme="light"] .bot-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .bot-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
}

/* ── History Page ── */
html[data-theme="light"] .history-page {
  background: var(--color-bg-page);
}
html[data-theme="light"] .history-session {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .history-session:hover {
  background: var(--color-bg-hover);
}

/* ── Analytics Page ── */
html[data-theme="light"] .analytics-page {
  background: var(--color-bg-page);
}
html[data-theme="light"] .stat-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .stat-card-label {
  color: var(--color-text-muted);
}
html[data-theme="light"] .stat-card-value {
  color: var(--color-text-primary);
}

/* ── Download Page ── */
html[data-theme="light"] .download-page {
  background: var(--color-bg-page);
}
html[data-theme="light"] .download-hero {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .download-hero h1 {
  color: var(--color-text-primary);
}
html[data-theme="light"] .download-hero p {
  color: var(--color-text-muted);
}
html[data-theme="light"] .script-block {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
html[data-theme="light"] .script-block code {
  color: var(--color-text-primary);
}
html[data-theme="light"] .install-step {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .install-step-text {
  color: var(--color-text-secondary) !important;
}
html[data-theme="light"] .install-step-text strong {
  color: var(--color-text-primary) !important;
}

/* ── Leads Page ── */
html[data-theme="light"] .leads-page,
html[data-theme="light"] .leads-container {
  background: var(--color-bg-page);
}
html[data-theme="light"] .lead-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .leads-section-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .leads-table-container {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}

/* ── Toasts ── */
html[data-theme="light"] .toast {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

/* ── Modals ── */
html[data-theme="light"] .modal-overlay {
  background: var(--color-bg-overlay);
}
html[data-theme="light"] .modal-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-xl);
}
html[data-theme="light"] .modal-card h3,
html[data-theme="light"] .modal-card h4 {
  color: var(--color-text-primary);
}

/* ── Tables (analytics, sessions, leads) ── */
html[data-theme="light"] table thead,
html[data-theme="light"] table thead th {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-default);
}
html[data-theme="light"] table tbody tr {
  border-bottom: 1px solid var(--color-border-subtle);
}
html[data-theme="light"] table tbody tr:hover {
  background: var(--color-bg-hover);
}
html[data-theme="light"] table td {
  color: var(--color-text-primary);
}

/* ── Empty states ── */
html[data-theme="light"] .empty-state,
html[data-theme="light"] .empty-state-legacy,
html[data-theme="light"] .leads-empty-state {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-muted);
}
html[data-theme="light"] .empty-state h3,
html[data-theme="light"] .empty-state-legacy h3,
html[data-theme="light"] .leads-empty-state h4 {
  color: var(--color-text-primary);
}

/* ── Pagination ── */
html[data-theme="light"] .pagination-btn,
html[data-theme="light"] .page-btn {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}
html[data-theme="light"] .pagination-btn.active,
html[data-theme="light"] .page-btn.active {
  background: var(--accent);
  color: #ffffff;
}

/* ── Trial banner ── */
html[data-theme="light"] .trial-banner {
  background: var(--accent);
}

/* ── AI fill modal ── */
html[data-theme="light"] .ai-fill-overlay {
  background: var(--color-bg-overlay);
}
html[data-theme="light"] .ai-fill-box {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}

/* ── FAQ section ── */
html[data-theme="light"] .faq-card,
html[data-theme="light"] .faq-item {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .faq-card:hover,
html[data-theme="light"] .faq-item:hover {
  border-color: var(--accent-border);
}

/* ── AI Fields / Custom Fields ── */
html[data-theme="light"] .ai-field-item,
html[data-theme="light"] .custom-field-item,
html[data-theme="light"] .custom-field-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .ai-field-item:hover,
html[data-theme="light"] .custom-field-item:hover,
html[data-theme="light"] .custom-field-card:hover {
  border-color: var(--accent-border);
}

/* ── Code blocks ── */
html[data-theme="light"] pre,
html[data-theme="light"] code {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .script-block,
html[data-theme="light"] .script-box {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
html[data-theme="light"] .script-block code,
html[data-theme="light"] .script-box code {
  color: var(--color-text-primary);
}

/* ── Save toast ── */
html[data-theme="light"] .save-toast {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}

/* ── Footer (only landing — stays dark) ── */
/* landing.php sets data-theme="dark" always */

/* ── Badges ── */
html[data-theme="light"] .badge {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}
html[data-theme="light"] .badge-dark {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
}

/* ── Field actions (sidebar inline buttons) ── */
html[data-theme="light"] .field-actions button,
html[data-theme="light"] .faq-item-actions button,
html[data-theme="light"] .field-item-actions button {
  color: var(--color-text-muted);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .field-actions button:hover,
html[data-theme="light"] .faq-item-actions button:hover,
html[data-theme="light"] .field-item-actions button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Sidebar brand & footer ── */
html[data-theme="light"] .dash-sidebar-name {
  color: var(--color-text-primary);
}
html[data-theme="light"] .dash-sidebar-id {
  color: var(--color-text-muted);
}
html[data-theme="light"] .sidebar-section-title {
  color: var(--color-text-disabled);
}

/* ── Preview panel ── */
html[data-theme="light"] .preview-panel,
html[data-theme="light"] .dash-preview {
  background: var(--color-bg-card);
  border-left-color: var(--color-border-default);
}
html[data-theme="light"] .preview-title {
  color: var(--color-text-secondary);
}

/* ── Chat message preview ── */
html[data-theme="light"] .preview-chat {
  background: var(--color-bg-elevated);
}

/* ── Search field ── */
html[data-theme="light"] .field-search,
html[data-theme="light"] #field-search {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

/* ── Divider ── */
html[data-theme="light"] .divider {
  border-color: var(--color-border-default);
}

/* ── Landing-page isolation
       Keep all landing sections dark.
       The landing page forces data-theme="dark"
       so these never fire, but as a safety net: ── */

/* ── Inline style overrides for common dark patterns ── */
html[data-theme="light"] [style*="color:rgba(255,255,255,0.3)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.3)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.4)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.4)"] {
  color: var(--color-text-muted) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.5)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.5)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.6)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.6)"] {
  color: var(--color-text-secondary) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.7)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.7)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.8)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.8)"] {
  color: var(--color-text-primary) !important;
}
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"] {
  color: var(--color-text-primary) !important;
}
html[data-theme="light"] [style*="border-left:1px solid var(--border-dark)"],
html[data-theme="light"] [style*="border-bottom:1px solid var(--border-dark)"],
html[data-theme="light"] [style*="border-top:1px solid var(--border-dark)"] {
  border-color: var(--color-border-default) !important;
}
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255"],
html[data-theme="light"] [style*="border:1.5px solid var(--border-dark)"] {
  border-color: var(--color-border-default) !important;
}
html[data-theme="light"] [style*="background:rgba(0,0,0,0.3)"],
html[data-theme="light"] [style*="background: rgba(0,0,0,0.3)"] {
  background: var(--color-bg-elevated) !important;
}

/* ── Dashboard tab status & badges ── */
html[data-theme="light"] .tab-status {
  color: var(--color-text-muted);
}

/* ── Leads tab ── */
html[data-theme="light"] .lead-detail-card {
  background: var(--color-bg-card);
  border-color: var(--color-border-default);
}
html[data-theme="light"] .lead-actions button {
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}

/* ── Save indicator ── */
html[data-theme="light"] #save-indicator {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* ── Toggle rows / settings ── */
html[data-theme="light"] .toggle-row {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-subtle);
}

/* ── Stats bar (landing only — stays dark) ── */
/* .stats-bar is on landing which is forced dark */

/* ── Eyebrow ── */
html[data-theme="light"] .eyebrow {
  color: var(--accent);
}

/* ── Bot card inline styles ── */
html[data-theme="light"] .bot-stat {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}
html[data-theme="light"] .bot-stat-n {
  color: var(--color-text-primary);
}
html[data-theme="light"] .bot-stat-l {
  color: var(--color-text-muted);
}

/* ── Retry button ── */
html[data-theme="light"] .retry-btn {
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}

/* ── Section titles in dark pages ── */
html[data-theme="light"] .section-title-dark,
html[data-theme="light"] .section-title {
  color: var(--color-text-primary);
}
html[data-theme="light"] .section-sub-dark,
html[data-theme="light"] .section-subtitle {
  color: var(--color-text-muted);
}