/* Declaraties-app — app-specifieke styling boven op /huisstijl/huisstijl.css.
   Houd dit bestand zo dun mogelijk: alleen wat de huisstijl niet biedt
   of wat afwijkt voor deze app. Gebruik altijd de huisstijl-tokens. */

/* ─── Spacing-schaal (4px-basis) ─────────────────────────────────────────
   De huisstijl levert kleur-, radius- en schaduw-tokens, maar geen
   spacing-schaal. We definiëren er hier één zodat alle marges en padding
   in deze app hetzelfde ritme volgen i.p.v. losse, net-niet-passende
   getallen. Dat is wat de layout rustig en consistent maakt. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* App-ritme: afgeleide tokens voor de twee meest herhaalde afstanden. */
  --gap-card: var(--space-5);  /* verticale afstand tussen kaarten/secties */
  --pad-card: var(--space-6);  /* binnenruimte van een kaart (desktop)     */
}

/* ─── Layout: topbar + main ─────────────────────────────────────────── */

main#app {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-10);
}

/* Login-mode: gradient-achtergrond, geen content-marges, full bleed */
body.login-mode {
  background:
    radial-gradient(circle at 20% 15%, rgba(134,199,157,.18), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(227,122,65,.12), transparent 45%),
    var(--creme);
}
body.login-mode main#app { max-width: none; padding: 0; margin: 0; }

header#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: max(env(safe-area-inset-top, 0px), 16px) max(env(safe-area-inset-right, 0px), 24px) 16px max(env(safe-area-inset-left, 0px), 24px);
  background: var(--ink);
  border-bottom: 3px solid var(--lichtgroen);
  position: sticky;
  top: 0;
  z-index: 10;
}

header#topbar .brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--oranje);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(227,122,65,.35);
  text-decoration: none;
}

header#topbar .brand-mark svg {
  width: 20px;
  height: 20px;
  stroke: var(--wit);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

header#topbar .brand {
  font-weight: 700;
  color: var(--wit);
  text-decoration: none;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

header#topbar nav {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
}

header#topbar nav a {
  color: rgba(244, 239, 231, 0.72);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  transition: color .15s var(--ease), background .15s var(--ease);
}

header#topbar nav a:hover { color: var(--wit); background: rgba(244,239,231,.08); }

header#topbar nav a.active {
  color: var(--wit);
  background: var(--oranje);
  box-shadow: 0 4px 14px rgba(227,122,65,.25);
}

/* ─── Linklike-knop (link-look, button-element) ─────────────────────── */
.linklike {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: .95rem;
  font-family: inherit;
  font-weight: 600;
  padding: 4px 6px;
  color: var(--ink-2);
  border-radius: 6px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.linklike:hover { color: var(--ink); background: rgba(19,52,43,.06); }

/* In de topbar (donkere achtergrond) is .linklike licht */
header#topbar .linklike { color: rgba(244, 239, 231, 0.72); }
header#topbar .linklike:hover { color: var(--wit); background: rgba(244,239,231,.08); }

/* ─── Card-helpers (declaraties-specifiek) ──────────────────────────── */
/* Standaard "page card": gewone .card maar met inhoud-padding ingebakken,
   zodat we niet bij elke pagina .card-body hoeven uit te schrijven. */
.card.card-padded { padding: var(--pad-card); }
.card.card-padded > h2:first-child,
.card.card-padded > h3:first-child { margin-top: 0; }

/* Marge tussen meerdere kaarten op één pagina */
.card + .card { margin-top: var(--gap-card); }

/* "Danger card" — voor onomkeerbare acties (zie admin-reset). */
.card.card-danger {
  background: var(--rood-licht);
  border-color: rgba(194, 59, 34, .35);
  padding: var(--pad-card);
}
.card.card-danger h2,
.card.card-danger h3 { color: var(--rood); margin-top: 0; }
.card.card-danger code {
  background: var(--wit);
  border: 1px solid rgba(194,59,34,.25);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 13px;
}

/* ─── Tabellen — app-conventie .table ───────────────────────────────── */
/* De huisstijl styled <table> direct, maar de app zet 'm graag in een
   witte kaart-achtige container. Daar geven we 'm hier een card-look. */
.table {
  background: var(--wit);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.table th, .table td { padding: 12px 16px; }
.table th { font-size: 11px; }
.table td { font-size: 14px; }

/* ─── Forms — kleine app-specifieke helpers ─────────────────────────── */
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Pagina-titel boven aan een view + verticaal ritme voor sectiekoppen.
   De paginatitel krijgt altijd dezelfde ademruimte naar de content eronder,
   in alle drie de varianten: losse <h1>, een <h1> ná een .eyebrow-kicker,
   en de .topline (kop + actieknop op één regel). */
main#app > h1:first-child { margin: 0 0 var(--space-7) 0; }
main#app > .eyebrow:first-child + h1 { margin: 0 0 var(--space-7); }
.topline { margin-bottom: var(--space-7); }
main#app h2 { margin: var(--space-7) 0 var(--space-3); }
main#app h3 { margin: var(--space-6) 0 var(--space-2); }

/* ─── Toast — centered onderaan (afwijking van huisstijl) ───────────── */
#toast.toast {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 24px;
  opacity: 0;
  transition: opacity .2s var(--ease);
  animation: none;
}
#toast.toast.show { opacity: 1; }

/* ─── Empty / loading-tekstjes (app-conventie .empty) ───────────────── */
.empty {
  padding: 32px;
  text-align: center;
  color: var(--ink-3);
  background: var(--wit);
  border: 1.5px dashed var(--rule);
  border-radius: var(--r-md);
}

/* ─── Tekst-utilities ───────────────────────────────────────────────── */
.text-danger { color: var(--rood); }
.text-right  { text-align: right; }

/* ─── Wizard (declaratie-nieuw) ─────────────────────────────────────── */
.wizard-stepper {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--gap-card);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wizard-step {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wit);
  border: 1.5px solid var(--rule);
  color: var(--ink-3);
}
.wizard-step.active {
  background: var(--ink);
  color: var(--wit);
  border-color: var(--ink);
}
.wizard-step.done {
  background: var(--lichtgroen);
  color: var(--ink);
  border-color: var(--lichtgroen);
}
.wizard-card { min-height: 240px; }
.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--gap-card);
}

