/* Dashboard custom CSS bovenop Tailwind — i-leadership-huisstijl.
 *
 * Plus Jakarta Sans (self-hosted), Ink Black #141414, Sky Cyan #2DB4F4, Deep Indigo #180EA2,
 * Paper White en Soft Mist #F5F6FA. De variabelenamen ``--brand-purple*`` blijven bestaan
 * zodat alle bestaande componenten de nieuwe kleuren meteen overnemen.
 * Rood blijft enkel voor P1 en fouten, oranje voor P2.
 */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url(/dashboard/static/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url(/dashboard/static/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url(/dashboard/static/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 700; src: url(/dashboard/static/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 800; src: url(/dashboard/static/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2"); }

:root {
    --il-ink: #141414;
    --il-cyan: #2DB4F4;
    --il-indigo: #180EA2;
    --il-mist: #F5F6FA;

    --brand-purple: #180EA2;
    --brand-purple-dark: #120A7A;
    --brand-purple-light: #EEEDFA;

    /* Statuskleuren. De basisvarianten zijn bedoeld voor NIET-tekst: bolletjes,
       randen, accentlijnen. Daar geldt WCAG's 3:1-eis voor grafische objecten en die
       halen ze (waiting 3,19:1 · ready 3,30:1 op wit).

       Voor TEKST gelden 4,5:1 en zakken die twee er dus onder (audit-ronde 3, U9).
       Daarvoor zijn de ``-text``-varianten: de 700-tonen halen 5,02:1. Twee aparte
       tokens i.p.v. één donkerder token voor alles, want de bolletjes en accentlijnen
       worden met een donkerdere tint visueel zwaarder dan bedoeld. */
    --status-urgent: #dc2626;        /* 4,83:1 — voldoet ook als tekst */
    --status-urgent-bg: #fef2f2;
    --status-urgent-text: #dc2626;
    --status-waiting: #180EA2;       /* indigo — wacht op iemand */
    --status-waiting-bg: #EEEDFA;
    --status-waiting-text: #180EA2;
    --status-ready: #2DB4F4;         /* cyaan — klaar; NIET voor tekst */
    --status-ready-bg: #EAF7FE;
    --status-ready-text: #0E7FB8;
    --status-closed: #6b7280;        /* 4,83:1 — voldoet ook als tekst */
    --status-closed-bg: #f9fafb;
    --status-closed-text: #6b7280;

    --bg-app: #ffffff;
    --bg-card: #ffffff;
    --bg-subtle: #F5F6FA;

    --text-primary: #141414;
    --text-muted: #6b7280;
}

body {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Card-component — wit, vlak met lichte rand (rustiger dan zware schaduw). */
.tb-card {
    background: var(--bg-card);
    border-radius: 0.875rem;
    border: 1px solid rgba(17, 24, 39, 0.07);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    padding: 1.25rem 1.5rem;
}

/* Brand-knop */
.tb-btn-primary {
    background: var(--brand-purple);
    color: white;
    border-radius: 0.625rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background 0.15s ease;
}
.tb-btn-primary:hover {
    background: var(--brand-purple-dark);
}

.tb-btn-secondary {
    background: white;
    color: var(--text-primary);
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}
.tb-btn-secondary:hover {
    background: var(--bg-subtle);
}

/* Status-pills */
.tb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}
.tb-pill-urgent {
    background: var(--status-urgent-bg);
    color: var(--status-urgent);
}
.tb-pill-waiting {
    background: var(--status-waiting-bg);
    /* 3,07:1 op de eigen achtergrond met de basiskleur → onder de 4,5:1 die WCAG voor
       tekst eist. De -text-variant haalt 4,84:1 (audit-ronde 3, U9). */
    color: var(--status-waiting-text);
}
.tb-pill-ready {
    background: var(--status-ready-bg);
    color: var(--status-ready-text);  /* 3,15:1 → 4,79:1 */
}
.tb-pill-closed {
    background: var(--status-closed-bg);
    color: var(--status-closed);
}
/* Neutraal label dat géén status is — bv. het relatietype van een gekoppelde interventie
   (primair / vervolg / gerelateerd, feedbackronde 5 §5). Dezelfde kleuren als
   ``tb-pill-closed`` (4,83:1, voldoet als tekst) maar een eigen naam: "afgehandeld" en
   "gerelateerd" door elkaar halen zou de servicedesk laten denken dat het werk klaar is. */
.tb-pill-neutral {
    background: var(--status-closed-bg);
    color: var(--status-closed);
}

/* Status-dot (kleine cirkel links van klantnaam in de ticketlijst) */
.tb-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}
.tb-dot-urgent { background: var(--status-urgent); }
.tb-dot-waiting { background: var(--status-waiting); }
.tb-dot-ready { background: var(--status-ready); }
.tb-dot-closed { background: var(--status-closed); }

/* Owner-chip (initialen-cirkel) */
.tb-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: var(--brand-purple-light);
    color: var(--brand-purple);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Top-nav */
.tb-topbar {
    border-bottom: 1px solid #e5e7eb;
    background: white;
}
.tb-topbar h1 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brand-purple);
}
.tb-topbar h1 .tb-brand-suffix {
    color: var(--brand-purple);
}
.tb-topbar p {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

/* Zichtbare toetsenbord-focus (WCAG 2.4.7). Alleen bij keyboard-navigatie
 * dankzij :focus-visible, zodat muisklikken geen outline tonen. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand-purple);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Rij-affordances (bulk-selectie in de ticketlijst): rustig verborgen, maar
 * nooit ontoegankelijk. Zichtbaar op hover, toetsenbord-focus binnen de rij en
 * wanneer het ticket is aangevinkt. Op touch-toestellen (geen hover) staan ze
 * altijd zichtbaar — anders zou selectie onmogelijk zijn. */
.tb-reveal {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.group:hover .tb-reveal,
.group:focus-within .tb-reveal,
.tb-reveal:focus-within,
.tb-reveal:has(:checked) {
    opacity: 1;
}
@media (hover: none) {
    .tb-reveal {
        opacity: 1;
    }
}

/* Afwijzen-disclosure: verberg de default marker (driehoekje/pijl) zodat de
 * <summary> als een gewone knop leest. */
.tb-reject > summary {
    list-style: none;
}
.tb-reject > summary::-webkit-details-marker {
    display: none;
}

/* Flash-toast: verschijnt na een actie (bv. bulk-toewijzing), verdwijnt
 * vanzelf. Zonder hyperscript — een pure CSS-animatie fade't in en na ~4s weer
 * uit; een globale 'animationend'-listener in base.html verwijdert het element. */
@keyframes tb-toast-life {
    0% { opacity: 0; transform: translateY(-0.25rem); }
    8% { opacity: 1; transform: translateY(0); }
    85% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-0.25rem); }
}
.tb-toast {
    animation: tb-toast-life 4s ease forwards;
    /* De container heeft pointer-events:none zodat toasts geen kliks onder zich
       blokkeren; de toast zelf moet ze wél krijgen (sluitknop). */
    pointer-events: auto;
}

/* Fouttoasts blijven staan tot ze weggeklikt worden (audit-ronde 3, U8): de melding
   die je écht moet lezen — "dit voorstel is intussen al verwerkt" — verdween anders
   na 4 seconden terwijl je nog naar het formulier keek. Alleen de fade-in. */
@keyframes tb-toast-enter {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to   { opacity: 1; transform: translateY(0); }
}
.tb-toast-persistent {
    animation: tb-toast-enter 0.15s ease forwards;
}
.tb-toast-close {
    opacity: 0.6;
    padding: 0 0.125rem;
}
.tb-toast-close:hover {
    opacity: 1;
}

/* Laadtoestand van het detail-paneel (audit-ronde 3, U7).
 *
 * Tijdens de fetch bleef het vórige ticket volledig zichtbaar en klikbaar: je opende
 * ticket B, zag ticket A, en kon op zijn goedkeur-knop drukken. De dimmer maakt
 * zichtbaar dat de inhoud niet meer geldig is; ``pointer-events: none`` maakt hem ook
 * echt onaanraakbaar. De vertraging voorkomt geflikker bij een snelle respons — onder
 * ~150 ms zie je niets, en dat is precies wat je wil. */
.tb-pane-loading {
    position: relative;
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.12s ease 0.15s;
}

/* Split-pane: de rij die momenteel in het detail-paneel getoond wordt. */
.tb-row-active {
    background: var(--brand-purple-light);
    box-shadow: inset 3px 0 0 0 var(--brand-purple);
}

/* --- Ticket-detail: reading-pane layout (Optie A) ------------------------
 * Het detail-paneel scrollt ZELF i.p.v. de hele pagina (lijst links blijft
 * staan). Leestekst begrensd op ~66 tekens. Sticky header houdt klant + status
 * in beeld. Container-query (i.p.v. viewport-breakpoint) zodat de layout op de
 * PANEELbreedte reageert, niet op de vensterbreedte — dát was de oorzaak van de
 * te smalle kolommen. */
#detail-pane.tb-detail-pane {
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Lijst links scrollt óók onafhankelijk: met veel tickets werd de pagina
 * anders lang en bewoog het geheel mee bij het scrollen van het detail. Nu
 * blijft de pagina (nagenoeg) staan en scrollt elke kolom apart. Alleen op
 * desktop (split-pane); op mobiel = normale document-scroll. */
@media (min-width: 1024px) {
    .tb-list-col {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 8.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
#ticket-detail-root {
    container-type: inline-size;
}

/* --- Werkzone: twee vensters (ronde 6 P1-01) --------------------------------
 * Vierde vorm van deze layout. Ronde 3: twee sleepbare zones (mail boven, AI
 * onder). Ronde 5 §12: één kolom, voorstel bovenaan, mail in het ingeklapte
 * onderbouwingsblok. Ronde 6 draaide dat gedeeltelijk terug — niet omdat ronde 5
 * fout was, maar omdat het voorstel bovenaan zetten waardeloos is zolang je niet
 * ziet waaraan je het afmeet:
 *
 *   > "bovenaan: het originele/actuele verzoek van de klant — direct daaronder:
 *   > het antwoordvoorstel van Service AI — als twee duidelijk gescheiden
 *   > werkvensters, elk apart scrollbaar."
 *
 * De derde vorm gaf de werkzone een vaste hoogte (62vh) met daaronder een derde
 * scrollzone. Samen met de meldingen erboven bleef er voor het bericht te weinig
 * over, en op een laag scherm werd de rest afgeknipt. Nu zijn het er echt twee:
 * venster 1 is zo hoog als zijn inhoud met een derde van het scherm als
 * bovengrens, venster 2 neemt al de rest.
 *
 * De bovengrens van venster 1 geldt op elke schermgrootte. Onder 1024px scrollt
 * de pagina als één kolom, maar een mail van drie schermen mag ook daar het
 * voorstel niet wegduwen. `--tb-work-split` is die grens; JS bewaart hem per
 * medewerker in localStorage. */
.tb-work-zone {
    display: block;
}
.tb-work-pane {
    min-width: 0;
}
#pane-request {
    max-height: var(--tb-work-split, 33vh);
    overflow-y: auto;
    /* Horizontale containment (klantfeedback, Supermarkt Demo): brede tabellen en
     * afbeeldingen mogen het paneel niet verbreden. */
    overflow-x: hidden;
    /* Wielscroll ketent pas door naar wat eronder staat als dit venster onderaan
     * is. Zonder dit springt de pagina weg terwijl je nog in de mail leest. */
    overscroll-behavior: contain;
    padding-right: 0.25rem;
}
.tb-work-body {
    display: block;
}
/* De vensterkop blijft staan terwijl het venster scrollt. Zonder dit weet je na
 * drie scrollbewegingen niet meer in welk van de twee vensters je zit. */
.tb-work-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: -0.85rem -1rem 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid rgba(17, 24, 39, 0.07);
    border-radius: 0.75rem 0.75rem 0 0;
}
.tb-work-divider {
    display: none;
}
/* Compacte feitenstrip in venster 2 — leest als referentiekader, niet als kaart. */
.tb-context-strip dt {
    min-width: 4.5rem;
}

@media (min-width: 1024px) {
    #detail-pane.tb-detail-pane {
        overflow: hidden; /* de vensters scrollen, niet het paneel */
    }
    #ticket-detail-root {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 8.5rem);
        min-height: 0;
    }
    /* Vaste stukken boven/onder mogen niet meekrimpen — enkel de vensters
     * geven ruimte. */
    #ticket-detail-root > .tb-detail-header,
    #ticket-detail-root > .tb-actionbar {
        flex-shrink: 0;
    }

    /* De werkzone vult alles tussen kop en beslisbalk. Venster 1 krimpt niet onder
     * zijn inhoud en groeit niet boven zijn grens; venster 2 krijgt wat overblijft
     * en is dus nooit weg. */
    .tb-work-zone {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        gap: 0;
    }
    #pane-request {
        flex: 0 1 auto;
        min-height: 0;
    }
    #pane-proposal {
        flex: 1 1 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        /* Een ondergrens, zodat venster 1 krimpt en niet venster 2 wanneer het
         * krap wordt. */
        min-height: 8rem;
        padding-right: 0.25rem;
    }
    .tb-work-divider {
        display: block;
        flex-shrink: 0;
        position: relative;
        height: 0.75rem;
        cursor: row-resize;
        background: transparent;
        touch-action: none;
    }
    /* De zichtbare lijn is smaller dan het grijpgebied: 12px is comfortabel om te
     * raken, 12px dik is een balk. */
    .tb-work-divider::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 2px;
        transform: translateY(-50%);
        background: rgba(17, 24, 39, 0.12);
        border-radius: 1px;
    }
    .tb-work-divider:hover::before,
    .tb-work-divider:focus-visible::before,
    .tb-work-divider.is-dragging::before {
        background: var(--brand-purple);
        height: 3px;
    }
    .tb-work-divider:focus-visible {
        outline: none;
    }
}

