/* =============================================================================
   style.css — Opmaak voor de Strandhuisje boekingsapplicatie

   Dit bestand verzorgt de volledige opmaak van alle pagina's.
   De stijl is mobiel-vriendelijk (responsive) en werkt goed op
   zowel smartphones en tablets als op desktops.

   Opbouw:
   1. CSS variabelen (kleuren, maten)
   2. Reset en basis stijlen
   3. Navigatiebalk
   4. Flash berichten
   5. Login en wachtwoord pagina's
   6. Homepage
   7. Formulieren
   8. Tabellen
   9. Knoppen
   10. Kalender
   11. Popups
   12. Profiel en beheer pagina's
   13. Hulpklassen
   14. Responsive aanpassingen voor kleine schermen
   ============================================================================= */


/* =============================================================================
   1. CSS VARIABELEN
   Centrale definitie van kleuren en maten. Wijzig hier om het
   uiterlijk van de hele applicatie aan te passen.
   ============================================================================= */

:root {
    /* Hoofdkleuren */
    --kleur-primair:        #2c7be5;   /* Blauw — knoppen, links */
    --kleur-primair-hover:  #1a68d1;   /* Donkerder blauw bij hover */
    --kleur-secundair:      #6c757d;   /* Grijs — secundaire knoppen */
    --kleur-secundair-hover:#5a6268;   /* Donkerder grijs bij hover */
    --kleur-gevaar:         #dc3545;   /* Rood — verwijderen */
    --kleur-gevaar-hover:   #c82333;   /* Donkerder rood bij hover */
    --kleur-waarschuwing:   #fd7e14;   /* Oranje — waarschuwingen */
    --kleur-waarschuwing-hover: #e96b00;
    --kleur-succes:         #28a745;   /* Groen — succesmeldingen */
    --kleur-info:           #17a2b8;   /* Cyaan — informatie */

    /* Achtergrondkleuren */
    --achtergrond:          #f8f9fa;   /* Lichtgrijs pagina achtergrond */
    --achtergrond-wit:      #ffffff;   /* Wit voor kaarten en formulieren */
    --achtergrond-bezet:    #ffeeba;   /* Geel voor bezette kalenderdagen */
    --achtergrond-vrij:     #d4edda;   /* Groen voor vrije kalenderdagen */

    /* Tekstkleuren */
    --tekst-donker:         #212529;   /* Bijna zwart voor hoofdtekst */
    --tekst-grijs:          #6c757d;   /* Grijs voor hints en secundaire tekst */
    --tekst-licht:          #ffffff;   /* Wit voor tekst op gekleurde achtergrond */

    /* Randen */
    --rand:                 #dee2e6;   /* Lichtgrijs voor randen */
    --rand-radius:          8px;       /* Afgeronde hoeken */
    --rand-radius-groot:    12px;      /* Grotere afronding voor kaarten */

    /* Schaduwen */
    --schaduw-klein:        0 1px 3px rgba(0,0,0,0.1);
    --schaduw-medium:       0 4px 6px rgba(0,0,0,0.1);
    --schaduw-groot:        0 10px 25px rgba(0,0,0,0.15);

    /* Navigatie */
    --nav-hoogte:           60px;
    --nav-achtergrond:      #1a1a2e;   /* Donkerblauw */
    --nav-tekst:            #ffffff;

    /* Typografie */
    --lettertype:           'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --letter-grootte-basis: 16px;

    /* Afstanden */
    --ruimte-klein:         8px;
    --ruimte-medium:        16px;
    --ruimte-groot:         24px;
    --ruimte-extra-groot:   48px;

    /* Maximale breedte van de inhoud */
    --max-breedte:          900px;
}


/* =============================================================================
   2. RESET EN BASIS STIJLEN
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;  /* Inclusief padding en border in breedte/hoogte */
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--letter-grootte-basis);
    scroll-behavior: smooth;
}

body {
    font-family: var(--lettertype);
    color: var(--tekst-donker);
    background-color: var(--achtergrond);
    line-height: 1.6;
    min-height: 100vh;
}

h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--ruimte-groot);
    color: var(--tekst-donker);
}

h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: var(--ruimte-medium);
    color: var(--tekst-donker);
}

h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--ruimte-medium);
    color: var(--tekst-donker);
}

p {
    margin-bottom: var(--ruimte-medium);
}

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

a:hover {
    text-decoration: underline;
}


/* =============================================================================
   3. NAVIGATIEBALK
   ============================================================================= */

.navigatie {
    position: fixed;          /* Altijd bovenaan zichtbaar */
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-hoogte);
    background-color: var(--nav-achtergrond);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ruimte-groot);
    z-index: 100;
    box-shadow: var(--schaduw-medium);
}

.nav-logo {
    color: var(--nav-tekst);
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
}

