/* =======================================================================
   THEMES.CSS — 6 Design-Varianten für die Mannschaftsaufstellungs-App
   Aktivierung via: body.theme-[name]
   Standard (kein Theme-Klasse): aktuelles CSS aus style.css
   =======================================================================

   DESIGN-PRINZIP: Jedes Theme ist ein anderer CHARAKTER, nicht nur andere Farben.
   Unterschiede in: Typografie, Spacing, Animationen, Oberflächen, Atmosphäre.

   Themes:
   1. theme-night-pitch    — Taktisch-minimal. Der Pitch regiert.
   2. theme-stadium-glow   — Flutlicht & Atmosphäre. Glow überall.
   3. theme-tactical-board — Kreide-Analog. Positions-Farben.
   4. theme-broadcast      — UEFA-TV. Navy + Gold. Seriös.
   5. theme-ultra-dark     — Ultra-Fan. Schwarz-Rot. Keine Kompromisse.
   6. theme-scout-pro      — Light Mode. Editorial. Professionell.
   ======================================================================= */


/* ======================================================================
   THEME 1 — NIGHT PITCH
   Charakter: Der Pitch ist das Zentrum. Alles andere tritt zurück.
   Maximale Reduktion. Kein visueller Lärm. Wie ein digitales Trainerboard.
   Besonderheit: Cards ohne Rahmen, nur durch Tiefe unterscheidbar.
                 Monospaced Zahlen. Section-Titles extrem zurückhaltend.
   Inspiration: FotMob (dunkle Variante), Opta Analyst
   ====================================================================== */

body.theme-night-pitch {
    --bg:          #06060a;
    --surface:     #0d0d12;
    --surface2:    #14141c;
    --border:      rgba(255,255,255,0.04);
    --border2:     rgba(255,255,255,0.08);
    --accent:      #00e676;    /* Helles Neongrün */
    --accent-bg:   rgba(0,230,118,0.08);
    --accent-text: #00e676;
    --text:        #e8e8f0;
    --text-sec:    rgba(232,232,240,0.40);
    --text-muted:  rgba(232,232,240,0.20);
    --text-dim:    rgba(232,232,240,0.08);
    --danger:      #ff5252;
    --danger-dim:  rgba(255,82,82,0.10);
    --warn:        #ffd740;
    --warn-bg:     rgba(255,215,64,0.08);
    --shadow:      0 1px 4px rgba(0,0,0,0.6);
    --shadow-md:   0 4px 20px rgba(0,0,0,0.75);
    --shadow-lg:   0 8px 48px rgba(0,0,0,0.85);
    --gold:        #ffd740;
    --radius:      6px;
    --radius-sm:   4px;
    /* Pitch */
    --pitch-bg:       #081a0b;
    --pitch-border:   #040e06;
    --pitch-line:     rgba(255,255,255,0.22);
    --pitch-stripe-a: rgba(0,0,0,0.14);
    --pitch-stripe-b: rgba(0,0,0,0);
    --player-filled:  rgba(0,200,100,0.88);
    --player-border:  #69f0ae;
    --player-glow:    rgba(0,230,118,0.45);
}

/* Sidebar: nahezu unsichtbar — App-Inhalt regiert */
body.theme-night-pitch #sidebar {
    background: #06060a;
    border-right: 1px solid rgba(255,255,255,0.04);
    box-shadow: none;
}
body.theme-night-pitch #mobileHeader {
    background: #06060a;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Cards: kein Border, nur durch Helligkeit unterscheidbar */
body.theme-night-pitch .md-result-card,
body.theme-night-pitch .team-card {
    border-color: transparent;
    box-shadow: none;
}
body.theme-night-pitch .md-result-card:hover {
    background: #14141c;
    border-color: rgba(0,230,118,0.15);
    box-shadow: none;
    transform: none;
}

/* Section-Titles: fast unsichtbar, winzig */
body.theme-night-pitch .section-title {
    font-size: 9px;
    letter-spacing: 3px;
    font-weight: 500;
    color: rgba(232,232,240,0.25);
    text-transform: uppercase;
}

