/* ============================================================
   Yonder Jaarplanning – huisstijl
   Charcoal #2B2A29 + koraal #F9705D, naar het Yonder-beeldmerk.
   Signatuur: het koralen blokje uit het logo ("y.") keert terug
   als periode-markering en actieve-tab-onderstreping.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..100,400..800&display=swap');

:root {
  --ink: #2b2a29;
  --ink-zacht: #57534e;
  --koraal: #f9705d;
  --koraal-donker: #d8503e;
  --papier: #faf9f7;
  --wit: #ffffff;
  --lijn: #e6e2dc;
  --gedempt: #8a857f;

  /* itemtypes */
  --c-toetsweek: #b3541e;   --b-toetsweek: #fdeee2;
  --c-feedback:  #2f6b8f;   --b-feedback:  #e8f1f7;
  --c-vakantie:  #3f7d54;   --b-vakantie:  #e9f3ec;
  --c-feestdag:  #7a5ba6;   --b-feestdag:  #f1ecf8;
  --c-ov:        #8a857f;   --b-ov:        #f0eeeb;
  --c-deadline:  #c22f21;   --b-deadline:  #fdeae8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  background: var(--papier);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

/* ---------- Kop ---------- */
.kop {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
  position: sticky;
  top: 0;
  z-index: 20;
}
.kop-merk { display: flex; align-items: center; gap: 14px; }
.logo { height: 34px; width: auto; display: block; }
.kop-titel h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.jaar { font-size: 12px; color: var(--gedempt); font-weight: 600; }

/* Roosterkeuze (tabs) — koraal blokje als onderstreping */
.tabs { display: flex; gap: 4px; }
.tab {
  position: relative;
  padding: 8px 16px 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-zacht);
  text-decoration: none;
  border-radius: 6px 6px 0 0;
}
.tab:hover { color: var(--ink); background: var(--papier); }
.tab.actief { color: var(--ink); }
.tab.actief::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: 2px;
  width: 22px;
  height: 6px;
  background: var(--koraal);
}

.kop-acties { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#zoek {
  padding: 7px 12px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  font: inherit;
  width: 190px;
  background: var(--papier);
}
#zoek:focus { outline: 2px solid var(--koraal); outline-offset: 1px; }