/* Op een laag scherm (13"-laptop in landscape) blijft er na kop, venster 1 en
 * beslisbalk te weinig over voor een tweede venster met een eigen scrollbalk. Dan
 * scrollt het paneel als één kolom. Het paneel moet daarvoor zelf weer scrollen:
 * met `overflow: hidden` en een vaste hoogte werd alles onder de vouw afgeknipt.
 * Venster 1 houdt zijn bovengrens, dus het voorstel begint er direct onder. */
@media (min-width: 1024px) and (max-height: 720px) {
    #detail-pane.tb-detail-pane {
        overflow-y: auto;
        overflow-x: hidden;
    }
    #ticket-detail-root {
        display: block;
        height: auto;
    }
    .tb-work-zone {
        display: block;
    }
    #pane-proposal {
        overflow: visible;
    }
    .tb-work-divider {
        display: none;
    }
}

.tb-detail-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-app);
    border-bottom: 1px solid rgba(17, 24, 39, 0.07);
}
/* Leestekst (mailbody, vrije tekst): begrens de regellengte voor leesbaarheid. */
.tb-prose {
    max-width: 66ch;
    /* Scrollen i.p.v. klippen (klantfeedback ronde 2, D6). De detail-zone staat op
     * ``overflow-x: hidden`` zodat een brede tabel het paneel niet kan oprekken — dat is
     * juist, maar het betekende dat brede NIET-iframe-inhoud (een lange regel of
     * ASCII-tabel in een eerder thread-bericht) werd afgekapt zonder uitweg. De mail-HTML
     * scrolt binnen zijn iframe; deze regel geeft de plaintext-weergave hetzelfde recht.
     *
     * ``overflow-wrap`` breekt lange ononderbroken tokens (URL's, serienummers) zodat de
     * scrollbalk de uitzondering blijft en niet de regel. */
    overflow-x: auto;
    overflow-wrap: anywhere;
}
/* KPI-tegels (categorie/urgentie/volledigheid): val terug op 2 kolommen in een
 * heel smal paneel zodat ze niet samengeperst raken. */
