/*
 * Reservatiesysteem / (c) Digital Studio - digital-studio.be
 *
 * Zaal-app: werkscherm voor het team op iPad, gsm en pc.
 * Bouwt verder op basis.css. Geen afgeronde hoeken, behalve ronde tafels in het zaalplan.
 */

:root {
  --zaal-balk: 60px;
  --zaal-tabbalk: 62px;
  --zaal-rand: 16px;
  --zaal-zijlijst: 360px;
}

html, body.zaal { height: 100%; }
body.zaal { overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }

.zaal-schil {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.stapel { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.knoppenrij { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); align-items: center; }
.gevaar-tekst { color: var(--kleur-gevaar); }
.waarschuwing-tekst { color: var(--kleur-waarschuwing); }
.knop[aria-disabled="true"] { pointer-events: none; }
.knop-gevaar-stil { color: var(--kleur-gevaar); }
.knop-gevaar-stil:hover { background: var(--kleur-gevaar-zacht); }
.keuze-klein { min-height: var(--hoogte-knop-klein); padding-top: 4px; padding-bottom: 4px; width: auto; font-size: var(--maat-s); }
kbd { display: inline-block; min-width: 28px; padding: 1px 6px; border: 1px solid var(--kleur-lijn-sterk); border-bottom-width: 2px; background: var(--kleur-vlak-zacht); font: 500 var(--maat-xs) var(--letter); text-align: center; }

/* Opstarten */
.opstarten { padding: var(--ruimte-7) var(--zaal-rand); display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-4); }
.opstarten-balk { width: min(320px, 70vw); height: 2px; background: var(--kleur-lijn); position: relative; overflow: hidden; }
.opstarten-balk::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--kleur-accent); animation: opstarten 1.1s ease-in-out infinite; }
@keyframes opstarten { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.startfout .knop { margin-top: var(--ruimte-4); }
.inhoud.laadt .weergave { opacity: 0.55; transition: opacity var(--overgang); }

/* Bovenbalk */
.bovenbalk {
  display: flex; align-items: center; gap: var(--ruimte-3);
  min-height: var(--zaal-balk);
  padding: env(safe-area-inset-top) var(--zaal-rand) 0;
  background: var(--kleur-vlak);
  border-bottom: 1px solid var(--kleur-lijn);
}
.bovenbalk-links { display: flex; align-items: center; min-width: 0; flex: 0 1 220px; }
.vestiging-naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vestigingkeuze { display: block; min-width: 0; }
.vestiging-select {
  appearance: none; border: 0; background: transparent; font-weight: 600; font-size: var(--maat-m);
  min-height: var(--hoogte-knop); padding: 0 22px 0 0; max-width: 220px; cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--kleur-tekst-zacht) 50%), linear-gradient(135deg, var(--kleur-tekst-zacht) 50%, transparent 50%);
  background-position: calc(100% - 9px) 52%, calc(100% - 4px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.vestiging-select:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: 2px; }
.datumnavigatie { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; justify-content: center; min-width: 0; }
.datumknop {
  display: inline-flex; align-items: center; gap: var(--ruimte-2);
  min-height: var(--hoogte-knop); padding: 0 var(--ruimte-3);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-weight: 600; font-size: var(--maat-l); white-space: nowrap; min-width: 0;
  transition: background var(--overgang), border-color var(--overgang);
}
.datumknop:hover { background: var(--kleur-vlak-diep); }
.datumknop-lang::first-letter { text-transform: uppercase; }
.datumknop-kort { display: none; }
.datumknop-relatief { font-size: var(--maat-xs); font-weight: 500; color: var(--kleur-accent); background: var(--kleur-accent-zacht); padding: 1px 6px; }
.datumknop-pijl { width: 14px; height: 14px; color: var(--kleur-tekst-zacht); }
.vandaagknop { margin-left: var(--ruimte-2); }
.bovenbalk-rechts { display: flex; align-items: center; gap: var(--ruimte-1); flex: 0 0 auto; }
.bovenbalk-walkin, .bovenbalk-nieuw { margin-left: var(--ruimte-1); }
.verbinding { display: inline-flex; align-items: center; gap: 6px; font-size: var(--maat-xs); font-weight: 500; color: var(--kleur-tekst-zacht); padding: 0 var(--ruimte-2); white-space: nowrap; }
.verbinding-stip { width: 8px; height: 8px; background: var(--kleur-succes); }
.verbinding[data-toestand="live"] .verbinding-stip { animation: puls 2.4s ease-in-out infinite; }
.verbinding[data-toestand="offline"] { color: var(--kleur-gevaar); }
.verbinding[data-toestand="offline"] .verbinding-stip { background: var(--kleur-gevaar); }
@keyframes puls { 50% { opacity: 0.35; } }

/* Werkbalk: weergaven en diensten */
.werkbalk {
  display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; column-gap: var(--ruimte-5);
  padding: 0 var(--zaal-rand);
  background: var(--kleur-vlak);
  border-bottom: 1px solid var(--kleur-lijn);
}
.weergavetabs { border-bottom: 0; gap: var(--ruimte-5); align-self: stretch; }
.weergavetabs button { padding: var(--ruimte-4) 0 calc(var(--ruimte-4) - 2px); display: inline-flex; align-items: center; gap: 6px; min-height: 48px; }
.tab-aantal { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font-size: var(--maat-xs); background: var(--kleur-waarschuwing-zacht); color: var(--kleur-waarschuwing); font-weight: 600; }
.werkbalk-rechts { display: flex; align-items: center; gap: var(--ruimte-5); min-width: 0; }
.dagcijfers { display: flex; gap: var(--ruimte-4); font-size: var(--maat-s); color: var(--kleur-tekst-zacht); white-space: nowrap; }
.dagcijfer strong { color: var(--kleur-tekst); font-weight: 600; }
.diensten { display: flex; gap: var(--ruimte-5); padding: var(--ruimte-2) 0; min-width: 0; }
.dienst { display: flex; flex-direction: column; gap: 4px; width: 184px; flex: none; }
.dienst-kop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ruimte-2); font-size: var(--maat-s); }
.dienst-naam { font-weight: 600; }
.dienst-cijfer { font-weight: 600; }
.dienst-max { color: var(--kleur-tekst-licht); font-weight: 400; }
.dienst-voortgang { height: 3px; background: var(--kleur-vlak-diep); }
.dienst-voortgang span { display: block; height: 100%; background: var(--kleur-accent); transition: width var(--overgang-traag); }
.dienst.bijna-vol .dienst-voortgang span { background: var(--kleur-waarschuwing); }
.dienst-gesloten { width: auto; justify-content: center; }
.dienst-laden { width: 184px; height: 36px; }
.hittestrook { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: transparent; width: 100%; text-align: left; color: inherit; }
.hittestrook.bedienbaar { cursor: pointer; }
.hittestrook.bedienbaar:hover .hittestrook-cellen { outline: 1px solid var(--kleur-lijn-sterk); outline-offset: 1px; }
.hittestrook-cellen { display: flex; gap: 1px; height: 9px; }
.hittestrook-uren { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--kleur-tekst-licht); line-height: 1.2; }
.hittecel { flex: 1; background: var(--kleur-accent-zacht); }
.hittecel.niveau-1 { background: color-mix(in srgb, var(--kleur-accent) 30%, var(--kleur-vlak)); }
.hittecel.niveau-2 { background: color-mix(in srgb, var(--kleur-accent) 58%, var(--kleur-vlak)); }
.hittecel.niveau-3 { background: var(--kleur-accent); }
.hittecel.niveau-4 { background: var(--kleur-waarschuwing); }
.hittecel.dicht { background: var(--kleur-tekst-licht); }
.hittecel.voorbij { opacity: 0.35; }

