/*
 * MC Legal Platform — app.css
 *
 * Centrale, handgeschreven stylesheet (Sprint 6.1, Fase 2 — Layout
 * Engine Implementation). Geen framework, geen preprocessor, geen
 * buildproces.
 *
 * Bevat uitsluitend structurele styling voor de Master Layout en de
 * bestaande partials (navbar, flash, breadcrumbs). De flash-kleuren
 * hieronder zijn een ongewijzigde overname van de kleuren die al
 * inline in de views werden gebruikt (Build 5.8.x/6.0.0).
 *
 * Update (Sprint 6.6, Fase 3, Batch 1): de Design Tokens (:root)
 * bevatten vanaf nu de officiële MC Legal & Tax Advisory-huisstijl
 * (navy/goud), bevestigd via Sprint 6.6 Fase 1 (e-mailtemplates,
 * logo-/favicon-assets). De eerdere claim "geen huisstijl/branding,
 * buiten scope" (Sprint 6.1) is hiermee achterhaald voor de
 * Design Tokens-laag specifiek — de overige, hieronder volgende
 * structurele regels (body/main/navbar/flash/breadcrumbs/footer)
 * zijn in deze batch niet gewijzigd en blijven vooralsnog ongestyled
 * met merkkleuren; dat is voorbehouden aan een latere Sprint
 * 6.6-batch (Navbar/Header/Footer, zie architectuur Fase 2).
 */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Portal-achtergrond (Sprint 8.3.x — Enterprise UI Polish). Uitsluitend
   op body.portal — die class wordt alleen gezet voor ingelogde
   gebruikers (resources/views/layouts/app.php), dus de publieke
   website (body zonder class) blijft volledig ongewijzigd wit.
   Uitsluitend CSS, geen achtergrondafbeelding: een herhalend
   lijnenraster via twee linear-gradients, elk op 4% dekking (binnen
   de gevraagde 3–5%) — .card/.table/formulieren blijven wit
   (--color-background) en springen daardoor duidelijk naar voren. */
