/* Stijlen per pagina van de beheeromgeving (10/10/2026). Ze stonden als <style>-blok in de .razor-bestanden;
   nu op één plaats. Kleuren via de tokens van design-tokens.css, zodat de nachtweergave vanzelf meekomt.
   Nieuwe pagina: zet de stijlen hier (of in een gedeeld bestand), niet in een <style>-blok. */

/* ── Inbox/EmailAttachmentPicker.razor ─────────────────────────────────────────────────────────────────── */
.email-attachment-picker {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-line-dbe5f1);
    border-radius: 10px;
    background: var(--color-page-bg);
}

.email-attachment-picker-header,
.email-attachment-picker-title,
.email-attachment-add,
.email-attachment-item {
    display: flex;
    align-items: center;
}

.email-attachment-picker-header {
    justify-content: space-between;
    gap: 12px;
}

.email-attachment-picker-title,
.email-attachment-add {
    gap: 6px;
}

.email-attachment-picker-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.email-attachment-add {
    position: relative;
    padding: 7px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.email-attachment-add:hover {
    border-color: var(--color-line-blue-300);
    color: var(--color-primary-hover);
}

.email-attachment-add.disabled {
    cursor: not-allowed;
    opacity: .55;
}

.email-attachment-add input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.email-attachment-list {
    display: grid;
    gap: 6px;
    margin-top: 9px;
}

.email-attachment-item {
    gap: 8px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 13px;
}

.email-attachment-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-attachment-size,
.email-attachment-help {
    color: var(--color-text-muted);
    font-size: 12px;
}

.email-attachment-item button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 0;
    background: transparent;
    color: var(--color-fg-red-600);
    cursor: pointer;
}

.email-attachment-error {
    margin-top: 8px;
    color: var(--color-fg-red-700);
    font-size: 12px;
}

.email-attachment-help {
    margin-top: 7px;
}

/* ── Inbox/EmailConversationDetail.razor ───────────────────────────────────────────────────────────────── */
.email-detail-grid {
    display: grid;
    grid-template-columns: var(--email-left-width, 260px) minmax(420px, 1fr) var(--email-right-width, 280px);
    gap: 16px;
    align-items: start;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    position: relative;
}

.email-column-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 5;
    cursor: col-resize;
    touch-action: none;
}

.email-column-resizer::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 3px;
    width: 2px;
    border-radius: 999px;
    background: transparent;
    transition: background-color .15s ease;
}

.email-column-resizer:hover::after,
.email-column-resizer:focus::after,
.email-column-resizer.is-resizing::after {
    background: #93c5fd;
}

.email-column-resizer-left {
    left: calc(var(--email-left-width, 260px) + 4px);
}

.email-column-resizer-right {
    right: calc(var(--email-right-width, 280px) + 4px);
}

@media (max-width: 1180px) {
    .email-detail-grid {
        grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
    }

    .email-side-column {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .email-column-resizer {
        display: none;
    }
}

@media (max-width: 760px) {
    
    .email-detail-grid > div {
        max-height: none !important;
        overflow: visible !important;
    }
}

.email-thread-row {
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border: 1px solid transparent;
}

.email-thread-row.active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
}

.email-thread-row:hover {
    background: var(--color-page-bg);
}

.email-thread-column {
    min-height: 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    overflow-y: auto;
}

.email-main-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
}

.email-side-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow: visible;
    align-self: start;
}

.email-side-entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.email-side-entry-head .na-row-actions {
    flex: 0 0 auto;
}

.email-message-card,
.email-answer-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
}

.email-message-card {
    display: flex;
    flex: 0 0 var(--email-message-height, 420px);
    flex-direction: column;
    height: var(--email-message-height, 420px);
    min-height: 260px;
    max-height: 900px;
    overflow: hidden;
    position: relative;
}

.email-message-resizer {
    position: relative;
    flex: 0 0 18px;
    width: 100%;
    height: 18px;
    z-index: 4;
    cursor: row-resize;
    touch-action: none;
    user-select: none;
}

.email-message-resizer::after {
    content: "";
    position: absolute;
    top: 7px;
    left: calc(50% - 32px);
    width: 64px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-bg-slate-300);
    transition: background-color .15s ease;
}

.email-message-resizer:hover::after,
.email-message-resizer:focus::after,
.email-message-resizer.is-resizing::after {
    background: #3b82f6;
}

.email-message-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-top: 1px solid var(--color-line-slate-100);
    padding: 14px 16px 16px;
}

.email-conversation-thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 1px 4px 12px 1px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.email-history-item {
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.email-history-item.selected {
    border-color: var(--color-primary-border);
}

.email-history-item.expanded {
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

.email-history-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    color: var(--color-text);
    text-align: left;
}

.email-history-header:hover {
    background: var(--color-page-bg);
}

.email-history-summary {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 0;
    text-align: left;
    border: 0;
    background: transparent;
    color: inherit;
}

.email-history-utilities {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
}

.email-history-language-controls {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
}

.email-history-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--color-bg-slate-200);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.email-history-avatar.outbound {
    background: var(--color-bg-blue-100);
    color: var(--color-primary-hover);
}

.email-history-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.email-history-title-line {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.email-history-sender {
    flex: 0 0 auto;
    font-size: 14px;
}

.email-history-subject,
.email-history-recipient,
.email-history-snippet {
    overflow: hidden;
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-history-subject {
    font-size: 13px;
}

.email-history-recipient,
.email-history-snippet {
    font-size: 12px;
}

.email-history-time {
    color: var(--color-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.email-history-details {
    padding: 0 16px 10px 64px;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.email-message-frame {
    display: block;
    height: 340px;
    min-height: 300px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: var(--color-surface);
}

.email-history-plain {
    max-height: 420px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.6;
}

.email-message-language-tabs {
    display: inline-flex;
    align-items: center;
    padding: 1px;
    border: 1px solid var(--color-line-dbe5f1);
    border-radius: 7px;
    background: var(--color-page-bg);
}

.email-language-tab {
    min-height: 28px;
    padding: 4px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--color-fg-slate-600);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.email-language-tab.active {
    background: var(--color-bg-indigo-50);
    color: var(--color-primary-hover);
    box-shadow: 0 0 0 1px #bfdbfe inset;
}

.email-language-tab:disabled {
    cursor: wait;
    opacity: .55;
}

.email-translation-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--color-text-muted);
    font-size: 10px;
    white-space: nowrap;
}

.email-translation-status.success {
    color: var(--color-fg-green-700);
}

.email-translation-retry {
    border: 0;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.email-history-translated {
    padding: 8px 10px;
    border-left: 3px solid var(--color-primary-border);
    background: var(--color-page-bg);
}

.email-answer-card {
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .email-detail-grid {
        display: flex;
        flex-direction: column;
        overflow: visible;
        height: auto;
        gap: 12px;
    }

    /* De tijdlijn bevat op mobiel al alle berichten. De aparte desktoplijst zou dezelfde
       informatie dubbel tonen en onnodig veel verticale ruimte innemen. */
    .email-thread-column {
        display: none;
    }

    .email-main-column {
        height: auto;
        overflow: visible;
        gap: 0;
        width: 100%;
    }

    .email-message-card {
        flex: 0 0 auto;
        min-height: 360px;
        height: auto;
        max-height: none;
        padding: 10px;
        border-radius: 12px;
    }

    .email-message-resizer {
        display: none;
    }

    .email-conversation-thread {
        overflow: visible;
    }

    .email-history-header {
        grid-template-columns: minmax(0, 1fr) auto 16px;
        gap: 8px;
        padding: 10px 8px;
    }

    .email-history-summary {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
    }

    .email-history-avatar {
        width: 34px;
        height: 34px;
    }

    .email-history-utilities {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
        gap: 3px;
    }

    .email-language-tab {
        min-height: 22px;
        padding: 2px 5px;
        font-size: 9px;
    }

    .email-translation-status-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .email-history-details {
        padding: 0 10px 9px 50px;
    }

    .email-message-content {
        padding: 10px 8px 12px;
    }

    .email-message-frame {
        height: min(58vh, 460px);
        min-height: 330px;
    }

    .email-history-plain {
        max-height: min(58vh, 460px);
        font-size: 15px;
        line-height: 1.55;
    }

    .email-side-column {
        display: flex;
        width: 100%;
        gap: 12px;
    }

    .email-side-column > div {
        padding: 12px !important;
        border-radius: 12px !important;
    }
}

/* ── Layout/MainLayout.razor ───────────────────────────────────────────────────────────────────────────── */
.subscription-access-block{max-width:720px;margin:40px auto;padding:28px;border-radius:22px;background:var(--color-surface);box-shadow:0 10px 28px rgba(15,23,42,.08);border:1px solid var(--color-line-gray-200)}.subscription-access-block h1{margin-top:0}.subscription-access-button{display:inline-flex;margin-top:12px;background:var(--color-primary);color:var(--color-text-on-primary);text-decoration:none;padding:12px 18px;border-radius:12px;font-weight:700}.subscription-access-help{color:var(--color-fg-gray-500)}

/* ── Pages/Aanvraag.razor ──────────────────────────────────────────────────────────────────────────────── */
.aanv { max-width: 640px; }
.aanv-kaart { padding: 6px 16px; }
/* In het AanvraagVenster (12/10/2026) staat de kaart in het venster zelf: geen extra binnenmarge. */
.aanv-kaart.aanv-venster { padding: 0; }
.aanv-rij { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--color-line-slate-100); font-size: 14px; }
.aanv-rij:first-child { border-top: 0; }
.aanv-rij span { color: var(--color-text-muted, var(--color-text-muted)); }
.aanv-rij b, .aanv-rij a { text-align: right; }
.aanv-lang { flex-direction: column; gap: 4px; }
.aanv-lang p { margin: 0; white-space: pre-line; }
.aanv-muted { color: var(--color-text-muted, var(--color-text-muted)); font-size: 13px; }
.aanv-status { margin-bottom: 12px; }
.aanv-link { display: inline-block; margin-top: 8px; font-weight: 600; }
.aanv-terug { display: inline-block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; text-decoration: none; }

/* ── Pages/Aanvragen.razor ─────────────────────────────────────────────────────────────────────────────── */
.aanvr-rij { cursor: pointer; }
.aanvr-kaarten { display: flex; flex-direction: column; gap: 10px; }

/* ── Pages/AiExecutionDetail.razor ─────────────────────────────────────────────────────────────────────── */
.ai-detail-head { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 16px; margin-bottom: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ai-detail-head .label { font-size: 12px; color: var(--color-text-muted); }
.ai-detail-head .value { font-size: 15px; font-weight: 600; color: var(--color-text); }
.ai-step-list { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 8px 16px; }
.ai-step { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-line-slate-100); }
.ai-step:last-child { border-bottom: none; }
.ai-step-icon { width: 22px; text-align: center; }
.ai-step-main { flex: 1; }
.ai-step-title { font-weight: 600; font-size: 14px; }
.ai-step-note { color: var(--color-text-muted); font-size: 13px; }
.ai-step-time { color: #94a3b8; font-size: 12px; white-space: nowrap; }
.ai-step details { margin-top: 4px; }
.ai-step details pre { background: var(--color-page-bg); border-radius: 8px; padding: 8px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.ai-dryrun-banner { background: var(--color-warning-bg); color: var(--color-warning-text); border-radius: 10px; padding: 10px 14px; font-weight: 700; margin-bottom: 14px; }
.ai-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
/* Eigen knopstijl: de globale .companies-add-button wordt op mobiel verborgen (site.css),
   dus de actieknoppen hier krijgen een eigen, overal zichtbare klasse. */
.ai-primary-button { display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary); color: var(--color-text-on-primary); border: none; border-radius: 12px; padding: 10px 18px; font-size: 14px; font-weight: 700; text-decoration: none; }

/* ── Pages/AiGuidelineEditor.razor ─────────────────────────────────────────────────────────────────────── */
.gl-editor { max-width: 860px; }
.gl-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.gl-card { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.gl-card h3 { margin: 0 0 10px; font-size: 15px; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.gl-field label { display: block; font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; }
.gl-field input, .gl-field select, .gl-field textarea { width: 100%; border: 1px solid var(--color-line-gray-200); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.gl-checkrow { display: flex; gap: 14px; flex-wrap: wrap; }
.gl-checkrow label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.gl-warn { background: var(--color-warning-bg); color: var(--color-warning-text); border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 8px; }
.gl-save { background: var(--color-primary); color: var(--color-text-on-primary); border: none; border-radius: 12px; padding: 10px 20px; font-weight: 700; cursor: pointer; }
.gl-secondary { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 10px 16px; cursor: pointer; }

/* ── Pages/AiInstellingen.razor ────────────────────────────────────────────────────────────────────────── */
:where(.ai-instellingen-pagina) .ai-panel h3 { margin: 0 0 10px; font-size: 15px; }
.ai-form-row { margin-bottom: 12px; }
/* Taalknoppen bij de webcall-knoptekst; zelfde vorm als op het dienstenscherm. */
:where(.ai-instellingen-pagina) .svc-lang-btn { position: relative; border: 1px solid var(--color-line-gray-200); background: var(--color-surface); color: var(--color-text-secondary); border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; min-width: 52px; text-align: center; }
:where(.ai-instellingen-pagina) .svc-lang-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
:where(.ai-instellingen-pagina) .svc-lang-basis { margin-left: 4px; opacity: .65; }
:where(.ai-instellingen-pagina) .svc-lang-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid var(--color-line-wit); }
:where(.ai-instellingen-pagina) .svc-lang-origineel { margin: 6px 0 0; font-size: .82rem; color: #94a3b8; overflow-wrap: anywhere; }
:where(.ai-instellingen-pagina) .svc-lang-origineel b { color: var(--color-text-muted); font-weight: 600; }
.ai-form-row label { display: block; font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; }
.ai-form-row input[type=text], .ai-form-row textarea, .ai-form-row select, .ai-form-row input[type=number] { width: 100%; border: 1px solid var(--color-line-gray-200); border-radius: 10px; padding: 9px 12px; box-sizing: border-box; font-family: inherit; }
.ai-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .ai-two-col { grid-template-columns: 1fr; } }
.kop-groepen { display: grid; gap: 18px; }
.kop-groep { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-surface); }
.kop-groep-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 16px; background: var(--color-page-bg); border-bottom: 1px solid var(--color-border); }
.kop-groep-kop h4 { margin: 0; font-size: 14px; color: var(--color-text); }
.kop-groep-kop p { margin: 0; font-size: 12.5px; color: var(--color-text-muted); }
.kop-groep .kop-tabel { margin: 0; }
.kop-groep .kop-tabel th:first-child,
.kop-groep .kop-tabel td:first-child { padding-left: 16px; }
.kop-groep .kop-tabel th:last-child,
.kop-groep .kop-tabel td:last-child { padding-right: 16px; }
.ai-status-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-line-slate-100); font-size: 14px; }
.ai-status-row:last-child { border-bottom: none; }
.ai-transfer-functions { display:grid; gap:12px; margin-top:12px; }
.ai-transfer-function-row { display:block; padding:0; border:1px solid var(--color-border); border-radius:12px; overflow:hidden; background:var(--color-surface); }
.ai-transfer-function-label { display:flex; align-items:center; gap:9px; width:100%; margin:0; padding:11px 14px; box-sizing:border-box; border-bottom:1px solid var(--color-border); background:var(--color-page-bg); }
.ai-transfer-function-label input { margin:0; }
.ai-transfer-function-content { min-width:0; padding:10px 12px 2px; }
.transfer-destinations-list { display:grid; gap:8px; }
.transfer-destination { margin:0 0 8px; border:1px solid var(--color-border); border-radius:10px; overflow:hidden; background:var(--color-surface); box-shadow:0 1px 2px rgba(15, 23, 42, .04); }
.transfer-destination-head { display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--color-surface); }
.transfer-destination-head-main { flex:1; min-width:0; }
.transfer-destination-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; }
.transfer-destination-name { color:var(--color-text); }
.transfer-destination-phone { color:var(--color-text-muted); font-size:12px; }
.transfer-destination-summary { display:block; margin-top:4px; color:var(--color-text-muted); font-size:12px; line-height:1.35; }
.transfer-destination-actions { display:flex; align-items:center; gap:4px; flex:none; }
.transfer-destination-order,
.transfer-destination-toggle { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-muted); cursor:pointer; padding:6px; min-width:32px; min-height:32px; border-radius:7px; line-height:1; }
.transfer-destination-order:hover, .transfer-destination-toggle:hover { background:var(--color-surface-secondary); color:var(--color-text-secondary); }
.transfer-destination-body { padding:10px; border-top:1px solid var(--color-line-gray-200); background:var(--color-page-bg); }
.transfer-temporary { display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:13px; }
/* Tab Modellen (08/10/2026): per niveau een rij met de modellen als labels. Computer: naam, labels, knop naast
   elkaar; gsm: onder elkaar. */
.mod-panel { padding: 0; overflow: hidden; }
.mod-kop { padding: 14px 16px 12px; }
.mod-kop h3 { margin: 0 0 4px; }
.mod-kop p { margin: 0; font-size: 12.5px; line-height: 1.45; }
.mod-rij { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--color-line-slate-100); }
.mod-rij.is-platform { background: var(--color-bg-amber-50); }
.mod-naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mod-naam strong { font-size: 15px; color: var(--color-text); }
.mod-naam span { font-size: 12px; }
.mod-labels { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mod-label { padding: 3px 9px; border-radius: 999px; background: var(--color-bg-indigo-50); color: var(--color-fg-indigo-800); font-size: 12px; font-weight: 600; }
.mod-label.is-taken { background: var(--color-bg-emerald-50); color: var(--color-fg-emerald-800); }
.mod-badge { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.mod-badge.is-alle { background: var(--color-warning-bg); color: var(--color-warning-text); }
.mod-badge.is-eigen { background: var(--color-success-bg); color: var(--color-success-text); }
.mod-badge.is-erft { background: var(--color-surface-secondary); color: var(--color-text-muted); }
.mod-actie { justify-self: end; font-size: 12.5px; }
@media (max-width: 900px) {
    .mod-rij { grid-template-columns: 1fr; gap: 8px; }
    .mod-actie { justify-self: start; }
}

/* Bewaarbeleid voor opnames: hangt onder het vinkje "Gesprek opnemen" en hoort er zichtbaar bij. */
.ai-opname { margin: 10px 0 4px 28px; border-left: 3px solid var(--color-primary-border); background: var(--color-primary-soft); border-radius: 0 10px 10px 0; padding: 14px 18px; }
.ai-opname.ai-bewaking { margin: 18px 0 4px 0; }

/* Vijf bovengrenzen naast elkaar. De labels lopen niet even lang — "Gesprekken per beller per
   uur (telefoon)" neemt twee regels — en zonder vaste hoogte stonden de invulvelden daardoor op
   verschillende hoogtes, met de uitleg eronder even scheef. De labelhoogte van twee regels zet
   ze op één lijn. */
.ai-bewaking .ai-opname-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); column-gap: 16px; row-gap: 14px; align-items: start; margin-bottom: 0; }
.ai-bewaking .ai-opname-veld { flex: none; }
.ai-bewaking .ai-opname-veld label { min-height: 2.6em; display: flex; align-items: flex-end; margin-bottom: 6px; }
.ai-bewaking .ai-opname-veld input { max-width: 150px; }
.ai-bewaking .appointment-checkbox { margin-top: 4px; }