/* Inhoud en weergaven */
.inhoud { position: relative; min-height: 0; overflow: hidden; outline: none; }
.weergave { height: 100%; display: flex; min-height: 0; }
.weergave-hoofd { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.weergave-zijlijst { width: var(--zaal-zijlijst); flex: none; height: 100%; display: flex; flex-direction: column; border-right: 1px solid var(--kleur-lijn); background: var(--kleur-vlak); min-height: 0; }
.weergave-wachtlijst .weergave-hoofd, .weergave-briefing .weergave-hoofd { overflow: auto; display: block; -webkit-overflow-scrolling: touch; }

/* Lijst */
.lijst-kop { padding: var(--ruimte-3) var(--zaal-rand); border-bottom: 1px solid var(--kleur-lijn); background: var(--kleur-vlak); }
.lijst-filters { display: flex; gap: var(--ruimte-2); overflow-x: auto; scrollbar-width: none; }
.lijst-filters::-webkit-scrollbar { display: none; }
.filterknop {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 var(--ruimte-3);
  border: 1px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak); color: var(--kleur-tekst-zacht);
  font-weight: 500; font-size: var(--maat-s); cursor: pointer; white-space: nowrap;
  transition: background var(--overgang), color var(--overgang), border-color var(--overgang);
}
.filterknop:hover { background: var(--kleur-vlak-diep); }
.filterknop[aria-pressed="true"] { background: var(--kleur-tekst); border-color: var(--kleur-tekst); color: var(--kleur-vlak); }
.filter-aantal { font-size: var(--maat-xs); opacity: 0.75; }
.lijst-scroll { flex: 1; overflow: auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.compact .lijst-filters, .weergave-zijlijst .lijst-filters { padding: var(--ruimte-2) var(--ruimte-3); position: sticky; top: 0; z-index: 3; background: var(--kleur-vlak); border-bottom: 1px solid var(--kleur-lijn); }
.weergave-zijlijst .filterknop { min-height: 34px; padding: 0 var(--ruimte-2); }
.reservatielijst { padding-bottom: var(--ruimte-7); }
.kwartier-kop {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--ruimte-3);
  padding: var(--ruimte-2) var(--zaal-rand) 6px calc(var(--zaal-rand) + 4px);
  background: var(--kleur-achtergrond); border-bottom: 1px solid var(--kleur-lijn);
  font-size: var(--maat-m);
}
.weergave-zijlijst .kwartier-kop { top: 51px; padding-left: var(--ruimte-3); }
.kwartier-uur { font-weight: 700; }
.kwartier-som { font-size: var(--maat-xs); font-weight: 500; color: var(--kleur-tekst-zacht); }

