/* ================================================================
   GalSol — Light Theme Layer  |  theme-light.css
   ----------------------------------------------------------------
   MUST be the LAST stylesheet loaded on every page (after inline
   <style> blocks). It wins through both source order AND specificity:
     • Variables use :root[data-theme="light"]  → (0,2,0) beats any
       page-level inline  :root { … }  and the embedded
       :root { --text: … !important } contrast block.
     • Component fixes use html[data-theme="light"] .x  → (0,2,1)/(0,3,1)
       with !important to beat dashboard.css's hardcoded !important
       glassmorphism surfaces.
   Activated by theme.js setting <html data-theme="light">.
================================================================ */

/* ── 1. VARIABLE OVERRIDES ──────────────────────────────────────
   One block covers every design system in the app (dashboard, EP,
   login, landing, GAL studio, mini-site editor). Unused names are
   simply ignored on pages that don't reference them.            */
:root[data-theme="light"] {
  /* dashboard.css core */
  --bg:             #eef2f7 !important;
  --bg-2:           #e4ebf2 !important;
  --bg-3:           #dce4ee !important;
  --sidebar:        #ffffff !important;   /* light sidebar to match the theme */
  --surface:        rgba(255, 255, 255, 0.88) !important;
  --surface-solid:  #ffffff !important;
  --surface-2:      #f4f7fb !important;
  --surface-3:      #eaeff5 !important;
  --glass:          rgba(15, 23, 42, 0.04) !important;
  --glass-border:   rgba(15, 23, 42, 0.10) !important;
  --glass-border-2: rgba(15, 23, 42, 0.16) !important;
  --border:         rgba(15, 23, 42, 0.10) !important;
  --border-2:       rgba(15, 23, 42, 0.16) !important;
  --hover:          rgba(15, 23, 42, 0.05) !important;
  --accent:         #0099e6 !important;

  /* Text — !important required to beat the embedded contrast :root */
  --text:           #0f172a !important;
  --text-2:         #334155 !important;
  --text-3:         #64748b !important;

  /* Cyan is too light to read as TEXT on white — darken the token.
     Literal #00d4ff gradients/fills are unaffected (they're separate). */
  --cyan:           #0891b2 !important;
  --cyan-2:         #0e7490 !important;
  /* Accent tints — softened for white backgrounds */
  --cyan-dim:       rgba(0, 153, 230, 0.12) !important;
  --cyan-glow:      rgba(0, 153, 230, 0.18) !important;
  --purple-dim:     rgba(124, 58, 237, 0.10) !important;
  --green-dim:      rgba(16, 185, 129, 0.12) !important;
  --gold-dim:       rgba(245, 158, 11, 0.12) !important;
  --red-dim:        rgba(244, 63, 94, 0.10) !important;

  /* login.css */
  --panel:          #ffffff !important;
  --border-hi:      rgba(15, 23, 42, 0.16) !important;
  --violet-dim:     rgba(124, 58, 237, 0.10) !important;
  --text-hi:        #0f172a !important;
  --text-mid:       #475569 !important;
  --text-lo:        #94a3b8 !important;

  /* styles.css (landing) */
  --violet-glow:    rgba(124, 58, 237, 0.15) !important;

  /* mini-site-editor.css */
  --canvas-bg:      #e8edf3 !important;
  --panel-bg:       #ffffff !important;
  --panel-border:   rgba(15, 23, 42, 0.12) !important;

  /* gal-studio.css */
  --gal-bg:         #eef2f7 !important;
  --gal-panel:      #ffffff !important;
  --gal-panel-2:    #f4f7fb !important;
  --gal-border:     rgba(15, 23, 42, 0.10) !important;
  --gal-border-2:   rgba(15, 23, 42, 0.16) !important;
  --gal-text:       #0f172a !important;
  --gal-text-dim:   #475569 !important;
  --gal-text-faint: #94a3b8 !important;

  /* ep.css */
  --ep-violet-dim:  rgba(139, 92, 246, 0.10) !important;
  --ep-violet-glow: rgba(139, 92, 246, 0.15) !important;
  --ep-amber-dim:   rgba(245, 158, 11, 0.10) !important;
  --ep-sky-dim:     rgba(56, 189, 248, 0.10) !important;
}

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* Visible aurora glow on the light background (was too faint before) */
html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 90% 80% at 8% 6%, rgba(0, 180, 235, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 80% 90% at 92% 94%, rgba(124, 58, 237, 0.17) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 60% 38%, rgba(16, 185, 129, 0.07) 0%, transparent 60%) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .gal-aurora { opacity: 0 !important; }

