@import '_content/VraagbaakMiddelware.Sdk.Components/VraagbaakMiddelware.Sdk.Components.kzp3l0njhg.bundle.scp.css';

/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
.account-shell[b-qgygvu1ydj] {
    height: 100vh;
    overflow-y: auto;
    background: var(--w-bg);
    padding: 1.5rem clamp(1rem, 5vw, 4rem) 3rem;
}

.account-terug[b-qgygvu1ydj] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 1.25rem;
}

.account-terug:hover[b-qgygvu1ydj] {
    color: var(--w-green-strong);
}

.account-titel[b-qgygvu1ydj] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.account-subtitel[b-qgygvu1ydj] {
    color: #666;
    margin-bottom: 1.25rem;
}

.account-hr[b-qgygvu1ydj] {
    border-color: var(--w-line);
    margin-bottom: 1.5rem;
}

.account-card[b-qgygvu1ydj] {
    background: var(--w-card);
    border: 1px solid var(--w-line);
    border-radius: 0.5rem;
    padding: 1.5rem;
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
.account-nav[b-do3pkejrqg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.account-nav[b-do3pkejrqg]  a.account-nav-item {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background 0.12s, color 0.12s;
}

.account-nav[b-do3pkejrqg]  a.account-nav-item:hover {
    background: var(--w-bg);
}

.account-nav[b-do3pkejrqg]  a.account-nav-item.active {
    background: var(--w-green-strong);
    color: #fff;
    font-weight: 600;
}
/* /Components/Beheer/PoolDialoog.razor.rz.scp.css */
/* Bootstrap's Modal-component vereist JS-initialisatie die dit project bewust niet
   gebruikt: zichtbaarheid wordt vanuit Blazor gestuurd door deze component conditioneel
   te renderen. Alleen de positionering en de overlay hebben dus eigen CSS nodig — de
   inhoud van de dialoog zelf is verder Bootstrap (card, form-control, btn, ...). */
.pooldialoog-overlay[b-oekop9svaz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1040;
}

/* Bewust GEEN `transform: translate(-50%, -50%)` om te centreren, hoe gebruikelijk dat
   ook is: een transform maakt dit element het containing block voor elk `position: fixed`
   kind. De zoeklijst van MedewerkerSelect wordt door JS op viewport-coördinaten gezet
   (getBoundingClientRect), en die zouden dan t.o.v. de dialoog gelden in plaats van t.o.v.
   het scherm — de lijst sprong daardoor naar de hoek en bleef daar hangen.
   Centreren met marges levert hetzelfde resultaat zonder die bijwerking. */
.pooldialoog[b-oekop9svaz] {
    position: fixed;
    z-index: 1041;
    inset: 0;
    margin: auto;
    width: 640px;
    max-width: calc(100vw - 2rem);
    height: fit-content;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
}

.pooldialoog .card-body[b-oekop9svaz] {
    overflow-y: auto;
}

/* Begrenst de gekozen-ledenlijst zodat de dialoog niet oneindig meegroeit als er
   veel leden gekozen zijn; Bootstrap kent geen vaste max-height-utility hiervoor. */
.pooldialoog-ledenlijst[b-oekop9svaz] {
    max-height: 220px;
    overflow-y: auto;
}
/* /Components/Beheer/PoolsBeheer.razor.rz.scp.css */
/* Pool-icoonvierkant: geen Bootstrap-equivalent voor een gekleurd vierkant met een
   icoon erin (de kleur komt uit de naam, zie Kleur() in het code-block). */
.pool-icoon[b-y4yxm0ewin] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
}

/* Klikbare rij met hover-feedback: Bootstrap heeft geen "clickable list item"-utility. */
.pool-kop[b-y4yxm0ewin] {
    cursor: pointer;
}

.pool-kop:hover[b-y4yxm0ewin] {
    background: #f4f7ff;
}
/* /Components/Layout/AutoToevoegenDialog.razor.rz.scp.css */
.at-bevestig-overlay[b-7zpti7te3s] {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(244, 244, 244, 0.8);
    backdrop-filter: blur(3px);
}

.at-bevestig-panel[b-7zpti7te3s] {
    background: #fff;
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius);
    padding: 1.25rem 1.5rem;
    width: 100%;
    max-width: 28rem;
    box-shadow: var(--w-shadow-pop);
}
/* /Components/Layout/BeheerLayout.razor.rz.scp.css */
/* ── Beheer shell: tray links (flush, full-height), content rechts ── */
.beheer-shell[b-ektz33wlq8] {
    display: flex;
    min-height: 100%;
}

/* ── Tray ─────────────────────────────────────────────────────── */
.beheer-tray[b-ektz33wlq8] {
    flex-shrink: 0;
    width: 240px;
    background: #fff;
    border-right: 1px solid #eee;
    padding: 20px 0;
}

.beheer-menu[b-ektz33wlq8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* NavLink rendert als <a> in een child-component → ::deep nodig */
.beheer-menu[b-ektz33wlq8]  a.beheer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    font-size: 13.5px;
    font-weight: 400;
    color: #555;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.beheer-menu[b-ektz33wlq8]  a.beheer-item i {
    font-size: 17px;
    line-height: 1;
}

.beheer-menu[b-ektz33wlq8]  a.beheer-item:hover {
    background: #fafafa;
}

.beheer-menu[b-ektz33wlq8]  a.beheer-item.active {
    color: #2e7d4a;
    font-weight: 600;
    background: #f0f8f3;
    border-left-color: #2e7d4a;
}

/* Uitgeschakeld item (geen NavLink → geen ::deep) */
.beheer-item--disabled[b-ektz33wlq8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    font-size: 13.5px;
    font-weight: 400;
    color: #bbb;
    border-left: 3px solid transparent;
    cursor: not-allowed;
}

.beheer-item--disabled i[b-ektz33wlq8] {
    font-size: 17px;
    line-height: 1;
}

/* ── Content-regio ────────────────────────────────────────────── */
/* Sidebar levert de "negatieve ruimte" links (flush); content houdt
   eigen ademruimte met meer marge aan de rechterkant. */
.beheer-content[b-ektz33wlq8] {
    flex: 1;
    min-width: 0;
    padding: 24px clamp(32px, 5vw, 80px) 32px 32px;
}
/* /Components/Layout/ConnectionToast.razor.rz.scp.css */
/* ── Floating toast rechtsonder ───────────────────────────────────────── */

.connection-toast[b-9ath65w0sz] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    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;
    z-index: 9998;
    animation: toast-slide-in-b-9ath65w0sz 0.2s ease-out;
}

/* Blazor circuit-toast staat iets hoger als de app-toast ook zichtbaar is */
.circuit-toast[b-9ath65w0sz] {
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
}

@keyframes toast-slide-in-b-9ath65w0sz {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Kleurthema's ─────────────────────────────────────────────────────── */

.toast-warning[b-9ath65w0sz] {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #664d03;
}

/* Neutraal thema voor "bezig": een achtergrondtaak is geen waarschuwing. */
.toast-info[b-9ath65w0sz] {
    background: #eef4fb;
    border-left: 4px solid #3b6ea5;
    color: #274b70;
}

.toast-success[b-9ath65w0sz] {
    background: #d1e7dd;
    border-left: 4px solid #198754;
    color: #0a3622;
}

.toast-danger[b-9ath65w0sz] {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
    color: #58151c;
}

/* ── Spinner ──────────────────────────────────────────────────────────── */

.toast-spinner[b-9ath65w0sz] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: toast-spin-b-9ath65w0sz 0.7s linear infinite;
    opacity: 0.7;
}

@keyframes toast-spin-b-9ath65w0sz {
    to { transform: rotate(360deg); }
}

/* ── Iconen ───────────────────────────────────────────────────────────── */

.toast-icon[b-9ath65w0sz] {
    flex-shrink: 0;
    font-size: 1rem;
}

/* ── Tekst ────────────────────────────────────────────────────────────── */

.toast-text[b-9ath65w0sz] {
    flex: 1;
    line-height: 1.3;
}

/* ── Herverbinding-knop ───────────────────────────────────────────────── */

.toast-retry-btn[b-9ath65w0sz] {
    display: inline;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Blazor circuit reconnect dialog: geen blokkerende modal ─────────── */

#components-reconnect-modal[b-9ath65w0sz] {
    all: unset; /* verwijder browser-dialog styling */
    display: none;
}

#components-reconnect-modal[open][b-9ath65w0sz] {
    display: flex; /* laat .circuit-toast de opmaak doen */
}

#components-reconnect-modal[b-9ath65w0sz]::backdrop {
    background: none;
}

/* Toestandsklassen van Blazor: toon/verberg per staat */
.components-reconnect-first-attempt-visible[b-9ath65w0sz],
.components-reconnect-repeated-attempt-visible[b-9ath65w0sz],
.components-reconnect-failed-visible[b-9ath65w0sz],
.components-pause-visible[b-9ath65w0sz],
.components-resume-failed-visible[b-9ath65w0sz] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9ath65w0sz],
#components-reconnect-modal.components-reconnect-show .toast-spinner[b-9ath65w0sz],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9ath65w0sz],
#components-reconnect-modal.components-reconnect-retrying .toast-spinner[b-9ath65w0sz],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9ath65w0sz],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9ath65w0sz],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9ath65w0sz] {
    display: inline;
}

/* Kleur aanpassen op staat */
#components-reconnect-modal.components-reconnect-show .circuit-toast[b-9ath65w0sz],
#components-reconnect-modal.components-reconnect-retrying .circuit-toast[b-9ath65w0sz] {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #664d03;
}

#components-reconnect-modal.components-reconnect-failed .circuit-toast[b-9ath65w0sz] {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
    color: #58151c;
}
/* /Components/Layout/ContactgeschiedenisLijst.razor.rz.scp.css */
/* ── Header ── */

.gk-history[b-kbddlsoijw] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 4px;
}

.gk-history-header[b-kbddlsoijw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid #f3f3f3;
}

