/*
 * RegiQ — eigen stijl.
 *
 * Bewust een kaal, statisch CSS-bestand in public/ en geen Tailwind-bron in
 * resources/css/. Op deze machine staat geen Node en draait geen Vite-build,
 * dus alles wat gecompileerd moet worden is hier onbruikbaar. Dit bestand
 * wordt rechtstreeks geserveerd en met asset() ingeladen.
 *
 * Afspraken:
 *   - Nooit inline CSS of <style>-blokken in Blade. Alles staat hier.
 *   - Classnamen krijgen een prefix die aangeeft waar ze bij horen:
 *     .inlog-*  = inlogscherm en wachtwoordherstel
 *     .schil-*  = applicatieschil achter de inlog (zijbalk, topbalk, inhoud)
 *     .dash-*   = dashboardtegels, kaarten, filters en acties
 *     .toost-*  = zwevende meldingen (flash)
 *     .clrm-*   = Caseloadrekenmodule (resultaatblok, parameters, veldhulp)
 *     .beheer-* = platformbeheer (nog te doen)
 *     .regiq-*  = gedeelde componenten, zoals de smalle primaire knop
 *   - Kleuren en maten staan als custom properties in :root, zodat een
 *     huisstijlwijziging op één plek gebeurt.
 */

/* ==========================================================================
   1. Lettertype
   ==========================================================================
   Inter wordt zelf gehost en niet via de Google Fonts CDN geladen: die stuurt
   het IP-adres van elke bezoeker naar een derde partij, wat voor een
   verwerker van klantgegevens onnodig risico is.

   De .woff2-bestanden horen in public/fonts/ te staan; zie het LEESMIJ daar.
   Ontbreken ze, dan valt de pagina terug op de systeemfont en blijft alles
   leesbaar — alleen de vormgeving wijkt dan iets af.
*/

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700.woff2') format('woff2');
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
    --regiq-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /*
     * Huisstijl: #6a35b1 is de primaire kleur, #9853af de partnerkleur voor
     * gradients. Alle verlopen lopen van paars naar paars-licht.
     */
    --regiq-paars: #6a35b1;
    --regiq-paars-diep: #582c95;
    --regiq-paars-licht: #9853af;
    --regiq-paars-link: #7d44c4;

    --regiq-achtergrond: #f1f3f8;
    --regiq-kaart: #ffffff;
    --regiq-tekst: #2f3242;
    --regiq-tekst-zacht: #8b90a0;
    --regiq-plaatshouder: #9aa0ad;
    --regiq-rand: #e4e7ee;
    --regiq-rand-zacht: #eceef3;

    --regiq-goed: #22c55e;
    --regiq-fout: #dc2626;
    --regiq-fout-vlak: #fdf2f2;

    /*
     * De kleuren van een stand: één schaal per betekenis, overal hetzelfde.
     * ---------------------------------------------------------------------
     * Groen stond op drie plekken in drie waarden — #22a75c in een tegelicoon,
     * #1a7f45 in een badge, weer iets anders in een ringboog — en dat zie je
     * meteen zodra ze op één scherm naast elkaar staan. Deze reeks is de enige
     * bron; elke boog, staaf, stip, badge en waarde verwijst hierheen.
     *
     * ─── Drie rollen per stand, en waarom dat er drie zijn ─────────────────
     *
     * Er is één rol per achtergrond waarop de kleur landt, niet één per plek:
     *
     *   (zonder achtervoegsel)  een VLAK op wit — ringboog, staaf, stip, icoon
     *   -tekst                  TEKST op wit — badge, het getal op een tegel
     *   -zacht                  het lichte VLAK onder zo'n tekst
     *   -op-donker              tekst op de donkere tooltiplaag
     *
     * Vlak en tekst kunnen niet dezelfde waarde zijn: een kleur die als vlak
     * levendig oogt haalt op wit geen leescontrast, en een kleur die dat wel
     * haalt is als vlak zwaar en dof. Dat is één keer geprobeerd — alles op de
     * tekstwaarde — en het resultaat was precies dat: een bosgroene ring naast
     * een bosgroene staaf, correct en lelijk.
     *
     * Wat ze wel delen is hun **kleurtoon**: vlak en tekst liggen op dezelfde
     * hue (gemeten, verschil onder een halve graad), dus ze lezen als één kleur
     * in twee tinten en niet als twee kleuren.
     *
     * ─── De tinten zijn gemeten en niet gekozen ────────────────────────────
     *
     * Uitgerekend in OKLCH en getoetst met de rekenregels uit de dataviz-methode:
     *
     *   - elke tekstkleur haalt minstens 4,5:1 op wit (WCAG AA), gemeten 6,4-7,3;
     *   - elk paar vlakken houdt dE >= 15 in OKLab voor normaal zicht, en >= 6
     *     onder gesimuleerde protanopie en deuteranopie.
     *
     * Dat laatste stuurde twee keuzes die er anders niet zouden zijn. **Groen is
     * lichter gezet dan rood** (L 0,70 tegen 0,61): kleurtoon valt onder
     * deuteranopie weg, een lichtheidsverschil niet — zonder dat stonden groen en
     * rood op dE 3,6, dus praktisch gelijk. En **oranje is naar geel geschoven**
     * (hue 78 in plaats van 68), weg van rood. tests/Feature/StandkleurenTest.php
     * rekent beide eisen na.
     *
     * Groen is #22c55e en rood --regiq-fout (#dc2626), allebei op verzoek van de
     * eigenaar; de overige standen zijn daarop afgestemd en daarna opnieuw
     * doorgerekend. Rood gelijk aan de foutkleur is bovendien consequent: "niet
     * akkoord" en "er ging iets mis" horen op één platform dezelfde rood te zijn.
     *
     * ─── Vlakke kleuren, geen verlopen ─────────────────────────────────────
     *
     * Elke staaf, boog en balk krijgt de kleur zelf. Er hebben verlopen op
     * gezeten — twee tinten van dezelfde kleur, om een vlak vorm te geven — en
     * die zijn er op verzoek uit. Een verdeling hoort te lezen op lengte en
     * kleur; een verloop voegt een schakering toe die niets betekent.
     *
     * Uitzondering is de standaardstaaf zonder kleurklasse, die het paarse
     * verloop uit .staafgrafiek-vlak houdt. Dat is bestaand gedrag op de andere
     * schermen van dit platform en staat los van deze reeks.
     *
     */
    --stand-groen: #22c55e;
    --stand-groen-tekst: #026e2f;
    --stand-groen-zacht: rgba(34, 197, 94, 0.14);
    --stand-groen-op-donker: #8de69f;

    /* Gelijk aan --regiq-fout: "niet akkoord" en "er ging iets mis" horen op één
       platform dezelfde rood te zijn. */
    --stand-rood: var(--regiq-fout);
    --stand-rood-tekst: #9a322c;
    --stand-rood-zacht: rgba(220, 38, 38, 0.13);
    --stand-rood-op-donker: #febab1;

    --stand-blauw: #048ff4;
    --stand-blauw-tekst: #075da0;
    --stand-blauw-zacht: rgba(4, 143, 244, 0.13);

    --stand-oranje: #e4a40f;
    --stand-oranje-tekst: #765406;
    --stand-oranje-zacht: rgba(228, 164, 15, 0.16);

    --stand-paars: var(--regiq-paars);
    --stand-paars-tekst: var(--regiq-paars);
    --stand-paars-zacht: rgba(106, 53, 177, 0.1);

    --stand-grijs: #94a0ac;
    --stand-grijs-tekst: #525c66;
    --stand-grijs-zacht: rgba(148, 160, 172, 0.16);

    /* De afwezigheid van een waarde. Alleen als vlak: op wit haalt hij geen
       leescontrast, en dat hoeft ook niet — waar "Niet ingevuld" als tekst staat,
       staat hij in de gewone tekstkleur. */
    --stand-leegwaarde: #d0d8e1;

    /*
     * Eén maat voor elk getal dat een waarde is: bedragen, uren, percentages,
     * aantallen. 14px, gelijk aan een tabelcel — een rekenblad hoort één
     * cijfermaat te hebben, anders leest een groter gezet bedrag als
     * belangrijker terwijl het gewoon een tussenstap is. Waar iets moet
     * opvallen doen kleur en gewicht dat, niet de grootte.
     *
     * In rem en niet in px: zo schaalt het mee met wie zijn browser groter heeft
     * gezet. 0,875rem is 14px bij de standaardinstelling.
     *
     * Uitgezonderd zijn de dashboardtegels: die zijn juist bedoeld als één groot
     * kerncijfer per tegel en dragen hun eigen maat.
     */
    --regiq-cijfer: 0.875rem;

    /* Eén afrondingsmaat voor het hele platform. */
    --regiq-radius: 10px;
    --regiq-radius-klein: 10px;

    --regiq-schaduw-kaart: 0 10px 40px rgba(24, 20, 60, 0.08);
    --regiq-schaduw-knop: 0 6px 18px rgba(106, 53, 177, 0.28);

    /*
     * De twee vullingen van een grafiekreeks die géén reeksnummer heeft: de
     * lijnreeks over de staven heen, en de enkele staafreeks met zijn verloop.
     * (De genummerde reeksen staan bij .staafgrafiek-reeks-0 en -1.)
     *
     * Ze staan hier en niet op .staafgrafiek zelf, want de tooltiplaag hangt
     * aan <body> en dus buiten elke grafiek. Een variabele die alleen binnen
     * .staafgrafiek bestaat, valt daar stil terug op niets — dan is het stipje
     * in de tooltip kleurloos zonder dat er iets misgaat. Zie .regiq-tip-stip.
     *
     * De lijn is bewust niet paars: dat is in een grafiek de kleur van "hier
     * gebeurt iets" en dat zijn de staven. Dezelfde oranje als
     * .meter.is-bijna-vol — die bestaat al en betekent hier niets alarmerends,
     * hij is alleen het duidelijkst verschillend.
     */
    --staafgrafiek-lijn: #e2561f;
    --staafgrafiek-enkel: linear-gradient(180deg, var(--regiq-paars-licht), var(--regiq-paars));
}

/* ==========================================================================
   3. Basis
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--regiq-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--regiq-tekst);
    background: var(--regiq-achtergrond);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   4. Inlogscherm en wachtwoordherstel
   ========================================================================== */

.inlog-pagina {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem 1rem;
}

.inlog-kaart {
    width: 100%;
    max-width: 26rem;
    background: var(--regiq-kaart);
    border-radius: var(--regiq-radius);
    box-shadow: var(--regiq-schaduw-kaart);
    overflow: hidden;
}

/* --- Paarse kop met het logo ------------------------------------------- */

.inlog-kop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8.5rem;
    padding: 1.5rem;
    background: linear-gradient(115deg, var(--regiq-paars) 0%, var(--regiq-paars-licht) 100%);
    overflow: hidden;
}

/*
 * De twee zachte cirkels uit het ontwerp. Puur decoratief, dus met ::before en
 * ::after in plaats van lege elementen in de markup.
 */
.inlog-kop::before,
.inlog-kop::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.inlog-kop::before {
    width: 11rem;
    height: 11rem;
    top: -5rem;
    right: -3.5rem;
}

.inlog-kop::after {
    width: 8rem;
    height: 8rem;
    bottom: -4.5rem;
    left: -2.25rem;
}

.inlog-logo {
    position: relative;
    display: block;
    width: auto;
    max-width: 60%;
    height: auto;
    max-height: 3.25rem;
}

/* Terugvaloptie voor het geval public/images/logo-wit.png verdwijnt. */
.inlog-logo-tekst {
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
}

/* --- Formulier ---------------------------------------------------------- */

.inlog-body {
    padding: 1.75rem 2rem 2rem;
}

.inlog-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--regiq-tekst);
}

/*
 * De wikkel om invoerveld plus pictogram. position: relative zodat het
 * pictogram absoluut geplaatst kan worden, en focus-within zodat de hele
 * wikkel meekleurt zodra het veld focus krijgt.
 */
.inlog-veld {
    position: relative;
    margin-bottom: 1.15rem;
}

.inlog-invoer {
    width: 100%;
    height: 3rem;
    padding: 0 1rem 0 3rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--regiq-tekst);
    background: var(--regiq-kaart);
    border: 1px solid var(--regiq-rand);
    border-radius: var(--regiq-radius-klein);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inlog-invoer::placeholder {
    color: var(--regiq-plaatshouder);
}

.inlog-invoer:focus {
    border-color: var(--regiq-paars-link);
    box-shadow: 0 0 0 3px rgba(106, 53, 177, 0.12);
}

/*
 * De pictogrammen staan als inline SVG in de markup, maar hun vormgeving hoort
 * hier: stroke en fill zijn presentatie en dus geen taak van de HTML.
 */
.inlog-pictogram {
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 1.15rem;
    height: 1.15rem;
    transform: translateY(-50%);
    color: var(--regiq-plaatshouder);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: color 0.15s ease;
}

.inlog-veld:focus-within .inlog-pictogram {
    color: var(--regiq-paars-link);
}

/*
 * Het gekleurde ruitje rechts in het actieve veld uit het ontwerp. Alleen
 * zichtbaar zodra het veld focus heeft; decoratief, dus aria-hidden in de
 * markup.
 */
.inlog-accent {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 1.1rem;
    height: 1.1rem;
    background: linear-gradient(135deg, #f0932b 0%, var(--regiq-paars-licht) 55%, var(--regiq-paars) 100%);
    border-radius: 4px;
    opacity: 0;
    transform: translateY(-50%) rotate(45deg) scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.inlog-veld:focus-within .inlog-accent {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg) scale(1);
}

/* --- Knop en link ------------------------------------------------------- */

.inlog-knop {
    display: block;
    width: 100%;
    height: 3.125rem;
    margin-top: 0.25rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(90deg, var(--regiq-paars) 0%, var(--regiq-paars-licht) 100%);
    border: 0;
    border-radius: var(--regiq-radius-klein);
    box-shadow: var(--regiq-schaduw-knop);
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.inlog-knop:hover {
    filter: brightness(1.06);
}

.inlog-knop:active {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(106, 53, 177, 0.28);
}

.inlog-knop:focus-visible {
    outline: 2px solid var(--regiq-paars-link);
    outline-offset: 3px;
}

.inlog-vergeten {
    display: block;
    margin-top: 1.15rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--regiq-paars-link);
    text-align: center;
    text-decoration: none;
}

.inlog-vergeten:hover {
    text-decoration: underline;
}

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

.inlog-melding {
    margin-bottom: 1.35rem;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    border-radius: var(--regiq-radius-klein);
}

.inlog-melding-fout {
    color: #a32020;
    background: var(--regiq-fout-vlak);
    border: 1px solid #f6d4d4;
}

.inlog-melding-goed {
    color: #1a7f45;
    background: #f1fbf5;
    border: 1px solid #cdeeda;
}

.inlog-melding p {
    margin: 0;
}

.inlog-melding p + p {
    margin-top: 0.35rem;
}

/* Uitleg boven een formulier, bijvoorbeeld bij wachtwoord vergeten. */
.inlog-uitleg {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    color: var(--regiq-tekst-zacht);
}

.inlog-titel {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--regiq-tekst);
}

/* --- Tweefactor --------------------------------------------------------- */

.inlog-qr {
    display: flex;
    justify-content: center;
    margin: 0 0 1rem;
}

.inlog-qr svg {
    width: 8.5rem;
    height: 8.5rem;
    border: 1px solid var(--regiq-rand-zacht);
    border-radius: var(--regiq-radius-klein);
    background: #ffffff;
}

/* De handmatige sleutel; user-select: all zodat één klik alles selecteert. */
.inlog-geheim {
    margin: 0 0 1.25rem;
    padding: 0.5rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-align: center;
    overflow-wrap: break-word;
    color: var(--regiq-tekst);
    background: var(--regiq-achtergrond);
    border: 1px dashed var(--regiq-rand);
    border-radius: var(--regiq-radius-klein);
    user-select: all;
}

/* Het codeveld heeft geen pictogram; de linkerpadding van .inlog-invoer
   is daar dus niet nodig en de cijfers staan gecentreerd. */
.inlog-code {
    padding: 0 1rem;
    font-size: 1.25rem;
    letter-spacing: 0.35em;
    text-align: center;
}

.inlog-uitleg-onder {
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    text-align: center;
}

/* --- Voettekst ---------------------------------------------------------- */

.inlog-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 2rem;
    font-size: 0.82rem;
    color: var(--regiq-tekst-zacht);
    border-top: 1px solid var(--regiq-rand-zacht);
}

.inlog-versie {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.inlog-status {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--regiq-goed);
}

/* --- Kleine schermen ---------------------------------------------------- */

@media (max-width: 30rem) {
    .inlog-body {
        padding: 1.5rem 1.35rem 1.75rem;
    }

    .inlog-voet {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 1rem 1.35rem;
    }

    .inlog-kop {
        min-height: 7rem;
    }
}

/* ==========================================================================
   5. Gedeelde componenten
   ==========================================================================
   Componenten die niet bij één scherm horen krijgen het prefix .regiq-*.
*/

/*
 * De primaire knop in smalle uitvoering: dezelfde huisstijl als de brede
 * inlogknop, maar de breedte voegt zich naar de inhoud. Voor formulieren en
 * werkbalken waar een knop over de volle breedte misstaat. Werkt op <button>
 * én op <a>, vandaar de tekstregels.
 */
/* Ook als <button> binnen .wrap, waar de generieke knopregels anders winnen. */
.regiq-knop,
.wrap button.regiq-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 2.4rem;
    padding: 0 1.2rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--regiq-paars) 0%, var(--regiq-paars-licht) 100%);
    border: 0;
    border-radius: var(--regiq-radius-klein);
    box-shadow: 0 4px 12px rgba(106, 53, 177, 0.24);
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.regiq-knop:hover {
    filter: brightness(1.06);
}

.regiq-knop:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(106, 53, 177, 0.24);
}

.regiq-knop:focus-visible {
    outline: 2px solid var(--regiq-paars-link);
    outline-offset: 3px;
}

/*
 * Een knop die als <a> is opgemaakt, erft binnen .wrap anders de paarse
 * linkkleur — en die wint qua specificiteit van de knopkleur hierboven.
 * Vandaar deze expliciete overschrijving.
 */
.wrap a.regiq-knop,
.wrap a.regiq-knop:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Lichte variant: voor secundaire acties naast een primaire knop. */
.regiq-knop.regiq-knop-licht {
    color: var(--regiq-tekst);
    background: var(--regiq-kaart);
    border: 1px solid var(--regiq-rand);
    box-shadow: none;
}

.regiq-knop-licht:hover {
    filter: none;
    color: var(--regiq-paars);
    border-color: var(--regiq-paars-licht);
}

.wrap a.regiq-knop-licht {
    color: var(--regiq-tekst);
}

.wrap a.regiq-knop-licht:hover {
    color: var(--regiq-paars);
    text-decoration: none;
}

.regiq-knop-icoon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Gevaarvariant: uitsluitend voor onomkeerbare acties zoals verwijderen. */
.regiq-knop.regiq-knop-gevaar {
    background: linear-gradient(90deg, #b91c1c 0%, var(--regiq-fout) 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

/* --- Wachtstand op een knop ----------------------------------------------
   Gezet door regiq.js op het moment van verzenden; zonder JavaScript
   verandert er niets en verzendt het formulier precies zoals altijd.

   De knop gaat op `disabled`, en dat is de eigenlijke maatregel — de ring
   legt alleen uit waarom hij niet meer reageert. Een tweede druk op een
   AI-knop kost de klant een plek in zijn maandtegoed, een betaalde aanroep
   en een nieuwe verzending van persoonsgegevens naar Mistral. Uitschakelen
   kan hier veilig: geen enkele submit-knop in dit project draagt een `name`,
   dus er gaat geen formulierwaarde verloren. Komt die er ooit wel een, dan
   moet deze aanpak herzien worden. */
.regiq-lader {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: regiq-draai 0.7s linear infinite;
}

/* Draagt de knop al een eigen icoon, dan neemt de ring die plek in. Anders
   staat er een stilstaand teken naast een draaiende ring, en dat leest als
   twee dingen die iets verschillends betekenen. */
.regiq-knop.is-bezig .regiq-knop-icoon {
    display: none;
}

/* Specifieker dan `.regiq-knop:disabled` (0,2,0), dat verderop in dit bestand
   staat en anders zou winnen — met `not-allowed` als cursor en een opacity van
   0,45 waarin de ring nauwelijks te zien is. Zelfde specificiteitsval als bij
   `.dash-actie`. */
.regiq-knop.is-bezig:disabled {
    opacity: 0.75;
    cursor: progress;
}

@keyframes regiq-draai {
    to {
        transform: rotate(360deg);
    }
}

/* Wie liever geen beweging ziet, krijgt een rustige puls in plaats van een ring
   die rondtolt; de gewijzigde knoptekst doet dan het werk. */
@media (prefers-reduced-motion: reduce) {
    .regiq-lader {
        animation: regiq-pols 1.4s ease-in-out infinite;
    }
}

@keyframes regiq-pols {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

/* ==========================================================================
   6. Applicatieschil: zijbalk, topbalk en inhoud (achter de inlog)
   ==========================================================================
   Eén schil voor klantdashboard én platformbeheer. De zijbalk draagt de
   huisstijl (het verloop uit de inlogkop); de inhoud blijft rustig en licht.
   Het mobiele menu werkt met de checkbox .schil-menuschakel: aangevinkt
   betekent "zijbalk open". Geen JavaScript nodig.
*/

/* Uit beeld maar bruikbaar; via de labels (hamburger en sluier) bedienbaar. */
.schil-menuschakel {
    position: absolute;
    left: -9999px;
}

.schil {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Zijbalk ------------------------------------------------------------- */

.schil-zijbalk {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* 16rem en niet krapper: "Caseloadrekenmodule" is het langste menu-item dat
       er is, en daar moet naast het pictogram links ook het pijltje rechts nog
       bij passen. Bij 14,5rem viel dat pijltje deels buiten de rand. */
    width: 16rem;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: var(--regiq-kaart);
    border-right: 1px solid var(--regiq-rand-zacht);
    color: var(--regiq-tekst);
}

/* Even hoog als de topbalk, zodat logo en topbalk één lijn vormen. */
.schil-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 50px;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--regiq-rand-zacht);
}

.schil-logo img {
    display: block;
    width: auto;
    max-width: 80%;
    max-height: 2.1rem;
}

/* Terugvaloptie voor als het logobestand ontbreekt. */
.schil-logo-tekst {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--regiq-tekst);
}

.schil-logo-tekst span {
    color: var(--regiq-paars);
}

.schil-gebruiker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 1.1rem 1rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--regiq-rand-zacht);
}

/* Profielfoto indien aanwezig, anders initialen op de huisstijlgradient. */
.schil-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.55rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--regiq-paars) 0%, var(--regiq-paars-licht) 100%);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.schil-avatar-foto {
    object-fit: cover;
}

.schil-naam {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--regiq-tekst);
}

.schil-rol {
    font-size: 0.78rem;
    color: var(--regiq-tekst-zacht);
}

/*
 * Het bedrijf waarbinnen je werkt.
 *
 * In de huisstijlkleur en niet in grijs (besluit eigenaar, 2026-08-19): dit is
 * geen bijschrift bij de rol erboven maar het antwoord op "namens welk bedrijf
 * kijk ik hier" — de enige vraag die op een platform met meerdere bedrijven
 * altijd geldt.
 *
 * **Zacht paars vlak en niet het volle verloop**, hoewel de avatar erboven en
 * het actieve menu-item eronder dat wél dragen. Op dit platform betekent een
 * vol paars vlak "hier kun je klikken" of "hier ben je nu"; dit is een label.
 * Drie volle vlakken onder elkaar zouden bovendien de markering van het actieve
 * menu-item verzwakken, en juist die moet opvallen.
 *
 * De tinten komen uit --stand-paars-*, dezelfde als de zachte badges elders.
 * Op de witte zijbalk haalt dat 6,6:1 — ruim boven de leesgrens, en dat is hier
 * geen bijzaak: een bedrijfsnaam kan lang zijn en wordt afgekapt.
 */
.schil-bedrijf {
    max-width: 100%;
    margin-top: 0.45rem;
    padding: 0.12rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--stand-paars-tekst);
    background: var(--stand-paars-zacht);
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schil-menu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem 1.25rem;
}

/*
 * Begint het menu zonder groepskopje, dan mist het de lucht die zo'n kopje
 * meebracht en plakt het eerste item tegen de scheidingslijn van het
 * gebruikersblok erboven. De klantkant begint met Dashboard en heeft geen kop;
 * het platformmenu begint wél met er een, en die blijft hierdoor onaangeroerd.
 */
.schil-menu > :first-child:not(.schil-menukop) {
    margin-top: 0.4rem;
}

/* Groepskopjes zoals PLATFORM en BEHEER. */
.schil-menukop {
    padding: 0.85rem 0.75rem 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--regiq-plaatshouder);
}

.schil-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    /* De maat van de zijbalk. Bewust kleiner dan de lopende tekst op een
       pagina: dit is navigatie die je herkent, geen tekst die je leest. De
       pictogrammen hieronder en de subitems verderop schalen mee — anders
       verschuift alleen de tekst en gaan de twee uit verhouding lopen. */
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--regiq-tekst);
    text-decoration: none;
    border-radius: var(--regiq-radius-klein);
}

.schil-menu-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--regiq-tekst-zacht);
}

.schil-menu-item:hover {
    background: var(--regiq-achtergrond);
}

.schil-menu-item.is-actief {
    color: #ffffff;
    background: linear-gradient(90deg, var(--regiq-paars) 0%, var(--regiq-paars-licht) 100%);
    box-shadow: 0 4px 12px rgba(106, 53, 177, 0.25);
}

.schil-menu-item.is-actief svg {
    color: #ffffff;
}

/*
 * Submenu-items, bijvoorbeeld Overzicht en Instellingen onder Rapasso API.
 *
 * Bewust géén tweede verloop: het bovenliggende item is al gemarkeerd als je
 * binnen de module bent, en twee gekleurde vlakken onder elkaar maken niet
 * duidelijk wélke pagina je nu bekijkt. Het actieve subitem krijgt daarom alleen
 * kleur en een licht vlak.
 *
 * De inspringing is even breed als het pictogram plus de tussenruimte van een
 * gewoon menu-item, zodat de tekst van een subitem precies uitlijnt met die van
 * het item erboven.
 */
.schil-subitem {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    /* De inspringing links is even breed als het pictogram plus de tussenruimte
       van een gewoon menu-item. Het pictogram van een subitem begint daardoor
       precies onder de tékst van de module erboven, en dat leest als een niveau
       dieper in plaats van als een tweede rij losse items. */
    padding: 0.4rem 0.75rem 0.4rem 2.35rem;
    /* Een tikje kleiner dan een module-item, net als voorheen: dat verschil
       draagt het niveau mee. De inspringing hierboven volgt het pictogram dat
       nu 1rem breed is, zodat de tekst nog steeds onder die van de module
       erboven uitkomt. */
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--regiq-tekst-zacht);
    text-decoration: none;
    border-radius: var(--regiq-radius-klein);
}

/* Iets kleiner dan het pictogram van een module: hetzelfde formaat zou het
   verschil in niveau weer wegpoetsen. */
.schil-subitem svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.schil-subitem:hover {
    color: var(--regiq-tekst);
    background: var(--regiq-achtergrond);
}

/*
 * Het actieve subitem krijgt dezelfde markering als een gewoon menu-item,
 * omdat het dat óók is: de pagina waar je nu bent. Dat de module erboven het
 * verloop kwijtraakt (zie .is-open) is precies de bedoeling — er hoort er
 * maar één gemarkeerd te zijn, anders moet je zoeken waar je zit.
 */
.schil-subitem.is-actief {
    color: #ffffff;
    background: linear-gradient(90deg, var(--regiq-paars) 0%, var(--regiq-paars-licht) 100%);
    box-shadow: 0 4px 12px rgba(106, 53, 177, 0.25);
}

/*
 * De module boven een open submenu: "je bent hier in de buurt", niet "je bent
 * hier". Alleen kleur, geen vlak — het gemarkeerde vlak is voorbehouden aan de
 * pagina zelf.
 */
.schil-menu-item.is-open {
    color: var(--regiq-paars);
}

.schil-menu-item.is-open svg {
    color: var(--regiq-paars);
}

/*
 * Het pijltje achter een menu-item met een submenu.
 *
 * Zonder dit is aan niets te zien dat er meer achter een module zit: het
 * submenu klapt pas open zodra je erin bent, en tot dat moment lijkt het item
 * een gewone losse pagina. Het pijltje staat er dus juist ook als de module
 * dicht is — dat is precies het moment waarop het iets zegt.
 *
 * margin-left: auto duwt hem tegen de rechterkant; de rest van de rij houdt
 * daarmee zijn gewone uitlijning.
 */
.schil-menu-item .schil-menu-pijl {
    margin-left: auto;
    /* Kleiner dan het pictogram links: dat benoemt de module, dit is een
       aanwijzing. Even groot zouden het twee pictogrammen lijken. De selector
       is met opzet iets zwaarder dan .schil-menu-item svg hierboven; anders
       wint die en krijgt het pijltje de maat van een modulepictogram. */
    width: 0.8rem;
    height: 0.8rem;
    opacity: 0.65;
    transition: transform 0.15s ease;
}

/*
 * Een module met een submenu is een <details>: een mapje dat opengaat, geen
 * link. Zie layouts/app.blade.php voor waarom.
 *
 * Het mapje neemt de kolomindeling van het menu over. Zonder dit telt het als
 * één blok in de flexkolom eromheen en verdwijnt de tussenruimte tussen de
 * summary en de items eronder — precies daar waar hij het hardst nodig is,
 * want dan plakken twee gemarkeerde vlakken tegen elkaar.
 */
.schil-module {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/*
 * De <summary> moet er precies zo uitzien als een gewoon menu-item, dus het
 * standaard driehoekje van de browser gaat eruit — er staat al een pijltje
 * rechts, en twee markeringen naast elkaar zeggen niet meer dan één.
 */
.schil-module > summary {
    cursor: pointer;
    list-style: none;
}

.schil-module > summary::-webkit-details-marker {
    display: none;
}

/* Het browser-eigen focusblok volgt de vorm van het item, niet die van de
   regel eromheen: zonder dit springt er bij toetsenbordgebruik een rechthoek
   omheen die anders is dan bij de links erboven en eronder. */
.schil-module > summary:focus-visible {
    outline: 2px solid var(--regiq-paars);
    outline-offset: 2px;
}

/* Open kantelt het pijltje omlaag: dezelfde beweging als een map die opengaat.
   Het volgt de stand van het mapje en niet de pagina waar je bent — klap je hem
   met de hand dicht, dan hoort hij weer naar rechts te wijzen. */
.schil-module[open] > summary .schil-menu-pijl {
    transform: rotate(90deg);
    opacity: 1;
}

/*
 * Een groep bínnen een submenu: hetzelfde mapje, een niveau dieper.
 *
 * Zo staat Centraal beheer onder de Caseloadrekenmodule, met Kerngetallen en
 * Trajectbudgetten eronder. Dezelfde <details> als bij een module — werkt met
 * het toetsenbord, meldt zichzelf aan een schermlezer en blijft werken zonder
 * JavaScript — en dezelfde afspraak: de naam is geen link, klikken klapt open.
 *
 * **Twee niveaus en niet meer.** De inspringing hieronder is de tweede en
 * laatste; een derde zou items tegen de rand van een zijbalk van 15rem duwen.
 */
.schil-groep {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.schil-groep > summary {
    cursor: pointer;
    list-style: none;
}

.schil-groep > summary::-webkit-details-marker {
    display: none;
}

.schil-groep > summary:focus-visible {
    outline: 2px solid var(--regiq-paars);
    outline-offset: 2px;
}

/* Het pijltje van een groep staat rechts en kantelt bij openen, net als bij een
   module. Kleiner, want het hoort bij een kleiner item. */
.schil-groep > summary .schil-menu-pijl {
    margin-left: auto;
    width: 0.7rem;
    height: 0.7rem;
}

.schil-groep[open] > summary .schil-menu-pijl {
    transform: rotate(90deg);
    opacity: 1;
}

/*
 * De pagina's ín een groep springen één stap verder in.
 *
 * Precies één stap en niet twee: het pictogram van dit item komt daarmee onder
 * de tékst van de groep erboven, dezelfde verhouding als tussen een module en
 * zijn submenu. Zonder dat verschil lezen groep en pagina als één lijst.
 */
.schil-subitem.is-diep {
    padding-left: 3.1rem;
    font-weight: 500;
}

/* Wie liever geen beweging ziet, krijgt de eindstand zonder overgang. */
@media (prefers-reduced-motion: reduce) {
    .schil-menu-item .schil-menu-pijl {
        transition: none;
    }
}

/* De uitlogknop in het menu: een <button> die eruitziet als menu-item. */
.schil-menu-knop {
    width: 100%;
    font-family: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* --- Topbalk en inhoud ---------------------------------------------------- */

.schil-rechts {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Maximaal 50px hoog, in het huisstijlverloop. */
.schil-topbalk {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 50px;
    padding: 0 1.5rem;
    background: linear-gradient(90deg, var(--regiq-paars) 0%, var(--regiq-paars-licht) 100%);
    /* Halfdoorzichtig wit: zichtbaar op de doorlopende paarse band én op een
       lichte inhoud. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

/*
 * De titel met eventueel een badge ernaast.
 *
 * De `margin-right: auto` die de rest van de balk naar rechts duwt zit op deze
 * groep en niet meer op de titel zelf: anders komt een badge ná die auto-marge
 * te staan en plakt hij tegen de bel aan de andere kant van de balk.
 *
 * `min-width: 0` houdt de ellipsis van de titel werkend — zonder dat weigert een
 * flexkind te krimpen onder zijn inhoud, en loopt een lange titel over de badge
 * heen in plaats van af te kappen.
 */
.schil-titelgroep {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-right: auto;
}

.schil-paginatitel {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Een gegeven dat over de hele pagina geldt, naast de titel.
 *
 * Halfdoorzichtig wit, want de balk is paars: een badge met een eigen kleur zou
 * een derde kleur op een verloop van twee zijn. Het is een aanduiding en geen
 * knop — er valt niets te klikken, dus ook geen hover.
 */
.schil-titelbadge {
    flex-shrink: 0;
    padding: 0.12rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Voor een tweede badge die een beperking aanduidt in plaats van een feit:
   zachter, want het is een voetnoot bij de titel en geen tweede kop. */
.schil-titelbadge.is-zacht {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

/* Op een telefoon is er naast de hamburger en de titel geen ruimte meer voor een
   badge; dan wint de titel, want die zegt wáár je bent. */
@media (max-width: 30rem) {
    .schil-titelbadge {
        display: none;
    }
}

/*
 * De ronde knoppen rechts in de topbalk.
 *
 * Twee stuks, en ze delen bewust één definitie: de bel naar de
 * beveiligingsmeldingen (alleen voor een platformeigenaar) en de helpdeskknop
 * (alleen voor een beheerder van een bedrijf). Twee kopieën van dezelfde vorm
 * lopen bij de eerste correctie uit elkaar, en dan staat er op het ene scherm
 * een iets ander icoonknopje dan op het andere.
 *
 * .schil-topknop is een <button> en geen <a>: hij opent een venster en gaat
 * nergens heen. `background: none` en `border: 0` staan er daarom expliciet bij
 * — een knop begint niet leeg zoals een link.
 */
.schil-bel,
.schil-topknop {
    position: relative;
    display: flex;
    padding: 0.3rem;
    color: #ffffff;
    background: none;
    border: 0;
    border-radius: var(--regiq-radius-klein);
    cursor: pointer;
}

.schil-bel:hover,
.schil-topknop:hover {
    background: rgba(255, 255, 255, 0.14);
}

.schil-bel svg,
.schil-topknop svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.schil-bel-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.3rem;
    min-width: 1.05rem;
    padding: 0 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    color: #ffffff;
    background: var(--regiq-fout);
    border-radius: 999px;
}

.schil-inhoud {
    flex: 1;
    /* Een maat kleiner dan de basistekst; tabellen en formulieren erven mee. */
    font-size: 0.9rem;
}

/* Het paarse verloop loopt achter de bovenkant van de inhoud door, zodat de
   tegels er half overheen "zweven". Alleen op pagina's die erom vragen. */
/* De band eindigt halverwege de eerste rij kaarten: paars erboven, de
   onderste kaarthelft al op de grijze achtergrond. */
.schil-inhoud.met-band {
    background:
        linear-gradient(90deg, var(--regiq-paars) 0%, var(--regiq-paars-licht) 100%) top / 100% 7rem no-repeat,
        var(--regiq-achtergrond);
}

/* Binnen de schil mag de inhoud breder dan de oude losse pagina's. De inhoud
   staat altijd gecentreerd, met ruime zijmarges zodat kaarten en tegels nooit
   tegen de randen plakken; de extra ruimte boven houdt ze los van de topbalk. */
.schil-inhoud > .wrap {
    max-width: 90rem;
    margin: 0 auto;
    padding: 3.5rem 2.5rem 2.5rem;
}

/*
 * Brede tabellen scrollen binnen hun eigen kader, nooit de hele pagina.
 *
 * Let op de tweede as: zodra één as niet meer 'visible' is, maakt de browser
 * van de andere as ook een scrollgebied. Alles wat binnen een rij buiten de
 * tabel uitsteekt — een tooltip, een uitklapmenu — levert hier dus een
 * verticale scrollbalk op, ook als het onzichtbaar is (visibility:hidden telt
 * mee, display:none niet). Zulke onderdelen horen buiten dit kader getekend te
 * worden; zie de notitie bij de verwijderde .regiq-tip verderop.
 */
.schil-tabel {
    overflow-x: auto;
}

/* --- De begroeting boven aan het dashboard -------------------------------- */

/*
 * De begroeting: een gewone .dash-kaart, met een avatar ernaast.
 *
 * Hij heeft één ronde als losse tekst boven aan de pagina gestaan, buiten elke
 * kaart — en dat ging mis op een manier die alleen in de browser te zien is.
 * De inhoud begint met 3,5rem padding binnen een band van 7rem (zie
 * .schil-inhoud.met-band), dus de bovenste regels van élk scherm liggen op dat
 * paarse vlak. Elke andere pagina begint daarom met een witte kaart die er
 * overheen valt; donkere tekst stond er onleesbaar op.
 *
 * De les is algemener dan dit blok: op een scherm met .met-band hoort het
 * eerste element altijd een kaart te zijn. Wil je daar ooit losse tekst,
 * dan moet die wit zijn en binnen de 7rem passen.
 *
 * Alleen tekst: er heeft één ronde een avatar naast gestaan om de kaart gewicht
 * te geven, en die is er op verzoek uit. Het gezicht staat al in de zijbalk.
 * Vandaar dat deze klasse verder niets doet dan de twee regels bij elkaar
 * houden — de kaart eromheen levert de opmaak.
 */
.dash-welkom-groet {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--regiq-tekst);
    margin: 0;
    /* Iets strakker dan de standaardregelafstand: twee regels die bij elkaar
       horen, niet twee alinea's. */
    line-height: 1.3;
}

.dash-welkom-bij {
    color: var(--regiq-tekst-zacht);
    margin: 0.1rem 0 0;
}

/* --- Snelkoppelingen ------------------------------------------------------ */

/*
 * Waar het terugkomen vandaan moet komen: de kortste weg naar wat je toch al
 * ging doen.
 *
 * Flex met wrap en niet een grid met vaste kolommen — het aantal hangt af van
 * de rechten van deze gebruiker (één tot vier), en bij twee koppelingen zou een
 * raster van vier twee lege plekken overhouden.
 */
.dash-snelrij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.dash-snel {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--regiq-rand);
    border-radius: 8px;
    text-decoration: none;
    color: var(--regiq-tekst);
    font-weight: 500;
    /* --regiq-kaart en niet --regiq-wit: die laatste bestaat niet, en een
       onbekende custom property valt stil terug op niets. Zo'n typefout meldt
       zich nergens; zie de notitie bij .vgm-* in CLAUDE.md. */
    background: var(--regiq-kaart);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.dash-snel:hover,
.dash-snel:focus-visible {
    border-color: var(--regiq-paars);
    background: var(--regiq-achtergrond);
}

.dash-snel-icoon {
    display: inline-flex;
}

.dash-snel-icoon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: var(--regiq-paars);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* De eenheid achter een getal in een dash-gegeven: "3 apparaten". Zachter dan
   het getal, want het getal is het antwoord en het woord de eenheid. */
.dash-gegeven-bij {
    color: var(--regiq-tekst-zacht);
    font-weight: 400;
}

/* --- Dashboardtegels (kerncijfers) --------------------------------------- */

.dash-tegels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.1rem;
    margin: 0 0 1.5rem;
}

.dash-tegel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    background: var(--regiq-kaart);
    border-radius: var(--regiq-radius);
    box-shadow: 0 8px 24px rgba(24, 20, 60, 0.06);
}

.dash-tegel-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
}

.dash-tegel-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--regiq-tekst-zacht);
}

/* Het getal zelf: tekstkleur, geen accentkleur — kleur is voor betekenis.

   1rem en niet groter. Een tegel is een aflezing en geen uitroepteken; het
   label ernaast staat op 0,8rem, dus dit verschil is genoeg om het getal eruit
   te laten springen. Groter zetten maakt van vijftien tegels vijftien koppen
   die om aandacht vragen, en dan valt geen enkele meer op. Het maximum in het
   capaciteitsblok (.clrm-maximum-getal) is bewust wél groot — dat is één getal
   waar een werkverdeling aan hangt. */
.dash-tegel-waarde {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--regiq-tekst);
}

