/* Fabricaide Social. De merkkleuren zet base.html per site; dit zijn de waarden zonder site. */
:root {
    --merk-donker: #222222;
    --merk: #E42E39;
    --merk-licht: #FEF2F2;
    --merk-hover: #C92730;
    /* De pagina is licht grijs zodat een wit blok er los op ligt. */
    --bg: #F4F5F7;
    --bg-subtle: #F9FAFB;
    --card-bg: #FFFFFF;
    --text: #1A1A1A;
    --text-muted: #6B7280;
    --border: #E5E7EB;
    --success: #059669;
    --success-bg: #ECFDF5;
    --warning: #D97706;
    --warning-bg: #FFFBEB;
    --danger: #DC2626;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(16,24,40,0.04), 0 4px 12px rgba(16,24,40,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

/* Topbar */
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 56px;
    background: var(--merk);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
}
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
}
.topbar-logo-img {
    height: 28px;
    width: auto;
}
.topbar-title { font-weight: 700; font-size: 16px; }
/* ENGINE-EIGEN: de wissel tussen locaties van een klant (locaties.py). Staat buiten
   de rij die kan schuiven: waar je bent moet op elke breedte in beeld blijven. */
.topbar-locaties { display: flex; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.45); border-radius: 6px; overflow: hidden; }
.topbar-locaties a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 13px; font-weight: 600; padding: 5px 10px; white-space: nowrap; }
.topbar-locaties a.actief { background: white; color: var(--merk-donker); }
@media (max-width: 600px) { .topbar-locaties a { font-size: 12px; padding: 4px 7px; } }
/* EINDE ENGINE-EIGEN */
/* De balk is op ELKE breedte een schuifbare rij: met negen items maakte hij
   tussen 600 en 1000px de hele pagina 130 tot 200px te breed (gemeten 31-aug-2026,
   42 renders). Schuiven binnen de balk, nooit de pagina. */
