/*
 * ca_componenten.css -- CA_STRUCTUUR_FASE1 (16-10-2026, K4 = A, klikronde Matthias): EEN schermpatroon voor ClientAdmin.
 *
 * WAT: de gedeelde bouwstenen van een beheerscherm (kop, werkbalk, filterchips, lijstrijen, kaarten, velden, meldingen,
 *      schakelaars, editorkaarten, opslaanbalk ...), allemaal op de rollen van ca_tokens.css (--kleur-*, --gewicht-*, --letterafstand-*).
 *      Elke var() heeft een terugval met dezelfde waarde als het token: zonder ca_tokens.css (schakelaar CA_HUISSTIJL_41 uit) ziet een
 *      scherm er hetzelfde uit.
 * VERPLICHT voor elk nieuw scherm (K4): geen eigen <style>-blok met een eigen voorvoegsel meer. Ontbreekt een bouwsteen, dan komt hij
 *      HIER bij, met een algemene naam (ca-...), niet in het scherm.
 * HELPERS: caPaginaKop / caLegeToestand / caBevestigKnop (php/helpers/ca_ui_helpers.php) en caEditorKop / caEditorKaart /
 *      caEditorOpslaanBalk / caEditorMelding (php/helpers/ca_editor_ui_helpers.php) geven de klassen hieronder.
 * GELADEN: clientadmin/inc/template_start.php, altijd (ook zonder huisstijl 4.1), na maw_general.css en vóór ca_tokens.css/huisstijl41.css.
 * REGELS (voorstel §4b): kaarten radius 8 px; knoppen radius 6 px, 40 px hoog (gsm 44 px), max. 1 primaire knop per scherm;
 *      schakelaar 40x22 px, aan = accent; statuschip altijd met tekst; gsm (<= 600 px) = 1 kolom.
 * Alle regels zitten onder .ca-scherm (het #page-content van zo'n scherm) of hebben een eigen ca-klasse: oude schermen veranderen niet.
 */

/* ---------------------------------------------------------------------------------------------
   0. Scherm (wrapper = #page-content.ca-scherm)
--------------------------------------------------------------------------------------------- */
.ca-scherm { font-weight: var(--gewicht-basis, 300); letter-spacing: var(--letterafstand-tekst, -0.03em); }
.ca-scherm > * { max-width: var(--ca-max, 1200px); }
.ca-scherm.ca-scherm-smal { --ca-max: 1000px; }
.ca-scherm.ca-scherm-editor { --ca-max: 1100px; }
.ca-scherm.ca-scherm-vol { --ca-max: none; }
.ca-scherm strong, .ca-scherm b, .ca-scherm h1, .ca-scherm h2, .ca-scherm h3, .ca-scherm label, .ca-scherm summary {
    font-weight: var(--gewicht-vet, 700); letter-spacing: var(--letterafstand-vet, -0.02em);
}
.ca-scherm [hidden] { display: none !important; }
.ca-scherm .btn { border-radius: 6px; }
.ca-scherm form { margin-bottom: 0; }

