/*
 * Zorgsafe -- medewerkersschermen
 *
 * Andere doelgroep dan de gastschermen, dus andere maten. Een behandelaar zit
 * hier tien keer per dag in, op een werkplek, tussen andere systemen door:
 * kleinere grondmaat, dichtere regelafstand, minder witruimte. Nog steeds geen
 * JavaScript, en nog steeds ruim contrast -- dat is geen doelgroepkeuze maar
 * een eis.
 */

:root {
    --inkt: #16202e;
    --gedempt: #55637a;
    --lijn: #d3d9e2;
    --vlak: #ffffff;
    --achtergrond: #eef1f5;
    --accent: #14456b;
    --accent-diep: #0d2f49;
    --waarschuwing: #8a1c1c;
    --waarschuwing-vlak: #fdf1f1;
    --let-op-vlak: #fff8e6;
    --let-op-rand: #a06a00;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--achtergrond);
    color: var(--inkt);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------
   Indeling
   ---------------------------------------------------------------
   Drie breedtes, want drie soorten scherm:

     smal   inloggen en de tweede factor. Een formulier van twee velden
            wordt niet beter van meer ruimte; het wordt alleen moeilijker
            te overzien.
     ruim   een gesprek of een formulier. Berichten blijven leesbaar
            doordat de tekst zelf begrensd wordt, niet de pagina.
     breed  de lijst met gesprekken. Daar telt overzicht: meer kolommen
            naast elkaar scheelt heen en weer klikken.

   De balk bovenin volgt dezelfde breedte, zodat de inhoud eronder uitlijnt.
   --------------------------------------------------------------- */

/*
 * DE HOOGTE VAN DE BOVENBALK STAAT OP EEN PLEK.
 *
 * Hij stond op drie plekken als 3.6rem gegokt, terwijl .balk min-height 3rem
 * heeft en kan groeien met wat erin staat. Dat verschil was zichtbaar als een
 * streepje witruimte tussen de bovenbalk en de taakbalk links.
 *
 * Nu een vaste hoogte in een variabele: de taakbalk en het werkblad rekenen
 * daarmee, en er valt niets meer tussen.
 */
:root { --balk-hoogte: 3rem; }

header {
    background: var(--accent-diep);
    color: #fff;
    padding: 0 1.25rem;
    /* box-sizing zodat de padding IN de hoogte valt en er niets bij komt. */
    box-sizing: border-box;
    height: var(--balk-hoogte);
}

.balk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto;
    min-height: 0;
    height: 100%;
}

.merk { font-weight: 600; letter-spacing: .02em; }

/*
 * Het logo linksboven, vóór de naam.
 *
 * flex:none: het mag niet krimpen als de navigatie breed wordt. Een logo dat
 * op een smal scherm een paar pixels smaller wordt, ziet er kapot uit.
 *
 * De navigatie houdt margin-left:auto en blijft dus rechts staan.
 */
.balklogo {
    display: block;
    flex: none;
    width: 30px;
    height: 30px;
    margin-right: .55rem;
}

/* De navigatie schuift mee naar rechts. */
header nav { margin-left: auto; }

@media (max-width: 40rem) {
    /* Op een smal scherm neemt de navigatie alle ruimte. Het logo blijft nu
       wel staan -- het is klein en het is het eerste wat iemand ziet; de
       NAAM ernaast is wat mag wijken. */
    .balklogo { margin-right: .4rem; }
    .merk { font-size: .9rem; }
}

header nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

header nav a {
    color: #dbe6f0;
    text-decoration: none;
    font-size: .9rem;
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
}

