/* themes/base.css
   Shared rules for all school themes.
   Each school's theme file defines CSS variables; this file consumes them.
   Only activates when html[data-client-theme] is set (no impact on unthemed pages).

   Variable contract (each school theme must define these):
   --theme-rgb           : R, G, B        base color for rgba()
   --theme-accent        : <color>        primary accent
   --theme-accent-rgb    : R, G, B        accent as RGB for rgba()
   --theme-stroke        : <color>        border / stroke color
   --theme-body-color    : <color>        body text color
   --theme-text-secondary: <color>
   --theme-text-muted    : <color>
   --theme-bg-image      : url(...)       mascot background image
   --theme-bg-color      : <color>        fallback background color
   --theme-bg-position   : center N%      background positioning
   --theme-glass         : rgba(...)      frosted glass panel background
   --sp-panel            : rgba(...)      card shell background
   --sp-panel-soft       : rgba(...)      card shell (secondary) background
   --sp-border-subtle    : <color>        subtle panel border
*/

/* ── Body: mascot background + text-shadow ─────────────────────────── */

html[data-client-theme] body {
  background: var(--theme-bg-image) no-repeat var(--theme-bg-position) / cover,
              var(--theme-bg-color) !important;
  background-attachment: fixed;
  color: var(--theme-body-color, #e7f3ff);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Kill site.css / site-frosted.css ::before overlay so mascot is visible */
html[data-client-theme] body::before {
  background: none !important;
}

/* Reset text-shadow inside panels (not needed over frosted backgrounds) */
html[data-client-theme] .card-shell,
html[data-client-theme] .glass-panel,
html[data-client-theme] .card,
html[data-client-theme] .panel,
html[data-client-theme] .sp-header {
  text-shadow: none;
}

/* ── Frosted admin panels ──────────────────────────────────────────── */

html[data-client-theme] body.frosted-log .glass-panel,
html[data-client-theme] body.frosted-pay .glass-panel,
html[data-client-theme] body.frosted-log .card,
html[data-client-theme] body.frosted-log .panel {
  background: var(--theme-glass);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
}

/* ── Pay page card shells ──────────────────────────────────────────── */

html[data-client-theme] .card-shell {
  background: var(--sp-panel);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border-color: var(--theme-stroke);
}

html[data-client-theme] .card-shell--howitworks {
  background: var(--sp-panel-soft);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}

/* ── Header bar ────────────────────────────────────────────────────── */

html[data-client-theme] .sp-header {
  background: rgba(var(--theme-rgb), 0.78);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
}

/* ── Stat cards ────────────────────────────────────────────────────── */

html[data-client-theme] body.frosted-log .stat-card {
  background: rgba(var(--theme-rgb), 0.65);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}

/* ── Table wrapper ─────────────────────────────────────────────────── */

html[data-client-theme] body.frosted-log .table-wrapper {
  background: rgba(var(--theme-rgb), 0.68);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}

/* ── Filter inputs ─────────────────────────────────────────────────── */

html[data-client-theme] body.frosted-log .filter-control select,
html[data-client-theme] body.frosted-log .filter-control input {
  background: rgba(var(--theme-rgb), 0.50);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* ── Borders on cards / panels ─────────────────────────────────────── */

html[data-client-theme] .heroCard,
html[data-client-theme] .card,
html[data-client-theme] .panel,
html[data-client-theme] .glass {
  border-color: var(--theme-stroke);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

html[data-client-theme] .btn {
  border-color: var(--theme-stroke);
}

/* ── Badges ────────────────────────────────────────────────────────── */

html[data-client-theme] .badge .dot {
  background: rgba(var(--theme-accent-rgb), 0.92);
  box-shadow: 0 0 0 6px rgba(var(--theme-accent-rgb), 0.14);
}

/* ── Table text readability ────────────────────────────────────────── */

html[data-client-theme] body.frosted-log table td,
html[data-client-theme] body.frosted-log table th,
html[data-client-theme] body.frosted-pay table td,
html[data-client-theme] body.frosted-pay table th {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 6px rgba(0, 0, 0, 0.6);
}

html[data-client-theme] body.frosted-log .stat-value,
html[data-client-theme] body.frosted-pay .stat-value {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* ── Register-vehicle form readability ─────────────────────────────── */

html[data-client-theme] .reg-container .panel {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
}

html[data-client-theme] .reg-container h1,
html[data-client-theme] .reg-container .form-section-title {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Override glossy gradient text effect from site.css so h1 is solid white */
html[data-client-theme] .reg-container h1 {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
  background: none;
}

html[data-client-theme] .reg-container .form-label {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 6px rgba(0, 0, 0, 0.5);
}

html[data-client-theme] .reg-container .form-input {
  text-shadow: none;
}

/* ── Bulk-register readability ─────────────────────────────────────── */

html[data-client-theme] .bulk-container h1,
html[data-client-theme] .bulk-container h3 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.6);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
  background: none;
}

html[data-client-theme] .bulk-container .panel {
  background: var(--theme-glass);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
}

html[data-client-theme] .bulk-stat-card {
  background: rgba(var(--theme-rgb), 0.55);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-color: var(--theme-stroke);
}

html[data-client-theme] .bulk-container .quick-input {
  background: rgba(var(--theme-rgb), 0.40);
  border-color: var(--theme-stroke);
  text-shadow: none;
}

html[data-client-theme] .bulk-container .quick-input:focus {
  border-color: var(--theme-accent);
}

/* ── Register-vehicle form variable aliases ────────────────────────── */

html[data-client-theme] {
  --color-border-glass: var(--theme-stroke);
  --color-surface-glass: rgba(var(--theme-rgb), 0.40);
  --color-border-primary: var(--sp-border-subtle);
  --color-border-secondary: var(--theme-stroke);
  --color-text-primary: rgba(255, 255, 255, 0.94);
  --color-text-secondary: var(--theme-text-secondary);
  --color-text-muted: var(--theme-text-muted);
}

html[data-client-theme] .form-input {
  border: 1px solid var(--color-border-glass);
  background: rgba(var(--theme-rgb), 0.40);
}

html[data-client-theme] .form-input:focus {
  border-color: var(--theme-accent);
}