/* roosters.css — Instellingen › Medewerkers (KPI & uren): de tabs Medewerkers
   en Roosters, de roosterlijst en de roostereditor (roosters-c, mockup
   docs/mockups/2026-10-glas/04-instellingen-roosters.html; modules
   assets/js/dashboard/roosters.js, roosters-editor.js en
   roosters-medewerker.js).

   De dagtypekleuren (Werk, Rust, Thuis) en de twee meldingsniveaus van de
   Arbeidstijdenwet staan als eigen tokens onder de scope .rs, zoals de
   cockpitlaag onder .ck: vast per type, voor elke klant gelijk, los van
   --accent (open vraag van mockup 04, standaardkeuze vast). De scope staat op
   de tab Roosters (#rs-body), op de lade van de editor en op de dialogen
   Medewerker bewerken en Weekpatronen overnemen. Verder alleen de
   tokens van tokens.css: typestappen, ruimteschaal en radiusladder; geen kale
   pixelwaarde voor lettergrootte, marge, tussenruimte of radius
   (tests/css-schaal.test.mjs, plafond 0). */

.rs {
  /* dagtypes: vlak en inkt */
  --rs-werk:       hsl(214 95% 93%);
  --rs-werk-ink:   hsl(222 70% 30%);
  --rs-rust:       hsl(220 14% 94%);
  --rs-rust-ink:   hsl(220 9% 40%);
  --rs-thuis:      hsl(152 55% 91%);
  --rs-thuis-ink:  hsl(155 60% 24%);
  /* de minibalk in de lijst: vlakken zonder tekst */
  --rs-werk-vlak:  hsl(221 78% 48% / .75);
  --rs-rust-vlak:  hsl(220 9% 44% / .25);
  --rs-thuis-vlak: hsl(155 60% 24% / .45);
  /* Op de grens (oranje) en Overschrijding (rood) */
  --rs-grens:      hsl(45 100% 95%);
  --rs-grens-ink:  hsl(32 90% 28%);
  --rs-grens-rand: hsl(40 90% 58%);
  --rs-fout:       hsl(0 86% 97%);
  --rs-fout-ink:   hsl(0 70% 38%);
  --rs-fout-rand:  hsl(0 75% 60%);
}

/* ── de kop van het paneel: titel en de tabs als pillen ─────────────────── */
/* de kop loopt om op een smal scherm: titel en tabs, daaronder de knoppen */
.rs-paneel > header { flex-wrap: wrap; }
.rs-paneelkop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.rs-tabs .pill:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); }
.panel > .rs-melding { margin: var(--space-3) var(--space-4) 0; }

/* ── de lijst ───────────────────────────────────────────────────────────── */
.tbl.rs-lijst { min-width: 52rem; }
.rs-lijst td { white-space: nowrap; }
/* naam, patroon en namen mogen breken; de rest blijft op een regel, zodat de tabel naast het zijmenu past */
.rs-lijst td.rs-naam { white-space: normal; min-width: 9rem; }
.rs-lijst td.rs-wie { white-space: normal; min-width: 12rem; }
.rs-lijst th, .rs-lijst td { padding-inline: var(--space-2); }
.rs-lijst th:first-child, .rs-lijst td:first-child { padding-left: var(--space-4); }
.rs-lijst th:last-child, .rs-lijst td:last-child { padding-right: var(--space-4); }
/* de kop Gem. per week mag over twee regels, de cijfers eronder blijven op een regel */
.rs-lijst th.rs-gem { min-width: 5.5rem; white-space: normal; }
.rs-lijst tr.rs-inactief td:not(:last-child) { opacity: .55; }
.rs-mini { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.rs-mini-wk { display: inline-flex; gap: calc(var(--space-1) / 2); }
.rs-mini-wk i { display: block; width: .625rem; height: .625rem; border-radius: calc(var(--radius-badge) / 3); }
.rs-mini-wk i.is-werk { background: var(--rs-werk-vlak); }
.rs-mini-wk i.is-rust { background: var(--rs-rust-vlak); }
.rs-mini-wk i.is-thuis { background: var(--rs-thuis-vlak); }
.rs-mini-tekst { color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--leading-label); white-space: nowrap; }
.rs-gepland { display: block; color: var(--ink-dim); font-size: var(--text-label); line-height: var(--leading-label); }
/* breed (vanaf 1440, de maat van mockup 04): minibalk met weektotalen en de naam op een regel; smaller mogen ze breken,
   zodat de lijst op 1366 naast het zijmenu niet schuift */
