/* Layout ------------------------------------------- */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #020817;
}

.mud-main-content {
    max-width: 100%;
    margin: 0 auto;
}

/* Drawer / Navigation -------------------------------- */

.mud-drawer {
    background-color: #020817 !important;
}

.mud-nav-link {
    color: #e5e7eb !important;
    border-radius: 8px;
    margin: 4px 8px;
    padding: 8px 14px;
    font-size: 0.9rem;
}

    .mud-nav-link:hover {
        background-color: rgba(99, 102, 241, 0.16);
    }

    .mud-nav-link.active {
        background-color: rgba(99, 102, 241, 0.28);
        color: #ffffff !important;
    }

/* Paper / Card -------------------------------------- */

.mud-paper,
.mud-card {
    background-color: #0b1120 !important;
    border-radius: 16px !important;
}

.mud-divider {
    border-color: #111827 !important;
}

/* Typo leicht aufhellen ------------------------------ */

.mud-typography-body1,
.mud-typography-body2,
.mud-table td,
.mud-input-root input {
    color: #e5e7eb !important;
}

/* Tabellen ------------------------------------------ */

.mud-table {
    background-color: transparent !important;
}

    .mud-table th {
        font-weight: 600;
        font-size: 0.8rem;
        color: #9ca3af;
    }

/* Inputs / DatePicker / TimePicker ------------------ */

.mud-input-underline:before,
.mud-input-underline:after {
    border-bottom-color: #374151 !important;
}

.mud-input-underline.mud-input-focused:after {
    border-bottom-color: #6366F1 !important;
}

.mud-input-outlined .mud-input-outline {
    border-color: #374151 !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outline {
    border-color: #6366F1 !important;
}

.mud-input-label {
    color: #9ca3af !important;
}

.mud-input-adornment,
.mud-input-adornment-icon {
    color: #9ca3af !important;
}

/* Popups (Select, DatePicker) dunkel */

.mud-popover .mud-paper,
.mud-menu .mud-paper,
.mud-picker .mud-paper {
    background-color: #020817 !important;
    color: #e5e7eb !important;
}

/* Error UI unten ------------------------------------ */

#blazor-error-ui {
    background: #7f1d1d;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 12px;
    font-size: 0.75rem;
    z-index: 2000;
}

/* Multi-Select Spieler (Filter) --------------------- */
/* (Optional, falls du die Klasse player-filter-select verwendest) */

.player-filter-select .mud-input-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ---------- Ranking-Legende ------------------------ */

.ranking-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ranking-legend-label {
    font-weight: 500;
    margin-right: 4px;
}

.ranking-legend-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
}

    /* Farben der Legende m�ssen 1:1 zu den Row-Styles passen */

    .ranking-legend-badge.clinched {
        background-color: #062e17;
        color: #e5e7eb;
    }

    .ranking-legend-badge.top {
        background-color: #167534;
        color: #e5e7eb;
    }

    .ranking-legend-badge.pre {
        background-color: rgba(234, 179, 8, 0.22);
        color: #e5e7eb;
    }

    .ranking-legend-badge.contender {
        background-color: rgba(37, 99, 235, 0.16);
        color: #e5e7eb;
    }

    .ranking-legend-badge.out {
        background-color: rgba(239, 68, 68, 0.18);
        color: #e5e7eb;
    }

/* ---------- Quali-Rangliste: Zeilen-Highlights ----- */
/* Semantik:
   rank-safe-po   = dunkelgr�n (fix direkte Playoffs)
   rank-top       = hellgr�n (aktuell in direkter PO-Zone, aber nicht fix)
   rank-pre       = gelb (fix in Pre-Playoffs, keine Chance mehr auf direkt / raus)
   rank-bubble    = blau (kann noch in Pre-Playoffs rutschen)
   rank-elim-pre  = rot (keine Chance mehr auf Pre-Playoffs)
*/

.mud-table tr td {
    transition: background-color 0.12s ease;
}

/* Sicher direkte Playoffs */
.mud-table tr.rank-safe-po {
    background-color: #062e17 !important;
}

/* Aktuell direkte Playoff-Zone (aber nicht fix) */
.mud-table tr.rank-top:not(.rank-safe-po) {
    background-color: #167534 !important;
}

/* Sicher in den Pre-Playoffs (fix im Pre-Bereich) */
.mud-table tr.rank-pre {
    background-color: rgba(234, 179, 8, 0.22) !important;
}

/* Bubble-Zone: Chance auf Pre-Playoffs */
.mud-table tr.rank-bubble {
    background-color: rgba(37, 99, 235, 0.16) !important;
}

/* Ausgeschieden: keine Chance mehr auf Pre-Playoffs */
.mud-table tr.rank-elim-pre {
    background-color: rgba(239, 68, 68, 0.18) !important;
}

