/* Huisstijl AP Hogeschool (zie design.md in de repo). Kleuren en lettertypes van ap.be. */
:root {
    /* De twee tinten rood van het logo */
    --ap-rood: #E60005;
    --ap-rood-donker: #B1080F;
    --inkt: #232226;
    --grijs: #68676C;
    --grijs-donker: #4A494E;
    --grijs-licht: #9A999E;
    --lijn: #E1E1E1;
    --lijn-donker: #CFCFD1;
    --vlak: #F1F1F1;
    --vlak-licht: #F7F7F7;

    /* Statussen (in orde, let op, fout, info), uit de tinten van het AP-palet die de modules al gebruiken: groen van
       de stageopdrachten, oranje van het bedrijfsportaal, het donkere AP-rood, blauw van de opvolging. Tekst op de
       zachte achtergrond haalt WCAG AA. Geen andere groenen, roden of gelen gebruiken. */
    --ok: #3F6B12;
    --ok-donker: #2E5009;
    --ok-lijn: #6AA22C;
    --ok-zacht: #EFF6E7;
    --let-op: #8F5600;
    --let-op-lijn: #F59C00;
    --let-op-zacht: #FEF3E0;
    --fout: #B1080F;
    --fout-zacht: #FDECEC;
    --info: #005078;
    --info-zacht: #E5EEF2;

    /* Letterschaal: zes stappen, niet meer. Klein (badges, hulptekst), secundair (tabellen, uitleg), tekst, h3, h2 en
       h1 (League Gothic). */
    --fs-klein: 0.8rem;
    --fs-secundair: 0.9rem;
    --fs-tekst: 1rem;
    --fs-h3: 1.2rem;
    --fs-h2: 1.5rem;
    --fs-h1: 2.6rem;

    --font-main: 'Figtree', Helvetica, Arial, sans-serif;
    --font-titel: 'League Gothic', 'Arial Narrow', Helvetica, sans-serif;
    /* Twee hoeken: klein voor knoppen en velden, groot voor kaarten, tabellen en tegels */
    --radius: 4px;
    --radius-kaart: 8px;
    /* De grond van elke pagina: witte kaarten op lichtgrijs, zodat de blokken loskomen van de achtergrond */
    --grond: #F1F1F1;

    /* Elke module heeft een eigen kleur uit het palet van AP: een vlak, een tweede tint (voor het diagonale vlak),
       een donkere variant die leesbaar is als tekst op wit, en een zachte achtergrond. Standaard: AP-rood. */
    --module: var(--ap-rood);
    --module-tint: var(--ap-rood-donker);
    --module-tekst: var(--ap-rood-donker);
    --module-zacht: #FDECEC;

    /* Oude namen, nog in gebruik in de rest van dit bestand */
    --color-primary: var(--ap-rood);
    --color-secondary: var(--ap-rood-donker);
    --primary-color: var(--ap-rood);
    --bg-color: var(--grond);
    --text-color: var(--inkt);
    --heading-color: var(--inkt);
    --card-bg: #fff;
    --border-color: var(--lijn);
    --shadow: none;
}

.m-gids { --module: #009EAF; --module-tint: #006570; --module-tekst: #006570; --module-zacht: #E5F5F7; }
.m-opvolging { --module: #005078; --module-tint: #03354E; --module-tekst: #005078; --module-zacht: #E5EEF2; }
.m-beheer { --module: #85746E; --module-tint: #6C5C56; --module-tekst: #6C5C56; --module-zacht: #F1EEED; }
.m-bedrijf { --module: #F59C00; --module-tint: #CB8305; --module-tekst: #8F5600; --module-zacht: #FEF3E0; }
.m-student { --module: #AF1774; --module-tint: #910E5E; --module-tekst: #910E5E; --module-zacht: #F8E8F1; }
.m-opdrachten { --module: #6AA22C; --module-tint: #4E7D1C; --module-tekst: #3F6B12; --module-zacht: #EFF6E7; }
.m-statistieken { --module: #F59C00; --module-tint: #CB8305; --module-tekst: #8F5600; --module-zacht: #FEF3E0; }
.m-event { --module: #4B3F8F; --module-tint: #372D6B; --module-tekst: #4B3F8F; --module-zacht: #EDEBF5; }
/* Testomgeving: het oranje van de balk "testomgeving", donker genoeg als tekst op wit */
.m-test { --module: #F59C00; --module-tint: #CB8305; --module-tekst: #8F5600; --module-zacht: #FEF3E0; }

/* Het hidden-attribuut wint altijd, ook van display: flex of grid op dezelfde klasse (bv. .rij). */
[hidden] { display: none !important; }

/* Het logo: altijd op wit, met rondom minstens de basis van één driehoekje witruimte (de helft van de hoogte). */
.brand-logo {
    height: 40px;
    width: auto;
    display: block;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.brand-link {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4 {
    color: var(--heading-color);
}

h1 {
    font-family: var(--font-titel);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--fs-h1);
    line-height: 1;
}

h2 { font-weight: 700; letter-spacing: -0.01em; font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; }

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

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

.container {
    max-width: 1440px; /* was 1200px; Jeroen vond dat te smal voor het overzicht van de opvolging (2026-09-10) */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Kop: wit (voor het logo), met onderaan een streep in de kleur van de module */
header {
    background-color: #fff;
    border-bottom: 6px solid var(--module);
    padding: 1.25rem 0;
    margin-bottom: 2rem;
}

header h1 {
    color: var(--heading-color);
    font-size: 2.4rem;
}

header .brand-block h1 + .user-info { margin-top: 0.35rem; }

.search-bar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Velden en knoppen nemen het lettertype van de pagina over (browsers zetten daar standaard een eigen lettertype) */
input, select, textarea, button { font-family: inherit; }

input[type="text"] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: var(--fs-tekst);
    flex: 1;
    min-width: 200px;
}

.company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
    padding-bottom: 2rem;
}

.company-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-kaart);
    padding: 1.5rem;
    cursor: pointer;
    transition: border-color 0.15s;
}

/* Geen schaduw of verschuiving (design.md): hover toont enkel de rand in de modulekleur. */
.company-card:hover {
    border-color: var(--module);
}

.company-card {
    position: relative;
    /* For absolute checkbox positioning */
}

/* De hele kaart is klikbaar via de link; het vinkje ligt erboven. */
.company-link { color: inherit; text-decoration: none; display: block; }
.company-link::after { content: ""; position: absolute; inset: 0; }

.company-select-checkbox {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    z-index: 10;
    cursor: pointer;
}

.company-card h2 {
    margin: 0 0 0.5rem 0;
    font-size: var(--fs-h3);
    color: var(--inkt);
    padding-right: 2rem;
    /* Make space for checkbox */
}

.company-meta {
    font-size: var(--fs-secundair);
    color: var(--grijs);
    margin-bottom: 0.5rem;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: var(--radius-kaart);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--lijn-donker);
}

.close-button {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--grijs-licht);
}

.close-button:hover {
    color: var(--text-color);
}

.contact-item {
    background-color: var(--vlak);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}

.contact-item h4 {
    margin: 0 0 0.25rem 0;
}

.website-link {
    color: var(--module-tekst);
    text-decoration: none;
}

.website-link:hover {
    text-decoration: underline;
}

.detail-header {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

/* Tag Filters */
.tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 0;
    width: 100%;
}

.tag-label {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid var(--lijn);
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: var(--fs-secundair);
    user-select: none;
    transition: background 0.2s;
    color: var(--text-color);
}

.tag-label:hover {
    border-color: var(--lijn-donker);
}

.tag-label input[type="checkbox"] {
    margin: 0;
    accent-color: var(--module);
}

/* Gekozen filter: zachte modulekleur met rand, zoals het actieve tabblad. Rood vlak blijft voor de primaire actie. */
.tag-label.checked {
    background: var(--module-zacht);
    color: var(--module-tekst);
    box-shadow: inset 0 0 0 1px var(--module);
    font-weight: 600;
}

/* Tagfilters van de gids in groepen (opleiding, soort stage, overige) */
#tag-filters { flex-direction: column; gap: 0.5rem; }
.tag-groep { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tag-groep-naam { font-size: var(--fs-secundair); font-weight: 600; color: var(--grijs); min-width: 7.5rem; }
/* Richtingen in een formulier: één groep (opleiding) per lijn */
.tag-filters.onder-elkaar { flex-direction: column; align-items: flex-start; }
/* Opleidingen onder elkaar, met hun richtingen ernaast (profiel van het bedrijf, registreren) */
.opleiding-keuze { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1rem; align-items: start; margin-top: 0.5rem; }
.opleiding-rij { display: contents; }
.opleiding-richtingen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Een gekozen richting in een andere kleur dan de gekozen opleiding (Jeroen, 2026-10-25) */
.tag-label.richting input[type="checkbox"] { accent-color: var(--info); }
.tag-label.richting.checked { background: var(--info-zacht); color: var(--info); box-shadow: inset 0 0 0 1px var(--info); }
@media (max-width: 600px) {
    .opleiding-keuze { grid-template-columns: 1fr; }
    .opleiding-richtingen { padding-left: 1.25rem; margin-bottom: 0.4rem; }
}

/* Vinkje als filterpil (bv. "Enkel mijn studenten" in de opvolging), zelfde look als de tagfilters */
.filter-vinkje { display: inline-flex; align-items: center; gap: 0.4rem; background: #fff; border: 1px solid var(--border-color); padding: 0.4rem 0.85rem; border-radius: 999px; cursor: pointer; font-size: var(--fs-secundair); font-weight: 500; user-select: none; color: var(--heading-color); transition: border-color 0.2s; }
.filter-vinkje:hover { border-color: var(--lijn-donker); }
.filter-vinkje input[type="checkbox"] { margin: 0; accent-color: var(--module); }
.filter-vinkje.checked { background: var(--module-zacht); border-color: var(--module); color: var(--module-tekst); font-weight: 600; }

/* Company Tags */
.company-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.company-tag {
    background: var(--vlak);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--fs-klein);
    color: var(--grijs-donker);
}

.company-card .company-tag {
    font-size: var(--fs-klein);
}

/* Header adjustments */
.header-top:last-child { margin-bottom: 0; }

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-actions {
    display: flex;
    gap: 1rem;
}

header h1 {
    margin: 0;
}

/* Feedback Form Styles */
.modal-footer {
    border-top: 1px solid var(--border-color);
    margin-top: 1.5rem;
    padding-top: 1rem;
    text-align: right;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group select,
.form-group textarea,
.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--fs-tekst);
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
}

.btn-primary,
.btn-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-size: var(--fs-tekst);
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-secondary);
}

.btn-secondary {
    background-color: #fff;
    border-color: var(--lijn-donker);
    color: var(--text-color);
}

.btn-secondary:hover {
    border-color: var(--inkt);
}

.btn-text {
    background: none;
    border: none;
    color: var(--grijs);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--fs-secundair);
    padding: 0.5rem;
}

.btn-text:hover {
    color: var(--text-color);
}

/* ---------- Meldingen en gebruiker (gids) ---------- */
.user-info { font-size: var(--fs-secundair); color: var(--grijs); margin-top: 0.25rem; }
.user-info a { color: var(--module-tekst); text-decoration: none; }
.melding { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 1rem); background: var(--inkt); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius); opacity: 0; transition: opacity .3s, transform .3s; z-index: 2000; }
.melding.zichtbaar { opacity: 1; transform: translate(-50%, 0); }
.melding-fout { background: var(--fout); }
.contact-bounced { opacity: 0.6; }
.contact-item h4 small { font-weight: 400; color: var(--grijs); }
.badge { display: inline-block; font-size: var(--fs-klein); padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--lijn); color: var(--grijs-donker); vertical-align: middle; }
.badge-rood { background: var(--fout-zacht); color: var(--fout); }
.badge-groen { background: var(--ok-zacht); color: var(--ok); }
.badge-insert { background: var(--ok-zacht); color: var(--ok); }
.badge-update { background: var(--info-zacht); color: var(--info); }
.badge-delete { background: var(--fout-zacht); color: var(--fout); }