.rij {
  display: grid;
  grid-template-columns: 4px 58px minmax(0, 1fr) 64px 92px 140px;
  grid-template-areas: "streep uur hoofd personen tafels actie";
  align-items: center; column-gap: var(--ruimte-3);
  min-height: 64px; padding-right: var(--zaal-rand);
  background: var(--kleur-vlak); border-bottom: 1px solid var(--kleur-lijn);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--overgang);
}
.rij:hover { background: var(--kleur-vlak-zacht); }
.rij:focus-visible { outline-offset: -2px; }
.rij-streep { grid-area: streep; align-self: stretch; background: var(--status-kleur); }
.rij-uur { grid-area: uur; font-weight: 600; font-size: var(--maat-l); }
.rij-hoofd { grid-area: hoofd; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--ruimte-2) 0; }
.rij-naam { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; font-weight: 600; font-size: var(--maat-l); }
.rij-naamtekst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rij-meta { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; font-size: var(--maat-s); color: var(--kleur-tekst-zacht); }
.rij-meta .status { font-weight: 400; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rij-meta .status::before { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.rij-personen { grid-area: personen; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--maat-l); }
.rij-personen .icoon { width: 16px; height: 16px; color: var(--kleur-tekst-licht); }
.rij-tafels { grid-area: tafels; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij-tafels.virtueel { color: var(--kleur-tekst-licht); font-weight: 500; font-style: normal; border-bottom: 1px dashed var(--kleur-lijn-sterk); justify-self: start; }
.rij-tafels.geen { color: var(--kleur-tekst-licht); }
.rij-actie { grid-area: actie; justify-self: stretch; min-height: 44px; font-size: var(--maat-s); }
.rij-actie-bevestig { border-color: var(--status-aanvraag); color: var(--status-aanvraag); }
.rij-actie-leeg { grid-area: actie; }
.rij-afgesloten { background: var(--kleur-vlak-zacht); }
.rij-afgesloten .rij-naamtekst, .rij-afgesloten .rij-uur, .rij-afgesloten .rij-personen { color: var(--kleur-tekst-licht); text-decoration: line-through; text-decoration-thickness: 1px; }
.rij[data-status="vertrokken"] .rij-naamtekst, .rij[data-status="vertrokken"] .rij-uur { color: var(--kleur-tekst-zacht); }
.rij-te-laat .rij-uur { color: var(--kleur-gevaar); }
.rij.wordt-gesleept { opacity: 0.45; }

.compact .rij {
  grid-template-columns: 4px 46px minmax(0, 1fr) 30px 44px 44px;
  column-gap: var(--ruimte-2); min-height: 56px; padding-right: var(--ruimte-2);
}
.compact .rij-uur, .compact .rij-naam, .compact .rij-personen { font-size: var(--maat-m); }
.compact .rij-personen .icoon { display: none; }
.compact .rij-tafels { font-size: var(--maat-s); }
.compact .rij-actie { width: 44px; padding: 0; }
.compact .rij-meta { font-size: var(--maat-xs); }

.tekens { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.teken { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.teken .icoon { width: 16px; height: 16px; }
.teken-allergie { color: var(--kleur-gevaar); }
.teken-vip { color: var(--status-optie); }
.teken-verjaardag { color: var(--kleur-waarschuwing); }
.teken-opmerking, .teken-kind { color: var(--kleur-tekst-zacht); }
.teken-label { font-size: 0.6875rem; padding: 1px 6px; }
.leeg-knop { margin-top: var(--ruimte-4); }

/* Tijdlijn */
.tijdlijn-scroll { flex: 1; overflow: auto; position: relative; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--kleur-vlak); }
.tijdlijn-raam { position: relative; min-height: 100%; }
.tijdlijn-as { position: sticky; top: 0; z-index: 6; display: flex; height: 36px; background: var(--kleur-vlak); border-bottom: 1px solid var(--kleur-lijn-sterk); }
.tijdlijn-hoek { position: sticky; left: 0; z-index: 7; flex: none; background: var(--kleur-vlak); border-right: 1px solid var(--kleur-lijn); font-size: var(--maat-xs); color: var(--kleur-tekst-licht); display: flex; align-items: center; padding: 0 var(--ruimte-3); }
.tijdlijn-uren { position: relative; flex: none; }
.tijdlijn-uurlabel { position: absolute; top: 9px; padding-left: 5px; font-size: var(--maat-xs); color: var(--kleur-tekst-zacht); font-weight: 500; border-left: 1px solid var(--kleur-lijn-sterk); line-height: 1; padding-top: 2px; padding-bottom: 14px; }
.tijdlijn-dienstband { position: absolute; bottom: -1px; height: 3px; background: var(--kleur-accent); opacity: 0.5; }
.tijdlijn-rijen { position: relative; }
.tijdlijn-lijnen { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.tijdlijn-lijn { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--kleur-lijn); }
.tijdlijn-lijn.half { opacity: 0.45; }
.tijdlijn-rij { display: flex; position: relative; border-bottom: 1px solid var(--kleur-lijn); transition: background var(--overgang); }
.tijdlijn-rij.sleep-doel-actief { background: var(--kleur-accent-zacht); }
.tijdlijn-rij-geen { background: var(--kleur-vlak-zacht); border-bottom-color: var(--kleur-lijn-sterk); }
.tijdlijn-label { position: sticky; left: 0; z-index: 4; flex: none; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--ruimte-3); background: var(--kleur-vlak); border-right: 1px solid var(--kleur-lijn); }
.tijdlijn-rij-geen .tijdlijn-label { background: var(--kleur-vlak-zacht); }
.tijdlijn-rij.sleep-doel-actief .tijdlijn-label { background: var(--kleur-accent-zacht); }
.tijdlijn-tafelnaam { font-weight: 600; font-size: var(--maat-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tijdlijn-tafelmax { font-size: var(--maat-xs); color: var(--kleur-tekst-licht); }
.tijdlijn-baan { position: relative; flex: none; }
.tijdlijn-zaalkop { position: relative; height: 30px; background: var(--kleur-vlak-diep); border-bottom: 1px solid var(--kleur-lijn); z-index: 3; }
.tijdlijn-zaalkop span { position: sticky; left: 0; display: inline-flex; align-items: center; height: 100%; padding: 0 var(--ruimte-3); font-size: var(--maat-xs); font-weight: 600; color: var(--kleur-tekst-zacht); }
.tijdblok {
  position: absolute; height: 40px; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 2px 8px; border: 0; border-left: 3px solid var(--status-kleur);
  background: color-mix(in srgb, var(--status-kleur) 15%, var(--kleur-vlak));
  color: var(--kleur-tekst); text-align: left; cursor: grab; overflow: hidden;
  transition: box-shadow var(--overgang), opacity var(--overgang);
}
.tijdblok:hover { box-shadow: var(--schaduw-laag), inset 0 0 0 1px var(--status-kleur); }
.tijdblok[data-status="gezeten"], .tijdblok[data-status="aangekomen"] { background: color-mix(in srgb, var(--status-kleur) 32%, var(--kleur-vlak)); }
.tijdblok.klaar { opacity: 0.5; cursor: pointer; }
.tijdblok.te-laat { border-left-color: var(--kleur-gevaar); background: var(--kleur-gevaar-zacht); }
.tijdblok-naam { font-weight: 600; font-size: var(--maat-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.25; }
.tijdblok-info { font-size: 0.6875rem; color: var(--kleur-tekst-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.25; }
.tijdblok.wordt-gesleept { opacity: 0.3; }
.tijdlijn-nu { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--kleur-gevaar); z-index: 5; pointer-events: none; }
.tijdlijn-nu-label { position: sticky; top: 40px; display: inline-block; transform: translateX(-50%); margin-left: 1px; padding: 1px 5px; font-size: 0.6875rem; font-weight: 600; background: var(--kleur-gevaar); color: #fff; }

/* Zaalplan */
.zaalplan { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.zaalplan-balk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-5); padding: var(--ruimte-2) var(--zaal-rand); background: var(--kleur-vlak); border-bottom: 1px solid var(--kleur-lijn); }
.zaaltabs { border-bottom: 0; }
.zaaltabs button { min-height: 40px; padding: var(--ruimte-2) 0; }
.tijdschuif-groep { display: flex; align-items: center; gap: var(--ruimte-3); flex: 1 1 260px; min-width: 220px; }
.tijdschuif-label { font-weight: 600; font-size: var(--maat-s); min-width: 76px; }
.tijdschuif { flex: 1; min-width: 100px; accent-color: var(--kleur-accent); height: 32px; cursor: pointer; }
.zoomknoppen { display: flex; gap: 2px; }
.zonder-tafel-strook { display: flex; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-2) var(--zaal-rand); background: var(--kleur-waarschuwing-zacht); border-bottom: 1px solid var(--kleur-lijn); overflow-x: auto; scrollbar-width: none; }
.strook-titel { font-weight: 600; white-space: nowrap; color: var(--kleur-waarschuwing); }
.strook-items { display: flex; gap: var(--ruimte-2); }
.strook-hulp { white-space: nowrap; }
.reservatiechip {
  display: inline-flex; align-items: center; gap: var(--ruimte-2); min-height: 40px; padding: 0 var(--ruimte-3);
  border: 1px solid var(--kleur-lijn-sterk); border-left: 3px solid var(--status-kleur); background: var(--kleur-vlak);
  font-size: var(--maat-s); cursor: grab; white-space: nowrap;
}
.zaalplan-vlak { flex: 1; min-height: 0; overflow: auto; display: flex; padding: var(--ruimte-3); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.zaalplan-schaal { position: relative; margin: auto; flex: none; }
@media (max-width: 860px) {
  .zaalplan-schaal { margin-top: 0; }
}
.zaalplan-doek { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); }
.zaaltafel {
  position: absolute; display: grid; place-items: center; padding: 0; overflow: hidden;
  border: 2px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak-zacht); color: var(--kleur-tekst-zacht);
  cursor: pointer; font: inherit; line-height: 1.15; -webkit-tap-highlight-color: transparent;
  transition: background var(--overgang), border-color var(--overgang), color var(--overgang), outline-color var(--overgang);
}
.zaaltafel.vorm-rond { border-radius: 50%; }
.zaaltafel:hover { border-color: var(--kleur-tekst-zacht); }
.zaaltafel.sleep-doel-actief { outline: 4px solid var(--kleur-accent); outline-offset: 3px; }
.tafel-binnen { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 100%; padding: 2px 4px; pointer-events: none; }
.tafel-naam { font-weight: 700; color: var(--kleur-tekst); }
.tafel-info { font-size: 0.86em; font-weight: 600; white-space: nowrap; }
.tafel-detail { font-size: 0.78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tafel-plaatsen { position: absolute; top: 2px; right: 5px; opacity: 0.6; pointer-events: none; }
.vorm-rond .tafel-plaatsen { display: none; }
.tafel-voortgang { position: absolute; left: 0; bottom: 0; height: 4px; background: currentColor; opacity: 0.55; pointer-events: none; }
.toestand-vrij { background: var(--kleur-vlak); }
.toestand-straks { background: var(--kleur-vlak); border-style: dashed; border-color: var(--kleur-info); color: var(--kleur-info); }
.toestand-verwacht, .toestand-gereserveerd { background: color-mix(in srgb, var(--status-bevestigd) 22%, var(--kleur-vlak)); border-color: var(--status-bevestigd); color: var(--status-bevestigd); }
.toestand-verwacht { border-width: 3px; }
.toestand-bezet { background: var(--kleur-succes-zacht); border-color: var(--kleur-succes); color: var(--kleur-succes); }
.toestand-overtijd { background: var(--kleur-waarschuwing-zacht); border-color: var(--kleur-waarschuwing); color: var(--kleur-waarschuwing); }
.toestand-te_laat { background: var(--kleur-gevaar-zacht); border-color: var(--kleur-gevaar); color: var(--kleur-gevaar); }
:root[data-thema="donker"] .toestand-straks { color: #8db6dc; border-color: #5d8fbd; }
:root[data-thema="donker"] .toestand-verwacht, :root[data-thema="donker"] .toestand-gereserveerd { color: #93b8d6; border-color: #6c98bd; }
:root[data-thema="donker"] .toestand-bezet { color: #7fc79c; border-color: #4f9d6f; }
:root[data-thema="donker"] .toestand-overtijd { color: #e0aa5c; border-color: #c48a36; }
:root[data-thema="donker"] .toestand-te_laat { color: #e58b78; border-color: #c9604a; }
.zaalplan-legende { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3); padding: 4px var(--zaal-rand); border-top: 1px solid var(--kleur-lijn); background: var(--kleur-vlak); color: var(--kleur-tekst-zacht); min-height: 37px; }
.zaalplan-legende-items { display: flex; flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-4); }
.legende-item { display: inline-flex; align-items: center; gap: 6px; }
.legende-blok { width: 14px; height: 14px; border: 2px solid var(--kleur-lijn-sterk); }

/* Slepen */
.sleepbaar { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.sleep-geest { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; opacity: 0.94; box-shadow: var(--schaduw-hoog); will-change: transform; }
.sleep-geest.rij { grid-template-columns: 4px 46px minmax(0, 1fr) 40px; }
.sleep-geest.rij .rij-tafels, .sleep-geest.rij .rij-actie, .sleep-geest.rij .rij-actie-leeg { display: none; }
.sleep-geest.tijdblok { position: fixed; height: 44px; }
body.bezig-met-slepen, body.bezig-met-slepen * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* Panelen */
@media (min-width: 900px) {
  .paneel-reservatie, .paneel-nieuw { width: 500px; }
}
.paneel { padding-bottom: 0; }
.paneel-kop h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paneel-voet-inhoud { display: flex; gap: var(--ruimte-2); width: 100%; }
.paneel-voet-inhoud .knop-breed { flex: 1; }
.paneel-voet .nieuw-samenvatting { flex: 1; align-self: center; font-size: var(--maat-s); color: var(--kleur-tekst-zacht); font-weight: 500; }
.paneel-voet .knop-hoofd { min-width: 140px; }
.paneel-sectie { padding: var(--ruimte-4) 0; border-top: 1px solid var(--kleur-lijn); }
.paneel-sectie:first-child { border-top: 0; padding-top: 0; }
.paneel-sectie h4 { font-size: var(--maat-s); font-weight: 600; color: var(--kleur-tekst-zacht); margin-bottom: var(--ruimte-3); }
.paneel-sectie h5 { margin: var(--ruimte-3) 0 var(--ruimte-2); font-size: var(--maat-xs); font-weight: 600; color: var(--kleur-tekst-zacht); }
.sectie-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3); margin-bottom: var(--ruimte-2); }
.sectie-kop h4 { margin: 0; }
.paneel-samenvatting { display: flex; flex-direction: column; gap: var(--ruimte-3); padding-bottom: var(--ruimte-4); }
.samenvatting-hoofd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--kleur-lijn); }
.samenvatting-blok { display: flex; flex-direction: column; padding: var(--ruimte-3); min-width: 0; }
.samenvatting-blok + .samenvatting-blok { border-left: 1px solid var(--kleur-lijn); }
.samenvatting-waarde { font-size: var(--maat-xl); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.samenvatting-waarde.virtueel { color: var(--kleur-tekst-licht); }
.samenvatting-label { font-size: var(--maat-xs); color: var(--kleur-tekst-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.samenvatting-regel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); }
.status-groot { font-size: var(--maat-m); font-weight: 600; }
.status-groot::before { width: 10px; height: 10px; }
.samenvatting-ref { margin-left: auto; }
.statusknoppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--ruimte-2); }
.statusknop { min-height: 48px; }
.statusknop-hoofd { grid-column: 1 / -1; min-height: 56px; font-size: var(--maat-l); }
.contactknoppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-2); }
.gegevens { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--ruimte-2) var(--ruimte-3); margin: 0; font-size: var(--maat-s); }
.gegevens dt { color: var(--kleur-tekst-zacht); }
.gegevens dd { margin: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 4px; }
.notitie-tekst { background: var(--kleur-waarschuwing-zacht); padding: 2px 6px; }
.gast-naamregel { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); font-size: var(--maat-l); }
.gastcijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--kleur-lijn); border: 1px solid var(--kleur-lijn); margin-bottom: var(--ruimte-4); }
.gastcijfer { display: flex; flex-direction: column; padding: var(--ruimte-2) var(--ruimte-3); background: var(--kleur-vlak); min-width: 0; }
.gastcijfer-waarde { font-weight: 600; font-size: var(--maat-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gastcijfer-label { font-size: var(--maat-xs); color: var(--kleur-tekst-zacht); }
.gastcijfer.gevaar .gastcijfer-waarde { color: var(--kleur-gevaar); }
.gastfiche .gegevens { margin-bottom: var(--ruimte-4); }
.gastfiche .veld .knop { align-self: flex-start; }
.historiek { margin-top: var(--ruimte-4); }
.historiek-rij {
  display: grid; grid-template-columns: 96px 52px 48px minmax(0, 1fr); gap: var(--ruimte-2); align-items: center;
  width: 100%; min-height: 44px; padding: 0 var(--ruimte-2); border: 0; background: transparent; text-align: left; cursor: pointer; font-size: var(--maat-s);
}
.historiek-rij:hover { background: var(--kleur-vlak-diep); }
.gebeurtenissen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ruimte-2); font-size: var(--maat-s); }
.gebeurtenissen li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--ruimte-3); padding-left: var(--ruimte-3); border-left: 2px solid var(--kleur-lijn); }
.gebeurtenis-tijd { color: var(--kleur-tekst-licht); font-size: var(--maat-xs); padding-top: 2px; }
.gebeurtenis-tekst { overflow-wrap: anywhere; }
.tafelkiezer { margin-top: var(--ruimte-3); }
.tafelvoorstellen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--ruimte-2); }
.tafelvoorstel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: var(--ruimte-2) var(--ruimte-3); border: 1px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak); text-align: left; cursor: pointer; transition: border-color var(--overgang), background var(--overgang); }
.tafelvoorstel:hover { border-color: var(--kleur-accent); background: var(--kleur-accent-zacht); }
.tafelraster-zaal h5 { margin-top: var(--ruimte-2); }
.tafelraster { display: flex; flex-wrap: wrap; gap: 6px; }
.tafelchip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 56px; min-height: 44px; padding: 0 var(--ruimte-2); border: 1px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak); font-weight: 600; cursor: pointer; }
.tafelchip-max { font-size: var(--maat-xs); color: var(--kleur-tekst-licht); font-weight: 400; }
.tafelchip.bezet { border-style: dashed; color: var(--kleur-tekst-licht); }
.tafelchip[aria-pressed="true"] { background: var(--kleur-accent); border-color: var(--kleur-accent); color: var(--kleur-accent-tekst); }
.tafelchip[aria-pressed="true"] .tafelchip-max { color: inherit; }
.tafelkiezer .knoppenrij { margin-top: var(--ruimte-4); }