/* Hover f�r markierte Reihen */

.mud-table tr.rank-safe-po:hover {
    background-color: rgba(6, 46, 23, 0.96) !important;
}

.mud-table tr.rank-top:hover:not(.rank-safe-po) {
    background-color: rgba(22, 117, 52, 0.96) !important;
}

.mud-table tr.rank-pre:hover {
    background-color: rgba(234, 179, 8, 0.30) !important;
}

.mud-table tr.rank-bubble:hover {
    background-color: rgba(37, 99, 235, 0.26) !important;
}

.mud-table tr.rank-elim-pre:hover {
    background-color: rgba(239, 68, 68, 0.26) !important;
}

/* Hover f�r unmarkierte Reihen */

.mud-table tr:not(.rank-safe-po):not(.rank-top):not(.rank-pre):not(.rank-bubble):not(.rank-elim-pre):hover td {
    background-color: rgba(255, 255, 255, 0.04);
}

/*Playoff tab*/
.playoff-bracket {
    display: grid;
    /* Spaltenzahl kommt aus dem Markup (--bracket-columns), damit der Baum bei
       jeder Rundenzahl passt: 16 Teilnehmer = 4 Spalten, 4 Teilnehmer = 2. */
    grid-template-columns: repeat(var(--bracket-columns, 4), minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

    .playoff-bracket .round-column {
        display: flex;
        flex-direction: column;
    }

    /* Der Rumpf füllt die Spaltenhöhe; alle Slots teilen sie sich zu gleichen Teilen.
       Runde 1 hat 8 Slots, Runde 2 nur 4 -- deren Slots sind doppelt so hoch, die Karte
       darin zentriert und damit auf der Mitte ihrer beiden Vorgänger.
       Kein min-height: 0 auf den Slots: die automatische Mindesthöhe ist genau das,
       was die höchste Spalte die Zeilenhöhe bestimmen lässt. */
    .playoff-bracket .round-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .playoff-bracket .match-slot {
        flex: 1 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px 0;
    }

        .playoff-bracket .match-slot > .match-card {
            width: 100%;
            margin: 0;
        }

    .playoff-bracket .round-title {
        flex: 0 0 auto;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #9ca3af;
        margin-bottom: 8px;
        text-align: center;
    }

    /*.playoff-bracket .match-card {
        padding: 8px 10px;
        border-radius: 10px;
        background-color: #020817;
        border: 1px solid #111827;
        font-size: 0.78rem;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }*/

    /* Playoff Bracket: Gewinner/Verlierer hervorheben */

    .playoff-bracket .match-card {
        /* Kein margin-bottom mehr: der Abstand kommt jetzt aus der Slot-Höhe,
           sonst würde die Zentrierung im Slot verschoben. */
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 253, 0.18);
        background-color: #020817;
        font-size: 0.8rem;
    }

    .playoff-bracket .team {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .playoff-bracket .team-winner {
        color: #22c55e; /* sattes Gr�n */
        font-weight: 600;
    }

    .playoff-bracket .team-loser {
        color: #f97373; /* weiches Rot */
        opacity: 0.9;
    }


        .playoff-bracket .match-card .vs {
            font-size: 0.65rem;
            color: #6b7280;
        }

        .playoff-bracket .match-card .score {
            font-size: 0.75rem;
            color: #e5e7eb;
        }

    .playoff-bracket .final-match {
        border-color: #facc15;
    }

    .playoff-bracket .winner-label {
        margin-top: 4px;
        font-size: 0.75rem;
        color: #facc15;
    }

    .playoff-bracket .player-group-tag {
        font-size: 0.7rem;
        margin-left: 4px;
        color: #9ca3af;
    }

/*bracket tree view*/

/* Die Spalten richten sich ueber justify-content: space-around aus. Die frueheren
   pixelgenauen nth-child-Offsets funktionierten nur fuer exakt 8/4/2/1 Spiele und
   verrutschten, sobald Freilose oder eine andere Baumtiefe im Spiel waren. */

.playoff-bracket .match-bye {
    border-style: dashed;
    opacity: 0.75;
}

    .playoff-bracket .match-bye .vs {
        color: #facc15;
    }



/* ---------- Players Admin Tabelle ------------------ */
.players-admin-table table {
    table-layout: fixed;
    width: 100%;
}

.players-admin-table .col-name {
    width: 24%;
}

.players-admin-table .col-group {
    width: 18%;
}

.players-admin-table .col-active {
    width: 12%;
}

.players-admin-table .col-note {
    width: 31%;
}

.players-admin-table .col-action {
    width: 15%;
}

/* Hinweis-Text nicht ganze Spalte aufziehen lassen */

.players-admin-table .col-note .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}