/* ---------- Beheer ---------- */
body.admin { background: var(--bg-color); }
/* Alle modules delen de header van de gids (logo, titel, gebruiker). De tabbladen staan in een witte strook onder de
   streep van de kop (.sub-nav), niet meer naast de titel: zo hebben ze de volle breedte. */
header:has(+ .sub-nav) { margin-bottom: 0; }
.sub-nav { background: #fff; border-bottom: 1px solid var(--lijn); margin-bottom: 2rem; }
.sub-nav:has(+ .periode-balk) { margin-bottom: 0; }
.admin-nav { display: flex; align-items: stretch; gap: 0 0.25rem; flex-wrap: wrap; }
/* Tabbladen: het actieve in inkt met een streep in de kleur van de module */
.admin-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; color: var(--grijs-donker); text-decoration: none; font-size: var(--fs-tekst); font-weight: 500; }
.admin-nav a:hover { color: var(--inkt); box-shadow: inset 0 -3px 0 var(--lijn); }
.admin-nav a.active { color: var(--inkt); font-weight: 700; box-shadow: inset 0 -3px 0 var(--module); }
.spacer { flex: 1; }
/* Paginakop (design.md): links de titel met de scope als pil en één zin over wat je hier doet, rechts de hoofdactie. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head h1, .page-head h2 { margin: 0; }
.kop-tekst { flex: 999 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.paginazin { margin: 0; max-width: 70ch; color: var(--grijs-donker); }
.paginazin a { color: var(--module-tekst); }
.titel .subtitel { display: inline-block; background: #fff; border: 1px solid var(--lijn); border-radius: 999px; padding: 0.15rem 0.75rem; font-size: var(--fs-secundair); font-weight: 600; color: var(--grijs-donker); white-space: nowrap; }

/* Iconen (it.h.icoon): lijnen in de tekstkleur */
.icoon { width: 1.25rem; height: 1.25rem; flex: none; }

/* Tellers per stap (deel/tellers.eta): elke teller opent de lijst met precies die rijen. Het icoon draagt de status,
   het getal staat in League Gothic. Gekozen = zachte modulekleur; wat bij jou ligt, krijgt een rode rand en pil. */
.stap-tellers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stap-teller { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius-kaart); color: var(--inkt); text-decoration: none; transition: border-color 0.15s; }
.stap-teller:hover { border-color: var(--module); }
.stap-teller.bij-jou { border-color: var(--ap-rood); }
.stap-teller.gekozen { background: var(--module-zacht); border-color: var(--module); box-shadow: inset 0 0 0 1px var(--module); }
.stap-icoon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.stap-tekst { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.stap-getal { font-family: var(--font-titel); font-size: var(--fs-h1); line-height: 1; font-variant-numeric: tabular-nums; }
.stap-label { font-size: var(--fs-secundair); font-weight: 600; color: var(--grijs-donker); }
.bij-jou-pil { align-self: flex-start; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--ap-rood); color: #fff; font-size: var(--fs-klein); font-weight: 700; white-space: nowrap; }
.toon-neutraal { background: var(--vlak); color: var(--grijs-donker); }
.toon-info { background: var(--info-zacht); color: var(--info); }
.toon-info-vol { background: var(--info); color: #fff; }
.toon-let-op { background: var(--let-op-zacht); color: var(--let-op); }
.toon-ok { background: var(--ok-zacht); color: var(--ok); }
.toon-ok-vol { background: var(--ok); color: #fff; }
.toon-fout { background: var(--fout-zacht); color: var(--fout); }

/* Wat er moet gebeuren (deel/tedoen.eta): per regel het aantal, de reden en een link; de kleur volgt de betekenis. */
.te-doen { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.te-doen h2 { margin: 0 0 0.75rem; font-size: var(--fs-h3); }
.te-doen-regels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); gap: 0.75rem; }
.te-doen-regel { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1rem; border-radius: var(--radius); }
.te-doen-regel.los { margin-bottom: 1.5rem; }
.te-doen-regel p { margin: 0; }
.te-doen-regel .icoon { margin-top: 0.15rem; }
.te-doen-regel a { color: var(--inkt); font-weight: 600; }
.te-doen-regel.info { background: var(--info-zacht); }
.te-doen-regel.info .icoon { color: var(--info); }
.te-doen-regel.let-op { background: var(--let-op-zacht); }
.te-doen-regel.let-op .icoon { color: var(--let-op); }
.te-doen-klaar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-kaart); background: var(--ok-zacht); color: var(--ok); font-weight: 600; }
.titel { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.titel h1, .titel h2 { margin: 0; }
/* Kruimelpad boven de titel van een subpagina, in plaats van een knop "Terug naar …" (2026-10-26). */
/* Terug: pijlknop vóór de titel, op dezelfde lijn (Jeroen, 2026-10-26, in plaats van een kruimelpad boven de titel).
   Even hoog als de hoofdletters van de titel; bij hover in de modulekleur, zoals een gekozen filter. */
.terug { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); color: var(--inkt); text-decoration: none; }
.terug:hover { background: var(--module-zacht); border-color: var(--module); color: var(--module-tekst); }
.opdracht-kop .titel { margin: 0.35rem 0; }
.opdracht-kop .titel h1 { margin: 0; }
/* De gids: zoeken en filter in een kaart onder de registerbalk (de opleidingen onder elkaar met hun richtingen
   ernaast, de tags apart eronder), daaronder het aantal en de export, dan de bedrijven. */