/* Tafelpaneel */
.tafelpaneel > p { margin-bottom: var(--ruimte-4); }
.tafelres { display: flex; align-items: center; gap: var(--ruimte-2); border: 1px solid var(--kleur-lijn); border-left: 3px solid var(--status-kleur); margin-bottom: var(--ruimte-2); padding-right: var(--ruimte-2); background: var(--kleur-vlak); }
.tafelres-hoofd { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--ruimte-3); min-height: 52px; padding: var(--ruimte-2) var(--ruimte-3); border: 0; background: transparent; text-align: left; cursor: pointer; min-width: 0; }
.tafelres-uur { font-weight: 600; }
.tafelres-naam { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tafelres.groot .tafelres-hoofd { min-height: 64px; font-size: var(--maat-l); }
.meer { border: 1px solid var(--kleur-lijn); background: var(--kleur-vlak); }
.meer > summary { min-height: var(--hoogte-knop); display: flex; align-items: center; padding: 0 var(--ruimte-4); cursor: pointer; font-weight: 500; list-style: none; }
.meer > summary::-webkit-details-marker { display: none; }
.meer > summary::after { content: "+"; margin-left: auto; font-size: var(--maat-l); color: var(--kleur-tekst-zacht); }
.meer[open] > summary::after { content: "-"; }
.meer > :not(summary) { padding: 0 var(--ruimte-4) var(--ruimte-4); }

/* Formulieren: nieuw, walk-in, bewerken */
.nieuwformulier { display: flex; flex-direction: column; gap: var(--ruimte-5); }
.nieuw-stap { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.nieuw-stap h4 { font-size: var(--maat-s); font-weight: 600; color: var(--kleur-tekst-zacht); }
.personenkeuze { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); align-items: center; }
.teller-groot button { width: 52px; height: 52px; display: grid; place-items: center; }
.teller-groot button .icoon { width: 20px; height: 20px; }
.teller-groot output { min-width: 64px; font-size: var(--maat-xl); }
.snelknoppen { display: flex; gap: 6px; flex-wrap: wrap; }
.snelknop { width: 48px; height: 48px; border: 1px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak); font-weight: 600; font-size: var(--maat-l); cursor: pointer; transition: background var(--overgang), color var(--overgang); }
.snelknop:hover { background: var(--kleur-vlak-diep); }
.snelknop[aria-pressed="true"] { background: var(--kleur-tekst); border-color: var(--kleur-tekst); color: var(--kleur-vlak); }
.datumkeuze { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; align-items: stretch; }
.segment-groot button { min-height: var(--hoogte-knop); padding: 0 var(--ruimte-4); font-size: var(--maat-m); }
.invoer-datum { width: auto; flex: 1; min-width: 150px; }
.datum-label::first-letter { text-transform: uppercase; }
.urenraster { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.urenraster-laden { height: 120px; }
.urenraster-titel { font-size: var(--maat-xs); font-weight: 600; color: var(--kleur-tekst-zacht); margin-bottom: 6px; }
.urenraster-uren { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.uurknop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 54px; padding: 4px; border: 1px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak); cursor: pointer;
  transition: background var(--overgang), border-color var(--overgang), color var(--overgang);
}
.uurknop:hover { border-color: var(--kleur-accent); }
.uurknop-tijd { font-weight: 600; font-size: var(--maat-m); }
.uurknop-info { font-size: 0.6875rem; color: var(--kleur-tekst-zacht); }
.uurknop.uur-zaak::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; background: var(--kleur-waarschuwing); }
.uurknop.uur-vol { background: var(--kleur-vlak-diep); border-style: dashed; }
.uurknop.uur-vol .uurknop-tijd { color: var(--kleur-tekst-licht); }
.uurknop[aria-pressed="true"] { background: var(--kleur-accent); border-color: var(--kleur-accent); border-style: solid; color: var(--kleur-accent-tekst); }
.uurknop[aria-pressed="true"] .uurknop-info, .uurknop[aria-pressed="true"] .uurknop-tijd { color: var(--kleur-accent-tekst); }
.urenraster-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.legende-teken { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak); position: relative; margin-left: 6px; }
.legende-teken.uur-zaak::after { content: ""; position: absolute; inset: 2px; background: var(--kleur-waarschuwing); }
.legende-teken.uur-vol { background: var(--kleur-vlak-diep); border-style: dashed; }
.urenraster-vrij { display: flex; align-items: center; gap: var(--ruimte-2); }
.urenraster-vrij .invoer { width: auto; min-height: 38px; padding: 4px 8px; }
.gastzoeker { position: relative; }
.invoer-groot { min-height: 52px; font-size: var(--maat-l); }
.gastresultaten { display: flex; flex-direction: column; }
.gastresultaten:not(:empty) { border: 1px solid var(--kleur-lijn-sterk); border-top: 0; }
.gastresultaat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--ruimte-3); align-items: center; min-height: 52px; padding: var(--ruimte-2) var(--ruimte-3); border: 0; border-bottom: 1px solid var(--kleur-lijn); background: var(--kleur-vlak); text-align: left; cursor: pointer; }
.gastresultaat:last-child { border-bottom: 0; }
.gastresultaat:hover, .gastresultaat:focus-visible { background: var(--kleur-accent-zacht); outline: none; }
.gastresultaat-naam { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.gastresultaat-naam .icoon { width: 14px; height: 14px; color: var(--status-optie); }
.gastresultaat-info { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gastresultaat-cijfers { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--kleur-tekst-zacht); }
.gekozen-gast { display: flex; flex-direction: column; gap: var(--ruimte-2); padding: var(--ruimte-3); background: var(--kleur-accent-zacht); border-left: 3px solid var(--kleur-accent); }
.gekozen-gast-kop { display: flex; align-items: center; gap: var(--ruimte-2); }
.gekozen-gast-kop .knop { margin-left: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { min-height: 38px; padding: 0 var(--ruimte-3); border: 1px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak); font-size: var(--maat-s); cursor: pointer; transition: background var(--overgang), border-color var(--overgang); }
.chip:hover { background: var(--kleur-vlak-diep); }
.chip[aria-pressed="true"] { background: var(--kleur-accent-zacht); border-color: var(--kleur-accent); color: var(--kleur-accent); font-weight: 500; }
.chip-invoer { width: 160px; min-height: 38px; padding: 4px 10px; font-size: var(--maat-s); }
.bewerkformulier { padding-bottom: var(--ruimte-4); }

.walkin-voorstellen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--ruimte-2); }
.walkin-tafel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; padding: var(--ruimte-3); border: 1px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak); text-align: left; cursor: pointer; transition: border-color var(--overgang), background var(--overgang); }
.walkin-tafel:hover { border-color: var(--kleur-accent); }
.walkin-tafel[aria-checked="true"] { border: 2px solid var(--kleur-accent); background: var(--kleur-accent-zacht); padding: calc(var(--ruimte-3) - 1px); }
.walkin-tafel-naam { font-weight: 700; font-size: var(--maat-l); }
.walkin-tafel-tot { font-size: var(--maat-s); font-weight: 500; }
.walkin-tafel.past-niet { border-style: dashed; }

