/* ── Wealer SAM design tokens ─────────────────────────────── */
:root {
    --w-green: #3a9b5c;
    --w-green-strong: #2e7d4a;
    --w-green-strong-hover: #256b3e;
    --w-yellow: #f6c623;
    --w-bg: #f4f4f4;
    --w-card: #ffffff;
    --w-line: #e6e6e6;
    --w-line-2: #ededed;
    --w-ink: #1c1c1c;
    --w-ink-2: #444;
    --w-mute: #8a8a8a;
    --w-mute-2: #a3a3a3;
    /* Dashboard-accenten — alleen in gebruik op /dashboard. Het groen komt uit
       --w-green-strong hierboven, zodat het dashboard bij de huisstijl blijft. */
    --w-green-soft: #e8f3ec;
    --w-dash-blue: #2f6fdb;
    --w-dash-blue-soft: #eaf1fc;
    --w-dash-amber: #d98a0b;
    --w-dash-amber-soft: #fdf3e2;
    --w-dash-red: #d64545;
    --w-shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 1px 8px rgba(0,0,0,.04);
    --w-shadow-pop: 0 12px 40px rgba(0,0,0,.16);
    --w-radius: 10px;
    /* Bootstrap font override — Inter in alle Bootstrap componenten */
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

html {
    font-size: 14px;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    height: 100%;
}

body {
    overflow: hidden;
}

/* ── Bootstrap overrides: Wealer kleuren ─────────────────── */
.btn-success {
    --bs-btn-bg: var(--w-green-strong);
    --bs-btn-border-color: var(--w-green-strong);
    --bs-btn-hover-bg: var(--w-green-strong-hover);
    --bs-btn-hover-border-color: var(--w-green-strong-hover);
    --bs-btn-active-bg: #1f5a34;
    --bs-btn-active-border-color: #1f5a34;
}

.btn-outline-success {
    --bs-btn-color: var(--w-green-strong);
    --bs-btn-border-color: var(--w-green-strong);
    --bs-btn-hover-bg: var(--w-green-strong);
    --bs-btn-hover-border-color: var(--w-green-strong);
    --bs-btn-active-bg: var(--w-green-strong-hover);
    --bs-btn-active-border-color: var(--w-green-strong-hover);
}

.btn-warning {
    --bs-btn-bg: var(--w-yellow);
    --bs-btn-border-color: var(--w-yellow);
    --bs-btn-color: var(--w-ink);
    --bs-btn-hover-bg: #e5b615;
    --bs-btn-hover-border-color: #e5b615;
    --bs-btn-hover-color: var(--w-ink);
    --bs-btn-active-bg: #d4a80d;
    --bs-btn-active-color: var(--w-ink);
}

/* ── Bootstrap overrides: modal ──────────────────────────── */
.modal-content {
    border-color: var(--w-line);
    border-radius: var(--w-radius);
}

.modal-header {
    border-bottom-color: var(--w-line-2);
}

.modal-footer {
    border-top-color: var(--w-line-2);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(46, 125, 74, 0.35);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Kentekenplaat */
.kenteken {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid #222;
    border-radius: 3px;
    overflow: hidden;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    height: 26px;
    width: fit-content;
}

.kenteken--sm {
    font-size: 11px;
    height: 22px;
}

.kenteken-nl {
    background: #003da5;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    font-size: 6px;
    font-weight: 700;
    line-height: 1;
    gap: 1px;
}

.kenteken-eu-sterren {
    font-size: 10px;
    color: #f4c20d;
}

.kenteken-tekst {
    background: #f4c20d;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    padding: 0 8px;
    letter-spacing: 0.05em;
}

/* ── Beheerscherm: tray flush-left, geen content-padding ──────── */
.app-content:has(.beheer-shell) {
    padding: 0 !important;
    scrollbar-gutter: auto;
    transition: none !important;
}

/* ── Dashboard: bepaalt zelf zijn max-breedte en padding ──────── */
.app-content:has(.dash-shell) {
    padding: 0 !important;
    transition: none !important;
}

/* Toast-stack rechtsonder, los van de connectie-toast. */
.toast-host {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 1080;
    pointer-events: none;
}
.toast-host .connection-toast {
    position: static;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 220px;
    max-width: 340px;
    padding: 0.65rem 0.9rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-size: 0.85rem;
    animation: toast-slide-in 0.2s ease-out;
}
.toast-host .toast-success {
    background: #d1e7dd;
    border-left: 4px solid #198754;
    color: #0a3622;
}
.toast-host .toast-warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #664d03;
}
.toast-host .toast-danger {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
    color: #58151c;
}
.toast-host .toast-icon {
    flex-shrink: 0;
    font-size: 1rem;
}
.toast-host .toast-text {
    flex: 1;
    line-height: 1.3;
}

/* Knop-/badge-statusanimaties — bewust GLOBAAL (oorspronkelijk scoped in
   Rollen.razor.css) zodat Button én bestaande pagina's de normaal→bezig→klaar
   overgang delen. */
.knop-status {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.badge-status {
    transition: background-color .3s ease, color .3s ease;
}
.knop-icoon {
    display: inline-block;
    animation: knop-pop .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes knop-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); }
}
.knop-spinner-xs {
    width: .7rem;
    height: .7rem;
    border-width: .12em;
}

