/* ==========================================================
   Blue Devils DC
   Spielplan & Mannschaften

   Datei:
   /assets/css/spielplan.css

   Bereiche:
   - Mannschaftsnavigation Desktop
   - Mannschaftsnavigation Mobile
   - Mannschaftsübersicht
   - Spielplan
   - Spielkarten
   - Spielarchiv
   - Kapitäne
   - Saisonkader
   - Responsive Layout
========================================================== */


/* ==========================================================
   Hauptcontainer
========================================================== */

.schedule-shell {
    max-width:1180px;
    margin:0 auto;
    padding:18px 24px 90px;
}


/* ==========================================================
   Mannschaftsnavigation Desktop

   Alle fünf Mannschaften werden gleichmäßig über die
   verfügbare Breite verteilt.
========================================================== */

.team-tabs {
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px;

    width:100%;

    padding:8px 0 18px;

    overflow:visible;
}


/* Einzelner Mannschafts-Reiter */

.team-tab {
    display:flex;
    align-items:center;
    gap:10px;

    width:100%;
    min-width:0;
    min-height:52px;

    padding:0 14px 0 10px;

    border:1px solid var(--line);
    border-radius:16px;

    color:var(--muted);

    background:rgba(255,255,255,.04);

    font-weight:800;
    text-decoration:none;

    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}


/* Text im Reiter */

.team-tab > *:last-child {
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* Hover */

.team-tab:hover {
    color:var(--text);

    border-color:rgba(99,180,255,.42);

    transform:translateY(-1px);
}


/* Aktive Mannschaft */

.team-tab.is-active {
    color:#fff;

    border-color:rgba(99,180,255,.45);

    background:
        linear-gradient(
            135deg,
            rgba(28,140,255,.28),
            rgba(28,140,255,.08)
        ),
        rgba(255,255,255,.05);

    box-shadow:0 14px 34px rgba(28,140,255,.14);
}


/* Mannschaftsnummer */

.team-tab-number {
    display:grid;
    place-items:center;

    flex:0 0 34px;

    width:34px;
    height:34px;

    border:1px solid rgba(99,180,255,.28);
    border-radius:11px;

    color:#fff;

    background:rgba(28,140,255,.22);

    font-size:.82rem;
    font-weight:900;
}


/* ==========================================================
   Mannschaftsübersicht
========================================================== */

.team-overview {
    display:grid;
    grid-template-columns:1fr auto;
    gap:28px;

    align-items:center;

    margin:12px 0 26px;
    padding:28px;

    border:1px solid var(--line);
    border-radius:var(--radius);

    background:
        radial-gradient(
            circle at 0 0,
            rgba(28,140,255,.20),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        );

    box-shadow:var(--shadow);
}


/* Kleine Bereichsüberschrift */

.section-kicker {
    margin:0 0 8px;

    color:var(--primary2);

    font-size:.75rem;
    font-weight:900;

    letter-spacing:.12em;
    text-transform:uppercase;
}


/* Überschriften zurücksetzen */

.team-overview h2,
.section-heading h2,
.team-panel h2 {
    margin:0;
}


/* Saisonbeschreibung */

.team-overview-copy > p:last-child {
    margin:8px 0 0;

    color:var(--muted);
}


/* ==========================================================
   Statistik der Mannschaft
========================================================== */

.team-overview-stats {
    display:grid;
    grid-template-columns:repeat(3, minmax(92px, 1fr));
    gap:10px;
}


.mini-stat {
    min-width:102px;

    padding:16px;

    border:1px solid var(--line);
    border-radius:16px;

    background:rgba(255,255,255,.045);

    text-align:center;
}


.mini-stat strong {
    display:block;

    color:#fff;

    font-size:1.45rem;
    font-weight:900;
}


.mini-stat span {
    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:.76rem;
    font-weight:700;
}


/* ==========================================================
   Zweispaltiges Hauptlayout

   Links:
   Spielplan + Archiv

   Rechts:
   Kapitäne + Saisonkader
========================================================== */

.schedule-layout {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 340px;
    gap:24px;

    align-items:start;
}


/* ==========================================================
   WICHTIG:
   Globale section-Abstände neutralisieren

   schedule-main-column ist in spielplan.php ein <section>.
   Globale Styles der Haupt-CSS können dadurch Padding oder
   Margin hinzufügen.

   Für dieses Layout muss die Spalte ohne zusätzlichen
   Abstand oben beginnen.
========================================================== */

.schedule-layout > .schedule-main-column {
    min-width:0;

    margin:0 !important;
    padding:0 !important;

    align-self:start;
}


/* Sidebar ebenfalls sauber oben beginnen */

.schedule-layout > .team-sidebar {
    min-width:0;

    margin:0;
    padding:0;

    align-self:start;
}


/* ==========================================================
   Abschnittsüberschriften
========================================================== */

.section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;

    margin:0 0 16px;
    padding:0;
}


