/* public/assets/css/style.css */

/* ----- Variabelen (snel tunen van spacing) ----- */
:root{
    --match-gap: 0.75rem;        /* afstand tussen twee matches in een pair */
    --pair-gap: 2.5rem;          /* afstand tussen pairs in een ronde */
    --round-gap: -1rem;           /* horizontale afstand tussen rondes */
    --connector-length: 2rem;    /* horizontale verbindingslijn lengte */
    --match-min-width: 180px;    /* minimale breedte van een match-box */
}

/* --- Algemene Layout & Thema --- */
body {
    /* Zorgt voor ruimte bovenaan voor de vaste menubalk */
    padding-top: 0rem !important;
    background-color: #1e1e1e;
    color: #f1f1f1;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.navbar {
    background-color: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card {
    background-color: #2c2c2c;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header {
    background-color: #333;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Formulier Stijlen --- */
.form-control {
    background-color: #333;
    border-color: #555;
    color: #fff;
}

.form-control:focus {
    background-color: #333;
    border-color: #888;
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

/* --- Tabel Stijlen --- */
.table {
    --bs-table-border-color: rgba(255, 255, 255, 0.15);
}

/* --- Schalen voor Hoge Resolutie Schermen --- */
@media (min-width: 1400px) {
    html {
        font-size: 1.2rem; /* Verhoogt de basis lettergrootte lichtjes */
    }
}
@media (min-width: 1800px) {
    html {
        font-size: 1.3rem; /* Nog iets groter op zeer brede schermen */
    }
}

/* --- Visuele Bracket Stijlen (origineel + fixes) --- */
/* De oude aanpak met harde paddings is vervangen door flex-centering en gap-variabelen.
   Dit zorgt dat ronde-kolommen automatisch verticaal centreren ten opzichte van elkaar. */

.bracket-container {
    display: flex;
    overflow-x: auto; /* Maakt horizontaal scrollen mogelijk op kleine schermen */
    padding: 1.5rem;
    gap: var(--round-gap);   /* ruimte tussen rondes */
    align-items: center;     /* belangrijkste: centreert rondes verticaal t.o.v. elkaar */
}

/* Elke ronde is een verticale flex-kolom die zijn children centreert */
.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center alignment voor alle matches in de ronde */
    align-items: center;
    min-width: 250px;
    padding: 0 15px;
    gap: var(--pair-gap);
}

/* behoud originele zachte spacing tussen rondes (compatibiliteit met jouw layout) */
.bracket-round + .bracket-round {
    /* kleiner dan vroeger, maar ruimte wordt nu door gap op container geregeld */
    padding-top: 0;
    padding-bottom: 0;
}

.bracket-round-title {
    color: #adb5bd;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Een pair (2 matches die met elkaar verbinden) */
.bracket-pair {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* pair-items gecentreerd zodat connector precies in het midden zit */
    gap: var(--match-gap);    /* afstand tussen matches in een pair */
    margin-bottom: 0;         /* verticale spacing wordt bepaald door ronde gap */
    min-height: calc(var(--match-gap) * 4 + 2 * 36px); /* zorgt dat pair altijd genoeg ruimte heeft */
}

/* horizontale verbindingslijn naar de volgende ronde */
.bracket-pair::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--connector-length) + 6px); /* kleine offset zodat lijn netjes aansluit */
    top: 50%;
    width: var(--connector-length);
    height: 2px;
    background-color: #495057;
    transform: translateY(-50%);
    z-index: 1;
}

/* Wedstrijdbox */
.bracket-match {
    background-color: #343a40;
    border: 1px solid #495057;
    border-radius: 0.25rem;
    margin: 0;
    position: relative;
    min-width: var(--match-min-width);
    overflow: hidden;
}

/* De deelnemers binnen een match */
.bracket-participant {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #495057;
    color: #ddd;
    align-items: center;
}

.bracket-participant:last-child {
    border-bottom: none;
}

.bracket-participant.winner span {
    font-weight: bold;
    color: #28a745; /* Groene kleur voor de winnaar */
}

.bracket-score {
    font-weight: bold;
}

/* Verticale verbindingslijnen tussen de twee wedstrijden in een pair.
   We gebruiken percentage/half-heights zodat lijnen altijd precies in het midden aansluiten. */
.bracket-pair .bracket-match:first-child::before,
.bracket-pair .bracket-match:last-child::before {
    content: '';
    position: absolute;
    right: calc(-1 * var(--connector-length) + 8px);
    width: 2px;
    background-color: #495057;
    z-index: 0;
}

/* De bovenste verticale lijn start halverwege de bovenste match en loopt naar het midden */
.bracket-pair .bracket-match:first-child::before {
    top: 50%;
    height: calc(50% + (var(--match-gap) / 2));
    transform: translateY(-100%);
}

/* De onderste verticale lijn start halverwege de onderste match en loopt omhoog naar het midden */
.bracket-pair .bracket-match:last-child::before {
    bottom: 50%;
    height: calc(50% + (var(--match-gap) / 2));
}

/* Verberg de lijnen als een wedstrijd alleen is (zoals bij een bye) */
.bracket-pair .bracket-match:only-child::before {
    display: none;
}
.bracket-pair:only-child::after {
    display: none;
}

/* Verberg de uitgaande lijn voor de finale (laatste ronde) */
.bracket-container .bracket-round:last-child .bracket-pair::after {
    display: none;
}

/* --- Stijlen voor de Troostfinale --- */
.bracket-bronze-match-container {
    margin-top: 3rem; /* nette scheiding onder de brackets */
    padding-top: 1rem;
    border-top: 1px dashed #495057;
    text-align: center;
}

.bracket-bronze-title {
    color: #adb5bd;
    text-align: center;
    margin-bottom: 10px;
}

/* --- Kleine devices: match-breedte en gaps verkleinen --- */
@media (max-width: 767px) {
    :root {
        --round-gap: 1rem;
        --pair-gap: 1.2rem;
        --match-gap: 0.5rem;
        --connector-length: 1.2rem;
        --match-min-width: 160px;
    }
    .bracket-container { padding: 1rem; }
    .bracket-round { min-width: 200px; }
}

/* --- Helper classes voor debugging/tuning (optioneel) --- */
/* .bracket-debug { outline: 1px dashed rgba(255,0,0,0.12); } */
/* .bracket-pair { outline: 1px dashed rgba(0,255,0,0.08); } */


/* =================================================================== */
/* Fix voor Tom Select Leesbaarheid op Donkere Thema's
/* =================================================================== */

/* Tekst in het HOOFDVAK (typen en geselecteerd) */
.ts-control .item,
.ts-control input {
    color: #E0E0E0 !important; 
}

/* Standaard tekstkleur in de UITKLAPLIJST */
.ts-dropdown .option, 
.ts-dropdown .item {
    color: #E0E0E0;
}

/* Tekstkleur bij HOVER en ACTIEVE selectie in de lijst */
.ts-dropdown .option:hover, 
.ts-dropdown .active {
    color: #FFD700;
}

/* [NIEUW] Tekstkleur voor de "Geen resultaten" melding */
.ts-dropdown .no-results {
    color: #E0E0E0;
}

/* Maakt dropdown-titels wit en dikgedrukt */
.dropdown-header {
    color: #f8f9fa !important; /* Forceert de tekstkleur naar wit */
    font-weight: bold;
}