@container (max-width: 26rem) {
    .tb-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (prefers-reduced-motion: reduce) {
    .tb-toast {
        animation-duration: 4s;
        animation-timing-function: step-end;
    }
    /* Persistente toasts blijven zichtbaar; alleen de beweging valt weg. */
    .tb-toast-persistent {
        animation: none;
        opacity: 1;
    }
}

/* ==========================================================================
 * Usability-ronde: densiteit, resizer, auto-grow, inklapbare secties
 * ========================================================================== */

/* --- TEST-modus: compacte badge + dunne rand i.p.v. een volle balk --------- */
.tb-test-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--status-waiting-bg);
    color: var(--status-waiting-text);  /* tekst: 4,84:1 i.p.v. 3,07:1 (U9) */
    border: 1px solid var(--status-waiting);  /* rand: 3:1 volstaat */
    white-space: nowrap;
}
/* LIVE: goedkeuren maakt een echte bon. Bewust een andere kleur dan TEST, zodat de twee
 * nooit op elkaar lijken. */
.tb-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--status-urgent-bg);
    color: var(--status-urgent-text);
    border: 1px solid var(--status-urgent);
    white-space: nowrap;
}
/* Dunne amber rand rond het hele scherm — permanent zichtbaar signaal dat er
 * niets live gebeurt, zonder een volledige rij op te offeren. */