/* Pagina's: wachtlijst en briefing */
.pagina { max-width: 980px; margin: 0 auto; padding: var(--ruimte-5) var(--zaal-rand) var(--ruimte-8); display: flex; flex-direction: column; gap: var(--ruimte-5); }
.pagina-kaart .kaart-kop h2 { font-size: var(--maat-xl); display: inline-flex; align-items: center; gap: var(--ruimte-2); }
.kop-aantal { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; font-size: var(--maat-xs); font-weight: 600; background: var(--kleur-vlak-diep); color: var(--kleur-tekst-zacht); }
.wachtende, .groepsaanvraag { display: flex; flex-direction: column; gap: var(--ruimte-2); padding: var(--ruimte-4) var(--ruimte-5); }
.wachtende-hoofd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-4); }
.wachtende-uren { font-weight: 600; min-width: 110px; }
.wachtende-naam { font-weight: 600; flex: 1; min-width: 140px; }
.wachtende-info { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-4); }
.wacht-geannuleerd, .wacht-verlopen, .wacht-geboekt { opacity: 0.6; }
.groepen-laden, .briefing-laden { height: 120px; margin: var(--ruimte-5); }
.briefing-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ruimte-4); }
.briefing-kop h1 { margin-bottom: var(--ruimte-1); }
.briefing-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--kleur-lijn); border: 1px solid var(--kleur-lijn); }
.briefing-cijfer { background: var(--kleur-vlak); padding: var(--ruimte-4); display: flex; flex-direction: column; }
.briefing-cijfer-waarde { font-size: var(--maat-xxl); font-weight: 600; line-height: 1.1; }
.briefing-cijfer-label { font-size: var(--maat-s); color: var(--kleur-tekst-zacht); }
.briefing-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--ruimte-4); align-items: start; }
.briefing-blok { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); padding: var(--ruimte-4) var(--ruimte-5); break-inside: avoid; }
.briefing-blok h3 { display: flex; align-items: center; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); font-size: var(--maat-m); }
.briefing-blok h3 .icoon { width: 18px; height: 18px; color: var(--kleur-accent); }
.briefing-rij { display: grid; grid-template-columns: 52px minmax(0, 1fr) 44px 64px; gap: 4px var(--ruimte-3); align-items: baseline; width: 100%; min-height: 44px; padding: var(--ruimte-2) 0; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: var(--maat-s); }
.briefing-rij:hover .briefing-naam { text-decoration: underline; }
.briefing-uur { font-weight: 600; }
.briefing-naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.briefing-tafel { text-align: right; }
.briefing-extra { grid-column: 2 / -1; color: var(--kleur-tekst-zacht); }
.briefing-memos { border-left: 3px solid var(--kleur-waarschuwing); }
.memo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--ruimte-3); padding: var(--ruimte-2) 0; }
.memo p { font-size: var(--maat-m); }
.memo .knop { grid-row: 1 / span 2; grid-column: 2; }
.memo-formulier { display: flex; gap: var(--ruimte-2); align-items: flex-end; margin-top: var(--ruimte-3); }
.memo-formulier .tekstvak { min-height: 52px; }