/* ─── Bestand-grid (foto's / PDF tegels) ───────────────────────────── */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.file-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--wit);
  border: 1.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.file-tile-pdf {
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  padding: 8px;
  word-break: break-all;
}
.file-tile-pdf small { display: block; font-size: 10px; margin-top: 4px; }
.file-tile-add {
  cursor: pointer;
  color: var(--ink-3);
  border-style: dashed;
  font-size: 13px;
  flex-direction: column;
  gap: 4px;
}
.file-tile-add:hover { background: var(--creme); }
.file-tile-add-icon {
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
}
.file-tile-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(19, 52, 43, 0.85);
  color: var(--wit);
  border: 0;
  font-size: 18px;
  line-height: 22px;
  cursor: pointer;
  padding: 0;
}
.file-tile-link {
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
  font: inherit;
}
.file-tile-link:hover { border-color: var(--ink); }

.file-tile-zoom {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(19, 52, 43, 0.78);
  color: var(--wit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  pointer-events: none;
}

.file-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}

/* ─── Review-lijst (controle-stap, detail-pagina) ──────────────────── */
.review-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}
.review-list dt {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  align-self: center;
}
.review-list dd { margin: 0; align-self: center; }

/* ─── Audit/actie-log op detail-pagina ──────────────────────────────── */
.actie-log {
  list-style: none;
  padding: 0;
  margin: 0;
}
.actie-log li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.actie-log li:last-child { border-bottom: 0; }

/* ─── Preview-overlay (fullscreen foto-viewer) ──────────────────────── */
.preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 18, 14, 0.94);
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: max(env(safe-area-inset-top, 0px), 12px) 12px max(env(safe-area-inset-bottom, 0px), 12px) 12px;
  -webkit-tap-highlight-color: transparent;
  animation: preview-fade-in .15s ease-out;
}
@keyframes preview-fade-in { from { opacity: 0 } to { opacity: 1 } }

.preview-scroll {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pinch-zoom + pannen op mobile (native browser gesture) */
  touch-action: pinch-zoom pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}
.preview-image.zoomed {
  cursor: zoom-out;
}
.preview-scroll:has(.preview-image.zoomed) { cursor: grab; }

.preview-toolbar {
  position: absolute;
  bottom: max(env(safe-area-inset-bottom, 0px), 14px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  z-index: 1001;
}
.preview-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--wit);
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-btn:hover { background: rgba(255, 255, 255, 0.18); }
.preview-btn:active { background: rgba(255, 255, 255, 0.28); }
.preview-btn:focus-visible { outline: 2px solid var(--wit); outline-offset: 2px; }