/* ── 2. HARDCODED CARD SURFACES (dashboard.css line ~2610) ──────
   These are set with !important dark values, so we must override
   them with !important light values at higher specificity.       */
html[data-theme="light"] .card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .tool-launch-card,
html[data-theme="light"] .stepper,
html[data-theme="light"] .toggle-row,
html[data-theme="light"] .summary-item,
html[data-theme="light"] .field-map-row,
html[data-theme="light"] .upload-zone,
html[data-theme="light"] .data-table-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .card:hover,
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .tool-launch-card:hover {
  border-color: rgba(15, 23, 42, 0.18) !important;
  background: #f8fafc !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 28px rgba(15, 23, 42, 0.10) !important;
}

/* Card sheen overlay → keep invisible (it was already opacity:0) */
html[data-theme="light"] .card::before {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.015) 0%, transparent 60%) !important;
}

/* ── 3. WHITE-TINT SURFACES → DARK-TINT for light mode ──────────
   Various components use rgba(255,255,255,0.0x) for subtle fills,
   borders and hovers. On white those vanish; flip to dark tint.  */
html[data-theme="light"] .data-table-wrap thead th { background: rgba(15, 23, 42, 0.04) !important; }
html[data-theme="light"] .data-table-wrap tbody tr:hover { background: rgba(15, 23, 42, 0.025) !important; }
html[data-theme="light"] .data-table-wrap tbody tr { border-top-color: rgba(15, 23, 42, 0.08) !important; }
html[data-theme="light"] .btn-secondary:hover { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.2); }
html[data-theme="light"] .btn-ghost:hover { background: rgba(15, 23, 42, 0.05); }
html[data-theme="light"] .form-select option { background: #ffffff; color: var(--text); }
html[data-theme="light"] .tool-card-footer { border-top-color: rgba(15, 23, 42, 0.08) !important; }
html[data-theme="light"] .activity-item { border-bottom-color: rgba(15, 23, 42, 0.07) !important; }
html[data-theme="light"] .dashboard-carousel { background: rgba(15, 23, 42, 0.03); }
html[data-theme="light"] .progress-track,
html[data-theme="light"] .s-bar-track { background: rgba(15, 23, 42, 0.08) !important; }

/* Scrollbars */
html[data-theme="light"] ::-webkit-scrollbar-thumb,
html[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); }

/* Header bar */
html[data-theme="light"] .header { background: rgba(255, 255, 255, 0.85) !important; border-bottom-color: rgba(15, 23, 42, 0.08) !important; }

/* ── 4. SIDEBAR — fully LIGHT, with dark readable text ──────────
   dashboard.css forces .nav-item { color: var(--text-2) !important }.
   With a light sidebar, dark text is correct; we set explicit values
   so nothing inherits a stale light-on-light color.               */