/* Dialogen: zoeken, kalender, menu */
.dialoog-zoeken { width: min(96vw, 720px); align-self: start; margin-top: 8vh; }
.zoekveld { display: flex; align-items: center; gap: var(--ruimte-2); border: 1px solid var(--kleur-lijn-sterk); padding-left: var(--ruimte-3); background: var(--kleur-vlak); }
.zoekveld:focus-within { border-color: var(--kleur-accent); box-shadow: 0 0 0 3px var(--kleur-accent-zacht); }
.zoekveld .icoon { width: 20px; height: 20px; color: var(--kleur-tekst-zacht); }
.zoekveld .invoer { border: 0; box-shadow: none !important; }
.zoekresultaten { margin-top: var(--ruimte-3); min-height: 120px; max-height: 60vh; overflow: auto; }
.zoekresultaten h4 { font-size: var(--maat-xs); color: var(--kleur-tekst-zacht); margin: var(--ruimte-3) 0 var(--ruimte-1); }
.zoek-laden { height: 80px; }
.zoekresultaat { display: grid; grid-template-columns: 104px 48px minmax(0, 1fr) 44px 112px 72px; align-items: center; gap: var(--ruimte-2); width: 100%; min-height: 52px; padding: 0 var(--ruimte-2); border: 0; background: transparent; text-align: left; cursor: pointer; font-size: var(--maat-s); }
.zoekresultaat:hover, .zoekresultaat:focus-visible { background: var(--kleur-accent-zacht); }
.zoekresultaat-naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialoog-kalender { width: min(96vw, 460px); }
.kalender-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ruimte-3); }
.kalender-titel { font-size: var(--maat-l); }
.kalender-titel::first-letter { text-transform: uppercase; }
.kalender-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.kalender-weekdag { text-align: center; font-size: var(--maat-xs); color: var(--kleur-tekst-licht); padding-bottom: 4px; }
.kalender-dag { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--kleur-lijn); background: var(--kleur-vlak); cursor: pointer; padding: 2px; transition: border-color var(--overgang); }
.kalender-dag:hover { border-color: var(--kleur-accent); }
.kalender-nummer { font-weight: 600; }
.kalender-couverts { font-size: 0.6875rem; color: var(--kleur-tekst-zacht); min-height: 1em; }
.kalender-dag.niveau-1 { background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-vlak)); }
.kalender-dag.niveau-2 { background: color-mix(in srgb, var(--kleur-accent) 16%, var(--kleur-vlak)); }
.kalender-dag.niveau-3 { background: color-mix(in srgb, var(--kleur-accent) 26%, var(--kleur-vlak)); }
.kalender-dag.niveau-4 { background: color-mix(in srgb, var(--kleur-accent) 38%, var(--kleur-vlak)); }
.kalender-dag.vandaag { border-color: var(--kleur-tekst); }
.kalender-dag.gesloten { background: var(--kleur-vlak-diep); color: var(--kleur-tekst-licht); }
.kalender-dag[aria-pressed="true"] { background: var(--kleur-accent); border-color: var(--kleur-accent); color: var(--kleur-accent-tekst); }
.kalender-dag[aria-pressed="true"] .kalender-couverts { color: inherit; }
.kalender-voet { display: flex; justify-content: space-between; align-items: center; margin-top: var(--ruimte-3); }
.menu-blok h4 { font-size: var(--maat-s); color: var(--kleur-tekst-zacht); margin-bottom: var(--ruimte-2); }
.menu-vestigingen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.toetsen { display: grid; grid-template-columns: 72px 1fr; gap: 6px var(--ruimte-3); margin: 0; font-size: var(--maat-s); }
.toetsen dd { margin: 0; }
.dialoog .dialoog-inhoud { max-height: calc(90vh - 140px); }

