/* ============================================================
   style.css — Opmaak voor de Grappendatabase
   Simpele, nette stijl zonder externe frameworks.
   ============================================================ */

/* --- Reset: verwijder standaard marges en borders --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- Basisstijl voor de gehele pagina --- */
body {
    font-family: Arial, sans-serif;   /* Leesbaar standaardlettertype */
    background-color: #f0f4f8;        /* Lichtblauwe achtergrond */
    color: #333;
    min-height: 100vh;
}

/* ============================================================
   HEADER — Bovenste balk met titel en knop
   ============================================================ */
header {
    background-color: #2c7be5;        /* Blauw */
    color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;   /* Titel links, knop rechts */
    flex-wrap: wrap;
    gap: 10px;
}

header h1 {
    font-size: 1.6rem;
}

/* ============================================================
   KNOPPEN (links die eruitzien als knoppen)
   ============================================================ */
.knop {
    background-color: white;
    color: #2c7be5;
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border: 2px solid white;
    transition: background-color 0.2s, color 0.2s;
}

.knop:hover {
    background-color: #2c7be5;
    color: white;
}

/* Terugknop heeft iets andere stijl */
.knop-terug {
    background-color: rgba(255,255,255,0.2);
    color: white;
    border-color: rgba(255,255,255,0.5);
}

.knop-terug:hover {
    background-color: white;
    color: #2c7be5;
}

/* Verzenden-knop in het formulier */
button.knop {
    cursor: pointer;
    font-size: 1rem;
    padding: 10px 24px;
    margin-top: 8px;
    background-color: #2c7be5;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.2s;
}

button.knop:hover {
    background-color: #1a5bb5;
}

/* ============================================================
   FILTERS — Rij met categoriefilter-knoppen
   ============================================================ */
.filters {
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;        /* Knoppen lopen door naar volgende regel als nodig */
    gap: 8px;
    background-color: #dce8fb;
    border-bottom: 1px solid #b8d0f0;
}

/* Elke filterknop */
.filter-knop {
    padding: 6px 14px;
    border-radius: 20px;   /* Ronde "pill" vorm */
    background-color: white;
    color: #2c7be5;
    text-decoration: none;
    border: 2px solid #2c7be5;
    font-size: 0.9rem;
    transition: background-color 0.2s, color 0.2s;
}

.filter-knop:hover {
    background-color: #2c7be5;
    color: white;
}

/* Actieve filter: volledig gevuld */
.filter-knop.actief {
    background-color: #2c7be5;
    color: white;
}

/* ============================================================
   MAIN — Het gebied met grappen of het formulier
   ============================================================ */
main {
    max-width: 800px;
    margin: 24px auto;
    padding: 0 16px;
}

/* Bericht als er geen grappen zijn */
.leeg {
    text-align: center;
    color: #777;
    margin-top: 40px;
    font-size: 1.1rem;
}
.leeg a {
    color: #2c7be5;
}

/* ============================================================
   GRAP-KAART — Elke grap in een witte kaart
   ============================================================ */
.grap-kaart {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);  /* Subtiele schaduw */
    border-left: 4px solid #2c7be5;           /* Blauwe streep links */
}

/* De tekst van de grap */
.grap-tekst {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

/* Onderste balk: labels + datum */
.grap-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Ruimte voor de categorielabels */
.categorieen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Eén categorielabel (blauw bolletje) */
.label {
    background-color: #dce8fb;
    color: #2c7be5;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Datum rechtsonder */
.datum {
    color: #999;
    font-size: 0.85rem;
}

/* ============================================================
   FORMULIER — Pagina om een grap toe te voegen
   ============================================================ */
.formulier-wrapper {
    background-color: white;
    border-radius: 10px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.formulier-wrapper h2 {
    margin-bottom: 20px;
    color: #2c7be5;
    font-size: 1.4rem;
}

/* Labels boven invoervelden */
.formulier-wrapper label,
form > label {
    display: block;
    font-weight: bold;
    margin-top: 16px;
    margin-bottom: 6px;
    color: #555;
}

/* Tekstvak en tekstveld */
textarea,
input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 2px solid #d0d8e8;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: Arial, sans-serif;
    transition: border-color 0.2s;
}

/* Kleur rand bij focus (aanklikken) */
textarea:focus,
input[type="text"]:focus {
    outline: none;
    border-color: #2c7be5;
}

/* Groep met checkboxes netjes naast elkaar */
.checkbox-groep {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

/* Eén checkbox + label samen */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background-color: #f0f4f8;
    border: 2px solid #d0d8e8;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.2s, background-color 0.2s;
}

.checkbox-label:hover {
    border-color: #2c7be5;
    background-color: #dce8fb;
}

/* Als de checkbox aangevinkt is, toon dat aan de label */
.checkbox-label:has(input:checked) {
    background-color: #2c7be5;
    color: white;
    border-color: #2c7be5;
}

/* Foutmelding (rood vak) */
.foutmelding {
    background-color: #fde8e8;
    color: #c0392b;
    border: 1px solid #f5b7b1;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 10px;
}

/* Succesmelding (groen vak) */
.melding-ok {
    background-color: #e8f8e8;
    color: #27ae60;
    border: 1px solid #a9dfbf;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-weight: bold;
}

/* ============================================================
   ADMIN — Stijlen voor het beheerderspaneel
   ============================================================ */

/* Groene knop (goedkeuren) */
.knop-groen {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}
.knop-groen:hover { background-color: #1e8449; }

/* Rode knop (verwijderen) */
.knop-rood {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}
.knop-rood:hover { background-color: #c0392b; }

/* Kleine knop (bijv. naast een categorie) */
.knop-klein {
    padding: 4px 10px;
    font-size: 0.85rem;
}

/* Sectie in het beheerderspaneel */
.admin-sectie {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.admin-sectie h2 {
    font-size: 1.15rem;
    color: #333;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Nummerbadge naast een koptekst */
.badge {
    background-color: #e74c3c;
    color: white;
    border-radius: 12px;
    padding: 2px 9px;
    font-size: 0.8rem;
}
.badge-groen {
    background-color: #27ae60;
}

/* Knoppen onderaan een grap-kaart in het beheerderspaneel */
.admin-knoppen {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Eén rij in de categorielijst */
.categorie-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #f0f4f8;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

/* Formulier met invoerveld en knop naast elkaar */
.inline-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.inline-form input[type="text"] {
    flex: 1;
    min-width: 200px;
}