/* Het afremmen van ongepast gedrag staat in hetzelfde blok maar is iets anders dan een
   bovengrens: een lijn erboven zet het apart, de inspringing hangt het onder zijn eigen vinkje. */
.ai-bewaking-afremmen { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-line-blue-100); }
.ai-bewaking-afremmen .ai-opname-hint { margin: 4px 0 10px 28px; }
.ai-bewaking-afremmen .ai-opname-veld { margin-left: 28px; max-width: 260px; }
/* Dit ene veld hoort bij het vinkje erboven en niet bij de rij bovengrenzen: geen vaste
   labelhoogte, en het label krijgt de ruimte om op één regel te staan. */
.ai-bewaking-afremmen .ai-opname-veld label { min-height: 0; display: block; }
.ai-opname-titel { font-weight: 700; font-size: 14px; margin-bottom: 4px; }

/* De blokken onder een vinkje zijn inklapbaar: dicht blijft het scherm kort, open zie je alles.
   De pijl is die van de browser; alleen de kop krijgt eigen opmaak. */
details.ai-opname > summary { font-weight: 700; font-size: 14px; cursor: pointer; list-style-position: outside; }
:where(.ai-instellingen-pagina) details.ai-opname > summary::marker { color: var(--color-text-muted); }
:where(.ai-instellingen-pagina) details.ai-opname[open] > summary { margin-bottom: 10px; }
/* Zonder dit tekent de browser bij een klik een zwarte kaderlijn over de volle breedte van de
   kop; dit houdt de focusring strak en in de kleur van het scherm. */
details.ai-opname > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 6px; }
:where(.ai-instellingen-pagina) .ai-opname-hint { color: var(--color-text-muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 14px; }
.ai-opname-velden { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
:where(.ai-instellingen-pagina) .ai-opname-veld { flex: 0 1 220px; }
:where(.ai-instellingen-pagina) .ai-opname-veld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 5px; }
:where(.ai-instellingen-pagina) .ai-opname-veld input { width: 100%; }
:where(.ai-instellingen-pagina) .ai-opname-veld span { display: block; font-size: 11.5px; color: var(--color-text-muted); margin-top: 4px; }
.ai-opname-verbruik { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 10px; padding: 12px 14px; }
.ai-opname-verbruik-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13.5px; }
.ai-opname-balk { height: 9px; border-radius: 99px; background: var(--color-surface-secondary); overflow: hidden; margin-bottom: 10px; }
.ai-opname-balk i { display: block; height: 100%; border-radius: 99px; background: var(--color-primary); }
.ai-opname-balk i.vol { background: #d97706; }
.ai-opname-verbruik-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.ai-opname-knoppen { display: flex; align-items: center; gap: 8px; }
.ai-opname-melding { color: var(--color-success-text); font-weight: 600; }
.ai-opname-waarschuwing { margin-top: 12px; background: var(--color-warning-bg); border: 1px solid #fcd34d; color: var(--color-warning-text); border-radius: 9px; padding: 10px 13px; font-size: 12.5px; line-height: 1.5; }
/* Het opengeklapte kanaal: iets ingesprongen en met een lijn, zodat zichtbaar blijft dat het bij
   de regel erboven hoort en niet bij het kanaal eronder. */
.ai-kanaal-detail { margin: 4px 0 10px; padding: 10px 12px; border-left: 3px solid var(--color-line-gray-200); background: var(--color-page-bg); border-radius: 0 10px 10px 0; }
.ai-kanaal-detail label { display: block; margin-bottom: 6px; }

/* Op een telefoon past een tabel van vijf kolommen niet: ze dwingt de hele pagina zijwaarts.
   Onder 700px wordt elke regel daarom een kaartje — naam met status ernaast, daaronder waarvoor
   en op welk niveau, en de actie onderaan rechts. Dezelfde cellen, enkel anders geschikt. */
@media (max-width: 700px) {
    .ai-transfer-function-row {
        display:block;
        padding:0;
    }
    .ai-transfer-function-label {
        display:flex;
        width:100%;
        margin:0;
        padding:10px 12px;
    }
    .ai-transfer-function-content { width:100%; padding:8px 10px 2px; box-sizing:border-box; }
    .transfer-destination { width:100%; box-sizing:border-box; }
    .transfer-destination-head { align-items:flex-start; padding:10px 12px; }
    .transfer-destination-title { display:block; }
    .transfer-destination-phone { display:block; margin-top:2px; }
    .transfer-destination-actions { margin:-2px -4px 0 2px; }
    .transfer-destination-order,
    .transfer-destination-toggle { min-width:34px; min-height:34px; padding:6px; }
    .transfer-destination-body { padding:10px; }
    .transfer-temporary { padding:2px; }

    .kop-tabel thead { display: none; }
    .kop-tabel, .kop-tabel tbody, .kop-tabel tr, .kop-tabel td { display: block; width: 100%; }
    .kop-tabel tr {
        display: grid;
        /* minmax(0,…) op beide kolommen: anders duwt een lange niveaunaam de kaart breder dan het scherm. */
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        gap: 2px 10px;
        border: 1px solid var(--color-line-gray-200);
        border-radius: 12px;
        padding: 10px 12px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    .kop-tabel td { border: none; padding: 0; min-width: 0; overflow-wrap: anywhere; }
    :where(.ai-instellingen-pagina) .kop-cel-naam { grid-column: 1; grid-row: 1; }
    :where(.ai-instellingen-pagina) .kop-cel-status { grid-column: 2; grid-row: 1; text-align: right; }
    :where(.ai-instellingen-pagina) .kop-cel-rol { grid-column: 1; grid-row: 2; }
    :where(.ai-instellingen-pagina) .kop-cel-niveau { grid-column: 2; grid-row: 2; text-align: right; }
    :where(.ai-instellingen-pagina) .kop-cel-actie { grid-column: 1 / -1; grid-row: 3; text-align: right !important; margin-top: 6px; }
    :where(.ai-instellingen-pagina) .kop-cel-actie:empty { display: none; }
    .kop-groep-kop { display: grid; gap: 3px; }
    .kop-groep .kop-tabel tr { border-left: none; border-right: none; border-radius: 0; margin-bottom: 0; }
}

/* ── Pages/AiKennisbank.razor ──────────────────────────────────────────────────────────────────────────── */
.kb-bronnen { display: grid; gap: 10px; }
.kb-bron { display: flex; align-items: center; gap: 12px; background: var(--color-surface, var(--color-surface)); border: 1px solid var(--color-border, var(--color-line-gray-200)); border-radius: 14px; padding: 12px 14px; }
.kb-bron-icoon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-bg-indigo-50); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kb-bron-tekst { flex: 1; min-width: 0; font-size: 13px; color: var(--color-text-muted, var(--color-text-muted)); }
.kb-bron-tekst strong { display: block; color: var(--color-text, var(--color-text)); font-size: 15px; margin-bottom: 2px; }
.kb-bron a { color: var(--color-primary, var(--color-primary)); font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none; }
.kb-bronnen-info { margin-bottom: 12px; }
.kb-onbeantwoord { margin-left: 6px; }
@media (min-width: 901px) { .kb-bronnen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Pages/AiKennisbankArtikelEditor.razor ─────────────────────────────────────────────────────────────── */
.kba-editor { max-width: 860px; }
.kba-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.kba-card { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.kba-field { margin-bottom: 12px; }
.kba-field label { display: block; font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; }
.kba-field input, .kba-field select, .kba-field textarea { width: 100%; border: 1px solid var(--color-line-gray-200); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.kba-save { background: var(--color-primary); color: var(--color-text-on-primary); border: none; border-radius: 12px; padding: 10px 20px; font-weight: 700; cursor: pointer; }
.kba-secondary { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 10px 16px; cursor: pointer; }
.kba-checkrow { display: flex; gap: 14px; flex-wrap: wrap; }
.kba-checkrow label { display: flex; gap: 6px; align-items: center; font-size: 14px; }

/* ── Pages/AiOverview.razor ────────────────────────────────────────────────────────────────────────────── */
.ai-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ai-kpi-card { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 14px; }
.ai-kpi-card .ai-kpi-label { font-size: 13px; color: var(--color-text-muted); }
.ai-kpi-card .ai-kpi-value { font-size: 24px; font-weight: 700; color: var(--color-text); }
.ai-kpi-card .ai-kpi-sub { font-size: 12px; color: #94a3b8; }
.ai-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.ai-panel h3 { margin: 0 0 10px; font-size: 15px; }
.ai-comp-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-line-slate-100); font-size: 14px; }
.ai-comp-row:last-child { border-bottom: none; }

/* ── Pages/AiProcedures.razor ──────────────────────────────────────────────────────────────────────────── */
.ai-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ai-pill-ok { background: var(--color-success-bg); color: var(--color-success-text); }
.ai-pill-off { background: var(--color-surface-secondary); color: var(--color-fg-slate-600); }
.ai-pill-warn { background: var(--color-warning-bg); color: var(--color-warning-text); }
.ai-pill-bad { background: var(--color-danger-bg); color: var(--color-fg-red-700); }
.ai-pill-blue { background: var(--color-bg-blue-100); color: var(--color-primary-hover); }
.ai-muted { color: var(--color-text-muted); }
.ai-panel { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
:where(.ai-procedures-pagina) .ai-panel h3 { margin: 0 0 4px; font-size: 15px; }
.ai-panel .ai-panel-sub { color: var(--color-text-muted); font-size: 13px; margin: 0 0 12px; }
.ai-tool-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(120px, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--color-line-slate-100); font-size: 14px; }
.ai-tool-row:last-child { border-bottom: none; }
.ai-cap-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-line-slate-100); font-size: 14px; }
.ai-cap-row:last-child { border-bottom: none; }
.ai-save-button { background: var(--color-primary); color: var(--color-text-on-primary); border: none; border-radius: 12px; padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ai-limit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ai-limit-grid label { display: block; font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; }
.ai-limit-grid input { width: 100%; max-width: 160px; border: 1px solid var(--color-line-gray-200); border-radius: 10px; padding: 8px 10px; }
@media (max-width: 720px) { .ai-tool-row { grid-template-columns: 1fr auto; } .ai-tool-row .ai-tool-meta { display: none; } }

.afh-subtabs { display:flex; gap:8px; margin:0 0 14px; }
.afh-subtabs button { border:1px solid var(--color-border); background:var(--color-surface); border-radius:9px; padding:7px 16px; font-size:13px; font-weight:600; color:var(--color-fg-slate-600); cursor:pointer; }
.afh-subtabs button.active { background:var(--color-primary-soft); border-color:var(--color-line-blue-300); color:var(--color-primary-hover); }

/* ── Pages/AiReceptionist.razor ────────────────────────────────────────────────────────────────────────── */
.ai-receptionist-muted { color: var(--color-text-muted); }
.task-customer-picker { position: relative; }
.task-customer-picker-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; box-shadow: 0 14px 28px rgba(15, 23, 42, .14); z-index: 5; max-height: 220px; overflow-y: auto; }
.task-customer-picker-results button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 9px 12px; font-size: 13px; cursor: pointer; }
.task-customer-picker-results button:hover { background: var(--color-bg-purple-100); color: var(--color-ai-text); }
.task-customer-picker-results button strong { display: block; color: var(--color-fg-gray-900); }
.task-customer-picker-results button span { color: var(--color-fg-gray-500); font-size: 12px; }
.task-detail-statusrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.task-detail-created { flex-basis: 100%; order: 3; font-size: 12.5px; color: var(--color-text-muted); }

/* ── Pages/AppMeldingenBeheer.razor ────────────────────────────────────────────────────────────────────── */
.amb { max-width: 760px; }
.amb-status { font-weight: 600; margin: 0 0 12px; }
.amb-status.amb-aan { color: var(--color-fg-green-700); }
.amb-label { display: block; font-size: 13px; color: var(--color-text-muted, var(--color-text-muted)); margin-bottom: 6px; }
.amb textarea { width: 100%; font-family: Consolas, monospace; font-size: 12px; border: 1px solid var(--color-border); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.amb-fout { color: var(--color-danger-text); font-size: 13px; margin-bottom: 10px; }
.amb-muted { color: var(--color-text-muted, var(--color-text-muted)); margin: 0; }

/* ── Pages/AssignmentWizard.razor ──────────────────────────────────────────────────────────────────────── */
.assignment-edit-page{display:flex;flex-direction:column;gap:18px}.assignment-back{color:var(--color-primary-hover);text-decoration:none;font-weight:800}.assignment-edit-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.assignment-edit-header h1{margin:0;font-size:2rem}.assignment-edit-header p{margin:6px 0 0;color:var(--color-text-muted)}:where(.assignment-edit-page) .assignment-panel {background:var(--color-surface);border:1px solid var(--color-line-gray-200);border-radius:8px;padding:18px}:where(.assignment-edit-page) .assignment-panel h2 {margin:0 0 14px;font-size:1.15rem}:where(.assignment-edit-page) .assignment-panel-header {display:flex;justify-content:space-between;align-items:center;gap:12px}:where(.assignment-edit-page) .assignment-panel-header button, :where(.assignment-edit-page) .assignment-secondary {border:1px solid var(--color-line-dbe3ef);border-radius:8px;background:var(--color-surface);color:var(--color-primary-hover);padding:10px 12px;font-weight:800;cursor:pointer;text-decoration:none}:where(.assignment-edit-page) .assignment-form-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}:where(.assignment-edit-page) .assignment-basics-grid {gap:16px 14px}:where(.assignment-edit-page) .assignment-form-grid.single {grid-template-columns:1fr}:where(.assignment-edit-page) .assignment-form-grid label {display:flex;flex-direction:column;gap:7px;color:var(--color-text-secondary);font-weight:800}:where(.assignment-edit-page) .assignment-form-grid .assignment-field-label {display:inline-flex;align-items:center;gap:4px;color:var(--color-text-secondary);font-size:.88rem;font-weight:800;line-height:1.25}:where(.assignment-edit-page) .assignment-form-grid label span {color:var(--color-fg-red-600)}:where(.assignment-edit-page) .assignment-form-grid input, :where(.assignment-edit-page) .assignment-form-grid select, :where(.assignment-edit-page) .assignment-form-grid textarea, :where(.assignment-edit-page) .assignment-contact-source select, :where(.assignment-edit-page) .assignment-customer-toolbar input, :where(.assignment-edit-page) .assignment-customer-toolbar select {border:1px solid var(--color-line-dbe3ef);border-radius:8px;padding:10px;background:var(--color-surface);color:var(--color-text)}:where(.assignment-edit-page) .assignment-basics-grid input, :where(.assignment-edit-page) .assignment-basics-grid select {min-height:40px}:where(.assignment-edit-page) .assignment-basics-grid textarea {min-height:92px;resize:vertical}:where(.assignment-edit-page) .assignment-form-grid .wide {grid-column:1/-1}:where(.assignment-edit-page) .assignment-form-grid .assignment-checkbox-label {flex-direction:row;align-items:center;gap:10px;cursor:pointer;font-weight:700}:where(.assignment-edit-page) .assignment-form-grid .assignment-checkbox-label input[type=checkbox] {width:18px;height:18px;padding:0;margin:0;flex:0 0 auto;cursor:pointer}:where(.assignment-edit-page) .assignment-reminders {display:flex;flex-direction:column;gap:10px}:where(.assignment-edit-page) .assignment-source-tabs {display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}:where(.assignment-edit-page) .assignment-source-tabs button {border:1px solid var(--color-line-dbe3ef);background:var(--color-surface);border-radius:8px;padding:10px 12px;font-weight:800;color:var(--color-fg-slate-600);cursor:pointer}:where(.assignment-edit-page) .assignment-source-tabs button.active {background:var(--color-primary-soft);color:var(--color-primary-hover);border-color:var(--color-primary-border)}:where(.assignment-edit-page) .assignment-contact-source {display:flex;gap:12px;align-items:end;margin-bottom:14px}:where(.assignment-edit-page) .assignment-contact-source label {display:flex;flex-direction:column;gap:7px;min-width:280px;font-weight:800}:where(.assignment-edit-page) .assignment-contact-source button {border:0;border-radius:8px;background:var(--color-primary-hover);color:var(--color-text-on-primary);padding:11px 14px;font-weight:800}:where(.assignment-edit-page) .assignment-import-box {display:grid;gap:12px;margin-bottom:14px}:where(.assignment-edit-page) .assignment-drop-zone {border:1px dashed var(--color-line-blue-300);border-radius:8px;padding:20px;text-align:center;display:grid;gap:8px;color:var(--color-fg-slate-600);cursor:pointer}
:where(.assignment-edit-page) .assignment-drop-zone input[type=file] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(.assignment-edit-page) .assignment-drop-zone em {font-style:normal;background:var(--color-primary-hover);color:var(--color-text-on-primary);border-radius:8px;padding:10px 18px;font-weight:800;justify-self:center}:where(.assignment-edit-page) .assignment-import-summary {display:flex;gap:10px;flex-wrap:wrap}:where(.assignment-edit-page) .assignment-import-summary span {border-radius:999px;background:var(--color-surface-secondary);padding:8px 12px;font-weight:800}:where(.assignment-edit-page) .assignment-customer-toolbar {display:grid;grid-template-columns:1fr 220px;gap:12px;margin-bottom:12px}:where(.assignment-edit-page) .assignment-customer-table-wrap {overflow:auto}:where(.assignment-edit-page) .assignment-customer-table {width:100%;border-collapse:collapse;min-width:880px}:where(.assignment-edit-page) .assignment-customer-table th, :where(.assignment-edit-page) .assignment-customer-table td {padding:12px;border-bottom:1px solid var(--color-line-gray-200);text-align:left}:where(.assignment-edit-page) .assignment-pagination {display:flex;justify-content:space-between;color:var(--color-text-muted);margin-top:14px}:where(.assignment-edit-page) .assignment-pagination button {border:1px solid var(--color-line-dbe3ef);background:var(--color-surface);border-radius:6px;padding:8px 10px}.assignment-primary{border:0;border-radius:8px;background:var(--color-primary-hover);color:var(--color-text-on-primary);padding:11px 14px;font-weight:800;cursor:pointer}:where(.assignment-edit-page) .assignment-message {border-radius:8px;padding:12px 14px;font-weight:800}:where(.assignment-edit-page) .assignment-message.success {background:var(--color-success-bg);color:var(--color-success-text)}:where(.assignment-edit-page) .assignment-message.error {background:var(--color-danger-bg);color:var(--color-danger-text)}
:where(.assignment-edit-page) .assignment-reminder-summary-row {display:grid;grid-template-columns:140px 100px 1fr auto 32px 32px;gap:10px;align-items:center;border:1px solid var(--color-line-gray-200);border-radius:8px;padding:10px 12px}
:where(.assignment-edit-page) .assignment-reminder-moment {color:var(--color-text-secondary);font-weight:800}
:where(.assignment-edit-page) .assignment-reminder-channel {display:inline-flex;justify-content:center;border-radius:999px;padding:5px 10px;font-weight:800;font-size:.85rem}
:where(.assignment-edit-page) .assignment-reminder-channel-whatsapp {background:var(--color-success-bg);color:var(--color-success-text)}
:where(.assignment-edit-page) .assignment-reminder-channel-email {background:var(--color-bg-blue-100);color:var(--color-primary-hover)}
:where(.assignment-edit-page) .assignment-reminder-channel-aicall {background:var(--color-ai-bg);color:var(--color-fg-violet-700)}
:where(.assignment-edit-page) .assignment-reminder-template {color:var(--color-text)}
:where(.assignment-edit-page) .assignment-reminder-active {display:flex;align-items:center;gap:6px;font-weight:800;color:var(--color-text-secondary);white-space:nowrap}
.assignment-reminder-edit,.assignment-reminder-remove{border:1px solid var(--color-line-dbe3ef);background:var(--color-surface);border-radius:6px;height:32px;width:32px;cursor:pointer}
.assignment-reminder-remove{border-color:var(--color-line-red-200);color:var(--color-fg-red-600)}
:where(.assignment-edit-page) .assignment-reminder-modal {max-width:760px;width:95vw}
:where(.assignment-edit-page) .assignment-reminder-channel-picker {display:flex;gap:8px}
:where(.assignment-edit-page) .assignment-reminder-channel-picker button {flex:1;border:1px solid var(--color-line-dbe3ef);background:var(--color-surface);border-radius:8px;padding:10px 8px;font-weight:800;color:var(--color-fg-slate-600);cursor:pointer}
:where(.assignment-edit-page) .assignment-reminder-channel-picker button.active {background:var(--color-primary-soft);color:var(--color-primary-hover);border-color:var(--color-primary-border)}
:where(.assignment-edit-page) .assignment-reminder-body-badge {display:inline-flex;border-radius:6px;background:var(--color-primary-soft);color:var(--color-primary-hover);padding:2px 8px;font-size:.8rem;font-weight:800;margin-left:8px}
:where(.assignment-edit-page) .assignment-email-preview {border:1px solid var(--color-line-dbe3ef);border-radius:10px;background:var(--color-surface);overflow:hidden}
:where(.assignment-edit-page) .assignment-email-preview-subject {padding:10px 14px;font-weight:800;color:var(--color-text);border-bottom:1px solid var(--color-line-slate-100);background:var(--color-surface-secondary)}
:where(.assignment-edit-page) .assignment-email-preview-body {padding:12px 14px;font-size:.9rem;color:var(--color-text-secondary)}
:where(.assignment-edit-page) .assignment-email-preview-body p {margin:0 0 8px}
.assignment-wizard-steps{display:flex;align-items:center}
.assignment-wizard-step{display:flex;align-items:center;gap:8px;flex:1;position:relative}
.assignment-wizard-step:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--color-bg-slate-200);margin:0 8px}
.assignment-wizard-step-dot{width:14px;height:14px;border-radius:50%;background:var(--color-bg-slate-200);flex-shrink:0}
.assignment-wizard-step.active .assignment-wizard-step-dot{background:var(--color-primary-hover);box-shadow:0 0 0 4px #dbeafe}
.assignment-wizard-step.completed .assignment-wizard-step-dot{background:var(--color-primary-hover)}
.assignment-wizard-step-label{font-weight:800;color:var(--color-text-muted);white-space:nowrap;font-size:.9rem}
.assignment-wizard-step.active .assignment-wizard-step-label,.assignment-wizard-step.completed .assignment-wizard-step-label{color:var(--color-primary-hover)}
.assignment-wizard-progress-text{margin:8px 0 0;color:var(--color-text-muted);font-weight:700}
.assignment-wizard-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.assignment-wizard-actions-right{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:700px){:where(.assignment-edit-page) .assignment-reminder-summary-row {grid-template-columns:1fr;justify-items:start}}
@media(max-width:1000px){:where(.assignment-edit-page) .assignment-form-grid, :where(.assignment-edit-page) .assignment-customer-toolbar {grid-template-columns:1fr}:where(.assignment-edit-page) .assignment-contact-source {align-items:stretch;flex-direction:column}.assignment-wizard-step-label{display:none}.assignment-wizard-actions{flex-direction:column;align-items:stretch}.assignment-wizard-actions-right{justify-content:stretch}.assignment-wizard-actions-right button{flex:1}}

/* ── Pages/Assignments.razor ───────────────────────────────────────────────────────────────────────────── */
/* Alleen de onderdelen die de migratie niet vervangt: het statusfilter, de
   statuspil en de voortgangsbalk. Het statusfilter komt sinds de tab-migratie uit NaTabs; de oude
   shell-, toolbar-, tabel-, kaart- en
   pagineringsregels zijn vervallen — die komen nu uit het Design System. */
:where(.opdrachten-pagina) .assignment-status {display:inline-flex;border-radius:6px;padding:6px 10px;font-weight:800;font-size:.8rem}
:where(.opdrachten-pagina) .assignment-status.active {background:var(--color-success-bg);color:var(--color-success-text)}
:where(.opdrachten-pagina) .assignment-status.paused {background:var(--color-bg-orange-100);color:var(--color-fg-orange-700)}
:where(.opdrachten-pagina) .assignment-status.completed {background:var(--color-surface-secondary);color:var(--color-text-secondary)}
:where(.opdrachten-pagina) .assignment-status.cancelled {background:var(--color-danger-bg);color:var(--color-danger-text)}
.assignment-progress{height:7px;background:var(--color-bg-slate-200);border-radius:999px;overflow:hidden;min-width:150px}
.assignment-progress span{display:block;height:100%;background:var(--color-primary-hover)}

/* ── Pages/BookingHub.razor ────────────────────────────────────────────────────────────────────────────── */
/* ── Tabs ───────────────────────────────────────────────────────────────────────── */
.bhub-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; }
.bhub-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--color-line-gray-200); background: var(--color-surface); color: var(--color-fg-slate-600); font-weight: 700; font-size: .9rem; cursor: pointer; }
.bhub-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
.bhub-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── Boekingslink-kaart ─────────────────────────────────────────────────────────── */
.bhub-linkcard { background: var(--color-primary-soft); border: 1px solid var(--color-primary-border); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.bhub-linkcard-head { display: flex; gap: 12px; align-items: flex-start; }
.bhub-linkcard-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--color-bg-blue-100); color: var(--color-primary); flex-shrink: 0; }
.bhub-linkcard-head strong { font-size: 1rem; }
.bhub-linkcard-head p { margin: 2px 0 0; color: var(--color-fg-slate-600); font-size: .88rem; }
.bhub-linkrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bhub-slug-editor { display: flex; align-items: center; flex: 1 1 340px; min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 12px; padding: 0 12px; height: 44px; }
.bhub-slug-editor:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.bhub-slug-prefix { color: var(--color-text-muted); font-size: .9rem; white-space: nowrap; user-select: none; }
.bhub-slug-editor input { flex: 1; min-width: 60px; border: none; outline: none; background: none; font-size: .9rem; font-weight: 700; color: var(--color-text); padding: 0; }
.bhub-linkrow-actions { display: flex; gap: 8px; align-items: center; }
.bhub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bhub-slug-ok { display: inline-flex; align-items: center; gap: 8px; width: fit-content; background: var(--color-bg-emerald-50); border: 1px solid var(--color-line-green-200); color: var(--color-success-text); border-radius: 10px; padding: 8px 12px; font-size: .86rem; font-weight: 700; }
.bhub-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface); border: 1px solid var(--color-line-blue-100); border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 600; color: var(--color-fg-slate-600); }