html[data-theme="light"] .sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.02);
}
html[data-theme="light"] .sidebar-logo { border-bottom-color: rgba(15, 23, 42, 0.07) !important; }
html[data-theme="light"] .sidebar .nav-item { color: #475569 !important; }
html[data-theme="light"] .sidebar .nav-item i,
html[data-theme="light"] .sidebar .nav-item svg { color: #64748b; }
html[data-theme="light"] .sidebar .nav-item:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a !important; }
html[data-theme="light"] .sidebar .nav-item.active { color: #0284c7 !important; background: rgba(2, 132, 199, 0.10); }
html[data-theme="light"] .sidebar .nav-item.active i,
html[data-theme="light"] .sidebar .nav-item.active svg { color: #0284c7; }
html[data-theme="light"] .sidebar .nav-section-label { color: #94a3b8 !important; }
html[data-theme="light"] .sidebar .user-row { border-top-color: rgba(15, 23, 42, 0.07) !important; }
html[data-theme="light"] .sidebar .user-info .user-name { color: #0f172a !important; }
html[data-theme="light"] .sidebar .user-info .user-plan { color: #64748b !important; }
html[data-theme="light"] .sidebar .sidebar-notification-btn,
html[data-theme="light"] .sidebar .sidebar-theme-btn { color: #475569 !important; }
html[data-theme="light"] .sidebar .sidebar-notification-btn:hover,
html[data-theme="light"] .sidebar .sidebar-theme-btn:hover { color: #0f172a !important; background: rgba(15, 23, 42, 0.05); }
html[data-theme="light"] .sidebar .sidebar-logout-btn { color: #94a3b8; }
html[data-theme="light"] .sidebar .sidebar-logout-btn:hover { color: #be123c; }
html[data-theme="light"] .sidebar-toggle-btn { color: #334155 !important; }
html[data-theme="light"] .sidebar-toggle-btn:hover { background: rgba(15, 23, 42, 0.08); color: #0f172a; }
html[data-theme="light"] .sidebar-toggle-btn svg { stroke: #334155 !important; }
html[data-theme="light"] .sidebar.collapsed .sidebar-toggle-btn { background: rgba(15, 23, 42, 0.06) !important; border-color: rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .sidebar.collapsed .sidebar-toggle-btn svg { stroke: #334155 !important; }
/* Collapsed nav hover tooltip ("bubble") — was dark bg + dark text = invisible */
html[data-theme="light"] .sidebar.collapsed .nav-item::after {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="light"] .sidebar.collapsed .nav-item:hover { background: rgba(15, 23, 42, 0.05) !important; border-color: rgba(15, 23, 42, 0.12) !important; color: #0f172a !important; }
html[data-theme="light"] .sidebar.collapsed .nav-item.active { background: rgba(2, 132, 199, 0.10) !important; border-color: rgba(2, 132, 199, 0.30) !important; }
/* Notification popover */
html[data-theme="light"] .sidebar-notification-panel { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.16) !important; }
html[data-theme="light"] .notification-panel-title { color: #0f172a !important; }
/* Theme toggle icon swap */
html[data-theme="light"] .theme-icon-for-dark  { display: none; }
html[data-theme="light"] .theme-icon-for-light { display: block; }

/* ── 4b. FLASH / TOAST + CONFIRM DIALOG (JS-generated, inline css) ──
   CSS !important overrides inline style declarations. The toast text
   is near-white (#dde6f5) on a pale tint → invisible on light.      */
html[data-theme="light"] #cf-toast { color: #0f172a !important; box-shadow: 0 8px 32px rgba(15, 23, 42, 0.15) !important; }
html[data-theme="light"] #cf-confirm-overlay { background: rgba(15, 23, 42, 0.45) !important; }
html[data-theme="light"] #cf-confirm-overlay > div { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; box-shadow: 0 32px 80px rgba(15, 23, 42, 0.25) !important; }
html[data-theme="light"] #cf-confirm-overlay h3 { color: #0f172a !important; }
html[data-theme="light"] #cf-confirm-overlay p  { color: #475569 !important; }
html[data-theme="light"] #cfNo { background: rgba(15, 23, 42, 0.05) !important; border-color: rgba(15, 23, 42, 0.12) !important; color: #475569 !important; }

/* Subtle dot-grid: white dots are invisible on light → use dark tint */
html[data-theme="light"] body::after {
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
}

/* ── 4c. DATABASE TOOL (.db-* / .cs-* hardcoded glass) ──────────── */
html[data-theme="light"] .db-hero-card,
html[data-theme="light"] .db-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .db-hero-card:hover,
html[data-theme="light"] .db-card:hover { border-color: rgba(15, 23, 42, 0.18) !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10) !important; }
html[data-theme="light"] .db-hero-card::before,
html[data-theme="light"] .db-card::before { background: linear-gradient(135deg, rgba(15, 23, 42, 0.015) 0%, transparent 60%) !important; }
html[data-theme="light"] .db-search { background: rgba(15, 23, 42, 0.04) !important; border-color: rgba(15, 23, 42, 0.14) !important; color: #0f172a !important; }
html[data-theme="light"] .cs-overlay { background: rgba(15, 23, 42, 0.45) !important; }
html[data-theme="light"] .cs-modal { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.10) !important; box-shadow: 0 32px 80px rgba(15, 23, 42, 0.20) !important; }
html[data-theme="light"] .cs-modal-close { background: rgba(15, 23, 42, 0.05) !important; border-color: rgba(15, 23, 42, 0.10) !important; }
html[data-theme="light"] .cs-modal-close:hover { background: rgba(15, 23, 42, 0.10) !important; }
html[data-theme="light"] .cs-drop-zone { border-color: rgba(15, 23, 42, 0.20) !important; }
html[data-theme="light"] .db-ext-delete-btn { border-color: rgba(15, 23, 42, 0.12); }

/* ── 5. BADGES / NOTICES / LOGS — readable on light ─────────────
   dashboard.css gives these bright pastel text for dark bg; those
   are unreadable on white badge fills. Darken them.               */
html[data-theme="light"] .badge-cyan   { color: #0369a1 !important; }
html[data-theme="light"] .badge-green  { color: #15803d !important; }
html[data-theme="light"] .badge-gold   { color: #b45309 !important; }
html[data-theme="light"] .badge-red    { color: #be123c !important; }
html[data-theme="light"] .badge-purple { color: #6d28d9 !important; }
html[data-theme="light"] .badge-gray   { color: var(--text-2) !important; }
html[data-theme="light"] .notice-cyan  { color: #0369a1 !important; }
html[data-theme="light"] .notice-gold  { color: #b45309 !important; }
html[data-theme="light"] .notice-green { color: #15803d !important; }
html[data-theme="light"] .notice-red   { color: #be123c !important; }
html[data-theme="light"] .log-ok       { color: #15803d !important; }
html[data-theme="light"] .log-err      { color: #be123c !important; }
html[data-theme="light"] .log-info     { color: #0369a1 !important; }
html[data-theme="light"] .log-warn     { color: #b45309 !important; }

/* ── 6. PAGE-SPECIFIC HARDCODED HOLDOUTS ────────────────────────
   A few inline-style tool pages use hardcoded dark hex that the
   variable layer can't reach. Map the common ones to light.      */

/* combined-tool (#0d1728, #0a1020, #0b1120 panels) */
html[data-theme="light"] [style*="#0d1728"],
html[data-theme="light"] [style*="#0a1020"],
html[data-theme="light"] [style*="#0b1120"] { background-color: #ffffff !important; }

/* form-select option dropdowns hardcoded #0d1728 across tools */
html[data-theme="light"] select option,
html[data-theme="light"] .form-select option { background: #ffffff !important; color: #0f172a !important; }

/* GAL studio panels (var-based mostly; ensure shell bg flips) */
html[data-theme="light"] .gal-shell,
html[data-theme="light"] .gal-rail,
html[data-theme="light"] .gal-main { background: var(--gal-bg) !important; }

/* Mini-site editor canvas + panels */
html[data-theme="light"] .mse-canvas,
html[data-theme="light"] .mse-canvas-area { background: var(--canvas-bg) !important; }

/* ── 7. GENERIC TABLES & DIVIDERS ───────────────────────────────
   Catch raw <table> borders and the common divider/separator rows
   that use white-tint borders (invisible on light).               */
html[data-theme="light"] table th,
html[data-theme="light"] table td { border-color: rgba(15, 23, 42, 0.08) !important; }
html[data-theme="light"] table thead th { background: rgba(15, 23, 42, 0.03); color: var(--text-3) !important; }
html[data-theme="light"] table tbody tr:hover { background: rgba(15, 23, 42, 0.025); }
html[data-theme="light"] .s-table th,
html[data-theme="light"] .s-table td { border-bottom-color: rgba(15, 23, 42, 0.08) !important; }
/* Common divider/separator hooks */
html[data-theme="light"] hr,
html[data-theme="light"] .divider,
html[data-theme="light"] .s-section-title,
html[data-theme="light"] .s-row,
html[data-theme="light"] .s-scope-row,
html[data-theme="light"] .s-profile-block { border-color: rgba(15, 23, 42, 0.10) !important; }

/* ── 8. GS FORMS LIST (.gsf-*) ──────────────────────────────────
   Card CHROME only — the preview itself is an iframe (gs-form-view,
   now theme-exempt) so the form keeps its OWN colours. We only
   light up the card shell, the loading backdrop, and white text.  */
html[data-theme="light"] .gsf-card { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .gsf-card:hover { border-color: rgba(15, 23, 42, 0.22) !important; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .gsf-thumb { background: #eef2f7 !important; }   /* loading backdrop behind transparent iframe */
html[data-theme="light"] .gsf-card-name { color: #0f172a !important; }
html[data-theme="light"] .gsf-card-time-icon { color: #64748b !important; }
html[data-theme="light"] .gsf-thumb-draft-icon { background: rgba(15, 23, 42, 0.05) !important; border-color: rgba(15, 23, 42, 0.12) !important; color: #64748b !important; }
html[data-theme="light"] .gsf-thumb-draft-label { color: #94a3b8 !important; }

/* ── 9. MINI-SITE LIMIT NOTICE (amber banner) ───────────────────── */
html[data-theme="light"] .ms-limit-notice {
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
  color: #92400e !important;
}
html[data-theme="light"] .ms-limit-notice svg { color: #b45309 !important; }

/* ── 10. DATABASE VIEW CHARTS & STATS (.dbv-* / .share-*) ────────
   All these used rgba(255,255,255,0.03) → no visible card on light. */
html[data-theme="light"] .dbv-stat-card,
html[data-theme="light"] .dbv-chart-card,
html[data-theme="light"] .dbv-no-charts {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .dbv-stat-card::before,
html[data-theme="light"] .dbv-chart-card::before { background: linear-gradient(135deg, rgba(15, 23, 42, 0.015) 0%, transparent 60%) !important; }
html[data-theme="light"] .dbv-stat-card:hover,
html[data-theme="light"] .dbv-chart-card:hover { border-color: rgba(15, 23, 42, 0.18) !important; }
html[data-theme="light"] .dbv-num-stat { background: rgba(15, 23, 42, 0.03) !important; border-color: rgba(15, 23, 42, 0.08) !important; }
html[data-theme="light"] .share-divider { background: rgba(15, 23, 42, 0.08) !important; }
html[data-theme="light"] .share-modal { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; }

/* ── 11. TOOL CANVASES, TOOLBARS, LOG BOX (cert / mail / combined) ─
   Grey came from `background: rgba(0,0,0,0.2)` (dark over white).    */
html[data-theme="light"] .cert-toolbar { background: #f1f5f9 !important; border-bottom-color: rgba(15, 23, 42, 0.10) !important; }
html[data-theme="light"] .cert-canvas-col { border-right-color: rgba(15, 23, 42, 0.10) !important; }
html[data-theme="light"] .cert-canvas-container { box-shadow: 0 8px 40px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.08) !important; }
html[data-theme="light"] .canvas-scroll-zone { background: repeating-conic-gradient(rgba(15, 23, 42, 0.03) 0% 25%, transparent 0% 50%) 0 0 / 20px 20px !important; }
html[data-theme="light"] .me-canvas-wrap { background: #eef2f7 !important; }
html[data-theme="light"] .me-canvas-wrap::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18) !important; }
html[data-theme="light"] .me-tpl-card { border-color: rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .me-tpl-card:hover { border-color: rgba(8, 145, 178, 0.45) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .live-log { background: #f8fafc !important; border-color: rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .live-log::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.20) !important; }
/* "Add Field / Add to Canvas" dialog (cert + combined) */
html[data-theme="light"] .af-overlay { background: rgba(15, 23, 42, 0.45) !important; }
html[data-theme="light"] .af-box {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.25) !important;
}

/* ── 12. MINI-SITE LIST CONTROLS (.ms-*) ────────────────────────── */
html[data-theme="light"] .ms-search-input,
html[data-theme="light"] .ms-search-wrap {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .ms-search-input::placeholder { color: #94a3b8 !important; }
html[data-theme="light"] .ms-search-wrap svg { color: #64748b !important; }
html[data-theme="light"] .ms-filter-group { background: rgba(15, 23, 42, 0.04) !important; border-color: rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .ms-fg-btn { color: #475569 !important; }
html[data-theme="light"] .ms-fg-btn.active { color: #fff !important; }
html[data-theme="light"] .ms-tpl-show-more-btn { background: rgba(15, 23, 42, 0.04) !important; border-color: rgba(15, 23, 42, 0.12) !important; color: #334155 !important; }
html[data-theme="light"] .ms-tpl-show-more-wrap { color: #334155 !important; }
html[data-theme="light"] .ms-card-meta,
html[data-theme="light"] .ms-card-time,
html[data-theme="light"] .ms-card-foot { color: #64748b !important; border-color: rgba(15, 23, 42, 0.08) !important; }

/* ── 13. GS FORMS LIST CONTROLS (.gsf-*) ────────────────────────── */
html[data-theme="light"] .gsf-search {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .gsf-search::placeholder { color: #94a3b8 !important; }
html[data-theme="light"] .gsf-search-icon { color: #64748b !important; }
html[data-theme="light"] .gsf-filter { background: rgba(15, 23, 42, 0.04) !important; border-color: rgba(15, 23, 42, 0.12) !important; }
html[data-theme="light"] .gsf-filter-btn { color: #475569 !important; }
html[data-theme="light"] .gsf-filter-btn.active { color: #fff !important; }
html[data-theme="light"] .gsf-card-info,
html[data-theme="light"] .gsf-card-info-bottom { border-color: rgba(15, 23, 42, 0.08) !important; }

/* ── 14. DATABASE HOME card meta + search placeholder ───────────── */
html[data-theme="light"] .db-search::placeholder { color: #94a3b8 !important; }
html[data-theme="light"] .db-card-meta,
html[data-theme="light"] .db-card-meta-item,
html[data-theme="light"] .db-zero,
html[data-theme="light"] .db-card-sub,
html[data-theme="light"] .db-card-footer { color: #64748b !important; }
html[data-theme="light"] .db-card-meta-item svg { color: #94a3b8 !important; }

/* ── 15. DATABASE VIEW tab switcher (inactive tab was dark) ──────── */
html[data-theme="light"] .dbv-tabs { background: transparent !important; }
html[data-theme="light"] .dbv-tab { background: rgba(15, 23, 42, 0.04) !important; color: #475569 !important; border-color: rgba(15, 23, 42, 0.10) !important; }
html[data-theme="light"] .dbv-tab:hover { color: #0f172a !important; background: rgba(15, 23, 42, 0.07) !important; }
html[data-theme="light"] .dbv-tab.active { background: var(--grad-primary) !important; color: #fff !important; }

/* ── 16. GAL AI PANEL (.gal-ai-*) — shared across tools ─────────────
   Excluded on mini-site & gs-forms per request.           */
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-panel {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
  color: #0f172a !important;
}
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-header,
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-input-wrap {
  border-color: rgba(15, 23, 42, 0.10) !important;
  background: #f8fafc !important;
}
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-body { background: #ffffff !important; }
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-msg,
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-bubble {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-msg.user,
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-bubble.user {
  background: rgba(8, 145, 178, 0.12) !important;
}
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-input,
html[data-theme="light"]:not([data-page="mini-site"]):not([data-page="gs-forms"]) .gal-ai-input-row textarea {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  color: #0f172a !important;
}
