/* ============================================================================
   themes-polish.css — depth additions on top of every theme block
   --------------------------------------------------------------------------
   Goals:
   1. Fill missing surface tokens (`--bg-card`, `--bg-elev`, `--text-dim`,
      `--shadow-card`) for themes that only declared the basic 6.
   2. Tighten WCAG-AA contrast on `--text-muted` for the popular light
      themes so secondary text doesn't fade into card backgrounds.
   3. Theme-aware selection / scrollbar / focus-ring so a Linear-themed
      tenant doesn't get a mismatched blue selection band.
   4. Card / input / button micro-styles that read consistently across
      every theme without per-block overrides.
   ============================================================================ */

/* ─── Universal token defaults (apply if a theme didn't set them) ─── */
:root {
  --bg-elev:        var(--bg-2, var(--bg-secondary, color-mix(in srgb, var(--bg, #0f172a) 92%, #fff 8%)));
  --bg-card:        var(--card-bg, var(--bg-secondary, var(--bg, #11151c)));
  --bg-input:       color-mix(in srgb, var(--bg-card, #11151c) 88%, var(--text, #fff) 6%);
  --text-dim:       color-mix(in srgb, var(--text-muted, #94a3b8) 70%, var(--text, #e2e8f0) 30%);
  --shadow-card:    0 1px 0 color-mix(in srgb, var(--text, #000) 4%, transparent),
                    0 8px 24px color-mix(in srgb, var(--text, #000) 6%, transparent);
  --focus-ring:     0 0 0 3px color-mix(in srgb, var(--primary, #3b82f6) 35%, transparent);
  --selection-bg:   color-mix(in srgb, var(--primary, #3b82f6) 30%, transparent);
  --selection-fg:   var(--text, #fff);
}

/* ─── Theme-aware text selection (was hard-coded blue in browser default) ─── */
::selection { background: var(--selection-bg); color: var(--selection-fg); }
::-moz-selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ─── Theme-aware scrollbar (Webkit + Firefox). Subtle, low-saturation. ─── */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted, #94a3b8) 35%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 30%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary, #3b82f6) 45%, transparent); background-clip: padding-box; }

/* ─── Universal focus-visible ring driven by theme primary ─── */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ─── Light-theme contrast tightening (text-muted → ≥ 4.5:1 on white) ─── */
html[data-theme="vercel-light"]    { --text-muted: #525252; }
html[data-theme="github-light"]    { --text-muted: #57606a; }
html[data-theme="notion"]          { --text-muted: #5b5a55; }
html[data-theme="stripe"]          { --text-muted: #3c4858; }
html[data-theme="paper"]           { --text-muted: #555555; }
html[data-theme="porcelain"]       { --text-muted: #525252; }
html[data-theme="platinum"]        { --text-muted: #424242; }
html[data-theme="arctic"]          { --text-muted: #1f4769; }
html[data-theme="pastel-dream"]    { --text-muted: #6b3d6e; }
html[data-theme="spring"]          { --text-muted: #2f5a2c; }
html[data-theme="summer"]          { --text-muted: #6e4a14; }
html[data-theme="minimal-light"]   { --text-muted: #4a4a4a; }
html[data-theme="sepia"]           { --text-muted: #5a4626; }
html[data-theme="anthropic-light"] { --text-muted: #574f44; }

/* ─── Dark-theme: ensure text-muted stays ≥ 4.5:1 against bg-card ─── */
html[data-theme="monochrome"]      { --text-muted: #b8b8b8; }
html[data-theme="supabase"]        { --text-muted: #b9b9b9; }
html[data-theme="figma"]           { --text-muted: #c0c0c0; }
html[data-theme="raycast"]         { --text-muted: #b3b3b3; }
html[data-theme="linear"]          { --text-muted: #b1b1b8; }

/* ─── Surface elevation for themes that only declared one bg layer.
       The stat-tile / modal / dropdown stack reads off these. ─── */
html[data-theme="cursor"],
html[data-theme="midnight"],
html[data-theme="github-dim"],
html[data-theme="dracula"],
html[data-theme="tokyo-night"],
html[data-theme="monokai"]         { --bg-elev: color-mix(in srgb, var(--bg) 88%, #fff 12%); }
html[data-theme="vercel-light"],
html[data-theme="github-light"],
html[data-theme="notion"],
html[data-theme="stripe"],
html[data-theme="anthropic-light"] { --bg-elev: color-mix(in srgb, var(--bg, #fff) 95%, var(--text, #000) 5%); }

/* ─── Brand-accurate primary-dim recolours (some themes only set --primary) ─── */
html[data-theme="vercel-light"]    { --primary-dim: rgba(0, 0, 0, .08); }
html[data-theme="github-light"]    { --primary-dim: rgba(9, 105, 218, .12); }
html[data-theme="anthropic-light"] { --primary-dim: rgba(204, 120, 92, .12); }
html[data-theme="stripe"]          { --primary-dim: rgba(99, 91, 255, .12); }
html[data-theme="linear"]          { --primary-dim: rgba(94, 106, 210, .18); }
html[data-theme="raycast"]         { --primary-dim: rgba(255, 99, 99, .15); }
html[data-theme="supabase"]        { --primary-dim: rgba(62, 207, 142, .15); }

/* ─── Card lift consistency across all themes ─── */
.card, .panel, .stat-tile, .payment-admin-card {
  box-shadow: var(--shadow-card);
}

/* ─── Inputs & form controls — single source of truth per theme ─── */
input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  box-shadow: var(--focus-ring);
}

/* ─── Light-theme corrections for older deeply-blue rules in style.css ─── */
html.light-mode tr:hover td,
html[data-theme$="-light"] tr:hover td,
html[data-theme="paper"] tr:hover td,
html[data-theme="notion"] tr:hover td,
html[data-theme="stripe"] tr:hover td,
html[data-theme="sepia"] tr:hover td {
  background: color-mix(in srgb, var(--primary, #3b82f6) 6%, transparent);
}

/* ─── Code blocks read consistently in light themes (they were dark-only) ─── */
html.light-mode code,
html[data-theme$="-light"] code,
html[data-theme="paper"] code,
html[data-theme="notion"] code,
html[data-theme="stripe"] code,
html[data-theme="sepia"] code {
  background: color-mix(in srgb, var(--bg, #fff) 90%, var(--text, #000) 10%);
  color: var(--text);
}

/* ─── Sidebar active item is theme-tinted (was hard-coded blue) ─── */
.sidebar .nav-link.active,
.sidebar a.active {
  background: var(--primary-dim, color-mix(in srgb, var(--primary) 14%, transparent));
  color: var(--primary);
  border-left: 2px solid var(--primary);
}

/* ─── Toast / badge surface matching theme palette ─── */
.badge, .tag, .pay-method-chip {
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ─── Final commercial contrast pass (Apr 2026)
   This file loads after base style.css, so it is the last-mile guardrail for
   washed-out light themes and nearly invisible scrollbars. ─── */
html.light-mode {
  --text: #0f172a;
  --text-muted: #334155;
  --text-dim: #475569;
  --border: #cbd5e1;
  --card-bg: #ffffff;
  --bg-card: #ffffff;
  color-scheme: light;
}
html:not(.light-mode) {
  --text-muted: color-mix(in srgb, var(--text, #e2e8f0) 72%, #94a3b8 28%);
  color-scheme: dark;
}
html.light-mode .page-subtitle,
html.light-mode .table-note,
html.light-mode .form-hint,
html.light-mode .hint,
html.light-mode small,
html.light-mode .payment-admin-note,
html.light-mode .stat-card .label,
html.light-mode .stat-card .sub {
  color: #334155 !important;
}
html.light-mode input,
html.light-mode select,
html.light-mode textarea {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #94a3b8 !important;
}
html.light-mode input::placeholder,
html.light-mode textarea::placeholder { color: #64748b !important; }
html.light-mode .badge,
html.light-mode .pve-badge {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted, #94a3b8) 65%, transparent) var(--bg-card, transparent); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: color-mix(in srgb, var(--bg-card, #11151c) 92%, var(--text, #fff) 8%); }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 70%, var(--primary, #3b82f6) 30%);
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--bg-card, #11151c) 92%, var(--text, #fff) 8%);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--primary, #3b82f6); background-clip: padding-box; }