/* ============================================================
   Huisstijl Villa Oldenhoff (villaoldenhoff.nl)
   Afgelezen van de site: petrol #004B65 als inkt én primair vlak,
   duifblauw #91BFCD als accent, koel bijna-wit #F6FAFD als papier,
   witte kaarten, rechte hoeken en licht-gezette, ruim gespatieerde
   koppen. De site gebruikt nergens een schreefletter.

   Twee bewuste afwijkingen van de site, omdat dit een werkscherm is
   en geen etalage:
   1. Primaire knop = petrol met wit, niet duifblauw met wit. Dat
      laatste haalt ~1.9:1 contrast; onleesbaar voor een balie die er
      de hele dag op kijkt. Duifblauw is hier accent/actief-vlak.
   2. Statuskleuren (aankomst/vertrek/alarm) blijven semantisch
      onderscheidend. Alles petrol maken leest mooi en werkt niet.
   ============================================================ */
:root {
  --bg: #f6fafd;
  --surface: #ffffff;
  --surface-2: #eaf1f6;
  --ink: #004b65;
  --ink-soft: #5e7f8d;
  --line: #d6e3ea;
  --accent: #004b65;
  --accent-ink: #ffffff;
  --accent-soft: #91bfcd;
  --gold: #a17a4b;
  --arrival: #1f7a6a;
  --inhouse: #7a93a0;
  --departure: #c1743a;
  --danger: #b03a45;
  /* Rechte hoek is het sterkste merksignaal van de site (radius 0 op
     alles). Containers volgen dat; statusbadges blijven pil-vormig —
     die lezen als etiket, niet als vlak. */
  --radius: 0px;
  --shadow: 0 1px 2px rgba(0, 43, 60, 0.05), 0 8px 24px rgba(0, 43, 60, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #00232f;
    --surface: #013647;
    --surface-2: #054b60;
    --ink: #e8f1f5;
    --ink-soft: #9dbcc9;
    --line: #0b4e63;
    /* In het donker draait het duo om: duifblauw is dan het leesbare
       accent op petrol, precies andersom dan bij daglicht. */
    --accent: #91bfcd;
    --accent-ink: #00293a;
    --accent-soft: #91bfcd;
    --gold: #c9a26a;
    --arrival: #4fae99;
    --inhouse: #8ba7b4;
    --departure: #dd9a63;
    --danger: #e07681;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

/* --- Brand ---
   De site zet koppen in scala-sans, gewicht 400, met 3-4px spatiëring
   op 30-40px (≈0.1em). Let op de truc daar: de CSS zet
   `text-transform: lowercase`, maar scala-sans is een kapitalenvariant
   die die kleine letters als hoofdletters tekent — het netto beeld is
   dus égale kapitalen, niet onderkast. Met een systeemletter reproduceer
   je dat met `uppercase`; met `lowercase` zou hier letterlijk
   "oldenhoff" komen te staan.

   Bewust geen webfont: dit hangt aan de balie en op een muur-TV en moet
   niet op een externe request wachten. Het karakter zit in de spatiëring
   en het lichte gewicht, niet in de letter zelf. */
.brand-mark {
  font-family: inherit;
  font-weight: 400;
  font-size: 1em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Login --- */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-card .brand { text-align: center; margin-bottom: 4px; }
.login-card .brand-mark { display: block; font-size: 30px; color: var(--accent); }
.login-card .brand-sub { display: block; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.login-hint { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 0 0 4px; }
#login-form input,
#login-form button {
  height: 46px;
  border-radius: 0;
  border: 1px solid var(--line);
  padding: 0 14px;
}
#login-form input { background: var(--surface-2); color: var(--ink); }
#login-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#login-form button {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
#login-form button:hover { filter: brightness(1.05); }

/* --- Topbar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-brand { display: flex; flex-direction: column; line-height: 1.1; }
.topbar-brand .brand-mark { font-size: 20px; color: var(--accent); }
.property { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; }
.tabs { display: flex; gap: 2px; margin-left: 8px; flex: 1; overflow-x: auto; }
/* De sitenavigatie is vlak: gespatieerde kapitalen, geen gevulde blokjes.
   Actief markeren we met een streep onder het woord in plaats van een
   vlak — dat past bij de rechte, rustige opzet en scheelt visuele ruis
   in een balk die al zeven items telt. */
.tab {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  padding: 8px 12px;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.tab.disabled { opacity: 0.4; cursor: not-allowed; }
.tab.disabled:hover { color: var(--ink-soft); }
.logout {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 0;
  padding: 8px 12px;
}
.logout:hover { color: var(--ink); }

/* --- Content --- */
.content { max-width: 960px; margin: 0 auto; padding: 24px 20px 64px; }
.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
/* Schermtitel krijgt de merkbehandeling (kapitalen, 0.11em ≈ de 4px-op-40px
   van de site, gewicht 400); de data eronder juist niet — zulke spatiëring
   leest prettig op één woord ("VANDAAG") en beroerd op een tabel vol namen
   en tijden. */
.view-head h1 {
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.date-nav { display: flex; align-items: center; gap: 6px; }
.date-nav button {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 0;
  color: var(--ink);
  font-size: 18px;
}
.date-nav .ghost { width: auto; padding: 0 12px; font-size: 14px; color: var(--ink-soft); }
.date-nav input {
  height: 38px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 0;
  padding: 0 10px;
}

/* --- Weergaveschakelaar op Vandaag ---
   Bewust een segmented control en geen tweede rij tabbladen: dit kiest niet
   een ander onderwerp maar een andere snit door hetzelfde onderwerp. */
.view-modes {
  display: flex; gap: 2px; margin: -6px 0 16px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 0; padding: 3px; width: fit-content;
  max-width: 100%; overflow-x: auto;
}
.vm {
  border: none; background: transparent; color: var(--ink-soft);
  padding: 7px 14px; border-radius: 0; font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
}
.vm:hover { color: var(--ink); }
/* Hier komt duifblauw wél als vlak terug: petrol-op-duifblauw haalt ruim
   4.5:1, en dit is de plek waar de site-kleur het meest herkenbaar is. */
.vm.active { background: var(--accent-soft); color: #004b65; font-weight: 600; }

/* Weergaveknoppen links, vouwknop rechts: twee soorten keuze op één regel, maar niet
   in dezelfde groep — de ene kiest wát je ziet, de andere hoevéél. */
.today-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.today-controls .view-modes { margin: 0; }
.fold-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
.fold-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Compacte boekingen: alleen kamer, gast en tijd. Eén kaart-template, de velden die
   in deze stand niets toevoegen vallen hier weg — twee losse templates zouden een keer
   uit elkaar lopen en dan mist de compacte weergave stilletjes een waarschuwing.
   De kamer-waarschuwing (.alert-tag) blijft daarom bewust wél staan. */
.rows.compact .card, .groups.compact .card { padding: 9px 14px; }
/* `:not(.unfolded)` i.p.v. losse regels om alles terug te zetten: één kaart open
   klikken hoeft dan geen enkele display-waarde te herstellen, en er kan er ook geen
   één vergeten worden. Zie de klikhandler in bindArrivalCards(). */
.rows.compact .card:not(.unfolded) .meta,
.rows.compact .card:not(.unfolded) .notes,
.rows.compact .card:not(.unfolded) .eta-field,
.rows.compact .card:not(.unfolded) .tag.diet,
.rows.compact .card:not(.unfolded) .guest-details,
.groups.compact .card:not(.unfolded) .meta,
.groups.compact .card:not(.unfolded) .notes,
.groups.compact .card:not(.unfolded) .eta-field,
.groups.compact .card:not(.unfolded) .tag.diet,
.groups.compact .card:not(.unfolded) .guest-details { display: none; }
.rows.compact .card:not(.unfolded) .guest,
.groups.compact .card:not(.unfolded) .guest { font-size: 14.5px; }
/* Aanwijzen dat er iets te openen valt. Alleen in compacte stand: uitgeklapt is een
   klik alleen zinvol op een kaart mét gastdetails, en die heeft z'n eigen caret. */
.rows.compact .card, .groups.compact .card { cursor: pointer; }
.rows.compact .card.unfolded, .groups.compact .card.unfolded {
  padding: 14px;
  box-shadow: var(--shadow);
}

/* --- Gegroepeerde weergaven (Schoonmaak, Balie) --- */
.groups { display: flex; flex-direction: column; gap: 22px; }
.group-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 2px;
}
.group-count {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  background: var(--surface-2); border-radius: 999px; padding: 2px 8px;
}
.group-hint { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }

/* Schoonmaakkaarten: het venster is de kop, niet de gastnaam. */
.card.hk .hk-window { font-size: 14.5px; }
.card.hk .hk-window b { font-variant-numeric: tabular-nums; }
.card.hk.hk-turn .stripe { background: var(--departure); }
.card.hk.hk-out .stripe { background: var(--inhouse); }
.card.hk.hk-in .stripe { background: var(--arrival); }
.card.hk.hk-stay .stripe { background: var(--line); }

/* --- Summary chips --- */
.summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink-soft);
}
.chip b { font-size: 15px; color: var(--ink); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }

/* --- Rows --- */
.rows { display: flex; flex-direction: column; gap: 10px; }
.card {
  display: grid;
  grid-template-columns: 4px 84px 1fr auto;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 14px 0;
  overflow: hidden;
}
.card .stripe { grid-column: 1; align-self: stretch; background: var(--inhouse); }
.card.kind-arrival .stripe { background: var(--arrival); }
.card.kind-departure .stripe { background: var(--departure); }
/* Kamernummer is data, geen kop: strak, tabellarisch, geen spatiëring.
   De cel is niet altijd een nummer — Mews levert "Niet toegewezen" als
   er geen kamer hangt, en dat woord past bij geen enkel leesbaar corps
   in deze kolom van 84px. Daarom hier afbreken i.p.v. over de gastnaam
   heen lopen. Zie de notitie in README/commit: de nettere oplossing is
   dat label in app.js een eigen (kleinere) klasse geven. */
.card .room {
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 0;
  line-height: 1.15;
  /* hyphens werkt hier omdat <html lang="nl"> gezet is: "Niet toege-wezen"
     leest als een bewuste afbreking, waar een kale breuk als een bug leest.
     overflow-wrap blijft als vangnet staan voor een label zonder afbreekpunt. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
.card .room small { display: block; font-family: inherit; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.card .main .guest { font-weight: 600; font-size: 15px; }
.card .main .meta { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.card .main .notes { font-size: 12.5px; color: var(--gold); margin-top: 4px; }
.card .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-right: 4px; }
.badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge.arrival { background: color-mix(in srgb, var(--arrival) 16%, transparent); color: var(--arrival); }
.badge.inhouse { background: color-mix(in srgb, var(--inhouse) 18%, transparent); color: var(--inhouse); }
.badge.departure { background: color-mix(in srgb, var(--departure) 16%, transparent); color: var(--departure); }
.badge.checkedin { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.time { font-size: 13px; color: var(--ink-soft); }
.time b { color: var(--ink); }

.empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }
.error { color: var(--danger); font-size: 14px; }

/* --- Vergaderingen-mini op Vandaag --- */
.today-meetings {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 16px; margin-bottom: 18px;
}
.mini-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 8px;
}
.mini-row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.mini-row:first-of-type { border-top: none; }
.mini-time { font-weight: 600; color: var(--accent); white-space: nowrap; }
.mini-space { font-weight: 600; }
.mini-org { color: var(--ink-soft); margin-left: auto; white-space: nowrap; }

/* --- VIP + dieet --- */
.badge.vip { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.tag.diet {
  display: inline-block; margin-top: 4px;
  font-size: 12.5px; color: var(--departure);
  background: color-mix(in srgb, var(--departure) 12%, transparent);
  border-radius: 0; padding: 2px 8px;
}

/* --- Uitklapbare gastkaart --- */
.card.expandable { cursor: pointer; }
.card.expandable .guest { display: flex; align-items: center; gap: 6px; }
.expand-caret { font-size: 11px; color: var(--ink-soft); transition: transform 0.15s; }
.card.open .expand-caret { transform: rotate(180deg); }
.guest-details {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--ink-soft);
}
.guest-details a { color: var(--accent); }

/* --- Ratio in de chips (zelfde vorm als de TV) --- */
.chip .den { color: var(--ink-soft); font-weight: 600; margin-right: 2px; }

/* --- Kamer niet toegewezen: het enige harde alarm --- */
.tag.alert-tag {
  display: inline-block; margin-top: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-radius: 0; padding: 2px 8px;
}
.card.alert .stripe { background: var(--danger); }

/* --- Verwachte aankomst (eigen data) --- */
.eta-field {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft);
}
.eta-input {
  height: 30px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); border-radius: 0; padding: 0 8px; font-size: 13px;
  text-transform: none; letter-spacing: normal;
}
.eta-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.eta-input.saved { border-color: var(--accent); }

/* --- Ontbijt-rijen --- */
.card.bf { align-items: stretch; }
.card.bf.on .stripe { background: var(--accent); }
.card.bf .main { padding: 2px 0; }
.bf-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  margin-top: 8px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field.grow { flex: 1; min-width: 160px; }
.field input {
  height: 36px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 0;
  padding: 0 10px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.bf-persons { width: 74px; }
.bf-time { width: 110px; }

/* Velden pas tonen als de kamer ontbijt neemt. De klasse .on staat al op de
   kaart en wordt bij het omzetten van de schakelaar bijgewerkt, dus dit volgt
   vanzelf — geen extra JS. */
.bf-detail { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; flex: 1; }
.card.bf:not(.on) .bf-detail { display: none; }

/* --- Serviceschema ontbijt ---
   Staat boven de regels omdat dit de vraag is waar de keuken mee begint
   ("hoeveel om acht uur"), niet de kamer-voor-kamer-administratie eronder. */
.bf-slots {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: -6px 0 18px;
}
.bf-slot {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0; padding: 8px 13px;
}
.bf-slot-time {
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
.bf-slot-n { font-size: 17px; font-weight: 700; color: var(--gold); }
.bf-slot-lbl { font-size: 12px; color: var(--ink-soft); }
.bf-slot-rooms {
  font-size: 12px; color: var(--ink-soft);
  padding-left: 9px; margin-left: 2px; border-left: 1px solid var(--line);
}
/* Ontbijt aan, maar nog geen tijd: een openstaande vraag, geen tijdslot. */
.bf-slot-open { border-left-color: var(--danger); }
.bf-slot-open .bf-slot-n { color: var(--danger); }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .slider {
  width: 42px; height: 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  left: 2px; top: 2px;
  background: var(--ink-soft);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.switch input:checked + .slider { background: color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); background: var(--accent); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-label { font-size: 13px; font-weight: 600; color: var(--ink); }

.save-state { font-size: 11px; color: var(--ink-soft); min-height: 14px; }
.save-state.saving { color: var(--ink-soft); }
.save-state.saved { color: var(--accent); }
.save-state.err { color: var(--danger); }

@media (max-width: 560px) {
  .card.bf .side { grid-column: 2 / -1; }
}

/* --- Klokken --- */
.clockin { display: flex; gap: 10px; margin-bottom: 18px; }
.clockin input {
  flex: 1;
  max-width: 320px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 0;
  padding: 0 14px;
}
.clockin input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.clockin button {
  height: 44px;
  padding: 0 20px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 0;
  font-weight: 600;
}
.clockin button:hover { filter: brightness(1.05); }

.card.shift.on .stripe { background: var(--accent); }
.shift-icon { font-size: 18px; color: var(--inhouse); }
.card.shift.on .shift-icon { color: var(--accent); }
.clock-out-btn {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 0;
  padding: 8px 14px;
  font-weight: 600;
}
.clock-out-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* --- Zalen/MICE --- */
.card .mi-time { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 17px; font-weight: 600; }
.card .mi-time small { text-transform: uppercase; }

/* --- Identiteit --- */
.identity-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.identity-btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 0;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
}
.identity-btn:hover { border-color: var(--accent); color: var(--accent); }
.ghost-btn {
  border: none; background: transparent; color: var(--ink-soft);
  font-size: 13px; padding: 4px; align-self: center;
}
.ghost-btn:hover { color: var(--accent); }
.identity-add { display: flex; gap: 8px; }
.identity-add input {
  flex: 1; height: 42px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); border-radius: 0; padding: 0 12px;
}
.identity-add button {
  height: 42px; padding: 0 16px; border: none; background: var(--accent);
  color: var(--accent-ink); border-radius: 0; font-weight: 600;
}

/* --- Statuslampje bron (header) ---
   Groen is de rusttoestand en mag wegvallen; rood moet je zien. Daarom krijgt
   alleen "loopt achter" een achtergrond en vet — een altijd-opvallend lampje
   leert je het te negeren, en dan werkt het niet meer op de dag dat het telt. */
.source-light-wrap { position: relative; }
.source-light {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-soft); white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.source-light:hover { border-color: var(--line); }
.source-light .sl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-soft); flex: none;
}
.source-light .sl-text { overflow: hidden; text-overflow: ellipsis; }
.source-light.ok .sl-dot { background: var(--accent); }
.source-light.off .sl-dot { background: var(--ink-soft); }
.source-light.warn {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold); font-weight: 600;
}
.source-light.warn .sl-dot { background: var(--gold); }
.source-light.down {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger); font-weight: 600;
}
.source-light.down .sl-dot { background: var(--danger); }

