/* ============================================================
   VolleyScore — Hoofdstylesheet
   Geïnspireerd op NiceDash horizontal
   Lettertype: Plus Jakarta Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ---- Reset & basis ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Primaire kleur — donkergroen NiceDash-stijl */
    --kleur-primair:        #1a7a5e;
    --kleur-primair-donker: #145f49;
    --kleur-primair-licht:  #e8f5f1;
    --kleur-primair-medium: #c8e6de;

    /* Achtergrond & oppervlakken */
    --kleur-achtergrond:    #f5f5f5;
    --kleur-wit:            #ffffff;
    --kleur-rand:           #e8eaed;
    --kleur-rand-licht:     #f0f2f5;

    /* Tekst */
    --kleur-tekst:          #1a1a2e;
    --kleur-tekst-licht:    #5a6474;
    --kleur-tekst-hint:     #9aa3b0;

    /* Status */
    --kleur-succes:         #13deb9;
    --kleur-succes-bg:      #e8faf6;
    --kleur-fout:           #fa896b;
    --kleur-fout-bg:        #fef3ef;
    --kleur-waarschuwing:   #ffae1f;
    --kleur-waarschuwing-bg:#fff8ec;
    --kleur-info:           #539bff;
    --kleur-info-bg:        #ecf2ff;

    /* Typografie */
    --lettertype:       'Plus Jakarta Sans', system-ui, sans-serif;
    --tekst-xs:         0.75rem;
    --tekst-sm:         0.8125rem;
    --tekst-basis:      0.875rem;
    --tekst-lg:         1rem;

    /* Layout */
    --topbalk-hoogte:        64px;
    --paginavigatie-hoogte:  48px;
    --schaduw:               0 2px 12px rgba(0,0,0,0.06);
    --schaduw-hover:         0 4px 20px rgba(0,0,0,0.1);
    --rand-radius:           10px;
    --rand-radius-lg:        14px;
}

html { font-size: 16px; }

body {
    font-family: var(--lettertype);
    font-size: var(--tekst-basis);
    color: var(--kleur-tekst-licht);
    background: var(--kleur-achtergrond);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--kleur-primair); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Bovenste balk ---------------------------------------- */
.topbalk {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbalk-hoogte);
    background: var(--kleur-wit);
    border-bottom: 1px solid var(--kleur-rand);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    z-index: 1000;
    box-shadow: var(--schaduw);
}

.topbalk__logo a { text-decoration: none; display: flex; align-items: center; gap: 10px; }

.logo-tekst {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kleur-tekst);
    letter-spacing: -0.03em;
}

.logo-tekst strong { color: #dd524c; }

/* ---- Gebruikersmenu --------------------------------------- */
.topbalk__rechts { display: flex; align-items: center; gap: 8px; }

.gebruikersmenu { position: relative; }

.gebruikersmenu__knop {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 40px;
    color: var(--kleur-tekst);
    font-size: var(--tekst-basis);
    font-family: var(--lettertype);
    transition: background 0.15s;
}

.gebruikersmenu__knop:hover { background: #ece6fb; }

.gebruikersmenu__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #8057e4;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gebruikersmenu__naam {
    font-weight: 600;
    color: var(--kleur-tekst);
    font-size: var(--tekst-sm);
}

.gebruikersmenu__pijl { font-size: 0.55rem; color: var(--kleur-tekst-hint); }

.gebruikersmenu__lijst {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: var(--kleur-wit);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rand-radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    list-style: none;
    padding: 6px;
    z-index: 1100;
}

.gebruikersmenu__lijst--open { display: block; }

.gebruikersmenu__lijst li a {
    display: block;
    padding: 9px 14px;
    font-size: var(--tekst-sm);
    color: var(--kleur-tekst-licht);
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
}

.gebruikersmenu__lijst li a:hover {
    background: var(--kleur-primair-licht);
    color: var(--kleur-primair);
    text-decoration: none;
}

.gebruikersmenu__scheiding {
    border-top: 1px solid var(--kleur-rand);
    margin: 4px 0;
}

/* ---- Paginavigatie (tweede balk) -------------------------- */
.paginavigatie {
    position: fixed;
    top: var(--topbalk-hoogte);
    left: 0; right: 0;
    height: var(--paginavigatie-hoogte);
    background: var(--kleur-wit);
    border-bottom: 1px solid var(--kleur-rand);
    display: flex;
    align-items: center;
    padding: 0 28px;
    z-index: 999;
    gap: 4px;
}

.paginavigatie__lijst {
    display: flex;
    list-style: none;
    gap: 2px;
}

.paginavigatie__item a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: var(--tekst-sm);
    font-weight: 500;
    color: var(--kleur-tekst-licht);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.paginavigatie__item a:hover {
    background: var(--kleur-primair-licht);
    color: var(--kleur-primair);
    text-decoration: none;
}

.paginavigatie__item--actief a {
    background: #e0e6e5;
    color: #2c5950;
    font-weight: 600;
}

.paginavigatie__item--actief a:hover {
    background: #d0dedd;
    color: #2c5950;
}

/* ---- Hoofdinhoud ------------------------------------------ */
.inhoud {
    margin-top: calc(var(--topbalk-hoogte) + var(--paginavigatie-hoogte));
    padding: 28px 28px 56px;
    max-width: 1400px;
}

/* ---- Voettekst -------------------------------------------- */
.voettekst {
    text-align: center;
    padding: 20px;
    font-size: var(--tekst-xs);
    color: var(--kleur-tekst-hint);
    border-top: 1px solid var(--kleur-rand);
}

/* ---- Paginakoptekst --------------------------------------- */
.pagina-koptekst {
    margin-bottom: 24px;
}

.pagina-koptekst__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tekst-xs);
    color: var(--kleur-tekst-hint);
    margin-bottom: 4px;
}