.preview-level {
  color: var(--wit);
  font-size: 13px;
  font-weight: 600;
  min-width: 48px;
  text-align: center;
  padding: 0 4px;
  user-select: none;
}

.preview-close {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 12px);
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  color: var(--wit);
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 1001;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-close:hover { background: rgba(255, 255, 255, 0.28); }
.preview-close:focus-visible { outline: 2px solid var(--wit); outline-offset: 2px; }

.preview-caption {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 18px);
  left: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 500;
  max-width: calc(100% - 80px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1001;
  pointer-events: none;
}

/* ─── Mobile bijregelen (huisstijl pakt sidebar; topbar moet zelf) ──── */
@media (max-width: 640px) {
  header#topbar { padding: max(env(safe-area-inset-top, 0px), var(--space-3)) max(env(safe-area-inset-right, 0px), var(--space-4)) var(--space-3) max(env(safe-area-inset-left, 0px), var(--space-4)); gap: var(--space-3); }
  header#topbar .brand { font-size: 1.1rem; }
  header#topbar nav a { padding: 6px 10px; font-size: 0.95rem; }
  /* Iets ruimere, gelijke zijmarges; kaart-padding juist terug zodat de
     content op smalle schermen niet klem komt te zitten. */
  main#app { padding: var(--space-5) var(--space-4) var(--space-9); }
  .card.card-padded,
  .card.card-danger { padding: var(--space-5); }
  .table th, .table td { padding: 10px 12px; }
  .table th { font-size: 10px; }
  .table td { font-size: 13px; }
  .review-list { grid-template-columns: 1fr; gap: 2px 0; }
  .review-list dt { margin-top: var(--space-2); }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* === Install prompt =================================================== */

.install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #13342B;
  color: #F4EFE7;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 300ms ease-out;
  font-size: 14px;
}

.install-banner.visible {
  transform: translateY(0);
}

.install-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}

.install-banner-cta {
  background: #F4EFE7;
  color: #13342B;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  flex: 0 0 auto;
}
.install-banner-cta:hover { background: #fff; }
.install-banner-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.install-banner-later {
  background: transparent;
  color: #F4EFE7;
  border: 0;
  text-decoration: underline;
  font-size: 13px;
  padding: 8px 4px;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.85;
}
.install-banner-later:hover { opacity: 1; }
.install-banner-later:focus-visible {
  outline: 2px solid #F4EFE7;
  outline-offset: 2px;
}

.install-banner-close {
  background: transparent;
  color: #F4EFE7;
  border: 0;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.7;
}
.install-banner-close:hover { opacity: 1; }
.install-banner-close:focus-visible {
  outline: 2px solid #F4EFE7;
  outline-offset: 2px;
}

@media (max-width: 380px) {
  .install-banner-text { font-size: 13px; }
  .install-banner-cta { padding: 6px 10px; font-size: 13px; }
  .install-banner-later { display: none; }
}

/* iOS-instructie-overlay */
.install-ios-overlay {
  position: fixed;
  inset: 0;
  background: rgba(19, 52, 43, 0.92);
  color: #F4EFE7;
  z-index: 1100;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  font-size: 15px;
}

.install-ios-close {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.15);
  color: #F4EFE7;
  border: 0;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.install-ios-close:focus-visible {
  outline: 2px solid #F4EFE7;
  outline-offset: 2px;
}

.install-ios-content { margin-top: 24px; }

.install-ios-content h2 {
  font-size: 20px;
  margin: 0 0 16px;
}

.install-ios-steps {
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 16px 16px 40px;
  font-size: 15px;
  line-height: 1.6;
}
.install-ios-steps li { margin-bottom: 8px; }
.install-ios-steps li:last-child { margin-bottom: 0; }
.install-ios-steps small {
  display: block;
  opacity: 0.75;
  font-size: 12px;
  margin-top: 4px;
}

.install-ios-arrow-hint { padding-bottom: 60px; }

.install-ios-arrow {
  font-size: 40px;
  color: #FF6B35;
  animation: install-bounce 1s infinite;
  margin-bottom: 4px;
}

.install-ios-arrow-hint small {
  opacity: 0.85;
  font-size: 13px;
}

@keyframes install-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

body.install-overlay-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .install-banner { transition: none; }
  .install-ios-arrow { animation: none; }
}

/* === Dropzone (file upload) ============================================ */

