/* ════════════════════════════════════════════════════════════════
 * VinSnap — Light Theme
 * Loaded LAST in app.html so its rules win the cascade.
 *
 * HARD RULE: every rule in this file is scoped under
 * [data-theme="light"]. The dark theme (the default, no attribute)
 * is therefore byte-for-byte untouched — remove this file and the
 * app is exactly as it was.
 *
 * Two mechanisms:
 *   1. Re-declare the FULL design-token set for light. Most in-app
 *      surfaces read these vars (incl. main.css's --bg-* names that
 *      were never previously overridden for light), so they flip for
 *      free.
 *   2. Surgical overrides for surfaces that hardcode dark hex
 *      (#11182b etc) directly or inside JS-injected <style> blocks.
 *      These use !important to beat runtime-injected stylesheets and
 *      inline literals. Brand accents (buttons, teal/cyan, badges)
 *      are deliberately left alone so they keep popping.
 * ════════════════════════════════════════════════════════════════ */

/* ── 1. Full token set ─────────────────────────────────────────── */
[data-theme="light"] {
  /* style.css family */
  --primary-bg: #f6f8fb;
  --secondary-bg: #ffffff;
  --sidebar-bg: rgba(255, 255, 255, 0.98);
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --hover-bg: rgba(59, 130, 246, 0.08);
  --input-bg: #ffffff;
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);

  /* main.css family — previously dark-only, the main reason light
     mode looked broken on garage/community/mobile surfaces */
  --bg-primary: #f6f8fb;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;

  /* keep brand accents vivid on white (unchanged intent) */
  --accent-blue: #2563eb;
  --accent-red: #ef4444;
  --accent-yellow: #d97706;
}

/* Global page canvas + base text */
[data-theme="light"] body {
  background: #f6f8fb !important;
  color: var(--text-primary);
}

/* Soft card shadows instead of dark glows */
[data-theme="light"] .stat-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
}

/* Sidebar / nav */
[data-theme="light"] .sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border-color);
  box-shadow: 2px 0 20px rgba(15, 23, 42, 0.04);
}

/* ── 2. Surgical overrides for hardcoded dark surfaces ─────────── */