body.portal {
    background-color: var(--color-background-warm);
    background-image:
        linear-gradient(to right, rgba(var(--color-primary-rgb), 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--color-primary-rgb), 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

main {
    padding: 1rem;
    padding-top: 40px;
    padding-bottom: 60px;
    flex: 1 0 auto;
}

/* Navbar */

header nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
}

/* Flash messages */

.flash {
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid;
}

.flash--success {
    border-color: var(--color-success);
    background: var(--color-success-bg);
    color: var(--color-success);
}

.flash--error {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Breadcrumbs */

.breadcrumbs ol {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0 0 1rem 0;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 0.5rem;
}

/* Footer */

footer {
    padding: 1rem;
}

/* ==========================================================================
   Sprint 6.4A — UI Foundation
   Design Tokens • Base • Typography
   ==========================================================================
   Uitbreiding op bovenstaande, ongewijzigde Sprint 6.1-stylesheet.
   Geen bestaande regel hierboven is aangepast of verwijderd.

   Design Tokens zijn de enige bron van waarheid voor kleuren, spacing,
   radius, shadows, z-index, typography scale en transitions. Toekomstige
   fasen (Layout, Navigation, Forms, Buttons, Tables, Cards, Badges,
   Alerts, Empty States, Responsive, Dark Mode) bouwen uitsluitend op
   deze tokens voort — geen hardcoded waarden daarbuiten.

   Deze sectie voegt uitsluitend nieuwe selectors toe (html, a, h1–h6,
   p, ul/ol/li, label, en drie nieuwe, nog ongebruikte typography-
   hulpclasses). Geen van de bestaande selectors hierboven (body, main,
   header nav ul, .flash, .flash--success, .flash--error, .breadcrumbs,
   footer) wordt hieronder opnieuw gedefinieerd of overschreven.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Kleuren — neutraal */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Kleuren — merk (Sprint 6.6, Fase 3, Batch 1)
       Bevestigd via Sprint 6.6 Fase 1 (e-mailtemplates, logo/favicon-
       assets): navy + goud is de officiële MC Legal & Tax Advisory-
       huisstijl. Vervangt de eerdere, generieke placeholder-kleur
       (was: #1d4ed8) uit Sprint 6.4A, die destijds expliciet als
       "geen huisstijl, buiten scope" was gedocumenteerd.

       --color-primary is de SOLIDE navy — te gebruiken voor Buttons,
       Tables, Forms, Badges en alle overige componenten. Dit is,
       conform de opdracht, de enige toegestane primary-vorm buiten
       Navbar/Header/Hero/Login Header.

       --color-primary-gradient is UITSLUITEND bedoeld voor Navbar,
       Header, Hero en Login Header — bevestigd via twee onafhankelijke
       Fase 1-bronnen (nieuwste e-mailtemplateset + banner-asset).
       Niet toepassen op Buttons/Tables/Forms/Badges.

       Toekomstige documentuitvoer (PDF, offertes, opdrachtbevestigingen,
       facturen, digitale ondertekening — nog niet gebouwd, zie Sprint
       6.6 Fase 2 §8): gebruik uitsluitend --color-primary (solide) en
       --color-accent. De meeste PDF-rendering-engines ondersteunen
       CSS-gradients onvoldoende betrouwbaar; de e-mailtemplates
       bevestigen dit patroon al (solide kleuren, geen gradients in de
       oudere, e-mailclient-veilige set). Geen aparte token nodig — de
       solide variant is al de juiste keuze voor die toekomstige context. */
    --color-primary: #162b4d;
    --color-primary-hover: #101f38;
    --color-primary-gradient: linear-gradient(135deg, #162544, #243b6b);
    --color-accent: #c89b03;
    --color-accent-hover: #a67f02;

    /* Kleuren — semantisch (danger bewust ongewijzigd gelaten, zie
       toelichting in de oplevering van Sprint 6.6 Fase 3 Batch 1 —
       niet in deze batch expliciet opgedragen, en de exacte
       merk-danger-kleur is nog niet door de opdrachtgever bevestigd) */
    --color-success: #2e7d32;
    --color-success-bg: #e8f5e9;
    --color-danger: #c62828;
    --color-danger-bg: #ffebee;
    --color-warning: #b45309;
    --color-warning-bg: #fef3c7;
    --color-info: #0369a1;
    --color-info-bg: #e0f2fe;

    /* Tekst en achtergrond */
    --color-text: #1f2937;
    --color-text-muted: var(--color-gray-500);
    --color-background: var(--color-white);
    --color-background-light: #f3f5f8;
    --color-border: #d8dee6;
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-hover);

    /* Portal-achtergrond (Sprint 8.3.x — Enterprise UI Polish)
       Warm off-white, uitsluitend voor ingelogde portalpagina's
       (body.portal, zie resources/views/layouts/app.php) — bewust
       een nieuw, apart token in plaats van hergebruik van het
       koelere --color-background-light (header/footer), conform de
       opdracht ("warme achtergrond, vergelijkbaar met de publieke
       website"). --color-primary-rgb is de RGB-drieling van
       --color-primary (#162b4d), nodig om het subtiele rasterpatroon
       op lage, controleerbare opacity te tekenen (rgba() ondersteunt
       geen directe hex-var). */
    --color-background-warm: #faf9f6;
    --color-primary-rgb: 22, 43, 77;

    /* Spacing-schaal */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Border-radius
       --radius-lg (12px) is reeds, onafhankelijk van deze batch,
       bevestigd de correcte merk-kaartradius (Sprint 6.6 Fase 1/2:
       twee onafhankelijke bronnen — e-mailtemplates én favicon-asset
       — kwamen beide uit op 12px). Geen nieuw --radius-card-token
       toegevoegd; --radius-lg wordt hiervoor hergebruikt, conform het
       architectuurbesluit uit Sprint 6.6 Fase 2 §6. */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08);

    /* Z-index-schaal */
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-overlay: 300;
    --z-index-modal: 400;
    --z-index-toast: 500;

    /* Typography scale
       --font-family-base aangescherpt van generieke "sans-serif" naar
       de bevestigde merk-fontstack (Sprint 6.6 Fase 1, consistent in
       alle geziene e-mailtemplates). */
    --font-family-base: Arial, Helvetica, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Transitions */
    --transition-fast: 100ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html {
    line-height: var(--line-height-normal);
    -webkit-text-size-adjust: 100%;
}

a {
    color: var(--color-link);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--space-md) 0;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

p {
    margin: 0 0 var(--space-md) 0;
}

ul,
ol {
    margin: 0 0 var(--space-md) 0;
    padding-left: var(--space-lg);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1 {
    font-size: var(--font-size-3xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

h5,
h6 {
    font-size: var(--font-size-base);
}

/* Formulierlabels — typografische basisstijl. Bestaande <label>-
   elementen in reeds gemigreerde views (bijv. client_requests/create.php,
   clients/edit.php) erven deze stijl automatisch, aangezien dit een
   kale elementselector is en er geen HTML is gewijzigd. Uitsluitend
   typografie (gewicht, kleur, ruimte); geen layout- of Forms-gedrag
   (positionering, breedte, focus-states) — dat blijft voorbehouden aan
   Sprint 6.4F (Forms). */
label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Bijschrift — nog niet toegepast in bestaande HTML, voorbereid voor
   toekomstig gebruik (bijv. tabel- of kaartonderschriften). */
.caption {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Hulptekst onder een formulierveld — nog niet toegepast in bestaande
   HTML, voorbereid voor Sprint 6.4F (Forms). */
.help-text {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Validatietekst — nog niet toegepast in bestaande HTML (huidige
   foutmeldingen gebruiken inline style, ongewijzigd gelaten conform
   scope). Voorbereid voor Sprint 6.4F (Forms), wanneer inline styles
   vervangen worden door deze class. */
.validation-text {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-danger);
}

/* ==========================================================================
   Sprint 6.4B — UI Foundation, Fase 1
   Cards • Utilities • Forms • Buttons • Containers
   ==========================================================================
   Uitbreiding op Sprint 6.1 en Sprint 6.4A hierboven — geen bestaande
   regel is aangepast, verwijderd of herschreven. Uitsluitend nieuwe
   secties toegevoegd, uitsluitend met reeds bestaande Design Tokens
   (geen nieuwe tokens, geen hardcoded kleuren/spacing).

   Tables, .flash, .breadcrumbs, navbar en de bestaande `main`-regel
   (padding) zijn expliciet buiten scope van deze fase en blijven
   volledig ongewijzigd.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cards
   Volledig nieuwe classes. Komen nergens voor in bestaande HTML —
   inert totdat een latere fase ze daadwerkelijk toepast (bijv. een
   toekomstig Dashboard).
   -------------------------------------------------------------------------- */

.card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
}

.card__header {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
}

.card__body {
    color: var(--color-text);
}

.card__footer {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.card--stat {
    text-align: center;
}

.card--stat .card__body {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   2. Utilities
   Beperkte set (hidden, tekstuitlijning, spacing, flex-helpers) —
   bewust geen uitgebreide utility-library. Alleen classes, komen
   nergens voor in bestaande HTML — inert totdat toegepast.
   -------------------------------------------------------------------------- */

.hidden {
    display: none;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* --------------------------------------------------------------------------
   3. Forms
   Uitsluitend input/textarea/select/fieldset/legend. `label` blijft
   ongewijzigd (reeds gestyled in Sprint 6.4A). Validatie-classes
   uitsluitend voorbereid (is-invalid), consistent met de reeds in
   6.4A voorbereide .validation-text — geen van beide wordt momenteel
   door bestaande HTML gebruikt (huidige foutmeldingen gebruiken
   inline style), dus zonder zichtbaar effect totdat een latere fase
   dit toepast.
   -------------------------------------------------------------------------- */

input,
textarea,
select {
    display: block;
    width: 100%;
    max-width: 32rem;
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.15);
}

input:disabled,
textarea:disabled,
select:disabled {
    background: var(--color-gray-100);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

fieldset {
    margin: 0 0 var(--space-md) 0;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

legend {
    padding: 0 var(--space-xs);
    font-weight: var(--font-weight-semibold);
}

/* Voorbereid, nog niet toegepast in bestaande HTML. */
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   4. Buttons
   Algemene button-styling raakt bestaande, ongewijzigde
   <button type="submit">-elementen rechtstreeks (geen HTML gewijzigd,
   wel een visueel neveneffect op reeds gerenderde pagina's — zelfde
   aard als de label-wijziging in Sprint 6.4A). Variant-classes
   (.btn-primary/.btn-secondary/.btn-danger) zijn nieuw en komen
   nergens in bestaande HTML voor — inert totdat toegepast.
   -------------------------------------------------------------------------- */

button {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--color-white);
    background: var(--color-gray-500);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

button:hover {
    background: var(--color-gray-600);
}

button:disabled {
    background: var(--color-gray-300);
    color: var(--color-gray-500);
    cursor: not-allowed;
}

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

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

.btn-secondary {
    background: var(--color-gray-500);
}

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

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

.btn-danger:hover {
    background: #a91f1f;
}

/* --------------------------------------------------------------------------
   5. Containers
   Nieuwe .container-class, expliciet los van de bestaande `main`-
   regel — de reeds gevalideerde `main { padding: 1rem; }` (Sprint
   6.1) wordt hier niet aangevuld, gewijzigd of overschreven. Deze
   sectie is daarmee volledig inert totdat een latere fase de class
   daadwerkelijk in HTML toepast.
   -------------------------------------------------------------------------- */

.container {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* ==========================================================================
   Sprint 6.5 — Fase 2
   Table Component
   ==========================================================================
   Uitbreiding op Sprint 6.1, 6.4A en 6.4B hierboven — geen bestaande
   regel is aangepast, verwijderd of herschreven. Uitsluitend een
   nieuwe sectie toegevoegd, uitsluitend met reeds bestaande Design
   Tokens (geen nieuwe tokens toegevoegd).

   Geen JavaScript, geen sorting-gedrag, geen filtering, geen
   pagination, geen responsive breakpoints (media queries) — uitsluitend
   de CSS Foundation voor tabellen, inclusief een overflow-wrapper als
   voorbereiding op een latere responsive-fase.
   ========================================================================== */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.table thead th {
    padding: 12px var(--space-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    background: var(--color-gray-100);
    border-bottom: 1px solid var(--color-border);
}

.table tbody td {
    padding: 12px var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

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

/* Hover — standaardgedrag, geen aparte modifier-class nodig */
.table tbody tr:hover {
    background: var(--color-gray-50);
}

/* Zebra rows — optionele variant, per view toe te passen */
.table--striped tbody tr:nth-child(even) {
    background: var(--color-gray-50);
}

.table--striped tbody tr:nth-child(even):hover {
    background: var(--color-gray-100);
}

/* Compacte variant — kleinere padding, zelfde structuur */
.table--compact thead th,
.table--compact tbody td {
    padding: var(--space-xs) var(--space-sm);
}

/* Responsive overflow-wrapper — voorbereiding, geen breakpoints.
   Bedoeld om rond een .table-element geplaatst te worden, zodat
   brede tabellen op smalle viewports horizontaal scrollen in plaats
   van de layout te breken. Geen media query, werkt op elke breedte. */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* Action column — bevat bewerk-/verwijderlinks per rij */
.table__cell--actions {
    white-space: nowrap;
    text-align: right;
}

/* Status column — bedoeld als plaatsingscontext voor een toekomstige
   Badge-component (Sprint 6.5, Fase 3/4 — niet in deze fase
   geïmplementeerd). Uitsluitend uitlijning, geen kleurlogica hier. */
.table__cell--status {
    white-space: nowrap;
}

/* ==========================================================================
   Sprint 6.6 — Pixel Perfect Branding
   Navbar & Footer (mockup-implementatie)
   ==========================================================================
   Vervangt de eerdere Batch 2-implementatie volledig. De aangeleverde
   mockup (Schermafbeelding_2026-07-18_233350.png) is hierbij leidend,
   inclusief het besluit om de eerder vastgestelde navy-gradient-
   achtergrond te vervangen door een witte header/lichtgrijze footer
   met gouden randen — een bewust, expliciet nieuw ontwerpbesluit dat
   het eerdere Batch 1-principe ("gradient uitsluitend voor Navbar/
   Header") vervangt voor deze twee componenten.

   Typografie: font-family bewust NIET gewijzigd naar het in de
   mockup zichtbare serif-lettertype — de geschreven instructie
   ("behoud bestaande font-family, geen Google Fonts") heeft hier
   voorrang boven het beeld.
   ========================================================================== */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-lg);
    /* Layout & UX Refinement — Sprint (Header/Footer): links/rechts
       bewust asymmetrisch (was op beide zijden --space-xl). Doel:
       minder witruimte links van het logo, betere balans tussen logo
       en navigatie, terwijl de navigatie rechts (justify-content:
       space-between, ongewijzigd) op dezelfde afstand tot de rand
       blijft staan als voorheen. Uitsluitend bestaande Design Tokens
       hergebruikt (--space-md i.p.v. --space-xl links) — geen nieuwe
       waarde, geen inline CSS, geen pagina-specifieke regel. */
    padding: var(--space-md) var(--space-xl) var(--space-md) var(--space-md);
    background: var(--color-background-light);
    border-bottom: 1px solid var(--color-accent);
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.site-header__logo {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.site-header__brand-text {
    display: flex;
    flex-direction: column;
}

/* Merknaam-lockup (Sprint 6.6 — Definitieve Header & Footer):
   twee regels ("MC" / "LEGAL & TAX ADVISORY") met een gouden lijn
   rechts van "MC", exact zoals de aangeleverde website-screenshot.
   Bewust system-serif (Georgia / Times New Roman) — geen Google
   Fonts, geen nieuw lettertype-bestand toegevoegd. */
.site-header__brand-top {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}

.site-header__brand-mc {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: var(--line-height-tight);
}

.site-header__brand-rule {
    flex: 1 1 auto;
    min-width: 32px;
    height: 1px;
    background: var(--color-accent);
    align-self: center;
}

.site-header__brand-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-top: 2px;
}

.site-header__tagline {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--color-accent);
    margin-top: 2px;
}

.site-header nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header nav a {
    display: inline-block;
    padding-bottom: var(--space-xs);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-header nav a:hover {
    color: var(--color-accent);
}

.site-header nav a.is-active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-bottom-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Footer — Sprint 6.6, Definitieve Footer (Pixel Perfect)
   Vervangt de eerdere, twee-regelige gecentreerde footer-implementatie
   volledig (die versie was nooit gecommit/gereviewd). 3 gelijke
   kolommen op desktop, 2 op tablet, 1 op mobiel — zonder randen
   tussen kolommen, zonder kaarten/schaduwen. Uitsluitend de vier
   opgegeven kleuren: --color-primary (#162b4d), --color-accent
   (#c89b03), --color-background-light (#f3f5f8), --color-border
   (#d8dee6) — alle vier reeds bestaande, identieke tokens.
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--color-background-light);
    border-top: 1px solid var(--color-accent);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    padding: 10px var(--space-xl);
    /* Layout & UX Refinement — Sprint (Header/Footer): centrale
       container/max-width-oplossing, identiek aan de reeds bestaande
       .container-class hierboven (max-width: 72rem; margin auto) —
       geen nieuwe waarde, geen pagina-specifieke CSS. Voorheen liep de
       grid edge-to-edge over de volledige paginabreedte, waardoor de
       drie kolommen op brede schermen ver uit elkaar kwamen te staan.
       Deze twee regels centreren de grid als één blok binnen de
       full-bleed --color-background-light-achtergrond van .site-footer
       zelf (die achtergrond blijft ongewijzigd edge-to-edge). */
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}

.site-footer__col {
    padding: 0;
}

.site-footer__brand-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    color: var(--color-accent);
    text-transform: uppercase;
    margin: 0 0 var(--space-xs) 0;
}

.site-footer__tagline {
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--color-accent);
    margin: 0 0 var(--space-sm) 0;
}

.site-footer__description {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    margin: 0;
    line-height: var(--line-height-normal);
}

.site-footer__heading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    color: var(--color-accent);
    text-transform: uppercase;
    margin: 0 0 var(--space-md) 0;
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.site-footer__list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

.site-footer__icon {
    display: inline-block;
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--color-primary);
}

.site-footer__list a {
    color: var(--color-primary);
    text-decoration: none;
}

.site-footer__list a:hover {
    color: var(--color-accent);
}

.site-footer__copyright {
    margin: 12px 0 0 0;
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    font-style: normal;
    text-align: left;
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Responsive — footer: 3 kolommen (desktop) → 2 kolommen (tablet) →
   1 kolom (mobiel). Tabletbreekpunt (968px) en mobielbreekpunt
   (640px, bestaande projectgrens) — niet exact opgegeven in de
   opdracht ("2 kolommen" / "1 kolom" zonder pixelwaarde), gekozen
   op basis van de gangbare tablet-/mobielgrens.
   -------------------------------------------------------------------------- */

@media (max-width: 968px) {

    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {

    .site-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-header nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Sprint 6.6 — Fase 3, Batch 3
   Component Refinement
   ==========================================================================
   Uitsluitend reeds bestaande, goedgekeurde Design Tokens gebruikt —
   geen nieuwe kleuren, geen nieuwe typography, geen nieuwe layout.

   Twee correcties aan reeds bestaande regels (checkbox/radio,
   uitgelegd hieronder), verder uitsluitend nieuwe, aanvullende
   selectors. Geen wijziging aan Views/Controllers/Routes/Repository/
   Services/Middleware/Navbar/Footer/Header.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Checkbox & Radio — correctie
   De generieke `input, textarea, select`-regel (Sprint 6.4B) past
   `display:block; width:100%` ongewenst ook toe op checkboxes en
   radiobuttons, wat een volledige-breedte, vervormde weergave
   oplevert. Deze regel herstelt normaal, inline checkbox-/
   radiogedrag en gebruikt `accent-color` (native CSS-eigenschap,
   geen aangepaste pseudo-elementen nodig) met de bestaande primary-
   token voor een consistente merkkleur.
   -------------------------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0 var(--space-xs) 0 0;
    border: none;
    accent-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Alerts
   Algemeen, herbruikbaar meldingscomponent — los van Flash Messages
   (die blijven sessiegebonden, zie hierboven). Bedoeld voor inline,
   niet-sessiegebonden meldingen binnen een pagina (bijv. een
   validatiesamenvatting of statusmelding). Gebruikt uitsluitend
   reeds bestaande semantische kleurtokens (success/danger/warning/
   info) — geen van deze vier is nieuw, ze bestonden al sinds Sprint
   6.4A maar werden tot nu toe nergens toegepast.

   Nieuw component, komt nergens in bestaande HTML voor — inert
   totdat een latere fase de classes daadwerkelijk toepast.
   -------------------------------------------------------------------------- */

.alert {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    border: 1px solid;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.alert--success {
    border-color: var(--color-success);
    background: var(--color-success-bg);
    color: var(--color-success);
}

.alert--danger {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.alert--warning {
    border-color: var(--color-warning);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.alert--info {
    border-color: var(--color-info);
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* --------------------------------------------------------------------------
   Cards — accentvariant
   Aanvulling op de reeds bestaande .card-component (Sprint 6.4B):
   een linker-accentrand-variant, gebruikt uitsluitend het reeds
   bestaande --color-accent-token (Batch 1). Komt nergens in
   bestaande HTML voor — inert totdat toegepast.
   -------------------------------------------------------------------------- */

.card--accent {
    border-left: 4px solid var(--color-accent);
}

/* ==========================================================================
   Sprint 6.6 — Fase 3, Batch 4
   View Integration — noodzakelijke aanvullingen
   ==========================================================================
   Twee kleine, view-specifieke aanvullingen, geen nieuwe componenten:
   1. Button-styling werkbaar maken op <a>-navigatielinks (Home).
   2. Login-kaart centreren/breedte beperken (view-specifieke plaatsing).
   ========================================================================== */

a.btn-primary,
a.btn-secondary,
a.btn-danger {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.login-card {
    max-width: 28rem;
    margin: var(--space-2xl) auto;
}

/* ==========================================================================
   Sprint 6.6 — Formulieroptimalisatie
   Compacte 2-koloms Create/Edit-formulieren, geen verticale scrollbar
   op een Full HD-scherm.
   ==========================================================================
   Uitsluitend nieuwe, aanvullende selectors — geen bestaande regel
   (.card, .container, input/select/textarea basisstyling, Login-
   formulier) aangepast. `.form-grid` is een expliciete, nieuwe
   contextklasse, zodat de compactere spacing uitsluitend geldt waar
   toegepast (Create/Edit van Cliëntaanvragen/Clients/Dossiers) en
   niet per ongeluk ook het Login-formulier raakt, dat dezelfde
   `.card`-structuur deelt.
   ========================================================================== */

/* Smallere content-breedte voor formulierpagina's (900–1100px), los
   van de bredere .container die overzichtspagina's (tabellen)
   gebruiken. */
.container--form {
    max-width: 1100px;
}

/* Compacte 2-koloms grid — bestaande <p><label>...<input></p>-
   structuur per veld blijft ongewijzigd; deze wrapper plaatst de
   directe <p>-kinderen automatisch naast elkaar via CSS Grid. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
}

.form-grid p {
    margin: 0 0 var(--space-sm) 0;
}

.form-grid label {
    margin-bottom: 2px;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
    margin-bottom: 0;
    padding: 6px var(--space-sm);
}

/* Velden die de volledige breedte moeten behouden binnen een
   .form-grid (bijv. een langere tekst- of omschrijvingsvraag). */
.form-grid__full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {

    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Sprint 8.7.2 — Portal Footer (Enterprise Redesign)
   ==========================================================================
   Nieuwe, aparte footervariant voor ingelogde/portal-pagina's (zie
   resources/views/partials/footer-portal.php en de conditionele
   footer-keuze in resources/views/layouts/app.php). De publieke footer
   hierboven (.site-footer, Sprint 6.6 Pixel Perfect Branding, nu geladen
   via partials/footer-public.php) is hier niet gewijzigd.

   Stijl: rustig, licht, zakelijk — geïnspireerd op enterprise-
   beheerconsoles (Synology DSM, Microsoft 365 Admin Center, VMware
   vCenter, Google Workspace Admin). Uitsluitend bestaande Design Tokens;
   geen nieuwe kleuren, geen schaduwen, geen dikke randen — alleen een
   subtiele bovenrand (--color-border, bewust neutraler dan de gouden
   --color-accent-rand van de publieke footer, passend bij een intern
   beheerportaal in plaats van de merksite).

   Update (Sprint 8.3.x — Enterprise UI Polish): bovenrand terug naar
   de gouden --color-accent (sluit aan bij de huisstijl, zoals ook de
   publieke footer die gebruikt). Meer horizontale ruimte tussen de
   drie kolommen (--space-lg → --space-2xl) en verticaal meer lucht
   (--space-lg → --space-xl). Copyright weer verkleind naar
   --font-size-xs (in verhouding tot de rest). Specialisaties krijgen
   meer ruimte ertussen (--space-md → --space-lg). Merkblok
   vereenvoudigd naar één regel "MC LEGAL PORTAL" (geen "MC"/"LEGAL
   PORTAL"-opsplitsing meer) + kleiner logo (48px → 40px, ~17%
   kleiner — ondersteunend, niet dominant; de tekst is nu duidelijk
   het grotere/zwaardere element). Version/Build (Administrator-only)
   weer toegevoegd als aparte, kleinere regel via .portal-footer__meta
   (al aanwezige, ongebruikte class — nu opnieuw in gebruik).
   ========================================================================== */

.portal-footer {
    font-family: var(--font-family-base);
    background: var(--color-background-light);
    border-top: 1px solid var(--color-accent);
}

.portal-footer__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-xl) var(--space-xl);
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}

.portal-footer__col--left {
    text-align: left;
}

.portal-footer__col--center {
    text-align: center;
}

.portal-footer__col--right {
    display: flex;
    justify-content: flex-end;
    text-align: left;
}

.portal-footer__copyright {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.portal-footer__specializations {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-lg);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.portal-footer__specializations li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Separator-techniek identiek aan de bestaande .breadcrumbs-component
   hierboven (content: "/" + margin-left, gecombineerd met flex-gap) —
   hier hergebruikt met "|" i.p.v. "/", geen nieuwe techniek. */
.portal-footer__specializations li:not(:last-child)::after {
    content: "|";
    margin-left: var(--space-lg);
    color: var(--color-border);
}

.portal-footer__icon {
    display: inline-block;
    line-height: 1;
    color: var(--color-text-muted);
}

/* Merkblok — icoon (ondersteunend, kleiner dan de header) + één
   tekstregel "MC LEGAL PORTAL" (het primaire, visueel zwaarste
   element) + optionele Administrator-only meta-regel eronder. */
.portal-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.portal-footer__brand-logo {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.portal-footer__brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.portal-footer__brand-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    color: var(--color-primary);
}

.portal-footer__meta {
    margin: 2px 0 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Tablet: expliciet nog steeds 3 kolommen — geen aparte regel nodig,
   de bovenstaande grid blijft ongewijzigd van toepassing tot het
   mobielbreekpunt hieronder (bestaande projectgrens, 640px, zelfde
   breekpunt als .site-footer/.site-header hierboven). */

@media (max-width: 640px) {

    .portal-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .portal-footer__col--left,
    .portal-footer__col--center,
    .portal-footer__col--right {
        text-align: center;
    }

    .portal-footer__col--right {
        justify-content: center;
    }
}

/* ==========================================================================
   Sprint 10.1 — UX01
   Central Application Shell (Sidebar + Topbar)
   ==========================================================================
   Nieuwe, vaste applicatie-shell (linker zijbalk + topbar + content) voor
   geauthenticeerde portaalpagina's (resources/views/partials/sidebar.php +
   partials/topbar.php, gerenderd vanuit layouts/app.php's
   $isAuthenticated-branch). De publieke website hierboven (.site-header/
   .site-footer, partials/navbar.php) is door deze sectie niet gewijzigd
   en gebruikt deze sectie niet.

   Uitsluitend reeds bestaande Design Tokens gebruikt — geen nieuwe
   kleuren toegevoegd. --color-primary is de reeds bestaande, bevestigde
   MC-navy (#162b4d); --color-accent is het reeds bestaande goud
   (#c89b03) — beide voldoen aan de gevraagde "donkerblauwe zijbalk" /
   "goud als accentkleur"-richting zonder een nieuw, tweede navy-/
   goudtoken te introduceren. De bestaande `main { padding: 1rem;
   padding-top: 40px; padding-bottom: 60px; flex: 1 0 auto; }`-regel
   (Sprint 6.1, bovenaan dit bestand) is hier bewust NIET overschreven —
   `<main class="app-content">` blijft die padding gewoon erven; deze
   sectie voegt uitsluitend de breedtebeperking (.app-content, zelfde
   patroon als de bestaande .container hierboven) en de shell-structuur
   eromheen toe.
   ========================================================================== */

.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.app-shell__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.app-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 260px;
    width: 260px;
    background: var(--color-primary);
    color: var(--color-white);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.app-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.app-sidebar__logo {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.app-sidebar__brand-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    color: var(--color-white);
}

.app-sidebar__nav {
    flex: 1 1 auto;
    padding: var(--space-md) 0;
}

.app-sidebar__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-sidebar__nav li {
    margin: 0;
}

.app-sidebar__nav a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-left: 3px solid transparent;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.app-sidebar__nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-white);
}

.app-sidebar__nav a.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    border-left-color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
}

.app-sidebar__profile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.app-sidebar__profile-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.app-sidebar__profile-role {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-xl);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
}

.app-topbar__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.app-topbar__search {
    width: 220px;
    max-width: 100%;
    margin-bottom: 0;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    background: var(--color-gray-50);
}

.app-topbar__search:disabled {
    cursor: default;
    color: var(--color-text-muted);
}

.app-topbar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    line-height: 1;
    text-decoration: none;
}

.app-topbar__icon-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

a.app-topbar__icon-btn--link {
    color: var(--color-primary);
}

a.app-topbar__icon-btn--link:hover {
    background: var(--color-gray-50);
    color: var(--color-accent-hover);
}

.app-topbar__user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: var(--line-height-tight);
}

.app-topbar__user-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.app-topbar__user-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.app-topbar__logout-form {
    margin: 0;
}

.app-topbar__logout-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.app-content-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.app-content {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Responsive — onder 968px verliest de zijbalk zijn vaste, verticale
   plaatsing en wordt een horizontaal, scrollbaar blok bovenaan (zelfde
   overflow-x-techniek als de reeds bestaande .table-responsive
   hierboven) — geen JavaScript, geen horizontale layoutbreuk van de
   pagina zelf. Bestaande formulieren/tabellen in het contentgebied
   (bestaande views, ongewijzigd) worden door deze sectie niet
   aangeraakt en blijven volledig bereikbaar.
   -------------------------------------------------------------------------- */

@media (max-width: 968px) {

    .app-shell {
        flex-direction: column;
        min-height: 0;
    }

    .app-sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        overflow-y: visible;
    }

    .app-sidebar__brand {
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
    }

    .app-sidebar__nav {
        padding: 0;
        flex: 0 0 auto;
    }

    .app-sidebar__nav ul {
        display: flex;
        flex-wrap: nowrap;
    }

    .app-sidebar__nav a {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .app-sidebar__nav a.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--color-accent);
    }

    .app-sidebar__profile {
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {

    .app-topbar {
        padding: var(--space-sm) var(--space-md);
    }

    .app-topbar__search {
        display: none;
    }
}

/* ==========================================================================
   Sprint 10.2 — UX02
   Employee Dashboard Workspace
   ==========================================================================
   Uitsluitend gebruikt op resources/views/dashboard/index.php — geen
   andere view gebruikt deze classes (scope van deze batch is
   uitdrukkelijk "alleen Dashboard"). Reuse van de reeds bestaande
   .card/.card--stat-componenten (Sprint 6.4B/6.6) — .card--dashboard is
   een additieve modifier, dezelfde conventie als de reeds bestaande
   .card--stat/.card--accent-modifiers; de basis-.card-class zelf is
   hier niet gewijzigd, dus elke andere pagina die .card gebruikt blijft
   volledig ongewijzigd (bevestigt de scope-eis "geen andere modules
   wijzigen").
   ========================================================================== */

.dashboard-grid {
    display: grid;
    gap: var(--space-lg);
    align-items: stretch;
}

.dashboard-grid--stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-grid--main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card--dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card--dashboard:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.dashboard-stat__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.dashboard-stat__value {
    margin-top: var(--space-xs);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.dashboard-widget__title {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.dashboard-widget__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.dashboard-widget__list li {
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.dashboard-widget__list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dashboard-widget__empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (max-width: 968px) {

    .dashboard-grid--stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid--main {
        grid-template-columns: 1fr;
    }

    .dashboard-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .dashboard-grid--stats {
        grid-template-columns: 1fr;
    }

    .dashboard-quick-actions {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Sprint 10.3 — UX03
   Dashboard Polish & Professional Workspace
   ==========================================================================
   Uitsluitend gebruikt op resources/views/dashboard/index.php, zelfde
   scope-beperking als de Sprint 10.2-sectie hierboven ("alleen
   Dashboard"). Uitsluitend reeds bestaande Design Tokens hergebruikt —
   geen nieuwe kleuren, geen nieuw framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sectie-ritme — meer verticale ruimte tussen Welkom/Stat cards/Widgets/
   Snelle acties (opdracht §8, "voorkom dat alles één vlak wordt").
   -------------------------------------------------------------------------- */

.dashboard-section {
    margin-bottom: var(--space-2xl);
}

.dashboard-section:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Welkomblok — subtiele aanhef, geen grote titel (opdracht §1).
   -------------------------------------------------------------------------- */

.dashboard-greeting__title {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.dashboard-greeting__subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Stat cards — icoon/titel/waarde/link-structuur (opdracht §2). Vervangt
   de centrale .card--stat-uitlijning uitsluitend binnen deze kaarten
   (linksuitgelijnd, opdracht "veel witruimte/visuele hiërarchie").
   -------------------------------------------------------------------------- */

.dashboard-stat-card .card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.dashboard-stat__icon {
    font-size: var(--font-size-xl);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.dashboard-stat__link {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}

.dashboard-stat__link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.dashboard-stat__meta {
    margin: 2px 0 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

/* --------------------------------------------------------------------------
   Google-statuskaart — indicator-stip (opdracht §3).
   -------------------------------------------------------------------------- */

.dashboard-status {
    display: flex;
    align-items: center;
    margin: var(--space-sm) 0 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.dashboard-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: var(--space-xs);
    border-radius: var(--radius-full);
}

.dashboard-status-dot--success {
    background: var(--color-success);
}

.dashboard-status-dot--muted {
    background: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   Lege widget-staten (Agenda/Recente dossiers zonder data, Taken-
   placeholder) — icoon + tekst, gecentreerd (opdracht §4/§5).
   -------------------------------------------------------------------------- */

.dashboard-empty-state {
    padding: var(--space-lg) var(--space-sm);
    text-align: center;
}

.dashboard-empty-state__icon {
    font-size: var(--font-size-2xl);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.dashboard-empty-state__title {
    margin: 0 0 var(--space-xs) 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.dashboard-empty-state__text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.dashboard-empty-state .dashboard-stat__link {
    margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   Klikbare lijstregels (Agenda vandaag/Recente dossiers) — tijd/titel/
   subtiele tweede regel, geen tabel (opdracht §4/§6). Volledige rij
   klikbaar via de "stretched link"-techniek (::after op de anker,
   position:relative op de listitem) — puur CSS, geen JavaScript.
   -------------------------------------------------------------------------- */

.dashboard-widget__list li.dashboard-list-item {
    position: relative;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.dashboard-widget__list li.dashboard-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dashboard-list-item__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    color: inherit;
    text-decoration: none;
}

.dashboard-list-item__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.dashboard-list-item__link:hover .dashboard-list-item__title {
    color: var(--color-primary);
}

.dashboard-list-item__time {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.dashboard-list-item__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-list-item__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.dashboard-list-item__subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   "Agenda vandaag"-widget met compacte maandkalender
   ==========================================================================
   Uitsluitend gebruikt op resources/views/dashboard/index.php. Hergebruikt
   bewust de reeds bestaande .agenda-mini-calendar__*-component hierboven
   (dezelfde die de volledige Agenda-werkruimte al gebruikt) — deze sectie
   voegt uitsluitend het twee-koloms widget-omhulsel/de navigatie/de
   telling toe, geen nieuwe kalendercomponent.
   ========================================================================== */

.dashboard-widget__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.dashboard-widget__count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    white-space: nowrap;
}

/* Correctie (verticale sprong tussen "met afspraak" en "zonder
   afspraak"): was `align-items: start` — beide kolommen lijnden uit op
   de bovenkant van de rij, dus de rechterkolom kreeg nooit een vaste
   hoogte om binnen te centreren (een korte lege staat en een lange
   afsprakenlijst startten allebei gewoon bovenaan, ter hoogte van de
   maandtitel). `stretch` (grid-default, hier expliciet) laat de
   rechterkolom-cel altijd even hoog zijn als de linkerkolom (de
   mini-kalender, ONGEWIJZIGD — deze regel raakt uitsluitend hóé de
   rechterkolom die al-bestaande hoogte gebruikt, niet de kalender
   zelf/haar eigen hoogte). Zie .dashboard-agenda-widget__list hieronder
   voor de verticale centrering bínnen die nu gelijke hoogte. */
.dashboard-agenda-widget {
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: stretch;
}

.dashboard-agenda-widget__calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.dashboard-agenda-widget__calendar-nav .agenda-mini-calendar__header {
    margin-bottom: 0;
    text-align: center;
    flex: 1;
}

.dashboard-agenda-widget__nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1;
}

.dashboard-agenda-widget__nav-link:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
}

/* Kalenderdagen zijn hier klikbare <a>-elementen (elke datum is
   selecteerbaar — zelfde element/klassen als de dag-links in de
   volledige Agenda-werkruimte: today/muted/has-events hergebruikt
   ongewijzigd; --selected hieronder is nieuw, uitsluitend voor deze
   widget, en staat los van --today (een dag kan allebei/geen van
   beide/één van beide zijn).

   Vult nu de volledige, aan de mini-kalender gelijkgetrokken hoogte
   (.dashboard-agenda-widget's align-items:stretch hierboven) en
   centreert zijn inhoud daarbinnen verticaal — of dat nu de lege staat
   (.mc-empty-state) is, of de afsprakenlijst + de knop eronder
   (.dashboard-agenda-widget__cta) samen als één blok. Bij één afspraak
   staat de rij zo ter hoogte van het midden van de kalenderdagen i.p.v.
   naast de maandtitel; bij een langere lijst groeit de kolom gewoon
   mee (`justify-content: center` beperkt de hoogte niet, uitsluitend de
   startpositie wanneer er ruimte over is) — blijft dus leesbaar bij
   meerdere afspraken. */
.dashboard-agenda-widget__list {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Correctie (herzien — één vast, gedeeld contentframe i.p.v. losse
   padding): de vorige versie van deze regel gaf uitsluitend de gevulde
   afsprakenlijst/knop een eigen horizontale padding (var(--space-md)),
   los van de lege staat (die haar eigen .mc-empty-state-padding
   gebruikte). Op een wijde rechterkolom viel dat verschil pas goed op:
   de gevulde afspraakgroep (tijd/titel/status/dossierinfo) bleef daarbij
   effectief links uitgelijnd, terwijl de lege staat (met haar eigen
   text-align:center, zie de regels hieronder) veel verder naar
   rechts/richting het midden oogde — een echte horizontale sprong bij
   het wisselen van datum, niet uitsluitend een paddingverschil.
   Nu krijgen alle drie — de afsprakenlijst, de lege staat én de knop
   "Nieuwe afspraak plannen" (deze laatste in zijn beide posities: hier
   als losse, gevulde-staat-sibling; de lege-staat-versie zit al binnen
   .mc-empty-state en erft daardoor automatisch hetzelfde frame) —
   exact hetzelfde vaste contentframe: dezelfde width/max-width en
   margin-inline:auto, dus altijd identiek breed en identiek
   gepositioneerd in de rechterkolom, ongeacht of er wel of geen
   afspraken zijn en ongeacht het aantal afspraken (max-width is een
   vaste waarde, niet content-afhankelijk — dus geen nieuwe sprong bij
   één of meerdere items). `max-width: 90%` (i.p.v. een vaste
   pixelwaarde) schaalt vanzelf mee met de daadwerkelijke kolombreedte
   (ook de smalste mobiele gestapelde weergave, @media 900px hieronder
   — nooit horizontale overflow), dus geen aparte mobiele regel nodig.
   `.mc-empty-state` zelf (de gedeelde, elders hergebruikte component)
   is niet gewijzigd — uitsluitend deze drie selectors, gescoped via de
   reeds bestaande .dashboard-agenda-widget__list-oudersclass. */
.dashboard-agenda-widget__list > .dashboard-widget__list,
.dashboard-agenda-widget__list > .mc-empty-state,
.dashboard-agenda-widget__list > .dashboard-agenda-widget__cta {
    width: 100%;
    max-width: 90%;
    margin-inline: auto;
}

/* Correctie (lege staat blijft intern gecentreerd, bínnen het frame
   hierboven): het kalendericoon, de tekst "Geen afspraken op deze
   datum." en de knop "Nieuwe afspraak plannen" staan als één
   samenhangend blok gecentreerd — nu bínnen het frame dat de regel
   hierboven aan .mc-empty-state geeft (dezelfde vaste width/max-width/
   margin-inline:auto als de afsprakenlijst), niet meer over de volle
   kolombreedte. De gevulde afsprakenlijst blijft intern links
   uitgelijnd (gewone leesrichting binnen haar eigen, even brede frame)
   — dit raakt uitsluitend de uitlijning ín de lege staat, niet haar
   framebreedte/-positie (die is nu, hierboven, al aan de afsprakenlijst
   gelijkgetrokken). Expliciet, uitsluitend hier gescoped (i.p.v.
   uitsluitend terugvallen op de gedeelde .mc-empty-state-basisstijl) —
   zodat deze keuze voor déze widget vastligt, onafhankelijk van
   eventuele latere wijzigingen aan die gedeelde component elders.
   Vaste kolomindeling (.dashboard-agenda-widget) en verticale
   centrering (.dashboard-agenda-widget__list) blijven ongewijzigd. */
/* Correctie (verticale ankerpositie nog steeds afhankelijk van wel/geen
   afspraak): .dashboard-agenda-widget__list centreert zijn inhoud al
   verticaal (justify-content:center, eerdere correctie) — dat centreert
   correct het MIDDEN van welk blok er ook staat, maar de twee blokken
   hadden zelf een sterk verschillende hoogte, waardoor hun bovenkant
   (en dus "waar tijd/titel/status" resp. "waar icoon/tekst" precies
   begint) alsnog niet op dezelfde hoogte uitkwam. Oorzaak: de gedeelde
   .mc-empty-state-basisstijl reserveert altijd eigen verticale padding
   (var(--space-xl) boven/onder, ±32px elk) — de gevulde afsprakenlijst/
   knop hebben nooit die extra padding gehad. Uitsluitend die verticale
   padding wordt hier, gescoped aan déze widget, geneutraliseerd
   (padding-top/padding-bottom hieronder — de horizontale padding/het
   contentframe blijven ongewijzigd) — de icoon-tot-tekst-afstand
   (.mc-icon's eigen margin-bottom) en de tekst-tot-knop-afstand
   (.dashboard-agenda-widget__cta's eigen margin-top: 18px) blijven zelf
   exact hetzelfde, dus de interne ritmiek binnen elk blok verandert
   niet — uitsluitend de buitenste, asymmetrische extra ruimte rond het
   lege-staatblok verdwijnt, zodat beide blokken (leeg vs. één afspraak)
   een vergelijkbare totale hoogte krijgen en dus op nagenoeg dezelfde
   hoogte beginnen/centreren. Bij meerdere afspraken groeit de
   afsprakenlijst normaal mee (ongewijzigd, geen max-height/overflow
   hier toegevoegd) — uitsluitend de 0-vs-1-afspraakvergelijking wordt
   hiermee stabiel, niet content-afhankelijk. */
.dashboard-agenda-widget__list .mc-empty-state {
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
}

.dashboard-agenda-widget__list .mc-empty-state .mc-icon {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* Losstaand van .agenda-mini-calendar__day--today (die een volledige
   achtergrondvulling gebruikt, var(--color-accent)) — een inset-ring
   i.p.v. een tweede achtergrondkleur, zodat "vandaag" en "geselecteerd"
   nooit met elkaar botsen/onleesbaar worden wanneer een dag toevallig
   beide is. Geen layoutverschuiving (box-shadow, geen border). */
.agenda-mini-calendar__day--selected {
    box-shadow: inset 0 0 0 2px var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Ruimte tussen de afsprakenlijst/statusbadge/lege-staattekst en de knop
   "Nieuwe afspraak plannen" eronder — voorkomt dat de knop over tekst/
   afspraken heen valt op elke breedte (normale documentflow, geen
   absolute positionering, dus dit is voldoende op zowel desktop als
   mobiel). Deze klasse wordt uitsluitend op de knopcontainer van déze
   knop toegepast (in beide posities: onder de lege-staattekst en onder
   de volledige afsprakenlijst) — geen enkele andere knop deelt deze
   class. Expliciete pixelwaarde (i.p.v. --space-md, 16px) op uitdrukkelijk
   verzoek voor duidelijk merkbaar meer witruimte boven deze knop.
   Responsive breedte/centrering (@media max-width: 480px) hieronder
   ongewijzigd. */
.dashboard-agenda-widget__cta {
    margin-top: 18px;
}

@media (max-width: 900px) {

    .dashboard-agenda-widget {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {

    .dashboard-agenda-widget__cta .mc-button {
        width: 100%;
        justify-content: center;
    }

}

/* Dossier Workspace — Agenda-tab: hergebruikt hierboven dezelfde
   .dashboard-agenda-widget als het Dashboard, maar hier zonder tweede
   kolom ernaast (de Dossier-tabsectie is veel breder dan één
   Dashboardkaart). Het gedeelde contentframe hierboven
   (.dashboard-agenda-widget__list > ..., `max-width: 90%`) versmalt in
   zo'n brede kolom nauwelijks iets — daarom hieronder één vaste,
   kleinere contentkolom (max-width: 360px, gecentreerd) i.p.v. de
   generieke 90%, gescoped via de reeds bestaande, uitsluitend op deze
   pagina aanwezige .dossier-workspace-voorouderclass (het Dashboard
   heeft die klasse niet, dus dit raakt de Dashboardwidget hierboven
   niet).

   Correctie (de vaste kolom alléén was niet genoeg): .dashboard-widget__list
   is van zichzelf `display:flex; flex-direction:column` zonder eigen
   align-items — valt dus terug op de flexbox-default `stretch`, waardoor élke <li>
   (de afspraakrij) altijd de volle breedte van die 360px-kolom vulde en
   zijn tekst daarbinnen simpelweg links begon. Dat gaf nog steeds een
   zichtbare sprong t.o.v. de lege staat, die intern wél
   text-align:center gebruikt. `align-items: center` hieronder laat elke
   <li> in plaats daarvan krimpen tot zijn eigen inhoud (tijd+titel+
   statusbadge) en centreert dát compacte blok in de kolom — exact
   dezelfde zichtbare positie als het icoon/de tekst van de lege staat.
   De tekst ín de rij (.dashboard-list-item__link is en blijft een eigen
   `display:flex`) staat intern nog steeds gewoon links-naar-rechts,
   ongewijzigd. .dashboard-agenda-widget__cta krijgt hier expliciet
   text-align:center: in de gevulde staat staat die knop als sibling ná
   de <ul> (dus buiten .mc-empty-state, en erft daardoor niet diens
   text-align:center) — zonder deze regel zou de knop na de fix hierboven
   los van de nu gecentreerde afspraakrij aan de linkerkant blijven
   hangen. */
.dossier-workspace .dashboard-agenda-widget__list > .dashboard-widget__list,
.dossier-workspace .dashboard-agenda-widget__list > .mc-empty-state,
.dossier-workspace .dashboard-agenda-widget__list > .dashboard-agenda-widget__cta {
    max-width: 360px;
}

.dossier-workspace .dashboard-agenda-widget__list > .dashboard-widget__list {
    align-items: center;
}

.dossier-workspace .dashboard-agenda-widget__list > .dashboard-agenda-widget__cta {
    text-align: center;
}

/* ==========================================================================
   "Recente dossiers" — volledige-breedte rij, lijst optioneel 2 kolommen
   ==========================================================================
   Uitsluitend gebruikt op resources/views/dashboard/index.php. "Recente
   dossiers" kreeg een eigen, volledige-breedte rij (was voorheen een
   derde kolom naast Agenda vandaag/Mijn taken — mc-ui.css zet
   .dashboard-grid--main op desktop echter al op 2 kolommen, dus die
   derde kaart viel altijd terug naar een nieuwe rij met een lege tweede
   kolom ernaast). Deze modifier-klasse staat uitsluitend op de
   Recente-dossiers-<ul> (niet op de agendalijst, die blijft de kale,
   ongewijzigde .dashboard-widget__list) en zet de lijst vanaf 640px
   (bestaande mobiele-breakpointconventie, zie elders in dit bestand) in
   twee kolommen — daaronder (mobiel) blijft .dashboard-widget__list's
   eigen basisregel (flex, één kolom) gewoon van kracht, geen aparte
   mobiele regel nodig. */
@media (min-width: 640px) {

    .dashboard-widget__list--columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm) var(--space-lg);
    }

    /* .dashboard-list-item's eigen onderrand (border-bottom, basisregel)
       zorgt in een 2-koloms grid voor een "kapotte" lijn die niet
       doorloopt over de volle breedte — in grid-context uitsluitend
       vervangen door een dunne bovenrand op elk item ná de eerste twee
       (i.p.v. builder-per-rij-logica in PHP), optisch gelijk.

       Correctie (dubbele scheidingslijn): de basisregel is
       `.dashboard-widget__list li.dashboard-list-item` (2 classes + het
       element `li` — specificiteit 0,2,1). De vorige versie van deze
       override, `.dashboard-widget__list--columns .dashboard-list-item`
       (2 classes, géén element — 0,2,0), was daardoor ondanks dat hij
       later in het bestand staat toch minder specifiek dan de basisregel
       en verloor de cascade: de onderrand van de basisregel bleef dus
       gewoon staan, bovenop de nieuw toegevoegde bovenrand hieronder —
       vandaar de dubbele lijn. Beide selectors hieronder matchen nu
       exact de daadwerkelijke `<ul class="dashboard-widget__list
       dashboard-widget__list--columns"><li class="dashboard-list-item">`
       -structuur (`ul.../li...`), specificiteit 0,2,2 — altijd hoger dan
       de basisregel, ongeacht bestandsvolgorde. Uitsluitend één
       bovenrand per rij (ná de eerste twee items), netjes doorlopend
       onder beide kolommen. */
    ul.dashboard-widget__list--columns li.dashboard-list-item {
        border-bottom: none;
        padding-bottom: 0;
    }

    ul.dashboard-widget__list--columns li.dashboard-list-item:nth-child(n+3) {
        border-top: 1px solid var(--color-border);
        padding-top: var(--space-sm);
    }

}

/* --------------------------------------------------------------------------
   Snelle acties — iconen binnen de knop (opdracht §7; gelijke
   breedte/hoogte wordt door de .dashboard-quick-actions-grid hierboven
   afgedwongen, hover-effect erft van de reeds bestaande a.btn-primary).
   -------------------------------------------------------------------------- */

.dashboard-quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 44px;
    text-align: center;
}

/* ==========================================================================
   Dashboard Stabilisatie
   Nederland-/Bonaire-klokken (welkomblok)
   ==========================================================================
   Uitsluitend gebruikt op resources/views/dashboard/index.php, zelfde
   scope-beperking als de secties hierboven ("alleen Dashboard").
   Uitsluitend reeds bestaande Design Tokens hergebruikt.
   ========================================================================== */

.dashboard-clocks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-top: var(--space-sm);
}

.dashboard-clocks__item {
    display: flex;
    flex-direction: column;
}

.dashboard-clocks__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.dashboard-clocks__time {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Sprint 10 UX — Batch UX01B
   Layout Stability Fix
   ==========================================================================
   Bevestigde oorzaak (zie OPLEVERING van deze batch voor de volledige
   analyse): geen enkele regel in dit bestand reserveerde tot nu toe
   vaste ruimte voor de verticale browser-scrollbar. `.app-content`
   (resources/views/layouts/app.php) centreert zichzelf via
   `margin-left/right: auto` binnen de beschikbare breedte van
   `.app-shell__main` — die beschikbare breedte is `viewport-breedte −
   260px (zijbalk) − scrollbarbreedte`. Omdat de documenthoogte per
   route sterk verschilt (bijv. Dashboard: meerdere gestapelde
   widget-rijen, versus een route met een korte tabel), verschijnt/
   verdwijnt de browser-scrollbar per route, waardoor de beschikbare
   breedte — en dus de berekende, gecentreerde linkerpositie van
   `.app-content` — tussen routes een paar pixels verspringt. De
   zijbalk (vaste 260px) en de topbar (vult onvoorwaardelijk de volle
   breedte van `.app-shell__main`) bewegen zelf niet mee — uitsluitend
   het gecentreerde contentgebied erbinnen.

   Oplossing: vaste scrollbarruimte reserveren op het documentniveau
   (`html`), ongeacht of de pagina daadwerkelijk moet scrollen.
   `overflow-y: scroll` is de brede, altijd-werkende fallback (ook in
   browsers zonder `scrollbar-gutter`-ondersteuning); `scrollbar-gutter:
   stable` is de moderne aanvulling die in ondersteunende browsers de
   ruimte reserveert zonder de balk permanent zichtbaar te maken wanneer
   niet nodig. Samen maken deze twee eigenschappen de beschikbare
   breedte van `.app-shell`/`.app-content` route-onafhankelijk —
   precies de "één centrale layoutfix" die deze opdracht vraagt, in
   plaats van een aanpassing per view.

   Overige door de opdracht geopperde maatregelen (afwijkende
   max-width-waarden, wrapper-inconsistentie, tabelbreedte,
   sidebar-/topbarbreedte) zijn expliciet onderzocht en NIET bevestigd
   als oorzaak voor de 7 genoemde routes — zie OPLEVERING §OORZAAKANALYSE.
   Er is daarom geen extra `.app-content-inner`-wrapper of aanpassing
   aan `.container`/tabellen toegevoegd; dat zou ongebruikte,
   niet-onderbouwde CSS toevoegen.
   ========================================================================== */

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

/* ==========================================================================
   Sprint 10 UX — Batch UX06
   Agenda Workspace Redesign (Google Calendar / Outlook-stijl)
   ==========================================================================
   Vervangt volledig de "Sprint 10 UX — Batch UX05"-sectie (op expliciete
   Product Owner-instructie: "Verwijder de huidige verticale
   kaartopbouw"). Die sectie was, per haar eigen docblok, uitsluitend
   gebruikt door resources/views/agenda/index.php — geverifieerd
   (grep) dat geen andere view een `.agenda-*`-class gebruikte, dus
   geen enkele andere pagina wordt door deze vervanging geraakt.

   Uitsluitend gebruikt op resources/views/agenda/index.php. Uitsluitend
   reeds bestaande Design Tokens hergebruikt (geen nieuwe kleuren) en
   de reeds bestaande breakpoints (968px/640px). `.dashboard-status-dot
   (--success/--muted)` (Sprint 10.2) wordt ongewijzigd hergebruikt voor
   de compacte Google-status.

   Gedeeld contract met de view: HOUR_START=7/HOUR_END=20/
   ROW_HEIGHT_PX=48 (agenda/index.php) bepalen de inline top/height-
   posities van afspraakblokken; `.agenda-hourgrid__day-track`'s
   repeating-linear-gradient hieronder gebruikt dezelfde 48px zodat de
   getekende uurlijnen exact op de PHP-berekende posities aansluiten.

   Update (Sprint 10 — UX06B, Agenda Workspace Refinement): deze sectie
   is voor UX06B bewust IN PLAATS VAN additief bijgewerkt (i.p.v. een
   nieuwe, losse UX06B-sectie) — UX06B is expliciet een "verfijning"
   van dezelfde, nog geldige UX06-workspace (geen vervanging zoals
   UX05→UX06 was), dus het aanpassen van bestaande waarden in deze
   sectie is hier de meest onderhoudbare keuze (voorkomt een tweede
   sectie die de eerste uitsluitend via cascade zou overrulen). Alle
   wijzigingen zijn beperkt tot: linkerpaneel-breedte (§1), verticale
   compactheid van toolbar/workspace (§2, via een op deze pagina
   beperkte negative margin-top — de gedeelde `main{padding-top:40px}`
   -regel (Sprint 6.1) zelf is NIET gewijzigd, die geldt voor elke
   geauthenticeerde pagina), subtielere uurlijnen (§3, hergebruikt het
   reeds bestaande `--color-primary-rgb`-token), compactere
   mini-kalender/Google-status (§4/§5), en een nieuwe `a.btn-accent`
   -variant (§6, goud, uitsluitend voor de "Nieuwe afspraak"-knop).

   Update (Sprint 10 — UX07, Agenda Workspace Final Polish): opnieuw
   in-place bijgewerkt (zelfde redenering als UX06B — "final polish"
   van dezelfde workspace, geen vervanging). Kernwijzigingen:
   - **Eén doorlopend werkvlak** (§12): nieuwe `.agenda-workspace__frame`
     draagt nu de kaartstijl (wit/rand/`--shadow-sm`) die voorheen
     apart op `.agenda-side-panel` én `.agenda-main-panel` stond — die
     twee zijn nu kaartloze, transparante panelen binnen één frame,
     gescheiden door een dunne interne lijn (`border-right` op
     `.agenda-side-panel`) i.p.v. een `gap` tussen twee losse kaarten.
   - **Sidebar uitsluitend bij Maand** (§1): `.agenda-workspace__body`
     heeft nu twee modifiers — `--with-sidebar` (270px vaste
     sidebarbreedte + 1fr planner, `align-items:stretch` zodat de
     sidebar exact even hoog wordt als de planner, met een
     `min-height:600px`-bodem op `.agenda-side-panel` zelf) en `--full`
     (1fr, uitsluitend de planner) — de view rendert `.agenda-side-panel`
     nu alleen nog daadwerkelijk in de HTML bij Maand (§2/§3).
   - **Mini-kalender groter** (§4): de UX06B-begrenzing van max-width
     220px is vervallen (die gold voor het toen smallere ±17%-paneel);
     nu groter (~12%) binnen het bredere 270px-paneel.
   - **Google Workspace herzien** (§5): nieuwe kop met statusstip
     (`.agenda-google-dot`) + het werkelijke e-mailadres i.p.v.
     uitsluitend de providernaam.
   - **Typografie** (§10): widgettitels/koppen `font-weight:600`
     (semibold), overige/interactieve tekst `font-weight:500` (medium)
     i.p.v. het browser-default (400) — uitsluitend reeds bestaande
     `--font-weight-medium`/`--font-weight-semibold`-tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Workspace-structuur: vlakke toolbar + 16-18%/82-84%-lichaam
   -------------------------------------------------------------------------- */

.agenda-workspace {
    display: flex;
    flex-direction: column;
    /* Bugfix (één doorlopende Agenda-workspace, testomgeving-only):
       deze -16px was bedoeld om de kalenderwerkruimte op te trekken
       binnen de standaard main{padding-top:40px}-ruimte, tóén dit nog
       het eerste, los staande element op de pagina was. Nu volgt dit
       blok direct op de "Agenda"/"Nieuwe afspraak"-secties binnen
       dezelfde .mc-dashboard-panel (resources/views/agenda/index.php)
       — een negatieve marge zou het kalenderpaneel over de vorige
       sectie heen trekken. .agenda-workspace wordt uitsluitend in dat
       ene bestand gebruikt, dus hier direct op 0 gezet i.p.v. een
       aparte scoped override toe te voegen. */
    margin-top: 0;
}

/* UX07 §12 — één doorlopend werkvlak: toolbar + (sidebar +) planner
   zitten samen in één kaart i.p.v. losse widgets/kaarten met een
   tussenruimte. Draagt nu de kaartstijl die voorheen apart op
   .agenda-side-panel/.agenda-main-panel stond. */
.agenda-workspace__frame {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.agenda-workspace__alert {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md) 0 var(--space-md);
}

.agenda-workspace__body {
    display: grid;
    align-items: stretch;
}

/* UX07 §1/§6 — sidebar uitsluitend bij Maand: 270px vast (was ±17% bij
   elke weergave in UX06B) + resterende ruimte voor de planner. */
.agenda-workspace__body--with-sidebar {
    grid-template-columns: 270px 1fr;
}

/* UX07 §1/§6 — Dag/Week: geen sidebar in de HTML, planner krijgt 100%. */
.agenda-workspace__body--full {
    grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   Toolbar — vlakke balk zonder eigen kaart, nu bovenin het gedeelde
   .agenda-workspace__frame (§7: compacter, alles netjes uitgelijnd)
   -------------------------------------------------------------------------- */

.agenda-toolbar-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    /* UX07 §7 — was 6px 0 (zonder zijpadding, leunde op .container);
       nu eigen padding omdat de toolbar in .agenda-workspace__frame zit. */
    padding: 8px var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

/* UX06B — Senior UX zelfreview: titel+bereik stonden gestapeld (2
   tekstregels), wat de toolbar hoger maakte dan het bedoelde
   compacte, één-regelige balkontwerp uit de opdracht. Nu op één regel
   ("Agenda  Week van ..."), bespaart een volledige tekstregel hoogte
   in de toolbar. */
.agenda-toolbar-bar__title-group {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-right: auto;
}

.agenda-toolbar-bar__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.agenda-toolbar-bar__range-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.agenda-toolbar-bar__cta {
    white-space: nowrap;
}

/* UX06B §6 — "Nieuwe afspraak" blijft de primaire actie: MC-goud
   achtergrond/witte tekst/subtiele hover, i.p.v. het standaard navy
   `.btn-primary`. Herhaalt bewust de basis-knopstijl van de reeds
   bestaande `a.btn-primary, a.btn-secondary, a.btn-danger`-regel
   (Sprint 6.6, niet gewijzigd — uitsluitend-toevoegen-conventie) i.p.v.
   die regel zelf aan te passen. Uitsluitend bestaande tokens
   (--color-accent/--color-accent-hover/--color-white, Sprint 6.6) —
   geen nieuw kleurenschema. Generiek genoemd (niet
   `.agenda-toolbar-bar__cta`-specifiek) zodat dezelfde primaire-actie-
   stijl herbruikbaar is voor de toekomstige Dossier-/Cliënt-/
   Document-/Taken-/Factuur-Workspaces (PO-opmerking UX06B). */
a.btn-accent {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color var(--transition-fast);
    background: var(--color-accent);
}

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

.agenda-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--color-gray-100);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-sm);
    /* UX07 §10 — normale/interactieve tekst: font-weight 500, niet het
       browser-default (400). */
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-fast);
}

.agenda-nav-btn:hover {
    background: var(--color-gray-200);
    color: var(--color-text);
}

.agenda-nav-btn--icon {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: var(--font-size-lg);
}

/* Datumkiezer (Outlook-achtig "ga naar datum") — zelfde maatvoering
   als .agenda-nav-btn ernaast, geen nieuw kleurenpalet. */
.agenda-date-picker {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
}

.agenda-view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.agenda-view-toggle__link {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-background);
    border-right: 1px solid var(--color-border);
}

.agenda-view-toggle__link:last-child {
    border-right: none;
}

.agenda-view-toggle__link:hover {
    background: var(--color-gray-100);
}

.agenda-view-toggle__link--active {
    background: var(--color-primary);
    color: var(--color-white);
}

.agenda-search-input {
    max-width: 160px;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Navigatiepaneel (uitsluitend bij Maand, §1/§2/§3) — 270px, minimaal
   even hoog als de planner (align-items:stretch op de ouder) met een
   bodem van 600px, gescheiden van de planner door één dunne interne
   lijn i.p.v. een eigen kaart.
   -------------------------------------------------------------------------- */

.agenda-side-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 600px;
    border-right: 1px solid var(--color-border);
}

.agenda-side-panel__section {
    padding: var(--space-sm) var(--space-md);
}

.agenda-side-panel__section + .agenda-side-panel__section {
    border-top: 1px solid var(--color-border);
}

/* UX07 — gedeelde koptekst-stijl voor "Mijn afspraken"/"Google
   Workspace" (§3: een echt navigatiepaneel, geen losse widgetjes).
   §10: widgettitel → font-weight 600. */
.agenda-side-panel__heading {
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.agenda-mini-calendar__header {
    /* UX07 §4 — de UX06B-begrenzing (max-width 220px, voor het toen
       smallere ±17%-paneel) is vervallen; het paneel is nu 270px. */
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.agenda-mini-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    /* UX07 §4 — was 1px: iets meer lucht, hoort bij de ~12% grotere
       kalender ("een echte navigatiekalender, geen mini-widget"). */
    gap: 3px;
}

.agenda-mini-calendar__weekday {
    /* UX07 §4 — was 0.65rem (~+11%). */
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-align: center;
    padding-bottom: 3px;
}

.agenda-mini-calendar__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    /* UX07 §4 — was 0.7rem (~+14%). */
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.agenda-mini-calendar__day:hover {
    background: var(--color-gray-100);
}

.agenda-mini-calendar__day--muted {
    color: var(--color-text-muted);
}

.agenda-mini-calendar__day--today {
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}

.agenda-mini-calendar__day--has-events::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
}

.agenda-mini-calendar__day--today.agenda-mini-calendar__day--has-events::after {
    background: var(--color-white);
}

/* UX07 §3 — "Mijn afspraken" als sectiekop met radiostijl-opties
   (○ Mijn / ● Team) i.p.v. twee losse pillen (UX06/UX06B). */
.agenda-filter-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agenda-filter-radio {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 3px 2px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: none;
}

.agenda-filter-radio:hover .agenda-filter-radio__dot {
    border-color: var(--color-primary);
}

.agenda-filter-radio--active {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.agenda-filter-radio__dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-gray-400);
    background: transparent;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.agenda-filter-radio--active .agenda-filter-radio__dot {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

/* UX07 §5 — Google Workspace: kop met statusstip + het werkelijke
   e-mailadres i.p.v. uitsluitend de providernaam (UX06B). Geen
   <p>-elementen met de standaard 1rem margin-bottom (Sprint 6.1);
   uitsluitend kleine, expliciete regelafstand. */
.agenda-google-heading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.agenda-google-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}

.agenda-google-dot--success {
    background: var(--color-success);
}

.agenda-google-dot--muted {
    background: var(--color-gray-400);
}

.agenda-google-compact__email {
    margin: 0 0 2px 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-google-compact__status-label {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.agenda-google-compact__meta {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-google-compact__link {
    display: inline-block;
    margin-top: 2px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Planner — hoofdrolspeler (§6): 100% breedte bij Dag/Week, resterende
   ruimte naast de sidebar bij Maand. Geen eigen kaart meer (UX07 §12)
   — het gedeelde .agenda-workspace__frame draagt nu de kaartstijl.
   -------------------------------------------------------------------------- */

.agenda-main-panel {
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
}

/* --------------------------------------------------------------------------
   Uur-raster (dag/week) — Outlook-stijl: gedeelde tijdas + N
   dagkolommen, afspraken als absoluut gepositioneerde compacte
   blokken. Horizontale scroll (zelfde .table-responsive-techniek als
   Sprint 6.5) zodat een weekweergave op smalle viewports leesbaar
   blijft i.p.v. de pagina te verbreden; verticale scroll uitsluitend
   binnen .agenda-hourgrid__body, zodat de pagina zelf niet extreem
   lang wordt.
   -------------------------------------------------------------------------- */

.agenda-hourgrid__scroll {
    overflow-x: auto;
}

.agenda-hourgrid__headerrow {
    display: grid;
    grid-template-columns: 56px 1fr;
}

.agenda-hourgrid__timeaxis-spacer {
    /* leeg — houdt de header uitgelijnd met de tijdas-kolom eronder */
}

.agenda-hourgrid__headers {
    display: grid;
    border-left: 1px solid var(--color-border);
}

.agenda-hourgrid__day-header {
    padding: 4px 4px;
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

.agenda-hourgrid__day-header--today {
    color: var(--color-primary);
    background: var(--color-background-warm);
}

.agenda-hourgrid__body {
    display: grid;
    grid-template-columns: 56px 1fr;
    max-height: 600px;
    overflow-y: auto;
}

.agenda-hourgrid__timeaxis {
    position: relative;
}

.agenda-hourgrid__hour-label {
    position: absolute;
    left: 0;
    right: 6px;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-align: right;
}

.agenda-hourgrid__days {
    display: grid;
    border-left: 1px solid var(--color-border);
}

.agenda-hourgrid__day-track {
    position: relative;
    border-right: 1px solid var(--color-border);
    /* Uurlijnen — 48px, zelfde waarde als ROW_HEIGHT_PX in de view.
       UX06B §3 — was var(--color-border) (#d8dee6, te aanwezig);
       nu een veel subtielere lijn via het reeds bestaande
       --color-primary-rgb-token (Sprint 8.3.x), i.p.v. een nieuwe
       kleurwaarde toe te voegen. */
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(var(--color-primary-rgb), 0.08) 0,
        rgba(var(--color-primary-rgb), 0.08) 1px,
        transparent 1px,
        transparent 48px
    );
}

/* Huidige-tijd-indicator (Outlook-achtig) — bestaande goud-accent
   i.p.v. een nieuwe kleur, blijft binnen de MC-stijl (geen rood). Puur
   presentatie, `top` komt uit de al bestaande $hourStart/$rowHeightPx-
   berekening (view), geen wijziging aan positionering/lane-logica. */
.agenda-hourgrid__now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-accent);
    z-index: 2;
    pointer-events: none;
}

.agenda-hourgrid__now-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Agenda-wijziging — persoonlijke kleurvoorkeur (localStorage, zie het
   "Kleuren"-paneel in agenda/index.php + het script onderaan die pagina):
   elke categorie krijgt hier drie CSS custom properties (basiskleur/
   achtergrondtint/leesbare tekstkleur), met als beginwaarde exact de
   kleur die deze vier categorieën al hadden (geen visuele wijziging bij
   een eerste bezoek, vóórdat een voorkeur is opgeslagen). Het JS-paneel
   overschrijft uitsluitend de WAARDE van deze variabelen (via een vast,
   beperkt palet — geen vrije kleurcode); welke categorie (private/team/
   google/cancelled) op een afspraak van toepassing is, blijft altijd
   server-bepaald ($resolveEventColor, agenda/index.php) en wordt door
   deze voorkeur nooit geraakt.
   -------------------------------------------------------------------------- */
:root {
    --agenda-color-private: var(--color-primary);
    --agenda-color-private-bg: rgba(var(--color-primary-rgb), 0.14);
    --agenda-color-private-text: var(--color-primary);

    --agenda-color-team: var(--color-accent);
    --agenda-color-team-bg: rgba(200, 155, 3, 0.18);
    --agenda-color-team-text: #8a6d03;

    --agenda-color-google: var(--color-gray-600);
    --agenda-color-google-bg: rgba(75, 85, 99, 0.14);
    --agenda-color-google-text: var(--color-gray-600);

    --agenda-color-cancelled: var(--color-danger);
    --agenda-color-cancelled-bg: var(--color-danger-bg);
    --agenda-color-cancelled-text: var(--color-danger);
}

.agenda-hourgrid__event {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-info);
    background: var(--color-info-bg);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.7rem;
    line-height: 1.25;
    transition: box-shadow var(--transition-fast);
}

.agenda-hourgrid__event:hover {
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

/* Update (Outlook-achtige weergave + betekenisvolle kleurcodering): de
   kleur van een blok/balk/chip komt voortaan uitsluitend van één van
   de .agenda-color--* klassen (verderop in dit bestand — eigen/team/
   Google/geannuleerd, elke aanroeper in resources/views/agenda/index.php
   kent er altijd precies één toe). Deze klasse (`--cancelled`) droeg
   voorheen zelf de "geannuleerd"-kleur (border-left/background) — dat
   is vervallen (dode CSS, geverifieerd: geen enkele view kent deze
   klasse nog toe) ten gunste van die ene, herbruikte kleurbron. De
   niet-kleur-behandeling (transparantie + doorstreping van de titel)
   is hernoemd naar het generieke `.agenda-status--cancelled-text`
   hieronder — bewust los van kleur, want dat blijft, samen met
   .agenda-color--cancelled, het "kleur is niet het enige signaal"-
   principe (elk blok/elke balk krijgt bovendien altijd een expliciete
   title/aria-label-tekst). */
.agenda-status--cancelled-text {
    opacity: 0.75;
}

.agenda-status--cancelled-text .agenda-hourgrid__event-title {
    text-decoration: line-through;
}

/* Bugfix (Agenda-review — onderwerp valt weg bij korte afspraken):
   .agenda-hourgrid__event-main groepeert tijd + onderwerp zodat ze bij
   te weinig hoogte (zie .agenda-hourgrid__event--compact hieronder,
   view-laag beslist op basis van de al bestaande $heightPx) gedwongen
   op één regel blijven staan i.p.v. dat het onderwerp buiten de
   `overflow: hidden`-rand van het blok valt. Bij voldoende hoogte
   (standaard, geen --compact) blijft tijd/onderwerp zoals voorheen elk
   op een eigen regel, met onderwerp nu ook over meerdere regels mogend
   wrappen i.p.v. na 1 regel af te kappen. Geen wijziging aan
   positionering/lane-logica/drag-drop-berekening. */
.agenda-hourgrid__event-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.agenda-hourgrid__event-time {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    flex: 0 0 auto;
    white-space: nowrap;
}

.agenda-hourgrid__event-title {
    font-weight: var(--font-weight-medium);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
}

.agenda-hourgrid__event-sub {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compacte variant — te weinig hoogte voor tijd + onderwerp elk op een
   eigen regel plús de dossier-/cliëntregel eronder. Tijd en onderwerp
   komen op één regel ("12:00 · Onderwerp"), met ellipsis wanneer het
   nog steeds niet past; de dossier-/cliëntregel wordt verborgen (blijft
   wél beschikbaar via de title-tooltip en aria-label op de link). */
.agenda-hourgrid__event--compact .agenda-hourgrid__event-main {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}

.agenda-hourgrid__event--compact .agenda-hourgrid__event-time::after {
    content: "\00b7";
    margin-left: 4px;
    font-weight: normal;
}

.agenda-hourgrid__event--compact .agenda-hourgrid__event-title {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.agenda-hourgrid__event--compact .agenda-hourgrid__event-sub {
    display: none;
}

/* --------------------------------------------------------------------------
   Maandweergave — compact raster
   -------------------------------------------------------------------------- */

.agenda-planner--month {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agenda-planner__weekday-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.agenda-planner__weekday-label {
    padding: 2px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-align: center;
}

.agenda-planner__month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.agenda-planner__month-cell {
    min-height: 68px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-background);
}

.agenda-planner__month-cell--today {
    border-color: var(--color-accent);
    background: var(--color-background-warm);
}

.agenda-planner__month-cell--muted {
    background: var(--color-gray-50);
}

.agenda-planner__month-cell--muted .agenda-planner__month-daynumber {
    color: var(--color-text-muted);
}

.agenda-planner__month-daynumber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

/* Bugfix (datumselectie in maandweergave): het dagnummer is nu een
   link naar de dagweergave van die datum (zie agenda/index.php) — deze
   hover/focus-stijl maakt dat klikbaar-zijn zichtbaar, zelfde patroon
   als .agenda-mini-calendar__day:hover hierboven. Geen wijziging aan
   de bestaande .agenda-planner__month-cell(--today/--muted)-stijlen. */
.agenda-planner__month-daynumber:hover,
.agenda-planner__month-daynumber:focus-visible {
    background: var(--color-gray-100);
    color: var(--color-text);
}

.agenda-planner__month-daynumber:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.agenda-event-chip {
    display: block;
    font-size: 0.65rem;
    padding: 1px 3px;
    border-radius: var(--radius-sm);
    background: var(--color-info-bg);
    color: var(--color-info);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hovergedrag gelijkgetrokken met .agenda-hourgrid__event:hover
   (Dag/Week) — ontbrak hier, terwijl de chip wél een klikbare link is. */
.agenda-event-chip:hover {
    box-shadow: var(--shadow-sm);
}

/* .agenda-event-chip--cancelled (background/color/line-through) is
   vervallen — vervangen door .agenda-color--cancelled (kleur) +
   .agenda-status--cancelled-text (doorstreping, hieronder uitgebreid
   met de chip-tekst zelf, die geen apart .agenda-hourgrid__event-title-
   element heeft). Geverifieerd: geen enkele view kende de oude
   klassenaam nog toe. */
.agenda-status--cancelled-text.agenda-event-chip {
    text-decoration: line-through;
}

.agenda-planner__month-overflow {
    font-size: 0.65rem;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Betekenisvolle kleurcodering (Outlook-achtig) — vaste, afgeleide
   categorie per afspraak (zie $resolveEventColor in agenda/index.php):
   privé (donkerblauw), team (goud), Google Workspace (grijs/blauw),
   geannuleerd (rood).
   Agenda-wijziging — was `.agenda-color--mine` (eigenaarschap,
   created_by_user_id): hernoemd naar `.agenda-color--private`
   (privacy, $event->visibility === PRIVATE) — kleur moet de
   PRIVACY-status signaleren, niet uitsluitend wie de afspraak
   aanmaakte, zie AgendaService::applyVisibility(). Elke variant komt
   nu uit een CSS custom property (--agenda-color-<categorie>/-bg/
   -text, zie :root hierboven) i.p.v. een hardgecodeerde tokenwaarde —
   dezelfde beginwaarde als voorheen, nu overschrijfbaar door de
   persoonlijke kleurvoorkeur (het "Kleuren"-paneel in agenda/index.php
   + het script onderaan die pagina, localStorage). Geen nieuwe
   kleurwaarde bij een eerste bezoek, geen databasekolom.
   Dezelfde vier klassen worden toegepast op .agenda-hourgrid__event
   (Dag/Week), .agenda-event-chip (Maand) én .agenda-multiday-bar —
   dezelfde afspraak heeft dus overal dezelfde kleur. Kleur is nooit
   het enige signaal: elke aanroeper voegt ook een tekstuele $label toe
   (title/aria-label), en geannuleerd blijft bovendien doorgestreept
   (.agenda-status--cancelled-text hierboven).
   -------------------------------------------------------------------------- */

.agenda-hourgrid__event.agenda-color--private,
.agenda-multiday-bar.agenda-color--private {
    border-left-color: var(--agenda-color-private);
    background: var(--agenda-color-private-bg);
}

.agenda-hourgrid__event.agenda-color--private .agenda-hourgrid__event-time {
    color: var(--agenda-color-private-text);
}

.agenda-event-chip.agenda-color--private {
    background: var(--agenda-color-private-bg);
    color: var(--agenda-color-private-text);
}

.agenda-hourgrid__event.agenda-color--team,
.agenda-multiday-bar.agenda-color--team {
    border-left-color: var(--agenda-color-team);
    background: var(--agenda-color-team-bg);
}

.agenda-hourgrid__event.agenda-color--team .agenda-hourgrid__event-time {
    color: var(--agenda-color-team-text);
}

.agenda-event-chip.agenda-color--team {
    background: var(--agenda-color-team-bg);
    color: var(--agenda-color-team-text);
}

.agenda-hourgrid__event.agenda-color--google,
.agenda-multiday-bar.agenda-color--google {
    border-left-color: var(--agenda-color-google);
    background: var(--agenda-color-google-bg);
}

.agenda-hourgrid__event.agenda-color--google .agenda-hourgrid__event-time {
    color: var(--agenda-color-google-text);
}

.agenda-event-chip.agenda-color--google {
    background: var(--agenda-color-google-bg);
    color: var(--agenda-color-google-text);
}

.agenda-hourgrid__event.agenda-color--cancelled,
.agenda-multiday-bar.agenda-color--cancelled {
    border-left-color: var(--agenda-color-cancelled);
    background: var(--agenda-color-cancelled-bg);
}

.agenda-hourgrid__event.agenda-color--cancelled .agenda-hourgrid__event-time {
    color: var(--agenda-color-cancelled-text);
}

.agenda-event-chip.agenda-color--cancelled {
    background: var(--agenda-color-cancelled-bg);
    color: var(--agenda-color-cancelled-text);
}

/* Agenda-herstelronde — client-side Mijn/Team-filter
   (#agenda-mine-filter-panel, agenda/index.php, MAKER-gebaseerd, was
   eerder een client-side PRIVACY-filter dat hier verwijderd is):
   verbergt reeds gerenderde event-elementen puur presentationeel (geen
   reload, geen herquery) wanneer hun data-created-by-me niet bij de
   actieve stand hoort. */
.agenda-event--hidden-by-filter {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Meerdaagse/all-day-balk (Outlook-achtig) — vervangt het herhaald
   verticaal dagblok per betrokken dag. Eén rij per zichtbare week
   ($plannerWeekRows, Controller): bij Dag/Week exact één rij
   (.agenda-hourgrid__allday-row, zelfde spacer/kolom-indeling als
   .agenda-hourgrid__headerrow), bij Maand één rij per kalenderweek
   (.agenda-planner__month-allday, "grid-column: 1/-1" binnen de
   bestaande .agenda-planner--month flex-kolom — vult daardoor
   automatisch de volle breedte van diezelfde 7-koloms rij, vóór de
   7 dagcellen van die week; geen wijziging aan
   .agenda-planner__month-grid's eigen "repeat(7, ...)"-kolommen).
   -------------------------------------------------------------------------- */

.agenda-hourgrid__allday-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    border-bottom: 1px solid var(--color-border);
    padding: 3px 0;
}

.agenda-hourgrid__allday-lanes {
    display: grid;
    gap: 2px;
    border-left: 1px solid var(--color-border);
    padding: 0 2px;
}

.agenda-planner__month-allday {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 2px;
}

.agenda-multiday-bar {
    display: flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-info);
    background: var(--color-info-bg);
    color: var(--color-text);
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: box-shadow var(--transition-fast);
}

.agenda-multiday-bar:hover {
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

/* Begint/eindigt de afspraak buiten de zichtbare week-rij: geen ronde
   hoek aan die kant (geeft visueel aan dat de balk "doorloopt" voorbij
   de rand van deze rij/dit scherm — de titel/tijd blijven via
   title/aria-label alsnog volledig opvraagbaar). */
.agenda-multiday-bar--continues-start {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.agenda-multiday-bar--continues-end {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* --------------------------------------------------------------------------
   Agenda-wijziging — persoonlijke kleurvoorkeur. Privé/Team-kleur
   kiest men op agenda/create.php + agenda/edit.php (zie
   .agenda-color-group, verderop in dit bestand) — beide hergebruiken
   dezelfde .agenda-color-panel__select-stijl hieronder, geen nieuw
   kleurcomponent.

   Testomgeving-only: Google Workspace/Geannuleerd hadden hier voorheen
   een eigen instelbare UI (#agenda-color-panel/.agenda-color-panel__row,
   in de zijbalk van agenda/index.php, "Overige agendakleuren") — die UI
   is verwijderd op verzoek van de opdrachtgever, dus ook deze twee,
   uitsluitend daardoor gebruikte regels zijn vervallen. De kleur-
   WAARDEN zelf (localStorage, sleutel mcAgendaColorPrefs.v1) blijven
   bestaan en worden nog toegepast, zie de docblock bij het script
   onderaan agenda/index.php. .agenda-color-panel__select (hieronder,
   ongewijzigd) blijft in gebruik op agenda/create.php/edit.php.
   -------------------------------------------------------------------------- */

.agenda-color-panel__select {
    font-size: var(--font-size-xs);
    padding: 2px 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-background);
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Agenda-herstelronde — kort verduidelijkend hintje onder de "Mijn
   afspraken"-sectiekop, en de knoppen zelf: hergebruikt exact de al
   bestaande .agenda-filter-radio-knopstijl. Was tot voor kort een
   `<a href>`-link (paginanavigatie); nu een `<button type="button">`
   (client-side filter, zie het script in agenda/index.php) — zelfde
   classes/uiterlijk, dus deze reset is nodig om de browser-standaard
   knoprand/-achtergrond weg te halen (die een `<a>` nooit had).
   -------------------------------------------------------------------------- */

.agenda-side-panel__hint {
    margin: 2px 0 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

#agenda-mine-filter-panel .agenda-filter-radio {
    appearance: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Agenda-wijziging — Privé/Team-keuze op agenda/create.php + edit.php.
   Ronde 6 (bugfix): de geselecteerde staat werd voorheen bepaald door
   een server-side gerenderde `--active`-class op de <label> (bepaald
   bij page-load via `$selectedVisibility`). Dat is functioneel altijd
   correct voor de ECHTE radiowaarde (`checked` staat nog steeds op de
   juiste <input>, `name="visibility"` ongewijzigd), maar de VISUELE
   highlight volgde een klik niet — er was geen enkel mechanisme
   (geen JS, geen CSS) dat de styling na een klik bijwerkte, dus de
   markering bleef op de bij page-load geselecteerde optie staan zolang
   de pagina niet herlaadt. Vervangen door een zuivere CSS-oplossing op
   basis van `:has(input:checked)` — de browser houdt de radiostatus
   zelf bij, dus de highlight kan per definitie nooit meer uit de pas
   lopen met de daadwerkelijke formulierwaarde, zonder JavaScript. Geen
   wijziging aan `name="visibility"`/`value="PRIVATE"`|`"TEAM"`/
   `checked`-logica in de view — uitsluitend welke CSS-regel de
   highlight bepaalt.
   Kleuren nu op de bestaande MC-navy-tokens (`--mc-navy`/`--mc-line`/
   `--mc-white`, mc-ui.css) i.p.v. de generieke `--color-primary`
   (donkerder, en `--color-surface` bleek nergens gedefinieerd — leverde
   via de fallback toevallig wit op, maar was niet de bedoelde MC-brand-
   kleur) — zelfde navy als de rest van deze twee formulieren.

   Testomgeving-only: `.agenda-visibility-row` (voorheen hier, de
   Tijdzone+Zichtbaarheid-rijwrapper van de oudere agenda/edit.php-
   opbouw) is verwijderd — agenda/edit.php gebruikt nu dezelfde
   `.agenda-visibility-section`-opbouw als agenda/create.php (zie
   verderop in dit bestand); geen enkele view gebruikt deze class nog. */

.agenda-visibility-choice {
    display: inline-flex;
    border: 1px solid var(--mc-line);
    border-radius: 9999px;
    overflow: hidden;
}

.agenda-visibility-option {
    display: flex;
    align-items: center;
    position: relative;
    padding: 4px 14px;
    cursor: pointer;
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium, 600);
    color: var(--mc-navy);
    background: var(--mc-white);
    transition: background-color 100ms ease-in-out, color 100ms ease-in-out, box-shadow 100ms ease-in-out;
}

.agenda-visibility-option + .agenda-visibility-option {
    border-left: 1px solid var(--mc-line);
}

/* Geselecteerd: exact dezelfde lichte, transparante achtergrondtint als
   de actieve/hover-kolomkop op de gebruikerspagina
   (`.mc-sortable-th__btn:hover`, hierboven in dit bestand) —
   `rgba(var(--color-primary-rgb), 0.10)` + `var(--mc-navy)`-tekst, geen
   nieuwe kleur verzonnen. Subtiele navy rand als inset box-shadow —
   geen extra layout-/paddingimpact, houdt de gedeelde pil-vorm van
   .agenda-visibility-choice intact. */
.agenda-visibility-option:has(input:checked) {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--mc-navy);
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.35);
}

/* Radio blijft functioneel/keyboard-bereikbaar (geen display:none) —
   uitsluitend visueel verborgen, zelfde bewezen "sr-only"-patroon,
   zodat de segmented control als geheel klikbaar/toetsenbord-
   bedienbaar blijft via de omringende <label>. `position: relative` op
   de ouder (hierboven) verankert deze absoluut gepositioneerde input
   correct binnen de eigen <label> i.p.v. bij een verder weg gelegen
   positioned ancestor. */
.agenda-visibility-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.agenda-visibility-option:focus-within {
    outline: 2px solid var(--mc-navy);
    outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Zichtbaarheid + Agendakleur op agenda/create.php + agenda/edit.php —
   herstructurering (was één doorlopende rij met Tijdzone/Privé/Team/
   Kleur Privé/Kleur Team/Google Workspace/Geannuleerd door elkaar,
   gemeld als "rommelig"). Zichtbaarheid staat in een eigen, duidelijk
   afgebakend blok (.agenda-visibility-section — rand/achtergrond,
   bestaande MC-tokens), nu op BEIDE formulieren (agenda/edit.php
   gebruikte hiervoor eerder een eigen, kalere opbouw — zie de
   view-docblock daar).

   Testomgeving-only, kleurkeuze: Kleur voor Privé/Kleur voor Team staan
   elk in een eigen veldgroep (.agenda-color-group: label boven het
   selectievak, i.p.v. de oorspronkelijke opbouw die label+select naast
   elkaar op één regel zette — dat werd bij smallere breedtes al snel
   krap/overlappend). Uitsluitend de veldgroep van de actieve Privé/
   Team-keuze is zichtbaar (`[hidden]`, zie hieronder — nooit beide
   tegelijk; een eerdere tussenronde toonde ze wél allebei in een
   2-koloms grid, teruggedraaid op verzoek van de opdrachtgever), dus
   geen kolommenindeling meer nodig: .agenda-color-groups is een gewone
   blokwrapper, precies één zichtbare veldgroep tegelijk. Hergebruikt
   bewust de al bestaande .agenda-color-panel__select-stijl hieronder,
   geen nieuw kleurcomponent. Google Workspace/Geannuleerd staan hier
   niet (geen aanmaak-/bewerkkeuzes); die kleurWAARDEN blijven wél
   bestaan en worden nog toegepast op de hoofdagenda, zie de docblock
   bij agenda/index.php.
   -------------------------------------------------------------------------- */

.agenda-timezone-row {
    display: flex;
}

.agenda-form-workspace .agenda-visibility-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    background: var(--mc-white);
}

.agenda-visibility-section__label {
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium, 600);
    color: var(--mc-navy);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.agenda-form-workspace .agenda-visibility-section__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Testomgeving-only — kleurkeuze nu INLINE, direct naast de Privé/Team-
   pillen (bijv. "[Privé] [Kleur voor Privé ▼]" op één regel) i.p.v.
   als los blok eronder: `.agenda-color-groups` is zelf geen eigen
   flex/grid-container meer (uitsluitend nog een lichte wrapper, geen
   layout-declaratie nodig), want de view plaatst 'm nu als tweede kind
   IN `.agenda-visibility-section__body` (die al `display:flex;
   flex-direction:row` is, hierboven) — daardoor schuift de zichtbare
   `.agenda-color-group` vanzelf naast `.agenda-visibility-choice`. */
.agenda-color-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* `[hidden]` expliciet met `display: none` afdwingen: zonder deze
   regel zou de losse `display: flex` hierboven (auteur-oorsprong) de
   `[hidden]`-regel uit het browser-standaardstijlblad (user-agent-
   oorsprong) overstemmen — auteurstijlen winnen altijd van user-agent-
   stijlen bij gelijke specificiteit, ongeacht brondocumentvolgorde.
   Zonder deze regel zou de "verborgen" veldgroep dus tóch zichtbaar
   (en per ongeluk met het toetsenbord bereikbaar) blijven. */
.agenda-color-group[hidden] {
    display: none;
}

/* Label nu vóór (links van) het selectievak i.p.v. erboven — past bij
   de compacte, inline positionering naast de Privé/Team-pillen
   hierboven. `white-space: nowrap` voorkomt dat "Kleur voor Privé"/
   "Kleur voor Team" afbreekt op een setontstane, veel te smalle kolom. */
.agenda-color-group__label {
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium, 600);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.agenda-color-panel__select:focus {
    outline: 2px solid var(--mc-navy);
    outline-offset: -1px;
}

/* --------------------------------------------------------------------------
   Uitlijningscorrectie — Privé/Team als twee losse, even hoge tegels
   naast elkaar, uitgelijnd op dezelfde hoogte als de kleurselects
   ernaast. Gescoped op .agenda-visibility-section, nu op zowel
   agenda/create.php als agenda/edit.php aanwezig (beide gebruiken
   dezelfde opbouw, zie de view-docblocks). De geselecteerde/hover/
   focus-kleurlogica (rgba(--color-primary-rgb)/outline, hierboven) is
   hier niet aangeraakt — uitsluitend vorm/hoogte/afstand zijn
   aangepast. Vaste hoogte (32px, box-sizing: border-box) op zowel de
   tegels als de kleurselects i.p.v. `align-items: stretch`, zodat
   beide gegarandeerd exact gelijk zijn ongeacht kleine verschillen in
   content/lettertype-rendering.

   Update (Testomgeving-only, extra tussenruimte): `.agenda-visibility-
   section`-gap 8px -> 12px (meer ruimte tussen het "Zichtbaarheid"-label
   en de pillen/kleurenrij) en `.agenda-visibility-section__body`-gap
   14px -> 20px (meer ruimte tussen de Privé/Team-pillen en het
   kleurveld ernaast). De al bestaande vaste 32px-hoogte + align-items:
   center hierboven/hieronder zorgen dat de Privé- en Team-kleurselect
   — ongeacht welke van de twee zichtbaar is — exact op dezelfde hoogte
   als de pillen blijft uitlijnen; uitsluitend de gap-waarden zijn
   aangepast, geen wijziging aan de kleurenlogica (nog altijd precies
   één zichtbare `.agenda-color-group` per keer, via `[hidden]`).
   -------------------------------------------------------------------------- */

.agenda-visibility-section .agenda-visibility-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.agenda-visibility-section .agenda-visibility-option {
    height: 32px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid var(--mc-line);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.agenda-color-group .agenda-color-panel__select {
    width: auto;
    min-width: 130px;
    height: 32px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: var(--font-size-xs, 12px);
}

@media (max-width: 640px) {
    .agenda-form-workspace .agenda-visibility-section__body {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .agenda-color-group .agenda-color-panel__select {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* --------------------------------------------------------------------------
   Responsive — zelfde drempels als de bestaande .app-shell/
   .dashboard-grid-secties elders in dit bestand (968px/640px).
   Tablet: linkerkolom boven, agenda eronder (volle breedte, geen
   layoutbreuk). Mobiel: verder verdichting.
   -------------------------------------------------------------------------- */

@media (max-width: 968px) {

    /* UX07 §11 — geldt uitsluitend bij Maand; --full is al 1 kolom. */
    .agenda-workspace__body--with-sidebar {
        grid-template-columns: 1fr;
    }

    .agenda-side-panel {
        flex-direction: row;
        flex-wrap: wrap;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .agenda-side-panel__section {
        flex: 1 1 200px;
    }

    .agenda-side-panel__section + .agenda-side-panel__section {
        border-top: none;
        border-left: 1px solid var(--color-border);
    }

}

@media (max-width: 640px) {

    .agenda-toolbar-bar__title-group {
        margin-right: 0;
        width: 100%;
    }

    .agenda-search-input {
        display: none;
    }

    .agenda-side-panel {
        flex-direction: column;
    }

    .agenda-side-panel__section {
        flex: 1 1 auto;
    }

    .agenda-side-panel__section + .agenda-side-panel__section {
        border-left: none;
        border-top: 1px solid var(--color-border);
    }

    .agenda-planner__month-cell {
        min-height: 48px;
    }

    .agenda-hourgrid__body {
        max-height: 480px;
    }

}

/* ==========================================================================
   Sprint 10 — UX09A
   Dossier Workspace Foundation (Header, Overzicht & Agenda)
   ==========================================================================
   Uitsluitend gebruikt op resources/views/dossiers/show.php. Nieuw
   scherm, geen verfijning van een bestaande sectie — daarom als eigen
   sectie toegevoegd (zelfde toevoegen-conventie als bij de eerste
   introductie van de Agenda-sectie, UX06), niet in-place in een
   bestaande sectie bewerkt. Uitsluitend bestaande Design Tokens.
   Reeds bestaande, hergebruikte classes (hier niet opnieuw
   gedefinieerd): .agenda-workspace__frame, .dashboard-widget__list,
   .dashboard-list-item*, .dashboard-empty-state*, a.btn-accent,
   .btn-secondary, .btn-danger, .alert*.
   ========================================================================== */

.dossier-workspace {
    display: flex;
    flex-direction: column;
}

.dossier-workspace__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.dossier-workspace__header-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.dossier-workspace__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.dossier-workspace__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.dossier-workspace__subject {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.dossier-workspace__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    margin-top: var(--space-xs);
}

.dossier-workspace__meta-item {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.dossier-workspace__actions {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.dossier-workspace__delete-form {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.dossier-workspace__delete-reason {
    width: 160px;
    margin-bottom: 0;
    padding: 6px var(--space-sm);
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Tabnavigatie — twee goedgekeurde tabs (Overzicht/Agenda), server-side
   geselecteerd via ?tab=. Zelfde onderlijnde-actieve-staat-conventie
   als .agenda-view-toggle__link--active hierboven, hier als
   horizontale tabstrip i.p.v. een gesegmenteerde knoppengroep.
   -------------------------------------------------------------------------- */

.dossier-tabs {
    display: flex;
    gap: var(--space-md);
    padding: 0 var(--space-md);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.dossier-tabs__link {
    display: inline-block;
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

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

.dossier-tabs__link--active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-bottom-color: var(--color-accent);
}

.dossier-workspace__body {
    padding: var(--space-md);
}

.dossier-workspace__tab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.dossier-workspace__tab-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Overzicht-tab — rustige 2-koloms detailindeling, geen kale
   sleuteltabel (§Overzicht-tab van de opdracht).
   -------------------------------------------------------------------------- */

.dossier-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.dossier-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.dossier-field:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.dossier-field__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dossier-field__value {
    font-size: var(--font-size-base);
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Bugfix (statusbadge-consistentie, testomgeving-only): de hier
   voorheen aanwezige `.status-pill`-basisregel en alle
   `.status-pill--open/--on-hold/--awaiting-client/--completed/
   --closed/--archived/--deleted`-varianten zijn verwijderd. Read-only
   bevestigd (resources/views/, app/, routes/, public/, tests/) dat
   geen enkele actieve markup, JavaScript of andere runtimecode deze
   classes nog gebruikte — dossiers/show.php en clients/show.php (de
   laatste twee gebruikers) tonen hun statusbadge inmiddels via
   `.mc-badge`/`.mc-badge--*` (mc-ui.css), dezelfde component als elke
   andere portalpagina. Geen nieuwe CSS toegevoegd; uitsluitend deze
   dode regels weggenomen.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive — tablet (kolommen stapelen, acties bereikbaar) en mobiel
   (compacte header, horizontaal scrollbare tabstrip, geen horizontale
   paginabreuk).
   -------------------------------------------------------------------------- */

@media (max-width: 968px) {

    .dossier-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .dossier-workspace__header {
        flex-direction: column;
        align-items: stretch;
    }

    .dossier-workspace__actions {
        justify-content: flex-start;
    }

    .dossier-workspace__delete-form {
        flex-wrap: wrap;
    }

    .dossier-workspace__delete-reason {
        width: 100%;
    }

    .dossier-tabs {
        gap: var(--space-sm);
    }
}

.dossier-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.dossier-summary__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 76px;
    padding: var(--space-sm) var(--space-md);
    background: rgba(var(--color-primary-rgb), 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.dossier-summary__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dossier-summary__value {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bugfix (statusbadge-consistentie, testomgeving-only): de hier
   voorheen aanwezige `.dossier-summary__card .status-pill`-regel is
   verwijderd samen met de rest van `.status-pill` (zie de toelichting
   hierboven bij de voormalige "Status-pill"-sectie). */

@media (max-width: 968px) {
    .dossier-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dossier-summary {
        grid-template-columns: 1fr;
    }
}

/* Schermbrede dossier-workspace */
.container--fluid {
    width: 100%;
    max-width: none;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

.container--fluid .dossier-workspace {
    width: 100%;
    max-width: none;
}

@media (max-width: 640px) {
    .container--fluid {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}

/* Moderne full-width portal-layout */
.app-content {
    max-width: none;
    width: 100%;
}

.client-workspace {
    width: 100%;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.client-workspace__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.client-workspace__eyebrow,
.client-summary__label,
.client-field__label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.client-workspace__title {
    margin: 2px 0 0;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.client-workspace__subtitle {
    margin: var(--space-xs) 0 0;
    color: var(--color-text-muted);
}

.client-workspace__tabs {
    display: flex;
    gap: var(--space-lg);
    padding: 0 var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.client-workspace__tab {
    padding: var(--space-sm) 0;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.client-workspace__tab--active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-bottom-color: var(--color-accent);
}

.client-workspace__body {
    padding: var(--space-lg);
}

.client-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.client-summary__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-height: 76px;
    padding: var(--space-md);
    background: rgba(var(--color-primary-rgb), 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.client-summary__value {
    overflow: hidden;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.client-details__section h2,
.client-danger-zone h2 {
    margin: 0 0 var(--space-sm);
    color: var(--color-primary);
    font-size: var(--font-size-base);
}

.client-details__grid {
    display: grid;
    gap: var(--space-sm);
}

.client-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.client-field__value {
    color: var(--color-text);
}

.client-field--wide {
    grid-column: 1 / -1;
}

.client-danger-zone {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.client-danger-zone p {
    color: var(--color-text-muted);
}

.client-danger-zone__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.client-danger-zone__actions input {
    margin-bottom: 0;
}

.client-workspace__back {
    margin: var(--space-lg) 0 0;
}

@media (max-width: 968px) {
    .client-summary,
    .client-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .client-workspace__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-summary,
    .client-details {
        grid-template-columns: 1fr;
    }

    .client-field--wide {
        grid-column: auto;
    }
}

.client-workspace {
    width: 100%;
    overflow: hidden;
}

.client-workspace > h1 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.client-details-table {
    margin-top: var(--space-lg);
}

.client-details-table th {
    width: 220px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    background: rgba(var(--color-primary-rgb), 0.03);
}

.client-details-table td,
.client-details-table th {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.client-details-table tr:last-child td,
.client-details-table tr:last-child th {
    border-bottom: 0;
}

@media (max-width: 640px) {
    .client-details-table th {
        width: 38%;
    }
}

.client-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.client-summary__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-height: 70px;
    padding: var(--space-md);
    background: rgba(var(--color-primary-rgb), 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.client-summary__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}

.client-summary__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 968px) {
    .client-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .client-summary {
        grid-template-columns: 1fr;
    }
}

.clients-list-workspace {
    width: 100%;
    overflow: hidden;
}

.clients-list-workspace h1 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.clients-list-table {
    margin-top: var(--space-lg);
}

.clients-list-table th {
    white-space: nowrap;
}

.clients-list-table td,
.clients-list-table th {
    vertical-align: middle;
}

.clients-list-table td:last-child {
    white-space: nowrap;
}

@media (max-width: 968px) {
    .clients-list-table {
        min-width: 820px;
    }
}

.client-form-workspace {
    width: 100%;
}

.client-form-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.client-form-workspace .form-grid {
    width: 100%;
}

@media (max-width: 640px) {
    .client-form-workspace {
        padding: var(--space-md);
    }
}

.client-requests-list-workspace {
    width: 100%;
    overflow: hidden;
}

.client-requests-list-workspace h1 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.client-requests-list-table {
    margin-top: var(--space-lg);
}

.client-requests-list-table th {
    white-space: nowrap;
}

.client-requests-list-table td,
.client-requests-list-table th {
    vertical-align: middle;
}

.client-requests-list-table td:last-child {
    white-space: nowrap;
}

@media (max-width: 968px) {
    .client-requests-list-table {
        min-width: 760px;
    }
}

.client-request-workspace {
    width: 100%;
    overflow: hidden;
}

.client-request-workspace > h1 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.client-request-details-table {
    margin-top: var(--space-lg);
}

.client-request-details-table th {
    width: 220px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    background: rgba(var(--color-primary-rgb), 0.03);
}

.client-request-details-table td,
.client-request-details-table th {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.client-request-details-table tr:last-child td,
.client-request-details-table tr:last-child th {
    border-bottom: 0;
}

@media (max-width: 640px) {
    .client-request-details-table th {
        width: 38%;
    }
}

.client-request-form-workspace {
    width: 100%;
}

.client-request-form-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.client-request-form-workspace .form-grid {
    width: 100%;
}

@media (max-width: 640px) {
    .client-request-form-workspace {
        padding: var(--space-md);
    }
}

.invoices-list-workspace {
    width: 100%;
    overflow: hidden;
}

.invoices-list-workspace h1 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.invoices-list-table {
    margin-top: var(--space-lg);
}

.invoices-list-table th {
    white-space: nowrap;
}

.invoices-list-table td,
.invoices-list-table th {
    vertical-align: middle;
}

@media (max-width: 968px) {
    .invoices-list-table {
        min-width: 900px;
    }
}

.invoices-list-workspace {
    width: 100%;
    overflow: hidden;
}

.invoices-list-workspace h1 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.invoices-list-table {
    margin-top: var(--space-lg);
}

.invoices-list-table th {
    white-space: nowrap;
}

.invoices-list-table td,
.invoices-list-table th {
    vertical-align: middle;
}

@media (max-width: 968px) {
    .invoices-list-table {
        min-width: 900px;
    }
}

.invoice-detail-workspace {
    width: 100%;
    overflow: hidden;
}

.invoice-detail-workspace h1 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.invoice-detail-table {
    margin-top: var(--space-lg);
}

.invoice-detail-table th {
    width: 260px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    background: rgba(var(--color-primary-rgb), 0.03);
}

.invoice-detail-table td,
.invoice-detail-table th {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.invoice-detail-table tr:last-child td,
.invoice-detail-table tr:last-child th {
    border-bottom: 0;
}

.invoice-form-workspace {
    width: 100%;
}

.invoice-form-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.invoice-form-workspace .form-grid {
    width: 100%;
}

@media (max-width: 640px) {
    .invoice-form-workspace {
        padding: var(--space-md);
    }
}

.dossiers-list-workspace {
    width: 100%;
    overflow: hidden;
}

.dossiers-list-workspace h1 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.dossiers-list-table {
    margin-top: var(--space-lg);
}

.dossiers-list-table th {
    white-space: nowrap;
}

.dossiers-list-table td,
.dossiers-list-table th {
    vertical-align: middle;
}

.dossiers-list-table td:last-child {
    white-space: nowrap;
}

@media (max-width: 968px) {
    .dossiers-list-table {
        min-width: 760px;
    }
}

.dossier-form-workspace {
    width: 100%;
}

.dossier-form-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.dossier-form-workspace .form-grid {
    width: 100%;
}

.agenda-form-workspace {
    width: 100%;
}

.agenda-form-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.agenda-form-workspace .form-grid {
    width: 100%;
}

.activities-list-workspace,
.activity-form-workspace {
    width: 100%;
    overflow: hidden;
}

.activities-list-workspace h1,
.activity-form-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.activities-list-table {
    margin-top: var(--space-lg);
}

.activities-list-table th,
.activities-list-table td {
    vertical-align: middle;
}

.activities-list-table th {
    white-space: nowrap;
}

.activity-form-workspace .form-grid {
    width: 100%;
}

@media (max-width: 968px) {
    .activities-list-table {
        min-width: 760px;
    }
}

.tariffs-list-workspace,
.tariff-form-workspace {
    width: 100%;
    overflow: hidden;
}

.tariffs-list-workspace h1,
.tariff-form-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.tariffs-list-table {
    margin-top: var(--space-lg);
}

.tariffs-list-table th,
.tariffs-list-table td {
    vertical-align: middle;
}

.tariffs-list-table th {
    white-space: nowrap;
}

.tariff-form-workspace .form-grid {
    width: 100%;
}

@media (max-width: 968px) {
    .tariffs-list-table {
        min-width: 760px;
    }
}

.time-entry-workspace {
    width: 100%;
    overflow: hidden;
}

.time-entry-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.time-entry-workspace .form-grid {
    width: 100%;
}

.time-entries-list-table {
    margin-top: var(--space-lg);
}

.time-entries-list-table th {
    white-space: nowrap;
}

.time-entries-list-table td,
.time-entries-list-table th {
    vertical-align: middle;
}

.time-entry-detail-table {
    margin-top: var(--space-lg);
}

.time-entry-detail-table th {
    width: 260px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    background: rgba(var(--color-primary-rgb), 0.03);
}

.time-entry-detail-table td,
.time-entry-detail-table th {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

@media (max-width: 968px) {
    .time-entries-list-table {
        min-width: 760px;
    }
}

.user-workspace {
    width: 100%;
    overflow: hidden;
}

.user-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.user-workspace .form-grid {
    width: 100%;
}

.users-list-table {
    margin-top: var(--space-lg);
}

.users-list-table th {
    white-space: nowrap;
}

.users-list-table td,
.users-list-table th {
    vertical-align: middle;
}

.user-detail-table {
    margin-top: var(--space-lg);
}

.user-detail-table th {
    width: 260px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    background: rgba(var(--color-primary-rgb), 0.03);
}

.user-detail-table td,
.user-detail-table th {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

@media (max-width: 968px) {
    .users-list-table {
        min-width: 760px;
    }
}

.advice-report-workspace {
    width: 100%;
    max-width: none !important;
    overflow: hidden;
}

.advice-report-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.advice-reports-list-workspace {
    width: 100%;
}

.advice-reports-list-table {
    margin-top: var(--space-lg);
}

.advice-reports-list-table th {
    white-space: nowrap;
}

.advice-reports-list-table td,
.advice-reports-list-table th {
    vertical-align: middle;
}

@media (max-width: 968px) {
    .advice-reports-list-table {
        min-width: 760px;
    }
}

.advice-report-workspace form {
    width: 100%;
    max-width: none;
}

.advice-report-workspace .form-group {
    width: 100%;
    max-width: none;
}

.advice-report-workspace input,
.advice-report-workspace select,
.advice-report-workspace textarea {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.advice-report-workspace textarea {
    min-height: 120px;
}

@media (min-width: 969px) {
    .advice-report-workspace form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md) var(--space-lg);
    }

    .advice-report-workspace form h1,
    .advice-report-workspace form button,
    .advice-report-workspace form .form-group:nth-last-child(-n+1) {
        grid-column: 1 / -1;
    }
}

.letter-workspace {
    width: 100%;
    max-width: none;
    overflow: hidden;
}

.letter-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.letter-workspace form {
    width: 100%;
    max-width: none;
}

.letter-workspace input,
.letter-workspace select,
.letter-workspace textarea {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.letters-list-table {
    width: 100%;
    margin-top: var(--space-lg);
}

.letters-list-table th {
    white-space: nowrap;
}

.letters-list-table td,
.letters-list-table th {
    vertical-align: middle;
}

@media (max-width: 968px) {
    .letters-list-table {
        min-width: 760px;
    }
}

.dashboard-workspace {
    width: 100%;
    max-width: none;
    overflow: hidden;
}

.dashboard-workspace .dashboard-grid {
    width: 100%;
}

.dashboard-workspace .dashboard-section {
    width: 100%;
}

.agenda-form-workspace,
.agenda-detail-workspace,
.intake-workspace,
.matter-types-workspace,
.google-drive-workspace {
    width: 100%;
    max-width: none;
    overflow: hidden;
}

.agenda-form-workspace .form-grid,
.intake-workspace .form-grid,
.matter-types-workspace .form-grid {
    width: 100%;
}

.agenda-detail-table,
.intake-summary-table,
.google-drive-detail-table {
    width: 100%;
    margin-top: var(--space-lg);
}

.agenda-detail-table th,
.google-drive-detail-table th {
    width: 260px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    background: rgba(var(--color-primary-rgb), 0.03);
}

.agenda-detail-table td,
.agenda-detail-table th,
.google-drive-detail-table td,
.google-drive-detail-table th {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.matter-types-list-table {
    width: 100%;
    margin-top: var(--space-lg);
}

.matter-types-list-table th {
    white-space: nowrap;
}

.matter-types-list-table td,
.matter-types-list-table th {
    vertical-align: middle;
}

@media (max-width: 968px) {
    .matter-types-list-table {
        min-width: 760px;
    }
}

.letter-detail-workspace,
.home-workspace__card {
    width: 100%;
    max-width: none;
    overflow: hidden;
}

.letter-detail-workspace h1,
.home-workspace h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.letter-detail-workspace table {
    width: 100%;
}

.letter-detail-workspace input,
.letter-detail-workspace textarea,
.letter-detail-workspace select {
    max-width: 100%;
    box-sizing: border-box;
}

.client-requests-list-workspace {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.client-requests-list-workspace h1 {
    font-size: var(--font-size-2xl);
    letter-spacing: -0.02em;
}

.client-requests-list-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.client-requests-list-table thead th {
    padding: var(--space-md);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: var(--color-surface-muted);
    border-bottom: 2px solid var(--color-border);
}

.client-requests-list-table tbody tr {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.client-requests-list-table tbody tr:hover {
    background: rgba(var(--color-primary-rgb), 0.05);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.client-requests-list-table tbody td {
    padding: var(--space-md);
}

.client-requests-list-table tbody td:nth-child(5) {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
}

.client-requests-list-table td:last-child a {
    display: inline-block;
    margin-right: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.client-requests-list-table td:last-child a:hover {
    color: var(--color-surface);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.client-requests-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.client-requests-summary__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 92px;
    padding: var(--space-md);
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.08),
        rgba(var(--color-primary-rgb), 0.02)
    );
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.client-requests-summary__label {
    margin-bottom: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.client-requests-summary__value {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.client-requests-summary__action {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.client-requests-summary__action:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .client-requests-summary {
        grid-template-columns: 1fr;
    }
}

.client-requests-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.client-requests-summary__card {
    min-height: 70px;
    padding: var(--space-md);
    background: rgba(var(--color-primary-rgb), 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.client-requests-summary__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}

.client-requests-summary__value {
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.client-request-status {
    display: inline-flex;
    align-items: center;
    min-width: 76px;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.10);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.client-request-status--rejected {
    color: #991b1b;
    background: #fee2e2;
}

.client-request-status--new {
    color: #075985;
    background: #e0f2fe;
}

.client-requests-list-table td:last-child a {
    margin-right: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

@media (max-width: 768px) {
    .client-requests-summary {
        grid-template-columns: 1fr;
    }
}

.client-requests-list-workspace {
    position: relative;
    width: 100%;
    max-width: none;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.client-requests-list-workspace > h1 {
    display: inline-block;
    margin: 0;
    color: var(--color-primary);
    font-size: var(--font-size-2xl);
    letter-spacing: -0.02em;
}

.client-requests-list-workspace > p.mb-md {
    float: right;
    margin: 0 0 var(--space-lg);
}

.client-requests-list-workspace::after {
    display: block;
    clear: both;
    content: "";
}

.client-requests-summary {
    clear: both;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.client-requests-summary__card {
    min-height: 70px;
    padding: var(--space-md);
    background: #f8fafc;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.client-requests-summary__label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

.client-requests-summary__value {
    color: var(--color-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.client-requests-list-table {
    width: 100%;
    margin-top: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.client-requests-list-table tbody tr:hover {
    background: #f8fafc;
}

@media (max-width: 768px) {
    .client-requests-list-workspace > h1 {
        display: block;
    }

    .client-requests-list-workspace > p.mb-md {
        float: none;
        margin-top: var(--space-md);
    }

    .client-requests-summary {
        grid-template-columns: 1fr;
    }
}

body:has(.client-requests-list-workspace) {
    background-color: #ffffff;
    background-image: none;
}

body:has(.client-requests-list-workspace) .app-content {
    background-color: #ffffff;
    background-image: none;
}

.dossier-workspace {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.dossier-workspace__header {
    padding: var(--space-md);
}

.dossier-workspace__title {
    font-size: var(--font-size-xl);
}

.dossier-tabs {
    min-height: 44px;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.dossier-summary__card {
    min-height: 76px;
    padding: var(--space-sm);
    background: #f8fafc;
}

.dossier-summary__value {
    white-space: normal;
    overflow-wrap: anywhere;
}

.dossier-workspace__body {
    padding: var(--space-md);
}

@media (max-width: 640px) {
    .container--fluid {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .dossier-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .dossier-summary__card {
        min-height: 78px;
        padding: 8px;
    }

    .dossier-summary__label {
        font-size: 10px;
    }

    .dossier-summary__value {
        font-size: 13px;
    }

    .dossier-tabs {
        gap: 16px;
        overflow-x: auto;
    }

    .dossier-tabs__link {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 12px;
    }
}

.dossier-overview {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.dossier-overview__column {
    display: contents;
}

.dossier-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 46px;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.dossier-field__label {
    flex: 0 0 38%;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: none;
    letter-spacing: normal;
}

.dossier-field__value {
    flex: 1;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

.dossier-field__value small {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

@media (max-width: 640px) {
    .dossier-field {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .dossier-field__label,
    .dossier-field__value {
        flex: none;
        width: 100%;
        text-align: left;
    }
}

.dossier-section-title {
    margin: 0 0 var(--space-md);
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

/* Kerngegevens staan al bovenaan in de vier samenvattingskaarten. */
.dossier-overview__column:first-child .dossier-field:nth-child(1),
.dossier-overview__column:first-child .dossier-field:nth-child(3),
.dossier-overview__column:first-child .dossier-field:nth-child(4),
.dossier-overview__column:first-child .dossier-field:nth-child(5) {
    display: none;
}