/* Onderste tabbalk en zwevende knoppen (gsm) */
.tabbalk { display: none; }
.zwevend { display: none; }

@media (min-width: 1300px) {
  :root { --zaal-zijlijst: 420px; }
}

/* Middelgrote schermen */
@media (max-width: 1279px) {
  .dagcijfers { display: none; }
}
@media (max-width: 1100px) {
  .bovenbalk-walkin .knoptekst { display: none; }
  .bovenbalk-walkin { width: var(--hoogte-knop); padding: 0; }
  .datumknop { font-size: var(--maat-m); }
  .weergavetabs { gap: var(--ruimte-4); }
  .dienst { width: 160px; }
}
@media (max-width: 999px) {
  .rij { grid-template-columns: 4px 54px minmax(0, 1fr) 56px 72px 124px; }
  .verbinding-tekst { display: none; }
  .vandaagknop { display: none; }
  .bovenbalk-links { flex-basis: auto; }
  .werkbalk { row-gap: 0; }
}
@media (max-width: 860px) {
  .datumknop-lang { display: none; }
  .datumknop-kort { display: inline; }
  .datumknop-kort::first-letter { text-transform: uppercase; }
  .werkbalk { flex-direction: column; align-items: stretch; }
  .werkbalk-rechts { border-top: 1px solid var(--kleur-lijn); overflow-x: auto; scrollbar-width: none; }
  .weergavetabs { justify-content: space-between; }
}