.dash-tegel-badge {
    padding: 0.15rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--stand-groen-tekst);
    background: var(--stand-groen-zacht);
    border-radius: 999px;
}

/* Het ronde icoon rechts; puur decoratief, de waarde staat in tekstkleur. */
.dash-tegel-icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    color: #ffffff;
}

.dash-tegel-icoon svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-tegel-icoon-paars { background: var(--stand-paars); }
.dash-tegel-icoon-groen { background: var(--stand-groen); }
.dash-tegel-icoon-blauw { background: var(--stand-blauw); }
.dash-tegel-icoon-oranje { background: var(--stand-oranje); }
.dash-tegel-icoon-rood { background: var(--stand-rood); }

/* ---------------------------------------------------------------------------
   De uitgebreide tegel (.dash-tegel.is-uitgebreid)
   ---------------------------------------------------------------------------
   Drie regels naast een icoon: label, waarde met eventueel een badge, en de
   onderbouwing eronder. Voor een getal dat zonder zijn noemer niet te lezen is —
   "53,2%" zegt niets zonder "84 van 158".

   Het icoon staat hier links en niet rechts, en in een zacht vlak in plaats van
   een volle bol. Twee redenen: met drie regels tekst ernaast is een volle bol
   van 3,1rem een tweede blikvanger naast het getal, en links vormen de iconen
   over een rij tegels een kolom waarlangs je de tegels uit elkaar houdt.
*/

.dash-tegel.is-uitgebreid {
    /* Bovenaan uitgelijnd: de onderbouwing kan twee regels worden, en dan zou
       het icoon met `center` meezakken tot naast een bijzin. */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.9rem;
}

.dash-tegel.is-uitgebreid .dash-tegel-info {
    gap: 0.15rem;
    /* De tekstkolom vult de rest; zonder dit blijft een lange onderbouwing bij
       de eerste spatie afbreken terwijl er ruimte over is. */
    flex: 1 1 auto;
}

/* Kleiner dan de volle bol, maar wél rond: het is hier een merkteken bij een
   regel en geen figuur op zichzelf.

   Het is één ronde vierkant-met-ronde-hoeken geweest. Dat gaf twee soorten
   tegeliconen op één platform — rond op de lijstpagina's, vierkant op de
   overzichten — en dat leest als twee ontwerpen in plaats van één. Rond is de
   vorm die overal al gold; alleen de maat en de zachte vulling onderscheiden
   deze variant nu nog. */
.dash-tegel-icoon.is-zacht {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    /* De kleur komt van de dash-tegel-icoon-*-klasse ernaast; die zet een volle
       achtergrond, en die wordt hier een zachte tint met de kleur in de lijn.
       Zo hoeft er geen tweede reeks kleurklassen te bestaan die uit de pas kan
       gaan lopen met de eerste. */
    background: transparent;
    color: inherit;
}

.dash-tegel-icoon.is-zacht svg {
    width: 1.15rem;
    height: 1.15rem;
}

.dash-tegel-icoon-grijs { background: var(--stand-grijs); }
.dash-tegel-icoon-grijs.is-zacht { background: var(--regiq-achtergrond); color: var(--regiq-tekst-zacht); }

.dash-tegel-icoon-paars.is-zacht { background: var(--stand-paars-zacht); color: var(--stand-paars-tekst); }
.dash-tegel-icoon-groen.is-zacht { background: var(--stand-groen-zacht); color: var(--stand-groen-tekst); }
.dash-tegel-icoon-blauw.is-zacht { background: var(--stand-blauw-zacht); color: var(--stand-blauw-tekst); }
.dash-tegel-icoon-oranje.is-zacht { background: var(--stand-oranje-zacht); color: var(--stand-oranje-tekst); }
.dash-tegel-icoon-rood.is-zacht { background: var(--stand-rood-zacht); color: var(--stand-rood-tekst); }

/* De waarde met de badge ernaast, op de basislijn: een badge die met zijn midden
   op het midden van een getal van 1,5rem ligt, zweeft. */
.dash-tegel-regel {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Groter dan in de compacte tegel, en dat is hier wél terecht: dit zijn vijf
   getallen die het scherm dragen, niet vijftien aflezingen naast elkaar. */
.dash-tegel.is-uitgebreid .dash-tegel-waarde {
    font-size: 1.5rem;
    line-height: 1.15;
}

/* Kleur waar de kleur de betekenis is: groen voor akkoord, rood voor niet
   akkoord. Bij een neutraal getal blijft de waarde zwart — zie de notitie bij
   .dash-tegel-waarde. */
.dash-tegel-waarde.is-groen { color: var(--stand-groen-tekst); }
.dash-tegel-waarde.is-rood { color: var(--stand-rood-tekst); }
.dash-tegel-waarde.is-paars { color: var(--stand-paars-tekst); }
.dash-tegel-waarde.is-oranje { color: var(--stand-oranje-tekst); }
.dash-tegel-waarde.is-blauw { color: var(--stand-blauw-tekst); }

/* Grijs is geen signaal maar wel een accent: het getal hoort bij het grijze icoon
   ernaast, en dan is de gewone tekstkleur juist de vreemde eend. Dezelfde
   tekstvariant als elke andere stand — leesbaar op wit, en zonder de nadruk die
   groen of rood wél geven. */
.dash-tegel-waarde.is-grijs { color: var(--stand-grijs-tekst); }

/* De onderbouwing onder het getal: waar het vandaan komt en waartegen het
   afgezet is. Klein en zacht — het getal is de mededeling, dit is het bewijs. */
.dash-tegel-bij {
    margin-top: 0.15rem;
    color: var(--regiq-tekst-zacht);
    font-size: 0.72rem;
    line-height: 1.4;
}

/* De badge bestaat al in groen (.dash-tegel-badge); hier komen de andere kleuren
   erbij, met dezelfde waarden als de .dash-badge-*-reeks zodat rood overal
   dezelfde rood is. */
.dash-tegel-badge-groen { color: var(--stand-groen-tekst); background: var(--stand-groen-zacht); }
.dash-tegel-badge-rood { color: var(--stand-rood-tekst); background: var(--stand-rood-zacht); }
.dash-tegel-badge-blauw { color: var(--stand-blauw-tekst); background: var(--stand-blauw-zacht); }
.dash-tegel-badge-grijs { color: var(--stand-grijs-tekst); background: var(--stand-grijs-zacht); }

/* Aanwijsbaar: de uitsplitsing zit in de tooltip, en zonder dit teken is er
   niets wat zegt dat er iets te halen valt. */
.dash-tegel-badge.regiq-tip {
    cursor: help;
}

/* Witte kaart om een tabel of blok, zoals "Recente bedrijven". */
.dash-kaart {
    padding: 1.4rem 1.5rem;
    background: var(--regiq-kaart);
    border-radius: var(--regiq-radius);
    box-shadow: 0 8px 24px rgba(24, 20, 60, 0.06);
}

/* Twee kaarten onder elkaar raken elkaar anders, want een kaart heeft zelf
   geen marges. Alleen tússen kaarten, dus nooit een losse marge bovenaan. */
.dash-kaart + .dash-kaart {
    margin-top: 1.5rem;
}

/*
 * Twee kaarten naast elkaar.
 *
 * De kaarten worden even hoog (grid strekt standaard), zodat de onderkanten
 * uitlijnen ook als de ene meer inhoud heeft dan de andere.
 */
.dash-kolommen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0 0 1.5rem;
}

/* Een kaart boven een kolommenrij raakt die anders, want de rij heeft alleen
   een marge aan de onderkant. Zelfde afspraak als bij .dash-kaart: de ruimte
   komt van wat erop volgt, dus nooit een losse marge bovenaan de pagina. */
.dash-kaart + .dash-kolommen {
    margin-top: 1.5rem;
}

/*
 * Naast elkaar geldt de marge hierboven niet: die is voor kaarten ónder
 * elkaar. Zonder deze regel zakt de tweede kaart 1,5rem omlaag en staan de
 * koppen niet meer op één lijn. De gelijke hoogte komt van het grid zelf, dat
 * zijn items standaard uitrekt.
 */
.dash-kolommen > .dash-kaart + .dash-kaart {
    margin-top: 0;
}

/* Variant met een smalle zijkolom: voor een kaart die weinig inhoud heeft
   (zoals een profielfoto) naast een kaart die de ruimte wél gebruikt. */
.dash-kolommen-zij {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
}

/*
 * De blokken van het managersdashboard, twee aan twee.
 *
 * Vijf kaarten onder elkaar maakten van dat scherm een lange kolom met veel
 * lucht rechts, terwijl elk blok maar een handvol regels draagt. Naast elkaar
 * past het geheel in één blik — en dat is de vraag die een dashboard hoort te
 * beantwoorden.
 *
 * **Een eigen klasse en niet .dash-kolommen hierboven**, hoewel de vorm gelijk
 * is. Twee verschillen die er hier toe doen: dit raster heeft ruimte bóven zich
 * nodig (het volgt op de welkomkaart, en .dash-kolommen draagt bewust alleen een
 * ondermarge omdat het elders als eerste element in een kaart staat), en het
 * kent de laatste-kaartregel hieronder. Die op .dash-kolommen zetten zou elk
 * formulier op dit platform raken waar toevallig een oneven aantal kaarten
 * staat.
 */
.dash-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Even hoog, net als .clrm-tweeluik en .clrm-drieluik: twee kaarten naast
       elkaar die net níet gelijk eindigen, lezen als een fout in de opmaak. */
    align-items: stretch;
    gap: 1.5rem;
    margin: 1.5rem 0 0;
}

/* De tussenruimte komt van het raster; zonder dit zakt elke tweede kaart nog
   eens 1,5rem omlaag en staan de koppen niet meer op één lijn. */
.dash-raster > .dash-kaart {
    margin: 0;
}

/*
 * Een kaart die als enige op zijn rij overblijft, neemt de volle breedte.
 *
 * Bij vijf blokken zou er anders rechtsonder een gat van een halve kaart
 * blijven staan, en dat leest als een blok dat er niet meer is. Welke kaart dat
 * is, hangt af van hoeveel blokken er dít keer zijn — bij een bedrijf zonder
 * Klikgesprekken vallen er twee weg — dus het staat als regel en niet als klasse
 * op één bepaalde kaart. `:last-child:nth-child(odd)` is precies dat: het
 * laatste kind, op een oneven plek, dus alleen op zijn rij.
 */
.dash-raster > .dash-kaart:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/*
 * Blijft er één kaart over, dan krijgt die de volle breedte.
 *
 * De smalle kolom is er voor een kaart die er niet altijd is: op een
 * vergaderverslag valt er niets te benoemen zodra het bewerkt is, en dan hoort
 * de tekst niet in vier vijfde te blijven staan met een gat ernaast. Zelfde
 * patroon en dezelfde reden als bij .clrm-tweeluik.
 *
 * Bewust alleen op deze variant en niet op .dash-kolommen zelf: daar kan een
 * enkele kaart op halve breedte een bewuste keuze zijn.
 */
.dash-kolommen-zij:has(> .dash-kaart:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Onder elkaar zodra twee kolommen niet meer comfortabel passen. 68rem en niet
 * krapper: de zijbalk kost 16rem en de inhoud nog eens 5rem aan zijmarges,
 * dus bij een smaller venster houdt de tweede kolom te weinig over.
 */
@media (max-width: 68rem) {
    .dash-kolommen,
    .dash-kolommen-zij,
    /* Hetzelfde breekpunt, zodat schermen niet elk op hun eigen breedte
       omklappen. De laatste-kaartregel doet in één kolom vanzelf niets meer:
       `grid-column: 1 / -1` is dan de hele breedte, en dat is elke kaart al. */
    .dash-raster {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dash-kaart h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.dash-kaart h2 svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    fill: none;
    stroke: var(--regiq-paars);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Het vlak achter de kolomkoppen. Nadrukkelijk alleen in de thead.
 *
 * Zonder die beperking greep dit óók op een <th scope="row"> — het label van de
 * totaalregel in de trajectentabel. Die rij kreeg daardoor een grijs vlak over
 * de eerste vier kolommen en niets over de andere zeven: één regel die
 * halverwege van kleur wisselt, precies op de plek waar de som staat.
 *
 * Een rijkop is geen kolomkop. Hij benoemt de rij voor een schermlezer en hoort
 * er verder uit te zien als de cellen ernaast; wat de totaalregel onderscheidt
 * is zijn streep en zijn gewicht (zie .wrap tfoot).
 */
.dash-kaart thead th {
    background: var(--regiq-achtergrond);
    border-bottom: 0;
}

.dash-kaart thead th:first-child { border-radius: 8px 0 0 8px; }

.dash-kaart thead th:last-child { border-radius: 0 8px 8px 0; }

/* --- Werkbalk, badges en lijstonderdelen ---------------------------------- */

/* Filterkaart: een rij gelabelde velden, met de acties rechtsonder. De ruimte
   naar de kaart eronder komt van de regel bij .dash-kaart, niet van hier. */
.dash-filters {
    margin-bottom: 0;
}

.dash-filterrij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 1rem;
}

.dash-filter label {
    margin-bottom: 0.4rem;
}

/* Overschrijft de generieke formulierregels: binnen de filterrij bepaalt het
   grid de maat, zonder ondermarge. */
.dash-filter input,
.dash-filter select {
    margin-bottom: 0;
}

/*
 * De actiebalk onder een formulier of kaart. Knoppen horen hier náást elkaar
 * te staan; het afbreken hieronder is een vangnet voor het geval de ruimte
 * echt op is, geen bedoelde uitkomst.
 *
 * Twee knoppen in een kaart betekent dus: geef die kaart genoeg breedte (geen
 * smalle zijkolom), of kort de opschriften in en gebruik
 * .dash-filteracties-compact.
 */
.dash-filteracties {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--regiq-rand-zacht);
}

/*
 * Krappere uitvoering, voor een actiebalk in een smalle kaart. Kortere
 * opschriften plus deze marges houden twee knoppen naast elkaar tot ongeveer
 * 20rem kaartbreedte — smaller dan dat komt op deze schermen niet voor.
 */
.dash-filteracties-compact {
    gap: 0.5rem;
}

.dash-filteracties-compact .regiq-knop {
    padding: 0 0.9rem;
}

/* Formulier in secties: kopjes met icoon en daaronder een veldenrij. */
.dash-sectiekop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.6rem 0 0.9rem;
    padding-bottom: 0.55rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--regiq-tekst);
    border-bottom: 1px solid var(--regiq-rand-zacht);
}

.dash-sectiekop svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    fill: none;
    stroke: var(--regiq-paars);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-sectiekop:first-of-type {
    margin-top: 0.5rem;
}

/* Altijd twee velden naast elkaar. */
.dash-formulierrij {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
}

/*
 * Bij een oneven aantal velden krijgt het eerste veld de volle breedte, zodat
 * daarna telkens twee netjes naast elkaar staan — nooit een half leeg gat
 * onderaan de sectie.
 */
.dash-formulierrij > .dash-veld:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
}

.dash-veld-breed {
    grid-column: 1 / -1;
}

/* Op smalle schermen onder elkaar. */
@media (max-width: 40rem) {
    .dash-formulierrij {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-formulierrij > .dash-veld,
    .dash-veld-breed {
        grid-column: auto;
    }
}

/* Blok met bedrijfsgegevens op een detailpagina. */
.dash-gegevens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 0 0 1.4rem;
}

.dash-gegeven {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dash-gegeven-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--regiq-tekst-zacht);
}

.dash-gegeven-waarde {
    font-weight: 600;
    color: var(--regiq-tekst);
    overflow-wrap: break-word;
}

/* Kaartkop met de titel links en een actieknop rechts. */
.dash-kaart-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dash-kaart-kop h2 {
    margin: 0;
}

/* Icoonknoppen in de actiekolom van een tabel. */
.dash-acties {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/*
 * Zacht gekleurd vlak met het icoon in de volle kleur, in plaats van een
 * dichte cirkel met een wit icoon. Een tabelrij met vier dichte knoppen trekt
 * meer aandacht dan de gegevens ernaast; zo blijft de kleur betekenis houden
 * zonder de rij te overstemmen.
 *
 * ─── Welke kleur wanneer, en dat is een korte lijst ─────────────────────────
 *
 * Er waren er vijf, en dezelfde handeling had niet overal dezelfde: *bekijken*
 * was paars in Klikgesprekken en blauw bij Bedrijven, *bewerken* precies
 * andersom. Dat is willekeur, en willekeurige kleur leest als betekenis die er
 * niet is. Sinds 2026-08-16 gelden er nog drie:
 *
 *   paars   álles wat gewoon werk is — bekijken, bewerken, openen, uitnodigen,
 *           exporteren, opslaan. Dit is ook de standaardwaarde hieronder.
 *   rood    verwijderen. Onomkeerbaar, en dan is kleur een waarschuwing.
 *   groen   activeren    ─┐ een aan/uit-paar dat in dezelfde cel naast elkaar
 *   oranje  deactiveren  ─┘ staat; daar houdt kleur de twee uit elkaar.
 *
 * Blauw is vervallen. Komt er ooit een vierde betekenis, voeg dan geen kleur toe
 * omdat een scherm er "wat kleurrijker" van wordt — een handeling die geen van
 * bovenstaande drie is, is paars.
 *
 * Elke variant zet alleen --dash-actie-kleur; achtergrond, hover en focusring
 * worden daaruit afgeleid met color-mix. Eén kleur per knop, dus een nieuwe
 * variant is één regel. Kent een browser color-mix niet, dan blijft de
 * neutrale achtergrond hieronder staan en is de knop nog steeds leesbaar.
 *
 * De dubbele selector is bewust: de generieke .wrap button-regels (paars,
 * hoekig, met padding) winnen anders qua specificiteit van deze klasse en
 * maken er een vierkante knop zonder icoon van.
 */
.dash-actie,
.wrap button.dash-actie {
    --dash-actie-kleur: var(--regiq-paars);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    color: var(--dash-actie-kleur);
    background: var(--regiq-achtergrond);
    background: color-mix(in srgb, var(--dash-actie-kleur) 11%, transparent);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.dash-actie:hover {
    background: color-mix(in srgb, var(--dash-actie-kleur) 19%, transparent);
    transform: translateY(-1px);
}

.dash-actie:active {
    transform: translateY(0);
}

.dash-actie:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-actie-kleur) 25%, transparent);
}

.dash-actie svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Drie betekenissen, zie de lijst hierboven; `.dash-actie-blauw` bestond en is
 * vervallen — zet hem niet terug om een scherm te variëren.
 *
 * ─── Elke variant staat er twee keer, en dat móét ──────────────────────────
 *
 * De basisregel hierboven is `.dash-actie, .wrap button.dash-actie` en zet de
 * standaardkleur op paars. Die tweede selector heeft specificiteit (0,2,1), en
 * een variant met alleen `.dash-actie.dash-actie-rood` heeft (0,2,0) — dus voor
 * een <button> binnen .wrap wint de basis en werd de knop paars, hoe rood hij
 * ook geschreven stond.
 *
 * Dat trof precies de acties die een formulier nodig hebben en dus geen link
 * kunnen zijn: scenario verwijderen, verslag verwijderen, sjabloon verwijderen,
 * en activeren/deactiveren op het platformbeheer — die laatste twee stonden
 * daardoor paars in plaats van groen en oranje. De <a>-varianten ernaast
 * klopten wél, wat het extra verwarrend maakte.
 *
 * StandkleurenTest bewaakt dat elke variant beide selectors houdt.
 */
.dash-actie.dash-actie-paars,
.wrap button.dash-actie.dash-actie-paars { --dash-actie-kleur: var(--regiq-paars); }

