:root {
    --bg: #f5f7f8;
    --panel: #ffffff;
    --text: #1f2933;
    --muted: #667085;
    --border: #d9e0e5;
    --primary: #7d1723;
    --primary-dark: #64121c;
    --danger: #a21d2d;
    --success: #236b45;
    --warning: #8a5a00;
    --radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
a { color: var(--primary); }
.topbar { min-height: 64px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 22px; position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.brand a { color: var(--text); text-decoration: none; font-size: 20px; }
.brand span { font-size: 12px; color: var(--muted); }
.userbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.userbox small { color: var(--muted); }
.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.sidebar { background: #fff; border-right: 1px solid var(--border); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.navlink { padding: 10px 12px; border-radius: 7px; text-decoration: none; color: var(--text); font-weight: 600; }
.navlink:hover, .navlink.active { background: #f2e8ea; color: var(--primary); }
.main { padding: 24px; min-width: 0; }
.public-main { width: min(460px, calc(100% - 32px)); margin: 8vh auto; }
.page-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
h1 { font-size: 26px; margin: 0; }
h2 { font-size: 18px; margin: 0 0 16px; }
.panel, .login-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cards.compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.stat-card span, .stat-card small { color: var(--muted); }
.stat-card strong { font-size: 27px; }
.form-grid, .filter-grid, .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.filter-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.detail-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.detail-item { padding: 8px 0; min-width: 0; }
.detail-item span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.detail-item strong { overflow-wrap: anywhere; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
label small { color: var(--muted); font-weight: 400; }
input, select, textarea { width: 100%; border: 1px solid #bac4cc; border-radius: 6px; padding: 9px 10px; background: #fff; color: var(--text); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(125,23,35,.12); border-color: var(--primary); }
input[readonly] { background: #f2f4f5; }
textarea { resize: vertical; }
.span-2 { grid-column: span 2; }
fieldset { border: 1px solid var(--border); border-radius: 7px; margin: 16px 0; padding: 12px; }
legend { font-weight: 700; padding: 0 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
label.check { flex-direction: row; align-items: center; font-weight: 500; }
label.check input { width: auto; }
.form-actions, .filter-actions, .toolbar, .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.form-actions, .filter-actions { margin-top: 16px; }
.toolbar { margin: 0 0 14px; }
.inline-form { display: inline; margin: 0; }
.button, button.button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 12px; border: 1px solid #aab5bd; border-radius: 6px; background: #fff; color: #26323a; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.button:hover { background: #f5f7f8; }
.button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.button.primary:hover { background: var(--primary-dark); }
.button.secondary { background: #fff; }
.button.danger { background: #fff; border-color: #d8a5ab; color: var(--danger); }
.button.small { min-height: 30px; padding: 5px 8px; font-size: 12px; }
.linkbutton { border: 0; background: transparent; color: var(--primary); text-decoration: underline; padding: 0; cursor: pointer; font: inherit; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: #475467; background: #f8fafb; position: sticky; top: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.total td { background: #f8fafb; }
.row-muted { opacity: .63; }
.empty { text-align: center; color: var(--muted); padding: 24px; }
.badge { display: inline-block; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 700; background: #eef2f4; }
.badge.success { background: #e8f3ed; color: var(--success); }
.badge.warning { background: #fff3d8; color: var(--warning); }
.badge.danger { background: #fbe9eb; color: var(--danger); }
.alert { border: 1px solid var(--border); border-radius: 7px; padding: 11px 13px; margin: 0 0 16px; background: #fff; }
.alert-success { background: #edf8f1; border-color: #b9dcc7; }
.alert-error { background: #fff0f1; border-color: #e4b2b8; }
.alert-warning { background: #fff8e6; border-color: #e6d09d; }
.alert-info { background: #eef5fa; border-color: #bfd5e3; }
.muted { color: var(--muted); }
code { white-space: pre-wrap; overflow-wrap: anywhere; }
.login-card form { display: grid; gap: 14px; }
@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; overflow-x: auto; padding: 8px; }
    .navlink { white-space: nowrap; }
    .main { padding: 16px; }
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .topbar { position: static; align-items: flex-start; padding: 12px; }
    .brand a { font-size: 17px; }
    .userbox { font-size: 12px; }
    .form-grid, .filter-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .main { padding: 12px; }
    .panel { padding: 12px; }
    h1 { font-size: 22px; }
}
.env-label, .env-login { display: inline-block; background: #fff3d8; color: #704700; border: 1px solid #dfc17b; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.env-login { margin-bottom: 12px; }

/* Compact relatieoverzicht met klikbare sortering en snelle acties. */
.relation-list-panel { padding: 12px 14px; }
.relation-table { min-width: 1040px; }
.relation-table th, .relation-table td { padding: 6px 8px; vertical-align: middle; }
.relation-table tbody tr:hover { background: #faf6f7; }
.relation-table .relation-id a, .relation-table .row-main-link { color: var(--text); text-decoration: none; }
.relation-table .relation-id a:hover, .relation-table .row-main-link:hover { color: var(--primary); text-decoration: underline; }
.relation-table .nowrap { white-space: nowrap; }
.sort-link { display: inline-flex; align-items: center; gap: 5px; width: 100%; color: #475467; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--primary); }
.sort-indicator { color: var(--primary); font-size: 9px; }
.actions-head { width: 112px; white-space: nowrap; }
.icon-actions { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.icon-action { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #b9c3ca; border-radius: 6px; color: #33414a; background: #fff; text-decoration: none; }
.icon-action:hover { color: var(--primary); border-color: #c28f96; background: #fbf5f6; }
.icon-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.relation-count { margin: 10px 2px 0; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* v3.0.3: compact betalingsscherm en zichtbare automatische relatienummering. */
.relation-form-panel { max-width: 1180px; }
.relation-form-grid { align-items: start; }

.payment-summary-panel { padding: 10px 14px; margin-bottom: 10px; }
.payment-summary-line { display: flex; align-items: center; gap: 28px; min-height: 42px; }
.payment-summary-item { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.payment-summary-item span { color: var(--muted); font-size: 11px; }
.payment-summary-item strong { font-size: 15px; }
.payment-summary-name { flex: 1; min-width: 220px; }
.payment-summary-actions { display: flex; gap: 6px; margin-left: auto; }
.payment-transaction-alert { margin-bottom: 10px; }

.payment-entry-panel { padding: 12px 14px; margin-bottom: 10px; }
.payment-entry-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.payment-entry-heading h2 { margin: 0; font-size: 16px; }
.payment-form-grid { display: grid; grid-template-columns: repeat(6, minmax(125px, 1fr)); gap: 7px 10px; align-items: end; }
.payment-form-grid label { gap: 3px; font-size: 12px; }
.payment-form-grid input, .payment-form-grid select, .payment-form-grid textarea { padding: 6px 8px; min-height: 32px; }
.payment-form-grid textarea { min-height: 52px; }
.payment-notes { grid-column: span 3; }
.payment-form-actions { display: flex; gap: 6px; align-items: flex-end; padding-bottom: 1px; }
.payment-form-actions .button { min-height: 32px; padding: 6px 10px; }

.payment-history-panel { padding: 12px 14px; margin-bottom: 10px; }
.payment-history-panel h2 { margin-bottom: 8px; font-size: 16px; }
.payment-history-table th, .payment-history-table td { padding: 6px 8px; vertical-align: middle; }
.payment-history-table td.actions { white-space: nowrap; }

@media (max-width: 1450px) {
    .payment-form-grid { grid-template-columns: repeat(4, minmax(145px, 1fr)); }
    .payment-notes { grid-column: span 2; }
}
@media (max-width: 950px) {
    .payment-form-grid { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
    .payment-notes { grid-column: span 1; }
}
@media (max-width: 700px) {
    .payment-summary-line { align-items: flex-start; flex-wrap: wrap; gap: 10px 18px; }
    .payment-summary-name { order: 3; flex-basis: 100%; }
    .payment-summary-actions { margin-left: 0; }
    .payment-form-grid { grid-template-columns: 1fr; }
    .payment-notes { grid-column: auto; }
}

/* v3.0.7: compacte, inhoudelijk gegroepeerde relatie-invoer. */
.relation-form-panel { max-width: 1500px; padding: 14px 16px; }
.relation-edit-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: start;
}
.relation-edit-grid label { min-width: 0; gap: 3px; font-size: 12px; }
.relation-edit-grid input,
.relation-edit-grid select,
.relation-edit-grid textarea { min-height: 34px; padding: 6px 8px; }
.relation-edit-grid textarea { min-height: 58px; }
.relation-edit-grid label small { font-size: 10px; line-height: 1.2; margin-top: 1px; }

/* Rij 1: administratieve identiteit. */
.rel-type { grid-column: span 2; }
.rel-subtype { grid-column: span 2; }
.rel-number { grid-column: span 2; }
.rel-company { grid-column: span 6; }

/* Rij 2: persoonsgegevens. */
.rel-gender { grid-column: span 2; }
.rel-initials { grid-column: span 2; }
.rel-firstnames { grid-column: span 4; }
.rel-correspondence-name { grid-column: span 4; margin:0; min-width:0; border:1px solid var(--border,#d4dce3); border-radius:7px; padding:5px 8px 6px; display:flex; gap:12px; align-items:center; min-height:34px; }
.rel-correspondence-name legend { padding:0 4px; font-size:10px; color:#64748b; }
.rel-correspondence-name .check { display:flex; flex-direction:row; align-items:center; gap:5px; font-size:11px; white-space:nowrap; }
.rel-correspondence-name input { min-height:0; width:auto; }
.rel-middle { grid-column: span 2; }
.rel-lastname { grid-column: span 6; }

/* Rij 3: volledig postadres op één regel. */
.rel-street { grid-column: span 5; }
.rel-house { grid-column: span 1; }
.rel-postcode { grid-column: span 2; }
.rel-city { grid-column: span 4; }

/* Rij 4: contactgegevens. */
.rel-country { grid-column: span 2; }
.rel-phone { grid-column: span 2; }
.rel-mobile { grid-column: span 2; }
.rel-email { grid-column: span 6; }

/* Rij 5: relatie-/betalingsinstellingen. */
.rel-start { grid-column: span 2; }
.rel-end { grid-column: span 2; }
.rel-period { grid-column: span 2; }
.rel-amount { grid-column: span 2; }
.rel-communication { grid-column: span 4; }

.rel-remarks { grid-column: span 12; }
.compact-actions { margin-top: 10px; }

@media (max-width: 1150px) {
    .relation-edit-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .relation-edit-grid > label { grid-column: span 2; }
    .relation-edit-grid .rel-company,
    .relation-edit-grid .rel-firstnames,
    .relation-edit-grid .rel-correspondence-name,
    .relation-edit-grid .rel-lastname,
    .relation-edit-grid .rel-street,
    .relation-edit-grid .rel-email,
    .relation-edit-grid .rel-remarks { grid-column: span 4; }
    .relation-edit-grid .rel-house,
    .relation-edit-grid .rel-initials,
    .relation-edit-grid .rel-amount { grid-column: span 1; }
}

@media (max-width: 720px) {
    .relation-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .relation-edit-grid > label { grid-column: span 1 !important; }
    .relation-edit-grid .rel-company,
    .relation-edit-grid .rel-firstnames,
    .relation-edit-grid .rel-correspondence-name,
    .relation-edit-grid .rel-lastname,
    .relation-edit-grid .rel-street,
    .relation-edit-grid .rel-email,
    .relation-edit-grid .rel-remarks { grid-column: span 2 !important; }
}

@media (max-width: 480px) {
    .relation-edit-grid { grid-template-columns: 1fr; }
    .relation-edit-grid > label { grid-column: auto !important; }
}

/* v3.1 - jaargebaseerde mailings */
.annual-mailing-form { display:grid; grid-template-columns: 130px 180px minmax(260px,1fr) minmax(240px,1fr); gap:10px 12px; align-items:end; margin-bottom:14px; }
.annual-mailing-form .span-2 { grid-column: span 2; }
.new-year-confirm { display:flex; align-items:flex-start; gap:8px; margin:12px 0 14px; padding:10px 12px; background:#fff8e8; border:1px solid #e3bd63; border-radius:7px; }
.new-year-confirm input { width:auto; margin-top:3px; }
.annual-preview-table input[type="checkbox"] { width:auto; }
.annual-preview-table td { vertical-align:middle; }
.mailing-extra { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.mailing-extra > div { margin-top:6px; }
.annual-report-filter { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.annual-report-filter > label { width:140px; }
.annual-report-actions { min-width:350px; }
.inline-action-form { display:flex; align-items:center; gap:5px; margin-top:5px; }
.inline-action-form input[type="text"] { width:150px; padding:5px 7px; min-height:30px; }
.inline-action-form input[type="date"] { width:140px; padding:5px 7px; min-height:30px; }
.label-profile-form { display:grid; grid-template-columns:minmax(250px,1fr) 160px 160px 190px; gap:10px 12px; align-items:end; margin-bottom:12px; }
.label-size-preview { min-height:58px; border:1px solid var(--border); border-radius:7px; padding:8px 10px; background:#f7f9fa; display:flex; flex-direction:column; justify-content:center; }
.label-size-preview span { font-size:16px; margin-top:2px; }
.template-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.template-tab { padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:#fff; text-decoration:none; color:var(--text); font-size:13px; }
.template-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.template-editor-grid { display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:12px; margin-bottom:12px; align-items:start; }
.template-editor-grid textarea { min-height:180px; font-family:inherit; line-height:1.4; }

@media (max-width: 1200px) {
    .annual-mailing-form { grid-template-columns: 150px 180px 1fr; }
    .annual-mailing-form .span-2 { grid-column: span 1; }
    .label-profile-form { grid-template-columns:1fr 150px 150px; }
    .label-size-preview { grid-column: span 3; }
    .template-editor-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
    .annual-mailing-form, .label-profile-form { grid-template-columns:1fr; }
    .annual-mailing-form .span-2, .label-size-preview { grid-column:auto; }
    .annual-report-actions { min-width:260px; }
    .inline-action-form { align-items:stretch; flex-direction:column; }
    .inline-action-form input[type="text"], .inline-action-form input[type="date"] { width:100%; }
}

/* v3.1.1 - flexible label sheet profiles */
.label-profile-form-v2 { display:grid; grid-template-columns:minmax(260px,1.4fr) repeat(4,minmax(115px,.65fr)); gap:10px 12px; align-items:end; margin-bottom:12px; }
.label-profile-form-v2 .label-profile-name { grid-column:span 1; }
.label-profile-form-v2 .label-size-preview { min-height:55px; }
@media (max-width:1200px) { .label-profile-form-v2 { grid-template-columns:repeat(3,minmax(140px,1fr)); } .label-profile-form-v2 .label-profile-name { grid-column:span 2; } }
@media (max-width:760px) { .label-profile-form-v2 { grid-template-columns:1fr 1fr; } .label-profile-form-v2 .label-profile-name, .label-profile-form-v2 .label-size-preview { grid-column:1 / -1; } }
@media (max-width:520px) { .label-profile-form-v2 { grid-template-columns:1fr; } .label-profile-form-v2 .label-profile-name, .label-profile-form-v2 .label-size-preview { grid-column:auto; } }

/* v3.2 - slimme briefsjablonen */
.letter-template-workspace { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:16px; align-items:start; }
.template-editor-grid-v2 { display:grid; grid-template-columns:1fr; gap:11px; }
.template-editor-grid-v2 label { margin:0; }
.template-editor-grid-v2 label > span { display:block; font-weight:700; margin-bottom:2px; }
.template-editor-grid-v2 label > span em { font-weight:400; color:var(--muted); font-style:normal; }
.template-editor-grid-v2 label > small { display:block; color:var(--muted); margin-bottom:5px; }
.template-editor-grid-v2 textarea { min-height:120px; line-height:1.42; font-family:inherit; resize:vertical; }
.template-editor-grid-v2 textarea:focus { outline:2px solid rgba(0,90,160,.18); border-color:var(--primary); }
.template-variable-panel { position:sticky; top:78px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; padding:12px; }
.template-variable-panel h3 { margin:0 0 5px; font-size:15px; }
.template-variable-list { display:grid; gap:6px; max-height:540px; overflow:auto; padding-right:2px; }
.template-variable { appearance:none; text-align:left; border:1px solid var(--border); border-radius:7px; background:#fff; padding:7px 8px; cursor:grab; color:var(--text); }
.template-variable:hover { border-color:var(--primary); background:#f2f7fb; }
.template-variable:active { cursor:grabbing; }
.template-variable strong { display:block; font-size:12px; }
.template-variable code { display:block; margin-top:2px; font-size:11px; color:var(--primary); white-space:normal; overflow-wrap:anywhere; }
.letter-live-preview { width:min(100%, 760px); min-height:760px; background:#fff; border:1px solid var(--border); box-shadow:0 3px 14px rgba(0,0,0,.06); padding:54px 64px; color:#111; font-size:14px; line-height:1.5; }
.letter-preview-address { white-space:pre-line; margin:0 0 24px; }
.letter-preview-date { text-align:left; margin:0 0 36px; }
.letter-preview-part { white-space:pre-wrap; margin-bottom:24px; }
.letter-preview-part.is-empty { display:none; }

/* v3.2 - printbare brieven en etiketten */
.print-body { background:#e8ebef; margin:0; color:#111; font-family:Arial, Helvetica, sans-serif; }
.print-toolbar { position:sticky; top:0; z-index:10; display:flex; gap:10px; align-items:center; padding:10px 14px; background:#fff; border-bottom:1px solid #ccd2d8; }
.print-empty { margin:30px auto; max-width:700px; background:#fff; padding:20px; border-radius:8px; }
.print-letter { box-sizing:border-box; width:210mm; min-height:297mm; margin:12px auto; background:#fff; padding:28mm 25mm 24mm; page-break-after:always; position:relative; font-size:11.5pt; line-height:1.45; }
.print-letter:last-of-type { page-break-after:auto; }
.print-letter-address { min-height:0; margin-bottom:8mm; }
.print-letter-date { text-align:left; margin:0 0 12mm; }
.print-letter-part { margin-bottom:7mm; }
.print-letter-part.footer { margin-top:10mm; }
.print-letter-meta { position:absolute; left:25mm; bottom:10mm; font-size:8pt; color:#777; }
.labels-print-body { background:#dfe3e8; }
.label-sheet { position:relative; box-sizing:border-box; width:210mm; height:297mm; margin:12px auto; background:#fff; page-break-after:always; overflow:hidden; }
.label-sheet:last-of-type { page-break-after:auto; }
.print-label { position:absolute; box-sizing:border-box; overflow:hidden; }
.print-label-inner { box-sizing:border-box; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; padding:2.2mm 3mm; font-size:10.5pt; line-height:1.18; overflow:hidden; }

@media (max-width:980px) {
    .letter-template-workspace { grid-template-columns:1fr; }
    .template-variable-panel { position:static; }
    .template-variable-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; }
}
@media (max-width:600px) {
    .template-variable-list { grid-template-columns:1fr; }
    .letter-live-preview { padding:28px 22px; min-height:620px; }
}

@page { size:A4 portrait; margin:0; }
@media print {
    .no-print { display:none !important; }
    .print-body, .labels-print-body { background:#fff !important; }
    .print-letter { margin:0; box-shadow:none; }
    .label-sheet { margin:0; }
}

/* v3.3 vrijwilligers en echte record-preview */
.volunteer-form-grid{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:10px 12px;align-items:end}.volunteer-form-grid label{min-width:0}.volunteer-form-grid .span-2{grid-column:span 2}.volunteer-form-grid .span-3{grid-column:span 3}.inline-check{align-self:end;padding-bottom:10px}.department-checkbox-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:8px 12px;margin:10px 0 18px}.department-check{display:flex;gap:14px;justify-content:space-between;border:1px solid var(--border,#d4dce3);border-radius:8px;padding:8px 10px;background:#fff}.department-check.inactive{opacity:.55}.coordinator-check{font-size:.9em}.block-label{display:block;margin-top:12px}.block-label textarea{width:100%}.compact-form-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:10px 12px;align-items:end}.coordinator-list{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:8px 14px}.coordinator-list label{border:1px solid #d8dee5;border-radius:7px;padding:8px}.coordinator-list small{display:block;color:#64748b;margin-left:24px}.mail-recipient-box{width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.badge.warning{display:inline-block;margin-left:6px;background:#fff3cd;color:#7a5900;border-radius:999px;padding:2px 7px;font-size:.75rem}.preview-part-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.preview-part-grid article{border:1px solid #d9e0e6;border-radius:9px;padding:12px;background:#fff}.preview-text{white-space:normal;min-height:70px}.preview-text.is-empty{color:#94a3b8;font-style:italic}.template-preview-picker{max-width:760px;margin:10px 0 14px}.template-style-row{display:grid;grid-template-columns:minmax(300px,600px) 1fr;gap:18px;align-items:end;margin-bottom:14px}.volunteer-table .badge{white-space:nowrap}
@media(max-width:1250px){.volunteer-form-grid{grid-template-columns:repeat(4,minmax(130px,1fr))}.department-checkbox-grid,.coordinator-list{grid-template-columns:repeat(2,minmax(220px,1fr))}.preview-part-grid{grid-template-columns:1fr}.compact-form-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}}
@media(max-width:720px){.volunteer-form-grid,.compact-form-grid,.department-checkbox-grid,.coordinator-list{grid-template-columns:1fr}.volunteer-form-grid .span-2,.volunteer-form-grid .span-3{grid-column:span 1}.template-style-row{grid-template-columns:1fr}}

/* v3.3.1 - relaties/participanten */
.rel-relation-kind { grid-column: span 3; }
.rel-relation-desc { grid-column: span 9; }
.rel-attention { grid-column: span 6; }
.rel-salutation { grid-column: span 6; }
@media (max-width:1150px) {
    .relation-edit-grid .rel-relation-kind { grid-column: span 2; }
    .relation-edit-grid .rel-relation-desc { grid-column: span 4; }
    .relation-edit-grid .rel-attention,
    .relation-edit-grid .rel-salutation { grid-column: span 3; }
}
@media (max-width:720px) {
    .relation-edit-grid .rel-relation-kind,
    .relation-edit-grid .rel-relation-desc,
    .relation-edit-grid .rel-attention,
    .relation-edit-grid .rel-salutation { grid-column: span 2 !important; }
}


/* v3.3.4 - uploadbaar logo op brieven */
.letter-logo-settings-grid{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);gap:18px;align-items:start}
.letter-logo-settings-preview,.letter-logo-settings-empty{min-height:120px;border:1px solid var(--border,#d4dce3);border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px}
.letter-logo-settings-preview img{display:block;max-width:100%;max-height:100px;width:auto;height:auto;object-fit:contain}
.letter-logo-settings-empty{color:#64748b;font-style:italic}
.letter-logo-settings form+form{margin-top:10px}
.letter-preview-logo{margin:0 0 24px}
.letter-preview-logo img{display:block;width:auto;height:auto;max-height:40mm;max-width:100%;object-fit:contain}
.print-letter.has-logo{padding-top:16mm}
.print-letter-logo{margin:0 0 8mm;max-width:160mm}
.print-letter-logo img{display:block;width:auto;height:auto;max-height:40mm;max-width:160mm;object-fit:contain}
@media(max-width:720px){.letter-logo-settings-grid{grid-template-columns:1fr}}


/* v3.3.5 - organisatie-/contactgegevens rechtsboven in briefhoofd */
.letter-header-settings textarea{width:100%;max-width:900px;min-height:170px;line-height:1.4;font-family:inherit;resize:vertical}
.letter-preview-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,30%);gap:16px 28px;align-items:start;justify-content:space-between;min-height:40mm;margin-bottom:28px}
.letter-preview-header:has(.letter-preview-logo):not(:has(.letter-preview-sender)){grid-template-columns:1fr}
.letter-preview-header:has(.letter-preview-sender):not(:has(.letter-preview-logo)){grid-template-columns:minmax(0,1fr) minmax(220px,30%)}
.letter-preview-logo{margin:0;min-width:0;align-self:start}
.letter-preview-logo img{display:block;width:auto;height:auto;max-height:40mm;max-width:100%;object-fit:contain}
.letter-preview-sender{grid-column:2;grid-row:1;justify-self:end;align-self:start;width:100%;max-width:30%;min-width:220px;font-size:11.5px;line-height:1.32;white-space:normal;color:#111;text-align:left;margin-top:0}
.print-letter-header{display:grid;grid-template-columns:minmax(0,1fr) 58mm;gap:4mm 8mm;align-items:start;justify-content:space-between;min-height:40mm;margin-bottom:8mm}
.print-letter-header:has(.print-letter-logo):not(:has(.print-letter-sender)){grid-template-columns:1fr}
.print-letter-header:has(.print-letter-sender):not(:has(.print-letter-logo)){grid-template-columns:minmax(0,1fr) 58mm}
.print-letter-logo{margin:0;max-width:none;min-width:0;align-self:start}
.print-letter-logo img{display:block;width:auto;height:auto;max-height:40mm;max-width:100%;object-fit:contain}
.print-letter-sender{grid-column:2;grid-row:1;justify-self:end;align-self:start;width:58mm;font-size:8.8pt;line-height:1.27;color:#111;text-align:left;margin-top:0}
.print-letter.has-logo{padding-top:16mm}
@media(max-width:720px){.letter-preview-header{grid-template-columns:1fr;min-height:0}.letter-preview-sender{grid-column:auto;grid-row:auto;justify-self:start;max-width:none;min-width:0}}

/* v3.3.7 - plaats + datum links onder ontvangersadres */
.letter-date-place-setting{display:block;max-width:420px;margin-top:14px}
.letter-date-place-setting small{display:block;margin-top:4px;color:var(--muted)}

/* v3.4.0 - briefhoofd: afzender rechts mag naast ontvangersblok doorlopen */
.letter-live-preview{position:relative}
.letter-preview-header{display:block;position:relative;min-height:0;margin-bottom:10px}
.letter-preview-logo{max-width:66%;margin:0}
.letter-preview-sender{position:absolute;top:0;right:0;width:30%;max-width:30%;min-width:0;font-size:11.5px;line-height:1.32;text-align:left}
.letter-preview-address{margin-top:0;margin-bottom:20px}
.print-letter-header{display:block;position:relative;min-height:0;margin-bottom:2mm}
.print-letter-logo{max-width:112mm;margin:0}
.print-letter-sender{position:absolute;top:0;right:0;width:58mm;font-size:8.8pt;line-height:1.27;text-align:left}
.print-letter-address{margin-top:0;margin-bottom:7mm}
@media(max-width:720px){.letter-preview-sender{position:static;width:100%;max-width:none;margin-top:12px}.letter-preview-logo{max-width:100%}}

/* v3.4.0 - gebruikers met meerdere rollen */
.role-fieldset{margin-top:16px}
.role-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px 14px}
.role-check{align-items:flex-start;border:1px solid var(--border);border-radius:8px;padding:9px 10px;background:#fff}
.role-check span{display:flex;flex-direction:column;gap:2px}
.role-check small{color:var(--muted);font-weight:400}


/* v3.4.1 - briefadres iets lager; klikbare dashboardkaarten */
.letter-preview-address{margin-top:30px;margin-bottom:20px}
.print-letter-address{margin-top:8mm;margin-bottom:7mm}
.stat-card-link{color:inherit;text-decoration:none;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.stat-card-link:hover{box-shadow:0 3px 12px rgba(15,23,42,.10);transform:translateY(-1px);border-color:#b8c3ce}
.stat-card-link:focus-visible{outline:2px solid var(--accent,#9b1622);outline-offset:2px}

/* v3.4.4 - voornaam/voornamen en correspondentievoorkeur */
@media(max-width:720px){.relation-edit-grid .rel-correspondence-name{grid-column:span 2 !important;flex-wrap:wrap}}
@media(max-width:480px){.relation-edit-grid .rel-correspondence-name{grid-column:auto !important}}


/* v3.4.5 - organisatie zonder contactpersoon */
.rel-no-contact{grid-column:span 2;align-self:end;min-height:34px;display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid var(--border,#d4dce3);border-radius:7px;background:#fff}
.rel-no-contact input{width:auto;min-height:0}
.person-contact-field:has(input:disabled),.person-contact-field:has(select:disabled){opacity:.55}
@media(max-width:720px){.relation-edit-grid .rel-no-contact{grid-column:span 2}}
@media(max-width:480px){.relation-edit-grid .rel-no-contact{grid-column:auto}}


/* v3.4.7 - rustige lijniconen en compactere persoonsgegevens */
.navlink{display:flex;align-items:center;gap:9px}
.nav-icon{width:18px;height:18px;flex:0 0 18px;color:#667085;transition:color .12s ease}
.navlink:hover .nav-icon,.navlink.active .nav-icon{color:var(--primary)}
.page-title h1{display:flex;align-items:center;gap:10px}
.page-title-icon{width:25px;height:25px;flex:0 0 25px;color:var(--primary)}
.stat-card-label{display:flex;align-items:center;gap:7px;color:var(--muted)}
.stat-card-label>span{color:inherit}
.stat-card-icon{width:17px;height:17px;flex:0 0 17px;color:var(--primary)}
.stat-card-link{text-decoration:none;color:inherit;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.stat-card-link:hover{border-color:#c9a8ad;box-shadow:0 2px 7px rgba(16,24,40,.07);transform:translateY(-1px)}
@media(max-width:900px){.nav-icon{width:16px;height:16px;flex-basis:16px}.navlink{gap:6px}}


/* v3.5.0 - communicatievoorkeuren */
.communication-preferences{border:1px solid var(--border,#d4dce3);border-radius:8px;padding:7px 10px 8px;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;min-height:58px;background:#fbfcfd}
.communication-preferences legend{padding:0 5px;font-size:11px;font-weight:700;color:#475467}
.communication-preferences .check{display:flex;flex-direction:row;align-items:center;gap:6px;margin:0;white-space:nowrap}
.communication-preferences input[type="checkbox"]{width:auto;min-height:0}
.communication-preferences small{width:100%;font-size:10px;color:#667085}
.communication-preferences .is-disabled{opacity:.48}
.volunteer-form-grid .communication-preferences.span-3{grid-column:span 3}
@media(max-width:720px){.communication-preferences{align-items:flex-start;flex-direction:column}.volunteer-form-grid .communication-preferences.span-3{grid-column:span 1}}


/* v3.5.1 - wachtwoordherstel */
.login-links{margin-top:12px;text-align:center}
.login-links a{color:var(--primary);font-weight:600;text-decoration:none}
.login-links a:hover{text-decoration:underline}


/* v3.6.0 - digitale nieuwsbrief */
.newsletter-status-line{margin:0 0 14px}
.newsletter-types{border:1px solid var(--border,#d4dce3);border-radius:8px;padding:8px 12px;display:flex;gap:10px 20px;flex-wrap:wrap;margin:12px 0}
.newsletter-types legend{font-size:12px;font-weight:700;padding:0 5px}
.newsletter-types .check{display:flex;flex-direction:row;gap:6px;align-items:center;margin:0}
.newsletter-eligible{padding:10px 12px;margin:10px 0 14px;border-radius:8px;background:#f8fafc;border:1px solid var(--border,#d4dce3);font-size:13px}
.newsletter-editor-toolbar{display:flex;gap:5px;flex-wrap:wrap;padding:8px;border:1px solid var(--border,#d4dce3);border-bottom:0;border-radius:8px 8px 0 0;background:#f8fafc}
.newsletter-editor-toolbar button{border:1px solid #cbd5e1;background:#fff;border-radius:5px;min-height:30px;padding:4px 9px;cursor:pointer}
.newsletter-variables{padding:8px 10px;border-left:1px solid var(--border,#d4dce3);border-right:1px solid var(--border,#d4dce3);background:#fff7e6}
.newsletter-variables>div{display:flex;gap:5px;flex-wrap:wrap;margin:5px 0}
.newsletter-editor{min-height:430px;padding:18px;background:#ffe5b3;color:#985d25;border:1px solid var(--border,#d4dce3);border-radius:0 0 8px 8px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5;outline:none;overflow:auto}
.newsletter-editor h1,.newsletter-editor h2,.newsletter-editor h3{color:#985d25}.newsletter-editor img{max-width:100%;height:auto}.newsletter-editor hr{border:0;border-top:1px solid #985d25}
.inline-upload{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.newsletter-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.newsletter-assets figure{margin:0;border:1px solid var(--border,#d4dce3);border-radius:8px;padding:8px;background:#fff}
.newsletter-assets img{width:100%;height:120px;object-fit:contain;background:#f8fafc}.newsletter-assets figcaption{font-size:11px;word-break:break-word;margin:6px 0}
.newsletter-test-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px}.newsletter-test-form label{min-width:280px}
.newsletter-progress{padding:12px;border:1px solid var(--border,#d4dce3);border-radius:8px;margin:10px 0;background:#f8fafc}
.text-danger{color:#a31324}
@media(max-width:720px){.newsletter-editor{min-height:320px}.newsletter-test-form label{min-width:100%}}

.asset-actions{display:flex;gap:5px;flex-wrap:wrap}


/* v3.6.2 - standaard nieuwsbriefheaders */
.newsletter-default-headers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:16px}
.newsletter-default-header-card{border:1px solid var(--border,#d4dce3);border-radius:10px;padding:14px;background:#fff}
.newsletter-default-header-card h3{margin:0 0 10px}
.newsletter-default-header-card img{display:block;width:100%;max-width:600px;height:auto;max-height:190px;object-fit:contain;object-position:left center;background:#f8fafc;border:1px solid #e4e8ec}
.newsletter-default-empty{min-height:90px;display:flex;align-items:center;justify-content:center;background:#f8fafc;border:1px dashed #cbd5df;border-radius:6px;color:#667085;margin-bottom:10px;padding:10px;text-align:center}
.newsletter-default-upload{display:grid;gap:8px;margin-top:12px}
.newsletter-default-upload input[type=file]{max-width:100%}


/* v3.6.3 - één vaste doelgroep per nieuwsbriefsoort */
.newsletter-kind-note{margin-top:-4px;margin-bottom:12px;padding:9px 11px;border-left:3px solid var(--primary);background:#faf6f7;color:#475467;font-size:12px}


/* v3.6.5 - visuele keuze voor nieuwsbriefkop */
.newsletter-header-picker{border:0;padding:0;margin:18px 0 0;min-width:0}
.newsletter-header-picker>legend{font-size:14px;font-weight:700;padding:0;margin:0 0 8px}
.newsletter-header-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px}
.newsletter-header-option{display:block;cursor:pointer;margin:0;min-width:0}
.newsletter-header-option>input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.newsletter-header-card{display:flex;flex-direction:column;gap:6px;height:100%;padding:9px;border:2px solid #d7dee5;border-radius:9px;background:#fff;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.newsletter-header-option:hover .newsletter-header-card{border-color:#b98a92;box-shadow:0 2px 7px rgba(16,24,40,.08);transform:translateY(-1px)}
.newsletter-header-option>input[type="radio"]:checked+.newsletter-header-card{border-color:var(--primary);box-shadow:0 0 0 2px rgba(148,27,45,.12)}
.newsletter-header-option>input[type="radio"]:focus-visible+.newsletter-header-card{outline:2px solid #2b6cb0;outline-offset:2px}
.newsletter-header-option>input[type="radio"]:disabled+.newsletter-header-card{cursor:default;opacity:.72;transform:none;box-shadow:none}
.newsletter-header-thumb{height:92px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:5px;background:#f5f7f9;border:1px solid #e0e5ea}
.newsletter-header-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.newsletter-header-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:8px;text-align:center;color:#667085;font-size:12px;line-height:1.35}
.newsletter-header-none{font-size:38px;font-weight:300;color:#98a2b3}
.newsletter-header-card strong{font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.newsletter-header-card small{font-size:10.5px;color:#667085;line-height:1.25}
.newsletter-header-help{display:block;margin-top:8px;color:#667085}
@media(max-width:640px){.newsletter-header-options{grid-template-columns:repeat(2,minmax(0,1fr))}.newsletter-header-thumb{height:78px}}


/* v3.6.7 - uitsluitend echte headerafbeeldingen */
.newsletter-header-default-badge{display:inline-block;align-self:flex-start;padding:3px 6px;border-radius:999px;background:#f7e8eb;color:var(--primary);font-size:10px;font-weight:700;line-height:1.2}


/* v3.7.0 - nieuwsbriefartikelen */
.newsletter-articles-titlebar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px}
.newsletter-articles-titlebar h2{margin:0 0 3px}
.newsletter-articles-titlebar p{margin:0}
.newsletter-articles{display:grid;gap:16px;margin-top:12px}
.newsletter-article-card{border:1px solid #d8dfe5;border-radius:10px;padding:14px;background:#fff;transition:border-color .12s ease,box-shadow .12s ease}
.newsletter-article-card.is-active{border-color:#b67580;box-shadow:0 0 0 2px rgba(148,27,45,.08)}
.newsletter-article-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.newsletter-article-number{font-size:13px;font-weight:700;color:var(--primary)}
.newsletter-article-actions{display:flex;gap:6px;flex-wrap:wrap}
.newsletter-article-card>label{display:block;margin-bottom:9px}
.newsletter-article-editor{min-height:145px;border:1px solid #b8c5d0;border-radius:6px;background:#fff;padding:12px;outline:none;overflow:auto}
.newsletter-article-editor:focus{border-color:#9b3949;box-shadow:0 0 0 2px rgba(148,27,45,.10)}
.newsletter-article-editor h2{color:#985d25}
.newsletter-article-editor img{max-width:100%;height:auto}
.newsletter-article-editor:empty:before{content:'Schrijf hier de tekst van dit artikel…';color:#98a2b3}
@media(max-width:700px){.newsletter-articles-titlebar,.newsletter-article-head{flex-direction:column;align-items:stretch}.newsletter-article-actions{justify-content:flex-start}}


/* v3.7.1 - vaste, niet-wijzigbare nieuwsbriefheader */
.newsletter-fixed-header-label{font-weight:700;margin:18px 0 8px}
.newsletter-fixed-header{display:block;max-width:600px}
.newsletter-fixed-header img{display:block;width:auto;max-width:100%;height:auto;border:0;border-radius:0;background:transparent;box-shadow:none;margin:0}
.newsletter-fixed-header-warning{margin-top:8px;max-width:760px}


/* v3.7.2 - WYSIWYG, consistente koppen, inline afbeeldingen en live voorbeeld */
.newsletter-article-top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.newsletter-article-title-input{font-family:Arial,Helvetica,sans-serif!important;font-size:21px!important;line-height:1.25!important;font-weight:700!important;color:#985d25!important;background:#ffe5b3!important}
.newsletter-article-media-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 8px}
.newsletter-article-upload-status{font-size:12px;color:#667085}
.newsletter-article-editor{font-family:Arial,Helvetica,sans-serif!important;font-size:15px!important;line-height:1.5!important;color:#985d25!important;background:#ffe5b3!important}
.newsletter-article-editor p,.newsletter-article-editor li,.newsletter-article-editor div{font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5;color:#985d25}
.newsletter-article-editor h1{font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:1.25;color:#985d25}
.newsletter-article-editor h2{font-family:Arial,Helvetica,sans-serif;font-size:21px;line-height:1.25;color:#985d25}
.newsletter-article-editor h3{font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.3;color:#985d25}
.newsletter-article-editor a{color:#7b4317}
.newsletter-article-editor hr{border:0;border-top:1px solid #985d25;margin:20px 0}
.newsletter-live-preview-panel{margin-top:20px;padding-top:14px;border-top:1px solid #d8dfe5}
.newsletter-live-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.newsletter-live-preview-panel iframe{display:block;width:100%;height:760px;border:1px solid #cbd5df;border-radius:8px;background:#fff}
@media(max-width:700px){.newsletter-article-top-actions{justify-content:flex-start}.newsletter-live-preview-panel iframe{height:620px}}


/* v3.8.0 - grafische nieuwsbriefbouwer */
.newsletter-builder-meta-head,.builder-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.newsletter-builder-meta-head h2{margin:0 0 3px}.newsletter-builder-meta-head p{margin:0}
.newsletter-builder-panel{padding:0!important;overflow:hidden}
.builder-topbar{align-items:center;padding:10px 12px;border-bottom:1px solid #d8dfe5;background:#fff}
.builder-view-switch,.builder-top-actions{display:flex;gap:7px;align-items:center}
.builder-view{border:1px solid #cbd5df;background:#fff;border-radius:6px;padding:7px 10px;cursor:pointer;font-weight:600}
.builder-view.active{background:#941b2d;color:#fff;border-color:#941b2d}
.newsletter-builder-layout{display:grid;grid-template-columns:230px minmax(560px,1fr) 280px;min-height:780px;background:#eef1f4}
.builder-left,.builder-right{background:#fff;min-width:0}
.builder-left{border-right:1px solid #d8dfe5}.builder-right{border-left:1px solid #d8dfe5}
.builder-left,.builder-right{position:relative}
.builder-tabs{display:flex;border-bottom:1px solid #d8dfe5}.builder-tabs button{flex:1;padding:11px;border:0;background:#fff;font-weight:700;cursor:pointer}.builder-tabs button.active{color:#941b2d;border-bottom:3px solid #941b2d}
.builder-tab-panel{display:none;padding:12px}.builder-tab-panel.active{display:block}
.builder-block-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.builder-block-choice{display:flex;gap:8px;align-items:center;text-align:left;border:1px solid #d7dee5;background:#fff;border-radius:8px;padding:9px;cursor:grab;min-height:66px}
.builder-block-choice:hover{border-color:#a9616d;background:#fff9fa}.builder-block-icon{font-size:20px;width:24px;text-align:center;color:#941b2d}.builder-block-choice strong,.builder-block-choice small{display:block}.builder-block-choice small{font-size:10px;color:#667085;margin-top:2px}
.newsletter-builder-variables{margin-top:18px;padding-top:14px;border-top:1px solid #e4e8ec}.newsletter-builder-variables strong{display:block;margin-bottom:8px}.builder-variable{border:1px solid #d4dce3;background:#fff7df;border-radius:999px;padding:5px 8px;margin:0 4px 5px 0;font-size:11px;cursor:pointer}
.builder-style-grid{display:grid;gap:10px}.builder-style-field{display:grid;grid-template-columns:1fr 48px;align-items:center;gap:8px}.builder-style-field input[type=color]{width:48px;height:32px;border:1px solid #ccd5dd;padding:2px}.builder-style-wide{grid-template-columns:1fr}.builder-style-wide select{width:100%}
.builder-stage{padding:24px;overflow:auto;background:#e7eaee}
.builder-canvas-viewport{width:660px;max-width:100%;margin:0 auto;transition:width .2s ease;background:var(--b-page);padding:18px;box-shadow:0 6px 24px rgba(16,24,40,.10)}
.builder-canvas-viewport.mobile{width:390px}.builder-canvas{--b-page:#ffe5b3;--b-content:#ffe5b3;--b-text:#985d25;--b-heading:#985d25;--b-accent:#985d25;--b-link:#7b4317;--b-button:#985d25;--b-button-text:#fff;--b-font:Arial,Helvetica,sans-serif;width:600px;max-width:100%;margin:0 auto;background:var(--b-content);color:var(--b-text);font-family:var(--b-font);box-shadow:0 1px 4px rgba(0,0,0,.10)}
.builder-canvas-viewport.mobile .builder-canvas{width:100%}
.builder-email-label{padding:9px 18px;font-size:11px}.builder-header img{display:block;width:100%;height:auto}.builder-header-placeholder{padding:35px 18px;text-align:center;background:#f7f7f7;color:#667085}
.builder-date{padding:12px 18px 8px;text-align:right;font-size:14px;font-style:italic}.builder-accent-line{height:1px;background:var(--b-accent);margin:8px 18px}
.builder-toc{padding:8px 18px 5px}.builder-toc ul{padding-left:23px}.builder-toc li{margin:2px 0}
.builder-articles{padding:0 18px}.builder-article{position:relative;margin:12px 0 18px;border:1px dashed transparent;border-radius:7px}.builder-article:hover{border-color:#c69da4}
.builder-article-bar{display:flex;justify-content:space-between;align-items:center;min-height:27px;margin:-1px -1px 6px;padding:3px 6px;background:#f8eef0;color:#7e1727;font-size:11px;border-radius:7px 7px 0 0;opacity:.2;transition:opacity .15s}.builder-article:hover .builder-article-bar{opacity:1}.builder-article-bar button{border:0;background:none;color:#7e1727;font-size:11px;cursor:pointer}.builder-article-drag,.builder-drag{cursor:grab}
.builder-article-title{font-size:21px;line-height:1.25;font-weight:700;color:var(--b-heading);outline:none;margin:0 0 12px}.builder-article-title:focus{box-shadow:0 0 0 2px rgba(148,27,45,.16);border-radius:3px}
.builder-block{position:relative;margin:6px -7px;border:1px solid transparent;border-radius:6px}.builder-block:hover,.builder-block.selected{border-color:#b56f7a;box-shadow:0 0 0 1px rgba(148,27,45,.06)}.builder-block-toolbar{position:absolute;z-index:4;top:-25px;right:0;display:flex;align-items:center;gap:5px;background:#941b2d;color:#fff;border-radius:5px 5px 0 0;padding:3px 5px;font-size:10px;opacity:0;pointer-events:none}.builder-block:hover .builder-block-toolbar,.builder-block.selected .builder-block-toolbar{opacity:1;pointer-events:auto}.builder-block-toolbar button{border:0;background:none;color:#fff;cursor:pointer;padding:0 3px}.builder-block-inner{padding:6px}
.builder-richtext,.builder-heading-block,.builder-columns-content>div{outline:none;min-height:25px}.builder-richtext:focus,.builder-heading-block:focus,.builder-columns-content>div:focus{box-shadow:inset 0 0 0 1px rgba(148,27,45,.22)}
.builder-heading-block{font-weight:700;color:var(--b-heading)}.builder-image-placeholder{padding:30px 12px;text-align:center;background:#f6f7f8;border:1px dashed #aeb8c1;color:#667085}.builder-image-content img{max-width:100%;height:auto}
.builder-button-content span{display:inline-block;padding:11px 18px;border-radius:4px;font-weight:700}.builder-divider-content{height:1px;margin:18px 0}.builder-spacer-content{background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(148,27,45,.06) 5px,rgba(148,27,45,.06) 10px);display:flex;align-items:center;justify-content:center;color:#8b6c72;font-size:10px}
.builder-columns-content{display:grid;grid-template-columns:1fr 1fr}.builder-columns-content>div{min-width:0}
.builder-add-block-inline,.builder-add-article-inline{width:100%;border:1px dashed #bf929a;background:transparent;color:#941b2d;border-radius:6px;padding:7px;cursor:pointer;opacity:.35}.builder-article:hover .builder-add-block-inline,.builder-add-article-inline:hover{opacity:1}.builder-add-article-inline{margin:4px 18px 14px;width:calc(100% - 36px)}
.builder-footer-preview{padding:10px 18px 24px;font-size:11px}
.builder-inspector-title{padding:13px 14px;border-bottom:1px solid #d8dfe5;font-weight:700}.builder-inspector{padding:13px;position:sticky;top:0}.builder-inspector-empty{color:#667085}.builder-inspector-block-title{font-size:17px;font-weight:700;margin-bottom:12px}.builder-inspector-field{display:grid;gap:5px;margin-bottom:11px}.builder-inspector-field>span{font-size:11px;font-weight:700;color:#475467}.builder-inspector-field input,.builder-inspector-field select{width:100%}.builder-inspector-field input[type=color]{height:38px}.builder-inspector-field output{font-size:11px;color:#667085}
.builder-mini-toolbar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}.builder-mini-toolbar button{border:1px solid #cbd5df;background:#fff;border-radius:5px;padding:5px 7px;cursor:pointer}.builder-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:5px!important;font-size:11px;margin-top:4px}.builder-check input{width:auto!important}
.builder-assets-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}.builder-asset-mini{border:2px solid transparent;background:#f5f6f7;padding:2px;border-radius:5px;cursor:pointer;aspect-ratio:1}.builder-asset-mini.active{border-color:#941b2d}.builder-asset-mini img{width:100%;height:100%;object-fit:cover}.builder-upload-button{display:block;border:1px dashed #a7b1ba;padding:8px;text-align:center;border-radius:6px;cursor:pointer;margin-bottom:12px}
.builder-savebar{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#fff;border:1px solid #d8dfe5;box-shadow:0 -3px 12px rgba(16,24,40,.08)}
.newsletter-live-preview-panel{margin-top:16px}.newsletter-live-preview-panel iframe{width:100%;height:780px;border:1px solid #cbd5df;border-radius:8px;background:#fff}
.builder-readonly-note{padding:12px;background:#f8fafc;color:#667085}
@media(max-width:1250px){.newsletter-builder-layout{grid-template-columns:190px minmax(500px,1fr) 240px}.builder-block-palette{grid-template-columns:1fr}}
@media(max-width:980px){.newsletter-builder-layout{grid-template-columns:1fr}.builder-left,.builder-right{border:0;border-bottom:1px solid #d8dfe5}.builder-stage{order:2}.builder-right{order:3}.builder-left{order:1}.builder-block-palette{grid-template-columns:repeat(3,1fr)}.builder-inspector{position:static}}
@media(max-width:650px){.builder-block-palette{grid-template-columns:1fr 1fr}.builder-stage{padding:8px}.builder-canvas-viewport{padding:6px}.builder-topbar,.newsletter-builder-meta-head{flex-direction:column;align-items:stretch}}


/* v3.8.1 - vaste footers per nieuwsbriefsoort */
.newsletter-footer-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
.newsletter-footer-card{border:1px solid #d8dfe5;border-radius:10px;padding:14px;background:#fff}
.newsletter-footer-card h3{margin:0 0 10px}
.newsletter-footer-toolbar{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.newsletter-footer-toolbar button{border:1px solid #cbd5df;background:#fff;border-radius:5px;padding:5px 8px;cursor:pointer}
.newsletter-footer-toolbar button:hover{border-color:#9a4654;background:#fff7f8}
.newsletter-footer-editor{min-height:125px;padding:14px;border:1px solid #b9c5cf;border-radius:7px;background:#ffe5b3;color:#985d25;font:12px/1.5 Arial,Helvetica,sans-serif;outline:none}
.newsletter-footer-editor:focus{border-color:#941b2d;box-shadow:0 0 0 2px rgba(148,27,45,.10)}
.newsletter-footer-editor a{color:#7b4317}
.newsletter-footer-unsubscribe{display:flex;align-items:center;gap:7px;margin:11px 0 5px;font-weight:600}
.newsletter-footer-unsubscribe input{width:auto}
.newsletter-footer-unsubscribe-preview{padding:8px 10px;border-radius:6px;background:#f8fafc;color:#667085;font-size:11px;text-align:center}
.alert.compact{padding:9px 11px;margin:11px 0 5px;font-size:12px}
.builder-footer-preview{padding:10px 18px 24px;font-size:12px;line-height:1.5;text-align:center;color:var(--b-text)}
.builder-footer-preview p{margin:4px 0}
.builder-footer-preview a{color:var(--b-link)}
.builder-unsubscribe-preview{font-size:11px;margin-top:12px!important}
@media(max-width:720px){.newsletter-footer-settings{grid-template-columns:1fr}}


/* v3.8.3 - lokale afbeelding direct tonen, upload bij Concept opslaan */
.builder-local-image-preview{margin:0 0 9px;padding:6px;border:1px solid #d8dfe5;border-radius:7px;background:#f8fafc}
.builder-local-image-preview img{display:block;width:100%;max-height:150px;object-fit:contain;background:#fff}
.builder-local-image-preview small{display:block;margin-top:5px;color:#667085;font-size:10px;text-align:center}


/* v3.8.5 - echte placeholders, klikbare editor en vaste footerafbeelding */
.builder-article-title:empty:before,.builder-richtext:empty:before{content:attr(data-placeholder);color:#a77955;font-style:italic;opacity:.72;pointer-events:none}
.builder-article-title:focus:empty:before,.builder-richtext:focus:empty:before{opacity:.45}
.builder-block-inner{position:relative;z-index:1;cursor:text}
.builder-richtext{position:relative;z-index:2;cursor:text;min-height:46px;padding:4px 2px}
.builder-article-title{cursor:text;min-height:27px}
.newsletter-footer-default-title{display:grid;gap:5px;margin:0 0 12px;font-weight:700}.newsletter-footer-default-title small{font-weight:400;color:#667085}
.newsletter-footer-image-setting{margin-top:14px;padding-top:12px;border-top:1px solid #e2e7eb}.newsletter-footer-image-setting h4{margin:0 0 8px}.newsletter-footer-image-setting>img{display:block;max-width:200px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:0 auto 9px}.newsletter-footer-image-empty{padding:14px;border:1px dashed #cbd5df;border-radius:6px;text-align:center;color:#667085;margin-bottom:8px}.newsletter-footer-image-upload{display:grid;gap:7px}.newsletter-footer-image-upload input[type=file]{max-width:100%}
.builder-footer-image-preview{text-align:center;margin:0 0 10px}.builder-footer-image-preview img{display:inline-block;max-width:200px;max-height:80px;width:auto;height:auto}


/* v3.8.5 - compacte nieuwsbriefgegevens op één regel */
.newsletter-meta-one-row{display:grid;grid-template-columns:minmax(230px,1fr) minmax(300px,1.6fr) minmax(180px,.7fr);gap:14px;align-items:end}
.newsletter-meta-one-row>label{margin:0;min-width:0}
.newsletter-meta-one-row select,.newsletter-meta-one-row input{width:100%}
@media(max-width:900px){.newsletter-meta-one-row{grid-template-columns:1fr}}


/* v3.8.6 - subtiele scheiding tussen inhoudsopgave en artikelen */
.builder-canvas{--b-separator:#d9b98f}
.builder-toc-separator{background:var(--b-separator)!important}
.builder-article + .builder-article::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-11px;
    height:1px;
    background:var(--b-separator);
    pointer-events:none;
}


/* v3.8.7 - inhoudsopgavekop gelijk aan artikeltitels */
.builder-toc>strong{
    display:block;
    margin:0 0 12px;
    color:var(--b-heading);
    font-family:var(--b-font);
    font-size:21px;
    line-height:1.25;
    font-weight:700;
}
.newsletter-footer-unsubscribe-note{
    display:block;
    margin:-1px 0 9px 25px;
    color:#667085;
    font-size:11px;
    line-height:1.35;
}


/* v3.8.8 - vaste nieuwsbriefonderdelen per geselecteerde soort */
.newsletter-fixed-type-panel{padding:16px 18px!important}
.newsletter-fixed-type-form{max-width:620px}
.newsletter-fixed-type-form label{display:grid;grid-template-columns:180px minmax(260px,1fr);align-items:center;gap:14px;margin:0;font-weight:700}
.newsletter-fixed-type-form select{width:100%}
.newsletter-fixed-selected{margin:16px 0 8px}
.newsletter-fixed-selected h2{margin:0;font-size:25px}
.newsletter-fixed-section{max-width:1050px}
.newsletter-fixed-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.newsletter-fixed-section-head h2{margin:0 0 3px}
.newsletter-fixed-section-head p{margin:0;color:#667085}
.newsletter-fixed-general-form{max-width:760px}
.newsletter-single-header,.newsletter-single-footer{max-width:800px}
.newsletter-single-header-preview{display:block;max-width:640px;margin:0 0 12px;padding:8px;border:1px solid #d8dfe5;border-radius:8px;background:#f8fafc}
.newsletter-single-header-preview img{display:block;width:100%;height:auto;max-height:320px;object-fit:contain}
.newsletter-single-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.newsletter-single-upload small{flex-basis:100%;color:#667085}
.newsletter-single-footer-editor{min-height:170px}
.newsletter-single-footer-image{margin-top:24px;padding-top:18px;border-top:1px solid #e1e6ea}
.newsletter-single-footer-image h3{margin:0 0 10px}
.newsletter-single-footer-image-preview{display:inline-flex;align-items:center;justify-content:center;max-width:300px;min-height:90px;padding:10px;margin-bottom:10px;border:1px solid #d8dfe5;border-radius:8px;background:#f8fafc}
.newsletter-single-footer-image-preview img{display:block;max-width:260px;max-height:120px;width:auto;height:auto}
@media(max-width:700px){
  .newsletter-fixed-type-form label{grid-template-columns:1fr;gap:6px}
  .newsletter-fixed-section{max-width:none}
}


/* v3.8.9 - zwevende zijpanelen in de grafische nieuwsbriefbouwer
   De nieuwsbrief kan lang zijn, maar Inhoud/Stijl en Eigenschappen
   blijven binnen bereik tijdens het scrollen van de pagina. */
.newsletter-builder-panel{
    overflow:visible!important;
}

.newsletter-builder-layout{
    align-items:start;
}

.builder-left,
.builder-right{
    position:sticky;
    top:12px;
    align-self:start;
    max-height:calc(100vh - 24px);
    overflow-y:auto;
    overflow-x:hidden;
    z-index:8;
    box-shadow:0 2px 10px rgba(16,24,40,.04);
}

/* Tabs en titel van eigenschappen blijven ook bovenaan het zwevende paneel staan. */
.builder-tabs,
.builder-inspector-title{
    position:sticky;
    top:0;
    z-index:10;
    background:#fff;
}

/* Het eigenschappenpaneel zelf hoeft niet nóg eens sticky te zijn,
   omdat de volledige rechterkolom nu al zweeft. */
.builder-inspector{
    position:static!important;
}

/* Iets rustiger scrollbar-gedrag voor lange paletten/inspectors. */
.builder-left,
.builder-right{
    scrollbar-gutter:stable;
}

/* Op smallere schermen gebruiken we weer de normale documentvolgorde. */
@media(max-width:980px){
    .newsletter-builder-panel{
        overflow:hidden!important;
    }
    .builder-left,
    .builder-right{
        position:static;
        top:auto;
        max-height:none;
        overflow:visible;
        box-shadow:none;
    }
    .builder-tabs,
    .builder-inspector-title{
        position:static;
    }
}


/* v3.8.11 - positie vaste footerafbeelding */
.newsletter-footer-image-layout-form{
    max-width:620px;
    margin:12px 0 2px;
    padding:12px;
    border:1px solid #e0e5ea;
    border-radius:8px;
    background:#f8fafc;
}
.newsletter-footer-image-layout-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.newsletter-footer-image-layout-grid label{
    display:grid;
    gap:5px;
    font-weight:700;
}
.newsletter-footer-image-layout-grid select{width:100%}
.newsletter-single-footer-image-preview{
    display:block!important;
    max-width:100%!important;
    min-height:90px;
}
.newsletter-single-footer-image-preview img{display:inline-block!important}
.builder-footer-image-preview{margin:10px 0}
.builder-footer-image-preview img{
    display:inline-block;
    max-width:200px;
    max-height:80px;
    width:auto;
    height:auto;
}
@media(max-width:650px){
    .newsletter-footer-image-layout-grid{grid-template-columns:1fr}
}


/* v3.8.12 - inhoudspalet volledig zichtbaar binnen de zwevende zijbalk */
.builder-left{
    container-type:inline-size;
    min-width:0;
}

/* Standaard één kolom: dit past altijd binnen een smalle sticky zijbalk. */
.builder-block-palette{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
    min-width:0;
}

.builder-block-choice{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}

.builder-block-choice > span:last-child{
    min-width:0;
    overflow-wrap:anywhere;
}

.builder-block-choice strong,
.builder-block-choice small{
    max-width:100%;
    white-space:normal;
}

/* Alleen als de linkerzijbalk zélf echt breed genoeg is, twee kolommen tonen. */
@container (min-width:340px){
    .builder-block-palette{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

/* Het canvas mag nooit boven de sticky zijbalk tekenen. */
.builder-stage{
    position:relative;
    z-index:1;
    min-width:0;
}

.builder-left{
    z-index:12;
}

/* Ook persoonlijke velden moeten binnen de zijbalk afbreken. */
.newsletter-builder-variables{
    min-width:0;
}

.builder-variable{
    max-width:100%;
    white-space:normal;
}


/* v3.8.13 - postbezorgerretour + bijwerkdatum */
.mailing-delivery-head h2,.payment-processing-through h2{margin:0 0 4px}
.mailing-delivery-head p,.payment-processing-through p{margin:0;color:#667085}
.mailing-delivery-status{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px;margin:14px 0}
.mailing-delivery-upload{display:grid;grid-template-columns:minmax(320px,1fr) auto;align-items:end;gap:12px;margin-top:14px}
.mailing-delivery-upload label{display:grid;gap:5px}
.delivery-column-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-top:15px}
.delivery-column-form label{display:grid;gap:5px;min-width:min(520px,100%)}
.payment-processing-through{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:18px;align-items:end}
.payment-processing-through form{display:flex;gap:9px;align-items:end;flex-wrap:wrap}
.payment-processing-through form label{display:grid;gap:5px}
.print-label-inner{position:relative}
.print-label.has-delivery-code .print-label-inner{padding-top:5.2mm}
.print-label-delivery-code{
    position:absolute;
    top:1.4mm;
    right:2.7mm;
    max-width:calc(100% - 5.4mm);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8pt;
    line-height:1;
    font-weight:700;
}
@media(max-width:850px){
    .mailing-delivery-status{grid-template-columns:1fr 1fr}
    .mailing-delivery-upload,.payment-processing-through{grid-template-columns:1fr}
}


/* v3.8.14 - MSG bezorggroepen, frankeerlogo en Telcodering */
.mailing-delivery-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.delivery-batch-table{margin:14px 0}
.delivery-multifile-form{display:grid;gap:14px}
.delivery-file-card{border:1px solid #d8dfe5;border-radius:10px;background:#fff;padding:14px}
.delivery-file-title{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.delivery-file-title h3{margin:0 0 2px;font-size:17px}
.delivery-file-number{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#941b2d;color:#fff;font-weight:700}
.delivery-file-options{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.2fr);gap:12px}
.delivery-file-options label{display:grid;gap:5px;font-weight:700}
.delivery-file-options small{font-weight:400;color:#667085}
.delivery-file-analysis{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.delivery-file-analysis span{background:#f3f5f7;border-radius:999px;padding:5px 9px;font-size:12px}
.delivery-logo-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px;max-width:900px}
.delivery-logo-card{border:1px solid #d8dfe5;border-radius:10px;padding:14px}
.delivery-logo-card h3{margin-top:0}
.delivery-logo-preview,.delivery-logo-empty{height:110px;display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5df;border-radius:8px;margin-bottom:10px;background:#fafbfc}
.delivery-logo-preview img{max-width:230px;max-height:80px;width:auto;height:auto}
.delivery-logo-card form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.delivery-print-group-title{max-width:210mm;margin:14px auto 5px;padding:8px 10px;background:#fff;border:1px solid #d7dde4}

/* Etiket met MSG/PostNL-verrijking */
.print-label.delivery-enhanced .print-label-inner{
    justify-content:flex-start;
    position:relative;
    padding:2.2mm 3mm;
}
.print-label-franking-logo{
    position:absolute;
    top:1.3mm;
    right:2.7mm;
    display:block;
    max-width:22mm;
    max-height:7mm;
    width:auto;
    height:auto;
    object-fit:contain;
}
.print-label.has-franking-logo .print-label-address{
    padding-top:8.4mm;
}
.print-label-address{
    flex:0 0 auto;
}
.print-label-delivery-code{
    position:static!important;
    max-width:none!important;
    margin-top:4.3mm;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    font-size:9pt!important;
    line-height:1.05!important;
    font-weight:700;
}
.print-label.has-delivery-code .print-label-inner{
    padding-top:2.2mm!important;
}
@media(max-width:850px){
    .delivery-file-options,.delivery-logo-grid{grid-template-columns:1fr}
    .mailing-delivery-head{display:block}
}


/* v3.8.16 - expliciete controle dat fysiek adres = één brief */
.mailing-letter-coverage h2{margin:0 0 12px}
.mailing-letter-coverage .mailing-delivery-status{margin-top:0}


/* v3.8.17 - eigenlijke briefinhoud 1 pt kleiner; adres/datum blijven 11.5 pt */
.print-letter-part{
    font-size:10.5pt;
    line-height:1.42;
}

.letter-live-preview .letter-preview-part{
    font-size:13px;
    line-height:1.45;
}


/* v3.8.18 - briefinhoud 10 pt en brieflogo maximaal 120 x 50 mm */
.print-letter-part{
    font-size:10pt;
    line-height:1.40;
}

/* Browser-/sjabloonpreview: dezelfde verhoudingen als de printbrief. */
.letter-preview-header{
    display:grid!important;
    grid-template-columns:minmax(0,75%) minmax(0,25%)!important;
    gap:0!important;
    align-items:start;
    position:relative;
    min-height:0;
    margin-bottom:10px;
}
.letter-preview-header:has(.letter-preview-logo):not(:has(.letter-preview-sender)){
    grid-template-columns:1fr!important;
}
.letter-preview-header:has(.letter-preview-sender):not(:has(.letter-preview-logo)){
    grid-template-columns:minmax(0,75%) minmax(140px,25%)!important;
}
.letter-preview-logo{
    grid-column:1;
    position:static!important;
    max-width:120mm!important;
    min-width:0;
    margin:0;
    align-self:start;
}
.letter-preview-logo img{
    display:block;
    width:auto;
    height:auto;
    max-width:min(120mm,100%)!important;
    max-height:50mm!important;
    object-fit:contain;
}
.letter-preview-sender{
    grid-column:2;
    grid-row:1;
    position:static!important;
    justify-self:end;
    align-self:start;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
}

/* A4-print: inhoudsbreedte is 160 mm = maximaal 120 mm logo + 40 mm afzender. */
.print-letter-header{
    display:grid!important;
    grid-template-columns:minmax(0,120mm) 40mm!important;
    gap:0!important;
    align-items:start;
    position:relative;
    min-height:0;
    margin-bottom:2mm;
}
.print-letter-header:has(.print-letter-logo):not(:has(.print-letter-sender)){
    grid-template-columns:1fr!important;
}
.print-letter-header:has(.print-letter-sender):not(:has(.print-letter-logo)){
    grid-template-columns:minmax(0,120mm) 40mm!important;
}
.print-letter-logo{
    grid-column:1;
    position:static!important;
    max-width:120mm!important;
    min-width:0;
    margin:0;
    align-self:start;
}
.print-letter-logo img{
    display:block;
    width:auto;
    height:auto;
    max-width:min(120mm,100%)!important;
    max-height:50mm!important;
    object-fit:contain;
}
.print-letter-sender{
    grid-column:2;
    grid-row:1;
    position:static!important;
    justify-self:end;
    align-self:start;
    width:40mm!important;
    max-width:40mm!important;
    min-width:0!important;
    margin:0!important;
    font-size:8.8pt;
    line-height:1.27;
    text-align:left;
}

@media(max-width:720px){
    .letter-preview-header{
        grid-template-columns:1fr!important;
    }
    .letter-preview-sender{
        grid-column:1;
        grid-row:auto;
        justify-self:start;
        width:100%!important;
        margin-top:12px!important;
    }
}


/* v3.8.19 - geen extra witruimte vóór footer/ondertekening */
.print-letter-part.footer{
    margin-top:0!important;
}


/* v3.8.20 - ontvanger direct onder linkerdeel; afzender rechts bepaalt hoogte niet meer */

/* Preview */
.letter-preview-header{
    display:block!important;
    position:relative!important;
    min-height:0!important;
    margin-bottom:8px!important;
}
.letter-preview-logo{
    position:static!important;
    display:block!important;
    max-width:120mm!important;
    margin:0!important;
}
.letter-preview-logo img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:min(120mm,100%)!important;
    max-height:60mm!important;
    object-fit:contain!important;
}
.letter-preview-sender{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:25%!important;
    max-width:25%!important;
    min-width:0!important;
    margin:0!important;
}
.letter-preview-address,
.letter-preview-date{
    width:66%!important;
    max-width:66%!important;
}
.letter-preview-address{
    margin-top:4px!important;
}

/* Browser-/A4-print */
.print-letter-header{
    display:block!important;
    position:relative!important;
    min-height:0!important;
    margin-bottom:3mm!important;
}
.print-letter-logo{
    position:static!important;
    display:block!important;
    max-width:120mm!important;
    margin:0!important;
}
.print-letter-logo img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:120mm!important;
    max-height:60mm!important;
    object-fit:contain!important;
}
.print-letter-sender{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:40mm!important;
    max-width:40mm!important;
    min-width:0!important;
    margin:0!important;
    font-size:8.8pt!important;
    line-height:1.27!important;
    text-align:left!important;
}

/* Ontvanger en datum blijven links zodat ze naast een doorlopend afzenderblok passen. */
.print-letter-address,
.print-letter-date{
    width:105mm!important;
    max-width:105mm!important;
}
.print-letter-address{
    margin-top:0!important;
    margin-bottom:7mm!important;
}

/* Geen logo: adres mag nog steeds links naast de afzender starten. */
.print-letter-header:not(:has(.print-letter-logo)){
    min-height:0!important;
    margin-bottom:3mm!important;
}

@media(max-width:720px){
    .letter-preview-sender{
        position:static!important;
        width:100%!important;
        max-width:none!important;
        margin-top:12px!important;
    }
    .letter-preview-address,
    .letter-preview-date{
        width:100%!important;
        max-width:100%!important;
    }
}


/* v3.8.21 - brieflogo actief passend schalen binnen 110 x 30 mm.
   De adrespositie uit v3.8.20 blijft ongewijzigd. */
.letter-preview-logo{
    width:110mm!important;
    max-width:min(110mm,66%)!important;
    height:30mm!important;
    max-height:30mm!important;
    position:relative!important;
    overflow:visible!important;
}
.letter-preview-logo img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:110mm!important;
    max-height:30mm!important;
    object-fit:contain!important;
    object-position:left top!important;
}
.print-letter-logo{
    width:110mm!important;
    max-width:110mm!important;
    height:30mm!important;
    max-height:30mm!important;
    position:relative!important;
    overflow:visible!important;
}
.print-letter-logo img{
    display:block!important;
    width:110mm!important;
    height:30mm!important;
    max-width:110mm!important;
    max-height:30mm!important;
    object-fit:contain!important;
    object-position:left top!important;
}


/* v3.8.23 - ontvangersadres en plaats/datum gelijk aan briefinhoud: 10 pt */
.print-letter-address,
.print-letter-date{
    font-size:10pt!important;
    line-height:1.38!important;
}

/* Schermpreview overeenkomstig iets compacter, zonder positie te wijzigen. */
.letter-preview-address,
.letter-preview-date{
    font-size:13px!important;
    line-height:1.40!important;
}


/* v3.8.26 - vrijwilligersinstroom en dossier */
.wizard-heading,.volunteer-dossier-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.wizard-heading h2,.volunteer-dossier-head h2{margin:0 0 5px}
.wizard-heading p,.volunteer-dossier-head p{margin:0;color:#667085}
.wizard-progress{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:18px 0}
.wizard-progress span{padding:9px 8px;border-radius:7px;background:#eef1f4;color:#5f6b7a;font-size:13px;text-align:center;font-weight:700}
.wizard-progress span.active{background:#941b2d;color:#fff}
.wizard-step{display:none}.wizard-step.active{display:block}
.wizard-actions{display:flex;gap:9px;align-items:center;margin-top:18px;flex-wrap:wrap}
.volunteer-wizard-summary{border:1px solid #d6dde5;background:#fff;border-radius:9px;padding:16px;line-height:1.65}
.availability-grid{display:grid;grid-template-columns:minmax(120px,1fr) repeat(3,90px);gap:1px;background:#d8dee5;border:1px solid #d8dee5;border-radius:8px;overflow:hidden;max-width:650px;margin:10px 0 18px}
.availability-grid>*{background:#fff;padding:8px;text-align:center;margin:0}.availability-grid strong:first-child{text-align:left}
.volunteer-dossier-panel{margin-top:16px}.signed-document-form{display:grid;grid-template-columns:150px minmax(220px,1fr) auto;gap:8px;align-items:end;margin-top:8px}.signed-document-form label{display:grid;gap:4px}.toolbar.compact{margin:0;gap:5px}
@media(max-width:850px){.wizard-progress{grid-template-columns:1fr}.wizard-progress span{display:none}.wizard-progress span.active{display:block}.wizard-heading,.volunteer-dossier-head{display:block}.availability-grid{grid-template-columns:minmax(105px,1fr) repeat(3,55px)}.signed-document-form{grid-template-columns:1fr}}


/* v3.8.27 - Directie/Bestuur hebben geen coördinatorrol */
.department-no-coordinator{
    align-self:center;
    color:#667085;
    font-size:12px;
    font-style:italic;
    padding:4px 6px;
}
.department-mail-no-coordinator{
    align-self:center;
    padding:7px 0;
}


/* v3.8.31 - strakker vrijwilligersdossier */
.document-status-note{margin:8px 0 0;max-width:680px}
.invalidate-document-form{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:8px;align-items:end;margin-top:8px;max-width:680px}
.invalidate-document-form label{display:grid;gap:4px}
.volunteer-dossier-panel .inline-action-form{display:inline-flex;margin:0}
@media(max-width:760px){.invalidate-document-form{grid-template-columns:1fr}}


/* v3.8.34 - frankeerlogo rechtsboven, adres vloeit er links langs */
.print-label.delivery-enhanced .print-label-inner{
    display:block!important;
    position:relative;
    padding:2.2mm 3mm!important;
}
.print-label-franking-logo{
    position:relative!important;
    float:right;
    top:auto!important;
    right:auto!important;
    max-width:22mm;
    max-height:7mm;
    width:auto;
    height:auto;
    object-fit:contain;
    margin:-0.9mm -0.3mm 0.7mm 2.2mm;
}
.print-label.has-franking-logo .print-label-address{
    padding-top:0!important;
}
.print-label-address{
    display:block;
    flex:none!important;
    line-height:1.18;
}
.print-label-address-line{
    display:inline;
}
.print-label-delivery-code{
    clear:both;
    display:block;
    margin-top:4.3mm!important;
}


/* v3.8.35 - MSG Foutief workflow + volgnummer op etiketten */
.print-label-sequence{
    position:absolute;
    right:2.5mm;
    bottom:1.2mm;
    font-size:6.5pt;
    line-height:1;
    color:#555;
    font-weight:700;
}
.delivery-issues-table td{
    vertical-align:top;
}
.delivery-issue-actions{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}
.button.warning{
    border-color:#b7791f;
    background:#fff8e6;
    color:#7a4d00;
}
.badge.danger{
    background:#fbe4e6;
    color:#8f1627;
}
.badge.muted{
    background:#eef1f4;
    color:#5f6b7a;
}
\n\n/* v3.8.36 - compactere etiketten: straat + huisnummer zo veel mogelijk op één regel */\n.print-label.delivery-enhanced .print-label-inner{\n    font-size:9.2pt!important;\n    line-height:1.16!important;\n}\n.print-label-franking-logo{\n    max-width:19mm!important;\n    max-height:5.2mm!important;\n    margin:-1.35mm -0.3mm 0.25mm 1.6mm!important;\n}\n.print-label-delivery-code{\n    font-size:8.8pt!important;\n}\n

/* v3.8.37 - complete etiket-QA: lange naam heel houden + volgnummer verder van rand */
.print-label.delivery-enhanced .print-label-inner{
    font-size:8.8pt!important;
    line-height:1.15!important;
}
.print-label-franking-logo{
    max-width:18mm!important;
    max-height:8.8mm!important;
    margin:-1.45mm -0.2mm 0.2mm 1.5mm!important;
}
.print-label.address-below-logo .print-label-address{
    padding-top:5.2mm!important;
}
.print-label-delivery-code{
    font-size:8.5pt!important;
}
.print-label-sequence{
    right:3.5mm!important;
    bottom:3.0mm!important;
    font-size:6.5pt!important;
}


/* v3.8.41 - PostNL-logo even zichtbaar als MSG + alfabetische envelopvolgorde */
.print-label-franking-logo.service-postnl,
.print-label.service-postnl .print-label-franking-logo{
    max-width:52mm!important;
    max-height:8.8mm!important;
}
.print-label.address-below-logo.service-postnl .print-label-address,
.print-label.service-postnl.address-below-logo .print-label-address{
    padding-top:9.2mm!important;
}

/* v3.8.42 - Microsoft 365 / Entra ID verbindingstest (geen stijlwijziging nodig). */

/* v3.8.43 - Microsoft 365 onboarding */
.ms365-onboarding-box {
    margin: 16px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafb;
}
.ms365-onboarding-box h4 { margin: 0 0 12px; }
.ms365-temp-password { font-size: 15px; font-weight: 700; letter-spacing: .04em; }

/* v3.8.44 - wijzigingsverzoeken / ticketing */
.ticket-status{
    display:inline-block;
    border-radius:999px;
    padding:3px 8px;
    font-size:11px;
    font-weight:700;
    background:#eef2f4;
}
.ticket-status-success{background:#e8f3ed;color:var(--success);}
.ticket-status-warning{background:#fff3d8;color:var(--warning);}
.ticket-status-info{background:#eef5fa;color:#285f82;}
.ticket-status-muted{background:#eef1f4;color:var(--muted);}
.ticket-description{
    margin-top:14px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#f8fafb;
    line-height:1.55;
}
.ticket-thread{display:grid;gap:10px;margin-bottom:16px;}
.ticket-message{border:1px solid var(--border);border-radius:8px;padding:12px;background:#fff;}
.ticket-message header{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;}
.ticket-message header small{color:var(--muted);}

/* v3.8.44 - generiek retouradres op geprinte adresetiketten */
.print-label-return-address{
    display:block;
    font-size:5.4pt;
    line-height:1.05;
    font-weight:400;
    margin:0 0 1.1mm;
}
.print-label.service-postnl .print-label-return-address{
    clear:both;
    padding-top:.35mm;
}

/* v3.8.61 nieuwsbriefabonnees */
.honeypot-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.newsletter-optout-checkbox{align-self:end;min-height:42px;display:flex!important;align-items:center;gap:8px}

/* v3.8.62 - compact openbaar inschrijfformulier voor insluiting op nnttm.nl */
body.embedded-public-page{
    min-height:0;
    background:transparent;
}
.embedded-public-main{
    width:100%;
    max-width:560px;
    margin:0 auto;
    padding:2px;
    box-sizing:border-box;
}
.embedded-public-main .login-card{
    margin:0;
    box-shadow:none;
}
@media (max-width:520px){
    .embedded-public-main .login-card{
        padding:14px;
    }
}
.private-field-with-toggle{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.private-field-with-toggle>label:first-child{min-width:0}.private-field-with-toggle .inline-check{padding-bottom:10px;white-space:nowrap}