:root {
    --accent: #FFB020;
    --papier: #F7F6F3;
    --wit:    #FFFFFF;
    --inkt:   #191A1E;
    --grijs:  #6E6C66;
    --lijn:   #E2E0DA;
    --rood:   #B4402C;
    --groen:  #2E7D5B;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--inkt);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

.wrap {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 22px 72px;
}

a { color: var(--inkt); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Inloggen en instellen ---------- */

.poort {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.kaart {
    width: 100%;
    max-width: 380px;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    padding: 34px 30px;
}

.kaart h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -.01em;
}

.uitleg {
    margin: 8px 0 26px;
    color: var(--grijs);
    font-size: .92rem;
}

/* ---------- Balk ---------- */

.balk {
    background: var(--wit);
    border-bottom: 1px solid var(--lijn);
    margin-bottom: 40px;
}

.balk__rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: .88rem;
}

.balk__terug { text-decoration: none; color: var(--grijs); }
.balk__terug:hover { color: var(--inkt); }

.balk__wie { color: var(--grijs); display: flex; gap: 16px; align-items: center; }
.balk__wie a { color: var(--rood); text-decoration: none; }

/* ---------- Koppen ---------- */

.kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.paginatitel {
    margin: 0;
    font-size: 1.9rem;
    letter-spacing: -.02em;
}

.blokkop {
    margin: 40px 0 14px;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--grijs);
    font-weight: 600;
}

.leeg { color: var(--grijs); }

/* ---------- Meldingen ---------- */

.melding {
    margin: 0 0 26px;
    padding: 12px 16px;
    border-left: 3px solid var(--groen);
    background: var(--wit);
    border-radius: 0 6px 6px 0;
    font-size: .92rem;
}
.melding--fout { border-left-color: var(--rood); }

.fout {
    margin: 0 0 18px;
    padding: 10px 14px;
    background: #FBEDEA;
    border-radius: 6px;
    color: var(--rood);
    font-size: .9rem;
}

/* ---------- Formulieren ---------- */

.paneel {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 12px;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 22px;
}

.paneel .vol { grid-column: 1 / -1; }

label {
    display: block;
    font-size: .84rem;
    font-weight: 500;
    color: var(--grijs);
    margin-bottom: 16px;
}

.paneel label { margin-bottom: 0; }

.hint { font-weight: 400; color: #A3A099; }

input[type=text],
input[type=url],
input[type=date],
input[type=time],
input[type=password],
textarea {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 11px 13px;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    background: var(--wit);
    color: var(--inkt);
    font: inherit;
}

textarea { resize: vertical; }

input:focus, textarea:focus {
    border-color: var(--inkt);
    outline: none;
}

.keuze {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--inkt);
    font-weight: 400;
}
.keuze input { width: 18px; height: 18px; accent-color: var(--inkt); }

/* ---------- Knoppen ---------- */

button,
.knop {
    display: inline-block;
    padding: 11px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--inkt);
    color: var(--papier);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

button:hover, .knop:hover { background: #000; }

.kaart button { width: 100%; margin-top: 8px; }

.knoppen { display: flex; align-items: center; gap: 16px; }

.knop-stil {
    color: var(--grijs);
    text-decoration: none;
    font-size: .9rem;
}
.knop-stil:hover { color: var(--inkt); }

.knop-link {
    padding: 0;
    background: none;
    color: var(--rood);
    font-size: .86rem;
    font-weight: 400;
    text-decoration: underline;
}
.knop-link:hover { background: none; }

/* ---------- Tabel ---------- */

.tabel {
    width: 100%;
    border-collapse: collapse;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    overflow: hidden;
}

.tabel th {
    text-align: left;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grijs);
    font-weight: 600;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lijn);
}

.tabel td {
    padding: 15px 16px;
    border-bottom: 1px solid var(--lijn);
    vertical-align: top;
}

.tabel tr:last-child td { border-bottom: 0; }

.cel-datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cel-datum .klein { display: block; color: var(--grijs); font-size: .82rem; }

.cel-acties {
    text-align: right;
    white-space: nowrap;
    font-size: .86rem;
}
.cel-acties a { color: var(--grijs); }
.cel-acties form { display: inline; margin-left: 14px; }

.vlag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    background: #EEECE6;
    color: var(--grijs);
    font-size: .74rem;
}
.vlag--aan { background: #E4F1EA; color: var(--groen); }

/* ---------- Klein scherm ---------- */

@media (max-width: 700px) {
    .paneel { grid-template-columns: 1fr; }
    .tabel thead { display: none; }
    .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
    .tabel tr { border-bottom: 1px solid var(--lijn); padding: 6px 0; }
    .tabel td { border: 0; padding: 5px 16px; }
    .cel-acties { text-align: left; padding-top: 10px; padding-bottom: 14px; }
    .cel-acties form { margin-left: 18px; }
}