/* Gezinsinstellingen → Vakanties & feestdagen (design-handoff scherm 22). Tikbare rijen
   die de verdeling cyclen. Hergebruikt de warme design-tokens. De legenda en de losse
   sectiekop zijn vervallen (consistentie-sweep 2026-08-10) — de keuzeknoppen dragen hun
   eigen label en kleur. */

.vakanties__card {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-4); overflow: hidden;
}
/* button_to maakt een <form>; de knop is de hele rij. Bekrachtigd (regime-guard) → geen
   form/knop meer, alleen een rustige div met dezelfde rij-opmaak (.vakanties__row--locked). */
.vakanties__card form { margin: 0; }
.vakanties__row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border: none; border-bottom: 1px solid var(--color-line);
  background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.vakanties__card form:last-child .vakanties__row,
.vakanties__card > .vakanties__row:last-child { border-bottom: none; }
.vakanties__row:active { background: var(--color-softer); }
/* `--locked` = vergrendeld door een lopend voorstel; `--status` = per-jaar-stand, waar er
   simpelweg niets te kiezen valt. Zelfde rustige weergave, andere betekenis. */
.vakanties__row--locked, .vakanties__row--status { cursor: default; }
.vakanties__row--locked:active, .vakanties__row--status:active { background: none; }
.vakanties__row-text { flex: 1; min-width: 0; }
.vakanties__row-name { display: block; font-size: var(--text-15); font-weight: 700; }
.vakanties__row-dates { display: block; font-size: var(--text-13); color: var(--color-text-muted); margin-top: 1px; }
.vakanties__badge {
  flex: none; font-size: var(--text-xs); font-weight: 800; padding: 5px 11px; border-radius: var(--radius);
}
.vakanties__badge--jou { color: var(--color-accent); background: var(--color-soft); }
.vakanties__badge--co { color: var(--color-coparent); background: var(--color-coparent-soft); }
.vakanties__badge--split { color: var(--color-green); background: var(--color-green-soft); }
.vakanties__badge--zorgverdeling { color: var(--color-text-muted); background: var(--color-green-soft); }
.vakanties__badge--vakantie { color: var(--color-amber); background: var(--color-amber-soft); }
.vakanties__badge--onbepaald { color: var(--color-faint); background: var(--color-softer); }

.vakanties__locked { font-size: var(--text-13); color: var(--color-text-muted); margin: 0 4px 10px; line-height: 1.4; }
.vakanties__locked a { color: var(--color-accent); font-weight: 700; text-decoration: none; }
.vakanties__locked a:hover { text-decoration: underline; }