/* ── Enchanted Alerts — Shared Theme (Light / Dark) ─────────────────────── */

/* ── Light mode CSS variables ─────────────────────────────────────────────
   Overrides the :root variables defined per-page when html.light is set.
   html.light specificity (0,1,1) beats :root (0,1,0).                    */
html.light {
  --night:     #fdf6ff;
  --deep:      #e6edf8;
  --surface:   #e6edf8;
  --card:      #fffcfe;
  --card2:     #f2f6ff;
  --border:    #bccce6;
  --border-lt: #98b4d4;
  --gold:      #1060ee;
  --gold-lt:   #2878f8;
  --gold-dim:  rgba(26,96,238,0.09);
  --cyan:      #005fa8;
  --purple:    #4a3fb0;
  --blue:      #1060ee;
  --blue-lt:   #2878f8;
  --amber:     #955200;
  --text:      #1a1f3a;
  --muted:     #5a6080;
  --muted-lt:  #5a7290;
  --bg:        #fdf6ff;
  --success:   #0a9865;
  --error:     #c01838;
  --warn:      #a04808;
  --r:         14px;
  --radius:    12px;
  --radius-lg: 22px;
}

/* ── Smooth theme transitions ──────────────────────────────────────────── */
body, nav, .card, .sidebar, .step, .feature, .alert-card,
.site-nav, .slot, .meal-toggle, .cal-day, .cal-legend,
.vtab, .state-box, .meal-section, .meal-header, .cal-month,
input, select, textarea, button.theme-toggle {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

/* ── Light mode: body background ──────────────────────────────────────── */
html.light body {
  background: linear-gradient(160deg, #fdf6ff 0%, #f0f4ff 40%, #f5f0ff 70%, #fff8f0 100%);
  background-attachment: fixed;
}

/* ── Light mode: starfield / decorative overlays ──────────────────────── */
html.light body::before {
  background-image:
    radial-gradient(ellipse 60% 30% at 25% 10%, rgba(26,96,238,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 40% 20% at 80% 80%, rgba(100,130,255,0.02) 0%, transparent 60%);
}

html.light body::after {
  opacity: 0 !important;
  animation: none !important;
}

html.light .bg-stars {
  opacity: 0.03;
}

/* ── Light mode: universal element overrides ───────────────────────────────
   These catch pages that use hardcoded hex values instead of CSS variables. */
html.light body {
  color: var(--text);
}

html.light label {
  color: var(--muted);
}

html.light .card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

html.light .step {
  background: var(--card);
  border-color: var(--border);
}

html.light .feature {
  background: var(--card2);
  border-color: var(--border);
}

/* ── Light mode: navigation bars — always dark ─────────────────────────── */
html.light nav:not(.admin-sidebar-nav) {
  background: rgba(6,13,31,0.93) !important;
  border-bottom-color: rgba(74,158,255,0.15) !important;
}

html.light .site-nav {
  background: rgba(6,13,31,0.92) !important;
  border-bottom-color: rgba(26,58,107,0.5) !important;
}

/* ── Light mode: nav link colors — stay light (nav is always dark) ───── */
html.light .site-nav-links a {
  color: #7ec8ff;
}

html.light .site-nav-links a:hover {
  border-color: rgba(74,158,255,0.3) !important;
  background: rgba(74,158,255,0.08) !important;
}

html.light .nav-link-info {
  color: var(--muted-lt) !important;
}

/* ── Light mode: logo on light body background ──────────────────────────── */
html.light .page-logo {
  background: rgba(6,13,31,0.9);
  border-radius: 12px;
  padding: 14px 22px;
}

html.light .header-logo {
  background: rgba(6,13,31,0.9);
  border-radius: 12px;
  padding: 14px 22px;
}

html.light .hero-logo {
  background: rgba(6,13,31,0.7);
  border-radius: 16px;
  padding: 16px 24px;
}

/* ── Light mode: page headings (gradient text) ──────────────────────────
   Inline-style blocks define white-start gradients; override to dark.   */
html.light h1 {
  background: linear-gradient(135deg, #061020 0%, #1060ee 55%, #005fa8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html.light .hero h1,
html.light .sec-title {
  background: linear-gradient(135deg, #061020 0%, #1060ee 50%, #005fa8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html.light .stat-num,
html.light .preview-copy h3 {
  background: linear-gradient(135deg, #1060ee 0%, #005fa8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Light mode: sidebar brand name ────────────────────────────────────── */
html.light .bname {
  background: linear-gradient(135deg, #061020 0%, #1060ee 60%, #005fa8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Light mode: subdued body copy ────────────────────────────────────── */
html.light .hero-sub           { color: rgba(10,24,40,0.68); }
html.light .sec-desc           { color: rgba(10,24,40,0.60); }
html.light .step p             { color: rgba(10,24,40,0.60); }
html.light .fb p               { color: rgba(10,24,40,0.60); }
html.light .preview-copy p     { color: rgba(10,24,40,0.65); }
html.light .preview-copy ul li { color: rgba(10,24,40,0.72); }
html.light .venue-card > p     { color: rgba(10,24,40,0.62); }
html.light .alert-greeting     { color: rgba(10,24,40,0.70); }

/* ── Light mode: card shadows ──────────────────────────────────────────── */
html.light .card {
  box-shadow: 0 4px 24px rgba(0,30,90,0.07), 0 1px 4px rgba(0,30,90,0.05);
}

html.light .alert-card {
  box-shadow: 0 12px 40px rgba(0,30,90,0.10);
}

/* ── Light mode: form inputs ───────────────────────────────────────────── */
html.light input[type="date"],
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="password"] {
  background: var(--deep) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html.light input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.45;
}

html.light select,
html.light .cal-select {
  background: var(--deep) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── Light mode: autocomplete dropdown ─────────────────────────────────── */
html.light #autocomplete {
  background: var(--card) !important;
  box-shadow: 0 8px 24px rgba(0,30,90,0.12);
}

html.light .ac-item {
  border-bottom-color: var(--border);
}

/* ── Light mode: landing alternate section bg ──────────────────────────── */
html.light .alt-bg {
  background: rgba(220,232,252,0.45);
}

/* ── Light mode: alert email preview card ──────────────────────────────── */
html.light .alert-card-header {
  background: linear-gradient(135deg, rgba(26,96,238,0.06) 0%, rgba(240,245,255,0.95) 100%) !important;
}

/* ── Light mode: calendar ──────────────────────────────────────────────── */
html.light .cal-day.has-avail {
  background: rgba(240,245,255,0.8);
  border-color: rgba(160,192,224,0.5);
}

html.light .cal-day.has-avail:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
}

html.light .cal-dot.none {
  background: #c0d0e8;
}

/* ── Light mode: admin sidebar ─────────────────────────────────────────── */
html.light .sidebar {
  background: var(--card);
  border-right-color: var(--border);
}

html.light .nav-item:hover {
  background: rgba(26,96,238,0.06);
}

html.light .nav-item.active {
  background: rgba(26,96,238,0.08);
  border-left-color: var(--blue);
}

html.light .sidebar-foot {
  border-top-color: var(--border);
}

/* ── Light mode: banner / toast ────────────────────────────────────────── */
html.light .banner.err {
  background: rgba(192,24,56,0.06);
  border-color: rgba(192,24,56,0.28);
}

html.light .banner.ok {
  background: rgba(10,152,101,0.07);
  border-color: rgba(10,152,101,0.28);
}

/* ── Light mode: hero pill badge ───────────────────────────────────────── */
html.light .hero-pill {
  background: rgba(26,96,238,0.07);
  border-color: rgba(26,96,238,0.2);
  color: var(--gold-lt);
}

/* ── Light mode: stats strip dividers ──────────────────────────────────── */
html.light .stats-strip {
  border-top-color: rgba(188,204,230,0.7);
}

html.light .stat-item + .stat-item {
  border-left-color: rgba(188,204,230,0.7);
}

/* ── Light mode: footer links ──────────────────────────────────────────── */
html.light .page-footer a { color: var(--muted); }
html.light .page-footer a:hover { color: var(--gold); }

/* ── Light mode: landing CTA banner ────────────────────────────────────── */
html.light .cta-banner {
  background: linear-gradient(135deg, rgba(26,96,238,0.06) 0%, rgba(240,245,255,0.96) 55%, rgba(100,120,255,0.04) 100%);
  border-color: rgba(26,96,238,0.18);
}

html.light .cta-banner h2 {
  background: linear-gradient(135deg, #061020 0%, #1060ee 55%, #005fa8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html.light .cta-banner p {
  color: rgba(10,24,40,0.65);
}

/* ── Light mode: footer logo gradient ──────────────────────────────────── */
html.light .footer-logo {
  background: linear-gradient(135deg, #061020 0%, #1060ee 55%, #005fa8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html.light footer {
  border-top-color: rgba(176,200,232,0.5);
}

html.light .footer-disc {
  color: rgba(74,98,120,0.65);
}

/* ── Light mode: venue card ─────────────────────────────────────────────── */
html.light .venue-card {
  background: linear-gradient(135deg, rgba(26,96,238,0.05) 0%, rgba(240,245,255,0.8) 100%);
  border-color: rgba(26,96,238,0.15);
}

/* ── Light mode: mosaic step/feature grid cells ─────────────────────────── */
html.light .steps,
html.light .features {
  background: rgba(188,204,230,0.5) !important;
  border-color: rgba(188,204,230,0.5) !important;
}

html.light .step {
  background: #ffffff !important;
}

html.light .step:hover {
  background: rgba(26,96,238,0.03) !important;
}

html.light .feature {
  background: #f4f8ff !important;
}

html.light .feature:hover {
  background: rgba(26,96,238,0.04) !important;
}

html.light .step-icon,
html.light .fi {
  background: #eef3ff !important;
  border-color: rgba(26,96,238,0.18) !important;
  color: #1060ee !important;
}

/* ── Light mode: stats strip dividers (landing.html inline borders) ──────── */
html.light .stats-strip {
  border-top-color: rgba(188,204,230,0.7) !important;
}

html.light .stat-item + .stat-item {
  border-left-color: rgba(188,204,230,0.7) !important;
}

/* ── Light mode: section label decorative lines ─────────────────────────── */
html.light .section-label::before,
html.light .section-label::after {
  background: rgba(26,96,238,0.25) !important;
}

/* ── Light mode: alert subject dot ─────────────────────────────────────── */
html.light .alert-subject-dot {
  background: #0a9865;
}

/* ── Light mode: alert slot tags ───────────────────────────────────────── */
html.light .alert-slot {
  background: rgba(10,152,101,0.07) !important;
  border-color: rgba(10,152,101,0.28) !important;
  color: #0a9865 !important;
}

/* ── Light mode: check-ic icons ────────────────────────────────────────── */
html.light .check-ic {
  color: #0a9865 !important;
}

/* ── Light mode: vtag chips ─────────────────────────────────────────────── */
html.light .vtag {
  background: rgba(26,96,238,0.07);
  border-color: rgba(26,96,238,0.18);
}

html.light .vtag:hover {
  background: rgba(26,96,238,0.14);
  border-color: rgba(26,96,238,0.38);
}

/* ── Theme toggle button ───────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  color: var(--muted);
  transition: all 0.2s;
  vertical-align: middle;
  font-family: sans-serif;
}

.theme-toggle:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
}

/* ── Responsive improvements ────────────────────────────────────────────── */

/* Tighten inner app nav on small screens */
@media (max-width: 520px) {
  .nav-links { gap: 2px !important; }
  .nav-link  { font-size: 11px !important; padding: 5px 7px !important; }
  .nav-signout { font-size: 11px !important; padding: 5px 7px !important; }
}

/* Landing: collapse 4-column stats to 2×2 grid on mobile */
@media (max-width: 640px) {
  .stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0;
  }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4) {
    border-top: 1px solid rgba(26,58,107,0.4);
    padding-top: 24px;
    margin-top: 20px;
  }
  html.light .stat-item:nth-child(3),
  html.light .stat-item:nth-child(4) {
    border-top-color: rgba(188,204,230,0.6);
  }
  .stat-item:nth-child(3) { border-left: none !important; }
}

/* Landing: stack two-column preview wrap */
@media (max-width: 700px) {
  .preview-wrap {
    grid-template-columns: 1fr !important;
  }
  .hero-crown { font-size: 64px; }
}

/* Landing: center nav on small screens */
@media (max-width: 520px) {
  .nav-center { display: none !important; }
}

/* Card padding on narrow mobile */
@media (max-width: 420px) {
  .card { padding: 22px 16px !important; }
}

/* Admin sidebar: show toggle button in topbar on mobile */
@media (max-width: 640px) {
  .sidebar-toggle-wrap {
    display: flex !important;
  }
}