/*
 * ============================================================
 * WM-Tippgame 2026 – Dark Mode
 * ============================================================
 *
 * Strategie: body.wmtg-dark setzt CSS-Custom-Properties neu.
 * Alle Komponenten erben die Variablen – kein !important-Krieg.
 * Hardcodierte Farben in Komponenten werden durch body.wmtg-dark
 * selektiv überschrieben.
 *
 * Dieses File wird nach style.css und ranking.css geladen,
 * damit die Spezifität immer gewinnt.
 * ============================================================
 */

/* ── 1. CSS-Variablen für Dark Mode ─────────────────────────────────────── */

body.wmtg-dark {
    /* Hintergrund & Oberflächen */
    --wmtg-bg:           var(--wmtg-user-bg, #0f1117);
    --wmtg-card-bg:      var(--wmtg-user-surface, #151924);

    /* Text */
    --wmtg-text:         #f0f4ff;
    --wmtg-muted:        #8899bb;

    /* Rahmen & Eingaben */
    --wmtg-border:       rgba(255, 255, 255, 0.10);
    --wmtg-input-bg:     rgba(255, 255, 255, 0.06);

    /* Tabelle */
    --wmtg-table-header-bg:   rgba(255, 255, 255, 0.05);
    --wmtg-table-header-text: #f0f4ff;

    /* Schatten & Feedback */
    --wmtg-shadow:       0 2px 16px rgba(0, 0, 0, 0.45);
    --wmtg-success-bg:   rgba(34, 197, 94, 0.12);
    --wmtg-error-bg:     rgba(239, 68, 68, 0.12);

    /* Dashboard */
    --wmtg-db-text:      #f0f4ff;
    --wmtg-db-muted:     #8899bb;

    /* Viewport */
    background: var(--wmtg-bg) !important;
    color: var(--wmtg-text) !important;
}

/* ── 2. Haupt-Wrapper & Karten ───────────────────────────────────────────── */

body.wmtg-dark .wmtg-wrap,
body.wmtg-dark .wmtg-tipping-wrap,
body.wmtg-dark .wmtg-ranking-table-page,
body.wmtg-dark .wmtg-stats-page,
body.wmtg-dark .wmtg-design-settings,
body.wmtg-dark .wmtg-rl-wrap {
    color: var(--wmtg-text);
}

body.wmtg-dark .wmtg-card,
body.wmtg-dark .wmtg-panel-card,
body.wmtg-dark .wmtg-stats-card,
body.wmtg-dark .wmtg-db-card,
body.wmtg-dark .wmtg-db-welcome,
body.wmtg-dark .wmtg-dashboard-card,
body.wmtg-dark .wmtg-dash-card,
body.wmtg-dark .wmtg-rl-card,
body.wmtg-dark .wmtg-rl-modal,
body.wmtg-dark .wmtg-ds-section {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-text) !important;
}

/* ── 3. Texte ────────────────────────────────────────────────────────────── */

body.wmtg-dark .wmtg-card h1,
body.wmtg-dark .wmtg-card h2,
body.wmtg-dark .wmtg-card h3,
body.wmtg-dark .wmtg-card h4,
body.wmtg-dark .wmtg-wrap h1,
body.wmtg-dark .wmtg-wrap h2,
body.wmtg-dark .wmtg-wrap h3,
body.wmtg-dark .wmtg-wrap h4 {
    color: var(--wmtg-text) !important;
}

/* Hardcodierte Textfarben überschreiben */
body.wmtg-dark .wmtg-fx-teamname,
body.wmtg-dark .wmtg-fix-code,
body.wmtg-dark .wmtg-fx-teamcode,
body.wmtg-dark .wmtg-db-big,
body.wmtg-dark .wmtg-db-welcome-name,
body.wmtg-dark .wmtg-db-welcome-greeting,
body.wmtg-dark .wmtg-db-welcome-stat-val,
body.wmtg-dark .wmtg-cd-num,
body.wmtg-dark .wmtg-dash-big,
body.wmtg-dark .wmtg-match-teams,
body.wmtg-dark .wmtg-match-teams strong,
body.wmtg-dark .wmtg-result-row strong,
body.wmtg-dark .wmtg-ranking-row strong,
body.wmtg-dark .wmtg-team strong,
body.wmtg-dark .wmtg-point-list strong {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-muted,
body.wmtg-dark .wmtg-fx-meta,
body.wmtg-dark .wmtg-fx-country,
body.wmtg-dark .wmtg-fx-venue,
body.wmtg-dark .wmtg-cd-lbl,
body.wmtg-dark .wmtg-db-welcome-stat-label,
body.wmtg-dark .wmtg-db-muted,
body.wmtg-dark .wmtg-match-date,
body.wmtg-dark .wmtg-dash-sub,
body.wmtg-dark .wmtg-dash-note,
body.wmtg-dark .wmtg-dash-percent,
body.wmtg-dark .wmtg-point-list div,
body.wmtg-dark .wmtg-group-chip,
body.wmtg-dark .wmtg-panel-head,
body.wmtg-dark .wmtg-ds-section-head p {
    color: var(--wmtg-muted) !important;
}

/* Links */
body.wmtg-dark .wmtg-wrap a,
body.wmtg-dark .wmtg-card a {
    color: var(--wmtg-user-accent, #f0f4ff);
}

/* ── 4. Fixture-Zeilen / Spielplan ───────────────────────────────────────── */

body.wmtg-dark .wmtg-group-board {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-group-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-group-content {
    background: var(--wmtg-card-bg) !important;
}

body.wmtg-dark .wmtg-fixture-row {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-fx-meta {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-fx-vs {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--wmtg-muted) !important;
}

/* Datum-Block */
body.wmtg-dark .wmtg-fx-date-block {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-cd-num {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-cd-lbl {
    color: var(--wmtg-muted) !important;
}

/* Uhrzeit-Pills */
body.wmtg-dark .wmtg-time-pill {
    opacity: 0.85;
}

/* Fixture-Stage-Header */
body.wmtg-dark .wmtg-mt-stage-header,
body.wmtg-dark .wmtg-group-stage-header {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--wmtg-muted) !important;
    border-color: var(--wmtg-border) !important;
}

/* Calendar-Rows */
body.wmtg-dark .wmtg-calendar-row {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-text) !important;
}

/* ── 5. Tipp-Eingaben ────────────────────────────────────────────────────── */

body.wmtg-dark .wmtg-fixture-tip input[type="number"],
body.wmtg-dark .wmtg-wrap .wmtg-fixture-tip .wmtg-tip-home,
body.wmtg-dark .wmtg-wrap .wmtg-fixture-tip .wmtg-tip-away {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--wmtg-text) !important;
}

/* Leere Felder */
body.wmtg-dark .wmtg-wrap .wmtg-fixture-row:not(.wmtg-has-tip) .wmtg-fixture-tip .wmtg-tip-home,
body.wmtg-dark .wmtg-wrap .wmtg-fixture-row:not(.wmtg-has-tip) .wmtg-fixture-tip .wmtg-tip-away {
    color: var(--wmtg-muted) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Ausgefüllte Felder – Farben bleiben semantisch, werden aber heller */
body.wmtg-dark .wmtg-wrap .wmtg-fixture-row.wmtg-tip-home-win .wmtg-fixture-tip .wmtg-tip-home.has-value {
    border-color: #4ade80 !important;
    color: #4ade80 !important;
    background: rgba(74, 222, 128, 0.1) !important;
}
body.wmtg-dark .wmtg-wrap .wmtg-fixture-row.wmtg-tip-home-win .wmtg-fixture-tip .wmtg-tip-away.has-value,
body.wmtg-dark .wmtg-wrap .wmtg-fixture-row.wmtg-tip-away-win .wmtg-fixture-tip .wmtg-tip-home.has-value {
    border-color: #f87171 !important;
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.1) !important;
}
body.wmtg-dark .wmtg-wrap .wmtg-fixture-row.wmtg-tip-away-win .wmtg-fixture-tip .wmtg-tip-away.has-value {
    border-color: #4ade80 !important;
    color: #4ade80 !important;
    background: rgba(74, 222, 128, 0.1) !important;
}
body.wmtg-dark .wmtg-wrap .wmtg-fixture-row.wmtg-tip-draw .wmtg-fixture-tip .wmtg-tip-home.has-value,
body.wmtg-dark .wmtg-wrap .wmtg-fixture-row.wmtg-tip-draw .wmtg-fixture-tip .wmtg-tip-away.has-value {
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.1) !important;
}

/* Würfel-Button */
body.wmtg-dark .wmtg-fixture-tip .wmtg-dice-button {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-fixture-tip .wmtg-dice-button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--wmtg-text) !important;
}

/* Würfel-Feedback */
body.wmtg-dark .wmtg-fixture-tip .wmtg-dice-button.wmtg-saved {
    background: rgba(74, 222, 128, 0.15) !important;
    border-color: #4ade80 !important;
    color: #4ade80 !important;
}

/* Gruppen-Würfel */
body.wmtg-dark .wmtg-group-dice-wrap {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

body.wmtg-dark .wmtg-group-dice-wrap:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
}

body.wmtg-dark .wmtg-group-dice-wrap .wmtg-group-dice-button {
    color: var(--wmtg-muted) !important;
}

/* Ergebnis-Anzeige (die Farben bleiben semantisch) */
body.wmtg-dark .wmtg-result-colon {
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-tip-sub,
body.wmtg-dark .wmtg-tip-sub em,
body.wmtg-dark .wmtg-tip-sub-empty {
    color: rgba(136, 153, 187, 0.7) !important;
}

/* ── 6. Tabs ─────────────────────────────────────────────────────────────── */

body.wmtg-dark .wmtg-tabs {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-tabs button,
body.wmtg-dark .wmtg-tab {
    background: transparent !important;
    color: var(--wmtg-muted) !important;
    border-color: transparent !important;
}

body.wmtg-dark .wmtg-tabs button.active,
body.wmtg-dark .wmtg-tab.is-active {
    background: rgba(var(--wmtg-user-accent-rgb, 239, 60, 148), 0.15) !important;
    color: var(--wmtg-user-accent, #f0f4ff) !important;
    border-color: rgba(var(--wmtg-user-accent-rgb, 239, 60, 148), 0.25) !important;
}

/* Tabellen-Toggle (Deine/Echte) */
body.wmtg-dark .wmtg-table-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-table-toggle button {
    color: var(--wmtg-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}

body.wmtg-dark .wmtg-table-toggle button + button {
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-table-toggle button.active {
    background: var(--wmtg-card-bg) !important;
    color: var(--wmtg-user-accent, #f0f4ff) !important;
}

/* ── 7. Ranking (alte Tabelle) ───────────────────────────────────────────── */

body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-table-card {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-table th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--wmtg-muted) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-table td {
    color: var(--wmtg-muted) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-table tbody tr {
    background: var(--wmtg-card-bg) !important;
}

body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-table tbody tr.is-current-user {
    background: rgba(var(--wmtg-user-accent-rgb, 239, 60, 148), 0.08) !important;
}

body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-player strong {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-avatar {
    background: rgba(var(--wmtg-user-accent-rgb, 239, 60, 148), 0.15) !important;
}

/* Ranking-Regeln */
body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-title {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-rules .rule {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-muted) !important;
}

/* ── 8. Neues Ranking (wmtg-rl) ──────────────────────────────────────────── */

body.wmtg-dark .wmtg-rl-title {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-rl-rule {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-rl-card {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-rl-head {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-rl-head > div {
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-rl-row {
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-rl-row:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

body.wmtg-dark .wmtg-rl-row.r1 {
    background: linear-gradient(90deg, rgba(255, 210, 0, 0.08) 0%, transparent 70%) !important;
}

body.wmtg-dark .wmtg-rl-row.r2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.07) 0%, transparent 70%) !important;
}

body.wmtg-dark .wmtg-rl-row.r3 {
    background: linear-gradient(90deg, rgba(200, 120, 40, 0.07) 0%, transparent 70%) !important;
}

body.wmtg-dark .wmtg-rl-name {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-rl-num {
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-rl-avatar {
    background: rgba(var(--wmtg-user-accent-rgb, 239, 60, 148), 0.15) !important;
    border-color: rgba(var(--wmtg-user-accent-rgb, 239, 60, 148), 0.25) !important;
}

/* Bonus-Modal */
body.wmtg-dark .wmtg-rl-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

body.wmtg-dark .wmtg-rl-modal-title {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-rl-modal-close {
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-rl-bq-row {
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-rl-bq-q {
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-rl-bq-a {
    color: var(--wmtg-text) !important;
}

/* Row-Stats auf Mobile */
body.wmtg-dark .wmtg-rl-row-stats span {
    color: var(--wmtg-muted) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

/* ── 9. Meine Tipps (wmtg-mt) ────────────────────────────────────────────── */

body.wmtg-dark .wmtg-mt-card {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-mt-stage-header {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--wmtg-muted) !important;
    border-color: var(--wmtg-border) !important;
}

/* ── 10. Statistik ───────────────────────────────────────────────────────── */

body.wmtg-dark .wmtg-stats-card {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-stats-card-head h2 {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-stats-card-sub {
    color: var(--wmtg-muted) !important;
}

/* Tipp-Verteilung */
body.wmtg-dark .wmtg-stats-dist-meta strong,
body.wmtg-dark .wmtg-stats-dist-label {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-stats-dist-meta span,
body.wmtg-dark .wmtg-stats-dist-pts {
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-stats-dist-bar-wrap {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Top-Listen */
body.wmtg-dark .wmtg-stats-toplist-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

body.wmtg-dark .wmtg-stats-toplist-name {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-stats-toplist-bar-wrap {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.wmtg-dark .wmtg-stats-toplist-val small {
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-stats-empty {
    color: var(--wmtg-muted) !important;
}

/* Turnierfortschritt */
body.wmtg-dark .wmtg-stats-stage-name {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-stats-badge-done {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
}

body.wmtg-dark .wmtg-stats-stage-bar-wrap,
body.wmtg-dark .wmtg-stats-score-bar-wrap,
body.wmtg-dark .wmtg-stats-bonus-bar-wrap {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.wmtg-dark .wmtg-stats-stage-meta,
body.wmtg-dark .wmtg-stats-score-count,
body.wmtg-dark .wmtg-stats-bonus-count {
    color: var(--wmtg-muted) !important;
}

/* Häufigste Ergebnisse */
body.wmtg-dark .wmtg-stats-score-label {
    color: var(--wmtg-text) !important;
}

/* Spiel-Listen */
body.wmtg-dark .wmtg-stats-gamelist li:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

body.wmtg-dark .wmtg-stats-game-teams {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-stats-badge-green {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
}

body.wmtg-dark .wmtg-stats-badge-red {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #f87171 !important;
}

/* Bonusfragen */
body.wmtg-dark .wmtg-stats-bonus-title,
body.wmtg-dark .wmtg-stats-bonus-label {
    color: var(--wmtg-text) !important;
}

/* ── 11. Dashboard (MD3) ─────────────────────────────────────────────────── */

body.wmtg-dark .wmtg-db-wrap,
body.wmtg-dark .wmtg-db-card {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-db-welcome {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-db-welcome-greeting,
body.wmtg-dark .wmtg-db-welcome-name,
body.wmtg-dark .wmtg-db-welcome-stat-val,
body.wmtg-dark .wmtg-db-big {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-db-welcome-stat-label,
body.wmtg-dark .wmtg-db-muted {
    color: var(--wmtg-muted) !important;
}

/* MD3 Karten */
body.wmtg-dark .wmtg-md3-kpi-value {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-md3-point-val,
body.wmtg-dark .wmtg-md3-bonus-title,
body.wmtg-dark .wmtg-md3-result-team,
body.wmtg-dark .wmtg-md3-rank-name,
body.wmtg-dark .wmtg-md3-rank-pts strong {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-md3-badge-green {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
}

/* MD3v2 */
body.wmtg-dark .wmtg-md3v2-kv strong,
body.wmtg-dark .wmtg-md3v2-rank-name,
body.wmtg-dark .wmtg-md3v2-rank-pts strong {
    color: var(--wmtg-text) !important;
}

/* Altes Dashboard */
body.wmtg-dark .wmtg-dash-card {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-panel-head {
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-match-row {
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-result-row,
body.wmtg-dark .wmtg-ranking-row {
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-empty {
    color: var(--wmtg-muted) !important;
}

/* ── 12. Formulare & Eingaben ─────────────────────────────────────────────── */

body.wmtg-dark .wmtg-form input[type="text"],
body.wmtg-dark .wmtg-form input[type="email"],
body.wmtg-dark .wmtg-form input[type="password"],
body.wmtg-dark .wmtg-form input[type="number"],
body.wmtg-dark .wmtg-card .input,
body.wmtg-dark .wmtg-field input {
    background: var(--wmtg-input-bg) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-field label {
    color: var(--wmtg-muted) !important;
    background: transparent !important;
}

body.wmtg-dark .wmtg-field input:not(:placeholder-shown) + label,
body.wmtg-dark .wmtg-field input:focus + label {
    background: var(--wmtg-card-bg) !important;
    color: var(--wmtg-user-accent, #f0f4ff) !important;
}

body.wmtg-dark .wmtg-form label,
body.wmtg-dark .wmtg-card label {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-notice {
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-success {
    background: rgba(74, 222, 128, 0.12) !important;
    color: #4ade80 !important;
}

body.wmtg-dark .wmtg-error {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #f87171 !important;
}

/* Fortschrittsbalken */
body.wmtg-dark .wmtg-progress {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ── 13. Tabellen ────────────────────────────────────────────────────────── */

body.wmtg-dark .wmtg-table th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--wmtg-text) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-table td {
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-text) !important;
}

/* Gruppenstandings */
body.wmtg-dark .wmtg-standings-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* ── 14. Overlays & Modals ───────────────────────────────────────────────── */

body.wmtg-dark .wmtg-register-overlay-box {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-register-overlay-box h2 {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-register-overlay-box p {
    color: var(--wmtg-muted) !important;
}

/* Ranking Bonus Modal */
body.wmtg-dark .wmtg-ranking-bonus-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

body.wmtg-dark .wmtg-ranking-bonus-modal {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

/* ── 15. Design-Einstellungen ────────────────────────────────────────────── */

body.wmtg-dark .wmtg-ds-section {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-ds-section-head h2 {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-ds-layout-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-ds-layout-label {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-ds-color-card {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.wmtg-dark .wmtg-ds-color-label {
    color: var(--wmtg-text) !important;
}

/* ── 16. Tipping-Hero & Progress ─────────────────────────────────────────── */

body.wmtg-dark .wmtg-tipping-hero h2 {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-tipping-progress {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-tipping-progress > strong {
    color: var(--wmtg-text) !important;
}

/* ── 17. KO-Phase ────────────────────────────────────────────────────────── */

body.wmtg-dark .wmtg-ko-bracket-card,
body.wmtg-dark .wmtg-ko-match {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-ko-team-name {
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-ko-match-info {
    color: var(--wmtg-muted) !important;
}

/* ── 18. Landing Page ────────────────────────────────────────────────────── */

body.wmtg-dark .wmtg-landing-wrap {
    background: var(--wmtg-bg) !important;
    color: var(--wmtg-text) !important;
}

body.wmtg-dark .wmtg-landing-card {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

/* ── 19. Tipp-History ────────────────────────────────────────────────────── */

body.wmtg-dark .wmtg-history-table th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--wmtg-muted) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-history-table td {
    color: var(--wmtg-text) !important;
    border-color: var(--wmtg-border) !important;
}

/* ── 20. Diverses ────────────────────────────────────────────────────────── */

/* Panel-Head Trennlinie */
body.wmtg-dark .wmtg-panel-head {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Tipper-Header */
body.wmtg-dark .wmtg-tipper-header {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
    color: var(--wmtg-text) !important;
}

/* Save-All-Button */
body.wmtg-dark .wmtg-save-all {
    color: var(--wmtg-muted) !important;
}

/* Scrollbar (WebKit) */
body.wmtg-dark ::-webkit-scrollbar-track {
    background: var(--wmtg-bg);
}

body.wmtg-dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

body.wmtg-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ── 21. Fixes für verpasste helle Stellen ───────────────────────────────── */

/* --wmtg-surface Variable (wird von wmtg-fx-vs und wmtg-fx-morning genutzt) */
body.wmtg-dark {
    --wmtg-surface: rgba(255, 255, 255, 0.07);
}

/* Tipp-Inputs: hardcoded background:#fff überschreiben */
body.wmtg-dark .wmtg-wrap .wmtg-fixture-tip .wmtg-tip-home,
body.wmtg-dark .wmtg-wrap .wmtg-fixture-tip .wmtg-tip-away {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-wrap .wmtg-fixture-tip .wmtg-tip-home.has-value,
body.wmtg-dark .wmtg-wrap .wmtg-fixture-tip .wmtg-tip-away.has-value {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--wmtg-text) !important;
}

/* Uhrzeit-Pills: helle Farben auf dunkle umstellen */
body.wmtg-dark .wmtg-fx-tp-prime {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #6ee7b7 !important;
    border-color: rgba(110, 231, 183, 0.3) !important;
}

body.wmtg-dark .wmtg-fx-tp-afternoon {
    background: rgba(234, 179, 8, 0.15) !important;
    color: #fde047 !important;
    border-color: rgba(253, 224, 71, 0.3) !important;
}

body.wmtg-dark .wmtg-fx-tp-midday {
    background: rgba(249, 115, 22, 0.15) !important;
    color: #fdba74 !important;
    border-color: rgba(253, 186, 116, 0.3) !important;
}

body.wmtg-dark .wmtg-fx-tp-lateeve {
    background: rgba(139, 92, 246, 0.18) !important;
    color: #c4b5fd !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
}

body.wmtg-dark .wmtg-fx-tp-deep {
    background: rgba(30, 64, 175, 0.25) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

body.wmtg-dark .wmtg-fx-tp-morning {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--wmtg-muted) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Gruppen-Tabelle innerhalb des Boards */
body.wmtg-dark .wmtg-group-table {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--wmtg-border) !important;
}

/* Standings-Tabelle */
body.wmtg-dark .wmtg-standings-table th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-standings-table td {
    color: var(--wmtg-text) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-group-table h4 {
    color: var(--wmtg-muted) !important;
}

/* Table-toggle innerhalb Gruppenboard */
body.wmtg-dark .wmtg-group-table .wmtg-table-toggle {
    background: rgba(255, 255, 255, 0.07) !important;
}

body.wmtg-dark .wmtg-group-table .wmtg-table-toggle button {
    color: var(--wmtg-muted) !important;
}

body.wmtg-dark .wmtg-group-table .wmtg-table-toggle button.active {
    background: var(--wmtg-card-bg) !important;
    color: var(--wmtg-user-accent, #f0f4ff) !important;
}

/* Stats-KPI + alte Stats-Cards */
body.wmtg-dark .wmtg-stats-kpi,
body.wmtg-dark .wmtg-stats-top-card,
body.wmtg-dark .wmtg-stats-table-wrap,
body.wmtg-dark .wmtg-stats-result-grid,
body.wmtg-dark .wmtg-stats-bonus-card {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-stats-bonus-card h4 {
    color: var(--wmtg-muted) !important;
}

/* Ranking-Table-Card hardcoded #fff */
body.wmtg-dark .wmtg-ranking-table-card {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

/* Ranking-Table-Zeilen hardcoded background:#fff */
body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-table tbody tr:not(.is-current-user) {
    background: var(--wmtg-card-bg) !important;
}

body.wmtg-dark .wmtg-ranking-table-page .wmtg-ranking-table th {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--wmtg-border) !important;
}

/* Großes Ranking-Grid (wmtg-ranking-grid-card etc.) */
body.wmtg-dark .wmtg-ranking-grid-card,
body.wmtg-dark .wmtg-ranking-grid-head {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-ranking-grid-row:not(.is-podium) {
    background: var(--wmtg-card-bg) !important;
    border-color: var(--wmtg-border) !important;
}

body.wmtg-dark .wmtg-ranking-cell,
body.wmtg-dark .wmtg-ranking-player strong {
    color: var(--wmtg-text) !important;
}

/* Tipp-Zeilen-Farb-Akzente: auf dunkel anpassen */
body.wmtg-dark .wmtg-mt-exact {
    background: rgba(74, 222, 128, 0.08) !important;
    border-left-color: rgba(74, 222, 128, 0.35) !important;
}

body.wmtg-dark .wmtg-mt-diff {
    background: rgba(96, 165, 250, 0.08) !important;
    border-left-color: rgba(96, 165, 250, 0.3) !important;
}

body.wmtg-dark .wmtg-mt-tend {
    background: rgba(251, 191, 36, 0.08) !important;
    border-left-color: rgba(251, 191, 36, 0.3) !important;
}

/* ── 22. Flaggen-Kreise im Dark Mode ─────────────────────────────────────── */

/* Weißer Hintergrund + weißer Inset-Ring entfernen, stattdessen dunkler Ring + Schatten */
body.wmtg-dark .wmtg-flag {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

/* Placeholder (keine Flagge vorhanden): dezenter dunkler Kreis */
body.wmtg-dark .wmtg-flag-placeholder {
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
}