.dash-actie.dash-actie-groen,
.wrap button.dash-actie.dash-actie-groen { --dash-actie-kleur: #17914c; }

.dash-actie.dash-actie-oranje,
.wrap button.dash-actie.dash-actie-oranje { --dash-actie-kleur: #e2561f; }

.dash-actie.dash-actie-rood,
.wrap button.dash-actie.dash-actie-rood { --dash-actie-kleur: var(--regiq-fout); }

/* Meerdere knoppen in een kaartkop. */
.dash-kopacties {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Ook hier: een actieknop als <a> mag de linkkleur van .wrap niet erven, maar
   die van zijn eigen variant volgen. */
.wrap a.dash-actie,
.wrap a.dash-actie:hover {
    color: var(--dash-actie-kleur);
    text-decoration: none;
}

/* "Nog nooit" in een kolom met tijdstippen: wel leesbaar, niet opdringerig. */
.dash-nooit {
    color: var(--regiq-plaatshouder);
}

/*
 * Tooltip bij hoveren. Gebruik: class="regiq-tip" met de tekst in title.
 *
 * Er is er precies één van, aan <body> gehangen door regiq.js, en hij staat
 * vast in beeld in plaats van naast het element. Dat is geen stijlkeuze maar
 * een noodzaak: hier stond eerder een pseudo-element binnen de tabelrij, en
 * omdat .schil-tabel horizontaal scrolt maakte de browser van de verticale as
 * ook een scrollgebied. Een tooltip die hoger is dan een rij gaf daardoor een
 * permanente scrollbalk, ook al was hij onzichtbaar (visibility:hidden telt
 * mee in dat gebied, display:none niet).
 *
 * De positie komt uit regiq.js via --tip-x en --tip-y; al het uiterlijk staat
 * hier. Zonder JavaScript blijft het title-attribuut staan en toont de browser
 * zijn eigen tooltip — minder mooi, maar de uitleg is er wel.
 *
 * Zet bij een icoon altijd óók een aria-label: een tooltip is geen
 * betrouwbare tekst voor een schermlezer.
 */
/* Alleen op tekst en iconen: een knop of link houdt zijn eigen handje. */
span.regiq-tip {
    cursor: help;
}

/*
 * Een kolomkop met uitleg laat dat zien met een stippellijn.
 *
 * Zonder die aanwijzing is een tooltip iets wat je bij toeval vindt: er staat
 * niets dat zegt dat er meer is dan de kop zelf. Dat werd pijnlijk toen de
 * toelichting onder de trajectentabel — vier alinea's die elf kolommen
 * uitlegden — naar de koppen verhuisde; wat eerst te lezen viel, moest daarna
 * gevonden worden.
 *
 * Een stippellijn en geen icoon per kop: elf iconen op één rij is een
 * gordijn van tekens boven de getallen waar het om gaat, en de conventie
 * "gestippeld = hier zit uitleg" hoeft niemand uitgelegd te krijgen. In de kop
 * van een kaart staat wél een icoon (zie .clrm-info) — dat is één plek en geen
 * rij van elf.
 *
 * text-decoration en geen border-bottom: een kop draagt hier al een
 * achtergrondvlak met afgeronde hoeken (.dash-kaart th), en een rand zou daar
 * tegenaan lopen.
 */
th.regiq-tip {
    cursor: help;
    text-decoration: underline dotted var(--regiq-rand);
    text-underline-offset: 3px;
}

th.regiq-tip:hover,
th.regiq-tip:focus {
    text-decoration-color: var(--regiq-paars);
}

/* regiq.js maakt kolomkoppen met uitleg focusbaar, dus hoort die focus ook te
   zien te zijn — dezelfde ring als bij een knop, met de offset naar binnen
   zodat hij binnen het kopvlak blijft in plaats van over de cel ernaast. */
th.regiq-tip:focus-visible {
    outline: 2px solid var(--regiq-paars-link);
    outline-offset: -2px;
}

/*
 * De laag zelf: één blokje dat regiq.js aan <body> hangt en per tooltip
 * verplaatst en vult. Hieruit komt alles behalve de coördinaten.
 *
 * De z-index van 60 geldt alleen binnen de ouder waar de laag op dat moment aan
 * hangt, en dat is met opzet niet altijd <body>: een venster dat met showModal()
 * opengaat staat in de top layer van de browser, boven élk element uit de pagina,
 * en daar wint geen enkele z-index van. Staat het doel in zo'n venster, dan
 * verhuist de laag mee — zie plaatsLaag() in regiq.js.
 */
.regiq-tip-laag {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    transform: translate(var(--tip-x, 0), var(--tip-y, 0));
    max-width: 17rem;
    width: max-content;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: var(--regiq-tekst);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(24, 20, 60, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.regiq-tip-laag.is-zichtbaar {
    opacity: 1;
    visibility: visible;
}

/*
 * Een tooltip met opgemaakte inhoud: een kop met regels eronder, naam links en
 * getal rechts.
 *
 * Voor een uitsplitsing die in kolommen hoort te staan — bij de akkoordbadges op
 * /klikgesprekken/overzicht is dat "JA 84 (53,2%)" naast "Overig 74 (46,8%)",
 * met de basis eronder. Als lopende zin met middenpunten ertussen zou je die
 * getallen niet naast elkaar kunnen leggen, en dat is precies waarvoor je op de
 * badge gaat staan.
 *
 * Breder dan de gewone tooltip, want twee kolommen naast elkaar hebben ruimte
 * nodig; verder is het dezelfde laag, dus dezelfde plaatsing en dezelfde
 * schaduw.
 *
 * De inhoud komt uit een <template> in de pagina die regiq.js hierheen kopieert.
 * Een template rendert de browser nooit, wat hier ook staat — dat is met opzet:
 * een verborgen element met `hidden` verliest van de eerste de beste
 * display-regel, en dan staat de uitsplitsing uitgeklapt in de tegel. Dat is één
 * keer gebeurd; vandaar dat er hieronder geen regel meer bestaat die dat kán.
 */
.regiq-tip-laag.is-rijk {
    max-width: 22rem;
    padding: 0.65rem 0.75rem;
}

/* Het element ín de template. Krijgt zijn opmaak dus pas als hij gekloond in de
   laag staat; in de pagina zelf bestaat hij voor de renderer niet. */
.regiq-tip-lichaam {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.regiq-tip-kop {
    font-weight: 700;
    font-size: 0.78rem;
    /* Wit, dus zonder eigen regel — maar wél een halve regel lucht eronder: de
       kop benoemt waar de getallen over gaan en is geen eerste regel. */
    margin-bottom: 0.15rem;
}

.regiq-tip-rij {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    white-space: nowrap;
}

/* De naam links. Krijgt kleur waar de kleur betekenis heeft — dezelfde groene en
   rode als de badges elders, alleen lichter omdat het op een donkere laag staat
   en de badgekleuren daar wegvallen. */
.regiq-tip-naam {
    font-weight: 600;
}

.regiq-tip-naam.is-groen {
    color: var(--stand-groen-op-donker);
}

.regiq-tip-naam.is-rood {
    color: var(--stand-rood-op-donker);
}

.regiq-tip-naam.is-zacht {
    color: rgba(255, 255, 255, 0.62);
}

/*
 * Het kleurblokje vóór een naam, voor een tooltip bij een grafiek met meer dan
 * één reeks: het koppelt de regel aan de staaf waar hij bij hoort.
 *
 * Dezelfde maat en ronding als het stipje in de legenda (.staafgrafiek-legenda-
 * item::before), want het betekent hetzelfde. De vulkleur staat hier bewust
 * niet: die komt van de `.staafgrafiek-reeks-N` klasse die er in de HTML naast
 * staat — dezelfde klasse als de staaf zelf draagt, dus staaf, legenda en
 * tooltip kunnen per constructie niet uit elkaar lopen.
 *
 * De lichte binnenrand is geen versiering maar noodzaak. De laag is
 * --regiq-tekst (#2f3242) en de tweede reeks is --regiq-paars (#6a35b1); die
 * twee halen samen 1,7:1, en een blokje van negen pixel is dan niet meer te
 * zien. De rand geldt voor élke reeks: bij een lichte vulling valt hij
 * nauwelijks op, bij een donkere maakt hij het verschil.
 */
.regiq-tip-stip {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.35rem;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Eén reeks: hetzelfde verloop als de staaf en als het legendastipje. */
.regiq-tip-stip.is-enkel {
    background: var(--staafgrafiek-enkel);
}

/* Rond, net als de punten in de grafiek: een lijnreeks is geen vlak. */
.regiq-tip-stip.is-lijn {
    background: var(--staafgrafiek-lijn);
    border-radius: 50%;
}

.regiq-tip-waarde {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/*
 * Een regel die mag afbreken: een naam met uitleg erachter.
 *
 * Nadrukkelijk geen .regiq-tip-rij — die staat op `nowrap` en verdeelt zijn
 * inhoud over twee kolommen, want hij is gemaakt voor "naam links, getal rechts".
 * Een zin van vijftien woorden zou daar op één regel de laag uit lopen.
 */
.regiq-tip-uitleg {
    color: rgba(255, 255, 255, 0.82);
}

.regiq-tip-uitleg strong {
    color: #fff;
    font-weight: 600;
}

/* Het percentage achter een aantal: dezelfde regel, minder nadruk. Het aantal is
   het getal waar de badge om draait; het aandeel is de duiding erbij. */
.regiq-tip-zacht {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 500;
}

/*
 * Een slotregel over de volle breedte: wat er buiten de telling viel.
 *
 * Geen twee kolommen, want het is geen categorie in de verdeling maar een
 * voetnoot erbij — "info: 1 (niet meegerekend)". Zacht en klein om diezelfde
 * reden.
 */
.regiq-tip-voet {
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 500;
}

/*
 * De slotregel met de noemer, boven een streep.
 *
 * Die streep doet hetzelfde werk als de streep boven een totaalregel in een
 * tabel: hij scheidt de delen van waar ze bij opgeteld worden. Zonder dat leest
 * de basis als een derde categorie.
 */
.regiq-tip-rij.is-basis {
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

/*
 * Markeert de regel van de ingelogde gebruiker zelf, in een tabel met
 * collega's. Bewust hetzelfde poppetje als "Mijn profiel" in de zijbalk: dat
 * icoon betekent in deze applicatie al "jij", dus er valt niets nieuws te
 * leren. Het zachte paarse vlak houdt het een markering en geen knop.
 */
.dash-jij {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.35rem;
    vertical-align: middle;
    border-radius: 50%;
    color: var(--regiq-paars-diep);
    background: rgba(106, 53, 177, 0.12);
}

.dash-jij svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-badge {
    display: inline-block;
    padding: 0.12rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 999px;
}

.dash-badge-groen {
    color: var(--stand-groen-tekst);
    background: var(--stand-groen-zacht);
}

.dash-badge-grijs {
    color: var(--stand-grijs-tekst);
    background: var(--stand-grijs-zacht);
}

.dash-badge-rood {
    color: var(--stand-rood-tekst);
    background: var(--stand-rood-zacht);
}

/* Kleine actie onder een badge in een tabelcel. */
.dash-regelactie {
    margin-top: 0.2rem;
}

.dash-regelactie .stil {
    padding: 0;
    font-size: 0.78rem;
}

/* Paginering onder een tabel: links de telling, rechts de paginaknoppen. */
.dash-paginering {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--regiq-rand-zacht);
}

.dash-paginering-telling {
    font-size: 0.82rem;
    color: var(--regiq-tekst-zacht);
}

.dash-paginas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-pagina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--regiq-tekst);
    background: var(--regiq-kaart);
    border: 1px solid var(--regiq-rand);
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Ook als <a> binnen .wrap, waar de generieke linkkleur anders wint. */
.wrap a.dash-pagina,
.wrap a.dash-pagina:hover {
    color: var(--regiq-tekst);
    text-decoration: none;
}

.dash-pagina:hover {
    background: var(--regiq-achtergrond);
    border-color: var(--regiq-paars-licht);
}

/* De huidige pagina; geen link, dus ook geen hover. */
.dash-pagina-actief,
.wrap a.dash-pagina-actief {
    color: #ffffff;
    background: linear-gradient(90deg, var(--regiq-paars) 0%, var(--regiq-paars-licht) 100%);
    border-color: transparent;
}

/* Uitgeschakelde pijl of een ingekorte reeks ('...'). */
.dash-pagina-uit {
    color: var(--regiq-plaatshouder);
    background: transparent;
    border-color: var(--regiq-rand-zacht);
}

.dash-pagina svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-toelichting {
    margin-top: 1.25rem;
}

/* --- Toast-meldingen ------------------------------------------------------ */

/* Zwevend onder de topbalk, rechts; drukt nooit inhoud weg. */
.toost-houder {
    position: fixed;
    top: calc(50px + 1rem);
    right: 1.5rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(26rem, calc(100vw - 2rem));
}

.toost {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    color: var(--regiq-tekst);
    background: var(--regiq-kaart);
    border-left: 3px solid;
    border-radius: var(--regiq-radius-klein);
    box-shadow: 0 12px 32px rgba(24, 20, 60, 0.2);
    animation: toost-in 0.25s ease;
}

.toost p {
    margin: 0;
}

.toost p + p {
    margin-top: 0.3rem;
}

.toost-icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
}

.toost-icoon svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toost-goed { border-color: #22a75c; }
.toost-goed .toost-icoon { color: #1a7f45; background: rgba(34, 197, 94, 0.14); }

.toost-fout { border-color: var(--regiq-fout); }

/* Neutrale variant voor de duurmelding bij een lopende actie: geen goed of
   fout nieuws, alleen de mededeling dat het even duurt. */
.toost-bezig { border-color: var(--regiq-paars); }
.toost-fout .toost-icoon { color: var(--regiq-fout); background: rgba(220, 38, 38, 0.12); }

.toost-inhoud {
    flex: 1;
    min-width: 0;
    padding-top: 0.15rem;
    overflow-wrap: break-word;
}

.toost-sluiten {
    flex-shrink: 0;
    padding: 0 0.2rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--regiq-tekst-zacht);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.toost-sluiten:hover {
    color: var(--regiq-tekst);
}

/* Uitzwaaien; regiq.js verwijdert het element daarna. */
.toost-weg {
    opacity: 0;
    transform: translateX(0.75rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes toost-in {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }
}

@media (max-width: 40rem) {
    .toost-houder {
        right: 1rem;
        left: 1rem;
        width: auto;
    }
}

/* --- Modal (dialog) ------------------------------------------------------- */

.dash-modal {
    width: min(30rem, calc(100vw - 2rem));
    padding: 1.4rem 1.5rem;
    border: 0;
    border-radius: var(--regiq-radius);
    box-shadow: 0 20px 60px rgba(24, 20, 60, 0.3);
    color: var(--regiq-tekst);
}

.dash-modal::backdrop {
    background: rgba(24, 20, 60, 0.5);
}

/*
 * Het verloop van de laatste synchronisatie (.rapasso-stappen).
 *
 * Eén regel per onderdeel: teken, naam, onze eigen melding en de duur. Daarboven
 * een balk met één vlak per onderdeel — dat is nadrukkelijk **geen voortgang**
 * maar een uitkomst. Een lopende teller zou een belofte zijn die dit scherm niet
 * kan waarmaken: de synchronisatie is één verzoek dat pas terugkomt als alles
 * klaar is.
 *
 * Drie standen, en de kleuren zijn die van de rest van het platform: groen voor
 * gelukt, rood voor mislukt, grijs voor overgeslagen. Dat laatste is een
 * uitkomst en geen storing — een verbindingstest raakt bewust geen gegevens, en
 * de opdrachtgevers worden niet opgehaald als geen enkel dossier er een draagt.
 */
.rapasso-stappen {
    margin-top: 1.2rem;
}

.rapasso-stappenbalk {
    display: flex;
    gap: 2px;
    margin-bottom: 0.8rem;
}

/* Gelijke vlakken: elk onderdeel weegt even zwaar. Een breedte naar rato van de
   duur zou de tijdregistraties het hele beeld laten vullen, en dan zegt de balk
   iets over snelheid terwijl hij over slagen of falen hoort te gaan. */
.rapasso-stappenbalk-deel {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--regiq-rand);
}

.rapasso-stappenbalk-deel.is-gelukt { background: var(--regiq-goed); }
.rapasso-stappenbalk-deel.is-mislukt { background: var(--regiq-fout); }

.rapasso-stappenlijst {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Naam links, melding ernaast, duur rechts. De melding krimpt als eerste: die
   is de toelichting, niet het onderwerp. */
.rapasso-stap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.rapasso-stap-teken {
    display: flex;
    flex-shrink: 0;
    color: var(--regiq-tekst-zacht);
}

.rapasso-stap-teken svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rapasso-stap.is-gelukt .rapasso-stap-teken { color: var(--regiq-goed); }
.rapasso-stap.is-mislukt .rapasso-stap-teken { color: var(--regiq-fout); }

.rapasso-stap-naam {
    flex-shrink: 0;
    min-width: 8rem;
    font-weight: 600;
}

/* Een overgeslagen onderdeel is geen mislukking; het staat er zachter bij zodat
   het oog naar de regels gaat waar iets gebeurde. */
.rapasso-stap.is-overgeslagen .rapasso-stap-naam,
.rapasso-stap.is-overgeslagen .rapasso-stap-melding {
    color: var(--regiq-tekst-zacht);
    font-weight: 500;
}

.rapasso-stap-melding {
    flex: 1;
    min-width: 0;
    color: var(--regiq-tekst-zacht);
}

.rapasso-stap-duur {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--regiq-plaatshouder);
}

@media (max-width: 40rem) {
    /* Op een telefoon past drie kolommen niet; de melding zakt eronder. */
    .rapasso-stap {
        flex-wrap: wrap;
    }

    .rapasso-stap-melding {
        flex-basis: 100%;
        padding-left: 1.6rem;
    }
}

/*
 * De brede stand, voor een venster met een tabel erin in plaats van een
 * bevestigingsvraag.
 *
 * 30rem is precies genoeg voor "typ het e-mailadres over"; een lijst met een
 * coach, een dossiernaam en een reden per regel breekt daarin op elke cel af.
 * De hoogte is begrensd op de viewport en de inhoud scrolt: bij een klant met
 * dertig ontbrekende dossiers hoort het venster niet buiten het scherm te
 * groeien, want dan is de sluitknop onbereikbaar.
 */
.dash-modal.is-breed {
    width: min(56rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

/* Het icoon in de kop is hier geen waarschuwing voor een onomkeerbare
   handeling maar de kop van een werklijst; dezelfde oranje als het teken in de
   trajectentabel, en niet het rood van "definitief verwijderen". */
.dash-modal.is-breed h2 svg {
    stroke: #e2561f;
}

.dash-modal.is-breed .sub {
    margin: -0.6rem 0 1rem;
}

.dash-modal h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

/* Let op als hier ooit een info-icoon in een modalkop bij komt: deze regel
   (0,2,1) wint van `.clrm-info svg` (0,1,1) en zou dat vraagteken rood maken.
   Zet er dan `> svg` neer — het kop-icoon is een direct kind en een info-icoon
   zit altijd in een span, dus dat scheidt de twee zonder specificiteitstruc. */
.dash-modal h2 svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    fill: none;
    stroke: var(--regiq-fout);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-modal label {
    display: block;
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.dash-modal input {
    width: 100%;
    padding: 0.55rem 0.65rem;
    font: inherit;
    color: var(--regiq-tekst);
    background: #ffffff;
    border: 1px solid var(--regiq-rand);
    border-radius: var(--regiq-radius-klein);
}

/* Zolang de naam niet exact overgetypt is, staat de gevaarknop uit. */
.regiq-knop:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Helpdeskvenster ------------------------------------------------------- */

/*
 * Het venster achter de helpdeskknop in de topbalk.
 *
 * Iets breder dan de standaard 30rem van .dash-modal: die maat is gekozen voor
 * "weet je het zeker" — één zin en twee knoppen — en hier staat een keuzelijst,
 * een tekstvak van zes regels en een alinea uitleg onder elkaar.
 */
.dash-modal.helpdesk-venster {
    width: min(34rem, calc(100vw - 2rem));
}

/*
 * De kop is paars en niet rood.
 *
 * `.dash-modal h2 svg` zet var(--regiq-fout), want die maat is genomen op het
 * verwijdervenster; hier is niets onomkeerbaars aan de hand. De selector draagt
 * daarom .dash-modal mee (0,3,1) in plaats van te leunen op de volgorde in dit
 * bestand — precies de val waar de opmerking bij die regel voor waarschuwt.
 */
.dash-modal.helpdesk-venster h2 svg {
    stroke: var(--regiq-paars);
}

/* De bevestigingsstand: hetzelfde venster, maar dan met de uitkomst erin. */
.dash-modal.helpdesk-venster.is-verzonden h2 svg {
    stroke: var(--stand-groen);
}

.helpdesk-venster p {
    margin: 0 0 0.9rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.helpdesk-veld {
    margin-bottom: 1.1rem;
}

/*
 * `.dash-modal input` bestaat al, maar dit venster heeft geen invoerveld en wél
 * een keuzelijst en een tekstvak. Dezelfde maten, zodat de twee velden onder
 * elkaar één geheel zijn.
 */
.helpdesk-veld select,
.helpdesk-veld textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    font: inherit;
    color: var(--regiq-tekst);
    background: #ffffff;
    border: 1px solid var(--regiq-rand);
    border-radius: var(--regiq-radius-klein);
}

/* Verticaal wel, horizontaal niet: een tekstvak dat breder wordt dan zijn
   venster duwt de knoppen eronder buiten beeld. */
.helpdesk-veld textarea {
    resize: vertical;
    line-height: 1.5;
}

/* De regel over cliëntgegevens. Zichtbare tekst en geen tooltip, dus hij hoort
   ook te lézen als een mededeling en niet als een bijschrift dat wegvalt. */
.helpdesk-let-op {
    margin: 0.6rem 0 0;
    line-height: 1.5;
}

.helpdesk-fouten {
    margin: 0;
    padding-left: 1.1rem;
}

/* --- Meldingenfeed (achter de bel) ---------------------------------------- */

.feed-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--regiq-rand-zacht);
}

.feed-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.feed-icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
}

.feed-icoon svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feed-icoon-paars { color: var(--regiq-paars); background: rgba(106, 53, 177, 0.12); }
.feed-icoon-groen { color: #1a7f45; background: rgba(34, 197, 94, 0.12); }
.feed-icoon-blauw { color: #2f6fe0; background: rgba(47, 111, 224, 0.12); }
.feed-icoon-oranje { color: #d1541f; background: rgba(241, 102, 63, 0.14); }
.feed-icoon-rood { color: var(--regiq-fout); background: rgba(220, 38, 38, 0.12); }

.feed-tekst {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.feed-tijd {
    font-size: 0.78rem;
    color: var(--regiq-plaatshouder);
}

/* --- Mobiel: zijbalk als schuifpaneel ------------------------------------ */

.schil-hamburger {
    display: none;
    flex-direction: column;
    gap: 0.3rem;
    margin-right: auto;
    padding: 0.5rem;
    cursor: pointer;
}

/* Witte streepjes: de hamburger staat op het paarse verloop van de topbalk. */
.schil-hamburger span {
    display: block;
    width: 1.35rem;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
}

.schil-sluier {
    display: none;
}

@media (max-width: 56rem) {
    .schil-zijbalk {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        height: auto;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .schil-menuschakel:checked ~ .schil .schil-zijbalk {
        transform: translateX(0);
        box-shadow: 0 0 30px rgba(24, 20, 60, 0.25);
    }

    .schil-menuschakel:checked ~ .schil .schil-sluier {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 15;
        background: rgba(24, 20, 60, 0.4);
    }

    .schil-hamburger {
        display: flex;
    }

    .schil-topbalk {
        padding: 0 1rem;
    }

    .schil-inhoud > .wrap {
        padding: 2.25rem 1rem 1.5rem;
    }
}

/* ==========================================================================
   7. Nog niet omgezet: het platformbeheer en het dashboard
   ==========================================================================
   Deze regels stonden als <style>-blok in layouts/app.blade.php en zijn hier
   ongewijzigd naartoe verplaatst, zodat er nergens meer inline CSS staat.

   Ze hebben nog géén prefix, omdat hernoemen betekent dat alle views van het
   beheerpaneel mee moeten. Dat is een aparte klus; tot die tijd blijven deze
   namen zoals ze waren zodat die pagina's blijven werken.
*/

.wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.wrap.smal {
    max-width: 24rem;
}

.wrap.middel {
    max-width: 52rem;
}

.wrap h1 {
    font-size: 1.4rem;
    margin: 0 0 0.25rem;
}

.wrap .sub {
    color: var(--regiq-tekst-zacht);
    margin: 0 0 1.5rem;
}

.wrap label {
    display: block;
    margin: 0 0 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
}

/* textarea staat hier bewust bij input en select, ook al is er er voorlopig maar
   één (de toelichting bij de AI-analyse): een invoerveld dat er anders uitziet
   dan de rest van het platform leest als een ander soort veld. `font: inherit`
   is bij een textarea geen luxe — zonder die regel valt hij terug op de
   monospace-standaard van de browser. */
.wrap input,
.wrap select,
.wrap textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    margin-bottom: 1rem;
    border: 1px solid var(--regiq-rand);
    border-radius: 6px;
    background: #fff;
    color: var(--regiq-tekst);
    font: inherit;
}

/* Alleen verticaal: horizontaal groter maken zou de textarea buiten zijn kaart
   duwen, en dan schuift de hele pagina. */
.wrap textarea {
    resize: vertical;
    line-height: 1.5;
}

.wrap button {
    padding: 0.55rem 1rem;
    border: 0;
    border-radius: 6px;
    background: var(--regiq-paars);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.wrap button.stil {
    background: transparent;
    color: var(--regiq-tekst-zacht);
    padding-left: 0;
}

.wrap table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

/*
 * Eén maat voor tabelinhoud, over de hele applicatie.
 *
 * Zonder deze regel erfde een tabelcel de 16px van de body, terwijl elk ander
 * onderdeel tussen 0,72 en 0,95 rem zit — koppen, tegels, badges, statusregels.
 * Een tabel oogde daardoor groter en losser dan de kaart eromheen, ook al was
 * die kaart identiek. Hier staat de maat dus één keer, en niet per scherm:
 * anders lopen team en platformbeheer vroeg of laat weer uit elkaar.
 */
.wrap th,
.wrap td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    font-size: 0.88rem;
}

.wrap th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--regiq-tekst-zacht);
}

/*
 * Rijen worden gescheiden door ruimte en niet door een streep.
 *
 * Hier stond een lijn onder elke cel. Op een tabel van elf kolommen levert dat
 * een raster op waarin de lijnen net zo hard spreken als de getallen — het
 * uiterlijk van een spreadsheet uit een tijd dat een tabel zonder randen niet
 * als tabel gelezen werd. Wat de rij bij elkaar houdt is nu de ruimte eromheen
 * (0,6rem in plaats van 0,5) en de reactie op de muis hieronder.
 *
 * Eén streep blijft: die onder de kolomkoppen. Die scheidt niet twee rijen maar
 * twee soorten inhoud — wat de kolom heet en wat erin staat — en zonder hem
 * zweeft de kop boven de eerste regel. In een .dash-kaart draagt de kop al een
 * eigen vlak (zie .dash-kaart th) en is de streep overbodig.
 */
.wrap thead th {
    border-bottom: 1px solid var(--regiq-rand);
}

.dash-kaart thead th {
    border-bottom: 0;
}

/*
 * De rij onder de muis licht op. Dat is wat de weggehaalde lijnen deden — je
 * oog bij elkaar houden over de volle breedte — maar dan alleen op de regel
 * waar je werkelijk kijkt, in plaats van op alle regels tegelijk.
 *
 * Op de kaartachtergrond (wit) is dat het paginagrijs; daarmee blijft het een
 * markering en wordt het geen selectie.
 */
.wrap tbody tr {
    transition: background-color 0.12s ease;
}

.wrap tbody tr:hover {
    background: var(--regiq-achtergrond);
}

.melding {
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.melding.fout {
    background: rgba(220, 38, 38, 0.12);
}

.melding.goed {
    background: rgba(22, 163, 74, 0.12);
}

/* Een mededeling die geen fout is en geen bevestiging: iets wat je moet weten
   vóórdat je verdergaat. In de huisstijlkleur, want hij hoort bij het scherm en
   niet bij een uitkomst.

   Sinds 2026-08-19 draagt élk blok binnen een AI-analyse deze klasse: de
   verouderingsregel ("deze analyse gaat over een oudere situatie"), de
   jaarmelding bij Klikgesprekken, het verouderde sjabloonverslag, en de
   signalenlijst uit ai-lichaam. Besluit van de eigenaar; oranje paste niet bij
   het platform. Bij die eerste drie is het bovendien de juiste klasse — het zijn
   mededelingen en geen waarschuwingen. Bij de signalen is het een keuze: dat is
   het deel van een advies dat aandacht vraagt, en de kop "Signalen" moet dat nu
   alleen dragen. De redenering erachter is dat een AI-advies geen systeemstoring
   is. */
.melding.info {
    background: rgba(106, 53, 177, 0.09);
    border-left: 3px solid var(--regiq-paars);
}

/* Iets wat aandacht vraagt maar niet stuk is. Oranje en niet rood, dezelfde
   kleur als een bijna volle meter — rood is voor wat niet meer werkt, en dan
   leest een terechte melding als een storing.

   Wat hier ná 19-08-2026 nog op staat: de bevestiging vóór het verwijderen van
   een vergaderverslag (een onomkeerbare handeling, dus die hoort te blijven
   opvallen) en de mededeling op /caseloads/kerngetallen dat er nog geen
   caseloads zijn om de waarden op te zetten. De AI-blokken zijn hier weg; zie
   .melding.info hierboven. */
.melding.waarschuwing {
    background: rgba(226, 86, 31, 0.1);
    border-left: 3px solid #e2561f;
}

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

/* Links zonder onderstreping; de kleur draagt de herkenbaarheid, en bij
   hover verschijnt de streep alsnog als bevestiging. */
.wrap a {
    color: var(--regiq-paars-link);
    text-decoration: none;
}

.wrap a:hover {
    text-decoration: underline;
}

.wrap code {
    font-size: 0.85em;
    color: var(--regiq-tekst-zacht);
}

/*
 * Deze paar regels stonden als style-attribuut in losse views. Ze hebben wél
 * een prefix, want ze zijn nieuw; de generieke namen hierboven zijn erfenis.
 */

/* Het eenmalige wachtwoord op de gebruikerspagina: groter en niet gedempt,
   want het moet foutloos overgenomen kunnen worden. */
.beheer-wachtwoord {
    font-size: 1.1em;
    color: var(--regiq-tekst);
}

.beheer-filter-wissen {
    margin-left: 0.75rem;
}

.beheer-gebruikersnaam {
    margin: 0 0.75rem 0 0;
}

.beheer-subkop {
    font-size: 1rem;
}

/* --- Mijn profiel --------------------------------------------------------- */

/* De fotokaart is de smalle kolom, dus staat de foto boven de tekst en niet
   ernaast: gecentreerd, met de uitleg eronder op leesbreedte. */
.profiel-kop {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.profiel-avatar {
    width: 7.5rem;
    height: 7.5rem;
    align-self: center;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--regiq-achtergrond);
}

/* De terugval zonder foto: initialen, in dezelfde maat als het beeld. */
.profiel-avatar-leeg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--regiq-paars);
    border: 1px solid var(--regiq-rand-zacht);
}

/* De uitleg onder de foto; de ondermarge van .sub hoort hier niet, want de
   kaart regelt de ruimte eronder al. */
.profiel-kop-tekst {
    margin: 0;
}

/* Het bestandsveld krijgt dezelfde omlijsting als de gewone invoervelden. */
.profiel-bestand {
    width: 100%;
    padding: 0.5rem 0.7rem;
    font: inherit;
    color: var(--regiq-tekst);
    background: #ffffff;
    border: 1px solid var(--regiq-rand);
    border-radius: 8px;
}

.profiel-bestand::file-selector-button {
    margin-right: 0.7rem;
    padding: 0.35rem 0.7rem;
    font: inherit;
    color: var(--regiq-paars);
    background: var(--regiq-achtergrond);
    border: 1px solid var(--regiq-rand);
    border-radius: 6px;
    cursor: pointer;
}

/* Toelichting onder een veld: dichter op het veld dan de gewone .sub. */
.profiel-toelichting {
    margin: 0.35rem 0 0;
}

/* --- Rechtenmatrix (toegang) --------------------------------------------- */

/* De rolkolommen zijn smal en het vinkje staat gecentreerd; de eerste kolom
   met de handeling krijgt daardoor vanzelf de rest van de breedte. */
.toegang-kolom {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

.toegang-kolom input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--regiq-paars);
    cursor: pointer;
}

.toegang-kolom input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Naam van de handeling met de uitleg eronder, in één cel. */
.toegang-recht {
    display: block;
    font-weight: 600;
}

.toegang-omschrijving {
    display: block;
    font-size: 0.78rem;
    color: var(--regiq-tekst-zacht);
}

/* De uitleg onder een modulekop staat dichter op die kop dan een gewone .sub. */
.toegang-uitleg {
    margin: -0.4rem 0 0.9rem;
}

/* --- AI-koppeling --------------------------------------------------------- */

/* Vinkje met de uitleg ernaast, uitgelijnd op de eerste tekstregel. */
/* De aanbiederkeuze per verwerking, op /beheer/ai. Naar het voorbeeld van
   .kgm-kleurkeuze: genoeg voor de langste aanbiedernaam, zonder de kolom mee te
   laten groeien met de langste optie. */
.ai-aanbiederkeuze {
    width: 100%;
    min-width: 9rem;
    max-width: 14rem;
}

.ai-schakelaar {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    cursor: pointer;
}

.ai-schakelaar input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.15rem 0 0;
    accent-color: var(--regiq-paars);
    cursor: pointer;
}

/* --- Abonnementen: pakketkaarten ------------------------------------------ */

.abonnement-pakketten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 1.1rem;
}

/*
 * Elk pakket zet alleen --pakket-kleur; de achtergrond, de rand en de
 * accentbalk worden daaruit afgeleid. Een nieuw abonnement met een andere
 * kleur is dus één regel, net als bij de actieknoppen.
 *
 * De achtergrond is een mengsel mét wit en niet met transparant: deze kaarten
 * staan in een witte kaart, en een doorzichtige tint zou daar vlak op liggen.
 * Kent een browser color-mix niet, dan blijft de neutrale achtergrond staan.
 */
.abonnement-pakket {
    --pakket-kleur: var(--regiq-paars);

    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding: 1.4rem 1.4rem 1.2rem;
    background: var(--regiq-achtergrond);
    background: color-mix(in srgb, var(--pakket-kleur) 7%, #ffffff);
    border: 1px solid var(--regiq-rand);
    border-color: color-mix(in srgb, var(--pakket-kleur) 22%, transparent);
    border-radius: var(--regiq-radius);
    overflow: hidden;
}

/* De gekleurde balk bovenlangs; puur decoratief, dus met ::before. */
.abonnement-pakket::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--pakket-kleur);
    background: linear-gradient(90deg,
        var(--pakket-kleur) 0%,
        color-mix(in srgb, var(--pakket-kleur) 45%, #ffffff) 100%);
}

.abonnement-pakket-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.abonnement-pakket-naam {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pakket-kleur);
}

.abonnement-pakket-merken {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.abonnement-pakket-regels {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.abonnement-pakket-regel {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.abonnement-pakket-getal {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--regiq-tekst);
}

.abonnement-pakket-eenheid {
    font-size: 0.82rem;
    color: var(--regiq-tekst-zacht);
}

/* De knop onderaan, uitgelijnd met de rechterrand van de kaart. */
.abonnement-pakket-acties {
    display: flex;
    justify-content: flex-end;
}

.abonnement-pakket-blauw { --pakket-kleur: #2f6fe0; }
.abonnement-pakket-paars { --pakket-kleur: var(--regiq-paars); }
.abonnement-pakket-groen { --pakket-kleur: #17914c; }
.abonnement-pakket-oranje { --pakket-kleur: #e2561f; }

/* --- Statuspagina --------------------------------------------------------- */

/* De samenvatting bovenaan: een gekleurd vlak met één zin. */
/*
 * Zo breed als de tekst en niet meer. Over de volle kaartbreedte werd dit een
 * gekleurde balk met een halve regel tekst erin en de rest leeg — veel
 * aandacht voor weinig inhoud. inline-flex houdt het een label bij de melding.
 */
.status-samenvatting {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    border-radius: var(--regiq-radius);
}

.status-samenvatting-groen {
    color: #17914c;
    background: rgba(34, 197, 94, 0.12);
}

.status-samenvatting-oranje {
    color: #d1541f;
    background: rgba(241, 102, 63, 0.14);
}

.status-samenvatting-rood {
    color: var(--regiq-fout);
    background: var(--regiq-fout-vlak);
}

.status-gemeten {
    margin: 0.8rem 0 0;
}

/* Het stoplicht: één stip per regel, met dezelfde kleuren als de samenvatting. */
.status-stip {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.status-stip-groen { background: #22a75c; }
.status-stip-oranje { background: #f1663f; }
.status-stip-rood { background: var(--regiq-fout); }

.status-regels {
    display: flex;
    flex-direction: column;
}

/*
 * Naam links, gemeten waarde rechts, met een scheidingslijn ertussen. De naam
 * heeft een vaste basisbreedte zodat de waarden onder elkaar uitlijnen.
 */
.status-regel {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--regiq-rand-zacht);
}

.status-regel:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.status-naam {
    flex: 0 0 11rem;
    font-weight: 600;
}

.status-waarde {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--regiq-tekst-zacht);
    overflow-wrap: anywhere;
}

/* De regel met wat eraan te doen is; alleen zichtbaar als er iets te doen is. */
.status-toelichting {
    font-size: 0.8rem;
    color: var(--regiq-tekst);
}

/* Op smalle schermen de waarde onder de naam. */
@media (max-width: 40rem) {
    .status-regel {
        flex-wrap: wrap;
    }

    .status-naam {
        flex: 1 1 auto;
    }

    .status-waarde {
        flex: 1 1 100%;
        padding-left: 1.3rem;
    }
}

/* ==========================================================================
   AI-tarieven (.prijs-*)
   ==========================================================================
   Het beheerscherm waar een platform eigenaar invult wat een model kost. Elke
   tabelrij is één formulier, zoals bij het keuzelijstbeheer van Klikgesprekken;
   deze klassen doen niets anders dan de velden hun juiste breedte geven.

   De bedragvelden zijn smal en rechts uitgelijnd: het zijn getallen van hooguit
   zes tekens ($ 0.0030), en drie van die kolommen naast elkaar in de volle
   breedte van een tekstveld duwen de modelnaam samen tot een paar letters.
*/

.prijs-model {
    width: 100%;
    min-width: 12rem;
}

.prijs-omschrijving {
    width: 100%;
    min-width: 10rem;
}

.prijs-bedrag {
    width: 6rem;
    text-align: right;
    /* Gelijke cijferbreedtes, zodat drie tarieven onder elkaar op de komma
       lijken uit te lijnen ook al staat er geen tabel omheen. */
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   AI-verbruik (.verbruik-*)
   ==========================================================================
   Het tokenoverzicht in het platformbeheer: een staafgrafiek per maand met de
   tabellen per bedrijf en per model eronder.

   De lengte van een staaf komt uit .verbruik-deel-N onderaan deze
   sectie en niet uit een inline style. Dat is geen omweg maar de afspraak van
   dit project: alle vormgeving staat hier, zodat een view nooit stiekem een
   eigen maat of kleur meebrengt. Eenentwintig stappen van vijf procent is voor
   het oog ruim genoeg; het exacte percentage staat er in cijfers naast.
*/

.verbruik-grafiek {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 1.2rem;
    /* Vaste hoogte: de staven schalen onderling, dus de grafiek mag niet
       meebewegen met de drukste maand. */
    height: 11rem;
}

.verbruik-staaf {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    height: 100%;
    padding: 0.3rem 0.15rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--regiq-tekst-zacht);
    transition: background 0.15s ease;
}

.verbruik-staaf:hover {
    background: var(--regiq-achtergrond);
}

.verbruik-staaf-getal {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--regiq-tekst-zacht);
    white-space: nowrap;
}

/* Het gekleurde vlak zelf. De hoogte komt van --verbruik-deel; een lege maand
   houdt een dun streepje, zodat de rij niet uit elkaar valt. */
.verbruik-staaf-vlak {
    width: 100%;
    max-width: 2.6rem;
    min-height: 3px;
    height: var(--verbruik-deel, 0%);
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--regiq-paars-licht), var(--regiq-paars));
}

.verbruik-staaf-label {
    font-size: 0.72rem;
    font-weight: 500;
}

/* De maand die de tabellen eronder tonen. */
.verbruik-staaf.is-getoond {
    background: var(--regiq-achtergrond);
}

.verbruik-staaf.is-getoond .verbruik-staaf-getal,
.verbruik-staaf.is-getoond .verbruik-staaf-label {
    color: var(--regiq-paars);
    font-weight: 700;
}

/* De maximumkant van "412 / 5.000": wel leesbaar, niet even luid als het getal. */
.verbruik-zacht {
    color: var(--regiq-tekst-zacht);
}

/* Tweede regel in een tabelcel, onder de bedrijfsnaam. */
.verbruik-bijschrift {
    display: block;
    font-size: 0.72rem;
    color: var(--regiq-tekst-zacht);
}

/* De totaalregel onder een tabel.
 *
 * De enige streep die in de tabel zelf overblijft, en de dunste die zichtbaar
 * werkt: hij scheidt een som van de regels die erin zitten, en dat is een
 * ander soort grens dan tussen twee regels onderling. Was 2px toen elke rij
 * een lijn had — daar moest hij bovenuit komen; zonder die lijnen is 1px genoeg
 * en 2px een streep die schreeuwt.
 *
 * De totaalregel licht niet op bij hover: er valt niets aan te wijzen, hij is
 * de uitkomst van alles erboven. */
.wrap tfoot td,
.wrap tfoot th {
    border-top: 1px solid var(--regiq-rand);
    border-bottom: 0;
    font-weight: 600;
}

/* Staat het label van die regel in een <th scope="row"> — zoals bij de
   trajectentabel, waar "Totaal" de rij benoemt voor een schermlezer — dan hoort
   die cel links uitgelijnd te blijven, net als de kop erboven. */
.wrap tfoot th {
    text-align: left;
}

/* "over 5 van de 8" onder een totaal: het zegt dat die telling niet over alle
   trajecten gaat. Onder het getal en niet erachter, want met drie totalen naast
   elkaar moet te zien zijn bij wélke telling het voorbehoud hoort. Normale
   dikte en zachte kleur, zodat het het getal erboven niet overstemt. */
.clrm-trajecten-basis {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--regiq-tekst-zacht);
}

/* De stappen zelf: .verbruik-deel-0 tot en met .verbruik-deel-100, per procent.

   Ze zetten alleen een custom property en zijn daarmee de gedeelde bouwsteen
   voor élke balk of staaf op het platform — ook voor .meter-* en
   .staafgrafiek-* hieronder, die buiten dit verbruiksoverzicht staan. Hernoem
   ze dus niet naar iets wat alleen over AI-tokens gaat.

   **Per procent en niet per vijf.** De meters en het verbruiksoverzicht ronden
   zelf op vijf af en dat blijft prima: daar staat het exacte getal in cijfers
   naast en vijf procent is genoeg om te zien of iets bijna vol zit. Een
   staafgrafiek mét een y-as kan dat niet — daar moet de top van de staaf precies
   op de gridline van zijn waarde vallen, en twee van zeven is 28,57% en niet
   30%. Een as die naast zijn eigen staven ligt, is erger dan geen as.

   Honderd regels is veel voor wat één berekening zou zijn, maar de afspraak van
   dit project is dat álle vormgeving hier staat en geen enkele view een eigen
   maat meebrengt; zie de notitie over inline CSS in CLAUDE.md. */
.verbruik-deel-0 { --verbruik-deel: 0%; }
.verbruik-deel-1 { --verbruik-deel: 1%; }
.verbruik-deel-2 { --verbruik-deel: 2%; }
.verbruik-deel-3 { --verbruik-deel: 3%; }
.verbruik-deel-4 { --verbruik-deel: 4%; }
.verbruik-deel-5 { --verbruik-deel: 5%; }
.verbruik-deel-6 { --verbruik-deel: 6%; }
.verbruik-deel-7 { --verbruik-deel: 7%; }
.verbruik-deel-8 { --verbruik-deel: 8%; }
.verbruik-deel-9 { --verbruik-deel: 9%; }
.verbruik-deel-10 { --verbruik-deel: 10%; }
.verbruik-deel-11 { --verbruik-deel: 11%; }
.verbruik-deel-12 { --verbruik-deel: 12%; }
.verbruik-deel-13 { --verbruik-deel: 13%; }
.verbruik-deel-14 { --verbruik-deel: 14%; }
.verbruik-deel-15 { --verbruik-deel: 15%; }
.verbruik-deel-16 { --verbruik-deel: 16%; }
.verbruik-deel-17 { --verbruik-deel: 17%; }
.verbruik-deel-18 { --verbruik-deel: 18%; }
.verbruik-deel-19 { --verbruik-deel: 19%; }
.verbruik-deel-20 { --verbruik-deel: 20%; }
.verbruik-deel-21 { --verbruik-deel: 21%; }
.verbruik-deel-22 { --verbruik-deel: 22%; }
.verbruik-deel-23 { --verbruik-deel: 23%; }
.verbruik-deel-24 { --verbruik-deel: 24%; }
.verbruik-deel-25 { --verbruik-deel: 25%; }
.verbruik-deel-26 { --verbruik-deel: 26%; }
.verbruik-deel-27 { --verbruik-deel: 27%; }
.verbruik-deel-28 { --verbruik-deel: 28%; }
.verbruik-deel-29 { --verbruik-deel: 29%; }
.verbruik-deel-30 { --verbruik-deel: 30%; }
.verbruik-deel-31 { --verbruik-deel: 31%; }
.verbruik-deel-32 { --verbruik-deel: 32%; }
.verbruik-deel-33 { --verbruik-deel: 33%; }
.verbruik-deel-34 { --verbruik-deel: 34%; }
.verbruik-deel-35 { --verbruik-deel: 35%; }
.verbruik-deel-36 { --verbruik-deel: 36%; }
.verbruik-deel-37 { --verbruik-deel: 37%; }
.verbruik-deel-38 { --verbruik-deel: 38%; }
.verbruik-deel-39 { --verbruik-deel: 39%; }
.verbruik-deel-40 { --verbruik-deel: 40%; }
.verbruik-deel-41 { --verbruik-deel: 41%; }
.verbruik-deel-42 { --verbruik-deel: 42%; }
.verbruik-deel-43 { --verbruik-deel: 43%; }
.verbruik-deel-44 { --verbruik-deel: 44%; }
.verbruik-deel-45 { --verbruik-deel: 45%; }
.verbruik-deel-46 { --verbruik-deel: 46%; }
.verbruik-deel-47 { --verbruik-deel: 47%; }
.verbruik-deel-48 { --verbruik-deel: 48%; }
.verbruik-deel-49 { --verbruik-deel: 49%; }
.verbruik-deel-50 { --verbruik-deel: 50%; }
.verbruik-deel-51 { --verbruik-deel: 51%; }
.verbruik-deel-52 { --verbruik-deel: 52%; }
.verbruik-deel-53 { --verbruik-deel: 53%; }
.verbruik-deel-54 { --verbruik-deel: 54%; }
.verbruik-deel-55 { --verbruik-deel: 55%; }
.verbruik-deel-56 { --verbruik-deel: 56%; }
.verbruik-deel-57 { --verbruik-deel: 57%; }
.verbruik-deel-58 { --verbruik-deel: 58%; }
.verbruik-deel-59 { --verbruik-deel: 59%; }
.verbruik-deel-60 { --verbruik-deel: 60%; }
.verbruik-deel-61 { --verbruik-deel: 61%; }
.verbruik-deel-62 { --verbruik-deel: 62%; }
.verbruik-deel-63 { --verbruik-deel: 63%; }
.verbruik-deel-64 { --verbruik-deel: 64%; }
.verbruik-deel-65 { --verbruik-deel: 65%; }
.verbruik-deel-66 { --verbruik-deel: 66%; }
.verbruik-deel-67 { --verbruik-deel: 67%; }
.verbruik-deel-68 { --verbruik-deel: 68%; }
.verbruik-deel-69 { --verbruik-deel: 69%; }
.verbruik-deel-70 { --verbruik-deel: 70%; }
.verbruik-deel-71 { --verbruik-deel: 71%; }
.verbruik-deel-72 { --verbruik-deel: 72%; }
.verbruik-deel-73 { --verbruik-deel: 73%; }
.verbruik-deel-74 { --verbruik-deel: 74%; }
.verbruik-deel-75 { --verbruik-deel: 75%; }
.verbruik-deel-76 { --verbruik-deel: 76%; }
.verbruik-deel-77 { --verbruik-deel: 77%; }
.verbruik-deel-78 { --verbruik-deel: 78%; }
.verbruik-deel-79 { --verbruik-deel: 79%; }
.verbruik-deel-80 { --verbruik-deel: 80%; }
.verbruik-deel-81 { --verbruik-deel: 81%; }
.verbruik-deel-82 { --verbruik-deel: 82%; }
.verbruik-deel-83 { --verbruik-deel: 83%; }
.verbruik-deel-84 { --verbruik-deel: 84%; }
.verbruik-deel-85 { --verbruik-deel: 85%; }
.verbruik-deel-86 { --verbruik-deel: 86%; }
.verbruik-deel-87 { --verbruik-deel: 87%; }
.verbruik-deel-88 { --verbruik-deel: 88%; }
.verbruik-deel-89 { --verbruik-deel: 89%; }
.verbruik-deel-90 { --verbruik-deel: 90%; }
.verbruik-deel-91 { --verbruik-deel: 91%; }
.verbruik-deel-92 { --verbruik-deel: 92%; }
.verbruik-deel-93 { --verbruik-deel: 93%; }
.verbruik-deel-94 { --verbruik-deel: 94%; }
.verbruik-deel-95 { --verbruik-deel: 95%; }
.verbruik-deel-96 { --verbruik-deel: 96%; }
.verbruik-deel-97 { --verbruik-deel: 97%; }
.verbruik-deel-98 { --verbruik-deel: 98%; }
.verbruik-deel-99 { --verbruik-deel: 99%; }
.verbruik-deel-100 { --verbruik-deel: 100%; }

/* ==========================================================================
   Auditlog (.audit-*)
   ==========================================================================
   Het onwijzigbare logboek in het platformbeheer. De tabel is dichter bedrukt
   dan elders: een auditregel wordt gescand, niet gelezen, en hoe meer regels
   er tegelijk in beeld staan hoe eerder een patroon opvalt.

   De ernst zit in een streep aan de linkerkant en niet in een gekleurde rij:
   een rood vlak over de volle breedte maakt de tekst erop slechter leesbaar,
   terwijl juist die tekst het onderwerp is.
*/

.audit-rij td {
    font-size: 0.84rem;
    vertical-align: top;
}

.audit-rij td:first-child {
    border-left: 3px solid transparent;
    padding-left: 0.6rem;
}

.audit-rij-rood td:first-child { border-left-color: var(--regiq-fout); }
.audit-rij-oranje td:first-child { border-left-color: #e2561f; }
.audit-rij-grijs td:first-child { border-left-color: var(--regiq-rand); }

.audit-tijd {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* De omschrijving is de kern van de regel en mag de meeste ruimte hebben. */
.audit-omschrijving {
    min-width: 18rem;
    max-width: 34rem;
}

.audit-zacht {
    color: var(--regiq-tekst-zacht);
}

/* Tweede regel onder een waarde: e-mailadres, pad, toelichting. */
.audit-bijschrift {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.74rem;
    color: var(--regiq-tekst-zacht);
    overflow-wrap: anywhere;
}

/* Een sha256 past niet op een regel en hoort niet af te breken op een
   willekeurig teken; monospace maakt hem bovendien vergelijkbaar met wat een
   externe partij zelf uitrekent. */
.audit-hash {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.74rem;
    overflow-wrap: anywhere;
    color: var(--regiq-tekst-zacht);
}

/* De tegel met de laatste ketencontrole draagt tekst in plaats van een getal. */
.audit-tegel-klein {
    font-size: 1rem;
    line-height: 1.3;
}

/* Ontbrekende badgekleuren; oranje, blauw en paars werden al gebruikt in de
   abonnementen- en auditschermen maar stonden nergens gedefinieerd. */
.dash-badge-oranje {
    color: var(--stand-oranje-tekst);
    background: var(--stand-oranje-zacht);
}

.dash-badge-blauw {
    color: var(--stand-blauw-tekst);
    background: var(--stand-blauw-zacht);
}

.dash-badge-paars {
    color: var(--stand-paars-tekst);
    background: var(--stand-paars-zacht);
}

/* ==========================================================================
   Meters (.meter-*)
   ==========================================================================
   "3 van 15": hoeveel er van een limiet verbruikt is. Nu op het klantdashboard
   voor de plekken en de AI-analyses van het abonnement, maar bewust neutraal
   genoemd — elke volgende limiet krijgt dezelfde vorm.

   De vulling komt uit .verbruik-deel-0 t/m -100 hierboven; die stappen van vijf
   procent zijn precies genoeg om te zien of iets bijna vol zit, en houden de
   vormgeving uit de HTML. Geen inline style, nergens.

   De kleur is betekenis en geen versiering: paars zolang er ruimte is, oranje
   vanaf negen tiende, rood als het vol is. Wie op dat moment een collega wil
   toevoegen, weet dan al waarom dat straks niet lukt.
*/

.meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem 2rem;
    margin: 0.35rem 0 1.2rem;
}

.meter {
    --meter-kleur: var(--regiq-paars);

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.35rem 0.75rem;
}

.meter-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--regiq-tekst-zacht);
}

/* Het info-icoon achter het label, op dezelfde regel — net als bij een tegel en
   een formulierlabel. Achter de tekst en niet erboven: het label deelt zijn
   grid-rij met het getal rechts, dus een icoon op een eigen regel zou die twee
   uit elkaar trekken. */
.meter-label .clrm-info {
    margin-left: 0.15rem;
    vertical-align: -0.1em;
}

/* Het getal staat rechts náást het label, op één regel met de baan eronder. */
.meter-getal {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--regiq-tekst);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* De maximumkant van "3 van 15": leesbaar, maar niet even luid als het getal. */
.meter-zacht {
    font-weight: 500;
    color: var(--regiq-tekst-zacht);
}

/* De baan loopt over beide kolommen, zodat hij de volle breedte pakt. */
.meter-baan {
    grid-column: 1 / -1;
    order: 3;
    height: 7px;
    background: var(--regiq-achtergrond);
    border-radius: 999px;
    overflow: hidden;
}

.meter-vulling {
    display: block;
    width: var(--verbruik-deel, 0%);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--meter-kleur) 60%, #ffffff) 0%,
        var(--meter-kleur) 100%);
    background-color: var(--meter-kleur);
}

.meter.is-bijna-vol { --meter-kleur: #e2561f; }
.meter.is-vol { --meter-kleur: var(--regiq-fout); }

.meter.is-bijna-vol .meter-getal,
.meter.is-vol .meter-getal {
    color: var(--meter-kleur);
}

/* ==========================================================================
   Staafgrafiek (.staafgrafiek-*)
   ==========================================================================
   "Hoe verdeelt dit zich over de tijd": staven met een y-as ernaast. De tweede
   gedeelde bouwsteen naast .meter-*, en om dezelfde reden neutraal genoemd — nu
   de aflopende trajecten per kwartaal in de Caseloadrekenmodule, straks iets
   anders met dezelfde vorm.

   **De as en de staven delen één schaal.** Beide krijgen hun maat uit
   .verbruik-deel-0 t/m -100 hierboven: de gridline via `bottom`, de staaf via
   `height`, in hetzelfde percentage van dezelfde bovengrens. Daardoor valt de
   top van een staaf precies op de gridline van zijn waarde. Dat is ook waarom
   die stapklassen per procent lopen en niet per vijf; zie de notitie daar.

   Alles staat binnen één .staafgrafiek-plot met `position: relative`. De lijnen
   en de staven liggen daar absoluut in, links ingesprongen met dezelfde
   --staafgrafiek-as breedte, zodat de aslabels ernaast passen zonder dat er een
   tweede kolomindeling bijkomt die gelijk gehouden moet worden.

   Verschil met .verbruik-grafiek, die ouder is, klikbare staven heeft en geen
   as: daar is het gekleurde vlak een percentage van de volle staafhoogte, met
   het getal en het label ín de staaf. Bij een volle staaf duwt dat die twee naar
   buiten. Bij een volgende wijziging aan het verbruiksoverzicht is dat blok
   hierheen te halen.
*/

.staafgrafiek {
    --staafgrafiek-as: 2.2rem;

    /*
     * De minimumbreedte van een kolom, en daarmee het punt waarop de grafiek
     * gaat schuiven in plaats van krimpen. Wat hier nodig is hangt af van wat
     * eronder staat: een coachnaam vraagt ruimte, "aug 2026" veel minder.
     *
     * Het is een ondergrens en geen maat. Is er plek, dan verdelen de kolommen
     * de breedte gewoon onderling (flex 1 1 0) en groeit de staaf tot zijn
     * eigen maximum.
     */
    --staafgrafiek-kolom: 3.9rem;
    --staafgrafiek-kolom-tekst: 0.72rem;
    --staafgrafiek-kolom-marge: 0.4rem;

    /*
     * Hoeveel van zijn kolom een staaf vult — één afspraak voor élke grafiek.
     *
     * Een verhouding en geen vaste marge, want de kolom groeit mee met de
     * kaart. "Kolom min 0,5rem" gaf op een breed scherm een staaf van veertig
     * pixel met acht pixel ertussen: dat leest als een aaneengesloten blok in
     * plaats van als losse waarden.
     *
     * Zeventig procent, dus ongeveer twee derde staaf en een derde lucht. Bij
     * weinig kolommen merk je er niets van — dan begrenst de maximumbreedte per
     * vlak toch al — en bij veel kolommen is het het verschil tussen losse
     * waarden en een grijs blok.
     */
    --staafgrafiek-vulling: 70%;

    /*
     * De bovengrens van één staaf. Bij weinig kolommen op een breed scherm zou de
     * vulling anders een blok van tien centimeter opleveren; deze grens houdt een
     * staaf een staaf. In de smalle stand gaat hij verder omlaag — zie
     * .staafgrafiek.is-smal.
     */
    --staafgrafiek-staafmax: 3.4rem;

    margin-top: 1.2rem;
}

/*
 * Smalle kolommen, voor korte labels — twaalf maanden op één rij.
 *
 * Met de standaardmaat is dat 46rem aan kolommen plus twee assen, en dan past
 * de grafiek niet meer in een kaart die het scherm met een tweede deelt: er komt
 * een scrollbalk onder en je ziet een deel van je eigen cijfers niet. Smaller
 * mag hier ook, want er staat geen naam onder maar een maand.
 *
 * De letter gaat mee omlaag, anders wordt "2026" precies het woord dat niet meer
 * past — en een jaartal dat wegvalt maakt van twaalf labels een reeks van drie
 * letters zonder houvast.
 */
.staafgrafiek.is-smal {
    --staafgrafiek-kolom: 2rem;
    --staafgrafiek-kolom-tekst: 0.66rem;
    --staafgrafiek-kolom-marge: 0.15rem;
    /*
     * En smallere staven, niet alleen smallere kolommen.
     *
     * De vulling van 70% is bedoeld voor een grafiek met een handvol kolommen,
     * waar de maximumbreedte de staaf toch al begrenst. Bij twaalf maanden in een
     * kaart over de volle breedte doet die grens niets meer: dan wordt elke staaf
     * zijn volle 3,4rem en staat er een rij blokken van vijftig pixel met een
     * kier ertussen. Een verloop hoort een ritme te hebben — smalle staven met
     * lucht ertussen — en geen muur te zijn.
     *
     * **De vulling doet dat werk alleen; een eigen maximum erbij sloeg door.**
     * Hier stond ook `--staafgrafiek-staafmax: 1.5rem`, en die knijpt de staaf af
     * lang voordat de vulling iets te zeggen heeft: gemeten op de maandgrafiek
     * van Klikgesprekken, die over de volle breedte staat, werd een staaf 24px in
     * een kolom van 125px op een scherm van 1920px — **19% gevuld** waar 42%
     * bedoeld was, dus twaalf dunne streepjes met veel lucht ertussen. Het
     * omgekeerde van het probleem dat hierboven beschreven staat, en net zo
     * onrustig.
     *
     * Zonder die regel erft de smalle stand de gewone 3,4rem, en dan is het de
     * vulling die de vorm bepaalt — precies wat de bedoeling was. De kaarten in
     * het tweekoloms-raster merken er niets van: daar is 42% van een kolom tot
     * ver boven 1920px al smaller dan 3,4rem, dus de grens was daar toch niet
     * bindend. Zie `StaafgrafiekTest`, dat die som natelt.
     */
    --staafgrafiek-vulling: 42%;
}

/*
 * In de smalle stand past de grafiek altijd in zijn kaart en schuift hij niet.
 *
 * `width: max-content` op de inhoud is wat de grafiek laat schuiven bij veel
 * coaches, en dat is daar goed: dertig namen naast elkaar horen leesbaar te
 * blijven. Maar max-content kijkt naar het *langste* label op één regel — bij
 * "aug 2026" is dat de hele tekst, en twaalf keer die breedte plus twee assen
 * loopt over de kaart heen. Dan zie je tien van de twaalf maanden en moet je
 * voor de rest schuiven, terwijl ze met een afbreking gewoon passen.
 *
 * Een maandlabel breekt netjes over twee regels, dus hier heeft schuiven geen
 * nut. Onder de 80rem valt het grafiekenraster toch al terug op één kolom, dus
 * ook op een telefoon houdt elke maand ruimte.
 */
.staafgrafiek.is-smal .staafgrafiek-inhoud,
/*
 * En om precies dezelfde reden: een gepagineerde grafiek schuift niet.
 *
 * Bladeren is er juist voor in de plaats gekomen — er staan nooit meer dan
 * $perPagina kolommen tegelijk, dus er valt niets weg te schuiven. Toch bleef
 * er een scrollbalk onder staan, en dat kwam niet door het aantal kolommen maar
 * door `max-content` hieronder: die kijkt naar het langste label op één regel,
 * en een coachnaam van dertien tekens eist zo zijn volle breedte op terwijl
 * .staafgrafiek-label juist ontworpen is om over twee regels te breken. Zes van
 * die labels plus de as vroegen ~565px in een kaart die er op een laptop 415
 * heeft.
 *
 * Met 100% verdelen de kolommen de ruimte die er is, breken de namen zoals
 * bedoeld, en houdt elke kolom nog steeds zijn ondergrens van
 * --staafgrafiek-kolom. Past het dáár niet meer, dan is de kaart smaller dan
 * 25,6rem en hoort er wél geschoven te worden: kolommen verder indrukken zou
 * een naam midden in een woord afkappen, en ze verbergen zou stilzwijgend
 * coaches van het scherm halen. Zie het breekpunt van 80rem bij
 * .grafiekenraster, dat precies dat geval wegneemt.
 */
.staafgrafiek.is-gepagineerd .staafgrafiek-inhoud {
    width: 100%;
}

/*
 * De scrollschil en de inhoud die meegroeit met het aantal kolommen.
 *
 * .staafgrafiek-inhoud is zo breed als zijn kolommen minstens nodig hebben
 * (max-content), maar nooit smaller dan de kaart (min-width 100%). De
 * labelrij bepaalt die breedte: daar staan de enige kinderen in de flow, en
 * elk label draagt een minimumbreedte. De plot erboven is absoluut opgebouwd
 * en volgt vanzelf.
 *
 * Zo blijft een grafiek met drie coaches precies zoals hij was — alles past,
 * geen scrollbalk — en wordt hij bij dertig een strook die je opzij schuift in
 * plaats van dertig onleesbare streepjes.
 */
.staafgrafiek-schil {
    overflow-x: auto;
    /* Alleen horizontaal: verticaal moet zichtbaar blijven, anders knipt de
       browser de tooltip van een staaf af. Zie de notitie bij .schil-tabel.

       Let op: dit hélpt maar lost het niet op. Zodra één as niet meer `visible`
       is, maakt de browser van de andere as ook een scrollgebied — dus er wordt
       hier verticaal wél geknipt. Het bovenste aslabel steekt met zijn halve
       hoogte boven het plot uit (translateY(-50%)) en verloor daardoor zijn
       bovenkant: "8" las als "o". Vandaar de ruimte hieronder. */
    overflow-y: visible;
    padding-top: 0.6rem;
}

.staafgrafiek-inhoud {
    min-width: 100%;
    width: max-content;
}

.staafgrafiek-plot {
    position: relative;
    /* Vaste hoogte: de staven schalen tegen de as, dus de grafiek mag niet
       meebewegen met de drukste periode. */
    height: 12rem;
    padding-left: var(--staafgrafiek-as);
}

/* Eén gridline, met zijn aslabel eraan vast. Ze horen bij elkaar: een label dat
   los gepositioneerd wordt, staat na een wijziging aan de as net niet meer op de
   hoogte van zijn eigen lijn. */
.staafgrafiek-lijn {
    position: absolute;
    right: 0;
    left: var(--staafgrafiek-as);
    bottom: var(--verbruik-deel, 0%);
    border-top: 1px solid var(--regiq-rand);
}

/* De grondlijn draagt de staven en is daarmee geen hulplijn maar de as zelf. */
.staafgrafiek-lijn.is-nul {
    border-top-color: var(--regiq-tekst-zacht);
}

.staafgrafiek-lijn span {
    position: absolute;
    right: 100%;
    /* Op de lijn gecentreerd, niet erboven: een aslabel hoort op de hoogte te
       staan die het benoemt. */
    top: 0;
    transform: translateY(-50%);
    padding-right: 0.45rem;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--regiq-tekst-zacht);
    white-space: nowrap;
}

/*
 * De kolommen, en waarom hun tussenruimte in de kolom zit en niet ertussen.
 *
 * Met `gap` ligt het midden van kolom i niet op (i + ½) ÷ n maar een stukje
 * daarnaast — bij twaalf kolommen aan de randen zo'n vier pixel. Dat mag niet
 * schelen zodra er een lijn over de staven heen ligt: die wordt getekend op
 * (i + ½) ÷ n, en dan raakt hij zijn eigen punten net niet meer.
 *
 * Dus geen gap maar padding binnen de kolom. De maten zijn zo gekozen dat er
 * niets verandert aan wat je ziet: kolombreedte 3,9rem met 0,25rem padding geeft
 * dezelfde staaf van 3,4rem met dezelfde 0,5rem ertussen als de oude 3,4rem-
 * kolom met een gap van 0,5rem.
 */
.staafgrafiek-staven {
    position: absolute;
    inset: 0 0 0 var(--staafgrafiek-as);
    display: flex;
    align-items: flex-end;
}

/* De staaf is de volle hoogte van het plot; het gekleurde vlak erin is het
   percentage. Zo is de hele kolom aanwijsbaar voor de tooltip en niet alleen het
   stukje dat gekleurd is. */
.staafgrafiek-staaf {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    /* De tussenruimte, binnen de kolom; zie de notitie bij .staafgrafiek-staven. */
    padding: 0 0.25rem;
}

/*
 * De aanwijsmarkering, even breed als de staaf en niet als de kolom.
 *
 * De hele kolom inkleuren gaf een grijze slab die twee keer zo breed was als de
 * staaf erin — je wees één maand aan en zag een blok dat over zijn buren leek te
 * lopen. Een eigen laagje met dezelfde vulling houdt de markering op de plek
 * waar de waarde staat. Aanwijsbaar blijft de hele kolom, want de tooltip hangt
 * aan de staaf en niet hieraan.
 */
.staafgrafiek-staaf::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: var(--staafgrafiek-vulling);
    max-width: var(--staafgrafiek-staafmax);
    transform: translateX(-50%);
    border-radius: 8px 8px 0 0;
    background: var(--regiq-achtergrond);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.staafgrafiek-staaf:hover::before {
    opacity: 1;
}

/*
 * De reeksen van één kolom, samen.
 *
 * Dit omhulsel draagt de staafbreedte en de losse vlakken niet, want met een
 * percentage per vlak krimpen twee reeksen elk tot de helft en vullen ze de
 * kolom alsnog helemaal — precies het blokkerige beeld dat de vulling moest
 * oplossen. Zo geldt dezelfde afspraak voor één reeks en voor twee.
 *
 * De maximumbreedte blijft per vlak staan: bij weinig kolommen mag een staaf
 * niet uitgroeien tot een vlak, maar twee reeksen samen mogen dan wél twee keer
 * die maat innemen.
 */
.staafgrafiek-vlakken {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Een dunne naad tussen twee reeksen: ze horen bij elkaar maar zijn twee
       waarden, en zonder naad lezen ze als één gestapelde staaf. */
    gap: 2px;
    width: var(--staafgrafiek-vulling);
    height: 100%;
}

.staafgrafiek-vlak {
    /* Boven de aanwijsmarkering hierboven, anders valt de staaf erachter weg. */
    position: relative;
    /* De breedte komt van het omhulsel; hier alleen de verdeling erbinnen, zodat
       één reeks de volle breedte pakt en twee reeksen hem eerlijk delen. */
    flex: 1 1 0;
    max-width: var(--staafgrafiek-staafmax);
    /* Een periode zonder aflopers houdt een dun streepje op de grondlijn: een
       gat leest als een ontbrekend gegeven in plaats van als nul. */
    min-height: 3px;
    height: var(--verbruik-deel, 0%);
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--regiq-paars-licht), var(--regiq-paars));
}

/* Nul is een uitkomst en geen storing: grijs, niet rood en niet paars. Paars is
   in dit blok de kleur van "hier gebeurt iets". */
.staafgrafiek-vlak.is-leeg {
    background: var(--regiq-rand);
}

/* Twee reeksen naast elkaar binnen dezelfde kolom. De tweede is de donkere:
   bij "beschikbaar vs besteed" is de eerste de ruimte en de tweede wat er
   werkelijk in zit, en het is dat tweede getal waar het oog naartoe moet. */
.staafgrafiek-reeks-0 {
    background: var(--regiq-paars-licht);
}

.staafgrafiek-reeks-1 {
    background: var(--regiq-paars);
}

/* Met meerdere reeksen krijgt elk vlak de helft van de kolom; met één blijft de
   bestaande maximumbreedte gelden. */
.staafgrafiek-staaf .staafgrafiek-vlak + .staafgrafiek-vlak {
    margin-left: 2px;
}

/* ---------------------------------------------------------------------------
   Gestapeld (.staafgrafiek.is-gestapeld)
   ---------------------------------------------------------------------------
   Dezelfde vlakken met dezelfde hoogtes, alleen óp elkaar in plaats van ernaast.

   Het verschil is niet alleen vorm maar betekenis: naast elkaar zijn het twee
   waarden om te vergelijken, gestapeld zijn het delen van één geheel en leest de
   totale staafhoogte als het totaal. Vandaar dat de as bij stapelen door de som
   van een kolom deelt en niet door de grootste waarde erin — dat staat in
   staafgrafiek.blade.php.

   `column-reverse` zet het eerste vlak onderaan: de aanroeper geeft de reeksen op
   in leesvolgorde, en die hoort van beneden naar boven te lopen zoals een stapel
   groeit. Zonder `flex-shrink: 0` zou de browser de vlakken samendrukken zodra
   ze samen boven de honderd procent uitkomen — dan klopt geen enkele hoogte meer
   met zijn gridline. */
.staafgrafiek.is-gestapeld .staafgrafiek-vlakken {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0;
}

.staafgrafiek.is-gestapeld .staafgrafiek-vlak {
    flex: 0 0 auto;
    max-width: none;
    /* Geen minimumhoogte: een deel dat nul is wordt niet getekend (dat filtert
       de view al), en een streepje per categorie zou bij drie lege delen samen
       een balkje van negen pixel opleveren dat niets voorstelt. */
    min-height: 0;
    margin-left: 0;
    /* Alleen de bovenste hoek rond, en dat is de bovenste in de stapel: de rest
       sluit op elkaar aan. `column-reverse` keert de volgorde om, dus dat is
       `:first-child` in de DOM. */
    border-radius: 0;
}

/*
 * Alleen de kop van de stapel is rond, en dat is `:last-child`.
 *
 * Let op de omkering: `column-reverse` zet het eerste kind ónderaan, dus
 * `:first-child` is het onderste segment. Daar stond de ronding eerst, en dan zit
 * er een afgeronde bovenkant middenin de staaf — met de volgende twee segmenten
 * er vierkant bovenop. Dat is precies wat je ziet als je het intikt en niet
 * naloopt.
 */
.staafgrafiek.is-gestapeld .staafgrafiek-vlak:last-child {
    border-radius: 6px 6px 0 0;
}

/* Een lege stapel houdt zijn streepje op de grondlijn; die tak komt uit de view
   en heeft dus wél een minimumhoogte nodig. */
.staafgrafiek.is-gestapeld .staafgrafiek-vlak.is-leeg {
    min-height: 3px;
    border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   Kleur waar de kleur de betekenis is
   ---------------------------------------------------------------------------
   Zoals bij .ring-kleur-*: alleen voor een verdeling waarin een segment iets
   betekent dat elders op het platform al een kleur draagt — een akkoordstand is
   groen of rood, en die stand heeft in de tabel een badge in precies die kleur.

   Spaarzaam gebruiken. Gaat rood ook "reeks nummer twee" betekenen, dan is de
   afspraak dat rood aandacht vraagt weg. De waarden komen uit dezelfde reeks als
   .dash-badge-* en .ring-kleur-*, zodat groen overal dezelfde groen is. */
/* De kleur zelf en geen verloop: een verdeling leest op lengte en kleur, en een
   schakering daarbovenop betekent niets. Het `background` overschrijft het
   paarse verloop van .staafgrafiek-vlak, dat alleen voor de standaardstaaf is. */
.staafgrafiek-vlak.is-groen { background: var(--stand-groen); }
.staafgrafiek-vlak.is-rood { background: var(--stand-rood); }
.staafgrafiek-vlak.is-blauw { background: var(--stand-blauw); }
.staafgrafiek-vlak.is-oranje { background: var(--stand-oranje); }
.staafgrafiek-vlak.is-paars { background: var(--stand-paars); }
.staafgrafiek-vlak.is-grijs { background: var(--stand-grijs); }

/* De afwezigheid van een waarde: lichter dan grijs, om dezelfde reden als
   .ring-kleur-leegwaarde — een keuzelijst kan zélf een grijze stand bevatten, en twee
   identieke vlakken in dezelfde stapel zijn niet uit elkaar te houden. */
.staafgrafiek-vlak.is-leegwaarde { background: var(--stand-leegwaarde); }

/* ---------------------------------------------------------------------------
   De kolom van nu (.staafgrafiek-staaf.is-nu)
   ---------------------------------------------------------------------------
   "Hier staan we", bij een reeks die verder loopt dan vandaag: in een
   jaaroverzicht zijn de maanden ná deze maand leeg omdat ze nog moeten komen, en
   zonder markering leest dat als een terugval.

   Alleen het label draagt de kleur en de staaf niet: de vlakken dragen al
   betekenis, en een accentkleur eroverheen zou een zevende categorie beloven. */
.staafgrafiek-label.is-nu {
    color: var(--regiq-paars);
    font-weight: 700;
}

/* Een zacht vlak achter de hele kolom, zodat de markering ook zichtbaar is
   wanneer die maand nog leeg is en er dus geen staaf staat om naar te kijken.

   Hergebruikt de aanwijsmarkering van .staafgrafiek-staaf::before, die standaard
   op opacity 0 staat en pas bij hover verschijnt — vandaar dat hij hier expliciet
   aangezet wordt. Deze regel staat ná die van :hover en heeft dezelfde
   specificiteit, dus aanwijzen kleurt hem niet terug naar grijs. Dat is de
   bedoeling: één markering per kolom, en die van "hier staan we nu" is de
   sterkste. */
.staafgrafiek-staaf.is-nu::before {
    background: rgba(106, 53, 177, 0.07);
    opacity: 1;
}

.staafgrafiek-legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem 1rem;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--regiq-tekst-zacht);
}

/* Het label blijft gewoon leesbaar; alleen het stipje ervoor draagt de kleur.
   De reeksklasse staat op hetzelfde element als het label, dus die zou anders
   het hele woord inkleuren — vandaar dat de achtergrond hier expliciet uit gaat
   en alleen ::before hem overneemt. */
.staafgrafiek-legenda-item {
    background: none;
    color: var(--regiq-tekst-zacht);
}

.staafgrafiek-legenda-item::before {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.35rem;
    border-radius: 2px;
}

.staafgrafiek-legenda-item.staafgrafiek-reeks-0::before {
    background: var(--regiq-paars-licht);
}

.staafgrafiek-legenda-item.staafgrafiek-reeks-1::before {
    background: var(--regiq-paars);
}

/* Eén reeks: hetzelfde verloop als de staaf zelf draagt. Uit de variabele in
   :root, want het stipje in de tooltip gebruikt exact dezelfde vulling en dat
   hoort geen tweede afspraak te zijn. */
.staafgrafiek-legenda-item.is-enkel::before {
    background: var(--staafgrafiek-enkel);
}

/* Dezelfde kleurnamen als de vlakken, zodat de legenda geen tweede afspraak
   wordt die kan verlopen. Bij een betekeniskleur draagt het label hem ook, want
   dan ís de kleur de mededeling — anders dan bij reeks-0 en reeks-1, waar het
   stipje volstaat om twee waarden uit elkaar te houden. */
.staafgrafiek-legenda-item.is-groen::before { background: var(--stand-groen); }
.staafgrafiek-legenda-item.is-rood::before { background: var(--stand-rood); }
.staafgrafiek-legenda-item.is-blauw::before { background: var(--stand-blauw); }
.staafgrafiek-legenda-item.is-oranje::before { background: var(--stand-oranje); }
.staafgrafiek-legenda-item.is-paars::before { background: var(--stand-paars); }
.staafgrafiek-legenda-item.is-grijs::before { background: var(--stand-grijs); }
.staafgrafiek-legenda-item.is-leegwaarde::before { background: var(--stand-leegwaarde); }

/* ==========================================================================
   De lijnreeks over de staven heen (tweede as)
   ==========================================================================
   Voor een tweede grootheid in een ándere eenheid — aantallen en uren. Een lijn
   lees je op zijn verloop en niet op zijn lengte, en daarom mag hij wél een
   eigen as terwijl twee reeksen stáven er altijd één delen.

   De kleur staat in :root en niet hier: de tooltiplaag hangt aan <body> en
   gebruikt dezelfde vulling voor zijn stipje. Zie de notitie daar. */
.staafgrafiek-legenda-item.is-lijn::before {
    background: var(--staafgrafiek-lijn);
    /* Rond, zoals de punten in de grafiek zelf: een lijnreeks is geen vlak. */
    border-radius: 50%;
}

/* Ruimte rechts voor de tweede as, precies zoveel als links. */
.staafgrafiek.heeft-rechteras .staafgrafiek-lijn,
.staafgrafiek.heeft-rechteras .staafgrafiek-staven,
.staafgrafiek.heeft-rechteras .staafgrafiek-reekslaag,
.staafgrafiek.heeft-rechteras .staafgrafiek-punten {
    right: var(--staafgrafiek-as);
}

/* De labelrij moet dezelfde ruimte rechts vrijhouden, anders schuift het laatste
   label onder de as en telt hij bovendien mee in de breedte van de grafiek —
   precies genoeg om een scrollbalk op te leveren die er niet hoort te zijn. */
.staafgrafiek.heeft-rechteras .staafgrafiek-labels {
    padding-right: var(--staafgrafiek-as);
}

/* Het rechterlabel zit in hetzelfde element als de gridline en het linkerlabel,
   om dezelfde reden: één lijn, twee getallen, gegarandeerd even hoog. */
.staafgrafiek-as-rechts {
    right: auto;
    left: 100%;
    padding-right: 0;
    padding-left: 0.45rem;
}

/*
 * De lijn zelf, in een eigen laag.
 *
 * Die laag is er niet voor de opmaak maar omdat een <svg> een vervangen element
 * is: met `left` en `right` gezet en `width: auto` valt hij terug op zijn
 * intrinsieke breedte van 300px in plaats van uit te rekken. De lijn houdt dan
 * halverwege op — precies waar die 300px eindigt — terwijl de punten er wél
 * staan. Een gewone div ligt op de goede maat, en de SVG vult hem op 100%.
 */
.staafgrafiek-reekslaag {
    position: absolute;
    inset: 0 0 0 var(--staafgrafiek-as);
    /* Muisklikken horen bij de staaf eronder en bij de punten erboven; de lijn
       zelf is te dun om aan te wijzen en zou de staaftooltip wegnemen. */
    pointer-events: none;
}

/* Rekt mee met het plot; alleen de streekdikte niet, anders werd een brede
   grafiek een haarlijn en een smalle een balk. */
.staafgrafiek-reekslijn {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.staafgrafiek-reekslijn polyline {
    fill: none;
    stroke: var(--staafgrafiek-lijn);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* De punten: een eigen rij met exact dezelfde kolomverdeling als de staven,
   dus horizontaal klopt het per constructie en alleen de hoogte komt uit een
   stapklasse. */
.staafgrafiek-punten {
    position: absolute;
    inset: 0 0 0 var(--staafgrafiek-as);
    display: flex;
    align-items: flex-end;
    /* De rij zelf vangt geen muis; alleen de punten erin, zodat de staaf
       eronder aanwijsbaar blijft. */
    pointer-events: none;
}

.staafgrafiek-punt-kolom {
    position: relative;
    flex: 1 1 0;
    height: 100%;
}

.staafgrafiek-punt {
    position: absolute;
    left: 50%;
    bottom: var(--verbruik-deel, 0%);
    width: 0.5rem;
    height: 0.5rem;
    /* Op het snijpunt gecentreerd, niet erboven of ernaast. */
    transform: translate(-50%, 50%);
    border-radius: 50%;
    background: var(--staafgrafiek-lijn);
    /* Een witte rand houdt het punt leesbaar waar de lijn er strak langs loopt. */
    box-shadow: 0 0 0 2px var(--regiq-kaart);
    pointer-events: auto;
}

/* De x-labels staan buiten het plot, zodat ze niet over de grondlijn heen
   vallen. Dezelfde inspringing, dezelfde flexverdeling en dezelfde gap als de
   staven: zo staat elk label onder zijn eigen staaf zonder tweede indeling. */
.staafgrafiek-labels {
    display: flex;
    /* Boven uitlijnen: bij een naam van één regel naast één van twee blijven de
       eerste regels op dezelfde hoogte staan. Gecentreerd zouden ze om en om
       verspringen. */
    align-items: flex-start;
    /* Geen gap, net als bij de staven erboven: de kolommen moeten exact even
       breed en even ver uit elkaar staan, anders staat een label niet meer onder
       zijn eigen staaf. */
    padding-left: var(--staafgrafiek-as);
    margin-top: 0.45rem;
}

/* Het label onder een staaf: gecentreerd, en het mag over twee regels.
 *
 * Eerst stonden namen hier schuin gedraaid, zoals in veel grafiekpakketten.
 * Dat leest onrustig en de eerste naam kapt links af tegen de as — precies wat
 * je op een scherm voor een manager niet wilt. Rechtop en gecentreerd is
 * rustiger; een naam van twee woorden valt netjes uiteen over twee regels
 * ("Eleonore" boven "Schins") en blijft onder zijn eigen staaf staan.
 *
 * Past het dan nog niet, dan kapt de tweede regel af. De volledige naam staat
 * in de tooltip van de staaf erboven, dus er gaat niets verloren. */
.staafgrafiek-label {
    flex: 1 1 0;
    /* De minimumbreedte van een kolom, en daarmee van de hele grafiek: hij
       bepaalt de max-content van .staafgrafiek-inhoud. Ruim genoeg voor een
       woord van acht letters op 0,72rem; smaller wordt een naam een reeks
       afgebroken lettergrepen. */
    min-width: var(--staafgrafiek-kolom);
    padding: 0 var(--staafgrafiek-kolom-marge);
    text-align: center;
    font-size: var(--staafgrafiek-kolom-tekst);
    font-weight: 500;
    line-height: 1.25;
    color: var(--regiq-tekst-zacht);
    /* Twee regels hoog, en wat er niet past valt weg. */
    max-height: 2.2rem;
    overflow: hidden;
    /* Lange namen breken af in plaats van de buurman te overlappen. */
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Tabelkolommen (.tabel-*)
   ==========================================================================
   .schil-tabel laat een tabel binnen zijn eigen kader scrollen. Dat is het
   vangnet voor een telefoon, niet iets wat op een gewoon beeldscherm hoort te
   gebeuren: een tabel die dáár al schuift, is een tabel die niet kan krimpen.

   Twee oorzaken, allebei hier opgelost. Een e-mailadres heeft geen spaties en
   dwingt dus zijn volle breedte af, en kolommen met badges of knoppen krijgen
   van de browser evenveel ruimte toebedeeld als de tekstkolommen ernaast.
*/

/* Voor cellen met een adres, een sleutel of een URL: breken mag ook midden in
   het woord, want er is geen andere plek om te breken. */
.tabel-breekbaar {
    overflow-wrap: anywhere;
}

/*
 * Voor cellen die niet mogen afbreken: een badge, een datum, een knoppenrij.
 *
 * Bewust géén `width: 1%` erbij. Dat perst zo'n kolom tot zijn minimum en
 * schuift álle overgebleven ruimte naar de kolommen zonder breedte — met een
 * gat van centimeters tussen naam en e-mailadres tot gevolg. Zonder breedte
 * verdeelt de browser de ruimte naar verhouding van de inhoud, en dat is
 * precies wat je wilt.
 */
.tabel-heel {
    white-space: nowrap;
}

/* ==========================================================================
   Rapasso-koppeling (.rapasso-*)
   ==========================================================================
   Eén nieuw onderdeel op dit scherm: de melding boven aan de statuskaart die
   zegt waarom de laatste poging misging. De rest komt uit de bestaande
   dash-bouwstenen.

   Hij leunt op .status-samenvatting voor kleur en vorm, maar wordt hier een
   blok in plaats van inline-flex: die meldingen zijn hele zinnen met een
   handelingsadvies erin, en inline-flex laat zo'n zin niet netjes afbreken.
*/
.rapasso-melding {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 1.25rem;
    line-height: 1.45;
}

.rapasso-melding-icoon {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Aantalbadge in een tabel (.rapasso-aantal)
 * ==========================================================================
 * Gebruikt op de Cases-pagina (hoeveel actieve dossiers er onder één naam
 * lopen) en op de Coaches-pagina (hoeveel er bij één coach lopen). Eén kleur
 * die donkerder wordt, en bewust geen groen-oranje-rood: veel dossiers onder
 * één naam of bij één coach is geen probleem dat opgelost moet worden, alleen
 * een getal dat mag opvallen.
 *
 * De trap staat in vier vaste klassen en niet in een berekende waarde, zodat
 * er geen style-attribuut aan te pas komt — zie de conventie over inline CSS.
 * Welke drempel bij welke trede hoort staat in App\Rapasso\Aantalniveau, op
 * één plek voor beide schermen: dezelfde vier dossiers horen niet op het ene
 * scherm licht te kleuren en op het andere donker.
 */
.rapasso-aantal {
    display: inline-block;
    min-width: 2.1rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    border-radius: var(--regiq-radius-klein);
}

/* Eén dossier: het gewone geval, dus zo rustig mogelijk. */
.rapasso-aantal-1 {
    color: var(--regiq-tekst-zacht);
    background: var(--regiq-achtergrond);
}

.rapasso-aantal-2 {
    color: var(--regiq-paars);
    background: rgba(106, 53, 177, 0.10);
}

.rapasso-aantal-3 {
    color: var(--regiq-paars);
    background: rgba(106, 53, 177, 0.20);
}

/* Zeven of meer: omgekeerd, zodat de zwaarste stapels er echt uit springen. */
.rapasso-aantal-4 {
    color: #ffffff;
    background: var(--regiq-paars);
}

/* --- Caseloadrekenmodule (.clrm-*) ---------------------------------------
 *
 * Twee schermsoorten: een formulier met een resultaatblok dat tijdens het typen
 * meebeweegt, en een detailscherm met dezelfde blokken maar zonder invoer.
 * Beide gebruiken de bestaande .dash-*-bouwstenen voor kaarten, tegels en
 * knoppen; wat hier staat is uitsluitend wat die niet dekken.
 *
 * De getallen krijgen tabular-nums: kolommen met bedragen horen recht onder
 * elkaar te staan, anders lijkt € 77,70 langer dan € 111,10.
 */

/* De toelichting onder een invoerveld, dichter op het veld dan een gewone
   .sub — hij hoort bij dat veld en niet bij het blok eronder. */
.clrm-veldhulp {
    display: block;
    margin: 0.35rem 0 1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--regiq-tekst-zacht);
}

/*
 * Een invoerveld heeft standaard 1rem onderruimte. Staat er een toelichting
 * onder, dan hoort die ruimte ná de toelichting te komen en niet ertussen —
 * anders zweeft de uitleg los van het veld waar hij bij hoort en plakt hij
 * tegen het volgende label aan. De toelichting neemt die 1rem hierboven over.
 *
 * Kent een browser :has() niet, dan blijft de oude ruimteverdeling staan: iets
 * ruimer, maar niets breekt.
 */
.dash-veld:has(> .clrm-veldhulp) input,
.dash-veld:has(> .clrm-veldhulp) select {
    margin-bottom: 0;
}

/* Het sterretje bij een verplicht veld. */
.clrm-vereist {
    color: var(--regiq-paars);
    font-weight: 600;
}

/* --- Het resultaatblok ---------------------------------------------------- */

.clrm-resultaat-stempel {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--regiq-paars);
    background: rgba(106, 53, 177, 0.10);
    border-radius: var(--regiq-radius-klein);
    white-space: nowrap;
}

/* Twee kolommen op een beeldscherm, één op een telefoon. auto-fit met een
   minimum: bij een smal venster vallen ze vanzelf onder elkaar, zonder een
   tweede mediaquery. */
/*
 * Alle uitkomsten onder elkaar, één per regel.
 *
 * Eerder stonden ze in twee kolommen. Dat past compacter, maar acht getallen in
 * een blok van twee bij vier laten je zoeken welk label bij welk bedrag hoort —
 * en dit is precies het blok waar iemand één ding wil opzoeken. Onder elkaar
 * loopt het oog één kolom labels af en staat elk bedrag op dezelfde plek.
 */
.clrm-uitkomsten {
    display: block;
    margin: 0.75rem 0 0;
}

/*
 * De ring onder Beschikbare uren, in het midden van zijn kaart.
 *
 * Deze kaart staat in de smalle kolom van .clrm-drieluik, en daar passen de
 * figuur (11rem) en de legenda (min. 12rem) niet naast elkaar. .ring wrapt dan,
 * en de regel met alleen de figuur houdt ruimte over — zonder centrering staat
 * de ring uit het lood met de kaart eromheen.
 *
 * De centrering staat hier en niet op .ring zelf: bij Klikgesprekken staat die
 * bouwsteen naast een lijst die de vrije ruimte opvult, en daar zou de regel
 * niets doen behalve een risico zijn.
 *
 * De ruimte boven houdt hem los van de laatste uitkomstregel, die zijn eigen
 * vlak draagt (.is-eindbedrag).
 */
.clrm-urenring {
    margin-top: 1.25rem;
}

.clrm-urenring .ring {
    justify-content: center;
}

/*
 * De legenda blijft onder elkaar en groeit niet mee.
 *
 * Zonder dat laatste rekt hij (flex: 1 1 12rem) tot de volle kaartbreedte en
 * staan de urenaantallen tegen de rechterrand geplakt, ver van de naam waar ze
 * bij horen. Naast elkaar zetten is geen alternatief: elke regel draagt een
 * naam én een aantal, en drie daarvan op één rij passen niet in deze kolom.
 */
.clrm-urenring .ring-legenda {
    flex: 0 1 auto;
    min-width: 14rem;
}

/* Eén regel per uitkomst: label links, bedrag rechts uitgelijnd. Krap
   gehouden, want er staan er acht onder elkaar. */
.clrm-uitkomst {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--regiq-rand-zacht);
}

.clrm-uitkomst dt {
    font-size: 0.88rem;
    color: var(--regiq-tekst-zacht);
}

/*
 * Alle bedragen op dezelfde maat: dit is een rekenblad en geen dashboardtegel.
 * Groot gezette getallen op een rij trekken alle aandacht naar zichzelf, en dan
 * valt het bedrag waar het écht om gaat juist weg tussen de tussenstappen.
 */
.clrm-uitkomst dd {
    margin: 0;
    font-size: var(--regiq-cijfer);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* De kostprijs per declarabel uur: waar de hele berekening voor bedoeld is.
   Vandaar meer gewicht en een eigen kleur — het oog hoort hem te vinden zonder
   de andere zeven regels te lezen. */
/*
 * Waar een blok op uitkomt — de factureerbare uren per maand, de kostprijs per
 * declarabel uur — krijgt een vlak achter zich. Dat doet wat kleur alleen niet
 * doet: het maakt de regel vindbaar zonder de andere te lezen, ook voor wie
 * kleurverschil slecht ziet.
 *
 * De negatieve zijmarge trekt het vlak tot even ver als de binnenrand van de
 * kaart, zodat het als band achter de hele regel staat en niet als etiket om de
 * tekst. De scheidingslijn eronder vervalt: het vlak zelf sluit de rij al af.
 */
.clrm-uitkomst.is-eindbedrag {
    margin: 0.35rem -0.6rem 0;
    padding: 0.5rem 0.6rem;
    border-bottom: none;
    border-radius: var(--regiq-radius-klein);
    background: var(--regiq-achtergrond);
}

.clrm-uitkomst.is-eindbedrag dt {
    color: var(--regiq-tekst);
    font-weight: 600;
}

/* Het eindbedrag valt op met kleur en gewicht, niet met grootte: elk cijfer op
   dit scherm heeft dezelfde maat, zodat een tussenstap er nooit belangrijker
   uitziet dan hij is. */
.clrm-uitkomst.is-eindbedrag dd {
    color: var(--regiq-paars);
}


/*
 * De naam die een tabelrij aanwijst: de coach op /caseloads, de scenarionaam in
 * de tabel eronder.
 *
 * Zwaarder gezet dan de getallen erachter. In een tabel van elf kolommen is dat
 * het anker waar het oog op terugvalt — en het is het enige tekstveld tussen
 * cijfers, dus zonder gewicht valt het juist wég in plaats van op.
 *
 * Alleen het gewicht: kleur en onderstreping blijven die van een gewone link,
 * want het ís een gewone link en er hoort geen tweede soort te ontstaan.
 */
.clrm-naamlink {
    font-weight: 600;
}

/*
 * Het filter boven de caseloadtabel (zoeken, manager, account).
 *
 * Binnen dezelfde kaart als de tabel en niet in een eigen kaart erboven zoals
 * bij Klikgesprekken: onder die kaart staat de scenariotabel, en een filterkaart
 * die boven allebei zweeft zou beloven dat hij ook die tweede filtert.
 *
 * Vandaar de streep eronder in plaats van eromheen: het filter hoort bij wat er
 * volgt, en zonder scheiding plakt de tabel tegen de knoppenrij aan.
 */
.clrm-filter {
    margin: 1.2rem 0 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--regiq-rand-zacht);
}

/*
 * Drie vaste kolommen en niet de auto-fit van .dash-filterrij. Met auto-fit
 * bepaalt de schermbreedte waar de rij breekt, en dan staat Manager de ene keer
 * naast Zoeken en de andere keer eronder — een filterbalk die per scherm anders
 * is ingedeeld, laat je elke keer opnieuw zoeken. Zelfde afweging als bij
 * .kgm-filterrij-vier.
 *
 * Het zoekveld krijgt twee delen: een naam typen vraagt ruimte, een keuzelijst
 * toont zijn waarde toch al volledig.
 */
.clrm-filterrij {
    grid-template-columns: 2fr 1fr 1fr;
}

/* De acties horen bij het filter en niet bij de kaart: geen tweede streep. */
.clrm-filter .dash-filteracties {
    margin-top: 1rem;
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 62rem) {
    .clrm-filterrij {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * Het informatie-icoon met de uitleg in een tooltip.
 *
 * **Overal dezelfde kleur, en dat is de huisstijlpaars** (besluit eigenaar,
 * 2026-08-18). Hier stond zacht grijs, met het argument dat een icoon om aan te
 * wijzen hoort te wachten tot je het zoekt. Dat argument is verdedigbaar maar
 * werd door de specificiteit onderuitgehaald, en dát is de reden dat dit is
 * omgedraaid: van de ruim dertig info-iconen op dit platform staan er
 * vierentwintig in een kaartkop, en `.dash-kaart h2 svg` (0,2,1) wint daar van
 * `.clrm-info svg` (0,1,1). Die stonden dus al in het paars. Wie het scherm
 * bekeek zag een grijs icoon bij een formulierveld en een paars bij de kaart
 * erboven, en las dat als twee verschillende dingen.
 *
 * **Houd de twee waarden daarom gelijk.** Zolang deze regel en de kopregels
 * dezelfde kleur zetten, maakt het niet uit welke van de twee wint — en dat is
 * precies wat het bestendig maakt. Zet hier ooit weer een andere kleur, dan
 * komt het verschil per plek terug zonder dat er iets aan déze regel te zien is.
 *
 * De hover volgt dezelfde lijn: dieper paars in plaats van grijs. Die stond op
 * --regiq-tekst, en omdat `.clrm-info:hover svg` (0,2,1) wél van de kopregel
 * wint, sprong een icoon in een kaartkop bij het aanwijzen van paars naar
 * donkergrijs — de omgekeerde richting van waar een hover voor is.
 *
 * Dit blok stond er tot 2026-08-10 twee keer, met verschillende waarden. De
 * tweede overschreef de eerste, dus wat er in de browser gebeurde stond niet op
 * de plek waar iemand het zocht.
 */
.clrm-info {
    display: inline-flex;
    align-items: center;
    cursor: help;
}

/*
 * Het icoon zelf, en dat hoort hier te staan en niet ergens hogerop.
 *
 * Tot 2026-08-08 kreeg dit icoon zijn vorm van `.dash-kaart h2 svg` — de regel
 * die de kopiconen van een kaart tekent. Zolang het in een kaartkop stond ging
 * dat goed; zodra het ergens anders belandde (een tegellabel op het overzicht)
 * erfde het niets, viel het terug op de standaard `fill: black` en stond er een
 * zwarte stip in plaats van een vraagtekencirkel.
 *
 * Vandaar deze regel: een bouwsteen die overal gebruikt kan worden, hoort zijn
 * eigen vorm te dragen en niet die van zijn buren te lenen.
 *
 * Dunnere lijn dan een kopicoon (1,6 tegen 2): op deze maat maakt dat het
 * verschil tussen een tekentje en een vlek.
 */
.clrm-info svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    fill: none;
    stroke: var(--regiq-paars);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.12s ease;
}

.clrm-info:hover svg,
.clrm-info:focus-visible svg {
    stroke: var(--regiq-paars-diep);
}

/* Met het toetsenbord moet te zien zijn waar je staat; de ring om het icoon en
   niet om de hele kop, want dát is wat focus heeft. */
.clrm-info:focus-visible {
    outline: 2px solid var(--regiq-paars-link);
    outline-offset: 2px;
    border-radius: 50%;
}

/* --- De parameterlijst op het detailscherm -------------------------------- */

/*
 * De ingevulde parameters, in drie kolommen met het label bóven de waarde.
 *
 * Niet label-links-waarde-rechts zoals de uitkomstblokken ernaast, en dat is
 * met opzet: dit blok telt dertien regels tegenover drie en zes, en op één
 * regel per stuk was het twee keer zo lang als de blokken ernaast.
 *
 * Drie kolommen en niet twee: dit blok beslaat twee derde van de breedte, en
 * op twee kolommen stond er een halve kolom wit tussen elk label en de rand.
 * Werktijd telt negen velden en vult daarmee precies drie rijen van drie, die
 * elk ook nog eens over hetzelfde gaan — plaats en datum, uren, percentages.
 *
 * Vaste drie kolommen en geen auto-fit: dit staat in een kolom van het
 * drieluik, en daar hoort de indeling niet per venster te verspringen.
 */
.clrm-parameterkop {
    margin: 1.25rem 0 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--regiq-rand-zacht);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--regiq-plaatshouder);
}

/* Het eerste kopje sluit aan op de kaartkop erboven en heeft die extra ruimte
   niet nodig. */
.clrm-parameterkop:first-of-type {
    margin-top: 0.85rem;
}

.clrm-parameters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.15rem 1.25rem;
    margin: 0.75rem 0 0;
}

.clrm-parameter {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0 0.6rem;
}

/*
 * Een plaatsnaam is de enige vrije tekst hier en kan langer zijn dan een label;
 * die mag afbreken in plaats van de kolom op te rekken. De rest zijn getallen
 * die op één regel horen te blijven (zie .clrm-parameter dd hieronder).
 */
.clrm-parameter.is-tekst dd {
    white-space: normal;
}

/*
 * Twee kolommen zodra drie te krap worden. Onder de 56rem staat het blok toch
 * al over de volle breedte — daar is de winst dat de labels niet meer over twee
 * regels afbreken, wat de rijen ongelijk hoog maakt.
 */
@media (max-width: 56rem) {
    .clrm-parameters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 30rem) {
    .clrm-parameters {
        grid-template-columns: minmax(0, 1fr);
    }
}

.clrm-parameter dt {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--regiq-plaatshouder);
}