/* Gsm */
@media (max-width: 699px) {
  :root { --zaal-rand: 12px; }
  .bovenbalk { gap: var(--ruimte-1); padding-left: 8px; padding-right: 4px; min-height: 56px; }
  .bovenbalk-links, .bovenbalk-walkin, .bovenbalk-nieuw, .themaknop { display: none; }
  .datumnavigatie { justify-content: flex-start; }
  .datumknop { padding: 0 var(--ruimte-2); font-size: var(--maat-l); }
  .datumknop-relatief { display: none; }
  .verbinding { padding: 0 4px; }
  .weergavetabs { display: none; }
  .werkbalk { padding: 0; }
  .werkbalk-rechts { border-top: 0; }
  .diensten { padding: var(--ruimte-2) var(--zaal-rand); gap: var(--ruimte-4); }
  .dienst { width: 150px; }
  .tabbalk {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--kleur-vlak); border-top: 1px solid var(--kleur-lijn);
  }
  .tabbalk-knop {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: var(--zaal-tabbalk); border: 0; background: transparent; color: var(--kleur-tekst-zacht);
    font-size: 0.6875rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .tabbalk-knop .icoon { width: 22px; height: 22px; }
  .tabbalk-knop[aria-current="page"] { color: var(--kleur-accent); }
  .tabbalk-knop[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--kleur-accent); }
  .tabbalk-knop .tab-aantal { position: absolute; top: 6px; left: 56%; min-width: 18px; height: 18px; font-size: 0.625rem; }
  .zwevend {
    display: flex; flex-direction: column; gap: var(--ruimte-2);
    position: fixed; z-index: 50; right: calc(12px + env(safe-area-inset-right));
    bottom: calc(var(--zaal-tabbalk) + 14px + env(safe-area-inset-bottom));
  }
  body[data-weergave="briefing"] .zwevend { display: none; }
  .zweefknop { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--kleur-lijn-sterk); background: var(--kleur-vlak); color: var(--kleur-tekst); box-shadow: var(--schaduw-hoog); cursor: pointer; }
  .zweefknop .icoon { width: 24px; height: 24px; }
  .zweefknop-nieuw { background: var(--kleur-accent); border-color: var(--kleur-accent); color: var(--kleur-accent-tekst); }
  .zweefknop-walkin { width: 48px; height: 48px; justify-self: center; margin-left: 4px; }

  .lijst-kop { padding: var(--ruimte-2) var(--zaal-rand); }
  .kwartier-kop { padding-left: var(--zaal-rand); }
  .rij {
    grid-template-columns: 4px 46px minmax(0, 1fr) 46px 104px;
    grid-template-rows: auto auto;
    grid-template-areas: "streep uur hoofd personen actie" "streep uur hoofd tafels actie";
    column-gap: var(--ruimte-2); padding-right: var(--zaal-rand); min-height: 66px;
  }
  .rij-uur { font-size: var(--maat-m); align-self: center; }
  .rij-naam { font-size: var(--maat-m); }
  .rij-personen { font-size: var(--maat-m); align-self: end; }
  .rij-personen .icoon { width: 14px; height: 14px; }
  .rij-tafels { font-size: var(--maat-s); align-self: start; }
  .rij-actie { padding: 0 var(--ruimte-2); }
  .reservatielijst { padding-bottom: 140px; }
  .rij .teken-label { display: none; }
  .tijdlijn-rij-geen .tijdlijn-tafelnaam { white-space: normal; font-size: var(--maat-xs); line-height: 1.2; }
  .zaalplan-balk { gap: var(--ruimte-1) var(--ruimte-3); }
  .zoomknoppen .knop:not(.knop-icoon) { display: none; }
  .tijdschuif-groep { flex-basis: 100%; }
  .zaalplan-vlak { padding: var(--ruimte-2); }
  .zaalplan-legende { padding-right: 76px; }
  .zoomknoppen { display: none; }
  .strook-hulp { display: none; }
  .samenvatting-hoofd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .samenvatting-blok:nth-child(3) { border-left: 0; }
  .samenvatting-blok:nth-child(n + 3) { border-top: 1px solid var(--kleur-lijn); }
  .gastcijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gegevens { grid-template-columns: 112px minmax(0, 1fr); }
  .zoekresultaat { grid-template-columns: 88px 44px minmax(0, 1fr) 36px; }
  .zoekresultaat .status, .zoekresultaat > :last-child { display: none; }
  .pagina { padding-top: var(--ruimte-4); padding-bottom: 160px; gap: var(--ruimte-4); }
  .wachtende, .groepsaanvraag { padding: var(--ruimte-3) var(--ruimte-4); }
  .briefing-blok { padding: var(--ruimte-3) var(--ruimte-4); }
  .memo-formulier { flex-direction: column; align-items: stretch; }
  .historiek-rij { grid-template-columns: 84px 44px 40px minmax(0, 1fr); }
  .walkin-voorstellen { grid-template-columns: 1fr 1fr; }
  .paneel-voet .knop-hoofd { min-width: 120px; }
}

/* Afdrukken: de briefing als dagblad */
@media print {
  body.zaal { overflow: visible; background: #fff; color: #000; }
  .zaal-schil { display: block; height: auto; }
  .bovenbalk, .werkbalk, .tabbalk, .zwevend, .toasts, .niet-afdrukken, .sluier, .paneel { display: none !important; }
  .inhoud, .weergave, .weergave-hoofd { overflow: visible !important; height: auto !important; display: block !important; }
  .pagina { max-width: none; padding: 0; gap: 12px; }
  .briefing-blok, .briefing-cijfer { border-color: #999; background: #fff; }
  .briefing-raster { grid-template-columns: 1fr 1fr; }
  .briefing-rij { min-height: 0; padding: 2px 0; }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  .verbinding-stip, .opstarten-balk::after { animation: none !important; }
}