.knop {
  display: inline-block;
  padding: 7px 14px;
  background: var(--ink);
  color: var(--wit);
  border: none;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.knop:hover { background: #000; }
.knop-licht { background: var(--wit); color: var(--ink); border: 1px solid var(--lijn); }
.knop-licht:hover { background: var(--papier); }
.knop-gevaar { background: var(--wit); color: var(--c-deadline); border: 1px solid var(--c-deadline); }
.knop-gevaar:hover { background: var(--b-deadline); }

/* ---------- Legenda / melding ---------- */
.legenda {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 22px;
  font-size: 12px;
  color: var(--ink-zacht);
  position: sticky;
  top: var(--kop-h, 64px);
  z-index: 15;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}
.legenda-uitleg { margin-left: auto; color: var(--gedempt); }
.melding {
  margin: 10px 22px 0;
  padding: 9px 14px;
  background: var(--ink);
  color: var(--wit);
  border-radius: 6px;
  font-weight: 600;
  width: fit-content;
}

/* ---------- Tabel ---------- */
main { padding: 0 22px 40px; }
.rooster {
  width: 100%;
  border-collapse: collapse;
  background: var(--wit);
  border: 1px solid var(--lijn);
}
.rooster th {
  position: sticky;
  top: calc(var(--kop-h, 64px) + var(--legenda-h, 42px));
  background: var(--ink);
  color: var(--wit);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  z-index: 10;
}
.rooster td {
  border-top: 1px solid var(--lijn);
  border-right: 1px solid #f1efec;
  padding: 6px 8px;
  vertical-align: top;
}
.k-kw { width: 40px; font-variant-numeric: tabular-nums; color: var(--gedempt); }
.k-datum { width: 118px; white-space: nowrap; font-weight: 600; }
.k-per { width: 44px; }
.k-ow { width: 38px; font-variant-numeric: tabular-nums; color: var(--gedempt); }
.k-opm { min-width: 170px; }
.opm { display: block; font-size: 12px; color: var(--ink-zacht); font-style: italic; }

/* Periode-blokje: het koralen vierkant uit het logo */
.per-blok {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
  color: var(--wit);
  background: var(--ink);
  position: relative;
}
tr.per-start td { border-top: 2px solid var(--ink); }
tr.per-start .per-blok { background: var(--koraal); }

/* Rijstatussen */
tr.vrij td { background: #f5f2ec; }
tr.nu td { background: #fff4f2; }
tr.nu td:first-child { box-shadow: inset 4px 0 0 var(--koraal); }
tr.verborgen { display: none; }

/* ---------- Item-chips ---------- */
.chip {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 2px 7px 2px 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  border-left: 3px solid var(--ink);
  background: var(--papier);
  color: var(--ink);
  max-width: 100%;
}
.t-toetsweek { border-left-color: var(--c-toetsweek); background: var(--b-toetsweek); color: var(--c-toetsweek); }
.t-feedback  { border-left-color: var(--c-feedback);  background: var(--b-feedback);  color: var(--c-feedback); }
.t-vakantie  { border-left-color: var(--c-vakantie);  background: var(--b-vakantie);  color: var(--c-vakantie); }
.t-feestdag  { border-left-color: var(--c-feestdag);  background: var(--b-feestdag);  color: var(--c-feestdag); }
.t-ov        { border-left-color: var(--c-ov);        background: var(--b-ov);        color: var(--c-ov); }
.t-deadline  { border-left-color: var(--c-deadline);  background: var(--b-deadline);  color: var(--c-deadline); }

/* ---------- Beheer ---------- */
button.chip { font-family: inherit; text-align: left; cursor: pointer; }
button.chip:hover { outline: 2px solid var(--koraal); outline-offset: 1px; }
.rbadges { margin-left: 5px; white-space: nowrap; }
.rbadge {
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  border-radius: 3px;
  color: var(--wit);
  vertical-align: 1px;
}
.r-algemeen { background: var(--ink); }
.r-eng2a { background: var(--koraal); }
.r-stage { background: var(--c-feedback); }

.plus {
  display: inline-block;
  padding: 0 7px;
  border: 1px dashed var(--lijn);
  border-radius: 4px;
  background: none;
  color: var(--gedempt);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
}
td:hover .plus, .plus:focus-visible { opacity: 1; }
.plus:hover { border-color: var(--koraal); color: var(--koraal); }

/* ---------- Dialoog ---------- */
dialog {
  border: none;
  border-radius: 10px;
  padding: 22px 24px;
  width: min(520px, 92vw);
  box-shadow: 0 18px 50px rgba(43, 42, 41, 0.25);
}
dialog::backdrop { background: rgba(43, 42, 41, 0.45); }
dialog h2 { margin: 0 0 2px; font-size: 18px; }
.dialoog-week { margin: 0 0 14px; color: var(--gedempt); font-size: 12px; font-weight: 600; }
dialog label { display: block; font-size: 12px; font-weight: 700; margin: 10px 0 4px; }
dialog input[type=text], dialog select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  font: inherit;
  background: var(--wit);
}
dialog input:focus, dialog select:focus { outline: 2px solid var(--koraal); outline-offset: 1px; }
.rij { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 480px) { .rij { grid-template-columns: 2fr 1fr 1fr; } }

.roosterkeuze {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--papier);
}
.roosterkeuze legend { font-size: 12px; font-weight: 800; padding: 0 6px; }
.check { display: inline-flex !important; align-items: center; gap: 6px; margin: 4px 16px 4px 0 !important; font-size: 14px !important; font-weight: 600 !important; }
.check input { accent-color: var(--koraal); width: 16px; height: 16px; }
.hint { margin: 6px 0 0; font-size: 11px; color: var(--gedempt); }
.dialoog-acties { display: flex; gap: 8px; margin-top: 18px; }
#verwijderen { margin-left: auto; }

/* ---------- Login ---------- */
.login-pagina {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
.login-kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 34px 36px;
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-kaart .logo { height: 40px; align-self: flex-start; }
.login-kaart h1 { margin: 8px 0 4px; font-size: 20px; }
.login-kaart label { font-size: 12px; font-weight: 700; }
.login-kaart input {
  padding: 10px 12px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  font: inherit;
}
.login-kaart input:focus { outline: 2px solid var(--koraal); outline-offset: 1px; }
.fout { margin: 0; color: var(--c-deadline); font-weight: 600; font-size: 13px; }
.terug { color: var(--gedempt); font-size: 12px; text-decoration: none; margin-top: 4px; }
.terug:hover { color: var(--ink); }

/* ---------- Voet ---------- */
.voet {
  padding: 14px 22px 30px;
  color: var(--gedempt);
  font-size: 12px;
}

/* ---------- Mobiel: zie v1.2.0-blok onderaan ---------- */

/* ---------- Afdrukken ---------- */
@media print {
  .kop-acties, .legenda-uitleg, .plus, .voet { display: none !important; }
  .kop, .rooster th { position: static; }
  body { background: #fff; font-size: 11px; }
  main { padding: 0; }
  .chip { border: 1px solid #ccc; border-left-width: 3px; }
  tr { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- v1.1.0: locatie & notitie ---------- */
tbody button.chip { font-family: inherit; text-align: left; cursor: pointer; border-top: 0; border-right: 0; border-bottom: 0; }
tbody button.chip:hover { outline: 2px solid var(--koraal); outline-offset: 1px; }

.stip, .stip-demo {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--koraal);
  margin-left: 5px;
  vertical-align: 2px;
}

dialog.detail { width: min(440px, 92vw); }
.detail-kop { display: flex; align-items: flex-start; gap: 12px; }
.detail-kop h2 { flex: 1; margin: 0 0 12px; font-size: 18px; line-height: 1.25; }
.sluit {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--gedempt);
  cursor: pointer;
  padding: 0 2px;
}
.sluit:hover { color: var(--ink); }
.detail-lijst { margin: 0; }
.detail-lijst > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--lijn);
}
.detail-lijst dt {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gedempt);
  padding-top: 1px;
}
.detail-lijst dd { margin: 0; white-space: pre-line; }

dialog textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  font: inherit;
  resize: vertical;
  background: var(--wit);
}
dialog textarea:focus { outline: 2px solid var(--koraal); outline-offset: 1px; }
.optioneel { font-weight: 400; color: var(--gedempt); }

/* ============================================================
   v1.2.0
   ============================================================ */

/* Versienummer */
.versie {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--wit);
  background: var(--koraal);
  border-radius: 4px;
  vertical-align: 1px;
}