/* ── Kaarten & integratie ───────────────────────────────────────────────────────── */
/* Werkgebied: links de drie kaarten (boekingslink + integratie + beveiliging, gestapeld),
   rechts het live voorbeeld, even smal als op Uiterlijk bewerken (.bpage-layout, 08/10/2026). */
.bhub-workarea { display: grid; grid-template-columns: minmax(0, 1.86fr) minmax(300px, 1fr); gap: 18px; align-items: start; margin-bottom: 16px; }
.bhub-workarea-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Binnen de flex-kolom zorgt de gap al voor de tussenruimte; de eigen marge van de linkcard weg. */
.bhub-workarea-main .bhub-linkcard { margin-bottom: 0; }
.bhub-card-title { margin: 0 0 10px; font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.bhub-hint { color: var(--color-text-muted); font-size: .86rem; margin: 4px 0 10px; }
.bhub-int-item { border-top: 1px solid var(--color-line-slate-100); padding-top: 14px; margin-top: 14px; }
.bhub-int-item:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.bhub-int-item h3 { margin: 0 0 4px; font-size: .96rem; }
.bhub-int-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bhub-code { background: var(--color-bg-slate-900); color: #e2e8f0; border-radius: 10px; padding: 12px 14px; font-size: .78rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 8px 0; }

/* ── Voorbeeld ──────────────────────────────────────────────────────────────────── */
/* Zelfde opschrift en kaart als het voorbeeld op Uiterlijk bewerken (.bpage-preview-caption, .bpage-live). */
.bhub-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bhub-preview-caption { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.bhub-preview-card { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Vaste hoogte + overflow:auto → de kaart zelf scrolt met een gewone, zichtbare scrollbar;
   het iframe groeit via naUi.previewAutoHeight mee met zijn inhoud (min-height = zichtbaar venster). */
.bhub-preview-frame { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, .10); height: 668px; overflow-y: auto; overflow-x: hidden; }
.bhub-preview-frame iframe { display: block; width: 100%; height: 666px; min-height: 666px; border: none; background: var(--color-surface); }

/* ── QR-tab ─────────────────────────────────────────────────────────────────────── */
.bhub-qr-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.bhub-qr-sticker { display: flex; justify-content: center; }
.bhub-qr-sticker img { width: min(480px, 100%); border-radius: 16px; border: 1px solid var(--color-line-gray-200); box-shadow: 0 14px 34px rgba(15, 23, 42, .14); }
.bhub-qr-side { display: flex; flex-direction: column; gap: 14px; }
.bhub-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; cursor: pointer; }
.bhub-toggle-row > span:first-child { font-size: .92rem; font-weight: 600; }
.bhub-switch { position: relative; display: inline-flex; width: 44px; height: 26px; flex-shrink: 0; cursor: pointer; }
.bhub-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bhub-switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--color-bg-slate-300); transition: background .15s ease; }
.bhub-switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: transform .15s ease; }
.bhub-switch input:checked + .bhub-switch-track { background: #16a34a; }
.bhub-switch input:checked + .bhub-switch-track .bhub-switch-thumb { transform: translateX(18px); }
.bhub-switch input:focus-visible + .bhub-switch-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bhub-qr-download { justify-content: center; }
.bhub-qr-hint { color: var(--color-text-muted); font-size: .84rem; text-align: center; margin: 0; }

@media (max-width: 1024px) {
    .bhub-workarea, .bhub-qr-layout { grid-template-columns: 1fr; }
    .bhub-preview-card { position: static; }

    /* Eén kolom (gsm/tablet): het voorbeeld meteen onder "Uw boekingslink", niet helemaal onderaan
       na de widgetcode en de beveiliging (27/09/2026). */
    .bhub-workarea { grid-template-columns: minmax(0, 1fr); }
    .bhub-workarea-main { display: contents; }
    .bhub-workarea-main > * { order: 3; min-width: 0; }
    .bhub-workarea-main > .bhub-linkcard { order: 1; }
    .bhub-workarea > .bhub-preview-card { order: 2; }
}
@media (max-width: 560px) {
    .bhub-linkrow-actions { width: 100%; }
    .bhub-preview-frame { height: 548px; }
    .bhub-preview-frame iframe { height: 546px; min-height: 546px; }
}

/* ── Pages/BookingPageAdmin.razor ──────────────────────────────────────────────────────────────────────── */
/* ── Balk onder de titel: online boeken, tabbladen en de taalkeuze (13/09/2026) ─────────── */
.bpage-balk { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin: 2px 0 16px; }
.bpage-balk-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.bpage-online { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; }
.bpage-online-label { font-weight: 700; font-size: .92rem; color: var(--color-text); }
.bpage-online-status { font-size: .85rem; font-weight: 700; }
.bpage-online-status.on { color: var(--color-fg-green-600); }
.bpage-online-status.off { color: #94a3b8; }
.bpage-balk .na-tabs { margin: 0; }

/* ── Twee kolommen: instellingen en één voorbeeld ───────────────────────────────── */
.bpage-layout { display: grid; grid-template-columns: minmax(0, 1.86fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.bpage-settings-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bpage-preview-col { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bpage-kaart { margin: 0; }
.bpage-kaart-kop { margin-bottom: 12px; }
.bpage-kaart-kop h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.bpage-kaart-kop small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: .84rem; }
.bpage-hint { color: var(--color-text-muted); font-size: .86rem; margin: 4px 0 10px; }
.bpage-veldlabel { display: block; margin: 14px 0 8px; font-size: .88rem; font-weight: 700; color: var(--color-text); }
.bpage-kaart-kop + .bpage-veldlabel, .na-schakelrij-onder > .bpage-veldlabel:first-child { margin-top: 0; }
.bpage-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

/* Taalknoppen; zelfde vorm als op het dienstenscherm. */
.svc-lang-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
:where(.bpage-admin) .svc-lang-btn { position: relative; border: 1px solid var(--color-line-gray-200); background: var(--color-surface); color: var(--color-text-secondary); border-radius: 999px; padding: 7px 18px; font-size: 14px; font-weight: 600; cursor: pointer; min-width: 56px; text-align: center; }
:where(.bpage-admin) .svc-lang-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
:where(.bpage-admin) .svc-lang-basis { margin-left: 4px; opacity: .65; }
:where(.bpage-admin) .svc-lang-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid var(--color-line-wit); }
:where(.bpage-admin) .svc-lang-origineel { margin: -4px 0 10px; font-size: .82rem; color: #94a3b8; overflow-wrap: anywhere; }
:where(.bpage-admin) .svc-lang-origineel b { color: var(--color-text-muted); font-weight: 600; }
.bpage-talen.svc-lang-row { align-items: center; margin: 0; }
.bpage-talen-label { font-size: .82rem; font-weight: 600; color: var(--color-text-muted); margin-right: 2px; }

/* ── Thema-tegels ────────────────────────────────────────────────────────────────── */
.bpage-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 14px; }
.bpage-theme-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 8px; border: 1.5px solid var(--color-line-gray-200); border-radius: 12px; background: var(--color-surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.bpage-theme-tile:hover { border-color: var(--color-border-strong); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.bpage-theme-tile.active { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.bpage-theme-swatch { width: 100%; height: 40px; border-radius: 9px; border: 1px solid rgba(15,23,42,.08); display: flex; align-items: center; justify-content: center; }
.bpage-theme-dot { width: 18px; height: 18px; border-radius: 6px; box-shadow: 0 1px 3px rgba(15,23,42,.25); }
.bpage-theme-swatch-custom { background: conic-gradient(from 90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); }
.bpage-theme-name { font-size: .8rem; font-weight: 700; color: var(--color-text); }

/* ── Lettertype-tegels ───────────────────────────────────────────────────────────── */
.bpage-font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.bpage-font-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px; border: 1.5px solid var(--color-line-gray-200); border-radius: 12px; background: var(--color-surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.bpage-font-tile:hover { border-color: var(--color-border-strong); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.bpage-font-tile.active { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.bpage-font-sample { font-size: 1.5rem; font-weight: 700; color: var(--color-text); line-height: 1.1; }
.bpage-font-name { font-family: "Segoe UI", system-ui, sans-serif; font-size: .78rem; font-weight: 600; color: var(--color-text-muted); text-align: center; }

/* ── Kleuren ────────────────────────────────────────────────────────────────────── */
.bpage-color-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.bpage-color-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bpage-color-row > span { font-size: .9rem; font-weight: 600; }
.bpage-color-row input[type="color"] { width: 46px; height: 34px; border: 1px solid var(--color-line-gray-200); border-radius: 8px; padding: 2px; background: var(--color-surface); cursor: pointer; }

/* ── Upload-tegels ──────────────────────────────────────────────────────────────── */
.bpage-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Knoppen naast elkaar: grootte en hoeken van de widgetknop ──────────────────── */
.bpage-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-line-gray-200); border-radius: 10px; overflow: hidden; background: var(--color-surface); }
.bpage-seg button { border: none; background: none; padding: 8px 14px; font-size: .86rem; font-weight: 600; color: var(--color-fg-slate-600); cursor: pointer; }
.bpage-seg button + button { border-left: 1px solid var(--color-line-gray-200); }
.bpage-seg button.active { background: var(--color-primary); color: var(--color-text-on-primary); }

/* ── Voorbeeld ──────────────────────────────────────────────────────────────────── */
.bpage-preview-caption { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
/* Het venster om de echte boekingspagina heen. De pagina zelf brengt haar eigen stijl mee
   (booking-flow.css); hier staat alleen wat er nodig is om ze in een paneel te laten passen. */
.bpage-live { position: relative; border: 1px solid var(--color-line-gray-200); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(15,23,42,.10); }

/* Een beeld, geen speeltuin: kliks gaan door de pagina heen naar dit venster, dat wel scrolt.
   Boeken is daarnaast in de code afgesloten — zie BookingFlow.IsVoorbeeld. */
.bpage-live-scherm { max-height: 62vh; overflow-y: auto; }
.bpage-live-scherm > * { pointer-events: none; }

/* De boekingspagina rekt zich normaal tot de volle vensterhoogte en staat op een brede marge.
   In een paneel van 330 tot 460 pixels moet ze meebuigen. */
.bpage-live-scherm .bf-mode-standalone { min-height: 0; padding: 14px 12px 10px; }
.bpage-live-scherm .bf-mode-standalone .bf-shell { border-radius: 14px; box-shadow: none; }

/* De knop op de website, of zonder website op een lege pagina. */
.bpage-preview-col .customer-website.cw-knopvak { height: 260px; }
.bpage-widget-preview-area { background: var(--color-surface-secondary); border: 1px dashed var(--color-border-strong); border-radius: 12px; padding: 16px; display: flex; align-items: flex-end; min-height: 160px; }
.bpage-widget-button-preview { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.bpage-widget-button-preview.pos-left { margin-right: auto; }
.bpage-widget-button-preview.pos-right { margin-left: auto; }
/* Cadeaubonnen (13/09/2026): het cadeau in het knopvoorbeeld. */
.bpage-widget-cadeau { display: inline-flex; align-items: center; margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(0,0,0,.2); }
/* Het meescrollen van deze formulierpagina wordt nu centraal geregeld in site.css
   (regel ".list-page-shell:not(:has(.na-list-footer))..." bij de desktop shell-scroll). */

@media (max-width: 1024px) {
    .bpage-layout { grid-template-columns: 1fr; }
    .bpage-preview-col { position: static; order: -1; }
}
@media (max-width: 560px) {
    .bpage-upload-grid, .bpage-twee { grid-template-columns: 1fr; }
}

/* ── Pages/Checkout.razor ──────────────────────────────────────────────────────────────────────────────── */
.checkout-page{display:flex;flex-direction:column;gap:18px}.checkout-date{border:1px solid var(--color-line-dbe3ef);border-radius:14px;padding:10px 12px;font-weight:700}.checkout-info-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--color-primary-border);background:var(--color-primary-soft);color:var(--color-fg-blue-900);border-radius:18px;padding:14px 16px}.checkout-list{display:grid;gap:14px}.checkout-empty{background:var(--color-surface);border:1px solid var(--color-line-gray-200);border-radius:18px;padding:18px;color:var(--color-text-muted)}.checkout-card{background:var(--color-surface);border:1px solid var(--color-line-gray-200);border-radius:22px;padding:16px;box-shadow:0 12px 30px rgba(15,23,42,.06);display:flex;justify-content:space-between;gap:18px;align-items:center}.checkout-card.paid{background:var(--color-page-bg)}.checkout-card-main{display:flex;gap:16px;align-items:flex-start;flex:1}.checkout-time{min-width:70px;border-radius:16px;background:var(--color-surface-secondary);padding:10px;text-align:center;display:flex;flex-direction:column}.checkout-time strong{font-size:1.2rem}.checkout-time span{color:var(--color-text-muted)}.checkout-details{flex:1}.checkout-details h3{margin:0 0 4px;font-size:1.15rem}.checkout-details p{margin:0 0 12px;color:var(--color-text-muted)}.checkout-amount-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}.checkout-amount-grid div{border:1px solid var(--color-line-gray-200);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:3px}.checkout-amount-grid span{font-size:.78rem;color:var(--color-text-muted)}.checkout-amount-grid strong{font-size:1rem}.checkout-amount-grid .remaining{border-color:var(--color-line-green-200);background:var(--color-bg-green-50)}.checkout-actions{min-width:190px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.tap-amount{font-size:.95rem;color:var(--color-text-secondary)}.checkout-paid-pill{display:inline-flex;border-radius:999px;background:var(--color-success-bg);color:var(--color-success-text);border:1px solid #86efac;padding:8px 12px;font-weight:800}.checkout-warning{color:var(--color-fg-amber-700);background:var(--color-bg-amber-50);border:1px solid var(--color-line-amber-200);border-radius:12px;padding:10px}@media(max-width:800px){.checkout-card{align-items:stretch;flex-direction:column}.checkout-card-main{flex-direction:column}.checkout-time{width:100%;flex-direction:row;justify-content:space-between}.checkout-amount-grid{grid-template-columns:1fr 1fr}.checkout-actions{align-items:stretch;min-width:0}.checkout-actions .na-btn{width:100%}}@media(max-width:520px){.checkout-amount-grid{grid-template-columns:1fr}}

/* ── Pages/ConversationDetail.razor ────────────────────────────────────────────────────────────────────── */
.na-conv-grid-resizable {
    grid-template-columns: var(--conversation-left-width, 280px) minmax(420px, 1fr) var(--conversation-right-width, 300px);
    position: relative;
}

.na-conv-column-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 5;
    cursor: col-resize;
    touch-action: none;
}

.na-conv-column-resizer::after {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 3px;
    width: 2px;
    border-radius: 999px;
    background: transparent;
    transition: background-color .15s ease;
}

.na-conv-column-resizer:hover::after,
.na-conv-column-resizer:focus::after,
.na-conv-column-resizer.is-resizing::after {
    background: #93c5fd;
}

.na-conv-column-resizer-left {
    left: calc(var(--conversation-left-width, 280px) + 4px);
}

.na-conv-column-resizer-right {
    right: calc(var(--conversation-right-width, 300px) + 4px);
}

.na-conv-middle-resizer {
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 10px;
    z-index: 6;
    cursor: row-resize;
    touch-action: none;
}

.na-conv-middle-resizer::after {
    content: "";
    position: absolute;
    right: 45%;
    bottom: 3px;
    left: 45%;
    height: 2px;
    border-radius: 999px;
    background: transparent;
    transition: background-color .15s ease;
}

.na-conv-middle-resizer:hover::after,
.na-conv-middle-resizer:focus::after,
.na-conv-middle-resizer.is-resizing::after {
    background: #93c5fd;
}

@media (max-width: 1180px) {
    .na-conv-grid-resizable {
        grid-template-columns: minmax(210px, 240px) minmax(0, 1fr) minmax(240px, 280px);
    }

    .na-conv-column-resizer {
        display: none;
    }
}

@media (max-width: 900px) {
    .na-conv-grid-resizable {
        grid-template-columns: minmax(0, 1fr);
    }

    .na-conv-middle-resizer {
        display: none;
    }
}

/* ── Pages/CustomerListEdit.razor ──────────────────────────────────────────────────────────────────────── */
.customer-list-editor-page{display:flex;flex-direction:column;gap:18px}
:where(.klantenlijst-bewerken) .na-page-header-back {color:var(--color-fg-0b73ff);text-decoration:none;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.customer-list-editor-fields{display:grid;grid-template-columns:minmax(260px,420px) minmax(320px,560px);gap:20px;align-items:end}
:where(.klantenlijst-bewerken) .required {color:var(--color-fg-red-500)}
.customer-list-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:18px;align-items:start}
.customer-list-import-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:18px;box-shadow:0 12px 30px rgba(15,23,42,.05);display:flex;flex-direction:column;gap:16px}
.customer-list-import-panel h2{margin:0;color:var(--color-text)}
.customer-list-template-link{align-self:flex-start}
.customer-list-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;border:2px dashed var(--color-line-blue-300);border-radius:8px;min-height:220px;padding:24px;background:var(--color-page-bg);cursor:pointer}
.customer-list-drop-zone input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.drop-zone-icon{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#0b73ff;color:var(--color-text-on-primary);font-weight:900;font-size:28px}
.customer-list-drop-zone em{font-style:normal;background:#0b73ff;color:var(--color-text-on-primary);border-radius:8px;padding:10px 18px;font-weight:900}
.customer-list-drop-zone small{color:var(--color-text-muted)}
.customer-list-import-summary{border:1px solid var(--color-line-blue-100);background:var(--color-primary-soft);border-radius:8px;padding:14px}
.customer-list-import-summary h3,.customer-list-import-rules h3{margin:0 0 10px}
.customer-list-import-summary div{display:flex;justify-content:space-between;margin-top:8px}
.customer-list-import-rules{display:grid;gap:8px;color:var(--color-fg-slate-600)}
.customer-list-import-rules p{margin:0}
/* Het importpaneel staat alleen náást de kiezer als de klantentabel daar nog volledig in past
   (±830px). Op alles daaronder gaat het paneel onder de tabel, zodat de kolommen niet in een
   scrollende strook van 700px geperst worden. */
@media(max-width:1600px){.customer-list-editor-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1180px){.customer-list-editor-fields{grid-template-columns:1fr}}
@media(max-width:768px){.customer-list-editor-page{gap:14px}.customer-list-import-panel{padding:14px}}

/* ── Pages/Customers.razor ─────────────────────────────────────────────────────────────────────────────── */
/* De filterrij boven de lijst: één rij die zijwaarts schuift in plaats van af te breken. De
   schuifbalk blijft verborgen — de rij verraadt zichzelf al doordat de laatste knop half
   zichtbaar is. */
.reg-filters {
    display: flex; gap: 8px; margin-bottom: 14px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reg-filters::-webkit-scrollbar { display: none; }
.reg-filters > * { flex: 0 0 auto; }

/* Het aantal hoort bij de knop maar is niet het label; iets zachter zodat het niet meeleest. */
.reg-filter-aantal { opacity: .75; font-weight: 700; margin-left: 2px; }

/* In de werkbalk: geen eigen ondermarge; in het filterblad breken de knoppen gewoon af. */
.na-toolbar-filters .reg-filters { margin-bottom: 0; }
.na-filterbar-blad .reg-filters { flex-wrap: wrap; overflow: visible; }

/* ── Pages/Dashboard.razor ─────────────────────────────────────────────────────────────────────────────── */
/* Kaarten, knoppen, meldingen en lege toestanden komen uit het Design System
   (NaCard, NaButton, NaAlert, NaEmptyState, NaIcon). Wat hieronder overblijft is
   uitsluitend dashboard-eigen: de hero, de betekeniskleuren van de statistieken
   en de opbouw binnen de panelen. */

.dashboard-wrapper { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.dashboard-hero { background: linear-gradient(135deg,var(--color-bg-07051f),var(--color-bg-18104b)); color: var(--color-text-on-primary); border-radius: 28px; padding: 32px; display: flex; justify-content: space-between; align-items: center; min-height: 150px; box-shadow: 0 18px 38px rgba(15,11,52,.18); }
.dashboard-hero h1 { margin: 0; font-size: 30px; }
.dashboard-hero p { margin: 18px 0 0; opacity: .95; }
.dashboard-subtitle { font-size: 12px; letter-spacing: 1px; opacity: .78; margin-bottom: 8px; text-transform: uppercase; }
.dashboard-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dashboard-clock { background: rgba(255,255,255,.09); padding: 16px 22px; border-radius: 18px; font-size: 34px; font-weight: 800; }

/* De hero-achtergrond is donker; de primaire knop krijgt daarop wat meer contrast. */
.dash-hero-button { box-shadow: 0 10px 24px rgba(79,50,230,.25); }

.dash-next-card { overflow: hidden; }
.dash-next-card .na-card-content { padding: 0; }
.dash-next { display: flex; align-items: stretch; min-height: 92px; }
.dash-next-tijd { flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 8px; background: var(--color-ai-bg); color: var(--color-fg-indigo-600); }
.dash-next-tijd b { font-size: 30px; line-height: 1; font-weight: 800; }
.dash-next-tijd span { font-size: 12.5px; font-weight: 600; color: var(--color-fg-violet-700); text-align: center; }
.dash-next-info { flex: 1; min-width: 0; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; }
.dash-next-info .dashboard-subtitle { color: var(--color-text-muted); opacity: 1; margin-bottom: 4px; }
.dash-next-naam { font-size: 19px; font-weight: 800; color: var(--color-text); }
.dash-next-meta { color: var(--color-text-muted); margin-top: 2px; }
.dash-next-pijl { align-self: center; padding-right: 14px; color: #94a3b8; display: inline-flex; }

.dashboard-stats-grid { display: grid; grid-template-columns: repeat(var(--dash-kolommen, 4),minmax(0,1fr)); gap: 18px; }
.dashboard-stats-grid.kolommen-3 { --dash-kolommen: 3; }
.dash-groep { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin: 4px 2px -8px; }
.dash-kpi-link { text-decoration: none; color: inherit; display: block; border-radius: var(--radius-lg, 16px); }
.dash-kpi-link:focus-visible { outline: 2px solid var(--color-primary, var(--color-primary)); outline-offset: 2px; }
.dash-kpi { height: 100%; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dash-kpi-link:hover .dash-kpi { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,23,42,.12); border-color: rgba(37,99,235,.25); }

/* Betekeniskleur per statistiek blijft ongewijzigd; alleen de kaartchrome komt nu
   uit NaCard. */
.dash-kpi.green .na-card-kpi-icon { background:var(--color-success-bg); color:var(--color-fg-green-600); } .dash-kpi.green .na-card-kpi-value { color:var(--color-fg-green-500); }
.dash-kpi.cyan .na-card-kpi-icon { background:var(--color-bg-cyan-100); color:var(--color-fg-cyan-600); } .dash-kpi.cyan .na-card-kpi-value { color:var(--color-fg-cyan-600); }
.dash-kpi.blue .na-card-kpi-icon { background:var(--color-bg-blue-100); color:var(--color-primary); } .dash-kpi.blue .na-card-kpi-value { color:var(--color-fg-blue-500); }
.dash-kpi.purple .na-card-kpi-icon { background:var(--color-bg-purple-100); color:var(--color-fg-purple-700); } .dash-kpi.purple .na-card-kpi-value { color:var(--color-fg-purple-600); }
.dash-kpi.pink .na-card-kpi-icon { background:var(--color-bg-rose-100); color:var(--color-fg-pink-700); } .dash-kpi.pink .na-card-kpi-value { color:var(--color-fg-pink-500); }
.dash-kpi.amber .na-card-kpi-icon { background:var(--color-warning-bg); color:var(--color-fg-amber-600); } .dash-kpi.amber .na-card-kpi-value { color:var(--color-fg-amber-600); }
.dash-kpi.amber.let-op { background:var(--color-bg-amber-50); border-color:#fcd34d; }
.dash-kpi.indigo .na-card-kpi-icon { background:var(--color-bg-indigo-100); color:var(--color-fg-indigo-600); } .dash-kpi.indigo .na-card-kpi-value { color:var(--color-fg-indigo-600); }
.dash-kpi.rood .na-card-kpi-icon { background:var(--color-danger-bg); color:var(--color-fg-red-600); } .dash-kpi.rood .na-card-kpi-value { color:var(--color-fg-red-600); }
/* Er staat iets open (08/10/2026): een rood stipje rechtsboven op de tegel. */
.dash-kpi.let-op-stip { position: relative; }
.dash-kpi.let-op-stip::after { content: ""; position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #dc2626; }

/* Meldingen staan uit: enkel op de gsm, zoals de navigatie onderaan. */
.dash-mld { display: none; align-items: center; gap: 12px; background: var(--color-primary-soft); border: 1px solid var(--color-primary-border); border-radius: 14px; padding: 12px 14px; color: var(--color-fg-blue-900); }
.dash-mld-tekst { flex: 1; min-width: 0; }
.dash-mld-tekst b { display: block; font-size: 14px; }
.dash-mld-tekst span { font-size: 12.5px; color: var(--color-text-muted); }

.dashboard-content-grid { display: grid; grid-template-columns: 1.15fr 2fr; gap: 20px; }
.dash-panel { min-height: 220px; }
/* De snelacties-kaart moet niet de vaste paneelhoogte aanhouden — anders blijft er lege
   ruimte onder de knoppen staan. Ze past zich aan de hoogte van de tegels aan. */
.dash-actions-panel { min-height: 0; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; }
.panel-header h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; }
.panel-header a { text-decoration: none; color: var(--color-fg-indigo-600); font-weight: 700; white-space: nowrap; }
:where(.dashboard-wrapper) .agenda-item { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-line-slate-100); color: inherit; text-decoration: none; }
:where(.dashboard-wrapper) .agenda-item.voorbij { opacity: .55; }
.agenda-hour { font-weight: 800; min-width: 58px; color:var(--color-text-secondary); }
:where(.dashboard-wrapper) .agenda-dot { width: 10px; height: 10px; border-radius: 50%; background:#f59e0b; }
/* Statuskleuren zoals in de agenda (11/09/2026): gepland stond hier oranje, als "in afwachting". */
.agenda-dot.confirmed, .agenda-status.confirmed { background:var(--color-success-bg); color:var(--color-fg-green-700); }
:where(.dashboard-wrapper) .agenda-dot.cancelled, .agenda-status.cancelled, :where(.dashboard-wrapper) .agenda-dot.noshow, .agenda-status.noshow { background:var(--color-danger-bg); color:var(--color-fg-red-700); }
:where(.dashboard-wrapper) .agenda-dot.planned, .agenda-status.planned { background:var(--color-bg-blue-100); color:var(--color-primary-hover); }
:where(.dashboard-wrapper) .agenda-dot.pending, .agenda-status.pending { background:var(--color-warning-bg); color:var(--color-fg-amber-700); }
.agenda-info { display: flex; flex-direction: column; flex: 1; }
/* Enkel de dienstregel, niet de spans van het lampje in de naam. */
.agenda-info > span { color:var(--color-text-muted); margin-top: 3px; }
.agenda-status { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; background:var(--color-warning-bg); color:var(--color-fg-amber-700); }
.trend-graph { height: 120px; position: relative; margin: 20px 0 14px; border-bottom: 1px solid var(--color-border); }
.trend-svg { width: 100%; height: 92px; display: block; overflow: visible; }
.trend-svg-line { fill: none; stroke: var(--color-fg-indigo-600); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trend-svg-dot { fill: var(--color-fg-indigo-600); opacity: .9; }
.trend-empty-line { position:absolute; left:0; right:0; top:52%; height:3px; background:linear-gradient(90deg,#4f46e5,#8b5cf6); border-radius:999px; opacity:.7; }
.trend-empty-text { position:absolute; left:0; right:0; top:12px; text-align:center; color:var(--color-text-muted); font-size:13px; font-weight:700; }
.trend-labels { position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:space-between; color:var(--color-text-muted); font-size:12px; }
.trend-stats { display: grid; grid-template-columns: repeat(3,1fr); text-align: center; gap: 12px; }
.trend-stats strong { display: block; font-size: 28px; color:var(--color-text); }
.trend-stats span { color:var(--color-fg-slate-600); font-size: 13px; }
/* AI Receptionist — voorheen volledig met inline styles opgebouwd; de kaart komt nu
   uit NaCard en alleen de inhoudelijke opbouw staat hier. */
.dash-ai-usage { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.dash-ai-usage-label { color:var(--color-text-secondary); font-weight:700; }
.dash-ai-usage-value { color:var(--color-text-muted); font-size:14px; }
.dash-ai-usage-value strong { color:var(--color-text); }
.dash-ai-bar { height:10px; background:var(--color-surface-secondary); border-radius:999px; overflow:hidden; margin-bottom:4px; }
.dash-ai-bar-fill { height:100%; background:var(--color-primary); }
.dash-ai-bar-fill.over { background:#ef4444; }
.dash-ai-overage { color:var(--color-fg-red-700); font-size:13px; }
.dash-ai-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0; }
.dash-ai-stats > div { background:var(--color-page-bg); border-radius:10px; padding:12px; display:flex; flex-direction:column; }
.dash-ai-stats span { font-size:13px; color:var(--color-text-muted); }
.dash-ai-stats strong { font-size:22px; font-weight:700; }
.dash-ai-list { border-top:1px solid var(--color-line-slate-100); padding-top:8px; }
.dash-ai-list-item { display:flex; align-items:center; gap:10px; padding:8px 0; text-decoration:none; color:inherit; border-top:1px solid var(--color-line-slate-100); }
.dash-ai-list-name { font-weight:600; }
.dash-ai-list-preview { color:var(--color-text-muted); font-size:13px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-ai-list-time { color:#94a3b8; font-size:12px; white-space:nowrap; }

.dashboard-main-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
/* font/appearance:inherit zodat de button-tegel (Afspraak inplannen) de app-font erft i.p.v. het
   browser-standaard Arial 13px, en dus identiek oogt en hovert als de link-tegels. */
.action-tile { display:flex; align-items:center; gap:14px; padding: 14px; border-radius: 18px; text-decoration:none; color:var(--color-text); border:1px solid var(--color-line-slate-100); background:var(--color-surface); cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; text-align:left; font:inherit; -webkit-appearance:none; appearance:none; }
/* background/color expliciet meegeven: de globale button:hover in site.css kleurde de knop-tegel
   ("Afspraak inplannen") bij hover volledig blauw, terwijl de drie link-tegels ernaast enkel
   oplichtten. Zo hoveren alle vier identiek. */
.action-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,23,42,.12); border-color: rgba(37,99,235,.25); background:var(--color-surface); color:var(--color-text); }
.action-tile:focus-visible { outline: 2px solid var(--color-primary, var(--color-primary)); outline-offset: 2px; }
.action-tile span { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.action-tile div { flex:1; display:flex; flex-direction:column; }
.action-tile small { color:var(--color-text-muted); margin-top:3px; }
.action-tile b { color:var(--color-text-muted); display:inline-flex; }
.purple-action span { background:var(--color-bg-purple-100); color:var(--color-fg-violet-700); } .blue-action span { background:var(--color-bg-blue-100); color:var(--color-primary); } .green-action span { background:var(--color-success-bg); color:var(--color-fg-green-600); } .orange-action span { background:var(--color-bg-orange-100); color:var(--color-fg-orange-500); }
.dashboard-login-card { max-width:420px; margin:80px auto; text-align:center; }
@media(max-width: 1200px) { .dashboard-main-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } .dashboard-content-grid { grid-template-columns: 1fr; } }
@media(max-width: 1024px) { .dashboard-stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 760px) { .dashboard-wrapper { padding:12px; }    .dashboard-main-actions { grid-template-columns: 1fr; } .panel-header { flex-direction:column; align-items:flex-start; }  }

/* Smartphone: de hero nam met de grote naam, het klokblok en een volle knop bijna de halve
   schermhoogte in, zodat je moest scrollen voor de eerste echte informatie. Compacter: kleinere
   titel, het uur in de vrije rechterbovenhoek, en de knop over de volle breedte eronder. */
@media(max-width: 760px) {
    .dashboard-hero { flex-direction: column; align-items: flex-start; position: relative; padding: 18px; border-radius: 20px; min-height: 0; gap: 14px; }
    .dashboard-hero h1 { font-size: 22px; line-height: 1.15; padding-right: 74px; }
    .dashboard-hero p { margin: 6px 0 0; font-size: 13.5px; }
    .dashboard-subtitle { margin-bottom: 4px; }

    .dashboard-clock {
        position: absolute;
        top: 16px;
        right: 18px;
        background: transparent;
        padding: 0;
        font-size: 22px;
        line-height: 1;
    }

    .dashboard-hero-actions { align-items: flex-start; width: 100%; }
    .dash-hero-button { width: 100%; justify-content: center; }

    /* Tegels twee per rij en compacter (26/09/2026): één per rij nam bijna twee schermen in. */
    .dashboard-stats-grid { gap: 10px; }
    .dash-groep { margin: 2px 2px -4px; }
    .dash-kpi .na-card-kpi-row { padding: 12px; gap: 10px; align-items: flex-start; }
    .dash-kpi .na-card-kpi-icon { width: 34px; height: 34px; border-radius: 10px; }
    .dash-kpi .na-card-kpi-icon svg { width: 18px; height: 18px; }
    .dash-kpi .na-card-kpi-value { font-size: 22px; }
    .dash-kpi .na-card-kpi-label { font-size: 12.5px; line-height: 1.25; }
    .dash-kpi .na-card-kpi-meta { font-size: 11.5px; }

    .dash-next { min-height: 78px; }
    .dash-next-tijd { flex-basis: 96px; }
    .dash-next-tijd b { font-size: 24px; }
    .dash-next-tijd span { font-size: 11.5px; }
    .dash-next-info { padding: 11px 12px; }
    .dash-next-naam { font-size: 16px; }
    .dash-next-meta { font-size: 12.5px; }
}

/* Op de gsm (waar de navigatie onderaan staat): de meldingenbalk tonen, en "Afspraak inplannen" zit in de ＋
   onderaan, dus niet nog eens in de hero (26/09/2026). */
@media(max-width: 900px) {
    .dash-mld { display: flex; }
    .dashboard-hero .dash-hero-button { display: none; }
    .dashboard-hero { min-height: 0; }
}

/* ── Pages/KlantRegistratieDetail.razor ────────────────────────────────────────────────────────────────── */
/* Eén registratie, met de knoppen om te beslissen.

    Volledige pagina en niet een popup boven de lijst: hier staat wat iemand over zichzelf invulde en
    wordt beslist of hij klant wordt. Dat verdient een scherm, geen venstertje. */
/* Leesvelden in twee kolommen: label klein en gedempt, waarde eronder. Zonder deze opmaak staat
   alles onder elkaar en lees je labels en waarden als één lange lijst. */
.reg-kaart-hint { color: var(--color-text-muted); font-size: 12.5px; line-height: 1.5; margin: -4px 0 16px; }
.reg-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.reg-veld-breed { grid-column: 1 / -1; }
.reg-velden label {
    display: block; font-size: 11.5px; font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px;
}
.reg-veld-waarde { font-size: 14px; color: var(--color-text); }

/* Label boven het veld, niet ernaast: een reden typ je in een vlak dat breed genoeg is. */
.reg-notitie label {
    display: block; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px;
}
.reg-notitie textarea {
    width: 100%; box-sizing: border-box; padding: 9px 12px; font: inherit;
    border: 1px solid var(--color-border-strong); border-radius: 8px; resize: vertical;
}

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

/* ── Pages/KoppelingNieuw.razor ────────────────────────────────────────────────────────────────────────── */
.koppeling-soort { display: block; width: 100%; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; font-family: inherit; }
.koppeling-soort:hover { border-color: var(--color-primary); background: var(--color-page-bg); }
.koppeling-soort-later { background: var(--color-page-bg); border-style: dashed; cursor: default; }
.koppeling-soort-later:hover { border-color: var(--color-border-strong); background: var(--color-page-bg); }
.koppeling-soort-naam { display: block; font-size: 15px; font-weight: 700; color: var(--color-text); }
.koppeling-soort-uitleg { display: block; font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }

/* ── Pages/MarketingTegoedKopen.razor ──────────────────────────────────────────────────────────────────── */
.tegoed-saldo { font-size: 14px; color: var(--color-text-secondary, var(--color-text-secondary)); margin: 0 0 16px; }
.tegoed-saldo b { font-size: 18px; color: var(--color-text, var(--color-text)); }
.tegoed-bij { color: var(--color-text-muted, #94a3b8); margin-left: 10px; }
.tegoed-pakketten { display: flex; flex-direction: column; gap: 9px; }
/* De kleur staat er expliciet bij: als knopelement erfde deze rij de tekstkleur van de knopstijl —
   wit op wit, waardoor het aantal en de prijs onzichtbaar waren en alleen de grijze regel
   "€ x per bericht" overbleef. */
.tegoed-pakket { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
                 border: 1px solid var(--color-border, var(--color-line-gray-200)); border-radius: 11px; padding: 12px 14px;
                 background: var(--color-surface, var(--color-surface)); font: inherit; color: var(--color-text, var(--color-text)); }
.tegoed-pakket.gekozen { border-color: var(--color-primary, var(--color-primary)); background: var(--color-bg-indigo-50); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.tegoed-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-border-strong); flex-shrink: 0; }
.tegoed-pakket.gekozen .tegoed-radio { border-color: var(--color-primary, var(--color-primary));
                                       background: radial-gradient(circle, var(--color-surface) 0 2.5px, var(--color-primary, var(--color-primary)) 3px 100%); }
.tegoed-aantal { font-weight: 700; font-size: 14px; flex: 1; }
.tegoed-aantal small { display: block; font-weight: 400; color: var(--color-text-muted, var(--color-text-muted)); font-size: 11.5px; margin-top: 1px; }
.tegoed-prijs { font-weight: 800; font-size: 15px; }
.tegoed-historiek { margin-top: 20px; }
.tegoed-af { color: var(--color-fg-red-700); font-weight: 700; }
.tegoed-bij-kleur { color: var(--color-fg-green-700); font-weight: 700; }

/* ── Pages/MarketingTegoedResultaat.razor ──────────────────────────────────────────────────────────────── */
.tegoedres-shell { display: flex; justify-content: center; padding: 34px 18px; }
.tegoedres-kaart { width: 100%; max-width: 440px; background: var(--color-surface, var(--color-surface)); border-radius: 18px;
                   box-shadow: 0 10px 26px rgba(15,23,42,.10); padding: 26px 22px 22px; text-align: center; }
.tegoedres-kaart h1 { margin: 0 0 18px; font-size: 19px; font-weight: 800; letter-spacing: -.2px; }

.tegoedres-bol { width: 74px; height: 74px; border-radius: 50%; margin: 2px auto 16px;
                 display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; }
.tegoedres-bol.ok { background: var(--color-bg-green-50); color: var(--color-fg-green-600); }
.tegoedres-bol.wacht { background: var(--color-bg-amber-50); color: var(--color-fg-amber-700); }
.tegoedres-bol.neutraal { background: var(--color-surface-secondary); color: #94a3b8; }

.tegoedres-saldo { display: flex; gap: 10px; justify-content: center; align-items: center;
                   font-size: 13px; color: var(--color-text-muted, var(--color-text-muted)); margin-bottom: 16px; }
.tegoedres-saldo .oud { text-decoration: line-through; }
.tegoedres-saldo .pijl { color: #cbd5e1; font-weight: 800; }
.tegoedres-saldo .nieuw { font-weight: 800; color: var(--color-text, var(--color-text)); font-size: 15px; }

.tegoedres-lijst { border: 1px solid var(--color-border, var(--color-line-gray-200)); border-radius: 12px; overflow: hidden;
                   margin-bottom: 16px; text-align: left; }
.tegoedres-lijst .rij { display: flex; justify-content: space-between; align-items: center; gap: 12px;
                        padding: 11px 14px; border-bottom: 1px solid var(--color-border, var(--color-line-gray-200));
                        background: var(--color-page-bg, var(--color-page-bg)); }
.tegoedres-lijst .rij:last-child { border-bottom: 0; }
.tegoedres-lijst .label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
                          color: var(--color-text-muted, #94a3b8); }
.tegoedres-lijst .waarde { font-size: 13.5px; font-weight: 700; text-align: right; }
.tegoedres-lijst .waarde.groot { font-size: 16px; color: var(--color-fg-green-600); }

.tegoedres-tekst { color: var(--color-text-secondary, var(--color-text-muted)); font-size: 13px; line-height: 1.55; margin: 0 0 18px; }
.tegoedres-acties { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ── Pages/MededelingEdit.razor ────────────────────────────────────────────────────────────────────────── */
/* De gedeelde form-group zet het label in een smalle kolom links; met uitleg van twee zinnen
   breekt die kolom in vier woorden per regel. Op dit scherm staat alles onder elkaar. */
.med-form .form-group {
    display: block;
    max-width: 640px;
    margin-bottom: 16px;
}

.med-form .form-group > label {
    display: block;
    margin-bottom: 5px;
    font-weight: 650;
}

.med-form .form-hint {
    max-width: 640px;
    margin: 5px 0 0;
    line-height: 1.45;
}

.med-form .settings-two-columns {
    grid-template-columns: 1fr 1fr;
    max-width: 420px;
}

.med-form .settings-card {
    margin-bottom: 14px;
}

/* ── Pages/Meldingen.razor ─────────────────────────────────────────────────────────────────────────────── */
.mld { max-width: 760px; }
.mld-muted { color: var(--color-text-muted, var(--color-text-muted)); font-size: 13px; margin: 8px 0 0; }
.mld-status { margin: 0 0 10px; font-weight: 600; }
.mld-status.mld-aan { color: var(--color-fg-green-700); }
.mld-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.mld-installeren { margin-top: 12px; }
.mld-beheer { display: inline-block; margin-top: 6px; font-weight: 600; }
.mld-stil input[type="time"] { border: 1px solid var(--color-border); border-radius: 10px; padding: 7px 10px; font: inherit; }

/* ── Pages/NewEmail.razor ──────────────────────────────────────────────────────────────────────────────── */
.new-email-page {
    height: calc(100vh - var(--app-header-height, 72px));
    overflow: hidden;
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
}

.new-email-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 16px;
}

.new-email-title-row h1 {
    margin: 0;
    font-size: 1.5rem;
}

.new-email-grid {
    display: grid;
    grid-template-columns: minmax(620px, 1fr) 292px;
    gap: 16px;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Met gesprekscontext komt er links een berichtenkolom bij. */
.new-email-grid-with-thread {
    grid-template-columns: 250px minmax(500px, 1fr) 292px;
}

.new-email-thread {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--color-line-dbe5f1);
    border-radius: 14px;
    background: var(--color-surface);
    padding: 14px;
}

    .new-email-thread h3 {
        margin: 0 0 10px;
        font-size: 15px;
    }

.new-email-thread-row {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-line-slate-100);
    margin-bottom: 8px;
    background: var(--color-page-bg);
    cursor: pointer;
}

    .new-email-thread-row:hover {
        border-color: var(--color-line-c7d7ec);
    }

    .new-email-thread-row.outbound {
        background: var(--color-primary-soft);
    }

    /* De rij die op dit moment in het midden getoond wordt. */
    .new-email-thread-row.active {
        border-color: var(--color-primary);
        background: var(--color-bg-indigo-50);
        box-shadow: 0 0 0 1px #2563eb;
    }

/* Het eigen concept staat bovenaan de kolom en is geel, zodat het meteen te onderscheiden is
   van de echte verzonden en ontvangen mails eronder. */
.new-email-thread-draft {
    background: var(--color-bg-yellow-50);
    border-color: #fde047;
}

    .new-email-thread-draft.active {
        background: var(--color-bg-yellow-100);
        border-color: #ca8a04;
        box-shadow: 0 0 0 1px #ca8a04;
    }

.new-email-draft-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-fg-yellow-800);
    background: #fef08a;
    border-radius: 4px;
    padding: 1px 6px;
    margin-bottom: 4px;
}

.new-email-thread-split {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 10px 0;
}

.new-email-thread-top {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 13px;
}

    .new-email-thread-top span {
        font-size: 11px;
        color: #94a3b8;
        white-space: nowrap;
    }

.new-email-thread-snippet {
    font-size: 12px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ── Gekozen mail boven het concept ─────────────────────────────────────────────── */
.new-email-read-card {
    border: 1px solid var(--color-line-dbe5f1);
    border-radius: 14px;
    background: var(--color-surface);
    margin-bottom: 16px;
    overflow: hidden;
}

.new-email-read-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}

.new-email-read-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #64748b;
    color: var(--color-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

    .new-email-read-avatar.outbound {
        background: var(--color-primary);
    }

.new-email-read-meta {
    flex: 1;
    min-width: 0;
}

.new-email-read-title {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 15px;
}

.new-email-read-subject {
    font-size: 14px;
    color: var(--color-fg-slate-600);
}

.new-email-read-to {
    display: block;
    font-size: 12.5px;
    color: #94a3b8;
    margin-top: 3px;
}

.new-email-read-utils {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.new-email-read-time {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
}

.new-email-read-close {
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

    .new-email-read-close:hover {
        color: var(--color-fg-slate-600);
    }

.new-email-read-details {
    padding: 12px 16px 0;
    font-size: 12.5px;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.new-email-read-body {
    padding: 12px 16px 16px;
}

.new-email-read-frame {
    width: 100%;
    min-height: 220px;
    max-height: 420px;
    border: 0;
}

.new-email-read-plain {
    white-space: pre-wrap;
    font-size: 14.5px;
    line-height: 1.65;
}

.new-email-read-note {
    color: var(--color-text-muted);
    margin: 0;
}

.new-email-read-error {
    color: var(--color-fg-red-600);
    margin: 0;
}

.new-email-compose {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--color-line-dbe5f1);
    border-radius: 14px;
    background: var(--color-surface);
}

.new-email-compose .email-compose-page {
    min-height: 100%;
    gap: 0;
}

.new-email-compose .email-compose-header {
    position: sticky;
    z-index: 3;
    top: 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 14px 16px;
}

/* Staat er een mail open, dan is de middenkolom geen enkele kaart meer maar een doorlopende
   kolom met twee kaarten: de gelezen mail en daaronder het concept. De opstelkop mag dan niet
   meer plakken, anders zweeft die over het bericht heen tijdens het scrollen. */
.new-email-compose.has-read {
    border: 0;
    background: transparent;
    border-radius: 0;
}

    .new-email-compose.has-read .email-compose-page {
        min-height: 0;
        border: 1px solid var(--color-line-dbe5f1);
        border-radius: 14px;
        background: var(--color-surface);
    }

    .new-email-compose.has-read .email-compose-header {
        position: static;
        border-radius: 14px 14px 0 0;
    }

.new-email-compose .email-compose-body {
    gap: 12px;
    padding: 12px;
}

.new-email-compose .email-compose-editor .tox-tinymce {
    min-height: 260px;
}

.new-email-account-select {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0;
}

/* Opdrachtveld onder de gedeelde AI-balk (enkel op het opstelscherm). */
.new-email-ai-prompt {
    margin: 10px 0 0;
    border: 1px solid var(--color-primary-border);
    border-radius: 10px;
    background: var(--color-primary-soft);
    padding: 10px 12px;
}

.new-email-ai-prompt-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-fg-blue-800);
    margin-bottom: 5px;
}

.new-email-ai-prompt textarea {
    width: 100%;
    border: 1px solid var(--color-primary-border);
    border-radius: 8px;
    padding: 9px 11px;
    font: inherit;
    font-size: 13.5px;
    resize: vertical;
}

.new-email-translated-subject {
    margin: 10px 0 0;
    padding: 9px 12px;
    border: 1px solid var(--color-primary-border);
    border-radius: 9px;
    background: var(--color-primary-soft);
    font-size: 13px;
}

.new-email-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
}

.new-email-side-card {
    border: 1px solid var(--color-line-dbe5f1);
    border-radius: 14px;
    padding: 14px;
    background: var(--color-surface);
}

.new-email-side-card h2 {
    margin: 0;
    font-size: 16px;
}

.new-email-side-section {
    padding-top: 14px;
}

.new-email-side-section + .new-email-side-section {
    margin-top: 14px;
    border-top: 1px solid var(--color-border);
}

.new-email-side-card h3 {
    margin: 0 0 7px;
    font-size: 14px;
}

.new-email-side-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.new-email-side-card select {
    width: 100%;
}

.new-email-side-list {
    display: grid;
    gap: 7px;
    margin-bottom: 9px;
}

.new-email-side-entry {
    padding: 7px 0;
    border-bottom: 1px solid var(--color-line-slate-100);
    font-size: 13px;
    white-space: pre-wrap;
}

.new-email-customer-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
}

.new-email-customer-search {
    display: grid;
    gap: 9px;
}

.new-email-customer-results {
    display: grid;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.new-email-customer-result {
    display: grid;
    gap: 1px;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    padding: 8px 10px;
    background: var(--color-surface);
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.new-email-customer-result:hover,
.new-email-customer-result:focus-visible {
    border-color: var(--color-line-93b4f8);
    background: var(--color-primary-soft);
}

.new-email-customer-result-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-fg-172033);
}

.new-email-customer-result-email {
    overflow: hidden;
    font-size: 12px;
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.new-email-customer-hint {
    margin: 0;
}

.new-email-inline-add {
    display: flex;
    gap: 7px;
    margin-top: 9px;
}

.new-email-inline-add input {
    min-width: 0;
    flex: 1;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    padding: 8px 9px;
    font: inherit;
}

@media (max-width: 1100px) {
    .new-email-page {
        height: auto;
        overflow: visible;
    }

    .new-email-grid,
    .new-email-grid-with-thread {
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
    }

    .new-email-compose,
    .new-email-thread,
    .new-email-side {
        overflow: visible;
    }

    .new-email-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .new-email-page {
        padding: 8px 4px 16px;
    }

    .new-email-title-row h1 {
        font-size: 1.25rem;
    }

    .new-email-compose {
        padding: 8px;
    }

    .new-email-side {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Pages/PijplijnEdit.razor ──────────────────────────────────────────────────────────────────────────── */
/* Pijplijnpagina (08/10/2026): tabs per onderdeel en één kaart met rijen — titel en uitleg links, het veld rechts;
   op de gsm onder elkaar met de herkomst rechts naast de titel. */
.pijplijn-page.list-page-shell {
    width: 100%;
    max-width: 960px;
    padding-bottom: 56px;
}

.pijplijn-page .pijplijn-subtitle { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; }
.pijplijn-page .pijplijn-alert { margin-bottom: 12px; }
.pijplijn-page .pijplijn-tabs { margin-bottom: 14px; }

.pijplijn-page .pijplijn-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12.5px;
}

.pijplijn-page .pijplijn-flow .ai-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-bg-indigo-50);
    color: var(--color-fg-indigo-800);
    font-weight: 600;
}

.pijplijn-page .pijplijn-kaart {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}

.pijplijn-page .pijplijn-rij {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 24px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-line-slate-100);
}

.pijplijn-page .pijplijn-rij:first-child { border-top: 0; }

.pijplijn-page .pijplijn-rij-kop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.pijplijn-page .pijplijn-rij-kop b { font-size: 15px; color: var(--color-text); }
.pijplijn-page .pijplijn-uitleg { font-size: 12.5px; line-height: 1.4; color: var(--color-text-muted); }

.pijplijn-page .pijplijn-badge {
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--color-bg-indigo-50);
    color: var(--color-fg-indigo-800);
}

.pijplijn-page .pijplijn-badge.is-eigen { background: var(--color-success-bg); color: var(--color-success-text); }
.pijplijn-page .pijplijn-badge.is-erft { background: var(--color-surface-secondary); color: var(--color-text-muted); }
.pijplijn-page .pijplijn-badge.is-brein { background: var(--color-warning-bg); color: var(--color-warning-text); }

.pijplijn-page .pijplijn-rij-veld { display: grid; gap: 8px; min-width: 0; align-content: start; }

.pijplijn-page .pijplijn-lijn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pijplijn-page .pijplijn-lijn > :first-child { flex: 1 1 auto; min-width: 0; }
.pijplijn-page .pijplijn-lijn > .na-btn { flex: 0 0 auto; }

.pijplijn-page .pijplijn-motoren { font-size: 14px; color: var(--color-text); }

.pijplijn-page .pijplijn-getal { width: 120px; min-height: 40px; }
.pijplijn-page .pijplijn-rij-veld textarea { width: 100%; box-sizing: border-box; }

.pijplijn-page .pijplijn-denkstand { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pijplijn-page .pijplijn-denkstand label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
/* Op de gsm schuift de rij binnen de kaart, zoals elke tabbalk, in plaats van de kaart te verbreden. */
.pijplijn-page .pijplijn-denkstand .na-tabs { width: 100%; }

.pijplijn-page .pijplijn-rij .form-hint { margin: 0; font-size: 12.5px; line-height: 1.45; }

@media (max-width: 900px) {
    .pijplijn-page.list-page-shell { max-width: none; padding-bottom: 40px; }

    .pijplijn-page .pijplijn-rij { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }

    /* Titel links, herkomst rechts; de uitleg op een eigen regel eronder. */
    .pijplijn-page .pijplijn-rij-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; }
    .pijplijn-page .pijplijn-rij-kop b { grid-column: 1; grid-row: 1; }
    .pijplijn-page .pijplijn-rij-kop .pijplijn-badge { grid-column: 2; grid-row: 1; margin-top: 0; align-self: center; }
    .pijplijn-page .pijplijn-rij-kop .pijplijn-uitleg { grid-column: 1 / -1; grid-row: 2; }

    .pijplijn-page .pijplijn-flow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .pijplijn-page .pijplijn-flow .ai-pill { white-space: nowrap; }
}

/* Kop op één rij: titel links, Annuleren en Opslaan rechts — de detailkop zet ze op een smalle gsm anders onder
   de titel, en dat kost een volle regel. */
@media (max-width: 640px) {
    .pijplijn-page .na-detail-header-row { flex-wrap: nowrap; align-items: center; }
    /* site.css zet elke titel in een lijstpagina op 30px !important; naast twee knoppen past dat niet. */
    .pijplijn-page .na-detail-title-row h1 { font-size: 22px !important; line-height: 1.2; }
    .pijplijn-page .na-detail-actions { width: auto; flex-wrap: nowrap; gap: 6px; }
    .pijplijn-page .na-detail-actions .na-btn { min-height: 36px; padding-left: 10px; padding-right: 10px; }
}

/* ── Pages/Resources.razor ─────────────────────────────────────────────────────────────────────────────── */
/* Diensten-tab in de medewerker-editor: aanvinkbare dienstenlijst. */
.resource-service-list { display: flex; flex-direction: column; gap: 8px; }
.resource-service-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-line-gray-200); border-radius: 8px; cursor: pointer; }
.resource-service-row:hover { background: var(--color-page-bg); }
.resource-service-row input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; cursor: pointer; }
.resource-service-name { font-weight: 700; color: var(--color-text); flex: 1; min-width: 0; }
.resource-service-duration { color: var(--color-text-muted); font-size: .85rem; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }

/* ── Pages/Services.razor ──────────────────────────────────────────────────────────────────────────────── */
/* Volledige-pagina bewerkweergave voor 'Dienst bewerken/toevoegen' (i.p.v. modal). */
.na-services-editor-panel { background: var(--color-surface, var(--color-surface)); border: 1px solid var(--color-border, var(--color-line-gray-200)); border-radius: 12px; padding: 20px; max-width: 780px; }
.na-services-editor-panel .resource-modal-tabs { margin-top: 0; }
/* Gsm en tablet (28/09/2026): geen kaart rond het formulier, de velden krijgen de volle breedte. */
@media (max-width: 900px) {
    .na-services-editor-panel { background: transparent; border: 0; border-radius: 0; padding: 0; }
}
:where(.diensten-pagina) .service-category-add-row { align-items: end; }
:where(.diensten-pagina) .service-category-add-button { flex-shrink: 0; }
:where(.diensten-pagina) .service-category-list { display: flex; flex-direction: column; gap: 6px; }
:where(.diensten-pagina) .service-category-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--color-border, var(--color-line-gray-200)); border-radius: 10px; background: var(--color-surface, var(--color-surface)); }
:where(.diensten-pagina) .service-category-row.inactive .service-category-name { opacity: .55; }
:where(.diensten-pagina) .service-category-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
:where(.diensten-pagina) .service-category-row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
:where(.diensten-pagina) .service-category-rename-input { flex: 1; min-width: 0; }
:where(.diensten-pagina) .service-order-group { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
:where(.diensten-pagina) .service-order-empty { margin: 0 0 4px; }

/* Taalknoppen boven naam en omschrijving; zelfde vorm als de taalkeuze bij FAQ-artikelen. */
.svc-lang-hint { margin: 0 0 12px; font-size: 13px; color: var(--color-text-muted, var(--color-text-muted)); }
/* Korte getallen (duur en prijs, personen van en tot) blijven ook op de gsm naast elkaar. */
.na-services-editor-panel .na-services-form-row { grid-template-columns: 1fr 1fr; }
:where(.diensten-pagina) .svc-lang-origineel { margin: -8px 0 14px; font-size: .82rem; color: #94a3b8; overflow-wrap: anywhere; }
:where(.diensten-pagina) .svc-lang-origineel b { color: var(--color-text-muted); font-weight: 600; }

/* ── Pages/Statistics.razor ────────────────────────────────────────────────────────────────────────────── */
.statistics-wrapper { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.statistics-kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.statistics-kpi-card, .statistics-panel, :where(.statistics-wrapper) .mini-stat, .statistics-login-card, .statistics-loading-card { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 2px 14px rgba(15,23,42,.07); }
.statistics-kpi-card { border-radius: 22px; padding: 22px; display: flex; gap: 18px; align-items: center; min-height: 112px; }
.statistics-kpi-card span { color: var(--color-fg-slate-800); font-weight: 700; font-size: 14px; }
.statistics-kpi-card strong { display: block; margin-top: 10px; font-size: 29px; line-height: 1.05; color: var(--color-text); }
.statistics-kpi-card small { display: block; margin-top: 10px; color: var(--color-text-muted); }
.statistics-icon { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px; flex: 0 0 auto; }
.purple-card .statistics-icon { background: var(--color-ai-bg); color: var(--color-fg-violet-700); }
.green-card .statistics-icon { background: var(--color-success-bg); color: var(--color-fg-green-600); }
.blue-card .statistics-icon { background: var(--color-bg-blue-100); color: var(--color-primary); }
.orange-card .statistics-icon { background: var(--color-bg-orange-100); color: var(--color-fg-orange-500); }
.statistics-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.statistics-bottom-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 18px; }
.statistics-panel { border-radius: 22px; padding: 20px; overflow: hidden; }
.big-panel { min-height: 340px; }
.colorful-panel { min-height: 310px; }
.statistics-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.statistics-panel-header h3 { margin: 0; font-size: 18px; color: var(--color-text); display: flex; align-items: center; gap: 10px; }
.info-dot { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); color: var(--color-text-muted); font-weight: 800; font-size: 13px; }
.statistics-line-chart { width: 100%; height: 255px; display: block; }
.chart-grid-line { stroke: #e5e7eb; stroke-width: 1; }
.line-chart-area { fill: rgba(124,58,237,.08); stroke: transparent; }
.line-chart-line { fill: none; stroke: #714bff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.line-chart-dot { fill: #714bff; stroke: var(--color-text-on-primary); stroke-width: 2; }
.chart-axis-labels { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: 13px; padding: 4px 8px 0; }
.chart-toggle { display: flex; gap: 6px; background: var(--color-page-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 4px; }
.chart-toggle button { border: 0; background: transparent; border-radius: 8px; padding: 8px 14px; font-weight: 800; cursor: pointer; color: var(--color-text-secondary); }
.chart-toggle button.active { background: linear-gradient(135deg,#7c3aed,#5b42ff); color: var(--color-text-on-primary); }
:where(.statistics-wrapper) .bar-chart { display: flex; align-items: end; gap: 11px; height: 260px; padding-top: 12px; }
.bar-item { height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 8px; min-width: 0; }
.bar-value { font-size: 11px; font-weight: 800; color: var(--color-fg-slate-600); height: 14px; }
.bar-track { width: 64%; height: 205px; border-radius: 12px 12px 4px 4px; background: var(--color-surface-secondary); display: flex; align-items: end; overflow: hidden; }
.bar-fill { width: 100%; border-radius: 12px 12px 4px 4px; min-height: 6px; }
.purple-gradient { background: linear-gradient(180deg,#8b5cf6,#5b42ff); }
.bar-item span { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.mini-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.purple-mini { background: var(--color-ai-bg); color: var(--color-fg-violet-700); }
.green-mini { background: var(--color-success-bg); color: var(--color-fg-green-600); }
.blue-mini { background: var(--color-bg-blue-100); color: var(--color-primary); }
.service-table-head { display: grid; grid-template-columns: 1.5fr .9fr .8fr; color: var(--color-fg-slate-600); font-size: 13px; font-weight: 800; padding: 8px 0 12px; border-bottom: 1px solid var(--color-line-gray-200); }
.service-row { display: grid; grid-template-columns: 1.5fr .9fr .8fr; gap: 8px; padding: 12px 0; text-decoration: none; color: var(--color-text); position: relative; }
.service-row strong, .service-row em { font-style: normal; font-weight: 800; text-align: right; }
.service-progress { grid-column: 1 / 4; height: 6px; border-radius: 999px; background: var(--color-surface-secondary); overflow: hidden; }
.service-progress div { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#7c3aed,#5b42ff); }
.peak-list { display: flex; flex-direction: column; gap: 9px; }
.peak-row { display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; gap: 10px; font-size: 13px; }
.peak-bar { height: 10px; background: var(--color-surface-secondary); border-radius: 999px; overflow: hidden; }
.peak-bar div { height: 100%; border-radius: 999px; }
.peak-low, :where(.statistics-wrapper) .low { background: #4ade80; }
.peak-medium, :where(.statistics-wrapper) .medium { background: #facc15; }
.peak-high, :where(.statistics-wrapper) .high { background: #ef4444; }
.peak-row strong { text-align: right; }
.peak-legend { display: flex; gap: 18px; justify-content: center; margin-top: 16px; font-size: 12px; color: var(--color-fg-slate-600); }
.peak-legend span { display: flex; align-items: center; gap: 6px; }
.peak-legend i { width: 22px; height: 8px; border-radius: 999px; display: inline-block; }
.weekday-chart { display: flex; align-items: end; gap: 16px; height: 205px; padding: 12px 2px 0; }
.weekday-item { flex: 1; display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: end; gap: 7px; }
.weekday-item strong { font-size: 13px; color: var(--color-text); }
.weekday-track { width: 32px; height: 142px; background: var(--color-primary-soft); border-radius: 12px 12px 4px 4px; display: flex; align-items: end; overflow: hidden; }
.weekday-fill { width: 100%; background: linear-gradient(180deg,#60a5fa,var(--color-primary)); border-radius: 12px 12px 4px 4px; min-height: 5px; }
.weekday-item span { font-size: 12px; color: var(--color-fg-slate-600); }
.insight-card { margin-top: 14px; border-radius: 15px; padding: 12px 14px; background: linear-gradient(90deg,var(--color-primary-soft),var(--color-page-bg)); color: var(--color-text-secondary); font-size: 13px; }
.statistics-extra-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
:where(.statistics-wrapper) .mini-stat { border-radius: 18px; padding: 16px; display: flex; gap: 12px; align-items: center; min-height: 78px; }
:where(.statistics-wrapper) .mini-stat span { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 23px; }
:where(.statistics-wrapper) .mini-stat strong { display: block; font-size: 24px; color: var(--color-text); line-height: 1; }
:where(.statistics-wrapper) .mini-stat small { color: var(--color-text-muted); font-weight: 700; }
.yellow-extra { background: linear-gradient(135deg,var(--color-surface),var(--color-bg-amber-50)); } .yellow-extra span { background:var(--color-warning-bg); }
.red-extra { background: linear-gradient(135deg,var(--color-surface),var(--color-bg-rose-50)); } .red-extra span { background:var(--color-bg-rose-100); color:var(--color-fg-rose-600); }
.orange-extra { background: linear-gradient(135deg,var(--color-surface),var(--color-bg-orange-50)); } .orange-extra span { background:var(--color-bg-orange-100); color:var(--color-fg-orange-500); }
.teal-extra { background: linear-gradient(135deg,var(--color-surface),var(--color-bg-cyan-50)); } .teal-extra span { background:var(--color-bg-teal-100); color:var(--color-fg-teal-700); }
.blue-extra { background: linear-gradient(135deg,var(--color-surface),var(--color-primary-soft)); } .blue-extra span { background:var(--color-bg-blue-100); color:var(--color-primary); }
.statistics-empty { height: 220px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); background: var(--color-page-bg); border-radius: 16px; }
.statistics-footnote { text-align: center; color: var(--color-text-muted); font-size: 13px; padding: 4px 0 14px; }
.statistics-login-card, .statistics-loading-card { border-radius: 22px; padding: 30px; margin: 20px; }
.statistics-primary-btn { display: inline-flex; margin-top: 8px; padding: 11px 16px; border-radius: 12px; color: var(--color-text-on-primary); background: #5b42ff; text-decoration: none; font-weight: 800; }

.filter-box-title { color: var(--color-text); font-weight: 800; margin-bottom: 2px; }
.filter-periode-eigen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border: 1px dashed var(--color-border); border-radius: 12px; color: var(--color-text-muted); font-size: 13px; font-weight: 700; }
.filter-periode-eigen.actief { border-style: solid; border-color: var(--color-line-blue-300); background: var(--color-primary-soft); }
.filter-periode-eigen label { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); }
.filter-periode-eigen input { height: 36px; border: 1px solid var(--color-border); border-radius: 10px; padding: 0 10px; background: var(--color-surface); color: var(--color-text); font-weight: 650; }
.export-modal-intro { margin: 0 0 12px; color: var(--color-fg-slate-600); font-weight: 650; line-height: 1.45; }
.export-active-filter { color: var(--color-text); font-weight: 900; background: var(--color-page-bg); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; line-height: 1.4; }
.export-choice-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.export-choice-card { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 58px 1fr; gap: 4px 14px; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.export-choice-card:hover { transform: translateY(-1px); border-color: var(--color-primary-border); box-shadow: 0 12px 28px rgba(15,23,42,.10); }
.export-choice-icon { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg,var(--color-bg-indigo-50),var(--color-bg-blue-100)); color: var(--color-primary-hover); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; }
.export-choice-card strong { color: var(--color-text); font-size: 16px; }
.export-choice-card small { color: var(--color-text-muted); font-weight: 650; line-height: 1.35; }
@media (max-width: 1180px) { .statistics-kpi-grid, .statistics-extra-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .statistics-main-grid, .statistics-bottom-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .filter-periode-eigen label { flex: 1 1 100%; justify-content: space-between; } .statistics-wrapper { padding: 14px; } .statistics-kpi-grid, .statistics-extra-grid { grid-template-columns: 1fr; } .statistics-kpi-card { align-items: flex-start; } :where(.statistics-wrapper) .bar-chart { overflow-x: auto; } .bar-item { min-width: 54px; } .service-table-head, .service-row { grid-template-columns: 1fr auto; } .service-table-head span:last-child, .service-row em { display: none; } .service-progress { grid-column: 1 / 3; } }
/* Filter (28/09/2026): dezelfde knop als op elke pagina, rechtsboven naast Exporteren (08/10/2026). */
.statistics-filterknop { display: inline-flex; height: 40px; }
.filter-knoppen { display: flex; flex-direction: column; gap: 8px; }
.filter-knoppen .filter-box-title { margin-top: 6px; }
.filter-knoppen .na-tabs-filter { margin-bottom: 0; }

/* ── Pages/StemmenBeheren.razor ────────────────────────────────────────────────────────────────────────── */
/* Op een gsm past een tabel met drie keuzelijsten niet: de stem viel buiten beeld. Daar wordt elke
   taal een eigen blok — taal en proefknop bovenaan, motor en stem eronder over de volle breedte. */
.stm textarea, .stm-tabel select, .stm-tabel input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--color-line-gray-200); border-radius: 10px; background: var(--color-surface); font-family: inherit; font-size: 14px; }
.stm textarea { resize: vertical; line-height: 1.45; }
@media (max-width: 720px) {
    .stm-tabel, .stm-tabel tbody { display: block; }
    .stm-tabel thead { display: none; }
    .stm-tabel tr { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--color-line-gray-200); }
    .stm-tabel tbody tr:first-child { padding-top: 0; }
    .stm-tabel tbody tr:last-child { border-bottom: none; padding-bottom: 0; }
    .stm-tabel td { display: block; padding: 0; border: none; }
    .stm-tabel td.stm-taal { grid-column: 1; grid-row: 1; align-self: center; }
    .stm-tabel td.stm-proef { grid-column: 2; grid-row: 1; }
    .stm-tabel td.stm-motor, .stm-tabel td.stm-stem { grid-column: 1 / -1; }
    .stm-tabel td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
}

/* ── Pages/Subscription.razor ──────────────────────────────────────────────────────────────────────────── */
.subscription-page{display:flex;flex-direction:column;gap:24px}.subscription-hero,.subscription-grid,.plans-grid{display:grid;gap:20px}.subscription-hero{grid-template-columns:1fr auto;align-items:center;background:var(--color-surface);padding:24px;border-radius:20px;box-shadow:0 4px 18px rgba(0,0,0,.06);border:1px solid var(--color-line-gray-200)}.subscription-hero h1{margin:0 0 6px}.subscription-hero p{margin:0;color:var(--color-fg-gray-500)}.trial-badge{background:var(--color-primary-soft);color:var(--color-primary);padding:12px 18px;border-radius:999px;font-weight:700}.trial-badge.warning{background:var(--color-bg-orange-50);color:var(--color-fg-orange-700)}.trial-badge.danger{background:var(--color-bg-red-50);color:var(--color-fg-red-600)}.trial-badge.success{background:var(--color-bg-green-50);color:var(--color-fg-green-600)}.subscription-warning-card,.subscription-card,.plan-card{background:var(--color-surface);border-radius:20px;padding:24px;box-shadow:0 4px 18px rgba(0,0,0,.06);border:1px solid var(--color-line-gray-200)}.subscription-warning-card{border-color:var(--color-line-orange-200);background:var(--color-bg-orange-50)}:where(.subscription-page) .subscription-message {padding:14px 18px;border-radius:16px;font-weight:700}:where(.subscription-page) .subscription-message.success {background:var(--color-bg-green-50);color:var(--color-fg-green-600);border:1px solid var(--color-line-green-200)}:where(.subscription-page) .subscription-message.warning {background:var(--color-bg-orange-50);color:var(--color-fg-orange-700);border:1px solid var(--color-line-orange-200)}.subscription-grid,.plans-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.plan-name,.plan-card-price{font-size:32px;font-weight:800}.plan-price{font-size:18px;color:var(--color-primary);margin-bottom:20px}.plan-incl-btw{display:block;color:var(--color-text-muted);font-size:12px;margin-top:2px}.subscription-info-row{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.subscription-info-row span{color:var(--color-fg-gray-500)}.status-active{color:var(--color-fg-green-600)}.status-danger{color:var(--color-fg-red-600)}.status-warning{color:var(--color-fg-orange-700)}:where(.subscription-page) .primary-button, :where(.subscription-page) .secondary-button, .danger-button {border:none;border-radius:12px;padding:14px;width:100%;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}:where(.subscription-page) .primary-button {background:var(--color-primary);color:var(--color-text-on-primary)}:where(.subscription-page) .secondary-button {background:var(--color-bg-gray-100);color:var(--color-fg-gray-900)}.danger-button{background:#dc2626;color:var(--color-text-on-primary);border-radius:12px;padding:12px 14px;width:100%;cursor:pointer;font-weight:800}.subscription-cancel-box{margin-top:18px;padding:16px;border-radius:16px;background:var(--color-page-bg);border:1px solid var(--color-line-gray-200)}.subscription-cancel-box p{margin:8px 0 12px;color:var(--color-text-muted)}.warning-box{background:var(--color-bg-orange-50);border-color:var(--color-line-orange-200)}.plan-card{position:relative;display:flex;flex-direction:column}.plan-card ul{padding-left:18px;line-height:1.8;flex-grow:1}.featured{border:2px solid var(--color-primary)}.active-plan{border-color:#16a34a}.popular-tag,.current-tag{position:absolute;top:-12px;color:var(--color-text-on-primary);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800}.popular-tag{right:20px;background:var(--color-primary)}.current-tag{left:20px;background:#16a34a}.limit-warning{margin-top:12px;padding:12px;border-radius:12px;background:var(--color-bg-orange-50);color:var(--color-fg-orange-700);font-weight:600}.billing-buttons{display:flex;flex-direction:column;gap:10px;margin-top:18px}.add-company-card p{color:var(--color-fg-gray-500);margin:8px 0 16px}.add-company-row{display:flex;gap:12px;flex-wrap:wrap}.add-company-row input{flex:1;min-width:220px;padding:13px 14px;border:1px solid var(--color-line-gray-200);border-radius:12px;font-size:15px}.add-company-button{width:auto;padding:14px 22px;white-space:nowrap}@media(max-width:768px){.subscription-hero{grid-template-columns:1fr}.subscription-info-row{align-items:flex-start;flex-direction:column}}

/* ── Pages/SubscriptionPaymentResult.razor ─────────────────────────────────────────────────────────────── */
.payment-result-card{max-width:680px;margin:32px auto}:where(.payment-result-card) .subscription-message {padding:14px 18px;border-radius:16px;font-weight:700;margin:18px 0}:where(.payment-result-card) .subscription-message.success {background:var(--color-bg-green-50);color:var(--color-fg-green-600);border:1px solid var(--color-line-green-200)}:where(.payment-result-card) .subscription-message.warning {background:var(--color-bg-orange-50);color:var(--color-fg-orange-700);border:1px solid var(--color-line-orange-200)}.payment-summary{display:grid;gap:12px;margin:20px 0}.payment-summary div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--color-line-gray-200)}.payment-summary span{color:var(--color-fg-gray-500)}.recurring-info{margin:10px 0 18px;color:var(--color-success-text);font-weight:700}.warning-text{color:var(--color-fg-orange-700)}:where(.payment-result-card) .primary-button, :where(.payment-result-card) .secondary-button {border:none;border-radius:12px;padding:14px 18px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}:where(.payment-result-card) .primary-button {background:var(--color-primary);color:var(--color-text-on-primary)}:where(.payment-result-card) .secondary-button {background:var(--color-bg-gray-100);color:var(--color-fg-gray-900)}

/* ── Pages/SupportAdmin.razor ──────────────────────────────────────────────────────────────────────────── */
/* Compacte statusfilter-dropdown in de toolbar, op dezelfde hoogte als de zoekbalk/knoppen. */
.na-inline-select {
    height: 40px;
    border: 1px solid var(--na-border, var(--color-line-gray-200));
    border-radius: 10px;
    background: var(--color-surface);
    padding: 0 32px 0 12px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}
.na-inline-select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* Selectiebalk voor bulk-verwijderen. */
.support-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 16px; background: var(--color-primary-soft); border: 1px solid var(--color-primary-border); border-radius: 12px; }
.support-ticket-meta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; color: var(--color-fg-slate-600); font-size: .88rem; }

/* ── Pages/UsageAdmin.razor ────────────────────────────────────────────────────────────────────────────── */
/* Paginaspecifiek; kaarten, tabel, badges en knoppen komen uit het Design System. */
/* De periodekiezer staat nu in de paginakop, naast de knoppen. */
.na-page-header select { background: var(--color-surface, var(--color-surface)); border: 1px solid var(--color-border, var(--color-line-gray-200)); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; color: var(--color-text-secondary, var(--color-text-secondary)); }
.usage-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 20px; }
.usage-section { margin-bottom: 20px; }

/* Bedrijf zoeken in plaats van door de volledige lijst scrollen. */
.usage-tegoedzoek { position: relative; max-width: 480px; }
.usage-zoek-label { display: block; font-size: 12.5px; color: var(--color-text-secondary, var(--color-fg-slate-600)); margin-bottom: 5px; font-weight: 600; }
.usage-zoeklijst { position: absolute; left: 0; right: 0; z-index: 20; margin-top: 4px; background: var(--color-surface); border: 1px solid var(--color-border, var(--color-border)); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); overflow: hidden; }
/* Expliciete kleur: een kale button erft hier de witte tekst van de knoppenstijl, waardoor de
   bedrijfsnamen onzichtbaar waren op de witte achtergrond. */
.usage-zoekrij { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; background: var(--color-surface); color: var(--color-text, var(--color-text)); border: 0; border-bottom: 1px solid var(--color-border-subtle, var(--color-line-slate-100)); font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; }
.usage-zoekrij:last-child { border-bottom: 0; }
.usage-zoekrij:hover { background: var(--color-page-bg, var(--color-page-bg)); }
.usage-zoekrij-saldo { font-weight: 700; color: var(--color-text-muted, var(--color-text-muted)); }

.usage-gekozen-naam { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.usage-gekozen-cijfers { display: flex; gap: 28px; flex-wrap: wrap; }
.usage-gekozen-cijfers > div { display: flex; flex-direction: column; }
.usage-gekozen-w { font-size: 22px; font-weight: 800; }
.usage-gekozen-w.klein { font-size: 14px; padding-top: 6px; }
.usage-gekozen-w.nul { color: var(--color-fg-red-700); }
.usage-gekozen-l { font-size: 11.5px; color: var(--color-text-muted, var(--color-text-muted)); }
.usage-gekozen-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--color-border-subtle, var(--color-line-slate-100)); }

/* Tegoedpakketten in een venster: aantal, prijs, berekende stukprijs, pijltjes, vinkje. */
.usage-modal-hint { font-size: 12.5px; color: var(--color-text-muted, var(--color-text-muted)); margin: 0 0 12px; }
.usage-pakket-kop, .usage-pakket-rij { display: grid; grid-template-columns: 1fr 1fr 90px 84px 60px; gap: 10px; align-items: center; }
.usage-pakket-kop { margin-bottom: 6px; }
.usage-pakket-kop span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted, var(--color-text-muted)); font-weight: 700; }
.usage-pakket-kop span.num { text-align: right; }
.usage-pakket-kop span.mid { text-align: center; }
.usage-pakket-rij { margin-bottom: 8px; }
.usage-pakket-rij input[type="text"], .usage-pakket-rij input:not([type]) { width: 100%; text-align: right; }
.usage-pakket-per { font-size: 12.5px; color: var(--color-text-muted, var(--color-text-muted)); text-align: right; }
.usage-pakket-pijlen { display: flex; gap: 3px; justify-content: center; }
.usage-pakket-actief { text-align: center; }
.usage-pakket-voet { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 12px; }
.usage-inbegrepen { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-text-secondary, var(--color-text-secondary)); }
.usage-inbegrepen input { width: 80px; text-align: right; }
.usage-vanaf { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-text-secondary, var(--color-fg-slate-600)); }
/* De knop in de tariefwaarschuwing hoort niet over de volle breedte te rekken. */
.na-alert .na-btn { width: auto; align-self: flex-start; margin-top: 8px; }

@media (max-width: 700px) {
    .usage-pakket-kop { display: none; }
    .usage-pakket-rij { grid-template-columns: 1fr 1fr; }
}
.usage-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.usage-section-head h3 { margin: 0; font-size: 15px; }
.usage-section-head .hint { font-size: 12px; color: var(--color-text-muted, #94a3b8); }
.usage-company-cell { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.usage-chev { color: var(--color-text-muted, #94a3b8); font-size: 11px; }
.usage-total-row td { font-weight: 700; background: var(--color-page-bg, var(--color-page-bg)); border-top: 2px solid var(--color-border, var(--color-line-gray-200)); }
.usage-cost { font-weight: 700; }
.usage-muted { color: var(--color-text-muted, #94a3b8); font-weight: 400; }

tr.usage-detail > td { background: var(--color-page-bg, var(--color-page-bg)); padding: 16px 18px 18px 38px; text-align: left; }
.usage-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.usage-detail h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted, var(--color-text-muted)); margin: 0 0 8px; }
.usage-drow { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed var(--color-border, var(--color-line-gray-200)); }
.usage-drow:last-child { border-bottom: none; }
.usage-bars { display: flex; align-items: flex-end; gap: 3px; height: 84px; padding-top: 6px; }
.usage-bar { flex: 1; background: var(--color-bg-blue-200); border-radius: 3px 3px 0 0; min-height: 2px; }
.usage-bar.hi { background: var(--color-primary, var(--color-primary)); }
.usage-bars-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-muted, #94a3b8); margin-top: 4px; }

/* Maandgrafiek: gestapelde kolommen (AI + Meta), oudste links. */
.usage-month-chart { display: flex; align-items: flex-end; gap: 8px; overflow-x: auto; padding: 4px 2px 0; }
.usage-month-col { flex: 1; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.usage-month-bar { width: 100%; max-width: 48px; min-height: 2px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px 4px 0 0; overflow: hidden; background: var(--color-page-bg, var(--color-page-bg)); }
/* De drie segmenten van de staaf. Ze hadden nooit een kleur, dus de staven bleven leeg en
   alleen het bedrag erboven was leesbaar (gezien 09/09/2026). Dezelfde kleuren als de legende. */
.usage-month-ai { background: var(--color-primary, var(--color-primary)); }
.usage-month-meta { background: #22c55e; }
.usage-month-other { background: #f59e0b; }
.usage-month-total { font-size: 11px; color: var(--color-text-muted, #94a3b8); white-space: nowrap; }
.usage-month-label { font-size: 11px; color: var(--color-text-muted, #94a3b8); white-space: nowrap; }
.usage-month-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--color-text-muted, var(--color-text-muted)); }
.usage-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

.usage-pill { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.usage-pill-m { background: var(--color-warning-bg); color: var(--color-warning-text); }
.usage-pill-u { background: var(--color-bg-blue-100); color: var(--color-primary-hover); }
.usage-pill-s { background: var(--color-success-bg); color: var(--color-success-text); }

/* Mobiele kaartlijst (zelfde wissel als de andere lijstpagina's). */
.usage-mobile-list { display: flex; flex-direction: column; gap: 10px; }
.usage-mobile-detail { border-top: 1px dashed var(--color-border, var(--color-line-gray-200)); margin-top: 10px; padding-top: 10px; display: grid; gap: 16px; }

/* Tarieven: kolomraster met de veldnamen één keer als kop — niet meer bij elk model herhaald. */
.usage-price-provider { margin-bottom: 22px; }
.usage-price-provider:last-child { margin-bottom: 0; }
.usage-price-provider > h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted, var(--color-text-muted)); margin: 0 0 10px; }
.usage-price-grid { display: grid; gap: 4px 14px; align-items: center; }
.usage-price-grid-ai { grid-template-columns: minmax(150px, 1.3fr) repeat(4, minmax(88px, 124px)); }
.usage-price-grid-meta { grid-template-columns: minmax(150px, 1.3fr) minmax(88px, 124px) auto; }
.usage-price-head { font-size: 11px; color: var(--color-text-muted, #94a3b8); padding-bottom: 6px; border-bottom: 1px solid var(--color-border, var(--color-line-gray-200)); }
.usage-price-head.num { text-align: right; }
.usage-price-name { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; padding: 7px 0; }
.usage-price-cell { display: block; padding: 4px 0; }
.usage-price-flabel { display: none; font-size: 11px; color: var(--color-text-muted, #94a3b8); margin-bottom: 3px; }
.usage-price-cell > input, .usage-price-add input, .usage-price-add select { border: 1px solid var(--color-border, var(--color-line-gray-200)); border-radius: 8px; padding: 6px 9px; font-size: 13px; background: var(--color-surface, var(--color-surface)); }
.usage-price-cell > input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.usage-price-cell > input::placeholder { color: var(--color-text-muted, #cbd5e1); }
.usage-price-hint { font-size: 11px; color: var(--color-text-muted, #94a3b8); }
.usage-price-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.usage-price-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.usage-price-foot .note { font-size: 12px; color: var(--color-text-muted, #94a3b8); }
.usage-price-foot label { font-size: 13px; color: var(--color-text-muted, var(--color-text-muted)); display: flex; align-items: center; gap: 6px; }
.usage-price-foot input[type=date] { border: 1px solid var(--color-border, var(--color-line-gray-200)); border-radius: 8px; padding: 6px 9px; font-size: 13px; }
.usage-saved { color: var(--color-success-text); font-size: 13px; }

@media (max-width: 900px) {
    /* Kolomraster valt terug op blokjes per model; dan komen de veldnamen wél bij elk veld. */
    .usage-price-grid-ai, .usage-price-grid-meta { grid-template-columns: 1fr 1fr; }
    .usage-price-head { display: none; }
    .usage-price-flabel { display: block; }
    .usage-price-name { grid-column: 1 / -1; padding: 12px 0 2px; border-top: 1px dashed var(--color-border, var(--color-line-gray-200)); }
    .usage-price-grid > .usage-price-name:first-child { border-top: none; padding-top: 0; }
    .usage-price-hint { grid-column: 1 / -1; }
    tr.usage-detail > td { padding-left: 18px; }
}

/* ── Shared/AiStatisticsSection.razor ──────────────────────────────────────────────────────────────────── */
.ai-stat-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ai-stat-card { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 14px; }
.ai-stat-card .l { font-size: 13px; color: var(--color-text-muted); }
.ai-stat-card .v { font-size: 22px; font-weight: 700; color: var(--color-text); }
.ai-stat-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ai-stat-panel { background: var(--color-surface); border: 1px solid var(--color-line-gray-200); border-radius: 12px; padding: 14px; }
.ai-stat-panel h3 { margin: 0 0 10px; font-size: 15px; }
.ai-stat-bar-row { margin-bottom: 8px; font-size: 13px; }
.ai-stat-bar { height: 8px; background: var(--color-bg-gray-200); border-radius: 999px; overflow: hidden; margin-top: 3px; }
.ai-stat-bar > div { height: 100%; background: var(--color-primary); }
.ai-stat-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ai-stat-filters select { border: 1px solid var(--color-line-gray-200); border-radius: 10px; padding: 8px 10px; }
.ai-stat-note { background: var(--color-primary-soft); color: var(--color-primary-hover); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }

/* ── Shared/AvailabilityScheduleEditor.razor ───────────────────────────────────────────────────────────── */
.availability-schedule-mobile { display:none; }

@media (max-width: 700px) {
    .availability-schedule-desktop { display:none; }
    .availability-schedule-mobile { display:flex; flex-direction:column; gap:8px; }
    .availability-schedule-empty { margin:0; padding:10px 2px; color:var(--color-text-muted); font-size:13px; }
}

/* ── Shared/ElevenLabsStemmenBeheer.razor ──────────────────────────────────────────────────────────────── */
.api-stemmen-mobile { display:none; }
.api-stemmen-kop { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px; }
.api-stemmen-kop h2 { margin-bottom:4px; }
.api-stemmen-form { display:grid;gap:14px; }
.api-stemmen-form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.api-stemmen-audio { width:100%;margin-top:10px; }

@media (max-width:700px) {
    .api-stemmen-desktop { display:none; }
    .api-stemmen-mobile { display:flex;flex-direction:column;gap:8px; }
    .api-stemmen-form-row { grid-template-columns:1fr; }
}

/* ── Shared/EmailAutomationRulesManager.razor ──────────────────────────────────────────────────────────── */
/* Eén accordeonlayout voor alle schermformaten (vervangt de vroegere desktoptabel + aparte
       mobiele kaarten): dichtgeklapte balken met samenvattingschips, één kaart tegelijk open. */
.ear-list { display:flex; flex-direction:column; gap:10px; }
.ear-card { background:var(--color-surface); border:1px solid var(--color-line-gray-200); border-radius:12px; overflow:hidden; }
.ear-card.open { border-color:var(--color-primary-border); }
.ear-bar { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; }
.ear-hoofd { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ear-nm { font-weight:700; color:var(--color-text); font-size:14px; white-space:nowrap; }
.ear-uitkomst { font-size:11.5px; color:var(--color-fg-slate-600); line-height:1.25; }
.ear-uitkomst.waarschuwing { color:var(--color-fg-amber-700); font-weight:600; }
.ear-chips { display:flex; gap:6px; margin-left:auto; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.ear-chip { font-size:11px; font-weight:600; border-radius:9px; padding:2.5px 9px; white-space:nowrap; }
.ear-chip.mode { background:var(--color-primary-soft); color:var(--color-primary-hover); }
.ear-chip.tpl { background:var(--color-surface-secondary); color:var(--color-fg-slate-600); }
.ear-chip.steps { background:var(--color-warning-bg); color:var(--color-warning-text); }
.ear-chip.chan { background:var(--color-bg-green-50); color:var(--color-fg-green-700); border:1px solid var(--color-line-green-200); }
.ear-chip.own { background:var(--color-success-bg); color:var(--color-success-text); }
.ear-chip.platform { background:var(--color-bg-blue-100); color:var(--color-primary-hover); }
.ear-chip.off { background:var(--color-danger-bg); color:var(--color-fg-red-700); }
.ear-chev { color:#94a3b8; font-size:13px; width:20px; text-align:center; flex-shrink:0; }
.ear-body { border-top:1px solid var(--color-line-slate-100); padding:14px 16px 16px; }
.ear-procref { color:#94a3b8; font-size:12px; margin-bottom:12px; }
.ear-step { border:1px solid var(--color-border); border-radius:10px; margin-bottom:12px; overflow:hidden; background:var(--color-surface); }
.ear-step-head { display:flex; align-items:center; gap:9px; padding:8px 14px; background:var(--color-page-bg); border-bottom:1px solid var(--color-border); }
.ear-step-num { width:20px; height:20px; border-radius:50%; background:var(--color-primary); color:var(--color-text-on-primary); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ear-step-title { font-weight:700; font-size:12.5px; color:var(--color-text); }
.ear-step-sub { color:var(--color-text-muted); font-size:11.5px; }
.ear-step-del { margin-left:auto; }
.ear-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px 16px; padding:13px 14px; }
.ear-fld label { display:block; font-size:11px; font-weight:600; color:var(--color-text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.3px; }
.ear-fld select, .ear-fld input[type=text], .ear-fld input[type=number] { width:100%; border:1px solid var(--color-border); border-radius:8px; padding:7px 10px; font-size:13px; background:var(--color-surface); box-sizing:border-box; }
.ear-cbs { display:flex; gap:16px; flex-wrap:wrap; padding:0 14px 13px; }
.ear-cbs label { display:flex; gap:6px; align-items:center; font-size:13px; color:var(--color-text-secondary); }
.ear-wait { background:var(--color-bg-amber-50); border-bottom:1px solid var(--color-line-amber-200); }
.ear-wait .ear-fld label { color:var(--color-warning-text); }
.ear-wait .ear-fld select, .ear-wait .ear-fld input { border-color:#f5d789; background:var(--color-bg-fffdf5); }
.ear-taakhint { padding:0 14px 12px; margin-top:-6px; font-size:12px; color:#94a3b8; }
.ear-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.ear-addstep { border:1.5px dashed var(--color-line-blue-300) !important; color:var(--color-primary-hover) !important; background:var(--color-primary-soft) !important; }
@media (max-width: 720px) {
    .ear-grid { grid-template-columns:1fr; }
    /* Smartphone: naam + uitkomst op de volle breedte, chips eronder — anders wordt de
       uitkomstregel in een smalle kolom naast de chips geperst. */
    .ear-bar { flex-wrap:wrap; }
    .ear-hoofd { flex:1 1 100%; }
    .ear-chips { margin-left:0; justify-content:flex-start; }
    .ear-chev { position:absolute; top:12px; right:14px; }
    .ear-card { position:relative; }
}

/* ── Shared/SmsSjablonenManager.razor ──────────────────────────────────────────────────────────────────── */
.sms-taal { display:inline-block; border-radius:5px; font-size:10.5px; padding:2px 6px; font-weight:700; margin-right:3px; background:var(--color-surface-secondary); color:#94a3b8; letter-spacing:.03em; }
.sms-taal-aan { background:var(--color-bg-blue-100); color:var(--color-primary); }
/* Tonen/verbergen komt van .na-mobile-only.na-services-cards; hier enkel de maatvoering,
   anders overschrijft een losse display:flex die regel en staan kaarten en tabel samen. */
.sms-kaarten { gap:10px; }
.sms-taalrij { display:flex; gap:3px; flex-wrap:wrap; }
.sms-editor { display:grid; grid-template-columns:1fr 330px; gap:18px; align-items:start; }
.sms-taalkeuze { display:flex; gap:6px; margin-bottom:14px; }
.sms-taalknop { border:1px solid var(--color-border); border-radius:7px; padding:4px 12px; font-size:11.5px; font-weight:600; color:var(--color-text-muted); background:var(--color-surface); cursor:pointer; font-family:inherit; }
.sms-taalknop-aan { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-text-on-primary); }
.sms-chips { margin-top:10px; }
.sms-chip { display:inline-block; background:var(--color-surface-secondary); border:1px solid var(--color-border); border-radius:6px; font-size:11px; padding:3px 8px; color:var(--color-fg-slate-600); margin:0 4px 4px 0; font-family:Consolas,monospace; cursor:pointer; }
.sms-chip:hover { border-color:var(--color-primary); color:var(--color-primary); }
.sms-meter h3, .sms-editor .settings-card h3 { margin:0 0 9px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); }
.sms-groot { font-size:25px; font-weight:800; line-height:1.1; color:var(--color-success-text); }
.sms-groot-warn { color:var(--color-fg-amber-700); }
.sms-balk { height:7px; border-radius:5px; background:var(--color-bg-slate-200); margin:11px 0 7px; overflow:hidden; }
.sms-balk i { display:block; height:100%; }
.sms-waarschuwing { color:var(--color-fg-amber-700); }
.sms-ballon { background:var(--color-bg-indigo-50); border-radius:12px 12px 12px 4px; padding:9px 11px; font-size:12.5px; line-height:1.55; color:var(--color-fg-12203c); white-space:pre-wrap; }
@media (max-width: 1100px) { .sms-editor { grid-template-columns:1fr; } }

/* ── Shared/WhatsAppAutomationRulesManager.razor ───────────────────────────────────────────────────────── */
.war-list { display:flex; flex-direction:column; gap:10px; }
.war-card { background:var(--color-surface); border:1px solid var(--color-line-gray-200); border-radius:12px; overflow:hidden; }
.war-card.open { border-color:var(--color-line-green-200); }
.war-bar { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; }
.war-hoofd { display:flex; flex-direction:column; gap:2px; min-width:0; }
.war-nm { font-weight:700; color:var(--color-text); font-size:14px; white-space:nowrap; }
.war-uitkomst { font-size:11.5px; color:var(--color-fg-slate-600); line-height:1.25; }
.war-uitkomst.waarschuwing { color:var(--color-fg-amber-700); font-weight:600; }
.war-chips { display:flex; gap:6px; margin-left:auto; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.war-chip { font-size:11px; font-weight:600; border-radius:9px; padding:2.5px 9px; white-space:nowrap; }
.war-chip.mode { background:var(--color-bg-green-50); color:var(--color-fg-green-700); }
.war-chip.tpl { background:var(--color-surface-secondary); color:var(--color-fg-slate-600); }
.war-chip.steps { background:var(--color-warning-bg); color:var(--color-warning-text); }
.war-chip.off { background:var(--color-surface-secondary); color:#94a3b8; }
.war-chev { color:#94a3b8; font-size:13px; width:20px; text-align:center; flex-shrink:0; }
.war-body { border-top:1px solid var(--color-line-slate-100); padding:14px 16px 16px; }
.war-step { border:1px solid var(--color-border); border-radius:10px; margin-bottom:12px; overflow:hidden; background:var(--color-surface); }
.war-step-head { display:flex; align-items:center; gap:9px; padding:8px 14px; background:var(--color-page-bg); border-bottom:1px solid var(--color-border); }
.war-step-num { width:20px; height:20px; border-radius:50%; background:#16a34a; color:var(--color-text-on-primary); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.war-step-title { font-weight:700; font-size:12.5px; color:var(--color-text); }
.war-step-sub { color:var(--color-text-muted); font-size:11.5px; }
.war-step-del { margin-left:auto; }
.war-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px 16px; padding:13px 14px; }
.war-fld label { display:block; font-size:11px; font-weight:600; color:var(--color-text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.3px; }
.war-fld select, .war-fld input[type=number] { width:100%; border:1px solid var(--color-border); border-radius:8px; padding:7px 10px; font-size:13px; background:var(--color-surface); box-sizing:border-box; }
.war-cbs { display:flex; gap:16px; flex-wrap:wrap; padding:0 14px 13px; }
.war-cbs label { display:flex; gap:6px; align-items:center; font-size:13px; color:var(--color-text-secondary); }
.war-wait { background:var(--color-bg-amber-50); border-bottom:1px solid var(--color-line-amber-200); }
.war-wait .war-fld label { color:var(--color-warning-text); }
.war-wait .war-fld select, .war-wait .war-fld input { border-color:#f5d789; background:var(--color-bg-fffdf5); }
.war-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.war-addstep { border:1.5px dashed #86efac !important; color:var(--color-fg-green-700) !important; background:var(--color-bg-green-50) !important; }
@media (max-width: 720px) {
    .war-grid { grid-template-columns:1fr; }
    /* Zelfde stapeling als de e-mailkaarten op smartphoneformaat. */
    .war-bar { flex-wrap:wrap; }
    .war-hoofd { flex:1 1 100%; }
    .war-chips { margin-left:0; justify-content:flex-start; }
    .war-chev { position:absolute; top:12px; right:14px; }
    .war-card { position:relative; }
}

/* ── TrialExpiredCommercialCard.razor ──────────────────────────────────────────────────────────────────── */
.trial-expired-shell{width:100%;display:flex;justify-content:center;padding:36px 16px}.trial-expired-card{width:min(1120px,100%);display:grid;grid-template-columns:1.15fr .85fr;background:var(--color-surface);border:1px solid var(--color-line-gray-200);border-radius:28px;box-shadow:0 22px 55px rgba(15,23,42,.10);overflow:hidden}.trial-expired-content{padding:52px}.trial-expired-icon{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-ai-bg);color:var(--color-fg-5b3df5);font-size:26px;margin-bottom:28px}.trial-expired-content h1{font-size:38px;line-height:1.1;margin:0 0 10px;color:var(--color-text)}.trial-expired-content h2{font-size:22px;margin:0 0 28px;color:var(--color-fg-5b3df5)}.trial-expired-content p{font-size:16px;line-height:1.6;color:var(--color-text-secondary);margin:0 0 18px}.trial-expired-features{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin:30px 0 34px}.trial-expired-features div{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--color-fg-gray-800)}.trial-expired-features span{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-ai-bg)}.trial-expired-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:18px 20px;border-radius:14px;background:linear-gradient(135deg,#6d5dfc,#4f46e5);color:var(--color-text-on-primary);text-decoration:none;font-weight:900;font-size:17px;box-shadow:0 14px 28px rgba(79,70,229,.25)}.trial-expired-note{margin-top:18px;text-align:center;color:var(--color-text-muted);font-weight:700}.trial-expired-visual{position:relative;background:linear-gradient(135deg,var(--color-page-bg),var(--color-bg-violet-50));min-height:520px;display:flex;align-items:center;justify-content:center}.trial-calendar{width:250px;height:245px;border-radius:24px;background:var(--color-surface);box-shadow:0 18px 36px rgba(79,70,229,.12);position:relative}.trial-calendar div{height:62px;background:linear-gradient(135deg,#6d5dfc,#4f46e5);border-radius:24px 24px 0 0}.trial-calendar:before,.trial-calendar:after{content:"";position:absolute;top:-18px;width:14px;height:48px;border-radius:99px;background:#6d5dfc}.trial-calendar:before{left:56px}.trial-calendar:after{right:56px}.trial-calendar span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:14px;background:#6d5dfc;color:var(--color-text-on-primary);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900}.trial-customer-card{position:absolute;left:78px;bottom:164px;width:170px;border-radius:18px;background:var(--color-surface);padding:18px;box-shadow:0 14px 30px rgba(15,23,42,.11)}.trial-avatar{width:44px;height:44px;border-radius:50%;background:var(--color-bg-d8ccff);margin-bottom:12px}.trial-customer-card p{height:8px;background:var(--color-bg-e9e5ff);border-radius:99px;margin:8px 0}.trial-customer-card strong{display:block;width:70px;height:12px;border-radius:99px;background:#6d5dfc;margin-top:14px}.trial-safe-box{position:absolute;right:72px;bottom:82px;max-width:260px;color:var(--color-text-secondary)}.trial-safe-box div{width:48px;height:48px;border-radius:50%;background:var(--color-ai-bg);display:flex;align-items:center;justify-content:center;margin-bottom:10px}.trial-safe-box strong{display:block;color:var(--color-text);margin-bottom:6px}.trial-safe-box p{margin:0;line-height:1.45;color:var(--color-text-muted)}@media(max-width:900px){.trial-expired-card{grid-template-columns:1fr}.trial-expired-content{padding:32px}.trial-expired-visual{display:none}.trial-expired-content h1{font-size:30px}.trial-expired-features{grid-template-columns:1fr}}@media(max-width:560px){.trial-expired-shell{padding:18px 0}.trial-expired-card{border-radius:20px}.trial-expired-content{padding:24px}.trial-expired-content h1{font-size:26px}.trial-expired-content h2{font-size:19px}.trial-expired-button{font-size:15px}}

/* ── Settings.razor: wat er daarna gebeurt met wie niet mag boeken (11/10/2026) ── */
.nk-opvolging { margin-top: 16px; }

/* Bekijkscherm van een taak (12/10/2026, AiReceptionist.razor): telefoon en gesprek als link in de primaire kleur. */
.taak-bekijk a { color: var(--color-primary); text-decoration: none; font-weight: 600; }

/* TaakVenster (12/10/2026): een terugbelverzoek en een bericht in de kleur van hun bel-icoon, de inhoud als citaat. */
.taak-venster-terugbellen .na-modal-icon { background: var(--color-danger-bg); color: var(--color-danger); }
.taak-venster-bericht .na-modal-icon { background: var(--color-info-bg); color: var(--color-info); }
.taak-citaat { background: var(--color-surface-secondary); border-left: 3px solid var(--color-info); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; line-height: 1.45; white-space: pre-line; }
.taak-citaat-terugbellen { border-left-color: var(--color-danger); }