/* ==========================================================================
   Münsters Bunte Padel Liga - shared theme
   - Provides design tokens for both dark (default) and light themes.
   - Pages opt in by linking this stylesheet and (optionally) loading theme.js.
   - Pages keep their own page-specific CSS, but should read from the tokens
     defined here so the theme toggle works consistently.

   Notes on light mode:
   - Several legacy pages hardcode rgba()/hex colors instead of reading tokens.
     The `html[data-theme="light"]` override block at the bottom of this file
     targets those concrete classes/IDs to flip them into a readable light
     palette without rewriting each page.
   - The theme transition deliberately does NOT include `section`,
     `.section-surface`, or `.panel`, because index.html uses the `transition`
     property on `section` for its scroll fade-in. Overriding it killed the
     animation. Theme-switch animation is now scoped to body / sidebar /
     header / footer surfaces only.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --sidebar-w: 220px;

  /* Dark theme (default) */
  --bg: #0b1020;
  --surface: #111827;
  --card: #0f172a;
  --card-2: rgba(15, 23, 42, 0.75);
  --panel: rgba(17, 24, 39, 0.72);
  --panel-border: rgba(148, 163, 184, 0.18);
  --brand: #22c55e;
  --brand-2: #38bdf8;
  --accent: #f59e0b;
  --text: #e5e7eb;
  --text-strong: #f8fafc;
  --muted: #9ca3af;
  --link: #93c5fd;
  --shadow: 0 20px 50px rgba(6, 12, 28, 0.35);
  --header-grad: linear-gradient(135deg, rgba(8, 28, 60, 0.85), rgba(0, 116, 228, 0.9));
  --bg-radial-1: radial-gradient(80rem 80rem at -10% -20%, rgba(56, 189, 248, 0.18), transparent 50%);
  --bg-radial-2: radial-gradient(60rem 60rem at 110% 10%, rgba(34, 197, 94, 0.18), transparent 45%);
  --form-input-bg: #f8fafc;
  --form-input-text: #0f172a;
  --form-input-border: rgba(148, 163, 184, 0.35);
  --sidebar-bg: rgba(17, 24, 39, 0.95);
  --sidebar-link: #ffffff;
  --sidebar-link-hover: rgba(59, 130, 246, 0.25);
  --sidebar-link-active: rgba(34, 197, 94, 0.30);
  --sidebar-link-active-text: #bbf7d0;
  --footer-bg: #0b1020;
  --footer-text: #9ca3af;
  --pill-bg: rgba(34, 197, 94, 0.15);
  --pill-text: #86efac;
  --rank-th-bg: rgba(15, 23, 42, 0.9);
  --rank-td-bg: rgba(15, 23, 42, 0.65);
}