/* Legenda als typefilter */
.legenda-label { font-weight: 800; }
button.filterknop {
  border-top: 0; border-right: 0; border-bottom: 0;
  font-family: inherit;
  cursor: pointer;
}
button.filterknop:hover { outline: 2px solid var(--koraal); outline-offset: 1px; }
button.filterknop.actief {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  box-shadow: 0 2px 6px rgba(43, 42, 41, 0.25);
}
.filter-actief tbody .chip.dim, body.filter-actief tbody .chip.dim { opacity: 0.22; }
body.filter-actief tbody .chip.uitgelicht {
  box-shadow: 0 2px 8px rgba(43, 42, 41, 0.3);
  transform: scale(1.03);
}
tbody .chip { transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s; }

/* Huidige week: duidelijk laten "poppen" */
tr.nu td { background: #fff1ee; }
tr.nu td:first-child { box-shadow: inset 5px 0 0 var(--koraal); }
tr.nu td { border-top: 2px solid var(--koraal); border-bottom: 2px solid var(--koraal); }
tr.nu .chip {
  font-size: 13px;
  padding: 4px 9px 4px 8px;
  box-shadow: 0 2px 8px rgba(43, 42, 41, 0.18);
}
tr.nu .k-datum { color: var(--koraal-donker); }
.nu-label {
  display: block;
  width: fit-content;
  margin-top: 3px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wit);
  background: var(--koraal);
  border-radius: 4px;
  animation: nu-pols 2.2s ease-in-out 3;
}
@keyframes nu-pols {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 112, 93, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(249, 112, 93, 0); }
}

/* ICS-dialoog */
.ics-kop { margin: 16px 0 4px; font-size: 14px; }
.ics-export { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
dialog input[type=file] {
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--lijn);
  border-radius: 6px;
  font: inherit;
  background: var(--papier);
}

/* ---------- Mobiel ---------- */
/* Tussenformaat: tabel horizontaal scrollen */
@media (max-width: 1000px) {
  main { padding: 0 8px 40px; overflow-x: auto; }
  .rooster { min-width: 940px; }
  .kop { gap: 12px; }
  .kop-acties { margin-left: 0; width: 100%; flex-wrap: wrap; }
  #zoek { flex: 1; min-width: 140px; }
}