@media (min-width: 1440px) {
  .rs-mini { flex-wrap: nowrap; }
  .rs-lijst td.rs-naam { min-width: 13.5rem; }
}

@media (max-width: 760px) {
  /* roosterlijst: elk rooster een compact blok. Naam met Bewerken rechts, het
     patroon eronder, dan cyclus, gemiddelde per week en actief naast elkaar en
     als laatste wie nu gekoppeld is, met de geplande of eerdere koppeling. Het
     kopje staat boven de waarde (data-kop), zoals bij de dagentabel */
  .tbl.rs-lijst { min-width: 0; }
  .rs-lijst, .rs-lijst tbody { display: block; }
  .rs-lijst thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rs-lijst tbody tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-5); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  .rs-lijst tbody tr:last-child { border-bottom: 0; }
  .rs-lijst td, .rs-lijst td:first-child, .rs-lijst td:last-child { display: block; padding: 0; border: 0; }
  .rs-lijst td:nth-child(1) { order: 1; flex: 1 1 0; min-width: 0; align-self: center; font-weight: 600; white-space: normal; }
  .rs-lijst td:nth-child(7) { order: 2; }
  .rs-lijst td:nth-child(3) { order: 3; flex-basis: 100%; }
  .rs-lijst td:nth-child(2) { order: 4; min-width: 3.5rem; }
  .rs-lijst td:nth-child(4) { order: 5; text-align: left; }
  .rs-lijst td:nth-child(6) { order: 6; }
  .rs-lijst td:nth-child(5) { order: 7; flex-basis: 100%; }
  .rs-lijst td.rs-wie { min-width: 0; }
  .rs-lijst td.rs-patroon { white-space: normal; }
  /* het kopje boven de waarde, in de lijst en (in de editor) in de dagentabel */
  .rs td[data-kop]::before {
    content: attr(data-kop);
    display: block;
    margin-bottom: var(--space-1);
    color: var(--ink-dim);
    font-family: var(--font-head);
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    font-weight: var(--weight-caption);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
  }
}

/* ── de editor als lade van rechts; op een telefoon het hele scherm ─────── */
.modal-backdrop.rs-lade { justify-content: flex-end; align-items: stretch; padding: 0; overflow: hidden; }
.rs-lade > .modal.rs-editor {
  display: flex;
  flex-direction: column;
  max-width: min(62rem, 100%);
  height: 100%;
  border-width: 0 0 0 1px;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  animation: rs-lade-in var(--duration-base) var(--ease-standard);
}
.rs-lade > .modal.rs-editor > header, .rs-lade > .modal.rs-editor > footer { flex: none; }
.rs-lade > .modal.rs-editor > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
@keyframes rs-lade-in { from { opacity: 0; transform: translateX(var(--space-8)); } }
@media (prefers-reduced-motion: reduce) { .rs-lade > .modal.rs-editor { animation: none; } }
.modal > header h3.rs-dlg-titel {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rs-editor > footer { flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.rs-voet-rechts { margin-left: auto; justify-content: flex-end; }
.rs-fouttekst { color: var(--rs-fout-ink); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.rs-fouttekst:empty { display: none; }

.rs-h { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: 700; }
.rs-kopregel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.rs-blok { display: grid; gap: var(--space-2); min-width: 0; }

/* a. banner bij een gekoppeld of gepland rooster */
.rs-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* b. naam, cyclus, actief */
.rs-kopvelden { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: minmax(0, 1fr) 14rem auto; align-items: end; }
.rs-kopvelden .rs-vol { grid-column: 1 / -1; }
.rs-check { min-height: var(--space-10); }

/* c. overzicht van de cyclus */
.rs-cyclus { border-collapse: separate; border-spacing: var(--space-1); }
.rs-cyclus th {
  padding: 0 var(--space-1);
  color: var(--ink-dim);
  font-family: var(--font-head);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-caption);
  text-align: center;
}
.rs-cyclus th.rs-wkkop { text-align: right; padding-left: var(--space-2); }
.rs-wk {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-badge);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-head);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.rs-wk[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.rs-vak {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-badge);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  cursor: pointer;
}
.rs-vak.is-werk  { background: var(--rs-werk);  color: var(--rs-werk-ink); }
.rs-vak.is-rust  { background: var(--rs-rust);  color: var(--rs-rust-ink); }
.rs-vak.is-thuis { background: var(--rs-thuis); color: var(--rs-thuis-ink); }
.rs-cyclus tr.is-sel .rs-vak { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); }
/* rode rand om een vakje met een dagfout */
.rs-vak.is-fout { outline: 2px solid var(--rs-fout-rand); outline-offset: -2px; }
.rs-wtot { padding-left: var(--space-2); text-align: right; font-family: var(--font-mono); font-size: var(--text-label); }