.gids-filters { display: grid; gap: 1rem; }
.gids-filter { margin-top: 0; }
.gids-filter .opleiding-rij > .tag-label { justify-self: start; }
.gids-filter .tag-groep-naam { min-width: 0; align-self: center; }
.gids-filter .gids-tags > * { margin-top: 0.35rem; }
.gids-resultaat { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gids-resultaat .inline { margin: 0; }
/* De opleiding met een rand, de richting blauw: in de gids liggen de modulekleur (petrol) en --info te dicht bij elkaar. */
.company-tag.opleiding { background: #fff; box-shadow: inset 0 0 0 1px var(--lijn); color: var(--inkt); font-weight: 600; }
.company-tag.richting { background: var(--info-zacht); color: var(--info); }
/* Keuze van het register naast de titel in het beheer. */
.register-keuze { display: inline-flex; gap: 0.5rem; margin: 0; }
.register-keuze select { width: auto; min-width: 6rem; font-weight: 600; }
/* Een link naar een andere pagina tussen de knoppen (bv. de historiek): als link, niet als knop. */
a.link { text-decoration: underline; color: var(--inkt); }
.kaart .titel { margin-bottom: 0.75rem; }
.teller { display: inline-block; background: #fff; border: 1px solid var(--lijn); color: var(--heading-color); font-weight: 600; font-size: var(--fs-secundair); line-height: 1.4; padding: 0.2rem 0.7rem; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.subtitel { color: var(--grijs); font-size: var(--fs-tekst); }
.actions { display: flex; gap: 0.5rem; align-items: center; }
.filter-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-bar input[type="text"] { flex: 1; min-width: 200px; }
.filter-bar select, .filter-bar input[type="number"], .filter-bar input[type="date"] { padding: 0.65rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: var(--fs-tekst); font-family: inherit; background: #fff; }
/* Zoekveld, keuzelijsten en knop in de filterbalk even hoog, los van hoe de browser een select tekent. */
.filter-bar input[type="text"], .filter-bar input[type="number"], .filter-bar input[type="date"], .filter-bar select, .filter-bar button { box-sizing: border-box; height: 2.75rem; padding-top: 0; padding-bottom: 0; }

/* Keuzelijsten: overal dezelfde stijl als de tekstvelden, met een eigen pijltje in plaats van dat van de browser.
   Staat na de regels van de filterbalk en .form-input, die met `background` en `padding` anders het pijltje wissen. */
select {
    -webkit-appearance: none; appearance: none;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border: 1px solid var(--border-color); border-radius: var(--radius);
    color: var(--inkt); font-family: inherit; font-size: var(--fs-tekst);
    cursor: pointer; max-width: 100%;
}
select, .filter-bar select, .form-group select, select.form-input {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2368676C' stroke-width='1.75'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px 8px;
    padding-right: 2.25rem;
}
select:hover { border-color: var(--lijn-donker); }
select:focus { border-color: var(--module); }
select:disabled { background-color: var(--vlak-licht); color: var(--grijs); cursor: default; }
/* In een tabel of naast kleine knoppen: even hoog als .klein */
select.klein, .tabel select { padding-top: 0.35rem; padding-bottom: 0.35rem; font-size: var(--fs-secundair); }
.form-input.smal { width: 8rem; flex: none; }
.rij .form-input.vast { width: auto; flex: none; }
.check { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.flash-ok { background: var(--ok-zacht); color: var(--ok); }
.flash-fout { background: var(--fout-zacht); color: var(--fout); }
.tabel { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-kaart); overflow: hidden; }
.tabel th, .tabel td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.tabel th { background: var(--vlak-licht); font-weight: 600; font-size: var(--fs-secundair); color: var(--grijs-donker); }
.tabel tr:last-child td { border-bottom: none; }
.tabel .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabel input.getal-klein { width: 5rem; text-align: right; }
.tabel select { max-width: 100%; }
.tabel .nowrap { white-space: nowrap; }
.tabel tr.inactief td { color: var(--grijs-licht); }
.tabel a { color: var(--module-tekst); text-decoration: none; font-weight: 600; }
.tabel a:hover { text-decoration: underline; }
/* Sorteerbare kolomkoppen en paginering (opvolging) */
/* Sorteerbare kolommen in de browser (public/sorteer.js, table.sorteerbaar): de kop is een knop. Een vaag pijltje toont
   dat de kolom sorteerbaar is, de gesorteerde kolom krijgt de pijl in de modulekleur. */
.tabel th .sorteer-knop {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit; text-align: inherit; white-space: nowrap;
}
.tabel th .sorteer-knop::after { content: '↕'; font-size: var(--fs-klein); color: var(--grijs-licht); }
.tabel th .sorteer-knop:hover { color: var(--inkt); }
.tabel th[aria-sort] .sorteer-knop { color: var(--module-tekst); }
.tabel th[aria-sort="ascending"] .sorteer-knop::after { content: '▲'; color: var(--module); }
.tabel th[aria-sort="descending"] .sorteer-knop::after { content: '▼'; color: var(--module); }
/* Acties per rij: altijd de laatste kolom, rechts uitgelijnd, kleine knoppen naast elkaar (design.md). */
.tabel .acties { text-align: right; white-space: nowrap; width: 1%; }
.tabel td.acties > * { vertical-align: middle; }
.tabel td.acties form { display: inline; margin: 0; }
.tabel td.acties > * + * { margin-left: 0.35rem; }
/* Invoervelden in een tabel (bv. de checklist) even compact als de kleine knoppen ernaast */
.tabel .form-input { padding: 0.35rem 0.6rem; font-size: var(--fs-secundair); }
.tabel select.form-input { padding-right: 2.25rem; }
/* Keuzelijst in een tabel zo breed als haar langste keuze. */
.tabel select.form-input.passend { width: auto; max-width: 100%; }
.tabel td.acties.onder-elkaar form { display: block; }
.tabel td.acties.onder-elkaar > * + * { margin-left: 0; margin-top: 0.25rem; }
.btn-text.gevaar, .tabel .btn-text.gevaar { color: var(--fout); }
.btn-text.gevaar:hover { color: var(--fout); text-decoration: underline; }
.btn-secondary.gevaar { color: var(--fout); border-color: var(--fout); }
.tabel th a.sorteer { color: inherit; white-space: nowrap; }
.tabel th a.sorteer.actief { color: var(--module-tekst); }
.paginering { display: flex; align-items: center; justify-content: center; gap: 0.25rem; flex-wrap: wrap; margin: 1rem 0; font-size: var(--fs-tekst); }
.paginering a, .paginering span { min-width: 2.2rem; padding: 0.4rem 0.6rem; border-radius: var(--radius); text-align: center; box-sizing: border-box; }
.paginering a { color: var(--module-tekst); text-decoration: none; }
.paginering a:hover { background: var(--vlak); }
.paginering .huidig { background: var(--module-tekst); color: #fff; font-weight: 600; }
.paginering .uit { color: var(--grijs-licht); }
/* Enkel op smartphone zichtbaar (tegenhanger van .enkel-breed) */
.enkel-smal { display: none; }
.leeg { color: var(--grijs-licht); text-align: center; padding: 1.5rem; }
.tag-zwart { background: var(--inkt); color: #fff; }
.kaart { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-kaart); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.kaart h2 { margin-top: 0; font-size: var(--fs-h3); }
.kaart h3 { font-size: var(--fs-tekst); margin: 1.5rem 0 0.5rem; }
.kaart-let-op { border-color: var(--let-op-lijn); background: var(--let-op-zacht); }
.kaart-ok { border-color: var(--ok-lijn); background: var(--ok-zacht); }
.kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1.25rem; align-items: start; }
.rij { display: flex; gap: 0.75rem; }
.rij .form-group, .rij > .form-input { flex: 1; min-width: 0; }
.rij .form-group.groei, .rij .groei { flex: 2; }
.rij > .form-input.smal, .rij > .form-input.vast { flex: none; }
.rij.knoppen { align-items: center; margin-top: 0.4rem; }
.rij.knoppen > .eerst { order: -1; }
.rij.knoppen > .laatst { order: 1; }
.rij .form-group.jury-vragen { flex: none; width: 5.5rem; }
/* Jurylid met minder vragen dan verwacht (VRAGEN_PER_JURYLID): in het rood, in het formulier, de beoordeling en het overzicht. */
.te-weinig, .teller.te-weinig { color: var(--ap-rood-donker); font-weight: 600; }
.jury-cel { font-size: var(--fs-secundair); }
.jury-telling { display: flex; justify-content: space-between; gap: 0.5rem; white-space: nowrap; }
.jury-telling .jury-naam { overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.jury-telling .jury-aantal { font-variant-numeric: tabular-nums; font-weight: 600; }
.jury-telling.te-weinig .jury-naam { font-weight: 400; }
.jury-vragen .uitleg { display: block; padding-top: 0.75rem; white-space: nowrap; }
.contact-form { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.contact-form.gebounced { background: var(--let-op-zacht); border-color: var(--let-op-lijn); }
.contact-form .form-input { padding: 0.5rem 0.65rem; font-size: var(--fs-tekst); }
.klein { padding: 0.4rem 0.8rem; font-size: var(--fs-secundair); }
.inline { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
/* Blok onderaan een pagina met een gevaarlijke actie; niet voor een knop met de klasse gevaar (in tabellen). */
.gevaar:not(button):not(a) { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.gevaar .btn-text { color: var(--fout); }
.voorstel { padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); }
.voorstel:last-child { border-bottom: none; }
.voorstel-kop { color: var(--grijs-donker); font-size: var(--fs-secundair); margin-bottom: 0.4rem; }
.voorstel pre { white-space: pre-wrap; font-family: inherit; background: var(--vlak-licht); padding: 0.6rem 0.75rem; border-radius: var(--radius); margin: 0.4rem 0; }
.kaart.status-verwerkt, .kaart.status-afgewezen { opacity: 0.7; }
.uitleg { color: var(--grijs); font-size: var(--fs-secundair); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-secundair); }
.mono-klein { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-klein); color: var(--grijs-donker); }
.diff { font-size: var(--fs-secundair); overflow-wrap: anywhere; }
.diff .veld { font-weight: 600; color: var(--grijs-donker); }
.diff del { color: var(--fout); background: var(--fout-zacht); text-decoration: line-through; padding: 0 0.2rem; }
.diff ins { color: var(--ok); background: var(--ok-zacht); text-decoration: none; padding: 0 0.2rem; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Bewerken in de gids ---------- */
.user-info .rol { text-transform: capitalize; }
.marge-onder { margin-bottom: 1rem; }
.modal-content h3 { margin: 1.25rem 0 0.5rem; }
.modal-content .contact-form { background: #fff; }
.modal-content .contact-form strong { font-size: var(--fs-secundair); color: var(--grijs-donker); }
.modal-footer { display: flex; gap: 0.5rem; justify-content: flex-end; }
.modal .form-group { margin-bottom: 0.75rem; }
.modal input[type="text"], .modal .form-input { flex: initial; min-width: 0; }
.no-results { color: var(--grijs); grid-column: 1 / -1; text-align: center; padding: 2rem; }
.no-results p { margin: 0 0 1rem; }

/* ---------- Startpagina en welkomstpagina: grote tegels per module ----------
   Bovenaan elke tegel een vlak in twee tinten van de modulekleur, diagonaal gedeeld zoals de twee tinten van de A in
   het logo (zonder het logo zelf na te tekenen). Bij hover of focus schuift de diagonaal op. */
.start-keuze { padding: 1rem 1rem 4rem; }
.start-vraag { font-size: var(--fs-h3); font-weight: 600; color: var(--inkt); margin: 0 0 1.25rem; }
.start-knoppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 1.5rem; max-width: 72rem; }
.start-knop {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lijn);
    border-radius: var(--radius-kaart); overflow: hidden; color: var(--inkt); text-decoration: none;
    transition: border-color 0.2s;
}
.start-vlak { position: relative; display: block; height: 8.5rem; background: var(--module-tint); }
.start-vlak::before {
    content: ""; position: absolute; inset: 0; background: var(--module);
    clip-path: polygon(0 0, 100% 0, 35% 100%, 0 100%); transition: clip-path 0.35s ease;
}
.start-vlak svg { position: absolute; right: 1.25rem; bottom: 1.1rem; width: 3rem; height: 3rem; color: #fff; }
.start-tekst { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.5rem 1.5rem; }
.start-titel { font-family: var(--font-titel); font-size: 2.1rem; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.start-uitleg { font-size: var(--fs-tekst); color: var(--grijs); }
.start-knop:hover, .start-knop:focus-visible { border-color: var(--module); }
.start-knop:hover .start-vlak::before, .start-knop:focus-visible .start-vlak::before { clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); }
.start-onder { margin-top: 2rem; color: var(--grijs); }
.start-onder a { color: var(--ap-rood-donker); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .start-vlak::before { transition: none; } }

/* Welkomstpagina: de titel groot, de kop enkel met het logo */
.welkom-hero { padding: 1.5rem 0 2rem; }
.welkom-hero h1 { font-size: clamp(3.5rem, 9vw, 6.5rem); margin: 0; }
.welkom-aangemeld { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; background: #fff; border-bottom: 1px solid var(--lijn); color: var(--inkt); }
.welkom-aangemeld-knoppen { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Opvolging: stageperiodes ---------- */
.periode-badge { background: #fff; border: 1px solid var(--lijn); color: var(--heading-color); font-weight: 600; font-size: var(--fs-secundair); padding: 0.3rem 0.8rem; border-radius: 999px; }
/* Overzicht van het bedrijfsportaal: een blok per periode met de fase. */
.periode-blok { margin: 2rem 0; }
.periode-blok > .titel { margin-bottom: 1rem; }
.badge.fase-info { background: var(--info-zacht); color: var(--info); }
.badge.fase-let-op { background: var(--let-op-zacht); color: var(--let-op); }
.badge.fase-ok { background: var(--ok-zacht); color: var(--ok); }
.periode-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.periode-keuze form { display: contents; }
.periode-knop {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem; width: 100%;
    padding: 1.75rem 1rem; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: var(--radius-kaart);
    color: var(--heading-color); font-family: inherit; cursor: pointer;
    transition: border-color 0.15s;
}
a.periode-knop { text-decoration: none; }
.periode-knop:hover { border-color: var(--module); }
.periode-knop.gekozen { border-color: var(--module); background: var(--module-zacht); }
/* Periodebalk onder de kop van de opvolging: de gekozen periode gevuld, de andere één klik verder */
header:has(+ .periode-balk) { margin-bottom: 0; }
.periode-balk { background: var(--module-zacht); padding: 0.6rem 0; margin-bottom: 2rem; }
.periode-balk .container { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.periode-balk-label { font-weight: 600; color: var(--module-tekst); font-size: var(--fs-secundair); }
.periode-wissel { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.periode-wissel button, .periode-wissel a, .periode-wissel span.gekozen {
    font: inherit; font-size: var(--fs-tekst); font-weight: 600; padding: 0.4rem 0.9rem; border-radius: var(--radius);
    border: 1px solid var(--module); background: #fff; color: var(--module-tekst); cursor: pointer;
}
.periode-wissel a { display: inline-block; text-decoration: none; }
.periode-wissel button:hover, .periode-wissel a:hover { background: var(--module); color: #fff; }
.periode-wissel span.gekozen, .periode-wissel button.gekozen, .periode-wissel button.gekozen:hover { background: var(--module-tekst); border-color: var(--module-tekst); color: #fff; cursor: default; }
.koppel { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.koppel-info { flex: 1 1 320px; }
.koppel-info h2 { margin-bottom: 0.25rem; }
.koppel-info .inline { margin: 0.15rem 0.15rem 0.15rem 0; }
.koppel-acties { flex: 1 1 320px; display: flex; flex-direction: column; gap: 0.5rem; }
.koppel-acties .rij.knoppen { margin-top: 0; }
/* Volle breedte: zonder breedte kiest de browser een smal vak en knipt hij "Geen bestand gekozen" af naast de grote knop */
input[type="file"] { display: block; width: 100%; max-width: 100%; padding: 0.5rem 0; color: var(--grijs); }
/* De knop "Bestand kiezen" zoals .btn-secondary, in elke browser dezelfde */
input[type="file"]::file-selector-button {
    font: inherit; font-weight: 600; font-size: var(--fs-tekst); color: var(--inkt);
    padding: 0.5rem 1rem; margin-right: 0.75rem;
    background: #fff; border: 1px solid var(--lijn-donker); border-radius: var(--radius);
    cursor: pointer; transition: border-color 0.2s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--inkt); }
/* Als veld in een formulier: een gestippelde zone, zodat duidelijk is dat hier een bestand komt */
input[type="file"].form-input { padding: 0.45rem; background: var(--vlak-licht); border-style: dashed; border-color: var(--lijn-donker); cursor: pointer; }
input[type="file"].form-input:hover { border-color: var(--module); }

/* Oplaadzone (public/bestandzone.js): het input-veld zit onzichtbaar in het label; het blad verwijst naar Excel.
   Leeg: gestippeld. Slepen of hover: modulekleur. Gekozen: doorlopende rand en de naam in het zwart. Fout: AP-rood. */
.oplaad-rij { align-items: stretch; }
.oplaad-rij .btn-primary { align-self: center; }
.bestand-zone {
    position: relative; flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--vlak-licht); border: 2px dashed var(--lijn-donker); border-radius: var(--radius);
    cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
}
.bestand-zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bestand-zone:hover, .bestand-zone.sleep { border-color: var(--module); background: var(--module-zacht); }
.bestand-zone:focus-within { outline: 3px solid var(--module); outline-offset: 2px; }
.bestand-blad { flex: none; width: 2rem; height: 2.5rem; color: var(--module); }
.bestand-blad path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.bestand-blad .blad-vlak { fill: #fff; }
.bestand-blad .blad-raster { stroke-width: 1.5; opacity: 0.7; }
.bestand-tekst { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bestand-tekst strong { color: var(--module-tekst); }
.bestand-naam { font-size: var(--fs-secundair); color: var(--grijs); overflow-wrap: anywhere; }
.bestand-zone.gekozen { border-style: solid; border-color: var(--module); background: #fff; }
.bestand-zone.gekozen .blad-vlak { fill: var(--module-zacht); }
.bestand-zone.gekozen .bestand-naam { color: var(--inkt); font-weight: 600; }
.bestand-zone.fout { border-color: var(--ap-rood); background: var(--fout-zacht); }
.bestand-zone.fout .bestand-naam { color: var(--ap-rood-donker); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .bestand-zone { transition: none; } }
/* Links die als knop getoond worden */
a.btn-primary, a.btn-secondary, a.btn-text { display: inline-block; text-decoration: none; line-height: normal; }
.tabel a.btn-secondary { color: var(--text-color); }
.tabel a.btn-secondary:hover, .tabel a.btn-text:hover { text-decoration: none; }
.knoppen-kolom { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; }
.knoppen-kolom .btn-secondary, .knoppen-kolom .btn-text { text-align: center; }
.knoppen-kolom form { display: flex; }
.knoppen-kolom form button { flex: 1; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.25rem; margin: 0; }
.details dt { font-weight: 600; color: var(--grijs-donker); font-size: var(--fs-secundair); padding-top: 0.1rem; }
.details dd { margin: 0; }
fieldset.geen-rand { border: 0; padding: 0; margin: 0; min-width: 0; }
.details a { color: var(--module-tekst); text-decoration: none; }
.details a:hover { text-decoration: underline; }

/* Checklist per student (opvolging): chips in het overzicht, lijst op de detailpagina */
.checklist-cel { white-space: nowrap; }
.teller.klaar { background: var(--ok-zacht); color: var(--ok); }
/* Rij 1: de taken (vinkjes), rij 2: de punten. Kleine blokjes van gelijke breedte met een afkorting van drie tekens,
   groen gevuld als het in orde is. Samen niet hoger dan de knoppen Details en Verwijderen; de volledige naam staat in de tooltip. */
.chips { display: flex; flex-wrap: nowrap; gap: 2px; margin-bottom: 2px; }
.chk-form { display: inline; margin: 0; }
.chk {
  display: inline-block; box-sizing: border-box; width: 1.75rem; height: 1.15rem; line-height: calc(1.15rem - 2px); margin: 0; padding: 0;
  font-family: inherit; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em; text-align: center; text-decoration: none;
  border: 1px solid var(--lijn-donker); border-radius: 2px; background: var(--vlak); color: var(--grijs); cursor: pointer; white-space: nowrap;
}
.chk.punt { border-style: dashed; }
.chk.in-orde { background: var(--ok); border-color: var(--ok); border-style: solid; color: #fff; }
.chk:hover { border-color: var(--grijs); color: var(--inkt); }
.chk.in-orde:hover { background: var(--ok-donker); border-color: var(--ok-donker); color: #fff; }
.tabel a.chk { color: var(--grijs); }
.tabel a.chk.in-orde { color: #fff; }
.tabel a.chk:hover { text-decoration: none; }
/* Detailpagina: kop per blok (Gegevens met knop Bewerken, Checklist met teller), verwijderen onderaan, vinkjes die meteen opslaan */
.blok-kop { margin-bottom: 0.75rem; min-height: 2.6rem; }
.blok-kop h2 { font-size: var(--fs-h3); }
.check-form { display: inline; margin: 0; }
/* Contactpersoon toevoegen op adres: de gevonden bedrijven als keuzelijst, de gekozen kaart krijgt een rode rand */
.keuzes { display: flex; flex-direction: column; gap: 0.5rem; }
.keuze { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius); cursor: pointer; }
.keuze:has(input[type="radio"]:checked) { border-color: var(--module); background: var(--module-zacht); }
.keuze > span { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; }
.keuze .uitleg { font-size: var(--fs-secundair); }
.keuze .tag-filters { margin: 0; padding: 0; gap: 0.4rem; }
.opsomming { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }

/* Bewerkformulier: kaarten onder elkaar in een smallere kolom, anders worden de velden te breed of te smal */
.form-kolom { max-width: 60rem; }
.checklijst { list-style: none; margin: 0; padding: 0; }
.checklijst li { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.35rem 0; border-bottom: 1px solid var(--vlak); }
.checklijst li:last-child { border-bottom: none; }
.checklijst .check { flex: 1; min-width: 12rem; }
.checklijst .uitleg { font-size: var(--fs-klein); flex-basis: 100%; padding-left: 1.7rem; }

#checklist .page-head { margin-bottom: 0.5rem; }
.checklijst .punt-rij { flex: 1; min-width: 12rem; color: var(--heading-color); text-decoration: none; }
.checklijst .punt-rij:hover { color: var(--module-tekst); }
.punt-waarde { font-weight: 600; color: var(--ok); }

/* ---------- Beoordeling (opvolging): quotering bovenaan, daaronder een blok per onderdeel van de verbetersleutel ---------- */
.tabbladen { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid var(--border-color); margin-bottom: 1.25rem; }
.tabblad {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: -2px; padding: 0.6rem 0.85rem;
  background: none; border: none; border-bottom: 2px solid transparent; font: inherit; font-size: var(--fs-tekst); color: var(--grijs-donker); cursor: pointer;
}
.tabblad:hover { color: var(--heading-color); border-bottom-color: var(--lijn-donker); }
.tabblad.actief { color: var(--module-tekst); border-bottom-color: var(--module); font-weight: 700; }
.tab-score { display: inline-block; min-width: 1.6rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--lijn); color: var(--grijs-donker); font-size: var(--fs-klein); font-weight: 600; text-align: center; }
.tab-score.volledig { background: var(--ok-zacht); color: var(--ok); }
.paneel[hidden] { display: none; }
.quotering td.num, .quotering th.num { text-align: right; white-space: nowrap; }
.quotering tr.subtotaal td { font-weight: 600; background: var(--vlak-licht); }
.quotering tr.eind td { font-weight: 700; font-size: var(--fs-h3); }
.beoordeling-blok .blok-kop { min-height: 0; margin-bottom: 0.25rem; }
.beoordeling-blok > .uitleg { margin: 0 0 0.75rem; }
.beoordeling-blok .rubriek-titel { margin: 1.5rem 0 0.25rem; font-size: var(--fs-tekst); }
.wis-knop:hover { color: var(--fout); }
/* Afgesloten beoordeling: groene kaart bovenaan met de knop Vrijgeven (beheerder), velden uitgeschakeld */
.kaart-afgesloten { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-color: var(--ok-lijn); background: var(--ok-zacht); }
.kaart-afgesloten form { margin: 0; }
.badge-afgesloten { background: var(--ok-zacht); color: var(--ok); }
.beoordeling-blok.afgesloten .form-input:disabled { background: var(--vlak-licht); color: var(--grijs-donker); cursor: not-allowed; }
.beoordeling-blok.afgesloten td.niveau:hover { background: none; }
.beoordeling-blok.afgesloten td.niveau.gekozen:hover { background: var(--ok-zacht); }
.beoordeling-blok.afgesloten td.niveau label, .beoordeling-blok.afgesloten .check { cursor: default; }
.waarschuwing { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); background: var(--fout-zacht); color: var(--fout); font-size: var(--fs-secundair); }
.status-ok { background: var(--ok-zacht); color: var(--ok); }
.status-open { background: var(--vlak); color: var(--grijs-donker); }
.tabel-scroll { overflow-x: auto; margin-bottom: 1rem; }
.blok-titel { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-h3); margin: 1rem 0 0.5rem; }
.commentaar-vak { margin: 0.5rem 0 0; }
.commentaar-vak textarea { resize: vertical; }
/* Vragen van de jury (beoordeling via de verdediging) */
.vragen-lijst { margin: 0 0 1rem; padding-left: 1.5rem; }
.vragen-lijst > li { padding: 0.6rem 0; border-bottom: 1px solid var(--border-color); }
.vragen-lijst > li:last-child { border-bottom: none; }
.vraag-kop { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.25rem; }
.vraag-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.vraag-wijzig { margin-top: 0.4rem; }
.vraag-wijzig summary { cursor: pointer; color: var(--grijs); font-size: var(--fs-secundair); }
.vraag-wijzig form { margin-top: 0.5rem; }
.vraag-nieuw { border-top: 1px solid var(--border-color); padding-top: 0.75rem; }
.vragen-tabel td { vertical-align: top; }
.vragen-tabel td.vraag-tekst { min-width: 18rem; }
/* Statistieken van de stageopdrachten */
.stat-kerncijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-cijfer { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; text-decoration: none; color: inherit; }
a.stat-cijfer:hover { border-color: var(--module); }
.stat-getal { font-family: var(--font-titel); font-size: var(--fs-h1); line-height: 1; color: var(--module-tekst); }
.stat-label { font-weight: 600; }
.stat-vgl { color: var(--grijs); font-size: var(--fs-secundair); }
.stat-vgl.meer, .stat-tabel td.meer { color: var(--ok); }
.stat-vgl.minder, .stat-tabel td.minder { color: var(--ap-rood-donker); }
.stat-tabel { margin: 0.5rem 0 0; }
.stat-balken { display: flex; flex-direction: column; gap: 2px; margin-top: 0.3rem; max-width: 16rem; }
.stat-balk { display: block; height: 6px; min-width: 2px; background: var(--module); border-radius: 2px; }
.stat-balk.vorig { background: var(--lijn-donker); }
.stat-gemeenten summary { cursor: pointer; }
.stat-gemeenten ul { list-style: none; margin: 0.4rem 0 0; padding: 0 0 0 1rem; font-size: var(--fs-secundair); }
.stat-gemeenten li { display: flex; justify-content: space-between; gap: 1rem; max-width: 20rem; }
.stat-groep { margin-top: 0.75rem; }
.stat-groep summary { cursor: pointer; padding: 0.4rem 0; }
.stat-totaal td { font-weight: 700; border-top: 2px solid var(--lijn); }
#wie-zit-waar, .stat-aanbod { margin-top: 2rem; }
#wie-zit-waar { padding-bottom: 3rem; }
.stat-vink { text-align: center; }
td.stat-vink { color: var(--ok); font-weight: 700; }
.stat-op-event { color: var(--ok); font-weight: 700; }

/* Tijdslijn van een stageperiode: genummerde punten op een lijn, de maanden eronder. */
.tijdslijn { padding-bottom: 2rem; margin: 0.5rem 0.9rem 1rem; }
.tijdslijn-lijn { position: relative; height: 2px; background: var(--lijn-donker); }
.tijdslijn-maand { position: absolute; top: 0.45rem; font-size: var(--fs-klein); color: var(--grijs); border-left: 1px solid var(--lijn-donker); padding-left: 0.25rem; }
.tijdslijn-vandaag { position: absolute; top: -0.6rem; height: calc(0.6rem + 2px + 0.4rem); width: 2px; background: var(--fout); }
.tijdslijn-punt { position: absolute; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--info); color: #fff; font-size: var(--fs-klein); font-weight: 700; text-decoration: none; }
a.tijdslijn-punt:hover { background: var(--grijs-donker); color: #fff; }
.tijdslijn-namen { margin: 0; padding-left: 1.6rem; }
.tijdslijn-namen li { margin-bottom: 0.25rem; }
.tijdslijn-dag { font-weight: 600; }
.tijdslijn-rollen { color: var(--grijs); font-size: var(--fs-secundair); }
.mijlpaal-rollen { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.mijlpaal-herinnering { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; margin-bottom: 0.6rem; }
.mijlpaal-niet-gepland { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.stat-opleiding + .stat-opleiding { margin-top: 2.5rem; }
.stat-opleiding:last-child { padding-bottom: 3rem; }
.stat-opleiding > .kaart > h3:first-child { margin-top: 0; }
/* Lijngrafiek: de waarden bij bewegen of focus */
.grafiek-legende { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0 0 0.75rem; padding: 0; font-size: var(--fs-secundair); color: var(--grijs-donker); }
.grafiek-staal { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.grafiek-vlak { position: relative; display: flex; height: 14rem; margin: 1.25rem 0 1.75rem 2.25rem; border-bottom: 1px solid var(--lijn-donker); }
.grafiek-lijn { position: absolute; left: 0; right: 0; border-top: 1px solid var(--lijn); pointer-events: none; }
.grafiek-lijn span { position: absolute; right: 100%; top: -0.55rem; padding-right: 0.5rem; font-size: var(--fs-klein); line-height: 1.1; color: var(--grijs); font-variant-numeric: tabular-nums; }
.grafiek-groep { position: relative; flex: 1 1 0; min-width: 0; outline-offset: 2px; }
.grafiek-groep:hover, .grafiek-groep:focus { background: rgba(35, 34, 38, 0.04); }
.grafiek-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.grafiek-lijnen polyline { fill: none; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafiek-punt { position: absolute; left: 50%; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.grafiek-naam { position: absolute; top: 100%; left: 0; right: 0; padding-top: 0.4rem; text-align: center; font-size: var(--fs-klein); color: var(--grijs); }
.grafiek-tip { display: none; position: absolute; z-index: 2; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: -2rem; padding: 0.5rem 0.7rem; background: #fff; border: 1px solid var(--lijn-donker); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); font-size: var(--fs-secundair); white-space: nowrap; }
.grafiek-groep.eerste .grafiek-tip { left: 0; transform: none; }
.grafiek-groep:last-child .grafiek-tip { left: auto; right: 0; transform: none; }
.grafiek-groep:hover .grafiek-tip, .grafiek-groep:focus .grafiek-tip { display: block; }
/* Import van opdrachten uit InStudent */
.import-tellers { margin: 0.5rem 0; padding-left: 1.25rem; }
.import-tellers .let-op { color: var(--let-op); }
.import-tellers .fout { color: var(--ap-rood-donker); }
.import-tabel td { vertical-align: top; }
.import-tabel tr.rij-fout td { background: var(--fout-zacht); }
.import-tabel tr.rij-let-op td { background: var(--let-op-zacht); }
.import-tabel .form-input { min-width: 14rem; }
/* Uitklapbaar blok "Studenten toevoegen" boven de tabel */
details.toevoegen > summary { cursor: pointer; }
details.toevoegen[open] > summary { margin-bottom: 0.75rem; }
details.toevoegen h3 { margin-top: 0; }
/* Bedrijfsportaal: opdrachten van vroegere periodes, om te kopiëren */
details.vroeger { margin-top: 2rem; }
details.afstand { margin-bottom: 1rem; }
.form-input.postcode { width: 6rem; }
details.afstand > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
details.vroeger > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.rubriek-tabel { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border-color); font-size: var(--fs-tekst); }
.rubriek-tabel th, .rubriek-tabel td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color); }
.rubriek-tabel th { font-weight: 600; }
.rubriek-tabel tr:last-child td { border-bottom: none; }
.rubriek-tabel tr.sectie-kop th { background: var(--vlak-licht); font-size: var(--fs-secundair); color: var(--grijs-donker); }
.rubriek-tabel .num { text-align: right; white-space: nowrap; }
.rubriek-tabel .uitleg-tekst { white-space: pre-line; font-size: var(--fs-secundair); color: var(--grijs); margin-top: 0.2rem; }
.rubriek-tabel .teveel { color: var(--fout); }
.punt-input { width: 6rem; text-align: right; }
.rij .form-group .punt-input { width: 100%; text-align: left; }
.rubriek-tabel .form-input { padding: 0.5rem 0.65rem; font-size: var(--fs-tekst); }
.form-input.fout { border-color: var(--fout); background: var(--fout-zacht); }
.opm-input { width: 100%; min-width: 14rem; }
/* Rubriek van de presentaties: per criterium vijf niveaus met tekst; klik op een cel om het niveau te kiezen */
.rubriek-niveaus { min-width: 60rem; }
.rubriek-niveaus thead th { background: var(--vlak-licht); font-size: var(--fs-secundair); color: var(--grijs-donker); }
.rubriek-niveaus tbody th { width: 9rem; }
.rubriek-niveaus td.niveau { padding: 0; font-size: var(--fs-klein); line-height: 1.35; }
.rubriek-niveaus td.niveau label { display: block; padding: 0.5rem 0.6rem; cursor: pointer; height: 100%; box-sizing: border-box; }
.rubriek-niveaus td.niveau:hover { background: var(--vlak); }
.rubriek-niveaus td.niveau.gekozen { background: var(--ok-zacht); }
.rubriek-niveaus td.niveau input { margin: 0 0.25rem 0 0; vertical-align: -1px; }

/* ---------- Bedrijfsportaal en registraties ---------- */
.nav-teller { display: inline-block; min-width: 1.2rem; padding: 0 0.35rem; margin-left: 0.2rem; border-radius: 999px; background: var(--primary-color); color: #fff; font-size: var(--fs-klein); font-weight: 600; line-height: 1.2rem; text-align: center; }
.admin-nav a.active .nav-teller { background: var(--module-tekst); color: #fff; }
/* Balk bovenaan als een beheerder het portaal bekijkt als een bedrijf */
.meekijken { background: var(--let-op-zacht); border-bottom: 1px solid var(--let-op-lijn); padding: 0.5rem 0; font-size: var(--fs-secundair); }
.meekijken a { color: var(--let-op); font-weight: 600; }
.logo-voorbeeld { display: flex; justify-content: center; padding: 1rem; margin: 1rem 0; background: var(--vlak-licht); border: 1px solid var(--border-color); border-radius: var(--radius); }
.logo-voorbeeld img { max-width: 200px; max-height: 200px; object-fit: contain; }
.logo-voorbeeld.klein { justify-content: flex-start; padding: 0.5rem; margin: 0; }
/* display: flex hierboven zou het hidden-attribuut negeren (nog geen logo = lege afbeelding) */
.logo-voorbeeld[hidden] { display: none; }
.logo-voorbeeld.klein img { max-width: 80px; max-height: 80px; }
.logo-rij { display: flex; gap: 1.25rem; align-items: center; }
.logo-rij .groei { flex: 1; min-width: 0; }
.logo-rij .uitleg { margin: 0.25rem 0 0; }
/* Lokaas voor bots in het registratieformulier: onzichtbaar voor mensen */
.verborgen { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.witruimte { white-space: pre-line; }
/* Vergelijking gids/registratie bij het koppelen: de keuze staat voor de waarde */
.vergelijking { margin-bottom: 1rem; }
.vergelijking label.check { align-items: flex-start; }
.vergelijking label.check input { margin-top: 0.2rem; }

/* ---------- Opdrachten ---------- */
.badge.status-concept { background: var(--let-op-zacht); color: var(--let-op); }
.badge.status-gepubliceerd { background: var(--ok-zacht); color: var(--ok); }
.badge.status-afgesloten { background: var(--lijn); color: var(--grijs-donker); }
.tag-label.uit { opacity: 0.45; cursor: not-allowed; }
.afbeelding-voorbeeld img { display: block; max-width: 100%; max-height: 220px; border-radius: var(--radius); border: 1px solid var(--border-color); margin-bottom: 0.5rem; }

/* Vragenlijst van de stagementor (src/views/mentor/vragenlijst.eta): per blok een rubriek zoals bij de presentaties
   (.rubriek-niveaus), met per stelling vijf niveaus en "niet getoetst" */
.vragenlijst-kop p:last-child { margin-bottom: 0; }
.vragenlijst-teller { font-weight: 600; color: var(--module-tekst); }
.vragenlijst-blok h2 { margin-bottom: 0.25rem; }
.vragenlijst-blok .tabel-scroll { margin: 0.75rem 0 1rem; }
.rubriek-mentor { min-width: 66rem; }
.rubriek-mentor tbody th { width: 11rem; font-size: var(--fs-secundair); }
.rubriek-mentor thead th.nvt { width: 6.5rem; }
.rubriek-mentor .niveau-punt { font-weight: 400; color: var(--grijs); }
.rubriek-mentor td.nvt { color: var(--grijs); }
.rubriek-mentor tr.ontbreekt th { box-shadow: inset 3px 0 0 var(--ap-rood); color: var(--ap-rood-donker); }
.rubriek-mentor tr.ontbreekt td { background: var(--fout-zacht); }
.stelling-nr { color: var(--grijs); margin-right: 0.15rem; }
/* Alleen-lezen: het gekozen niveau blijft goed leesbaar, de andere cellen treden terug */
.rubriek-mentor td.niveau:has(input:disabled) label { cursor: default; }
.rubriek-mentor td.niveau:has(input:disabled):not(.gekozen) { color: var(--grijs-licht); }
.rubriek-mentor td.niveau:has(input:disabled):hover:not(.gekozen) { background: none; }
.vragenlijst-knoppen { position: sticky; bottom: 0; background: var(--bg-color); padding: 0.75rem 0; border-top: 1px solid var(--lijn); }
ul.compact { margin: 0; padding-left: 1.1rem; font-size: var(--fs-secundair); }
.lijst-stand { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.mentor-stand { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
/* Tussentijdse vragenlijst: stand van student en mentor naast elkaar, grote verschillen gemarkeerd. */
.tussentijds-stand { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tussentijds-stand .kaart { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.badge-let-op { background: var(--let-op-zacht); color: var(--let-op); }
.vergelijk-tabel tr.groot-verschil td { background: var(--let-op-zacht); }
.vergelijk-tabel td:first-child { min-width: 16rem; }
.vergelijk-feedback { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; }
@media (max-width: 720px) { .vergelijk-feedback { grid-template-columns: 1fr; } }

/* Suggestielijst bij tekstvelden met een datalist (public/suggesties.js), in plaats van de popup van de browser */
.suggesties { position: fixed; z-index: 1000; margin: 0; padding: 0.25rem 0; list-style: none; overflow-y: auto; background: #fff; border: 1px solid var(--lijn-donker); border-radius: var(--radius); }
.suggesties li { padding: 0.45rem 0.75rem; cursor: pointer; color: var(--inkt); }
.suggesties li small { display: block; color: var(--grijs); font-size: var(--fs-secundair); }
.suggesties li:hover, .suggesties li.actief { background: var(--module-zacht); }
.suggesties li.actief { box-shadow: inset 3px 0 0 var(--module); }

/* Editor voor opgemaakte tekst (public/editor.js) */
.md-editor { border: 1px solid var(--border-color); border-radius: var(--radius); background: #fff; }
.md-editor:focus-within { border-color: var(--module); }
.md-knoppen { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.4rem; border-bottom: 1px solid var(--border-color); background: var(--vlak-licht); border-radius: var(--radius) var(--radius) 0 0; }
.md-knoppen button { font: inherit; font-size: var(--fs-secundair); padding: 0.25rem 0.6rem; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--heading-color); cursor: pointer; }
.md-knoppen button:hover { background: #fff; border-color: var(--border-color); }
.md-inhoud { min-height: 12rem; padding: 0.75rem 1rem; outline: none; }
.md-teller { display: block; text-align: right; padding: 0 0.75rem 0.4rem; }
.md-editor.te-lang .md-teller { color: var(--fout); font-weight: 600; }

/* Tekst in opmaak (uit Markdown): in de editor en op de detailpagina */
.tekst-opmaak { line-height: 1.6; }
.tekst-opmaak > :first-child { margin-top: 0; }
.tekst-opmaak h1, .tekst-opmaak h2, .tekst-opmaak h3, .tekst-opmaak h4 { font-size: var(--fs-h3); margin: 1.25rem 0 0.4rem; }
.tekst-opmaak h1, .tekst-opmaak h2 { font-size: var(--fs-h3); }
.tekst-opmaak p { margin: 0 0 0.75rem; }
.tekst-opmaak ul, .tekst-opmaak ol { margin: 0 0 0.75rem; padding-left: 1.5rem; }
.tekst-opmaak a { color: var(--module-tekst); }

/* Detailpagina van een opdracht (zoals een student ze ziet) */
.opdracht-detail { max-width: 60rem; margin: 0 auto 2rem; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-kaart); overflow: hidden; }
.opdracht-kop { padding: 1.5rem 1.75rem 1.25rem; border-bottom: 1px solid var(--border-color); }
.opdracht-kop h1 { margin: 0.35rem 0; font-size: var(--fs-h1); }
.opdracht-type { margin: 0; font-weight: 600; font-size: var(--fs-secundair); }
.opdracht-type::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--module); margin-right: 0.5rem; vertical-align: 0.1rem; }
.opdracht-bedrijf { margin: 0; color: var(--grijs); }
.opdracht-afbeelding { display: block; width: 100%; max-height: 28rem; object-fit: cover; }
.opdracht-inhoud { padding: 1.25rem 1.75rem 1.75rem; }
.opdracht-inhoud h2 { font-size: var(--fs-h3); margin: 1.25rem 0 0.5rem; }
.opdracht-bijlage { display: block; padding: 0.75rem 1rem; background: var(--vlak-licht); border-radius: var(--radius); color: var(--module-tekst); text-decoration: none; font-weight: 500; }
.opdracht-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0; }
.opdracht-tag { background: var(--vlak); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: var(--fs-secundair); }
.opdracht-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.opdracht-kaart { background: var(--vlak-licht); border-radius: var(--radius); padding: 1rem 1.25rem; line-height: 1.6; }
.opdracht-kaart p.uitleg { margin: 0 0 0.25rem; }
.opdracht-kaart a { color: var(--module-tekst); text-decoration: none; }
.opdracht-kaart-bedrijf { display: flex; gap: 1rem; align-items: flex-start; }
.opdracht-kaart-bedrijf img { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: var(--radius); background: #fff; }

/* Lijst met opdrachten voor studenten: tegels met afbeelding */
.opdracht-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 1rem; }
.opdracht-tegel { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-kaart); overflow: hidden; color: inherit; text-decoration: none; transition: border-color 0.15s; }
.opdracht-tegel:hover { border-color: var(--module); }
.opdracht-tegel img, .opdracht-tegel-leeg { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--vlak); }
.opdracht-tegel-tekst { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem 1rem; }
.opdracht-tegel strong { color: var(--heading-color); font-size: var(--fs-h3); line-height: 1.35; }
.opdracht-tags.klein { margin: 0.25rem 0 0; gap: 0.3rem; }
.opdracht-tags.klein .opdracht-tag { font-size: var(--fs-klein); padding: 0.15rem 0.6rem; }

/* Sollicitaties */
.badge.sollicitatie-ingediend { background: var(--info-zacht); color: var(--info); }
.badge.sollicitatie-uitgenodigd { background: var(--let-op-zacht); color: var(--let-op); }
/* Een eindstatus is gevuld, een tussenstap zacht (design.md, Statussen) */
.badge.sollicitatie-aanvaard { background: var(--ok); color: #fff; }
/* Manuele mails: verstuurd is een eindstatus, gevuld en met de rij in het zachte groen zodat het opvalt */
.badge.verstuurd { background: var(--ok); color: #fff; font-weight: 600; }
.tabel tr.verstuurd td { background: var(--ok-zacht); }
.badge.sollicitatie-geweigerd, .badge.sollicitatie-ingetrokken, .badge.sollicitatie-afgesloten { background: var(--lijn); color: var(--grijs-donker); }
.opdracht-solliciteren { max-width: 60rem; margin: 0 auto; }
.opdracht-solliciteren details > summary { display: inline-block; list-style: none; cursor: pointer; }
.opdracht-solliciteren details > summary::-webkit-details-marker { display: none; }
.opdracht-solliciteren details[open] > summary { margin-bottom: 1rem; }
.details dd.links { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Stagevoorstellen */
.badge.voorstel-concept { background: var(--vlak); color: var(--grijs-donker); }
.badge.voorstel-ingediend { background: var(--info-zacht); color: var(--info); }
.badge.voorstel-meer_info { background: var(--let-op-zacht); color: var(--let-op); }
.badge.voorstel-goedgekeurd { background: var(--ok); color: #fff; }
.badge.voorstel-afgekeurd { background: var(--fout-zacht); color: var(--fout); }
.kaart-ok { border-color: var(--ok-lijn); background: var(--ok-zacht); }

/* Aanmelden voor externen (/aanmelden): smalle kolom, keuzeknoppen over de volle breedte */
.aanmelden { max-width: 32rem; margin: 2rem auto 0; }
.aanmeld-keuze { margin: 0 0 0.5rem; }
.aanmeld-keuze button { width: 100%; text-align: left; }

/* Bevestigingsvenster (public/bevestig.js) in plaats van confirm() en alert() van de browser */
dialog.bevestig {
    width: min(28rem, calc(100% - 2rem)); box-sizing: border-box; padding: 1.5rem; margin: auto;
    border: none; border-top: 6px solid var(--module); border-radius: var(--radius-kaart);
    background: #fff; color: var(--inkt); border: 1px solid var(--lijn-donker);
}
dialog.bevestig::backdrop { background: rgb(35 34 38 / 0.45); }
.bevestig-tekst { margin: 0 0 1.25rem; font-size: var(--fs-h3); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.bevestig-veld { margin-bottom: 1.25rem; }
/* "Ja" staat eerst in de HTML (Enter bevestigt) maar rechts op het scherm */
.bevestig-knoppen { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Mailteksten (beheer) ---------- */
.flash-let-op { background: var(--let-op-zacht); color: var(--let-op); }
.mail-bewerken { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.mail-bewerken textarea { resize: vertical; line-height: 1.5; }
.mail-voorbeeld { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.25rem; background: #fff; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.mail-voorbeeld p { margin: 0 0 1em; }
.boven-tabel { margin-bottom: 0.75rem; }

/* ---------- Testomgeving (OMGEVING=test): kies wie je bent, testpostvak ---------- */
.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.persona { margin: 0; }
.persona-knop { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; height: 100%; text-align: left; padding: 0.6rem 0.8rem; background: #fff; border: 1px solid var(--lijn-donker); border-radius: var(--radius); font: inherit; color: var(--inkt); cursor: pointer; transition: border-color 0.15s; }
.persona-knop:hover, .persona-knop:focus-visible { border-color: var(--module); background: var(--module-zacht); }
.persona-naam { font-weight: 600; }
.persona-naam .badge { margin-left: 0.4rem; font-weight: 600; }
.persona-wat { font-size: var(--fs-secundair); color: var(--grijs-donker); }
.persona-info { font-size: var(--fs-klein); color: var(--module-tekst); }
.persona-bedrijf { font-size: var(--fs-tekst); margin: 0.75rem 0 0.4rem; }
iframe.testmail { display: block; width: 100%; min-height: 32rem; border: 1px solid var(--lijn); border-radius: var(--radius-kaart); background: #fff; }

/* ---------- Kleine schermen (smartphone) ---------- */
@media (max-width: 720px) {
    .mail-bewerken { grid-template-columns: 1fr; }
    .container { padding: 0 0.75rem; }
    header { padding: 1rem 0; margin-bottom: 1.25rem; }
    header h1 { font-size: 1.9rem; }
    .header-top { margin-bottom: 1rem; }
    .header-actions { flex-wrap: wrap; gap: 0.5rem; }
    .brand-logo { height: 32px; }
    /* Het liggende logo neemt de breedte van een gsm: de titel komt eronder (witruimte blijft de helft van de logohoogte) */
    .brand-block { flex-wrap: wrap; gap: 1rem; }
    .brand-block > div { flex-basis: 100%; }
    .start-vlak { height: 6rem; }
    .company-grid { gap: 1rem; }
    .company-card { padding: 1.25rem; }
    .page-head h1 { font-size: 2rem; }
    .kaart { padding: 1rem; }
    .melding { width: max-content; max-width: calc(100% - 2rem); box-sizing: border-box; }

    /* Tabbladen in een rij die mag afbreken */
    .sub-nav { margin-bottom: 1.25rem; }
    .admin-nav { gap: 0; }
    .admin-nav a { padding: 0 0.6rem; font-size: var(--fs-secundair); }

    /* Modal in de gids vult het hele scherm */
    .modal-content { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; padding: 1.25rem 1rem 1.5rem; box-sizing: border-box; }
    .close-button { top: 0.5rem; right: 1rem; }

    /* Tabellen stapelen tot kaarten: elke rij een blok, elke cel een lijn met het kolomlabel ervoor */
    .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; }
    .tabel thead { display: none; }
    .tabel tr { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--border-color); }
    .tabel tr[hidden] { display: none; }
    .tabel td, .tabel td.nowrap { padding: 0.15rem 0; border: none; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    .tabel td:empty { display: none; }
    .tabel td[data-label]::before { content: attr(data-label) ': '; font-weight: 600; font-size: var(--fs-secundair); color: var(--grijs-donker); }
    .tabel .leeg { text-align: center; padding: 1rem 0; }
    /* Als kaart: de acties onderaan, links, en niet meer 1% breed */
    .tabel td.acties { width: auto; text-align: left; white-space: normal; margin-top: 0.5rem; }
    .knoppen-kolom { flex-direction: row; flex-wrap: wrap; margin-top: 0.4rem; }
    .knoppen-kolom form { flex: none; }
    .chips { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    /* Formulieren: velden die naast elkaar stonden komen onder elkaar; knoppenrijen mogen afbreken */
    .rij:not(.knoppen) { flex-direction: column; gap: 0; }
    .contact-form .rij:not(.knoppen) { gap: 0.5rem; }
    .rij.knoppen { flex-wrap: wrap; }
    .rij.knoppen .form-input.groei { flex: 1 1 100%; }
    .enkel-breed { display: none; }
    .oplaad-rij .bestand-zone { flex-basis: 100%; }
    .rij .form-group.jury-vragen { width: auto; }
    .jury-vragen .uitleg { padding-top: 0; }
    .jury-vragen:has(.uitleg:empty) { display: none; }
    .enkel-smal { display: initial; }
    .actions { flex-wrap: wrap; }
    .filter-bar .uitleg { flex-basis: 100%; }

    /* Detailpagina student: label boven de waarde */
    .details { grid-template-columns: 1fr; gap: 0; }
    .details dt { padding-top: 0.6rem; }
    .details dt:first-child { padding-top: 0; }
}

/* Gids, In de buurt van: gemeente en straal naast elkaar. */
.gids-buurt { display: flex; gap: 0.5rem; flex: 1; min-width: min(320px, 100%); }
.gids-buurt input[type="text"] { min-width: 0; }
.gids-buurt select { flex: none; padding: 0.75rem 2.25rem 0.75rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: var(--fs-tekst); }
input[type="text"].ongeldig { border-color: var(--fout); }

/* Opvolging > Studenten: zachte achtergrond per rij (Jeroen, 2026-11-06). Op de tr en de td's, ook in de mobiele weergave. */
.tabel tr.rij-uitgeschreven, .tabel tr.rij-uitgeschreven td { background: var(--vlak); }
.tabel tr.rij-erasmus, .tabel tr.rij-erasmus td { background: var(--info-zacht); }
.tabel tr.rij-zonder-voorstel, .tabel tr.rij-zonder-voorstel td { background: var(--fout-zacht); }