/* Archiv erhält bewusst etwas Abstand zum Spielplan */

.archive-heading {
    margin-top:38px;
}


/* ==========================================================
   Listen
========================================================== */

.match-list,
.archive-list,
.roster-list {
    display:grid;
    gap:12px;
}


/* ==========================================================
   Spielkarte
========================================================== */

.match-card {
    display:grid;
    grid-template-columns:112px minmax(0, 1fr);
    gap:20px;

    padding:18px;

    border:1px solid var(--line);
    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(28,140,255,.11),
            transparent 42%
        ),
        rgba(255,255,255,.045);

    transition:
        border-color .22s ease,
        transform .22s ease;
}


.match-card:hover {
    border-color:rgba(99,180,255,.34);

    transform:translateY(-2px);
}


/* ==========================================================
   Datum einer Begegnung
========================================================== */

.match-date {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:108px;

    border:1px solid var(--line);
    border-radius:17px;

    background:rgba(255,255,255,.055);
}


.match-date span {
    color:#fff;

    font-size:1.55rem;
    font-weight:900;

    line-height:1;
}


.match-date small {
    margin-top:5px;

    color:var(--muted);

    font-weight:700;
}


.match-date em {
    margin-top:10px;

    color:var(--primary2);

    font-size:.72rem;
    font-style:normal;
    font-weight:900;
}


/* ==========================================================
   Spielinformationen
========================================================== */

.match-content {
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;
}


/* Spieltag / Liga */

.match-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-bottom:10px;
}


.match-meta span {
    display:inline-flex;

    padding:5px 9px;

    border:1px solid rgba(99,180,255,.18);
    border-radius:999px;

    color:var(--primary2);

    background:rgba(28,140,255,.10);

    font-size:.68rem;
    font-weight:800;
}


/* Mannschaften */

.match-versus {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;

    color:var(--text);

    font-size:clamp(1rem, 2vw, 1.25rem);
}


.match-versus > span {
    color:var(--muted);

    font-size:.8rem;
    font-weight:800;

    text-transform:uppercase;
}


/* Spielort */

.match-location {
    margin-top:10px;

    color:var(--muted);

    font-size:.88rem;
}


/* ==========================================================
   Spielarchiv
========================================================== */

.archive-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:16px 18px;

    border:1px solid var(--line);
    border-radius:18px;

    background:rgba(255,255,255,.035);
}


.archive-card h3 {
    margin-top:4px;

    font-size:.98rem;
}


.archive-card h3 span {
    color:var(--muted);

    font-weight:600;
}


.archive-date {
    color:var(--muted);

    font-size:.72rem;
    font-weight:800;
}


.archive-result {
    flex:0 0 auto;

    min-width:76px;

    padding:9px 12px;

    border:1px solid rgba(72,226,167,.22);
    border-radius:12px;

    color:#fff;

    background:rgba(72,226,167,.10);

    text-align:center;

    font-weight:900;
}


/* ==========================================================
   Rechte Sidebar

   Kapitän und Saisonkader sollen direkt untereinander stehen.
========================================================== */

.team-sidebar {
    display:flex;
    flex-direction:column;

    gap:16px;

    position:sticky;
    top:22px;

    height:auto;
    min-height:0;

    justify-content:flex-start;
    align-items:stretch;
}