/* d. week kopiëren */
.rs-kopieer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm); }
select.rs-klein {
  width: 7rem;
  padding: var(--space-1) var(--space-8) var(--space-1) var(--space-2);
  border-radius: var(--radius-chip);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

/* e. dagentabel: scrolt in zijn eigen omlijsting */
.rs-dagwrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius-field); overflow-x: auto; background: var(--panel); }
.tbl.rs-dagen { min-width: 52rem; }
.rs-dagen thead th { background: var(--panel-2); }
.rs-dagen td { padding-block: var(--space-1); white-space: nowrap; }
.rs-dagen tbody tr:last-child td { border-bottom: 0; }
.rs-dagen tr.heeft-fout td { border-bottom: 0; }
.rs-dagen tr.rs-foutrij td { padding-top: 0; color: var(--rs-fout-ink); font-size: var(--text-label); }
.rs-dagen input { padding: var(--space-1) var(--space-2); border-radius: var(--radius-chip); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.rs-dagen input:disabled { background: var(--panel-2); cursor: not-allowed; }
.rs-dagen input[aria-invalid="true"] { border-color: var(--rs-fout-rand); box-shadow: 0 0 0 1px var(--rs-fout-rand); }
.rs-dagen input.rs-tijd { width: 4.75rem; text-align: center; }
.rs-dagen input.rs-pauze { width: 4.5rem; text-align: right; }
.rs-dagen input.rs-netto { width: 4.5rem; text-align: right; }
.rs-dagen input.rs-opm { min-width: 10rem; }
.rs-dagen td.rs-opmcel { width: 100%; }
.rs-cel { display: inline-flex; align-items: center; gap: var(--space-2); }
.rs-plus1 { padding: 0 var(--space-1); border-radius: var(--radius-badge); background: var(--panel-2); color: var(--ink-dim); font-size: var(--text-caption); line-height: var(--leading-caption); white-space: nowrap; }
.rs-plus1.is-leeg { visibility: hidden; }
.rs-type { display: inline-flex; gap: calc(var(--space-1) / 2); padding: calc(var(--space-1) / 2); border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--panel); }
.rs-type button {
  padding: calc(var(--space-1) / 2) var(--space-2);
  border: 0;
  border-radius: var(--radius-badge);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-head);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-label);
  cursor: pointer;
}
.rs-type button[aria-checked="true"][data-type="werk"]  { background: var(--rs-werk);  color: var(--rs-werk-ink); }
.rs-type button[aria-checked="true"][data-type="rust"]  { background: var(--rs-rust);  color: var(--rs-rust-ink); }
.rs-type button[aria-checked="true"][data-type="thuis"] { background: var(--rs-thuis); color: var(--rs-thuis-ink); }

/* focus voor de knoppen zonder .btn */
.rs-vak:focus-visible, .rs-wk:focus-visible, .rs-type button:focus-visible, .rs-link:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}