/* Telefoon: weergave als weekkaarten (niet in het beheer) */
@media (max-width: 720px) {
  body:not(.beheer) .rooster,
  body:not(.beheer) .rooster tbody,
  body:not(.beheer) .rooster tr,
  body:not(.beheer) .rooster td { display: block; }
  body:not(.beheer) .rooster { min-width: 0; border: none; background: none; }
  body:not(.beheer) .rooster thead { display: none; }

  body:not(.beheer) .rooster tr {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    margin: 0 0 10px;
    padding: 10px 14px 12px;
  }
  body:not(.beheer) .rooster td {
    border: none !important;
    padding: 3px 0;
  }
  body:not(.beheer) td.leeg { display: none !important; }

  /* kopregel van de kaart: KW · datum · periode · OW naast elkaar */
  body:not(.beheer) td[data-kop] { display: inline-block; padding-right: 10px; vertical-align: middle; }
  body:not(.beheer) .k-kw::before { content: 'KW '; }
  body:not(.beheer) .k-kw { width: auto; font-weight: 700; color: var(--ink); }
  body:not(.beheer) .k-datum { width: auto; }
  body:not(.beheer) .k-ow:not(:empty)::before { content: 'OW '; }
  body:not(.beheer) .k-ow { width: auto; }

  /* daglabels boven de items */
  body:not(.beheer) td[data-label] {
    border-top: 1px solid var(--lijn) !important;
    margin-top: 6px;
    padding-top: 6px;
  }
  body:not(.beheer) td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gedempt);
    margin-bottom: 2px;
  }
  body:not(.beheer) .chip { display: block; width: fit-content; margin: 2px 0; }
  body:not(.beheer) tr.nu { border: 2px solid var(--koraal); box-shadow: 0 4px 16px rgba(249, 112, 93, 0.25); }
  body:not(.beheer) tr.nu td { border-top-color: var(--lijn) !important; border-bottom: none; }
  body:not(.beheer) tr.per-start td { border-top-width: 1px; }
  body:not(.beheer) tr.vrij { background: #f5f2ec; }

  .tabs { width: 100%; justify-content: space-between; }
  .kop-titel h1 { font-size: 15px; }
  dialog.detail, #icsDialog { width: 94vw; }
}

/* ---------- v1.3.0: roosterbeheer ---------- */
.legenda-rooster { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; }
.knop-klein { padding: 4px 10px; font-size: 12px; }
.rooster-lijst { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.rooster-rij { display: flex; align-items: center; gap: 8px; }
.rooster-rij input[type=text] {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  font: inherit;
  min-width: 0;
}
.rooster-rij input[type=text]:focus { outline: 2px solid var(--koraal); outline-offset: 1px; }
.rooster-rij .rbadge { flex-shrink: 0; width: 18px; height: 18px; line-height: 18px; font-size: 10px; }

/* ---------- v1.3.1: vaste rooster-/filterbalk ---------- */
/* Op smalle schermen wordt de balk hoog (meerdere regels); dan niet vastzetten. */
@media (max-width: 720px) {
  .legenda { position: static; border-bottom: none; }
  .rooster th { top: var(--kop-h, 64px); }
}

/* ---------- v1.4.0: typebeheer ---------- */
.rooster-rij input[type=color] {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  background: var(--wit);
  cursor: pointer;
}
.type-teller {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--gedempt);
  min-width: 32px;
  text-align: right;
}
.knop[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- v1.5.0: schooljaren ---------- */
#jaarKeuze {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid var(--lijn);
  border-radius: 5px;
  padding: 2px 4px;
  background: var(--wit);
}
.jaar-actief-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--wit);
  background: var(--c-vakantie);
  padding: 3px 8px;
  border-radius: 4px;
}
.weken-tabel { max-width: 560px; }
.week-invoer {
  width: 90px;
  padding: 5px 8px;
  border: 1px solid var(--lijn);
  border-radius: 5px;
  font: inherit;
}
.week-invoer:focus { outline: 2px solid var(--koraal); outline-offset: 1px; }
.week-invoer-smal { width: 70px; }