/* ==========================================================
   Panels in der Sidebar

   !important neutralisiert mögliche globale section-Regeln.
========================================================== */

.team-sidebar > .team-panel {
    flex:0 0 auto;

    width:100%;

    margin:0 !important;

    align-self:stretch;
}


/* Allgemeines Panel */

.team-panel {
    padding:22px !important;

    border:1px solid var(--line);
    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.035)
        );

    box-shadow:0 18px 46px rgba(0,0,0,.16);
}


/* ==========================================================
   Kapitäne
========================================================== */

.captain-row {
    display:flex;
    align-items:center;
    gap:12px;

    margin-top:16px;
    padding:14px;

    border:1px solid rgba(99,180,255,.16);
    border-radius:16px;

    background:rgba(28,140,255,.09);
}


/* Kapitäns-Symbol */

.captain-icon {
    display:grid;
    place-items:center;

    flex:0 0 40px;

    width:40px;
    height:40px;

    border-radius:13px;

    color:#06101f;

    background:
        linear-gradient(
            135deg,
            var(--primary2),
            #d9efff
        );

    font-weight:950;
}


.captain-row strong,
.captain-row small {
    display:block;
}


.captain-row small {
    margin-top:3px;

    color:var(--muted);

    font-size:.73rem;
}


/* ==========================================================
   Saisonkader
========================================================== */

.roster-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    margin-bottom:16px;
}


/* Anzahl Spieler */

.roster-count {
    display:grid;
    place-items:center;

    min-width:38px;
    height:38px;

    padding:0 10px;

    border:1px solid rgba(99,180,255,.18);
    border-radius:12px;

    color:var(--primary2);

    background:rgba(28,140,255,.10);

    font-weight:900;
}


/* Spieler */

.roster-row {
    display:grid;
    grid-template-columns:38px minmax(0, 1fr);
    gap:10px;

    align-items:center;

    min-height:46px;

    padding:8px 10px;

    border-radius:13px;

    background:rgba(255,255,255,.035);
}


.roster-index {
    color:var(--primary2);

    font-size:.72rem;
    font-weight:900;
}


.roster-row strong {
    min-width:0;

    font-size:.9rem;
}


/* ==========================================================
   Hinweistexte / Empty States
========================================================== */

.panel-muted,
.schedule-empty p {
    color:var(--muted);
}


.panel-muted {
    margin-top:12px;

    line-height:1.6;
}


.schedule-empty {
    padding:34px;

    border:1px solid var(--line);
    border-radius:22px;

    background:rgba(255,255,255,.045);
}


.schedule-empty.compact {
    padding:24px;
}


.schedule-empty h2,
.schedule-empty h3 {
    margin-bottom:8px;
}


/* ==========================================================
   Powered-by
========================================================== */

.schedule-powered {
    margin-top:34px;

    text-align:center;
}


.schedule-powered a {
    color:var(--muted);

    font-size:.75rem;
    text-decoration:none;
}


.schedule-powered a:hover {
    color:var(--primary2);
}


/* ==========================================================
   Mobile Mannschaftsnavigation

   Auf Desktop ausgeblendet.
========================================================== */

.team-mobile-nav {
    display:none;
}


/* Hauptschalter */

.team-mobile-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    width:100%;
    min-height:62px;

    padding:8px 10px 8px 12px;

    border:1px solid rgba(99,180,255,.32);
    border-radius:18px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            rgba(28,140,255,.24),
            rgba(28,140,255,.07)
        ),
        rgba(255,255,255,.04);

    box-shadow:0 14px 34px rgba(28,140,255,.10);

    font:inherit;

    cursor:pointer;
}


/* Aktuell gewählte Mannschaft */

.team-mobile-current {
    display:flex;
    align-items:center;
    gap:12px;

    min-width:0;
}


.team-mobile-current strong {
    font-size:1rem;
    font-weight:900;
}


/* Hamburger */