header nav a:hover { color: #fff; border-bottom-color: #dbe6f0; }

header nav form { display: inline; }

/* In de bovenbalk: licht op donker. Specifieker gemaakt omdat .wie ook in een
   gesprek voorkomt; zonder 'header' won die tweede en werd deze tekst
   onleesbaar donker op de blauwe balk. */
header .wie { font-size: .85rem; color: #b8ccdd; }

header nav button {
    width: auto;
    margin: 0;
    padding: .3rem .7rem;
    font-size: .85rem;
    font-weight: 400;
    background: none;
    color: #dbe6f0;
    border: 1px solid #46617c;
    border-radius: 3px;
}

header nav button:hover { background: #1b3a55; color: #fff; }

main {
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: 6px;
}

.smal  { max-width: 26rem; }
.ruim  { max-width: 46rem; }
.breed { max-width: 66rem; }

/* Een venster is breed, een zin hoort dat niet te zijn. De pagina mag de
   ruimte gebruiken, de lopende tekst erin niet. */
main.ruim p,
main.breed p { max-width: 42rem; }

h1 { font-size: 1.25rem; margin: 0 0 1rem; }
h2 { font-size: 1rem; margin: 1.75rem 0 .5rem; }
p { margin: 0 0 .8rem; }

label { display: block; font-weight: 600; margin: .9rem 0 .3rem; font-size: .9rem; }

/*
 * ALLE invoervelden.
 *
 * Hier stonden eerder alleen email, password en text. Velden met type="url" of
 * type="number" vielen daarbuiten en kregen de standaardopmaak van de browser:
 * smal, met een dun randje, midden tussen velden die de volle breedte hebben.
 * Dat trof onder meer de bewaartermijn en de adressen van de
 * identiteitsvoorziening.
 */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="url"],
input[type="tel"],
input[type="number"] {
    width: 100%;
    font: inherit;
    padding: .55rem .65rem;
    border: 1px solid var(--lijn);
    border-radius: 4px;
    background: var(--vlak);
    color: var(--inkt);
}

input.code {
    font-size: 1.35rem;
    letter-spacing: .25em;
    text-align: center;
}

input:focus, button:focus { outline: 3px solid var(--accent); outline-offset: 2px; }

button {
    width: 100%;
    margin-top: 1.1rem;
    padding: .65rem 1rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

button:hover { background: var(--accent-diep); }

button.tweede {
    background: none;
    color: var(--accent);
    border: 1px solid var(--lijn);
    font-weight: 400;
}

button.tweede:hover { background: var(--achtergrond); color: var(--accent-diep); }

/*
 * Een geslaagde handeling.
 *
 * Deze klasse werd op drie schermen gebruikt zonder dat hij bestond: de melding
 * kwam er dus uit als gewone tekst, en dan leest niemand hem. Gevonden door de
 * klassennamen in de sjablonen tegen de opmaak te houden.
 */
/*
 * Een label met een vinkje erin.
 *
 * Deze klasse werd gebruikt zonder dat hij bestond: het vinkje en de tekst
 * stonden onder elkaar in plaats van naast elkaar. Gevonden door alle
 * sjablonen tegen beide stijlbladen te houden.
 */
.keuze {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-weight: 400;
    cursor: pointer;
}

.keuze input[type=checkbox] {
    width: auto;
    margin: .25rem 0 0;
    flex: none;
}

.melding {
    background: #e6f2e9;
    border-left: 3px solid #2f6b3d;
    color: #24512f;
    padding: .6rem .8rem;
    border-radius: 0 4px 4px 0;
    margin: .8rem 1.3rem 0;
}

.fout {
    background: var(--waarschuwing-vlak);
    border-left: 4px solid var(--waarschuwing);
    color: var(--waarschuwing);
    padding: .7rem .9rem;
    border-radius: 3px;
    font-weight: 600;
}

/* Een instructie die extra moet opvallen.
   Dezelfde kleuren als .fout, maar bewust een eigen klasse: .fout draagt
   role="alert", en dan kondigt een schermlezer de tekst aan alsof er iets is
   misgegaan. Dit is geen fout maar een handeling die vergeten wordt. */
.nadruk {
    background: var(--waarschuwing-vlak);
    border-left: 4px solid var(--waarschuwing);
    color: var(--waarschuwing);
    padding: .7rem 1rem;
    border-radius: 0 4px 4px 0;
    margin: .8rem 0;
}

.nadruk strong { color: var(--waarschuwing); }

.let-op {
    background: var(--let-op-vlak);
    border-left: 4px solid var(--let-op-rand);
    padding: .7rem .9rem;
    border-radius: 3px;
}

.klein { font-size: .85rem; color: var(--gedempt); }

/* De sleutel wordt overgetypt in een app: ruim, met vaste tekenbreedte, en
   groepjes van vier die al in de tekst zitten. */
.sleutel {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.15rem;
    letter-spacing: .05em;
    background: var(--achtergrond);
    padding: .9rem;
    border-radius: 4px;
    word-break: break-all;
}

.codes {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    columns: 2;
    padding-left: 1.2rem;
    margin: 0 0 1rem;
}

.codes li { margin-bottom: .25rem; }

/* ---------------------------------------------------------------
   Gesprekken
   --------------------------------------------------------------- */

table.lijst { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.lijst th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--lijn); padding: .4rem .3rem; }
table.lijst td { padding: .6rem .4rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
table.lijst th { padding: .4rem .4rem; }
table.lijst tr:hover td { background: #f7f9fb; }
td.hoofd { font-weight: 600; }
td.hoofd a { text-decoration: none; }
td.hoofd a:hover { text-decoration: underline; }

.gedempt { color: var(--gedempt); }
.ja { color: #2f6b3d; font-weight: 600; }
.nee { color: var(--let-op-rand); font-weight: 600; }

/* Een reactie vraagt om iets van de behandelaar; de andere twee zijn
   toestanden om te weten. Vandaar dat alleen deze een vlak krijgt. */
.reactie {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    padding: .1rem .5rem;
    border-radius: 3px;
}

article {
    margin: 1rem 0;
    padding: .8rem .9rem;
    border-radius: 5px;
    background: #eef2f7;
}

article.van-mij { background: #e8f0e9; }

.wie { font-size: .8rem; color: var(--gedempt); margin-bottom: .3rem; }
.tekst { margin: 0; }

textarea {
    width: 100%;
    font: inherit;
    line-height: 1.5;
    padding: .55rem .65rem;
    border: 1px solid var(--lijn);
    border-radius: 4px;
    resize: vertical;
}

.klein-knopje {
    width: auto;
    margin-top: .6rem;
    padding: .25rem .6rem;
    font-size: .8rem;
    font-weight: 400;
    background: none;
    color: var(--waarschuwing);
    border: 1px solid var(--lijn);
}

.klein-knopje:hover { background: var(--waarschuwing-vlak); color: var(--waarschuwing); }

/* Een klein knopje dat NIETS onherstelbaars doet.
   Het standaardknopje is rood, want het hoort bij handelingen als schorsen en
   intrekken. Diezelfde kleur op een opslaanknop suggereert gevaar waar geen
   gevaar is -- en wie elke dag een rode knop indrukt, leest de echte rode knop
   niet meer. */
.klein-knopje.rustig { color: var(--accent); }
.klein-knopje.rustig:hover { background: var(--achtergrond); color: var(--accent-diep); }

/* De eenheid achter een invoerveld. Een <label> en geen los stukje tekst, zodat
   een schermlezer het veld ook benoemt. */
.eenheid { font-size: .8rem; color: var(--gedempt); font-weight: 400; margin: 0; }

/* Het adres van de ontvanger, op het bevestigingsscherm. Groot en met vaste
   tekenbreedte, want dit is het moment waarop iemand het teken voor teken moet
   kunnen nalezen. */
.ontvanger {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.25rem;
    background: var(--let-op-vlak);
    border: 1px solid var(--let-op-rand);
    padding: .9rem;
    border-radius: 4px;
    word-break: break-all;
    text-align: center;
}

.bijlagen { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.bijlagen li { margin-bottom: .2rem; }

input[type="file"] { width: 100%; font: inherit; font-size: .9rem; padding: .4rem 0; }


/* Berichten in een gesprek. De bel is breed genoeg voor een alinea maar niet
   voor een regel van honderd tekens; dat laatste leest slecht terug. */
main.ruim article { max-width: 42rem; }
main.ruim article.van-mij { margin-left: auto; }

/* Op een telefoon zijn vijf kolommen onleesbaar. De lijst wordt dan een reeks
   blokken, met de kop van elke kolom ervoor. */
@media (max-width: 40rem) {
    header nav { gap: .7rem; }
    .wie { display: none; }
    header nav a { font-size: .8rem; }

    main { padding: 1rem; margin: .75rem; }

    table.lijst tr:first-child { display: none; }
    table.lijst, table.lijst tr, table.lijst td { display: block; width: auto; }
    table.lijst tr { border: 1px solid var(--lijn); border-radius: 5px; margin-bottom: .8rem; padding: .5rem; }
    table.lijst td { border: 0; padding: .25rem; }
    table.lijst td::before { content: attr(data-kop) " "; color: var(--gedempt); font-size: .8rem; }
    td.hoofd::before { content: ""; }
}


/* ---------------------------------------------------------------
   Beheer
   --------------------------------------------------------------- */

/* Het tegelraster van het beheerscherm (ad_overzicht.php).
   LET OP: deze naam was al bezet. De verificatiekaartjes op het opstelscherm
   heten daarom .keuzekaarten -- hergebruik van deze naam overschreef dit
   raster en drukte zeven tegels in een rij. */
.kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kaarten section {
    border: 1px solid var(--lijn);
    border-radius: 5px;
    padding: 1rem;
}

.kaarten h2 { margin: 0 0 .5rem; padding: 0; border: 0; font-size: .95rem; }
.kaarten .groot { font-size: 1.8rem; font-weight: 600; margin: 0 0 .2rem; }

.goed {
    background: #eaf3ec;
    border-left: 4px solid #2f6b3d;
    padding: .7rem .9rem;
    border-radius: 3px;
}

.uitgelicht {
    background: var(--achtergrond);
    border: 1px solid var(--lijn);
    border-radius: 5px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

td.acties form { display: inline-block; margin: 0 .3rem .3rem 0; }

form.inline { display: flex; gap: .3rem; align-items: center; }
form.inline input[type="number"] { width: 4rem; padding: .2rem .3rem; }
form.inline button { width: auto; margin: 0; }
td.acties input[type="text"] { display: inline-block; width: auto; padding: .2rem .4rem; }

label.naast { display: inline; font-weight: 400; }
select { width: 100%; font: inherit; padding: .5rem; border: 1px solid var(--lijn); border-radius: 4px; }


/* De balk bij een overname. Opzichtig met opzet: wie deze niet ziet, weet niet
   dat er iemand anders in zijn omgeving werkt. Niet weg te klikken. */
.overname {
    background: #8a1c1c;
    color: #fff;
    padding: .7rem 1.25rem;
    font-size: .9rem;
    line-height: 1.45;
}

.overname strong { display: block; }


/* ---------------------------------------------------------------
   Inklapbare blokken
   ---------------------------------------------------------------
   Met <details> en <summary>. De browser regelt het open- en dichtklappen
   zelf, inclusief bediening met het toetsenbord en de leesmodus van een
   schermlezer. Geen JavaScript, want dat wordt in dit product geblokkeerd.
   --------------------------------------------------------------- */

details.blok {
    border: 1px solid var(--lijn);
    border-radius: 5px;
    margin: 1.25rem 0;
    background: var(--vlak);
}

/*
 * DE EXTRA BIJLAGEVELDEN.
 *
 * Vier velden achter een uitklapper, zodat wie er een stuurt niets extra's
 * ziet. Rustiger dan .blok, want dit staat middenin een formulier en niet als
 * hoofdstuk op een beheerscherm.
 */
/*
 * HET SLEEPVAK VOOR BIJLAGEN.
 *
 * Een vak waar je bestanden in sleept of op klikt, met daaronder een regel per
 * bijlage. Vervangt vijf losse bestandsvelden: die waren een oplossing voor
 * "geen script", en die reden is er niet meer.
 */
.bijlage-vak {
    margin: .6rem 0 1rem;
}

/*
 * DE ZONE IS EEN <label>.
 *
 * Daardoor opent een klik erop het bestandsvenster, zonder script. Het echte
 * <input> zit erin en is met Tab bereikbaar -- slepen mag nooit de enige weg
 * zijn.
 */
.bijlage-zone {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.1rem;
    border: 2px dashed var(--lijn);
    border-radius: 8px;
    background: var(--achtergrond);
    color: var(--gedempt);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.bijlage-zone:hover,
.bijlage-zone:focus-within {
    border-color: var(--accent);
    background: #fff;
}

/* Terwijl er een bestand boven het vak zweeft. */
.bijlage-zone.sleep {
    border-color: var(--accent);
    background: var(--let-op-vlak);
}

/*
 * HET VELD ZELF IS ONZICHTBAAR MAAR NIET WEG.
 *
 * `display:none` zou het uit de toetsenbordvolgorde halen, en dan is het vak
 * alleen met een muis te gebruiken. Zo blijft het bereikbaar met Tab en zegt een
 * schermlezer wat het is.
 */
.bijlage-zone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.bijlage-lijst {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

/*
 * EEN REGEL PER BIJLAGE.
 *
 * ZONDER FLEX. Drie ronden geprobeerd met flex en grid; de proefweergave
 * waarmee ik dit nareken past `flex` op deze plek niet toe, en dan kan ik niet
 * ZIEN wat een medewerker straks krijgt.
 *
 * Wat overblijft werkt overal: de naam als blok, de stand eronder, het kruisje
 * rechts uitgelijnd met `float`. Ouderwets, maar te bekijken -- en dat is bij
 * opmaak de enige toets die telt.
 */
.bijlage-rij {
    padding: .55rem .2rem;
    border-bottom: 1px solid var(--lijn);
    overflow: hidden;
}

.bijlage-rij .weg {
    float: right;
    background: none;
    border: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--gedempt);
    cursor: pointer;
    padding: .1rem .35rem;
    margin-left: .5rem;
    border-radius: 4px;
}

.bijlage-rij .weg:hover,
.bijlage-rij .weg:focus {
    color: var(--waarschuwing);
    background: var(--waarschuwing-vlak);
}

.bijlage-rij .naam {
    display: block;
    font-size: .88rem;
    word-break: break-all;
}

.bijlage-rij .stand {
    display: block;
    font-size: .78rem;
    color: var(--gedempt);
    margin-top: .1rem;
}

.bijlage-rij .balk {
    display: block;
    height: 4px;
    background: var(--achtergrond);
    border-radius: 2px;
    overflow: hidden;
    margin-top: .35rem;
}

.bijlage-rij .balk > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width .2s linear;
}

/* Klaar: de balk hoeft niet meer op te vallen. */
.bijlage-rij.klaar .balk > span {
    background: var(--goed, #2e7d52);
}

.bijlage-rij.klaar .stand {
    color: var(--goed, #2e7d52);
    font-weight: 700;
}

.bijlage-rij.mislukt .stand {
    color: var(--waarschuwing);
    font-weight: 700;
}



.bijlage-melding {
    color: var(--waarschuwing);
    margin: .4rem 0 0;
    min-height: 1rem;
}





/* De velden binnen de uitklapper iets laten inspringen, zodat zichtbaar is dat
   ze bij elkaar horen. */




details.blok > summary {
    padding: .75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: 5px;
}

/* Het standaarddriehoekje vervangen door een eigen teken, zodat het er in
   elke browser hetzelfde uitziet. */
details.blok > summary::-webkit-details-marker { display: none; }

details.blok > summary::before {
    content: "+";
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1.05rem;
    text-align: center;
    border: 1px solid var(--accent);
    border-radius: 3px;
    color: var(--accent);
    font-weight: 700;
}

details.blok[open] > summary::before { content: "\2212"; }

details.blok > summary:hover { background: var(--achtergrond); }

/* Een uitklapblok dat een blijvende waarschuwing draagt.
   De kop blijft rood, ook ingeklapt: dit is een toestand die niet vanzelf
   overgaat, geen melding die je wegklikt. */
details.blok.waarschuwend {
    border-color: var(--waarschuwing);
    background: var(--waarschuwing-vlak);
}

details.blok.waarschuwend > summary { color: var(--waarschuwing); }

details.blok.waarschuwend > summary::before {
    border-color: var(--waarschuwing);
    color: var(--waarschuwing);
}

details.blok.waarschuwend > summary:hover { background: #fbe4e4; }

details.blok > summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* Alles onder de kop krijgt binnenmarge; de kop zelf raakt de rand. */
details.blok > *:not(summary) { margin-left: 1rem; margin-right: 1rem; }
details.blok > *:last-child { margin-bottom: 1rem; }

details.blok h2 { margin-top: 1rem; }


/* Lange DNS-waarden mogen afbreken; anders duwen ze de tabel uit beeld. */
.breek code { word-break: break-all; }


/* Voorbeeld van het opgeslagen logo in het beheerscherm. */
.logo-proef {
    max-height: 4rem;
    max-width: 14rem;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: 4px;
    padding: .5rem;
}


/* ---------------------------------------------------------------
   Het aanmeldscherm
   ---------------------------------------------------------------
   Een rustige, gecentreerde pagina zonder navigatie. Er is nog niets om heen te
   gaan, en het scherm hoort maar een ding te vragen tegelijk.

   Het merk staat linksboven, klein. Dat bevestigt waar iemand is beland zonder
   de aandacht weg te trekken van het enige veld dat ertoe doet.
   --------------------------------------------------------------- */

body.aanmeldpagina {
    background: #f7f8fa;
    min-height: 100vh;
    margin: 0;
}

/* De algemene regels voor header en main overschrijven. Die geven het
   medewerkersscherm zijn donkere balk en witte kaart; op deze pagina zou dat een
   donkere balk met donkere tekst opleveren -- onleesbaar, en dat is precies wat
   het eerste scherm niet mag zijn. */
body.aanmeldpagina header.aanmeldbalk {
    background: transparent;
    color: var(--inkt);
    padding: 1.5rem 2rem;
}

body.aanmeldpagina main.aanmeldvak {
    background: transparent;
    border: 0;
    border-radius: 0;
}

.merkregel {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--inkt);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}

.merkregel img { display: block; }

/* Ongeveer een derde vanaf boven: hoger dan het midden, zodat het veld op een
   laptop zonder scrollen in beeld staat en op een telefoon niet achter het
   toetsenbord verdwijnt. */
.aanmeldvak {
    max-width: 30rem;
    margin: 0 auto;
    padding: 12vh 1.5rem 4rem;
}

.aanmeldvak h1 {
    font-size: 2.4rem;
    line-height: 1.15;
    text-align: center;
    margin: 0 0 .75rem;
    color: var(--inkt);
    letter-spacing: -.02em;
}

.aanmeldvak .onderkop {
    text-align: center;
    color: var(--gedempt);
    margin: 0 0 2.25rem;
    line-height: 1.5;
}

.aanmeldvak form { margin: 0; }

.aanmeldvak label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    margin: 0 0 .35rem;
    color: var(--inkt);
}

.aanmeldvak input[type="text"],
.aanmeldvak input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: .8rem .9rem;
    font-size: 1rem;
    border: 1px solid #9aa4b4;
    border-radius: 5px;
    background: #fff;
    margin: 0 0 1.25rem;
}

.aanmeldvak input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.aanmeldvak button[type="submit"] {
    width: 100%;
    padding: .85rem 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 5px;
    margin: .5rem 0 0;
}

.aanmeldvak .klein {
    text-align: center;
    margin: 1.25rem 0 0;
}

.aanmeldvak .fout { margin: 0 0 1.25rem; }

/* Een link die eruitziet als de knop ernaast. Geen <button> in een <form>,
   want dit is navigeren en niet iets verzenden. */
.aanmeldvak .knop {
    display: block;
    text-align: center;
    padding: .85rem 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 5px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    margin: 1.5rem 0 0;
}

.aanmeldvak .knop:hover { background: var(--accent-diep); }

/* Een keuze uit organisaties: brede knoppen onder elkaar, met de rol erbij.
   Groot genoeg om op een telefoon niet mis te tikken -- en mistikken betekent
   hier dat iemand in het dossier van de verkeerde praktijk begint. */
.keuzeknop {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    padding: 1rem 1.1rem;
    margin: 0 0 .75rem;
    cursor: pointer;
    font: inherit;
    color: var(--inkt);
}

.keuzeknop:hover {
    border-color: var(--accent);
    background: var(--achtergrond);
}

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

.keuzenaam { display: block; font-weight: 700; font-size: 1.05rem; }
.keuzerol  { display: block; font-size: .85rem; color: var(--gedempt); margin-top: .15rem; }

@media (max-width: 30rem) {
    .aanmeldvak { padding-top: 6vh; }
    .aanmeldvak h1 { font-size: 1.9rem; }
}


/* ---------------------------------------------------------------
   Het tenantoverzicht
   ---------------------------------------------------------------
   Vijf kolommen in plaats van negen. De tabel is puur overzicht: lezen doe je
   hier, handelen op de pagina van de tenant. Zonder die scheiding groeit de
   tabel mee met elke instelling die erbij komt.
   --------------------------------------------------------------- */

.slugregel {
    display: block;
    font: .78rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace;
    color: var(--gedempt);
    font-weight: 400;
}

.telling { font-size: .9rem; color: var(--gedempt); }
.telling strong { color: var(--inkt); font-weight: 600; }

/* Een stand als etiket in plaats van als los woord: op een rij met cijfers
   springt kleur alleen niet genoeg in het oog. */
.pil {
    display: inline-block;
    padding: .12rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.pil-actief { background: #e6f2e9; color: #2f6b3d; }
.pil-op     { background: var(--waarschuwing-vlak); color: var(--waarschuwing); }

table.tenants td.acties { white-space: nowrap; }


/* ---------------------------------------------------------------
   Teamgesprekken in de lijst
   ---------------------------------------------------------------
   Een teamgesprek staat tussen de eigen gesprekken. Het onderscheid moet dus
   uit een ETIKET blijken en niet uit een kleurtje: wie kleurenblind is of snel
   kijkt, ziet anders het verschil niet -- en dat verschil bepaalt of iemand
   denkt dat hij als enige naar dit gesprek kijkt.
   --------------------------------------------------------------- */

.team-etiket {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .5rem;
    padding: .1rem .5rem .1rem .4rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #3d5470;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.team-etiket svg { flex: none; }

/* Op een eigen regel: bij een lang onderwerp zou dit anders de titel opdringen.
   De kleur en dikte moeten expliciet: de cel .hoofd zet vet en donker, en dan
   trekt deze regel evenveel aandacht als het onderwerp zelf. */
td.hoofd .beantwoord {
    display: block;
    margin-top: .2rem;
    font-size: .8rem;
    font-weight: 400;
    color: var(--gedempt);
}


/* ===============================================================
   HET WERKBLAD: gesprekken naast het gekozen gesprek
   ===============================================================
   Links de lijst, rechts het gesprek. Beide scrollen apart, zodat de lijst
   blijft staan als iemand een lang gesprek doorleest.

   GEEN SCRIPT
   Een gesprek openen is een gewone paginalading. De indeling blijft, maar het
   is geen instant wissel -- en er wordt niets vanzelf bijgewerkt. Automatisch
   verversen zou het antwoordveld leeggooien terwijl iemand typt.
   =============================================================== */

body:has(> .werkblad) { overflow: hidden; }

/* ===============================================================
   HET CONTACTDETAIL
   ===============================================================
   Bovenaan een regel merkjes met wat er bekend is; daaronder de drie gegevens
   als kaartjes naast elkaar.

   De vraag die een medewerker heeft is: hoe komt deze persoon binnen? Die stond
   eerst verspreid over drie tabelrijen die je stuk voor stuk moest lezen.
   =============================================================== */

/*
 * OPVULLING RONDOM.
 *
 * De klasse 'draad' bestaat alleen in stijl.css, het GASTENstijlblad -- op het
 * contactenscherm deed hij dus niets, en de inhoud plakte tegen de randen van
 * de kolom.
 *
 * Een eigen klasse, zodat duidelijk is waar deze opvulling vandaan komt.
 */
.contact-detail {
    padding: 1.2rem 1.4rem 1.6rem;
    overflow-y: auto;
    min-height: 0;
}

@media (max-width: 40rem) {
    .contact-detail { padding: 1rem; }
}

.samenvatting {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin: .2rem 0 1rem;
}

.merkje {
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 999px;
}

.m-ja { background: #e6f2ea; color: #2f6b3d; }
.m-nee { background: var(--achtergrond); color: var(--gedempt); }

.gegevens {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

.gegeven {
    flex: 1 1 15rem;
    min-width: 0;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    padding: .85rem .95rem;
    background: var(--vlak);
    /* Links uitlijnen: de knopopmaak centreert, en dat trekt anders de hele
       kaart mee. */
    text-align: left;

    /*
     * DE VELDEN OP GELIJKE HOOGTE.
     *
     * De toelichting boven het veld verschilt per tegel -- de een heeft twee
     * regels, de ander een. De kaartjes zijn wel even hoog (flex rekt ze op),
     * maar de inhoud stond bovenaan, dus een kortere tekst duwde zijn veld
     * hoger dan de buren.
     *
     * Een kolom, met het formulier op 'auto' erboven: dat duwt hem naar de
     * onderkant, en dan liggen alle velden en knoppen gelijk.
     */
    display: flex;
    flex-direction: column;
}



/* Wat NIET bekend is, krijgt een grijze achtergrond -- dan zie je het zonder te
   lezen.

   'onbekend' en niet 'leeg': die naam is al bezet door het lege gespreksscherm,
   dat alles centreert. */
.gegeven.onbekend { background: var(--achtergrond); }

/* Geblokkeerd of overleden: rood, want dit vraagt om aandacht en het sluit
   lopende gesprekken af. */
.gegeven.geblokt {
    background: var(--waarschuwing-vlak);
    border-color: var(--waarschuwing);
}

.gegeven h4 {
    margin: 0 0 .35rem;
    font-size: .72rem;
    color: var(--gedempt);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

.gegeven .waarde {
    font-size: .98rem;
    font-weight: 600;
    margin: 0 0 .15rem;
    word-break: break-all;
}

.gegeven .waarde.stil { color: var(--gedempt); font-weight: 400; }

.gegeven .toe {
    font-size: .78rem;
    color: var(--gedempt);
    margin: .2rem 0 .6rem;
    line-height: 1.4;
    /* Vult de ruimte op, zodat het formulier eronder naar de onderkant zakt en
       alle velden op gelijke hoogte staan. */
    flex: 1;
}

/* margin-top:auto duwt het formulier naar de onderkant, ook in een tegel
   zonder toelichting. Samen met de vorige regel liggen alle velden gelijk.
   In EEN regel, want een tweede '.gegeven form' zou deze overschrijven. */
.gegeven form { margin: auto 0 0; }

.gegeven input {
    width: 100%;
    box-sizing: border-box;
    font-size: .88rem;
    padding: .4rem .5rem;
    margin-bottom: .4rem;
}

.knoppen { display: flex; gap: .4rem; }

/* De algemene knopregel zet width:100%; in een kaartje hoort een knop zijn
   eigen maat te houden. */
.knopje {
    width: auto;
    margin: 0;
    font-size: .8rem;
    padding: .35rem .75rem;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    background: var(--vlak);
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
}

.knopje:hover { background: var(--achtergrond); }
.knopje.weg { color: var(--waarschuwing); }

/* Op een smal scherm onder elkaar. */
@media (max-width: 40rem) {
    .gegevens { flex-direction: column; }
}

/* ===============================================================
   HET OPSTELSCHERM, STAP 2
   ===============================================================
   De ontvanger staat vast (gekozen in stap 1) en de verificatie wordt als drie
   kaartjes getoond, met een merkje dat zegt hoe sterk elke weg is.

   Radioknoppen in een label: het beveiligingsbeleid staat geen scripts toe, dus
   het kaartje IS de radio. Zonder :has() zou de gekozen staat niet zichtbaar
   zijn zonder JavaScript.
   =============================================================== */

.wie-balk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    background: var(--achtergrond);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin-bottom: .8rem;
    font-size: .92rem;
}

.wie-balk a { color: var(--accent); font-size: .82rem; }

.kaart-kop {
    font-size: .95rem;
    margin: 0 0 .2rem;
}

.keuzekaarten {
    display: flex;
    gap: .6rem;
    margin-top: .6rem;
}

.keuzekaart {
    flex: 1;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    padding: .75rem .6rem;
    text-align: center;
    cursor: pointer;
    background: var(--vlak);
}

/* De radio zelf verbergen we niet: wie met het toetsenbord werkt, moet zien
   waar de aandacht staat. Hij staat wel klein en bovenaan. */
.keuzekaart input[type="radio"] { margin-bottom: .35rem; }

.keuzekaart .op {
    display: block;
    font-weight: 700;
    font-size: .86rem;
    margin-bottom: .25rem;
}

.keuzekaart .uitleg {
    display: block;
    font-size: .74rem;
    color: var(--gedempt);
    line-height: 1.35;
    margin-top: .3rem;
}

/* De gekozen kaart. Twee signalen: een rand en een vulling. Kleur alleen zou
   onvoldoende zijn voor wie kleuren slecht onderscheidt. */
.keuzekaart.aan,
.keuzekaart:has(input:checked) {
    border-color: var(--accent);
    border-width: 2px;
    padding: calc(.75rem - 1px) calc(.6rem - 1px);
    background: #f2f7fb;
}

.keuzekaart:focus-within {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.keuzekaart .merk {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 4px;
}

.keuzekaart .merk.sterk { background: #e6f2ea; color: #2f6b3d; }
.keuzekaart .merk.matig { background: var(--let-op-vlak); color: var(--let-op-rand); }
.keuzekaart .merk.zwak  { background: var(--waarschuwing-vlak); color: var(--waarschuwing); }

/*
 * EEN BEKENDE TOEGANGSCODE: geen leeg invoerveld.
 *
 * De gewone handeling is dan 'niets doen'. Een leeg veld nodigt uit tot
 * invullen, en dan overschrijft iemand ongemerkt een code die een collega
 * telefonisch heeft afgesproken.
 *
 * Het veld verschijnt pas als het vinkje aan staat. Weer met :has(), en weer
 * in de richting die veilig faalt: staat de melding er NIET (dus is er geen
 * bekende code), dan doet deze regel niets en staat het veld gewoon.
 */
.code-bekend {
    background: var(--achtergrond);
    border-radius: 8px;
    padding: .7rem .85rem;
    margin-bottom: .6rem;
}

.code-bekend p { margin: 0 0 .4rem; }
.code-bekend p:last-of-type { margin-bottom: .5rem; }

/* Het vinkje NAAST zijn tekst.
   .code-bekend label.naast en niet .code-bekend label: die eerste heeft twee
   klassen en wint anders, waardoor het label inline blijft en het vinkje erboven
   komt te staan. Specificiteit telt hier, niet de volgorde. */
.code-bekend label.naast {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-weight: 400;
    margin: 0;
}

/*
 * DE BREEDTE TERUGZETTEN.
 *
 * Het codeblok staat in een <div class="veld">, en '.veld input' zet width op
 * 100%. Een checkbox erft dat, en met flex:none betekent dat 'neem de volle
 * breedte en krimp niet' -- de tekst ernaast wordt dan weggeduwd.
 *
 * width:auto laat de checkbox zijn eigen maat houden.
 */
.code-bekend label input[type="checkbox"] {
    flex: none;
    width: auto;
    margin: .15rem 0 0;
}

/* Is er een bekende code EN staat het vinkje uit, dan geen invoerveld. */
.bij-code:has(.code-bekend) .code-invoer { display: none; }

.bij-code:has(.code-bekend input[name="nieuwe_code"]:checked) .code-invoer {
    display: block;
}

/*
 * ALLEEN HET VELD DAT BIJ DE KEUZE HOORT.
 *
 * Kiest iemand sms, dan hoort het nummerveld te staan en het codeveld niet.
 * Dat kan met CSS alleen; scripts mogen niet (default-src 'none').
 *
 * DE RICHTING IS ZORGVULDIG GEKOZEN: standaard ZICHTBAAR, verbergen bij een
 * andere keuze. Kent een browser :has() niet, dan blijven beide velden gewoon
 * staan -- precies zoals het vroeger was.
 *
 * Andersom -- standaard verborgen, tonen bij de juiste keuze -- zou op zo'n
 * browser betekenen dat de velden NOOIT verschijnen, en dan kan niemand een
 * nummer of code invullen. Een regel die stukgaat hoort terug te vallen op
 * bruikbaar, niet op onbruikbaar.
 */
.verificatie-blok:has(.keuzekaart input[value="code"]:checked) .bij-sms,
.verificatie-blok:has(.keuzekaart input[value="email"]:checked) .bij-sms {
    display: none;
}

.verificatie-blok:has(.keuzekaart input[value="sms"]:checked) .bij-code,
.verificatie-blok:has(.keuzekaart input[value="email"]:checked) .bij-code {
    display: none;
}

/* Op een smal scherm onder elkaar: drie kaartjes naast elkaar op 380px is
   onleesbaar. */
@media (max-width: 40rem) {
    .keuzekaarten { flex-direction: column; }
}

/* ===============================================================
   DE TAAKBALK
   ===============================================================
   Verticaal links, alleen pictogrammen. Drie plekken: gesprekken, contacten,
   instellingen.

   VAST en niet meescrollend: hij hoort er te zijn waar je ook bent in een lange
   lijst. Daarom position: fixed en een marge links op wat erna komt -- een
   flexkolom zou meescrollen met de rest.
   =============================================================== */

.taakbalk {
    position: fixed;
    left: 0;
    top: var(--balk-hoogte);
    bottom: 0;
    width: 3.4rem;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding-top: .8rem;

    background: var(--accent-diep, #0d2f49);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.taakbalk a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
}

.taakbalk a:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* De huidige plek. Een lichte vulling en niet alleen een kleur: wie kleuren
   slecht onderscheidt, ziet het vlak wel. */
.taakbalk a.aan {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.taakbalk a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Tekst die alleen een schermlezer hoort. clip-path en niet display:none: dat
   laatste haalt hem uit de voorleesvolgorde, en dan hoort niemand waar de link
   heen gaat. */
.verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Alles wat na de balk komt, schuift op.
 *
 * HET WERKBLAD sluit aan op de balk: dat is een vlak zonder kader, en een kier
 * ertussen zou een streep achtergrond opleveren.
 *
 * MAIN is een kaart met een rand en een schaduw. Die hoort niet tegen de balk
 * te plakken -- vandaar de balkbreedte PLUS de marge die hij ook boven en onder
 * heeft. Zonder die optelling overschrijft margin-left de 'auto' uit
 * `margin: 1.5rem auto` en raakt de kaart de balk.
 */
/*
 * De hoofdinhoud naast de balk.
 *
 * MET EEN EIGEN KLASSE en niet met body:has(...). Die selector werkt in
 * browsers, maar hij hangt af van een structuur die je nergens ziet staan --
 * en hij faalt stil als er ooit een omhullend element bij komt. Een klasse die
 * de laag zelf zet, is te volgen door wie het sjabloon leest.
 *
 * De marge is de balkbreedte PLUS de ruimte die main ook boven en onder heeft.
 * Zonder die optelling plakt de kaart tegen de balk.
 */
main.naast-balk {
    margin-left: calc(3.4rem + 1.5rem);
    margin-right: 1.5rem;
}

/*
 * OP EEN TELEFOON ONDERAAN.
 *
 * Een verticale balk naast een lijst van 380px past niet op 380px scherm. En
 * onderaan is waar een duim komt; dat is wat mensen van hun telefoon kennen.
 */
@media (max-width: 40rem) {
    .taakbalk {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: 3.4rem;

        flex-direction: row;
        justify-content: space-around;
        padding-top: 0;

        border-right: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .werkblad,
    main.naast-balk {
        /* Op een telefoon staat de balk onderaan, dus geen marge opzij. */
        margin-left: .75rem;
        margin-right: .75rem;
        /* Ruimte onderaan, anders staat de balk over de laatste regel heen. */
        padding-bottom: 3.4rem;
    }
}

.werkblad {
    /* Sluit aan op de taakbalk: dit is een vlak zonder kader, en een kier
       ertussen zou een streep achtergrond opleveren. */
    margin-left: 3.4rem;
    display: flex;
    /* Wat er boven staat: de balk, en soms de banner voor noodtoegang. De
       hoogte daarvan verschilt dus per situatie; vandaar min-height en niet een
       vast getal. */
    min-height: calc(100vh - var(--balk-hoogte));
    max-height: calc(100vh - var(--balk-hoogte));
    background: var(--vlak);
}

.kolom-lijst {
    width: 380px;
    flex: none;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--lijn);
    min-height: 0;
}

.lijst-kop {
    flex: none;
    padding: .9rem 1rem .7rem;
    border-bottom: 1px solid var(--lijn);
}

.lijst-kop-boven {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .7rem;
}

.lijst-kop h1 { font-size: 1.05rem; margin: 0; }

/*
 * De knop voor een nieuw bericht.
 *
 * Boven de lijst en niet in de balk erboven: een nieuw bericht beginnen is de
 * handeling die het vaakst gebeurt, en die hoort op het scherm te staan waar
 * iemand werkt. Hij blijft ook staan als de lijst is doorgescrold.
 */
/*
 * Verversen, naast de titel.
 *
 * margin-left: auto DUWT hem naar rechts; 'Nieuw bericht' doet hetzelfde en
 * komt daardoor er weer naast te staan. Zonder dit plakt hij tegen de titel.
 *
 * Rustig van vorm: het is een handeling die vaak wordt gedaan maar nooit de
 * belangrijkste is. Een tweede gevulde knop naast 'Nieuw bericht' zou om
 * aandacht concurreren met de knop die er wel toe doet.
 */
.knop-ververs {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--lijn);
    border-radius: 7px;
    background: var(--vlak);
    text-decoration: none;
}

/* Alleen de rand reageert op aanwijzen. Het pictogram is een afbeelding met
   eigen kleuren; die volgt geen tekstkleur zoals de vorige tekening deed. */
.knop-ververs:hover {
    border-color: var(--accent);
}

.knop-ververs img {
    display: block;
}

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

/* 'Nieuw bericht' staat er direct naast; die hoeft niet nog eens te duwen. */
.knop-ververs + .knop-nieuw {
    margin-left: .5rem;
}

.knop-nieuw {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.knop-nieuw:hover { background: var(--accent-diep); }
.knop-nieuw.aan { background: var(--accent-diep); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.knop-nieuw span { font-size: 1.05rem; line-height: 1; }

.filters { display: flex; gap: .4rem; flex-wrap: wrap; }

.filter {
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--lijn);
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gedempt);
    text-decoration: none;
    white-space: nowrap;
}

.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter.aan { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter .telling { opacity: .75; font-weight: 400; }

.gesprekken { flex: 1; overflow-y: auto; min-height: 0; }

/* Flexbox en geen grid: voor twee kolommen naast elkaar even correct, en het
   valt niet om in oudere weergaven. */
.regel {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--lijn-zacht, #e6eaf0);
    text-decoration: none;
    color: inherit;
}

.regel:hover { background: #f7f9fb; }

.regel.gekozen {
    background: #edf9f8;
    box-shadow: inset 3px 0 0 #26746c;
}

/* Zonder min-width:0 duwt een lang onderwerp de afkorting met puntjes weg en
   loopt de regel uit de kolom. */
.regel-tekst { flex: 1; min-width: 0; }

.teken {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8edf3;
    color: var(--accent);
    flex: none;
}

.teken.team { background: #edf9f8; color: #26746c; }

.regel-boven { display: flex; align-items: baseline; gap: .5rem; }

.regel-naam {
    font-weight: 700;
    font-size: .96rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * HET ONDERWERP ONDER DE NAAM.
 *
 * De lijst toonde alleen het onderwerp, en die zijn vaak nietszeggend of dubbel
 * -- vier gesprekken 'Test' onder elkaar zeggen niets. De naam staat nu boven,
 * het onderwerp eronder in kleiner grijs.
 */
.regel-onderwerp {
    display: block;
    font-size: .82rem;
    color: var(--gedempt);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .05rem;
}

/*
 * BIJNA VERLOPEN: binnen zeven dagen.
 *
 * Oranje, want dit vraagt om aandacht maar is geen storing. Nu de bewaartermijn
 * opschuift bij elk bericht, wordt dit belangrijker: een gesprek dat de
 * bovengrens nadert is niet meer te verlengen.
 */
.verloopt-bijna {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    color: var(--let-op-rand);
    background: var(--let-op-vlak);
    border-radius: 4px;
    padding: .05rem .4rem;
    margin-top: .15rem;
}

/*
 * WIE HET BERICHT SCHREEF.
 *
 * Eerst was dat alleen aan de uitlijning te zien. Bij drie berichten onder
 * elkaar is dat te weinig -- zeker in een teamgesprek, waar 'wij' meerdere
 * mensen kan zijn.
 *
 * Kleur EN tekst: wie kleuren slecht onderscheidt, leest gewoon de naam.
 */
.wie-schreef {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.wie-schreef.ik { color: var(--accent); }
.wie-schreef.gast { color: #2f6b3d; }

.regel-tijd { margin-left: auto; font-size: .76rem; color: var(--gedempt); flex: none; }

.regel-onder {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .2rem;
    font-size: .82rem;
    color: var(--gedempt);
    min-height: 1.3em;
}

.regel-onder .rest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bolletje {
    margin-left: auto;
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
}

.stand { font-weight: 700; flex: none; }
.stand.wacht { color: var(--accent); }
.stand.gelezen { color: #2f6b3d; }
.stand.ongelezen { color: var(--let-op-rand); }

/* Niet aangekomen: rood, want dit vraagt om een handeling. De patient heeft de
   link nooit gekregen, en dat lost zichzelf niet op. */
.stand.mislukt { color: var(--waarschuwing); }

/* Afgehandeld: gedempt. Er wacht niets meer, dus het hoort niet op te vallen
   naast een gesprek dat wel op iemand wacht. */
.stand.afgehandeld { color: var(--gedempt); }

/* Een account dat elders wordt beheerd. Rustig van vorm: het is een
   aanduiding, geen waarschuwing. */
.merk-idp {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    color: var(--accent);
    background: #eef4f9;
    border-radius: 4px;
    padding: .1rem .4rem;
    margin-top: .15rem;
}

/* --- de rechterkolom --- */

.kolom-gesprek {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #f5f7f9;
}

.gesprek-kop {
    flex: none;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1.3rem;
    background: #fff;
    border-bottom: 1px solid var(--lijn);
}

.gesprek-kop .titel { font-weight: 700; }
.gesprek-kop .onder { font-size: .82rem; color: var(--gedempt); }
.kop-tekst { min-width: 0; }

.kop-knop {
    padding: .4rem .8rem;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: .85rem;
    color: var(--inkt);
    text-decoration: none;
    flex: none;
}

.berichten {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.bericht {
    max-width: min(72%, 40rem);
    padding: .7rem .9rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--lijn);
}

.bericht.eigen { align-self: flex-end; background: #e7f2ec; border-color: #cfe4d8; }
.bericht p { margin: 0; font-size: .95rem; }

.bericht-voet {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .4rem;
    font-size: .74rem;
    color: var(--gedempt);
}

.bericht-voet form { margin: 0; }

.stil-knopje {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--waarschuwing);
    font: inherit;
    font-size: .74rem;
    text-decoration: underline;
    cursor: pointer;
}

.bijlage {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .55rem;
    padding: .5rem .65rem;
    border: 1px solid var(--lijn);
    border-radius: 7px;
    background: #fbfcfd;
    font-size: .87rem;
    text-decoration: none;
    color: var(--inkt);
}

.bijlage .naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bijlage .maat { color: var(--gedempt); font-size: .8rem; margin-left: auto; flex: none; }

.ingetrokken {
    align-self: center;
    font-size: .82rem;
    color: var(--gedempt);
    font-style: italic;
    background: #eef1f5;
    padding: .35rem .8rem;
    border-radius: 999px;
}

.antwoord {
    flex: none;
    border-top: 1px solid var(--lijn);
    background: #fff;
    padding: .9rem 1.3rem 1rem;
}

.antwoord label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.antwoord textarea { width: 100%; resize: vertical; margin: 0; }

.antwoord-onder {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .7rem;
}

.antwoord-onder label { margin: 0; }
.antwoord-onder input[type=file] { flex: 1; min-width: 0; margin: 0; }

/*
 * Afhandelen zonder te antwoorden: een smalle balk tussen de berichten en het
 * antwoordveld, want daar valt de beslissing. Rustig van vorm -- een gewone
 * handeling, geen waarschuwing -- en de knop in de tweede stijl, zodat
 * Versturen de hoofdknop blijft.
 */
.afhandelen {
    flex: none;
    border-top: 1px solid var(--lijn);
    background: #fff;
    padding: .6rem 1.3rem;
}

.afhandelen form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin: 0;
}

.afhandelen form .klein { flex: 1 1 14rem; }
.afhandelen button { width: auto; margin: 0; padding: .45rem 1rem; flex: none; }
.afhandelen .let-op { margin: 0 0 .5rem; }
.verstuur { width: auto; margin: 0; padding: .6rem 1.4rem; flex: none; }

.leeg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--gedempt);
    text-align: center;
    padding: 2rem;
}

.leeg p { margin: 0; max-width: 24rem; }
.leeg .leeg-kop { font-weight: 600; color: var(--inkt); }

/* --- smal scherm: lijst OF gesprek --- */

.terug { display: none; }

@media (max-width: 60rem) {
    .kolom-lijst { width: 100%; border-right: 0; }
    .werkblad.toont-gesprek .kolom-lijst { display: none; }
    .werkblad:not(.toont-gesprek) .kolom-gesprek { display: none; }
    .terug { display: inline-flex; }
    .bericht { max-width: 88%; }
}


/* ---------------------------------------------------------------
   Het opstelformulier, in de rechterkolom van het werkblad
   ---------------------------------------------------------------
   Dezelfde plek als een gesprek, zodat de lijst links blijft staan. Wie
   halverwege bedenkt dat hij eerst een lopend gesprek wil nalezen, raakt zijn
   plek niet kwijt.
   --------------------------------------------------------------- */

.opstellen {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 1.3rem;
}

.opstellen form { max-width: 46rem; }

.veld { margin-bottom: 1.1rem; }
.veld label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .3rem; }
.veld input, .veld select, .veld textarea { width: 100%; margin: 0; }
.veld .klein { margin: .35rem 0 0; }

/* Twee velden naast elkaar waar dat kan: het formulier is lang, en een adres
   naast een telefoonnummer scheelt scrollen zonder dat het gedrongen wordt. */
.veld-paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.2rem;
}

@media (max-width: 48rem) {
    .veld-paar { grid-template-columns: 1fr; }
}

.opstellen-voet {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-top: .4rem;
    border-top: 1px solid var(--lijn);
    margin-top: .4rem;
}

.opstellen-voet .verstuur { margin-left: auto; }
.opstellen .fout, .opstellen .let-op { margin-bottom: 1rem; }