/* ============================================================
   LED Scorebord — Anatec stijl
   Rij 1: Rode klok (MM:SS)
   Rij 2: Witte teamnamen links/rechts, "periode" label midden
   Rij 3: Groene scores links/rechts
   ============================================================ */

html, body {
    font-family: 'Roboto', sans-serif;
    background-color: #1a1a1a;
    color: #ccc;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* DSEG7 Classic — authentiek 7-segment LED scorebord lettertype */
@import url('https://fonts.cdnfonts.com/css/dseg7-classic');

@font-face {
    font-family: 'DSEG7Classic';
    src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* ── Buitenste paneel ── */
.led-board {
    background: #0c0c0c;
    border-radius: 8px;
    border: 5px solid #1e1e1e;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9), 0 8px 32px rgba(0,0,0,0.8);
    overflow: hidden;
    margin: 8px;
}

/* ── Module: één cijfer-vak met vaste breedte zodat alle cijfers even groot zijn ── */
.led-module {
    background: linear-gradient(160deg, #111 0%, #060606 60%, #0a0a0a 100%);
    border: 1px solid #242424;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    border-radius: 5px;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.04), inset 0 -3px 8px rgba(0,0,0,0.9), inset 2px 0 6px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mobiel: vult volledige breedte */
    width: clamp(52px, 15vw, 100px);
    height: clamp(76px, 23vw, 145px);
    flex-shrink: 0;
}

/* Twee-koloms: bord in ~70% kolom → kleinere vw-stap */
@media (min-width: 600px) {
    .led-module {
        width: clamp(44px, 10vw, 100px);
        height: clamp(64px, 15vw, 145px);
    }
}

/* ── Rij 1: Klok — rood ── */
.led-row-clock {
    background: #0e0e0e;
    padding: 10px 12px 8px;
    border-bottom: 4px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.led-clock-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Dubbele punt tussen MM en SS */
.led-clock-sep {
    font-family: 'DSEG7Classic', 'DSEG7 Classic', monospace;
    font-size: clamp(60px, 18vw, 115px);
    line-height: 1;
    color: #FF2200;
    height: clamp(76px, 23vw, 145px);
    display: flex;
    align-items: center;
    padding: 0 2px;
    flex-shrink: 0;
}

.led-clock-digit {
    font-family: 'DSEG7Classic', 'DSEG7 Classic', monospace;
    font-size: clamp(60px, 18vw, 115px);
    line-height: 1;
    color: #FF2200;
    letter-spacing: 0;
}

/* ── Rij 2: Teamnamen + periode-label onderaan uitgelijnd ── */
.led-row-teams {
    background: #000000;
    padding: 8px 16px;
    border-bottom: 4px solid #000;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.led-team-home,
.led-team-guest {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.02em;
    flex: 1;
    min-width: 0;
    font-size: clamp(10px, 2.5vw, 24px);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
    line-height: 1.2;
}

.led-team-home {
    text-align: left;
}

.led-team-guest {
    text-align: right;
}

/* Label "periode" + cijfer gestapeld in het midden van rij 3 */
.led-periode-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Label "periode" boven het cijfer */
.led-periode-label {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(9px, 2.5vw, 14px);
    color: #666;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}

/* ── Rij 3: Scores + Periode op dezelfde rij ── */
.led-row-scores {
    background: #0e0e0e;
    padding: 10px 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.led-score-group {
    display: flex;
    gap: 4px;
    flex: 1;
}

.led-score-group-right {
    justify-content: flex-end;
}

.led-score-digit {
    font-family: 'DSEG7Classic', 'DSEG7 Classic', monospace;
    font-size: clamp(60px, 18vw, 115px);
    line-height: 1;
    color: #22DD44;
    letter-spacing: 0;
}

/* Periode — midden tussen de scores */
.led-periode-module {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    /* Eigen kleinere led-module voor het periode-vak (~40% kleiner dan standaard) */
    .led-periode-module .led-module {
        width: clamp(31px, 9vw, 60px);
        height: clamp(46px, 14vw, 87px);
    }

.led-periode-digit {
    font-family: 'DSEG7Classic', 'DSEG7 Classic', monospace;
    font-size: clamp(40px, 12vw, 80px);
    line-height: 1;
    color: #FFA500;
    letter-spacing: 0;
}

/* ── Bediening onder het bord ── */
.ctrl-section {
    background: #1e1e1e;
    border-radius: 8px;
    border: 5px solid #1e1e1e;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9), 0 8px 32px rgba(0,0,0,0.8);
    margin: 8px;
    padding: 12px;
}

.ctrl-label {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    text-align: center;
}

.ctrl-label-einde {
    font-size: 14px !important;
    color: #FF2200 !important;
    letter-spacing: 0.2em !important;
    padding: 12px 0 !important;
    text-shadow: 0 0 8px rgba(255, 34, 0, 0.6) !important;
}

.ctrl-label-periode-type {
    font-size: 14px !important;
    color: #FFA500 !important;
    letter-spacing: 0.2em !important;
    padding: 4px 0 8px !important;
    text-shadow: 0 0 8px rgba(255, 165, 0, 0.5) !important;
}

/* ── MudPaper reset ── */
.mud-paper {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ── Knoppen: grote touch targets ── */
.mud-fab {
    min-width: clamp(44px, 11vw, 58px) !important;
    min-height: clamp(44px, 11vw, 58px) !important;
}

/* ── AppBar ── */
.mud-appbar {
    background: #0a0a0a !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-shadow: none !important;
}

.blazor-error-boundary {
    background: #8b0000;
    padding: 1rem;
    color: white;
    border-radius: 4px;
}

    .blazor-error-boundary::after {
        content: "Er is een fout opgetreden.";
    }

/* ── Dialog backdrop blur ── */
.dialog-blur {
    backdrop-filter: blur(4px);
    background: rgba(0,0,0,0.6);
}

/* ── MudDrawer breedte — globaal want scoped CSS bereikt MudBlazor root niet ── */
.mud-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    --mud-drawer-width: 100vw !important;
}

@media (min-width: 768px) {
    .mud-drawer {
        width: 33vw !important;
        max-width: 33vw !important;
        --mud-drawer-width: 33vw !important;
    }
}

/* ── MudDatePicker popup achtergrond ondoorzichtig ── */
.mud-picker-content {
    background-color: #1a1a1a !important;
}

.mud-picker {
    background-color: #1a1a1a !important;
}

/* ── Vervanging voor Bootstrap text-danger (Error.razor) ── */
.text-danger {
    color: #dc3545;
}

/* ── Scorebord pagina breedte ── */
.scorebord-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 0 32px;
}

/* ── Knop icoonkleuren — globaal want scoped CSS bereikt MudBlazor SVG niet ── */
/* Groene + */
.btn-score-add .mud-svg-icon,
.btn-clock-add .mud-svg-icon {
    fill: #22DD44 !important;
}

/* Rode - */
.btn-score-remove .mud-svg-icon,
.btn-clock-remove .mud-svg-icon {
    fill: #FF2200 !important;
}

/* Paarse overige klok-iconen */
.btn-clock-start .mud-svg-icon,
.btn-clock-stop .mud-svg-icon,
.btn-clock-pause .mud-svg-icon,
.btn-clock-reset .mud-svg-icon {
    fill: #594AE2 !important;
}

/* ── Scorebord overzicht pagina ── */
.overzicht-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 12px 12px 32px;
}

.overzicht-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 0 16px;
    min-height: 44px;
}

.overzicht-titel {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #fff;
    flex: 1;
}

.overzicht-groep-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #444;
    padding: 4px 2px 10px;
    margin-top: 8px;
}

/* Mobile: 1 kolom; tablet+: 2+ kolommen */
.overzicht-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

@media (min-width: 480px) {
    .overzicht-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

.overzicht-leeg {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}