/* Zahlen: Tabular, scharf */
body.theme-night-pitch .md-score-num,
body.theme-night-pitch .md-hdr-num,
body.theme-night-pitch .timer-display {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Score: Neongrün statt Weiß */
body.theme-night-pitch .md-hdr-num {
    color: var(--accent);
}

/* Active Nav: nur Grün, kein Hintergrund */
body.theme-night-pitch .nav-item.active {
    background: transparent;
    color: var(--accent);
    border-left: 2px solid var(--accent);
    padding-left: calc(16px - 2px);
}

/* Pitch: intensiveres Dunkel + stärker leuchtender Spieler */
body.theme-night-pitch .pos-dot.filled .pos-label {
    background: rgba(0,200,100,0.85);
    border-color: #69f0ae;
    box-shadow: 0 0 20px rgba(0,230,118,0.5), 0 0 6px rgba(0,230,118,0.8);
}

/* Buttons: minimalistisch */
body.theme-night-pitch .btn-primary {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    letter-spacing: 0.06em;
}
body.theme-night-pitch .btn-primary:hover {
    background: rgba(0,230,118,0.10);
}

/* Tabs: dünne Linie, kein Hintergrund */
body.theme-night-pitch .md-tab.active {
    background: transparent;
    color: var(--accent);
    border-top-color: var(--accent);
}

/* Spieltag-Header Score */
body.theme-night-pitch .md-hdr-score-sep { color: rgba(255,255,255,0.15); }


/* ======================================================================
   THEME 2 — STADIUM GLOW
   Charakter: Das Spiel lebt. Licht, Energie, Atmosphäre.
   Besonderheit: Echter Glow auf dem Pitch, animierter Header-Gradient,
                 Blur-Sidebar, Score-Zahlen mit Heiligenschein.
   Inspiration: Bundesliga-App, Premier League Visual Identity
   ====================================================================== */

body.theme-stadium-glow {
    --bg:          #040404;
    --surface:     #0c0c0c;
    --surface2:    #161616;
    --border:      rgba(255,255,255,0.05);
    --border2:     rgba(255,255,255,0.09);
    --accent:      #22c55e;
    --accent-bg:   rgba(34,197,94,0.10);
    --accent-text: #4ade80;
    --text:        #ffffff;
    --text-sec:    rgba(255,255,255,0.48);
    --text-muted:  rgba(255,255,255,0.24);
    --text-dim:    rgba(255,255,255,0.08);
    --danger:      #f87171;
    --danger-dim:  rgba(248,113,113,0.12);
    --warn:        #fbbf24;
    --warn-bg:     rgba(251,191,36,0.10);
    --shadow:      0 2px 10px rgba(0,0,0,0.7);
    --shadow-md:   0 6px 28px rgba(0,0,0,0.8);
    --shadow-lg:   0 12px 52px rgba(0,0,0,0.9);
    --gold:        #f59e0b;
    --radius:      12px;
    --radius-sm:   8px;
    /* Pitch: dunkelgrün mit Glühen */
    --pitch-bg:       #0c200d;
    --pitch-border:   #071408;
    --pitch-line:     rgba(255,255,255,0.28);
    --pitch-stripe-a: rgba(0,0,0,0.12);
    --pitch-stripe-b: rgba(0,0,0,0);
    --player-filled:  rgba(22,163,74,0.92);
    --player-border:  #86efac;
    --player-glow:    rgba(74,222,128,0.60);
}

/* Sidebar: Blur-Glass-Effekt */
body.theme-stadium-glow #sidebar {
    background: rgba(4,4,4,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255,255,255,0.05);
}
body.theme-stadium-glow #mobileHeader {
    background: rgba(4,4,4,0.90);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Pitch: Glow-Aura um das gesamte Spielfeld */
body.theme-stadium-glow .pitch-wrap {
    filter: drop-shadow(0 0 40px rgba(34,197,94,0.12))
            drop-shadow(0 0 80px rgba(34,197,94,0.06));
}

/* Score-Zahlen: Leuchten */
body.theme-stadium-glow .md-hdr-num {
    color: #ffffff;
    text-shadow: 0 0 30px rgba(74,222,128,0.40),
                 0 0 60px rgba(74,222,128,0.20);
}
body.theme-stadium-glow .md-score-num {
    text-shadow: 0 0 20px rgba(74,222,128,0.30);
}

/* Cards: Gradient-Hintergrund */
body.theme-stadium-glow .md-result-card {
    background: linear-gradient(135deg,
        rgba(22,163,74,0.04) 0%,
        rgba(0,0,0,0) 60%),
        #0c0c0c;
}
body.theme-stadium-glow .md-result-card:hover {
    background: linear-gradient(135deg,
        rgba(22,163,74,0.08) 0%,
        rgba(0,0,0,0) 60%),
        #141414;
    box-shadow: 0 0 0 1px rgba(34,197,94,0.25), var(--shadow-md);
}