/* f. totaalbalk en contractmelding */
.rs-totaal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--panel-2);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.rs-totaal b { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-totaal .rs-cyc { margin-left: auto; }
.rs-contract { margin: 0; padding: 0 var(--space-1); color: var(--rs-grens-ink); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }

/* g. Arbeidstijdenwet */
.rs-atw { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rs-atw li {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--line);
  border-radius: var(--radius-chip);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.rs-atw li > span[aria-hidden] { flex: none; }
.rs-atw li.is-grens { background: var(--rs-grens); border-left-color: var(--rs-grens-rand); color: var(--rs-grens-ink); }
.rs-atw li.is-over  { background: var(--rs-fout);  border-left-color: var(--rs-fout-rand);  color: var(--rs-fout-ink); }
.rs-atw li.is-info  { background: var(--panel-2);  border-left-color: var(--line);          color: var(--ink-dim); }
.rs-atw li.is-ok    { background: var(--green-dim); border-left-color: var(--green);        color: var(--ink); }

@media (max-width: 760px) {
  .rs-kopvelden { grid-template-columns: minmax(0, 1fr); }
  .rs-check { min-height: 0; }
  .rs-totaal .rs-cyc { margin-left: 0; }

  /* de editor neemt het hele scherm, zonder rand en zonder ronding */
  .rs-lade > .modal.rs-editor { max-width: none; border: 0; border-radius: 0; }

  /* overzicht van de cyclus: een hele week en het weektotaal in beeld. De tabel
     vult de breedte: de kolommen Week (kop en totaal) blijven zo smal als hun
     inhoud, de dagcellen krijgen de rest */
  .rs-cyclus { width: 100%; border-spacing: calc(var(--space-1) / 2); }
  .rs-cyclus th, .rs-cyclus td { padding: 0; }
  .rs-cyclus thead th:first-child, .rs-cyclus tbody th, .rs-cyclus th.rs-wkkop, .rs-cyclus td.rs-wtot { width: 1%; }
  .rs-cyclus th.rs-wkkop { padding-left: var(--space-1); }
  .rs-wk { padding-inline: calc(var(--space-1) / 2); }
  .rs-vak { width: 100%; min-width: 1.625rem; padding: 0; font-family: var(--font-head); font-size: var(--text-caption); }
  .rs-vak.is-rust, .rs-vak.is-thuis { font-size: var(--text-micro); line-height: var(--leading-micro); }
  .rs-cyclus td.rs-wtot { padding-left: var(--space-1); font-size: var(--text-caption); white-space: nowrap; }

  /* dagentabel als kaart per dag: dag, type en netto; van en tot; pauze en opmerking */
  .tbl.rs-dagen { min-width: 0; }
  .rs-dagen, .rs-dagen tbody { display: block; }
  .rs-dagen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rs-dagen tbody tr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--line); }
  .rs-dagen tbody tr:last-child, .rs-dagen tr.heeft-fout { border-bottom: 0; }
  .rs-dagen tbody tr::before, .rs-dagen tbody tr::after { content: ""; flex-basis: 100%; height: 0; }
  .rs-dagen tbody tr::before { order: 4; }
  .rs-dagen tbody tr::after { order: 7; }
  .rs-dagen td { display: block; padding: 0; border-bottom: 0; }
  .rs-dagen td:nth-child(1) { order: 1; align-self: center; }
  .rs-dagen td:nth-child(2) { order: 2; align-self: center; }
  .rs-dagen td:nth-child(6) { order: 3; margin-left: auto; }
  .rs-dagen td:nth-child(3) { order: 5; }
  .rs-dagen td:nth-child(4) { order: 6; }
  .rs-dagen td:nth-child(5) { order: 8; }
  .rs-dagen td:nth-child(7) { order: 9; flex: 1 1 8rem; min-width: 0; width: auto; }
  .rs-dagen .rs-daglang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rs-dagen input.rs-opm { min-width: 0; width: 100%; }
  .rs-dagen tr.rs-foutrij { display: block; padding: 0 var(--space-3) var(--space-3); }
  .rs-dagen tr.rs-foutrij[hidden] { display: none; }
  .rs-dagen tr.rs-foutrij::before, .rs-dagen tr.rs-foutrij::after { content: none; }
  .rs-dagen tr.rs-foutrij td:first-child { display: none; }
}

/* ── tab Medewerkers: de kolom Rooster ──────────────────────────────────── */
/* de geplande wissel (roosterKolomGepland) in blauw onder de koppeling; buiten de scope .rs, dus de tokens van tokens.css */
.rs-kolom-gepland { display: block; color: var(--blue); font-size: var(--text-label); line-height: var(--leading-label); }