/* ---------- v1.5.1: locatie-acties ---------- */
.locatie-actie {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid var(--lijn);
}
.locatie-actie:empty { display: none; }
.locatie-online { background: var(--koraal); color: var(--wit); border-color: var(--koraal); }
.locatie-online:hover { background: var(--koraal-donker); }
.locatie-route, .locatie-link { background: var(--wit); color: var(--ink); }
.locatie-route:hover, .locatie-link:hover { background: var(--papier); border-color: var(--ink); }
.locatie-online::before { content: '🎦 '; }
.locatie-route::before { content: '📍 '; }
.locatie-link::before { content: '🔗 '; }

/* ---------- v1.6.0: gebruikers & rollen ---------- */
.login-kaart input[type=text] {
  padding: 10px 12px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  font: inherit;
}
.login-kaart input[type=text]:focus { outline: 2px solid var(--koraal); outline-offset: 1px; }
.gebr-naam { flex: 1; font-weight: 700; min-width: 90px; }
.gebr-ww { width: 110px; padding: 6px 8px; border: 1px solid var(--lijn); border-radius: 5px; font: inherit; }
#accountDialog select, #accountDialog input[type=text], #accountDialog input[type=password] {
  padding: 6px 8px; border: 1px solid var(--lijn); border-radius: 5px; font: inherit;
}
#accountDialog .rooster-rij { flex-wrap: wrap; }

/* ---------- v1.6.1: account-knop opvallend ---------- */
.knop-account {
  background: var(--koraal);
  color: var(--wit);
  border: none;
}
.knop-account:hover { background: var(--koraal-donker); }

/* ---------- v1.7.0: agenda-abonnement ---------- */
.feed-lijst { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.feed-rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feed-naam { flex-shrink: 0; min-width: 110px; font-weight: 700; }
.feed-url {
  flex: 1;
  min-width: 160px;
  padding: 6px 8px;
  border: 1px solid var(--lijn);
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-zacht);
  background: var(--papier);
}
.feed-vernieuw { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- v1.8.0: tijd op items ---------- */
.chip .tijd {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  margin-right: 1px;
}
.tijd-uitleg { align-self: end; }
@media (min-width: 480px) { .tijd-uitleg { grid-column: 1 / -1; } }

/* ---------- v1.9.1: 24-uurs tijdinvoer ---------- */
.tijd-invoer { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ---------- v1.9.2: tijd-picker naast invoer ---------- */
.tijd-groep { display: flex; gap: 6px; align-items: stretch; }
.tijd-groep .tijd-invoer { flex: 1; min-width: 0; }
.tijd-picker {
  flex-shrink: 0;
  width: 5.5em;
  padding: 0 4px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  background: var(--papier);
  font: inherit;
  cursor: pointer;
}
.tijd-picker:focus { outline: 2px solid var(--koraal); outline-offset: 1px; }

/* ---------- v1.10.0: doorlopende items (vakantie / onderwijsvrij) ---------- */
/* Een item dat de hele week beslaat wordt op elke dag getoond. De vervolgdagen
   krijgen een iets zachtere rand zodat zichtbaar is dat het één doorlopend
   item is, maar de titel blijft op elke dag leesbaar. */
.chip.spant { display: inline-block; }
.chip.spant-midden,
.chip.spant-eind { border-left-style: dotted; }

/* ---------- v1.10.2: stabiele scrollpositie ---------- */
/* Melding als zwevende toast: duwt de tabel niet omlaag, dus geen layout-shift
   waardoor je na het opslaan je plek in het rooster zou verliezen. */
.melding {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 40;
  box-shadow: 0 6px 24px rgba(43, 42, 41, 0.3);
  max-width: min(560px, 92vw);
}

/* Directe #week-ankers netjes onder de vaste kop laten uitkomen */
.rooster tbody tr { scroll-margin-top: calc(var(--kop-h, 64px) + var(--legenda-h, 42px) + 12px); }

/* ---------- v1.11.0: roosters combineren ---------- */
.tab-combineer {
  border: 1px dashed var(--lijn);
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-zacht);
  cursor: pointer;
  border-radius: 6px;
  margin-left: 6px;
  align-self: center;
  padding: 6px 12px;
}
.tab-combineer:hover { border-color: var(--koraal); color: var(--ink); }
.tab-combineer.actief { border-style: solid; border-color: var(--koraal); color: var(--ink); background: #fff1ee; }
.tab-combineer.actief::after { display: none; }
/* Badges op items in de gecombineerde weergave */
.chip .rbadges { margin-left: 5px; }