html[data-theme="light"] {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --card: #ffffff;
  --card-2: rgba(255, 255, 255, 0.96);
  --panel: rgba(255, 255, 255, 0.94);
  --panel-border: rgba(15, 23, 42, 0.10);
  --brand: #15803d;
  --brand-2: #0284c7;
  --accent: #b45309;
  --text: #1f2937;
  --text-strong: #0b1020;
  --muted: #4b5563;
  --link: #1d4ed8;
  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --header-grad: linear-gradient(135deg, #0ea5e9 0%, #6366f1 60%, #a855f7 100%);
  --bg-radial-1: radial-gradient(80rem 80rem at -10% -20%, rgba(14, 165, 233, 0.10), transparent 50%);
  --bg-radial-2: radial-gradient(60rem 60rem at 110% 10%, rgba(34, 197, 94, 0.10), transparent 45%);
  --form-input-bg: #ffffff;
  --form-input-text: #0f172a;
  --form-input-border: rgba(15, 23, 42, 0.18);
  --sidebar-bg: rgba(255, 255, 255, 0.97);
  --sidebar-link: #1f2937;
  --sidebar-link-hover: rgba(14, 165, 233, 0.14);
  --sidebar-link-active: rgba(21, 128, 61, 0.18);
  --sidebar-link-active-text: #166534;
  --footer-bg: #ffffff;
  --footer-text: #4b5563;
  --pill-bg: rgba(21, 128, 61, 0.12);
  --pill-text: #166534;
  --rank-th-bg: rgba(15, 23, 42, 0.04);
  --rank-td-bg: #ffffff;
}

/* ---------- Theme transition (only body + sidebar + header) ---------- */
html.theme-ready body,
html.theme-ready #sidebar,
html.theme-ready footer {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  z-index: 1035;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
  transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease;
}
.theme-toggle:hover { transform: translateY(-1px) scale(1.03); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 3px;
}
.theme-toggle .theme-toggle-icon { line-height: 1; }
.theme-toggle[data-theme-current="light"] .theme-toggle-icon::before { content: "\2600"; } /* sun */
.theme-toggle[data-theme-current="dark"]  .theme-toggle-icon::before { content: "\263D"; } /* moon */

@media (min-width: 992px) {
  .theme-toggle { right: 1.25rem; top: 1.1rem; }
}

@media (max-width: 480px) {
  .theme-toggle {
    width: 40px; height: 40px;
    top: 0.6rem; right: 0.6rem;
    font-size: 1rem;
  }
  .nav-link, .btn, button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-ready body,
  html.theme-ready #sidebar,
  html.theme-ready footer,
  .theme-toggle { transition: none; }
}

/* ==========================================================================
   Light-mode overrides for legacy pages
   These rules only fire when the user has chosen light mode. They use high-
   specificity selectors and `!important` where the original page rule does
   the same, so the overrides actually win.
   ========================================================================== */

html[data-theme="light"] body {
  background:
    radial-gradient(80rem 80rem at -10% -20%, rgba(14, 165, 233, 0.10), transparent 50%),
    radial-gradient(60rem 60rem at 110% 10%, rgba(34, 197, 94, 0.10), transparent 45%),
    var(--bg) !important;
  color: var(--text) !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4 {
  color: var(--text-strong);
}
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] label,
html[data-theme="light"] summary {
  color: var(--text);
}

/* Sidebar */
html[data-theme="light"] #sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--panel-border);
  backdrop-filter: blur(6px);
}
html[data-theme="light"] #sidebar .nav-link {
  color: var(--sidebar-link) !important;
}
html[data-theme="light"] #sidebar .nav-link:hover,
html[data-theme="light"] #sidebar .nav-link:focus {
  background: var(--sidebar-link-hover) !important;
  color: var(--sidebar-link) !important;
}
html[data-theme="light"] #sidebar .nav-link.active {
  background: var(--sidebar-link-active) !important;
  color: var(--sidebar-link-active-text) !important;
}
html[data-theme="light"] #closeNav { color: var(--text); }
html[data-theme="light"] #openNav {
  background: #ffffff;
  border-color: var(--panel-border);
  color: var(--text);
}
html[data-theme="light"] #openNav .navbar-toggler-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" stroke="%231f2937" stroke-width="2"><path d="M4 7h22M4 15h22M4 23h22"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}
html[data-theme="light"] #sidebar-overlay {
  background: rgba(15, 23, 42, 0.25);
}

/* Header (gradient banner at the top of every page) */
html[data-theme="light"] header {
  background: var(--header-grad) !important;
  color: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] header h1,
html[data-theme="light"] header h2,
html[data-theme="light"] header p,
html[data-theme="light"] header .hero-title,
html[data-theme="light"] header .hero-sub {
  color: #ffffff !important;
}

/* Surfaces / cards */
html[data-theme="light"] .section-surface {
  background: var(--panel) !important;
  border-color: var(--panel-border) !important;
  color: var(--text);
}
html[data-theme="light"] .panel {
  background: var(--panel) !important;
  border-color: var(--panel-border) !important;
  color: var(--text);
}
html[data-theme="light"] .card-surface {
  background: var(--panel) !important;
  border-color: var(--panel-border) !important;
  color: var(--text);
}
html[data-theme="light"] .form-card {
  background: var(--card-2) !important;
  border-color: var(--panel-border) !important;
  color: var(--text);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .form-card label,
html[data-theme="light"] .form-card .section-intro,
html[data-theme="light"] #register h2,
html[data-theme="light"] #register p,
html[data-theme="light"] #register .section-intro {
  color: var(--text) !important;
}
html[data-theme="light"] #register h2 {
  color: var(--text-strong) !important;
}
html[data-theme="light"] .next-card {
  background: var(--card-2) !important;
  border-color: var(--panel-border) !important;
  color: var(--text);
}
html[data-theme="light"] .next-card span { color: var(--muted); }
html[data-theme="light"] .group-card {
  background: var(--card-2) !important;
  border-color: var(--panel-border) !important;
  color: var(--text);
}
html[data-theme="light"] .rank-table th {
  background: var(--rank-th-bg) !important;
  color: var(--text-strong) !important;
  border-color: var(--panel-border) !important;
}
html[data-theme="light"] .rank-table td {
  background: var(--rank-td-bg) !important;
  color: var(--text) !important;
  border-color: var(--panel-border) !important;
}
html[data-theme="light"] .name-pill {
  background: rgba(2, 132, 199, 0.10);
  color: #075985;
  border-color: rgba(2, 132, 199, 0.30);
}