.team-mobile-icon {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;

    flex:0 0 44px;

    width:44px;
    height:44px;

    border:1px solid var(--line);
    border-radius:14px;

    background:rgba(255,255,255,.05);
}


.team-mobile-icon span {
    display:block;

    width:21px;
    height:2px;

    border-radius:999px;

    background:#fff;

    transition:
        transform .22s ease,
        opacity .22s ease;
}


/* ==========================================================
   Geöffneter Zustand

   Hamburger verwandelt sich in ein X.
========================================================== */

.team-mobile-toggle[aria-expanded="true"]
.team-mobile-icon span:nth-child(1) {
    transform:translateY(7px) rotate(45deg);
}


.team-mobile-toggle[aria-expanded="true"]
.team-mobile-icon span:nth-child(2) {
    opacity:0;
}


.team-mobile-toggle[aria-expanded="true"]
.team-mobile-icon span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg);
}


/* ==========================================================
   Mobile Mannschaftsauswahl
========================================================== */

.team-mobile-menu {
    display:none;

    margin-top:10px;
    padding:8px;

    border:1px solid var(--line);
    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.035)
        );

    box-shadow:0 18px 46px rgba(0,0,0,.20);
}


/* Menü geöffnet */

.team-mobile-menu.is-open {
    display:grid;
    gap:6px;
}


/* Einzelner Eintrag */

.team-mobile-item {
    display:flex;
    align-items:center;
    gap:12px;

    min-height:54px;

    padding:8px 12px;

    border:1px solid transparent;
    border-radius:14px;

    color:var(--muted);

    text-decoration:none;

    font-weight:800;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.team-mobile-item:hover {
    color:var(--text);

    background:rgba(255,255,255,.04);
}


.team-mobile-item.is-active {
    color:#fff;

    border-color:rgba(99,180,255,.28);

    background:
        linear-gradient(
            135deg,
            rgba(28,140,255,.22),
            rgba(28,140,255,.06)
        );
}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width:940px) {

    /* Hauptlayout einspaltig */

    .schedule-layout {
        grid-template-columns:1fr;
    }


    /*
     * Globale Section-Abstände auch im Tablet-Modus
     * ausgeschaltet lassen.
     */

    .schedule-layout > .schedule-main-column {
        margin:0 !important;
        padding:0 !important;
    }


    /* Sidebar unterhalb des Spielplans */

    .team-sidebar {
        position:static;

        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));

        gap:16px;

        height:auto;
        min-height:0;
    }


    .team-sidebar > .team-panel {
        margin:0 !important;
    }
}


/* ==========================================================
   Smartphone
========================================================== */

@media (max-width:720px) {

    /* Desktop-Teamnavigation verstecken */

    .team-tabs {
        display:none;
    }


    /* Mobile Navigation aktivieren */

    .team-mobile-nav {
        display:block;

        padding:8px 0 18px;
    }


    /* Seitliche Abstände */

    .schedule-shell {
        padding-inline:16px;
    }


    /* Mannschaftsübersicht */

    .team-overview {
        grid-template-columns:1fr;

        padding:22px;
    }


    /* Statistik */

    .team-overview-stats {
        grid-template-columns:repeat(3, 1fr);
    }


    .mini-stat {
        min-width:0;

        padding:13px 8px;
    }


    /* Spielkarte */

    .match-card {
        grid-template-columns:1fr;
    }


    /* Datum horizontal kompakter */

    .match-date {
        min-height:auto;

        align-items:flex-start;

        padding:14px;
    }


    /* Archiv */

    .archive-card {
        align-items:flex-start;
        flex-direction:column;
    }


    /* Sidebar */

    .team-sidebar {
        display:grid;
        grid-template-columns:1fr;

        gap:16px;
    }


    /* Panels mobil etwas kompakter */

    .team-panel {
        padding:18px !important;
    }
}


/* ==========================================================
   Kleine Smartphones
========================================================== */

@media (max-width:480px) {

    /* Statistik untereinander */

    .team-overview-stats {
        grid-template-columns:1fr;
    }


    .mini-stat {
        text-align:left;
    }
}