.nav-logo:hover {
    color: var(--kleur-primair);
    text-decoration: none;
}

.nav-acties {
    display: flex;
    align-items: center;
    gap: var(--ruimte-klein);
}

.nav-gebruiker {
    color: var(--nav-tekst);
    font-size: 0.9rem;
    margin-right: var(--ruimte-klein);
    opacity: 0.8;
}

.nav-knop {
    padding: 6px 12px;
    border-radius: var(--rand-radius);
    font-size: 0.85rem;
    color: var(--nav-tekst);
    background-color: rgba(255,255,255,0.15);
    text-decoration: none;
    transition: background-color 0.2s;
}

.nav-knop:hover {
    background-color: rgba(255,255,255,0.25);
    text-decoration: none;
    color: var(--nav-tekst);
}

.nav-knop-admin {
    background-color: var(--kleur-waarschuwing);
}

.nav-knop-admin:hover {
    background-color: var(--kleur-waarschuwing-hover);
}

.nav-knop-uitlog {
    background-color: var(--kleur-gevaar);
}

.nav-knop-uitlog:hover {
    background-color: var(--kleur-gevaar-hover);
}

/* Ruimte voor de vaste navigatiebalk */
.hoofdinhoud {
    padding-top: calc(var(--nav-hoogte) + var(--ruimte-groot));
    min-height: 100vh;
}


/* =============================================================================
   4. FLASH BERICHTEN
   ============================================================================= */

.flash-berichten {
    position: fixed;
    top: calc(var(--nav-hoogte) + var(--ruimte-klein));
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: 90%;
    max-width: 600px;
}

.flash {
    padding: var(--ruimte-medium);
    border-radius: var(--rand-radius);
    margin-bottom: var(--ruimte-klein);
    font-weight: 500;
    box-shadow: var(--schaduw-medium);
    text-align: center;
}

.flash-succes {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flash-fout {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.flash-waarschuwing {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.flash-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}


/* =============================================================================
   5. LOGIN EN WACHTWOORD PAGINA'S
   ============================================================================= */

.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--nav-hoogte));
    padding: var(--ruimte-groot);
}

.login-kaart {
    background-color: var(--achtergrond-wit);
    border-radius: var(--rand-radius-groot);
    box-shadow: var(--schaduw-groot);
    padding: var(--ruimte-extra-groot);
    width: 100%;
    max-width: 420px;
}

.login-titel {
    text-align: center;
    font-size: 2rem;
    margin-bottom: var(--ruimte-klein);
}

.login-ondertitel {
    text-align: center;
    color: var(--tekst-grijs);
    margin-bottom: var(--ruimte-groot);
}

.login-formulier {
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-medium);
}


/* =============================================================================
   6. HOMEPAGE
   ============================================================================= */

.home-wrapper {
    max-width: var(--max-breedte);
    margin: 0 auto;
    padding: var(--ruimte-groot);
}

.home-foto-wrapper {
    width: 100%;
    border-radius: var(--rand-radius-groot);
    overflow: hidden;
    margin-bottom: var(--ruimte-groot);
    box-shadow: var(--schaduw-medium);
    max-height: 400px;
}

.home-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-welkom {
    text-align: center;
    margin-bottom: var(--ruimte-groot);
}

.home-welkom p {
    color: var(--tekst-grijs);
    font-size: 1.1rem;
}

/* Grid van zes knoppen op de homepage */
.home-knoppen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ruimte-medium);
}

.home-knop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ruimte-groot);
    border-radius: var(--rand-radius-groot);
    text-decoration: none;
    color: var(--tekst-licht);
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 100px;
    box-shadow: var(--schaduw-klein);
}

.home-knop:hover {
    transform: translateY(-2px);
    box-shadow: var(--schaduw-groot);
    text-decoration: none;
    color: var(--tekst-licht);
}

.home-knop-icoon {
    font-size: 2rem;
    margin-bottom: var(--ruimte-klein);
}

.home-knop-tekst {
    font-size: 0.95rem;
    text-align: center;
}