.clrm-parameter dd {
    margin: 0;
    font-size: var(--regiq-cijfer);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Twee waarden vallen op, en allebei om een reden.
 *
 * Onvoorzien is het enige veld dat er iets áf haalt; zonder kleurverschil leest
 * "-5%" als "5% erbij". Effectief is geen invoer maar de optelsom van de twee
 * percentages erboven — dezelfde kleur als de uitkomsten in de blokken ernaast,
 * zodat "berekend" er overal hetzelfde uitziet.
 */
.clrm-parameter.is-negatief dd {
    color: var(--regiq-fout);
}

.clrm-parameter.is-afgeleid dd {
    color: var(--regiq-paars);
    font-weight: 600;
}

/* De kostprijskolom in het overzicht: hetzelfde accent als het eindbedrag in
   het resultaatblok, zodat dezelfde grootheid er op beide schermen hetzelfde
   uitziet. */
.clrm-kostprijs {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--regiq-paars);
}

/*
 * De scheiding tussen twee groepen kolommen in de trajectentabel: wie het is,
 * wat het aan tijd kost, wat het aan geld doet.
 *
 * Elf kolommen naast elkaar lezen als één lange rij getallen, en dan zoek je
 * bij elke cel opnieuw welke kop erboven staat. Drie blokjes maken dat één
 * oogopslag — zonder een regel tekst en zonder een kolom breder te maken.
 *
 * De grens is ruimte en geen lijn. Hier stond een streep, en dat was precies de
 * verkeerde kant op: in een tabel die zijn rijlijnen kwijt is omdat lijnen als
 * raster gaan spreken, is een verticale lijn hetzelfde raster in de andere
 * richting. Groter wit doet hetzelfde werk en voegt niets toe aan het beeld —
 * de kolommen erbinnen staan dicht op elkaar, ertussen valt een gat.
 */