/* Uitklappaneel: één lampje, maar wél alle bronnen op te vragen. Hoveren toont het,
   klikken zet het vast — de balie heeft een muis, het wandtablet niet. */
.source-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: min(340px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0; box-shadow: var(--shadow); padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 12.5px; color: var(--ink); white-space: normal; text-align: left;
}
.sp-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.sp-label { font-weight: 600; }
.sp-status { color: var(--ink-soft); justify-self: end; }
.sp-detail { grid-column: 1 / -1; color: var(--ink-soft); line-height: 1.45; }
.sp-row.sp-down .sp-status { color: var(--danger); font-weight: 600; }
.sp-row.sp-warn .sp-status { color: var(--gold); font-weight: 600; }

/* Op smalle schermen telt alleen de kleur — de tekst kost te veel breedte
   naast de tabs, en het lampje mag de navigatie niet wegdrukken. */
@media (max-width: 720px) {
  .source-light .sl-text { display: none; }
  .source-light { padding: 5px; }
}

/* --- Whoami-chip --- */
.whoami {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 13px; white-space: nowrap;
}
.whoami:hover { border-color: var(--accent); color: var(--accent); }

/* --- Dagbriefing ---
   Vuistregel voor warm vs. koel: grote vlakken blijven in de huisstijl,
   warm (--gold) is alleen voor kléine semantische markeringen (VIP,
   dieet, notitieregel). Dit blok is breed en staat bovenaan; in oker
   vocht het zichtbaar met het koele palet eronder. */