.dropzone {
  position: relative;
  border: 2px dashed var(--lichtgroen);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  background: rgba(255, 255, 255, 0.5);
}

.dropzone:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--ink);
}

.dropzone:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.dropzone.drag-over {
  border-style: solid;
  border-color: var(--ink);
  background: rgba(19, 52, 43, 0.06);
  transform: scale(1.005);
}

.dropzone .dropzone-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}

.dropzone .dropzone-empty strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 16px;
}

.dropzone .dropzone-sub {
  color: var(--ink-3);
  font-size: 14px;
}

.dropzone .dropzone-filled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dropzone .dropzone-filled .dropzone-icon {
  margin-bottom: 0;
  font-size: 24px;
}

.dropzone .dropzone-filename {
  flex: 0 1 auto;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--ink);
}

.dropzone .dropzone-remove {
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--ink);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.dropzone .dropzone-remove:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--ink);
}

.dropzone .dropzone-remove:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dropzone { transition: none; }
  .dropzone.drag-over { transform: none; }
}

/* ─── Bestaande-gebruikers-tabel: gelijke, leesbare velden ───────────────
   De drie inline-bewerkbare velden (naam-input, rol-select, vestigingen-pil)
   krijgen dezelfde hoogte en vullen hun kolom, zodat de rij rustig oogt.
   Status-badge en de actieknoppen houden bewust hun eigen vorm. */
.users-table td input[type="text"],
.users-table td select,
.users-table .vestiging-summary {
  height: 40px;
  width: 100%;
}
.users-table td input[type="text"],
.users-table td select {
  padding: 0 14px;
}
.users-table .vestiging-summary {
  border-radius: var(--r-sm);
  padding: 0 12px;
  font-size: 14px;
}
/* Chevron naar rechts duwen, net als de dropdown-pijl van de rol-select. */
.users-table .vestiging-summary .chev { margin-left: auto; }

/* ─── Werkplek-sync voorstel: flex-rijen i.p.v. tabel ────────────────────
   Houdt het selectie-vinkje altijd direct naast de medewerker en de
   vestiging-vinkjes glued aan hun naam; loopt niet over op smal scherm. */
.ws-sectie { margin-top: 20px; }
.ws-sectie h3 { margin: 0 0 4px; }
.ws-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule);
}
.ws-row > .ws-pick { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.ws-row .ws-persoon { flex: 1 1 auto; min-width: 0; }
.ws-row .ws-naam { font-weight: 600; }
.ws-row .ws-vestigingen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  max-width: 52%;
}
.ws-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ws-chip input { width: auto; margin: 0; }
.ws-waarschuwing { font-size: 12px; color: var(--accent-warn, #a15c00); margin-top: 2px; }
@media (max-width: 640px) {
  .ws-row { flex-wrap: wrap; }
  .ws-row .ws-vestigingen {
    flex-basis: 100%;
    justify-content: flex-start;
    max-width: 100%;
    padding-left: 28px;
  }
}

/* ─── Gebruikers-admin: vestiging-samenvatting + grid-editor ───────────── */
.vestiging-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 4px 10px 4px 12px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.vestiging-summary:hover {
  background: var(--grijs-100);
  border-color: var(--rule-strong);
}
.vestiging-summary:focus-visible {
  outline: 2px solid var(--oranje);
  outline-offset: 2px;
}
.vestiging-summary .count { font-weight: 600; }
.vestiging-summary .sep {
  width: 1px;
  height: 12px;
  background: var(--rule);
}
.vestiging-summary .gk-count { color: var(--ink-2); }
.vestiging-summary .chev {
  color: var(--ink-3);
  font-size: 11px;
  margin-left: 2px;
}
.vestiging-summary.is-empty { color: var(--ink-3); }
.vestiging-summary.is-empty .count { font-weight: 500; }

.vestiging-editor {
  margin-top: 10px;
  background: var(--grijs-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 4px 0;
}
.vestiging-editor.v-editor-static {
  margin-top: 0;
  background: var(--wit);
}
.vestiging-editor .v-grid {
  display: grid;
  grid-template-columns: 1fr 110px 140px;
  align-items: center;
}
.vestiging-editor .v-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
}
.vestiging-editor .v-head:nth-child(2),
.vestiging-editor .v-head:nth-child(3) { text-align: center; }
.vestiging-editor .v-row { display: contents; }
.vestiging-editor .v-row > * {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.vestiging-editor .v-row:last-child > * { border-bottom: 0; }
.vestiging-editor .v-name {
  font-size: 14px;
  color: var(--ink);
}
.vestiging-editor .v-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vestiging-editor .v-cell input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--groen);
}
.vestiging-editor .v-cell input[type=checkbox]:disabled {
  cursor: not-allowed;
  opacity: .35;
}
.vestiging-editor .v-row.is-member { background: rgba(19,52,43,.025); }

/* Uitgeklapte detail-rij in tabel — grijze tint zodat het visueel bij elkaar hoort */
tr.expanded-detail { display: none; }
tr.expanded-detail.is-open { display: table-row; }
tr.expanded-detail > td {
  padding: 0 16px 16px;
  background: var(--grijs-50);
  border-top: 0;
}
tr.is-expanded > td { background: var(--grijs-50); }
tr.is-expanded .vestiging-summary {
  background: var(--wit);
  border-color: var(--rule-strong);
}
tr.is-expanded .vestiging-summary .chev {
  transform: rotate(180deg);
  display: inline-block;
}

@media (max-width: 720px) {
  .vestiging-editor .v-grid {
    grid-template-columns: 1fr 80px 100px;
  }
  .vestiging-editor .v-head,
  .vestiging-editor .v-row > * {
    padding: 8px 10px;
  }
}

/* ─── Draft-strip: onverzonden concept teruggevonden ─────────────────── */
.draft-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--gap-card);
  background: var(--oranje-50);
  border: 1px solid var(--oranje);
  border-radius: 8px;
}
.draft-strip-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.draft-strip-text strong { color: var(--ink); font-weight: 700; }
.draft-strip-text .muted { font-size: 13px; }
.draft-strip-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .draft-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .draft-strip-actions {
    justify-content: flex-end;
  }
}