.tb-test-frame {
    position: fixed;
    inset: 0;
    border: 3px solid var(--status-waiting);
    pointer-events: none;
    z-index: 45;
}

/* --- Resizable split-pane (lijst | sleep-handle | detail), alleen desktop -- */
@media (min-width: 1024px) {
    .tb-split {
        display: grid;
        /* Plain track-list (géén var()-fallback met komma — die maakt de hele
         * property "invalid at computed value time" waardoor de grid naar één
         * kolom terugvalt en de panelen stapelen). De resizer-JS overschrijft
         * grid-template-columns rechtstreeks via inline-style. */
        grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1.3fr);
        align-items: start;
    }
    .tb-split-gutter {
        position: sticky;
        top: 1.5rem;
        height: calc(100vh - 8.5rem);
        cursor: col-resize;
        touch-action: none;
    }
    .tb-split-gutter::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: rgba(17, 24, 39, 0.12);
        border-radius: 2px;
        transition: background 0.15s ease, width 0.15s ease;
    }
    .tb-split-gutter:hover::before,
    .tb-split-gutter:focus-visible::before {
        background: var(--brand-purple);
        width: 3px;
    }
    .tb-split-gutter:focus-visible {
        outline: 2px solid var(--brand-purple);
        outline-offset: -3px;
        border-radius: 0.25rem;
    }
}
/* Mobiel: geen handle (kolommen stapelen). */
.tb-split-gutter {
    display: none;
}
@media (min-width: 1024px) {
    .tb-split-gutter {
        display: block;
    }
}
body.tb-resizing {
    cursor: col-resize;
    user-select: none;
}