.gk-history-title[b-kbddlsoijw] {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.gk-history-summary[b-kbddlsoijw] {
    font-size: 11px;
    color: #999;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.gk-history-body[b-kbddlsoijw] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Scroll container ── */

.gk-history-scroll[b-kbddlsoijw] {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 60vh;
    padding-right: 0.25rem;
}

/* ── Contactmoment item ── */

.gk-ci[b-kbddlsoijw] {
    border-bottom: 1px solid #f5f5f5;
}

.gk-ci-row[b-kbddlsoijw] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 90px 9px 6px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    background: transparent;
    outline: none;
}

.gk-ci-row-top[b-kbddlsoijw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.gk-ci-row-bottom[b-kbddlsoijw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.gk-ci-row:hover[b-kbddlsoijw] {
    background: #f9f9f9;
    border-radius: 6px;
}

.gk-ci--open .gk-ci-row[b-kbddlsoijw] {
    background: #fafafa;
    border-radius: 6px 6px 0 0;
}

/* Column 1: date + time */

.gk-ci-date[b-kbddlsoijw] {
    color: #999;
    font-weight: 400;
    white-space: nowrap;
}

.gk-ci-time[b-kbddlsoijw] {
    color: #bbb;
    font-size: 11px;
}

/* Column 2: channel badge + richting */

.gk-ci-badge[b-kbddlsoijw] {
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    border-radius: 3px;
    padding: 2px 6px;
    display: inline-block;
    white-space: nowrap;
}

.gk-ci-badge--telefoon[b-kbddlsoijw] { background: #5ba97b; }
.gk-ci-badge--voiceai[b-kbddlsoijw]  { background: #e8a308; }
.gk-ci-badge--email[b-kbddlsoijw]    { background: #6b8acd; }
.gk-ci-badge--chat[b-kbddlsoijw]     { background: #6b8acd; }
.gk-ci-badge--overig[b-kbddlsoijw]   { background: #aaa; }

.gk-ci-afgebroken-badge[b-kbddlsoijw] {
    position: absolute;
    top: 9px;
    right: 6px;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 600;
    background: #fbeaea;
    color: #c0392b;
}

.gk-ci-type[b-kbddlsoijw] {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.gk-ci-type--in[b-kbddlsoijw]  { color: #5ba97b; }
.gk-ci-type--uit[b-kbddlsoijw] { color: #c47020; }

.gk-ci-agent[b-kbddlsoijw] {
    color: #999;
    font-size: 11px;
    white-space: nowrap;
}

.gk-ci-klant[b-kbddlsoijw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
}

.gk-ci-klant:hover[b-kbddlsoijw] {
    text-decoration: underline;
}

/* Column 3: summary */

.gk-ci-summary[b-kbddlsoijw] {
    color: #555;
    line-height: 1.4;
}

/* ── Expanded panel ── */

.gk-ci-expanded[b-kbddlsoijw] {
    background: #fafafa;
    border-radius: 0 0 6px 6px;
    padding: 10px 14px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

.gk-ci-details[b-kbddlsoijw] {
    font-size: 12.5px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Kenteken en Call-ID op één regel, gescheiden door een streepje; Bootstrap kent geen
   scheiding tussen inline items. */
.gk-ci-meta[b-kbddlsoijw] {
    font-size: 11px;
    color: #999 !important;
}

.gk-ci-meta span + span[b-kbddlsoijw] {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #ccc;
}

.gk-ci-topics-label[b-kbddlsoijw] {
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
}

.gk-ci-topics[b-kbddlsoijw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.gk-ci-topic-pill[b-kbddlsoijw] {
    display: inline-flex;
    align-items: center;
    background: #eef5f0;
    color: #2e7d4a;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11.5px;
    font-weight: 500;
}
/* /Components/Layout/ContactmomentAfrondenModal.razor.rz.scp.css */
/* Keuzekaart voor de afronding. Bootstrap heeft geen radio-als-kaart: btn-check zou de
   gekozen optie volledig groen vullen, het ontwerp wil een lichte groene rand. */
.afronding-optie[b-ki6fh6scdt] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    border: 1px solid var(--bs-border-color);
    cursor: pointer;
}

.afronding-optie:hover[b-ki6fh6scdt] {
    background-color: var(--bs-tertiary-bg);
}

.afronding-optie:has(input:checked)[b-ki6fh6scdt] {
    border-color: var(--bs-success);
    background-color: var(--bs-success-bg-subtle);
    font-weight: 600;
}

.afronding-optie .form-check-input[b-ki6fh6scdt] {
    margin: 0;
    flex-shrink: 0;
}

.afronding-optie .form-check-input:checked[b-ki6fh6scdt] {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}
/* /Components/Layout/ContactmomentWerkkaart.razor.rz.scp.css */
.cm-card-content[b-a6c1qgewec] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.cm-summary[b-a6c1qgewec] {
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    padding: 1rem;
    background: #f8fafc;
}

.cm-label[b-a6c1qgewec] {
    color: #667085;
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.cm-details[b-a6c1qgewec] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.cm-details div[b-a6c1qgewec] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    border: 1px solid #edf0f3;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: #fff;
}

.cm-details dt[b-a6c1qgewec] {
    min-width: 10rem;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 600;
}

.cm-details dd[b-a6c1qgewec] {
    margin: 0;
    color: #212529;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .cm-card-content[b-a6c1qgewec] {
        padding: 0.75rem;
    }

    .cm-details div[b-a6c1qgewec] {
        flex-direction: column;
        gap: 0.35rem;
    }

    .cm-details dt[b-a6c1qgewec] {
        min-width: 0;
    }

    .cm-details dd[b-a6c1qgewec] {
        text-align: left;
    }
}
/* /Components/Layout/EmailAntwoordModal.razor.rz.scp.css */
/* Wealer-popup-stijl, geport van de modal in Components/Pages/Telefonie.razor.css
   i.p.v. Bootstrap's generieke .modal fade show d-block. */

.modal-backdrop[b-krfguqa68w] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 100;
}

.modal-panel[b-krfguqa68w] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    background: var(--w-card);
    border-radius: 12px;
    box-shadow: var(--w-shadow-pop);
    width: 1200px;
    max-width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-krfguqa68w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--w-line);
    flex-shrink: 0;
}

.modal-titel[b-krfguqa68w] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--w-ink);
}

.modal-sluit[b-krfguqa68w] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--w-mute);
    padding: 0.2rem;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.modal-sluit:hover[b-krfguqa68w] {
    background: #f0f0f0;
    color: var(--w-ink);
}

.modal-body[b-krfguqa68w] {
    padding: 1.25rem;
    overflow-y: auto;
}

.modal-kolommen[b-krfguqa68w] {
    display: flex;
    gap: 16px;
}

.modal-kolom[b-krfguqa68w] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.modal-label[b-krfguqa68w] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--w-ink);
    margin-bottom: 6px;
}

.modal-body-box[b-krfguqa68w] {
    flex: 1;
    min-height: 420px;
    padding: 12px 14px;
    border: 1px solid var(--w-line);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.7;
    font-family: inherit;
}

.modal-body-box--readonly[b-krfguqa68w] {
    background: #fafafa;
    color: var(--w-ink-2);
    overflow-y: auto;
    white-space: pre-wrap;
}

.modal-body-box--editable[b-krfguqa68w] {
    resize: vertical;
    outline: none;
    color: var(--w-ink);
}

.modal-body-box--editable:focus[b-krfguqa68w] {
    border-color: var(--w-green-strong);
}

.modal-footer[b-krfguqa68w] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--w-line);
    flex-shrink: 0;
}

.modal-foutmelding[b-krfguqa68w] {
    font-size: 12.5px;
    color: #d64545;
    margin-right: auto;
}
/* /Components/Layout/KlantgegevensSectie.razor.rz.scp.css */
.kk-section-title[b-6hgz0mtenf] { font-size: 13px; font-weight: 600; color: #1a1a1a; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #f3f3f3; }
.gk-avatar[b-6hgz0mtenf] { width: 44px; height: 44px; border-radius: 50%; background: #dce8e0; color: #2e7d4a; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gk-divider[b-6hgz0mtenf] { border-top: 1px solid #f3f3f3; }
/* /Components/Layout/KlantKaartOverlay.razor.rz.scp.css */
/* ── Two-column layout (Bootstrap grid doesn't support a fixed-width right panel) ── */
.gk-layout[b-g6pybu6obf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.gk-content-shell[b-g6pybu6obf] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.gk-side-column[b-g6pybu6obf] {
    align-self: start;
}

/* Left column stretches to the panel height so only the history list scrolls internally */
.gk-main-column[b-g6pybu6obf] {
    min-height: 0;
}

.gk-main-column > .kk-card[b-g6pybu6obf] {
    flex-shrink: 0;
}

/* ContactgeschiedenisLijst is a child component — ::deep reaches its rendered markup */
.gk-main-column[b-g6pybu6obf]  .gk-history {
    flex: 1;
    min-height: 0;
}

.gk-main-column[b-g6pybu6obf]  .gk-history-body {
    flex: 1;
    min-height: 0;
}

.gk-main-column[b-g6pybu6obf]  .gk-history-scroll {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.gk-contactmoment-overlay[b-g6pybu6obf] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    background: rgba(248, 250, 252, 0.72);
    backdrop-filter: blur(2px);
}

.gk-contactmoment-panel[b-g6pybu6obf] {
    width: min(60rem, 100%);
    max-height: calc(90vh - 8rem);
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius);
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gk-contactmoment-header[b-g6pybu6obf] {
    min-height: 3.25rem;
    border-bottom: 1px solid var(--w-line-2);
    padding: 0.65rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gk-contactmoment-title[b-g6pybu6obf] {
    min-width: 0;
    color: var(--w-ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.gk-contactmoment-body[b-g6pybu6obf] {
    overflow: auto;
    padding: 0.25rem;
    scrollbar-gutter: stable;
}

/* ── Avatar (Bootstrap has no avatar component) ─────────────── */
.gk-avatar[b-g6pybu6obf] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #dce8e0;
    color: #2e7d4a;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Gespreksdetails paneel (dropdown onder de toggle) ───────── */
.gk-details-panel[b-g6pybu6obf] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius);
    padding: 0.6rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 500px;
    box-shadow: var(--w-shadow-pop);
    animation: gk-slide-in-b-g6pybu6obf 0.4s ease-out;
}

@keyframes gk-slide-in-b-g6pybu6obf {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gk-details-rij[b-g6pybu6obf] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.78rem;
    align-items: baseline;
}

.gk-details-label[b-g6pybu6obf] {
    color: var(--w-mute);
    flex-shrink: 0;
    width: 100px;
}

.gk-details-waarde[b-g6pybu6obf] {
    color: var(--w-ink-2);
    word-break: break-all;
}

/* ── Klant zoeker rij ────────────────────────────────────────── */
.gk-klant-rij[b-g6pybu6obf] {
    cursor: pointer;
    transition: background 0.12s;
}

.gk-klant-rij:hover[b-g6pybu6obf] {
    background: #f0f5f2;
}

.gk-avatar--sm[b-g6pybu6obf] {
    width: 32px;
    height: 32px;
    font-size: 0.72rem;
}

.gk-edit-section[b-g6pybu6obf] {
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.gk-edit-section:hover[b-g6pybu6obf],
.gk-edit-section--active[b-g6pybu6obf] {
    background: #f7faf8;
}

.gk-section-actions[b-g6pybu6obf] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    min-height: 31px;
}

.gk-hover-action[b-g6pybu6obf] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.gk-edit-section:hover .gk-hover-action[b-g6pybu6obf] {
    opacity: 1;
    pointer-events: auto;
}

.gk-edit-section .form-label[b-g6pybu6obf] {
    font-weight: 600;
}

.kk-card[b-g6pybu6obf] {
    border: 1px solid #efefef !important;
    box-shadow: none !important;
    border-radius: 8px;
}

.kk-section-title[b-g6pybu6obf] {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f3f3f3;
}

.gk-topics-pill-list[b-g6pybu6obf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── SAM (AI) samenvatting ── */
.gk-sam-summary[b-g6pybu6obf] {
    font-size: 12.5px;
    color: #555;
    line-height: 1.5;
}

.gk-sam-label[b-g6pybu6obf] {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.gk-sam-text[b-g6pybu6obf] {
    color: #555;
}

.gk-sam-empty[b-g6pybu6obf] {
    color: #aaa;
}

/* ── Divider lijn ── */
.gk-divider[b-g6pybu6obf] {
    border-top: 1px solid #f3f3f3;
}

/* ── Scenario textarea ── */
.gk-scenario-textarea[b-g6pybu6obf] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: 12.5px;
    color: #1a1a1a;
    resize: vertical;
    outline: none;
    line-height: 1.5;
    font-family: inherit;
    background: #fff;
}

.gk-scenario-textarea:focus[b-g6pybu6obf] {
    border-color: #2e7d4a;
    box-shadow: none;
}

.gk-wissel-btn[b-g6pybu6obf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    color: #888;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.gk-wissel-btn:hover[b-g6pybu6obf] {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.gk-auto-list[b-g6pybu6obf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gk-auto-item[b-g6pybu6obf] {
    border: 1px solid var(--w-line-2);
    border-radius: var(--w-radius);
    overflow: hidden;
    background: #fff;
}

.gk-auto-header[b-g6pybu6obf] {
    width: 100%;
    min-height: 3rem;
    border: 0;
    background: #fff;
    color: #212529;
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
}

/* De auto die gekozen is voor het contactmoment; Bootstrap heeft geen
   "geselecteerde kaart"-variant, vandaar deze rand en achtergrond. */
.gk-auto-item--gekozen[b-g6pybu6obf] {
    border-color: var(--bs-success, #198754);
    background: #f3f9f5;
}
.gk-auto-item--gekozen .gk-auto-header[b-g6pybu6obf] {
    background: transparent;
}
.gk-auto-header:hover[b-g6pybu6obf] {
    background: #f7faf8;
}

.gk-auto-summary[b-g6pybu6obf] {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gk-auto-details[b-g6pybu6obf] {
    border-top: 1px solid var(--w-line-2);
    padding: 0.75rem;
    background: #fafaf9;
}

/* ── Overlay: state container only, children use position:fixed ── */
.kk-overlay[b-g6pybu6obf] {
    z-index: 900;
    pointer-events: none;
}

/* Hidden: panel fades out and becomes non-interactive */
.kk-overlay--hidden .kk-panel[b-g6pybu6obf] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Tab: fixed to right edge, shown only when slid */
.kk-tab[b-g6pybu6obf] {
    position: fixed;
    right: 0;
    top: 25%;
    width: 16rempx;
    background: #2e7d32;
    border-radius: 8px 0 0 8px;
    padding: 0.75rem 0.6rem;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    opacity: 0;
    pointer-events: none;
    color: white;
    z-index: 901;
}

.kk-overlay--slid .kk-tab[b-g6pybu6obf] {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s 0.2s;
}

/* Customer name horizontal */
.kk-tab-naam[b-g6pybu6obf] {
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Main panel: independently centered via position:fixed */
.kk-panel[b-g6pybu6obf] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
    background: white;
    border-radius: var(--w-radius);
    box-shadow: var(--w-shadow-pop);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s ease-in-out,
                visibility 0.15s ease-in-out;
    z-index: 900;
}

/* Slid: panel slides fully off-screen to the right */
.kk-overlay--slid .kk-panel[b-g6pybu6obf] {
    transform: translate(150vw, -50%);
}

/* Maximized: panel fills the full viewport */
.kk-overlay--maximized .kk-panel[b-g6pybu6obf] {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    transition: none;
}

/* Content area — fills the panel height; it no longer scrolls itself, only the
   Contactgeschiedenis list inside it does (see .gk-main-column ::deep rules above) */
.kk-content[b-g6pybu6obf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    padding: 2rem;
}

/* Topbar inside panel */
.kk-topbar[b-g6pybu6obf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--w-line);
    flex-shrink: 0;
}

.gk-opmerking-overlay[b-g6pybu6obf] {
    z-index: 40;
}
/* /Components/Layout/KlantWisselDialog.razor.rz.scp.css */
.kw-dialog[b-sgxgx0ghfv] {
    max-width: 560px;
}

.kw-content[b-sgxgx0ghfv] {
    border-radius: 14px !important;
    overflow: hidden;
}

.kw-header[b-sgxgx0ghfv] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 24px 14px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.kw-title[b-sgxgx0ghfv] {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.kw-close-btn[b-sgxgx0ghfv] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.kw-body[b-sgxgx0ghfv] {
    padding: 16px 24px 24px !important;
}

.kw-section-title[b-sgxgx0ghfv] {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.kw-instruction[b-sgxgx0ghfv] {
    font-size: 12.5px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 12px;
}

.kw-label[b-sgxgx0ghfv] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
}

.kw-input[b-sgxgx0ghfv] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    font-size: 12.5px;
    color: #1a1a1a;
    outline: none;
    font-family: inherit;
    margin-bottom: 14px;
    display: block;
}

.kw-input:focus[b-sgxgx0ghfv] {
    border-color: #2e7d4a;
    box-shadow: none;
}

.kw-error[b-sgxgx0ghfv] {
    font-size: 12px;
    margin-top: -8px;
    margin-bottom: 8px;
}

.kw-btn-row[b-sgxgx0ghfv] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.kw-btn-primary[b-sgxgx0ghfv] {
    padding: 7px 16px;
    border-radius: 5px;
    border: none;
    background: #2e7d4a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kw-btn-primary:disabled[b-sgxgx0ghfv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.kw-btn-secondary[b-sgxgx0ghfv] {
    padding: 7px 16px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #555;
    font-size: 12.5px;
    font-weight: 400;
    cursor: pointer;
}

.kw-search[b-sgxgx0ghfv] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    font-size: 13px;
    color: #1a1a1a;
    outline: none;
    font-family: inherit;
    background: #fafafa;
    margin-bottom: 4px;
    display: block;
}

.kw-search:focus[b-sgxgx0ghfv] {
    border-color: #2e7d4a;
    box-shadow: none;
}

.kw-klant-lijst[b-sgxgx0ghfv] {
    border-top: 1px solid #f0f0f0;
}

.kw-klant-rij[b-sgxgx0ghfv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}

.kw-klant-rij:hover[b-sgxgx0ghfv] {
    background: #fafafa;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 4px;
}

.kw-avatar-initials[b-sgxgx0ghfv] {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.kw-naam[b-sgxgx0ghfv] {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kw-info[b-sgxgx0ghfv] {
    font-size: 11.5px;
    color: #888;
}

.kw-geen-klanten[b-sgxgx0ghfv] {
    padding: 20px 0;
    text-align: center;
    color: #999;
    font-size: 12.5px;
    margin-bottom: 0;
}

.kw-geenklant-toggle-rij[b-sgxgx0ghfv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fafafa;
    border: 1px solid #eee;
    margin-bottom: 16px;
}

.kw-geenklant-toggle-rij--actief[b-sgxgx0ghfv] {
    background: #f7faf8;
    border-color: #bcdcc8;
}

.kw-toggle-track[b-sgxgx0ghfv] {
    width: 42px;
    height: 24px;
    border-radius: 12px;
    flex-shrink: 0;
    background: #ccc;
    cursor: pointer;
    position: relative;
    transition: background .18s ease;
}

.kw-toggle-track--aan[b-sgxgx0ghfv] {
    background: #2e7d4a;
}

.kw-toggle-knop[b-sgxgx0ghfv] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: left .18s ease;
}

.kw-toggle-knop--aan[b-sgxgx0ghfv] {
    left: 20px;
}

.kw-geenklant-titel[b-sgxgx0ghfv] {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}

.kw-geenklant-subtitel[b-sgxgx0ghfv] {
    font-size: 11.5px;
    color: #888;
}

.kw-soort-call-pills[b-sgxgx0ghfv] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kw-soort-call-pill[b-sgxgx0ghfv] {
    padding: 5px 12px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.kw-soort-call-pill--actief[b-sgxgx0ghfv] {
    border-color: #2e7d4a;
    color: #2e7d4a;
    background: #eef5f0;
}
/* /Components/Layout/MailActiesBlok.razor.rz.scp.css */
/* Merkspecifieke gradient voor het actieblok; Bootstrap kent geen equivalent. */
.mail-acties[b-fxkcqshtdc] {
    background: linear-gradient(135deg, #f0f9f2 0%, #e8f5eb 100%);
    border-bottom: 1px solid #c8e6c9;
}

.mail-acties-teller[b-fxkcqshtdc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: .4rem;
    background: var(--bs-success);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.mail-actie[b-fxkcqshtdc] {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid #dce8df;
    border-radius: .45rem;
    background: #fff;
    font-size: .78rem;
    cursor: pointer;
}

.mail-actie--gedaan[b-fxkcqshtdc] {
    border-color: #a5d6a7;
    background: rgba(46, 125, 74, .08);
    color: #6a8a72;
    text-decoration: line-through;
}

.mail-actie-vinkje[b-fxkcqshtdc] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.5px solid #9aba9e;
    border-radius: .25rem;
    background: #fff;
    color: #fff;
}

.mail-actie--gedaan .mail-actie-vinkje[b-fxkcqshtdc] {
    border-color: transparent;
    background: var(--bs-success);
}

.mail-acties-hint[b-fxkcqshtdc] {
    padding: .45rem .65rem;
    border: 1px dashed #b8d8c0;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .5);
    color: #5a8a6a;
}
/* /Components/Layout/MailContactmomentModal.razor.rz.scp.css */
/* Ronde initialen-avatar in het klantblok. Bootstrap heeft geen avatar-component. */
.mail-klant-avatar[b-j310zwf0xm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #eef5f0;
    color: var(--bs-success);
    font-size: .78rem;
    font-weight: 700;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── App shell ─────────────────────────────────────────────── */
.app-shell[b-a3anctu3m9] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: var(--w-bg);
}

/* ── Header ─────────────────────────────────────────────────── */
.app-header[b-a3anctu3m9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background-color: var(--w-card);
    border-bottom: 1px solid var(--w-line);
}

.app-brand-logo[b-a3anctu3m9] {
    height: clamp(1.5rem, 3vw, 3rem);
    width: auto;
}

.app-user[b-a3anctu3m9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: default;
}

.app-user-info[b-a3anctu3m9] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.app-user-name[b-a3anctu3m9] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--w-ink);
}

.app-user-role[b-a3anctu3m9] {
    font-size: 0.75rem;
    color: var(--w-mute);
}

.app-user-avatar[b-a3anctu3m9] {
    width: 2.2rem;
    height: 2.2rem;
    border: 1.5px solid var(--w-line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--w-mute);
}

/* ── Tab bar ─────────────────────────────────────────────────── */
.app-tabs[b-a3anctu3m9] {
    display: flex;
    align-items: flex-end;
    letter-spacing: 0.02em;
    gap: 0;
    padding: 0.2rem 8vw;
    background-color: var(--w-card);
    border-bottom: 1px solid var(--w-line);
}

/* NavLink rendert als <a> in een child-component → ::deep nodig */
.app-tabs[b-a3anctu3m9]  a {
    padding: 12px 15px 10px;
    font-size: 13px;
    font-weight: 400;
    color: var(--w-mute);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    display: inline-block;
}

.app-tabs[b-a3anctu3m9]  a:hover {
    color: var(--w-ink);
    text-decoration: none;
}

.app-tabs[b-a3anctu3m9]  a.active {
    color: #2a7d4b;
    border-bottom: 2px solid #2a7d4b;
    font-weight: 500;
}

/* ── Test button in tab bar ──────────────────────────────────── */
.app-tabs-spacer[b-a3anctu3m9] {
    flex: 1;
}

.app-tab-test-btn[b-a3anctu3m9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: center;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.app-tab-test-btn:hover[b-a3anctu3m9] {
    background: #fde68a;
    border-color: #f59e0b;
}

/* ── Content ─────────────────────────────────────────────────── */
.app-workspace[b-a3anctu3m9] {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
    background-color: var(--w-bg);
}

.app-content[b-a3anctu3m9] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    background-color: var(--w-bg);
    padding: 0 10rem 0.75rem;
    transition: padding 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1280px) {
    .app-content[b-a3anctu3m9] {
        padding: 0.75rem 2rem;
    }
}

@media (min-width: 1281px) {
    .app-workspace:has(.wv-paneel:not(.wv-paneel--sluiten)) .app-content[b-a3anctu3m9] {
        padding: 0.75rem 4rem;
    }
}

@media (max-width: 1024px) {
    .app-content[b-a3anctu3m9] {
        padding: 0.75rem 0;
    }
}

/* ── Error UI ────────────────────────────────────────────────── */
#blazor-error-ui[b-a3anctu3m9] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-a3anctu3m9] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* === Floating toast rechtsonder — blokkeert de pagina niet === */

#components-reconnect-modal[b-esyu9fwagx] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    width: auto;
    min-width: 220px;
    max-width: 320px;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    background-color: #fff3cd; /* warning-tint: verbinding bezig */
    border-left: 4px solid #ffc107;
    color: #664d03;
}

#components-reconnect-modal[open][b-esyu9fwagx] {
    display: flex;
}

/* Rood bij definitief mislukt */
#components-reconnect-modal.components-reconnect-failed[b-esyu9fwagx] {
    background-color: #f8d7da;
    border-left-color: #dc3545;
    color: #58151c;
}

/* Geen backdrop — het is een toast, geen blokkerende modal */
#components-reconnect-modal[b-esyu9fwagx]::backdrop {
    background: none;
}

/* === Toestandsbeheer: toon/verberg per Blazor-klasse === */

.components-reconnect-first-attempt-visible[b-esyu9fwagx],
.components-reconnect-repeated-attempt-visible[b-esyu9fwagx],
.components-reconnect-failed-visible[b-esyu9fwagx],
.components-pause-visible[b-esyu9fwagx],
.components-resume-failed-visible[b-esyu9fwagx],
.reconnect-spinner[b-esyu9fwagx],
.reconnect-failed-icon[b-esyu9fwagx] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-esyu9fwagx],
#components-reconnect-modal.components-reconnect-show .reconnect-spinner[b-esyu9fwagx],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-esyu9fwagx],
#components-reconnect-modal.components-reconnect-retrying .reconnect-spinner[b-esyu9fwagx],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-esyu9fwagx],
#components-reconnect-modal.components-reconnect-failed .reconnect-failed-icon[b-esyu9fwagx],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-esyu9fwagx],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-esyu9fwagx] {
    display: flex;
}

/* === Spinner === */

.reconnect-spinner[b-esyu9fwagx] {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.reconnect-spinner div[b-esyu9fwagx] {
    position: absolute;
    border: 2px solid #ffc107;
    opacity: 1;
    border-radius: 50%;
    animation: reconnect-pulse-b-esyu9fwagx 1.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.reconnect-spinner div:nth-child(2)[b-esyu9fwagx] {
    animation-delay: -0.7s;
}

@keyframes reconnect-pulse-b-esyu9fwagx {
    0%   { top: 10px; left: 10px; width: 0; height: 0; opacity: 0; }
    5%   { opacity: 1; }
    100% { top: 0; left: 0; width: 20px; height: 20px; opacity: 0; }
}

/* === Mislukt-icoon === */

.reconnect-failed-icon[b-esyu9fwagx] {
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #dc3545;
    align-items: center;
}

/* === Tekst-body === */

.reconnect-body[b-esyu9fwagx] {
    flex: 1;
}

.reconnect-body p[b-esyu9fwagx] {
    margin: 0;
    line-height: 1.3;
}

/* === Knop === */

.reconnect-btn[b-esyu9fwagx] {
    border: 0;
    border-radius: 0.25rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    background-color: #dc3545;
    color: #fff;
    flex-shrink: 0;
}

.reconnect-btn:hover[b-esyu9fwagx] {
    background-color: #b02a37;
}
/* /Components/Layout/WerkvoorraadOverlay.razor.rz.scp.css */
@keyframes wv-slide-in-b-f98kn97owt {
    from {
        width: 0;
        min-width: 0;
        opacity: 0;
    }
}

@keyframes wv-slide-out-b-f98kn97owt {
    to {
        width: 0;
        min-width: 0;
        opacity: 0;
    }
}

.wv-paneel[b-f98kn97owt] {
    width: clamp(22rem, 28vw, 31rem);
    min-width: 22rem;
    height: 100%;
    border-left: 1px solid var(--w-line);
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: wv-slide-in-b-f98kn97owt 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.wv-paneel--sluiten[b-f98kn97owt] {
    animation: wv-slide-out-b-f98kn97owt 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.wv-paneel-header[b-f98kn97owt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--w-line-2);
    padding: 0.85rem 1rem;
}

.wv-paneel-header h2[b-f98kn97owt] {
    margin: 0;
    color: var(--w-ink);
    font-size: 1rem;
    font-weight: 800;
}

.wv-paneel-header span[b-f98kn97owt] {
    color: var(--w-mute);
    font-size: 0.78rem;
    font-weight: 600;
}

.wv-group[b-f98kn97owt] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.85rem 1rem 0;
    overflow: visible;
}

.wv-group-title[b-f98kn97owt] {
    margin: 0 0 0.4rem;
    color: var(--w-mute);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.wv-card[b-f98kn97owt] {
    width: 100%;
    margin-top: 0;
    background: #fff;
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius);
    box-shadow: var(--w-shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wv-card--contactmoment[b-f98kn97owt] {
    cursor: pointer;
}

.wv-card--contactmoment:hover[b-f98kn97owt] {
    border-color: #9ec5fe;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.18);
    transform: translateX(-0.25rem);
}

.wv-card--klantkaart:hover[b-f98kn97owt] {
    border-color: #a3cfbb;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.18);
    transform: translateX(-0.25rem);
}

.wv-card--slid[b-f98kn97owt] {
    transform: translateX(calc(100% - 3rem));
}

.wv-card--maximized[b-f98kn97owt] {
    position: fixed;
    inset: 1rem;
    z-index: 1200;
    width: auto;
    max-height: none;
    margin-top: 0;
    border-radius: 10px;
    transform: none;
}

.wv-card-header[b-f98kn97owt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--w-line-2);
    padding: 0.8rem 0.9rem;
}

.wv-card-title-wrap[b-f98kn97owt] {
    min-width: 0;
}

.wv-card-title[b-f98kn97owt] {
    margin: 0;
    color: var(--w-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.wv-card-subtitle[b-f98kn97owt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    margin-top: 0.2rem;
    color: var(--w-mute);
    font-size: 0.8rem;
}

.wv-card-subtitle span:not(:last-child)[b-f98kn97owt]::after {
    content: "/";
    margin-left: 0.6rem;
    color: #adb5bd;
}

.wv-card-actions[b-f98kn97owt] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.wv-card-body[b-f98kn97owt] {
    overflow: auto;
    padding: 0.9rem;
}

@media (max-width: 1100px) {
    .wv-paneel[b-f98kn97owt] {
        width: min(24rem, 42vw);
        min-width: 19rem;
    }
}
/* /Components/Pages/Beheer/Bedrijven.razor.rz.scp.css */
/* === Verwijder-knoppen: alleen tonen bij hover of toetsenbord-focus === */
.verwijder-rij .verwijder-knop[b-v2t4nj6wc8] {
    opacity: 0;
    transition: opacity 0.15s;
}

.verwijder-rij:hover .verwijder-knop[b-v2t4nj6wc8],
.verwijder-rij .verwijder-knop:focus-visible[b-v2t4nj6wc8] {
    opacity: 1;
}

/* === Tree-structuur: Bedrijf → Afdeling → Functie === */

/* Bedrijf-icoon in de accordion-header */
.bedrijf-icoon[b-v2t4nj6wc8] {
    color: var(--bs-primary);
}

/* Afdeling: blok met blauwe accent-balk */
.afdeling-blok[b-v2t4nj6wc8] {
    border-left: 4px solid var(--bs-primary);
    padding: 0.4rem 1rem;
    margin-bottom: 0.4rem;
}

.afdeling-naam[b-v2t4nj6wc8] {
    color: var(--bs-primary-text-emphasis);
}

.afdeling-icoon[b-v2t4nj6wc8] {
    color: var(--bs-primary);
}

/* Functie-lijst: filesysteem-tree met groene verbindingslijnen */
.functie-lijst[b-v2t4nj6wc8] {
    margin-left: 0.5rem;
    padding-left: 1.25rem;
}

.functie-rij[b-v2t4nj6wc8] {
    position: relative;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s;
}

/* Verticale stam-lijn per rij (zo stopt hij bij de laatste functie) */
.functie-rij[b-v2t4nj6wc8]::after {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--bs-success-border-subtle);
}

/* Laatste functie: lijn loopt slechts tot het tikje (helft), niet verder naar onder */
.functie-rij:last-child[b-v2t4nj6wc8]::after {
    bottom: 50%;
}

/* Horizontale verbindings-tik naar elke functie */
.functie-rij[b-v2t4nj6wc8]::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 50%;
    width: 0.85rem;
    height: 2px;
    background-color: var(--bs-success-border-subtle);
    z-index: 1;
}

.functie-rij:hover[b-v2t4nj6wc8] {
    background-color: var(--bs-success-bg-subtle);
}

.functie-icoon[b-v2t4nj6wc8] {
    color: var(--bs-success);
}

/* +Afdeling en +Functie knoppen: subtiel, meer kleur bij hover/focus */
.btn-toevoegen-afdeling[b-v2t4nj6wc8],
.btn-toevoegen-functie[b-v2t4nj6wc8] {
    opacity: 0.45;
    transition: opacity 0.15s;
}

.btn-toevoegen-afdeling:hover[b-v2t4nj6wc8],
.btn-toevoegen-afdeling:focus-visible[b-v2t4nj6wc8],
.btn-toevoegen-functie:hover[b-v2t4nj6wc8],
.btn-toevoegen-functie:focus-visible[b-v2t4nj6wc8] {
    opacity: 1;
}
/* /Components/Pages/Beheer/GebruikerDetail.razor.rz.scp.css */
/* Schakelaars en checkboxes in Wealer-groen (design), niet in Bootstrap-blauw.
   Bootstrap kent geen eigen variabele hiervoor; de kleuren komen uit app.css. */
.form-check-input:checked[b-6jebxz4w00] {
    background-color: var(--w-green-strong);
    border-color: var(--w-green-strong);
}

/* Bootstrap kent geen vaste afmetingen in pixels. */
.profielfoto-klein[b-6jebxz4w00] {
    width: 40px;
    height: 40px;
}

.form-check-input:focus[b-6jebxz4w00] {
    border-color: var(--w-green-strong);
}

/* Bootstrap kleurt het bolletje van een uitgeschakelde schakelaar blauw zodra die focus heeft. */
.form-switch .form-check-input:focus:not(:checked)[b-6jebxz4w00] {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
/* /Components/Pages/Beheer/Gebruikers.razor.rz.scp.css */
/* ── "+ Nieuwe gebruiker" knop ────────────────────────────────── */
.beheer-add-btn[b-bn1rv53you] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 6px;
    border: none;
    background: #2f6fdb;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
}

.beheer-add-btn:hover[b-bn1rv53you] {
    background: #2a63c4;
}

/* ── Tabel-kaart ──────────────────────────────────────────────── */
.beheer-tabel-card[b-bn1rv53you] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.beheer-tabel[b-bn1rv53you] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.beheer-tabel th[b-bn1rv53you] {
    text-align: left;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    background: #fafafa;
    border-bottom: 2px solid #e8e8e8;
}

.beheer-tabel td[b-bn1rv53you] {
    padding: 14px 20px;
    font-size: 13px;
    color: #444;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.beheer-tabel tbody tr:last-child td[b-bn1rv53you] {
    border-bottom: none;
}

.beheer-tabel .cel-naam[b-bn1rv53you] {
    color: #1a1a1a;
}

.beheer-tabel .cel-email[b-bn1rv53you] {
    color: #2f6fdb;
}

.beheer-th-sort[b-bn1rv53you] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* ── Status-badge ─────────────────────────────────────────────── */
.beheer-badge[b-bn1rv53you] {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.beheer-badge--actief[b-bn1rv53you] {
    background: #1b873b;
}

.beheer-badge--inactief[b-bn1rv53you] {
    background: #999;
}

/* ── Actieknoppen ─────────────────────────────────────────────── */
.beheer-btn[b-bn1rv53you] {
    padding: 6px 16px;
    border-radius: 4px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.beheer-btn--bewerken[b-bn1rv53you] {
    border: 1px solid #2f6fdb;
    color: #2f6fdb;
}

.beheer-btn--bewerken:hover[b-bn1rv53you] {
    background: #2f6fdb;
    color: #fff;
}

.beheer-btn--deactiveren[b-bn1rv53you] {
    border: 1px solid #d64545;
    color: #d64545;
}

.beheer-btn--deactiveren:hover[b-bn1rv53you] {
    background: #d64545;
    color: #fff;
}

.beheer-btn--activeren[b-bn1rv53you] {
    border: 1px solid #2e7d4a;
    color: #2e7d4a;
}

.beheer-btn--activeren:hover[b-bn1rv53you] {
    background: #2e7d4a;
    color: #fff;
}
/* /Components/Pages/Beheer/Instellingen.razor.rz.scp.css */
/* Instellingenblokken naast elkaar. Bootstrap's row-cols kan wél drie kolommen, maar
   niet "drie kolommen tenzij de inhoud niet past" — daarvoor is een grid met een
   berekende minimumbreedte nodig.

   De minimumbreedte per kolom is het grootste van:
     - 22rem: onder die breedte worden de rijen (naam + schakelaar + knop) onleesbaar;
     - een derde van de rij: zo ontstaan er nooit méér dan drie kolommen.

   auto-fit vult daarna op: passen er drie, dan drie; is 22rem breder dan een derde
   (smal scherm, of straks een blok met lange labels), dan vallen het er vanzelf
   twee of één. Een vierde blok komt op een nieuwe rij en houdt dezelfde breedte. */
.instellingen-grid[b-ljdka300ac] {
    --instellingen-gap: 1.5rem;

    display: grid;
    gap: var(--instellingen-gap);
    align-items: start;
    margin-bottom: var(--instellingen-gap);
    grid-template-columns: repeat(
        auto-fit,
        minmax(max(22rem, calc((100% - 2 * var(--instellingen-gap)) / 3)), 1fr)
    );
}

/* Binnen een smalle kolom mag een brede tabel zelf schuiven in plaats van de
   kolom op te rekken. */
.instellingen-grid .table[b-ljdka300ac] {
    margin-bottom: 0;
}
/* /Components/Pages/Beheer/Rollen.razor.rz.scp.css */
/* Knop-/badge-statusanimaties zijn verplaatst naar wwwroot/app.css zodat ze
   app-breed (incl. Button) herbruikbaar zijn. */

/* ── T-layout: bovenbalk volle breedte, daarna links/rechts ── */
.rollen-shell[b-xtz7qviy2l] {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 380px 1fr;
    grid-template-areas:
        "balk  balk"
        "links rechts";
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* ── Bovenbalk ── */
.rollen-balk[b-xtz7qviy2l] {
    grid-area: balk;
    border-bottom: 1px solid var(--bs-border-color);
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0.6rem 1rem 0;
    gap: 0.4rem;
    flex-shrink: 0;
}

.rollen-balk-titel[b-xtz7qviy2l] {
    color: var(--bs-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rollen-balk-inhoud[b-xtz7qviy2l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0.6rem;
}

/* Scrollbare rij van rol-tabs */
.rollen-balk-tabs[b-xtz7qviy2l] {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 2px; /* ruimte voor focus-ring */
}

.rollen-balk-tabs[b-xtz7qviy2l]::-webkit-scrollbar {
    display: none;
}

.rollen-balk-tab[b-xtz7qviy2l] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    border: 1px solid var(--bs-border-color);
    background: #f8f9fa;
    color: var(--bs-body-color);
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    flex-shrink: 0;
}

.rollen-balk-tab:hover[b-xtz7qviy2l] {
    background: #e9ecef;
    border-color: #adb5bd;
}

.rollen-balk-tab--actief[b-xtz7qviy2l] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

.rollen-balk-tab--actief:hover[b-xtz7qviy2l] {
    background: #1558a0;
    border-color: #1558a0;
}

.rollen-balk-tab-badge[b-xtz7qviy2l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(0,0,0,.1);
    line-height: 1;
}

.rollen-balk-tab--actief .rollen-balk-tab-badge[b-xtz7qviy2l] {
    background: rgba(255,255,255,.25);
}

/* Nieuwe-rol input naast de tabs */
.rollen-balk-nieuw[b-xtz7qviy2l] {
    flex-shrink: 0;
    border-left: 1px solid var(--bs-border-color);
    padding-left: 0.75rem;
}

/* ── Linker paneel: rechten-checkboxen ── */
.rollen-links[b-xtz7qviy2l] {
    grid-area: links;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--bs-border-color);
    overflow-y: auto;
}

/* ── Rechten-panel (categorieën + checkboxen) ── */
.rollen-rechten-panel[b-xtz7qviy2l] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.rollen-categorie[b-xtz7qviy2l] {
    border-bottom: 1px solid var(--bs-border-color);
}

.rollen-categorie-header[b-xtz7qviy2l] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background 0.1s;
}

.rollen-categorie-header:hover[b-xtz7qviy2l] {
    background: var(--bs-gray-100);
}

.rollen-categorie--actief .rollen-categorie-header[b-xtz7qviy2l] {
    background: #e8effe;
    color: var(--bs-primary);
    font-weight: 600;
}

.rollen-categorie-body[b-xtz7qviy2l] {
    padding: 0.25rem 1rem 0.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: #f8f9fc;
}

.rollen-recht-label[b-xtz7qviy2l] {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.15rem 0;
}

.rollen-recht-label:hover[b-xtz7qviy2l] {
    color: var(--bs-primary);
}

/* ── Opslaan-balk ── */
.rollen-opslaan-balk[b-xtz7qviy2l] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-light);
    flex-shrink: 0;
}

/* ── Rechter paneel: preview ── */
.rollen-rechts[b-xtz7qviy2l] {
    grid-area: rechts;
    overflow-y: auto;
    background: #f0f2f5;
    padding: 1rem;
}

/* ── Responsive: op kleine schermen onder elkaar ── */
@media (max-width: 900px) {
    .rollen-shell[b-xtz7qviy2l] {
        grid-template-rows: auto auto 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "balk"
            "links"
            "rechts";
        height: auto;
        overflow: visible;
    }

    .rollen-links[b-xtz7qviy2l],
    .rollen-rechts[b-xtz7qviy2l] {
        overflow-y: visible;
    }

    .rollen-rechts[b-xtz7qviy2l] {
        border-top: 1px solid var(--bs-border-color);
        min-height: 400px;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard — telefoon en e-mail.
   De child-componenten staan in Components/Shared/Dashboard/ en worden via ::deep
   gestyled, hetzelfde patroon als MainLayout.razor.css. Bootstrap doet de lay-out en
   spacing; hier staat alleen wat Bootstrap niet levert: de gestapelde en enkelkleurige staven,
   het categoriepalet en de schakelaars. */

.dash-shell[b-v7j1mrzobh] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
}

/* ── Kop ─────────────────────────────────────────────────────── */
.dash-titel[b-v7j1mrzobh] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--w-ink);
    letter-spacing: -0.3px;
    margin: 0;
}

.dash-subtitel[b-v7j1mrzobh] {
    font-size: 0.93rem;
    color: var(--w-mute);
    margin: 0.35rem 0 0;
}

.dash-shell[b-v7j1mrzobh]  .dash-bezig {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 4rem 0;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--w-mute);
}

/* ── Kaart-basis ─────────────────────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-card {
    background: var(--w-card);
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}

.dash-shell[b-v7j1mrzobh]  .dash-paneel {
    padding: 1.15rem 1.3rem;
    display: flex;
    flex-direction: column;
}

.dash-shell[b-v7j1mrzobh]  .dash-paneel-titel {
    font-size: 1rem;
    font-weight: 600;
    color: var(--w-ink);
}

.dash-shell[b-v7j1mrzobh]  .dash-paneel-subtitel {
    font-size: 0.82rem;
    color: var(--w-mute);
    margin-top: 2px;
}

/* ── Grids ───────────────────────────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem;
}

.dash-shell[b-v7j1mrzobh]  .dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 992px) {
    .dash-shell[b-v7j1mrzobh]  .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-shell[b-v7j1mrzobh] {
        padding: 1rem 1rem 2rem;
    }
}

/* ── KPI-tegel ───────────────────────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-kpi {
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dash-shell[b-v7j1mrzobh]  .dash-kpi-label {
    font-size: 0.82rem;
    color: var(--w-mute);
    font-weight: 500;
}

.dash-shell[b-v7j1mrzobh]  .dash-kpi-waarde {
    font-size: 1.72rem;
    font-weight: 600;
    color: var(--w-ink);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.dash-shell[b-v7j1mrzobh]  .dash-kpi-waarde--groen { color: var(--w-green-strong); }
.dash-shell[b-v7j1mrzobh]  .dash-kpi-waarde--amber { color: var(--w-dash-amber); }
.dash-shell[b-v7j1mrzobh]  .dash-kpi-waarde--rood  { color: var(--w-dash-red); }
.dash-shell[b-v7j1mrzobh]  .dash-kpi-waarde--leeg  { color: var(--w-mute-2); }

.dash-shell[b-v7j1mrzobh]  .dash-kpi-eenheid {
    font-size: 0.85rem;
    color: var(--w-mute);
}

.dash-shell[b-v7j1mrzobh]  .dash-kpi-sub {
    font-size: 0.78rem;
    color: var(--w-mute);
}

.dash-shell[b-v7j1mrzobh]  .dash-kpi-geendata {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--w-mute-2);
    cursor: help;
}

/* ── Delta-badge ─────────────────────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.dash-shell[b-v7j1mrzobh]  .dash-delta-pijl {
    font-size: 0.88rem;
    line-height: 1;
}

.dash-shell[b-v7j1mrzobh]  .dash-delta-periode {
    color: var(--w-mute);
    font-weight: 400;
}

.dash-shell[b-v7j1mrzobh]  .dash-delta--goed   { color: var(--w-green-strong); }
.dash-shell[b-v7j1mrzobh]  .dash-delta--slecht { color: var(--w-dash-red); }
.dash-shell[b-v7j1mrzobh]  .dash-delta--vlak   { color: var(--w-mute); }

/* ── Lege staat binnen een paneel ────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-leeg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 11rem;
    color: var(--w-mute-2);
    font-size: 0.85rem;
    text-align: center;
}

.dash-shell[b-v7j1mrzobh]  .dash-leeg i {
    font-size: 1.5rem;
}

/* ── Staafgrafiek ────────────────────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-staven {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 12.85rem;
    padding: 0 2px;
}

.dash-shell[b-v7j1mrzobh]  .dash-staaf-kolom {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 0.4rem;
}

.dash-shell[b-v7j1mrzobh]  .dash-staaf-waarde {
    font-size: 0.75rem;
    color: var(--w-mute);
    line-height: 1;
    min-height: 0.75rem;
}

.dash-shell[b-v7j1mrzobh]  .dash-staaf-waarde--piek {
    color: var(--w-green-strong);
    font-weight: 600;
}

.dash-shell[b-v7j1mrzobh]  .dash-staaf {
    width: 100%;
    max-width: 2.7rem;
    background: #cfe3d6;
    border-radius: 4px 4px 0 0;
    transition: height .3s ease;
}

.dash-shell[b-v7j1mrzobh]  .dash-staaf--piek {
    background: var(--w-green-strong);
}

.dash-shell[b-v7j1mrzobh]  .dash-staaf-labels {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding: 0 2px;
}

.dash-shell[b-v7j1mrzobh]  .dash-staaf-label {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--w-mute);
}

.dash-shell[b-v7j1mrzobh]  .dash-staaf-label--piek {
    color: var(--w-ink);
    font-weight: 600;
}

/* ── Categoriebalken ─────────────────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-cat-naam {
    font-size: 0.85rem;
    color: var(--w-ink);
}

.dash-shell[b-v7j1mrzobh]  .dash-cat-cijfer {
    font-size: 0.82rem;
    color: var(--w-mute);
    white-space: nowrap;
}

.dash-shell[b-v7j1mrzobh]  .dash-cat-aandeel {
    color: var(--w-mute-2);
}

.dash-shell[b-v7j1mrzobh]  .dash-cat-track {
    height: 0.57rem;
    background: #f1f1f1;
    border-radius: 5px;
    overflow: hidden;
}

.dash-shell[b-v7j1mrzobh]  .dash-cat-balk {
    height: 100%;
    border-radius: 5px;
    transition: width .3s ease;
}

/* Palet van 8 kleuren; CategorieBalken.razor wisselt door op index. */
.dash-shell[b-v7j1mrzobh]  .dash-cat-balk--0 { background: var(--w-green-strong); }
.dash-shell[b-v7j1mrzobh]  .dash-cat-balk--1 { background: #3a8f5b; }
.dash-shell[b-v7j1mrzobh]  .dash-cat-balk--2 { background: #4a9e6b; }
.dash-shell[b-v7j1mrzobh]  .dash-cat-balk--3 { background: #5aad7b; }
.dash-shell[b-v7j1mrzobh]  .dash-cat-balk--4 { background: var(--w-dash-blue); }
.dash-shell[b-v7j1mrzobh]  .dash-cat-balk--5 { background: var(--w-dash-amber); }
.dash-shell[b-v7j1mrzobh]  .dash-cat-balk--6 { background: #9a7bd4; }
.dash-shell[b-v7j1mrzobh]  .dash-cat-balk--7 { background: #9aa0a6; }

/* ── Periodeschakelaar ───────────────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-periode {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.dash-shell[b-v7j1mrzobh]  .dash-periode-knop {
    padding: 0.45rem 1.2rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--w-mute);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dash-shell[b-v7j1mrzobh]  .dash-periode-knop:hover:not(.dash-periode-knop--actief) {
    color: var(--w-ink-2);
}

.dash-shell[b-v7j1mrzobh]  .dash-periode-knop--actief {
    background: var(--w-card);
    color: var(--w-green-strong);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* ── Kanaalschakelaar ────────────────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-kanaal {
    display: inline-flex;
    gap: 4px;
}

.dash-shell[b-v7j1mrzobh]  .dash-kanaal-knop {
    padding: 0.5rem 1.3rem;
    border-radius: 8px;
    border: 1px solid var(--w-line);
    background: var(--w-card);
    color: var(--w-mute);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dash-shell[b-v7j1mrzobh]  .dash-kanaal-knop--actief {
    border-color: var(--w-green-strong);
    background: var(--w-green-strong);
    color: #fff;
    font-weight: 600;
}

.dash-shell[b-v7j1mrzobh]  .dash-kanaal-knop:disabled {
    cursor: not-allowed;
    color: var(--w-mute-2);
    background: #fafafa;
}

/* ── Gestapelde staafgrafiek ─────────────────────────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-gstap {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    grid-template-rows: 12.85rem auto;
    column-gap: 0.5rem;
    row-gap: 0.55rem;
}

.dash-shell[b-v7j1mrzobh]  .dash-gstap-as {
    position: relative;
}

.dash-shell[b-v7j1mrzobh]  .dash-gstap-as span {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--w-mute);
}

.dash-shell[b-v7j1mrzobh]  .dash-gstap-vlak {
    position: relative;
}

.dash-shell[b-v7j1mrzobh]  .dash-gstap-lijn {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--w-line-2);
}

.dash-shell[b-v7j1mrzobh]  .dash-gstap-staven {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    padding: 0 0.25rem;
}

.dash-shell[b-v7j1mrzobh]  .dash-gstap-kolom {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.dash-shell[b-v7j1mrzobh]  .dash-gstap-stapel {
    width: 100%;
    max-width: 2.7rem;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    transition: height .3s ease;
}

.dash-shell[b-v7j1mrzobh]  .dash-gstap-labels {
    grid-column: 2;
    display: flex;
    gap: 0.3rem;
    padding: 0 0.25rem;
}

.dash-shell[b-v7j1mrzobh]  .dash-gstap-label {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--w-mute);
    white-space: nowrap;
}

/* ── Reeks-kleuren (gestapelde staaf en legenda) ─────────────── */
.dash-shell[b-v7j1mrzobh]  .dash-kleur--groen { background: var(--w-green-strong); }
.dash-shell[b-v7j1mrzobh]  .dash-kleur--blauw { background: var(--w-dash-blue); }
.dash-shell[b-v7j1mrzobh]  .dash-kleur--rood  { background: var(--w-dash-red); }
.dash-shell[b-v7j1mrzobh]  .dash-kleur--amber { background: var(--w-dash-amber); }
.dash-shell[b-v7j1mrzobh]  .dash-kleur--grijs { background: #b8bcc2; }

.dash-shell[b-v7j1mrzobh]  .dash-legenda-stip {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Namen als label (teams, medewerkers): mogen afbreken in plaats van over de buren heen te lopen. */
.dash-shell[b-v7j1mrzobh]  .dash-gstap-label--tekst {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
/* /Components/Pages/Email.razor.rz.scp.css */
/* Tweekolommen-layout met een vaste lijstbreedte: Bootstrap's grid kan geen kolom met
   een vaste breedte naast een meegroeiende kolom combineren met volledige hoogte.
   Hoogte vult .app-content (al zelf op de resterende ruimte onder header/tabbladen
   geflext) i.p.v. een vast "calc(100vh - Npx)"-gok, die nooit precies de echte
   header/tabbalk-hoogte raadt en daardoor een scrollbar op .app-content veroorzaakte. */
.email-shell[b-1k2war6l7y] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1rem;
    height: 100%;
    padding: 1rem;
}

.email-list-pane[b-1k2war6l7y],
.email-detail-pane[b-1k2war6l7y] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.email-list-tabs[b-1k2war6l7y] {
    display: flex;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Onderstreepte tab met een actieve rand — Bootstrap's nav-tabs geeft een omkaderd
   tabblad, niet de rustige onderstreping uit het ontwerp. */
.email-list-tab[b-1k2war6l7y] {
    flex: 1;
    padding: .7rem .25rem .55rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.email-list-tab--active[b-1k2war6l7y] {
    border-bottom-color: var(--bs-success);
    color: var(--bs-body-color);
    font-weight: 500;
}

.email-list-tab-count[b-1k2war6l7y] {
    display: inline-block;
    min-width: .95rem;
    margin-left: .25rem;
    padding: 0 .25rem;
    border-radius: .5rem;
    background: var(--bs-success);
    color: #fff;
    font-size: .62rem;
    font-weight: 600;
    line-height: .95rem;
    text-align: center;
}

.email-list-items[b-1k2war6l7y] {
    flex: 1;
    overflow-y: auto;
}

/* Lijstrij met een accentrand links bij selectie. */
.email-list-item[b-1k2war6l7y] {
    display: block;
    width: 100%;
    padding: .65rem .9rem;
    border: none;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    border-left: 3px solid transparent;
    background: none;
    text-align: left;
    cursor: pointer;
}

.email-list-item--selected[b-1k2war6l7y] {
    border-left-color: var(--bs-success);
    background: var(--bs-tertiary-bg);
}

.email-list-item-sender[b-1k2war6l7y] {
    font-size: .8rem;
}

.email-list-item-subject[b-1k2war6l7y] {
    margin-top: .15rem;
    font-size: .78rem;
    color: var(--bs-body-color);
}

/* Preview afkappen op twee regels — geen Bootstrap-equivalent. */
.email-list-item-preview[b-1k2war6l7y] {
    margin-top: .25rem;
    color: var(--bs-secondary-color);
    font-size: .72rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.email-detail-header[b-1k2war6l7y] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.4rem .9rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.email-detail-body[b-1k2war6l7y] {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem 1.4rem;
    font-size: 1rem;
    line-height: 1.7;
}

/* Zwevend keuzemenu onder de labelbadge. */
.email-label-menu[b-1k2war6l7y] {
    position: absolute;
    top: 1.6rem;
    left: 2.6rem;
    z-index: 60;
    min-width: 9rem;
    padding: .3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .45rem;
    background: var(--bs-body-bg);
}

.email-label-menu-item[b-1k2war6l7y] {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .3rem .45rem;
    border: none;
    border-radius: .25rem;
    background: none;
    cursor: pointer;
}

.email-label-menu-item:hover[b-1k2war6l7y] {
    background: var(--bs-tertiary-bg);
}

/* Zachte informatieve badge; Bootstrap's text-bg-info is hiervoor te verzadigd. */
.email-ai-badge[b-1k2war6l7y] {
    padding: .15rem .5rem;
    border: 1px solid #d8e6f5;
    border-radius: .2rem;
    background: #eef4fb;
    color: #3b6ea5;
    font-size: .66rem;
    font-weight: 500;
}

/* Vinkje na het opslaan van een label blijft 3s vol zichtbaar en vervaagt daarna. */
@keyframes email-label-status-fade-b-1k2war6l7y {
    0%, 75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.email-label-status-opgeslagen[b-1k2war6l7y] {
    animation: email-label-status-fade-b-1k2war6l7y 4s ease forwards;
}

/* Nieuw binnengekomen rij: zachte highlight die opkomt en weer wegtrekt, zodat het oog
   erheen gaat zonder de lijst te laten springen. De achtergrond eindigt op transparent
   zodat --selected er daarna weer doorheen komt. */
@keyframes email-list-item-nieuw-b-1k2war6l7y {
    0% {
        background: transparent;
        border-left-color: transparent;
    }
    25% {
        background: rgba(25, 135, 84, .12);
        border-left-color: var(--bs-success);
    }
    100% {
        background: transparent;
        border-left-color: transparent;
    }
}

.email-list-item--nieuw[b-1k2war6l7y] {
    animation: email-list-item-nieuw-b-1k2war6l7y 2.5s ease-out forwards;
}

/* Draaiend pijltje terwijl het handmatig vernieuwen loopt. */
@keyframes email-vernieuw-spin-b-1k2war6l7y {
    to {
        transform: rotate(360deg);
    }
}

.email-vernieuw-icoon--bezig[b-1k2war6l7y] {
    display: inline-block;
    animation: email-vernieuw-spin-b-1k2war6l7y .8s linear infinite;
}

/* Platte tekst uit MailTaak.VerstuurdeTekst met behoud van regelafbrekingen. */
.mail-verzonden-tekst[b-1k2war6l7y] {
    white-space: pre-wrap;
}

/* Vlag voor VervolgactieNodig: signaleert dat er naast het antwoorden nog een
   handmatige actie moet gebeuren (bijv. iets aanpassen in een ander systeem). */
.email-vervolgactie-vlag[b-1k2war6l7y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: .25rem;
    background: var(--bs-danger);
    color: #fff;
    font-size: .68rem;
    flex-shrink: 0;
}
/* /Components/Pages/GesprekKaart.razor.rz.scp.css */
/* CSS is verplaatst naar Components/Layout/KlantKaartOverlay.razor.css */
/* /Components/Pages/Klanten.razor.rz.scp.css */
.klanten-toolbar[b-bsc21yp9ft] {
    background: transparent;
    padding: 1rem 1rem 1rem 0;
}

.klanten-table-wrap[b-bsc21yp9ft] {
    background: transparent;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.klanten-table[b-bsc21yp9ft] {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 0.2rem;
    table-layout: fixed;
}

.klanten-table > :not(caption) > * > *[b-bsc21yp9ft] {
    background-color: #fff;
}

.klanten-table .table-light > *[b-bsc21yp9ft] {
    background-color: var(--bs-table-bg);
}

.klanten-col-naam[b-bsc21yp9ft] {
    width: 34%;
}

.klanten-col-telefoon[b-bsc21yp9ft] {
    width: 20%;
}

.klanten-col-email[b-bsc21yp9ft] {
    width: 25%;
}

.klanten-col-acties[b-bsc21yp9ft] {
    width: 7rem;
}
/* /Components/Pages/Meldingen.razor.rz.scp.css */
.meldingen-toolbar[b-es4leimxxz] {
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}

.meldingen-table-wrap[b-es4leimxxz] {
    background: transparent;
}

.meldingen-table[b-es4leimxxz] {
    border-spacing: 0 0.2rem;
    border-collapse: separate;
}

/* Custom urgentie-kleur die Bootstrap niet biedt — tussen warning en danger */
[b-es4leimxxz] .badge.bg-orange {
    background-color: #fb8c00;
    color: #fff;
}

/* Verlopen meldingen visueel dimmen */
[b-es4leimxxz] tr.melding-verlopen {
    opacity: 0.55;
}
/* /Components/Pages/Telefonie.razor.rz.scp.css */
/* ── Toolbar ─────────────────────────────────────────────────── */
.tel-toolbar[b-7is0lyxce1] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 0.75rem 0 0.75rem 2rem;
}

.tel-toolbar-status[b-7is0lyxce1] {
    align-self: center;
    color: #999;
    font-size: 11.5px;
}

.tel-afgerond-btn[b-7is0lyxce1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 500;
    color: #555;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.tel-afgerond-btn:hover[b-7is0lyxce1] {
    background: #f5f5f5;
    border-color: #bbb;
}

/* ── Three-column grid — uitgeschakeld zolang er één kolom actief is ───────── */
/* .tel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    padding: 0 2rem 2rem;
    align-items: start;
    background-image:
        repeating-linear-gradient(to bottom, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 4px, transparent 4px, transparent 10px),
        repeating-linear-gradient(to bottom, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 4px, transparent 4px, transparent 10px);
    background-size: 1px 10px, 1px 10px;
    background-position: 33.333% 0, 66.666% 0;
    background-repeat: repeat-y, repeat-y;
} */

/* ── Column ──────────────────────────────────────────────────── */
.tel-column[b-7is0lyxce1] {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eeeeee;
    padding: 24px 22px;
}

/* .tel-column--ai { background: #f1f8f1; } */ /* uitgeschakeld: AI-kolom tijdelijk verborgen */

.tel-column-header[b-7is0lyxce1] {
    padding: 0 0 18px;
}

.tel-column-title[b-7is0lyxce1] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: #1a1a1a;
    margin: 0 0 3px;
}

.tel-column-subtitle[b-7is0lyxce1] {
    font-size: 12px;
    color: #999;
}

.tel-column-body[b-7is0lyxce1] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tel-empty-msg[b-7is0lyxce1] {
    font-size: 0.85rem;
    color: #aaa;
    padding: 0.5rem 0.25rem;
    margin: 0;
}

/* ── Gesprek card ────────────────────────────────────────────── */
.tel-card[b-7is0lyxce1] {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.tel-card:hover[b-7is0lyxce1] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    background: #f0f7ff;
    border-color: #b3d4f5;
}

.tel-card-open-icon[b-7is0lyxce1] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    color: #aaa;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.tel-card:hover .tel-card-open-icon[b-7is0lyxce1] {
    opacity: 1;
    color: #555;
}

.tel-column--ai .tel-card[b-7is0lyxce1] {
    background: #fff;
}

.tel-card-top[b-7is0lyxce1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tel-card-tijd[b-7is0lyxce1] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    letter-spacing: 0.1px;
    font-size: 12px;
    font-weight: 400;
    color: #888;
}

.tel-dot[b-7is0lyxce1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tel-dot--green[b-7is0lyxce1]  { background-color: #4caf50; }
.tel-dot--orange[b-7is0lyxce1] { background-color: #ff9800; }

.tel-badge-actief[b-7is0lyxce1] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #2e7d32;
    background: #e8f5e9;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
}

.tel-badge-voiceai[b-7is0lyxce1] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #2e7d32;
    background: #e8f5e9;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    margin-top: 0.25rem;
}

.tel-badge-afgebroken[b-7is0lyxce1] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #c0392b;
    background: #fdecea;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    margin-top: 0.25rem;
}

.tel-card-naam[b-7is0lyxce1] {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.tel-card-omschrijving[b-7is0lyxce1] {
    font-size: 12px;
    color: #666;
    font-weight: 400;
    line-height: 1.45;
}

.tel-card-uitkomst[b-7is0lyxce1] {
    font-size: 0.78rem;
    color: #888;
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-backdrop[b-7is0lyxce1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 100;
}

.modal-panel[b-7is0lyxce1] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: 540px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-7is0lyxce1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.modal-titel[b-7is0lyxce1] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #111;
}

.modal-sluit[b-7is0lyxce1] {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.modal-sluit:hover[b-7is0lyxce1] {
    background: #f0f0f0;
    color: #111;
}

.modal-zoek[b-7is0lyxce1] {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.modal-zoek-input[b-7is0lyxce1] {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}

.modal-zoek-input:focus[b-7is0lyxce1] {
    border-color: #2e7d32;
}

.modal-lijst[b-7is0lyxce1] {
    overflow-y: auto;
    padding: 0.5rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-rij[b-7is0lyxce1] {
    padding: 0.7rem 0.85rem;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
}

.modal-rij:hover[b-7is0lyxce1] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    background: #f0f7ff;
    border-color: #b3d4f5;
}

.modal-rij-meta[b-7is0lyxce1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-rij-tijd[b-7is0lyxce1] {
    font-size: 0.78rem;
    color: #888;
}

.modal-rij-naam[b-7is0lyxce1] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111;
}

.modal-rij-uitkomst[b-7is0lyxce1] {
    font-size: 0.78rem;
    color: #666;
}

.modal-leeg[b-7is0lyxce1] {
    font-size: 0.875rem;
    color: #aaa;
    padding: 0.5rem 0;
    margin: 0;
}
/* /Components/Pages/TelefonieZonderVoiceAI.razor.rz.scp.css */
/* ── Toolbar (zelfde look als Telefonie.razor.css) ──────────────── */
.tel-toolbar[b-1p4bkor1pb] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 0.75rem 0 0.75rem 2rem;
}

.tel-toolbar-status[b-1p4bkor1pb] {
    align-self: center;
    color: #999;
    font-size: 11.5px;
}

.tel-nieuwe-call-btn[b-1p4bkor1pb] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    background: #2e7d32;
    border: 1px solid #2e7d32;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.tel-nieuwe-call-btn:hover[b-1p4bkor1pb] {
    background: #256b29;
    border-color: #256b29;
}

/* ── Column ──────────────────────────────────────────────────── */
.tel-column[b-1p4bkor1pb] {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eeeeee;
    padding: 24px 22px;
}

.tel-column-header[b-1p4bkor1pb] {
    padding: 0 0 18px;
}

.tel-column-title[b-1p4bkor1pb] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: #1a1a1a;
    margin: 0 0 3px;
}

.tel-column-subtitle[b-1p4bkor1pb] {
    font-size: 12px;
    color: #999;
}

.tel-empty-msg[b-1p4bkor1pb] {
    font-size: 0.85rem;
    color: #aaa;
    padding: 0.5rem 0.25rem;
    margin: 0;
}

.tel-zoek-input[b-1p4bkor1pb] {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}

.tel-zoek-input:focus[b-1p4bkor1pb] {
    border-color: #2e7d32;
}
/* /Components/Pages/Terugbelverzoeken.razor.rz.scp.css */
/* ── Werkbak-schakelaar: exact naar het functioneel ontwerp (tbv.jsx —
   tbvS.segWrap / tbvS.seg): effen grijze track, zwevende witte pil. ── */
.tbv-werkbak-tabs[b-pvcgyl5rie] {
    display: inline-flex;
    background: #ececec;
    border-radius: 7px;
    padding: 2px;
    gap: 2px;
}

.tbv-werkbak-tab[b-pvcgyl5rie] {
    padding: 7px 15px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: #777;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.tbv-werkbak-tab:hover:not(.tbv-werkbak-tab--actief)[b-pvcgyl5rie] {
    color: var(--w-ink-2);
}

.tbv-werkbak-tab--actief[b-pvcgyl5rie] {
    background: #fff;
    color: #1c1c1c;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* ── "+ Terugbelverzoek"-knop: exact naar tbvS.newBtn. ── */
.tbv-new-btn[b-pvcgyl5rie] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

/* ── Kaart rond filterbalk + tabel: exact naar tbvS.card. ── */
.tbv-card[b-pvcgyl5rie] {
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}

/* ── Filterbalk: exact naar tbvS.filterBar / tbvS.select / tbvS.input. ── */
.tbv-filter-bar[b-pvcgyl5rie] {
    padding: 13px 18px;
    gap: 8px;
    background: #fcfcfc;
    border-bottom-color: #f0f0f0;
}

.tbv-filter-input[b-pvcgyl5rie] {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    font-size: 12px;
    color: #444;
    background: #fff;
}

/* /Components/Pages/Voertuigen.razor.rz.scp.css */
.voertuig-klant-panel[b-vi8pwcpoyt] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 500px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    animation: gk-slide-in 0.4s ease-out;
}

@keyframes voetuig-slide-in-b-vi8pwcpoyt {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.voertuigen-toolbar[b-vi8pwcpoyt] {
    --voertuigen-scrollbar-reserve: 1rem;
    background: transparent;
    padding: 1rem var(--voertuigen-scrollbar-reserve) 1rem 0;
}

.voertuigen-table-wrap[b-vi8pwcpoyt] {
    --voertuigen-scrollbar-reserve: 1rem;
    background: transparent;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.voertuigen-table[b-vi8pwcpoyt] {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 0.2rem;
    table-layout: fixed;
}

.voertuigen-table > :not(caption) > * > *[b-vi8pwcpoyt] {
    background-color: #fff;
}

.voertuigen-table .table-light > *[b-vi8pwcpoyt] {
    background-color: var(--bs-table-bg);
}

.voertuigen-col-eigenaar[b-vi8pwcpoyt] {
    width: 34%;
}

.voertuigen-col-kenteken[b-vi8pwcpoyt] {
    width: 20%;
}

.voertuigen-col-merk[b-vi8pwcpoyt],
.voertuigen-col-model[b-vi8pwcpoyt] {
    width: 20%;
}

.voertuigen-col-acties[b-vi8pwcpoyt] {
    width: 7rem;
}

.voertuig-nieuw-header[b-vi8pwcpoyt] {
    font-size: 0.875rem;
}

.voertuig-klant-lijst[b-vi8pwcpoyt] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    max-height: 180px;
    overflow-y: auto;
    background: white;
}

.voertuig-klant-rij[b-vi8pwcpoyt] {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.voertuig-klant-rij:hover[b-vi8pwcpoyt] {
    background-color: var(--bs-gray-100);
}
/* /Components/Shared/Avatar.razor.rz.scp.css */
/* Ronde initialen-cirkel: geen Bootstrap-equivalent voor een vaste ronde vorm met
   gecentreerde tekst en een deterministische achtergrondkleur. */
.gk-avatar[b-rfhytklkip] {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.gk-avatar--klein[b-rfhytklkip] {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    font-size: 10.5px;
}
/* /Components/Shared/Button.razor.rz.scp.css */
/* Geblokkeerd: rood-roze, maar bewust niet native disabled zodat klik -> toast blijft werken. */
.knop-geblokkeerd[b-u4nmvai5zy],
.knop-geblokkeerd:hover[b-u4nmvai5zy],
.knop-geblokkeerd:focus[b-u4nmvai5zy] {
    background-color: #f8d7da !important;
    border-color: #f1aeb5 !important;
    color: #842029 !important;
}

/* Controleren: grijs/disabled terwijl de rechten nog laden. */
.knop-controleren[b-u4nmvai5zy],
.knop-controleren:disabled[b-u4nmvai5zy] {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

/* Niets te doen (geen wijzigingen om op te slaan): licht grijs, zodat het verschil
   met een actieve knop meteen zichtbaar is. Bootstrap dimt een disabled knop alleen
   met opacity, waardoor btn-success groen blijft. */
.knop-uitgeschakeld[b-u4nmvai5zy],
.knop-uitgeschakeld:disabled[b-u4nmvai5zy],
.knop-uitgeschakeld:hover[b-u4nmvai5zy],
.knop-uitgeschakeld:focus[b-u4nmvai5zy] {
    background-color: #f1f3f5 !important;
    border-color: #e0e4e8 !important;
    color: #adb5bd !important;
    opacity: 1 !important;
}
/* /Components/Shared/InlineToevoegen.razor.rz.scp.css */
.inline-invoer[b-pjd5f6xgvo] {
    overflow: hidden;
    animation: inline-invoer-expand-b-pjd5f6xgvo 0.25s ease-out;
}

@keyframes inline-invoer-expand-b-pjd5f6xgvo {
    from {
        opacity: 0;
        max-width: 120px;
    }
    to {
        opacity: 1;
        max-width: 480px;
    }
}

.inline-invoer .form-control:focus[b-pjd5f6xgvo] {
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
    border-color: #86b7fe;
}

/* Spiegel de pijl horizontaal: van links naar onder */
.pijl-spiegel[b-pjd5f6xgvo] {
    display: inline-block;
    transform: scaleX(-1);
}
/* /Components/Shared/KeuzeSelect.razor.rz.scp.css */
.tbv-keuze-container[b-vigbrcfo49] {
    position: relative;
}

.tbv-keuze-trigger[b-vigbrcfo49] {
    width: 100%;
    padding: 9px 30px 9px 11px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 12.5px;
    color: #333;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
}

.tbv-keuze-placeholder[b-vigbrcfo49] {
    color: #aaa;
}

.tbv-keuze-chevron[b-vigbrcfo49] {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #666;
    pointer-events: none;
}

.tbv-keuze-backdrop[b-vigbrcfo49] {
    position: fixed;
    inset: 0;
    z-index: 9;
}

.tbv-keuze-dropdown[b-vigbrcfo49] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    overflow-y: auto;
    max-height: 320px;
}

.tbv-keuze-item[b-vigbrcfo49] {
    padding: 8px 12px;
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
}

.tbv-keuze-item:hover[b-vigbrcfo49] {
    background: #f7faf8;
}

.tbv-keuze-item--on[b-vigbrcfo49] {
    background: #eef5f0;
    color: var(--w-green-strong);
    font-weight: 600;
}

.tbv-keuze-empty[b-vigbrcfo49] {
    padding: 12px;
    font-size: 12px;
    color: #999;
    text-align: center;
}
/* /Components/Shared/KlantProfielModal.razor.rz.scp.css */
.kpm-layout[b-91cq6epstj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.kpm-avatar[b-91cq6epstj] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e0e7ef;
    color: #4a6080;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpm-auto-list[b-91cq6epstj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kpm-auto-item[b-91cq6epstj] {
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.kpm-auto-header[b-91cq6epstj] {
    width: 100%;
    min-height: 3rem;
    border: 0;
    background: #fff;
    color: #212529;
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
    cursor: pointer;
}

.kpm-auto-header:hover[b-91cq6epstj] {
    background: #f8fafc;
}

.kpm-auto-summary[b-91cq6epstj] {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.kpm-auto-details[b-91cq6epstj] {
    border-top: 1px solid #edf0f3;
    padding: 0.75rem;
    background: #fbfcfd;
}
/* /Components/Shared/MailLabelBadge.razor.rz.scp.css */
/* Zachte badge met achtergrond plus rand in dezelfde kleurfamilie. Bootstrap heeft geen
   badge-variant met deze combinatie, en de kleuren zijn merkspecifiek. */
.mail-label-badge[b-jombrclvml] {
    display: inline-flex;
    align-items: center;
    padding: .05rem .4rem;
    border: 1px solid transparent;
    border-radius: .2rem;
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.mail-label-badge--groot[b-jombrclvml] {
    padding: .18rem .55rem;
    font-size: .69rem;
}

.mail-label-badge--blauw[b-jombrclvml]  { background: #e8f1fb; border-color: #c5dcf2; color: #1d5f9e; }
.mail-label-badge--groen[b-jombrclvml]  { background: #eef4ec; border-color: #cfe0cd; color: #3f7040; }
.mail-label-badge--rood[b-jombrclvml]   { background: #fdeeee; border-color: #f3d2d2; color: #b23b3b; }
.mail-label-badge--paars[b-jombrclvml]  { background: #f1eefb; border-color: #dcd4f2; color: #5b4a9e; }
.mail-label-badge--oranje[b-jombrclvml] { background: #fdf3e6; border-color: #f0dcc0; color: #a8681c; }
.mail-label-badge--grijs[b-jombrclvml]  { background: #f4f4f4; border-color: #e2e2e2; color: #6b6b6b; }
/* /Components/Shared/OnderwerpenMultiSelect.razor.rz.scp.css */
/* ── Topics selector ── */
.topics-select-label[b-rjddppck3t] {
    font-size: 11.5px;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
}

.topics-select-container[b-rjddppck3t] {
    position: relative;
}

.topics-select-trigger[b-rjddppck3t] {
    width: 100%;
    min-height: 36px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.topics-select-placeholder[b-rjddppck3t] {
    font-size: 12px;
    color: #aaa;
}

.topics-select-pill[b-rjddppck3t] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eef5f0;
    color: #2e7d4a;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11.5px;
    font-weight: 500;
}

.topics-select-pill-x[b-rjddppck3t] {
    cursor: pointer;
    color: #2e7d4a;
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
}

.topics-select-pill-x:hover[b-rjddppck3t] {
    opacity: 1;
}

.topics-select-backdrop[b-rjddppck3t] {
    position: fixed;
    inset: 0;
    z-index: 9;
}

.topics-select-dropdown[b-rjddppck3t] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 320px;
}

.topics-select-search[b-rjddppck3t] {
    margin: 8px;
    padding: 7px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12.5px;
    color: #1a1a1a;
    outline: none;
}

.topics-select-search:focus[b-rjddppck3t] {
    border-color: #b9d9c4;
}

.topics-select-list[b-rjddppck3t] {
    overflow-y: auto;
}

.topics-select-empty[b-rjddppck3t] {
    padding: 12px;
    font-size: 12px;
    color: #999;
    text-align: center;
}

.topics-select-group-header[b-rjddppck3t] {
    padding: 8px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #888;
    background: #fafafa;
    position: sticky;
    top: 0;
}

.topics-select-item[b-rjddppck3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12.5px;
    color: #1a1a1a;
    background: #fff;
}

.topics-select-item:hover[b-rjddppck3t] {
    background: #f7faf8;
}

.topics-select-item--on[b-rjddppck3t] {
    background: #f7faf8;
}

.topics-select-check[b-rjddppck3t] {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1.5px solid #ccc;
    background: #fff;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
}

.topics-select-check--on[b-rjddppck3t] {
    border-color: #2e7d4a;
    background: #2e7d4a;
    color: #fff;
}
/* /Components/Shared/RichTextEditor.razor.rz.scp.css */
.rte-toolbar[b-4i6enfhzy6] {
    display: flex;
    gap: 0.25rem;
    padding: 0.375rem;
    border: 1px solid var(--bs-border-color);
    border-bottom: none;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    background: var(--bs-tertiary-bg);
}

.rte-btn[b-4i6enfhzy6] {
    min-width: 2rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: transparent;
}

.rte-btn:hover[b-4i6enfhzy6] {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
}

.rte-kleur[b-4i6enfhzy6] {
    width: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: transparent;
}

.rte-editor[b-4i6enfhzy6] {
    min-height: 180px;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    background: var(--bs-body-bg);
}

.rte-editor:focus[b-4i6enfhzy6] {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}
/* /Components/Shared/SleepbareLijst.razor.rz.scp.css */
/* Sleepbare rijen: Bootstrap heeft hier geen equivalent voor, dus alleen de greep,
   de rijomlijsting en de sleepstatussen staan hier. De inhoud van een rij gebruikt
   gewoon Bootstrap-utilities in de aanroepende pagina. */
.sleeplijst[b-rn97jpol2x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sleeplijst-rij[b-rn97jpol2x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: var(--bs-body-bg, #fff);
}

.sleeplijst-rij--sleept[b-rn97jpol2x] {
    opacity: 0.5;
}

.sleeplijst-rij--doel[b-rn97jpol2x] {
    border-color: var(--bs-success, #198754);
    box-shadow: inset 0 0 0 1px var(--bs-success, #198754);
}

.sleeplijst-greep[b-rn97jpol2x] {
    cursor: grab;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0 0.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.sleeplijst-greep:active[b-rn97jpol2x] {
    cursor: grabbing;
}

.sleeplijst-inhoud[b-rn97jpol2x] {
    flex: 1;
    min-width: 0;
}
/* /Components/Shared/ZoekSelect.razor.rz.scp.css */
/* Floating dropdown-paneel: positie (top/left/width) wordt in JS "fixed" gezet
   t.o.v. de viewport (zie positioneerDropdown in OnderwerpenMultiSelect.razor.js) —
   dat kan Bootstrap niet, dus blijft hier staan, samen met de z-index die boven
   een Bootstrap-modal (~1050-1055) uit moet komen. Kleur, schaduw, ronding en de
   opmaak van de lege-staat gebruiken nu Bootstrap-utilities (bg-white shadow rounded,
   text-center p-3) in plaats van eigen CSS. */
.gk-zoek-select[b-9p9dv257fw] {
    position: relative;
}

/* De absolute plaatsing hieronder is het vangnet: zolang de JS nog niet gedraaid heeft
   (of niet kan draaien) hangt het paneel gewoon netjes onder het invoerveld in plaats van
   in de normale tekststroom te vallen. positioneerDropdown zet 'm daarna op "fixed".
   Zonder dit vangnet stond het paneel bij de eerste render los van de trigger. */
.gk-zoek-select-dropdown[b-9p9dv257fw] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1100;
    border: 1px solid #e0e0e0;
    max-height: 320px;
    overflow-y: auto;
}

.gk-zoek-select-item[b-9p9dv257fw] {
    padding: 8px 12px;
    cursor: pointer;
}

.gk-zoek-select-item:hover[b-9p9dv257fw],
.gk-zoek-select-item.actief[b-9p9dv257fw] {
    background: #e7f1ff;
}
/* /Components/Terugbelverzoeken/TerugbelverzoekDetail.razor.rz.scp.css */
/* ── Afhandelen-paneel: zelfde zachte toggle-/veld-stijl als het aanmaakformulier
   (tbv-toggle-*, tbv-field-*, tbv-btn-primary) — hier los omdat CSS-isolatie niet
   over componentgrenzen heen werkt. ── */
.tbv-toggle-row[b-to05pv8ir7] {
    display: flex;
    gap: 7px;
}

.tbv-toggle-btn[b-to05pv8ir7] {
    flex: 1;
    padding: 8px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    font-family: inherit;
}

.tbv-toggle-btn--actief[b-to05pv8ir7] {
    border: 1.5px solid var(--w-green-strong);
    background: #eef5f0;
    color: var(--w-green-strong);
}

.tbv-toggle-sub[b-to05pv8ir7] {
    display: block;
    font-size: 10px;
    font-weight: 500;
    opacity: .7;
}

.tbv-field-label[b-to05pv8ir7] {
    font-size: 11.5px;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
}

.tbv-field[b-to05pv8ir7] {
    width: 100%;
    padding: 9px 11px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    font-size: 12.5px;
    color: #333;
    background-color: #fff;
    font-family: inherit;
}

.tbv-field:focus[b-to05pv8ir7] {
    outline: none;
    border-color: #b9d9c4;
}

/* ── Keuzekaarten voor "opnieuw proberen" / "sluiten": eigen patroon, want dit is de
   enige plek met een keuze tussen twee uitgebreide opties (titel + toelichtingstekst)
   in plaats van een korte knoppenrij. ── */
.tbv-radio-card[b-to05pv8ir7] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
}

.tbv-radio-card + .tbv-radio-card[b-to05pv8ir7] {
    margin-top: 8px;
}

.tbv-radio-card--actief[b-to05pv8ir7] {
    border: 1.5px solid var(--w-green-strong);
    background: #eef5f0;
}

.tbv-radio-card input[type="radio"][b-to05pv8ir7] {
    margin-top: 3px;
    accent-color: var(--w-green-strong);
}

.tbv-radio-card-titel[b-to05pv8ir7] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.tbv-radio-card-omschrijving[b-to05pv8ir7] {
    display: block;
    font-size: 11.5px;
    color: #8a8a8a;
}

.tbv-btn-primary[b-to05pv8ir7] {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: var(--w-green-strong);
    color: #fff;
}

.tbv-btn-primary:hover:not(:disabled)[b-to05pv8ir7] {
    background: var(--w-green-strong-hover);
}

.tbv-btn-primary:disabled[b-to05pv8ir7] {
    opacity: .45;
    cursor: default;
}
/* /Components/Terugbelverzoeken/TerugbelverzoekFormulier.razor.rz.scp.css */
/* ── Modal-chrome: exact naar tbv-detail.jsx — tbvD (btnPrimary/btnGhost/foot)
   en TbvInfoModal (header/close-knop). ── */
.tbv-modal-dialog[b-x8zykk77ai] {
    max-width: 560px;
}

.tbv-modal-content[b-x8zykk77ai] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.tbv-modal-header[b-x8zykk77ai] {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.tbv-modal-title[b-x8zykk77ai] {
    font-size: 15.5px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.tbv-close-x[b-x8zykk77ai] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    font-size: 20px;
    line-height: 1;
}

.tbv-close-x:hover[b-x8zykk77ai] {
    background: #f4f4f4;
}

.tbv-modal-body[b-x8zykk77ai] {
    padding: 16px 20px 20px;
}

.tbv-modal-footer[b-x8zykk77ai] {
    padding: 14px 22px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    display: flex;
    gap: 10px;
}

/* ── Infobanner (concept-melding): naar tbv-badge-groen-conventie. ── */
.tbv-info-banner[b-x8zykk77ai] {
    font-size: 12px;
    color: var(--w-green-strong);
    background: #eef5f0;
    border-radius: 6px;
    padding: 8px 11px;
    margin-bottom: 14px;
    line-height: 1.5;
}

/* ── Velden: exact naar tbv.jsx — tbvS.label / tbvS.field. ── */
.tbv-field-label[b-x8zykk77ai] {
    font-size: 11.5px;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
}

/* ::deep is hier nodig, niet cosmetisch: Blazor zet het scope-attribuut alleen op
   markup uit dít bestand, niet op wat een child-component rendert. ZoekSelect rendert
   zijn eigen <input>, dus zonder ::deep raakt deze regel dat veld niet en wint Bootstrap
   met font-size 1rem — precies het verschil in lettergrootte tussen de velden. */
.tbv-modal-body[b-x8zykk77ai]  .tbv-field {
    width: 100%;
    padding: 9px 11px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    font-size: 12.5px;
    color: #333;
    background-color: #fff;
    font-family: inherit;
}

.tbv-modal-body[b-x8zykk77ai]  .tbv-field:focus {
    outline: none;
    border-color: #b9d9c4;
}

/* Merk/model/kenteken volgen de gekozen auto en zijn daarom niet los te typen.
   Wel leesbaar en selecteerbaar houden (kenteken kopiëren), dus readonly in plaats
   van disabled — en een lichte tint in plaats van uitgegrijsd, zodat het veld in de
   rij met de andere velden blijft passen. */
.tbv-modal-body[b-x8zykk77ai]  .tbv-field[readonly] {
    background-color: #fafafa;
    color: #555;
}

/* ZoekSelect blijft ongewijzigd; de maatvoering van zijn invoerveld wordt hier van
   buitenaf gelijkgetrokken met de overige velden. Het chevron (zelfde tekening als
   Bootstrap op .form-select gebruikt) maakt zichtbaar dat er een keuzelijst onder hangt. */
.tbv-modal-body[b-x8zykk77ai]  .gk-zoek-select .form-control {
    padding: 9px 30px 9px 11px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    font-size: 12.5px;
    color: #333;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px 10px;
}

/* Het keuzepaneel hangt visueel los (fixed), maar staat in de DOM nog onder de modal —
   zo blijft ook die lijst in hetzelfde lettertype-formaat als de rest van het formulier. */
.tbv-modal-body[b-x8zykk77ai]  .gk-zoek-select-dropdown .gk-zoek-select-item {
    font-size: 12.5px;
}

.tbv-field-grid[b-x8zykk77ai] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Zachte toggle-knoppen: prioriteit + toewijzen-aan, naar tbv.jsx. ── */
.tbv-toggle-row[b-x8zykk77ai] {
    display: flex;
    gap: 7px;
}

.tbv-toggle-btn[b-x8zykk77ai] {
    flex: 1;
    padding: 8px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    font-family: inherit;
}

.tbv-toggle-btn--actief[b-x8zykk77ai] {
    border: 1.5px solid var(--w-green-strong);
    background: #eef5f0;
    color: var(--w-green-strong);
}

.tbv-toggle-sub[b-x8zykk77ai] {
    display: block;
    font-size: 10px;
    font-weight: 500;
    opacity: .7;
}

.tbv-hint[b-x8zykk77ai] {
    font-size: 11.5px;
    color: #8a8a8a;
    margin-top: 6px;
}

.tbv-hint--fout[b-x8zykk77ai] {
    color: #c0392b;
}

/* ── Klant zoeken: zelfde server-side zoekpatroon als KlantWisselDialog,
   herstyled naar dit modal. ── */
.tbv-zoek-lijst[b-x8zykk77ai] {
    max-height: 190px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    padding: 4px;
}

.tbv-zoek-item[b-x8zykk77ai] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.tbv-zoek-item:hover[b-x8zykk77ai] {
    background: #fafcfb;
}

.tbv-zoek-naam[b-x8zykk77ai] {
    font-size: 12px;
    color: #1a1a1a;
}

.tbv-zoek-context[b-x8zykk77ai] {
    font-size: 11px;
    color: #aaa;
}

.tbv-zoek-status[b-x8zykk77ai] {
    font-size: 11.5px;
    color: #aaa;
    padding: 6px 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Footerknoppen: gelijke breedte, naar tbvD.btnPrimary / tbvD.btnGhost. ── */
.tbv-btn-primary[b-x8zykk77ai],
.tbv-btn-ghost[b-x8zykk77ai] {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    /* Knoptekst breekt nooit af, ook niet als de footer een lange melding toont. */
    white-space: nowrap;
}

.tbv-btn-primary[b-x8zykk77ai] {
    border: none;
    background: var(--w-green-strong);
    color: #fff;
}

.tbv-btn-primary:hover:not(:disabled)[b-x8zykk77ai] {
    background: var(--w-green-strong-hover);
}

.tbv-btn-primary:disabled[b-x8zykk77ai] {
    opacity: .45;
    cursor: default;
}

.tbv-btn-ghost[b-x8zykk77ai] {
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #444;
}

.tbv-btn-ghost:hover[b-x8zykk77ai] {
    background: #f7f7f7;
}
/* /Components/Terugbelverzoeken/ToewijzingKiezer.razor.rz.scp.css */
/* ── Zachte toggle-knoppen, zelfde stijl als het aanmaakformulier (tbv-toggle-*),
   hier los omdat CSS-isolatie niet over componentgrenzen heen werkt. ── */
.tk-toggle-row[b-vkvylgh482] {
    display: flex;
    gap: 7px;
}

.tk-toggle-btn[b-vkvylgh482] {
    flex: 1;
    padding: 8px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    font-family: inherit;
}

.tk-toggle-btn--actief[b-vkvylgh482] {
    border: 1.5px solid var(--w-green-strong);
    background: #eef5f0;
    color: var(--w-green-strong);
}

.tk-hint[b-vkvylgh482] {
    font-size: 11.5px;
    color: #8a8a8a;
    margin-top: 6px;
}

.tk-hint--fout[b-vkvylgh482] {
    color: #c0392b;
}

/* ::deep is hier nodig: Blazor zet het scope-attribuut alleen op markup uit dít
   bestand, niet op wat ZoekSelect zelf rendert. */
.tk-toggle-row + div[b-vkvylgh482]  .gk-zoek-select .form-control {
    padding: 9px 30px 9px 11px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    font-size: 12.5px;
    color: #333;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px 10px;
}

.tk-toggle-row + div[b-vkvylgh482]  .gk-zoek-select-dropdown .gk-zoek-select-item {
    font-size: 12.5px;
}