/* ─── Admin alert banner (top-of-app) ───────────────────────────────── */
/* Alleen zichtbaar voor admin-users wanneer de OneDrive-koppeling
   problemen heeft. Staat boven de sticky topbar. */
.admin-alert-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px max(env(safe-area-inset-right, 0px), 20px) 10px max(env(safe-area-inset-left, 0px), 20px);
  font-size: 14px;
  line-height: 1.35;
  position: sticky;
  top: 0;
  z-index: 11;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.admin-alert-banner[data-tone="critical"] {
  background: var(--rood);
  color: var(--wit);
}
.admin-alert-banner[data-tone="warning"] {
  background: var(--oranje-50);
  color: var(--ink);
  border-bottom-color: var(--oranje);
}
.admin-alert-banner .admin-alert-text {
  flex: 1;
  min-width: 0;
}
.admin-alert-banner .admin-alert-text strong {
  font-weight: 700;
  margin-right: 6px;
}
.admin-alert-banner .admin-alert-link {
  flex-shrink: 0;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.admin-alert-banner[data-tone="critical"] .admin-alert-link {
  color: var(--wit);
}
.admin-alert-banner[data-tone="warning"] .admin-alert-link {
  color: var(--oranje-donker);
}
@media (max-width: 600px) {
  .admin-alert-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ─── Hamburger + slide-in drawer (mobile ≤640px) ───────────────────── */

.hamburger { display: none; background: none; border: 0; color: var(--creme, #F4EFE7); cursor: pointer; padding: 8px; margin-right: 4px; }
.hamburger svg { display: block; }

.drawer-overlay { position: fixed; inset: 0; background: rgba(19,52,43,.45); opacity: 0; transition: opacity .2s ease; z-index: 150; }
.drawer-overlay.open { opacity: 1; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 80%; max-width: 300px;
  background: var(--creme, #F4EFE7); border-right: 1px solid rgba(19,52,43,.12);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .2s ease, visibility .2s ease; z-index: 160; overflow-y: auto; padding: 12px 0;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-link { display: block; padding: 11px 18px; color: var(--ink, #13342B); text-decoration: none; font-weight: 600; font-size: 15px; }
.drawer-link:hover { background: rgba(19,52,43,.05); }
.drawer-link.active { color: var(--groen, #13342B); background: rgba(134,199,157,.25); box-shadow: inset 3px 0 0 var(--oranje, #E37A41); }
.drawer-group { margin-top: 6px; }
.drawer-group-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(19,52,43,.55); padding: 12px 18px 4px; }
.drawer-group .drawer-link { padding-left: 30px; }

@media (max-width: 640px) {
  header#topbar nav { display: none; }
  .hamburger { display: inline-flex; align-items: center; }
}