/* =====================================================================
   Darstellung (js/theme.js): Vereinsfarbe und Dunkelmodus
   Wird nach app.css und hallenplan.css geladen.
   ===================================================================== */

/* ---------- Vereinsfarbe: alle Akzente folgen --accent ---------- */
:root { --accent-rgb: 31, 139, 255; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 4px 14px rgba(var(--accent-rgb), .3); }
.btn.primary:hover { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); filter: brightness(1.08); box-shadow: 0 6px 18px rgba(var(--accent-rgb), .4); }
.nav a.active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.switch input:checked + i { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 0 10px rgba(var(--accent-rgb), .4); }
.stat::after { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #38bdf8)); }
.stat:hover, .stat-grid button.stat:hover { border-color: rgba(var(--accent-rgb), .45); }
.input:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
::selection { background: rgba(var(--accent-rgb), .22); }
.date-box { background: var(--accent-2); color: var(--accent-dark); }
.chips .chip-lead { border-color: var(--accent); background: var(--accent-2); }
.sidebar { background: radial-gradient(420px 260px at 0% 0%, rgba(var(--accent-rgb), .22), transparent 70%), radial-gradient(300px 300px at 100% 100%, rgba(56,189,248,.10), transparent 70%), linear-gradient(180deg, var(--side-2), var(--side)); }

/* ---------- Auswahl Hell / Dunkel / Auto ---------- */
.theme-pick { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.theme-pick button { font: inherit; font-size: 13px; border: 0; border-right: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 6px 10px; cursor: pointer; }
.theme-pick button:last-child { border-right: 0; }
.theme-pick button.on { background: var(--accent); color: #fff; }
.ub-theme { padding: 8px 14px 10px; border-top: 1px solid var(--line); }
.ub-theme small { display: block; color: var(--muted); margin-bottom: 6px; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.color-swatches button { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; background: var(--c); }
.color-swatches button.on { box-shadow: 0 0 0 2px var(--text); }
.color-swatches input[type=color] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }

/* ---------- Dunkelmodus ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a111e;
  --panel: #111a2b;
  --panel-2: #0e1626;
  --text: #e3eaf5;
  --muted: #8d9db5;
  --line: #22304a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
}
/* gilt auch gegen die hellen Töne, die theme.js für die Vereinsfarbe setzt */
:root[data-theme="dark"] { --accent-2: color-mix(in srgb, var(--accent) 22%, #111a2b) !important; }
:root[data-theme="dark"] .date-box { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); color: color-mix(in srgb, var(--accent) 60%, #fff); }
:root[data-theme="dark"] a { color: color-mix(in srgb, var(--accent) 70%, #fff); }
:root[data-theme="dark"] .nav a, :root[data-theme="dark"] .btn, :root[data-theme="dark"] .list-row, :root[data-theme="dark"] .stat,
:root[data-theme="dark"] .drill-card, :root[data-theme="dark"] .search-results a, :root[data-theme="dark"] .open-ev a { color: var(--text); }
:root[data-theme="dark"] .nav a { color: var(--side-text); }
:root[data-theme="dark"] .nav a.active, :root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .cal-ev { color: #fff; }

/* Flächen, die in app.css fest weiß sind */
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .icon-btn, :root[data-theme="dark"] .input, :root[data-theme="dark"] .chip,
:root[data-theme="dark"] .search-results, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .ub-menu, :root[data-theme="dark"] .user-btn,
:root[data-theme="dark"] .seg button, :root[data-theme="dark"] .tool, :root[data-theme="dark"] .test-list button, :root[data-theme="dark"] .wd-pick span,
:root[data-theme="dark"] .frame-btn, :root[data-theme="dark"] .bv-steps button, :root[data-theme="dark"] .pchip, :root[data-theme="dark"] .tag-time,
:root[data-theme="dark"] .update-banner, :root[data-theme="dark"] .auth-card, :root[data-theme="dark"] .stat-grid .stat, :root[data-theme="dark"] .ch-bubble,
:root[data-theme="dark"] .gchip.off, :root[data-theme="dark"] .title-input:focus, :root[data-theme="dark"] .hp-hall, :root[data-theme="dark"] .hp-team,
:root[data-theme="dark"] .hp-bar select, :root[data-theme="dark"] .hp-print, :root[data-theme="dark"] .hp-seg { background: var(--panel); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .input { border-color: #2c3b58; }
:root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .icon-btn:hover:not(:disabled), :root[data-theme="dark"] .seg button:hover, :root[data-theme="dark"] .tool:hover,
:root[data-theme="dark"] .table.clickable tbody tr:hover, :root[data-theme="dark"] .list-row:hover, :root[data-theme="dark"] .search-results a:hover,
:root[data-theme="dark"] .ub-menu button:hover, :root[data-theme="dark"] .ch-thread:hover, :root[data-theme="dark"] .hp-table tr.hp-edit:hover { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .btn.danger:hover { background: rgba(220, 38, 38, .15); border-color: rgba(220, 38, 38, .45); }
:root[data-theme="dark"] .btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }
:root[data-theme="dark"] .btn.danger { color: #f87171; }
:root[data-theme="dark"] .todo, :root[data-theme="dark"] .hero-title, :root[data-theme="dark"] .mini-stats a, :root[data-theme="dark"] a.btn:not(.primary),
:root[data-theme="dark"] .list-row .row-title, :root[data-theme="dark"] .block-title, :root[data-theme="dark"] .qa-menu button { color: var(--text); }
:root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .pchip.on, :root[data-theme="dark"] .frame-btn.active, :root[data-theme="dark"] .bv-steps button.on,
:root[data-theme="dark"] .wd-pick input:checked + span, :root[data-theme="dark"] .big-seg input:checked + span, :root[data-theme="dark"] .hp-seg button.on { color: #fff; }
:root[data-theme="dark"] .seg button.on { background: var(--c); }
:root[data-theme="dark"] .tool.active, :root[data-theme="dark"] .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Kopfzeile, Suche, Tabellen, Linien */
:root[data-theme="dark"] .topbar { background: rgba(17, 26, 43, .86); }
:root[data-theme="dark"] #global-search { background-color: #0e1626; }
:root[data-theme="dark"] #global-search:focus { background-color: #0e1626; }
:root[data-theme="dark"] .table th, :root[data-theme="dark"] .cal-head div, :root[data-theme="dark"] .cal-cell.other, :root[data-theme="dark"] .table tr.cat-head td,
:root[data-theme="dark"] .chat-threads, :root[data-theme="dark"] .access-row, :root[data-theme="dark"] .upd-box { background: var(--panel-2); color: var(--muted); }
:root[data-theme="dark"] .table tr.cat-head td { color: var(--text); }
:root[data-theme="dark"] .table td, :root[data-theme="dark"] .list-row, :root[data-theme="dark"] .cal-cell, :root[data-theme="dark"] .test-list button, :root[data-theme="dark"] .m-row,
:root[data-theme="dark"] .open-ev, :root[data-theme="dark"] .msg-item, :root[data-theme="dark"] .log-row, :root[data-theme="dark"] .tpl-row, :root[data-theme="dark"] .ch-thread,
:root[data-theme="dark"] .tag-row, :root[data-theme="dark"] .hp-table td, :root[data-theme="dark"] .hp-dh, :root[data-theme="dark"] .hp-day .hp-col { border-color: var(--line); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .drill-card { border-color: var(--line); }
:root[data-theme="dark"] .hp-line { border-color: #1c2840; }

/* Kleine Kennzeichen */
:root[data-theme="dark"] .badge { background: color-mix(in srgb, var(--c) 22%, var(--panel)); color: color-mix(in srgb, var(--c) 55%, #fff); }
:root[data-theme="dark"] .tag, :root[data-theme="dark"] .pill, :root[data-theme="dark"] kbd, :root[data-theme="dark"] .score, :root[data-theme="dark"] .conn code,
:root[data-theme="dark"] .cal-add, :root[data-theme="dark"] .tag-btn.ghost, :root[data-theme="dark"] .hp-part { background: #1b2740; color: var(--text); border-color: #2c3b58; }
:root[data-theme="dark"] .bar, :root[data-theme="dark"] .stack-bar, :root[data-theme="dark"] .v-timeline, :root[data-theme="dark"] .block-thumb { background: #1b2740; }
:root[data-theme="dark"] .thumb-empty { border-color: #2c3b58; }
:root[data-theme="dark"] .gopt:has(input:checked) { background: color-mix(in srgb, var(--g) 22%, var(--panel)); }
:root[data-theme="dark"] .hp-slot { background: color-mix(in srgb, var(--c) 24%, var(--panel)); color: var(--text); }
:root[data-theme="dark"] .hp-slot small { color: var(--muted); }

/* Hinweisflächen */
:root[data-theme="dark"] .series-bar, :root[data-theme="dark"] .share-box, :root[data-theme="dark"] .be-toolbar.frames, :root[data-theme="dark"] .pay-reported,
:root[data-theme="dark"] .paypal-bar, :root[data-theme="dark"] .ann-info, :root[data-theme="dark"] .src-opt:has(input:checked), :root[data-theme="dark"] .hp-info { background: #12233d; border-color: #24406a; color: var(--text); }
:root[data-theme="dark"] .pay-method { background: var(--panel-2); }
:root[data-theme="dark"] .warn-card, :root[data-theme="dark"] .list-row.warn, :root[data-theme="dark"] .club-alert, :root[data-theme="dark"] .hb-tag,
:root[data-theme="dark"] .ann-warnung { background: #2a2210; border-color: #5c4a14; color: #f3d98b; }
:root[data-theme="dark"] .ann-wartung { background: #2d1416; color: #f4b4ae; }
:root[data-theme="dark"] .ok-line { color: #4ade80; }
:root[data-theme="dark"] .neg, :root[data-theme="dark"] td.neg, :root[data-theme="dark"] .stat b.neg { color: #f87171; }

/* Nachrichten */
:root[data-theme="dark"] .chat-msgs { background: #0b1322; }
:root[data-theme="dark"] .ch-msg.mine .ch-bubble { background: #173a2a; border-color: #23533c; }
:root[data-theme="dark"] .ch-thread.active, :root[data-theme="dark"] .tag-row.playing, :root[data-theme="dark"] .test-list button.active { background: #13284a; }
:root[data-theme="dark"] .ch-bubble b small { color: #4ade80; }
:root[data-theme="dark"] .v-cursor { background: #fff; }

/* Anmeldung */
:root[data-theme="dark"] .auth-card { box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(160, 190, 230, .15); }
:root[data-theme="dark"] .auth-card .legal-links a { color: color-mix(in srgb, var(--accent) 70%, #fff); }

/* Neue Bausteine (1.29.0) */
:root[data-theme="dark"] .la:not(.ok):not(.warn):not(.bad) { background: #1f2b44; color: var(--text); }
:root[data-theme="dark"] .mobile-bar { box-shadow: 0 -6px 20px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .hero-when { color: color-mix(in srgb, var(--accent) 65%, #fff); }
:root[data-theme="dark"] .duty-chip { color: color-mix(in srgb, var(--accent) 60%, #fff); }
:root[data-theme="dark"] .hp-swaps { background: #2a2210; border-color: #5c4a14; color: #f3d98b; }
:root[data-theme="dark"] .mobile-bar a, :root[data-theme="dark"] .mobile-bar button { color: var(--muted); }
:root[data-theme="dark"] .mobile-bar .on { color: color-mix(in srgb, var(--accent) 65%, #fff); }

@media print {
  :root[data-theme="dark"] { color-scheme: light; }
}