:root {
    --hisco-blauw: #0b5d8a;
    --hisco-blauw-donker: #073f5c;
    --hisco-grijs: #f4f6f8;
    --hisco-rand: #d7dee4;
    --hisco-tekst: #1f2933;
    --hisco-fout: #b3261e;
    --hisco-succes: #1b7f4c;
    /* Waarschuwing (Fase 2 EPD-bouwplan, 2026-08-28): bewust een derde,
       amberkleurige toon — geen fout (rood) en geen bevestiging (groen),
       zie .hisco-waarschuwing hieronder. */
    --hisco-waarschuwing: #9a6700;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--hisco-grijs);
    color: var(--hisco-tekst);
}

/* Op verzoek van de gebruiker (2026-08-23: "laat de blauwe balk met menu
   altijd staan [bij scrollen], tenzij specifiek anders vermeldt") — sticky
   i.p.v. static, zodat het menu bereikbaar blijft op lange pagina's.
   z-index hoger dan alles eronder (dropdown-lijstjes zelf zitten op 10,
   zie .hisco-header-dropdown ul) zodat de balk nooit onder pagina-inhoud
   verdwijnt tijdens het scrollen. */
header.hisco-header {
    background: var(--hisco-blauw-donker);
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

header.hisco-header a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Twee groepen in de blauwe balk: links het logo + het Administratie-menu,
   rechts "Mijn gegevens"/"Uitloggen" — header.hisco-header verdeelt ze met
   `justify-content: space-between` (zie hierboven). Zonder ingelogde
   gebruiker bestaat alleen de linkergroep (met alleen het logo erin). */
.hisco-header-links,
.hisco-header-rechts {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Praktijknaam achter de HISCO-knop (op verzoek van de gebruiker,
   2026-08-29) — gedempte, secundaire tekst naast het logo. */
.hisco-header-praktijk {
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Live zoekveld patiënt in de menubalk (op verzoek van de gebruiker,
   2026-08-29 — vervangt het "Patiënt zoeken"-kader; zie het scriptje in
   layouts/app.blade.php). Het keuzekader hangt onder het veld: per
   treffer regel 1 (geboortedatum, geslachtsletter, klikbare naam, W-knop
   voor het woonverband) en regel 2 (adres). */
.hisco-header-zoek {
    position: relative;
}

.hisco-header-zoek input {
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    color: var(--hisco-tekst);
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
    width: 12rem;
}

/* Zoek patiënt-veld op het werkscherm (boven het Agenda-kader, zie
   werkscherm/_agenda-patient-zoeken.blade.php) 50% breder op verzoek van
   de gebruiker (2026-09-04: "Maak invoerveld Zoek patient 50% breder") —
   12rem -> 18rem. Losse, op het id gerichte regel i.p.v. .hisco-header-zoek
   input hierboven aan te passen, want die klasse wordt ook door het
   Zoek patiënt-veld in de menubalk gebruikt (zie #hisco-header-zoek in
   layouts/app.blade.php), dat hier niet breder van hoeft te worden. */
#agenda-patient-zoek-kader input {
    width: 18rem;
}

.hisco-header-zoek-lijst {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 110;
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
    color: var(--hisco-tekst);
    min-width: 26rem;
    max-width: 34rem;
}

.hisco-zoek-live-item {
    border-bottom: 1px solid var(--hisco-rand);
    padding: 0.4rem 0.6rem;
}

.hisco-zoek-live-item:last-child {
    border-bottom: none;
}

.hisco-zoek-live-regel1 {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.hisco-zoek-live-regel1 > span {
    color: #6b7785;
    font-size: 0.85rem;
}

.hisco-zoek-live-naam {
    background: none;
    border: none;
    color: var(--hisco-blauw);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-align: left;
    text-decoration: underline;
}

/* Achtergrond expliciet op hover (op verzoek van de gebruiker, 2026-09-09:
   "bij hover over een klikkable tekst krijgt de tekst een donkerblauwe
   achtergrond, wordt daardoor onleesbaar. Maak in dit geval de
   achtergrondkleur lichtgrijs") — zonder deze override wint de globale
   `button:hover, .hisco-knop:hover`-regel hierboven (donkerblauwe
   achtergrond) alsnog, terwijl deze knop zijn eigen tekstkleur houdt:
   donkerblauwe tekst op donkerblauw is onleesbaar. Zelfde soort lek als
   bij .hisco-icpc-suggestie-knop verderop in dit bestand, hier met
   lichtgrijs (var(--hisco-grijs)) i.p.v. background:none als fix, op
   uitdrukkelijk verzoek van de gebruiker — voortaan de standaardfix voor
   dit patroon in dit bestand. */
.hisco-zoek-live-naam:hover {
    background: var(--hisco-grijs);
    color: var(--hisco-blauw-donker);
}

/* Kleine omkaderde W rechts op de eerste regel: vervangt het keuzekader
   door het adres met de leden van het woonverband. */
.hisco-zoek-live-w {
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 4px;
    color: var(--hisco-tekst);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1.3;
    margin: 0 0 0 auto;
    padding: 0 0.35rem;
}

.hisco-zoek-live-w:hover {
    background: var(--hisco-grijs);
}

.hisco-zoek-live-regel2 {
    color: #6b7785;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 0.1rem;
}

.hisco-zoek-live-adres {
    border-bottom: 1px solid var(--hisco-rand);
    font-weight: 600;
    padding: 0.4rem 0.6rem;
}

.hisco-zoek-live-leeg {
    color: #6b7785;
    font-size: 0.9rem;
    font-style: italic;
    padding: 0.4rem 0.6rem;
}

/* Administratie-menu in de blauwe balk (verplaatst uit de linker zijbalk,
   zie werkscherm/_menu.blade.php). Klik-om-te-tonen via <details>/
   <summary> — geen JS nodig; het element sluit vanzelf bij een volgende
   klik op de summary, of via het "klik ergens anders"-gedrag van de
   browser wanneer gewenst. */
.hisco-header-dropdown {
    position: relative;
}

.hisco-header-dropdown summary {
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    list-style: none;
}

.hisco-header-dropdown summary::-webkit-details-marker {
    display: none;
}

.hisco-header-dropdown summary::after {
    content: " \25BE";
    font-size: 0.8em;
}

.hisco-header-dropdown ul {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    margin: 0;
    padding: 0.4rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    z-index: 10;
}

.hisco-header-dropdown li {
    margin: 0;
}

.hisco-header-dropdown ul a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--hisco-tekst);
    font-weight: normal;
    font-size: 0.95rem;
}

.hisco-header-dropdown ul a:hover {
    background: var(--hisco-grijs);
    color: var(--hisco-blauw);
}

/* Praktijk-keuzelijst achter HISCO (op verzoek van de gebruiker,
   2026-08-29): hergebruikt .hisco-header-dropdown (panel + klik-elders-
   sluit-script), met een knop i.p.v. een link per praktijk (wisselen is
   een POST). Kleinere summary-tekst dan de menu-items en een eigen
   caret (de ::after van de generieke dropdown staat daarom uit). */
.hisco-praktijk-keuze summary {
    font-size: 0.95rem;
    font-weight: normal;
}

.hisco-praktijk-keuze summary::after {
    content: none;
}

.hisco-praktijk-keuze-caret {
    color: #fff;
    font-size: 0.75em;
}

.hisco-praktijk-keuze-knop {
    background: none;
    border: none;
    color: var(--hisco-tekst);
    cursor: pointer;
    display: block;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    text-align: left;
    width: 100%;
}

.hisco-praktijk-keuze-knop:hover {
    background: var(--hisco-grijs);
    color: var(--hisco-blauw);
}

.hisco-praktijk-keuze-actief {
    background: var(--hisco-grijs);
    border: 1px solid var(--hisco-rand);
    border-radius: 999px;
    color: #6b7785;
    font-size: 0.75rem;
    margin-left: 0.5rem;
    padding: 0 0.4rem;
}

main {
    max-width: 640px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
}

.hisco-kaart {
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

h1 {
    font-size: 1.5rem;
    margin-top: 0;
}

h2 {
    font-size: 1.15rem;
}

label {
    display: block;
    font-weight: 600;
    margin: 1rem 0 0.25rem;
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
    font-family: inherit;
}

textarea {
    resize: vertical;
}

input:focus {
    outline: 2px solid var(--hisco-blauw);
    outline-offset: 1px;
}

input:disabled,
select:disabled {
    background: var(--hisco-grijs);
    color: #6b7785;
    cursor: not-allowed;
}

button:disabled, .hisco-knop:disabled {
    background: var(--hisco-rand);
    color: #6b7785;
    cursor: not-allowed;
}

button:disabled:hover, .hisco-knop:disabled:hover {
    background: var(--hisco-rand);
}

/* ALGEMENE REGEL (op verzoek van de gebruiker, 2026-09-05: "zoals
   gebruikelijk staat de button te laag in de regel: pas dit aan en maak
   daar een algemene regel van"): knoppen hebben standaard GEEN
   bovenmarge. De oude margin-top: 1.5rem hier liet knoppen in élke
   flex-rij telkens half onder de regel hangen en moest per nieuwe rij
   opnieuw worden teruggezet (.hisco-formrij, voettekst, conceptenlijst,
   episode-wijzigen, ...). Sinds nu geldt: geen marge; een knop in
   blok-context die afstand tot het element erboven nodig heeft krijgt
   die expliciet (inline style of een ouder-klasse) — zie ook de
   knoppen-conventie in AGENTS.md. */
button, .hisco-knop {
    display: inline-block;
    margin-top: 0;
    background: var(--hisco-blauw);
    color: #fff;
    /* Kaderrand dikker + blauw (op verzoek van de gebruiker, 2026-08-29);
       voor knoppen die later een andere randkleur krijgen (rood/groen)
       kan de border-color per klasse worden overschreven. */
    border: 2px solid var(--hisco-blauw);
    padding: 0.65rem 1.25rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}

button:hover, .hisco-knop:hover {
    background: var(--hisco-blauw-donker);
}

/* Algemene uitlijnregel voor knoppen ín een rij (op verzoek van de
   gebruiker, 2026-08-29: "button staat half onder de regel — maak er een
   algemene regel van om dit juist uit te lijnen"): de globale margin-top
   hierboven laat knoppen in flexibele rijen (.hisco-formrij en de
   episode-filter) steeds half onder de regel hangen; binnen zo'n rij is
   er daarom géén knop-marge en staat de knop op de middellijn. */
.hisco-formrij button,
.hisco-episode-filter button {
    margin-top: 0;
    align-self: center;
}

.hisco-knop-secundair {
    background: #fff;
    color: var(--hisco-blauw);
    border: 2px solid var(--hisco-blauw);
}

.hisco-knop-secundair:hover {
    background: var(--hisco-grijs);
}

/* Minibutton voor gevaarlijke acties (bijv. "<naam> deactiveren" op het
   bewerken-scherm van een medewerker, op verzoek van de gebruiker):
   rode omlijsting en tekst i.p.v. het blauw van .hisco-knop-secundair,
   transparante achtergrond; bij hover een lichtrode vulling. Na
   .hisco-knop-secundair geplaatst zodat de override wint. */
.hisco-knop-gevaar {
    color: var(--hisco-fout);
    border-color: var(--hisco-fout);
    background: transparent;
}

.hisco-knop-gevaar:hover {
    background: #fbeaea;
}

/* Groene rand voor de "Opslaan"-knop bij Zorgafspraak/Persoonlijk doel (op
   verzoek van de gebruiker, 2026-09-10: "Opslaan groene rand, sluiten
   blauwe rand, ... afsluiten rode rand") — zelfde opzet als
   .hisco-knop-gevaar hierboven, nu met --hisco-succes i.p.v. --hisco-fout.
   "Sluiten" gebruikt gewoon .hisco-knop-secundair, die al standaard een
   blauwe rand heeft. */
.hisco-knop-succes {
    color: var(--hisco-succes);
    border-color: var(--hisco-succes);
    background: transparent;
}

.hisco-knop-succes:hover {
    background: #e9f7ef;
}

.hisco-fout {
    background: #fbeaea;
    border: 1px solid var(--hisco-fout);
    color: var(--hisco-fout);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.hisco-succes {
    background: #e9f7ef;
    border: 1px solid var(--hisco-succes);
    color: var(--hisco-succes);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Waarschuwing (Fase 2 EPD-bouwplan, 2026-08-28) — bijv. "Journaalregel
   opgeslagen zonder verrichting" op werkscherm/dossier.blade.php: zelfde
   opzet als .hisco-fout/.hisco-succes hierboven, maar amberkleurig. */
.hisco-waarschuwing {
    background: #fdf3e2;
    border: 1px solid var(--hisco-waarschuwing);
    color: var(--hisco-waarschuwing);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Adviesblok: "wat hier nog moet gebeuren" op de onderwerp-schermen —
   bewust een ander kleurtje dan .hisco-fout (probleem) en .hisco-succes
   (bevestiging), want dit is een inschatting/mening, geen foutmelding. */
.hisco-advies {
    background: #eaf2fb;
    border: 1px solid var(--hisco-blauw);
    color: var(--hisco-tekst);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.hisco-advies strong {
    color: var(--hisco-blauw-donker);
}

.hisco-advies ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.hisco-advies li {
    margin-bottom: 0.4rem;
}

.hisco-links {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hisco-rand);
    display: flex;
    flex-direction: column;
    /* Zonder dit rekken flex-kinderen (bijv. een knop-link zoals "Terug
       naar EPD" op het autorisatie-scherm) uit tot de volle breedte — op
       verzoek van de gebruiker, 2026-08-29. */
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* Links in het Handelingen-kader (en de weergave-toggle) zonder
   onderstreping — "het zijn impliciet allemaal links" (op verzoek van de
   gebruiker, 2026-08-29); bij hover komt de onderstreping wél terug als
   zichtbaarheid-signaal. */
.hisco-links a {
    text-decoration: none;
}

.hisco-links a:hover {
    text-decoration: underline;
}

.hisco-fieldset {
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    padding: 0.5rem 1rem 1rem;
    margin-top: 1.5rem;
}

.hisco-fieldset legend {
    font-weight: 600;
    padding: 0 0.4rem;
}

/* Knop in een kaderlijn (bijv. "Patiënt zoeken" in het patiënt-zoeken-
   kader, op verzoek van de gebruiker, 2026-08-28) — de globale
   margin-top op button (zie hieronder) zou de kaderlijn uit elkaar
   trekken. */
.hisco-fieldset legend .hisco-knop {
    margin-top: 0;
}

/* Kaderlijn met een label links en een actie-knop rechts uitgelijnd (op
   verzoek van de gebruiker, 2026-09-07, eerst gebruikt bij "Patiënt
   sluiten" op het Dossier-kader van het EPD) — de legend als flex-rij
   over de volle breedte, zelfde flex-met-twee-vaste-kinderen-truc als
   .hisco-episode-kop/.hisco-journaal-datumregel elders in dit bestand,
   i.p.v. float (robuust ongeacht de lengte van de linkerkant). */
.hisco-fieldset legend.hisco-legend-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

/* De knoppen in een legend-rij vormen samen één groep rechts (op verzoek
   van de gebruiker, 2026-09-07: de kaderknoppen "Patiënt sluiten" en
   "Nieuw consult" van het EPD "vlak naast elkaar, rechts uitgelijnd") —
   zonder deze groep zet de space-between van .hisco-legend-rij elke knop
   apart uit elkaar over de regel. */
.hisco-legend-rij .hisco-legend-knoppen {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Strak boven de kaderlijn (op verzoek van de gebruiker, 2026-08-28):
   het "Patiënt zoeken"-kader in de selectie-/adresweergave — de
   standaard padding-top van .hisco-fieldset is daar onnodig veel
   ruimte tussen de kaderlijn en de eerste regel. */
.hisco-fieldset-strak {
    padding-top: 0;
}

/* ...én de globale margin-top: 1.5rem op button/.hisco-knop (zie
   hierboven) maakt de selectie-/adresregel extra hoog en zet de tekst
   daarmee alsnog te ver van de kaderlijn af — binnen deze regels geen
   knop-marge (op verzoek van de gebruiker, 2026-08-28, zie
   _patient-zoeken-kader.blade.php). */
.hisco-patient-zoeken-regel button,
.hisco-patient-zoeken-regel .hisco-knop {
    margin-top: 0;
}

/* Eén regel boven het Agenda-kader (op verzoek van de gebruiker,
   2026-09-04: "Boven agenda kader wil ik maar 1 regel hebben, de
   zoekregel. Met achteraan het selectievlak voor de te kiezen
   agenda") — flex-rij zodat het zoekveld/de selectie-/adresregel én
   de "Agenda voor"-select (zie werkscherm/_agenda-voor-select.blade.php)
   altijd op dezelfde regel staan (en pas wrapt op een smal scherm). Een
   <form> is standaard block-level — inline-flex hier zet 'm weer netjes
   op diezelfde regel. */
.hisco-agenda-topregel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.hisco-agenda-topregel form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

/* Dossierpagina (werkscherm/dossier.blade.php, op verzoek van de
   gebruiker, 2026-08-23): Probleemlijst/Dossier/Uitslagen naast elkaar
   i.p.v. onder elkaar — margin-top:0 op de geneste .hisco-fieldset omdat
   de tussenruimte hier al uit de grid-`gap` komt (anders dubbele
   ruimte). Tweede ronde (zelfde dag, op verzoek van de gebruiker):
   Probleemlijst en Uitslagen elk 15%, Dossier de rest. Derde ronde
   (zelfde dag, op verzoek van de gebruiker: "maak kolom probleemlijst 2
   karakters breder, zodat Allergieën / Intoleranties op 1 regel past"):
   linkerkolom (Allergieën/Intoleranties, Contra-indicaties, Probleemlijst
   — zie .hisco-dossier-kolom-links) 2ch breder dan Uitslagen. Vierde ronde
   (zelfde dag, op verzoek van de gebruiker, vervolg op de vorige
   ronde: "dit is prima maar ik bedoelde vooral de ruimtes links en
   rechts") — de horizontale `gap` tussen de linkerkolom, het
   Dossier-kader en Uitslagen ook van 1rem naar 0.5rem (er is hier maar
   één grid-rij, dus deze `gap` is puur de ruimte links/rechts tussen de
   drie kaders). */
.hisco-dossier-kaders {
    display: grid;
    /* Linkerkolom iets breder (op verzoek van de gebruiker, 2026-08-29:
       18% i.p.v. 15%, plus de 2ch voorsprong op de rechterkolom).

       Zesde ronde (op verzoek van de gebruiker, 2026-09-04: "Maak scherm
       96% van de breedte, dus 6% punt meer: 4 meer voor linker kolom, 2
       meer voor midden kolom" — de 96% zelf staat op body.hisco-breed-body
       main hierboven, was 90vw). Die 6 extra punten zijn punten van de
       hele schermbreedte, niet van deze kolommen-container zelf (die nu
       ook zelf breder is: 90vw -> 96vw) — de rechterkolom (Uitslagen /
       Handelingen) moest daarbij op precies dezelfde absolute breedte
       blijven staan (niet genoemd door de gebruiker = niet wijzigen), dus
       is diens percentage van 15% naar 14% verlaagd (15% van de oude
       90vw ≈ 14% van de nieuwe 96vw, dezelfde pixels). Linkerkolom: van
       18% (16,2% van het scherm) naar 21% van de nieuwe 96vw-container
       (≈ 20,2% van het scherm, dus +4 schermpunten). Middenkolom (1fr,
       de rest) komt daarmee automatisch op ≈ 65% van de container uit
       (≈ 62,3% van het scherm, dus +2 schermpunten) — geen expliciet
       percentage nodig, 1fr vult vanzelf wat overblijft. */
    /* Zevende ronde (op verzoek van de gebruiker, 2026-09-06: "verbreed
       de 3 kolommen tot 98% van de schermbreedte, wijs de extra ruimte
       toe aan het middenkader" — de 98% staat weer op
       body.hisco-breed-body main hierboven, was 96vw). Links en rechts
       houden hun ABSOLUTE breedte (niet genoemd = niet wijzigen), dus hun
       percentages zijn herschaald naar de bredere container: linkerkolom
       21% van 96vw (20,16vw) → 20,6% van 98vw; rechterkolom 14% van 96vw
       (13,44vw) → 13,7% van 98vw. De middenkolom (1fr) vult vanzelf wat
       overblijft en krijgt daarmee de volledige 2 extra schermpunten. */
    grid-template-columns: calc(20.6% + 2ch) 1fr 13.7%;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Vijfde ronde (zelfde dag, op verzoek van de gebruiker: "ook de ruimte
   links van het Probleemlijst kader en rechts van het Uitslagen kader")
   — .hisco-kaart heeft standaard 2rem padding rondom (elders in de app
   ook gebruikt, dus niet globaal aangepast); hier links/rechts gehalveerd
   naar 1rem, boven/onder blijft 2rem. Extra class op de buitenste
   .hisco-kaart in dossier.blade.php nodig om alleen deze pagina te
   raken. */
.hisco-dossier-kaart {
    padding-left: 1rem;
    padding-right: 1rem;
}

.hisco-dossier-kaders .hisco-fieldset {
    margin-top: 0;
}

/* Derde ronde (zelfde dag): de linkerkolom van .hisco-dossier-kaders is
   geen los kader meer, maar een verticale stapel van kaders (Allergieën/
   intoleranties, Contra-indicaties, Probleemlijst) — flex i.p.v. de
   fieldsets' eigen margin-top, want die is hierboven al op 0 gezet. Vierde
   ronde (zelfde dag, op verzoek van de gebruiker: "maak ruimte rond
   kaders Probleemlijst etc de helft smaller"): gap van 1rem naar 0.5rem. */
.hisco-dossier-kolom-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Summary-als-knop (bijv. "Allergieën en intoleranties toevoegen" — op
   verzoek van de gebruiker: "indien leeg, button om te openen"): een
   <summary> met de gewone .hisco-knop-styling maar zonder het standaard
   driehoekje ervoor. Zelfde principe als .hisco-header-dropdown summary
   hierboven, maar dan als button-vervanging i.p.v. dropdown-pijltje. */
.hisco-knop-summary {
    list-style: none;
}

.hisco-knop-summary::-webkit-details-marker {
    display: none;
}

/* Leeg kader zelf als "knop om te openen" (Allergieën/Intoleranties,
   Contra-indicaties — op verzoek van de gebruiker, 2026-08-23: "Opent bij
   klikken op leeg kader") — i.p.v. een klein los knopje: de hele
   (gestippelde) vlakte binnen het kader is hier de klikbare summary. */
.hisco-kader-leeg {
    display: block;
    cursor: pointer;
    text-align: center;
    color: #6b7785;
    font-style: italic;
    font-size: 0.9rem;
    padding: 0.75rem;
    border: 1px dashed var(--hisco-rand);
    border-radius: 6px;
}

.hisco-kader-leeg:hover {
    background: var(--hisco-grijs);
    border-color: var(--hisco-blauw);
    color: var(--hisco-blauw);
}

/* Compacte lijst met een klein verwijder-kruisje erachter (Allergieën/
   intoleranties, Contra-indicaties, Uitslagen-subhoofdjes). */
.hisco-dossier-lijst {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0;
}

.hisco-dossier-lijst li {
    margin-bottom: 0.35rem;
}

/* Weergavekeuze bovenaan het SNOMED-scherm (op verzoek van de gebruiker,
   2026-09-09, vervolgronde: "optie 1"/"optie 2" voor de resultaatregels)
   — de radio's op één regel i.p.v. de globale, blokkerige `label`-stijl
   elders (zie de kale `label`-regel hierboven: display:block met een
   forse boven-marge, bedoeld voor formuliervelden, niet voor deze
   inline-keuze). */
.hisco-snomed-weergave-keuze {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.hisco-snomed-weergave-keuze label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: normal;
    margin: 0;
}

/* SNOMED-scherm: klikbare resultaatregel + ICPC-3-koppeling (op verzoek
   van de gebruiker, 2026-09-09) — zelfde link-achtige knopstijl als
   .hisco-dossier-lijst-koppel hierboven. */
.hisco-snomed-resultaat-knop {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #0000ee;
    text-decoration: none;
    cursor: pointer;
}

/* Lichtgrijze achtergrond op hover i.p.v. de donkerblauwe van de globale
   button-regel (op verzoek van de gebruiker, 2026-09-09 — zie
   .hisco-zoek-live-naam:hover hierboven voor de volledige toelichting van
   dit lek/deze fix). */
.hisco-snomed-resultaat-knop:hover {
    background: var(--hisco-grijs);
    text-decoration: underline;
}

/* Omschrijving van de gekoppelde ICPC-3-code, op een nieuwe regel onder de
   aangeklikte resultaatregel (op verzoek van de gebruiker, 2026-09-09,
   vervolgronde) — gedempte stijl zoals .hisco-placeholder elders, dit is
   toelichting bij de regel erboven, geen actieve tekst. */
.hisco-snomed-icpc3-omschrijving {
    color: #6b7785;
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.hisco-snomed-kandidaten {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0;
}

.hisco-snomed-kandidaten li {
    margin-bottom: 0.25rem;
}

.hisco-snomed-kandidaten button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #0000ee;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

/* Zelfde lek/fix als .hisco-zoek-live-naam:hover hierboven. */
.hisco-snomed-kandidaten button:hover {
    background: var(--hisco-grijs);
    text-decoration: underline;
}

/* Minibutton "(geen ICPC-3-code)" onder de ICPC-3-kandidatenlijst (op
   verzoek van de gebruiker, 2026-09-09, vervolgronde) — ruimte t.o.v. de
   lijst erboven (of de "geen kandidaten"-tekst); de knop zelf hergebruikt
   gewoon .hisco-knop-secundair/.hisco-knop-mini. */
.hisco-snomed-kandidaten-veld > .hisco-knop-mini {
    margin-top: 0.5rem;
}

/* Episodetitel-links in het Episode-overzicht van de linkerkolom (op
   verzoek van de gebruiker, 2026-09-03: "die moeten niet onderstreept
   zijn") — zelfde geen-onderstreping-bij-hover-wel-patroon als
   .hisco-links hierboven (rechterkolom Handelingen). */
.hisco-dossier-lijst a {
    text-decoration: none;
}

.hisco-dossier-lijst a:hover {
    text-decoration: underline;
}

/* Koppel-modus in het Episode-overzicht van de linkerkolom (op verzoek
   van de gebruiker, 2026-09-04): zolang er een koppel-bron gekozen is,
   wordt de gewone <a> voor een episodenaam vervangen door een <button>
   in een eigen <form> (zie werkscherm/dossier.blade.php) — hier zo
   gestyled dat hij er, ondanks het knop-element, hetzelfde uitziet als
   de gewone episodetitel-link ernaast. */
.hisco-dossier-lijst-koppel {
    display: inline;
}

.hisco-dossier-lijst-koppel button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #0000ee;
    text-decoration: none;
    cursor: pointer;
}

/* Zelfde lek/fix als .hisco-zoek-live-naam:hover hierboven. */
.hisco-dossier-lijst-koppel button:hover {
    background: var(--hisco-grijs);
    text-decoration: underline;
}

.hisco-knop-mini {
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    margin-left: 0.4rem;
    line-height: 1.4;
}

/* Journaal (werkscherm/dossier.blade.php, Dossier-kader): één blok per
   journaalregel, met een dunne lijn ertussen — nieuwste regel bovenaan
   (zie DossierController::show()). */
/* Op verzoek van de gebruiker (eerst alleen binnen een episode dichter op
   elkaar, daarna: "maak padding 0,1 rem zowel bij op datum als op
   episode") — geldt nu voor beide weergaven, geen aparte
   .hisco-episode-groep-override meer nodig. */
.hisco-journaal-regel {
    padding: 0.1rem 0;
    border-bottom: 1px solid var(--hisco-rand);
}

.hisco-journaal-regel:last-child {
    border-bottom: none;
}

/* De echte "veel te ver uit elkaar" (op verzoek van de gebruiker: "dit is
   niet alleen de padding") kwam van de twee <p>'s in
   _dossier-journaalregel.blade.php (datum/badge-regel + SOEP-blok): die
   hebben zonder eigen regel de standaard browser-marge van een <p>
   (±1em boven én onder) — die telt op bij de padding hierboven. Hier
   expliciet op 0 gezet. */
.hisco-journaal-regel p {
    margin: 0;
}

.hisco-soep {
    margin-top: 0.35rem;
    font-size: 0.9rem;
}

.hisco-soep span {
    display: block;
}

/* Medicatieoverzicht (werkscherm/dossier.blade.php, bovenaan het
   Dossier-kader, vóór het journaalregel-invoerdeel — op verzoek van de
   gebruiker, 2026-08-26). Een gewone <div> (geen <details>), want dit
   moet zichtbaar blijven ook als .hisco-journaal-nieuw hieronder
   dichtgeklapt is — zie _dossier-medicatie.blade.php. */
.hisco-medicatieoverzicht {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hisco-rand);
}

.hisco-medicatieoverzicht-kop {
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.hisco-medicatie-lijst {
    list-style: none;
    padding-left: 0;
    margin: 0 0 0.75rem;
}

.hisco-medicatie-regel {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.2rem 0;
}

.hisco-medicatie-naam {
    font-weight: 600;
}

/* Laatste regel: het altijd-open invoerformulier voor nieuwe medicatie
   (op verzoek van de gebruiker: "laatste regel nieuw in te voeren
   medicatie") — hergebruikt .hisco-formrij (zelfde opzet als "Patiënt
   zoeken" elders), alleen hier zonder margin-top (staat al onder de
   lijst hierboven met eigen ruimte via .hisco-medicatie-lijst). */
.hisco-medicatie-nieuw-regel {
    margin-top: 0;
    align-items: flex-end;
}

.hisco-medicatie-nieuw-regel-knop {
    flex: 0 0 auto;
}

/* Journaalregel-invoerformulier (werkscherm/dossier.blade.php, op
   verzoek van de gebruiker, 2026-08-23, vervolgronde: "eerst
   invoervelden voor nieuwe invoer") — bovenaan het Dossier-kader, vóór
   het al vastgelegde journaal. Sinds de "sluit het hele invoerdeel"-ronde
   (zie de toelichting in _dossier-journaalregel-form.blade.php) is dit
   een <details> i.p.v. een kale <div> — sinds 2026-09-07 zonder
   <summary>: de bedieningsknoppen staan in de kaderlijn van het
   Dossier-kader (zie .hisco-journaal-sluit-knop hieronder) en dit
   <details> klapt uitsluitend via het open-attribuut. */
.hisco-journaal-nieuw {
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hisco-rand);
}

/* "Sluit invoerkader" staat sinds 2026-09-07 niet meer in een summary in
   het invoerkader zelf (die is hiermee vervallen, evenals de padding-top
   die ruimte voor die knop reserveerde), maar in de kaderlijn van het
   Dossier-kader, direct vóór en aansluitend aan "Patiënt sluiten" (op
   verzoek van de gebruiker) — en is daar alleen zichtbaar zodra het
   invoerkader open staat: met :has(), geen JS, zelfde patroon als de
   verborgen episode-filter hieronder (.hisco-dossier-bovenrij:has(...)).
   Openen kan via de kaderknop "Nieuw consult". */
.hisco-journaal-sluit-knop {
    display: none;
}

.hisco-fieldset:has(.hisco-journaal-nieuw[open]) .hisco-journaal-sluit-knop {
    display: inline-block;
}

/* Uitlegicoontje bij een labelnaam (op verzoek van de gebruiker: "zet i
   bij label ICPC code, popuptekst") — kleine, gedempte "ⓘ", toont zijn
   uitleg via de native `title`-tooltip (geen JS). */
.hisco-info-icoon {
    display: inline-block;
    margin-left: 0.15rem;
    color: var(--hisco-blauw);
    font-style: normal;
    font-weight: normal;
    cursor: help;
}

/* "Agenda toelichting" (zie PatientenController::toelichtingOpslaan()):
   blauwe accentrand + lichte achtergrond, zelfde signaalkleur als
   .hisco-advies elders — dit is context/herinnering, geen fout/
   bevestiging. */
.hisco-journaal-toelichting {
    border-left: 3px solid var(--hisco-blauw);
    background: var(--hisco-grijs);
    padding: 0.5rem 0.6rem;
    margin: 0 0 0.5rem;
}

/* Koppel-instructiekader bovenaan het episode-overzicht (op verzoek van
   de gebruiker, 2026-09-03, zie _dossier-episode-overzicht.blade.php) —
   hergebruikt .hisco-journaal-toelichting hierboven (zelfde blauwe
   context/herinnering-stijl), hier alleen tekst + Annuleren-knop op één
   regel uit elkaar getrokken. */
.hisco-episode-koppel-kader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Datumregel van het deelcontact, lichtgroene achtergrond (op verzoek van
   de gebruiker, 2026-09-03, epd-scherm in "Deelconsulten"-weergave) —
   zelfde lichtgroene tint als .hisco-succes hierboven (#e9f7ef), hier
   puur decoratief (geen bevestiging), dus zonder rand/tekstkleur. */
.hisco-journaal-datumregel {
    background: #e9f7ef;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    /* Tijd/duur rechts uitgelijnd (op verzoek van de gebruiker,
       2026-09-04) — zelfde flex-met-twee-vaste-kinderen-truc als
       .hisco-episode-kop hierboven, i.p.v. float: robuust ongeacht de
       lengte van de linkerkant. */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

/* Gedeeld door .hisco-journaal-datumregel hierboven en
   .hisco-deelcontact > summary hieronder — zie de toelichting daar. */
.hisco-journaal-datumregel-rechts {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #6b7785;
    font-size: 0.85rem;
}

/* Reden voor afspraak, teruggetoond bij een al vastgelegde journaalregel
   (op verzoek van de gebruiker: "later bv deze regels teruggeroepen
   kunnen worden", zie journaal_regels.reden_afspraak) — gedempte,
   cursieve stijl zoals .hisco-placeholder elders, bewust geen
   accentkleur/kader zoals hierboven: dit is hier een terugblik, geen
   actuele herinnering. Lichtgrijze achtergrond (op verzoek van de
   gebruiker, 2026-09-03) — zelfde grijstint als de paginabody
   (var(--hisco-grijs)), zodat de regel zich zichtbaar afzet tegen het
   witte kader eromheen. */
.hisco-journaal-reden-afspraak {
    color: #6b7785;
    font-style: italic;
    font-size: 0.9rem;
    background: var(--hisco-grijs);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* Concept(en) in bewerking — op verzoek van de gebruiker (2026-09-02,
   vervolg 18), zie _dossier-journaalregel-form.blade.php: een lijst
   openstaande concepten met een "Openen"-minibutton per rij, i.p.v. het
   formulier automatisch met het laatste concept te vullen. Zelfde
   kader-stijl als .hisco-journaal-toelichting hierboven (blauwe
   linkerrand), zodat dit visueel als "let op, hier ligt nog iets"
   herkenbaar is. */
.hisco-journaal-concepten {
    border-left: 3px solid var(--hisco-blauw);
    background: var(--hisco-grijs);
    padding: 0.5rem 0.6rem;
    margin: 0 0 0.5rem;
}

.hisco-journaal-concepten ul {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
}

.hisco-journaal-concepten li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
}

/* Tussenruimte tussen de conceptregels (op verzoek van de gebruiker,
   2026-09-05: "2 regels: de minibuttons overlappen elkaar iets. Geen 0.2
   regel tussenruimte") — de regels zelf mogen dicht op elkaar, maar de
   minibuttons (even hoog als de regel) kwamen bij twee regels rand aan
   rand te staan; 0.2rem tussen opeenvolgende regels voorkomt dat. */
.hisco-journaal-concepten li + li {
    margin-top: 0.2rem;
}

/* De Openen/Geopend-knop op een lijstregel (op verzoek van de gebruiker,
   2026-09-05: "de regels staan te ver uit elkaar, moeten direct
   aansluiten en de button staat onderaan de regel: uitlijnen") — de
   globale `button, .hisco-knop`-regel hierboven zet margin-top: 1.5rem;
   binnen deze flex-rij duwde dat de knop naar de onderrand én rekte dat
   elke listregel op, waardoor de regels ver uit elkaar kwamen te staan
   (dezelfde valkuil als bij knoppen buiten .hisco-formrij). */
.hisco-journaal-concepten .hisco-knop {
    margin-top: 0;
}

.hisco-journaal-concept-tijd {
    color: #6b7785;
    font-size: 0.85rem;
}

/* SOEP-invoerregels: een smal "letter"-vak (S/O/E/P) naast een brede
   tekstinvoer per regel — zie de opsomming "soepregels met Letter veld
   en tekstveld". */
.hisco-soep-invoer {
    margin-top: 0.75rem;
}

.hisco-soep-invoerregel {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* Popupkader voor de S-regel-ICPC (op verzoek van de gebruiker,
   2026-08-29: het zichtbare veld achter de S vervangen door een kader
   dat via de S-/O-knop opent, met invoerveld + suggesties op basis van
   de S- en O-tekst — zie _dossier-journaalregel-form.blade.php en het
   derde scriptje daar). Zwevend over de SOEP-rijen, openen/sluiten via
   het scriptje (binnen de bewuste JS-uitzondering van dit formulier). */
.hisco-soep-invoer {
    position: relative;
    /* Maatvariabelen voor het SOEP-invoerblok (op verzoek van de
       gebruiker, 2026-09-05): elke letterknop (S/O/E/P én de "+") is
       --hisco-soep-letterhoogte hoog, zodat S + het 1px-lintje + "+" samen
       exact zo hoog zijn als het Subjectief-invoerveld (2 × letterhoogte
       + 1px, zie de textarea-regel hieronder). De ICPC-(S)/(E)-velden en
       de plekvervangers van O/P delen --hisco-soep-icpcbreedte, zodat de
       vier tekstvelden onderling op dezelfde positie beginnen én rechts
       uitgelijnd blijven met het Deelconsultnaam-veld (dat eveneens tot
       de rechterkaderloop loopt). */
    --hisco-soep-letterhoogte: 1.8rem;
    --hisco-soep-icpcbreedte: 12ch;
}

.hisco-icpc-popup {
    position: absolute;
    top: 0;
    left: 2.6rem;
    z-index: 30;
    width: min(36rem, 100%);
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0.75rem;
}

.hisco-icpc-popup-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.hisco-icpc-popup-sluit {
    background: none;
    border: none;
    color: #6b7785;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.25rem;
}

/* Zelfde lek/fix als .hisco-zoek-live-naam:hover verderop in dit
   bestand. */
.hisco-icpc-popup-sluit:hover {
    background: var(--hisco-grijs);
    color: var(--hisco-tekst);
}

.hisco-soep-letter {
    flex: 0 0 auto;
    width: 2rem;
    /* Hoogte uit de maatvariabele (op verzoek van de gebruiker,
       2026-09-05: "Maak ze samen even hoog als het invoerkader van
       subjectief. Als de S button daardoor kleiner wordt, maak dan ook
       de O, E en P buttons even groot") — dus ook kleiner dan de vorige
       2rem, want S + "+" moeten samen (met het 1px-lintje ertussen) op
       de hoogte van het tekstveld uitkomen. */
    height: var(--hisco-soep-letterhoogte);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    background: var(--hisco-grijs);
    font-weight: 600;
    /* De oude 0.1rem-optische correctie vervalt: de S-knop moet met
       zijn bovenrand exact tegen de bovenrand van het tekstveld aan
       zitten, zodat de S-/+stack er met de onderrand van "+" ook exact
       tegenaan sluit. */
    margin-top: 0;
}

.hisco-soep-invoerregel textarea {
    flex: 1 1 auto;
}

/* Hoogte van de vier SOEP-tekstvelden (op verzoek van de gebruiker,
   2026-09-05): exact 2 × letterhoogte + 1px, zodat de S-knop en de "+"
   eronder (met het 1px-lintje ertussen) samen precies even hoog zijn.
   Bewust alleen op de vier hoofdvelden (directe kinderen van
   .hisco-soep-invoer) en NIET op het verdieping-veld, dat in zijn eigen
   details-block staat en zijn eigen (grotere) hoogte houdt. line-height
   expliciet gezet zodat twee regels altijd in deze hoogte passen
   (line-height "normal" verschilt per browser en kon de tweede regel
   afknippen). */
.hisco-soep-invoer > .hisco-soep-invoerregel > textarea {
    height: calc(2 * var(--hisco-soep-letterhoogte) + 1px);
    line-height: 1.2;
}

/* Klikbare S/O-letter (op verzoek van de gebruiker: "klik op de S of de O
   van de soep codes. Geef dan onder de ICPC code een suggestie op basis
   van de tekst in het S of O veld") — een <button> i.p.v. <span>, dus de
   browser-standaardopmaak (marge/padding/lettertype/regelhoogte) hier
   resetten zodat 'm er in rust identiek uitziet aan de gewone
   .hisco-soep-letter <span> van E en P — pas bij hoveren/focus zichtbaar
   klikbaar (op verzoek van de gebruiker, vervolgronde: "zelfde aanzien
   geven als de E en P velden. Dus ziet er alleen anders uit bij
   hoveren"). */
.hisco-soep-letter-suggestie {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: normal;
    cursor: pointer;
    /* De algemene `button, .hisco-knop`-regel hierboven zet color: #fff —
       die geldt (als kale tag-selector) ook hier, want .hisco-soep-letter
       zelf zet nooit een eigen `color`. Zonder deze regel bleef de letter
       dus wit i.p.v. even donker als de E/P-tekst (op verzoek van de
       gebruiker gemeld: "hebben nog steeds een witte letter"). */
    color: var(--hisco-tekst);
}

.hisco-soep-letter-suggestie:hover,
.hisco-soep-letter-suggestie:focus-visible {
    background: var(--hisco-blauw);
    color: #fff;
    border-color: var(--hisco-blauw);
}

/* Suggestielijst onder de invoervelden, gevuld door het derde scriptje in
   _dossier-journaalregel-form.blade.php. Breedte (op verzoek van de
   gebruiker: "maak de breedte waarin de klikable lijst staat hetzelfde als
   van het invoerveld voor de soep kaders"): staat in de Blade-template
   bewust buiten .hisco-formrij-smal, met een linkermarge die precies de
   breedte van een SOEP-letterblokje + tussenruimte is (2rem + 0.6rem, zie
   .hisco-soep-letter/.hisco-soep-invoerregel), zodat deze lijst links en
   rechts even breed is als de SOEP-tekstvelden eronder.

   Twee kolommen (op verzoek van de gebruiker, vervolgronde: "maak er 2
   kolommen van, de eerste kolom zo breed als de langste ICPC code, zodat
   de tekst in de 2e kolom uitgelijnd is"): een CSS-grid met
   `grid-template-columns: max-content 1fr` — de breedte van de eerste
   kolom volgt daarmee automatisch uit de langste code die op dat moment
   getoond wordt, geen JS-berekening nodig. Code en titel zijn losse
   elementen (zie het scriptje) die om-en-om in dit grid vallen, dus elk
   paar vormt automatisch één rij. Geen lijn meer tussen de regels en een
   normale regelafstand (op verzoek van de gebruiker: "de lijn tussen de
   regels mag weg en de regels kunnen op een normale regelafstand komen te
   staan") — vandaar de kleine row-gap i.p.v. randen/padding per rij.
   Alleen de code (eerste kolom) is nog een knop (op verzoek van de
   gebruiker: "voldoende als alleen de eerste kolom dan klikable is"). */
.hisco-icpc-suggesties {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    /* Lichtblauwe achtergrond (op verzoek van de gebruiker, 2026-09-05):
       zelfde tint als .hisco-advies en de episodetitelbalk (#eaf2fb). */
    background: #eaf2fb;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
}

.hisco-icpc-suggesties[hidden] {
    display: none;
}

.hisco-icpc-suggesties .hisco-placeholder {
    grid-column: 1 / -1;
}

.hisco-icpc-suggestie-knop {
    /* De algemene `button, .hisco-knop`-regel hierboven zet margin-top:
       1.5rem — die geldt (als kale tag-selector) ook hier, en duwde de
       code omlaag t.o.v. de titel ernaast, alsof ze op verschillende
       regels stonden (op verzoek van de gebruiker gemeld). Zelfde soort
       fix als eerder bij .hisco-soep-letter-suggestie. */
    margin: 0;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.9rem;
    color: var(--hisco-tekst);
    text-align: left;
    cursor: pointer;
}

.hisco-icpc-suggestie-knop:hover,
.hisco-icpc-suggestie-knop:focus-visible {
    /* Zelfde soort lek als hierboven: `button:hover, .hisco-knop:hover`
       zet een donkere achtergrond (--hisco-blauw-donker) — zonder deze
       expliciete override (op verzoek van de gebruiker gemeld: "zwarte
       achtergrond waardoor code onleesbaar wordt") wint die regel tijdens
       hover alsnog van de background: none hierboven. Was eerst
       background:none, nu lichtgrijs (op verzoek van de gebruiker,
       2026-09-09: zie .hisco-zoek-live-naam:hover voor de volledige
       toelichting) — dat geeft tenminste zichtbare hover-feedback i.p.v.
       geen enkele. */
    background: var(--hisco-grijs);
    color: var(--hisco-blauw);
    text-decoration: underline;
}

.hisco-icpc-suggestie-titel {
    font-size: 0.9rem;
    color: var(--hisco-tekst);
}

/* Laatste regel van het kader (hetzij de laatste suggestie-titel, hetzij
   de "geen suggestie gevonden"-tekst): wordt met flex uit elkaar
   getrokken zodat de Sluit-link rechts op diezelfde regel verschijnt
   i.p.v. een eigen grid-rij eronder te vormen (op verzoek van de
   gebruiker: "Sluit, niet op een nieuwe regel maar overschrijft de
   laatste regel"). */
.hisco-icpc-suggestie-laatste-regel {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

/* Rechts op de laatste regel (zie hierboven) — het kader zelf sluit
   anders alleen nog bij het kiezen van een code. Zelfde `button`-lekken
   als hierboven expliciet gereset (marge/achtergrond/kleur). */
.hisco-icpc-suggesties-sluiten {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--hisco-blauw);
    cursor: pointer;
}

.hisco-icpc-suggesties-sluiten:hover,
.hisco-icpc-suggesties-sluiten:focus-visible {
    /* Lichtgrijs i.p.v. background:none (op verzoek van de gebruiker,
       2026-09-09 — zie .hisco-zoek-live-naam:hover). */
    background: var(--hisco-grijs);
    text-decoration: underline;
}

/* Voettekst van het journaalregel-invoerformulier (op verzoek van de
   gebruiker, 2026-08-23, derde vervolgronde): Opslaan/Concept/Sluiten op
   dezelfde regel. De "Op datum"/"Op episode"-toggle die hier ooit rechts
   uitgelijnd stond (vandaar destijds `justify-content: space-between`) is
   verwijderd (op verzoek van de gebruiker, 2026-09-03, dubbelop met de
   Episodes/Deelconsulten-toggle in de Handelingen-kolom) — `gap` i.p.v.
   `space-between` houdt de resterende knoppen nu gewoon bij elkaar. */
.hisco-journaal-form-voettekst {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.hisco-journaal-form-voettekst .hisco-knop {
    margin-top: 0;
}

/* Episode-groepering (journaalWeergave = "episode"): een kop per episode
   (begindatum, ICPC-code, naam, evt. afgesloten-datum) met de eigen
   journaalregels eronder. Sinds 2026-09-03 (op verzoek van de gebruiker,
   "episoderegels (als niet geopend) op elkaar laten aansluiten") alleen
   nog tussenruimte zolang een episode opengeklapt is (voor de uitgeklapte
   inhoud); dicht sluiten de gekleurde titelregels (.hisco-episode-kop
   hieronder) direct op elkaar aan. */
.hisco-episode-groep {
    margin-bottom: 0;
}

/* Omkadering van een OPEN episode (op verzoek van de gebruiker,
   2026-09-05: "omkader een opengeklikte episode — zodat episodetitel,
   deelconsultregels en andere episode-items binnen dit kader vallen";
   idem, later die dag: "maak de kaderlijn blauw en 5 px"): blauwe rand
   van 5px + kleine binnenzijafstand, zodat de titelregel niet tegen de
   rand plakt. De inhoud (.hisco-episode-inhoud) schuift een stukje naar
   binnen mee. */
.hisco-episode-groep[open] {
    margin-bottom: 1.25rem;
    border: 5px solid var(--hisco-blauw);
    border-radius: 6px;
    padding: 0.4rem 0.5rem 0.3rem;
}

/* Moet ná de [open]-regel hierboven staan: zelfde specificiteit, dus wint
   de laatst gedefinieerde regel — zo blijft de allerlaatste episode altijd
   zonder onderrand, ook als die openstaat. */
.hisco-episode-groep:last-child {
    margin-bottom: 0;
}

/* De episodetitel is sinds Fase 6 EPD-bouwplan (2026-08-28) een
   <summary> van een uitklapbare episode (zie _dossier-episode.blade.php)
   — zelfde stijl, plus de klikbare cursor. Sinds 2026-09-03 (op verzoek
   van de gebruiker): lichtgroene achtergrond i.p.v. een onderrand ("geen
   lijn tussen de episodes, nu duidelijk gemarkeerd door groene
   achtergrond") — zelfde lichtgroene tint als .hisco-succes/
   .hisco-journaal-datumregel hierboven (#e9f7ef).
   Flex-rij van precies 2 kinderen, titel + acties (op verzoek van de
   gebruiker, 2026-09-03, vervolg: "buttons staan op een eigen regel, ze
   moeten op de episodetitel-regel staan") — vervangt de eerdere
   float:right-aanpak, die de acties naar een nieuwe regel liet
   doorschuiven zodra de titel niet meer paste. `justify-content:
   space-between` duwt .hisco-episode-kop-titel en .hisco-episode-kop-acties
   naar de uiteinden; `min-width: 0` op de titel-span (hieronder) laat een
   lange episodenaam nette regelafbreking doen i.p.v. de acties te
   verdringen. */
.hisco-episode-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.95rem;
    padding: 0.3rem 0.5rem;
    background: #e9f7ef;
    border-radius: 4px;
    cursor: pointer;
}

.hisco-episode-kop-titel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.hisco-episode-kop-acties {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.hisco-episode-actie button {
    /* De globale margin-top op button laat de Sluiten/Heropenen-knop
       naast de Attentie-checkbox half onder de regel hangen (op verzoek
       van de gebruiker, 2026-08-29: "staat te laag in de regel"). */
    margin: 0;
}

/* Episode-overzicht 2.0 (Fase 6 EPD-bouwplan, 2026-08-28): 4 blokken
   (vandaag gewijzigd / episodebundels / open / gesloten met attentievlag
   + "toon meer"), ICPC-filter, uitklapbare episodetitels en
   deelcontact-regels, beleidsregel per episode — zie
   _dossier-episode-overzicht/_dossier-episode/_dossier-deelcontact.blade.php. */
.hisco-episode-filter {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

/* Bovenregel van het Dossier-kader (op verzoek van de gebruiker,
   2026-08-29): het ICPC-filter links, het "Nieuw deelcontact"-invoerdeel
   ernaast — op één lijn; het filter krijgt daarom geen eigen
   ondermarge en het invoerdeel vult de rest van de breedte. */
.hisco-dossier-bovenrij {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.hisco-dossier-bovenrij .hisco-episode-filter {
    margin-bottom: 0;
    padding-top: 0.3rem;
}

.hisco-dossier-bovenrij .hisco-journaal-nieuw {
    flex: 1;
    min-width: 0;
}

/* Invoerveld klein genoeg voor een ICPC-code; de Filter-knop verschijnt
   pas zodra het veld focus heeft (op verzoek van de gebruiker,
   2026-08-29) — met :has(), geen JS; Enter in het veld submit het
   formulier ook zonder zichtbare knop. */
.hisco-episode-filter input[type="text"] {
    flex: 0 1 auto;
    width: 12ch;
    min-width: 0;
}

.hisco-episode-filter button {
    /* Volledige knoptekst "Filter op ICPC" past in een kleiner
       lettertype naast het compacte invoerveld (op verzoek van de
       gebruiker, 2026-08-29). Sinds dezelfde dag gewoon altijd zichtbaar
       (de eerdere focus-vereiste is vervallen); wél verborgen zodra het
       invoerdeel "Nieuw deelcontact" open staat, zie hieronder. */
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.hisco-dossier-bovenrij:has(.hisco-journaal-nieuw[open]) .hisco-episode-filter {
    display: none;
}

.hisco-episode-blok {
    margin-bottom: 1.5rem;
}

.hisco-episode-blok:last-child {
    margin-bottom: 0;
}

.hisco-episode-blok-kop {
    font-weight: 600;
    margin: 0 0 0.6rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--hisco-rand);
}

/* Minibutton in een blok-kop (2026-09-07: "Alle episodebundels openen" op
   dezelfde regel als het label) — wat tussenruimte tegen het label, de
   knop zelf op de middellijn (globale knop-marge is al 0). */
.hisco-episode-blok-kop .hisco-knop-mini {
    margin-left: 0.5rem;
    vertical-align: middle;
}

.hisco-episode-bundel {
    margin-bottom: 0.75rem;
}

.hisco-episode-bundel summary {
    cursor: pointer;
    font-weight: 600;
}

.hisco-episode-bundel .hisco-episode-groep {
    margin-top: 0.75rem;
}

.hisco-episode-inhoud {
    padding: 0.4rem 0 0.2rem;
}

.hisco-episode-beleid {
    margin: 0.25rem 0 0.75rem;
}

.hisco-beleid-kop {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin: 0;
}

/* Knoppenrij (Terug- + andere minibuttons onderaan een scherm) — flex met
   wat tussenruimte; de knoppen ervan staan netjes op één lijn (de globale
   knop-marge is sinds 2026-09-06 al 0, zie de algemene knopregel). */
.hisco-knoppenrij {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

/* Tabellen op de preventieschermen (tabel griepvaccinatie (60), tabel ICPC
   en griepselectie (58), tabel Behandelingen en griepselectie (75) — op
   verzoek van de gebruiker, 2026-09-06, "print dit tijdelijk op het
   scherm") en sinds 2026-09-08 het uitslagen-scherm
   (.hisco-uitslagen-tabel, zelfde eenvoudige tabelstijl). */
.hisco-preventie-tabel,
.hisco-uitslagen-tabel {
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0.5rem 0 1.25rem;
    width: 100%;
}

.hisco-preventie-tabel th,
.hisco-preventie-tabel td,
.hisco-uitslagen-tabel th,
.hisco-uitslagen-tabel td {
    border: 1px solid var(--hisco-rand);
    padding: 0.3rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.hisco-preventie-tabel th,
.hisco-uitslagen-tabel th {
    background: var(--hisco-grijs);
}

/* Hoofdstuk-koppen op het uitslagen-scherm (lab, beeldvorming,
   functieonderzoek, diversen — op verzoek van de gebruiker, 2026-09-08)
   — zelfde bescheiden kop-stijl als .hisco-kaart h2, met een aparte
   klasse omdat dit scherm geen .hisco-kaart-wrapper gebruikt. */
.hisco-uitslagen-hoofdstuk {
    font-size: 1.1rem;
    margin: 1.25rem 0 0.25rem;
}

/* Koppen van de preventieschermen (h2 boven elke tabel). */
.hisco-kaart h2 {
    font-size: 1.1rem;
    margin: 1.25rem 0 0.25rem;
}

/* Lege beleidsregel (op verzoek van de gebruiker, 2026-09-05): alleen
   rechts uitgelijnd de minibutton "Open Beleidsregel" — details/summary
   i.p.v. JS. De knop wisselt van tekst via dezelfde details[open]-
   selector-truc als "Nieuw consult"/"Sluit invoerkader"; de knop staat in
   een flex-rij, dus het margin-top uit de globale button/.hisco-knop-
   regel hier expliciet teruggezet (bekende valkuil). */
.hisco-beleid-open > summary {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    /* Strak in het kader (op verzoek van de gebruiker, 2026-09-06: "witte
       ruimte rond de minibutton Open beleidsregel is te hoog, pas aan
       zodat de minibutton er net in past") — was 0 0 0.4rem. */
    margin: 0;
}

.hisco-beleid-open > summary::-webkit-details-marker {
    display: none;
}

.hisco-beleid-open .hisco-knop {
    margin-top: 0;
}

/* Open stand (gevulde beleidsregel): de Open-knop in de summary is
   verborgen — de "Sluit beleidsregel"-knop in de kop-rij (achter
   Beleidshistorie, op verzoek van de gebruiker, 2026-09-06) neemt zijn
   rol over en klapt het blok dicht via een inline onclick. */
.hisco-beleid-open[open] > summary {
    display: none;
}

/* Lege beleidsregel (alleen de Open-knop): de witte ruimte rond het blok
   omlaag, zodat de minibutton er net in past (op verzoek van de
   gebruiker, 2026-09-06). */
.hisco-episode-beleid:has(> .hisco-beleid-open:not([open])) {
    margin: 0;
}

.hisco-beleid-kop .hisco-knop {
    margin-top: 0;
}

.hisco-beleid-tekst {
    margin: 0 0 0.3rem;
    white-space: pre-wrap;
}

.hisco-beleid-historie {
    position: relative;
    display: inline-block;
    align-self: flex-end;
}

.hisco-beleid-historie summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    background: #fff;
    border: 1px solid var(--hisco-blauw);
    border-radius: 6px;
    color: var(--hisco-blauw);
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
}

.hisco-beleid-historie summary::-webkit-details-marker {
    display: none;
}

.hisco-beleid-historie-inhoud {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0.75rem;
    min-width: 24rem;
    max-width: 42rem;
    font-size: 0.9rem;
}

.hisco-beleid-historie-inhoud p {
    margin: 0.25rem 0;
}

.hisco-episode-sluiten {
    margin: 0.5rem 0 0.75rem;
}

/* Mini Sluiten/Heropenen-knop ín de episodetitel (op verzoek van de
   gebruiker, 2026-08-29) — pas zichtbaar zodra de episode uitgeklapt is
   (details[open]), geen JS; zie _dossier-episode.blade.php. Sinds
   dezelfde dag staan hier ook het Max-duur-veld (vóór de Sluiten-knop)
   en de Attentie-checkbox (erna). Sinds 2026-09-03 ook de "Koppel
   hierheen"-knop (alleen als er een koppel-bron gekozen is). */
.hisco-episode-actie {
    display: none;
}

.hisco-episode-groep[open] .hisco-episode-actie {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

/* "Nieuw deelconsult" + "Koppel" minibuttons ín de episodetitel (op
   verzoek van de gebruiker, 2026-09-03) — het omgekeerde van
   .hisco-episode-actie hierboven: wél zichtbaar zolang de episode dicht
   is, verdwijnen zodra hij opengeklapt wordt (dan staan Sluiten/
   Heropenen/Koppel hierheen er immers al, zie hierboven). Rechts
   uitgelijnd op de episodetitel-regel via de flex-ouder
   .hisco-episode-kop-acties (zie hierboven) — niet meer via float, dat
   liet de acties bij een lange episodenaam naar een eigen regel
   doorschuiven. Zie _dossier-episode.blade.php. */
.hisco-episode-acties-dicht {
    display: inline-flex;
    gap: 0.5rem;
}

.hisco-episode-groep[open] .hisco-episode-acties-dicht {
    display: none;
}

.hisco-episode-actie form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.hisco-episode-actie label {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    gap: 0.25rem;
    margin: 0;
}

/* Invoerveld voor 2 cijfers (max. duur in maanden). */
.hisco-episode-actie input[type="number"] {
    font-size: 0.8rem;
    padding: 0.05rem 0.2rem;
    width: 4ch;
}

.hisco-episode-actie input[type="checkbox"] {
    width: auto;
}

/* ICPC-code (S)/(E)-invoerveld tussen de SOEP-letter en het Subjectief-
   resp. Evaluatie-invoerveld (op verzoek van de gebruiker, 2026-09-03/04:
   "maak smaller" / "moeten 8 karakters breed zijn" — dit veld stond
   voorheen los boven het SOEP-blok). Selector `input.hisco-soep-icpc`
   (i.p.v. kaal `.hisco-soep-icpc`) i.p.v. op source-volgorde te
   vertrouwen om de generieke `input[type="text"] { width: 100% }`
   hierboven te verslaan — bugfix (op verzoek van de gebruiker,
   2026-09-04: "nemen nu hele kader ruimte in beslag"): met een kale
   class-selector wint deze regel weliswaar ook al puur op
   bron-volgorde (staat verderop in dit bestand), maar dat is fragiel
   (bijv. bij een latere herordening); `input.hisco-soep-icpc` heeft een
   hogere specificiteit en wint gegarandeerd, ongeacht volgorde. */
.hisco-soep-icpc,
input.hisco-soep-icpc {
    flex: 0 0 auto;
    /* Breedte uit de gedeelde maatvariabele (op verzoek van de gebruiker,
       2026-09-05: "ICPC-s en ICPC-e invoervelden zijn te smal") — de
       plekvervangers van O/P gebruiken dezelfde variabele, zodat de vier
       tekstvelden op dezelfde positie beginnen én rechts uitgelijnd
       blijven met Deelconsultnaam. */
    width: var(--hisco-soep-icpcbreedte);
    max-width: var(--hisco-soep-icpcbreedte);
    margin-right: 0.35rem;
}

/* Onzichtbare plaatsvervanger van dezelfde breedte, in de Objectief- en
   Plan-rijen (die geen eigen ICPC-code-veld hebben) — op verzoek van de
   gebruiker, 2026-09-04: "invoervelden voor Objectief en Plan uitlijnen
   met de invoervelden voor S en E". Zonder dit beginnen de O/P-tekstvelden
   direct na de letter, terwijl de S/E-tekstvelden pas na het ICPC-veld
   beginnen — deze span reserveert precies die ruimte. */
.hisco-soep-icpc-placeholder {
    flex: 0 0 auto;
    /* Zelfde breedte als het ICPC-(S)/(E)-veld (gedeelde maatvariabele,
       zie hierboven) zodat O/P in lijn blijven met S/E. */
    width: var(--hisco-soep-icpcbreedte);
    margin-right: 0.35rem;
}

/* S-verdieping (uitgebreide anamnese, op verzoek van de gebruiker,
   2026-09-05: "Nog een toevoeging aan deelconsult: s_regel_verdieping")
   — in het journaal-formulier: een "+"-kader onder de S-knop (zelfde
   .hisco-soep-letter-opmaak, dus automatisch even groot) dat via
   details/summary het grotere verdieping-tekstveld opent en sluit; in
   het episode-overzicht: de minibutton "Open verdieping" bij een
   deelcontact met gevulde verdieping (zie _dossier-deelcontact.blade.
   php). Zonder JS, conform de projectafspraak.

   Positionering (op verzoek van de gebruiker, 2026-09-05: "beide moeten
   op elkaar aansluiten, met maar een achtergrond lintje van 1 px er
   tussen. Maak ze samen even hoog als het invoerkader van subjectief"):
   het details-block staat in de flow ná de S-rij, maar wordt met een
   negatieve marge van precies één letterhoogte omhoog getrokken — de
   "+" begint daarmee 1px onder de S-knop (S-onderrand + 1px lintje) en
   eindigt, omdat "+" even hoog is als de S, exact op de onderrand van
   het Subjectief-invoerveld; in gesloten toestand is het block daarmee
   weer precies één tekstveld hoog, zodat de O-rij eronder onveranderd
   doorloopt. Het block overlapt daardoor de onderhelft van het
   Subjectief-invoerveld — pointer-events: none laat muisklikken daar
   gewoon door naar de textarea; alleen de summary en de inhoudsrij zijn
   zelf weer klikbaar. */
.hisco-soep-verdieping {
    margin-top: calc(var(--hisco-soep-letterhoogte) * -1);
    pointer-events: none;
}

.hisco-soep-verdieping summary,
.hisco-soep-verdieping-inhoud {
    pointer-events: auto;
}

.hisco-soep-verdieping-knop {
    cursor: pointer;
    list-style: none;
}

.hisco-soep-verdieping-knop::-webkit-details-marker {
    display: none;
}

.hisco-soep-verdieping-knop:hover,
.hisco-soep-verdieping-knop:focus-visible {
    background: var(--hisco-blauw);
    color: #fff;
    border-color: var(--hisco-blauw);
}

/* + dicht, − open — dezelfde details[open]-selector-truc als "Nieuw
   consult"/"Sluit invoerkader" in _dossier-journaalregel-form.blade.php. */
.hisco-verdieping-teken-sluit {
    display: none;
}

.hisco-soep-verdieping[open] .hisco-verdieping-teken-open {
    display: none;
}

.hisco-soep-verdieping[open] .hisco-verdieping-teken-sluit {
    display: inline;
}

/* De inhoudsrij hergebruikt de flex-opzet van een SOEP-rij
   (.hisco-soep-invoerregel) met een onzichtbare letterplek en de
   bestaande ICPC-plekvervanger, zodat het verdieping-veld precies op
   dezelfde positie en met dezelfde breedte begint als het
   Subjectief-invoerveld erboven. */
.hisco-soep-verdieping-legeplek {
    visibility: hidden;
}

/* Weergave in het episode-overzicht: de minibutton "Open verdieping"
   en de tekst eronder, op dezelfde inspringing als de SOEP-weergave
   van het deelcontact (.hisco-deelcontact .hisco-soep hierboven). */
.hisco-verdieping-weergave {
    margin: 0.2rem 0 0 1.25rem;
}

.hisco-verdieping-tekst {
    margin: 0.3rem 0 0 0;
}

/* Lichtblauwe achtergrond voor een echt deelcontact (journaalregel) in het
   uitgeklapte episode-overzicht (op verzoek van de gebruiker, 2026-09-03)
   — zelfde lichtblauwe tint als .hisco-advies (#eaf2fb), zo onderscheiden
   van de grijze .hisco-episode-item hieronder (behandelingen). Bugfix
   (zelfde dag, op verzoek van de gebruiker: "deelconsulten hebben nu
   helemaal een blauwe achtergrond, dat moet zijn alleen de episoderegel")
   — de achtergrond stond eerst op .hisco-deelcontact zelf, en kleurde
   daardoor bij een opengeklapt deelconsult ook de SOEP-inhoud eronder
   mee; nu alleen op de `<summary>` (de episoderegel/titelbalk). */
.hisco-deelcontact {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.hisco-deelcontact > summary {
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    background: #eaf2fb;
    border-radius: 4px;
    /* Tijd/duur rechts uitgelijnd (op verzoek van de gebruiker,
       2026-09-04) — zie .hisco-journaal-datumregel hierboven voor
       dezelfde truc/toelichting; .hisco-journaal-datumregel-rechts wordt
       hier hergebruikt. `<summary>` heeft van zichzelf `display:
       list-item`, vandaar de expliciete override. */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.hisco-deelcontact .hisco-journaal-reden-afspraak {
    margin: 0.2rem 0 0 1.25rem;
}

.hisco-deelcontact .hisco-soep {
    margin: 0.2rem 0 0 1.25rem;
}

/* Grijze achtergrond voor een episode-item dat geen deelcontact is (op
   verzoek van de gebruiker, 2026-09-03: "episode items, niet zijnde
   deelcontacten krijgen grijze achtergrond") — momenteel alleen
   Behandelingen (zie _dossier-episode.blade.php). Zelfde grijstint als de
   paginaondergrond (var(--hisco-grijs)) en verder dezelfde opzet als
   .hisco-deelcontact hierboven, zonder de SOEP-/reden-afspraak-marges
   (die inhoud komt hier niet voor). */
.hisco-episode-item {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Wijzigmodus episodetitel (op verzoek van de gebruiker, 2026-09-05:
   minibutton "Wijzigen" tussen Max en Sluiten): de titelregel wordt één
   regel met de ICPC-invoer (zelfde smalle breedte als op het
   deelconsult, .hisco-soep-icpc), de naam-invoer (neemt de vrije ruimte)
   en de Opslaan-minibutton. De knop staat in een flex-rij die niet
   .hisco-formrij heet — het margin-top uit de globale button/.hisco-knop-
   regel hier expliciet teruggezet (bekende valkuil). */
.hisco-episode-wijzigen {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
}

.hisco-episode-wijzigen input[name="naam"] {
    width: auto;
    flex: 1 1 12rem;
    min-width: 10rem;
}

.hisco-episode-wijzigen .hisco-knop {
    margin-top: 0;
}

.hisco-episode-item > summary {
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    background: var(--hisco-grijs);
    border-radius: 4px;
    /* Flex-rij (op verzoek van de gebruiker, 2026-09-05): datum, code en
       het BEGIN van de omschrijving op één regel — de tekst loopt met een
       ellipsis af zodra de regel vol is (zie .hisco-episode-item-tekst). */
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

/* Het omschrijving-begin op de behandelingsregel: neemt de resterende
   regellengte en knipt af met een ellipsis (op verzoek van de gebruiker,
   2026-09-05: "als de inhoud van het veld omschrijving langer is dan op
   de tekstregel past, kap dit dan af"); de complete tekst staat in het
   opengeklapte deel. min-width: 0 is nodig opdat de flex-item mag
   krimpen tot onder zijn tekstbreedte. Datum en code breken niet af. */
.hisco-episode-item-tekst {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hisco-episode-item > summary strong,
.hisco-episode-item > summary .hisco-badge {
    white-space: nowrap;
}

/* Ctrl-klik-"gezet"-markering (op verzoek van de gebruiker, 2026-09-06):
   de naam/badges/datum van het deelconsult dat klaarstaat voor verplaatsing
   (na een ctrl-klik, vóór de klik op de doel-episode in de linker kolom)
   lichten in de projectkleur op. Zie het scriptje onderaan
   dossier.blade.php. */
.hisco-deelcontact .hisco-overneem-gezet {
    background: var(--hisco-blauw);
    color: #fff;
    border-color: var(--hisco-blauw);
}

/* Informatie-i met popup-uitleg bij de blok-kop "Open episodes" (op
   verzoek van de gebruiker, 2026-09-06, "in popupscherm") —
   details/summary i.p.v. JS; het kader zweeft boven de pagina (zelfde
   principe als .hisco-icpc-popup hierboven). */
.hisco-info-popup {
    display: inline-block;
    position: relative;
    margin-left: 0.5rem;
}

.hisco-info-popup summary {
    cursor: pointer;
    list-style: none;
    color: var(--hisco-blauw);
    font-weight: 600;
}

.hisco-info-popup summary::-webkit-details-marker {
    display: none;
}

.hisco-info-popup-inhoud {
    position: absolute;
    top: 1.5rem;
    left: 0;
    z-index: 40;
    width: min(36rem, 80vw);
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: normal;
}

.hisco-info-popup-inhoud p {
    margin: 0 0 0.4rem;
}

/* Uitklapbare bundelnaam in de episodebundels-popup (op verzoek van de
   gebruiker, 2026-09-07: "Klik op de naam van de episodebundel om te zien
   welke ICPC codes bij die bundel horen") — nested <details> binnen
   .hisco-info-popup, geen JS. De standaard marker (driehoekje) blijft
   zichtbaar als uitklap-aanduiding; blauw + vet maakt de naam klikbaar. */
.hisco-info-popup .hisco-bundel-popup-detail summary {
    cursor: pointer;
    color: var(--hisco-blauw);
    font-weight: 600;
    padding: 0.15rem 0;
}

.hisco-info-popup .hisco-bundel-popup-detail summary::marker,
.hisco-info-popup .hisco-bundel-popup-detail summary::-webkit-details-marker {
    color: var(--hisco-blauw);
}

/* De minibutton "Sluiten" van de episodebundels-popup, rechts onderin. */
.hisco-info-popup-sluiten {
    margin-top: 0.5rem;
    text-align: right;
}

/* Sociale-gegevens-scherm (op verzoek van de gebruiker, 2026-09-07,
   zie werkscherm/sociale-gegevens.blade.php). */
.hisco-sociale-woonverband {
    margin: 0 0 0.75rem;
}

.hisco-sociale-woonverband .hisco-naam-knop {
    margin-right: 0.5rem;
}

/* Overzichtstabel (datum, soort, tekst) — zelfde stijl als de
   preventietabellen. */
.hisco-sociale-tabel {
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
    width: 100%;
}

.hisco-sociale-tabel th,
.hisco-sociale-tabel td {
    border: 1px solid var(--hisco-rand);
    padding: 0.3rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.hisco-sociale-tabel th {
    background: var(--hisco-grijs);
}

/* Datumkolom op de helft (op verzoek van de gebruiker, 2026-09-07) —
   vaste smalle breedte + nowrap, zodat de tekstkolom de ruimte krijgt. */
.hisco-sociale-tabel th:first-child,
.hisco-sociale-tabel td:first-child {
    width: 6rem;
    white-space: nowrap;
}

/* Soorten-lijst van het invoerformulier is sinds 2026-09-07 een select
   (op verzoek van de gebruiker: "Niet bullets, maar select list") — de
   radio-lijst (.hisco-sociale-soorten) is hiermee vervallen. */

/* Keuzeveld "Opleiding" (op verzoek van de gebruiker: "Als deze keuze
   gemaakt wordt dan invoerveld/ keuzeveld uit tabel opleiding") — alleen
   zichtbaar zodra de soort "Opleiding" in de soort-select gekozen is, en
   dan vervangt het de vrije textarea. De wissel gebeurt met een klein
   inline onchange op de select (een select-keuze is niet met CSS :has()
   te volgen); deze display:none is de dichte startstand. */
.hisco-sociale-opleiding-keuze {
    display: none;
}

/* De soort-select 15% van de schermbreedte (op verzoek van de gebruiker,
   2026-09-07) — zelfde vw-rekening als .hisco-breed-body elders. */
.hisco-sociale-soort-select {
    width: 15vw;
}

/* "Info EPD"-uitklapper op het lege epd-scherm (op verzoek van de
   gebruiker, 2026-09-08): alleen de openingsregel ("Selecteer een
   patiënt...") staat altijd zichtbaar; de lange uitleg van de epd-kaders
   verschijnt pas na klikken op de minibutton "Info EPD" — details/
   summary i.p.v. JS (projectpatroon), de marker is verborgen want de
   minibutton in de summary is de toggle. Open: de knop gedempt, zodat
   duidelijk is dat de uitleg al uitgeklapt is. */
.hisco-info-epd > summary {
    list-style: none;
    cursor: pointer;
    margin: 0.5rem 0 0;
}

.hisco-info-epd > summary::-webkit-details-marker {
    display: none;
}

.hisco-info-epd[open] > summary {
    margin-bottom: 0.75rem;
}

.hisco-info-epd[open] > summary .hisco-knop {
    opacity: 0.6;
}

.hisco-sociale-datum input,
.hisco-sociale-tekst-gebied textarea {
    width: 100%;
}

.hisco-sociale-tekst-gebied textarea {
    resize: vertical;
}

/* Attentievlag-badge (gesloten-episodes-blok; de vlag zelf wordt pas in
   Fase 7 automatisch gezet, NHG-tabel 50) — zachte amberstijl zoals
   .hisco-waarschuwing hierboven. */
.hisco-badge-attentie {
    background: #fff3cd;
    border-color: var(--hisco-waarschuwing);
    color: var(--hisco-waarschuwing);
}

/* Rode/opvallende link-variant voor het Handelingen-kader (op verzoek van
   de gebruiker, 2026-08-31: "rood als behandelgrenzen is ingevuld") —
   zelfde rode kleur als .hisco-fout, maar als platte tekstlink i.p.v. een
   kaderblok, passend bij de rest van die kolom (zie
   werkscherm/_handelingen.blade.php). */
.hisco-link-fout {
    color: var(--hisco-fout);
    font-weight: 700;
}

.hisco-episode-toon-meer {
    margin-top: 0.75rem;
}

.hisco-episode-toon-meer summary {
    cursor: pointer;
    color: var(--hisco-blauw);
}

/* Uitslagen-subhoofdjes (Echo/rö/etc., Lab, Spec. brieven, Brieven
   paramedici — zie Uitslag::CATEGORIEEN). */
.hisco-uitslagen-categorie {
    margin-bottom: 1rem;
}

.hisco-uitslagen-categorie:last-child {
    margin-bottom: 0;
}

.hisco-uitslagen-kop {
    font-weight: 600;
    margin: 0;
}

.hisco-placeholder {
    color: #6b7785;
    font-style: italic;
    font-size: 0.9rem;
}

.hisco-badge {
    display: inline-block;
    background: var(--hisco-grijs);
    border: 1px solid var(--hisco-rand);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

/* Onzichtbare "lege" badge, zelfde afmetingen als een echte ICPC-badge (op
   verzoek van de gebruiker, 2026-09-03) — reserveert de ruimte zodat een
   episodenaam altijd op dezelfde positie begint, met of zonder ICPC-code
   (zie .hisco-badge-leeg in _dossier-episode.blade.php). De min-width is
   bewust beperkt tot de episodetitel (.hisco-episode-kop): elders (bijv.
   deelcontact-badges met wisselende inhoud als "S: T99.13") mag een badge
   gewoon zijn eigen breedte houden.

   Verbreed naar 6.5rem (op verzoek van de gebruiker, 2026-09-06: bij
   verschillende codelengtes stonden de episodenamen niet meer uitgelijnd)
   — 2.75rem was te klein voor langere codes (L86.01 e.d.); 6.5rem herbergt
   de maximale codelengte (10 tekens, zie de maxlength op de invoervelden),
   zodat de naam bij élke code op dezelfde positie begint. */
.hisco-episode-kop .hisco-badge {
    min-width: 6.5rem;
    text-align: center;
}

.hisco-badge-leeg {
    visibility: hidden;
}

/* Reden-voor-afspraak-regel op het werkscherm (zie
   werkscherm/_agenda-patient-zoeken.blade.php) — 50% schermbreedte (was al
   zo, zodat het veld niet over de volle kaartbreedte uitrekt), het
   invoerveld direct achter het label op dezelfde regel (op verzoek van de
   gebruiker, 2026-09-04: "Invoerveld reden voor afspraak achter label" —
   hiervoor stond het label op een eigen volle-breedte regel, met een
   Opslaan-knop erachter die sindsdien vervallen is: de datumkeuze voor de
   agenda staat er nu achter, zie .hisco-agenda-topregel hierboven, waar
   deze klasse bovenop komt). */
.hisco-agenda-reden-regel {
    max-width: 50%;
}

.hisco-agenda-reden-regel label {
    white-space: nowrap;
}

.hisco-agenda-reden-regel textarea {
    flex: 1;
    min-width: 0;
}

/* Werkscherm: twee kaders naast elkaar (1 = 20% functiemenu, 2 = 70%
   inhoud, later agenda). Alleen op het werkscherm laten we `main` z'n
   normale (smalle, gecentreerde) breedte loslaten. */
body.hisco-werkscherm-body main {
    max-width: none;
    margin: 2rem auto;
}

/* 96%-brede kaart (op verzoek van de gebruiker, 2026-09-04: "Maak scherm
   96% van de breedte" — was 90vw): i.p.v. de standaard smalle (640px)
   kaart — gebruikt door zowel het weekrooster (zeven kolommen aan
   blokken/checkboxes) als het werkscherm (kaders "Patiënt zoeken" +
   "Agenda") als het EPD-/dossierscherm (zie .hisco-dossier-kaders
   hieronder, die met dezelfde 6 punten extra breedte is meegegroeid). */
body.hisco-breed-body main {
    /* Zevende ronde (op verzoek van de gebruiker, 2026-09-06): van 96vw
       naar 98vw — de extra 2 schermpunten gaan via de kolompercentages
       van .hisco-dossier-kaders (zie daar) volledig naar het middenkader. */
    max-width: 98vw;
    margin: 2rem auto;
    /* Ruimte tussen de contextbalk (praktijknaam/gebruiker) en het witte
       kader eronder: totaal 3px (op verzoek van de gebruiker: "niet 3
       pixel kleiner maar totaal 3 pixel"). */
    margin-top: 3px;
}

/* Matig brede kaart (op verzoek van de gebruiker, 2026-09-07: "80%
   schermbreedte maken", voor het eerst gebruikt op werkscherm/
   profylaxe.blade.php) — tussen de standaard smalle (640px) kaart en de
   98vw-brede .hisco-breed-body in: voor een enkel-kolom scherm dat wél
   meer ruimte nodig heeft dan de standaardbreedte, maar geen volle
   drie-kolommenlayout is. */
body.hisco-matig-breed-body main {
    max-width: 80vw;
    margin: 2rem auto;
}

.hisco-werkscherm-layout {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.hisco-menu {
    flex: 0 0 20%;
    margin-right: 2rem;
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hisco-menu-item {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    color: var(--hisco-tekst);
    text-decoration: none;
    font-size: 0.95rem;
}

.hisco-menu-item:hover {
    background: var(--hisco-grijs);
    color: var(--hisco-blauw);
}

.hisco-menu-item-actief {
    background: var(--hisco-blauw);
    color: #fff;
}

.hisco-menu-item-actief:hover {
    background: var(--hisco-blauw-donker);
    color: #fff;
}

.hisco-werkscherm-inhoud {
    flex: 0 0 70%;
    min-width: 0;
}

.hisco-werkscherm-inhoud .hisco-kaart {
    margin-bottom: 0;
}

/* Schermen zonder linkermenu-kader (op verzoek van de gebruiker,
   2026-09-04, de vier "ontwikkelaar database"-schermen: "linker kader
   kan vervallen. Blijft 1 kader over: 98% schermbreedte") — het
   overgebleven kader krijgt dan de volle breedte i.p.v. de standaard 70%
   naast het (hier afwezige) linkermenu. */
.hisco-werkscherm-layout-zonder-menu .hisco-werkscherm-inhoud {
    flex-basis: 98%;
}

/* Contextbalk: direct onder de menubalk (header), toont praktijknaam
   direct gevolgd door "Ingelogde <rol> <naam>" — beide links uitgelijnd
   (geen space-between meer), met een vaste, kleine tussenruimte via
   `gap` i.p.v. op witruimte in de Blade-template te vertrouwen. Alleen
   zichtbaar als je bent ingelogd. */
.hisco-contextbalk {
    background: var(--hisco-grijs);
    border-bottom: 1px solid var(--hisco-rand);
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--hisco-tekst);
}

.hisco-contextbalk-praktijk {
    font-weight: 600;
}

/* Actieve-praktijk-wisselformulier in de contextbalk — alleen getoond als
   iemand aan meerdere praktijken gekoppeld is (zie ActievePraktijkService
   en layouts/app.blade.php). Geen eigen marge/padding (staat al in de
   flex-rij van .hisco-contextbalk met `gap`), compacte select passend bij
   de kleine contextbalk-tekst. */
.hisco-contextbalk-wisselform {
    margin: 0;
    display: inline-block;
}

.hisco-contextbalk-wisselform select {
    font-size: 0.9rem;
    padding: 0.1rem 0.4rem;
    margin: 0;
}

/* Compacte versie van .hisco-fout (zelfde kleuren/rand), voor direct
   achter de naam in de contextbalk — bijv. als BIG-verificatie van een
   huisarts nog niet rond is. */
.hisco-contextbalk-waarschuwing {
    display: inline-block;
    background: #fbeaea;
    border: 1px solid var(--hisco-fout);
    color: var(--hisco-fout);
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Formulierrij: meerdere label+input-paren naast elkaar i.p.v. onder
   elkaar (bijv. "Patiënt zoeken" op het werkscherm: geboortedatum, naam en
   geslacht op 1 regel). Ieder veld in een eigen <div> (label + input/
   select) zodat label boven het bijbehorende veld blijft staan; de rij
   wrapt op smalle schermen i.p.v. te overlappen. */
.hisco-formrij {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

.hisco-formrij > div {
    flex: 1 1 160px;
    min-width: 140px;
}

/* Modifiers binnen een .hisco-formrij: sommige velden horen bewust smaller
   (geboortedatum, geslacht — passen ruim in ~130px) of breder (naam, mag
   de overgebleven ruimte opeisen) dan de standaardbreedte hierboven. De
   dubbele klasse (.hisco-formrij > .hisco-formrij-smal) is nodig om
   specifieker te zijn dan ".hisco-formrij > div" hierboven, anders wint
   die generieke regel. */
.hisco-formrij > .hisco-formrij-smal {
    flex: 0 1 130px;
    min-width: 110px;
}

.hisco-formrij > .hisco-formrij-breed {
    flex: 2 1 220px;
}

/* Autorisatie-checkboxes bij de huisartsenlijst in het administratiescherm
   ("mag medewerkergegevens wijzigen/deactiveren") — naam/rol-badge en de
   checkbox+label netjes uit elkaar, i.p.v. de brede `select`/`input`-
   stijl hierboven (die is bewust niet van toepassing op checkboxes). */
.hisco-checkbox-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.3rem 0;
}

/* Autoriseren: alleen-lezen weergave van een volledig concept, achter de
   "Toon"-knop (op verzoek van de gebruiker, 2026-09-06). flex-basis 100%
   zet het kader onder de knoppenrij; de concept-rij wrapt al (zie
   .hisco-checkbox-rij hierboven). */
.hisco-concept-toon {
    flex-basis: 100%;
    background: var(--hisco-grijs);
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
}

.hisco-concept-toon p {
    margin: 0 0 0.3rem;
}

.hisco-concept-toon .hisco-concept-toon-soep {
    margin: 0;
    white-space: pre-wrap;
}

.hisco-checkbox-rij label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: normal;
    font-size: 0.9rem;
}

.hisco-checkbox-rij input[type="checkbox"] {
    width: auto;
}

/* Autorisatie-scherm (2026-08-29): drie kolommen — naam (met rechts
   daarin de uitgelijnde soort-badge: huisarts/medewerker/praktijkhouder),
   de checkbox-kolom, en een kolom die alleen voor commentaar dient —
   zie werkscherm/autorisatie.blade.php. */
.hisco-autorisatie-lijst {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.hisco-autorisatie-rij {
    align-items: center;
    border-bottom: 1px solid var(--hisco-rand);
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: 20rem 18rem 1fr;
    padding: 0.3rem 0;
}

.hisco-autorisatie-rij:last-child {
    border-bottom: none;
}

.hisco-autorisatie-naam {
    align-items: center;
    display: flex;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: space-between;
    min-width: 0;
}

.hisco-autorisatie-rij label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: normal;
    font-size: 0.9rem;
}

.hisco-autorisatie-commentaar {
    color: #6b7785;
    font-size: 0.9rem;
    font-style: italic;
}

/* Correspondentie-inbox (Fase 8 EPD-bouwplan, 2026-08-30): rijen met
   datum / patiënt / soort+NAW+discipline+episode / Verwerken-knop — zie
   werkscherm/correspondentie-inbox.blade.php. */
.hisco-inbox-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hisco-inbox-rij {
    align-items: center;
    border-bottom: 1px solid var(--hisco-rand);
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: 6rem 1fr 1fr auto;
    padding: 0.4rem 0;
}

.hisco-inbox-rij:last-child {
    border-bottom: none;
}

/* Klikbare naam die als tekstlink oogt maar een <button type="submit">
   is (bijv. een gezinslid selecteren op patienten.blade.php) — geen
   apart <a>/GET-navigatie omdat selecteren een sessie-bijwerkende POST
   is (zie PatientenController::selecteren()). */
.hisco-naam-knop {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--hisco-blauw);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.hisco-naam-knop:hover {
    color: var(--hisco-blauw-donker);
    /* Lichtgrijs i.p.v. background:none (op verzoek van de gebruiker,
       2026-09-09 — zie .hisco-zoek-live-naam:hover). */
    background: var(--hisco-grijs);
}

/* Geneste .hisco-placeholder-tekst (bijv. "geb. ..."/adres) binnen een
   .hisco-naam-knop (op verzoek van de gebruiker, 2026-08-23: "selecteer
   dan bij klikken op naam, en geb. en adres" — geb./adres staan daarom nu
   ín de knop, niet er losstaand naast) erft anders het vet/onderstreept
   van de knop mee; dat hoort bij de naam, niet bij de geb./adres-tekst
   erna. */
.hisco-naam-knop .hisco-placeholder {
    font-weight: normal;
    text-decoration: none;
}

/* Woonverband-lijst (werkscherm/index.blade.php, knop "Woonverband"): CSS
   Grid met `display: contents` op elke <li> laat de kinderen rechtstreeks
   meedoen aan de grid van de <ul>. Sinds 2026-08-28 (op verzoek van de
   gebruiker) 3 kolommen: titel (Dhr./Mevr.), naam-knop, geboortedatum —
   de "geb."-aanvulling is bewust vervallen en de badge-kolom bestaat niet
   meer, want in de woonverbandweergave is geen patiënt geselecteerd.
   De naam-kolom stond eerst op `1fr` (rekt uit tot de volle breedte van
   het kader), waardoor de geboortedatum-kolom helemaal rechts op de
   pagina belandde i.p.v. direct achter de naam — leek daardoor te
   ontbreken. Sinds 2026-08-28 (bugfix, "geboortedatum staat helemaal
   rechts i.p.v. in een kolom achter de naam") ook de naam-kolom op
   `max-content`, zodat alle kolommen strak tegen elkaar aan staan. */
.hisco-woonverband-lijst {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
}

.hisco-woonverband-lijst li {
    display: contents;
}

/* Eerstvolgende-afspraken-lijst (werkscherm/epd-zonder-patient.blade.php,
   linkerkolom, sinds 2026-09-04 overgezet van het dode
   werkscherm/epd.blade.php). Tot 2026-09-04 een CSS-grid-met-
   `display:contents`-patroon (zelfde als .hisco-woonverband-lijst
   hierboven) met 4 kolommen (datum+tijd / titel / naam-knop /
   geboortedatum) — op verzoek van de gebruiker (2026-09-04:
   "Eerstvolgende afspraken alleen de naam. Bij hover de andere
   gegevens.") is dat teruggebracht tot alléén de naam-knop; de overige
   velden staan nu in .hisco-afspraken-lijst-details, een popup die
   alleen bij :hover op de rij verschijnt (zie de aangepaste HTML in
   epd-zonder-patient.blade.php en epd.blade.php). Geen grid meer nodig
   dus, gewoon een verticale lijst; lichtgroene achtergrond per rij
   (op verzoek van de gebruiker, 2026-09-04) blijft — zelfde tint als
   .hisco-succes/.hisco-episode-kop (#e9f7ef). */
.hisco-afspraken-lijst {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hisco-afspraken-lijst li {
    position: relative;
    background: #e9f7ef;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
}

/* De detailgegevens (datum+tijd, geslacht, geboortedatum) zijn bij
   hover zichtbaar, direct onder de naam. left:0/right:0 t.o.v. de <li>
   (position:relative hierboven) houdt de popup precies zo breed als de
   linkerkolom zelf — op verzoek van de gebruiker (2026-09-04: "Niet
   overschrijven over het epd veld") mag deze niet over de middenkolom
   (het episode-/mededelingveld, zie .hisco-dossier-kaders /
   .hisco-epd-kolommen) heen vallen. */
.hisco-afspraken-lijst-details {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 0.15rem;
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: normal;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.hisco-afspraken-lijst li:hover .hisco-afspraken-lijst-details {
    display: block;
}

/* Op verzoek van de gebruiker (2026-09-04: "Link niet onderstrepen") —
   .hisco-naam-knop is standaard onderstreept (zie die klasse hieronder),
   maar in deze compacte lijst (nu alleen nog een naam per rij, zie
   hierboven) is dat niet gewenst. Alleen hier overschreven, niet globaal
   op .hisco-naam-knop zelf — die onderstreping is elders (bijv.
   woonverbandlijst) bewust wél zo gekozen. */
.hisco-afspraken-lijst .hisco-naam-knop {
    text-decoration: none;
}

/* Rij met alleen labels, boven een rij met de bijbehorende velden/knoppen
   (bijv. "Patiënt zoeken" op patienten.blade.php) — i.p.v. een label
   direct boven elk veld (zoals .hisco-formrij elders doet). Labels hier
   hebben geen input direct eronder in dezelfde rij, dus geen aparte
   marge-override nodig; de gewone `label`-stijl (1rem boven, 0.25rem
   onder) werkt al goed op zijn eigen rij, en de veldenrij erna heeft
   zelf geen margin-top — dat geeft vanzelf een krappe, nette aansluiting.
   (2026-08-22: hier stond eerder een negatieve margin-bottom-hack om de
   veldenrij dichter tegen de labelrij te trekken, maar die trok de
   veldenrij juist óver de onderkant van de labelrij heen — op verzoek
   van de gebruiker verwijderd, "kaders staan half over de erboven
   geschreven labels".) */

/* Weekweergave van het agenda-overzicht (op verzoek van de gebruiker,
   2026-09-04: "Zet alle afspraaktijden onder elkaar en maak 5 kolommen
   voor de 5 werkdagen") — verving de vroegere snelkeuze-dagtabs +
   één-dags-overzicht. 5 kolommen (maandag t/m vrijdag, zie
   $agendaWeekDagen in WerkschermController::index()), horizontaal
   scrollbaar zodra het niet meer past; elke kolom is zo breed dat er 3
   tegelijk zichtbaar zijn (± 32% + gap, met een minimumbreedte zodat een
   kolom niet onleesbaar smal wordt op een klein scherm — dan schuift hij
   gewoon buiten beeld en is hij bereikbaar via scrollen). */
.hisco-agenda-week {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.hisco-agenda-week-dag {
    flex: 0 0 32%;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

/* Op verzoek van de gebruiker (2026-09-04: "De kolommen moeten los van
   elkaar omhoog of omlaag gescroled kunnen worden") — de kolomkop
   (.hisco-agenda-week-dag-kop) staat hierbuiten en blijft dus vast staan;
   alleen dit gedeelte (de tijdslots) scrollt, onafhankelijk per kolom. */
.hisco-agenda-week-dag-inhoud {
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Dagnaam + datum op één regel (op verzoek van de gebruiker, 2026-09-04:
   "Datum achter de naam van de dag"), met in de eerste kolom de knop
   "Vorige week" ervóór en in de laatste kolom de knop "Volgende week"
   erna (zie werkscherm/index.blade.php) — flex-rij zodat die knoppen
   gewoon meelopen in dezelfde gecentreerde regel i.p.v. een aparte regel
   nodig te hebben. */
.hisco-agenda-week-dag-kop {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-weight: 700;
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--hisco-rand);
}

.hisco-agenda-week-dag-kop-datum {
    font-weight: 400;
    color: #6b7785;
}

/* Dagoverzicht van de agenda, bovenin het Agenda-kader op het werkscherm
   (op verzoek van de gebruiker, 2026-08-22: "Je hebt nu de gegevens om een
   agenda op te bouwen", later verfijnd tot "Maak per blok 3 kolommen", en
   op 2026-09-04 omgezet naar de weekweergave hierboven: "Zet alle
   afspraaktijden onder elkaar") — per blok uit het weekrooster de
   reguliere tijdslots onder elkaar (zie werkscherm/index.blade.php +
   werkscherm/_agenda-cel.blade.php), afgesloten met één rij "Pauze" + de
   spoedconsulten. Een leeg tijdslot is een echt formulier (met de
   "soort"-select erin) dat dubbelklikbaar is om de geselecteerde patiënt
   hier in te plannen; een bezet tijdslot toont soort + naam van de
   ingeplande patiënt. */
.hisco-agenda-blok-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.hisco-agenda-cel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    font-size: 0.9rem;
    margin: 0;
}

.hisco-agenda-cel-kop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
}

.hisco-agenda-cel-kop .hisco-agenda-cel-patient {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* De patiëntnaam is sinds 2026-08-23 een <button> (opent het dossier, zie
   AgendaController::naarDossier()) i.p.v. een kale <span> — hier de
   button-chrome eraf zodat hij er nog steeds als gewone celtekst uitziet,
   alleen nu met een pointer-cursor. */
.hisco-agenda-cel-patient-knop {
    display: inline;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* Zelfde lek/fix als .hisco-zoek-live-naam:hover eerder in dit bestand. */
.hisco-agenda-cel-patient-knop:hover {
    background: var(--hisco-grijs);
    text-decoration: underline;
}

.hisco-agenda-cel-kop select {
    width: auto;
    padding: 0.1rem 0.3rem;
    font-size: 0.85rem;
}

.hisco-agenda-cel-leeg {
    background: #fff;
    cursor: pointer;
}

.hisco-agenda-cel-leeg:hover {
    background: var(--hisco-grijs);
    border-color: var(--hisco-blauw);
}

.hisco-agenda-cel-bezet {
    background: var(--hisco-grijs);
    position: relative;
}

/* Reden-voor-afspraak-popupvenster (op verzoek van de gebruiker,
   2026-09-04: "Enkel klikken op een patientnaam toont de reden voor
   afspraak in een popupvenster onder de patientnaam, met een sluit
   minibutton" — zie het scriptje in werkscherm/index.blade.php) — hangt
   onder het hele tijdslot (.hisco-agenda-cel-bezet is hiervoor
   position:relative geworden). */
.hisco-agenda-reden-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 6px;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
    color: var(--hisco-tekst);
    min-width: 14rem;
    max-width: 22rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-style: normal;
    white-space: normal;
}

/* Opgeroepen (zie AgendaAfspraak::isOpgeroepen(), op verzoek van de
   gebruiker, 2026-08-23: "regel in agenda wordt dan lichtgrijs, maar
   blijft klikbaar") — een duidelijk zichtbaar grijzer dan de standaard
   .hisco-agenda-cel-bezet-achtergrond hierboven (die is zelf al een heel
   lichte tint), zodat het verschil "nog niet"/"al opgeroepen" opvalt. */
.hisco-agenda-cel-opgeroepen {
    background: var(--hisco-rand);
}

/* Een geblokkeerd tijdslot (het eerstvolgende slot ná een dubbelconsult,
   zie App\Models\AgendaAfspraak::isGeblokkeerd()) is geen echte afspraak —
   gestippelde rand om 'm optisch te onderscheiden van een bezet tijdslot
   met een echte patiënt erop. */
.hisco-agenda-cel-geblokkeerd {
    border-style: dashed;
}

/* Op verzoek van de gebruiker (2026-08-22): een visite-blok (soort_blok
   "V") krijgt een blauw omlijnd kader, een telefonisch-consult-blok
   (soort_blok "T") een groen omlijnd kader, en een gewoon consulten-blok
   ("C") een neutraal grijs omlijnd kader — zie werkscherm/index.blade.php.
   Het visite-kader gebruikt bewust hetzelfde heldere blauw (#1a73e8) als
   het label "Huisarts" i.p.v. het standaard (donkerdere) --hisco-blauw —
   op verzoek van de gebruiker ("helderder blauw, zoals bij huisarts"). */
.hisco-agenda-blok-visite {
    border: 2px solid #1a73e8;
    border-radius: 8px;
    padding: 0.5rem;
}

.hisco-agenda-blok-telefonisch {
    border: 2px solid var(--hisco-succes);
    border-radius: 8px;
    padding: 0.5rem;
}

.hisco-agenda-blok-consult {
    border: 2px solid #9aa5b1;
    border-radius: 8px;
    padding: 0.5rem;
}

/* Info-knop naast een fieldset-legend (op verzoek van de gebruiker,
   2026-08-22, eerst gebruikt bij de legend "Agenda" in werkscherm/
   index.blade.php) + de bijbehorende <dialog>-popup. */
.hisco-info-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    margin-left: 0.4rem;
    border-radius: 50%;
    border: 1px solid #1a73e8;
    background: #fff;
    color: #1a73e8;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}

.hisco-info-knop:hover {
    background: #1a73e8;
    color: #fff;
}

.hisco-info-dialog {
    /* 25% breder (op verzoek van de gebruiker, 2026-09-04: "Maak
       informatie popup voor agenda 25% breder") — was 40rem. */
    max-width: 50rem;
    width: 90vw;
    border: none;
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.hisco-info-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.hisco-info-dialog h3 {
    margin-top: 0;
}

.hisco-info-dialog ul,
.hisco-info-dialog ol {
    padding-left: 1.4rem;
}

.hisco-info-dialog li {
    margin-bottom: 0.4rem;
}

/* Database-overzicht (werkscherm/ontwikkelaar-database*.blade.php, op
   verzoek van de gebruiker, 2026-08-31): tabelnaam-links in het 4-koloms
   overzicht gewoon als leesbare tekst i.p.v. de standaard linkkleur op elke
   regel — dit is een dichte lijst van tientallen namen, niet een paar
   nadrukkelijke acties. */
.hisco-database-tabel-link {
    color: var(--hisco-tekst);
    text-decoration: none;
}

.hisco-database-tabel-link:hover {
    color: var(--hisco-blauw);
    text-decoration: underline;
}

/* Kolomstructuur- en data-tabellen op dezelfde schermen: een simpele HTML
   <table> (dit is de eerste plek in de app die er een gebruikt — de rest
   werkt met kaarten/lijstjes, maar voor rijen-met-vaste-kolommen is een
   <table> hier duidelijker). */
.hisco-database-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.hisco-database-tabel th,
.hisco-database-tabel td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--hisco-rand);
    white-space: nowrap;
}

.hisco-database-tabel th {
    color: #6b7785;
    font-weight: 600;
}

/* EPD-scherm (werkscherm/epd.blade.php, Fase 1 EPD-bouwplan, 2026-08-27):
   drie kolommen naast elkaar — 15% eerstvolgende afspraken, 65% episode/
   deelconsult (nog een placeholder, Fase 3 van het EPD-bouwplan), 15%
   Handelingen. Deze regel bleek te ontbreken op de echte machine (net als
   eerder epd.blade.php en _patient-zoeken-kader.blade.php al bleken te
   ontbreken) — hier op 2026-09-02 (vervolg 17) opnieuw toegevoegd. */
.hisco-epd-kolommen {
    display: grid;
    grid-template-columns: 15% 1fr 15%;
    gap: 1rem;
    margin-top: 1rem;
}

.hisco-epd-episode-kolom {
    min-width: 0;
}

/* Behandelingen coderen (NHG-Ingrepenviewer) — scherm herzien op verzoek
   van de gebruiker (2026-09-02, vervolg 17: "scherm behandelingen is een
   rommeltje"). Geen werkscherm-menu meer ernaast (dit is een op zichzelf
   staand naslagscherm, zie `hisco-breed-body` op `body` voor de 90%-brede
   kaart) — in plaats daarvan een eigen 30/70-kolomindeling: links de
   zoekfunctie + een compacte, doorloopbare resultatenlijst, rechts een
   "viewer" met de volledige details van de rij waar net op geklikt is
   (server-side via ?bekijk=<id>, geen JavaScript nodig). */
.hisco-behandelingen-kolommen {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
    align-items: start;
}

.hisco-behandelingen-lijst {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

/* De resultatenlijst staat sinds 2026-09-02 (vervolg 19) in de
   Viewer-kolom zelf, boven de details van de aangeklikte rij (op verzoek
   van de gebruiker: "de selectielijst moet in het kader viewer") — een
   lagere max-hoogte dan de generieke regel hierboven, zodat er in
   dezelfde kolom ook nog ruimte voor die details overblijft. */
.hisco-behandelingen-viewer .hisco-behandelingen-lijst {
    max-height: 30vh;
}

.hisco-behandelingen-lijst li {
    border-bottom: 1px solid var(--hisco-rand);
}

.hisco-behandelingen-lijst a {
    display: block;
    padding: 0.4rem 0.2rem;
    color: var(--hisco-tekst);
    text-decoration: none;
}

.hisco-behandelingen-lijst a:hover {
    color: var(--hisco-blauw);
}

/* .hisco-behandelingen-actief verwijderd (2026-09-04): een klik op een
   hoofdrubriek springt sindsdien direct door naar stap 2 i.p.v. de
   hoofdrubriek "actief" te markeren op stap 1 zelf, zie
   BehandelingenController::index() en werkscherm/behandelingen.blade.php.
   De klasse werd nergens anders gebruikt. */

/* No/Rubriek(of Subrubriek)/Tractus/CMSV op één regel in de viewer (op
   verzoek van de gebruiker, 2026-09-02, vervolg 21: "No en rubriek op 1
   regel en waarde op zelfde regel direct achter label. Zelfde voor
   tractus en CMSV, en zet op zelfde regel als No en rubriek") — alleen
   Omschrijving (kan een lange tekst zijn) blijft in de gewone <dl>
   eronder op een eigen regel. */
.hisco-behandelingen-kenmerken {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0 0 0.75rem;
}

.hisco-behandelingen-kenmerken strong {
    color: #6b7785;
    font-weight: 600;
}

.hisco-behandelingen-viewer dt {
    color: #6b7785;
    font-weight: 600;
    margin-top: 0.75rem;
}

.hisco-behandelingen-viewer dt:first-child {
    margin-top: 0;
}

.hisco-behandelingen-viewer dd {
    margin: 0.1rem 0 0;
}

/* Oogje bij het wachtwoordveld op het inlogscherm (op verzoek van de
   gebruiker, 2026-09-04): het veld krijgt rechts ruimte voor het oogje,
   het oogje zelf is een randloze, transparante knop die in het veld
   staat (absoluut gepositioneerd, zie .hisco-wachtwoord-veld). Teruggezet
   na de css-herindeling van 2026-09-04 — het inlogscherm gebruikt deze
   klassen nog. */
.hisco-wachtwoord-veld {
    position: relative;
}

.hisco-wachtwoord-veld input {
    padding-right: 2.4rem;
    width: 100%;
    box-sizing: border-box;
}

.hisco-wachtwoord-oog {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem;
    background: none;
    border: none;
    color: var(--hisco-tekst);
    opacity: 0.65;
    cursor: pointer;
}

/* Zelfde lek/fix als .hisco-zoek-live-naam:hover eerder in dit bestand. */
.hisco-wachtwoord-oog:hover {
    background: var(--hisco-grijs);
    opacity: 1;
}

/* Meldingen-popup bij het wisselen van scherm (op verzoek van de
   gebruiker, 2026-09-05, zie layouts/app.blade.php en
   App\Models\Melding::isVoor()): rechtsboven vast op het scherm, onder de
   menubalk, gestapeld als er meerdere ongelezen meldingen tegelijk voor
   de ingelogde gebruiker zijn. De X (rechtsboven in het kader) sluit 'm =
   gelezen_op zetten; de "Afgehandeld"-microbutton daaronder zet
   afgehandeld_op (en impliciet ook gelezen_op), zie
   App\Http\Controllers\MeldingController::gelezen()/afgehandeld(). Hoger
   z-index dan al het andere op de pagina (de menubalk-dropdowns zitten op
   100/110). */
.hisco-melding-popups {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Op verzoek van de gebruiker (2026-09-05: "valt nauwelijks op") 30%
       van de schermbreedte i.p.v. de vaste 22rem — .hisco-melding-popup
       vult die breedte (flex-direction:column stretcht kinderen
       standaard). */
    width: 30vw;
}

.hisco-melding-popup {
    position: relative;
    background: #fff;
    border: 1px solid var(--hisco-rand);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: 0.75rem 2rem 0.75rem 0.9rem;
}

.hisco-melding-popup-tekst {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.hisco-melding-popup-sluiten {
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    border: none;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--hisco-tekst);
    opacity: 0.6;
    padding: 0.2rem 0.4rem;
}

/* Zelfde lek/fix als .hisco-zoek-live-naam:hover eerder in dit bestand. */
.hisco-melding-popup-sluiten:hover {
    background: var(--hisco-grijs);
    opacity: 1;
    color: var(--hisco-fout);
}

/* Gelezen/afgehandeld-status op de meldingenlijst (op verzoek van de
   gebruiker, 2026-09-05, achter de Verwijderen-knop): platte tekst,
   blauw zodra de status van toepassing is ("Gelezen"/"Afgehandeld"),
   standaardkleur bij "Niet gelezen"/"Niet afgehandeld" — zie
   werkscherm/meldingen.blade.php. */
.hisco-melding-status-actief {
    color: var(--hisco-blauw);
    font-weight: 600;
}

/* Meldingenoverzicht (op verzoek van de gebruiker, 2026-09-07: "uitlijnen
   de buttons Wijzigen Verwijderen en Sluiten. en de opmerkingen
   gelezen/niet gelezen en afgehandeld/niet afgehandeld") — CSS Grid met
   `display: contents` op elke <li>, zelfde patroon als
   .hisco-woonverband-lijst hierboven: laat de kinderen rechtstreeks
   meedoen aan de grid van de <ul>, zodat elke kolom op elke regel exact
   onder elkaar staat, ongeacht hoe lang de melding-inhoud (kolom 1) is.
   5 kolommen: inhoud (1fr, rekt uit), gelezen-status, afgehandeld-status
   en acties (alle drie max-content). Gelezen- en afgehandeld-status zijn
   bewust EIGEN kolommen i.p.v. samen in één "status"-kolom (bugfix op
   verzoek van de gebruiker: "Afgehandeld/niet afgehandeld staat niet
   uitgelijnd") — in één gezamenlijke kolom verschoof de afgehandeld-tekst
   mee met de wisselende breedte van "Gelezen"/"Niet gelezen" ervoor, dus
   stond hij niet overal op dezelfde positie. Als eigen kolom (max-content
   over alle rijen heen) staat hij nu altijd op dezelfde plek, ook op
   regels zonder afgehandeld-status (lege cel, kolom blijft staan). */
.hisco-meldingen-lijst {
    display: grid;
    grid-template-columns: 1fr max-content max-content max-content;
    align-items: baseline;
    column-gap: 1rem;
    row-gap: 0.5rem;
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 1.5rem;
}

.hisco-meldingen-lijst li {
    display: contents;
}

.hisco-meldingen-lijst-acties {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    white-space: nowrap;
}