.clrm-kolomgrens {
    padding-left: 1.6rem;
}

/*
 * De totaalregel van de trajectentabel.
 *
 * De streep erboven komt van .wrap tfoot en het gewicht ook; hier staat alleen
 * de ruimte die een som van zijn optelling scheidt. Zonder dat plakt "Totaal"
 * tegen de laatste regel aan alsof het er nog een is.
 *
 * Deze klasse bestond al in de HTML zonder ooit iets te doen. Dat is nu geen
 * los haakje meer — en het is de plek om de totaalregel aan te passen zonder
 * elke tfoot in de applicatie mee te nemen.
 */
.clrm-trajecten-totaal th,
.clrm-trajecten-totaal td {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    background: var(--regiq-achtergrond);
}

/* Het vlak loopt door tot de rand van de kaart en volgt daar de ronding, zoals
   het kopvlak dat bovenaan ook doet. Anders eindigt een grijze balk in een
   rechte hoek binnen een kaart met ronde hoeken. */
.clrm-trajecten-totaal th:first-child { border-radius: 0 0 0 8px; }

.clrm-trajecten-totaal td:last-child { border-radius: 0 0 8px 0; }

/*
 * De bezettingsbalk in de kopkaart, onder de naam van de coach.
 *
 * Begrensd in breedte en niet over de hele kaart: een balk van een halve meter
 * met een vulling van driekwart leest niet als "driekwart" maar als een streep.
 * Op deze maat is de verhouding in één blik te zien, en de knoppen rechtsboven
 * houden hun eigen ruimte.
 *
 * De ruimte erboven scheidt hem van de regel over de manager; staat die er niet,
 * dan van de kop zelf.
 */
.clrm-kopmeter {
    max-width: 22rem;
    margin-top: 1rem;
}

/* --- Een regel uitklappen naar zijn losse dossiers ------------------------ */

/*
 * Een regel in de trajectentabel staat voor een náám, en achter die naam zitten
 * één of meer dossiers. De optelling is precies wat de tabel bruikbaar maakt —
 * maar zodra een getal opvalt, is de volgende vraag altijd "welk dossier dan".
 * Uitklappen beantwoordt die vraag zonder een tweede scherm en zonder een
 * kolom erbij.
 *
 * De hele regel is klikbaar (regiq.js), dus hij hoort er ook klikbaar uit te
 * zien. Zonder JavaScript blijft de knop een knop die niets doet en de tabel
 * precies wat hij was — er gaat niets verloren, want deze gegevens stonden er
 * eerder helemaal niet.
 */
.clrm-groeprij {
    cursor: pointer;
}

/*
 * De knop in de eerste cel draagt de naam en is dus geen knop om naar te
 * kijken: geen vlak, geen kader, gewoon de tekst die er al stond met een pijl
 * ervoor. Hij overschrijft .wrap button, dat een paars vlak zou geven — en
 * elf paarse blokjes onder elkaar in de eerste kolom is geen tabel meer.
 */
.wrap .clrm-uitklap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.clrm-uitklap-pijl {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    align-self: center;
    fill: none;
    stroke: var(--regiq-tekst-zacht);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Naar beneden zodra de rij open staat. De draaiing zegt de toestand nog
       eens zonder een woord, en volgt hetzelfde attribuut als de tekst. */
    transition: transform 0.15s ease;
}

.clrm-uitklap[aria-expanded="true"] .clrm-uitklap-pijl {
    transform: rotate(90deg);
    stroke: var(--regiq-paars);
}

/*
 * De pijl draagt de affordance in zijn eentje — er stond een "toon 3 dossiers"
 * naast, en dat herhaalde op elke regel in woorden wat de pijl al zegt.
 *
 * Daarom kleurt hij mee zodra de muis ergens op de rij komt: dat is het moment
 * waarop je je afvraagt of er iets te klikken valt, en dan hoort het teken op
 * te vallen in plaats van permanent aandacht te vragen.
 */
.clrm-groeprij:hover .clrm-uitklap-pijl,
.clrm-uitklap:hover .clrm-uitklap-pijl,
.clrm-uitklap:focus-visible .clrm-uitklap-pijl {
    stroke: var(--regiq-paars);
}

.clrm-uitklap:focus-visible {
    outline: 2px solid var(--regiq-paars-link);
    outline-offset: 2px;
    border-radius: 4px;
}

/*
 * De uitgeklapte rij. Eén cel over de volle breedte met een eigen tabel erin,
 * en niet dezelfde kolommen: de vragen zijn hier anders (wanneer begint het,
 * wanneer eindigt het, waar komt de werklast vandaan) en die passen niet in
 * kolommen die voor de optelling gemaakt zijn.
 *
 * Het grijze vlak en de inspringing maken zichtbaar dat dit bij de regel
 * erboven hoort en geen nieuwe tabel is.
 */
.clrm-dossierrij > td {
    padding: 0 0 0.9rem 1.6rem;
    background: var(--regiq-achtergrond);
}

.clrm-dossiers {
    width: 100%;
    border-collapse: collapse;
}

.clrm-dossiers th,
.clrm-dossiers td {
    padding: 0.4rem 0.5rem;
    font-size: 0.82rem;
}

.clrm-dossiers thead th {
    background: none;
    border-radius: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--regiq-tekst-zacht);
}

/* Geen eigen hoverkleur: de regel eronder ligt al op het grijze vlak, en twee
   tinten grijs die om elkaar heen bewegen maken het onrustig. */
.wrap .clrm-dossiers tbody tr:hover {
    background: none;
}

/* Waar de werklast vandaan komt, achter het getal: contract, budget ÷ tarief,
   geschreven, vuistregel. Klein en zacht — het getal is het antwoord, dit is
   waarom je het mag geloven. */
.clrm-dossierbron {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--regiq-tekst-zacht);
}

/* Zelfde stippellijn als in de herkomstlijst van het capaciteitsblok: het is
   hetzelfde label met dezelfde uitleg, en dan hoort het er ook hetzelfde uit te
   zien. `inline-block` omdat de regel hierboven het blok maakt — een
   text-decoration over de volle kolombreedte zou een streep naast het woord
   trekken. */
.clrm-dossierbron.regiq-tip {
    display: inline-block;
    cursor: help;
    text-decoration: underline dotted var(--regiq-rand);
    text-underline-offset: 3px;
}

/* De open punten op het overzicht van de Caseloadrekenmodule: alleen zichtbaar
   als er iets te doen is, dus geen lijst die permanent "0 openstaand" meldt. */
.clrm-punten {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    color: var(--regiq-tekst);
    font-size: 0.9rem;
    line-height: 1.7;
}

.clrm-punten li::marker {
    color: var(--regiq-paars-licht);
}

/*
 * De actieve trajecten van de gekozen coach: een eigen kaart naast het
 * resultaatblok op het aanmaakformulier.
 *
 * De kaart verschijnt pas zodra er een coach gekozen is (regiq.js haalt het
 * hidden-attribuut eraf). Zolang hij er niet is, telt hij ook niet mee in het
 * grid — en dan zou het resultaatblok ernaast op halve breedte blijven staan
 * met een gat ernaast. Vandaar de regel hieronder: zolang de buurkaart verborgen
 * is, krijgt de rij één kolom. Dat scheelt een klasse die door JavaScript
 * omgezet moet worden, en het werkt daardoor ook zonder JavaScript — dan blijft
 * de kaart weg en staat het resultaat gewoon over de volle breedte.
 *
 * Kent een browser :has() niet, dan blijft de kaart nog steeds verborgen tot er
 * gekozen is; alleen de lege helft ernaast blijft dan staan.
 */
.dash-kolommen:has(> .clrm-trajecten[hidden]) {
    grid-template-columns: minmax(0, 1fr);
}

.clrm-trajecten[hidden] {
    display: none;
}

.clrm-trajecten-aantal {
    font-weight: 600;
    font-size: var(--regiq-cijfer);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--regiq-paars);
}

.clrm-trajecten-lijst {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.clrm-trajecten-lijst li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.86rem;
    border-bottom: 1px solid var(--regiq-rand-zacht);
}

.clrm-trajecten-lijst li:last-child {
    border-bottom: none;
}

.clrm-trajecten-rest {
    color: var(--regiq-tekst-zacht);
}

/* Een veldtoelichting die de plaats van het veld zelf inneemt (er valt niets te
   kiezen). Zonder de bovenmarge die hij onder een invoerveld wél nodig heeft. */
.clrm-veldhulp-alleen {
    margin-top: 0;
}

/* De manager stond hier als tweede regel onder de coachnaam (.clrm-manager,
   .clrm-manager-open) en is een eigen kolom geworden naast Account. Twee
   redenen: die tweede regel maakte elke rij ongelijk hoog, en beide kolommen
   beantwoorden dezelfde vraag — ziet de coach deze berekening zelf? Zonder
   manager staat er de gedeelde grijze badge, dus er is geen eigen klasse meer
   nodig. */

/* --- Scenario's binnen de Caseloadrekenmodule ----------------------------
 *
 * Een scenario is een doorrekening naast de vastgestelde caseload: onbeperkt
 * per coach, alleen zichtbaar voor de maker, telt nergens in mee. Dat verschil
 * moet op het scherm te zien zijn zonder dat je de tekst hoeft te lezen —
 * anders is een half uur later niet meer duidelijk of je naar kladwerk kijkt of
 * naar het salaris waarmee gerekend wordt.
 */

/* Een badge naast de coachnaam op het detailscherm: Scenario, Geen manager,
   Gekoppeld. Heette .clrm-soort toen hij alleen de soort droeg; nu er drie
   toestanden in kunnen staan, is dat geen naam meer die klopt. */