/* ── Terugbelverzoeken ─────────────────────────────────────────────────────
   Badgekleuren uit het functioneel ontwerp: zachte achtergrond, verzadigde
   tekstkleur. Wijkt bewust af van de Bootstrap-varianten — groen is in deze
   applicatie de accentkleur en betekent "het gaat goed"; alles wat aandacht
   vraagt is oranje of rood. Globaal en niet scoped, omdat de badges over
   meerdere componenten heen worden gebruikt.

   Bootstraps eigen .badge-maatvoering (font-size .75em, padding .35em .65em,
   border-radius .375rem) is relatief aan de omliggende tekst en wijkt daardoor
   af van tbv-core.jsx — TbvBadge zet fontSize/padding/borderRadius vast, niet
   relatief. Die vaste maten hier overnemen, zodat elke badge (tabel, detail,
   overal) er hetzelfde uitziet als in het ontwerp. */
.tbv-tabel .badge,
.tbv-badge-urgent,
.tbv-badge-hoog,
.tbv-badge-normaal,
.tbv-badge-laag,
.tbv-badge-rood,
.tbv-badge-oranje,
.tbv-badge-blauw,
.tbv-badge-grijs,
.tbv-badge-groen {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.tbv-badge-urgent,
.tbv-badge-rood { background: #fbeaea; color: #c0392b; }

.tbv-badge-hoog,
.tbv-badge-oranje { background: #fdf1e0; color: #b5730b; }

.tbv-badge-normaal,
.tbv-badge-blauw { background: #e9f0fb; color: #2f6fdb; }

.tbv-badge-laag,
.tbv-badge-grijs { background: #f2f2f2; color: #6b6b6b; }

.tbv-badge-groen { background: #eef5f0; color: #2e7d4a; }

/* Een tikkende klok mag niet horizontaal verspringen bij elke cijferwissel. */
.tbv-badge-mono { font-variant-numeric: tabular-nums; }

/* Compacte backofficedichtheid; Bootstrap's table-sm is hiervoor nog te ruim. */
.tbv-tabel td { padding: 10px 14px; font-size: 12.5px; color: #3a3a3a; border-bottom: 1px solid #f4f4f4; vertical-align: middle; }
.tbv-tabel th {
    padding: 10px 14px;
    font-size: 10.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9a9a;
    font-weight: 700;
    background: #fafafa;
    border-bottom: 1px solid #ededed;
    white-space: nowrap;
}
.tbv-tabel tbody tr { cursor: pointer; }

/* ── AI Vraagbaak (extern pakket: VraagbaakMiddelware.Sdk.Components) ───────
   Geen eigen code — we kunnen alleen van buitenaf bijsturen via de class-namen
   die het pakket zelf rendert.

   Bug in het pakket: <span class="badge">Uit uw kennisbank</span> krijgt geen
   Bootstrap-modifier (bg- of text-bg-) mee. Bootstraps eigen .badge zet dan wél
   witte tekst maar GEEN achtergrondkleur (die komt normaal van zo'n modifier),
   dus wit-op-wit: onzichtbaar. :not([class*="bg-"]) matcht bewust alleen dit
   kale geval — badges die wél een Bootstrap-variant hebben (bv. "badge
   bg-success" of "badge text-bg-success") blijven buiten schot. Een letterlijke
   [class="badge"]-match zou breken zodra het pakket ooit een extra, kleurloze
   class aan deze badge toevoegt (bv. "badge small") — :not([class*="bg-"])
   blijft dan wél matchen, want het kijkt naar de aan-/afwezigheid van een
   kleurmodifier, niet naar de exacte class-string. */
.vraagbaak-vragen .badge:not([class*="bg-"]) {
    background: #f2f2f2;
    color: #6b6b6b;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

/* Het ontwerp geeft de hele pagina een gecentreerde kolom met marge
   (padding 20px 24px, max-width 840px) i.p.v. edge-to-edge tegen het scherm. */
.vraagbaak-vragen {
    display: block;
    max-width: 840px;
    margin: 0 auto;
    padding: 20px 24px;
}

/* Geen zichtbare paginatitel in de markup van het pakket — wél een aria-label
   op de sectie zelf (exact de Titel die Vraagbaak.razor meegeeft, nu alleen
   voor screenreaders). attr() maakt dat bestaande, betekenisvolle attribuut
   zichtbaar i.p.v. verzonnen tekst te introduceren. */
.vraagbaak-vragen::before {
    content: attr(aria-label);
    display: flex;
    align-items: center;
    min-height: 30px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3crect width='30' height='30' rx='8' fill='%232e7d4a'/%3e%3ctext x='15' y='20' font-family='Arial, sans-serif' font-size='13' font-weight='700' fill='white' text-anchor='middle'%3eAI%3c/text%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px 30px;
}

/* Subtitel: geen aparte parameter op VraagbaakVragen (getest en teruggedraaid —
   gaf een runtime InvalidOperationException), dus ook dit is decoratieve tekst
   via ::before, nu op het formulier zodat hij net onder de titel valt. */
.vraagbaak-vragen .zoekformulier::before {
    content: "Stel een vraag en vind direct antwoord in de kennisbank. Van interne processen tot voertuiginformatie.";
    display: block;
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    margin-bottom: 14px;
}

/* Het pakket zet zoekformulier én bronnenlijst op max-width: 760px, terwijl de
   antwoordkaart (kale Bootstrap .card) geen cap heeft en dus breder oogt.
   Cap eraf zodat alles even breed is als de rest van de kolom. */
.vraagbaak-vragen .zoekformulier,
.vraagbaak-vragen .bronnenlijst {
    max-width: none !important;
}

/* "Antwoord van AI Vraagbaak" bestaat niet als los element in de DOM van het
   pakket — dit is bewust decoratieve, niet-semantische tekst via ::before.
   De inhoud zelf (het antwoord) staat al als echte tekst in de kaart erna;
   dit kopje voegt alleen een visueel label toe, geen informatie die anders
   verloren zou gaan voor voorleessoftware. Het "AI"-vierkantje ernaast komt,
   net als bij de titel hierboven, uit een background-image: content ondersteunt
   geen los gestylede deeltjes (icoon + tekst) binnen één pseudo-element. */
.vraagbaak-vragen .card-body::before {
    content: "Antwoord van AI Vraagbaak";
    display: flex;
    align-items: center;
    min-height: 24px;
    font-size: 13px;
    font-weight: 600;
    color: #1a3a24;
    margin-bottom: 10px;
    padding-left: 32px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3crect width='24' height='24' rx='6' fill='%232e7d4a'/%3e%3ctext x='12' y='16' font-family='Arial, sans-serif' font-size='11' font-weight='700' fill='white' text-anchor='middle'%3eAI%3c/text%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px 24px;
}

/* Vanaf hier: puur cosmetische bijsturing van het pakket naar de Wealer-huisstijl
   (was een afwijkend blauwgroen `#2d854d`/`#55718c`, geen eigen ontwerptaal).
   !important is hier bewust: SAM-Frontend.styles.css importeert de scoped CSS van
   het pakket vóór onze eigen componentstijlen, maar NA deze app.css — bij gelijke
   specificiteit (bv. ".zoekknop" hier vs ".zoekknop[b-xxx]" daar) wint dan het
   pakket puur op laadvolgorde. !important maakt die uitkomst voorspelbaar in
   plaats van afhankelijk van een toevallige specificiteits-tel-exercitie die bij
   een pakket-update zomaar kan verschuiven. */
.vraagbaak-vragen .zoekknop {
    background: #2e7d4a !important;
    /* Geen los label-attribuut op deze knop — de tekst "⌕  Zoeken" zit als
       kale tekst in de knop zelf. font-size: 0 maakt die onzichtbaar zonder
       de knop-afmetingen te veranderen; ::after zet het gewenste label terug,
       met hetzelfde vergrootglas-teken. */
    font-size: 0 !important;
}

.vraagbaak-vragen .zoekknop::after {
    content: "⌕ Zoek antwoord";
    font-size: 13px;
}

.vraagbaak-vragen .zoekknop:disabled {
    background: #a8c9b3 !important;
}

.vraagbaak-vragen .zoekveld:focus {
    border-color: #2e7d4a !important;
    outline-color: rgba(46, 125, 74, .2) !important;
}

.vraagbaak-vragen .zoekicoon {
    color: #8a8a8a !important;
}

/* De filters "Alle tags" / "Alle brontypes" in ZoekBalk zijn in pakketversie 1.0.1
   statische selects zonder werking (één optie, niet doorgegeven aan ChatAsync).
   Het pakket heeft geen parameter om ze uit te zetten, dus verbergen we ze hier. */
.vraagbaak-vragen .zoekfilters {
    display: none !important;
}

.vraagbaak-vragen .card {
    margin-top: .9rem;
}

.vraagbaak-vragen div:has(> .badge:not([class*="bg-"])) {
    margin-bottom: .5rem;
}

/* Het antwoord-vlak is in de markup een kale Bootstrap .card — geen "AI"-badge of
   kopregel zoals in het ontwerp, want die bestaan simpelweg niet in de DOM van het
   pakket. Dat kan van buitenaf niet worden toegevoegd zonder onechte, niet-semantische
   CSS-trucjes; hier alleen de kaart zelf een herkenbare "AI-antwoord"-uitstraling
   gegeven (zachte groene gradient, net als tbv-badge-groen elders). */
.vraagbaak-vragen .card {
    background: linear-gradient(135deg, #f0f9f2 0%, #e8f5eb 100%) !important;
    border: 1px solid #c8e6c9 !important;
    border-radius: 10px !important;
}

.vraagbaak-vragen .card-body {
    padding: 18px 22px !important;
    font-size: 12.5px;
    color: #2a4a32;
    line-height: 1.75;
}

.vraagbaak-vragen .bronnenlijst h2 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #8a8a8a !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 20px 0 10px !important;
}

.vraagbaak-vragen .bronkaart {
    border-color: #ececec !important;
    transition: border-color .15s, box-shadow .15s;
}

.vraagbaak-vragen .bronkaart:hover {
    border-color: #cfe0d5 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.vraagbaak-vragen .broninhoud h3 {
    color: #1a1a1a !important;
}

.vraagbaak-vragen .bronlink {
    border-color: #2e7d4a !important;
    color: #2e7d4a !important;
}

.vraagbaak-vragen .bronlink:hover {
    background: #f4f9f6 !important;
    color: #256b3e !important;
}

/* ── Rechten-preview (rvw-*) ──────────────────────────────────────────────
   Lichtgewicht simulatie-UI in het Rollen-beheerscherm. Gebruikt rvw- prefix
   zodat het los staat van de echte pagina-stijlen. Globaal (niet scoped)
   omdat de dispatcher-component én elke preview-component dezelfde klassen
   deelt en scoped CSS dan wél per component bindt, maar niet inter-component. */

.rvw-shell {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rvw-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
}

.rvw-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.rvw-leeg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-align: center;
}

/* Preview-container per component */
.rvw-preview {
    font-size: 0.8rem;
}

.rvw-pagina {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Geen-toegang overlay */
.rvw-geen-toegang {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    background: #fff3cd;
    border: 1px dashed #ffc107;
    border-radius: 6px;
    color: #856404;
    text-align: center;
    padding: 1.5rem;
}

/* Toolbar */
.rvw-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

/* Kolom (telefonie wachtrij) */
.rvw-kolom { display: flex; flex-direction: column; gap: 0.4rem; }

.rvw-kolom-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.rvw-kolom-titel { font-weight: 600; font-size: 0.85rem; }

/* Kaart (gesprek) */
.rvw-kaart {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.rvw-kaart-naam { font-weight: 600; }
.rvw-kaart-omschrijving { color: #6b7280; line-height: 1.4; }
.rvw-kaart-acties { display: flex; flex-wrap: wrap; gap: 4px; }

/* Knoppen */
.rvw-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    cursor: default;
    opacity: 0.9;
    line-height: 1.4;
}

.rvw-btn--succes {
    background: #2e7d4a;
    color: #fff;
    border-color: #2e7d4a;
}

.rvw-btn--primair {
    background: #1b6ec2;
    color: #fff;
    border-color: #1b6ec2;
}

.rvw-btn--outline {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}

.rvw-btn--gevaar {
    background: #fff;
    color: #dc2626;
    border-color: #fca5a5;
}

.rvw-btn--ghost {
    background: transparent;
    color: #374151;
    border-color: transparent;
}

.rvw-btn--klein {
    padding: 2px 6px;
    font-size: 0.7rem;
}

/* Input */
.rvw-input {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.78rem;
    background: #f9fafb;
    color: #9ca3af;
    width: 100%;
}

/* Tabel */
.rvw-tabel {
    border-collapse: collapse;
    font-size: 0.78rem;
}

.rvw-tabel th {
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: .4px;
    padding: 4px 6px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}

.rvw-tabel td {
    padding: 5px 6px;
    border-bottom: 1px solid #f8f8f8;
    vertical-align: middle;
}

.rvw-tabel-acties {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
}

/* Kenteken-pil in voertuigen-preview */
.rvw-kenteken {
    background: #fef08a;
    border: 1px solid #ca8a04;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Lijstrij */
.rvw-lijst-rij {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f3f4f6;
}

/* Tabs */
.rvw-tab {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.75rem;
    border: none;
    cursor: default;
}

.rvw-tab--actief {
    background: #1b6ec2;
    color: #fff;
}

/* Tag (klein label) */
.rvw-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.75rem;
}

/* Badge */
.rvw-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
}

.rvw-badge--rood { background: #fbeaea; color: #c0392b; }
.rvw-badge--oranje { background: #fdf1e0; color: #b5730b; }
.rvw-badge--blauw { background: #e9f0fb; color: #2f6fdb; }
.rvw-badge--grijs { background: #f2f2f2; color: #6b6b6b; }
.rvw-badge--groen { background: #eef5f0; color: #2e7d4a; }

/* Toelichting-badge (informatieve chip onder preview) */
.rvw-badge-toelichting {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #e8f0fe;
    color: #1967d2;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
}

/* Email specifiek */
.rvw-email-shell {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0.75rem;
    min-height: 220px;
}

.rvw-email-rij {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    border-radius: 4px;
}

.rvw-email-rij--ongelezen {
    background: #eff6ff;
    border-left: 2px solid #1b6ec2;
}

.rvw-email-detail-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
}

.rvw-email-acties { display: flex; flex-wrap: wrap; gap: 4px; }

/* Chat specifiek */
.rvw-chat-shell {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0.75rem;
    min-height: 220px;
}

.rvw-chat-rij {
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    border-bottom: 1px solid #f3f4f6;
}

.rvw-chat-rij--actief {
    background: #eff6ff;
}

.rvw-chat-bubble {
    border-radius: 10px;
    padding: 0.4rem 0.65rem;
    max-width: 95%;
    font-size: 0.75rem;
    line-height: 1.45;
}

.rvw-chat-bubble--assistent {
    background: #f3f4f6;
    color: #374151;
    margin-right: auto;
}

.rvw-chat-bubble--medewerker,
.rvw-chat-bubble--gebruiker {
    background: #1b6ec2;
    color: #fff;
    margin-left: auto;
}

.rvw-chat-bubble--klant {
    background: #f3f4f6;
    color: #374151;
    margin-right: auto;
}

/* Dashboard KPI's */
.rvw-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.rvw-kpi-tegel {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
}

.rvw-kpi-label { font-size: 0.68rem; color: #9ca3af; }
.rvw-kpi-waarde { font-size: 1rem; font-weight: 700; }

/* Grafiek placeholder */
.rvw-grafiek-placeholder {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.6rem;
}

.rvw-grafiek-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 50px;
}

.rvw-grafiek-bar {
    flex: 1;
    background: #93c5fd;
    border-radius: 2px 2px 0 0;
    min-height: 4px;
}

/* Melding-rij */
.rvw-melding-rij {
    padding: 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 0.4rem;
    background: #fff;
}

/* Vraagbaak chat */
.rvw-vraagbaak-header { font-size: 0.85rem; }