/* Kaartvorm per klant: de opmaak achter de namen die de beheerder in Instellingen kiest (lib/kaartinstelling.js zet de attributen).
   Alleen vaste regels met tokens uit tokens.css; er komt nooit tekst uit de database in dit bestand of in de pagina.
   Alles werkt op de kaart zelf (.kaart[data-...]), dus ook in het voorbeeld in Instellingen.
   Specificiteit: een data-attribuut op de kaart wint van de kleurfamilie-klasse in kaarten.css; "per format" en "rustig grijs" winnen van een gekozen kleur. */

/* kleurenpalet: vlak (kopband), tekst op dat vlak, lijn (rand en patroon) */
:root {
  --kv-neutraal-vlak: var(--ctx-surface-sunken); --kv-neutraal-tekst: var(--ctx-text-muted); --kv-neutraal-lijn: var(--ctx-status-neutraal);
  --kv-info-vlak: var(--ctx-feedback-info-bg); --kv-info-tekst: var(--ctx-feedback-info-text); --kv-info-lijn: var(--ctx-status-info);
  --kv-aandacht-vlak: var(--ctx-status-aandacht); --kv-aandacht-tekst: var(--ctx-text-default); --kv-aandacht-lijn: var(--ctx-status-aandacht);
  --kv-succes-vlak: var(--ctx-feedback-success-bg); --kv-succes-tekst: var(--ctx-feedback-success-text); --kv-succes-lijn: var(--ctx-status-succes);
  --kv-fout-vlak: var(--ctx-feedback-error-bg); --kv-fout-tekst: var(--ctx-feedback-error-text); --kv-fout-lijn: var(--ctx-status-fout);
  --kv-vdk-vlak: var(--ctx-inverse-bg); --kv-vdk-tekst: var(--ctx-inverse-text); --kv-vdk-lijn: var(--ctx-status-vdk);
  --kv-agenda-vlak: var(--ctx-agenda-border); --kv-agenda-tekst: var(--ctx-text-default); --kv-agenda-lijn: var(--ctx-agenda-border);
  --kv-radar-vlak: var(--ctx-radar-border); --kv-radar-tekst: var(--ctx-text-default); --kv-radar-lijn: var(--ctx-radar-border);
  --kv-wit-vlak: var(--ctx-surface-default); --kv-wit-tekst: var(--ctx-text-default); --kv-wit-lijn: var(--ctx-border-default);
}

/* patroonkleur per familie (de lijnkleur van de familie), tenzij de beheerder een kleur kiest */
.kaart--neutraal { --kv-patroon: var(--kv-neutraal-lijn); }
.kaart--info { --kv-patroon: var(--kv-info-lijn); }
.kaart--aandacht { --kv-patroon: var(--kv-aandacht-lijn); }
.kaart--succes { --kv-patroon: var(--kv-succes-lijn); }
.kaart--fout { --kv-patroon: var(--kv-fout-lijn); }
.kaart--vdk { --kv-patroon: var(--kv-vdk-lijn); }
.kaart--agenda { --kv-patroon: var(--kv-agenda-lijn); }
.kaart--radar { --kv-patroon: var(--kv-radar-lijn); }

/* kleur van kopband en patroon */
.kaart[data-kleur="neutraal"] { --band-bg: var(--kv-neutraal-vlak); --band-fg: var(--kv-neutraal-tekst); --kv-patroon: var(--kv-neutraal-lijn); }
.kaart[data-kleur="info"] { --band-bg: var(--kv-info-vlak); --band-fg: var(--kv-info-tekst); --kv-patroon: var(--kv-info-lijn); }
.kaart[data-kleur="aandacht"] { --band-bg: var(--kv-aandacht-vlak); --band-fg: var(--kv-aandacht-tekst); --kv-patroon: var(--kv-aandacht-lijn); }
.kaart[data-kleur="succes"] { --band-bg: var(--kv-succes-vlak); --band-fg: var(--kv-succes-tekst); --kv-patroon: var(--kv-succes-lijn); }
.kaart[data-kleur="fout"] { --band-bg: var(--kv-fout-vlak); --band-fg: var(--kv-fout-tekst); --kv-patroon: var(--kv-fout-lijn); }
.kaart[data-kleur="vdk"] { --band-bg: var(--kv-vdk-vlak); --band-fg: var(--kv-vdk-tekst); --kv-patroon: var(--kv-vdk-lijn); }
.kaart[data-kleur="agenda"] { --band-bg: var(--kv-agenda-vlak); --band-fg: var(--kv-agenda-tekst); --kv-patroon: var(--kv-agenda-lijn); }
.kaart[data-kleur="radar"] { --band-bg: var(--kv-radar-vlak); --band-fg: var(--kv-radar-tekst); --kv-patroon: var(--kv-radar-lijn); }
.kaart[data-kleur="wit"] { --band-bg: var(--kv-wit-vlak); --band-fg: var(--kv-wit-tekst); --kv-patroon: var(--kv-wit-lijn); }