.daily-note {
  background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent-soft) 55%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 18px;
  color: var(--ink);
  white-space: pre-wrap;
  font-size: 14px;
}

/* Hier stond .source-note: het zinnetje "Gegevens uit Mews van 21:45" boven het
   dagoverzicht. Weg op 21-07 — het statuslampje in de header zegt hetzelfde, staat op
   élk scherm en is uitklapbaar. */

/* --- Klokken persoonlijk paneel --- */
.clock-me {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 18px;
}
.clock-me-name { font-size: 16px; }
.clock-big {
  border: none; background: var(--accent); color: var(--accent-ink);
  border-radius: 0; padding: 12px 24px; font-weight: 700; font-size: 15px;
}
.clock-big.out { background: var(--departure); }
.clock-big:hover { filter: brightness(1.05); }
.clock-me-hint { font-size: 13px; color: var(--ink-soft); }

/* --- Admin --- */
.admin-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px;
}
.admin-card h2 { font-size: 15px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 4px; }
.admin-hint { color: var(--ink-soft); font-size: 13px; margin: 0 0 12px; }
.admin-staff { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.staff-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 14px;
}
.staff-del {
  border: none; background: transparent; color: var(--ink-soft);
  font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.staff-del:hover { color: var(--danger); }
.admin-add { display: flex; gap: 8px; }
.admin-add input, .admin-row input, #admin-note {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  border-radius: 0; padding: 10px 12px; font-size: 14px;
}
.admin-add input { flex: 1; height: 42px; padding: 0 12px; }
#admin-note { width: 100%; resize: vertical; font-family: inherit; }
.admin-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.admin-add button, .admin-row button {
  height: 42px; padding: 0 18px; border: none; background: var(--accent);
  color: var(--accent-ink); border-radius: 0; font-weight: 600;
}