/* Parts / search panels (css/pages/search.css hardcodes #11182b) */
[data-theme="light"] .search-specs-panel,
[data-theme="light"] .search-card2,
[data-theme="light"] .search-saved-card,
[data-theme="light"] .search-saved-more {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* Garage saved-parts block (JS-injected <style> in garage.js) */
[data-theme="light"] .garage-saved-parts {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* Parts detail modal (JS-injected <style> in parts-detail-modal.js) */
[data-theme="light"] .pdm-filter-input,
[data-theme="light"] .pdm-oem-tile,
[data-theme="light"] .pdm-alt-card,
[data-theme="light"] .pdm-media-pdf-row {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Parts assistant wizard (JS-injected <style> in search.js, .paw-*) */
[data-theme="light"] .paw-topbar,
[data-theme="light"] .paw-card,
[data-theme="light"] .paw-game,
[data-theme="light"] .paw-firstplay__card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* Those JS blocks set light-gray text (#cbd5e1 / rgba(255,255,255,…))
   which is invisible on white — re-darken inside their namespaces */
[data-theme="light"] .paw-card,
[data-theme="light"] .paw-firstplay__card,
[data-theme="light"] .pdm-alt-card,
[data-theme="light"] .garage-saved-parts {
  --border-color: #e2e8f0;
}

/* Generic borders that were rgba(255,255,255,x) become invisible on
   white — restore a subtle light divider on common in-app containers.
   Scoped to the parts/garage namespaces so nothing else is touched. */
[data-theme="light"] .paw-card *[style*="rgba(255,255,255"],
[data-theme="light"] .pdm-alt-card *[style*="rgba(255,255,255"] {
  border-color: #e2e8f0 !important;
}

/* Modals */
[data-theme="light"] .modal-overlay {
  background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .modal-content {
  background: #ffffff;
  border: 1px solid var(--border-color);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

/* Inputs */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #ffffff;
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8;
}

/* Toasts / secondary buttons keep var-driven surfaces but on light */
[data-theme="light"] .btn-secondary {
  background: #f1f5f9;
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="light"] .btn-secondary:hover {
  background: #e2e8f0;
}

/* ── 3. Dashboard token family (--dash-*) ──────────────────────────
   Garage hero + overview cards + stats read these dark-only tokens
   from tokens.css. Remap the SURFACE/elevation/display-text tokens
   for light; leave the cyan/amber accent gradients alone. */
[data-theme="light"] {
  --dash-bg:
    radial-gradient(1400px 400px at 0% 0%, rgba(59,130,246,0.05), transparent 60%),
    linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%);
  --dash-card-bg:
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  --dash-card-bg-alt:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  --dash-border-grad:
    linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(34,211,166,0.14) 100%);
  --dash-lift:
    0 1px 3px rgba(15,23,42,0.06), 0 12px 32px -16px rgba(15,23,42,0.12);
  --dash-lift-lg:
    0 1px 3px rgba(15,23,42,0.07), 0 20px 48px -24px rgba(15,23,42,0.16);
  --dash-display-grad:
    linear-gradient(135deg, #0f172a 0%, #334155 100%);
}

/* ── 4. Garage page — hardcoded dark surfaces → light ─────────────
   These ignore the tokens and hardcode rgba(14,22,36,x)/#0a1426. */
[data-theme="light"] .garage-strip__nav,
[data-theme="light"] .garage-strip__pill,
[data-theme="light"] .garage-strip__pill-avatar,
[data-theme="light"] .garage-hero__photo,
[data-theme="light"] .garage-hero__tier-badge,
[data-theme="light"] .garage-hero__specs,
[data-theme="light"] .garage-modal,
[data-theme="light"] .garage-stats-row,
[data-theme="light"] .gd-modal,
[data-theme="light"] .gd-select {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .garage-hero__photo { background: #f1f5f9 !important; }
[data-theme="light"] .garage-health-cta {
  background: linear-gradient(180deg, rgba(34,211,166,0.10) 0%, #ffffff 100%) !important;
  border-color: #e2e8f0 !important;
}

/* Garage — near-white text that would vanish on white cards */
[data-theme="light"] .garage-strip__nav:hover,
[data-theme="light"] .garage-strip__pill:hover,
[data-theme="light"] .garage-strip__pill.is-active,
[data-theme="light"] .garage-empty-state__title,
[data-theme="light"] .garage-hero__title,
[data-theme="light"] .garage-hero__status-line,
[data-theme="light"] .garage-hero__spec-value,
[data-theme="light"] .garage-hero__metric-value,
[data-theme="light"] .garage-modal-header h2,
[data-theme="light"] .garage-hero__action--secondary,
[data-theme="light"] .garage-hero__overflow-item,
[data-theme="light"] .garage-card__title,
[data-theme="light"] .garage-card__row-title,
[data-theme="light"] .garage-stats-row__value,
[data-theme="light"] .gd-title {
  color: #0f172a !important;
}
[data-theme="light"] .garage-card__row-meta,
[data-theme="light"] .garage-hero__nickname,
[data-theme="light"] .form-hint {
  color: #64748b !important;
}

/* ── 5. Parts Finder / search page + part drawer ──────────────────
   search.css hardcodes rgba(14,22,36,x)/rgba(10,16,28,x)/#11182b on
   ~22 surfaces and near-white text on their children. */
[data-theme="light"] .search-composer.is-stuck,
[data-theme="light"] .search-composer__vehicle-pill,
[data-theme="light"] .search-composer__part-input,
[data-theme="light"] .search-recent__chip,
[data-theme="light"] .search-vehicle-strip,
[data-theme="light"] .search-filter,
[data-theme="light"] .search-product-card__image,
[data-theme="light"] .search-product-card__top-oem code,
[data-theme="light"] .search-gate-block__thumb,
[data-theme="light"] .search-gate-block__thumbs-more,
[data-theme="light"] .part-drawer__close,
[data-theme="light"] .part-drawer__retailer,
[data-theme="light"] .part-drawer__hero-image,
[data-theme="light"] .part-drawer__stat,
[data-theme="light"] .part-drawer__oem-row,
[data-theme="light"] .part-drawer__compat-row {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
/* headings / values → dark */
[data-theme="light"] .part-drawer__title,
[data-theme="light"] .part-drawer__compat-row,
[data-theme="light"] .part-drawer__retailer-name,
[data-theme="light"] .part-drawer__spec-value,
[data-theme="light"] .search-card2__chip,
[data-theme="light"] .search-card2__spec,
[data-theme="light"] .search-card2__save,
[data-theme="light"] .search-composer__part-input,
[data-theme="light"] .search-composer__vehicle-pill,
[data-theme="light"] .search-empty__title,
[data-theme="light"] .search-filter,
[data-theme="light"] .search-gate-block__title,
[data-theme="light"] .search-product-card__title,
[data-theme="light"] .search-product-card__price,
[data-theme="light"] .search-recent__chip,
[data-theme="light"] .search-recent__chip:hover,
[data-theme="light"] .search-saved-empty__title,
[data-theme="light"] .search-saved-section__title,
[data-theme="light"] .search-saved-card__title {
  color: #0f172a !important;
}
[data-theme="light"] .search-saved-card__brand,
[data-theme="light"] .search-saved-empty__desc {
  color: #64748b !important;
}
/* muted secondary (#98a9c6 → AA-passing #64748b) */
[data-theme="light"] .part-drawer__brand,
[data-theme="light"] .part-drawer__close,
[data-theme="light"] .part-drawer__compat-detail,
[data-theme="light"] .part-drawer__install-notes,
[data-theme="light"] .part-drawer__oe-header-more,
[data-theme="light"] .part-drawer__oem-mfr,
[data-theme="light"] .part-drawer__spec-label,
[data-theme="light"] .part-drawer__stat span,
[data-theme="light"] .search-empty__desc,
[data-theme="light"] .search-gate-block__desc,
[data-theme="light"] .search-product-card__desc,
[data-theme="light"] .search-product-card__ean code,
[data-theme="light"] .search-product-card__install,
[data-theme="light"] .search-product-card__oem,
[data-theme="light"] .search-product-card__retailers,
[data-theme="light"] .search-product-card__stats,
[data-theme="light"] .search-product-card__top-oem,
[data-theme="light"] .search-product-card__warranty,
[data-theme="light"] .search-skeleton__copy {
  color: #64748b !important;
}

/* ── 6. Vehicle detail sidebar (Health/Service/Parts tabs) ────────── */
[data-theme="light"] .sidebar-breadcrumb,
[data-theme="light"] .vehicle-detail-sidebar,
[data-theme="light"] .vehicle-tabs,
[data-theme="light"] .vehicle-tab-content,
[data-theme="light"] .stat-card-compact,
[data-theme="light"] .action-btn,
[data-theme="light"] .activity-item,
[data-theme="light"] .service-record-card,
[data-theme="light"] .service-notes,
[data-theme="light"] .reminder-card,
[data-theme="light"] .reminder-description {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* ── 7. AI Mechanic (assistant) ───────────────────────────────────── */
[data-theme="light"] .assistant-context,
[data-theme="light"] .assistant-suggested__chip,
[data-theme="light"] .assistant-bubble--ai code,
[data-theme="light"] .assistant-bubble--ai pre,
[data-theme="light"] .assistant-composer__input {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .assistant-bubble--ai,
[data-theme="light"] .assistant-bubble--ai strong,
[data-theme="light"] .assistant-bubble--ai em,
[data-theme="light"] .assistant-bubble--ai pre code,
[data-theme="light"] .assistant-composer__input,
[data-theme="light"] .assistant-context,
[data-theme="light"] .assistant-context__dropdown-item,
[data-theme="light"] .assistant-empty__title,
[data-theme="light"] .assistant-quota-gate__title,
[data-theme="light"] .assistant-suggested__chip {
  color: #0f172a !important;
}
[data-theme="light"] .assistant-context__label,
[data-theme="light"] .assistant-empty__subtitle,
[data-theme="light"] .assistant-quota-gate__desc {
  color: #64748b !important;
}

/* ── 8. Receipts (service log upload) + settings plan bar ─────────── */
[data-theme="light"] .drop-zone,
[data-theme="light"] .page-preview,
[data-theme="light"] .plan-hero__bar {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* ── 9. Sidebar footer + "Upgrade to Pro" + decoder sample chips ────
   The footer bg (#0f1419) showed through the near-transparent upgrade
   gradient, reading as a stray dark block. Light the footer, and the
   upgrade button becomes a subtle branded (teal→purple) card. */
[data-theme="light"] .sidebar-footer {
  background: #ffffff !important;
}
[data-theme="light"] .upgrade-footer-btn {
  background: linear-gradient(135deg, rgba(34,211,166,0.12), rgba(124,58,237,0.12)) !important;
  border-color: rgba(34,211,166,0.30) !important;
  color: #0f172a !important;
}
[data-theme="light"] .upgrade-footer-btn:hover {
  background: linear-gradient(135deg, rgba(34,211,166,0.18), rgba(124,58,237,0.18)) !important;
  border-color: rgba(34,211,166,0.45) !important;
}

/* Decoder "try a sample" + "recently decoded" chips */
[data-theme="light"] .decoder-sample__chip,
[data-theme="light"] .decoder-recent__chip {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .decoder-sample__chip code {
  color: #0f172a !important;
}
[data-theme="light"] .decoder-recent__chip {
  color: #64748b !important;
}