/* Opifera - ontwerpsysteem
 *
 * Opgebouwd uit tokens: de --namen hieronder. Wil je de huisstijl wijzigen, dan
 * pas je dit blok aan en volgt de rest vanzelf.
 *
 * Indeling van dit bestand:
 *   1. Tokens          kleuren, ruimte, typografie
 *   2. Basis           reset, body, koppen
 *   3. Schil           zijbalk en paginakader
 *   4. Componenten     kaarten, tabellen, knoppen, labels, formulieren
 *   5. Schermen        dossier, agenda, doelen, introductiepagina
 *   6. Grafiek         weekoverzicht op het startscherm
 */

/* === 1. Tokens ==================================================== */

:root {
    /* Vlakken, van achtergrond naar voorgrond */
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-alt: #f7f9fb;
    --surface-sunken: #edf1f5;

    --border: #e1e7ee;
    --border-strong: #c8d2dd;

    --text: #0f2233;
    --text-secondary: #40566b;
    --text-muted: #5f7183;

    /* Zijbalk in het diepblauw van het logo. Donker in beide standen: het
       geeft de applicatie een rustig middelpunt en laat de inhoud oplichten. */
    --nav-bg: #102437;
    --nav-text: #a8bed2;
    --nav-text-active: #ffffff;
    --nav-hover: rgba(255, 255, 255, .08);
    --nav-active: rgba(120, 172, 214, .20);

    /* Accent: het diepblauw uit het logo. Alle combinaties zijn doorgerekend
       op contrast; witte tekst hierop haalt 9,1 waar 4,5 de eis is. */
    --accent: #1c4b73;
    --accent-hover: #163c5d;
    --accent-soft: #e7eef5;
    --accent-text: #17456b;

    /* Betekeniskleuren */
    --green: #17724a;
    --green-soft: #e3f3ea;
    --blue: #1a5ca6;
    --blue-soft: #e6effa;
    --amber: #8f5d06;
    --amber-soft: #fdf1da;
    --rose: #a72740;
    --rose-soft: #fbe7ea;

    /* Grafiek. Deze twee zijn gevalideerd op kleurenblindheid en contrast
       tegen de vlakken hierboven - niet zomaar vervangen. */
    --viz-1: #2a78d6;
    --viz-2: #eb6834;
    --viz-3: #1baf7a;
    --viz-grid: #e6eaee;

    /* Ruimte: alles is een veelvoud van 4px */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;

    --shadow-sm: 0 1px 2px rgba(16, 29, 37, .05);
    --shadow: 0 1px 2px rgba(16, 29, 37, .05), 0 6px 16px -6px rgba(16, 29, 37, .10);
    --shadow-lg: 0 2px 4px rgba(16, 29, 37, .05), 0 12px 32px -8px rgba(16, 29, 37, .16);

    --nav-width: 232px;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b131c;
        --surface: #141e28;
        --surface-alt: #1a2632;
        --surface-sunken: #101a23;

        --border: #253340;
        --border-strong: #37485a;

        --text: #e8eef4;
        --text-secondary: #a7b8c8;
        --text-muted: #8496a7;

        --nav-bg: #0a1725;
        --nav-text: #8ba3ba;
        --nav-active: rgba(120, 172, 214, .22);

        --accent: #5b9bc9;
        --accent-hover: #74aed6;
        --accent-soft: #16324a;
        --accent-text: #8fbde0;

        --green: #5cc48c;
        --green-soft: #102e22;
        --blue: #79b0e8;
        --blue-soft: #12253a;
        --amber: #e0ab52;
        --amber-soft: #2e2410;
        --rose: #ef8397;
        --rose-soft: #331520;

        --viz-1: #3987e5;
        --viz-2: #d95926;
        --viz-3: #199e70;
        --viz-grid: #22303a;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -6px rgba(0, 0, 0, .5);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .6);
    }
}

/* === 2. Basis ===================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

h1, h2, h3 {
    letter-spacing: -.02em;
    line-height: 1.25;
}

h1 {
    font-size: 25px;
    margin: 0;
}

/* Zichtbare focus voor wie met het toetsenbord werkt. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* === 3. Schil ===================================================== */

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