@media (max-width: 560px) {
  .card { grid-template-columns: 4px 64px 1fr; }
  .card .side { grid-column: 2 / -1; flex-direction: row; align-items: center; padding: 0 0 0 12px; }
  .topbar { flex-wrap: wrap; }
}

/* ===== Dag-tijdlijn =====
   De as is proportioneel: een gat van drie uur is drie keer zo hoog als een gat
   van een uur. Dat is het hele punt — je moet rust kunnen ZIEN, niet uitrekenen. */
.timeline { margin-bottom: 18px; }
.tl-canvas {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.tl-hour {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--line);
}
.tl-hour-label {
  position: absolute; left: 10px; top: -8px;
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); background: var(--surface); padding-right: 6px;
}

/* Nu-lijn: het enige accent dat dwars over de hele breedte loopt. */
.tl-now {
  position: absolute; left: 52px; right: 8px; height: 0;
  border-top: 2px solid var(--danger); z-index: 3;
}
.tl-now span {
  position: absolute; left: -34px; top: -9px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--danger); background: var(--surface); padding: 0 4px;
}

/* Een gat krijgt geen rand en geen vulling — het IS de leegte. Alleen een
   label in het midden, zodat je de uren niet hoeft te tellen. */
.tl-gap {
  position: absolute; left: 62px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.tl-gap span {
  font-size: 11.5px; color: var(--ink-soft); opacity: 0.75;
  letter-spacing: 0.04em;
  border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
  padding: 3px 12px;
}

.tl-block {
  position: absolute;
  box-sizing: border-box;
  padding: 6px 10px 7px 11px;
  margin-right: 8px;
  border-radius: 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--inhouse);
  background: var(--surface-2);
  overflow: hidden;
  z-index: 2;
}
.tl-time {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em; color: var(--ink-soft);
}
.tl-title { font-size: 13.5px; font-weight: 600; margin-top: 1px; }
.tl-sub { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.tl-note { font-size: 11px; color: var(--ink-soft); opacity: 0.8; margin-top: 3px; font-style: italic; }

.tl-arrival { border-left-color: var(--arrival); }
.tl-departure { border-left-color: var(--departure); }
.tl-breakfast { border-left-color: var(--gold); }
.tl-event { border-left-color: var(--accent); }
.tl-agenda { border-left-color: var(--inhouse); }

/* Beleidstijd i.p.v. echte tijd: gestippeld, want we weten het niet. */
.tl-policy { border-style: dashed; border-left-style: solid; background: transparent; }

.tl-alert {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

@media (max-width: 560px) {
  .tl-sub, .tl-note { display: none; }
  .tl-block { padding: 5px 8px; }
}

/* ===== Agenda (Google Calendar) =====
   Soort-herkenning is best effort (laag 2). Het onderscheid is daarom bewust rustig:
   een kleurstreep + label, nooit iets dat de letterlijke titel verdringt. Onherkende
   items (kind "other") krijgen geen streepkleur en vallen terug op de neutrale kaart. */
.card.ag-shift .stripe { background: var(--accent); }
.card.ag-breakfast .stripe { background: var(--gold); }
.card.ag-housekeeping .stripe { background: var(--inhouse); }
.card.ag-appointment .stripe { background: var(--departure); }
.card.ag-absence .stripe { background: var(--line); }

.badge.ag-shift { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.badge.ag-breakfast { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.badge.ag-housekeeping { background: color-mix(in srgb, var(--inhouse) 20%, transparent); color: var(--inhouse); }
.badge.ag-appointment { background: color-mix(in srgb, var(--departure) 16%, transparent); color: var(--departure); }
.badge.ag-absence { background: var(--surface-2); color: var(--ink-soft); }

/* Afwezigheid mag visueel wegvallen — het is bedoeld als achtergrondinformatie. */
.card.ag-absence .guest { color: var(--ink-soft); }

.ag-people { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }

/* ===== "Vandaag in huis" — dagbeeld uit de agenda =====
   Rustig gehouden: dit is context bij het dagoverzicht, geen actie. Daarom geen
   kaartranden en geen felle kleuren — één band met labels, zodat het oog eroverheen
   glijdt tenzij je het zoekt. */
.today-team {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
  padding: 0.7rem 0.9rem; margin-bottom: 0.75rem;
  background: var(--surface-2); border-radius: var(--radius);
  font-size: 13.5px;
}
.today-team .tt-part { display: flex; gap: 0.45rem; align-items: baseline; }
.today-team .tt-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft);
}
.today-team .tt-val { color: var(--ink); }
.today-team .tt-bf .tt-val { color: var(--gold); }
/* Afwezig is achtergrondinformatie: mag visueel wegvallen. */
.today-team .tt-away .tt-val { color: var(--ink-soft); }
.today-team .tt-tasks { flex-basis: 100%; }

.mi-grid:not(:empty) { margin-bottom: 18px; }

/* ===== Kolommen x uren-raster =====
   Gedeeld door de agenda-weekweergave (kolom = dag) en het zalenrooster
   (kolom = zaal). Zelfde vorm, dus het team hoeft maar één ding te lezen.
   Op smalle schermen horizontaal scrollen in plaats van omklappen naar een lijst:
   het raster IS de boodschap, en een week die je moet scrollen blijft een week. */
.agw-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.agw {
  min-width: 680px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.agw-row { display: grid; grid-template-columns: 52px repeat(7, 1fr); }
.agw-gutter {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); padding: 6px 6px 0 8px; text-align: right;
}
.agw-cell { border-left: 1px solid var(--line); min-width: 0; }

.agw-head .agw-cell {
  padding: 8px 6px; font-size: 12px; font-weight: 600;
  text-transform: capitalize; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.agw-head .agw-cell.agw-today { color: var(--accent); }
.agw-head .agw-gutter { border-bottom: 1px solid var(--line); }

/* Hele-dag-strook: één grid waarin balken over kolommen mogen lopen. De
   kolomlijnen liggen als eigen laag eronder (grid-row: 1/-1), zodat een
   meerdaagse balk er dwars overheen kan zonder ze te wissen. */
.agw-allday {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  gap: 3px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.agw-allday-gutter { grid-column: 1; grid-row: 1 / -1; padding-top: 7px; }
.agw-colline { grid-row: 1 / -1; border-left: 1px solid var(--line); min-height: 26px; }
.agw-colline.agw-today { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.agw-bar {
  font-size: 11px; line-height: 1.25;
  padding: 3px 6px; margin: 0 2px; border-radius: 0;
  background: var(--surface-2); border-left: 3px solid var(--inhouse);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  z-index: 1;
}

/* Vandaag krijgt een heel lichte kolomkleur — genoeg om 'm te vinden, te weinig
   om de blokken erin te overstemmen. */
.agw-cell.agw-today { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Het laatste uurlabel staat op de onderrand en wordt half omhoog geschoven —
   zonder deze ruimte valt de onderste helft buiten de kaart. */
.agw-row.agw-grid { padding-bottom: 10px; }
.agw-hours { position: relative; }
.agw-hour-label {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: 10px; font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.agw-daycol { position: relative; }
.agw-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.agw-block {
  position: absolute;
  font-size: 11px; line-height: 1.25;
  padding: 2px 5px; border-radius: 0;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-left: 3px solid var(--accent);
  overflow: hidden;
}
.agw-block b { font-variant-numeric: tabular-nums; }

/* Soortkleuren, gelijk aan de dagweergave zodat je niet hoeft te herleren. */
.agw-bar.ag-shift, .agw-block.ag-shift { border-left-color: var(--accent); }
.agw-bar.ag-breakfast, .agw-block.ag-breakfast { border-left-color: var(--gold); }
.agw-bar.ag-housekeeping, .agw-block.ag-housekeeping { border-left-color: var(--inhouse); }
.agw-bar.ag-appointment, .agw-block.ag-appointment { border-left-color: var(--departure); }
.agw-bar.ag-absence {
  border-left-color: var(--line); color: var(--ink-soft); background: transparent;
}

/* Weekweergave op de Agenda-tab: dagkoppen tussen de kaarten. */
.ag-day {
  font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--ink-soft); text-transform: capitalize;
  margin: 1.1rem 0 0.4rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
}
.ag-day:first-child { margin-top: 0; }
.ag-day.ag-today { color: var(--accent); border-bottom-color: var(--accent); }
.ag-day-empty { margin: 0 0 0.2rem; opacity: 0.5; }
.date-nav button.active { background: var(--accent); color: var(--accent-ink); }

/* --- Ontbijt: afwijking t.o.v. Mews + wie het noteerde --- */
/* Een boeking kan na jouw invoer nog wijzigen. Dat is geen fout, maar je moet het
   wél zien — daarom een knop en geen stille correctie: soms zijn 2 couverts
   afgesproken terwijl er 4 slapen, en dat mag een import niet overschrijven. */
.bf-sync {
  border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: var(--gold); border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 600; white-space: nowrap; align-self: flex-start;
}
.bf-sync:hover { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.bf-author { font-size: 11.5px; color: var(--ink-soft); flex-basis: 100%; }

/* --- Urenoverzicht (Klokken "Mijn uren" + Admin) --- */
.hours { display: flex; flex-direction: column; gap: 14px; }
.hours-period { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 2px; }
.hours-person {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.hours-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.hours-name { font-weight: 600; font-size: 15px; }
.hours-total { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.hours-row {
  display: grid; grid-template-columns: 7.5rem 1fr auto;
  gap: 10px; padding: 4px 0; font-size: 13.5px;
}
.hours-day { color: var(--ink-soft); }
.hours-times { font-variant-numeric: tabular-nums; }
.hours-dur { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
/* Een vergeten uitklok telt niet mee in het totaal — dus moet hij opvallen, anders
   verdwijnt een dienst stilletjes uit iemands week. */
.hours-open { color: var(--departure); font-weight: 600; }
.hours-note {
  margin-top: 8px; font-size: 12px; color: var(--departure);
  background: color-mix(in srgb, var(--departure) 10%, transparent);
  border-radius: 0; padding: 6px 9px;
}
@media (max-width: 560px) {
  .hours-row { grid-template-columns: 1fr auto; }
  .hours-day { grid-column: 1 / -1; }
}

/* --- Admin: weeknavigatie boven het urenoverzicht --- */
.admin-weeknav { margin-bottom: 14px; }
.admin-week-label {
  font-size: 14px; font-weight: 600; min-width: 9rem; text-align: center;
}