/* --- Auto-groeiende tekstvakken: CSS-first (field-sizing), JS-fallback ----- */
textarea.js-autogrow {
    field-sizing: content;
    min-block-size: 3lh;
    max-block-size: 60vh;
    overflow-y: auto;
}

/* --- Inklapbare secties: <details class="tb-card tb-collapse"> ------------- */
.tb-collapse > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}
.tb-collapse > summary::-webkit-details-marker {
    display: none;
}
/* Chevron rechts; wisselt ▸ (dicht) / ▾ (open) — visuele affordance. */
.tb-collapse > summary::after {
    content: "\25B8";
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}
.tb-collapse[open] > summary::after {
    content: "\25BE";
}
.tb-collapse[open] > summary {
    margin-bottom: 0.75rem;
}
.tb-collapse > summary:focus-visible {
    outline: 2px solid var(--brand-purple);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* --- Sticky beslis-balk onderaan het detailpaneel ------------------------- */
/* Blijft in beeld terwijl de inhoud (verzoek + AI) scrollt — de primaire
 * beslissingen zijn altijd bereikbaar. Sticky t.o.v. #detail-pane-scroll in het
 * split-paneel, of t.o.v. de viewport op de volledige detailpagina. */
.tb-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding: 0.625rem 0.25rem;
    background: var(--bg-app);
    border-top: 1px solid rgba(17, 24, 39, 0.12);
}

/* --- Densiteit: compactere kaarten binnen het detailpaneel ---------------- */
#ticket-detail-root .tb-card {
    padding: 0.85rem 1rem;
}

/* --- Filter-toolbar: consistente pills + meelevende actieve staat --------- */
/* Eén stijl voor élke filter-pill (én de 'Meer'-select). De actieve staat volgt
 * de klik client-side (.is-active), want HTMX verwisselt enkel de ticketlijst. */
.tb-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    line-height: 1.375rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.tb-filter-pill:hover {
    background: var(--bg-subtle);
}
.tb-filter-pill.is-active {
    background: var(--brand-purple);
    border-color: var(--brand-purple);
    color: #fff;
}
.tb-filter-count {
    font-size: 0.75rem;
    opacity: 0.6;
}
.tb-filter-pill.is-active .tb-filter-count {
    color: #fff;
    opacity: 0.8;
}
/* 'Meer'-select als pill (eigen chevron; native pijl weg). */
.tb-filter-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 1.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
}
.tb-filter-select.is-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* --- Toolbar-selects (filter + sorteren) ---------------------------------- */
.tb-toolbar-select {
    font-size: 0.875rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.375rem 0.6rem;
    color: var(--text-primary);
    cursor: pointer;
}
.tb-toolbar-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--brand-purple);
}

/* --- Mail-bericht als HTML in een gesandboxte iframe ---------------------- */
/* Hoogte wordt via JS op de inhoud gezet (auto-grow); breedte vol, geen rand. */
.tb-mail-frame {
    width: 100%;
    border: 0;
    display: block;
    background: #fff;
    min-height: 4rem;
    /* Binnen een venster met vaste hoogte is "iframe groeit, venster scrolt" het
     * gewenste gedrag. Maar een mail met een tabel van 40 000px hoeft de browser
     * niet volledig te renderen om leesbaar te zijn — dan scrollt het iframe zelf. */
    max-height: 400vh;
    border-radius: 0.5rem;
}

/* --- Bevestigingsdialoog (ronde 5 §1) ------------------------------------- */
/* Vervangt het volledige controlescherm. Bewust een echte <dialog> met
   ::backdrop: de bevestiging moet de aandacht opeisen zonder de casewerkruimte
   te verlaten — wie terug wil, sluit de dialoog en staat waar hij stond. */