/* randkleur, randdikte en randstijl */
.kaart[data-randkleur="neutraal"] { --kaart-rand: var(--kv-neutraal-lijn); }
.kaart[data-randkleur="info"] { --kaart-rand: var(--kv-info-lijn); }
.kaart[data-randkleur="aandacht"] { --kaart-rand: var(--kv-aandacht-lijn); }
.kaart[data-randkleur="succes"] { --kaart-rand: var(--kv-succes-lijn); }
.kaart[data-randkleur="fout"] { --kaart-rand: var(--kv-fout-lijn); }
.kaart[data-randkleur="vdk"] { --kaart-rand: var(--kv-vdk-lijn); }
.kaart[data-randkleur="agenda"] { --kaart-rand: var(--kv-agenda-lijn); }
.kaart[data-randkleur="radar"] { --kaart-rand: var(--kv-radar-lijn); }
.kaart[data-randkleur="wit"] { --kaart-rand: var(--kv-wit-lijn); }
.kaart[data-rand="geen"] { --kaart-rand-breedte: 0px; }
.kaart[data-rand="dun"] { --kaart-rand-breedte: var(--space-border-width-default); }
.kaart[data-rand="normaal"] { --kaart-rand-breedte: var(--space-border-width-emphasis); }
.kaart[data-rand="dik"] { --kaart-rand-breedte: calc(var(--space-border-width-emphasis) * 2); }
.kaart[data-randstijl="effen"] { --kaart-rand-stijl: solid; }
.kaart[data-randstijl="streep"] { --kaart-rand-stijl: dashed; }
.kaart[data-randstijl="stip"] { --kaart-rand-stijl: dotted; }

/* vulling: een fijn patroon in de patroonkleur, zacht genoeg om de tekst leesbaar te houden */
.kaart[data-vulling="strepen"] { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--kv-patroon) 22%, transparent) 0 2px, transparent 2px 10px); }
.kaart[data-vulling="ruit"] {
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--kv-patroon) 22%, transparent) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--kv-patroon) 22%, transparent) 0 1px, transparent 1px 12px);
}
.kaart[data-vulling="stippen"] { background-image: radial-gradient(color-mix(in srgb, var(--kv-patroon) 30%, transparent) 1.3px, transparent 1.8px); background-size: 10px 10px; }

/* dekking van de vulling (de kaartachtergrond; tekst en kopband blijven volledig zichtbaar) */
.kaart[data-dekking] { background-color: color-mix(in srgb, var(--kaart-bg, var(--ctx-surface-default)) calc(var(--kv-dekking) * 1%), transparent); }

/* kopband per format of rustig grijs: wint van een gekozen kleur */
.kaart[data-kv-kopband="format"][data-kv-formaat] { --band-bg: var(--kv-formaat); --band-fg: var(--kv-formaat-tekst); }
.kaart[data-kv-kopband="neutraal"]:not(.kaart--agenda):not(.kaart--radar) { --band-bg: var(--kv-neutraal-vlak); --band-fg: var(--kv-neutraal-tekst); }

/* ruimte in de kaart */
.kaart[data-kv-ruimte="compact"] .kaart__band { padding: var(--space-padding-3xs) var(--space-padding-xs); }
.kaart[data-kv-ruimte="compact"] .kaart__inhoud { padding: var(--space-padding-xs); gap: var(--space-gap-3xs); }
@container (min-width: 201px) {
  .kaart[data-kv-ruimte="ruim"] .kaart__band { padding: var(--space-padding-xs) var(--space-padding-m); }
  .kaart[data-kv-ruimte="ruim"] .kaart__inhoud { padding: var(--space-padding-m); gap: var(--space-gap-xs); }
}

/* het voorbeeld in Instellingen: de kaarten op een vlak zoals in een dagkolom */
.kv-voorbeeld { display: grid; gap: var(--space-gap-s); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: start; padding: var(--space-padding-m); background: var(--ctx-surface-sunken); border-radius: var(--space-radius-surface); }
.kv-voorbeeld .kaart { cursor: default; }
/* voorbeeld uitgeklapt: dezelfde regels als de uitklap in kaarten.css (is-open), maar niet gebonden aan hover of focus */
.kv-voorbeeld.kv-open .kaart .meer { display: block; }
.kv-voorbeeld.kv-open .kaart :is(.kaart__wacht, .kaart__keuze).meer { display: flex; }
.kv-voorbeeld.kv-open .kaart .kaart__titel { display: block; overflow: visible; }
.kv-voorbeeld.kv-open .kaart .alleen-rust { display: none; }

/* indeling van het tabblad Kaartvorm: bedieningselementen links, voorbeeld rechts en in beeld; op een smal scherm eerst het voorbeeld */
.kv-opzet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-gap-xl); align-items: start; }
.kv-kolom--voorbeeld { position: sticky; top: var(--space-padding-m); display: flex; flex-direction: column; gap: var(--space-gap-s); order: 2; }
.kv-kolom--links { order: 1; }
.kv-figuur { margin: 0; display: flex; flex-direction: column; gap: var(--space-gap-2xs); min-width: 0; }
.kv-bijschrift { font-size: var(--text-caption-s-size); line-height: var(--text-caption-s-line); color: var(--ctx-text-subtle); }
.kv-uitvoer { min-width: 4ch; font-variant-numeric: tabular-nums; }
.kv-acties { padding-top: var(--space-padding-s); border-top: var(--space-border-width-default) solid var(--ctx-border-default); }
.kv-opzet input[type="range"] { flex: 1; min-width: 0; }
@media (max-width: 960px) {
  .kv-opzet { grid-template-columns: minmax(0, 1fr); }
  .kv-kolom--voorbeeld { order: 1; position: static; }
  .kv-kolom--links { order: 2; }
}

/* de kopband bovenaan de kaartpagina: alleen de band van de kaart, zonder slepen of uitklappen */
.kaart--pagina { cursor: default; width: min(100%, 240px); margin-bottom: var(--space-gap-xs); }
.kaart--pagina .kaart__band { border-radius: calc(var(--space-radius-control) - var(--kaart-rand-breedte, var(--space-border-width-default))); }