/* Datenschutz / Impressum wrap card */
html[data-theme="light"] .wrap {
  background: var(--panel) !important;
  border-color: var(--panel-border) !important;
  color: var(--text);
}
html[data-theme="light"] .wrap a { color: var(--link); }

/* Details / news collapsibles */
html[data-theme="light"] #news details,
html[data-theme="light"] details {
  background: var(--card-2) !important;
  border-color: var(--panel-border) !important;
  color: var(--text);
}
html[data-theme="light"] #news details[open],
html[data-theme="light"] details[open] {
  background: rgba(255, 255, 255, 0.98) !important;
}

/* Pills / badges */
html[data-theme="light"] .pill {
  background: var(--pill-bg);
  color: var(--pill-text);
}

/* Footer */
html[data-theme="light"] footer {
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  border-top: 1px solid var(--panel-border);
}
html[data-theme="light"] footer a { color: var(--text-strong); }

/* Forms inside cards */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: var(--form-input-bg);
  color: var(--form-input-text);
  border-color: var(--form-input-border);
}

/* Spielfinder-specific known surfaces */
html[data-theme="light"] .availability-table,
html[data-theme="light"] .slot-card,
html[data-theme="light"] .calendar-wrap {
  color: var(--text);
}
html[data-theme="light"] .calendar-day,
html[data-theme="light"] .slot-item,
html[data-theme="light"] .callout,
html[data-theme="light"] .toggle-btn,
html[data-theme="light"] .slots-table td,
html[data-theme="light"] .cell-empty {
  background: var(--card-2) !important;
  border-color: var(--panel-border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .slots-table th {
  background: var(--rank-th-bg) !important;
  border-color: var(--panel-border) !important;
  color: var(--text-strong) !important;
}
html[data-theme="light"] .calendar-day.available,
html[data-theme="light"] .cell-available {
  background: rgba(21, 128, 61, 0.12) !important;
  border-color: rgba(21, 128, 61, 0.30) !important;
  color: #166534 !important;
}
html[data-theme="light"] .calendar-day small,
html[data-theme="light"] .slot-meta,
html[data-theme="light"] .mobile-slot-line span,
html[data-theme="light"] .section-meta,
html[data-theme="light"] .time-hint,
html[data-theme="light"] .selected-day-times__intro,
html[data-theme="light"] .day-time-picker__field label,
html[data-theme="light"] .name-select label {
  color: var(--muted) !important;
}
html[data-theme="light"] .mobile-slot-line strong {
  color: var(--text-strong) !important;
}
html[data-theme="light"] .slot-chip,
html[data-theme="light"] .name-pill {
  background: rgba(2, 132, 199, 0.10) !important;
  border-color: rgba(2, 132, 199, 0.30) !important;
  color: #075985 !important;
}
html[data-theme="light"] .badge-3 {
  background: rgba(180, 83, 9, 0.12) !important;
  border-color: rgba(180, 83, 9, 0.30) !important;
  color: #92400e !important;
}
html[data-theme="light"] .badge-4 {
  background: rgba(21, 128, 61, 0.12) !important;
  border-color: rgba(21, 128, 61, 0.30) !important;
  color: #166534 !important;
}
html[data-theme="light"] .more-link {
  color: var(--link) !important;
}

/* Bootstrap btn-outline-light is invisible on a light page */
html[data-theme="light"] .btn-outline-light {
  color: var(--text-strong) !important;
  border-color: var(--text-strong) !important;
  background: transparent;
}
html[data-theme="light"] .btn-outline-light:hover {
  background: var(--text-strong) !important;
  color: #ffffff !important;
}
html[data-theme="light"] .btn-light {
  background: #ffffff !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--panel-border);
}

/* Consent banner */
html[data-theme="light"] .consent-banner {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--panel-border) !important;
  color: var(--text);
}
html[data-theme="light"] .consent-banner p { color: var(--text); }

/* Theme toggle in light mode */
html[data-theme="light"] .theme-toggle {
  background: #ffffff;
  color: var(--text);
  border-color: var(--panel-border);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
}