.nav {
    width: var(--nav-width);
    flex: 0 0 var(--nav-width);
    background: var(--nav-bg);
    color: var(--nav-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: var(--sp-5) var(--sp-3);
}

/* Het woordmerk volgt het logo: een schreefletter met ruime letterafstand,
   in hoofdletters. Bewust een systeemschreefletter en geen webfont: dat scheelt
   een externe bron en een laadmoment. */
.wordmark {
    font-family: Georgia, "Times New Roman", serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 600;
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--sp-2) var(--sp-5);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
}

/* Licht vlak achter het beeldmerk: het logo is donkerblauw en zou anders
   wegvallen tegen de donkere zijbalk. */
.nav__mark {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
}

.nav__mark img {
    display: block;
    width: 24px;
    height: 24px;
}

.brand__logo {
    display: block;
    width: 30px;
    height: 30px;
}

.nav__section {
    padding: var(--sp-4) var(--sp-2) var(--sp-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--nav-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.nav__link:hover {
    background: var(--nav-hover);
    color: #fff;
}

.nav__link.is-active {
    background: var(--nav-active);
    color: var(--nav-text-active);
    font-weight: 600;
}

.nav__link svg {
    flex: 0 0 18px;
    opacity: .85;
}

.nav__foot {
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.nav__user {
    display: block;
    padding: 0 var(--sp-3) var(--sp-1);
    font-size: 13px;
    color: #fff;
    font-weight: 550;
}

.nav__role {
    display: block;
    padding: 0 var(--sp-3) var(--sp-2);
    font-size: 11.5px;
    color: rgba(255, 255, 255, .45);
}

.nav__logout {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 8px var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--nav-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.nav__logout:hover {
    background: var(--nav-hover);
    color: #fff;
}

.content {
    flex: 1 1 auto;
    min-width: 0;
}

main {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-6) 72px;
}

/* Zonder zijbalk (uitgelogd) staat de inhoud gewoon gecentreerd. */
.shell--bare main {
    max-width: 940px;
}

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar__inner {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 var(--sp-6);
    height: 62px;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    margin-right: auto;
}

.brand__mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(140deg, #1c4b73 0%, #5b8db0 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
}

.topbar__user {
    color: var(--text-muted);
    font-size: 13px;
}

.topbar__form {
    margin: 0;
}

.topbar__link {
    background: none;
    border: none;
    padding: 7px 12px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-xs);
}

.topbar__link:hover {
    background: var(--surface-alt);
    color: var(--text);
}

/* Smal scherm: de zijbalk wordt een strook bovenaan. */
@media (max-width: 900px) {
    .shell {
        flex-direction: column;
    }

    .nav {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: var(--sp-1);
        padding: var(--sp-2) var(--sp-3);
        overflow-x: auto;
    }

    .nav__brand,
    .nav__section,
    .nav__role {
        display: none;
    }

    .nav__foot {
        margin: 0 0 0 auto;
        padding: 0;
        border: none;
        display: flex;
        align-items: center;
    }

    .nav__user {
        padding: 0 var(--sp-2);
        white-space: nowrap;
    }

    .nav__link {
        white-space: nowrap;
    }

    main {
        padding: var(--sp-5) var(--sp-4) 56px;
    }
}

/* === 4. Componenten =============================================== */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.page-head p {
    margin: var(--sp-1) 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.backlink {
    display: inline-block;
    margin-bottom: var(--sp-3);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
}

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

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card__head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.card__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.card__body {
    padding: var(--sp-5);
}

/* --- Tabel --- */

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    padding: 11px var(--sp-5);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

tbody td {
    padding: 13px var(--sp-5);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr {
    transition: background .12s var(--ease);
}

tbody tr:hover {
    background: var(--surface-alt);
}

td.num {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.name-link {
    font-weight: 550;
    color: var(--text);
    text-decoration: none;
}

.name-link:hover {
    color: var(--accent-text);
    text-decoration: underline;
}

/* --- Knoppen --- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s var(--ease), transform .1s var(--ease);
}

.btn:hover {
    background: var(--accent-hover);
}

.btn:active {
    transform: translateY(1px);
}

.btn--ghost {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

.btn--ghost:hover {
    background: var(--surface-alt);
    color: var(--text);
}

.btn--small {
    padding: 5px 11px;
    font-size: 12.5px;
}

.rowactions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.rowactions form {
    margin: 0;
}

.daynav {
    display: flex;
    gap: var(--sp-2);
}

/* --- Zoekveld --- */

.search {
    display: flex;
    gap: var(--sp-2);
}

.search input {
    width: 262px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

/* --- Labels --- */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.badge--basisverzekering,
.badge--uitgevoerd {
    background: var(--green-soft);
    color: var(--green);
}

.badge--aanvullend,
.badge--gepland {
    background: var(--blue-soft);
    color: var(--blue);
}

.badge--eigen-rekening {
    background: var(--amber-soft);
    color: var(--amber);
}

.badge--particulier,
.badge--niet-verschenen,
.badge--geannuleerd-laat {
    background: var(--rose-soft);
    color: var(--rose);
}

.badge--neutral,
.badge--geannuleerd-tijdig {
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 550;
    color: var(--rose);
}

.chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}

/* --- Signalen --- */

.signals {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-1);
}

.signal {
    padding: 7px 12px;
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 13.5px;
}

.signal--blocker {
    border-left-color: var(--rose);
    background: var(--rose-soft);
    color: var(--rose);
    font-weight: 500;
}

.signal--warning {
    border-left-color: var(--amber);
    background: var(--amber-soft);
    color: var(--amber);
}

/* --- Meldingsbalk --- */

.notice {
    padding: 12px var(--sp-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: var(--sp-4);
    font-size: 14px;
    box-shadow: var(--shadow-sm);
}

.notice--relationship,
.notice--warning {
    border-color: var(--amber);
    background: var(--amber-soft);
    color: var(--amber);
}

.notice--success {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green);
}

.notice--error {
    border-color: var(--rose);
    background: var(--rose-soft);
    color: var(--rose);
}

/* --- Gegevensraster --- */

.datagrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-5);
}

.datagrid dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.datagrid dd {
    margin: 0;
    font-weight: 500;
}

.is-missing,
.datagrid dd.is-missing {
    color: var(--rose);
}

/* --- Voortgangsbalk --- */

.meter {
    height: 7px;
    border-radius: 100px;
    background: var(--surface-sunken);
    overflow: hidden;
    margin-top: var(--sp-2);
}

.meter__fill {
    height: 100%;
    background: var(--blue);
    border-radius: 100px;
    transition: width .4s var(--ease);
}

.meter__fill.is-full {
    background: var(--rose);
}

/* --- Formulieren --- */

.form__row {
    margin-bottom: var(--sp-4);
}

.form__row label {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: 600;
}

/* Alle invoertypes die we gebruiken staan hier. Ontbreekt er een, dan valt dat
   veld terug op de standaard van de browser en staat het scheef tussen de
   rest - zo ontdekt bij het wachtwoordveld op het inlogscherm. */
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="search"],
.form input[type="number"],
.form input[type="date"],
.form input[type="datetime-local"],
.form select,
.form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form__help {
    margin: 5px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.form__error {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--rose);
    font-weight: 500;
}

.form__actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.form__row--check {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.form__row--check label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: var(--text);
    font-weight: 400;
}

.form__row--check input {
    width: auto;
}

.fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5) var(--sp-1);
    margin: 0 0 var(--sp-5);
}