/* ---------------------------------------------------------------------------------------------
   1. Paginakop (caPaginaKop met ['uitleg' => ...]) en kruimelpad van een editor
--------------------------------------------------------------------------------------------- */
.ca-paginakop { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin: 0 0 16px; }
.ca-paginakop h1 { font-size: 24px; line-height: 1.25; margin: 0 0 4px; color: var(--kleur-kop, #0F3540); word-break: break-word; }
.ca-paginakop-uitleg { color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; margin: 0; }
.ca-paginakop-acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ca-paginakop-acties form { margin: 0; }
.ca-kruimels, .ca-scherm .ca-ed-kruimel { font-size: 13px; color: var(--kleur-tekst-zacht, #6B7780); margin: 0 0 14px; }
.ca-kruimels a, .ca-scherm .ca-ed-kruimel a { color: inherit; }
.ca-scherm .ca-ed-kop { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.ca-scherm .ca-ed-kop h1 { font-size: 24px; line-height: 1.25; margin: 0; color: var(--kleur-kop, #0F3540); word-break: break-word; }
.ca-scherm .ca-ed-meta { color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; margin: 4px 0 0; }
.ca-scherm .ca-ed-kop-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ca-terug { display: inline-block; margin: 0 14px 10px 0; }

/* ---------------------------------------------------------------------------------------------
   2. Tekst
--------------------------------------------------------------------------------------------- */
.ca-zacht { color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; }
p.ca-zacht { margin: 0; }
.ca-hulp { color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; margin: 6px 0 0; }
.ca-tekst { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.ca-waarsch { color: var(--kleur-waarschuwing, #9A6A10); font-size: 12px; }

/* ---------------------------------------------------------------------------------------------
   3. Tellers, filterchips, werkbalk, statuschips
--------------------------------------------------------------------------------------------- */
.ca-teller { display: inline-block; background: var(--kleur-info, #17607A); color: #FFFFFF; border-radius: 999px; padding: 5px 12px; font-weight: var(--gewicht-vet, 700); font-size: 13px; white-space: nowrap; }
.ca-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.ca-werkbalk .ca-filters { margin: 0; }
.ca-filter { border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 999px; padding: 7px 14px; color: var(--kleur-tekst, #22303A); text-decoration: none; white-space: nowrap; background: var(--kleur-oppervlak, #FFFFFF); }
.ca-filter:hover, .ca-filter:focus { text-decoration: none; border-color: var(--kleur-primair, #397960); color: var(--kleur-tekst, #22303A); }
.ca-filter.actief, .ca-filter.actief:hover { background: var(--kleur-primair, #397960); border-color: var(--kleur-primair, #397960); color: var(--kleur-primair-tekst, #FFFFFF); }
.ca-filter b { font-weight: var(--gewicht-vet, 700); margin-left: 4px; }
.ca-filter small { opacity: .75; margin-left: 4px; }
body.ca-hs41[data-omgeving] #page-content.ca-scherm a.ca-filter.actief { color: var(--kleur-primair-tekst, #FFFFFF); }
.ca-werkbalk { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 16px; }
.ca-werkbalk-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ca-werkbalk select, .ca-werkbalk input[type=search] { padding: 7px 10px; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 6px; font: inherit; max-width: 100%; background: var(--kleur-oppervlak, #FFFFFF); }
.ca-pil-info { background: var(--kleur-info-licht, #E4EFF4); color: var(--kleur-info, #17607A); }
.ca-pil-zacht { background: var(--kleur-oppervlak-zacht, #F6F8F9); color: var(--kleur-tekst, #22303A); }
.ca-pil-donker { background: var(--kleur-secundair, #0F3540); color: #FFFFFF; }

/* ---------------------------------------------------------------------------------------------
   4. Kaarten, raster, kolommen
--------------------------------------------------------------------------------------------- */
.ca-scherm .ca-kaart h2 { font-size: 16px; margin: 0 0 10px; }
.ca-kaart-ruimte { margin-bottom: 14px; }
.ca-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ca-raster.ca-raster-ruim { gap: 16px; }
.ca-raster.ca-raster-dicht { gap: 10px 14px; }
.ca-raster > .ca-kaart, .ca-raster > .ca-ed-kaart { margin: 0; }
.ca-raster-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ca-vol { grid-column: 1 / -1; }
.ca-kolommen { display: grid; gap: 12px; }
.ca-kolommen-2-1 { grid-template-columns: 2fr 1fr; }
.ca-kolommen-1-2 { grid-template-columns: 1fr 2fr; }
.ca-kolommen-2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
/* Editorkaart (caEditorKaart) en kaart als <details> */
.ca-scherm .ca-ed-kaart { background: var(--kleur-oppervlak, #FFFFFF); border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 8px; padding: 18px; min-width: 0; }
.ca-scherm .ca-ed-kaart > h2 { font-size: 16px; margin: 0 0 12px; }
.ca-scherm .ca-ed-kaart-uitleg { color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; margin: -6px 0 12px; }
.ca-scherm details.ca-ed-kaart > summary { cursor: pointer; }
.ca-scherm details.ca-ed-kaart[open] > summary { margin-bottom: 12px; }

/* ---------------------------------------------------------------------------------------------
   5. Lijstrijen (klik op de rij = openen), groepen, datumblok, paginering, lege toestand
--------------------------------------------------------------------------------------------- */
.ca-lijstrij { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--kleur-lijn-zacht, #EDF0F2); color: var(--kleur-tekst, #22303A); text-decoration: none; }
.ca-lijstrij:last-child { border-bottom: 0; }
a.ca-lijstrij:hover, a.ca-lijstrij:focus { text-decoration: none; background: var(--kleur-oppervlak-zacht, #F6F8F9); color: var(--kleur-tekst, #22303A); }
.ca-lijstrij-links { flex: 0 0 var(--ca-kol, 150px); font-weight: var(--gewicht-vet, 700); }
.ca-lijstrij-links span { display: block; font-weight: var(--gewicht-basis, 300); color: var(--kleur-tekst-zacht, #6B7780); font-size: 12px; }
.ca-lijstrij-hoofd { flex: 1; min-width: 0; }
.ca-lijstrij-hoofd strong, .ca-lijstrij-hoofd span { display: block; overflow-wrap: anywhere; }
.ca-lijstrij-hoofd span { color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; }
.ca-lijstrij-rechts { flex: 0 0 var(--ca-kol-rechts, 120px); color: var(--kleur-tekst-zacht, #6B7780); font-size: 12px; text-align: right; }
.ca-lijstrij-bedrag { flex: 0 0 var(--ca-kol-rechts, 120px); text-align: right; font-weight: var(--gewicht-vet, 700); }
.ca-lijstrij-actie { font-size: 18px; padding: 8px; }
.ca-groep { margin-bottom: 18px; }
.ca-groep > h2 { font-size: 17px; margin: 0 0 8px; }
.ca-datumblok { width: 48px; flex: 0 0 48px; text-align: center; }
.ca-datumblok b { display: block; font-size: 20px; }
.ca-datumblok span { text-transform: uppercase; font-size: 11px; color: var(--kleur-tekst-zacht, #6B7780); }
.ca-paginering { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 18px; }
.ca-leeg { padding: 28px 16px 32px; text-align: center; color: var(--kleur-tekst-zacht, #6B7780); }
.ca-leeg h3 { margin: 0 0 6px; font-size: 20px; color: var(--kleur-tekst, #22303A); }
.ca-leeg p { margin: 0 auto 16px; max-width: 460px; font-size: 15px; }
.ca-leeg .ca-acties { justify-content: center; margin: 0; }
.ca-leeg-kaart { background: var(--kleur-oppervlak, #FFFFFF); border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 8px; padding: 18px; }

/* ---------------------------------------------------------------------------------------------
   6. Itemkaarten in een raster (beeld bovenaan, titel, 1 regel meta)
--------------------------------------------------------------------------------------------- */
.ca-itemkaart { display: flex; flex-direction: column; background: var(--kleur-oppervlak, #FFFFFF); border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 8px; overflow: hidden; }
.ca-itemkaart.ca-itemkaart-concept { border-style: dashed; }
.ca-itemkaart-beeld { display: block; aspect-ratio: 16 / 10; background: var(--kleur-oppervlak-zacht, #F6F8F9); }
.ca-itemkaart-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-itemkaart-geenbeeld { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 34px; color: var(--kleur-uitgeschakeld, #BFC6CC); }
.ca-itemkaart-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; flex: 1; }
.ca-itemkaart-titel { font-size: 17px; margin: 2px 0 0; }
.ca-itemkaart-titel a { color: inherit; text-decoration: none; }
.ca-itemkaart-meta { color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; margin: 0 0 6px; flex: 1; }

/* ---------------------------------------------------------------------------------------------
   7. Uitklapformulier (knop die een klein formulier opent, bv. "Nieuw bericht")
--------------------------------------------------------------------------------------------- */
.ca-uitklap { position: relative; }
.ca-uitklap > summary { list-style: none; cursor: pointer; }
.ca-uitklap > summary::-webkit-details-marker { display: none; }
.ca-uitklap form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding: 12px; background: var(--kleur-oppervlak, #FFFFFF); border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 8px; }
.ca-uitklap input[type=text] { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 6px; font: inherit; }
.ca-uitklap-fout { color: var(--kleur-fout, #B4483C); font-size: 13px; }

/* ---------------------------------------------------------------------------------------------
   8. Meldingen (ook caEditorMelding: .ca-ed-melding-*)
--------------------------------------------------------------------------------------------- */
.ca-melding, .ca-scherm .ca-ed-melding { padding: 12px 14px; border-radius: 8px; margin: 0 0 14px; }
.ca-melding-ok, .ca-scherm .ca-ed-melding-ok { background: var(--kleur-succes-licht, #EAF5EF); color: var(--kleur-succes, #2F7A57); }
.ca-melding-fout, .ca-scherm .ca-ed-melding-fout { background: var(--kleur-fout-licht, #FBEDEB); color: var(--kleur-fout, #B4483C); }
.ca-melding-let, .ca-scherm .ca-ed-melding-let { background: var(--kleur-waarschuwing-licht, #FBF3E2); color: var(--kleur-waarschuwing, #9A6A10); }
.ca-melding-info, .ca-scherm .ca-ed-melding-info { background: var(--kleur-info-licht, #E4EFF4); color: var(--kleur-info, #17607A); }
.ca-infoblok { background: var(--kleur-oppervlak-zacht, #F6F8F9); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.ca-infoblok p { margin: 0; }
.ca-infoblok p + p { margin-top: 6px; }
.ca-afwijking { background: var(--kleur-fout-licht, #FBEDEB); border-radius: 6px; padding: 8px 10px; margin: 4px 0; }

/* ---------------------------------------------------------------------------------------------
   9. Gegevens tonen (label: waarde) en regels met een scheidingslijn
--------------------------------------------------------------------------------------------- */
.ca-velden { margin: 0; }
.ca-veldrij { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--kleur-lijn-zacht, #EDF0F2); }
.ca-veldrij:last-child { border-bottom: 0; }
.ca-veldrij dt { flex: 0 0 130px; color: var(--kleur-tekst-zacht, #6B7780); font-weight: var(--gewicht-basis, 300); }
.ca-veldrij dd { flex: 1; margin: 0; overflow-wrap: anywhere; }
.ca-lees dt { color: var(--kleur-tekst-zacht, #6B7780); font-weight: var(--gewicht-basis, 300); font-size: 12px; }
.ca-lees dd { margin: 0 0 8px; overflow-wrap: anywhere; white-space: pre-wrap; }
.ca-regelrij { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--kleur-lijn-zacht, #EDF0F2); }
.ca-regelrij:last-child { border-bottom: 0; }
.ca-antwoord { padding: 8px 0; border-bottom: 1px solid var(--kleur-lijn-zacht, #EDF0F2); }
.ca-antwoord:last-child { border-bottom: 0; }
.ca-antwoord p { margin: 0; color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; }
.ca-antwoord strong { display: block; }
.ca-antwoord em { display: block; font-style: normal; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------------------------
   10. Formulieren: veld, compact veld, keuzes, schakelaar, labels/toggles
--------------------------------------------------------------------------------------------- */
.ca-veld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.ca-veld:last-child { margin-bottom: 0; }
.ca-veld input[type=text], .ca-veld input[type=email], .ca-veld input[type=url], .ca-veld input[type=number], .ca-veld input[type=date],
.ca-veld input[type=time], .ca-veld input[type=tel], .ca-veld input:not([type]), .ca-veld textarea, .ca-veld select, .ca-invoer {
    width: 100%; box-sizing: border-box; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 6px; padding: 10px; font: inherit; background: var(--kleur-oppervlak, #FFFFFF); color: var(--kleur-tekst, #22303A);
}
.ca-veld textarea { min-height: 150px; resize: vertical; }
.ca-veld.ca-veld-lang textarea { min-height: 170px; }
.ca-veld-compact { display: block; gap: 0; margin-bottom: 0; }
.ca-veld-compact label { display: block; font-size: 13px; margin-bottom: 3px; }
.ca-veld.ca-veld-compact input[type=text], .ca-veld.ca-veld-compact input[type=email], .ca-veld.ca-veld-compact input[type=date],
.ca-veld.ca-veld-compact input[type=number], .ca-veld.ca-veld-compact select, .ca-veld.ca-veld-compact textarea { padding: 7px 9px; }
.ca-veld.ca-veld-compact textarea { min-height: 80px; }
.ca-veld.fout input, .ca-veld.fout textarea, .ca-veld.fout select { border-color: var(--kleur-fout, #B4483C); }
.ca-veldfout { display: block; color: var(--kleur-fout, #B4483C); font-size: 12px; margin-top: 3px; }
/* Formulier met Bootstrap form-group (oudere opbouw) */
.ca-formulier .form-group { margin-bottom: 12px; }
.ca-formulier .ca-label { display: block; margin-bottom: 4px; }
.ca-formulier .ca-label { font-weight: var(--gewicht-vet, 700); letter-spacing: var(--letterafstand-vet, -0.02em); } /* ook als <span> (keuzerondjes) */
.ca-formulier input[type=text], .ca-formulier input[type=number], .ca-formulier select, .ca-formulier textarea {
    width: 100%; max-width: 520px; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 6px; padding: 7px 9px; font: inherit;
}
.ca-formulier textarea { min-height: 90px; }
.ca-formulier .ca-hulp { font-size: 12px; margin: 3px 0 0; }
.ca-keuzes { display: flex; gap: 16px; flex-wrap: wrap; }
.ca-keuzes label { font-weight: var(--gewicht-basis, 300); display: flex; gap: 6px; align-items: center; letter-spacing: var(--letterafstand-tekst, -0.03em); }
/* Schakelaar: <label class="ca-schakelaar"><span>tekst</span><input type="checkbox"><span class="ca-schakelaar-knop"></span></label> */
.ca-schakelaar { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.ca-schakelaar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ca-schakelaar-knop { flex: 0 0 auto; width: 40px; height: 22px; border-radius: 11px; background: var(--kleur-uitgeschakeld, #BFC6CC); position: relative; transition: background .15s; }
.ca-schakelaar-knop::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; transition: left .15s; }
.ca-schakelaar input:checked + .ca-schakelaar-knop { background: var(--kleur-accent, #69B899); }
.ca-schakelaar input:checked + .ca-schakelaar-knop::after { left: 20px; }
.ca-schakelaar input:focus-visible + .ca-schakelaar-knop { outline: 2px solid var(--kleur-focus, #397960); outline-offset: 2px; }
/* Rij met een bestaande .ca-toggle en een tekst ernaast */
.ca-schakelrij { display: flex; gap: 10px; align-items: center; margin: 0; }
.ca-schakelrij-tekst { font-size: 13px; }
.ca-schakels { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
/* Keuzepillen (categorieën) en taalknoppen */
.ca-pilkeuze { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-pilkeuze label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 16px; padding: 6px 12px; font-weight: var(--gewicht-basis, 300); cursor: pointer; }
.ca-pilkeuze input { margin: 0; }
.ca-pilkeuze label.is-aan { background: var(--kleur-primair, #397960); color: var(--kleur-primair-tekst, #FFFFFF); border-color: var(--kleur-primair, #397960); }
.ca-taalknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ca-taalknoppen button { border: 1px solid var(--kleur-lijn, #DDE2E6); background: var(--kleur-oppervlak, #FFFFFF); border-radius: 16px; padding: 5px 12px; cursor: pointer; }
.ca-taalknoppen button.is-aan { background: var(--kleur-primair, #397960); color: var(--kleur-primair-tekst, #FFFFFF); border-color: var(--kleur-primair, #397960); }

/* ---------------------------------------------------------------------------------------------
   11. Acties (knoppen met een uitlegregel eronder) en knoppenrij
--------------------------------------------------------------------------------------------- */
.ca-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.ca-acties form { margin: 0; }
.ca-acties.ca-acties-rechts { justify-content: flex-end; align-items: center; margin-top: 16px; }
.ca-acties-ruimte { margin: 0 0 12px; gap: 8px; }
.ca-actie-uitleg { color: var(--kleur-tekst-zacht, #6B7780); font-size: 12px; margin: 4px 0 0; max-width: 280px; }
.ca-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ca-knoppen form, .ca-mini { display: inline; margin: 0; }
.ca-knoppen-klein { display: flex; gap: 4px; flex-wrap: nowrap; }
.ca-knoppen-klein .btn { padding: 5px 8px; }

/* ---------------------------------------------------------------------------------------------
   12. Beeld kiezen (voorbeeld + knop), voorbeeldbeeld
--------------------------------------------------------------------------------------------- */
.ca-beeldkeuze { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ca-beeldkeuze img { width: 200px; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 6px; }
.ca-beeldkeuze-leeg { width: 200px; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--kleur-lijn, #DDE2E6); border-radius: 6px; color: var(--kleur-tekst-zacht, #6B7780); font-size: 34px; }
.ca-beeldkeuze.ca-beeldkeuze-vierkant img { width: 140px; height: 140px; aspect-ratio: auto; }
.ca-beeldkeuze.ca-beeldkeuze-vierkant .ca-beeldkeuze-leeg { width: 140px; height: 140px; aspect-ratio: auto; font-size: 40px; }
.ca-voorbeeldbeeld { max-width: 260px; max-height: 180px; object-fit: contain; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 6px; }

/* ---------------------------------------------------------------------------------------------
   13. Slepen voor volgorde (greep links), genummerde sleeplijst, regels in een sectie
--------------------------------------------------------------------------------------------- */
.ca-greep { cursor: grab; color: var(--kleur-tekst-zacht, #6B7780); user-select: none; font-size: 18px; line-height: 1; padding: 2px 4px; }
.ca-sleepbaar.sleept { opacity: .4; }
.ca-sleepbaar.over { outline: 2px dashed var(--kleur-primair, #397960); outline-offset: 2px; }
.ca-sleeplijst { list-style: none; margin: 0; padding: 0; counter-reset: canr; }
.ca-sleeplijst li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 6px; margin-bottom: 6px; background: var(--kleur-oppervlak-zacht, #F6F8F9); counter-increment: canr; }
.ca-sleeplijst li::before { content: counter(canr); min-width: 20px; color: var(--kleur-tekst-zacht, #6B7780); font-size: 12px; }
.ca-sleeplijst li.is-sleep { opacity: .5; }
.ca-sleeplijst .ca-greep { font-size: inherit; padding: 0; }
.ca-sleeplijst-naam { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ca-sleeplijst button { border: 0; background: none; font-size: 16px; padding: 4px 6px; cursor: pointer; color: var(--kleur-tekst, #22303A); }
.ca-sleeplijst .ca-weg { color: var(--kleur-fout, #B4483C); font-size: 20px; }
.ca-ruimte-boven { margin-top: 10px; }
.ca-sectie { margin-bottom: 14px; }
.ca-sectie.uit { opacity: .6; }
.ca-sectiekop { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.ca-sectiekop h2 { font-size: 18px; margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ca-sectiekop small { font-weight: var(--gewicht-basis, 300); color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; }
.ca-regels { list-style: none; margin: 0; padding: 0; }
.ca-regel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--kleur-lijn-zacht, #EDF0F2); }
.ca-regel.uit .ca-regel-tekst { opacity: .55; text-decoration: line-through; }
.ca-regel-tekst { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.ca-regel-tekst span { display: block; color: var(--kleur-tekst-zacht, #6B7780); font-size: 12px; }
.ca-regel-acties { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ca-regels-leeg { color: var(--kleur-tekst-zacht, #6B7780); font-size: 13px; padding: 8px 0; border-top: 1px solid var(--kleur-lijn-zacht, #EDF0F2); margin: 0; }

/* ---------------------------------------------------------------------------------------------
   14. Posten met aantal en prijs (offerte) en totaal
--------------------------------------------------------------------------------------------- */
.ca-post { display: grid; grid-template-columns: minmax(0, 3fr) 80px 70px 110px 70px 110px auto; gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--kleur-lijn-zacht, #EDF0F2); }
.ca-post:last-of-type { border-bottom: 0; }
.ca-post input, .ca-post select { width: 100%; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 6px; padding: 6px 8px; font: inherit; }
.ca-post .ca-post-label { display: none; font-size: 11px; color: var(--kleur-tekst-zacht, #6B7780); }
.ca-post.ca-post-kop { font-size: 12px; color: var(--kleur-tekst-zacht, #6B7780); font-weight: var(--gewicht-vet, 700); padding-bottom: 0; border-bottom: 0; }
.ca-post .ca-post-som { text-align: right; font-weight: var(--gewicht-vet, 700); padding-bottom: 7px; }
.ca-totaal { display: flex; justify-content: flex-end; margin-top: 10px; }
.ca-totaal table td { padding: 3px 0 3px 18px; text-align: right; }
.ca-totaal .groot td { font-size: 16px; font-weight: var(--gewicht-vet, 700); border-top: 1px solid var(--kleur-lijn, #DDE2E6); }

/* ---------------------------------------------------------------------------------------------
   15. Maandkalender (lijst + maand) en datumkiezer
--------------------------------------------------------------------------------------------- */
.ca-maandnav { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0 0 12px; }
.ca-maandnav h2 { font-size: 18px; margin: 0 auto; }
.ca-maand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 8px; overflow: hidden; background: var(--kleur-oppervlak, #FFFFFF); }
.ca-maand-wd { padding: 8px; text-align: center; background: var(--kleur-oppervlak-zacht, #F6F8F9); font-weight: var(--gewicht-vet, 700); }
.ca-maand-dag { min-height: 112px; padding: 7px; border-top: 1px solid var(--kleur-lijn-zacht, #EDF0F2); border-right: 1px solid var(--kleur-lijn-zacht, #EDF0F2); }
.ca-maand-dag.buiten { background: var(--kleur-oppervlak-zacht, #F6F8F9); color: var(--kleur-tekst-zacht, #6B7780); }
.ca-maand-dnr { display: block; font-weight: var(--gewicht-vet, 700); margin-bottom: 5px; }
.ca-maand-leeg { text-decoration: none; color: inherit; display: block; min-height: 90px; }
.ca-maand-item { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 5px; margin: 2px 0; border-left: 3px solid var(--kleur-primair, #397960); background: var(--kleur-succes-licht, #EAF5EF); color: var(--kleur-tekst, #22303A); font-size: 12px; }
.ca-maand-item.offline { border-color: var(--kleur-waarschuwing, #9A6A10); background: var(--kleur-waarschuwing-licht, #FBF3E2); }
.ca-maand-meer { font-size: 11px; color: var(--kleur-tekst-zacht, #6B7780); }
.ca-ruimte-boven-groot { margin-top: 16px; }
.ca-kalender { margin-top: 10px; max-width: 300px; border: 1px solid var(--kleur-lijn, #DDE2E6); border-radius: 8px; padding: 10px; background: var(--kleur-oppervlak, #FFFFFF); font-size: 13px; }
.ca-kalender-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: var(--gewicht-vet, 700); }
.ca-kalender-kop button { border: 0; background: none; font-size: 18px; line-height: 1; padding: 2px 8px; cursor: pointer; }
.ca-kalender-rooster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ca-kalender-rooster span { color: var(--kleur-tekst-zacht, #6B7780); font-size: 11px; padding: 2px 0; }
.ca-kalender-rooster button { border: 0; background: none; padding: 6px 0; border-radius: 6px; cursor: pointer; }
.ca-kalender-rooster button:hover { background: var(--kleur-oppervlak-zacht, #F6F8F9); }
.ca-kalender-rooster button.is-vandaag { outline: 1px solid var(--kleur-lijn, #DDE2E6); }
.ca-kalender-rooster button.is-gekozen { background: var(--kleur-primair, #397960); color: var(--kleur-primair-tekst, #FFFFFF); }
.ca-weekdag { margin-top: 6px; font-weight: var(--gewicht-vet, 700); }
.ca-status { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.ca-status.is-on { background: var(--kleur-succes-licht, #EAF5EF); color: var(--kleur-succes, #2F7A57); }
.ca-status.is-off { background: var(--kleur-fout-licht, #FBEDEB); color: var(--kleur-fout, #B4483C); }

/* ---------------------------------------------------------------------------------------------
   16. Opslaanbalk van een editor (caEditorOpslaanBalk) -- zonder ca_editor.css
--------------------------------------------------------------------------------------------- */
.ca-scherm .ca-ed-balk { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ca-scherm .ca-ed-balk-tekst { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }
.ca-scherm .ca-ed-status { font-weight: var(--gewicht-vet, 700); font-size: 13px; }
.ca-scherm .ca-ed-balk-hint { color: var(--kleur-tekst-zacht, #6B7780); font-size: 12px; }
.ca-scherm .ca-ed-balk .btn, .ca-scherm .ca-ed-balk .ca-btn { min-height: 40px; }

/* ---------------------------------------------------------------------------------------------
   17. Tabel in een scherm (DataTables): kopjes in gewone letters
--------------------------------------------------------------------------------------------- */
.ca-scherm table.dataTable > thead > tr > th, .ca-scherm .ca-tabelkop-gewoon > thead > tr > th { text-transform: none; letter-spacing: var(--letterafstand-vet, -0.02em); font-size: 13px; }
.ca-scherm .dataTables_wrapper .dataTables_filter input { max-width: 100%; }

/* ---------------------------------------------------------------------------------------------
   18. Zijbalk (K1/K2): uitleg onder een module-item ("Tour dates" / Optredens)
--------------------------------------------------------------------------------------------- */
.sidebar-nav .ca-nav-uitleg { display: block; font-size: 11px; line-height: 1.2; opacity: .72; font-weight: var(--gewicht-basis, 300); margin-top: 1px; white-space: normal; }

.sidebar-nav > .sidebar-view-group.ca-nav-vast > .ca-nav-groepstitel { cursor: default; }
.sidebar-nav > .sidebar-view-group.ca-nav-vast > .ca-nav-groepstitel:hover { background: transparent !important; }

/* ---------------------------------------------------------------------------------------------
   19. Gsm (<= 600 px): alles 1 kolom, knoppen volle breedte, tikbare hoogte 44 px
--------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .ca-scherm .btn { min-height: 44px; }
    .ca-raster, .ca-raster-auto, .ca-kolommen-2-1, .ca-kolommen-1-2, .ca-kolommen-2-1-1 { grid-template-columns: 1fr; }
    .ca-scherm .ca-ed-kaart { padding: 14px; }
    .ca-lijstrij { flex-wrap: wrap; gap: 4px 10px; }
    .ca-lijstrij-links { flex: 1 1 100%; }
    .ca-lijstrij-rechts, .ca-lijstrij-bedrag { flex: 1 1 100%; text-align: left; }
    .ca-lijstrij.ca-lijstrij-agenda { align-items: flex-start; }
    .ca-lijstrij.ca-lijstrij-agenda .ca-lijstrij-hoofd { min-width: calc(100% - 72px); }
    .ca-lijstrij.ca-lijstrij-agenda .ca-lijstrij-actie { margin-left: 60px; }
    .ca-veldrij { flex-direction: column; gap: 2px; }
    .ca-veldrij dt { flex: none; }
    .ca-acties { flex-direction: column; align-items: stretch; }
    .ca-acties .btn, .ca-acties.ca-acties-rechts .btn, .ca-scherm .ca-ed-kop .btn, .ca-paginakop-acties .btn { width: 100%; }
    .ca-acties-ruimte { flex-direction: row; flex-wrap: wrap; }
    .ca-acties-ruimte .btn { width: auto; flex: 1 1 calc(50% - 4px); }
    .ca-leeg .ca-acties .btn { flex: 1 1 100%; }
    .ca-actie-uitleg { max-width: none; }
    .ca-alleen-groot { display: none !important; }
    .ca-uitklap { width: 100%; }
    .ca-paginakop > .ca-uitklap > summary { display: block; text-align: center; }
    .ca-sectiekop { align-items: flex-start; }
    .ca-regel-acties { width: 100%; }
    .ca-knoppen .btn { flex: 1 1 auto; }
    .ca-regel-tekst { flex-basis: 100%; }
    .ca-scherm .ca-ed-balk .btn { flex: 1 1 auto; }
    .ca-scherm .ca-ed-balk .btn, .ca-scherm .ca-ed-balk .ca-btn { min-height: 44px; }
}
@media (max-width: 700px) {
    .ca-post { grid-template-columns: 1fr 1fr; padding: 12px 0; }
    .ca-post .ca-post-label { display: block; }
    .ca-post > .ca-post-oms, .ca-post > .ca-knoppen-klein { grid-column: 1 / -1; }
    .ca-post.ca-post-kop { display: none; }
    .ca-post .ca-post-som { text-align: left; }
}

/* ---------------------------------------------------------------------------------------------
   CA_ZIJBALK_FIX (16-10-2026): titels van de zijbalkgroepen kleiner (14px / 700 / -0.02em / lh 1.3)
   Lange titels ("Inhoud van de website", "Deze website (klantbeheer)") lopen over twee regels zonder te overlappen:
   white-space normal + hoogte automatisch (huisstijl41.css zet 44px hoog + line-height 44px !important; dat wordt hier overschreven).
--------------------------------------------------------------------------------------------- */
body.ca-hs41[data-omgeving] #sidebar .sidebar-nav > .sidebar-view-group > a.sidebar-view-toggle {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    height: auto !important;
    min-height: 44px;
    box-sizing: border-box;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
body.ca-hs41[data-omgeving] #sidebar .sidebar-nav > .sidebar-view-group > a.sidebar-view-toggle > span { display: block; }
body.ca-hs41[data-omgeving] #sidebar .sidebar-nav > .sidebar-view-group > a.sidebar-view-toggle > i.sidebar-nav-indicator {
    margin: 0 0 0 8px !important;
    height: 18px !important;
    line-height: 18px !important;
}