.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.page-heading p { margin:0; color:var(--muted); }
.eyebrow { color:var(--brand) !important; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px !important; }
.actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.page-heading .actions { align-items:center; }
.page-heading .actions .button { gap:6px; }
.page-heading .actions .button > svg,
.page-heading .actions .button > span[aria-hidden="true"] { margin:0; }
.page-heading .actions .button svg { width:16px; height:16px; flex:0 0 auto; }
.back-link { display:inline-flex; align-items:center; gap:6px; margin:0 0 14px; padding:5px 10px 5px 7px; border-radius:8px; color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; background:transparent; transition:color .15s,background .15s; }
.back-link span { font-size:15px; line-height:1; }
.back-link:hover,.back-link:focus-visible { color:var(--brand-dark); background:var(--brand-soft); }
.card { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:24px; margin:18px 0; box-shadow:var(--shadow); }
.card--subtle { background:var(--subtle); box-shadow:none; }
.card--danger { border-color:#fecdca; background:#fffafa; }
.card--narrow { max-width:760px; }
.card--stat { margin:0; }
/* Volgende-stap-kaart: het primaire vervolg van een pagina (offerte-detail,
   instellingen). Eén bron van waarheid voor de hero-kaart. */
.next-step-card { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:18px 0 24px; padding:22px 24px; background:linear-gradient(135deg,#fff 0%,#f2f5ff 100%); border:1px solid #c7d7fe; border-radius:14px; box-shadow:var(--shadow); }
.next-step-copy { display:flex; gap:13px; align-items:flex-start; }
.next-step-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:var(--brand); color:#fff; font-size:21px; font-weight:800; }
.next-step-icon svg { width:22px; height:22px; }
.next-step-copy h2 { margin:0 0 5px; }
.next-step-copy p:last-child { max-width:720px; margin:0; color:var(--muted); }
.next-step-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:0 0 auto; }
.next-step-actions form { margin:0; }
/* Inhoudsopgave in de zijbalk: genummerde spronglinks met scroll-spy. */
.page-toc ol { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:2px; }
.page-toc a { display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:8px; color:var(--muted); font-size:13px; font-weight:700; line-height:1.3; text-decoration:none; transition:color .15s,background .15s; }
.page-toc a:hover { color:var(--brand-dark); background:var(--brand-soft); }
.page-toc a:hover .toc-num { background:var(--brand-soft); color:var(--brand-dark); }
.page-toc a.is-active { color:var(--brand-dark); background:var(--brand-soft); }
.page-toc a.is-active .toc-num { background:var(--brand); color:#fff; }
@media (max-width:760px) { .next-step-card { display:block; padding:18px; } .next-step-actions { margin-top:16px; } .next-step-actions > *, .next-step-actions form, .next-step-actions form button { width:100%; } }
/* Tikdoelen op mobiel: minimaal 44px (WCAG 2.5.5) voor de terug-link en de
   inhoudsopgave. */
@media (max-width:760px) { .back-link, .page-toc a { min-height:44px; } }

.card-heading { display:flex; gap:12px; align-items:flex-start; border-bottom:1px solid var(--line); }
.card > .card-heading { margin:0 -24px 18px; padding:0 24px 16px; }
.card-heading-copy { min-width:0; flex:1; }
.card-heading-copy h2 { margin:1px 0 3px; }
.card-heading-copy p { margin:0; color:var(--muted); font-size:13px; }
.card-heading-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:9px; background:var(--brand-soft); color:var(--brand-dark); font-size:12px; font-weight:800; }
.card-heading-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.card-heading-badge { flex:0 0 auto; }
.card-heading-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:0 0 auto; }
.card-heading-actions form { margin:0; }
.card-heading + .field > label, .card-body > .field:first-child > label, .card-body > .quote-edit-advanced-fields > .field:first-child > label { margin-top:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; }
.grid > .card { margin:0; }
.stat { margin:0; }
.stat-value { display:block; font-size:28px; letter-spacing:-.03em; font-weight:800; }
.button, button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; white-space:nowrap; border:1px solid var(--brand); border-radius:8px; background:var(--brand); color:#fff; padding:8px 15px; font:inherit; font-weight:700; text-decoration:none; cursor:pointer; transition:background .15s,border-color .15s,transform .15s; }
.button:hover,button:hover { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.button:active,button:active { transform:translateY(1px); }
/* Een uitgeschakelde knop moet er ook zo uitzien: geen hover, geen cursor. */
.button:disabled,button:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.button.secondary { background:#fff; color:var(--ink); border-color:#c8ced8; }
.button.secondary:hover { background:#f8faff; border-color:var(--brand); color:var(--brand-dark); }
.button.danger { background:#fff; color:var(--danger); border-color:#fda29b; }
.alert { display:flex; gap:10px; align-items:flex-start; border:1px solid #fedf89; border-left:4px solid var(--warning); border-radius:9px; background:#fffaeb; padding:12px 16px; margin:0 0 14px; font-size:13px; line-height:1.5; }
.alert.success, .alert.alert-success { border-color:#abefc6; border-left-color:var(--success); background:#ecfdf3; color:#054f31; }
.alert.error, .alert.alert-error { border-color:#fecdca; border-left-color:var(--danger); background:#fef3f2; color:#7a271a; }
.alert.info, .alert.alert-info { border-color:#c7d7fe; border-left-color:var(--brand); background:#f5f8ff; color:#1740b5; }
.alert.warning, .alert.alert-warning { border-color:#fedf89; border-left-color:var(--warning); background:#fffaeb; color:#7a4e00; }
.alert-icon { flex:0 0 auto; font-size:14px; line-height:1.5; }
.alert.error .alert-icon, .alert.alert-error .alert-icon { color:var(--danger); }
.alert.success .alert-icon, .alert.alert-success .alert-icon { color:var(--success); }
.alert.warning .alert-icon, .alert.alert-warning .alert-icon { color:var(--warning); }
.alert.info .alert-icon, .alert.alert-info .alert-icon { color:var(--brand); }
.alert-body { min-width:0; }
.alert-title { display:block; margin-bottom:2px; font-weight:800; }
.alert-message { margin:2px 0 0; }
.alert-items { margin:4px 0 0; padding-left:0; list-style:none; }
.alert-items li { margin:2px 0 0; }
.alert p { margin:2px 0 0; }
.alert strong { font-weight:800; }
.alert .errorlist { margin:2px 0 0; display:block; }
.alert .errorlist li { display:block; gap:0; color:inherit; font-weight:600; }
.alert .errorlist li::before { content:none; }
table { width:100%; border-collapse:collapse; }
th { color:var(--muted); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
td,th { padding:14px 11px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
tbody tr:hover { background:#fbfcff; }
tr:last-child td { border-bottom:0; }
.table-wrap { overflow-x:auto; }
.card-table { min-width:720px; }
.card-table th { padding-top:10px; padding-bottom:10px; }
.card-table td { padding-top:16px; padding-bottom:16px; }
.card-table tbody tr { transition:background .15s; }
.card-table tbody tr:hover { background:#f8faff; }
.table-actions { display:flex; align-items:center; flex-wrap:nowrap; gap:5px; white-space:nowrap; }
.table-actions-heading { min-width:260px; }
.table-action { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:5px 8px; border:1px solid #d0d5dd; border-radius:7px; background:#fff; color:#475467; font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; cursor:pointer; }
.table-action:hover { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-dark); }
.table-action.primary { border-color:#c7d7fe; background:var(--brand-soft); color:var(--brand-dark); }
.table-action.icon { width:30px; padding:4px; font-size:15px; line-height:1; }
.table-action.delete { color:var(--danger); border-color:#fecdca; }
.table-action.delete:hover { background:#fef3f2; border-color:#fda29b; }
.table-action-pair { display:flex; gap:3px; }
/* Op smalle schermen worden tabellen kaarten, zodat acties niet achter een brede tabel verdwijnen. */
@media (max-width:760px) {
  .card-table { min-width:0; display:block; border:0; }
  .card-table thead { display:none; }
  .card-table tbody,.card-table tr { display:block; }
  .card-table tbody tr { margin:0 0 12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
  .card-table tbody tr:last-child { margin-bottom:0; }
  .card-table tbody td { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; width:100%; min-width:0; padding:7px 0; border:0; text-align:right; }
  .card-table tbody td::before { content:attr(data-mobile-label); flex:0 0 auto; color:var(--muted); font-size:12px; font-weight:700; text-align:left; }
  .card-table tbody td[data-mobile-full] { display:block; text-align:left; }
  .card-table tbody td[data-mobile-full]::before { display:block; margin-bottom:7px; }
  .card-table tbody td[data-mobile-separator] { margin-top:5px; padding-top:10px; border-top:1px solid var(--line); }
  .card-table .empty { display:block; text-align:center; }
  .card-table .empty::before { display:none; }
  .card-table .table-actions { flex-wrap:wrap; white-space:normal; }
  .card-table .table-actions .table-action,.card-table .table-actions form { flex:1 1 auto; }
  .card-table .table-actions .table-action-pair { display:flex; flex:0 0 auto; }
  .card-table .table-actions .table-action.icon { flex:0 0 34px; }
  .card { padding:18px; }
  .actions form.inline { margin-bottom:4px; }
}
.status { display:inline-block; border-radius:999px; padding:4px 10px; background:#f2f4f7; color:#344054; font-size:12px; font-weight:750; white-space:nowrap; }
.status.sent,.status.accepted { background:#ecfdf3; color:var(--success); }
.status.failed,.status.rejected,.status.expired { background:#fef3f2; color:var(--danger); }
.status.draft,.status.ready { background:#eef4ff; color:#175cd3; }
label { display:block; font-weight:700; margin:16px 0 6px; }
input,textarea,select { width:100%; border:1px solid #cfd5df; border-radius:8px; background:#fff; color:var(--ink); padding:10px 12px; font:inherit; transition:border-color .15s,box-shadow .15s; }
input:hover,textarea:hover,select:hover { border-color:#98a2b3; }
input:focus,textarea:focus,select:focus,button:focus,a:focus { outline:3px solid #c7d7fe; outline-offset:2px; border-color:var(--brand); }
textarea { resize:vertical; }
.helptext { color:var(--muted); font-size:13px; margin:4px 0 9px; }
.form-narrow { max-width:760px; }
.form-actions { display:flex; gap:8px; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
.errorlist { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; }
.errorlist li { display:flex; gap:7px; align-items:flex-start; color:var(--danger); font-size:13px; font-weight:600; line-height:1.45; }
.errorlist li::before { content:'⚠'; flex:0 0 auto; font-size:12px; line-height:1.5; }
.field-error input, .field-error select, .field-error textarea { border-color:var(--danger); background:#fffafa; }
.field-error .errorlist { margin-top:8px; }
.form-section-heading { border-top:1px solid var(--line); margin:30px 0 8px; padding-top:20px; }
.form-section-heading h2 { margin:0 0 3px; }
.form-section-heading p { margin:0; }
.form-section-heading.first { margin-top:0; border-top:0; padding-top:0; }
.logo-panel { border:1px solid #dbe2ee; border-radius:10px; padding:18px; margin:18px 0 10px; background:#f8faff; }
.logo-panel h2 { margin:0 0 3px; }
.logo-preview { display:flex; align-items:center; gap:18px; margin-top:15px; }
.logo-preview img { width:180px; height:90px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#fff; padding:10px; }
.logo-preview p { margin:3px 0 10px; }
.totals { display:flex; justify-content:flex-end; gap:26px; padding-top:18px; margin-top:16px; border-top:1px solid var(--line); color:var(--muted); }
.totals span { display:flex; flex-direction:column; gap:2px; font-size:13px; }
.totals strong { color:var(--ink); font-size:15px; }
.totals .total strong { color:var(--brand-dark); font-size:20px; }
details.card { padding:0; overflow:hidden; }
details.card > summary { display:flex; align-items:center; gap:16px; padding:20px 24px; cursor:pointer; list-style:none; font-weight:750; }
details.card > summary::-webkit-details-marker { display:none; }
details.card > summary:after { content:'＋'; margin-left:auto; flex:0 0 auto; color:var(--brand); font-size:20px; font-weight:400; }
details.card[open] > summary:after { content:'−'; }
.card-summary-copy { display:flex; flex-direction:column; gap:3px; min-width:0; padding-right:20px; }
.card-summary-copy strong { font-size:16px; }
.card-summary-copy small { color:var(--muted); font-size:13px; font-weight:400; }
.card-body { padding:18px 24px 24px; border-top:1px solid var(--line); }
.empty { text-align:center; color:var(--muted); padding:38px 16px !important; }
.empty strong { display:block; color:var(--ink); margin-bottom:4px; }
.filters { display:grid; grid-template-columns:2fr 1fr auto; align-items:end; gap:12px; }
.filters label { margin-top:0; }
/* Sorteerbare tabelkop in de gedeelde card-table. */
.card-table .th-sort { display:inline-flex; align-items:center; gap:4px; color:var(--muted); text-decoration:none; text-transform:uppercase; letter-spacing:.06em; }
.card-table .th-sort:hover, .card-table .th-sort.active { color:var(--brand-dark); }
.card-table .th-sort .th-sort-icon { font-size:11px; line-height:1; }

.pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
/* Kleine pagina-specifieke verbeteringen bovenop het gedeelde design system. */
    #status.card { max-width:none; }
#status form { max-width:720px; margin-top:18px; padding-top:4px; }
#status label { margin-top:18px; }
#status button { margin-top:22px; }
.button > svg { margin:0; width:16px; height:16px; flex:0 0 auto; }
.modal-dialog { width:min(640px,calc(100% - 32px)); padding:0; border:0; border-radius:16px; box-shadow:0 18px 60px rgb(16 24 40 / 24%); }
.modal-dialog.modal--narrow { width:min(440px,calc(100% - 32px)); }
.modal-dialog::backdrop { background:rgb(16 24 40 / 45%); backdrop-filter:blur(3px); }
.modal-dialog-body { display:flex; flex-direction:column; max-height:min(80vh,600px); padding:22px; }
.modal-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.modal-dialog-head h2 { margin:0 0 3px; font-size:18px; }
.modal-dialog-head p { margin:0; }
.modal-dialog-close { min-height:34px; width:34px; padding:0; border-color:#c8ced8; background:#fff; color:var(--muted); font-size:20px; line-height:1; }
.modal-dialog-close:hover { color:var(--brand-dark); border-color:var(--brand); background:#f8faff; }
.modal-dialog-content { min-height:0; overflow-x:hidden; overflow-y:auto; padding:6px; scrollbar-gutter:stable; }
.modal-dialog-footer { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }
/* Eenmalige releasemelding (dialoog + versiehistoriepagina). */
.release-notice-description, .release-entry-description { margin:0 0 18px; color:var(--ink); }
.release-notice-heading { margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.release-notice-changes, .release-changes { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.release-notice-changes li, .release-changes li { position:relative; margin:0; padding:0 0 0 26px; line-height:1.5; }
.release-notice-changes li::before, .release-changes li::before { content:""; position:absolute; left:4px; top:7px; width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.release-notice-history { margin:18px 0 0; font-size:13px; font-weight:700; }
.status.neutral { background:#f2f4f7; color:#475467; }
.status.warning { background:#fffaeb; color:#b54708; }
.checkbox-field { display:flex; align-items:flex-start; gap:10px; margin:14px 0; font-weight:600; }
.checkbox-field input { width:auto; margin-top:4px; accent-color:var(--brand); }
.checkbox-field span { flex:1; min-width:0; }
.checkbox-field small { display:block; margin-top:2px; color:var(--muted); font-size:12.5px; font-weight:500; }
.checkbox-field label { display:inline; margin:0; }
.switch-field { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:14px 0; padding:14px 15px; border:1px solid #c7d7fe; border-radius:10px; background:var(--brand-soft); cursor:pointer; }
.switch-field .switch-copy { display:block; min-width:0; }
.switch-field .switch-copy strong { display:block; color:var(--ink); font-size:14px; }
.switch-field .switch-copy small { display:block; margin-top:4px; color:var(--muted); font-size:13px; font-weight:400; }
.switch-field input { position:absolute; width:1px; height:1px; opacity:0; }
.switch-track { position:relative; width:44px; height:24px; flex:0 0 auto; border-radius:999px; background:#cfd5df; transition:background .15s; }
.switch-track:after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgb(16 24 40 / 25%); transition:transform .15s; }
.switch-field input:checked + .switch-track { background:var(--brand); }
.switch-field input:checked + .switch-track:after { transform:translateX(20px); }
.switch-field input:focus-visible + .switch-track { outline:3px solid #c7d7fe; outline-offset:2px; }
/* Gedeelde klikbare drag-and-drop bestandszone (logo, banner, CSV-import). */
.file-dropzone { position:relative; margin-top:10px; }
.file-dropzone 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; }
.file-dropzone-target { display:flex; align-items:center; justify-content:center; gap:12px; min-height:92px; padding:18px 20px; border:1.5px dashed #b8c6de; border-radius:12px; background:#fbfcff; cursor:pointer; text-align:center; transition:border-color .15s,background .15s,box-shadow .15s; }
.file-dropzone-target:hover, .file-dropzone-target:focus-visible { border-color:var(--brand); background:var(--brand-soft); }
.file-dropzone-target:focus-visible { outline:3px solid var(--brand-glow); outline-offset:1px; }
.file-dropzone.is-dragover .file-dropzone-target { border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 4px var(--brand-glow); }
.file-dropzone-icon { display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto; border-radius:10px; background:var(--brand-soft); color:var(--brand-dark); }
.file-dropzone-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.file-dropzone-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.file-dropzone-title { display:block; color:var(--ink); font-size:14px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-dropzone-hint { color:var(--muted); font-size:13px; }
.file-dropzone-target.is-selected .file-dropzone-icon { background:var(--success); color:#fff; }
.file-dropzone-target.is-selected .file-dropzone-hint { color:var(--success); }
@media (max-width:560px) {
  .file-dropzone-target { flex-direction:column; gap:8px; }
}
/* Gedeelde kleurkiezerkaart: swatch + naam + hex, met onzichtbaar color-input.
   Gebruikt op de kantoorinstellingen (huisstijl) en de widgetinstellingen (knop). */
.palette-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.palette-card { position:relative; display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.palette-card:hover { border-color:var(--brand); box-shadow:0 1px 4px rgba(16,24,40,.08); }
.palette-card.field-error { border-color:var(--danger,#d92d20); }
.palette-card input[type="color"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.palette-card-swatch { flex:0 0 auto; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); }
.palette-card-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.palette-card-name { font-size:13px; font-weight:600; color:var(--ink); }
.palette-card-hex { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--muted); }
.palette-card .errorlist { font-size:12px; margin:2px 0 0; }
@media (max-width:760px) {
  .palette-grid { grid-template-columns:1fr; }
}

  /* ── Meer acties: strakke dropdown ── */
  .page-heading { position:relative; }
  .ma-dropdown { position:relative; display:inline-flex; }
  .ma-trigger { display:inline-flex; align-items:center; gap:7px; padding-inline:14px; font-weight:700; }
  .ma-trigger-icon { display:grid; place-items:center; width:16px; height:16px; color:var(--muted); flex:0 0 auto; }
  .ma-trigger-icon svg { width:16px; height:16px; }
  button.ma-trigger:hover, .ma-trigger:hover { background:#f8faff; border-color:var(--brand); color:var(--brand-dark); }
  button.ma-trigger:hover .ma-trigger-icon, .ma-trigger:hover .ma-trigger-icon { color:var(--brand-dark); }
  .ma-menu { position:absolute; top:calc(100% + 10px); right:0; width:clamp(320px, 90vw, 380px); max-width:calc(100vw - 24px); max-height:min(72vh,560px); overflow:auto; background:#fff; border:1px solid #e5e9f0; border-radius:14px; box-shadow:0 16px 40px rgba(16,24,40,.18), 0 4px 12px rgba(16,24,40,.10); padding:10px; z-index:30; scrollbar-gutter:stable; }
  @media (max-width:760px) {
    .ma-dropdown { position:static; }
    .ma-menu { left:0; right:0; width:auto; max-width:none; top:calc(100% + 8px); }
    .ma-featured { padding:12px 14px; }
    .ma-section { padding:10px; }
  }
  @media (max-width:480px) {
    .ma-menu { padding:8px; }
    .ma-row { padding:9px 10px; }
  }
  .ma-menu[hidden] { display:none !important; }
  .ma-menu-inner { display:grid; gap:10px; }
  .ma-featured { display:flex; align-items:center; gap:12px; padding:14px 15px; border:1px solid #c7d7fe; border-radius:12px; background:linear-gradient(135deg,#f8f9ff 0%,#eef2ff 100%); color:var(--ink); text-decoration:none; transition:transform .14s,box-shadow .14s,border-color .14s; }
  .ma-featured:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(36,72,200,.14); border-color:#aabcfb; color:var(--ink); }
  .ma-featured:focus-visible { outline:3px solid #c7d7fe; outline-offset:2px; }
  .ma-featured-icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:10px; background:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(36,72,200,.22); }
  .ma-featured-icon svg { width:18px; height:18px; }
  .ma-featured-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .ma-featured-copy strong { font-size:13.5px; font-weight:800; line-height:1.25; letter-spacing:-.01em; }
  .ma-featured-copy small { color:var(--muted); font-size:12px; line-height:1.35; }
  .ma-featured-arrow { margin-left:auto; flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:#fff; border:1px solid #dbe2ee; color:var(--brand); font-weight:800; font-size:13px; transition:background .14s,color .14s,border-color .14s; }
  .ma-featured:hover .ma-featured-arrow { background:var(--brand); color:#fff; border-color:var(--brand); }
  .ma-section { padding:10px 10px 8px; border:1px solid #e5e9f0; border-radius:12px; background:#f8f9ff; }
  .ma-section-title { display:flex; align-items:center; gap:7px; margin:0 0 8px; color:#667085; font-size:11px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
  .ma-section-icon { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:#fff; border:1px solid #e5e9f0; color:#667085; flex:0 0 auto; }
  .ma-section-icon svg { width:11px; height:11px; }
  .ma-list { display:grid; gap:6px; }
  .ma-list form { margin:0; }
  .ma-row { display:flex; align-items:center; gap:11px; width:100%; padding:10px 11px; border:1px solid #d0d5dd; border-radius:8px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; transition:background .15s,border-color .15s,transform .12s,box-shadow .15s; }
  button.ma-row:hover, .ma-row:hover { background:#f8faff; border-color:var(--brand); color:var(--brand-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(16,24,40,.08); }
  .ma-row:focus-visible { outline:3px solid #c7d7fe; outline-offset:1px; border-color:var(--brand); }
  .ma-row--danger { color:#991b1b; border-color:#fecdd3; background:#fff; }
  .ma-row--danger .ma-row-icon { background:#fef3f2; color:#b42318; border:1px solid #fecdd3; }
  button.ma-row--danger:hover, .ma-row--danger:hover { background:#fff1f2; border-color:#fda29b; color:#991b1b; }
  .ma-row--ghost { background:#fff; border-color:#d0d5dd; }
  button.ma-row--ghost:hover, .ma-row--ghost:hover { background:#f9fafb; color:var(--ink); border-color:#d0d5dd; }
  .ma-row-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; border-radius:8px; background:var(--brand-soft); color:var(--brand-dark); border:1px solid #e5e9f0; }
  .ma-row-icon svg { width:14px; height:14px; }
  .ma-row-copy { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
  .ma-row-copy strong { font-size:13px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
  .ma-row-copy small { color:var(--muted); font-size:12px; line-height:1.35; font-weight:400; }
  .ma-row-arrow { flex:0 0 auto; width:16px; text-align:center; color:#98a2b3; font-weight:800; font-size:13px; transition:transform .14s,color .14s; }
  .ma-row:hover .ma-row-arrow { transform:translateX(2px); color:var(--brand-dark); }
  button.ma-row:hover .ma-row-copy strong { color:inherit; }
  button.ma-row:hover .ma-row-copy small { color:var(--muted); }
  button.ma-row--danger:hover .ma-row-copy strong { color:inherit; }
  button.ma-row--danger:hover .ma-row-copy small { color:var(--muted); }
  .ma-legalhold-field { display:grid; gap:8px; }
  .ma-legalhold-field label { margin:0; color:#667085; font-size:11px; font-weight:700; letter-spacing:.02em; }
  .ma-legalhold-field input { width:100%; padding:9px 11px; border:1px solid #d0d5dd; border-radius:8px; background:#fff; font-size:13px; transition:border-color .14s,box-shadow .14s; }
  .ma-legalhold-field input::placeholder { color:#98a2b3; }
  .ma-legalhold-field input:hover { border-color:#98a2b3; }
  .ma-legalhold-field input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
  .ma-legalhold-form { display:grid; gap:8px; }

/* Spotlight op een UI-onderdeel waarnaar de digitale medewerker verwijst.
   ai-highlight.js legt een lichte dim- en blurlaag over de rest van het scherm
   (vier stukken rond een uitsparing), tekent een dunne ring op de plek van het
   doel en zet daar een klein label bij. Alles ligt in een eigen laag: het
   onderdeel zelf houdt zijn eigen achtergrond, radius en opmaak, en de ring
   wordt niet afgeknipt door een kaart met overflow:hidden. Na ruim vier
   seconden ruimt het script de laag weer op. */
.ai-target-highlight {
  scroll-margin-block: 96px 48px;
}

.ai-spotlight-scrim {
  position: fixed;
  inset: 0;
  z-index: 61;
  background: rgb(15 23 42 / 26%);
  -webkit-backdrop-filter: blur(2px) saturate(.92);
  backdrop-filter: blur(2px) saturate(.92);
  pointer-events: none;
  opacity: 0;
  animation:
    ai-fade-in .28s ease-out both,
    ai-spotlight-out .55s ease-in 3.5s forwards;
}

.ai-spotlight {
  position: fixed;
  z-index: 62;
  box-sizing: border-box;
  border: 2px solid var(--brand);
  border-radius: 10px;
  box-shadow:
    0 0 0 5px rgb(49 94 251 / 10%),
    0 18px 44px -22px rgb(16 24 40 / 55%);
  pointer-events: none;
  opacity: 0;
  animation:
    ai-spotlight-in .3s cubic-bezier(.2, .7, .3, 1) both,
    ai-spotlight-out .55s ease-in 3.5s forwards;
}

.ai-spotlight-callout {
  position: fixed;
  z-index: 63;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: min(380px, calc(100vw - 24px));
  padding: 6px 13px 6px 6px;
  border: 1px solid #dbe3ff;
  border-radius: 10px;
  background: var(--paper);
  box-shadow:
    0 14px 32px -16px rgb(16 24 40 / 40%),
    0 2px 6px rgb(16 24 40 / 6%);
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  animation:
    ai-callout-in .32s cubic-bezier(.2, .7, .3, 1) .1s both,
    ai-callout-out .45s ease-in 3.55s forwards;
}
.ai-spotlight-callout::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: var(--ai-tail-left, 20px);
  width: 8px;
  height: 8px;
  border-right: 1px solid #dbe3ff;
  border-bottom: 1px solid #dbe3ff;
  border-bottom-right-radius: 2px;
  background: var(--paper);
  transform: rotate(45deg);
}
.ai-spotlight-callout[data-placement="below"]::after {
  top: -5px;
  bottom: auto;
  border: 0;
  border-top: 1px solid #dbe3ff;
  border-left: 1px solid #dbe3ff;
  border-top-left-radius: 2px;
  transform: rotate(45deg);
}
.ai-spotlight-callout[data-placement="inside"]::after {
  display: none;
}
.ai-spotlight-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.ai-spotlight-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ai-spotlight-kind {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.ai-spotlight-separator {
  flex: 0 0 auto;
  color: #c3cbe0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.ai-spotlight-title {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes ai-spotlight-in {
  from { opacity: 0; transform: scale(.992); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ai-spotlight-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes ai-callout-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ai-callout-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes ai-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-spotlight {
    animation:
      ai-fade-in .3s ease-out both,
      ai-spotlight-out .55s ease-in 3.5s forwards;
  }
  .ai-spotlight-callout {
    animation:
      ai-fade-in .32s ease-out .1s both,
      ai-callout-out .45s ease-in 3.55s forwards;
  }
}

/* Bulkacties op lijsten (offertes, klanten, akten, kostenblokken,
   teksttemplates). De balk verschijnt zodra er iets is aangevinkt; de
   selectievakjes staan in de tabel en de gedeelde component
   (js/bulk-actions.js) vult het formulier en het bevestigingsvenster.

   De balk is een eigen paneel binnen de kaart: één regel met de telling links
   en compacte acties rechts, zodat hij niet concurreert met de kaartkop of de
   paginaknop. */
[data-bulk-bar][hidden] { display: none; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #dbe2f5; border-radius: 12px; background: #f6f8ff; }
.bulk-bar-count { margin-right: auto; color: var(--muted); font-size: 13px; }
.bulk-bar-count strong { color: var(--brand-dark); font-weight: 800; }
.bulk-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bulk-bar-actions .button { min-height: 30px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; border-radius: 8px; }
.bulk-bar-actions .button .icon { width: 15px; height: 15px; }
.bulk-bar-actions .button.secondary { background: #fff; border: 1px solid var(--line); }
.bulk-bar-actions .button.secondary:hover { border-color: #b9c4e6; background: #fff; }
.bulk-bar-actions .button.danger { background: #fff; color: var(--danger); border-color: #fecdca; }
.bulk-bar-actions .button.danger:hover { background: #fef3f2; border-color: #fda29b; }
.bulk-bar-clear { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 4px 6px; border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; border-radius: 8px; }
.bulk-bar-clear:hover { color: var(--brand-dark); background: #eef1fb; }
.bulk-bar-clear .icon { width: 14px; height: 14px; }
.bulk-action-form { margin: 0; }
.bulk-confirm-copy { margin: 0; }
.bulk-confirm-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.bulk-confirm-list li { border-radius: 999px; padding: 3px 10px; background: #f2f4f7; color: #344054; font-size: 12px; font-weight: 750; }
@media (max-width: 720px) {
  .bulk-bar { align-items: stretch; }
  .bulk-bar-count { width: 100%; margin: 0; }
  .bulk-bar-actions { width: 100%; }
  .bulk-bar-actions .button { flex: 1 1 auto; justify-content: center; }
  .bulk-bar-clear { margin-left: auto; }
}
.table-select-heading { width: 44px; text-align: center; }
.table-select-cell { width: 44px; text-align: center; }
.table-select-heading input,
.table-select-cell input { width: auto; margin: 0; accent-color: var(--brand); }