/* ── Medewerker bewerken: de sectie Rooster en Overige instellingen ─────── */
.rs-sectie { display: grid; gap: var(--space-3); min-width: 0; }
.rs-sectie + .rs-sectie { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.rs-drie { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.rs-drie [hidden] { display: none; }
.rs-hulp { display: block; color: var(--ink-dim); font-size: var(--text-label); line-height: var(--leading-label); }
.rs-hulp.is-fout { color: var(--rs-fout-ink); }
.rs-hulp.is-let { color: var(--rs-grens-ink); }
.rs-sectie input[aria-invalid="true"] { border-color: var(--rs-fout-rand); box-shadow: 0 0 0 1px var(--rs-fout-rand); }
/* de vooruitblik op zes weken, in de dagtypekleuren */
.rs-vooruit { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-field); background: var(--panel); }
.rs-weken { display: grid; gap: var(--space-2); grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.rs-weken li { display: grid; padding: var(--space-1) var(--space-2); border-radius: var(--radius-chip); font-size: var(--text-label); line-height: var(--leading-label); }
.rs-weken li b { font-family: var(--font-mono); }
.rs-weken li.is-werk  { background: var(--rs-werk);  color: var(--rs-werk-ink); }
.rs-weken li.is-rust  { background: var(--rs-rust);  color: var(--rs-rust-ink); }
.rs-weken li.is-thuis { background: var(--rs-thuis); color: var(--rs-thuis-ink); }
/* de historie, nieuwste eerst; een geplande koppeling met de knop Intrekken rechts */
.rs-historie { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--panel); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.rs-historie li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-2) var(--space-3); }
.rs-historie li + li { border-top: 1px solid var(--line); }
.rs-historie b { min-width: 12rem; font-weight: 600; }
.rs-historie .rs-intrek { margin-left: auto; }
/* het voorstel na akkoord: een omlijnd blok, geen rekenwijziging */
.rs-voorstel { display: grid; justify-items: start; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent); border-radius: var(--radius-chip); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.rs-voorstel ul { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-5); }
/* de bestaande velden zonder inline stijl */
.rs-mw-vink { min-height: var(--space-6); }
.rs-mw-pauze { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr) 9rem; align-items: end; }
.rs-mw-dagen { align-items: end; }
.rs-mw-dagen input[type="text"] { width: 3.25rem; padding-inline: var(--space-1); }
.rs-mw-som { align-self: end; }
.rs-mw-som.is-afwijkend { color: var(--red); }

/* ── Weekpatronen overnemen: het plan als lijst ─────────────────────────── */
.rs-ov-datum { max-width: 16rem; }
.rs-plan { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-chip); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.rs-plan li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-2) var(--space-3); }
.rs-plan li + li { border-top: 1px solid var(--line); }
.rs-plan b { min-width: 9rem; font-weight: 600; }
.rs-overname > footer { flex-wrap: wrap; align-items: center; }
.rs-overname .rs-voet-rechts { flex-wrap: wrap; }

@media (max-width: 760px) {
  .rs-drie { grid-template-columns: minmax(0, 1fr); }
  .rs-weken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-historie b, .rs-plan b { min-width: 0; }
  .rs-ov-datum { max-width: none; }
}
@media (max-width: 540px) {
  /* telefoon: Pauze en Minuten per dag onder elkaar, zoals de andere velden (form-row) */
  .rs-mw-pauze { grid-template-columns: minmax(0, 1fr); }
}

/* telefoon: de knoppen onder elkaar, Opslaan bovenaan met de foutmelding erboven */
@media (max-width: 600px) {
  .rs-editor > footer { flex-direction: column; align-items: stretch; }
  .rs-editor > footer .btn { width: 100%; }
  .rs-voet-rechts { display: contents; }
  .rs-voet-rechts .rs-fouttekst { order: 1; text-align: center; }
  .rs-editor > footer [data-rs-act="opslaan"] { order: 2; }
  .rs-editor > footer [data-rs-act="annuleer"] { order: 3; }
  .rs-editor > footer [data-rs-act="verwijder"] { order: 4; }
  .rs-editor > footer [data-rs-act="kopie"] { order: 5; }
  /* Weekpatronen overnemen: dezelfde volgorde, Overnemen bovenaan */
  .rs-overname .rs-voet-rechts { flex-direction: column; align-items: stretch; width: 100%; }
  .rs-overname .rs-voet-rechts .btn { width: 100%; }
  .rs-overname [data-ov-act="overnemen"] { order: 2; }
  .rs-overname [data-ov-act="annuleer"] { order: 3; }
  /* Medewerker bewerken: Opslaan (of Toevoegen) bovenaan, dan Annuleren, Wissen onderaan */
  .rs-mw-dlg > footer { flex-direction: column-reverse; align-items: stretch; }
  .rs-mw-dlg > footer .btn { width: 100%; margin-left: 0; }
}