.clrm-kopbadge {
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* De belofte "alleen jij ziet dit" op het formulier en het detailscherm. Op
   beide plekken op dezelfde plaats in de leesvolgorde, zodat hij niet als
   nieuwe informatie leest maar als bevestiging. */
.clrm-scenario-belofte {
    font-size: 0.85rem;
}

/* De regel op het overzicht die naar de eigen scenario's wijst. Een regel en
   geen tegel: de tegels gaan over het bedrijf, dit over één persoon. */
.clrm-scenariosregel {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.clrm-scenario-icoon {
    flex: none;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: var(--regiq-paars);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Baseline-uitlijning zet een svg net te hoog; dit zet hem op de regel. */
    transform: translateY(0.15rem);
}

/*
 * Verschilkolommen. Bewust geen groen en rood: of een hogere kostprijs slecht
 * is, hangt af van wat je onderzoekt — een scenario met een kortere werkweek
 * hóórt duurder uit te vallen, en dat is precies de uitkomst die je zocht. De
 * kleur zegt welke kant het op ging, niet of dat goed nieuws is. Vandaar twee
 * tinten van de huisstijlkleur en niet het stoplicht.
 */
.clrm-verschil {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.clrm-verschil.is-hoger {
    color: var(--regiq-paars);
}

.clrm-verschil.is-lager {
    color: var(--regiq-paars-licht);
}

.clrm-verschil.is-gelijk {
    color: var(--regiq-tekst-zacht);
    font-weight: 500;
}

/* Het kostprijsverschil in de kop van de vergelijkingskaart: hetzelfde getal
   als in de tabel eronder, maar op de plek waar het oog het eerst kijkt. */
.clrm-verschil-stempel {
    font-size: var(--regiq-cijfer);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(106, 53, 177, 0.09);
    color: var(--regiq-paars);
}

.clrm-verschil-stempel.is-gelijk {
    background: var(--regiq-rand-zacht);
    color: var(--regiq-tekst-zacht);
}

/* "Wat er nu geldt" naast het scenarioformulier: dezelfde opmaak als het
   resultaatblok ernaast, zodat de twee kolommen zich als één vergelijking
   lezen en niet als twee losse kaarten. */
.clrm-basis .clrm-uitkomst dd {
    color: var(--regiq-tekst-zacht);
}

.clrm-basis .clrm-uitkomst.is-eindbedrag dd {
    color: var(--regiq-tekst);
}

/* --- Het drieluik op het caseloaddetailscherm ----------------------------
 *
 * Parameters, Beschikbare uren en Kostprijsberekening, in die volgorde: wat er
 * is ingevuld, hoeveel uren dat oplevert, wat die uren kosten. Eén lijst met
 * acht uitkomsten onder elkaar liet die drie vragen door elkaar lopen — dan
 * staat een uurprijs pal onder een aantal uren.
 *
 * De verdeling volgt de hoeveelheid inhoud en niet de gelijkheid van de
 * blokken: Parameters draagt dertien regels in twee kolommen en krijgt daarom
 * twee derde van de breedte, met de twee uitkomstblokken onder elkaar in de
 * smalle kolom ernaast. Die twee tellen samen negen regels — naast elkaar op
 * een derde elk zou de een half leeg staan naast de ander.
 */
.clrm-drieluik {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
    /*
     * Even hoog, net als .clrm-tweeluik. Hier stond `start`, met het argument
     * dat elf parameters naast drie urenregels een half kaartje wit zouden
     * opleveren. Dat argument is door twee latere wijzigingen achterhaald:
     * sinds 2026-08-18 staat er onder Beschikbare uren een ring van 11rem, en
     * sinds clrm.financieel-bekijken kan de derde kaart wegvallen — waarna een
     * medewerker twee kaarten naast elkaar ziet die binnen een paar regels van
     * elkaar liggen. En dán geldt precies wat bij .clrm-tweeluik al staat: twee
     * kaarten die net níet even hoog zijn, lezen als een fout in de opmaak.
     *
     * Wat er bij drie kaarten gebeurt is bewust geen uitzondering: het
     * parameterblok spant beide rijen, dus overtollige hoogte wordt door het
     * grid over de twee kaarten ernaast verdeeld in plaats van bij één op te
     * hopen. Ze tellen samen ongeveer even veel regels als het parameterblok,
     * dus er valt weinig te verdelen.
     */
    align-items: stretch;
}

/*
 * Het parameterblok beslaat beide rijen van de linkerkolom, zodat de twee
 * uitkomstblokken er rechts naast onder elkaar komen in plaats van eronder.
 *
 * Een eigen klasse en geen :first-child: welke kaart dit is, hoort in de view
 * te staan en niet af te hangen van de volgorde waarin iemand ooit een blok
 * invoegt.
 */
/*
 * Zonder clrm.financieel-bekijken valt de kaart Kostprijsberekening weg en
 * blijven er twee over. Dan hoeft het parameterblok niet meer over twee rijen:
 * met `span 2` maakt het grid een tweede rij van niets, en de kaart ernaast
 * eindigt op de helft van een blok dat verder leeg blijft — dat leest als
 * iets wat er uit is gevallen in plaats van iets wat er niet is.
 *
 * :has() op het aantal kaarten en niet een klasse uit de view: welk blok er
 * staat is een gevolg van een recht, en dat hoort niet als opmaakvlag door de
 * hele keten meegegeven te worden.
 */
.clrm-drieluik:has(> .dash-kaart:nth-child(2):last-child) .clrm-blok-parameters {
    grid-row: auto;
}

.clrm-blok-parameters {
    grid-row: span 2;
    /* Hier stond `align-self: stretch` om deze kaart tot de onderkant van de
       rechterkolom te laten doorlopen. Dat regelt `align-items: stretch` op de
       container nu voor álle kaarten; een eigen regel ernaast zou suggereren
       dat dit blok een uitzondering is. */
}

/*
 * Onder elkaar zodra twee kolommen niet meer comfortabel passen — hetzelfde
 * breekpunt als de rest van het platform, zodat schermen niet elk op hun eigen
 * breedte omklappen.
 *
 * De rijspan moet dan wél terug naar auto: met één kolom zou het parameterblok
 * twee rijen beslaan waarvan de tweede leeg blijft, en dan staat er een gat van
 * een halve kaarthoogte onder.
 */
@media (max-width: 68rem) {
    .clrm-drieluik {
        grid-template-columns: minmax(0, 1fr);
    }

    .clrm-blok-parameters {
        grid-row: auto;
    }
}

/*
 * De kaarten in het drieluik hebben elk hun eigen marge niet nodig — het grid
 * regelt de tussenruimte. Zonder dit zakt elke kaart 1,5rem omlaag en staan de
 * koppen niet meer op één lijn.
 */
.clrm-drieluik > .dash-kaart {
    margin: 0;
}

.clrm-blok .clrm-uitkomsten,
.clrm-blok .clrm-parameters {
    margin-top: 0.5rem;
}

/*
 * De kop van elk blok in het drieluik draagt zijn uitleg in een tooltip achter
 * een icoon, en niet als alinea eronder. Drie kaarten naast elkaar met elk een
 * regel toelichting duwden de getallen alle drie een regel omlaag voor tekst
 * die je één keer leest. Het icoon zelf staat bij .clrm-info.
 *
 * Het icoon hoort tegen de titel aan en niet aan de andere kant van de kop: het
 * gaat over die titel. De gap van .dash-kaart h2 zet het al op de goede afstand;
 * margin-left: auto zou hem naar de rand duwen en dan lijkt het een knop.
 *
 * Ook op de kop van de scenario-analyse, om dezelfde reden: daar stond de uitleg
 * als alinea boven en onder de tabel, en samen namen die meer hoogte in dan de
 * drie regels waar het blok om gaat.
 */
.clrm-blok h2 .clrm-info,
.dash-kaart-kop h2 .clrm-info {
    margin-left: -0.15rem;
}

/* Het teken achter een teruggerekend urenbudget in de trajectentabel.
 *
 * Rapasso levert `hours_available` lang niet altijd, maar wel het budget en het
 * uurtarief — en berekent het budget zelf als uren × tarief. Terugrekenen is dus
 * dezelfde som omgedraaid en geen schatting. Toch een teken erbij: bij een vraag
 * over een cijfer scheelt het of je in Rapasso naar het urenveld of naar het
 * tarief moet kijken. Zacht en klein, want het getal is niet minder waard. */
.clrm-afgeleid {
    margin-left: 0.15rem;
    font-size: 0.8rem;
    color: var(--regiq-tekst-zacht);
    cursor: help;
}

/*
 * Het teken bij een traject dat gegevens mist (.clrm-gat).
 *
 * Op de groepsregel met een aantal erachter, in het uitklappaneel als los teken
 * bij het dossier dat het betreft. Wat er precies mist en wat het gevolg is,
 * staat in de tooltip; de bepaling in App\Clrm\Trajectgaten.
 *
 * **Eén kleur voor elke zwaarte** sinds 2026-08-19 — zie de klassen hieronder
 * voor wat daarvóór gold en waarom het is teruggedraaid. Er zijn drie zwaartes
 * geweest met elk een eigen tint; het onderscheid staat nu in de tooltip en in
 * het gatenvenster in plaats van in de kleur.
 *
 * Dezelfde oranje als .meter.is-bijna-vol en de lijn in de staafgrafiek: die
 * bestond al voor "let op, maar niet mis", en er hoort geen kleur bij te komen.
 *
 * Het is geen badge met een vlak eromheen. In de eerste cel staat al een knop
 * met een pijl en een naam; een gevuld blokje ernaast zou de rij hoger maken en
 * met de badges in de kolom Aantal gaan concurreren om de aandacht.
 */
.clrm-gat {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #e2561f;
    cursor: help;
    vertical-align: middle;
}

.clrm-gat svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * De drie zwaartes dragen sinds 2026-08-19 dezelfde kleur (besluit eigenaar).
 *
 * Ze waren grijs, oranje en rood — administratief, "kost een getal op het
 * scherm" en "stuurt de capaciteit niet". Dat onderscheid is niet verdwenen maar
 * verhuisd: het staat in de tooltip bij het teken en voluit in het gatenvenster.
 * Op het scherm is één teken met één kleur wat overblijft.
 *
 * **De klassen blijven bestaan en worden nog steeds gezet.** Ze dragen de
 * zwaarte in de HTML, OntbrekendeGegevensTest toetst erop, en de dag dat het
 * onderscheid weer zichtbaar moet worden is dit één regel CSS in plaats van een
 * wijziging in twee views en een klasse. Zet je hier ooit weer verschil in,
 * kijk dan eerst of de teksten in trajecten-tabel.blade.php en
 * gaten-venster.blade.php nog kloppen: die noemden de kleuren bij naam en zijn
 * bij deze wijziging herschreven.
 *
 * De kleur is die van de middelste stand — wat het teken op de meeste plekken
 * al was. Het is geen kleur uit de --stand-reeks maar #e2561f, dezelfde als
 * .meter.is-bijna-vol en de drempellijn in de staafgrafiek; die bestond al voor
 * "let op, maar niet mis", en er hoort er geen bij te komen.
 */
.clrm-gat-licht,
.clrm-gat-let-op,
.clrm-gat-ernstig {
    color: #e2561f;
}

/*
 * Dezelfde melding als in de tooltip van het teken, maar dan als zichtbare
 * tekst in het venster achter de tegel — dáár kom je juist voor.
 *
 * Eén reden per regel: een dossier kan er vier tegelijk hebben, en achter
 * elkaar met puntkomma's ertussen wordt dat een zin die niemand uitleest.
 */
/*
 * De ontbrekende velden in het venster: korte labels naast elkaar, elk in de
 * kleur van zijn eigen gewicht.
 *
 * Eerst stond hier de volledige uitleg per gat, onder elkaar. Dat waren drie
 * regels tekst per rij in een lijst waar je juist doorheen scant om te zien
 * welke dossiers bijgewerkt moeten worden. De uitleg zit nu in de tooltip van de
 * cel; wat er staat is alleen nog: welke velden, en hoe zwaar.
 *
 * Het middenpunt komt uit ::before en niet uit de HTML, zodat er geen scheiding
 * achter het laatste label blijft staan.
 */
.clrm-gat-reden {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.4rem;
    font-size: 0.85rem;
    cursor: help;
}

.clrm-gat-reden > span + span::before {
    content: '·';
    margin-right: 0.4rem;
    color: var(--regiq-rand);
}

/*
 * De tegel die een venster opent.
 *
 * **Let op `.wrap button`**: die regel geeft élke knop binnen een pagina een
 * volle paarse vulling met kleine padding, en hij is specifieker dan
 * `.dash-tegel` — een knop met die klasse erop komt er dus paars uit, en niet
 * als tegel. Alles wat daar gezet wordt moet hier expliciet terug: achtergrond,
 * tekstkleur, padding, ronding en schaduw. Dat is de reden dat deze regel meer
 * eigenschappen draagt dan je bij een hoverstijl zou verwachten.
 *
 * Wit met een lichte paarse rand, en niet paars gevuld. Een gevulde tegel
 * tussen veertien witte leest als een andere sóórt getal in plaats van als een
 * getal waar iets achter zit. De rand staat er meteen — ook zonder muis, want
 * anders is nergens te zien dat deze tegel meer doet dan de rest — en wordt
 * voller zodra je hem aanwijst.
 */
.dash-tegel.is-klikbaar,
.wrap button.dash-tegel {
    width: 100%;
    padding: 1.1rem 1.25rem;
    font: inherit;
    color: inherit;
    text-align: left;
    background: var(--regiq-kaart);
    border: 1px solid var(--regiq-paars-licht);
    border-radius: var(--regiq-radius);
    box-shadow: 0 8px 24px rgba(24, 20, 60, 0.06);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-tegel.is-klikbaar:hover,
.dash-tegel.is-klikbaar:focus-visible {
    border-color: var(--regiq-paars);
    box-shadow: 0 4px 16px rgba(24, 20, 60, 0.12);
}

/* Het capaciteitsblok op het detailscherm: dezelfde opmaak als de
   uitkomstblokken erboven, maar in twee kolommen omdat het er zes regels zijn
   en die anders een halve meter beeld beslaan. */
.clrm-capaciteit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
}

@media (max-width: 40rem) {
    .clrm-capaciteit {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * Scenario-analyse en Omzet naast elkaar, onder het capaciteitsblok.
 *
 * Niet gelijk verdeeld: links staat een tabel van zes kolommen, rechts een
 * lijstje van zes bedragen. Half-om-half zou de tabel laten schuiven terwijl er
 * rechts ruimte overblijft — en tabellen horen hier te krimpen, niet te
 * schuiven.
 *
 * Even hoog, anders dan de blokken in .clrm-drieluik. Daar staan drie kaarten
 * met sterk verschillende lengtes en zou uitrekken een half kaartje wit
 * opleveren; hier gaat het om twee kaarten die na het verhuizen van hun
 * toelichting naar een tooltip binnen een paar regels van elkaar liggen. Twee
 * kaarten naast elkaar die net níet even hoog zijn, lezen als een fout in de
 * opmaak — en dat weegt hier zwaarder dan de laatste regel wit onderin.
 */
.clrm-tweeluik {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
    align-items: stretch;
}

/*
 * Eén van de twee kan ontbreken — zonder Rapasso-meting is er geen
 * scenario-analyse, zonder budgetten geen omzet. Dan valt er niets naast elkaar
 * te zetten en hoort de overgebleven kaart de volle breedte te krijgen in
 * plaats van drie vijfde met een gat ernaast. Zelfde patroon als bij
 * .dash-kolommen:has(> .clrm-trajecten[hidden]).
 */
.clrm-tweeluik:has(> .dash-kaart:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

/* Het grid regelt de tussenruimte; met hun eigen marge erbij staan de koppen
   niet meer op één lijn. */
.clrm-tweeluik > .dash-kaart {
    margin: 0;
}

/*
 * Twee gelijke helften, voor Aflopende trajecten naast Wat valt er vrij?.
 *
 * De 3fr/2fr hierboven hoort bij het andere tweeluik: daar staat links een tabel
 * van zes kolommen en rechts een lijstje bedragen onder elkaar. Hier dragen
 * beide kaarten een tabel — links drie kolommen onder een grafiek, rechts vier —
 * en dan perst twee vijfde de rechterkolommen tegen elkaar terwijl links ruimte
 * overblijft.
 *
 * minmax(0, 1fr) en niet 1fr: een grid-kolom is standaard minstens zo breed als
 * zijn inhoud, en dan duwt een brede tabel de andere kaart smaller in plaats van
 * binnen .schil-tabel te scrollen.
 */
.clrm-tweeluik.is-gelijk {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/*
 * De bedragen in de rechterkaart onder elkaar in plaats van in twee kolommen:
 * op twee vijfde van de breedte passen een label als "Netto marge/maand" en het
 * bedrag ernaast niet meer op één regel zonder af te breken.
 *
 * Blijft ook staan zodra het tweeluik onder elkaar valt en de kaart weer volle
 * breedte heeft. Dat is een regel minder in het stylesheet en scheelt een
 * opmaak die twee keer omklapt tussen twee breekpunten die vlak bij elkaar
 * liggen; wat je wint is compactheid, wat je verliest is een lijst die op elke
 * breedte hetzelfde leest.
 */
.clrm-tweeluik .clrm-capaciteit {
    grid-template-columns: minmax(0, 1fr);
}

/* Onder elkaar zodra twee kolommen niet meer comfortabel passen — hetzelfde
   breekpunt als .clrm-drieluik en de rest van het platform, zodat schermen niet
   elk op hun eigen breedte omklappen. */
@media (max-width: 68rem) {
    .clrm-tweeluik {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * De tweedeling bínnen het blok In aanvraag (klikgesprekken): links de tabel
 * per coach, rechts de ouderdomsverdeling. Dezelfde maten als .clrm-tweeluik
 * (3fr/2fr, dezelfde gap en hetzelfde breekpunt), maar binnen één kaart in
 * plaats van als twee kaarten — het is één onderwerp met twee weergaven, en
 * twee losse kaarten zouden een scheiding beloven die er niet is.
 *
 * minmax(0, 1fr)-varianten, want de tabel links moet binnen .schil-tabel kunnen
 * scrollen in plaats van de verdeling smaller te duwen.
 */
.clrm-intakes-indeling {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.5rem;
    align-items: start;
}

/* De subkop rechts draagt zelf al ruimte via .clrm-parameterkop; de balken
   eronder niet, en zonder deze marge plakt de voetnoot eraan vast. */
.clrm-intakes-ouderdom .balken {
    margin-top: 0.75rem;
}

/*
 * De sectiekop "In aanvraag (klikgesprekken)" met de link naar de
 * aanmeldingenlijst rechts: een handeling hoort bij zijn onderwerp, niet als
 * losse zin onder de tabel. De link krijgt het gewone lettergewicht en geen
 * kapitalen terug — de kop zelf is klein kapitaal, en een link die daarin
 * meedoet leest als een tweede kop in plaats van als iets om aan te klikken.
 */
.clrm-intakekop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.clrm-intakekop-link {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

@media (max-width: 68rem) {
    .clrm-intakes-indeling {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* De scenario-analyse onder het capaciteitsblok: de normcaseload per
 * ervaringsniveau.
 *
 * Eén regel in die tabel komt overeen met het percentage cliëntgebonden tijd van
 * de caseload zelf, en die regel reproduceert exact het maximum uit het blok
 * erboven. Dat is de plek waar de lezer staat, dus die krijgt een accent.
 *
 * Bewust een zacht vlak met een paarse rand links en géén kleur op de tekst:
 * dit is geen waarschuwing en geen uitkomst maar een oriëntatiepunt. Rood of
 * groen zou een oordeel suggereren over een rij die alleen zegt "hier bent u". */
.clrm-norm-huidig {
    background: color-mix(in srgb, var(--regiq-paars) 5%, transparent);
}

.clrm-norm-huidig td:first-child {
    box-shadow: inset 3px 0 0 var(--regiq-paars);
}

/* De rij onder de muis licht op (zie .wrap tbody tr:hover), maar déze rij is al
   gemarkeerd — en die markering hoort niet te verdwijnen zodra je hem aanwijst.
   Iets sterker paars dus, en met genoeg specificiteit om van de algemene
   hoverregel te winnen. */
.wrap tbody tr.clrm-norm-huidig:hover {
    background: color-mix(in srgb, var(--regiq-paars) 9%, transparent);
}

/* Het label achter de naam van het eigen niveau. Klein en zacht: de rijkleur
 * doet het werk al, dit zegt alleen waaróm die rij oplicht. */
.clrm-norm-merk {
    margin-left: 0.4rem;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--regiq-paars) 12%, transparent);
    color: var(--regiq-paars-diep);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* De middelste van de drie maximumkolommen is dezelfde deling die het
 * capaciteitsblok hierboven al maakt. Zwaarder gezet dan licht en zwaar, want
 * dat is het getal dat geldt; de twee ernaast zijn de bandbreedte eromheen. */
.clrm-norm-mix {
    font-weight: 600;
}

/* De herkomst van de werklast, onder het capaciteitsblok.
 *
 * Eén regel per trede van de ladder met het aantal trajecten erachter. Een
 * lijstje en geen tabel: het zijn hooguit zeven regels van twee kolommen, en een
 * tabel eromheen zou meer kader zijn dan inhoud.
 *
 * Bewust geen kleur per trede. De volgorde van de ladder loopt van hard naar
 * zacht, maar een traject dat zijn uren uit de vuistregel krijgt is geen fout —
 * het is een traject waarvan Rapasso niets weet. Rood zou een probleem
 * suggereren waar de klant niets aan kan doen. */
.clrm-bronnen {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.25rem 1.5rem;
}

.clrm-bronnen li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--regiq-rand-zacht);
    font-size: 0.86rem;
}

.clrm-bron-naam {
    color: var(--regiq-tekst-zacht);
}

/*
 * Een bronnaam met uitleg is te herkennen aan de stippellijn, precies als een
 * kolomkop met uitleg (zie th.regiq-tip). Zonder dat verschil is de toelichting
 * iets wat je bij toeval vindt, en juist hier moet ze gevonden wórden: "budget
 * ÷ ingesteld tarief" zegt niemand iets die de ladder niet kent.
 *
 * Geen icoon per regel: deze lijst telt tot acht regels, en dat zou een gordijn
 * van vraagtekens opleveren naast de aantallen. Hetzelfde argument als bij de
 * elf kolomkoppen van de trajectentabel. Het icoon staat één keer, bij de kop
 * erboven.
 */
.clrm-bron-naam.regiq-tip {
    cursor: help;
    text-decoration: underline dotted var(--regiq-rand);
    text-underline-offset: 3px;
}

/* Het info-icoon naast een subkopje. Dezelfde opzet als in een formulierlabel
   (zie .dash-veld label .clrm-info): inline achter de tekst, want de kop is
   geen flexcontainer en dat hoort hij voor één icoon ook niet te worden. */
.clrm-parameterkop .clrm-info {
    margin-left: 0.35rem;
    vertical-align: -0.15rem;
}

.clrm-bron-aantal {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Het invoerscherm voor trajectbudgetten.
 *
 * Eén formulier per rij: het bedrag wordt per dossier in Rapasso opgezocht, dus
 * één rij opslaan zonder de rest aan te raken is precies wat het werk vraagt.
 * Het invoerveld en de knop staan náást elkaar en breken nooit af — een
 * afgebroken knop onder een veld leest als een tweede handeling. */
.clrm-budget-vorm {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.clrm-budget-vorm input {
    width: 7.5rem;
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Een rij die al een bedrag draagt. Zacht groen en niet vet: het is geen
 * uitkomst maar een afgeronde regel — je moet in één blik kunnen zien hoeveel
 * werk er nog ligt, zonder dat het ingevulde deel om aandacht vraagt. */
.clrm-budget-ingevuld {
    background: color-mix(in srgb, var(--regiq-goed) 6%, transparent);
}

/* Het Rapasso-nummer: de sleutel waarmee je het dossier in het bronsysteem
 * terugvindt. Monospace, want deze getallen worden overgetypt en dan helpt het
 * als de cijfers uitlijnen. */
.clrm-budget-nummer {
    font-variant-numeric: tabular-nums;
    color: var(--regiq-tekst-zacht);
}

/* De einddatum onder de begindatum: samen één looptijd, maar de tweede is
 * ondergeschikt en hoort de regel niet even zwaar te maken. */
.clrm-budget-tot {
    display: block;
    font-size: 0.78rem;
    color: var(--regiq-tekst-zacht);
}

/* De grondslag onder het capaciteitsblok: waarop het maximum rust.
 *
 * Iets nadrukkelijker dan de andere toelichtingen eronder, want dit is geen
 * uitleg bij een getal maar een keuze die het getal bepaalt — op het eerste
 * klantbestand een factor twee. Een streep links en niets meer: een kader of een
 * kleurvlak zou het als waarschuwing laten lezen, en er is niets mis. */
/*
 * De uitkomst van het capaciteitsblok: het maximum, bovenaan in een eigen vlak.
 *
 * Twee plekken hebben het hiervóór niet gehaald, en waaróm is het bewaren
 * waard. Als vierde regel tússen de acht cijfers was het antwoord er één van
 * velen — met een tussenstap eronder en een meting erboven. Onder een streep
 * eronder bleef het los hangen achter alles wat je eerst moest doorlezen, en
 * een uitkomst die je moet zoeken is geen uitkomst.
 *
 * Nu staat het waar een antwoord hoort: bovenaan, in een vlak dat het van de
 * onderbouwing scheidt. Getal en eenheid op één regel ("24 trajecten
 * maximaal"), grondslag eronder. Dat leest als een zin en niet als een
 * label-waardepaar dat toevallig groter gezet is.
 */
.clrm-maximum {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.15rem 1rem;
    margin: 1.1rem 0 0;
    padding: 0.85rem 1.1rem;
    border-radius: var(--regiq-radius-klein);
    background: var(--regiq-achtergrond);
}

/*
 * Wél groter dan elk ander cijfer in deze module — maar niet zó groot dat het
 * de kaart overneemt.
 *
 * In de blokken eronder staan acht getallen op een rij en zou grootte een
 * tussenstap belangrijker laten lijken dan hij is. Hier staat er één, los, in
 * een eigen vlak; dit is het getal waar een werkverdeling aan hangt.
 *
 * Drie dingen maken het rustig in plaats van luid: 1,6rem in plaats van 2 (dat
 * laatste kwam boven de kaartkop uit, en dan schreeuwt een tussenkopje harder
 * dan de titel), een iets krappere letterafstand omdat cijfers op deze maat
 * anders uit elkaar vallen, en de diepere paarstint — het felle paars is de
 * kleur van knoppen en links, dus van iets waar je op klikt.
 */
.clrm-maximum-getal {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--regiq-paars-diep);
    font-variant-numeric: tabular-nums;
}

/* Het label links, uitgelijnd met de labels in de lijst erboven; het getal
   rechts, waar op dit scherm elk getal staat. Zachter gezet dan het getal,
   want dát is waar je naar kijkt. */
.clrm-maximum-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--regiq-tekst);
}

/*
 * Waarop dat maximum rust, direct onder het label in de eerste kolom — dus aan
 * de kant waar de tekst staat en niet onder het getal.
 *
 * Geen linkerrandje meer: dat markeerde hem als losse alinea toen hij onder de
 * kaart hing. Binnen dit vlak hoort hij bij het getal ernaast, en een tweede
 * kader in een kader is ruis.
 */
.clrm-grondslag {
    grid-column: 1;
    margin: 0;
    font-size: 0.8rem;
    color: var(--regiq-tekst-zacht);
}

/* De rekenkundige uitkomst onder het begrensde maximum: in de tweede kolom en
 * rechts uitgelijnd, dus recht onder het getal waar hij iets over zegt. Klein
 * en zacht — het grote cijfer blijft het antwoord, dit is het voorbehoud. */
.clrm-maximum-begrensd {
    grid-column: 2;
    justify-self: end;
    font-size: 0.78rem;
    color: var(--regiq-tekst-zacht);
    white-space: nowrap;
}

/* "op dit tempo" achter Omzet/jaar.
 *
 * Dat getal is de maandomzet maal twaalf en niet de resterende contractwaarde;
 * zonder dat voorbehoud leest het als een jaaromzet die vaststaat, terwijl het
 * blok Vrijkomende ruimte eronder laat zien dat de trajecten aflopen. Klein en
 * zacht op dezelfde regel als het label: het is een bijstelling van de kop, geen
 * tweede regel die de rij hoger maakt. */
.clrm-tempo {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--regiq-tekst-zacht);
    white-space: nowrap;
}

/* ==========================================================================
   AI-analyseblok (.ai-blok-*)
   ==========================================================================
   De vorm van elke AI-analyse in dit platform: een kaart met een contextveld, een
   lijst signalen en secties met koppen en punten eronder. Gedeeld door de AI
   Caseload Analyse, de AI Bedrijfsanalyse (beide Caseloadrekenmodule) en de AI
   Inzichten van Klikgesprekken.

   **Geen moduleprefix, en dat is de reden.** Deze classes heetten `.clrm-ai-*`
   zolang alleen die module ze gebruikte; toen Klikgesprekken dezelfde vorm nodig
   had, was de keuze een kopie of een hernoeming. Dezelfde afweging als bij
   `.dash-tegel` en `.grafiekenraster`, met dezelfde uitkomst: twee kopieën van
   één vorm lopen bij de eerste correctie uit elkaar, en dan zien twee AI-blokken
   er net anders uit zonder dat iemand dat besloten heeft.

   **Geen kaders om de secties.** Die stonden er eerst wel — een grijs vlak per
   sectie in een grid van twee kolommen — en dat werkte tegen zichzelf: acht
   grijze blokken op een scherm dat verder uit witte kaarten bestaat, lezen als
   acht losse mededelingen in plaats van één doorlopende analyse. Wat er nu staat
   is één witte kaart met dunne lijnen ertussen; dat scheidt net zo goed en legt
   geen tweede laag over de bestaande kaartindeling heen.

   De secties staan onder elkaar over de volle breedte en niet in kolommen. Deze
   teksten zijn ongelijk lang, dus naast elkaar levert het gegarandeerd een halve
   kolom wit op — en de leesvolgorde (capaciteit → geld → mix → advies) is een
   volgorde, geen verzameling.
*/

.ai-blok {
    /* De leestekst van dit blok: de analyseregels en de prognose.
     *
     * Tussen --regiq-tekst (koppen) en --regiq-tekst-zacht (bijschriften) in.
     * Dat laatste is te licht voor inhoud die iemand werkelijk leest — het is de
     * kleur van een voetnoot — en de gewone tekstkleur maakt geen onderscheid
     * meer tussen de subkop en de regels eronder. Eén variabele omdat twee
     * blokken hem gebruiken en ze niet uit elkaar mogen lopen. */
    --ai-blok-tekst: #575c6e;
}

/* Ruimte tussen de kop en het contextveld: het formulier is invoer en hoort niet
   tegen de titel aan te plakken. */
.ai-blok .dash-kaart-kop {
    margin-bottom: 1.1rem;
}

/* Het contextveld. Een eigen accentrand, want dit is het enige veld van de hele
   module waarin iemand zelf schrijft — en het enige waarvan de inhoud het
   platform verlaat. Dat mag te zien zijn.

   Twee klassen in de selector en geen !important: `.wrap textarea` hierboven
   zet al een rand en een ondermarge, en die moeten hier wijken. Specificiteit
   doet dat net zo goed en houdt de volgende regel die dit wil overschrijven
   gewoon mogelijk. */
.ai-blok .ai-blok-context {
    border: 1.5px solid var(--regiq-paars);
    border-radius: var(--regiq-radius);
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.55rem;
}

.ai-blok-context::placeholder {
    color: var(--regiq-plaatshouder);
}

/* De hulptekst eronder loopt door tot de scheidingslijn van de eerste sectie. */
.ai-blok-contexthulp {
    margin: 0 0 1.5rem;
}


/* Eén sectie: icoon met kop, daaronder groepen met punten.
 *
 * De lijn staat bóven de sectie en niet eronder, zodat de laatste sectie niet
 * met een streep eindigt die nergens naar toe leidt. De eerste krijgt hem wel:
 * die scheidt de invoer van de uitkomst. */
.ai-blok-sectie {
    padding-top: 1.6rem;
    border-top: 1px solid var(--regiq-rand-zacht);
}

.ai-blok-sectie + .ai-blok-sectie {
    margin-top: 1.6rem;
}

.ai-blok-sectie h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--regiq-tekst);
}

/* Het icoon in de huisstijlkleur, op de maat van de kop ernaast. Dezelfde
   opbouw als de kopiconen van een dash-kaart, een slag kleiner. */
.ai-blok-sectie h3 svg {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    stroke: var(--regiq-paars);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* De vette subkop binnen een sectie ("Beschikbare capaciteit:"). Geen h4: het
   is een label boven een lijstje en geen niveau in de documentstructuur, en met
   vier van deze koppen per sectie zou een schermlezer een boom voorspiegelen
   die er niet is. */
.ai-blok-groepkop {
    margin: 0 0 0.45rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--regiq-tekst);
}

.ai-blok-groepkop + .ai-blok-punten {
    margin-top: 0;
}

/* Een tweede groep binnen dezelfde sectie krijgt lucht boven zijn kop: zonder
   die ruimte plakt "Afwezigheid:" tegen de laatste regel van de groep erboven
   en lijken het twee delen van hetzelfde lijstje. */
.ai-blok-punten + .ai-blok-groepkop {
    margin-top: 1rem;
}

/* De regels onder een subkop. Ingesprongen zonder opsommingsteken: elk punt is
   een zin met een getal erin, en een rij bolletjes ervoor maakt van een
   toelichting een boodschappenlijst. De inspringing doet het groeperen.

   Niet in de zachte grijstint van bijschriften: dit is de inhoud van de kaart
   en moet gewoon te lezen zijn. Een slag lichter dan de koppen erboven volstaat
   om het onderscheid te maken. */
.ai-blok-punten {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

/* Een sectie waar niets over gezegd is. Komt alleen voor bij een verslagsjabloon
   van de Vergadermodule; zie de notitie in onderdelen/ai-lichaam. Zacht en
   cursief, want het is geen inhoud maar de mededeling dat er geen inhoud is —
   dat onderscheid moet je kunnen zien zonder de zin te lezen. */
.ai-blok-leeg {
    margin: 0 0 1rem;
    color: var(--regiq-tekst-zacht);
    font-style: italic;
}

.ai-blok-punten li {
    padding-left: 1.6rem;
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ai-blok-tekst);
}

/* De laatste groep van een sectie hoeft geen ruimte onder zich: de lijn van de
   volgende sectie levert die al. */
.ai-blok-sectie > .ai-blok-punten:last-child {
    margin-bottom: 0;
}

/* De termijn binnen de prognosesectie: klein, paars en in kapitalen, zodat de
   drie vensters uit elkaar te houden zijn zonder dat het een tweede kopniveau
   wordt. De groepen eronder zijn dezelfde als in de andere secties. */
.ai-blok-venster {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--regiq-paars);
}

/* Lucht boven een volgend venster; binnen een venster doet .ai-blok-groepkop
   het werk. */
.ai-blok-punten + .ai-blok-venster {
    margin-top: 1.2rem;
}

/* De signalen bovenaan. Een lijst binnen een melding: de opsomming hoort bij de
   waarschuwing en niet ernaast. */
.ai-blok-signalen ul {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
}

.ai-blok-signalen li + li {
    margin-top: 0.25rem;
}

/* Wat er bij een bewaarde analyse aan context is meegegeven. Ingesprongen met
   een streep, zoals een citaat: het is niet onze tekst en niet die van het
   model, maar die van de manager die de analyse aanvroeg. */
.ai-blok-meegegeven {
    margin: 1.4rem 0 0;
    padding: 0.6rem 0 0.6rem 0.9rem;
    border-left: 3px solid var(--regiq-rand);
}

.ai-blok-meegegeven strong {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--regiq-plaatshouder);
}

.ai-blok-meegegeven p {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
}


/* ==========================================================================
   Overzicht Caseloadrekenmodule (.clrm-teammeter, .dash-tegels-vijf)
   ==========================================================================
   De kerncijfers op /caseloads/overzicht: bovenaan één brede balk met de
   trajectcapaciteit van het hele team, daaronder drie rijen van vijf tegels.

   Vijf per rij en niet auto-fit zoals .dash-tegels elders: de vijftien tegels
   horen bij elkaar in drie groepen van vijf — wat aandacht vraagt, waar het
   over gaat, wat het oplevert — en met auto-fit verspringt die indeling per
   schermbreedte. Dan staat "Bezetting" de ene keer naast "Coaches" en de andere
   keer eronder, en is de leesvolgorde weg.
*/

.dash-tegels-vijf {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* De rijen staan dicht op elkaar: het zijn drie groepen binnen één blok en
       geen drie losse secties. */
    margin-bottom: 1.1rem;
}

/* Onder de 1400px passen er geen vijf kolommen met leesbare labels; dan drie,
   en op een telefoon twee. Bewust geen één: twee getallen naast elkaar blijven
   ook op een klein scherm te scannen, en vijftien tegels onder elkaar is een
   lijst waar je doorheen moet scrollen. */
@media (max-width: 87.5rem) {
    .dash-tegels-vijf {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 50rem) {
    .dash-tegels-vijf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Een tegelwaarde die aandacht vraagt: een marge onder nul, een coach boven
   zijn capaciteit. Rood is hier betekenis en geen versiering — een nul bij
   "boven capaciteit" is goed nieuws en blijft gewoon zwart. */
.dash-tegel-waarde.is-negatief {
    color: var(--regiq-fout);
}

/* Het info-icoon staat ín het label en niet erachter op een eigen regel; met
   vijftien tegels zou dat vijftien halve regels wit opleveren. */
.dash-tegel-label .clrm-info {
    margin-left: 0.15rem;
    vertical-align: -0.1em;
}

/* De brede balk bovenaan. Geen dash-kaart-kop: die zet een h2-formaat neer, en
   dit is een label bij een balk en geen kaarttitel.

   De ruimte eronder is dezelfde als tussen de tegelrijen onderling: de balk
   hoort bij dat blok en niet als losse kaart ertegenaan te plakken. Zonder deze
   regel raakt hij de eerste rij, want .dash-kaart brengt zelf geen ondermarge
   mee. */
.clrm-teammeter {
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.1rem;
}

.clrm-teammeter-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.7rem;
}

.clrm-teammeter-label {
    /* Inline-flex, want er staat een info-icoon naast de tekst; zonder dit valt
       dat icoon op de basislijn en niet op het midden van de regel. */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--regiq-tekst-zacht);
}

/* Het antwoord op de enige vraag die je vanaf de gang wilt kunnen stellen.
   Groen zolang er ruimte is; vol is geen storing maar wel iets anders, dus
   dan de gewone tekstkleur en niet rood — een volle agenda is een uitkomst. */
.clrm-teammeter-ruimte {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--regiq-goed);
}

.clrm-teammeter-ruimte.is-vol {
    color: var(--regiq-tekst);
}

/* De regel onder de balk: de cijfers waar de balk de verhouding van toont. Ze
   staan hier één keer, want de balk zelf draagt geen getal — twee keer
   hetzelfde getal laat je vergelijken of ze wel gelijk zijn. */
.clrm-teammeter-bij {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    color: var(--regiq-tekst-zacht);
}

/* De kale meter: alleen de baan, en dan mag hij wat forser. */
.clrm-teammeter .meter.is-kaal .meter-baan {
    height: 10px;
}

/* Groen zolang er ruimte is.
 *
 * Deze klasse en is-bijna-vol/is-vol sluiten elkaar uit: onderdelen/meter.blade.php
 * zet de kleur alleen als de vulgraad nog geen eigen klasse opleverde. Dat is
 * met opzet in de Blade geregeld en niet met specificiteit — een balk die vol
 * zit hoort rood te zijn, ongeacht welke basiskleur er gevraagd werd, en dat
 * moet niet afhangen van de volgorde in dit bestand. */
.meter.is-groen {
    --meter-kleur: var(--regiq-goed);
}

/* ==========================================================================
   Balkenlijst (.balken-*)
   ==========================================================================
   "Wie scoort wat": één regel per persoon of categorie, met het label links, de
   balk in het midden en de waarde rechts.

   De derde gedeelde bouwsteen naast .meter-* en .staafgrafiek-*. Horizontaal en
   niet verticaal, en dat is de hele reden dat hij bestaat: een staafgrafiek zet
   zijn labels ónder de staven, en daar past "Willemien de Vries" niet. Bij tien
   coaches wordt dat een rij gekantelde namen of een rij afkortingen; op een
   regel is er ruimte voor de naam én het getal.

   De maat komt uit .verbruik-deel-0 t/m -100, dezelfde stapklassen als de
   meters en de staafgrafiek.
*/

/*
 * De kolommaten staan in variabelen omdat drie dingen ze moeten delen: de
 * rijen, het raster erachter en de as eronder. Met de maten los in elke regel
 * zou een aanpassing aan de labelkolom de gridlines laten verschuiven zonder
 * dat iemand het merkt — en dan staat een balk van 90% net niet op de lijn van
 * 90%.
 *
 * Vaste kolommen en geen minmax: het raster wordt met calc() uitgelijnd, en dat
 * kan alleen als de kolom niet kan krimpen.
 */
.balken {
    --balken-label: 8.5rem;
    --balken-waarde: 4rem;
    --balken-gap: 0.75rem;
}

/* Met een aandeel achter het aantal past er geen twee getallen in vier rem. De
   ruimte gaat van de baan af en niet van het label: een afgekapte naam is erger
   dan een balk die een centimeter korter is. */
.balken.heeft-bij {
    --balken-waarde: 6.4rem;
}

.balken-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0 0 0.9rem;
    font-size: 0.75rem;
    color: var(--regiq-tekst-zacht);
}

/* Het kleurstipje vóór een reekslabel: dezelfde kleur als de balk waar het bij
   hoort, zodat de legenda geen tweede afspraak wordt die kan verlopen. */
.balken-legenda-item::before {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.35rem;
    border-radius: 2px;
    background: var(--balken-kleur, var(--regiq-paars));
}

.balken-lijst {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Label, baan, waarde. De baan pakt wat er overblijft; het label krijgt een
   vaste maximumbreedte zodat de banen van alle regels op dezelfde x beginnen —
   anders is de lengte van een naam bepalend voor hoe lang een balk lijkt. */
.balken-rij {
    display: grid;
    grid-template-columns: var(--balken-label) minmax(0, 1fr) var(--balken-waarde);
    align-items: center;
    gap: var(--balken-gap);
}

.balken-label {
    font-size: 0.8rem;
    color: var(--regiq-tekst-zacht);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.balken-waarde {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--regiq-tekst);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* De baan draagt één spoor per reeks, onder elkaar. */
.balken-baan {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.balken-spoor {
    display: flex;
    align-items: center;
    height: 9px;
    background: var(--regiq-achtergrond);
    border-radius: 999px;
    overflow: hidden;
}

.balken-vlak {
    height: 100%;
    width: var(--verbruik-deel, 0%);
    border-radius: 999px;
    background: var(--balken-kleur, var(--regiq-paars));
}

/* Twee reeksen, twee kleuren. De tweede is de zachtere: bij "beschikbaar vs
   besteed" en "omzet vs kostprijs" is de eerste waar het om gaat en de tweede
   waar het tegen afgezet wordt. */
.balken-reeks-0 {
    --balken-kleur: var(--regiq-paars);
}

.balken-reeks-1 {
    --balken-kleur: var(--regiq-paars-licht);
}

/*
 * Met een nullijn: de baan valt in twee helften met de streep ertussen.
 *
 * De helften zijn even breed als hun bereik lang is — links van nul tot de
 * ondergrens van de as, rechts van nul tot de bovengrens. Daardoor hebben beide
 * kanten dezelfde eenheid per pixel, ook als de as ongelijk verdeeld is
 * (−150% tot +100%). Zonder as valt hij terug op twee gelijke helften; dan is
 * er geen leesbare positie om nul op te leggen.
 *
 * De lege helft blijft staan om de nullijn op zijn plek te houden, ook bij een
 * regel die maar één kant op gaat.
 */
.balken-nulpunt {
    /* De stapklasse op ditzelfde element zet --verbruik-deel; hier krijgt die
       een eigen naam, zodat de vlakken eronder hun eigen --verbruik-deel kunnen
       zetten zonder de nulpositie te overschrijven. */
    --balken-nul: var(--verbruik-deel, 50%);
}

.balken.heeft-nul .balken-spoor {
    background: none;
    gap: 0;
}

.balken.heeft-nul .balken-helft {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
    background: var(--regiq-achtergrond);
}

.balken.heeft-nul .balken-helft.is-links {
    flex: 0 0 var(--balken-nul);
}

.balken.heeft-nul .balken-helft.is-rechts {
    flex: 1 1 0;
}

.balken.heeft-nul .balken-helft.is-links {
    /* Naar links groeien, en de ronding aan de buitenkant. */
    justify-content: flex-end;
    border-radius: 999px 0 0 999px;
    border-right: 1px solid var(--regiq-rand);
}

.balken.heeft-nul .balken-helft.is-rechts {
    justify-content: flex-start;
    border-radius: 0 999px 999px 0;
}

/* Onder nul is rood: dat is geen lage winst maar verlies, en die twee horen
   niet op elkaar te lijken. */
.balken-vlak.is-negatief {
    --balken-kleur: var(--regiq-fout);
}

/*
 * Gestapeld: één balk die uiteenvalt in delen (.balken.is-gestapeld).
 *
 * De lengte is het totaal, de delen zijn de uitkomst. Voor "hoeveel ligt er bij
 * deze coach, en wat is ervan geworden" — zonder stapeling zou dat vier sporen
 * onder elkaar worden, en dan is een rij zo hoog als vier regels en moet je
 * optellen om te zien hoeveel er ligt.
 *
 * `flex: 0 0` en dus geen krimp: de breedtes komen uit de stapklassen en tellen
 * per constructie op tot de lengte van het totaal (cumulatief afgerond, zie
 * onderdelen/balken.blade.php). Zou de browser ze mogen indrukken, dan klopt
 * geen enkel deel meer met zijn getal.
 */
.balken.is-gestapeld .balken-vlak {
    flex: 0 0 var(--verbruik-deel, 0%);
    /* Vierkant, behalve aan de uiteinden van de stapel. Een ronding tussen twee
       delen leest als een inkeping en dus als twee losse balken; dezelfde valkuil
       als bij de gestapelde staafgrafiek, waar alleen de kop afgerond is. */
    border-radius: 0;
}

.balken.is-gestapeld .balken-vlak:first-child {
    border-start-start-radius: 999px;
    border-end-start-radius: 999px;
}

.balken.is-gestapeld .balken-vlak:last-child {
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
}

/*
 * Een kleurnaam per deel, uit dezelfde reeks --stand-* als de badges, de ring en
 * de staafgrafiek. Alleen waar de kleur de betekenis ís: dezelfde akkoordstand
 * hoort in een balk, een boog en een badge dezelfde kleur te hebben, anders
 * leest één stand als drie verschillende dingen.
 *
 * Vlakke kleuren en geen verlopen, net als daar — een verdeling leest op lengte
 * en kleur, en een schakering daarbovenop betekent niets.
 */
.balken-vlak.is-groen,
.balken-legenda-item.is-groen { --balken-kleur: var(--stand-groen); }

.balken-vlak.is-rood,
.balken-legenda-item.is-rood { --balken-kleur: var(--stand-rood); }

.balken-vlak.is-blauw,
.balken-legenda-item.is-blauw { --balken-kleur: var(--stand-blauw); }

.balken-vlak.is-oranje,
.balken-legenda-item.is-oranje { --balken-kleur: var(--stand-oranje); }

.balken-vlak.is-paars,
.balken-legenda-item.is-paars { --balken-kleur: var(--stand-paars); }

.balken-vlak.is-grijs,
.balken-legenda-item.is-grijs { --balken-kleur: var(--stand-grijs); }

/* "Niet ingevuld" krijgt een eigen lichtere tint en niet gewoon grijs: een
   keuzelijst kan zélf een grijze stand bevatten, en twee identieke vlakken in
   dezelfde balk zijn niet uit elkaar te houden. Minder inkt is precies wat "hier
   staat niets" betekent. */
.balken-vlak.is-leegwaarde,
.balken-legenda-item.is-leegwaarde { --balken-kleur: var(--stand-leegwaarde); }

/*
 * De legenda ónder de lijst, met het bijschrift rechts.
 *
 * Gestapeld hoort hij daar: de kleurvolgorde is af te lezen aan de balk zelf,
 * dus de legenda is een naslag achteraf en geen inleiding vooraf. Het bijschrift
 * zegt wat er in de waardekolom staat en hoort bij diezelfde voetnoot.
 */
.balken-legenda.is-onder {
    margin: 1rem 0 0;
    align-items: baseline;
}

.balken-legenda-bij {
    /* Naar rechts geduwd in plaats van space-between op de rij: met flex-wrap
       zou space-between de stipjes uit elkaar trekken zodra het bijschrift op een
       eigen regel valt. */
    margin-left: auto;
    color: var(--regiq-tekst-zacht);
}

/*
 * Een gekleurde tweede waarde: een uitkomst in plaats van een duiding.
 *
 * De tekstvariant van de kleur en niet de vlakvariant: die laatste is gekozen om
 * als vlak te lezen en haalt op wit geen leescontrast. Iets zwaarder dan een
 * gewoon aandeel, want dit is een uitkomst waar de rij op te sorteren zou zijn —
 * maar niet zwaarder dan het aantal ernaast, dat het onderwerp van de regel is.
 */
.balken-bij.is-groen {
    color: var(--stand-groen-tekst);
    font-weight: 600;
}

.balken-bij.is-oranje {
    color: var(--stand-oranje-tekst);
    font-weight: 600;
}

/* ==========================================================================
   Grafiekenraster (.grafiekenraster)
   ==========================================================================
   Grafiekkaarten twee aan twee naast elkaar. Twee en niet drie: een balkenlijst
   met namen erin heeft breedte nodig, en op een derde van het scherm blijft van
   "Willemien de Vries" alleen "Willemien…" over.

   Bewust neutraal genoemd en niet per module geprefixt, net als .meter, .balken,
   .ring en .staafgrafiek: het overzicht van de Caseloadrekenmodule zet er acht
   grafieken in, dat van Klikgesprekken vier, en twee rasters met dezelfde vorm
   naast elkaar lopen bij de eerste correctie uit elkaar.
*/

.grafiekenraster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    margin-bottom: 1.5rem;
}

/*
 * Ruimte tussen het raster en een losse kaart ernaast in de kolom.
 *
 * Een .dash-kaart draagt zelf geen marges — die zitten in `.dash-kaart +
 * .dash-kaart`, zodat er nooit een losse marge bovenaan een scherm staat. Zet
 * je zo'n kaart naast dit raster, dan kent geen van beide regels die buur en
 * plakken ze tegen elkaar. Dat gebeurde met het coachesoverzicht, en het is
 * geen kwestie van dit ene scherm: elke volgende kaart naast het raster loopt
 * er weer tegenaan.
 *
 * Beide richtingen, want beide komen voor. Ze collapsen met de margin-bottom
 * van het raster tot dezelfde 1,5rem die overal op dit scherm tussen twee
 * blokken staat — dus geen dubbel gat.
 */
.dash-kaart + .grafiekenraster,
.grafiekenraster + .dash-kaart {
    margin-top: 1.5rem;
}

.grafiekenraster > .dash-kaart {
    margin: 0;
}

.grafiekenraster h2 {
    margin-bottom: 1.1rem;
}

/*
 * Onder de 80rem past er geen tweede kolom meer naast een grafiek met namen.
 *
 * Dit stond op 62rem, gekozen op de balkenlijsten: die hebben hun labels links
 * en krimpen netjes mee. Een gepagineerde staafgrafiek kan dat niet — zes
 * kolommen houden elk hun ondergrens van --staafgrafiek-kolom, en samen met de
 * y-as is dat 25,6rem (410px) die niet verder in te drukken is zonder de namen
 * midden in een woord af te kappen.
 *
 * Doorgerekend op de schil (zijbalk 16rem, wrap-padding 5rem, gap 1,1rem,
 * kaartpadding 3rem) houdt een kaart in twee kolommen (V − 353,6px) ÷ 2 − 48px
 * over. Die 410px haalt hij pas vanaf 1269px viewport; daaronder blijft er een
 * scrollbalk staan en zie je een deel van je eigen cijfers niet. 80rem is
 * 1280px en laat er 415px over — vijf pixel marge, en dat is precies genoeg.
 *
 * Let op hoe krap dat is: 79rem leek een logische keuze en gaf 407px, drie
 * pixel te weinig. Dat soort verschil zie je met het oog niet en herleid je
 * achteraf niet; GrafiekbreedteTest rekent het daarom na.
 *
 * De prijs staat er eerlijk bij: tussen 992 en 1264px staan álle grafiekkaarten
 * onder elkaar in plaats van in paren naast elkaar, ook de ringen en de
 * balkenlijsten die het niet nodig hebben. De paren blijven wel op volgorde,
 * dus de leesvolgorde van het scherm verandert niet — hij wordt alleen langer.
 */
@media (max-width: 80rem) {
    .grafiekenraster {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* De balkenlijsten houden hun eigen breekpunt: hun labelkolom is een vaste maat
   die pas op een echt smal scherm in de weg zit, en eerder laten krimpen zou een
   naam afkappen op een scherm waar hij gewoon past. */
@media (max-width: 62rem) {
    /* Op een smal scherm is er geen ruimte meer voor een vaste labelkolom; dan
       mag de naam krimpen tot wat er past. */
    /* Alleen de variabelen aanpassen: het raster en de as rekenen ermee, dus
       met een eigen grid-template hier zouden de gridlines op een smal scherm
       naast hun balken komen te staan. */
    .balken {
        --balken-label: 6rem;
        --balken-waarde: 3.4rem;
        --balken-gap: 0.5rem;
    }

    .balken.heeft-bij {
        --balken-waarde: 5.4rem;
    }
}

/* ---------------------------------------------------------------------------
   Bladeren binnen een balkenlijst (.balken-bladeren)
   ---------------------------------------------------------------------------
   Twintig plaatsen onder elkaar maken van een kaart een tabel; vijf tegelijk met
   knoppen eronder houdt hem leesbaar zonder iets weg te laten.

   De knoppen staan rechts en klein: het is navigatie binnen een kaart en geen
   handeling. Een uitgeschakelde knop blijft staan in plaats van te verdwijnen —
   anders verspringt de balk zodra je op de eerste of laatste pagina komt.
*/

.balken-bladeren {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/*
 * De dubbele selector is bewust, en dezelfde reden als bij .dash-actie en
 * .dash-tegel: `.wrap button` zet een paarse knop met witte tekst neer en heeft
 * met zijn elementdeel een hogere specificiteit dan een losse klasse. Zonder
 * `button` ervoor wordt dit pijltje een paars blok — dat is precies wat er
 * gebeurde.
 */
.wrap button.balken-blad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid var(--regiq-rand);
    border-radius: 8px;
    background: var(--regiq-kaart);
    color: var(--regiq-tekst-zacht);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.balken-blad svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wrap button.balken-blad:hover:not(:disabled),
.wrap button.balken-blad:focus-visible:not(:disabled) {
    border-color: var(--regiq-paars);
    color: var(--regiq-paars);
}

/* Zichtbaar uitgeschakeld en niet weg: een balk die van breedte verandert zodra
   je aan het begin of het eind komt, laat je zoeken naar wat er verdween. */
.wrap button.balken-blad:disabled {
    opacity: 0.4;
    cursor: default;
    background: var(--regiq-kaart);
}

.balken-bladstand {
    color: var(--regiq-tekst-zacht);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Ruimte tussen twee groepen als ze allemaal zichtbaar zijn — dat is de stand
   zonder JavaScript. Met JavaScript staat er altijd maar één groep, en dan doet
   deze regel niets. */
.balken-lijst + .balken-lijst {
    margin-top: 0.55rem;
}

/*
 * Het aandeel achter het aantal.
 *
 * Zachter en kleiner: het aantal is het getal waar de rij om draait, het aandeel
 * is de duiding erbij. Een eigen kolom zou de labelkolom smaller maken voor een
 * getal dat niemand naast elkaar legt.
 */
.balken-bij {
    margin-left: 0.4rem;
    color: var(--regiq-tekst-zacht);
    font-size: 0.75rem;
    font-weight: 500;
}

/*
 * De as en het raster bij een balkenlijst (.balken.heeft-as).
 *
 * Alle drie de lagen — de balken, de gridlines en de as — rekenen met dezelfde
 * kolommaten en dezelfde schaal (App\Support\Asschaal), dus een balk van 90%
 * eindigt precies op de gridline van 90%.
 */
.balken-veld {
    position: relative;
}

/* Het raster ligt achter de balken, over precies de baankolom: links voorbij het
   label en de tussenruimte, rechts vóór de waardekolom. */
.balken-raster {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--balken-label) + var(--balken-gap));
    right: calc(var(--balken-waarde) + var(--balken-gap));
    pointer-events: none;
}

.balken-gridlijn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--verbruik-deel, 0%);
    border-left: 1px solid var(--regiq-rand-zacht);
}

/*
 * Een drempel: een gestippelde streep op een norm.
 *
 * Gestippeld en niet doorgetrokken, want het is geen gemeten waarde maar een
 * afspraak — dat onderscheid hoort te zien te zijn zonder de legenda te lezen.
 */
.balken-drempel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--verbruik-deel, 0%);
    border-left: 2px dashed var(--balken-drempel-kleur, var(--regiq-tekst-zacht));
}

.balken-drempel.is-waarschuwing,
.balken-drempellabel.is-waarschuwing {
    --balken-drempel-kleur: #e2561f;
}

.balken-drempel.is-fout,
.balken-drempellabel.is-fout {
    --balken-drempel-kleur: var(--regiq-fout);
}

/* De labels boven het veld, elk op de plek van zijn streep. Absoluut binnen een
   strook die dezelfde inspringing heeft als het raster. */
.balken-drempellabels {
    position: relative;
    height: 1.1rem;
    margin-left: calc(var(--balken-label) + var(--balken-gap));
    margin-right: calc(var(--balken-waarde) + var(--balken-gap));
    margin-bottom: 0.2rem;
}

.balken-drempellabel {
    position: absolute;
    left: var(--verbruik-deel, 0%);
    /* Gecentreerd op de streep in plaats van ernaast: een label dat rechts van
       zijn lijn hangt, lijkt bij de volgende te horen. */
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--balken-drempel-kleur, var(--regiq-tekst-zacht));
    white-space: nowrap;
}

/* De as onder het veld: dezelfde inspringing, elk getal op zijn gridline. */
.balken-as {
    position: relative;
    height: 1.1rem;
    margin-top: 0.45rem;
    margin-left: calc(var(--balken-label) + var(--balken-gap));
    margin-right: calc(var(--balken-waarde) + var(--balken-gap));
}

.balken-astick {
    position: absolute;
    left: var(--verbruik-deel, 0%);
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--regiq-tekst-zacht);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Met een as staan de banen dichter op elkaar: de gridlines doen het scheiden,
   en dan wordt een ruime tussenruimte een gat. */
.balken.heeft-as .balken-lijst {
    gap: 0.4rem;
}

/* De baan zelf krijgt geen achtergrond meer: het raster erachter is de
   referentie, en een grijze baan eroverheen zou de gridlines verbergen. */
.balken.heeft-as .balken-spoor {
    background: none;
    border-radius: 0;
}

.balken.heeft-as .balken-vlak {
    border-radius: 0 3px 3px 0;
}

/*
 * Groen boven nul, rood eronder (.balken.is-tekenkleur).
 *
 * Alleen waar het teken de betekenis is — een marge. Bij uren of aantallen zou
 * groen suggereren dat meer beter is, en bij een bezetting is dat nu juist niet
 * zo: daar is honderd procent geen prestatie maar een grens.
 */
.balken.is-tekenkleur .balken-vlak {
    --balken-kleur: var(--regiq-goed);
}

.balken.is-tekenkleur .balken-vlak.is-negatief {
    --balken-kleur: var(--regiq-fout);
}

/* Met een as loopt de balk tot tegen de nullijn; de ronding zit aan de
   buitenkant, dus links andersom dan rechts. */
.balken.heeft-as.heeft-nul .balken-vlak {
    border-radius: 0 3px 3px 0;
}

.balken.heeft-as.heeft-nul .balken-vlak.is-negatief {
    border-radius: 3px 0 0 3px;
}

/* De helften zelf krijgen met een as geen eigen achtergrond meer: het raster
   erachter is de referentie. */
.balken.heeft-as.heeft-nul .balken-helft {
    background: none;
    border-radius: 0;
}

.balken.heeft-as.heeft-nul .balken-helft.is-links {
    border-right: 0;
}

/* Een normlijn die geen waarschuwing is: de gewenste marge. Groen en gestippeld
   — hij zegt "hier wil je boven zitten", niet "hier gaat iets mis". */
.balken-drempel.is-norm,
.balken-drempellabel.is-norm {
    --balken-drempel-kleur: var(--regiq-goed);
}

/* ==========================================================================
   Ringdiagram (.ring-*)
   ==========================================================================
   "Waar bestaat dit geheel uit": de vierde gedeelde bouwsteen naast .meter-*,
   .staafgrafiek-* en .balken-*.

   Een ring en geen taart: met een gat in het midden hebben alle segmenten
   dezelfde dikte, en dan lees je ze op booglengte in plaats van op oppervlak —
   dat laatste schat vrijwel niemand goed. Het midden blijft leeg; het totaal
   staat op elk scherm dat deze bouwsteen gebruikt al als tegel, en twee keer
   hetzelfde getal laat je vergelijken of ze wel gelijk zijn.

   ─── Het palet is gemeten, niet gekozen ───────────────────────────────────

   Zes kleuren plus grijs voor de restcategorie. Ze zijn geselecteerd met de
   rekenregels uit de dataviz-methode en niet op het oog: elk paar houdt onder
   gesimuleerde protanopie en deuteranopie genoeg afstand in OKLab (ΔE ≥ 6, de
   meeste ruim boven 8), en voor normaal zicht ligt élk paar boven de 15. Dat is
   ook de reden dat het er zes zijn en geen twaalf: bij méér kleuren zakt er
   gegarandeerd een paar onder die grens, en dan staan er twee segmenten die
   alleen in naam verschillen.

   Rood en groen uit de statuskleuren doen bewust niet mee. Op dit platform
   betekent rood "hier gaat iets mis" (zie .clrm-tegel.is-negatief en de
   drempellijnen); als rood ook gewoon "trajecttype nummer drie" kan betekenen,
   is die afspraak weg. Het groen hieronder is olijfgroen en niet --regiq-goed,
   om precies dezelfde reden.

   Wie meer segmenten aanlevert dan er kleuren zijn, krijgt vanaf de achtste het
   grijs van de restcategorie te zien — zichtbaar mis, en dat is de bedoeling.
   De aanroeper voegt zelf samen; zie App\Clrm\Trajectmix.
*/

.ring {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
}

/* De figuur krijgt een vaste bovengrens en krimpt daaronder mee: naast een
   legenda van zeven regels heeft een ring van meer dan een handbreed geen extra
   leesbaarheid, alleen meer wit eromheen. */
.ring-figuur {
    flex: 0 1 11rem;
    width: 11rem;
    max-width: 100%;
    height: auto;
}

/*
 * De schil om de figuur, zodat het hart erin gepositioneerd kan worden.
 *
 * Zonder midden verandert er niets: de schil neemt de maten van de figuur over
 * en gedraagt zich als het flexkind dat de svg eerst zelf was.
 */
.ring-figuurschil {
    position: relative;
    flex: 0 1 11rem;
    width: 11rem;
    max-width: 100%;
}

.ring-figuurschil .ring-figuur {
    display: block;
    flex: none;
    width: 100%;
}

/*
 * Het getal in het hart van de ring.
 *
 * Geen vlak eronder: door het gat is de kaart al wit, dus een witte cirkel zou
 * een rand toevoegen waar er geen is. Hier heeft een glaseffect gestaan — half
 * doorzichtig met een blur over een gekleurde gloed — en dat is er op verzoek
 * uit: het trok aandacht naar de vorm in plaats van naar het getal.
 *
 * Buiten de SVG en niet erin: tekst in een viewBox schaalt mee met de figuur, en
 * dan is de lettergrootte een functie van de kaartbreedte in plaats van van de
 * typografie.
 */
.ring-midden {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    width: 58%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ring-midden-waarde {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    color: var(--regiq-tekst);
    /* Cijfers van gelijke breedte: zonder dit verspringt het midden van "9,1%"
       naar "53,2%" alsof de ring beweegt. */
    font-variant-numeric: tabular-nums;
}

/* De naam van de stand waar dat percentage over gaat. Klein en in kapitalen: het
   is een bijschrift bij een getal en geen tweede getal. */
.ring-midden-label {
    max-width: 90%;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--regiq-tekst-zacht);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ring-baan {
    fill: none;
    stroke: var(--regiq-achtergrond);
    stroke-width: 5;
}

/* De segmenten zelf. `stroke-dasharray` en `stroke-dashoffset` staan in de HTML
   omdat ze de vórm dragen — net als `d` bij een icoon; kleur en dikte staan
   hier, zoals alle vormgeving. */
.ring-vlak {
    fill: none;
    stroke: var(--ring-kleur, #64748b);
    stroke-width: 5;
}

.ring-legenda {
    flex: 1 1 12rem;
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

/* Stip, naam, getal. De naam krimpt, het getal niet: een aantal dat afkapt is
   erger dan een naam die afkapt, want de naam staat ook in de tooltip. */
.ring-legenda-rij {
    display: grid;
    grid-template-columns: 0.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--regiq-tekst-zacht);
}

.ring-stip {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 2px;
    background: var(--ring-kleur, #64748b);
}

.ring-naam {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ring-getal {
    font-weight: 600;
    color: var(--regiq-tekst);
    font-variant-numeric: tabular-nums;
}

/* Het palet. Eén variabele per slot, zodat de stip in de legenda en het segment
   in de ring dezelfde kleur uit dezelfde regel halen — anders wordt de legenda
   een tweede afspraak die kan verlopen. */
.ring-kleur-0 {
    --ring-kleur: var(--regiq-paars);
}

.ring-kleur-1 {
    --ring-kleur: #3b82f6;
}

.ring-kleur-2 {
    --ring-kleur: #06b6d4;
}

.ring-kleur-3 {
    --ring-kleur: #65a30d;
}

.ring-kleur-4 {
    --ring-kleur: #a16207;
}

.ring-kleur-5 {
    --ring-kleur: #db2777;
}

/* De restcategorie. Grijs, want "Overig" is geen type maar een verzamelbak, en
   een eigen kleur zou hem als categorie laten meelezen. */
.ring-kleur-6 {
    --ring-kleur: #64748b;
}

/*
 * Ringsegmenten met een betekenis in plaats van een plek in de reeks.
 *
 * Voor een verdeling waarin de kleur de betekenis ís — een akkoordstand is
 * groen of rood — en die stand elders op het platform al een badge in precies
 * die kleur draagt. Dezelfde kleur op twee schermen, anders gaat een lezer
 * zoeken naar een verschil dat er niet is.
 *
 * De waarden komen letterlijk uit .dash-badge-* hierboven: dezelfde namen als
 * App\Kgm\Keuzekleur, dezelfde tekstkleur. Wijzig je er daar een, wijzig hem
 * dan hier ook — het zijn er zes en ze horen bij elkaar.
 *
 * Spaarzaam gebruiken. Voor een gewone categorieënverdeling blijft het gemeten
 * palet hierboven gelden: gaat rood ook "categorie nummer drie" betekenen, dan
 * is de afspraak dat rood aandacht vraagt weg.
 */
.ring-kleur-groen {
    --ring-kleur: var(--stand-groen);
}

.ring-kleur-rood {
    --ring-kleur: var(--stand-rood);
}

.ring-kleur-blauw {
    --ring-kleur: var(--stand-blauw);
}

.ring-kleur-oranje {
    --ring-kleur: var(--stand-oranje);
}

.ring-kleur-paars {
    --ring-kleur: var(--stand-paars);
}

.ring-kleur-grijs {
    --ring-kleur: var(--stand-grijs);
}

/*
 * "Niet ingevuld": de afwezigheid van een waarde, en geen categorie.
 *
 * Heet `leegwaarde` en niet `leeg`, want dat laatste betekent in de staafgrafiek
 * al iets anders: daar is `.is-leeg` een staaf van nul. Eén naam voor één ding,
 * over alle bouwstenen heen — anders krijgt een segment de klasse van de ene en
 * de kleur van de andere, en valt het stilzwijgend terug op grijs.
 *
 * Lichter dan .ring-kleur-grijs en niet gelijk eraan, want een keuzelijst kan
 * zelf een grijze stand bevatten — bij Akkoord is "N.N.B" er precies één, en
 * twee identieke bogen in dezelfde ring zijn niet uit elkaar te houden. Het
 * verschil zit in lichtheid en niet in kleurtoon: dat blijft ook onder
 * kleurenblindheid het duidelijkst, en minder inkt is precies wat "hier staat
 * niets" betekent.
 */
.ring-kleur-leegwaarde {
    --ring-kleur: var(--stand-leegwaarde);
}

/* Naast elkaar past het niet meer onder deze breedte; dan gaat de legenda onder
   de ring en houden beide de volle breedte. */
@media (max-width: 30rem) {
    .ring {
        justify-content: center;
    }

    .ring-legenda {
        flex-basis: 100%;
    }
}

/*
 * Het coachesoverzicht op /caseloads/overzicht (.clrm-coaches).
 *
 * Elf kolommen over de volle breedte: één regel per coach, met dezelfde
 * getallen waar de tegels erboven de som van zijn. Er staat bewust geen
 * totaalregel onder — die staat al als tegel, en twee keer hetzelfde getal op
 * één pagina laat je vergelijken of ze wel gelijk zijn.
 *
 * Geen eigen kolombreedtes: .tabel-heel houdt de getalcellen heel en de
 * browser verdeelt de rest naar verhouding van de inhoud. Zie de conventie bij
 * .schil-tabel — een tabel hoort te krimpen en pas op een telefoon te schuiven.
 */
.clrm-coaches {
    width: 100%;
    border-collapse: collapse;
}

/* Getallen rechts, zodat de duizendtallen onder elkaar staan; de naam en de
   status blijven links. Tabulaire cijfers, anders springt een kolom bij elke
   andere breedte van een 1. */
.clrm-coaches td:not(:first-child):not(:last-child),
.clrm-coaches th:not(:first-child):not(:last-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Rood is betekenis: alleen waar een bedrag onder nul staat. Een lage bezetting
   of veel vrije uren is geen storing maar ruimte. */
.clrm-coaches td.is-negatief {
    color: var(--regiq-fout);
}

/*
 * De totaalregel: een lichtgrijs vlak onder de kolommen die het optelt.
 *
 * De streep erboven en het gewicht komen van .wrap tfoot — die gelden voor elke
 * totaalregel in de applicatie en horen niet per tabel opnieuw gezet te worden.
 * Wat hier bij komt is het vlak, en dat doet iets wat een streep alleen niet
 * kan: bij elf kolommen loopt het oog van links naar rechts over de regel, en
 * een doorlopend vlak houdt hem bij elkaar tot aan de laatste cel.
 *
 * Dezelfde grijstint en dezelfde ronding als de kolomkoppen erboven (zie
 * .dash-kaart thead th). Zo staat de tabel tussen twee vlakken van dezelfde
 * kleur — kop en som — en is er geen kleur bijgekomen op dit scherm.
 *
 * De regel licht niet op onder de muis: .wrap tbody tr:hover raakt alleen de
 * tbody, en dat is precies goed — aan een uitkomst valt niets aan te wijzen.
 */
.clrm-coaches-totaal th,
.clrm-coaches-totaal td {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    background: var(--regiq-achtergrond);
    color: var(--regiq-tekst);
}

.clrm-coaches-totaal th:first-child { border-radius: 8px 0 0 8px; }

.clrm-coaches-totaal td:last-child { border-radius: 0 8px 8px 0; }

/*
 * Kerngetallen: de vier bedrijfsbrede waarden, elk met een vinkje.
 *
 * Twee kolommen, net als de parameterblokken op het detailscherm van een
 * caseload. Vier velden op één regel zou de labels afkappen — "Werkgeverslasten
 * factor toepassen" is geen kop maar een zin.
 */
.clrm-kerngetallen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 1.75rem;
    margin-top: 1rem;
}

/* De kop "Centrale waarden" volgt direct op de kaartkop sinds de uitleg naar de
   tooltip is verhuisd; zonder deze ruimte plakt hij tegen de titel aan. */
.dash-kaart-kop + .clrm-parameterkop {
    margin-top: 0.6rem;
}

.clrm-kerngetal {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* Het vinkje en zijn label horen bij elkaar en zijn samen aanklikbaar: op een
   los vakje van 13 pixels mikken is precies het soort precisie dat een formulier
   niet hoort te vragen. */
.clrm-kerngetal-keuze {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--regiq-tekst);
    cursor: pointer;
}

.clrm-kerngetal-keuze input {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    accent-color: var(--regiq-paars);
    cursor: pointer;
}

/* De hulpregel onder het veld staat dichter tegen zijn invoer aan dan tegen het
   volgende veld: zo hoort hij zichtbaar bij het veld erboven en niet bij het
   vinkje eronder. */
.clrm-kerngetal .sub {
    margin: 0;
}


/* Onder de 48rem past een tweede kolom niet meer: dan wordt het label van een
   veld smaller dan de zin die erin staat. */
@media (max-width: 48rem) {
    .clrm-kerngetallen {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ==========================================================================
   De akkoordverdeling op /klikgesprekken/overzicht (.kgm-akkoord-*)
   ==========================================================================
   Eén ring met het percentage in het hart, de standen ernaast als regels met een
   balk, en een zin die het duidt.

   De kaart is een gewone witte kaart. Hier hebben twee zachte gekleurde gloeden
   gestaan om een glaseffect te dragen; die zijn er op verzoek uit. Wat overblijft
   is rustiger en leest beter: de kleur zit in de ring en de balken, waar hij iets
   betekent.
*/

.kgm-akkoord {
    position: relative;
    /*
     * Deze kaart voegt zich naar zijn eigen breedte en niet naar die van het
     * scherm.
     *
     * Hij staat naast "Per traject" in een raster van twee kolommen, dus op een
     * breedbeeld is hij ~42rem en op een middelgroot scherm nog maar 30 — terwijl
     * de viewport in beide gevallen "breed" is. Een media query kijkt naar het
     * verkeerde: die zou de regels op een smalle kolom in vijf kolommen laten
     * staan tot de balk een streepje is.
     *
     * Vandaar een container. Waar `@container` niet werkt blijft de vijfkoloms
     * vorm staan — leesbaar, alleen met een krappere balk.
     */
    container: kgm-akkoord / inline-size;
}

/* Ring links, regels rechts. De regels krijgen de ruimte: daar staan de namen en
   de getallen, en de ring is de samenvatting ervan. */
.kgm-akkoord-inhoud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2.25rem;
}

.kgm-akkoord-ring {
    flex: 0 0 auto;
}

/* Zonder legenda naast de figuur mag de ring zijn eigen flexverdeling loslaten:
   hij is hier één figuur en geen figuur-met-lijst. */
.kgm-akkoord-ring .ring {
    display: block;
}

.kgm-akkoord-regels {
    /* De basis staat verderop apart, bij de uitleg over de wrap. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Eén regel: stip, naam, balk, aantal, aandeel.
 *
 * Vaste kolommen en geen flex-verdeling, want de getallen rechts moeten onder
 * elkaar uitlijnen — met `flex: 1` per cel schuift de kolom Aantal op zodra één
 * naam langer is, en dan lees je drie getallen die niet op één lijn staan.
 */
.kgm-akkoord-regel {
    display: grid;
    grid-template-columns: auto minmax(3.5rem, max-content) 1fr auto auto;
    align-items: center;
    gap: 0 0.75rem;
}

.kgm-akkoord-stip {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    /* Dezelfde variabele als de ringsegmenten: één afspraak voor de kleur van een
       stand, zodat de stip en zijn boog niet uit elkaar kunnen lopen. */
    background: var(--ring-kleur, #64748b);
}

.kgm-akkoord-naam {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--regiq-tekst);
    white-space: nowrap;
}

/* De baan waarin de balk groeit: dezelfde lichte tint als elke andere lege baan
   op dit platform, zodat een balk van 15% niet als een storing leest. */
.kgm-akkoord-baan {
    position: relative;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--regiq-achtergrond);
    overflow: hidden;
}

.kgm-akkoord-vulling {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--verbruik-deel, 0%);
    border-radius: 999px;
    /* Dezelfde variabele als de ringboog en de stip ernaast: één afspraak voor de
       kleur van een stand. */
    background: var(--ring-kleur, #94a0ac);
}

/* Een stand die nul is houdt een streepje, zoals elke andere balk op dit
   platform: een lege baan leest als een ontbrekend gegeven. */
.kgm-akkoord-vulling.verbruik-deel-0 {
    width: 3px;
    opacity: 0.55;
}

.kgm-akkoord-aantal {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--regiq-tekst);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.kgm-akkoord-aandeel {
    min-width: 3.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--regiq-tekst-zacht);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/*
 * De duiding onderaan.
 *
 * Eén zin die zegt wat het percentage betekent — zie App\Kgm\Akkoordduiding voor
 * waarom die zin daar staat en niet hier. Het vlak scheidt hem van de cijfers
 * erboven: het is een gevolgtrekking en geen vierde regel in de lijst.
 */
.kgm-akkoord-duiding {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.4rem 0 0;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: var(--regiq-achtergrond);
    color: var(--regiq-tekst);
    font-size: 0.85rem;
    font-weight: 500;
}

.kgm-akkoord-duiding svg {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--regiq-tekst-zacht);
}

/* Alleen aan de uiteinden kleurt het icoon mee. In het midden blijft het
   neutraal: of de helft goed of slecht is hangt af van het werk erachter, en dat
   weet dit scherm niet. Zie Akkoordduiding::kleur(). */
.kgm-akkoord-duiding.is-groen svg { color: var(--stand-groen-tekst); }
.kgm-akkoord-duiding.is-rood svg { color: var(--stand-rood-tekst); }

/*
 * Onder de 26rem kaartbreedte past de balk niet meer naast een naam en twee
 * getallen; dan valt hij over de volle breedte onder zijn eigen regel.
 *
 * Op de kaart en niet op het scherm: zie de container hierboven. Bij een
 * beeldscherm dat het raster al tot één kolom heeft teruggebracht is de kaart
 * juist weer breed, en dan hoort deze vorm er niet te zijn.
 */
@container kgm-akkoord (max-width: 26rem) {
    .kgm-akkoord-regel {
        grid-template-columns: auto 1fr auto auto;
        gap: 0.35rem 0.6rem;
    }

    .kgm-akkoord-baan {
        grid-column: 1 / -1;
    }
}

/*
 * In een smalle kolom zakt de lijst onder de ring.
 *
 * Dat regelt de flex-wrap hieronder zelf — de regels vragen 17rem, en zodra die
 * naast de ring niet meer passen breken ze af. 17rem en niet 20: op een halve
 * kolom van een gewoon beeldscherm blijven ze dan nét naast de ring staan, en
 * dat is de vorm waarin de verhouding het beste leest.
 */
.kgm-akkoord-regels {
    flex-basis: 17rem;
}

/* Onder de 30rem kaartbreedte krimpt de ring mee: naast een lijst die de volle
   breedte nodig heeft is 11rem figuur te veel, en eronder oogt hij verloren. */
@container kgm-akkoord (max-width: 30rem) {
    .kgm-akkoord-ring .ring-figuurschil {
        width: 8.5rem;
    }
}

/* ==========================================================================
   Klikgesprekken (.kgm-*)
   ==========================================================================
   De module Klikgesprekken: aanmeldingen voor een klikgesprek. Vrijwel alles op
   die schermen komt uit bestaande bouwstenen — .dash-kaart, .dash-filters,
   .dash-gegeven, .schil-tabel — en dat is de bedoeling: een nieuwe module hoort
   er niet anders uit te zien dan de rest. Wat hier staat is alleen wat er nog
   niet was.
   ========================================================================== */

/* Het sterretje achter een verplicht veldlabel. Rood en niet paars: paars is in
   deze applicatie de kleur van iets dat je kunt aanklikken. */
.kgm-verplicht {
    color: var(--regiq-fout);
    font-weight: 700;
}

/*
 * De hulpregel onder een veld. Zelfde afweging als bij .clrm-kerngetal .sub:
 * hij staat dichter tegen zijn eigen invoer aan dan tegen het volgende veld,
 * zodat te zien is waar hij bij hoort.
 */
.kgm-veldhulp {
    margin: 0.35rem 0 0;
    line-height: 1.4;
}

/* Een hulpregel die ergens op wijst in plaats van iets uitlegt — nu: de coach
   staat niet meer in de huidige lijst. Dezelfde oranje als elders voor "let
   op"; er komt geen kleur bij. */
.kgm-let-op {
    color: var(--stand-oranje-tekst);
}

/*
 * Het statusveld: vrije tekst van een gebruiker.
 *
 * pre-wrap houdt de regelafbrekingen die iemand intypte, zonder dat er nl2br
 * met onveilige HTML aan te pas komt — Blade escapet, en dat blijft zo.
 */
.kgm-status {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.6;
}

/* Een formulierrij met één veld dat de volle breedte krijgt: het statusveld is
   een textarea en wordt met een kolom van een derde onleesbaar smal. */
.kgm-rij-breed {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Een veld dat níet de volle breedte hoort te nemen: de datum van de aanmelding.
 *
 * Een enkel veld in een .dash-formulierrij krijgt `grid-column: 1 / -1` — dat is
 * daar de goede regel, want zo blijft er nooit een half leeg gat onderaan een
 * sectie staan. In de kaart *Aanmelding* staat dat ene veld echter alleen, en
 * een datumkiezer die de hele kaart beslaat leest als een vergissing: de
 * invulruimte belooft veel meer dan er in past.
 *
 * De maat staat op het veld én op de invoer erbinnen, en dat zijn twee
 * verschillende dingen: de kolom houdt label, invoer en hulpregel bij elkaar in
 * één blok (een hulpregel die over 80rem doorloopt hoort bij niets meer), de
 * invoer zelf blijft daarbinnen op de maat van een datum.
 */
.kgm-veld-smal {
    max-width: 20rem;
}

.kgm-veld-smal input,
.kgm-veld-smal select {
    max-width: 13rem;
}

/*
 * De actiebalk onder een formulier dat uit meerdere kaarten bestaat.
 *
 * De knoppen horen niet in de laatste veldkaart: die staat naast een andere, en
 * dan hangt de balk scheef onder één van de twee kolommen. Een eigen kaart over
 * de volle breedte sluit het formulier af op de plek waar hij verwacht wordt.
 *
 * De streep en de ruimte erboven die .dash-filteracties zelf meebrengt, vervallen
 * hier: die scheiden de knoppen van de velden erboven, en in een kaart waar
 * verder niets in staat is dat een lijn zonder iets om te scheiden.
 */
.kgm-formuliervoet .dash-filteracties {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Het volgnummer in het beheerscherm. Een getal van hooguit vier cijfers heeft
   geen halve tabelbreedte nodig; zonder deze maat duwt het de naamkolom weg. */
.kgm-volgorde {
    width: 5.5rem;
}

/*
 * De filterrijen: vier keuzelijsten boven, plaats en zoeken eronder.
 *
 * Vaste kolomaantallen en niet de auto-fit van .dash-filterrij. Met auto-fit
 * bepaalt de schermbreedte waar de rij breekt, en dan staat Traject de ene keer
 * naast Akkoord en de andere keer onder Plaats — een filterbalk die per scherm
 * anders is ingedeeld, laat je elke keer opnieuw zoeken.
 */
/*
 * Het overzicht (/klikgesprekken/overzicht)
 * -----------------------------------------
 * Het jaar en, als het afwijkt, het bereik staan naast de paginatitel in de
 * topbalk (.schil-titelbadge) en niet als regel boven de tegels. Die regel heeft
 * er kort gestaan en brak de uitlijning die elk ander scherm aanhoudt: de inhoud
 * begint overal met een kaart, niet met een losse zin.
 */

/*
 * De tegelrij van het overzicht.
 *
 * Iets ruimer dan .dash-tegels elders (13rem): deze tegels dragen een icoon
 * links, een getal met een badge ernaast en een onderbouwing eronder. Maar niet
 * véél ruimer — op 16rem passen er op een gewoon beeldscherm nog maar vier, en
 * dan blijft de zesde als weesrij onderaan hangen. Op deze maat staan ze met zijn
 * zessen op één regel, zoals bedoeld.
 *
 * Wél auto-fit en geen vast aantal kolommen, anders dan bij het overzicht van de
 * Caseloadrekenmodule: daar horen vijftien tegels in drie groepen van vijf en is
 * de indeling zelf informatie. Hier is het één rij waarin de volgorde telt maar
 * de regelovergang niets betekent.
 */
.kgm-tegels {
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.9rem;
}

/*
 * Het voorbehoud onder een grafiek: wat er niet in meegeteld is.
 *
 * Onder de grafiek en niet erin, want het gaat over de lijst als geheel. Zacht
 * en klein: het is een randopmerking, geen tweede uitkomst — maar hij staat er
 * wél, want een lijst die stilzwijgend bij tien ophoudt leest als "dit is
 * alles".
 */
.kgm-grafiek-bij {
    margin: 0.9rem 0 0;
    color: var(--regiq-tekst-zacht);
    font-size: 0.85rem;
    line-height: 1.5;
}

.kgm-grafiek-bij + .kgm-grafiek-bij {
    margin-top: 0.35rem;
}

.kgm-filterrij-vier {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kgm-filterrij-twee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

/* Onder de 62rem passen vier kolommen niet meer zonder dat een label smaller
   wordt dan het woord erin; dan liever twee rijen van twee. */
@media (max-width: 62rem) {
    .kgm-filterrij-vier {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .kgm-filterrij-vier,
    .kgm-filterrij-twee {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * De badges bij Akkoord dragen geen eigen kleuren meer.
 *
 * Die stonden hier als .kgm-akkoord-ja en zo, afgeleid uit de naam van de keuze
 * met Str::slug. Dat werkt precies zolang niemand die lijst beheert — en dat is
 * nu juist waar het beheerscherm voor is. De kleur staat sinds 2026-08-15 als
 * kolom op de keuze zelf en gebruikt de bestaande .dash-badge-*-klassen, zodat
 * groen overal groen blijft betekenen. Zie App\Kgm\Keuzekleur.
 */

/* --- Statusgeschiedenis op het detailscherm ------------------------------- */

/*
 * De tijdlijn onder Status: elke vastgelegde afspraak met wie en wanneer,
 * nieuwste bovenaan.
 *
 * Een <ol> met een lijn erlangs en niet een tabel: de teksten zijn ongelijk lang
 * en soms meerdere regels, en dan wordt een tabel een raster met één brede kolom
 * en veel wit. De lijn doet wat een tabelrand hier niet kan — laten zien dat het
 * één reeks is.
 */
.kgm-tijdlijn {
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: none;
    border-left: 2px solid var(--regiq-rand);
}

.kgm-tijdlijn-regel {
    position: relative;
    padding: 0 0 1.1rem;
}

.kgm-tijdlijn-regel:last-child {
    padding-bottom: 0;
}

/* Het bolletje op de lijn. Via ::before en niet als los element: het is
   versiering en hoort niet in de voorleesvolgorde van een schermlezer. */
.kgm-tijdlijn-regel::before {
    content: '';
    position: absolute;
    left: calc(-1.1rem - 6px);
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--regiq-rand);
    border: 2px solid var(--regiq-kaart);
}

/* De huidige stand krijgt het gekleurde bolletje; wat eronder staat is
   geschiedenis en hoeft niet om aandacht te vragen. */
.kgm-tijdlijn-regel.is-huidig::before {
    background: var(--regiq-paars);
}

.kgm-tijdlijn-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.kgm-tijdlijn-wanneer {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--regiq-tekst);
}

.kgm-tijdlijn-wie {
    font-size: 0.78rem;
    color: var(--regiq-tekst-zacht);
}

/* Eerdere standen staan zachter dan de huidige: het is context, geen opdracht. */
.kgm-tijdlijn-regel:not(.is-huidig) .kgm-status {
    color: var(--regiq-tekst-zacht);
}

/* Leeggemaakt is een gebeurtenis en geen tekst; cursief zodat het niet leest als
   iets wat iemand heeft ingetypt. */
.kgm-tijdlijn-leeg {
    margin: 0;
    font-style: italic;
    color: var(--regiq-tekst-zacht);
}

/* Het aantal wijzigingen naast de sectiekop: een terzijde, geen tweede kop. */
.kgm-tijdlijn-telling {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--regiq-tekst-zacht);
}

/* De kleurkeuze in het beheerscherm, met het voorbeeld ernaast: een kleur
   kiezen zonder te zien wat hij doet is raden. */
/*
 * De beheertabel van de keuzelijsten (/beheer/klikgesprekken).
 *
 * Elke regel is een formulier met vier velden naast elkaar. Dat past alleen als
 * elk veld zegt hoe breed het hoort te zijn: zonder maat neemt een <select> de
 * breedte van zijn langste optie en krimpt een <input> tot niets zodra de tabel
 * te breed wordt. Dat laatste gebeurde met het naamveld, dat als enige kolom
 * zonder `tabel-heel` mocht krimpen — "Niet akkoord" werd "Ne".
 */
.kgm-kleurkeuze {
    /* Genoeg voor "Blauw — informatie, in behandeling", zonder de kolom te laten
       groeien met de langste optie. */
    width: 100%;
    min-width: 11rem;
    max-width: 16rem;
}

.kgm-keuze-naam {
    width: 100%;
    min-width: 8rem;
}

/*
 * De betekeniscel draagt een hele zin als hulptekst, en die moet kunnen
 * afbreken — vandaar dat deze cel géén `tabel-heel` heeft. De maximumbreedte
 * houdt de zin bij elkaar in plaats van hem over de halve tabel uit te smeren.
 */
.kgm-keuze-betekenis {
    max-width: 22rem;
}

.kgm-betekeniskeuze {
    width: 100%;
    min-width: 11rem;
}

/*
 * Een veld met zijn uitleg ernaast: de keuzelijst, en daarachter het info-icoon.
 *
 * De uitleg stond één ronde als zin ónder het veld. Op elke regel uitgeschreven
 * maakt dat de rij twee keer zo hoog en de kolom zo breed als de langste
 * omschrijving — en in een tabel met zeven kolommen die elk een formulierveld
 * dragen, komt die breedte ergens anders vandaan. Zelfde afweging als bij de
 * kolomkoppen van de trajectentabel in de Caseloadrekenmodule: wat je één keer
 * leest hoort achter een icoon, wat je moet zien blijft staan.
 */
.kgm-keuze-veld {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Het icoon houdt zijn maat; de keuzelijst vult de rest van de cel. */
.kgm-keuze-veld .clrm-info {
    flex-shrink: 0;
}

/* In een formulierlabel staat het icoon achter de tekst, op dezelfde regel. Het
   label is klikbaar en het icoon zit erin — dat is geen bezwaar: klikken zet de
   focus in het veld, en dat is precies wat een label hoort te doen. */
.dash-veld label .clrm-info {
    margin-left: 0.3rem;
    vertical-align: -0.1rem;
}

/*
 * Het kleurvoorbeeld staat ónder de keuzelijst en niet ernaast.
 *
 * Naast de select maakt hij de cel zo breed als beide samen, en deze tabel telt
 * zeven kolommen die elk hun eigen formulierveld dragen — dan is elke centimeter
 * er één die de naamkolom kwijtraakt. Eronder staat hij bovendien op dezelfde
 * plek als de hulptekst bij Betekenis, dus de twee kolommen lezen hetzelfde:
 * veld, en daaronder wat het betekent.
 */
.kgm-kleurvoorbeeld {
    /* `block` en niet `inline-block`: de cel draagt `tabel-heel`, en dat is
       white-space: nowrap — een inline element blijft daar op dezelfde regel
       staan en schuift dan over de kolomgrens heen, dwars door de hulptekst van
       de buurcel. Een block begint altijd op een eigen regel, ook binnen nowrap.
       `width: fit-content` houdt de badge om zijn tekst in plaats van hem over
       de hele cel uit te rekken. */
    display: block;
    width: fit-content;
    margin-top: 0.4rem;
}

/* ---------------------------------------------------------------------------
   Recente aanmeldingen (.kgm-recent)
   ---------------------------------------------------------------------------
   Het blok onderaan het overzicht: de laatste vijf regels waar de cijfers
   erboven uit ontstaan. Vijf en geen paginatie — zodra er gebladerd kan worden
   is het de aanmeldingenlijst geworden, en dan staat dezelfde tabel op twee
   schermen.
*/

/*
 * De hele rij is klikbaar, met één echte link.
 *
 * De link staat op de datum en beslaat via ::after de rij eromheen. Dat is
 * bewust géén klikhandler in JavaScript: zo is de rij te bereiken met de
 * tab-toets, te openen in een nieuw tabblad, en werkt hij zonder JavaScript —
 * geen van drieën doet een handler op de tr.
 *
 * **Let op als je hier een tweede bedieningselement bij zet.** Het ::after ligt
 * over de andere cellen heen, dus een knop of link verderop in de rij wordt
 * daardoor onbereikbaar. Wil dat toch, dan moet dat element een eigen
 * `position: relative` krijgen om erbovenuit te komen. Dezelfde bijwerking geldt
 * voor het selecteren van tekst in de rij; dat weegt hier niet op tegen een rij
 * die overal aanklikbaar is.
 */
.kgm-recent tbody tr {
    position: relative;
}

.kgm-recent-link {
    font-weight: 600;
    color: var(--regiq-tekst);
    text-decoration: none;
}

/* Onderstreept pas onder de muis: vijf onderstreepte datums op een rij lezen als
   vijf verschillende bestemmingen, terwijl de hele rij naar dezelfde plek gaat.
   De rij licht toch al op via .wrap tbody tr:hover — dát is het signaal dat er
   iets te klikken valt, en de kleur bevestigt het. */
.kgm-recent tbody tr:hover .kgm-recent-link {
    color: var(--regiq-paars);
    text-decoration: underline;
}

.kgm-recent-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* De focusring hoort om de rij en niet om de datum: die twee tekens ergens links
   in beeld laten niet zien wát er geselecteerd is. Op het ::after dus, dat de
   hele rij al beslaat — met een negatieve offset zodat de lijn binnen de rij
   valt en niet half onder de buurrij. */
.kgm-recent-link:focus-visible {
    outline: none;
}

.kgm-recent-link:focus-visible::after {
    outline: 2px solid var(--regiq-paars);
    outline-offset: -2px;
    border-radius: 6px;
}

/* ==========================================================================
   Lijngrafiek (.lijngrafiek-*)
   ==========================================================================
   "Hoe loopt dit over de tijd, vergeleken met toen": één of meer reeksen over
   dezelfde kolommen, met de waarden als badge bij de punten.

   De vijfde gedeelde bouwsteen naast .meter, .staafgrafiek, .balken en .ring.
   Bewust neutraal genoemd en dus niet per module geprefixt: elke volgende
   vergelijking over de tijd hoort dezelfde vorm te krijgen.

   Een lijn en geen staven, want de vórm is hier het antwoord — twee reeksen
   staven over dezelfde maanden geeft vierentwintig kolommen waarin je zelf de
   paren moet zoeken. De maten komen uit dezelfde variabelen als de staafgrafiek,
   zodat twee grafieken naast elkaar even hoog staan en hun assen op één lijn
   liggen.
*/

.lijngrafiek {
    --lijngrafiek-as: 2.2rem;
    /*
     * De ondergrens van een kolom, en daarmee het punt waarop de grafiek gaat
     * schuiven in plaats van krimpen.
     *
     * 1,9rem en niet de 2,6rem die hier stond. Die maat was overgenomen van de
     * staafgrafiek, waar een kolom een coachnaam moet dragen; hier staat er
     * "jan" onder — drie letters van ~19px op 0,72rem, in een kolom van 41,6px.
     * Ruim twee keer zoveel als nodig, en dat viel niet op zolang de grafiek
     * halverwege het jaar acht kolommen telt. Bij twaalf maanden werd het
     * 12 × 41,6 + 35,2 = 534px, tegen 495px die een kaart in het tweekoloms-
     * raster op een scherm van 1440px overhoudt: een scrollbalk die pas in
     * november zou opduiken en dan niet meer te herleiden is aan een wijziging.
     *
     * Met 1,9rem is twaalf maanden 400px en past het tot aan het breekpunt van
     * 80rem, waar .grafiekenraster naar één kolom valt en de kaart 415px heeft.
     * De maandstaafgrafiek doet met .staafgrafiek.is-smal precies hetzelfde voor
     * precies dezelfde labels; die uitzondering was hier nooit doorgetrokken.
     */
    --lijngrafiek-kolom: 1.9rem;
    /* De kleur van een reeks zonder eigen kleurnaam. */
    --lijn-kleur: var(--regiq-paars);
}

.lijngrafiek-legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem 1rem;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--regiq-tekst-zacht);
}

/* Een streepje in de kleur van de lijn, en niet het vierkantje van de
   staafgrafiek: daar staat een vlak in de grafiek, hier een lijn. De legenda
   hoort te tonen wat je zoekt. */
.lijngrafiek-legenda-item::before {
    content: "";
    display: inline-block;
    width: 0.9rem;
    height: 0.2rem;
    margin-right: 0.4rem;
    /* Op de tekstregel gecentreerd in plaats van op de onderkant. */
    vertical-align: 0.15em;
    border-radius: 999px;
    background: var(--lijn-kleur);
}

/* Gestreept in de legenda én in de grafiek: het onderscheid tussen de twee
   reeksen mag niet alleen op kleur rusten. Wie kleuren slecht onderscheidt, ziet
   hier nog steeds welke lijn welke is. */
.lijngrafiek-legenda-item.is-gestippeld::before {
    background: repeating-linear-gradient(
        90deg,
        var(--lijn-kleur) 0 0.22rem,
        transparent 0.22rem 0.4rem
    );
}

/*
 * De schil scrollt horizontaal zodra de kolommen niet meer passen.
 *
 * `overflow-y: visible` naast `overflow-x: auto` bestaat niet: zodra één as niet
 * meer zichtbaar is, maakt de browser van de andere as ook een scrollgebied.
 * Hier steken twee dingen boven het plot uit — het bovenste aslabel met zijn
 * halve hoogte, en de badges bij de punten. Vandaar de ruimte bovenaan; zonder
 * die padding wordt een badge op de bovenste gridline half afgeknipt.
 */
.lijngrafiek-schil {
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 1.2rem;
}

.lijngrafiek-plot {
    position: relative;
    /* Even hoog als .staafgrafiek-plot: twee grafieken naast elkaar horen niet
       een centimeter te schelen. */
    height: 12rem;
    padding-left: var(--lijngrafiek-as);
    min-width: 100%;
}

/* Eén gridline met zijn aslabel eraan vast — hetzelfde element, dus gegarandeerd
   dezelfde hoogte. Zie .staafgrafiek-lijn voor het waarom. */
.lijngrafiek-lijn {
    position: absolute;
    right: 0;
    left: var(--lijngrafiek-as);
    bottom: var(--verbruik-deel, 0%);
    border-top: 1px solid var(--regiq-rand);
}

/* De grondlijn is de as zelf en geen hulplijn. */
.lijngrafiek-lijn.is-nul {
    border-top-color: var(--regiq-tekst-zacht);
}

.lijngrafiek-lijn span {
    position: absolute;
    right: 100%;
    top: 0;
    transform: translateY(-50%);
    padding-right: 0.45rem;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--regiq-tekst-zacht);
    white-space: nowrap;
}

/*
 * De aanwijsbare kolommen, onder de lijnen.
 *
 * Aanwijzen doe je zo een periode en niet een bolletje van acht pixel: de
 * tooltip gaat over de maand en niet over één punt. Ze liggen als eerste in de
 * DOM, dus de lijnen en punten worden eroverheen getekend.
 */
.lijngrafiek-kolommen {
    position: absolute;
    inset: 0 0 0 var(--lijngrafiek-as);
    display: flex;
}

.lijngrafiek-kolom {
    position: relative;
    flex: 1 1 0;
    min-width: var(--lijngrafiek-kolom);
    height: 100%;
}

/* De aanwijsmarkering: een zacht vlak over de hele kolom. Anders dan bij de
   staafgrafiek mag dat hier de volle breedte zijn — er staat geen staaf in die
   smaller is dan zijn kolom, dus er valt niets te overlappen. */
.lijngrafiek-kolom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--regiq-achtergrond);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.lijngrafiek-kolom:hover::before {
    opacity: 1;
}

/* "Hier staan we nu": dezelfde markering, maar blijvend en in het paars van het
   platform. Deze regel staat ná die van :hover en heeft dezelfde specificiteit,
   dus aanwijzen kleurt hem niet terug naar grijs — één markering per kolom, en
   die van nu is de sterkste. */
.lijngrafiek-kolom.is-nu::before {
    background: rgba(106, 53, 177, 0.07);
    opacity: 1;
}

/*
 * De laag met de lijn zelf.
 *
 * De SVG zit in een eigen div en vult die volledig. Een <svg> is een vervangen
 * element: met `inset` gezet en `width: auto` valt hij terug op zijn intrinsieke
 * 300 pixel, en dan houdt de lijn halverwege op terwijl de punten er wél staan —
 * wat leest als ontbrekende gegevens. Dezelfde valkuil als bij de lijn over de
 * staafgrafiek.
 */
.lijngrafiek-laag {
    position: absolute;
    inset: 0 0 0 var(--lijngrafiek-as);
    /* De lijn is te dun om aan te wijzen en zou de kolomtooltip wegnemen. */
    pointer-events: none;
}

.lijngrafiek-laag svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Rekt mee met het plot; alleen de streekdikte niet, anders wordt een brede
   grafiek een haarlijn en een smalle een balk. */
.lijngrafiek-pad {
    fill: none;
    stroke: var(--lijn-kleur);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Gestreept voor de vergelijkingsreeks: het verschil tussen twee lijnen hoort
   niet alleen op kleur te rusten. `non-scaling-stroke` geldt ook voor de streepjes,
   dus ze blijven even lang hoe breed de grafiek ook is. */
.lijngrafiek-pad.is-gestippeld,
.lijngrafiek-laag.is-gestippeld .lijngrafiek-pad {
    stroke-dasharray: 5 5;
}

/*
 * Het vlak onder de lijn: dezelfde kleur, sterk verzacht.
 *
 * Het draagt geen eigen betekenis — het maakt zichtbaar wélke lijn de hoofdreeks
 * is. Daarom alleen op die ene reeks: twee gevulde vlakken over elkaar maken
 * allebei onleesbaar.
 */
.lijngrafiek-vulling {
    fill: var(--lijn-kleur);
    opacity: 0.12;
    stroke: none;
}

/* De punten: een eigen rij met exact dezelfde kolomverdeling als de kolommen
   eronder, dus horizontaal klopt het per constructie en alleen de hoogte komt uit
   een stapklasse. */
.lijngrafiek-punten {
    position: absolute;
    inset: 0 0 0 var(--lijngrafiek-as);
    display: flex;
    pointer-events: none;
}

.lijngrafiek-punt-kolom {
    position: relative;
    flex: 1 1 0;
    min-width: var(--lijngrafiek-kolom);
    height: 100%;
}

.lijngrafiek-punt {
    position: absolute;
    left: 50%;
    bottom: var(--verbruik-deel, 0%);
    width: 0.55rem;
    height: 0.55rem;
    /* Op het snijpunt gecentreerd, niet erboven of ernaast. */
    transform: translate(-50%, 50%);
    border-radius: 50%;
    background: var(--lijn-kleur);
    /* Een witte rand houdt het punt zichtbaar waar twee lijnen elkaar kruisen. */
    box-shadow: 0 0 0 2px var(--regiq-wit);
}

/*
 * De waarde als badge boven zijn punt.
 *
 * Gevuld in de kleur van de reeks, met de donkere tint van diezelfde kleur als
 * tekst. Wit op een levendige kleur haalt geen leescontrast — en de donkere tint
 * als vulling zou een zwaar blok maken van iets dat een aflezing is.
 */
.lijngrafiek-badge {
    position: absolute;
    left: 50%;
    bottom: var(--verbruik-deel, 0%);
    /* Boven het punt en vrij ervan: het punt zelf staat op de bottom-lijn. */
    transform: translate(-50%, 0.55rem);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--lijn-kleur);
    color: var(--lijn-tekst, var(--regiq-wit));
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* De labels onder het plot, met dezelfde kolomverdeling als de kolommen erboven.
   Rechtop en gecentreerd, om dezelfde reden als bij de staafgrafiek: gedraaide
   labels lezen onrustig. */
.lijngrafiek-labels {
    display: flex;
    margin-top: 0.4rem;
    padding-left: var(--lijngrafiek-as);
    min-width: 100%;
}

.lijngrafiek-label {
    flex: 1 1 0;
    min-width: var(--lijngrafiek-kolom);
    text-align: center;
    font-size: 0.72rem;
    color: var(--regiq-tekst-zacht);
}

.lijngrafiek-label.is-nu {
    color: var(--regiq-paars);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Kleur per reeks
   ---------------------------------------------------------------------------
   Uit dezelfde reeks --stand-* als de badges, de ring, de staafgrafiek en de
   balkenlijst: dezelfde stand hoort overal dezelfde kleur te hebben.

   Elke kleur zet twee dingen: de kleur van de lijn en het vlak, en de tint van de
   tekst die erop komt te staan. Wit op een levendige kleur haalt geen
   leescontrast; de donkere variant van dezelfde kleur wel — en dan blijft de
   badge herkenbaar als dezelfde reeks. */
.lijngrafiek-laag.is-groen,
.lijngrafiek-punten.is-groen,
.lijngrafiek-legenda-item.is-groen {
    --lijn-kleur: var(--stand-groen);
    --lijn-tekst: var(--stand-groen-tekst);
}

.lijngrafiek-laag.is-rood,
.lijngrafiek-punten.is-rood,
.lijngrafiek-legenda-item.is-rood {
    --lijn-kleur: var(--stand-rood);
    --lijn-tekst: var(--stand-rood-tekst);
}

.lijngrafiek-laag.is-blauw,
.lijngrafiek-punten.is-blauw,
.lijngrafiek-legenda-item.is-blauw {
    --lijn-kleur: var(--stand-blauw);
    --lijn-tekst: var(--stand-blauw-tekst);
}

.lijngrafiek-laag.is-oranje,
.lijngrafiek-punten.is-oranje,
.lijngrafiek-legenda-item.is-oranje {
    --lijn-kleur: var(--stand-oranje);
    --lijn-tekst: var(--stand-oranje-tekst);
}

.lijngrafiek-laag.is-paars,
.lijngrafiek-punten.is-paars,
.lijngrafiek-legenda-item.is-paars {
    --lijn-kleur: var(--regiq-paars);
}

/* De vergelijkingsreeks: de donkere tint en niet de vlakvariant. Een lijn van
   twee pixel is meer tekst dan vlak — het lichte grijs verdwijnt tegen de
   gridlines, precies waar je de vorm van vorig jaar wilt kunnen volgen. */
.lijngrafiek-laag.is-grijs,
.lijngrafiek-punten.is-grijs,
.lijngrafiek-legenda-item.is-grijs {
    --lijn-kleur: var(--stand-grijs-tekst);
}

/* ---------------------------------------------------------------------------
   Standentabel (.kgm-standen)
   ---------------------------------------------------------------------------
   Per regel de akkoordstanden: totaal, de aantallen per stand en de score.
   Gedeeld door *Meerjaren overzicht* (een regel per jaargang) en *Loopbaancoach
   — detail tabel* (een regel per coach).

   Meerjaren is één ronde een gestapelde staafgrafiek geweest. Bij vijf
   jaargangen met vier standen is zo'n staaf leesbaar voor de grootste categorie
   en onleesbaar voor de rest, terwijl de vraag juist is hoeveel het er precies
   waren — een tabel beantwoordt dat, een staaf laat je schatten.
*/

/* Getallen recht onder elkaar: dit zijn kolommen om te vergelijken, en met
   proportionele cijfers staan de eenheden niet op één lijn. */
.kgm-standen td,
.kgm-standen th {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Het jaartal is de ingang van de regel en staat dus links. */
.kgm-standen td:first-child,
.kgm-standen th:first-child {
    text-align: left;
}

/* Naar de aanmeldingen van dat jaar: bij een opvallend cijfer is "welke waren dat
   dan" de eerstvolgende vraag. */
.kgm-standen-link {
    font-weight: 700;
    color: var(--regiq-paars);
    text-decoration: none;
}

.kgm-standen-link:hover,
.kgm-standen-link:focus-visible {
    text-decoration: underline;
}

/* Het totaal draagt het gewicht: het is de optelsom van de kolommen ernaast. */
.kgm-standen-totaal {
    font-weight: 700;
    color: var(--regiq-tekst);
}

/*
 * De aantallen per stand, elk in de kleur van zijn stand.
 *
 * De tekstvariant en niet de vlakvariant: dit zijn cijfers op wit, en een kleur
 * die als vlak levendig oogt haalt op wit geen leescontrast. Dezelfde afweging
 * als bij .balken-bij.
 */
.kgm-standen-getal {
    font-weight: 600;
}

.kgm-standen-getal.is-groen { color: var(--stand-groen-tekst); }
.kgm-standen-getal.is-rood { color: var(--stand-rood-tekst); }
.kgm-standen-getal.is-blauw { color: var(--stand-blauw-tekst); }
.kgm-standen-getal.is-grijs { color: var(--stand-grijs-tekst); }

/* "Niet ingevuld" is de afwezigheid van een waarde en draagt geen eigen kleur —
   dat zou een categorie suggereren waar er geen is. */
.kgm-standen-getal.is-leegwaarde { color: var(--regiq-tekst-zacht); }

/*
 * De scheiding vóór wat buiten de score valt.
 *
 * Wit en geen verticale lijn, zoals overal in dit platform: een streep tussen de
 * kolommen maakt van een tabel een raster. De ruimte zegt genoeg — links van de
 * scheiding staat wat in de noemer zit, rechts wat erbuiten valt.
 */
.kgm-standen-grens {
    padding-left: 1.4rem;
}

.kgm-standen-score {
    font-weight: 700;
}

.kgm-standen-score.is-groen { color: var(--stand-groen-tekst); }
.kgm-standen-score.is-oranje { color: var(--stand-oranje-tekst); }

/* De regel van nu — bij Meerjaren het lopende jaar. Het is nog niet af, en
   zonder markering leest een lager totaal als een terugval in plaats van als een
   periode die nog loopt. Eigen :hover-regel met genoeg specificiteit, anders wist
   de algemene hoverregel de markering zodra je hem aanwijst. */
.kgm-standen-nu td {
    background: rgba(106, 53, 177, 0.05);
}

.wrap .kgm-standen tbody tr.kgm-standen-nu:hover td {
    background: rgba(106, 53, 177, 0.09);
}

/* De bladerknoppen staan binnen de scrollschil van de tabel; zonder deze regel
   plakken ze tegen de laatste regel aan. */
.kgm-standen + .balken-bladeren {
    margin-top: 0.4rem;
}

/*
 * De verdelingsbalk in de laatste kolom.
 *
 * Hergebruikt de vlakken van een gestapelde balkenlijst, dus dezelfde stand heeft
 * hier dezelfde kleur als in de balk erboven en als zijn badge in de tabel. Alleen
 * de maat verschilt: dit is een cel in een tabelregel en geen grafiek.
 */
.kgm-standen-verdeling {
    display: block;
    width: 6rem;
    /* Rechts in de cel, onder zijn eigen kolomkop. Een block met een vaste
       breedte trekt zich niets aan van de `text-align: right` van de cel — hij
       blijft links staan, en dan staat de kop *Verdeling* aan de ene kant van de
       kolom en de balk aan de andere. `margin-left: auto` duwt hem naar de kant
       waar elke andere kolom in deze tabel ook staat. */
    margin-left: auto;
}

.kgm-standen-verdeling .balken-spoor {
    height: 7px;
}

/* ---------------------------------------------------------------------------
   Offertes (.kgm-offerte-*)
   ---------------------------------------------------------------------------
   De lijst met offertes en het venster waarin er één wordt aangemaakt of
   bewerkt. Er is geen detailscherm: een offerte telt zeven velden, en die staan
   allemaal in de tabel.
*/

/*
 * Het venster is breder dan een bevestigingsmodal.
 *
 * .dash-modal is op 30rem gezet voor "weet je het zeker" — één zin en twee
 * knoppen. Hier staan zeven velden in twee kolommen; op 30rem worden dat zeven
 * regels onder elkaar en scrollt het venster op een gewone laptop.
 */
.kgm-offerte-venster {
    width: min(44rem, calc(100vw - 2rem));
}

/* Twee kolommen zolang het past; onder de 34rem één. Een label met zijn veld
   blijft altijd bij elkaar — dat is de reden dat elk veld in een eigen div zit
   en niet los in het raster. */
.kgm-offerte-velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.1rem;
    margin-bottom: 1.2rem;
}

@media (max-width: 34rem) {
    .kgm-offerte-velden {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* De velden vullen hun kolom; zonder dit houdt een date- of number-veld zijn
   eigen intrinsieke breedte en staat de rij scheef. */
.kgm-offerte-velden input,
.kgm-offerte-velden select {
    width: 100%;
}

/* De labels staan bóven hun veld, net als in de andere formulieren van dit
   platform. Geen eigen marge onderaan, want het veld eronder heeft er al een. */
.kgm-offerte-velden label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--regiq-tekst-zacht);
}

/* De foutmeldingen binnen het venster: een gewone opsomming zonder bolletje op
   een regel die al een rood vlak draagt. */
.kgm-offerte-fouten {
    margin: 0;
    padding-left: 1.1rem;
}

.kgm-offerte-fouten li + li {
    margin-top: 0.2rem;
}

/* Het bedrag rechts uitgelijnd met cijfers van gelijke breedte: bedragen
   vergelijk je op hun eenheden, en die moeten dus onder elkaar staan. */
.kgm-offerte-prijs {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   Vergadermodule (.vgm-*)
   ==========================================================================
   Opnemen, uitschrijven, bewerken. Twee schermen dragen het meeste: het
   opnamescherm met de recorder, en het verslag met het transcript.
*/

/*
 * De titel in de verslagenlijst: een gewone link, en nadrukkelijk geen vlak over
 * de hele rij.
 *
 * Dat vlak heeft er gestaan (`.vgm-rijlink` met een ::after op `inset: 0`) en is
 * weg sinds er een actiekolom is. Twee redenen om het niet terug te zetten. Het
 * ligt óver de icoonknoppen heen, dus een klik op *Verwijderen* opent dan het
 * verslag — dat vraagt een `position: relative` op elke actiecel, en zo'n
 * afspraak vergeet iemand bij de volgende kolom. En het vlak hangt aan een
 * gepositioneerde <tr>: zonder die klasse valt het terug op de pagina zelf en
 * wordt het een onzichtbare link over het hele scherm, wat een tijd op
 * Verslagbeheer stond.
 */
.vgm-titellink {
    font-weight: 600;
}

/* ─── Bewerken achter een <details> ────────────────────────────────────── */

/* Het verslag stond eerder twee keer op het scherm: opgemaakt om te lezen, en
   nog eens in een tekstvak eronder. Nu is lezen de standaard en zit bewerken
   achter deze knop. Een <details> en geen JavaScript-toggle: dat werkt met het
   toetsenbord, meldt zichzelf aan een schermlezer en overleeft een script dat
   niet laadt — dezelfde afweging als bij het submenu in de zijbalk. */
.vgm-bewerken {
    border-top: 1px solid var(--regiq-rand);
    margin-top: 1.2rem;
    padding-top: 1rem;
}

.vgm-bewerken > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--regiq-paars);
    list-style: none;
    /* Ruimte eromheen zodat het een aanwijsbaar doel is en geen losse zin. */
    padding: 0.35rem 0;
}

/* Het standaarddriehoekje weg in beide motoren; het icoon hieronder doet dat
   werk al. */
.vgm-bewerken > summary::-webkit-details-marker {
    display: none;
}

.vgm-bewerken > summary svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.vgm-bewerken > summary:hover {
    color: var(--regiq-paars-diep);
}

.vgm-bewerken[open] > summary {
    margin-bottom: 0.6rem;
}

.vgm-vervalt {
    color: var(--regiq-tekst-zacht);
}

/* Oranje op de laatste twee dagen: dan is het nog te redden door te exporteren.
   Bewust geen rood — verdwijnen is hier de bedoeling en geen storing. */
.vgm-vervalt.is-bijna {
    color: var(--stand-oranje-tekst);
    font-weight: 600;
}

/* ─── Het opnamescherm ─────────────────────────────────────────────────── */

/*
 * Het opnamepaneel: één icoon in het midden, de klok eronder, dan de knoppen.
 *
 * Alles op één as gecentreerd, want er valt op dit scherm maar één ding te doen.
 * Het heeft een ronde gehad als veldenblok links naast de titel; dan leest de
 * opnameknop als het derde formulierveld, terwijl het het apparaat is waar deze
 * hele module om draait. De titel staat nu in een eigen kaart erboven.
 */
.vgm-paneel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    border: 1.5px solid var(--regiq-rand);
    border-radius: 16px;
    background: var(--regiq-achtergrond);
    padding: 2.2rem 1.3rem 1.8rem;
    margin-bottom: 1.3rem;
}

/* Tijdens het opnemen kleurt het paneel mee: dat is de enige toestand waarin de
   pagina iets doet wat de gebruiker niet kan zien gebeuren. */
.vgm-opname.is-opnemen .vgm-paneel {
    border-color: var(--stand-rood);
    background: #fef6f6;
}

/* Gepauzeerd is een eigen stand en geen zachtere versie van opnemen: de
   microfoon legt vast, óf hij ligt stil. Oranje en niet rood — er gebeurt niets
   ongewenst, er wacht alleen iets. Het risico is dat iemand vergeet te
   hervatten, dus de stand moet opvallen; hij mag alleen niet als storing lezen.
   `is-opnemen` en `is-gepauzeerd` staan nooit samen op de kaart, zodat hier
   niets te overschrijven valt. */
.vgm-opname.is-gepauzeerd .vgm-paneel {
    border-color: var(--stand-oranje);
    background: #fffaf2;
}

/* De ring om het icoon. Wit op het zachte vlak eronder, zodat hij als een knop
   of een lampje leest en niet als een plaatje in de tekst. */
.vgm-icoon {
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    border: 1.5px solid var(--regiq-rand);
    background: var(--regiq-kaart);
    color: var(--regiq-paars);
}

.vgm-icoon svg {
    width: 2.3rem;
    height: 2.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Rood én pulserend zodra de microfoon loopt. Er heeft een los lampje naast de
   statustekst gestaan; naast een icoon dat zelf al knippert was dat een tweede
   signaal voor hetzelfde. */
.vgm-opname.is-opnemen .vgm-icoon {
    border-color: var(--stand-rood);
    color: var(--stand-rood);
    animation: vgm-pols 1.6s ease-in-out infinite;
}

/* Wél oranje, géén puls: de puls betekent "er wordt nu iets vastgelegd", en dat
   is precies wat hier niet gebeurt. De kleur draagt de stand, de beweging het
   feit dat er opgenomen wordt. */
.vgm-opname.is-gepauzeerd .vgm-icoon {
    border-color: var(--stand-oranje);
    color: var(--stand-oranje);
}

/* De klok staat stil tijdens een pauze. Hem meekleuren maakt zichtbaar dát hij
   stilstaat — anders lijkt een klok die niet meer oploopt op een pagina die
   vastgelopen is. */
.vgm-opname.is-gepauzeerd .vgm-klok,
.vgm-opname.is-gepauzeerd .vgm-standtekst {
    color: var(--stand-oranje-tekst);
}

@keyframes vgm-pols {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stand-rood) 35%, transparent); }
    70% { box-shadow: 0 0 0 0.7rem color-mix(in srgb, var(--stand-rood) 0%, transparent); }
}

/* Wie beweging heeft uitgezet in zijn besturingssysteem, hoort hem hier ook niet
   te krijgen. Het icoon blijft dan gewoon rood — de betekenis zit in de kleur en
   niet in de beweging. */
@media (prefers-reduced-motion: reduce) {
    .vgm-opname.is-opnemen .vgm-icoon {
        animation: none;
    }
}

/* Het enige getal dat tijdens het opnemen verandert; je leest het vanaf een
   meter afstand. Tabular-nums zodat de breedte niet meebeweegt met de cijfers —
   anders schuift de hele kolom bij elke seconde. */
.vgm-klok {
    font-variant-numeric: tabular-nums;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--regiq-tekst);
}

.vgm-standtekst {
    font-weight: 600;
    color: var(--regiq-tekst);
}

/* Naast elkaar en gecentreerd, met een streep erboven die ze losmaakt van de
   stand: dat is de aflezing, dit is de bediening. */
.vgm-recorderknoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--regiq-rand);
}