/* Kleuren per knop */
.home-knop-boeken      { background-color: #2c7be5; }
.home-knop-parkeer     { background-color: #6f42c1; }
.home-knop-overzicht   { background-color: #20c997; }
.home-knop-kalender    { background-color: #fd7e14; }
.home-knop-beschikbaar { background-color: #28a745; }
.home-knop-belasting   { background-color: #dc3545; }


/* =============================================================================
   7. FORMULIEREN
   ============================================================================= */

.pagina-wrapper {
    max-width: var(--max-breedte);
    margin: 0 auto;
    padding: var(--ruimte-groot);
}

.formulier {
    background-color: var(--achtergrond-wit);
    border-radius: var(--rand-radius-groot);
    padding: var(--ruimte-groot);
    box-shadow: var(--schaduw-klein);
}

.formulier-groep {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--ruimte-medium);
}

.formulier-groep label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--tekst-donker);
}

.formulier-groep input,
.formulier-groep select,
.formulier-groep textarea {
    padding: 10px var(--ruimte-medium);
    border: 1px solid var(--rand);
    border-radius: var(--rand-radius);
    font-size: 1rem;
    font-family: var(--lettertype);
    color: var(--tekst-donker);
    background-color: var(--achtergrond-wit);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.formulier-groep input:focus,
.formulier-groep select:focus,
.formulier-groep textarea:focus {
    outline: none;
    border-color: var(--kleur-primair);
    box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.15);
}

.formulier-hint {
    font-size: 0.82rem;
    color: var(--tekst-grijs);
    margin-bottom: 0;
}

.formulier-knoppen {
    display: flex;
    gap: var(--ruimte-medium);
    margin-top: var(--ruimte-groot);
}

.formulier-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-medium);
    align-items: flex-end;
    background: none;
    box-shadow: none;
    padding: 0;
}

.optioneel {
    font-weight: normal;
    color: var(--tekst-grijs);
    font-size: 0.85rem;
}

.bevestiging-tabel {
    width: 100%;
    border-collapse: collapse;
    margin: var(--ruimte-medium) 0;
}

.bevestiging-tabel th,
.bevestiging-tabel td {
    padding: var(--ruimte-klein) var(--ruimte-medium);
    text-align: left;
    border-bottom: 1px solid var(--rand);
}

.bevestiging-tabel th {
    font-weight: 600;
    color: var(--tekst-grijs);
    width: 45%;
}


/* =============================================================================
   8. TABELLEN
   ============================================================================= */

.tabel-wrapper {
    overflow-x: auto;   /* Horizontaal scrollen op kleine schermen */
    margin-bottom: var(--ruimte-groot);
    border-radius: var(--rand-radius-groot);
    box-shadow: var(--schaduw-klein);
}

.boekingen-tabel {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--achtergrond-wit);
}

.boekingen-tabel thead {
    background-color: var(--nav-achtergrond);
    color: var(--tekst-licht);
}

.boekingen-tabel thead th {
    padding: var(--ruimte-medium);
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.boekingen-tabel tbody tr {
    border-bottom: 1px solid var(--rand);
    transition: background-color 0.15s;
}

.boekingen-tabel tbody tr:hover {
    background-color: #f1f3f5;
}

.boekingen-tabel tbody td {
    padding: var(--ruimte-medium);
    font-size: 0.95rem;
}

.boekingen-tabel tfoot .totaal-rij {
    background-color: #e9ecef;
    font-size: 1rem;
}

.boekingen-tabel tfoot td {
    padding: var(--ruimte-medium);
}

.actie-knoppen {
    display: flex;
    gap: var(--ruimte-klein);
    flex-wrap: wrap;
}

.leeg-melding {
    text-align: center;
    color: var(--tekst-grijs);
    font-style: italic;
    padding: var(--ruimte-extra-groot);
}


/* =============================================================================
   9. KNOPPEN
   ============================================================================= */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: var(--rand-radius);
    font-size: 0.95rem;
    font-family: var(--lettertype);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.1s;
    white-space: nowrap;
}

.knop:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.knop:active {
    transform: translateY(0);
}

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

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

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

.knop-secundair:hover {
    background-color: var(--kleur-secundair-hover);
    color: var(--tekst-licht);
}

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

.knop-gevaar:hover {
    background-color: var(--kleur-gevaar-hover);
    color: var(--tekst-licht);
}

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

.knop-waarschuwing:hover {
    background-color: var(--kleur-waarschuwing-hover);
    color: var(--tekst-licht);
}

.knop-vol {
    width: 100%;
}

.knop-klein {
    padding: 5px 10px;
    font-size: 0.82rem;
}

.knop-uitgeschakeld {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.icoon-knop {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 2px 4px;
    border-radius: var(--rand-radius);
    transition: background-color 0.2s;
}

.icoon-knop:hover {
    background-color: rgba(0,0,0,0.1);
}

.icoon-knop-klein {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 1px 2px;
    line-height: 1;
}

.pagina-knoppen {
    margin-top: var(--ruimte-groot);
}


/* =============================================================================
   10. KALENDER
   ============================================================================= */

.kalender-navigatie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ruimte-medium);
    gap: var(--ruimte-medium);
}

.kalender-maand-titel {
    margin: 0;
    text-align: center;
    flex: 1;
}

.kalender-dropdown-wrapper {
    margin-bottom: var(--ruimte-groot);
    display: flex;
    align-items: center;
    gap: var(--ruimte-medium);
}

.kalender-dropdown-wrapper select {
    padding: 8px var(--ruimte-medium);
    border: 1px solid var(--rand);
    border-radius: var(--rand-radius);
    font-size: 1rem;
    font-family: var(--lettertype);
}