.tb-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    z-index: 50;
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 0.875rem;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.25);
    padding: 1.25rem 1.5rem;
}
.tb-dialog::backdrop {
    background: rgba(17, 24, 39, 0.35);
}

/* --- De primaire actie (ronde 5 §13) -------------------------------------- */
/* Eén knop die van naam verandert, in plaats van zes die naast elkaar staan.
   Groter dan tb-btn-primary omdat ze de hoofdactie ís: wie het scherm opent,
   hoort in één blik te zien wat er te doen valt. */
.tb-primary-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand-purple);
    border-radius: 0.625rem;
    transition: filter 0.15s;
}
.tb-primary-action:hover {
    filter: brightness(1.08);
}
/* Niet uitvoerbaar: de knop leidt naar het probleem, niet naar de uitvoering.
   Bewust géén disabled-look — een knop die niets doet laat de medewerker zoeken. */
.tb-primary-action-blocked {
    color: var(--status-urgent);
    background: #fff;
    border: 1px solid var(--status-urgent);
}
.tb-primary-action-blocked:hover {
    filter: none;
    background: #fef2f2;
}


/* ── i-leadership-bouwstenen (demo) ─────────────────────────────────────────────── */
.tb-card { background: var(--il-mist); border-color: rgba(24, 14, 162, 0.08); box-shadow: none; }
.tb-btn-primary { border-radius: 9999px; font-weight: 600; }
.tb-btn-secondary { border-radius: 9999px; }
.tb-topbar { background: #fff; border-bottom: 1px solid rgba(20, 20, 20, 0.08); position: relative; z-index: 2; }
.il-logo { height: 48px; width: auto; display: block; }
.il-brand { display: inline-flex; align-items: center; padding: 2px 4px; }
.il-page-title { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--il-ink); white-space: nowrap; }
.il-page-title::after { content: ""; display: block; width: 32px; height: 3px; margin-top: 4px; border-radius: 9999px; background: var(--il-indigo); }
.il-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1.5px solid var(--il-indigo); border-radius: 9999px; color: var(--il-indigo); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.il-pill-sm { font-size: 10px; padding: 2px 8px; }
.il-pill-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--il-cyan); }
.il-demo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; background: var(--brand-purple-light); color: var(--il-indigo); font-size: 11px; font-weight: 700; }
.il-demo-badge > span { color: var(--il-cyan); }
.il-user { font-size: 12px; font-weight: 600; color: var(--il-ink); padding: 4px 10px; border-radius: 9999px; background: var(--il-mist); }
.il-statement { background: var(--il-indigo); color: #fff; border-radius: 0.875rem; padding: 1rem 1.25rem; font-size: 0.95rem; }
.il-statement strong, .il-statement em { color: var(--il-cyan); font-style: normal; }
.il-circles { position: fixed; top: -200px; right: -200px; width: 560px; height: 560px; pointer-events: none; z-index: 0; }
.il-circles span { position: absolute; inset: 0; border-radius: 9999px; border: 1.5px solid rgba(24, 14, 162, 0.08); }
.il-circles span:nth-child(2) { inset: 80px; border-color: rgba(45, 180, 244, 0.18); }
.il-circles span:nth-child(3) { inset: 160px; border-color: rgba(24, 14, 162, 0.06); }
main { position: relative; z-index: 1; }
.il-bottom-line { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: var(--il-indigo); z-index: 70; pointer-events: none; }
h1, h2, h3 { letter-spacing: -0.01em; }
.il-nav { font-size: 13px; font-weight: 600; color: var(--il-ink); padding: 6px 10px; border-radius: 9999px; white-space: nowrap; }
.il-nav:hover { background: var(--il-mist); color: var(--il-indigo); }
.il-nav-active { color: var(--il-indigo); background: var(--brand-purple-light); }
/* De ticketlijst is wit (rustig lezen); de geselecteerde rij krijgt Soft Mist en een indigo rand links. */
.il-list { background: #fff; border-color: rgba(20, 20, 20, 0.08); }
.il-list .tb-row-active { background: var(--il-mist); box-shadow: inset 3px 0 0 0 var(--il-indigo); }

/* ── Standaardknop "← Start demo" (i-leadership demo's, zie CLAUDE.md) ─────────────────────
   Identiek in elke demo: vast linksboven (16 px), outline-pill in Deep Indigo, 36 px hoog.
   Op gsm (< 640 px) enkel het pijltje, 44 × 44 px. De layout laat links of boven ruimte vrij
   via --start-demo-ruimte-links / --start-demo-ruimte-boven. */
:root { --start-demo-ruimte-links: 168px; --start-demo-ruimte-boven: 64px; }
.start-demo-knop {
  position: fixed; top: 16px; left: 16px; z-index: 2147483000;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; height: 36px; margin: 0; padding: 0 14px;
  border: 1.5px solid #180EA2; border-radius: 9999px; background: #FFFFFF; color: #180EA2;
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.06); transition: background-color 0.15s ease;
}
.start-demo-knop:hover { background: #EEEDFB; color: #180EA2; text-decoration: none; }
.start-demo-knop:focus-visible { outline: 3px solid #2DB4F4; outline-offset: 2px; }
.start-demo-knop__pijl { font-size: 16px; line-height: 1; }
@media (max-width: 639.98px) {
  :root { --start-demo-ruimte-links: 72px; --start-demo-ruimte-boven: 72px; }
  .start-demo-knop { width: 44px; height: 44px; padding: 0; }
  .start-demo-knop__tekst { display: none; }
}

/* Gsm: knoppen en velden minstens 44 px hoog (aanraakdoel, WCAG 2.5.5). */
@media (max-width: 639.98px) {
  button, [role="button"], select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  [data-sidebar="menu-button"] { min-height: 44px; }
}

/* De bovenbalk laat links ruimte voor de vaste knop (enkel als die er is: in de demo). */
body:has(> .start-demo-knop) .tb-topbar { padding-left: var(--start-demo-ruimte-links) !important; min-height: 68px; }

/* Gsm: de bovenbalk mag over meer regels lopen, menuknoppen worden 44 px hoog. */
@media (max-width: 639.98px) {
  .il-page-title { white-space: normal; font-size: 1rem; }
  .tb-topbar .il-pill { display: none; }
  .il-nav { min-height: 44px; display: inline-flex; align-items: center; }
  main, .tb-main { overflow-wrap: anywhere; }
}

/* ── Design-ronde: ticketkaarten, pills en filters (stijl van de startpagina-tegels) ───── */
.sa-ticketlijst { display: flex; flex-direction: column; gap: 10px; }
.sa-ticket {
  padding: 14px 16px; border-radius: 16px; background: #fff;
  border: 1.5px solid rgba(20, 20, 20, 0.08);
  transition: border-color .2s, box-shadow .2s, transform .25s cubic-bezier(.22,1,.36,1);
}
.sa-ticket:hover { border-color: var(--il-indigo); box-shadow: 0 14px 34px -18px rgba(24, 14, 162, .35); transform: translateY(-2px); }
.sa-ticket.tb-row-active { border-color: var(--il-indigo); background: var(--il-mist); box-shadow: 0 0 0 1.5px var(--il-indigo); }
.sa-ticket-link:focus-visible { outline: 3px solid var(--il-cyan); outline-offset: 4px; border-radius: 10px; }
.sa-ticket-klant { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--il-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-ticket-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sa-ticket-onderwerp { margin-top: 8px; font-size: 13.5px; color: #3a3c4a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-ticket-ref { margin-left: 6px; font-size: 11.5px; color: #8a8c99; }
.sa-ticket-volgende { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--il-indigo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-ticket-rechts { padding-top: 2px; }
.sa-ticket-rechts .truncate { font-size: 12.5px; }

.sa-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; }
.sa-pill-dringend { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.sa-pill-rustig { background: var(--il-mist); color: #4b4d5c; border-color: rgba(20, 20, 20, 0.08); }
.sa-pill-status { background: #EEEDFB; color: var(--il-indigo); border-color: rgba(24, 14, 162, .18); }
.sa-pill-wacht { background: #fff; color: #4b4d5c; border-color: rgba(20, 20, 20, 0.18); border-style: dashed; }

.sa-filterpills { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-filterpill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 9999px; border: 1.5px solid rgba(20, 20, 20, 0.12); background: #fff; color: #3a3c4a; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.sa-filterpill:hover { border-color: var(--il-indigo); color: var(--il-indigo); background: #EEEDFB; }
.sa-filterpill[aria-pressed="true"] { background: var(--il-indigo); border-color: var(--il-indigo); color: #fff; }
.sa-filterpill:focus-visible { outline: 3px solid var(--il-cyan); outline-offset: 2px; }
.sa-filterpill-n { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 9999px; background: rgba(24, 14, 162, .1); }
.sa-filterpill[aria-pressed="true"] .sa-filterpill-n { background: rgba(255, 255, 255, .22); }
@media (max-width: 639.98px) { .sa-filterpill { height: 44px; } }

/* Ticketdetail: genummerde kaarten met een kop (1 klant, 2 voorstel, 3 ERP, 4 onderbouwing, 5 historiek). */
.sa-kaart {
  background: #fff; border: 1.5px solid rgba(20, 20, 20, 0.08); border-radius: 16px;
  padding: 0.85rem 1rem 1rem; margin-bottom: 14px;
}
.sa-kaart > .tb-work-head { background: #fff; border-radius: 16px 16px 0 0; align-items: center; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.sa-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--il-indigo); color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.sa-kaartkop { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--il-ink); }
/* In de kaarten 3–5 hoeven de ingesloten blokken geen eigen kaartrand meer. */
#sec-klant .tb-card, #sec-evidence .tb-card, #sec-historiek .tb-card { background: var(--il-mist); border-color: transparent; }

/* Voortgangsbalkjes bij "Volledigheid per veld". */
.sa-balk { height: 6px; border-radius: 9999px; background: var(--il-mist); overflow: hidden; margin: 3px 0 8px; }
.sa-balk > span { display: block; height: 100%; border-radius: 9999px; background: var(--il-indigo); }
.sa-balk-medium > span { background: var(--il-cyan); }
.sa-balk-missing > span { background: #dc2626; }

/* Beslisbalk: de hoofdknop blijft altijd onderaan zichtbaar; "Meer acties" is rustig. */
.tb-actionbar { position: sticky; bottom: 0; z-index: 15; background: #fff; border-top: 1.5px solid rgba(24, 14, 162, .12); padding-top: 10px; padding-bottom: 10px; }
.sa-meer > summary { min-height: 40px; display: inline-flex; align-items: center; }
.sa-meer > summary:hover { background: #EEEDFB; color: var(--il-indigo); border-color: var(--il-indigo); }
.sa-meer[open] > summary { background: #EEEDFB; color: var(--il-indigo); }
.sa-meer-paneel { width: min(24rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto; background: #fff !important; border: 1.5px solid rgba(24, 14, 162, .12) !important; border-radius: 16px; }
.sa-meer-kop { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6b6d7a; padding-top: 4px; }
.sa-meer-paneel a, .sa-meer-paneel form > button:not(.tb-btn-secondary):not(.sa-knop-gevaar) { display: block; width: 100%; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none !important; }
.sa-meer-paneel a:hover, .sa-meer-paneel form > button:not(.tb-btn-secondary):not(.sa-knop-gevaar):hover { background: #EEEDFB; color: var(--il-indigo); }
.sa-knop-gevaar { display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: 12px; border: 1.5px solid #fca5a5; background: #fff; color: #b91c1c; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .15s, border-color .15s; }
.sa-knop-gevaar:hover { background: #fef2f2; border-color: #b91c1c; }
.sa-knop-gevaar .text-gray-500 { font-weight: 500; }

/* Dashboard: kerncijfers als kaarten. */
.sa-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .sa-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sa-kpi { background: var(--il-mist); border-radius: 18px; padding: 16px 18px; }
.sa-kpi-label { font-size: 12px; font-weight: 700; color: #5f6270; }
.sa-kpi-waarde { margin-top: 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--il-ink); line-height: 1.1; }
.sa-kpi .text-xs { margin-top: 4px; }

/* Verzonden (demo): lijst als tabel; een rij klapt open en toont de mail. */
.sa-tabel { background: #fff; border: 1.5px solid rgba(20, 20, 20, 0.08); border-radius: 16px; overflow: hidden; }
.sa-tabel-kop, .sa-tabel-rij > summary { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: 16px; align-items: center; padding: 12px 18px; }
.sa-tabel-kop { background: var(--il-mist); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5f6270; }
.sa-tabel-rij { border-top: 1px solid rgba(20, 20, 20, 0.06); }
.sa-tabel-rij > summary { list-style: none; cursor: pointer; font-size: 14px; transition: background-color .15s, box-shadow .15s; }
.sa-tabel-rij > summary::-webkit-details-marker { display: none; }
.sa-tabel-rij > summary:hover, .sa-tabel-rij[open] > summary { background: #EEEDFB; box-shadow: inset 3px 0 0 var(--il-indigo); }
.sa-tabel-rij > summary:focus-visible { outline: 3px solid var(--il-cyan); outline-offset: -3px; }
.sa-tabel-rij > pre { padding: 4px 18px 18px; }
@media (max-width: 639.98px) {
  .sa-tabel-kop { display: none; }
  .sa-tabel-rij > summary { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 639.98px) {
  .sa-ticket { flex-wrap: wrap; }
  .sa-ticket .sa-ticket-link { flex-basis: calc(100% - 40px); }
  .sa-ticket-rechts { width: 100% !important; text-align: left; padding-left: 28px; }
  .sa-ticket-rechts .justify-end { justify-content: flex-start; }
}