.fieldset legend {
    padding: 0 var(--sp-2);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}

.empty {
    padding: 48px var(--sp-5);
    text-align: center;
    color: var(--text-muted);
}

/* === 5. Schermen ================================================== */

/* --- Kerncijfers --- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}

a.tile:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.tile__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-weight: 600;
}

.tile__value {
    font-size: 30px;
    font-weight: 640;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-top: var(--sp-2);
}

.tile__note {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tile--alert .tile__value {
    color: var(--rose);
}

.tile--good .tile__value {
    color: var(--green);
}

/* --- Actielijst --- */

.actions-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 13px var(--sp-5);
    border-bottom: 1px solid var(--border);
}

.action:last-child {
    border-bottom: none;
}

.action__who {
    font-weight: 550;
    color: var(--text);
    text-decoration: none;
}

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

.action__what {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.action__mark {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    margin-right: var(--sp-3);
    background: var(--amber);
}

.action__mark--blocker {
    background: var(--rose);
}

.action__row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-4);
    align-items: start;
}

@media (max-width: 940px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* --- Episodes --- */

.episodes {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

.episode {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4) var(--sp-5);
}

.episode.is-closed {
    background: var(--surface-alt);
    box-shadow: none;
}

.episode__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.episode__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.episode__meta {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.episode__payer {
    text-align: right;
}

.episode__payer-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}

/* Lijst met aanvinkbare rollen. Django zet er een ul omheen; die strippen we. */
.checklist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.checklist li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.checklist label {
    display: inline;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
}

.checklist input {
    width: auto;
}

/* --- Rollenoverzicht --- */

.tick {
    font-size: 14px;
    line-height: 1;
}

.tick--yes {
    color: var(--green);
    font-weight: 700;
}

.tick--no {
    color: var(--border-strong);
}

/* --- Weekagenda --- */

.weekfilter {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-size: 13.5px;
}

.weekfilter label {
    color: var(--text-muted);
}

.weekfilter select {
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
}

.week {
    display: flex;
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
    gap: var(--sp-2);
}

/* Vaste hoogte voor het hele raster; de blokken staan er in procenten in. */
.week__hours {
    position: relative;
    width: 46px;
    flex: 0 0 46px;
    height: 620px;
    margin-top: 34px;
}

.week__hour {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.week__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.week__day {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.week__day.is-today .week__daylabel {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700;
}

.week__daylabel {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    border-radius: var(--radius-xs);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: var(--sp-2);
}

.week__daylabel:hover {
    background: var(--surface-alt);
    color: var(--text);
}

.week__dayname {
    text-transform: capitalize;
}

.week__daynum {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.week__grid {
    position: relative;
    height: 620px;
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.week__line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border);
}

.week__block {
    position: absolute;
    padding: 3px 5px;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    font-size: 11px;
    line-height: 1.3;
    /* Randje in de kleur van het vlak, zodat aangrenzende blokken los ogen. */
    border: 1px solid var(--surface-alt);
    transition: filter .12s var(--ease);
}

.week__block:hover {
    filter: brightness(.94);
}

.week__time {
    display: block;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.week__who {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week__block--gepland,
.week__swatch--gepland {
    background: var(--blue-soft);
    color: var(--blue);
}

.week__block--uitgevoerd,
.week__swatch--uitgevoerd {
    background: var(--green-soft);
    color: var(--green);
}

.week__block--niet-verschenen,
.week__block--geannuleerd-laat,
.week__swatch--verzuim {
    background: var(--rose-soft);
    color: var(--rose);
}

.week__block--geannuleerd-tijdig,
.week__swatch--geannuleerd {
    background: var(--surface-sunken);
    color: var(--text-muted);
    text-decoration: line-through;
}

@media (max-width: 900px) {
    /* Zeven kolommen passen niet op een telefoon; laat het raster schuiven. */
    .week {
        overflow-x: auto;
    }

    .week__days {
        min-width: 640px;
    }
}

/* --- Toegangslog --- */

.loglist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.loglist li {
    display: flex;
    gap: var(--sp-4);
    padding: 10px var(--sp-5);
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}

.loglist li:last-child {
    border-bottom: none;
}

.loglist__time {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 118px;
}

.loglist__who {
    font-weight: 550;
    min-width: 110px;
}

.loglist__what {
    color: var(--text-muted);
}

tbody tr.row--flagged {
    background: var(--amber-soft);
}

/* --- Dossier --- */

.soep {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 11px;
    font-weight: 700;
    margin-right: var(--sp-1);
}

.soeplist {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px var(--sp-4);
    align-items: start;
}

.soeplist dt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.soeplist dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
}

.soeplist--compact dd {
    font-size: 14px;
    color: var(--text-muted);
}

.dossier-entry {
    margin-bottom: var(--sp-4);
}

.section-title {
    font-size: 15px;
    margin: var(--sp-6) 0 var(--sp-3);
}

.addendum {
    max-width: 760px;
    margin-bottom: 10px;
    border-left: 3px solid var(--amber);
}

.signature {
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}

.missing {
    margin: var(--sp-2) 0 0;
    padding-left: 18px;
}

/* --- Behandeldoelen --- */

.goals {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
}

.goal {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.goal:last-child {
    border-bottom: none;
}

.goal--closed .goal__text {
    color: var(--text-muted);
}

.goal__text {
    margin: 0;
    font-weight: 550;
}

.goal__close {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.goal__close select,
.goal__close input {
    padding: 5px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
}

.goalform {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

.goalform input[type="text"] {
    flex: 1 1 260px;
}

.goalform input[type="date"] {
    width: auto;
}

/* --- Facturen --- */

.invoice-total {
    margin: var(--sp-4) 0 var(--sp-5);
    padding-top: var(--sp-3);
    border-top: 2px solid var(--border-strong);
    text-align: right;
    font-size: 16px;
}

.invoice-total strong {
    font-size: 20px;
    letter-spacing: -.02em;
    margin-left: var(--sp-3);
    font-variant-numeric: tabular-nums;
}

/* --- Brieven --- */

.letter {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 48px 56px;
    max-width: 720px;
    line-height: 1.65;
}

.letter__head {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-6);
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: var(--sp-8);
}

.letter__to {
    margin-bottom: var(--sp-6);
    font-size: 14.5px;
}

.letter__subject {
    font-size: 16px;
    margin: 0 0 var(--sp-5);
}

.letter__body {
    font-size: 14.5px;
    white-space: normal;
}

.letter__foot {
    margin: var(--sp-8) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Afdrukken: alleen de brief, zonder schil, knoppen of meldingen. */
@media print {
    .noprint,
    .nav,
    .topbar {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    main {
        padding: 0;
        max-width: none;
    }

    .letter {
        border: none;
        box-shadow: none;
        padding: 0;
        max-width: none;
    }
}

/* --- Inloggen --- */

.login {
    max-width: 380px;
    margin: 56px auto 0;
}

.login__card {
    box-shadow: var(--shadow-lg);
}

.login__title {
    font-size: 21px;
    margin: 0 0 var(--sp-1);
}

.login__intro {
    margin: 0 0 var(--sp-5);
    color: var(--text-muted);
    font-size: 14px;
}

.login__button {
    width: 100%;
    justify-content: center;
    margin-top: var(--sp-2);
}

.login__foot {
    margin-top: var(--sp-5);
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* --- Introductiepagina --- */

.hero {
    padding: 52px 0 38px;
    max-width: 700px;
}

.hero__eyebrow {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent-text);
}

.section {
    max-width: 700px;
    margin: 0 0 var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
}

.section__title {
    font-size: 18px;
    margin: 0 0 var(--sp-4);
}

.section__lead {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 var(--sp-4);
}

.section__lead strong {
    color: var(--text);
}

.hero__title {
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.12;
    letter-spacing: -.035em;
    margin: 0 0 var(--sp-4);
}

.hero__text {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.hero__actions {
    display: flex;
    gap: 10px;
    margin-top: var(--sp-6);
    flex-wrap: wrap;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-3);
}

.feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
}

.feature h2 {
    font-size: 15.5px;
    margin: 0 0 var(--sp-2);
}

.feature p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Oproep onderaan de introductiepagina: wie tot hier heeft gelezen, is
   geinteresseerd. */
.cta {
    max-width: 700px;
    margin: var(--sp-8) 0 0;
    padding: var(--sp-6);
    border-radius: var(--radius);
    background: var(--accent-soft);
    border: 1px solid var(--border);
}

.cta__title {
    font-size: 19px;
    margin: 0 0 var(--sp-3);
    color: var(--accent-text);
}

.cta__text {
    margin: 0 0 var(--sp-5);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* Valstrik tegen automatische invullers: onzichtbaar voor mensen, maar wel
   aanwezig in de pagina. display:none zou door sommige programma's worden
   herkend en overgeslagen. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.disclaimer {
    margin: var(--sp-8) 0 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    max-width: 700px;
}

/* === 6. Grafiek =================================================== */

.chart {
    padding: var(--sp-2) 0 0;
}

/* Gestapelde staven per dag. De hoogtes komen als procenten uit de view; de
   drukste dag is 100%. */
.weekbars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    height: 156px;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 0;
}

/* Zelfde raster, twaalf maanden in plaats van zeven dagen. */
.weekbars--year {
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    height: 180px;
}

.weekbar {
    display: grid;
    /* getal boven, staaf ertussen, dagnaam onder */
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: 5px;
    min-width: 0;
}

.weekbar__value {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* column-reverse zet het eerste kind onderaan: het afgehandelde deel staat
   daarmee op de nullijn, precies waar een staaf hoort te beginnen. */
.weekbar__track {
    width: 100%;
    max-width: 34px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    align-self: end;
}

.weekbar__seg {
    width: 100%;
    min-height: 3px;
    border-radius: 0;
    transition: height .4s var(--ease);
}

/* Alleen de bovenste segmentkop is afgerond; de onderkant blijft vlak tegen
   de nullijn liggen. */
.weekbar__seg:last-child {
    border-radius: 4px 4px 0 0;
}

.weekbar__seg--done {
    background: var(--viz-1);
}

.weekbar__seg--open {
    background: var(--viz-2);
}

.weekbar__label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: capitalize;
}

/* De dag van vandaag krijgt zwaardere tekst, geen andere kleur: kleur is in
   deze grafiek al bezet door de twee reeksen. */
.chart__today {
    color: var(--text);
    font-weight: 700;
}

/* --- Verloopgrafiek (klinimetrie) --- */

.chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.viz-grid {
    stroke: var(--viz-grid);
    stroke-width: 1;
}

.viz-axis {
    fill: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
}

.viz-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.viz-dot {
    /* Een randje in de kleur van het vlak houdt overlappende punten los. */
    stroke: var(--surface);
    stroke-width: 2;
}

.viz-endlabel {
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
}

/* Drie reeksen, in vaste volgorde toegekend. Deze kleuren zijn door de
   validator gehaald op kleurenblindheid en contrast, tegen de vlakken van deze
   app. Het groen haalt in lichte stand net geen 3:1; daarom heeft elke lijn een
   zichtbaar eindlabel en staat er een tabel onder. */
.viz-1 { stroke: var(--viz-1); fill: var(--viz-1); }
.viz-2 { stroke: var(--viz-2); fill: var(--viz-2); }
.viz-3 { stroke: var(--viz-3); fill: var(--viz-3); }

.legend__swatch--1 { background: var(--viz-1); }
.legend__swatch--2 { background: var(--viz-2); }
.legend__swatch--3 { background: var(--viz-3); }

.activity-list {
    margin: 0 0 var(--sp-3);
    padding-left: 20px;
    font-size: 14px;
}

.measureform {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    margin-top: var(--sp-4);
}

.measureform input {
    width: auto;
}

.legend {
    display: flex;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}

.legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 10px;
}

.legend__swatch--done {
    background: var(--viz-1);
}

.legend__swatch--open {
    background: var(--viz-2);
}

.chart-table {
    margin-top: var(--sp-3);
    font-size: 13px;
    color: var(--text-muted);
}

.chart-table summary {
    cursor: pointer;
    color: var(--text-secondary);
}

.chart-table table {
    margin-top: var(--sp-2);
}

.chart-table td,
.chart-table th {
    padding: 6px 10px;
    font-size: 12.5px;
}