/* 7-kolommen grid voor de kalender */
.kalender-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: var(--ruimte-groot);
}

.kalender-dag-header {
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    padding: var(--ruimte-klein);
    color: var(--tekst-grijs);
}

.kalender-cel {
    min-height: 80px;
    border-radius: var(--rand-radius);
    padding: var(--ruimte-klein);
    position: relative;
    border: 1px solid var(--rand);
}

.kalender-cel-leeg {
    background-color: transparent;
    border-color: transparent;
}

.kalender-cel-vrij {
    background-color: var(--achtergrond-wit);
}

.kalender-cel-bezet {
    background-color: var(--achtergrond-bezet);
    border-color: #ffc107;
}

.kalender-dag-nummer {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tekst-grijs);
    display: block;
    margin-bottom: 2px;
}

.kalender-boeking-blok {
    display: block;
    border-radius: 3px;
    padding: 2px 4px;
    margin-top: 2px;
    line-height: 1.3;
}

.kalender-boeking-naam {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tekst-donker);
}

.kalender-dag-type {
    font-size: 0.65rem;
    margin-right: 2px;
    opacity: 0.7;
}


/* =============================================================================
   11. POPUPS
   ============================================================================= */

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: var(--ruimte-groot);
}

.popup-kaart {
    background-color: var(--achtergrond-wit);
    border-radius: var(--rand-radius-groot);
    padding: var(--ruimte-groot);
    max-width: 500px;
    width: 100%;
    box-shadow: var(--schaduw-groot);
    max-height: 90vh;
    overflow-y: auto;
}

.popup-kaart h2 {
    margin-bottom: var(--ruimte-medium);
}

.popup-knoppen {
    display: flex;
    gap: var(--ruimte-medium);
    margin-top: var(--ruimte-groot);
    flex-wrap: wrap;
}


/* =============================================================================
   12. PROFIEL EN BEHEER PAGINA'S
   ============================================================================= */

.profiel-sectie,
.beheer-sectie {
    background-color: var(--achtergrond-wit);
    border-radius: var(--rand-radius-groot);
    padding: var(--ruimte-groot);
    margin-bottom: var(--ruimte-groot);
    box-shadow: var(--schaduw-klein);
}

.profiel-lid {
    display: flex;
    align-items: center;
    gap: var(--ruimte-medium);
    padding: var(--ruimte-klein) 0;
    border-bottom: 1px solid var(--rand);
}

.profiel-lid:last-child {
    border-bottom: none;
}

.profiel-lid-naam {
    font-weight: 600;
    flex: 1;
}

.beheer-formulier {
    margin-top: var(--ruimte-groot);
    padding-top: var(--ruimte-groot);
    border-top: 1px solid var(--rand);
}

.admin-badge {
    display: inline-block;
    background-color: var(--kleur-waarschuwing);
    color: var(--tekst-licht);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: var(--ruimte-klein);
    vertical-align: middle;
    text-transform: uppercase;
}


/* =============================================================================
   13. HULPKLASSEN
   ============================================================================= */

.tekst-midden  { text-align: center; }
.tekst-grijs   { color: var(--tekst-grijs); }
.marge-onder   { margin-bottom: var(--ruimte-groot); }


/* =============================================================================
   14. RESPONSIVE AANPASSINGEN VOOR KLEINE SCHERMEN
   ============================================================================= */

@media (max-width: 600px) {

    /* Navigatie aanpassen voor kleine schermen */
    .nav-gebruiker {
        display: none;  /* Verberg gebruikersnaam op kleine schermen */
    }

    .navigatie {
        padding: 0 var(--ruimte-medium);
    }

    /* Login kaart smaller */
    .login-kaart {
        padding: var(--ruimte-groot);
    }

    /* Homepage knoppen: één kolom op hele kleine schermen */
    .home-knoppen {
        grid-template-columns: 1fr;
    }

    /* Formulier knoppen onder elkaar */
    .formulier-knoppen {
        flex-direction: column;
    }

    /* Popup knoppen onder elkaar */
    .popup-knoppen {
        flex-direction: column;
    }

    /* Kalender cellen kleiner */
    .kalender-cel {
        min-height: 50px;
        padding: 2px;
    }

    .kalender-boeking-naam {
        font-size: 0.65rem;
    }

    /* Navigatie knoppen kleiner */
    .nav-knop {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    /* Pagina knoppen onder elkaar */
    .kalender-navigatie {
        flex-wrap: wrap;
    }
}

@media (min-width: 601px) and (max-width: 900px) {

    /* Homepage knoppen: twee kolommen op medium schermen */
    .home-knoppen {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 901px) {

    /* Homepage knoppen: drie kolommen op grote schermen */
    .home-knoppen {
        grid-template-columns: repeat(3, 1fr);
    }
}