/*
 * Glomavis Teambeheer - DESIGN OPTIES
 * ---------------------------------------------------------------------------
 * Dit is het enige bestand dat je hoeft aan te passen om het uiterlijk van de
 * publieke Teambeheer-pagina's te wijzigen. Alle kleuren, afrondingen, schaduwen
 * en afmetingen staan hier. In glomavis-teambeheer.css staat alleen de opmaak;
 * daar hoef je normaal gesproken niets te veranderen.
 *
 * Overschrijven vanuit je thema of Customizer > Extra CSS kan ook:
 *
 *     .gem-teambeheer-public,
 *     .gem-teambeheer-context-header,
 *     .gem-teambeheer-data-footer {
 *         --gem-tb-accent: #d62828;
 *     }
 *
 * Tip: pas normaal gesproken alleen de MERKKLEUREN hieronder aan. De rest van
 * de tokens is daarvan afgeleid en volgt automatisch mee.
 */

.gem-teambeheer-public,
.gem-teambeheer-context-header,
.gem-teambeheer-data-footer {
    /* === 1. MERKKLEUREN ================================================== */
    /* De hoofdkleur: knoppen, actieve tabs, accenten, cijfers. */
    --gem-tb-accent: #245ed1;
    /* Het eigen LaCo-bondsteam, onafhankelijk van thuis/uit of winst/verlies. */
    --gem-tb-own-team: #0E990A;
    /* Donkerdere variant van de hoofdkleur, gebruikt bij hover. */
    --gem-tb-accent-dark: #1c4aa8;
    /* Tekstkleur op een accent-achtergrond (knop, actieve tab). */
    --gem-tb-on-accent: #ffffff;
    /* Tweede kleur, voor winst/positieve badges. */
    --gem-tb-positive: #10805d;
    /* Waarschuwingskleur, voor meldingen boven de pagina. */
    --gem-tb-warning: #b45309;

    /* === 2. BASISKLEUREN ================================================= */
    /* Hoofdtekstkleur. */
    --gem-tb-ink: #141b34;
    /* Secundaire tekst: meta-regels, labels, bijschriften. */
    --gem-tb-muted: #5b6781;
    /* Paginaondergrond achter de kaarten. */
    --gem-tb-canvas: transparent;
    /* Achtergrond van kaarten, tabellen en panelen. */
    --gem-tb-surface: #ffffff;
    /* Iets grijzere ondergrond: tabelkoppen, gevulde vlakken. */
    --gem-tb-surface-muted: #f4f6fb;
    /* Randkleur. */
    --gem-tb-border: #e2e7f0;
    /* Sterkere randkleur, o.a. onder tabelkoppen. */
    --gem-tb-border-strong: #cbd3e3;

    /* === 3. HERO / PAGINAKOP ============================================ */
    /* Achtergrond van het kopblok. Zet op `var(--gem-tb-surface)` voor vlak wit. */
    --gem-tb-hero-bg: linear-gradient(135deg, #eef3fd 0%, #ffffff 65%);
    --gem-tb-hero-ink: var(--gem-tb-ink);
    --gem-tb-hero-eyebrow: var(--gem-tb-accent);

    /* === 4. VORM ======================================================== */
    --gem-tb-radius-lg: 18px;   /* kaarten, panelen, tabellen */
    --gem-tb-radius-md: 12px;   /* knoppen, invoervelden */
    --gem-tb-radius-pill: 999px; /* tabs, badges, chips */

    /* === 5. SCHADUW ===================================================== */
    /* Zet beide op `none` voor een strak, plat ontwerp. */
    --gem-tb-shadow: 0 1px 2px rgba(20, 27, 52, 0.04), 0 8px 24px -16px rgba(20, 27, 52, 0.28);
    --gem-tb-shadow-hover: 0 2px 6px rgba(20, 27, 52, 0.06), 0 18px 36px -20px rgba(20, 27, 52, 0.38);

    /* === 6. TYPOGRAFIE ================================================== */
    --gem-tb-font: inherit;
    --gem-tb-font-heading: inherit;
    /* Paginatitel schaalt mee met de schermbreedte. */
    --gem-tb-size-title: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
    --gem-tb-size-section: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
    --gem-tb-size-card-title: 1.0625rem;
    --gem-tb-size-body: 1rem;
    --gem-tb-size-meta: 0.8125rem;
    --gem-tb-size-table: 0.9375rem;
    --gem-tb-size-stat: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);

    /* === 7. RUIMTE ====================================================== */
    /* Maximale breedte van de pagina-inhoud. */
    --gem-tb-max-width: 1180px;
    /* Zijmarge op mobiel. */
    --gem-tb-gutter: 16px;
    /* Verticale ruimte tussen de secties. */
    --gem-tb-section-gap: clamp(20px, 3.5vw, 32px);
    /* Binnenruimte van kaarten en panelen. */
    --gem-tb-pad: clamp(18px, 3vw, 28px);

    /* === 8. TABELLEN =================================================== */
    --gem-tb-table-head-bg: var(--gem-tb-surface-muted);
    --gem-tb-table-head-ink: var(--gem-tb-muted);
    /* Achtergrond van even rijen. Zet op `transparent` voor rijen zonder zebra. */
    --gem-tb-table-zebra: #fafbfe;
    /* Markering van de eigen ploeg in de stand. */
    --gem-tb-table-highlight: color-mix(in srgb, var(--gem-tb-accent) 10%, #ffffff);
    /* Breedte van de positiekolom (#) in de stand. Deze kolom en de teamkolom
       blijven op smalle schermen staan terwijl de cijfers zijwaarts scrollen. */
    --gem-tb-rank-width: 2.5rem;
}

/*
 * OPTIE: donkere modus
 * ---------------------------------------------------------------------------
 * Haal het commentaar weg als de Teambeheer-pagina's mee moeten kleuren met een
 * donker thema of met de systeemvoorkeur van de bezoeker.
 */
/*
@media (prefers-color-scheme: dark) {
    .gem-teambeheer-public,
    .gem-teambeheer-context-header,
    .gem-teambeheer-data-footer {
        --gem-tb-accent: #6c9bff;
        --gem-tb-accent-dark: #8db2ff;
        --gem-tb-on-accent: #0b1226;
        --gem-tb-ink: #eef2fb;
        --gem-tb-muted: #a3adc4;
        --gem-tb-surface: #141a2c;
        --gem-tb-surface-muted: #1c2338;
        --gem-tb-border: #2a3350;
        --gem-tb-border-strong: #3a456a;
        --gem-tb-hero-bg: linear-gradient(135deg, #1b2440 0%, #141a2c 65%);
        --gem-tb-table-zebra: #182038;
        --gem-tb-shadow: none;
        --gem-tb-shadow-hover: none;
    }
}
*/