/* De regel onder de knoppen vertelt wat er nu kan; hij verandert mee met de
   stand en houdt daarom eigen ruimte, zodat de knoppen niet verspringen zodra
   er een langere zin komt. */
.vgm-hulp {
    margin: 0;
    min-height: 1.3rem;
    max-width: 34rem;
}

/* ─── De bevestiging ───────────────────────────────────────────────────── */

.vgm-toestemming {
    background: var(--regiq-achtergrond);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin: 1.1rem 0;
}

.vgm-vinkje {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    /* Overschrijft de labelstijl van het formulier: dit is geen veldnaam maar
       een zin om te lezen. */
    font-weight: 400;
    margin: 0;
}

.vgm-vinkje input {
    margin-top: 0.2rem;
    flex: none;
}

/*
 * Het bevestigingsvenster dat de klik op *Opname starten* onderbreekt.
 *
 * Breder dan de standaard 30rem van .dash-modal: dat is de maat voor "weet u het
 * zeker" — één zin en twee knoppen. Hier staan een zin om te lezen, een vinkje
 * en een alinea over waar de opname heen gaat, en op 30rem breken die in smalle
 * repen af.
 *
 * Het toestemmingsblok staat in de pagina en verhuist met JavaScript hierheen;
 * zie de kop van vgm/opnemen.blade.php voor waarom dat zo moet.
 */