/* Live-Dot: stärkerer Glow */
body.theme-stadium-glow .live-dot {
    box-shadow: 0 0 10px rgba(239,68,68,0.9),
                0 0 22px rgba(239,68,68,0.5);
}

/* Spieler-Dots: intensiver Glow */
body.theme-stadium-glow .pos-dot.filled .pos-label {
    box-shadow: 0 0 20px rgba(74,222,128,0.65),
                0 0 40px rgba(74,222,128,0.25),
                0 2px 8px rgba(0,0,0,0.5);
}

/* Page-Header: Flutlicht-Gradient von oben */
body.theme-stadium-glow .md-page-header {
    background: radial-gradient(
        ellipse at 50% -30%,
        rgba(34,197,94,0.12) 0%,
        transparent 65%),
        #0c0c0c;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Active Tab: Glow-Linie */
body.theme-stadium-glow .md-tab.active {
    color: var(--accent-text);
    border-top-color: var(--accent);
    background: var(--accent-bg);
    text-shadow: 0 0 12px rgba(74,222,128,0.5);
}

/* Bottom-Nav mobile: Blur */
body.theme-stadium-glow #mobileBottomNav,
body.theme-stadium-glow .md-tabs-bottom {
    background: rgba(4,4,4,0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* ======================================================================
   THEME 3 — TACTICAL BOARD
   Charakter: Umkleide, Kreide, Magnetboard. Analog & direkt.
   Besonderheit: Spieler farbcodiert nach Position (TW/Abwehr/MF/Sturm).
                 Rauere Texturen, Kreide-Linien auf dem Pitch.
                 Scharfe Ecken. Dicke Trennlinien.
   Inspiration: Reale Taktik-Boards, Kickbase-Bildsprache
   ====================================================================== */

body.theme-tactical-board {
    --bg:          #0d0d0d;
    --surface:     #161616;
    --surface2:    #1f1f1f;
    --border:      rgba(255,255,255,0.12);
    --border2:     rgba(255,255,255,0.20);
    --accent:      #a3e635;    /* Kräftiges Gelbgrün — Kreide auf Tafel */
    --accent-bg:   rgba(163,230,53,0.10);
    --accent-text: #bef264;
    --text:        #f0ede8;    /* Leicht warm, wie Papier */
    --text-sec:    rgba(240,237,232,0.45);
    --text-muted:  rgba(240,237,232,0.22);
    --text-dim:    rgba(240,237,232,0.10);
    --danger:      #ef4444;
    --danger-dim:  rgba(239,68,68,0.12);
    --warn:        #f59e0b;
    --warn-bg:     rgba(245,158,11,0.10);
    --shadow:      0 2px 6px rgba(0,0,0,0.55);
    --shadow-md:   0 4px 18px rgba(0,0,0,0.65);
    --shadow-lg:   0 8px 36px rgba(0,0,0,0.75);
    --gold:        #f59e0b;
    --radius:      3px;        /* Fast keine runden Ecken — eckig wie Magnetboard */
    --radius-sm:   2px;
    /* Positionsfarben */
    --pos-gk:      rgba(245,158,11,0.88);   /* Gold  — Torwart */
    --pos-def:     rgba(59,130,246,0.88);   /* Blau  — Abwehr */
    --pos-mid:     rgba(168,85,247,0.88);   /* Lila  — Mittelfeld */
    --pos-att:     rgba(239,68,68,0.88);    /* Rot   — Angriff */
    /* Pitch: dunkleres Grün, starke Kreide-Linien */
    --pitch-bg:       #1a2e1a;
    --pitch-border:   #0f1e0f;
    --pitch-line:     rgba(255,255,255,0.55);
    --pitch-stripe-a: rgba(0,0,0,0.10);
    --pitch-stripe-b: rgba(0,0,0,0);
    --player-filled:  rgba(22,163,74,0.90);
    --player-border:  #86efac;
    --player-glow:    rgba(163,230,53,0.35);
}

/* Sidebar: Klare Trennlinie, kein Blur */
body.theme-tactical-board #sidebar {
    background: #0d0d0d;
    border-right: 2px solid rgba(255,255,255,0.10);
    box-shadow: none;
}
body.theme-tactical-board #mobileHeader {
    background: #0d0d0d;
    border-bottom: 2px solid rgba(255,255,255,0.10);
}

/* Alles eckig */
body.theme-tactical-board .btn,
body.theme-tactical-board .md-result-card,
body.theme-tactical-board .team-card,
body.theme-tactical-board .modal-box,
body.theme-tactical-board .toast,
body.theme-tactical-board input,
body.theme-tactical-board select,
body.theme-tactical-board textarea {
    border-radius: 3px !important;
}

/* Cards: sichtbarer Border, kein Farbgradient */
body.theme-tactical-board .md-result-card {
    border-color: rgba(255,255,255,0.10);
    border-left: 3px solid rgba(163,230,53,0.25);
}
body.theme-tactical-board .md-result-card:hover {
    border-left-color: var(--accent);
    background: #1c1c1c;
}

/* Section-Titles: Strich darunter, sichtbar */
body.theme-tactical-board .section-title {
    color: rgba(240,237,232,0.50);
    letter-spacing: 2.5px;
    font-size: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    padding-bottom: 8px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* Pitch: Kreide-Linien stark */
body.theme-tactical-board .pitch-center-line { background: rgba(255,255,255,0.50); }
body.theme-tactical-board .pitch-center-circle { border-color: rgba(255,255,255,0.50); }
body.theme-tactical-board .pitch::before,
body.theme-tactical-board .pitch::after { border-color: rgba(255,255,255,0.45); }

/* Positionsfarben für Spieler-Dots (data-pos-type) */
body.theme-tactical-board .pos-dot[data-pos-type="gk"].filled .pos-label {
    background: var(--pos-gk);
    border-color: #fde68a;
    box-shadow: 0 0 14px rgba(245,158,11,0.45);
}
body.theme-tactical-board .pos-dot[data-pos-type="def"].filled .pos-label {
    background: var(--pos-def);
    border-color: #93c5fd;
    box-shadow: 0 0 14px rgba(59,130,246,0.45);
}
body.theme-tactical-board .pos-dot[data-pos-type="mid"].filled .pos-label {
    background: var(--pos-mid);
    border-color: #d8b4fe;
    box-shadow: 0 0 14px rgba(168,85,247,0.45);
}
body.theme-tactical-board .pos-dot[data-pos-type="att"].filled .pos-label {
    background: var(--pos-att);
    border-color: #fca5a5;
    box-shadow: 0 0 14px rgba(239,68,68,0.45);
}

/* Legende unter dem Pitch */
body.theme-tactical-board .pitch-wrap::after {
    content: '■ TW  ■ ABW  ■ MF  ■ ANG';
    display: block;
    text-align: center;
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-top: 10px;
    font-family: 'Manrope', sans-serif;
    background: linear-gradient(90deg, #fde68a, #93c5fd, #d8b4fe, #fca5a5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.7;
}

/* Active Tab: Akzentfarbe */
body.theme-tactical-board .md-tab.active {
    color: var(--accent-text);
    border-top-color: var(--accent);
    background: var(--accent-bg);
}

/* Score: Akzentfarbe */
body.theme-tactical-board .md-hdr-num,
body.theme-tactical-board .md-score-num { color: var(--accent-text); }


/* ======================================================================
   THEME 4 — BROADCAST
   Charakter: Wie im TV. UEFA Champions League Ästhetik.
   Besonderheit: Tiefes Navy, Goldene Score-Zahlen, TV-Grafik-Stil.
                 Section-Header wie Sender-Einblendungen.
                 Moderatere Rundungen. Serife-Feeling in Zahlen.
   Inspiration: UEFA-App, Sky Sports, ARD Sportschau, Champions League
   ====================================================================== */

body.theme-broadcast {
    --bg:          #04080f;
    --surface:     #0a1020;
    --surface2:    #111a2e;
    --border:      rgba(255,255,255,0.07);
    --border2:     rgba(255,255,255,0.13);
    --accent:      #3b82f6;
    --accent-bg:   rgba(59,130,246,0.12);
    --accent-text: #93c5fd;
    --text:        #f0f4ff;
    --text-sec:    rgba(240,244,255,0.50);
    --text-muted:  rgba(240,244,255,0.25);
    --text-dim:    rgba(240,244,255,0.08);
    --danger:      #f87171;
    --danger-dim:  rgba(248,113,113,0.12);
    --warn:        #f5c518;
    --warn-bg:     rgba(245,197,24,0.10);
    --shadow:      0 2px 10px rgba(0,4,20,0.7);
    --shadow-md:   0 6px 24px rgba(0,4,20,0.8);
    --shadow-lg:   0 12px 48px rgba(0,4,20,0.9);
    --gold:        #f5c518;
    --radius:      4px;
    --radius-sm:   3px;
    /* Pitch */
    --pitch-bg:       #0a1e0b;
    --pitch-border:   #051308;
    --pitch-line:     rgba(255,255,255,0.30);
    --pitch-stripe-a: rgba(0,0,0,0.12);
    --pitch-stripe-b: rgba(0,0,0,0);
    --player-filled:  rgba(59,130,246,0.90);
    --player-border:  #bfdbfe;
    --player-glow:    rgba(59,130,246,0.50);
}

/* Sidebar: Navy-Gradient vertikal */
body.theme-broadcast #sidebar {
    background: linear-gradient(180deg, #0d1428 0%, #060a14 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
}
body.theme-broadcast #mobileHeader {
    background: linear-gradient(90deg, #0d1428 0%, #0a1020 100%);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Score-Zahlen: Gold wie Anzeigetafel */
body.theme-broadcast .md-hdr-num {
    color: var(--gold);
    text-shadow: 0 0 24px rgba(245,197,24,0.30),
                 0 2px 4px rgba(0,0,0,0.6);
    font-size: 44px;
}
body.theme-broadcast .md-score-num {
    color: var(--gold);
    text-shadow: 0 0 16px rgba(245,197,24,0.25);
}

/* Section-Titles: TV-Grafik-Stil (Trennlinie + Accent) */
body.theme-broadcast .section-title {
    color: #93c5fd;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    border-left: 2px solid #3b82f6;
    padding-left: 8px;
    margin-bottom: 14px;
}

/* Cards: Navy-Ton, klarer Border */
body.theme-broadcast .md-result-card {
    background: #0a1020;
    border-color: rgba(255,255,255,0.08);
}
body.theme-broadcast .md-result-card:hover {
    background: #111a2e;
    border-color: rgba(59,130,246,0.35);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.15), var(--shadow-md);
}

/* Spieler-Dots: Blau */
body.theme-broadcast .pos-dot.filled .pos-label {
    background: rgba(59,130,246,0.90);
    border-color: #bfdbfe;
    box-shadow: 0 0 16px rgba(59,130,246,0.55), 0 2px 8px rgba(0,0,0,0.5);
}

/* Active Nav: Blau */
body.theme-broadcast .nav-item.active,
body.theme-broadcast .mob-nav-item.active {
    color: #93c5fd;
    background: rgba(59,130,246,0.10);
    border-left: 2px solid #3b82f6;
}

/* Buttons: Blau */
body.theme-broadcast .btn-primary {
    background: #2563eb;
    border-color: #1d4ed8;
}
body.theme-broadcast .btn-primary:hover { background: #1d4ed8; }

/* Tabs */
body.theme-broadcast .md-tab.active {
    color: #93c5fd;
    border-top-color: #3b82f6;
    background: rgba(59,130,246,0.08);
}

/* Live-Badge: Rot (wie im TV) */
body.theme-broadcast .md-status-open {
    background: rgba(239,68,68,0.15);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.20);
}

/* Page-Header: Navy statt reines Schwarz */
body.theme-broadcast .md-page-header {
    background: linear-gradient(180deg, #0d1428 0%, #0a1020 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Mobile-Bottom-Nav: Navy */
body.theme-broadcast #mobileBottomNav,
body.theme-broadcast .md-tabs-bottom {
    background: #060a14;
    border-top-color: rgba(255,255,255,0.07);
}

/* Score-Trennstrich: Goldfarbe */
body.theme-broadcast .md-hdr-score-sep,
body.theme-broadcast .md-score-sep {
    color: rgba(245,197,24,0.40);
}


/* ======================================================================
   THEME 5 — ULTRA DARK
   Charakter: Kurve. Ultra-Fankultur. Kompromisslos.
   Besonderheit: Reines Schwarz. Roter Akzent auf ALLES.
                 Null Rundungen. Maximale Schriftgröße.
                 Rote Trennlinien. Kein Soft-anything.
   Inspiration: Fan-Zines, Black Metal Album-Cover, Ultras-Ästhetik
   ====================================================================== */

body.theme-ultra-dark {
    --bg:          #000000;
    --surface:     #080808;
    --surface2:    #101010;
    --border:      rgba(255,255,255,0.06);
    --border2:     rgba(220,38,38,0.25);
    --accent:      #dc2626;
    --accent-bg:   rgba(220,38,38,0.10);
    --accent-text: #ef4444;
    --text:        #f5f5f5;
    --text-sec:    rgba(245,245,245,0.42);
    --text-muted:  rgba(245,245,245,0.20);
    --text-dim:    rgba(245,245,245,0.08);
    --danger:      #ef4444;
    --danger-dim:  rgba(239,68,68,0.12);
    --warn:        #f59e0b;
    --warn-bg:     rgba(245,158,11,0.10);
    --shadow:      0 2px 8px rgba(0,0,0,0.90);
    --shadow-md:   0 4px 20px rgba(0,0,0,0.95);
    --shadow-lg:   0 8px 40px rgba(0,0,0,1);
    --gold:        #f5f5f5;
    --radius:      0px;
    --radius-sm:   0px;
    /* Pitch: sehr dunkel */
    --pitch-bg:       #060e06;
    --pitch-border:   #030703;
    --pitch-line:     rgba(255,255,255,0.18);
    --pitch-stripe-a: rgba(0,0,0,0.20);
    --pitch-stripe-b: rgba(0,0,0,0);
    --player-filled:  rgba(220,38,38,0.92);
    --player-border:  #ef4444;
    --player-glow:    rgba(220,38,38,0.55);
}

/* Sidebar: Tiefschwarz, roter Streifen */
body.theme-ultra-dark #sidebar {
    background: #000000;
    border-right: 1px solid rgba(220,38,38,0.20);
    box-shadow: none;
}
body.theme-ultra-dark #mobileHeader {
    background: #000000;
    border-bottom: 2px solid rgba(220,38,38,0.25);
}

/* Alles eckig — kompromisslos */
body.theme-ultra-dark .btn,
body.theme-ultra-dark .md-result-card,
body.theme-ultra-dark .team-card,
body.theme-ultra-dark .modal-box,
body.theme-ultra-dark .toast,
body.theme-ultra-dark input,
body.theme-ultra-dark select,
body.theme-ultra-dark textarea,
body.theme-ultra-dark .pos-label {
    border-radius: 0 !important;
}

/* Cards: roter linker Streifen */
body.theme-ultra-dark .md-result-card {
    border-left: 3px solid rgba(220,38,38,0.35);
    border-color: rgba(220,38,38,0.15);
    background: #080808;
}
body.theme-ultra-dark .md-result-card:hover {
    border-left-color: var(--accent);
    background: #0f0f0f;
    transform: none;
}

/* Score: GROSS, Weiß, dominiert */
body.theme-ultra-dark .md-score-num {
    color: #ffffff;
    font-size: 52px;
    letter-spacing: -0.02em;
}
body.theme-ultra-dark .md-hdr-num {
    color: #f5f5f5;
    font-size: 46px;
    letter-spacing: -0.02em;
}

/* Section-Titles: Roter linker Strich */
body.theme-ultra-dark .section-title {
    color: rgba(245,245,245,0.40);
    border-left: 2px solid rgba(220,38,38,0.60);
    padding-left: 8px;
    letter-spacing: 2px;
    font-size: 10px;
}

/* Spieler-Dots: Rot */
body.theme-ultra-dark .pos-dot.filled .pos-label {
    background: rgba(220,38,38,0.90);
    border-color: #ef4444;
    box-shadow: 0 0 16px rgba(220,38,38,0.60),
                0 2px 8px rgba(0,0,0,0.7);
}

/* Active Nav: Rot */
body.theme-ultra-dark .nav-item.active {
    color: var(--accent-text);
    background: rgba(220,38,38,0.08);
    border-left: 2px solid var(--accent);
    padding-left: calc(16px - 2px);
}
body.theme-ultra-dark .mob-nav-item.active { color: var(--accent-text); }

/* Buttons: Rot, keine Rundung */
body.theme-ultra-dark .btn-primary {
    background: #dc2626;
    border-color: #b91c1c;
    letter-spacing: 0.08em;
}
body.theme-ultra-dark .btn-primary:hover { background: #b91c1c; }

/* Tabs: roter Indikator */
body.theme-ultra-dark .md-tab.active {
    color: var(--accent-text);
    border-top-color: var(--accent);
    background: rgba(220,38,38,0.06);
}

/* Mobile-Nav: tiefste Schwärze */
body.theme-ultra-dark #mobileBottomNav,
body.theme-ultra-dark .md-tabs-bottom {
    background: #000000;
    border-top: 2px solid rgba(220,38,38,0.20);
}

/* Modals: eckig + roter Header-Streifen */
body.theme-ultra-dark .modal-header {
    border-bottom: 2px solid rgba(220,38,38,0.20);
}

/* Logo-Text: Rot */
body.theme-ultra-dark .logo-text { color: var(--accent-text); }


/* ======================================================================
   THEME 6 — SCOUT PRO
   Charakter: Seriöses Werkzeug. Hell, klar, datenorientiert.
   Besonderheit: Light Mode. Magazin-Editorial-Stil.
                 kicker-inspiriert: Linien trennen, nicht Schatten.
                 Sachliche Typografie. Tabellen-Feeling.
   Inspiration: kicker-App (Edenspiekermann), Transfermarkt, Linear
   ====================================================================== */

body.theme-scout-pro {
    --bg:          #f0f2f5;
    --surface:     #ffffff;
    --surface2:    #f8f9fb;
    --border:      #dde1e8;
    --border2:     #c4cad6;
    --accent:      #1a5c2a;   /* Dunkleres Grün — professioneller */
    --accent-bg:   rgba(26,92,42,0.07);
    --accent-text: #1a5c2a;
    --text:        #0d1117;
    --text-sec:    #5a6474;
    --text-muted:  #8a939e;
    --text-dim:    #c4cad6;
    --danger:      #b91c1c;
    --danger-dim:  #fee2e2;
    --warn:        #b45309;
    --warn-bg:     #fef3c7;
    --shadow:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 14px rgba(0,0,0,0.10);
    --shadow-lg:   0 8px 30px rgba(0,0,0,0.12);
    --gold:        #92400e;
    --radius:      6px;
    --radius-sm:   4px;
    /* Pitch: echtes Rasengrün */
    --pitch-bg:       #1a7a2a;
    --pitch-border:   #145a20;
    --pitch-line:     rgba(255,255,255,0.38);
    --pitch-stripe-a: rgba(0,0,0,0.07);
    --pitch-stripe-b: rgba(0,0,0,0);
    --player-filled:  rgba(26,92,42,0.95);
    --player-border:  #86efac;
    --player-glow:    rgba(26,92,42,0.30);
}

/* Sidebar: hell, klare Trennlinie */
body.theme-scout-pro #sidebar {
    background: #ffffff;
    border-right: 1px solid #dde1e8;
    color: #0d1117;
    box-shadow: none;
}
body.theme-scout-pro .sidebar-logo {
    border-bottom-color: #dde1e8;
}
body.theme-scout-pro .nav-item {
    color: #5a6474;
}
body.theme-scout-pro .nav-item:hover {
    background: #f0f2f5;
    color: #0d1117;
}
body.theme-scout-pro .nav-item.active {
    background: rgba(26,92,42,0.08);
    color: #1a5c2a;
    border-left: 2px solid #1a5c2a;
    padding-left: calc(16px - 2px);
}
body.theme-scout-pro .logo-text { color: #0d1117; }
body.theme-scout-pro .logo-sub  { color: #5a6474; }
body.theme-scout-pro .user-name { color: #0d1117; }
body.theme-scout-pro .user-role { color: #5a6474; }

/* Mobile-Header: hell */
body.theme-scout-pro #mobileHeader {
    background: #ffffff;
    border-bottom: 1px solid #dde1e8;
    color: #0d1117;
}
body.theme-scout-pro .mobile-title-main,
body.theme-scout-pro .logo-text,
body.theme-scout-pro .mobile-back { color: #0d1117; }

/* Cards: weißer Hintergrund, Schatten statt Glow */
body.theme-scout-pro .md-result-card {
    background: #ffffff;
    border: 1px solid #dde1e8;
    box-shadow: var(--shadow);
}
body.theme-scout-pro .md-result-card:hover {
    border-color: #1a5c2a;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
body.theme-scout-pro .team-card {
    background: #ffffff;
    border: 1px solid #dde1e8;
    box-shadow: var(--shadow);
}
body.theme-scout-pro .team-card:hover {
    box-shadow: var(--shadow-md);
    border-color: #1a5c2a;
}

/* Score: dunkle Zahlen auf hellem Hintergrund */
body.theme-scout-pro .md-score-num { color: #0d1117; }
body.theme-scout-pro .md-hdr-num   { color: #0d1117; }
body.theme-scout-pro .md-score-sep,
body.theme-scout-pro .md-hdr-score-sep { color: #c4cad6; }

/* Section-Titles: kicker-inspiriert — Strich links, akkurat */
body.theme-scout-pro .section-title {
    color: #5a6474;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 2px solid #dde1e8;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

/* Tabs: heller Hintergrund */
body.theme-scout-pro .md-tabs-bottom,
body.theme-scout-pro #mobileBottomNav {
    background: #ffffff;
    border-top: 1px solid #dde1e8;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
body.theme-scout-pro .md-tab { color: #5a6474; }
body.theme-scout-pro .md-tab.active {
    color: #1a5c2a;
    border-top-color: #1a5c2a;
    background: rgba(26,92,42,0.05);
}
body.theme-scout-pro .mob-nav-item { color: #5a6474; }
body.theme-scout-pro .mob-nav-item.active { color: #1a5c2a; }

/* Page-Header: weißer Hintergrund */
body.theme-scout-pro .md-page-header {
    background: #ffffff;
    border-bottom: 1px solid #dde1e8;
}
body.theme-scout-pro .md-hdr-team,
body.theme-scout-pro .md-hdr-home,
body.theme-scout-pro .md-hdr-away { color: #0d1117; }

/* Buttons */
body.theme-scout-pro .btn-primary {
    background: #1a5c2a;
    border-color: #145222;
}
body.theme-scout-pro .btn-primary:hover { background: #145222; }
body.theme-scout-pro .btn-ghost {
    color: #5a6474;
    border-color: #dde1e8;
}
body.theme-scout-pro .btn-ghost:hover {
    background: #f0f2f5;
    color: #0d1117;
}

/* Inputs */
body.theme-scout-pro input,
body.theme-scout-pro select,
body.theme-scout-pro textarea {
    background: #ffffff;
    border-color: #dde1e8;
    color: #0d1117;
}
body.theme-scout-pro input:focus,
body.theme-scout-pro select:focus,
body.theme-scout-pro textarea:focus {
    border-color: #1a5c2a;
}

/* Modal: hell */
body.theme-scout-pro .modal-overlay { background: rgba(0,0,0,0.35); }
body.theme-scout-pro .modal-box {
    background: #ffffff;
    border: 1px solid #dde1e8;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}
body.theme-scout-pro .modal-header { border-bottom-color: #dde1e8; }
body.theme-scout-pro .modal-footer { border-top-color: #dde1e8; }
body.theme-scout-pro #modalTitle  { color: #0d1117; }
body.theme-scout-pro .modal-body  { color: #0d1117; }

/* Toast: hell */
body.theme-scout-pro .toast {
    background: #ffffff;
    border: 1px solid #dde1e8;
    color: #0d1117;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
body.theme-scout-pro .toast-success { border-left-color: #1a5c2a; }
body.theme-scout-pro .toast-error   { border-left-color: #b91c1c; }

/* Auth-Screen: helles Design */
body.theme-scout-pro #authScreen    { background: #f0f2f5; }
body.theme-scout-pro .auth-panel-left  { background: #1a5c2a; }
body.theme-scout-pro .auth-panel-right { background: #ffffff; }
body.theme-scout-pro .auth-card     { background: transparent; }
body.theme-scout-pro .auth-title    { color: #0d1117; }
body.theme-scout-pro .auth-sub      { color: #5a6474; }
body.theme-scout-pro .auth-link     { color: #5a6474; }
body.theme-scout-pro .auth-link a   { color: #1a5c2a; }

/* Spielfeld-Wrap: Schatten statt Filter */
body.theme-scout-pro .pitch-wrap {
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}

/* Live-Dot auf hellem Hintergrund */
body.theme-scout-pro .live-dot {
    background: #dc2626;
}

/* Spieler-Dots auf hellem Hintergrund */
body.theme-scout-pro .pos-dot.filled .pos-label {
    background: rgba(26,92,42,0.95);
    border-color: #86efac;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Spieler-Punkt leer: sichtbar auf hellem Hintergrund */
body.theme-scout-pro .pos-dot .pos-label {
    border-color: rgba(0,0,0,0.20);
    background: rgba(0,0,0,0.06);
}


/* ======================================================================
   THEME-ÜBERGREIFENDE ANIMATIONS-PATTERNS (aus Research)
   Gelten für alle Themes — Charakter-Animationen
   ====================================================================== */

/* Score-Bump bei Tor: Zahl wächst kurz */
@keyframes score-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    65%  { transform: scale(1.20); }
    100% { transform: scale(1); }
}
.score-bumping {
    animation: score-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Neues Ereignis: von oben einblenden */
@keyframes event-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.event-new {
    animation: event-slide-in 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* Spieler-Position: Burst bei Ereignis (Tor, Karte) */
@keyframes pos-burst {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
    60%  { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.pos-label.event-flash {
    animation: pos-burst 0.55s ease-out;
}

/* Tab-Indicator: gleitende Unterlinie */
.tab-slide-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px 1px 0 0;
}