.topbar-nav { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-link { white-space: nowrap; }
.topbar-help { flex-shrink: 0; }
.topbar-link {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}
.topbar-link:hover, .topbar-link.active { color: white; background: rgba(255,255,255,0.12); }

/* Container */
.container { max-width: 900px; margin: 0 auto; padding: 24px 16px; }

/* Section */
.section { margin-bottom: 32px; }
.section h1 { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.section h2 { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--merk-donker); }

/* Stats */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 6px;
    text-align: center;
    box-shadow: var(--shadow);
}
.stat-number { font-size: 20px; font-weight: 700; color: var(--merk-donker); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stat-approved .stat-number { color: var(--success); }
.stat-posted .stat-number { color: var(--warning); }

/* Forms */
.generate-form {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}
/* De drie stappen van het weekplan: eerst kiezen wat er speelt, dan hoeveel,
   dan schrijven. De volgorde stond nergens en moest wel worden gevolgd. */
.stap { font-size: 15px; margin: 22px 0 6px; }
.week-kop { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.week-vandaag { font-size: 14px; color: var(--text-muted); margin: 10px 0 0; }
.totaal-sinds { font-size: 13px; color: var(--text-muted); margin: 14px 0 0; }
.stap:first-of-type { margin-top: 0; }
.stap-uitleg { font-size: 14px; color: var(--text-muted); margin: 0 0 12px; }
.form-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.form-group { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.form-group input, .form-group select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--bg-subtle);
}
.form-wide { flex: 1; min-width: 200px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--merk); color: white; }
.btn-secondary { background: var(--merk-licht); color: var(--merk-donker); }
.btn-approve { background: var(--success); color: white; }
.btn-skip { background: var(--border); color: var(--text-muted); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-generate { margin-top: 4px; }
.btn-loading { background: var(--merk-licht); color: var(--merk-donker); }

/* Post grid (dashboard preview) */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 12px; }
.post-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
}
.post-header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.post-platform {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--merk);
    background: var(--merk-licht);
    padding: 2px 8px;
    border-radius: 4px;
}
.post-type {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.badge-product { background: #FEF3C7; color: #92400E; }
.badge-behind_scenes { background: #EDE9FE; color: #5B21B6; }
.badge-lokaal { background: #DBEAFE; color: #1E40AF; }
.badge-engagement { background: #FCE7F3; color: #9D174D; }
.badge-actie { background: #FEE2E2; color: #991B1B; }
.badge-humor { background: #D1FAE5; color: #065F46; }
.post-day { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.post-copy { font-size: 14px; line-height: 1.45; }
.post-status-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    margin-left: auto;
}
.status-draft { background: #FEF3C7; color: #92400E; }
.status-approved { background: var(--success-bg); color: var(--success); }
.status-skipped { background: var(--bg-subtle); color: var(--text-muted); }
.status-posted { background: #DBEAFE; color: #1E40AF; }

/* Post card status borders */
.post-status-approved { border-left: 3px solid var(--success); }
.post-status-skipped { border-left: 3px solid var(--border); opacity: 0.7; }
.post-status-posted { border-left: 3px solid #3B82F6; }

/* Post detail (plan view) */
.plan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.plan-theme { color: var(--text-muted); font-size: 15px; margin-top: 4px; font-style: italic; }
.post-list { display: flex; flex-direction: column; gap: 20px; }
/* Een tonen/verbergen-schakelaar is geen knop: tekst met een pijltje, geen vulling. */
.preview-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 4px 0; margin: 0 0 6px;
    color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer;
}
.preview-toggle::before { content: "\25BE"; font-size: 11px; transition: transform .15s; }
.preview-toggle[aria-expanded="false"]::before { transform: rotate(-90deg); }
.preview-toggle:hover { color: var(--text); }
.zoek-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.zoek-form select, .zoek-veld { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 14px; background: var(--card-bg); }
.zoek-veld { flex: 1 1 220px; min-width: 0; }
.zoek-wis { color: var(--merk); font-size: 14px; }
.zoek-lijst { display: flex; flex-direction: column; gap: 8px; }
.zoek-hit { display: block; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; color: inherit; text-decoration: none; }
.zoek-hit:hover { border-color: var(--merk); }
.zoek-hit-meta { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.zoek-hit-tekst { font-size: 14px; }
.plan-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.plan-filter select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 14px; background: var(--card-bg); }
.plan-filter-telling { font-size: 13px; color: var(--text-muted); }
.post-detail { position: relative; }
.post-detail-header { padding-right: 28px; }
.post-klap {
    position: absolute; top: 14px; right: 12px;
    background: none; border: 0; padding: 6px; cursor: pointer;
    color: var(--text-muted); font-size: 14px; line-height: 1;
}
.post-klap::before { content: "\25BE"; display: inline-block; transition: transform .15s; }
.post-klap[aria-expanded="false"]::before { transform: rotate(-90deg); }
.post-klap:hover { color: var(--text); }
.post-detail.post-ingeklapt > :not(.post-detail-header) { display: none; }
.post-detail.post-ingeklapt { padding-bottom: 12px; }
/* Vandaag: het telefoonscherm achter de toonbank */
.vandaag-post { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.vandaag-klaar { border-color: var(--success); }
.vandaag-kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.vandaag-beeld { width: 100%; max-width: 240px; border-radius: 6px; display: block; margin-bottom: 12px; }
.vandaag-fototip { background: var(--merk-licht); border-radius: 6px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
.vandaag-acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.vandaag-acties .btn { min-height: 44px; }
/* Op een telefoon zijn de knoppen vingerdik (44px). Op een scherm met een muis
   hoeven ze dat niet te zijn: daar ogen ze als tegels (Thomas, 31-aug-2026). */
@media (min-width: 700px) {
    .vandaag-acties .btn { min-height: 34px; padding: 7px 14px; font-size: 13px; }
    /* Op een breed scherm staat de visual links naast de tekst in plaats van
       groot erboven met een lege rechterhelft (Thomas, 31-aug-2026). */
    .vandaag-beeld { float: left; max-width: 300px; margin: 0 24px 8px 0; }
    .vandaag-post .foto-mis { clear: none; }
    .vandaag-acties { clear: both; padding-top: 6px; }
}
/* Op de telefoon: twee per rij, even breed, en niet hoger dan een duim nodig
   heeft (Thomas, 31-aug-2026: te groot). */
@media (max-width: 699px) {
    .vandaag-acties { gap: 6px; }
    .vandaag-acties .btn, .vandaag-acties .inline-form { flex: 1 1 calc(50% - 3px); }
    .vandaag-acties .inline-form .btn, .vandaag-acties label.btn { width: 100%; }
    .vandaag-acties .btn { min-height: 38px; padding: 7px 10px; font-size: 13px; }
}
.vandaag-gedaan { color: var(--success); font-weight: 600; }
.vandaag-vraag { color: var(--text-muted); font-size: 14px; }
.vandaag-bewerk { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vandaag-bewerk textarea, .vandaag-bewerk input[type=text] { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 15px; }
.vandaag-bewerk label { font-size: 13px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.vandaag-deel { margin-top: 18px; }
.vandaag-leeg { background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.vandaag-melding { color: var(--success); font-size: 14px; margin-bottom: 12px; }
.vandaag-morgen { font-size: 14px; padding: 8px 0; border-top: 1px solid var(--border); }
.vandaag-morgen-foto { color: var(--merk); font-size: 12px; margin-left: 6px; }
.vandaag-instellingen summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.keur-kaart { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.keur-knoppen { display: flex; gap: 12px; margin-top: 20px; }
.keur-knoppen .inline-form { flex: 1; }
.btn-groot { width: 100%; min-height: 52px; font-size: 16px; }
.keur-noot { color: var(--text-muted); font-size: 13px; margin-top: 12px; }
.begin-hier { background: var(--merk-licht); border-radius: var(--radius); padding: 16px 20px; }
.begin-stappen { margin: 8px 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.twee-datum { font-size: 14px; color: var(--text-muted); margin: 14px 0 6px; font-weight: 600; }
.stem-form textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 15px; line-height: 1.5; }
.stem-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stem-form label { display: block; margin-bottom: 10px; font-size: 14px; color: var(--text-muted); }
.stem-form label input[type=text] { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 15px; }
.stem-form label textarea { margin-top: 4px; }
.dagblok { margin-bottom: 12px; }
.dagblok-kop {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer; list-style: none;
}
.dagblok-kop::-webkit-details-marker { display: none; }
.dagblok-kop::before { content: "\25B8"; color: var(--merk); margin-right: 8px; }
.dagblok[open] > .dagblok-kop::before { content: "\25BE"; }
.dagblok[open] > .dagblok-kop { border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 12px; }
.dagblok-dag { font-weight: 600; flex: 1; }
.dagblok-nu { color: var(--merk); font-size: 12px; font-weight: 600; margin-left: 6px; }
.dagblok-meta { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.dagblok-voorbij > .dagblok-kop { color: var(--text-muted); }
.dagblok-vandaag > .dagblok-kop { border-left: 3px solid var(--merk); }
.post-detail {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}
.post-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.post-detail-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.post-day-label { font-weight: 600; color: var(--text); }
.post-time-label { color: var(--text-muted); font-size: 13px; }
.post-detail-body { margin-bottom: 12px; }
.post-copy-full { font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.post-hashtags { color: var(--merk); font-size: 13px; margin-top: 8px; word-break: break-word; }
.post-photo-hint {
    background: var(--merk-licht);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
}
.post-rationale { color: var(--text-muted); font-size: 13px; font-style: italic; margin-bottom: 12px; }

/* Actions */
.post-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form { display: inline; }

/* Edit form */
.post-edit-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.post-edit-form textarea, .post-edit-form input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    margin-bottom: 8px;
    resize: vertical;
}
/* Bewerken is werken: het vak leest als de post zelf en groeit mee (groeiMee). */
.post-edit-form textarea {
    min-height: 220px;
    line-height: 1.55;
    background: var(--card-bg);
}
.post-edit-form textarea:focus, .post-edit-form input[type="text"]:focus {
    outline: none;
    border-color: var(--merk);
    box-shadow: 0 0 0 3px var(--merk-licht);
}
.edit-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.edit-teller { font-weight: 500; font-variant-numeric: tabular-nums; }
.edit-teller.vol { color: var(--merk); }
.beeldtekst-veld { font-size: 17px !important; font-weight: 600; }

/* De zin die op het beeld komt, in de post zelf */
.post-beeldtekst {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: var(--merk-licht);
    border-left: 3px solid var(--merk);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--merk-donker);
}
.beeldtekst-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--merk);
    white-space: nowrap;
}

.edit-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.rewrite-form { display: flex; gap: 8px; align-items: center; }
.rewrite-form input { flex: 1; margin-bottom: 0 !important; }

/* Post columns layout */
.post-detail-columns { display: flex; gap: 20px; }
.post-detail-left { flex: 1; min-width: 0; }

/* Upload */
.post-upload { margin-bottom: 12px; }
.upload-form { display: inline-block; }
.upload-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.upload-placeholder {
    display: inline-block;
    padding: 8px 16px;
    background: var(--bg-subtle);
    border: 2px dashed var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.upload-placeholder:hover { border-color: var(--merk); color: var(--merk); }
.upload-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.upload-change { font-size: 12px; color: var(--merk); font-weight: 600; }

/* Instagram preview */
.post-preview-pane { width: 320px; flex-shrink: 0; }
.preview-ig {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 13px;
}
.preview-ig-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}
.preview-ig-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--merk);
}
.preview-ig-user strong { display: block; font-size: 13px; }
.preview-ig-user span { font-size: 11px; color: var(--text-muted); }
.preview-ig-image {
    width: 100%;
    aspect-ratio: 1;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preview-ig-image img { width: 100%; height: 100%; object-fit: cover; }
.preview-ig-placeholder { color: var(--text-muted); font-size: 12px; text-align: center; padding: 20px; }
.preview-ig-actions {
    display: flex;
    gap: 14px;
    padding: 10px 12px 4px;
    color: var(--text);
}
.preview-ig-caption {
    padding: 0 12px 4px;
    line-height: 1.4;
    font-size: 13px;
}
.preview-ig-hashtags {
    padding: 0 12px 12px;
    color: #00376B;
    font-size: 12px;
    word-break: break-word;
}

/* Library */
.library-upload-bar { margin-bottom: 16px; }
.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.library-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.library-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.library-name {
    padding: 6px 8px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: capitalize;
    text-align: center;
}

/* Wasstraat (FEBO-074) */
.foto-upload { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin-top: 16px; }
.foto-plek { font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.foto-plek span { color: var(--text-muted); font-size: 12px; }
.foto-plek input { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 16px; }
.foto-fout { color: var(--danger); font-size: 14px; margin-bottom: 12px; }
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.foto-kaart { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.foto-voor-na { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.foto-voor-na figure { margin: 0; background: var(--card-bg); }
.foto-voor-na img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.foto-voor-na figcaption { font-size: 11px; color: var(--text-muted); padding: 4px 8px; }
.foto-info { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.foto-beschrijving { font-size: 14px; margin: 0; }
.foto-advies { font-size: 14px; margin: 0; }
.foto-advies-gebruiken strong { color: var(--success); }
.foto-advies-kan strong { color: var(--warning); }
.foto-advies-liever_niet strong { color: var(--danger); }
.foto-klein { font-size: 12px; color: var(--text-muted); margin: 0; }
.foto-keuze { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.foto-keuze form { margin: 0; }
@media (max-width: 420px) { .foto-grid { grid-template-columns: 1fr; } }

/* Ontwerp kiezen (FEBO-077) */
.ontwerp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.ontwerp-keuze { margin: 0; }
.ontwerp-keuze button { display: block; width: 100%; padding: 0; border: 3px solid transparent; border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow); cursor: pointer; overflow: hidden; text-align: left; font: inherit; color: inherit; }
.ontwerp-gekozen button { border-color: var(--merk); }
.ontwerp-voorbeeld { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-subtle); }
.ontwerp-voorbeeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ontwerp-voorbeeld iframe { position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; border: 0; transform-origin: 0 0; pointer-events: none; }
.ontwerp-naam { display: block; padding: 8px 10px; font-size: 14px; }
.ontwerp-naam strong { color: var(--merk); font-weight: 600; }
.ontwerp-terug { margin-top: 16px; }
.ontwerp-link { display: inline-block; margin: 8px 0 12px; text-decoration: none; }
.foto-bezig { font-size: 14px; color: var(--text-muted); margin: 8px 0; }
.foto-maak { width: 100%; min-height: 44px; margin-top: 4px; }

/* Image picker (inline in post) */
.image-picker { margin-top: 8px; }
.picker-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.picker-item button {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    transition: border-color 0.15s;
}
.picker-item button:hover { border-color: var(--merk); }
.picker-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; display: block; }

/* Table */
.plans-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.plans-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
}
.plans-table td { padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--border); }
.plans-table a { color: var(--merk); text-decoration: none; font-weight: 600; }
.plans-table a:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 600px) {
    .container { padding: 16px 12px; }
    .form-row { flex-direction: column; }
    .plan-header { flex-direction: column; gap: 8px; }
    .post-detail-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .post-actions { flex-direction: column; }
    .post-actions .btn { width: 100%; }
    .rewrite-form { flex-direction: column; }
    .post-detail-columns { flex-direction: column; }
    .post-preview-pane { width: 100%; }
    .stats-row { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .stat-card { padding: 8px 4px; }
    .stat-number { font-size: 18px; }
    .stat-label { font-size: 11px; }

    /* Een tabel van zes kolommen past niet op een telefoon. Elke rij wordt een
       kaartje, met de kolomkop ervoor uit data-label. */
    .plans-table, .plans-table tbody, .plans-table tr, .plans-table td { display: block; width: 100%; }
    .plans-table { border: 0; box-shadow: none; background: none; }
    .plans-table thead { display: none; }
    .plans-table tr {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 12px 14px;
        margin-bottom: 12px;
    }
    .plans-table td { border: 0; padding: 3px 0; }
    .plans-table td::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 110px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .plans-table td:empty { display: none; }
    .plans-table td[data-label=""]::before, .plans-table td:not([data-label])::before { content: none; }
    .plans-table td.row-actions { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
    .plans-table td.row-actions a, .plans-table td.row-actions .link-button { margin: 0 16px 0 0; }
    .plans-table td a + a { margin-left: 0; }
}

/* Agenda, reel-shotlist, herhalingswaarschuwing en de fotopagina (13-aug-2026) */
.section-intro { color: var(--text-muted); font-size: 14px; margin-top: 6px; max-width: 60ch; }
.empty-note { color: var(--text-muted); font-size: 14px; margin: 12px 0; }
.context-preview { font-size: 14px; color: var(--text-muted); margin: 4px 0 14px; }
.context-preview strong { color: var(--text); font-weight: 600; }
.context-preview a { color: var(--merk); margin-left: 10px; }
.reel-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 16px; }
.inline-form { display: inline; }
.link-button {
    background: none; border: 0; padding: 0; margin-left: 12px;
    color: var(--merk); font: inherit; cursor: pointer;
}
.plans-table td a + a { margin-left: 12px; }
.plan-header-actions { display: flex; gap: 10px; }

.post-repeat-warning {
    background: var(--warning-bg); color: var(--warning);
    border-left: 3px solid var(--warning);
    padding: 10px 14px; margin: 0 0 14px; font-size: 14px; border-radius: 0 var(--radius) var(--radius) 0;
}

.post-shotlist {
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.shotlist-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.shotlist-hook, .shotlist-audio { font-size: 14px; margin: 8px 0 0; }
.shotlist-shots { margin: 10px 0 0 18px; font-size: 14px; }
.shotlist-shots li { margin-bottom: 8px; }
.shot-seconds { color: var(--merk); font-weight: 600; margin-right: 6px; }
.shot-overlay { display: block; color: var(--text-muted); font-size: 13px; }

.foto-list { display: flex; flex-direction: column; gap: 16px; }
.foto-item {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; background: var(--card-bg); box-shadow: var(--shadow);
}
.foto-item.foto-done { border-color: var(--success); }
.foto-when { font-weight: 600; margin-bottom: 6px; }
.foto-direction { font-size: 15px; margin-bottom: 12px; }
.foto-thumb { width: 100%; max-width: 220px; border-radius: var(--radius); margin-bottom: 12px; display: block; }
.foto-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.foto-button { display: block; text-align: center; padding: 16px; font-size: 16px; }
.foto-back { margin-top: 20px; }
.foto-status { color: var(--success); font-weight: 500; margin-left: 8px; font-size: 13px; }
.foto-thumb-placeholder { max-width: 110px; opacity: .55; }
.foto-placeholder-note { color: var(--text-muted); font-size: 13px; margin: -6px 0 12px; }

/* Wachtscherm tijdens het schrijven van een weekplan */
.bezig-section { display: flex; justify-content: center; padding-top: 40px; }
.bezig-card {
    text-align: center; max-width: 520px; padding: 40px 32px;
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.bezig-card h1 { font-size: 22px; margin-bottom: 12px; }
.bezig-note { color: var(--text-muted); }
.bezig-fout { color: var(--danger); margin-bottom: 16px; }
.bezig-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.bezig-dots span {
    width: 10px; height: 10px; border-radius: 50%; background: var(--merk);
    animation: bezigPulse 1.2s infinite;
}
.bezig-dots span:nth-child(2) { animation-delay: .2s; }
.bezig-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes bezigPulse { 50% { opacity: .2; } }
/* Een class met display verslaat het hidden-attribuut van de browser, waardoor
   een verborgen knop toch zichtbaar is. Dit zet dat recht voor de hele app. */
[hidden] { display: none !important; }

/* Help, het vraagteken in de balk */
.topbar-help {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 50%;
    background: transparent;
    color: white;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.topbar-help:hover, .topbar-help[aria-expanded="true"] {
    background: rgba(255,255,255,0.18);
    border-color: white;
}

.help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(34,34,34,0.45);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px;
    overflow-y: auto;
}
.help-overlay[hidden] { display: none; }

.help-panel {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0,0,0,0.22);
    width: 100%;
    max-width: 620px;
    margin: auto;
}
.help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--card-bg);
    border-radius: var(--radius) var(--radius) 0 0;
}
.help-head h2 { font-size: 18px; font-weight: 700; color: var(--merk-donker); }
.help-close {
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.help-close:hover { color: var(--merk); }

.help-body { padding: 20px 24px 24px; }
.help-intro { color: var(--text); margin-bottom: 20px; }
.help-steps { list-style: none; }
.help-steps li {
    padding-left: 14px;
    border-left: 2px solid var(--merk-licht);
    margin-bottom: 18px;
}
.help-steps h3, .help-sub {
    font-size: 15px;
    font-weight: 700;
    color: var(--merk-donker);
    margin-bottom: 4px;
}
.help-sub { margin-top: 24px; }
.help-body p { font-size: 14px; color: var(--text-muted); }
.help-body a { color: var(--merk); }
.help-notes {
    margin-top: 6px;
    padding-left: 18px;
    font-size: 14px;
    color: var(--text-muted);
}
.help-notes li { margin-bottom: 6px; }
.help-foot {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

@media (max-width: 600px) {
    /* De balk moet op een telefoon passen: het personeel werkt hier achter de
       toonbank. Het logo zegt al FEBO, dus de plaatsnaam kan weg. */
    .topbar { gap: 8px; padding: 0 10px; }
    .topbar-title { display: none; }
    .topbar-logo-img { height: 24px; }
    .topbar-nav { gap: 2px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .topbar-nav::-webkit-scrollbar { display: none; }
    .topbar-link { padding: 6px 8px; font-size: 14px; white-space: nowrap; }
    .topbar-help { flex-shrink: 0; }
    .topbar-link { padding: 5px 8px; font-size: 13px; }
    .help-head, .help-body { padding-left: 16px; padding-right: 16px; }
}

/* Agenda-kalender (20-aug-2026). De tabel is vervangen door een maandrooster:
   het weeknummer staat links, want daar draait het weekplan op. */
.kal-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.kal-maand { margin: 0 !important; text-transform: capitalize; }
.kal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--merk-donker);
    text-decoration: none;
    font-size: 16px;
    background: var(--card-bg);
}
.kal-nav:hover { border-color: var(--merk); color: var(--merk); }

.kal-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; color: var(--text-muted); }
.kal-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.kal-stip { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.kal-stip-event { background: var(--merk-donker); }
.kal-stip-campagne { background: var(--merk); }
.kal-labels { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; }
.kal-label {
    display: block; font-size: 11px; line-height: 1.3; padding: 1px 5px; border-radius: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
    background: var(--merk-licht); color: var(--merk-donker);
    border-left: 2px solid var(--merk-donker);
}
.kal-label-campagne { border-left-color: var(--merk); color: var(--merk); }
.kal-label-voorgesteld { background: transparent; border: 1px dashed var(--text-muted); border-left-width: 1px; color: var(--text-muted); }
.kal-label-meer { background: none; border: 0; color: var(--text-muted); padding-left: 0; }
.kal-legenda .kal-label { display: inline-block; }
@media (max-width: 600px) {
    .kal-label { font-size: 10px; padding: 1px 3px; }
    .kal-labels .kal-label:nth-child(2):not(.kal-label-meer) { display: none; }
}
.kal-stip-voorgesteld { background: transparent; border: 1.5px solid var(--text-muted); box-sizing: border-box; }

.kalender {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.kal-header, .kal-week { display: grid; grid-template-columns: 34px repeat(7, 1fr); }
.kal-header {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
}
.kal-weekkop, .kal-dagkop {
    padding: 7px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}
.kal-week + .kal-week { border-top: 1px solid var(--border); }
.kal-weeknr {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border-right: 1px solid var(--border);
}
.kal-weeknr-plan { color: var(--success); }

.kal-dag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 64px;
    min-width: 0;
    padding: 6px 3px;
    text-decoration: none;
    color: var(--text);
    border-left: 1px solid var(--border);
}
.kal-dag:hover { background: var(--merk-licht); }
.kal-dagnr { font-size: 13px; font-weight: 600; }
.kal-dag-buiten .kal-dagnr { color: var(--border); font-weight: 500; }
.kal-dag-vandaag .kal-dagnr {
    background: var(--merk-donker);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kal-dag-gekozen { background: var(--merk-licht); box-shadow: inset 0 0 0 2px var(--merk); }
.kal-stippen { display: flex; gap: 3px; }

.kal-dagitems { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.kal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--merk-donker);
    border-radius: 6px;
    padding: 10px 14px;
}
.kal-item-campagne { border-left-color: var(--merk); }
.kal-item-voorgesteld { border-left-style: dashed; border-left-color: var(--text-muted); }
.kal-item-knoppen { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.kal-item-knoppen .link-button { padding: 8px 10px; min-height: 40px; }
.kal-suggestie-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kal-nieuw-melding { color: var(--text); font-weight: 600; margin-left: 6px; }
.btn-klein { padding: 6px 12px; font-size: 13px; }
.context-suggestie { margin-top: -6px; }
.kal-meer { margin: 4px 0 16px; }
.kal-meer summary { cursor: pointer; color: var(--merk); font-size: 14px; padding: 8px 0; }
.kal-meer .kal-dagitems { margin-top: 8px; }
.kal-item-tekst { min-width: 0; }
.kal-item-tekst strong { display: block; font-size: 14px; }
.kal-item-meta { font-size: 12px; color: var(--text-muted); }

@media (max-width: 600px) {
    .kal-header, .kal-week { grid-template-columns: 26px repeat(7, 1fr); }
    .kal-dag { min-height: 48px; padding: 5px 1px; }
    .kal-dagnr { font-size: 12px; }
    .kal-weekkop, .kal-dagkop { padding: 6px 1px; font-size: 10px; }
    .kal-weeknr { font-size: 11px; }
    .kal-item { align-items: flex-start; }
    /* Op een telefoon perst de knoppenkolom de titel tot twee woorden per regel
       (30-aug-2026, 390px: "Het Colofon in Arn"). Onder elkaar leest hij weer. */
    .week-suggesties .kal-item { flex-direction: column; align-items: stretch; gap: 8px; }
    .week-suggesties .kal-item-knoppen { justify-content: flex-end; }
}

/* Herhaling in het agendaformulier */
.herhaal-blok {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.herhaal-blok[hidden] { display: none; }
.keuzerij { display: flex; gap: 6px; flex-wrap: wrap; }
.keuze {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.keuze input { accent-color: var(--merk); margin: 0; }
.keuze:has(input:checked) { border-color: var(--merk); background: var(--merk-licht); }
.kal-herhaal {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Cijfers: twee getallen, en wat de tool kost */
.cijfers-uitleg { color: var(--text-muted); max-width: 60ch; margin-bottom: 16px; }
.cijfers-invoer h2 { margin-top: 8px; }
.cijfers-leeg { color: var(--text-muted); max-width: 60ch; }
.cijfers-tabel-wrap { overflow-x: auto; }
.cijfers-tabel {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.cijfers-tabel th, .cijfers-tabel td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.cijfers-tabel th { font-size: 13px; color: var(--text-muted); background: var(--bg-subtle); }
.cijfers-tabel tr:last-child td { border-bottom: none; }
.cijfers-tabel .delta { font-variant-numeric: tabular-nums; }
.delta-op { color: var(--success); font-weight: 600; }
.delta-af { color: var(--danger); font-weight: 600; }
.delta-leeg { color: var(--text-muted); font-size: 13px; }
.kosten-kaart {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}
.kosten-bedrag { font-size: 30px; font-weight: 700; color: var(--merk-donker); font-variant-numeric: tabular-nums; }
.kosten-label { color: var(--text-muted); font-size: 14px; max-width: 46ch; }
.plan-kosten { color: var(--text-muted); font-size: 13px; margin-top: 6px; }

/* Per post meten: een kaart per geplaatste post, D1 en D7 */
.meting-kaart {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 14px;
}
.meting-kop { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; }
.meting-leeftijd { color: var(--text-muted); font-size: 13px; }
.meting-vraag { font-size: 13px; color: var(--text-muted); margin: 12px 0 8px; }
.meting-wacht { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; }
.meting-velden { display: flex; flex-wrap: wrap; gap: 10px; }
.meting-veld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.meting-veld input { width: 92px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 15px; }
.meting-notitie { width: 100%; max-width: 420px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; }
.meting-form button { margin-top: 10px; }
.meting-form + .meting-form { border-top: 1px solid var(--border); margin-top: 12px; }
@media (max-width: 640px) {
    /* Twee per rij op een telefoon: zeven velden onder elkaar is een formulier
       dat niemand afmaakt. */
    .meting-velden { display: grid; grid-template-columns: 1fr 1fr; }
    .meting-veld input { width: 100%; }
}

/* Google Bedrijfsprofiel is een kanaal met een ander publiek, dus herkenbaar */
.post-platform.platform-google { color: #1E40AF; background: #DBEAFE; }

/* Op een telefoon wordt de tabel een lijst: koppen naast de waarde */
@media (max-width: 640px) {
    .cijfers-tabel thead { display: none; }
    .cijfers-tabel, .cijfers-tabel tbody, .cijfers-tabel tr, .cijfers-tabel td { display: block; width: 100%; }
    .cijfers-tabel tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
    .cijfers-tabel tr:last-child { border-bottom: none; }
    .cijfers-tabel td { border-bottom: none; display: flex; justify-content: space-between; gap: 12px; }
    .cijfers-tabel td::before { content: attr(data-label); color: var(--text-muted); font-size: 13px; }
}

/* Met een vijfde item paste de balk niet meer op een telefoon: hij ging schuiven
   en de ?-knop stond op de rand. Een knop die er altijd moet zijn hoort niet aan
   het eind van een rij die kan overlopen, dus de balk krimpt in plaats daarvan. */
@media (max-width: 520px) {
    .topbar { gap: 8px; padding: 0 10px; }
    .topbar-title { display: none; }
    .topbar-logo-img { height: 22px; }
    .topbar-nav { gap: 0; }
    .topbar-link { padding: 6px 5px; font-size: 12px; }
}

/* De nieuwsberichten van de te schrijven week, in het formulier zelf (30-aug-2026).
   Ze stonden alleen op de agenda en werden daardoor nooit aangetikt. */
.week-suggesties { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }

/* Sjabloon: het kader naast zijn uitleg; op een telefoon onder elkaar. */
.stijl-form { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; }
.stijl-groep { border: 0; padding: 0; margin: 0; }
.stijl-groep legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.stijl-optie { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-size: 15px; min-height: 36px; }
.formaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; align-items: start; }
.formaat { margin: 0; }
.formaat img { width: 100%; display: block; border: 1px solid #ddd; }
.formaat figcaption { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.keur-beeld { width: 100%; max-width: 240px; display: block; border-radius: 6px; margin: 4px 0 8px; }
@media (min-width: 700px) { .keur-beeld { max-width: 300px; } }
.formaat-keuze { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.formaat-label { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
.sjabloon-uitleg h3 { font-size: 15px; margin: 18px 0 6px; }
.sjabloon-vast { margin: 0 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }

/* Tekst en bibliotheekfoto spreken elkaar tegen: zeggen, niet blokkeren. */
.foto-mis { margin: 8px 0 0; padding: 8px 12px; background: #FFF4D6; border-left: 4px solid var(--febo-yellow, #FFC72C); color: var(--merk-donker); font-size: 14px; }

/* Alleen op febo.dev: de klantomgeving heeft dit nooit. */
.topbar-dev { margin-left: 10px; padding: 2px 8px; border-radius: 4px; background: #F5C400; color: #222; font-size: 12px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; }

/* Balk in de volgorde van het werk; instellingen achter een streep (8-sep-2026). */
.topbar-sep { flex-shrink: 0; width: 1px; height: 20px; margin: 0 4px; background: rgba(255,255,255,0.35); align-self: center; }
.topbar-link-instelling { font-size: 13px; color: rgba(255,255,255,0.55); }
.scherm-doel { margin: 2px 0 10px; color: var(--text-muted); font-size: 14px; }
/* De haak: waarom de eigenaar een item aantikt, en de knop die er vandaag een post van maakt. */
.kal-haak { flex: 1 1 160px; min-width: 120px; padding: 7px 10px; border: 1px solid var(--border, #ddd); border-radius: 6px; font-size: 13px; }
.kal-item-knoppen { flex-wrap: wrap; }
.kal-item-haak { display: block; margin-top: 4px; font-size: 13px; color: var(--merk); }
/* Op een telefoon vouwt een agenda-item: tekst boven, haakveld en knoppen eronder.
   Zonder dit drukte het haakveld de titel tot een woord per regel (gezien 8-sep-2026
   op dev, 390px). De vier werkstappen in de balk moeten naast elkaar passen. */
@media (max-width: 600px) {
    .kal-item { flex-wrap: wrap; }
    .kal-item-tekst { flex: 1 1 100%; min-width: 0; }
    .kal-item-knoppen { flex: 1 1 100%; justify-content: flex-end; }
    .kal-haak { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 520px) {
    .topbar-link { padding: 6px 4px; font-size: 12px; }
    .topbar-sep { margin: 0 2px; }
    .topbar-dev { margin-left: 6px; padding: 1px 5px; font-size: 10px; }
}
/* Dashboard-tabbladen (8-sep-2026). Contrast is de eis: het actieve blad is
   rood met witte tekst, de andere wit met donkere tekst en een rand, op een
   grijze strook. Op een telefoon drie gelijke vakken over de hele breedte. */
.tabs { display: flex; gap: 6px; margin: 4px 0 18px; padding: 6px; background: #E9E9EB; border-radius: 10px; }
.tab { flex: 1; text-align: center; padding: 11px 12px; border-radius: 7px; background: white; border: 1px solid #CFCFD3; color: var(--merk-donker); font-weight: 600; font-size: 15px; text-decoration: none; }
.tab:hover { border-color: var(--merk); color: var(--merk); }
.tab.actief, .tab.actief:hover { background: var(--merk); border-color: var(--merk); color: white; }
/* Weekmenu op Deze week: dezelfde doos als de tabbladen, maar met knoppen die de pagina verlaten. */
.week-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; padding: 10px 12px; background: #E9E9EB; border-radius: 10px; }
.week-menu-label { font-weight: 600; font-size: 14px; color: var(--text-muted); margin-right: auto; }
@media (max-width: 600px) {
    .tabs { gap: 4px; padding: 4px; }
    .tab { padding: 10px 4px; font-size: 13px; }
    .week-menu-label { flex-basis: 100%; }
    .week-menu .btn { flex: 1; padding: 9px 8px; font-size: 13px; }
}
/* Agenda als rijen per week (8-sep-2026). Dicht: datum en titel op een regel.
   Open: de kaart eronder. De lopende week staat open, de rest is een balk met een aantal. */
.week-blok { margin: 0 0 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }
.week-blok > summary { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; }
.week-blok > summary::-webkit-details-marker { display: none; }
.week-blok > summary::before { content: "\25B8"; color: var(--merk); font-size: 13px; }
.week-blok[open] > summary::before { content: "\25BE"; }
.week-blok-bereik { color: var(--text-muted); font-weight: 400; font-size: 14px; }
.week-blok-aantal { margin-left: auto; color: var(--text-muted); font-weight: 400; font-size: 13px; white-space: nowrap; }
.week-blok-rijen { border-top: 1px solid var(--border); }
.agenda-rij { border-left: 3px solid var(--merk-donker); }
.agenda-rij + .agenda-rij { border-top: 1px solid var(--border); }
.agenda-rij-campagne { border-left-color: var(--merk); }
.agenda-rij-voorgesteld { border-left-style: dashed; border-left-color: var(--text-muted); }
.agenda-rij > summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 15px; }
.agenda-rij > summary::-webkit-details-marker { display: none; }
.agenda-rij[open] > summary { background: var(--merk-licht); }
.agenda-rij-datum { flex: 0 0 72px; color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.agenda-rij-titel { flex: 1; min-width: 0; }
.agenda-rij-haak { color: var(--merk); font-size: 13px; }
.agenda-rij-weg { flex-shrink: 0; }
.agenda-rij-weg .link-button { padding: 4px 8px; min-height: 0; font-size: 13px; }
.agenda-rij-kaart { padding: 4px 12px 12px 94px; }
.agenda-rij-kaart .kal-item-meta { display: block; margin: 0 0 10px; }
@media (max-width: 600px) {
    .agenda-rij > summary { flex-wrap: wrap; gap: 4px 10px; }
    .agenda-rij-datum { flex-basis: auto; }
    .agenda-rij-titel { flex-basis: 100%; order: 3; }
    .agenda-rij-weg { margin-left: auto; }
    .agenda-rij-kaart { padding-left: 12px; }
}