.vgm-venster {
    width: min(38rem, calc(100vw - 2rem));
}

/* In het venster is het blok de inhoud zelf en geen blok tussen andere; de marge
   die het in de kaart nodig heeft, is hier dubbelop. */
.vgm-venster .vgm-toestemming {
    margin: 0;
}

/* ─── Verslagsjablonen ─────────────────────────────────────────────────── */

/*
 * Een veldnaam met zijn info-icoon ernaast.
 *
 * De uitleg bij Titel en Verslagvorm stond als regels ónder de velden; dat maakte
 * die kaart hoger dan de opnamekaart eronder, voor tekst die je één keer leest.
 * Het label houdt zijn eigen marge niet — die zit nu op de rij.
 */
.vgm-veldkop {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.vgm-veldkop label {
    margin-bottom: 0;
}

/*
 * De keuzelijst mét knop in de kaartkop van het sjabloonverslag.
 *
 * Staat in de kop en niet onderaan: het is geen instelling van dit verslag maar
 * een handeling die je erop uitvoert, net als Exporteren. De <select> krijgt de
 * marge van een formulierveld niet mee — in een kop hoort hij op één regel met
 * de knop te staan.
 */
.vgm-sjabloonkeuze {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.vgm-sjabloonkeuze select {
    margin: 0;
    width: auto;
    min-width: 12rem;
}

/* De instructie op het beheerscherm: een prompt van tien regels leest niet in
   een veld van drie, en de regellengte hoort hier dezelfde te zijn als in de
   tekst die het model straks krijgt. */
.vgm-instructieveld {
    line-height: 1.6;
    min-height: 14rem;
    font-size: 0.9rem;
}

/* ─── Het transcript ───────────────────────────────────────────────────── */

/*
 * Het verslag is het enige lopende proza op dit platform; overal elders staan
 * cijfers in een tabel. Daarom een echte **leeskolom** en niet de volle breedte
 * van de kaart: op een breed scherm wordt een regel anders veertienhonderd pixels
 * lang, en dan verliest het oog aan het eind van elke regel het begin van de
 * volgende. Tweeënvijftig rem houdt een regel rond de vijfentachtig tekens —
 * ruim, maar nog te volgen.
 *
 * Het blok stond eerder over de hele kaart met de sprekersnaam als vet woord
 * ervoor; dat las als een logbestand en niet als een verslag.
 */
.vgm-transcript {
    max-width: 52rem;
    margin-bottom: 1.6rem;
    /* Iets groter dan de rest van het platform: dit wordt gelezen en niet
       afgelezen. */
    font-size: 0.97rem;
}

.vgm-beurt + .vgm-beurt {
    margin-top: 1.35rem;
}

/* Een vervolgblok is dezelfde spreker die na een stilte doorpraat (zie
   App\Vgm\Verslagtekst). Het draagt geen naam maar wel zijn tijdstip, en staat
   dichter tegen het vorige blok aan: zo is met het oog te zien dat de twee bij
   elkaar horen, zonder dat de naam herhaald hoeft te worden. */
.vgm-beurt + .vgm-beurt.is-vervolg {
    margin-top: 0.85rem;
}

/* Naam links, haarlijn ertussen, tijdstip rechts — de vorm van een
   sprekersaanduiding in een uitgeschreven verslag. De lijn doet het werk dat
   anders een kader zou doen: hij scheidt de beurten zonder er blokken van te
   maken. */
.vgm-beurt-kop {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.3rem;
}

.vgm-beurt-naam {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--regiq-paars-diep);
}

.vgm-beurt-lijn {
    flex: 1;
    border-top: 1px solid var(--regiq-rand-zacht);
}

.vgm-tijd {
    font-size: 0.78rem;
    color: var(--regiq-tekst-zacht);
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* Geldt voor beide gedaanten: de beurten van een transcript en de alinea's van
   een bewerkt verslag. Eén regel, want het is dezelfde tekst in een andere vorm
   — twee opmaakregels zouden bij de eerste correctie uit elkaar lopen. */
.vgm-transcript p {
    margin: 0;
    color: var(--regiq-tekst);
    line-height: 1.7;
}

.vgm-transcript > p + p {
    margin-top: 0.9rem;
}

/* Het bewerkveld: een verslag van een uur is lang, dus een vaste hoogte met een
   leesbare regellengte. Monospace zou het een logbestand maken. */
.vgm-tekstveld {
    line-height: 1.55;
    min-height: 24rem;
}

/* ─── De sprekers ──────────────────────────────────────────────────────── */

.vgm-sprekers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.vgm-spreker label {
    font-size: 0.85rem;
    color: var(--regiq-tekst-zacht);
}

.vgm-spreker input {
    margin-bottom: 0;
}