.pagina-koptekst__breadcrumb span { color: var(--kleur-primair); font-weight: 600; }

.paginatitel {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kleur-tekst);
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

/* ---- Kaart ------------------------------------------------- */
.kaart {
    background: var(--kleur-wit);
    border-radius: var(--rand-radius-lg);
    box-shadow: var(--schaduw);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--kleur-rand-licht);
}

.kaart__titel {
    font-size: var(--tekst-lg);
    font-weight: 700;
    color: var(--kleur-tekst);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--kleur-rand);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---- Statistiekkaarten (NiceDash stijl) ------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-kaart {
    background: var(--kleur-wit);
    border-radius: var(--rand-radius-lg);
    padding: 22px 24px;
    box-shadow: var(--schaduw);
    border: 1px solid var(--kleur-rand-licht);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-kaart__getal {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--kleur-tekst);
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat-kaart__label {
    font-size: var(--tekst-sm);
    color: var(--kleur-tekst-hint);
    font-weight: 500;
}

.stat-kaart--groen  { border-top: 3px solid var(--kleur-succes); }
.stat-kaart--oranje { border-top: 3px solid var(--kleur-waarschuwing); }
.stat-kaart--blauw  { border-top: 3px solid var(--kleur-info); }
.stat-kaart--rood   { border-top: 3px solid var(--kleur-fout); }

/* ---- Formulieren ------------------------------------------ */
.formulier-groep { margin-bottom: 16px; }

.formulier-groep label {
    display: block;
    font-size: var(--tekst-sm);
    font-weight: 600;
    color: var(--kleur-tekst);
    margin-bottom: 6px;
}

.formulier-groep input,
.formulier-groep select,
.formulier-groep textarea {
    width: 100%;
    padding: 9px 14px;
    border: 1.5px solid var(--kleur-rand);
    border-radius: var(--rand-radius);
    font-size: var(--tekst-basis);
    font-family: var(--lettertype);
    color: var(--kleur-tekst);
    background: var(--kleur-wit);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.formulier-groep input:focus,
.formulier-groep select:focus,
.formulier-groep textarea:focus {
    border-color: var(--kleur-primair);
    box-shadow: 0 0 0 3px rgba(26,122,94,0.1);
}

.formulier-groep input::placeholder { color: var(--kleur-tekst-hint); }

/* ---- Knoppen ---------------------------------------------- */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: var(--rand-radius);
    font-size: var(--tekst-sm);
    font-family: var(--lettertype);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.knop:hover { text-decoration: none; opacity: 0.9; }
.knop:active { opacity: 0.8; }

.knop--primair {
    background: var(--kleur-primair);
    color: #fff;
    box-shadow: 0 2px 8px rgba(26,122,94,0.25);
}

.knop--primair:hover {
    background: var(--kleur-primair-donker);
    opacity: 1;
}

.knop--licht {
    background: var(--kleur-primair-licht);
    color: var(--kleur-primair);
}

.knop--fout {
    background: var(--kleur-fout-bg);
    color: var(--kleur-fout);
}

.knop--fout:hover { background: var(--kleur-fout); color: #fff; opacity: 1; }

.knop--outline {
    background: transparent;
    color: var(--kleur-primair);
    border: 1.5px solid var(--kleur-primair);
}

.knop--klein { padding: 6px 14px; font-size: var(--tekst-xs); border-radius: 8px; }

/* ---- Alerts ----------------------------------------------- */
.alert {
    padding: 13px 16px;
    border-radius: var(--rand-radius);
    margin-bottom: 18px;
    font-size: var(--tekst-sm);
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.alert-succes    { background: var(--kleur-succes-bg);     color: #0a6b54; border-left: 3px solid var(--kleur-succes); }
.alert-fout      { background: var(--kleur-fout-bg);       color: #c0392b; border-left: 3px solid var(--kleur-fout); }
.alert-waarschuwing { background: var(--kleur-waarschuwing-bg); color: #8a5700; border-left: 3px solid var(--kleur-waarschuwing); }
.alert-info      { background: var(--kleur-info-bg);       color: #1a4fa0; border-left: 3px solid var(--kleur-info); }

/* ---- Tabellen --------------------------------------------- */
.tabel-wrapper { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: var(--tekst-sm); }

thead th {
    padding: 11px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--kleur-tekst-hint);
    font-size: var(--tekst-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1.5px solid var(--kleur-rand);
    white-space: nowrap;
}

tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--kleur-rand-licht);
    color: var(--kleur-tekst-licht);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover td { background: var(--kleur-primair-licht); }

/* ---- Badge ------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--tekst-xs);
    font-weight: 600;
    white-space: nowrap;
}

.badge--coach      { background: var(--kleur-primair-licht); color: var(--kleur-primair); }
.badge--assistent  { background: var(--kleur-info-bg);       color: var(--kleur-info); }
.badge--succes     { background: var(--kleur-succes-bg);     color: #0a6b54; }
.badge--fout       { background: var(--kleur-fout-bg);       color: #c0392b; }
.badge--waarschuwing { background: var(--kleur-waarschuwing-bg); color: #8a5700; }
.badge--competitie { background: var(--kleur-primair-licht); color: var(--kleur-primair); }
.badge--beker      { background: var(--kleur-waarschuwing-bg); color: #8a5700; }
.badge--oefenwedstrijd { background: var(--kleur-info-bg);   color: var(--kleur-info); }

/* ---- Auth pagina's (login / register) --------------------- */
.auth-pagina {
    min-height: 100vh;
    display: flex;
    background: var(--kleur-wit);
}

.auth-formulier-kant {
    flex: 0 0 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 52px;
}

.auth-decoratie-kant {
    flex: 1;
    background: var(--kleur-primair);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-decoratie-kant img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

.auth-decoratie-kant__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,122,94,0.85) 0%, rgba(20,95,73,0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
    color: #fff;
}

.auth-decoratie-kant__overlay h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.auth-decoratie-kant__overlay p {
    font-size: var(--tekst-basis);
    opacity: 0.85;
    max-width: 320px;
    line-height: 1.7;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
}

.auth-logo__tekst {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--kleur-tekst);
    letter-spacing: -0.03em;
}

.auth-logo__tekst strong { color: var(--kleur-primair); }

.auth-koptekst { margin-bottom: 28px; }
.auth-koptekst h1 { font-size: 1.4rem; font-weight: 700; color: var(--kleur-tekst); margin-bottom: 6px; letter-spacing: -0.02em; }
.auth-koptekst p  { font-size: var(--tekst-sm); color: var(--kleur-tekst-hint); }

.auth-footer {
    margin-top: 24px;
    text-align: center;
    font-size: var(--tekst-sm);
    color: var(--kleur-tekst-hint);
}

.fout-tekst { font-size: var(--tekst-xs); color: var(--kleur-fout); margin-top: 4px; }
.input-fout { border-color: var(--kleur-fout) !important; }

@media (max-width: 768px) {
    .auth-decoratie-kant { display: none; }
    .auth-formulier-kant { flex: 1; padding: 40px 28px; }
}

/* ---- Auth boxed layout ------------------------------------ */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kleur-achtergrond);
    padding: 24px;
}

.auth-wrapper {
    width: 100%;
    max-width: 900px;
}

.auth-box {
    display: flex;
    border-radius: var(--rand-radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    overflow: hidden;
    background: var(--kleur-wit);
    min-height: 540px;
}

.auth-box__formulier {
    flex: 0 0 420px;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-box__formulier--breed {
    flex: 0 0 500px;
}

.auth-box__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
}

.auth-box__logo-icoon {
    width: 34px; height: 34px;
    background: #fae5e4;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-box__logo-tekst {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kleur-tekst);
    letter-spacing: -0.03em;
}

.auth-box__logo-tekst strong { color: #dd524c; }

.auth-box__koptekst { margin-bottom: 26px; }
.auth-box__koptekst h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kleur-tekst);
    margin-bottom: 5px;
    letter-spacing: -0.02em;
}
.auth-box__koptekst p { font-size: var(--tekst-sm); color: var(--kleur-tekst-hint); }

.auth-box__footer {
    margin-top: 20px;
    text-align: center;
    font-size: var(--tekst-sm);
    color: var(--kleur-tekst-hint);
}

.auth-box__afbeelding {
    flex: 1;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgb(26,53,45) 100%),
        url('/assets/img/auth-volleybal.jpg') center/cover no-repeat;
}

.auth-box__afbeelding-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: #fff;
}

.auth-box__afbeelding-overlay h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.auth-box__afbeelding-overlay p {
    font-size: var(--tekst-sm);
    opacity: 0.85;
    line-height: 1.7;
    max-width: 280px;
}

/* Verificatie: gecentreerde kaart zonder afbeelding */
.auth-box--smal {
    max-width: 460px;
    margin: 0 auto;
}

.auth-box--smal .auth-box__formulier {
    flex: 1;
    text-align: center;
}

.auth-box--smal .auth-box__afbeelding { display: none; }

.auth-icoon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.75rem;
}

.auth-icoon--succes     { background: var(--kleur-succes-bg); }
.auth-icoon--fout       { background: var(--kleur-fout-bg); }
.auth-icoon--waarschuwing { background: var(--kleur-waarschuwing-bg); }
.auth-icoon--info       { background: var(--kleur-info-bg); }

@media (max-width: 720px) {
    .auth-box__afbeelding { display: none; }
    .auth-box__formulier  { flex: 1; padding: 36px 28px; }
}

/* ============================================================
   Utility kleurklassen
   ============================================================ */

/* Kaart achtergronden */
.kaart--groen  { background: #e0e6e5; }
.kaart--blauw  { background: #e0f2fe; }
.kaart--oranje { background: #ffedd5; }
.kaart--paars  { background: #ede6fd; }
.kaart--lichtgroen { background: #eff9eb; }

/* Knoppen */
.knop--geel   { background: #f6b51e; color: #fff; border-color: #f6b51e; }
.knop--geel:hover { background: #d4a019; border-color: #d4a019; }

.knop--balk {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
}
.knop--balk:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* Badge kleur bewaren bij tabel hover */
.tabel-groen tbody tr:hover td .badge {
    color: inherit;
    background: inherit;
}
.knop--donkergroen { background: #2c5950; color: #fff; border-color: #2c5950; }
.knop--donkergroen:hover { background: #1e3d35; border-color: #1e3d35; }

/* Tabel met groene hover */
.tabel-groen th {
    background: #e0e6e5;
    color: #2c5950;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.tabel-groen tbody tr {
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.tabel-groen tbody tr:hover td {
    background: #2c5950;
    color: #fff;
}
.tabel-groen tbody tr:hover td a,
.tabel-groen tbody tr:hover td span {
    color: #fff;
}

/* Paginabalk met knop rechts */
.paginabalk-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--kleur-primair);
    border-radius: var(--rand-radius-lg);
    padding: 20px 28px;
    margin-bottom: 24px;
}
.paginabalk-wrapper h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}
.paginabalk-wrapper p {
    color: rgba(255,255,255,0.65);
    font-size: var(--tekst-sm);
    margin: 4px 0 0;
}