/* ── Geist (self-hosted, CSP-veilig — geen Google Fonts/CDN) ──
   square-ui-restyle (backofficev2). Variable woff2 uit het geist-pakket. */
@font-face {
  font-family: "Geist";
  src: url("/backofficev2/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("/backofficev2/assets/fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/backofficev2/assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* Iselmar Receptie — Cursor grey / light theme layer
   Loaded after style.css — overrides legacy beige/navy styling */

/* ── Tokens ── */
/* html[data-theme=...] (0,1,1) wint bewust van de tenant-CSS die het palet op
   :root (0,1,0) zet en ná dit bestand laadt. Een EXPLICIET gekozen thema gaat
   dus vóór de tenant-default. (Zonder deze hogere specificiteit overschreef
   /api/v1/theme/iselmar.css elk token hier → grey/light deden niets.) */
html[data-theme="grey"] {
  --type-scale: 1.2;
  --font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --success: #5fb487;
  --success-soft: rgba(95,180,135,.16);
  --warning: #e0913f;
  --warning-soft: rgba(224,145,63,.16);
  --danger: #e07a70;
  --danger-soft: rgba(224,122,112,.16);
  /* Iselmar lichtblauw accent (matcht webapp #47B8E2). */
  --accent: #47B8E2;
  --accent-hover: #6cc7ea;
  --accent-soft: rgba(71,184,226,.18);
  --bg: #0e0f0d;
  --panel: #181915;
  --surface: #24251f;
  --rail: #141511;
  --border: #2a2b26;
  --border-strong: #3a3b34;
  --text: #ededea;
  --text-muted: #a4a69d;
  --text-faint: #6c6e65;
  --nav-link: #a4a69d;
  --hover: #20211c;
  --active-bg: #24251f;
  --slot-booked: rgba(255,255,255,.06);
  --slot-booked-border: rgba(71,184,226,.55);
  --slot-booked-text: #D4D4D8;
  --modal-overlay: rgba(0,0,0,.55);
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  /* Restaurant status (muted, theme-aware) */
  --rest-peak: rgba(71,184,226,.16);
  --rest-hp: rgba(74,155,127,.16);
  --rest-hp-border: rgba(74,155,127,.35);
  --rest-req: rgba(184,147,90,.14);
  --rest-alacarte: rgba(78,139,201,.14);
  --rest-alacarte-border: rgba(78,139,201,.28);
  --rest-group: rgba(78,139,201,.12);
  --rest-confirmed: rgba(78,139,201,.1);
  --rest-confirmed-border: rgba(78,139,201,.22);
  --rest-cancelled: rgba(184,107,107,.14);
  --rest-seated: rgba(74,155,127,.18);
  --rest-done: rgba(255,255,255,.04);
  /* Legacy aliases */
  --beige: var(--bg);
  --white: var(--panel);
  --sky: var(--slot-booked);
  --teal: var(--accent);
  --navy: var(--text);
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --line-soft: var(--border);
  --accent-legacy: var(--accent);
  --terracotta: var(--accent);
}

html[data-theme="light"] {
  --type-scale: 1.2;
  --font: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  /* LIGHT palet (warm crème + Iselmar lichtblauw accent). */
  --accent: #2196C4;
  --accent-hover: #1b86ae;
  --accent-soft: rgba(71,184,226,.14);
  --success: #2f8f5b;
  --success-soft: rgba(47,143,91,.12);
  --warning: #c2620d;
  --warning-soft: #fbecdc;
  --danger: #c0453b;
  --danger-soft: rgba(192,69,59,.1);
  --bg: #f6f6f4;
  --panel: #ffffff;
  --surface: #eeeeec;
  --rail: #fbfbfa;
  --border: #ececea;
  --border-strong: #dcdcd6;
  --text: #1c1d1a;
  --text-muted: #5b5d57;
  --text-faint: #94968e;
  --nav-link: #5b5d57;
  --hover: #f4f4f2;
  --active-bg: #eeeeec;
  --slot-booked: #FFFFFF;
  --slot-booked-border: rgba(71,184,226,.6);
  --slot-booked-text: #1A1A1A;
  --modal-overlay: rgba(0,0,0,.4);
  --shadow: 0 8px 24px rgba(0,0,0,.12);
  --rest-peak: rgba(71,184,226,.11);
  --rest-hp: rgba(5,150,105,.1);
  --rest-hp-border: rgba(5,150,105,.28);
  --rest-req: rgba(217,119,6,.1);
  --rest-alacarte: rgba(78,139,201,.1);
  --rest-alacarte-border: rgba(78,139,201,.25);
  --rest-group: rgba(78,139,201,.08);
  --rest-confirmed: rgba(78,139,201,.08);
  --rest-confirmed-border: rgba(78,139,201,.2);
  --rest-cancelled: rgba(220,38,38,.08);
  --rest-seated: rgba(5,150,105,.12);
  --rest-done: rgba(0,0,0,.04);
  --beige: var(--bg);
  --white: var(--panel);
  --sky: var(--surface);
  --teal: var(--accent);
  --navy: var(--text);
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --line-soft: var(--border);
  --terracotta: var(--accent);
}

/* ── Global ── */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-feature-settings: "cv05" 1, "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

/* Geen blauw/grijs tap-vierkant bij aanraken (iPad/Safari/Chrome) — overal weg. */
* { -webkit-tap-highlight-color: transparent !important; }

*:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

/* ── Login (grey / light backoffice) ── */
.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 32px;
  background: var(--bg) !important;
  position: relative;
  overflow: hidden;
}
.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-soft), transparent 55%),
    radial-gradient(circle at 100% 100%, var(--hover), transparent 40%);
  opacity: 0.9;
}
.login-layout {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.login-logo {
  height: 28px !important;
  width: auto !important;
  margin: 0 !important;
  display: block;
  flex-shrink: 0;
}
.login-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.login-brand-eyebrow {
  font-family: var(--font) !important;
  font-size: calc(10px * var(--type-scale, 1.2)) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
}
.login-brand-title {
  font-family: var(--font) !important;
  font-size: calc(15px * var(--type-scale, 1.2)) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}
.login-theme-seg {
  margin: 0 !important;
  flex-shrink: 0;
}
.login-card {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  padding: 24px 22px 22px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
}
.login-card-head {
  margin-bottom: 20px;
}
.login-title {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: calc(22px * var(--type-scale, 1.2)) !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 6px !important;
  text-align: left !important;
}
.login-sub {
  color: var(--text-muted) !important;
  font-size: calc(13px * var(--type-scale, 1.2)) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  text-align: left !important;
}
.login-form {
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.login-form .field > span {
  font-family: var(--font) !important;
  font-size: calc(11px * var(--type-scale, 1.2)) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
}
.login-form .field > input {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: calc(13px * var(--type-scale, 1.2)) !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  -webkit-appearance: none;
  appearance: none;
}
.login-form .field > input::placeholder {
  color: var(--text-faint) !important;
  opacity: 1;
}
.login-form .field > input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
  outline: none !important;
}
.login-submit {
  margin-top: 4px !important;
  width: 100% !important;
  padding: 11px 16px !important;
  cursor: pointer;
}
.login-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}
.login-err, .form-err {
  background: var(--danger-soft) !important;
  border: 1px solid rgba(184,107,107,.25) !important;
  color: var(--danger) !important;
  border-radius: 6px !important;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
  font-family: var(--font) !important;
  padding: 10px 12px !important;
  margin: 0 !important;
}
[data-theme="light"] .login-err,
[data-theme="light"] .form-err {
  border-color: rgba(220,38,38,.2) !important;
}
.login-foot {
  margin: 0;
  text-align: center;
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
@media (max-width: 420px) {
  .login-top {
    flex-direction: column;
    align-items: stretch;
  }
  .login-theme-seg {
    align-self: flex-start;
  }
}

/* ── Form fields (app-wide) ── */
.field > span {
  font-family: var(--font) !important;
  font-size: calc(11px * var(--type-scale, 1.2)) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
}
.field > input, .field > select, .field > textarea {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: calc(13px * var(--type-scale, 1.2)) !important;
}
.field > input:focus, .field > select:focus, .field > textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
  outline: none !important;
}
.form-err {
  background: var(--danger-soft) !important;
  border: 1px solid rgba(184,107,107,.25) !important;
  color: var(--danger) !important;
  border-radius: 6px !important;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
}

/* ── Buttons ── */
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  font-size: calc(13px * var(--type-scale, 1.2)) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  padding: 10px 16px !important;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover) !important; }
/* Primaire knoppen = Iselmar-groen accent (Claude Design handoff). */
[data-theme] .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
}
/* Dark thema: donkere tekst op het lichtere groen (handoff-spec). */
[data-theme="grey"] .btn-primary { color: #0e0f0d !important; }
[data-theme] .btn-primary:hover:not(:disabled) { background: var(--accent-hover) !important; }
.btn-ghost, .bl-btn-secondary {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
  padding: 8px 12px !important;
  cursor: pointer;
}
.btn-ghost:hover, .bl-btn-secondary:hover { background: var(--hover) !important; color: var(--text) !important; }
.btn-danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(184,107,107,.25) !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
  padding: 8px 12px !important;
  cursor: pointer;
}

/* ── Shell ── */
.app-shell {
  background: var(--bg) !important;
  padding-bottom: 64px !important;
}
@media (min-width: 1100px) {
  .app-shell { padding-bottom: 0 !important; }
}

.app-body {
  min-height: 100vh;
}
@media (min-width: 1100px) {
  .app-body { flex-direction: row !important; }
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
/* Desktop: zwevende afgeronde "kaart" met ruimte eromheen, i.p.v. een
   vastgeplakte kolom tegen de rand. */
@media (min-width: 1100px) {
  .app-sidebar {
    width: 196px;
    flex-shrink: 0;
    margin: 12px;
    border: 1px solid var(--border);
    /* Linkerhoeken scherper (ronding begint later), rechts ronder. */
    border-radius: 9px 16px 16px 9px;
    box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 30px rgba(0,0,0,.05);
    height: calc(100vh - 24px);
    position: sticky;
    top: 12px;
    align-self: flex-start;
    overflow: hidden;
  }
}

.sidebar-head {
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--border);
}
/* Sidebar-merk (zwart ISELMAR-logo op witte achtergrond, geen alpha).
   We gebruiken blend-modes zodat de witte achtergrond wegvalt én het logo
   meekleurt met het thema:
   - Light: multiply → wit verdwijnt op het lichte paneel, zwart logo blijft.
   - Dark:  invert(1) maakt het logo wit; screen → zwart verdwijnt op het
            donkere paneel, wit logo blijft. */
.sidebar-logo {
  height: 34px; width: auto; display: block; margin: 2px auto 16px;
}
/* Donker thema: gebruik de witte logo-variant i.p.v. de blauwe-op-wit. */
html[data-theme="grey"] .sidebar-logo {
  content: url(./iselmar-logo-white.png?v=2);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sidebar-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 600;
  letter-spacing: .03em;
}
.sidebar-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sidebar-user strong {
  font-size: calc(13px * var(--type-scale, 1.2));
  font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user span {
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-faint);
}

/* Sidebar-voet: thema-toggle + uitloggen, onderaan de zwevende kaart. */
/* Voet = alleen de minimalistische thema-toggle (donker/licht), links. */
.sidebar-foot {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.theme-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.theme-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  cursor: pointer;
}
.theme-seg-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.theme-seg-btn:last-child { border-right: none; }
.theme-seg-btn.is-active { background: var(--active-bg); color: var(--text); }
.theme-seg-btn:not(.is-active):hover { color: var(--text); }
/* In de sidebar-voet: icoon-only mini-toggle (login houdt z'n tekstknoppen). */
.sidebar-foot .theme-seg-btn { width: 38px; height: 30px; padding: 0; gap: 0; }

/* Uitloggen: minimalistisch icoon-knopje, rechts naast de gebruiker. */
.app-logout {
  flex-shrink: 0;
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.app-logout svg { width: 16px; height: 16px; flex-shrink: 0; }
.app-logout:hover { background: var(--surface); color: var(--text); }

.nav-label {
  display: block;
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  padding: 16px 12px 6px;
}
.nav-divider {
  display: none;
}

/* Module nav */
.module-nav {
  background: transparent !important;
  border: none !important;
  padding: 4px 8px 12px !important;
  gap: 2px !important;
  flex: 1;
  overflow-y: auto;
}
@media (min-width: 1100px) {
  .module-nav {
    flex: 1;
    width: 100% !important;
    max-height: none !important;
    position: static !important;
    top: auto !important;
  }
}
.module-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--nav-link) !important;
  font-family: var(--font) !important;
  font-weight: 400 !important;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
  letter-spacing: normal !important;
  padding: 8px 10px !important;
  text-align: left !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100%;
}
.module-btn + .module-btn { border-left: none !important; }
.module-btn:hover:not(.is-active) {
  background: var(--hover) !important;
  color: var(--text) !important;
}
.module-btn.is-active {
  background: var(--active-bg) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  border: none !important;
}
.module-btn.is-active .module-ico { color: var(--text) !important; }
.module-ico { width: 16px !important; height: 16px !important; opacity: .85; }
@media (max-width: 1099px) {
  .module-ico { display: block !important; }
  /* De nav zit < 1100px in een VERTICALE off-canvas drawer (.app-sidebar), niet
     in de oude horizontale tab-bar. Dus verticale lijst zoals op desktop — geen
     horizontale row (die brak de drawer: lege ruimte + verborgen items). */
  .module-nav {
    flex-direction: column !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
  }
  .module-btn {
    width: 100% !important;
    justify-content: flex-start !important;
    white-space: nowrap;
    flex: 0 0 auto !important;
  }
}

/* Topbar + content */
.app-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.app-topbar {
  padding: 8px 12px;
  border-bottom: none;
  background: var(--bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar-toggle svg { width: 18px; height: 18px; }
.sidebar-toggle:hover { background: var(--hover); color: var(--text); }
@media (min-width: 1100px) {
  .sidebar-toggle { display: none; }
}
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17,17,19,.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 850;
}
@media (min-width: 1100px) {
  .sidebar-backdrop { display: none !important; }
}
@media (max-width: 1099px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: min(280px, 88vw);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .22s ease;
    border-right: 1px solid var(--border);
    border-bottom: none;
    overflow-y: auto;
  }
  .app-sidebar.is-open { transform: translateX(0); }
}
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  cursor: pointer;
}
.cmd-trigger svg { width: 14px; height: 14px; flex-shrink: 0; }
.cmd-trigger:hover { background: var(--hover); color: var(--text); border-color: var(--border-strong); }
.cmd-trigger-label { display: none; }
@media (min-width: 640px) {
  .cmd-trigger-label { display: inline; }
}
.cmd-kbd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: calc(10px * var(--type-scale, 1.2));
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-faint);
  background: var(--bg);
  line-height: 1.2;
}
.datum-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.datum-arrow {
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  border-radius: 6px !important;
  padding: 6px !important;
  cursor: pointer;
}
.datum-arrow:hover { background: var(--hover) !important; color: var(--text) !important; }
.datum-arrow svg { width: 16px; height: 16px; }

.act-tabs {
  padding: 8px 12px !important;
  gap: 4px !important;
  background: var(--bg) !important;
  border-bottom: none !important;
}
.act-tab {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  font-family: var(--font) !important;
  font-size: calc(11px * var(--type-scale, 1.2)) !important;
  font-weight: 500 !important;
  cursor: pointer;
}
.act-tab.is-active {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
}

.app-main {
  flex: 1;
  overflow: auto;
  padding: 12px !important;
  background: var(--bg) !important;
}

/* Loading */
.loading { color: var(--text-muted) !important; font-size: calc(13px * var(--type-scale, 1.2)) !important; }
.loading p { font-family: var(--font) !important; }
.spin {
  border-color: var(--border) !important;
  border-top-color: var(--accent) !important;
}

/* Toast */
.iv-toast {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  font-family: var(--font) !important;
  font-size: calc(13px * var(--type-scale, 1.2)) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
}
.iv-toast[data-type="error"] { background: var(--danger-soft) !important; color: var(--danger) !important; border-color: rgba(184,107,107,.3) !important; }
.iv-toast[data-type="success"] { background: var(--success-soft) !important; color: var(--success) !important; }
.iv-toast[data-type="warning"] { background: var(--warning-soft) !important; color: var(--warning) !important; }

/* ── Activiteiten grids ── */
.act-section {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}
.act-section-head {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.act-section-title {
  font-family: var(--font) !important;
  font-size: calc(13px * var(--type-scale, 1.2)) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
}
.act-settings-btn, .act-beheer-link {
  border: none;
  background: transparent;
  color: var(--accent);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
}
.act-beheer-link:hover { text-decoration: underline; }

/* Icoon-acties rechtsboven in de activiteit-kop: slotje (blokkades) + tandwiel
   (instellingen). Vervangt de oude tekst-link "Beheer →" en de globale
   "Blokkades beheren"-knop. */
.act-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.act-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Touch-vriendelijke hit-area (iPad-receptie): 40px op touch, 30px op
     desktop (muis) waar precisie groter is. */
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
@media (min-width: 1100px) {
  .act-icon-btn { width: 30px; height: 30px; }
}
.act-icon-btn:hover {
  background: var(--surface) !important;
  color: var(--text) !important;
}
.act-icon-btn svg { display: block; }
/* Slotje actief = blokkades-modus aan → duidelijk gemarkeerde chip. */
.act-lock-btn.is-active {
  background: var(--active-bg) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

.banen-grid, .ag-grid {
  background: transparent !important;
  border: none !important;
}
/* Edge-padding rond de tegels — bij Adventuregolf zorgt .ag-slots (padding:
   10px 12px) al voor lucht aan de randen; de banen-grid (bowling/tennis/squash)
   plaatst cellen direct in het grid zonder rand-padding, waardoor tegels tegen
   de rand plakken. Zelfde lucht toevoegen zodat het consistent oogt. */
.banen-grid { padding: 8px !important; }
.banen-cell {
  font-family: var(--font) !important;
  font-size: calc(11px * var(--type-scale, 1.2)) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  min-height: 36px !important;
  padding: 8px 6px !important;
}
/* Kop- en tijd-labels als platte tekst (zoals Adventuregolf's .ag-tijd) i.p.v.
   een gevuld surface-vlak. */
.banen-cell.banen-hed, .banen-cell.banen-tijd {
  background: transparent !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  font-family: var(--font) !important;
}
/* Vrije baan-cel = schone gevulde "chip" — identiek aan Adventuregolf's
   .ag-slot: subtiele vulling, GEEN gestreepte rand, afgeronde hoeken; hover
   licht iets op. */
.banen-cell.banen-vrij {
  background: var(--panel) !important;
  color: var(--text) !important;
  font-size: calc(11px * var(--type-scale, 1.2)) !important;
  font-weight: 500 !important;
  border: 1px solid var(--border) !important;
  margin: 2px;
  border-radius: var(--radius-sm);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}
.banen-cell.banen-vrij:hover {
  background: var(--hover) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}
.banen-cell.banen-geboekt {
  background: var(--slot-booked) !important;
  color: var(--slot-booked-text) !important;
  border: 1px solid var(--slot-booked-border) !important;
  font-weight: 500 !important;
  font-size: calc(11px * var(--type-scale, 1.2)) !important;
  margin: 2px;
  border-radius: 5px;
}
.banen-cell.banen-geboekt:hover {
  background: var(--active-bg) !important;
  box-shadow: none !important;
}
.banen-cell.banen-blok {
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(184,147,90,.25) !important;
}
.banen-cell.banen-vol, .banen-cell.banen-empty-cell {
  color: var(--text-faint) !important;
  opacity: .5;
}
.banen-cell.is-selected, .ag-slot.is-selected {
  box-shadow: none !important;
}

.ag-row { border-color: var(--border) !important; }
.ag-tijd {
  background: transparent !important;
  font-family: var(--font) !important;
  font-size: calc(11px * var(--type-scale, 1.2)) !important;
  color: var(--text-muted) !important;
}
/* Schone gevulde "chips": subtiele vulling, GEEN harde rand → nette tegels
   zonder hokjes-look. Hover licht iets op. Status-slots houden hun kleur. */
.ag-slot {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font) !important;
  font-size: calc(10px * var(--type-scale, 1.2)) !important;
  font-variant-numeric: tabular-nums;
  color: var(--text) !important;
}
.ag-slot:hover:not(.geboekt):not(.vol):not([disabled]):not(.geblokkeerd) {
  background: var(--hover) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}
.ag-slot.geboekt {
  background: var(--slot-booked) !important;
  color: var(--slot-booked-text) !important;
  border-color: var(--slot-booked-border) !important;
  font-weight: 500 !important;
}
.ag-slot.vol { opacity: .4; }
/* Tijdelijke hold (gast nu online aan het boeken): amber + streepjesrand, vol
   zichtbaar (niet gedimd zoals 'vol'), zodat de receptie ziet dat het slot zo
   weer vrij kan komen. */
.ag-slot.vastgehouden {
  opacity: 1 !important;
  background: var(--warning-soft, rgba(217,119,6,0.16)) !important;
  color: var(--warning, #D97706) !important;
  border: 1px dashed var(--warning, #D97706) !important;
}
/* Zelfde hold-markering voor de timeline-slots (tennis/squash) en de banen-cellen (bowling). */
.tl-slot.is-vastgehouden {
  opacity: 1 !important;
  background: var(--warning-soft, rgba(217,119,6,0.22)) !important;
  border: 1px dashed var(--warning, #D97706) !important;
}
.banen-cell.banen-vol.vastgehouden {
  opacity: 1 !important;
  background: var(--warning-soft, rgba(217,119,6,0.16)) !important;
  color: var(--warning, #D97706) !important;
  border-color: var(--warning, #D97706) !important;
}
.ag-slot.geblokkeerd { background: var(--warning-soft) !important; color: var(--warning) !important; }
/* Over-uur doorlopende boeking: vlakke + gestreepte rand aan de doorloop-kant. */
.ag-slot.geboekt.cont-r { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
  border-right-style: dashed !important; border-right-color: var(--accent) !important; }
.ag-slot.geboekt.cont-l { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
  border-left-style: dashed !important; border-left-color: var(--accent) !important; }
/* Doorloop-pijl (⤴) 45° met de klok mee gedraaid. */
.ag-cont-arrow { display: inline-block; transform: rotate(90deg); }
.ag-cont-arrow-r { display: inline-block; }

/* Blokkades toolbar */
.blokkeer-toolbar {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 10px !important;
}

/* ── Activiteiten KPI-vakje (rechts, net als "Context vandaag") ── */
.act-kpis {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 12px;
}
.act-kpis-title {
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 4px;
}
.act-kpi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.act-kpi:first-of-type { border-top: none; }
.act-kpi small {
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-muted);
}
.act-kpi strong {
  font-size: calc(15px * var(--type-scale, 1.2));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.act-kpi-warn { color: var(--warning) !important; }
.act-kpi-ok { color: var(--success) !important; }
/* Rechterkolom: VANDAAG + CONTEXT samen in één kaart. */
.act-side {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

/* ── Inklapbare contextpanelen (activiteiten + restaurant) ── */
/* Inklap-tab op de LINKERrand van het paneel (verticaal gecentreerd), zoals het
   ontwerp — niet meer een knopje rechtsboven in de kaart. */
.aside-collapse-btn {
  position: absolute;
  left: -11px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-right: none;
  border-radius: 8px 0 0 8px;
  background: var(--panel); color: var(--text-muted); cursor: pointer;
  box-shadow: -3px 0 8px rgba(0,0,0,.05);
  z-index: 6;
  transition: background .12s, color .12s;
}
.aside-collapse-btn:hover { background: var(--hover); color: var(--text); }
.aside-collapse-btn svg { width: 12px; height: 12px; }
.act-layout.is-aside-collapsed, .rp-layout.is-aside-collapsed { grid-template-columns: 1fr !important; }
.act-layout.is-aside-collapsed .act-side, .rp-layout.is-aside-collapsed .rp-aside { display: none !important; }
.aside-reopen {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 56px; z-index: 55;
  border: 1px solid var(--border); border-right: none; border-radius: 10px 0 0 10px;
  background: var(--panel); color: var(--text-muted); display: grid; place-items: center;
  box-shadow: var(--shadow); cursor: pointer;
}
.aside-reopen:hover { background: var(--hover); color: var(--text); }
.rp-aside { position: relative; }

/* ── Activiteiten layout + context feed ── */
.act-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
/* min-width:0 zodat de plan-kolom kan KRIMPEN onder z'n inhoud; anders duwt
   het brede activiteiten-rooster de rechterkolom (VANDAAG/CONTEXT) van het
   scherm af. */
.act-plan { min-width: 0; }
@media (min-width: 1100px) {
  .act-layout { grid-template-columns: minmax(0, 1fr) 220px; }
}
.act-feed {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 0 0;
}
.act-feed-title {
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 8px;
}
.act-feed-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px;
  border-radius: 6px;
  border: none;
  border-left: 2px solid var(--border-strong, var(--border));
  background: var(--surface);
  margin-bottom: 6px;
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s;
}
.act-feed-item:last-child { margin-bottom: 0; }
.act-feed-item strong {
  display: block;
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.act-feed-item span { display: block; line-height: 1.35; }
.act-feed-item:hover { background: var(--active-bg); }
.act-feed-item.is-warn { border-left-color: var(--warning); }
.act-feed-item.is-ok { border-left-color: var(--success); }
.act-feed-empty {
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-faint);
  margin: 0;
  padding: 4px 0;
}

/* ── Modals ── */
.modal {
  background: var(--modal-overlay) !important;
  backdrop-filter: blur(4px);
}
.modal-inner, .gb-overlay-inner {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}
@media (min-width: 720px) {
  .modal {
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }
  .modal-inner, .modal-inner.modal-slide {
    max-width: min(480px, 100vw) !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-right: none !important;
    animation: slideInRight .22s ease-out;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }
}
.modal-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 22px 16px;
  -webkit-overflow-scrolling: touch;
}
.modal-footer {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 22px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.modal-footer.bd-actions { justify-content: space-between; }
.modal-footer .btn-danger { margin-right: auto; }
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  font-size: calc(18px * var(--type-scale, 1.2)) !important;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: .6; }
  to { transform: translateX(0); opacity: 1; }
}
.modal-title {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: calc(16px * var(--type-scale, 1.2)) !important;
  color: var(--text) !important;
  letter-spacing: -.015em !important;
}
.bkflow-overlay {
  background: var(--modal-overlay) !important;
}
@media (min-width: 720px) {
  .bkflow-overlay {
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .bkflow.bkflow-card {
    max-width: min(560px, 100vw) !important;
    width: 100% !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-right: none !important;
    overflow-y: auto !important;
    animation: slideInRight .22s ease-out;
  }
}
.bkflow-panel {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
}
.gb-overlay {
  background: var(--modal-overlay) !important;
}

/* ── Restaurant ── */
.rp-shell, .rpg-shell { color: var(--text) !important; }
.rp-segmented, .rp-view-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--surface) !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 4px !important;
  overflow: visible;
}
.rp-seg-btn, .rp-view-btn {
  font-family: var(--font) !important;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 18px !important;
  transition: background .15s, color .15s, box-shadow .15s;
}
/* Actief segment = witte pill met schaduw (iOS-stijl), zoals het ontwerp. */
.rp-seg-btn.is-active, .rp-view-btn.is-active {
  background: var(--panel) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.06) !important;
}
/* Tijdlijn als zwevende kaart (look & feel handoff): frame op de wrap zodat de
   horizontale scroll binnen de afgeronde hoeken blijft. */
.rpg-grid-wrap {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}
.rpg-grid {
  background: var(--panel) !important;
  border: none !important;
  border-radius: 0 !important;
}
.rpg-cell, .rpg-hdr {
  border-color: var(--border) !important;
  font-family: var(--font) !important;
  font-size: calc(11px * var(--type-scale, 1.2)) !important;
  color: var(--text-muted) !important;
}
.rpg-booking {
  border-radius: 5px !important;
  font-family: var(--font) !important;
  font-size: calc(10px * var(--type-scale, 1.2)) !important;
}
.rp-aside, .rpg-aside {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
  padding: 18px !important;
  position: relative;
  overflow: visible !important; /* zodat de inklap-tab op de linkerrand niet wordt afgekapt */
}
.rp-queue-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
}

/* ── Betaallink, dagafsluiting, mailings, cron ── */
.bl-shell, .da-shell, .ml-shell, .cr-shell, .gb-shell, .beheer-shell {
  color: var(--text) !important;
}
.bl-tbl, .da-tbl, .gb-tbl, .beheer-tbl, .cg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(12px * var(--type-scale, 1.2));
}
.bl-tbl th, .da-tbl th, .gb-tbl th, .beheer-tbl th {
  text-align: left;
  padding: 8px 10px;
  font-size: calc(10px * var(--type-scale, 1.2));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}
.bl-tbl td, .da-tbl td, .gb-tbl td, .beheer-tbl td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.da-card, .cr-card, .ml-card {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.da-stat, .da-kpi-val {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums;
}
.ml-list-item, .cg-list-item {
  padding: 8px 10px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
  color: var(--text-muted) !important;
}
.ml-list-item.is-active, .cg-list-item.is-active {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  border-left: 2px solid var(--accent) !important;
  color: var(--text) !important;
}
.cr-card code, .beheer-shell code {
  font-size: calc(11px * var(--type-scale, 1.2));
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-muted);
}

/* ── Beheer ── */
.beheer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.beheer-tab {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  cursor: pointer;
}
.beheer-tab.is-active {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.beheer-panel { display: none; }
.beheer-panel.is-active { display: block; }
.beheer-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  min-height: 400px;
}
@media (max-width: 899px) {
  .beheer-layout { grid-template-columns: 1fr; }
}
.beheer-list {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.beheer-list-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 600;
  color: var(--text-muted);
}
.beheer-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--text-muted);
}
.beheer-item:last-child { border-bottom: none; }
.beheer-item strong { display: block; font-size: calc(12px * var(--type-scale, 1.2)); font-weight: 500; color: var(--text); }
.beheer-item small { font-size: calc(10px * var(--type-scale, 1.2)); color: var(--text-faint); }
.beheer-item.is-active {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}
.beheer-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.beheer-section-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.beheer-section-body { padding: 12px; }
.beheer-section-body--flush { padding: 0; overflow-x: auto; }
.beheer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(12px * var(--type-scale, 1.2));
}
.beheer-table th,
.beheer-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.beheer-table th {
  font-size: calc(10px * var(--type-scale, 1.2));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface);
}
.beheer-table tbody tr:last-child td { border-bottom: none; }
.beheer-num { font-variant-numeric: tabular-nums; }
.beheer-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px 12px !important;
}
.beheer-table-hint { padding: 10px 12px 12px; margin: 0; }
.beheer-badge {
  display: inline-block;
  font-size: calc(10px * var(--type-scale, 1.2));
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.beheer-badge.is-ok {
  color: var(--success);
  border-color: rgba(5, 150, 105, .35);
  background: rgba(5, 150, 105, .08);
}
.beheer-row-actions {
  white-space: nowrap;
  text-align: right;
}
.beheer-row-btn {
  font-size: calc(10px * var(--type-scale, 1.2)) !important;
  padding: 2px 6px !important;
}
.beheer-row-del { color: var(--danger) !important; }
.beheer-seizoen-form { margin-bottom: 10px; }
.beheer-seizoen-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.beheer-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.field-hint { font-size: calc(10px * var(--type-scale, 1.2)); color: var(--text-faint); margin-top: 3px; }
.banen-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.baan-chip {
  font-size: calc(10px * var(--type-scale, 1.2));
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.beheer-week-table, .beheer-tier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(11px * var(--type-scale, 1.2));
}
.beheer-week-table th, .beheer-tier-table th {
  padding: 6px 8px;
  text-align: left;
  font-size: calc(10px * var(--type-scale, 1.2));
  font-weight: 500;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}
.beheer-week-table td, .beheer-tier-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--border);
}
.beheer-week-table select, .beheer-week-table input,
.beheer-tier-table input, .beheer-tier-table select {
  font: inherit;
  font-size: calc(11px * var(--type-scale, 1.2));
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
.db-note {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 10px;
}
.db-note strong { color: var(--text); display: block; margin-bottom: 4px; }
.beheer-save-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 10px;
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-faint);
}

/* Activity settings (modal + beheer) */
.as-tiers, .beheer-tiers {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.as-tiers-title, .beheer-tiers-title { font-size: calc(12px * var(--type-scale, 1.2)); font-weight: 600; color: var(--text); }
.as-tiers-hint, .beheer-tiers-hint { font-size: calc(11px * var(--type-scale, 1.2)); color: var(--text-faint); margin: 4px 0 8px; }
.as-tier-row, .beheer-tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.as-tier-row input, .as-tier-row select,
.beheer-tier-row input, .beheer-tier-row select,
.beheer-staffel-row input {
  font: inherit;
  font-size: calc(11px * var(--type-scale, 1.2));
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
/* Staffel-regel labels volgen de thema-tekstkleur (dark + light). */
.beheer-staffel-row .field-hint { color: var(--text-muted); }
.bd-meta-hint { font-size: calc(11px * var(--type-scale, 1.2)); color: var(--text-faint); margin-bottom: 12px; }

/* ── Scan ── */
.scan-page-title {
  font-family: var(--font) !important;
  font-size: calc(16px * var(--type-scale, 1.2)) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.scan-page-hint { color: var(--text-muted) !important; font-size: calc(12px * var(--type-scale, 1.2)) !important; }
.scan-video-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.scan-frame { border-color: var(--success) !important; opacity: .35 !important; }
.scan-match, .scan-action {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
}
.scan-match h3 { font-family: var(--font) !important; color: var(--text) !important; }

/* ── Bottom nav ── */
.bottom-nav {
  background: var(--panel) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.bnav-btn {
  color: var(--text-muted) !important;
  font-family: var(--font) !important;
  font-size: calc(10px * var(--type-scale, 1.2)) !important;
}
.bnav-btn.is-active { color: var(--text) !important; }
.bnav-btn.is-active::after { background: var(--accent) !important; }

/* ── Calendar widget overrides ── */
.datum-cal-wrap {
  flex: 1;
  min-width: 140px;
  max-width: 280px;
  position: relative;
}
.datum-cal-wrap .iselcal-root { width: 100%; }
.app-shell .iselcal-value,
.app-shell .iselcal-value.has-value,
.bkflow-overlay .iselcal-value,
.bkflow-overlay .iselcal-value.has-value {
  color: var(--text) !important;
  font-weight: 500 !important;
}
.app-shell .iselcal-caret-btn,
.bkflow-overlay .iselcal-caret-btn {
  color: var(--text-muted) !important;
}
.iselcal-pop {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
}

/* ── Booking flow ── */
.bkflow-title, .bkf-title {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.bk-betaal {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
}
.bk-betaal-opt { color: var(--text) !important; font-family: var(--font) !important; font-size: calc(13px * var(--type-scale, 1.2)) !important; }

/* ── Gebruikers ── */
.gb-shell-title, .gb-shell-hint, .gb-rollen-titel {
  font-family: var(--font) !important;
  color: var(--text) !important;
}
.gb-shell-hint, .gb-rollen-list { color: var(--text-muted) !important; font-size: calc(12px * var(--type-scale, 1.2)) !important; }
.gb-rol-sel, .gb-toggle {
  font-family: var(--font) !important;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
}
.gb-tbl-wrap {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.beheer-head { margin-bottom: 12px; }
.beheer-title {
  font-family: var(--font) !important;
  font-size: calc(16px * var(--type-scale, 1.2)) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 4px !important;
}
.beheer-sub { font-size: calc(12px * var(--type-scale, 1.2)); color: var(--text-muted); margin: 0; }
.gb-overlay-card {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  max-width: 420px;
  width: 100%;
  color: var(--text) !important;
}
.gb-overlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}
.gb-overlay-acties { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.gb-muted { color: var(--text-muted); font-size: calc(12px * var(--type-scale, 1.2)); }

/* ── Command palette ── */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}
.cmd-palette[hidden] { display: none !important; }
.cmd-backdrop {
  position: absolute;
  inset: 0;
  background: var(--modal-overlay);
  backdrop-filter: blur(4px);
}
.cmd-dialog {
  position: relative;
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
  overflow: hidden;
}
.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.cmd-input-wrap svg { width: 16px; height: 16px; color: var(--text-faint); flex-shrink: 0; }
.cmd-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: calc(14px * var(--type-scale, 1.2));
  color: var(--text);
  outline: none;
}
.cmd-input::placeholder { color: var(--text-faint); }
.cmd-kbd-inline { margin-left: auto; }
.cmd-results { max-height: min(360px, 50vh); overflow-y: auto; padding: 6px; }
.cmd-group-label {
  font-size: calc(10px * var(--type-scale, 1.2));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  padding: 6px 8px 4px;
}
.cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: calc(13px * var(--type-scale, 1.2));
  cursor: pointer;
}
.cmd-item:hover, .cmd-item.is-active { background: var(--active-bg); }
.cmd-item-hint { font-size: calc(11px * var(--type-scale, 1.2)); color: var(--text-muted); flex-shrink: 0; }
.cmd-empty { padding: 16px; text-align: center; font-size: calc(12px * var(--type-scale, 1.2)); color: var(--text-faint); }

/* ── Context feed collapse (tablet) ── */
.act-feed-wrap { min-width: 0; }
.act-feed-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 600;
  cursor: pointer;
}
.act-feed-count {
  font-size: calc(10px * var(--type-scale, 1.2));
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
@media (max-width: 1099px) {
  .act-feed-toggle { display: flex; }
  .act-feed-wrap.is-collapsed .act-feed { display: none; }
  .act-feed-wrap:not(.is-collapsed) .act-feed-toggle { margin-bottom: 8px; }
}

/* ── Touch targets in planning grid ── */
.banen-vrij, .banen-geboekt, .ag-slot {
  min-height: 44px;
  min-width: 44px;
}
@media (min-width: 1100px) {
  .banen-vrij, .banen-geboekt { min-height: 36px; min-width: auto; }
  .ag-slot { min-height: 32px; min-width: 32px; }
}

/* ── Booking flow: segmented + sticky footer ── */
.bkflow.bkflow-card {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  padding: 0 !important;
}
.bkflow-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 28px 26px 12px;
  -webkit-overflow-scrolling: touch;
}
/* Popup-titel blijft bovenaan staan tijdens scrollen (sticky header). Negatieve
   marges = full-bleed over de scroll-padding; padding-right houdt ruimte voor de ×. */
.bkflow-card .bkflow-scroll { padding-top: 0 !important; }
.bkflow-card .bkflow-scroll > .bkflow-title {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel) !important;
  margin: 0 -26px 14px !important;
  padding: 24px 52px 12px 26px;
  border-bottom: 1px solid var(--border);
}
.bkflow-card .modal-close { z-index: 5; }
@media (max-width: 700px) {
  .bkflow-card .bkflow-scroll > .bkflow-title { margin: 0 -16px 12px !important; padding: 18px 48px 10px 16px; }
}
.bkflow-footer {
  flex-shrink: 0;
  padding: 12px 26px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
/* Footer met ID-formulier-knop ernaast: knoppen op één rij, submit vult de rest. */
.bkflow-footer:has(.bkf-idform-btn:not([hidden])),
.bkf-idform-footer {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.bkf-idform-btn:not([hidden]), .bd-idform-btn:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bkf-idform-btn[hidden], .bd-idform-btn[hidden] { display: none !important; }
.bkf-idform-btn.is-filled, .bd-idform-btn.is-filled {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
/* Badge rechtsboven op de ID-formulier-knop: groen vinkje = volledig ingevuld,
   rood "!" = verplicht maar nog niet volledig. */
.bkf-idform-btn { position: relative; overflow: visible; }
.bkf-idform-badge {
  position: absolute; top: -8px; right: -8px;
  min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1; color: #fff;
  border: 2px solid var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.bkf-idform-badge.ok { background: var(--success); }
.bkf-idform-badge.warn { background: var(--danger); }
/* Mobiel: footer-knoppen stapelen (ID-formulier boven, opslaan eronder) i.p.v.
   overlappen. Badge blijft netjes rechtsboven op de volle-breedte ID-knop. */
@media (max-width: 700px) {
  .bkflow-footer:has(.bkf-idform-btn:not([hidden])), .bkf-idform-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .bkf-idform-btn:not([hidden]) { width: 100%; justify-content: center; }
  .bkf-idform-btn .bkf-idform-badge { right: 10px; }
}
/* In de detail-footer staat de ID-knop links; Verwijderen schuift ernaast. */
.modal-footer.bd-actions .bd-idform-btn:not([hidden]) ~ .btn-danger { margin-right: 0; }
.modal-footer.bd-actions .bd-idform-btn { margin-right: auto; }
.bkf-idform-card { max-width: 560px; }
.bkf-idform-intro {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: calc(12px * var(--type-scale, 1.2));
  line-height: 1.5;
}
.bk-seg {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.bk-seg-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: calc(11px * var(--type-scale, 1.2));
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
}
.bk-seg-btn:last-child { border-right: none; }
/* Actieve segment = solide gevulde pill (zelfde duidelijke stijl als de
   tijdslot-preview). In light is --active-bg gelijk aan --surface, dus een
   bg-shift was onzichtbaar — daarom een contrasterende --text vulling. */
.bk-seg-btn.is-active {
  background: var(--text);
  color: var(--panel);
  font-weight: 600;
}
.bk-seg-field { margin-bottom: 12px; }
.bk-seg-field > span {
  display: block;
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Datum + tijdslot: gelijke kolombreedte en veldhoogte */
.bkflow-overlay .booking-form .field-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}
.bkflow-overlay .booking-form .field-row > .field {
  min-width: 0;
  width: 100%;
}
.bkflow-overlay .booking-form .field-row > .field > select,
.bkflow-overlay .booking-form .field-row > .field > input:not([type="hidden"]) {
  width: 100% !important;
  box-sizing: border-box;
  min-width: 0;
}
/* Date/time-inputs vullen hun cel niet vanzelf op iOS (intrinsieke breedte) → bv.
   Geboortedatum oogt smaller. appearance:none normaliseert ze tot een box op 100%
   breedte; de calendar-indicator houden we expliciet zichtbaar zodat desktop de
   native picker behoudt. */
.bkflow-overlay .booking-form input[type="date"],
.bkflow-overlay .booking-form input[type="time"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  min-height: 40px;
}
.bkflow-overlay .booking-form input[type="date"]::-webkit-calendar-picker-indicator,
.bkflow-overlay .booking-form input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
}
/* Velden uniform + responsive: de datum-trigger nooit over 2 regels (zodat 'ie even hoog
   is als de Tijdslot-select), en op mobiel stapelen de tekst-rijen tot volle breedte zodat
   alle velden even breed en ruim in beeld passen. Stepper-rijen blijven compact naast elkaar. */
.bkflow-overlay .booking-form .iselcal-trigger {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .bkflow-overlay .booking-form .field-row:not(:has(.bkf-stepper)) {
    grid-template-columns: 1fr !important;
  }
}

/* Wellness-openingstijden (Beheer) — responsive: 3 koloms op desktop/iPad,
   naam op eigen regel + Open/Sluit naast elkaar op mobiel. */
.wl-card { max-width: 600px; }
.wl-title { margin: 0 0 6px; font-size: calc(16px * var(--type-scale, 1.2)); font-weight: 600; color: var(--text); }
.wl-intro { color: var(--text-muted); margin: 0 0 16px; font-size: calc(12px * var(--type-scale, 1)); line-height: 1.4; }
.wl-grid { display: grid; gap: 0; }
.wl-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 150px) minmax(0, 150px); align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.wl-row:last-child { border-bottom: 0; }
.wl-name { font-weight: 600; color: var(--text); }
.wl-fld { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.wl-fld input[type="time"] { flex: 1 1 auto; width: 100%; -webkit-appearance: none; appearance: none; padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; box-sizing: border-box; }
.wl-err { color: var(--danger); min-height: 18px; margin-top: 8px; font-size: 13px; }
@media (max-width: 560px) {
  .wl-row { grid-template-columns: 1fr 1fr; }
  .wl-name { grid-column: 1 / -1; }
}

.beheer-time-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.beheer-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(11px * var(--type-scale, 1.2));
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.beheer-time-chip button {
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: calc(14px * var(--type-scale, 1.2));
  line-height: 1;
  padding: 0 2px;
}
.beheer-recipient-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

.rpg-booking.is-hp {
  background: var(--rest-hp) !important;
  color: var(--text) !important;
  border: 1px solid var(--rest-hp-border) !important;
}
.rpg-booking.is-alacarte {
  background: var(--rest-alacarte) !important;
  color: var(--text) !important;
  border: 1px solid var(--rest-alacarte-border) !important;
}
.rpg-booking.is-request,
.rpg-booking.is-alacarte.is-request {
  background: var(--rest-req) !important;
  color: var(--text) !important;
  border: 1px dashed rgba(184,147,90,.35) !important;
}
.rpg-booking.is-group {
  background: var(--rest-group) !important;
  color: var(--text) !important;
  border: 1px solid var(--rest-alacarte-border) !important;
}
.rpg-booking.is-cancelled {
  background: var(--rest-cancelled) !important;
  color: var(--text-muted) !important;
  opacity: .65 !important;
}
.rpg-booking.is-gezeten {
  background: var(--rest-seated) !important;
  color: var(--text) !important;
  border-left: 3px solid var(--success) !important;
}
.rpg-booking.is-afgerond {
  background: var(--rest-done) !important;
  color: var(--text-muted) !important;
  opacity: .55 !important;
}
.rpg-booking:not(.is-hp):not(.is-request):not(.is-alacarte):not(.is-group):not(.is-cancelled):not(.is-gezeten):not(.is-afgerond) {
  background: var(--rest-confirmed) !important;
  color: var(--text) !important;
  border: 1px solid var(--rest-confirmed-border) !important;
}
.rpg-b-naam, .rpg-b-time, .rpg-b-pers, .rpg-request-naam, .rpg-request-pers, .rpg-request-time {
  color: inherit !important;
  font-family: var(--font) !important;
}
.rpg-slot-head.is-peak,
.rpg-cell.is-peak {
  background: var(--rest-peak) !important;
}
/* Piek-tijdvak: kolom-band + groene, vette, onderstreepte koptekst (handoff). */
.rpg-slot-head.is-peak {
  color: var(--accent) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
}
/* Lijst-weergave als zwevende kaart (zelfde look & feel als de tijdlijn). */
.rp-lijst-wrap {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}
.rp-lijst-wrap { overflow-x: auto !important; }
/* Sleep-hint boven de aanvragenlijst */
.rp-req-hint {
  display: flex; align-items: center; gap: 7px;
  margin: 2px 0 12px;
  font-size: calc(12px * var(--type-scale, 1.2));
  color: var(--text-faint);
}
.rp-req-hint svg { width: 14px; height: 14px; flex: none; }
/* ── Rechten-matrix (Beheer → Gebruikers) — handoff Fase 6 ── */
.pmatrix-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.pmatrix-note { margin: 4px 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.pmatrix-wrap { overflow-x: auto; }
.pmatrix { width: 100%; border-collapse: collapse; }
.pmatrix th { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 10px 8px; border-bottom: 1px solid var(--border); }
.pmatrix th:first-child { text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.pmatrix td { padding: 11px 8px; border-bottom: 1px solid var(--border); text-align: center; }
.pmatrix tr:last-child td { border-bottom: none; }
.pmatrix td:first-child { text-align: left; font-size: 14px; font-weight: 500; color: var(--text); }
.pmatrix .rolehead { display: block; color: var(--text); }
.pmatrix .rolehead small { display: block; font-weight: 500; color: var(--text-faint); font-size: 10.5px; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.cbx { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--panel); display: inline-grid; place-items: center; color: transparent; margin: 0 auto; cursor: pointer; transition: background .12s, border-color .12s; }
.cbx:not(.lock):hover { border-color: var(--accent); }
.cbx.on { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="grey"] .cbx.on { color: #0e0f0d; }
.cbx.lock { background: var(--surface); border-color: var(--border); color: var(--text-faint); cursor: default; }
.cbx.on.lock { background: var(--accent); border-color: var(--accent); color: #fff; opacity: .7; cursor: default; }
[data-theme="grey"] .cbx.on.lock { color: #0e0f0d; }
/* "SERVICE"-label: gewone sans, bold, strakkere spacing (handoff i.p.v. Lekton). */
.rp-toolbar-label {
  font-family: var(--font) !important;
  font-size: calc(11.5px * var(--type-scale, 1.2)) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
}
/* Aanvraag-kaart in handoff-stijl: naam + groene tijd-pill boven, meta eronder. */
.rpg-req-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rpg-req-naam { font-size: calc(14px * var(--type-scale, 1.2)); font-weight: 600; color: var(--text); }
.rpg-req-time { flex: none; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
[data-theme="grey"] .rpg-req-time { color: #cdeede; }
.rpg-req-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px;
  font-size: 13px; color: var(--text-muted); }
.rpg-kchip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px;
  background: var(--warning-soft, rgba(217,119,6,.12)); color: var(--warning, #c2620d); font-size: 12px; font-weight: 600; }
.rpg-kchip--kid { background: var(--surface); color: var(--text-muted); }
.rpg-req-note { margin-top: 6px; font-size: 12.5px; color: var(--warning, #c2620d); }
.rpg-corner, .rpg-row-head, .rpg-slot-head, .rpg-slot-count, .rpg-corner-count {
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
.rpg-row.is-leeg .rpg-row-head,
.rpg-row.is-leeg .rpg-cell {
  background: var(--bg) !important;
  opacity: .35 !important;
}
.rpg-cell.is-dragover {
  background: var(--accent-soft) !important;
  outline: 2px dashed var(--accent) !important;
  outline-offset: -2px;
}
.rpg-request {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
}
.rpg-request:hover { background: var(--hover) !important; border-color: var(--border-strong) !important; }
.rpg-request-group-head { color: var(--text-muted) !important; font-family: var(--font) !important; }
.rpg-chrono-item { border-color: var(--border) !important; color: var(--text-muted) !important; }
.rpg-chrono-swatch.is-alacarte { background: var(--accent) !important; opacity: .55; }
.rpg-chrono-swatch.is-hp { background: var(--success) !important; opacity: .55; }
.rpg-chrono-swatch.is-group { background: var(--accent) !important; opacity: .45; }
.rpg-chrono-swatch.is-request { background: var(--warning) !important; opacity: .55; }
.rpg-chrono-swatch.is-cancelled { background: var(--danger) !important; opacity: .55; }
.rpg-chrono-swatch.is-gezeten { background: var(--success) !important; opacity: .75; }
.rpg-chrono-swatch.is-afgerond { background: var(--text-faint) !important; opacity: .55; }
.rp-aside-title, .rp-page-title, .rpg-shell h2, .rp-shell h2 {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.rp-badge-geel, .rp-kinderstoelen-banner {
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(184,147,90,.25) !important;
  font-family: var(--font) !important;
}
.rp-stats-mini, .rp-empty, .rpg-empty { color: var(--text-muted) !important; font-family: var(--font) !important; }
.rp-layout, .rpg-layout { color: var(--text) !important; }

/* Blokkades — geen navy/terracotta meer */
.blokkeer-toggle {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  border-radius: 6px !important;
}
.blokkeer-toggle:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--hover) !important;
}
.blokkeer-toggle.is-active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.blokkeer-bar {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.25) !important;
}
.blokkeer-bar-count {
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  border-radius: 6px !important;
}
.blokkeer-bar-lbl {
  font-family: var(--font) !important;
  color: var(--text-muted) !important;
}
.blokkeer-bar-cancel {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
}
.blokkeer-bar-cancel:hover { background: var(--hover) !important; color: var(--text) !important; }
.blokkeer-bar-confirm {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
}
.blokkeer-bar-confirm:hover { background: var(--accent-hover) !important; }
.banen-cell.is-selected, .ag-slot.is-selected {
  outline: 2px solid var(--accent) !important;
  outline-offset: -2px;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.banen-cell.banen-blok {
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(184,147,90,.22) !important;
}
.banen-tijd-clickable, .banen-hed-clickable, .ag-tijd-clickable {
  color: var(--text-muted) !important;
}
.banen-tijd-clickable:hover, .banen-hed-clickable:hover, .ag-tijd-clickable:hover {
  color: var(--accent) !important;
  background: var(--hover) !important;
}

/* Mailings editor */
.ml-shell, .ml-sidebar, .ml-editor-wrap {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.ml-list-item:hover { background: var(--hover) !important; }
.ml-list-label, .ml-editor-title { font-family: var(--font) !important; color: var(--text) !important; }
.ml-list-meta, .ml-editor-desc, .ml-empty { color: var(--text-muted) !important; font-family: var(--font) !important; }
.ml-input, .ml-textarea {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  border-radius: 6px !important;
}
.ml-input:focus, .ml-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
}
.ml-badge-custom { background: var(--accent-soft) !important; color: var(--accent) !important; }
.ml-badge-default { background: var(--surface) !important; color: var(--text-muted) !important; border: 1px solid var(--border); }
.ml-badge-off { background: var(--warning-soft) !important; color: var(--warning) !important; }
.ml-ph-chip {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-family: var(--font) !important;
  border-radius: 4px !important;
}
.ml-ph-chip:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.ml-placeholders { background: var(--surface) !important; border-color: var(--border) !important; }
.ml-placeholders-title { color: var(--text-muted) !important; font-family: var(--font) !important; }
.ml-editor-actions { border-color: var(--border) !important; }

/* Betaallinks */
.bl-card, .bl-result-head, .bl-url-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
}
.bl-card-title, .bl-result-bedrag, .bl-result-omschr {
  font-family: var(--font) !important;
  color: var(--text) !important;
}
.bl-result-bedrag { color: var(--accent) !important; }
.bl-url-input {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
}
.bl-badge-ok { background: var(--success-soft) !important; color: var(--success) !important; }
.bl-badge-err { background: var(--danger-soft) !important; color: var(--danger) !important; }
.bl-badge-pending { background: var(--warning-soft) !important; color: var(--warning) !important; }
.bl-empty, .bl-result-hint, .bl-mail-bevestig { color: var(--text-muted) !important; font-family: var(--font) !important; }
.bl-mail-bevestig.bl-mail-warn { background: var(--warning-soft) !important; color: var(--warning) !important; border-color: rgba(184,147,90,.25) !important; }

/* Dagafsluiting */
.da-toolbar, .da-card, .da-grid {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.da-card-title, .da-totaal, .da-kv dt, .da-kv dd {
  font-family: var(--font) !important;
  color: var(--text) !important;
}
.da-badge-ok { background: var(--success-soft) !important; color: var(--success) !important; border-color: rgba(74,155,127,.25) !important; }
.da-badge-pending { background: var(--warning-soft) !important; color: var(--warning) !important; border-color: rgba(184,147,90,.25) !important; }
.da-empty { color: var(--text-muted) !important; }

/* Scan */
.scan-match-badge {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  font-family: var(--font) !important;
  border-radius: 6px !important;
}
.scan-action.is-warn .scan-match-badge { background: var(--warning-soft) !important; color: var(--warning) !important; }
.scan-row span { color: var(--text-muted) !important; font-family: var(--font) !important; }
.scan-row strong { color: var(--text) !important; font-family: var(--font) !important; }
.scan-no-match { color: var(--text-muted) !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; }
.scan-inname-opt { color: var(--text) !important; font-family: var(--font) !important; font-size: calc(13px * var(--type-scale, 1.2)) !important; }
.scan-hint { color: var(--text-muted) !important; }

/* Booking flow info boxes */
.bk-mollie-info, .bk-ticket-info {
  background: var(--accent-soft) !important;
  border: 1px solid rgba(78,139,201,.22) !important;
  color: var(--text-muted) !important;
  border-radius: 8px !important;
  font-family: var(--font) !important;
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
}
.bk-mollie-info svg, .bk-ticket-info svg { color: var(--accent) !important; }

/* Activity settings modal tiers */
.as-tier-row, .beheer-tier-row {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}
.as-tier-add, .bh-tier-add, .bh-baan-add { color: var(--accent) !important; }
.as-tier-add:hover, .bh-tier-add:hover, .bh-baan-add:hover { background: var(--accent-soft) !important; }
.beheer-baan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  background: var(--surface);
}
.beheer-baan-naam { font-size: calc(12px * var(--type-scale, 1.2)); font-weight: 600; min-width: 72px; color: var(--text); }
.beheer-baan-meta { font-size: calc(11px * var(--type-scale, 1.2)); color: var(--text-faint); flex: 1; }

/* BD meta rows in booking detail */
.bd-meta, .scan-row { color: var(--text) !important; }
.bd-meta .scan-row span, .bd-meta strong { font-family: var(--font) !important; }

/* Cron */
.cr-card h4, .cr-card p { color: var(--text) !important; font-family: var(--font) !important; }
.cr-card p { color: var(--text-muted) !important; }

/* ── Calendar / shared widgets (scoped to backoffice) ── */
.app-shell {
  --iselmar-primary: var(--accent);
  --iselmar-accent: var(--danger);
  --iselmar-text: var(--text);
  --iselmar-text-light: var(--text-muted);
  --iselmar-muted: var(--text-faint);
  --iselmar-border: var(--border-strong);
  --iselmar-border-soft: var(--border);
  --iselmar-cream: var(--surface);
  --iselmar-bg-soft: var(--bg);
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-sm: 4px;
  --shadow-lg: var(--shadow);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --font-display: var(--font);
}
.app-shell .iselcal-trigger,
.bkflow-overlay .iselcal-trigger,
.app-shell .iselsel-trigger,
.bkflow-overlay .iselsel-trigger {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: calc(13px * var(--type-scale, 1.2)) !important;
  padding: 8px 12px !important;
  box-sizing: border-box;
}
.bkflow-overlay .booking-form .iselcal-root,
.bkflow-overlay .booking-form .bkf-datum-mount {
  width: 100%;
  display: block;
}
.bkflow-overlay .booking-form .iselcal-trigger {
  width: 100% !important;
  min-height: 41px;
  padding: 12px 14px !important;
}
.app-shell .iselcal-trigger:hover,
.bkflow-overlay .iselcal-trigger:hover,
.app-shell .iselsel-trigger:hover,
.bkflow-overlay .iselsel-trigger:hover,
.app-shell .iselcal-root.is-open .iselcal-trigger,
.bkflow-overlay .iselcal-root.is-open .iselcal-trigger {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
}
.app-shell .iselcal-panel,
.bkflow-overlay .iselcal-panel,
.app-shell .iselsel-panel,
.bkflow-overlay .iselsel-panel {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
}
.app-shell .iselcal-title,
.bkflow-overlay .iselcal-title,
.app-shell .iselcal-day,
.bkflow-overlay .iselcal-day,
.app-shell .iselsel-option,
.bkflow-overlay .iselsel-option {
  font-family: var(--font) !important;
  color: var(--text) !important;
}
.app-shell .iselcal-label,
.bkflow-overlay .iselcal-label,
.login-shell .iselcal-label {
  font-size: calc(13px * var(--type-scale, 1.2)) !important;
}
.app-shell .iselcal-title,
.bkflow-overlay .iselcal-title {
  font-size: calc(16px * var(--type-scale, 1.2)) !important;
}
.app-shell .iselcal-daynames > div,
.bkflow-overlay .iselcal-daynames > div {
  font-size: calc(11px * var(--type-scale, 1.2)) !important;
}
.app-shell .iselcal-day,
.bkflow-overlay .iselcal-day {
  font-size: calc(13px * var(--type-scale, 1.2)) !important;
}
.app-shell .iselcal-input,
.bkflow-overlay .iselcal-input {
  font-size: calc(14px * var(--type-scale, 1.2)) !important;
}
.app-shell .iselcal-today,
.bkflow-overlay .iselcal-today {
  font-size: calc(12px * var(--type-scale, 1.2)) !important;
}
.app-shell .iselcal-daynames > div,
.bkflow-overlay .iselcal-daynames > div,
.app-shell .iselcal-nav,
.bkflow-overlay .iselcal-nav {
  color: var(--text-muted) !important;
}
.app-shell .iselcal-day:hover:not(:disabled):not(.is-selected),
.bkflow-overlay .iselcal-day:hover:not(:disabled):not(.is-selected) {
  background: var(--hover) !important;
}
.app-shell .iselcal-day.is-selected,
.bkflow-overlay .iselcal-day.is-selected,
.app-shell .iselcal-day.is-range-start,
.bkflow-overlay .iselcal-day.is-range-start,
.app-shell .iselcal-day.is-range-end,
.bkflow-overlay .iselcal-day.is-range-end {
  background: var(--accent) !important;
  color: #fff !important;
}
.app-shell .iselcal-day.is-today:not(.is-selected),
.bkflow-overlay .iselcal-day.is-today:not(.is-selected) {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.app-shell .iselcal-today,
.bkflow-overlay .iselcal-today,
.app-shell .iselcal-nav:hover,
.bkflow-overlay .iselcal-nav:hover {
  color: var(--accent) !important;
}
.app-shell .iselsel-option.is-selected,
.bkflow-overlay .iselsel-option.is-selected {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* Hide old header if any remnant */

/* ── Beheer → Modules ── */
.beheer-modules .mod-intro { max-width: 42rem; margin-bottom: 14px; }
.beheer-modules .mod-warn { color: var(--warning); }
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.mod-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mod-card--off { opacity: .72; }
.mod-card--soon { border-style: dashed; }
.mod-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mod-card-head strong { font-size: calc(13px * var(--type-scale, 1.2)); font-weight: 600; }
.mod-card-hint { font-size: calc(11px * var(--type-scale, 1.2)); color: var(--text-muted); line-height: 1.4; }
.mod-card-note { font-size: calc(10px * var(--type-scale, 1.2)); color: var(--text-faint); }
.mod-badge {
  font-size: calc(9px * var(--type-scale, 1.2));
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-faint);
  white-space: nowrap;
}
.mod-badge--on { background: rgba(74,155,127,.18); color: var(--success, #4A9B7F); }
.mod-badge--off { background: rgba(255,255,255,.06); color: var(--text-faint); }
.mod-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-top: auto;
}
.mod-toggle--compact { margin-top: 0; }
.mod-toggle-chk, .mod-act-chk { position: absolute; opacity: 0; width: 0; height: 0; }
.mod-toggle-slider {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  position: relative;
  flex-shrink: 0;
  transition: background .15s;
}
.mod-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .15s, background .15s;
}
.mod-toggle-chk:checked + .mod-toggle-slider,
.mod-act-chk:checked + .mod-toggle-slider {
  background: rgba(74,155,127,.25);
  border-color: rgba(74,155,127,.45);
}
.mod-toggle-chk:checked + .mod-toggle-slider::after,
.mod-act-chk:checked + .mod-toggle-slider::after {
  transform: translateX(16px);
  background: var(--success, #4A9B7F);
}
.mod-toggle-lbl { font-size: calc(11px * var(--type-scale, 1.2)); color: var(--text-muted); }
.mod-act-list { display: flex; flex-direction: column; gap: 6px; }
.mod-act-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.mod-act-row--off { opacity: .65; }
.mod-act-info strong { display: block; font-size: calc(12px * var(--type-scale, 1.2)); font-weight: 500; }
.mod-act-info span { font-size: calc(10px * var(--type-scale, 1.2)); color: var(--text-faint); }
.mod-act-config { font-size: calc(11px * var(--type-scale, 1.2)); padding: 4px 8px; white-space: nowrap; }
.beheer-item--off { opacity: .55; }
.beheer-item--off strong::after {
  content: ' · uit';
  font-weight: 400;
  color: var(--text-faint);
  font-size: calc(10px * var(--type-scale, 1.2));
}
@media (max-width: 640px) {
  .mod-act-row { grid-template-columns: 1fr; }
  .mod-act-config { justify-self: start; }
}

.app-header { display: none !important; }

/* ── Claude Design spec — accent is CHROME (focus-ring, subtiele indicatoren,
   randen): grey #3A3A3A, light #D4D4D4. De codebase hergebruikt --accent op
   sommige plekken als LEESBARE tekst/icoon; daar zou de neutrale accent
   onzichtbaar zijn (donker op donker / licht op wit). Hier alleen die KLEUR
   neutraliseren naar leesbaar grijs — in BEIDE thema's via [data-theme], met
   thema-eigen var-waarde. Geen layout-wijziging. ── */
[data-theme] .act-settings-btn,
[data-theme] .act-beheer-link,
[data-theme] .module-btn-scan:not(.is-active):hover,
[data-theme] .bk-mollie-info svg,
[data-theme] .bk-ticket-info svg,
[data-theme] .as-tier-add,
[data-theme] .bh-tier-add,
[data-theme] .bh-baan-add { color: var(--text-muted) !important; }

[data-theme] .blokkeer-toggle:hover,
[data-theme] .banen-tijd-clickable:hover,
[data-theme] .banen-hed-clickable:hover,
[data-theme] .ag-tijd-clickable:hover,
[data-theme] .ml-badge-custom,
[data-theme] .bl-result-bedrag,
[data-theme] .bkflow-overlay .iselcal-day.is-today:not(.is-selected),
[data-theme] .bkflow-overlay .iselcal-nav:hover,
[data-theme] .bkflow-overlay .iselsel-option.is-selected { color: var(--text) !important; }

/* Geselecteerde slot/cel: leesbare chip i.p.v. onzichtbare accent-tekst. */
[data-theme] .banen-cell.is-selected,
[data-theme] .ag-slot.is-selected {
  color: var(--text) !important;
  outline-color: var(--text-muted) !important;
  background: var(--surface) !important;
}

/* Resterende hardcoded blauwe rand op info-boxen → neutraal in beide thema's. */
[data-theme] .bk-mollie-info,
[data-theme] .bk-ticket-info { border-color: var(--border) !important; }

/* Focus-ring volgt het groene accent (Claude Design handoff). */
[data-theme="light"] .field > input:focus,
[data-theme="light"] .field > select:focus,
[data-theme="light"] .field > textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }

/* ── Fijn-afstemming navbar + activiteiten (gebruikers-tweaks) ── */
/* Datepicker-balk bovenaan: witte (panel) vulling i.p.v. grijze surface. */
.datum-cal-wrap .iselcal-trigger { background: var(--panel) !important; }

/* Nav-knop hover in light = #F3F3F3 (ook de geselecteerde knop bij hover). */
html[data-theme="light"] .module-btn:hover { background: #F3F3F3 !important; color: var(--text) !important; }

/* Hover-effect op de activiteiten-filterpills (surface=hover botst in de
   neutrale tokens, dus expliciete tint per thema + rand-accent). */
.act-tab:hover:not(.is-active) { border-color: var(--border-strong) !important; color: var(--text) !important; }
html[data-theme="light"] .act-tab:hover:not(.is-active) { background: #F3F3F3 !important; }
html[data-theme="grey"] .act-tab:hover:not(.is-active) { background: #2E2E2E !important; }

/* Verborgen kinderen-veld in de balie-boeking echt verbergen (de .field-regel
   zet display, dus het [hidden]-attribuut heeft een expliciete override nodig). */
#bkf-kind-wrap[hidden] { display: none !important; }

/* Multi-baan keuze in de balie-boeking (chips). */
#bkf-banen-wrap[hidden] { display: none !important; }
.bkf-banen-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bkf-baan-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: calc(12px * var(--type-scale, 1.2));
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.bkf-baan-chip:hover:not(.is-primary):not(.is-on) { border-color: var(--accent); color: var(--text); }
.bkf-baan-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
.bkf-baan-chip.is-on::before { content: '\2713'; color: var(--accent); font-weight: 700; font-size: .92em; }
.bkf-baan-chip.is-primary { cursor: default; }
.bkf-baan-chip.is-primary.is-on::before { content: '\2605'; }
#bkf-banen-label.is-tekort { color: var(--danger); }

/* Verleden TIJD vandaag = grijs maar klikbaar (walk-in achteraf registreren).
   Verleden DATUM-cellen zijn dimmer en niet klikbaar. */
.ag-slot.is-verleden,
.banen-cell.banen-vrij.is-verleden {
  opacity: .45 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
/* Voorbije adventuregolf-tijdvakken doorstrepen zodat duidelijk is dat ze
   voorbij zijn — blijven klikbaar voor walk-in (gebruikerswens juni 2026). */
.ag-slot.is-verleden { text-decoration: line-through !important; }
.ag-slot.is-verleden:hover,
.banen-cell.banen-vrij.is-verleden:hover { opacity: .8 !important; }
.banen-cell.banen-vol.is-verleden { opacity: .35 !important; }

/* Info-melding in de balie-boeking (bv. multi-slot tijdvakken). */
.bkf-info-note {
  font-size: calc(11px * var(--type-scale, 1.2));
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.bkf-info-note[hidden] { display: none !important; }

/* Personen/kinderen steppers in de balie-boeking (webapp-stijl +/-). */
.bkf-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  width: fit-content;
}
.bkf-step {
  width: 36px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: calc(16px * var(--type-scale, 1.2));
  line-height: 1;
  cursor: pointer;
}
.bkf-step:hover { background: var(--hover); }
/* Telefoon-veld staat nu naast de personen/kinderen-steppers — input even hoog
   maken zodat de drie kolommen netjes uitlijnen. */
#bkf-tel { min-height: 40px; }
.bkf-stepper input {
  width: 52px;
  text-align: center;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
  font-family: var(--font);
  font-size: calc(14px * var(--type-scale, 1.2));
  color: var(--text);
  padding: 0 !important;
}
.bkf-stepper input::-webkit-outer-spin-button,
.bkf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bkf-info-note span { display: block; }
.bkf-extra-slots-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--font);
  font-size: calc(12px * var(--type-scale, 1.2));
  font-weight: 500;
  cursor: pointer;
}
.bkf-extra-slots-btn:hover { background: var(--hover); }

/* Tijdvak-picker (Phase C, eerste versie): de modal-inhoud "vouwt in" naar een
   picker met hover-preview van de opeenvolgende reeks. */
.bkflow-card.is-picking .bkflow-scroll,
.bkflow-card.is-picking .bkflow-footer { display: none !important; }
.bkf-picker[hidden] { display: none !important; }
.bkf-picker { padding: 22px; }
.bkf-picker-inner { animation: bkfPickIn .2s ease; }
@keyframes bkfPickIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Terug = icoon-knop (chevron) i.p.v. tekstlink — symmetrisch met de ×-sluitknop
   rechtsboven. */
.bkf-picker-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 0; margin: 0 0 14px -6px;
}
.bkf-picker-back svg { width: 20px; height: 20px; }
.bkf-picker-back:hover { color: var(--text); background: var(--surface); }
.bkf-picker-title { font-size: calc(17px * var(--type-scale, 1.2)); font-weight: 600; color: var(--text); margin: 0 0 4px; }
.bkf-picker-sub { font-size: calc(12px * var(--type-scale, 1.2)); color: var(--text-muted); margin: 0 0 16px; line-height: 1.4; }
.bkf-pick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bkf-pick-chip {
  padding: 12px 4px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-muted);
  font-family: var(--font); font-variant-numeric: tabular-nums;
  font-size: calc(12px * var(--type-scale, 1.2)); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.bkf-pick-chip.is-disabled { opacity: .3; cursor: not-allowed; }
/* Vrij slot dat geen geldige starttijd is (geen volledig blok past), maar wél
   mee mag oplichten in een hover-preview. Niet gefaded, geen pointer. */
.bkf-pick-chip.is-inert { cursor: default; }
/* Preview = solide gevulde tegels zodat het opeenvolgende blok onmiskenbaar
   zichtbaar is. (In light is --surface == --active-bg, dus een subtiele bg-shift
   was onzichtbaar — daarom een echt contrasterende vulling met --text.) */
.bkf-pick-chip.is-preview { background: var(--text) !important; color: var(--panel) !important; border-color: var(--text) !important; }
.bkf-pick-chip.is-preview-start { box-shadow: inset 0 0 0 2px var(--panel); font-weight: 700; }

/* ===================== LOGIN (Claude Design handoff) =====================
   Gecentreerde kaart, merk-logo-blok, icoon-velden, groen accent (i.p.v. de
   oranje variant uit de handoff). Mapt op de backoffice-tokens. */
.login-shell { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.login-main { display: grid; place-items: center; padding: 40px 28px; position: relative; width: 100%; }
.login-theme.theme-seg, .login-theme {
  position: fixed; bottom: 22px; right: 22px; top: auto; display: flex; gap: 6px; z-index: 10;
  background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important;
}
.login-theme .theme-seg-btn {
  width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border) !important;
  background: var(--rail) !important; color: var(--text-faint) !important; display: grid; place-items: center;
  padding: 0 !important; font-size: 0;
}
.login-theme .theme-seg-btn svg { width: 17px; height: 17px; }
.login-theme .theme-seg-btn.is-active {
  background: var(--text) !important; color: var(--panel) !important; border-color: var(--text) !important;
}
.login-card {
  width: 100%; max-width: 380px; background: none !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
}
.login-brand { display: flex; justify-content: center; margin-bottom: 30px; }
.login-logo-img { height: 74px; width: auto; display: block; }
/* Donker thema: witte logo-variant op de donkere login. */
html[data-theme="grey"] .login-logo-img { content: url(./iselmar-logo-white.png?v=2); }
.login-card h1 {
  margin: 0 0 6px; font-size: 25px; font-weight: 750; letter-spacing: -.02em; text-align: center; color: var(--text);
}
.login-card .sub { margin: 0 0 28px; color: var(--text-faint); font-size: 14.5px; text-align: center; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.lf-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 7px; }
.lf-input {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border);
  background: var(--rail); border-radius: 11px; transition: border-color .12s, box-shadow .12s;
}
.lf-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lf-input > svg { width: 17px; height: 17px; color: var(--text-faint); flex: none; }
.lf-input input {
  border: none; background: none; outline: none; flex: 1; min-width: 0; font: inherit; font-size: 14.5px; color: var(--text);
}
.lf-input input::placeholder { color: var(--text-faint); }
.lf-input .reveal { border: none; background: none; color: var(--text-faint); cursor: pointer; padding: 0; display: grid; place-items: center; }
.lf-input .reveal:hover { color: var(--text); }
.lf-submit {
  margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px;
  border-radius: 11px; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; transition: background .12s;
}
html[data-theme="grey"] .lf-submit { color: #0e0f0d; }
.lf-submit:hover { background: var(--accent-hover); }
.lf-submit svg { width: 16px; height: 16px; }
.lf-error { font-size: 13px; color: var(--danger); text-align: center; min-height: 16px; }
.login-foot { margin-top: 26px; text-align: center; font-size: 12px; color: var(--text-faint); }

/* ===================== VERHUUR per type (Fase 1 handoff) ===================== */
.rental { display: flex; flex-direction: column; }
.rental-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--rail); flex-wrap: wrap; }
.rental-summary { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.rental-summary b { color: var(--text); font-weight: 700; }
.rent-meter { flex: 1; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; max-width: 320px; display: flex; }
.rent-meter i { display: block; height: 100%; background: var(--accent); }
.rental-viewtog { margin-left: auto; display: inline-flex; gap: 4px; background: var(--surface); border-radius: 10px; padding: 4px; }
.rental-viewtog button { padding: 7px 14px; border-radius: 7px; border: none; background: none; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.rental-viewtog button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.rent-type-group { border-bottom: 1px solid var(--border); }
.rent-type-group:last-child { border-bottom: none; }
.rent-type-head { display: flex; align-items: center; gap: 14px; padding: 13px 18px; flex-wrap: wrap; }
.rent-type-icon { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--surface); color: var(--text-muted); }
.rent-type-icon svg { width: 20px; height: 20px; }
.rent-type-name { font-weight: 650; font-size: 15px; color: var(--text); }
.rent-type-name small { display: block; font-weight: 500; color: var(--text-faint); font-size: 12.5px; }
.rent-avail { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.rent-dots { display: flex; gap: 4px; }
.rent-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); }
.rent-dot.free { background: var(--border); }
.rent-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rent-count b { color: var(--text); }
.rent-count.full b { color: var(--warning); }
.btn-rent { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
[data-theme="grey"] .btn-rent { color: #0e0f0d; }
.btn-rent svg { width: 14px; height: 14px; }
.btn-rent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-rent[disabled] { background: var(--surface); border-color: var(--border); color: var(--text-faint); cursor: not-allowed; }
.rent-rows { padding: 0 18px 8px; display: flex; flex-direction: column; gap: 7px; }
.rent-row { display: grid; grid-template-columns: 1.4fr 1fr .8fr .9fr auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.rent-row:hover { border-color: var(--accent); }
.rr-name { font-weight: 650; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 9px; min-width: 0; }
.rr-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-swatch { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.rr-field { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.rr-field svg { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.rr-field b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.rent-pay { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rent-pay.ok { background: var(--accent-soft); color: var(--accent); }
.rent-pay.open { background: var(--warning-soft); color: var(--warning); }
.rr-act { color: var(--text-faint); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: none; background: none; cursor: pointer; }
.rr-act:hover { background: var(--hover); color: var(--text); }
.rr-act svg { width: 17px; height: 17px; }
.rent-free-note { padding: 4px 18px 14px; font-size: 13px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
.rent-tick { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.rent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px 18px; }
.rcard { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--panel); }
.rcard .rc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rcard .rc-top .rent-type-icon { width: 32px; height: 32px; }
.rcard .rc-top b { font-size: 14px; color: var(--text); }
.rcard .rc-bignum { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--text); }
.rcard .rc-bignum span { font-size: 15px; font-weight: 600; color: var(--text-faint); }
.rcard .rc-bar { height: 7px; border-radius: 999px; background: var(--border); margin: 12px 0; overflow: hidden; }
.rcard .rc-bar i { display: block; height: 100%; background: var(--accent); }
.rcard .rc-foot { display: flex; align-items: center; justify-content: space-between; }
.rcard .rc-foot small { color: var(--text-faint); font-size: 12px; }

/* ── Baan-tijdlijn (Bowling/Tennis/Squash/Jeu) — Fase 2 handoff ─────────── */
.tl-fadewrap { position: relative; }
/* Witte fade aan de rechterrand → toont dat de tijdlijn verder scrollt. */
.tl-fadewrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 14px; width: 56px;
  background: linear-gradient(to right, transparent, var(--panel) 82%);
  pointer-events: none; z-index: 3;
}
.tl-wrap { padding: 8px 4px 14px; overflow-x: auto; }
.tl-grid { min-width: 620px; padding-right: 40px; }
.tl-axis { position: relative; margin-left: 132px; height: 22px; }
.tl-axis span { position: absolute; top: 0; font-size: 12px; color: var(--text-faint);
  padding-left: 5px; border-left: 1px solid var(--border); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.tl-lane { display: flex; align-items: stretch; border-top: 1px solid var(--border); }
.tl-lane:last-child { border-bottom: 1px solid var(--border); }
.tl-lane .tl-name { width: 132px; flex: none; display: flex; align-items: center;
  font-size: 13.5px; font-weight: 600; color: var(--text-muted); padding: 0 12px; }
.tl-track { position: relative; flex: 1; height: 52px; }
.tl-track .tl-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.tl-block { position: absolute; top: 7px; bottom: 7px; border-radius: 8px; background: var(--accent-soft);
  border: 1px solid var(--accent); padding: 6px 10px; overflow: hidden; display: flex; flex-direction: column;
  justify-content: center; cursor: pointer; text-align: left; }
.tl-block:hover { box-shadow: 0 0 0 2px var(--accent-soft); }
.tl-block b { font-size: 12.5px; color: var(--accent); line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tl-block span { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-slot { position: absolute; top: 7px; bottom: 7px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; }
.tl-slot.is-vrij { background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; transition: border-color .12s, background .12s, color .12s; }
.tl-slot.is-vrij:hover { border-color: var(--accent); color: var(--text); background: var(--hover); }
.tl-slot.is-vrij.is-verleden { opacity: .5; }
.tl-slot.is-blok { background: var(--surface); border: 1px dashed var(--border-strong); color: var(--text-faint); font-size: 12px; }
.tl-slot.is-vol { background: var(--surface); opacity: .4; }
.tl-slot.is-verleden { background: var(--surface); opacity: .4; }
.tl-slot-lbl { pointer-events: none; }

/* ── Bowling drag&drop: visuele feedback bij slepen ───────────────────────
   .is-sleepbaar  = blok is draggable (cursor + hint)
   .is-dragging   = blok wordt op dit moment versleept (halftransparant)
   .is-droptarget = vrij slot is een geldig drop-doel (puls-border)
   .is-dragover   = vrij slot zit onder de cursor tijdens slepen (highlight) */
.tl-block.is-sleepbaar { cursor: grab; }
.tl-block.is-sleepbaar:active { cursor: grabbing; }
.tl-block.is-dragging { opacity: .35; }
.tl-slot.is-droptarget { border-style: dashed; border-color: var(--accent); }
.tl-slot.is-vrij.is-dragover { background: var(--accent-soft); border-color: var(--accent);
  border-style: solid; color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ── Blokkade-popups (keuze + periode/verhuur) ─────────────────────────── */
.modal-sub { margin: -4px 0 14px; color: var(--text-muted); font-size: 14px; }
.blok-keuze-grid { display: grid; gap: 10px; }
.blok-keuze-opt { display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.blok-keuze-opt:hover { border-color: var(--accent); background: var(--hover); }
.blok-keuze-opt strong { font-size: 15px; }
.blok-keuze-opt span { font-size: 13px; color: var(--text-muted); }
.bp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bp-note { margin: 2px 0 6px; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
/* Uniforme veldstijl voor alle inputs/selects in de blokkade-popups
   (date, time, number, select) — gelijk aan .field > input, zonder groen accent.
   appearance:none is cruciaal: anders rendert Safari/iPad de native date/time/
   number controls met OS-chrome en lijken ze ongestyled. */
.bp-field { -webkit-appearance: none !important; appearance: none !important;
  box-sizing: border-box; width: 100%; min-height: 42px;
  background: var(--surface) !important; border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important; color: var(--text) !important; font-family: var(--font) !important;
  font-size: calc(13px * var(--type-scale, 1.2)) !important; padding: 10px 12px !important;
  accent-color: var(--text-muted); }
.bp-field:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; outline: none !important; }
/* Native date/time popover-icoon themen (donker thema → wit icoon). */
.bp-field::-webkit-calendar-picker-indicator { opacity: .65; cursor: pointer; }
[data-theme="grey"] .bp-field::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; }
.bp-field::-webkit-datetime-edit { color: var(--text); }
.bp-field::-webkit-inner-spin-button, .bp-field::-webkit-outer-spin-button { opacity: 1; height: 22px; }
/* Select-pijl terugzetten (appearance:none verbergt 'm) met een themable chevron. */
select.bp-field { padding-right: 34px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; }
.bp-flabel { display: flex; flex-direction: column; gap: 6px; }
.bp-flabel > span { font-size: calc(11px * var(--type-scale, 1.2)); font-weight: 500; color: var(--text-muted); }
/* Van/Tot blokken */
.bp-vantot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.bp-vt-col { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.bp-vt-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.bp-cal, .bp-cal .iselcal-root { width: 100%; display: block; }
.bp-cal .iselcal-trigger { width: 100% !important; min-height: 42px; box-sizing: border-box; }
/* Selectie: aantal per type / banen-chips */
.bp-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.bp-section-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.bp-unit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.bp-unit-name { font-size: 14px; }
.bp-unit-name small { color: var(--text-faint); font-size: 12px; }
.bp-unit-row .bp-field { width: 84px; }
/* Banen kiezen: gebrande toggle-knoppen (geen ruwe checkbox / groen vierkant). */
.bp-baan-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-baan-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  color: var(--text-muted); font-size: 13.5px; font-weight: 500; cursor: pointer;
  user-select: none; transition: border-color .12s, background .12s, color .12s; }
.bp-baan-chip:hover { border-color: var(--accent); color: var(--text); }
.bp-baan-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.bp-baan-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
[data-theme="grey"] .bp-baan-chip:has(input:checked) { color: var(--text); }
.bp-baan-chip::before { content: ""; width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--border-strong); flex: none; transition: background .12s, border-color .12s; }
.bp-baan-chip:has(input:checked)::before { background: var(--accent); border-color: var(--accent); }

/* ── Verhuur-blokkade mini-banners ─────────────────────────────────────── */
.rent-blok-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 0; }
.rent-blok-banner { display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; line-height: 1.35;
  background: var(--warning-soft, rgba(217,119,6,.12)); border: 1px solid var(--warning, #c2620d); }
.rent-blok-banner .rbb-ic { display: flex; flex: none; color: var(--warning, #c2620d); }
.rent-blok-banner .rbb-txt { flex: 1; min-width: 0; color: var(--text); font-size: 13.5px; }
.rent-blok-banner .rbb-txt b { color: var(--text); }
.rent-blok-banner .rbb-del { flex: none; padding: 6px 12px; border-radius: 7px;
  background: var(--panel); border: 1px solid var(--border-strong); color: var(--text-muted);
  font-size: 12.5px; cursor: pointer; transition: border-color .12s, color .12s; }
.rent-blok-banner .rbb-del:hover { border-color: var(--danger, #c0453b); color: var(--danger, #c0453b); }

/* ── Geen blauwe focus-box op invoervelden (overal) ─────────────────────────
   De gebruiker wil geen blauw vierkant/gloed bij het aanklikken van een veld.
   We tonen focus subtiel via een iets donkerdere grijze rand — geen accent,
   geen box-shadow-gloed, geen extra outline-rechthoek. */
input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible,
.lf-input input:focus, .bp-field:focus {
  outline: none !important;
  box-shadow: none !important;
}
.lf-input:focus-within {
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}
.field > input:focus, .field > select:focus, .field > textarea:focus,
.bp-field:focus, .ml-input:focus, .ml-textarea:focus, .ak-input:focus {
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}

/* ── Profiel-drawer (wachtwoord + 2FA) ─────────────────────────────────── */
.prof-acc { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.prof-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
.prof-naam { font-size: 16px; font-weight: 600; color: var(--text); }
.prof-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.prof-sec { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.prof-sec-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin: 0 0 12px; }
.prof-hint { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin: 0 0 12px; }
.prof-badge-on { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--success);
  background: var(--success-soft); padding: 3px 10px; border-radius: 999px; }
.prof-qr { display: grid; place-items: center; padding: 14px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; margin: 12px auto; width: max-content; }
.prof-secret { font-size: 12.5px; color: var(--text-muted); margin: 0 0 12px; }
.prof-secret code { background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 6px; font-family: var(--font-mono, monospace); color: var(--text); letter-spacing: 1px; }

/* ── Gebruikers: bewerkbaar e-mailadres + bevestig-knop ────────────────── */
.gb-email-edit { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.gb-email-inp {
  flex: 1; min-width: 0; max-width: 260px;
  -webkit-appearance: none; appearance: none;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px;
  color: var(--text-muted); font-family: var(--font); font-size: 12.5px; padding: 5px 8px;
}
.gb-email-inp:focus { border-color: var(--border-strong); outline: none; color: var(--text); }
.gb-email-save {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--accent); border-radius: 6px; background: var(--accent-soft);
  color: var(--accent); cursor: pointer; transition: background .12s;
}
.gb-email-save:hover { background: var(--accent); color: #fff; }
[data-theme="grey"] .gb-email-save:hover { color: #0e0f0d; }

/* ── Boeking-aangemaakt / betaallink-resultaat — branded ───────────────── */
.bl-result-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 18px !important;
}
.bl-result-card .bl-card-title {
  font-family: var(--font) !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--text-faint) !important; margin: 0 !important;
}
.bl-result-head { align-items: center !important; margin-bottom: 6px !important; }
.bl-result-card .bl-result-bedrag {
  font-family: var(--font) !important; font-weight: 750 !important; letter-spacing: -.02em !important;
  font-size: calc(34px * var(--type-scale, 1)) !important; color: var(--accent) !important; margin: 2px 0 2px !important;
}
.bl-result-card .bl-result-omschr {
  font-family: var(--font) !important; font-size: 14px !important; color: var(--text-muted) !important; margin-bottom: 14px !important;
}
.bl-result-card .bl-badge {
  border-radius: 999px !important; font-family: var(--font) !important; font-weight: 600 !important;
  font-size: 12px !important; letter-spacing: 0 !important; padding: 4px 11px !important;
}
.bl-result-card .bl-mail-bevestig {
  background: var(--success-soft) !important; border: 1px solid color-mix(in oklab, var(--success) 35%, transparent) !important;
  color: var(--success) !important; font-family: var(--font) !important; font-size: 13.5px !important;
  border-radius: 10px !important; padding: 10px 12px !important; margin-bottom: 14px !important;
}
.bl-result-card .bl-mail-bevestig.bl-mail-warn {
  background: var(--warning-soft) !important; border-color: color-mix(in oklab, var(--warning) 35%, transparent) !important; color: var(--warning) !important;
}
.bl-result-card .bl-url-wrap { gap: 8px !important; margin-bottom: 12px !important; }
.bl-result-card .bl-url-input {
  font-family: var(--font) !important; font-size: 13px !important; padding: 10px 12px !important;
  background: var(--panel) !important; border: 1px solid var(--border-strong) !important; border-radius: 8px !important; color: var(--text-muted) !important;
}
.bl-result-card .bl-btn-secondary { border-radius: 8px !important; padding: 10px 14px !important; font-family: var(--font) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.bl-result-card .bl-qr-details {
  background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 10px 14px !important; margin-bottom: 14px !important;
}
.bl-result-card .bl-qr-details summary { font-family: var(--font) !important; font-weight: 600 !important; color: var(--accent) !important; font-size: 13.5px !important; }
.bl-result-card .bl-qr { background: #fff !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.bl-result-card .bl-result-hint { font-family: var(--font) !important; font-size: 12.5px !important; color: var(--text-muted) !important; line-height: 1.45 !important; }
.bl-result-card .bl-result-actions { gap: 8px !important; margin-bottom: 0 !important; }
.bl-result-card .bl-result-actions > * { flex: 1 1 0; min-width: 120px; }

/* ── Wachtwoord-instellen: rode fout-rand + eisen-checklist ────────────── */
.lf-input.is-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-soft) !important; }
.pw-req { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
/* Niet voldaan = rood (✗), voldaan = groen (✓) — directe feedback. */
.pw-req li { font-size: 12.5px; color: var(--danger); padding-left: 20px; position: relative; }
.pw-req li::before { content: "✗"; position: absolute; left: 2px; color: var(--danger); font-weight: 700; }
.pw-req li.ok { color: var(--success) !important; }
.pw-req li.ok::before { content: "✓" !important; color: var(--success) !important; }
/* Overeenkomst-melding tweede wachtwoord */
.pw-match { font-size: 12.5px; margin: 8px 0 0; padding-left: 20px; position: relative; font-weight: 500; }
.pw-match::before { position: absolute; left: 2px; font-weight: 700; }
.pw-match.ok { color: var(--success); } .pw-match.ok::before { content: "✓"; }
.pw-match.bad { color: var(--danger); } .pw-match.bad::before { content: "✗"; }

/* Rode fout-rand op .bp-field (profiel-wachtwoord e.d.) */
.bp-field.is-error { border-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-soft) !important; }

/* Bron-label in het Betaallink-overzicht (Walk-in vs Boeking) */
.bl-bron { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted); vertical-align: middle; }
.bl-bron-boeking { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ── Betaallink-overzicht in huisstijl (Inter, witte kaart, nette tabel) ── */
.bl-recent-card {
  background: var(--panel) !important; border: 1px solid var(--border) !important;
  border-radius: 14px !important; box-shadow: var(--shadow) !important; padding: 18px 20px !important;
}
.bl-recent-card .bl-card-title {
  font-family: var(--font) !important; font-size: calc(17px * var(--type-scale, 1)) !important;
  font-weight: 650 !important; letter-spacing: -.01em !important; text-transform: none !important;
  color: var(--text) !important; margin: 0 0 4px !important;
}
.bl-recent-hint { font-family: var(--font) !important; font-size: 13.5px !important; color: var(--text-muted) !important; margin: 0 0 16px !important; line-height: 1.45 !important; }
.bl-table { font-family: var(--font) !important; font-size: 13.5px !important; }
.bl-table th {
  font-family: var(--font) !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--text-faint) !important;
  border-bottom: 1px solid var(--border) !important; padding: 8px 10px !important;
}
.bl-table td { font-family: var(--font) !important; padding: 12px 10px !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; font-variant-numeric: tabular-nums; }
.bl-table td.bl-num { font-family: var(--font) !important; font-weight: 600 !important; color: var(--text) !important; }
.bl-table tr:last-child td { border-bottom: none !important; }
.bl-empty { font-family: var(--font) !important; }

/* ── Dagafsluiting in huisstijl (Inter i.p.v. Lekton/League Spartan) ───── */
.da-card-title, .da-table, .da-table th, .da-table td, .da-table td.da-num,
.da-kv, .da-kv dt, .da-kv dd, .da-totaal, .da-badge, .da-actions-hint,
.da-empty, .da-toolbar-label, .rp-toolbar-label {
  font-family: var(--font) !important;
}
.da-card-title { font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: .05em !important; color: var(--text-muted) !important; }
.da-totaal { font-weight: 750 !important; letter-spacing: -.02em !important; color: var(--text) !important; }
.da-table th { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important;
  text-transform: uppercase !important; color: var(--text-faint) !important; }
.da-table td { color: var(--text) !important; font-variant-numeric: tabular-nums; }
.da-table td.da-num { font-weight: 600 !important; color: var(--text) !important; }
.da-kv dt { color: var(--text-muted) !important; }
.da-kv dd { color: var(--text) !important; font-variant-numeric: tabular-nums; }
.da-actions-hint { color: var(--text-muted) !important; }

/* ── Grootboekrekeningen-pagina ────────────────────────────────────────── */
.gbk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 4px; }
.gbk-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; }
.gbk-card-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 12px; }
.gbk-grid { display: flex; flex-direction: column; gap: 12px; }
.gbk-save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; }
.gbk-save-status { color: var(--text-muted); font-size: 13px; }
/* Brede kaart (per activiteit) over volle breedte, met meerdere kolommen velden */
.gbk-card-wide { grid-column: 1 / -1; }
.gbk-card-wide .gbk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.gbk-card-sub { color: var(--text-muted); font-size: 12.5px; margin: -6px 0 12px; }
.gbk-meta { font-style: normal; font-size: 11px; color: var(--text-muted); font-weight: 500; }
/* Per activiteit: reserverings- (17xx) + opbrengstrekening (85xx/86xx) + BTW-tarief */
.gbk-act-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.gbk-act-row { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.gbk-act-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13.5px; margin-bottom: 10px; }
.gbk-act-row .gbk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.gbk-act-badge { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.gbk-act-badge.hoog { background: rgba(217,119,6,.14); color: #B45309; }

/* ═══════════════════════════════════════════════════════════════════════════
   SQUARE-UI TOKEN-REMAP — backofficev2 redesign.
   Byte-exact palet uit square-ui templates/dashboard-3/app/globals.css
   (shadcn "neutral": monochroom, near-black primary, blauwe chart-schaal, radius 10px).
   Staat bewust ná de originele thema-blokken (zelfde specificiteit (0,1,1) → wint),
   en (0,1,1) > tenant-:root (0,1,0). Legacy-aliassen (--muted/--navy/--line…) verwijzen
   via var() naar deze basis-tokens en erven het nieuwe palet automatisch.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --su-chart-1: oklch(0.809 0.105 251.813);
  --su-chart-2: oklch(0.623 0.214 259.815);
  --su-chart-3: oklch(0.546 0.245 262.881);
  --su-chart-4: oklch(0.488 0.243 264.376);
  --su-chart-5: oklch(0.424 0.199 265.638);
  --accent-fg: oklch(0.985 0 0);
  --bg: oklch(1 0 0);
  --panel: oklch(1 0 0);
  --surface: oklch(0.97 0 0);
  --rail: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --border-strong: oklch(0.87 0 0);
  --text: oklch(0.145 0 0);
  --text-muted: oklch(0.556 0 0);
  --text-faint: oklch(0.708 0 0);
  --nav-link: oklch(0.556 0 0);
  --hover: oklch(0.97 0 0);
  --active-bg: oklch(0.97 0 0);
  --accent: oklch(0.205 0 0);
  --accent-hover: oklch(0.30 0 0);
  --accent-soft: oklch(0.97 0 0);
  --danger: oklch(0.577 0.245 27.325);
  --danger-soft: oklch(0.577 0.245 27.325 / 0.10);
  --modal-overlay: oklch(0.145 0 0 / 0.45);
  --shadow: 0 1px 3px oklch(0.145 0 0 / 0.08), 0 1px 2px oklch(0.145 0 0 / 0.05);
  --radius: 0.625rem;
  --radius-sm: calc(0.625rem - 4px);
  --radius-lg: calc(0.625rem + 4px);
  --radius-xl: calc(0.625rem + 8px);
}
html[data-theme="grey"] {
  --su-chart-1: oklch(0.809 0.105 251.813);
  --su-chart-2: oklch(0.623 0.214 259.815);
  --su-chart-3: oklch(0.546 0.245 262.881);
  --su-chart-4: oklch(0.488 0.243 264.376);
  --su-chart-5: oklch(0.424 0.199 265.638);
  --accent-fg: oklch(0.205 0 0);
  --bg: oklch(0.145 0 0);
  --panel: oklch(0.205 0 0);
  --surface: oklch(0.269 0 0);
  --rail: oklch(0.205 0 0);
  --border: oklch(1 0 0 / 0.10);
  --border-strong: oklch(1 0 0 / 0.15);
  --text: oklch(0.985 0 0);
  --text-muted: oklch(0.708 0 0);
  --text-faint: oklch(0.556 0 0);
  --nav-link: oklch(0.708 0 0);
  --hover: oklch(0.269 0 0);
  --active-bg: oklch(0.371 0 0);
  --accent: oklch(0.87 0 0);
  --accent-hover: oklch(0.92 0 0);
  --accent-soft: oklch(0.269 0 0);
  --danger: oklch(0.704 0.191 22.216);
  --danger-soft: oklch(0.704 0.191 22.216 / 0.16);
  --modal-overlay: oklch(0 0 0 / 0.55);
  --shadow: 0 1px 3px oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.3);
  --radius: 0.625rem;
  --radius-sm: calc(0.625rem - 4px);
  --radius-lg: calc(0.625rem + 4px);
  --radius-xl: calc(0.625rem + 8px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SQUARE-UI SHELL + LOGIN — backofficev2 redesign (vanilla, CSP-veilig).
   Plain-class selectors, ná de originele regels → winnen op gelijke specificiteit.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --su-ease: cubic-bezier(.2,.6,.2,1); }

/* ── App-shell layout ── */
.app-shell { background: var(--bg); }
.app-body { display:flex; min-height:100vh; background: var(--bg); }
.app-sidebar {
  width:256px; flex:0 0 256px; background: var(--rail);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  padding:14px 12px; gap:2px; min-height:100vh;
}
.app-content { flex:1 1 auto; display:flex; flex-direction:column; min-width:0; background: var(--bg); }
.app-topbar {
  display:flex; align-items:center; gap:12px; min-height:56px;
  padding:10px 24px; border-bottom:1px solid var(--border); background: var(--bg);
  position:sticky; top:0; z-index:20;
}
.app-main { flex:1 1 auto; padding:24px; min-width:0; animation: suMainIn .3s var(--su-ease) both; }

/* ── Sidebar head + user ── */
.sidebar-head { padding:4px 6px 10px; }
.sidebar-logo { height:26px; width:auto; display:block; margin:2px 4px 12px; }
.sidebar-user {
  display:flex; align-items:center; gap:10px; padding:8px;
  border:1px solid var(--border); border-radius: var(--radius); background: var(--panel);
}
.sidebar-avatar {
  width:30px; height:30px; flex:0 0 auto; border-radius:50%;
  background: var(--accent); color: var(--accent-fg);
  display:flex; align-items:center; justify-content:center; font:600 12px var(--font); text-transform:uppercase;
}
.sidebar-user-text { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.sidebar-user-text strong { font:600 13px var(--font); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-text span { font-size:11.5px; color:var(--text-muted); }
.app-logout {
  margin-left:auto; flex:0 0 auto; width:30px; height:30px; border-radius: var(--radius-sm);
  border:0; background:transparent; color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .12s var(--su-ease), color .12s var(--su-ease);
}
.app-logout:hover { background: var(--hover); color: var(--text); }

/* ── Module nav ── */
.module-nav { display:flex; flex-direction:column; gap:2px; overflow-y:auto; padding-top:4px; }
.nav-label { font:600 11px var(--font); text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); padding:12px 10px 4px; }
.module-btn {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:8px 10px; border:0; border-radius: var(--radius-sm); background:transparent;
  color:var(--nav-link); font:500 13.5px var(--font); cursor:pointer;
  transition: background .12s var(--su-ease), color .12s var(--su-ease);
}
.module-btn:hover { background: var(--hover); color: var(--text); }
.module-btn.is-active { background: var(--active-bg); color: var(--text); font-weight:600; }
.module-ico { width:18px; height:18px; flex:0 0 auto; opacity:.9; }
.nav-divider { height:1px; background: var(--border); margin:8px 4px; }

/* ── Topbar ── (zichtbaarheid van de toggle wordt door de bestaande
   drawer-CSS geregeld: zichtbaar < 1100px, verborgen daarboven) */
.sidebar-toggle { width:34px; height:34px; border:1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); cursor:pointer; }
@media (max-width: 1099px) { .sidebar-toggle { display:inline-flex; align-items:center; justify-content:center; } }

/* ── Login (square-ui) ── */
.login-shell { min-height:100vh; background: var(--bg); }
.login-main { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; }
.login-card {
  width:100%; max-width:380px; background: var(--panel);
  border:1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow); padding:32px 30px;
  animation: suCardIn .45s var(--su-ease) both;
}
.login-brand { display:flex; justify-content:center; margin-bottom:18px; }
.login-logo-img { height:34px; width:auto; }
.login-card h1 { font:600 22px var(--font); color:var(--text); text-align:center; margin:0 0 6px; letter-spacing:-.01em; }
.login-card .sub { font:400 13.5px var(--font); color:var(--text-muted); text-align:center; margin:0 0 22px; }
.login-form { display:flex; flex-direction:column; gap:14px; }
.lf-field { display:flex; flex-direction:column; gap:6px; }
.lf-field label { font:500 12.5px var(--font); color:var(--text); }
.lf-input {
  display:flex; align-items:center; gap:8px; padding:0 12px; height:40px;
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  transition: border-color .14s var(--su-ease), box-shadow .14s var(--su-ease);
}
.lf-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lf-input svg { width:17px; height:17px; flex:0 0 auto; color:var(--text-faint); }
.lf-input input { flex:1; min-width:0; border:0; background:transparent; outline:0; font:400 14px var(--font); color:var(--text); }
.lf-input input::placeholder { color:var(--text-faint); }
.lf-input .reveal { border:0; background:transparent; color:var(--text-faint); cursor:pointer; padding:4px; display:flex; }
.lf-input .reveal:hover { color:var(--text); }
.lf-submit {
  margin-top:6px; height:42px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius: var(--radius); background: var(--accent); color: var(--accent-fg);
  font:600 14px var(--font); cursor:pointer; transition: opacity .14s var(--su-ease), transform .08s var(--su-ease);
}
.lf-submit:hover { opacity:.92; }
.lf-submit:active { transform: translateY(1px); }
.lf-submit svg { width:18px; height:18px; }
.login-err { font:500 12.5px var(--font); color:var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding:8px 10px; }
.login-foot { margin-top:20px; text-align:center; font:400 11.5px var(--font); color:var(--text-faint); }
.theme-seg { display:inline-flex; gap:2px; padding:3px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); }
.theme-seg.login-theme { position:absolute; top:20px; right:20px; }
.theme-seg-btn { width:30px; height:28px; border:0; border-radius: var(--radius-sm); background:transparent; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background .12s, color .12s; }
.theme-seg-btn svg { width:16px; height:16px; }
.theme-seg-btn[aria-pressed="true"], .theme-seg-btn.is-active { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

/* ── Motion (subtiel, reduced-motion-veilig) ── */
@keyframes suCardIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
@keyframes suMainIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
/* (Mobiele drawer wordt door de bestaande .app-sidebar.is-open + #sidebar-backdrop
   afgehandeld — geen losse nav-open-drawer hier, dat botste met de z-index.) */
@media (prefers-reduced-motion: reduce) {
  .login-card, .app-main, .module-btn, .lf-input, .app-logout, .lf-submit, .app-sidebar, .sidebar-backdrop { animation:none !important; transition:none !important; }
}

/* ═══ SQUARE-UI GENERIEKE CONTROLS (form-velden + knoppen + spinner) ═══
   Lage specificiteit (element/één-klasse) → module-specifieke regels winnen waar
   ze bestaan; dit is de gedeelde basislaag voor alle 16 modules. */
.app-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
.app-main select, .app-main textarea {
  font: 400 13.5px var(--font); color: var(--text); background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 11px;
  transition: border-color .14s var(--su-ease), box-shadow .14s var(--su-ease);
}
.app-main input:focus, .app-main select:focus, .app-main textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.app-main input::placeholder, .app-main textarea::placeholder { color: var(--text-faint); }
/* Knoppen */
.btn { font: 500 13px var(--font); border-radius: var(--radius-sm); padding: 8px 14px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); cursor: pointer; transition: background .12s var(--su-ease), border-color .12s var(--su-ease), opacity .12s; display:inline-flex; align-items:center; gap:7px; }
.btn:hover { background: var(--hover); }
.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { opacity: .9; background: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn-link { background: transparent; border: 0; color: var(--accent); padding: 4px 2px; font-weight: 500; }
.btn-link:hover { text-decoration: underline; }
.btn:disabled, .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
/* Spinner */
.spin { border: 2px solid var(--border); border-top-color: var(--accent); }

/* ═══ SQUARE-UI RAPPORTAGE-/DATA-MODULES (rap-*, da-*, gbk-*) — blauwdruk ═══
   Dekt dagafsluiting, btw, toeristenbelasting, mous, grootboek in één keer. */
.rap-wrap { max-width: 1120px; }
.rap-h { font: 600 19px var(--font); color: var(--text); letter-spacing: -.015em; margin: 0 0 4px; }
.rap-intro { font: 400 13.5px var(--font); color: var(--text-muted); margin: 0 0 18px; max-width: 72ch; line-height: 1.55; }
/* Filterbar */
.rap-form, .da-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; }
.rap-form label { display: flex; flex-direction: column; gap: 5px; font: 500 12px var(--font); color: var(--text-muted); }
/* Stat-cards (rap-sum) */
.rap-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rap-sum > div { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; transition: border-color .14s var(--su-ease); }
.rap-sum > div:hover { border-color: var(--border-strong); }
.rap-sum > div span { font: 500 12px var(--font); color: var(--text-muted); }
.rap-sum > div strong { font: 600 23px var(--font); color: var(--text); letter-spacing: -.02em; }
/* Datatable */
.rap-table, .da-table { width: 100%; border-collapse: collapse; font: 400 13px var(--font); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rap-table thead th, .da-table thead th { text-align: left; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.rap-table td, .da-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.rap-table tbody tr:last-child td, .da-table tbody tr:last-child td { border-bottom: 0; }
.rap-table tbody tr:hover, .da-table tbody tr:hover { background: var(--hover); }
.rap-table .num, .da-table .num, .app-main td.num, .app-main th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rap-toel { font: 400 12.5px var(--font); color: var(--text-muted); margin-top: 10px; }
/* Dagafsluiting + grootboek cards */
.da-card, .gbk-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.da-grid, .gbk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.da-card-title, .gbk-card-title { font: 600 14px var(--font); color: var(--text); margin: 0 0 10px; }
.da-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font: 400 13px var(--font); color: var(--text); border-bottom: 1px solid var(--border); }
.da-totaal { font-weight: 700; border-top: 2px solid var(--border-strong); margin-top: 4px; padding-top: 8px; }
.da-num { font-variant-numeric: tabular-nums; }
.da-badge, .da-badge-ok, .da-badge-pending, .ml-badge { font: 600 10.5px var(--font); text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; display: inline-block; }
.da-badge-ok { background: var(--success-soft); color: var(--success); }
.da-badge-pending { background: var(--warning-soft); color: var(--warning); }
.da-empty { color: var(--text-muted); font: 400 13px var(--font); padding: 18px; text-align: center; }
/* Errors */
.ak-err, .form-err { font: 500 12.5px var(--font); color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 14px; }

/* ═══ MODAL — mobiel hoogte-begrensd + scrollbaar, footer-knop altijd in beeld ═══ */
@media (max-width: 719px) {
  .modal { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; }
  .modal-inner, .modal-inner.modal-slide {
    display: flex !important; flex-direction: column !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 92dvh !important; padding: 0 !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    border-bottom: 0 !important;
  }
  .modal-scroll { flex: 1 1 auto; overflow-y: auto; padding: 22px 18px 14px; -webkit-overflow-scrolling: touch; }
  .modal-footer { position: sticky; bottom: 0; flex-shrink: 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
}
/* Modal form-controls square-ui (modals staan buiten .app-main → eigen regels) */
.modal-inner input:not([type=checkbox]):not([type=radio]):not([type=range]), .modal-inner select, .modal-inner textarea {
  font: 400 14px var(--font); color: var(--text); background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 11px; width: 100%; box-sizing: border-box;
  transition: border-color .14s var(--su-ease), box-shadow .14s var(--su-ease);
}
.modal-inner input:focus, .modal-inner select:focus, .modal-inner textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-inner input::placeholder, .modal-inner textarea::placeholder { color: var(--text-faint); }
.modal-inner label { font: 500 12.5px var(--font); color: var(--text); }
.modal-footer .btn-primary { min-width: 130px; justify-content: center; }

/* ═══ ACTIVITEITEN slot-grid square-ui (verving het grijs) ═══ */
.banen-vrij, .tl-slot.is-vrij, .ag-slot {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); cursor: pointer;
  transition: border-color .12s var(--su-ease), background .12s var(--su-ease), box-shadow .12s var(--su-ease);
}
.banen-vrij:hover, .tl-slot.is-vrij:hover, .ag-slot:hover:not(.is-selected) { border-color: var(--accent); background: var(--hover); }
.banen-vrij.is-selected, .tl-slot.is-selected, .ag-slot.is-selected, .banen-cell.is-selected {
  border: 1px solid var(--accent) !important; background: var(--accent-soft) !important;
  box-shadow: none !important; color: var(--text) !important; font-weight: 600;
}
.banen-geboekt { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); }
.banen-vol, .tl-slot.is-vol { background: var(--surface); color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: not-allowed; }
.banen-blok, .tl-slot.is-blok { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--hover) 6px, var(--hover) 12px); color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tl-slot.is-verleden { opacity: .5; }
.banen-empty-cell { background: transparent; border: 0; }
.banen-hed { color: var(--text-muted); font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .04em; }

/* Twee-staps boeken — actiebalk boven de planning */
.act-boekbar {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 10px 14px; background: var(--panel);
  border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow); animation: suMainIn .22s var(--su-ease) both;
}
.act-boekbar .abk-txt { font: 500 13px var(--font); color: var(--text); }
.act-boekbar .abk-txt b { font-weight: 700; }
.act-boekbar .btn-primary { margin-left: auto; }
/* Annuleer + Boeken even groot: gelijke breedte + gecentreerd, en de ghost een zichtbare
   rand zodat hij als even grote knop oogt naast de gevulde Boeken-knop. */
.act-boekbar .btn-ghost, .act-boekbar .btn-primary {
  min-width: 104px; justify-content: center;
  padding: 9px 14px; font-size: 13px; line-height: 1.2; min-height: 40px;
}
.act-boekbar .btn-ghost { border-color: var(--border-strong); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .act-boekbar { animation: none !important; } .banen-vrij, .tl-slot, .ag-slot { transition: none !important; } }

/* ═══ BOEK-POPUP (.bkflow) — compacter + op mobiel sticky in beeld ═══ */
.bkflow.bkflow-card { max-width: min(480px, 100vw); }
@media (max-width: 719px) {
  .bkflow-overlay { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; overflow: hidden !important; }
  .bkflow.bkflow-card {
    display: flex !important; flex-direction: column !important;
    width: 100% !important; max-width: 100% !important;
    min-height: 0 !important; max-height: 88dvh !important; margin: 0 !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    border-bottom: 0 !important; overflow: hidden !important;
    animation: suSheetIn .24s var(--su-ease) both;
  }
  .bkflow-scroll { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 18px 16px 12px !important; min-height: 0 !important; }
  .bkflow-footer {
    position: sticky !important; bottom: 0; flex-shrink: 0;
    background: var(--panel); border-top: 1px solid var(--border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .bkflow-footer .bkf-submit, .bkflow-footer .btn-primary { width: 100%; justify-content: center; }
}
@keyframes suSheetIn { from { transform: translateY(14px); opacity: .85; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bkflow.bkflow-card { animation: none !important; } }

/* ═══ RESTAURANT chrome (rp-*) square-ui — status-kleuren (--rest-*) blijven semantisch ═══ */
.rp-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.rp-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rp-toolbar-left, .rp-toolbar-ks { display: flex; align-items: center; gap: 8px; }
.rp-segmented, .segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.rp-segmented button, .segmented button { border: 0; background: transparent; color: var(--text-muted); font: 500 13px var(--font); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s var(--su-ease), color .12s var(--su-ease); }
.rp-segmented button:hover, .segmented button:hover { color: var(--text); }
.rp-segmented button.is-active, .rp-segmented button[aria-selected="true"], .rp-segmented button.p,
.segmented button.is-active, .segmented button[aria-selected="true"], .segmented button.p {
  background: var(--panel); color: var(--text); box-shadow: var(--shadow); font-weight: 600;
}
.rp-icon-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s var(--su-ease), color .12s, border-color .12s; }
.rp-icon-btn:hover { background: var(--hover); color: var(--text); border-color: var(--border-strong); }
.rp-icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); }
.rp-empty, .rpg-empty { color: var(--text-muted); font: 400 13.5px var(--font); text-align: center; padding: 32px 16px; }
.rp-aside-title { font: 600 12px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: 0 0 8px; }
.rp-lijst-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); margin-bottom: 8px; transition: border-color .12s var(--su-ease); }
.rp-lijst-row:hover { border-color: var(--border-strong); }
.rp-lijst-bijz { color: var(--text-muted); font-size: 12.5px; }
.rp-stats-mini { display: flex; gap: 8px; flex-wrap: wrap; }
.rpg-kchip, .rpg-rg-count, .rpg-slot-count, .rpg-row-num { font: 600 11px var(--font); padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--text-muted); }
.rpg-request-group-head, .rpg-row-head { font: 600 12.5px var(--font); color: var(--text); }
.rpg-request { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ═══ BETAALLINK (bp-/bl-) square-ui ═══ */
.bl-card, .bp-section { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.bl-card-title, .bp-section-head { font: 600 14px var(--font) !important; color: var(--text) !important; }
.bp-field { display: flex; flex-direction: column; gap: 5px; }
.bp-flabel { font: 500 12.5px var(--font) !important; color: var(--text-muted) !important; }
.bl-btn-secondary { font: 500 13px var(--font) !important; border: 1px solid var(--border-strong) !important; background: var(--panel) !important; color: var(--text) !important; border-radius: var(--radius-sm) !important; padding: 8px 14px !important; cursor: pointer; }
.bl-btn-secondary:hover { background: var(--hover) !important; }
.bl-num { font-variant-numeric: tabular-nums; color: var(--text) !important; }
.bp-baan-chip, .blok-keuze-opt { border: 1px solid var(--border) !important; background: var(--panel) !important; color: var(--text) !important; border-radius: 999px !important; padding: 5px 12px !important; cursor: pointer; transition: border-color .12s, background .12s; }
.bp-baan-chip:hover, .blok-keuze-opt:hover { border-color: var(--accent) !important; }
.bp-baan-chip.is-active, .bp-baan-chip[aria-pressed="true"], .blok-keuze-opt.is-active { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--text) !important; font-weight: 600; }
.bp-note, .bl-mail-bevestig { color: var(--text-muted) !important; font-size: 12.5px !important; }

/* ═══ QR-SCANNER (scan-*) square-ui ═══ */
.scan-page-title { font: 600 19px var(--font) !important; color: var(--text) !important; letter-spacing: -.015em; }
.scan-page-hint, .scan-action-sub { color: var(--text-muted) !important; font: 400 13px var(--font) !important; }
.scan-page-host { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.scan-row, .scan-match, .scan-no-match { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.scan-match { border-color: color-mix(in oklch, var(--success) 40%, var(--border)) !important; }
.scan-no-match { border-color: color-mix(in oklch, var(--danger) 40%, var(--border)) !important; }
.scan-match-badge { font: 600 10.5px var(--font) !important; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px !important; border-radius: 999px !important; background: var(--success-soft) !important; color: var(--success) !important; }
.scan-inname-btn { background: var(--accent) !important; color: var(--accent-fg) !important; border: 0 !important; border-radius: var(--radius-sm) !important; font: 600 13px var(--font) !important; padding: 9px 16px !important; cursor: pointer; }
.scan-inname-err { color: var(--danger) !important; background: var(--danger-soft) !important; border-radius: var(--radius-sm) !important; padding: 8px 11px !important; }

/* ═══ ADMIN — beheer / api-keys / marketing (koppelingen) square-ui ═══ */
.beheer-section, .beheer-panel { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; margin-bottom: 14px; overflow: hidden; }
.beheer-section-head { font: 600 14px var(--font) !important; color: var(--text) !important; padding: 13px 16px !important; border-bottom: 1px solid var(--border) !important; background: var(--panel) !important; }
.beheer-section-body { padding: 16px !important; }
.beheer-section-body--flush { padding: 0 !important; }
.beheer-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.beheer-table { width: 100%; border-collapse: collapse; font: 400 13px var(--font); }
.beheer-table th { text-align: left; font: 600 11px var(--font) !important; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint) !important; padding: 9px 14px !important; border-bottom: 1px solid var(--border) !important; background: var(--surface) !important; }
.beheer-table td { padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; }
.beheer-table tbody tr:hover { background: var(--hover) !important; }
.beheer-table-hint, .beheer-tiers-hint { color: var(--text-muted) !important; font-size: 12px !important; }
.beheer-row-btn { border: 1px solid var(--border-strong) !important; background: var(--panel) !important; color: var(--text) !important; border-radius: var(--radius-sm) !important; padding: 5px 10px !important; font: 500 12.5px var(--font) !important; cursor: pointer; }
.beheer-row-btn:hover { background: var(--hover) !important; }
.beheer-row-del:hover { color: var(--danger) !important; border-color: var(--danger) !important; }
.beheer-empty { color: var(--text-muted) !important; text-align: center; padding: 22px !important; font: 400 13px var(--font) !important; }
.beheer-num { font-variant-numeric: tabular-nums; }
.beheer-save-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; background: var(--panel) !important; border-top: 1px solid var(--border) !important; }
.beheer-tiers-title { font: 600 13px var(--font) !important; color: var(--text) !important; }
.beheer-time-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* api-keys */
.ak-input { font: 400 13.5px var(--font) !important; color: var(--text) !important; background: var(--panel) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius-sm) !important; padding: 8px 11px !important; }
.ak-err { color: var(--danger) !important; background: var(--danger-soft) !important; border-radius: var(--radius-sm) !important; padding: 8px 11px !important; }
.ak-empty { color: var(--text-muted) !important; text-align: center; padding: 22px !important; }
.ak-rev { color: var(--text-muted) !important; cursor: pointer; }
/* marketing / e-mail-templates (ml-) */
.ml-shell { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.ml-sidebar { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 8px; }
.ml-textarea, .ml-textarea-html { font: 400 13px var(--font-mono) !important; color: var(--text) !important; background: var(--panel) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius-sm) !important; padding: 10px !important; }
.ml-badge, .ml-badge-off, .ml-badge-default { font: 600 10.5px var(--font) !important; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px !important; border-radius: 999px !important; }
.ml-badge { background: var(--success-soft) !important; color: var(--success) !important; }
.ml-badge-off { background: var(--surface) !important; color: var(--text-muted) !important; }
.ml-badge-default { background: var(--accent-soft) !important; color: var(--text) !important; }
.ml-empty { color: var(--text-muted) !important; text-align: center; padding: 22px !important; }
.ml-ph-chip { font: 500 11.5px var(--font-mono) !important; background: var(--surface) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; padding: 2px 7px !important; cursor: pointer; }
.ml-ph-chip:hover { border-color: var(--accent) !important; color: var(--text) !important; }
@media (max-width: 719px) { .ml-shell { grid-template-columns: 1fr; } }

/* ═══ Ingebedde module (payroll / arrangementen als iframe in de shell) ═══ */
.app-main--embed { padding: 0 !important; display: flex; }
.module-embed { width: 100%; flex: 1 1 auto; min-height: calc(100dvh - 57px); border: 0; display: block; background: var(--bg); }
.gbk-act-badge.laag { background: rgba(5,150,105,.14); color: #047857; }

/* ═══ Funnel-chart (Statistieken) — square-ui horizontale bars ═══ */
.fchart-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); padding: 18px 20px; margin: 4px 0 18px; }
.fchart-title { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); text-transform: uppercase; margin: 0 0 14px; }
.fchart-row { display: grid; grid-template-columns: 150px 1fr 46px; align-items: center; gap: 12px; margin: 0 0 9px; }
.fchart-row:last-child { margin-bottom: 0; }
.fchart-lbl { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fchart-track { position: relative; height: 26px; background: var(--surface, rgba(0,0,0,.04)); border-radius: 7px; overflow: hidden; }
.fchart-bar { height: 100%; min-width: 2px; background: var(--su-chart-2, #2563eb); border-radius: 7px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; transform-origin: left center; animation: fchartGrow .55s cubic-bezier(.2,.6,.2,1) both; animation-delay: calc(var(--fc-i, 0) * 70ms); }
.fchart-val { font-size: 11px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; opacity: .96; }
.fchart-pct { font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
@keyframes fchartGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 719px) { .fchart-row { grid-template-columns: 96px 1fr 40px; gap: 8px; } .fchart-lbl { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .fchart-bar { animation: none !important; } }

/* ──────────────────────────────────────────────────────────────────────────
   MOTION-STARTER backoffice v2 (jun 2026) — subtiel, communiceert (waar komt
   dit vandaan / wat verandert / wat hoort bij wat). Alleen transform+opacity,
   ease-out-expo, micro 150ms / entrance ~320ms. Volledig uit bij
   prefers-reduced-motion (onderaan). ui-motion-skill-conform.
   ────────────────────────────────────────────────────────────────────────── */
:root { --bo-ease: cubic-bezier(0.16, 1, 0.3, 1); --bo-dur-enter: 320ms; --bo-dur-micro: 150ms; }

@keyframes boSheetUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes boFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes boToastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* #1 Modal-enter — de boekform-sheet (.bkflow.bkflow-card) heeft al slideInRight
   + reduced-motion-guard; hier alleen de generieke modal: backdrop-fade + (mobiel)
   bottom-sheet-up, want die had op <720px nog geen entrance. */
.modal:not([hidden]) { animation: boFade 200ms ease both; }
@media (max-width: 719px) {
  .modal:not([hidden]) .modal-inner { animation: boSheetUp var(--bo-dur-enter) var(--bo-ease) both; }
}

/* #2 Toast/statuswissel — #iv-toast (hidden→zichtbaar). */
.iv-toast:not([hidden]) { animation: boToastIn 280ms var(--bo-ease) both; }

/* #3 Chip/segment-micro-interactie — tactiele press + zachte kleurtransitie. */
.bkf-baan-chip, .bk-seg-btn, .theme-seg-btn, .rp-seg-btn {
  transition: transform var(--bo-dur-micro) var(--bo-ease), background-color var(--bo-dur-micro) ease, color var(--bo-dur-micro) ease, border-color var(--bo-dur-micro) ease;
}
.bkf-baan-chip:active, .bk-seg-btn:active, .theme-seg-btn:active, .rp-seg-btn:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .modal:not([hidden]), .modal:not([hidden]) .modal-inner, .iv-toast:not([hidden]) { animation: none !important; }
  .bkf-baan-chip, .bk-seg-btn, .theme-seg-btn, .rp-seg-btn { transition: none !important; }
  .bkf-baan-chip:active, .bk-seg-btn:active, .theme-seg-btn:active, .rp-seg-btn:active { transform: none !important; }
}

/* #59 Rittenkaart-knip-herinnering bij scan-uitgifte — opvallend, actie vereist. */
.scan-rittenkaart-check {
  margin: 10px 0 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--accent-soft, rgba(33,167,205,0.14));
  color: var(--accent, #21A7CD);
  border: 1px solid var(--accent, #21A7CD);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}

/* ── Connector-dashboards (Jachthaven / Kamers) — read-only, backoffice-look ── */
.dash{ padding:22px 26px 48px; max-width:1120px; margin:0 auto; }
.dash-head{ margin:0 0 18px; }
.dash-head h1{ font:600 22px var(--font); color:var(--text); margin:0; }
.dash-head p{ color:var(--text-muted); font-size:13px; margin:4px 0 0; }
.dash-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 14px; }
.dash-kpi{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.dash-kpi .v{ font:700 22px var(--font); letter-spacing:-.02em; color:var(--text); }
.dash-kpi .k{ color:var(--text-muted); font-size:12px; margin-top:3px; }
.dash-sub{ font:600 12px var(--font); letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin:18px 0 8px; }
.dash-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:0 0 16px; }
.dash-card-h{ font:600 14px var(--font); color:var(--text); padding:13px 16px; border-bottom:1px solid var(--border); }
.dash-tbl-wrap{ overflow-x:auto; }
.dash-table{ width:100%; border-collapse:collapse; font-size:13px; }
.dash-table th{ text-align:left; font-weight:600; color:var(--text-muted); padding:9px 16px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--panel); }
.dash-table td{ padding:9px 16px; border-bottom:1px solid var(--border); color:var(--text); white-space:nowrap; }
.dash-table tr:last-child td{ border-bottom:0; }
.dash-err{ background:rgba(220,38,38,.10); color:var(--danger); border:1px solid var(--danger); border-radius:var(--radius); padding:14px 16px; }
.dash-foot{ color:var(--text-faint); font-size:12px; margin-top:8px; }
.dash-note{ display:flex; align-items:flex-start; gap:10px; background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius); padding:11px 14px; margin:0 0 18px; font-size:13px; color:var(--text); line-height:1.45; }
.dash-note--warn{ background:var(--warning-soft); border-color:var(--warning); }
.dash-note-ico{ flex:0 0 18px; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#fff; font:700 11px var(--font); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.dash-note--warn .dash-note-ico{ background:var(--warning); }
.dash-note strong{ font-weight:700; }
@media (max-width:760px){ .dash{ padding:16px 14px 80px; } .dash-table th,.dash-table td{ padding:8px 10px; } }

/* ── Verblijven: planbord + lijst (operationele VIPS-weergave) ── */
.vbx{ padding:22px 26px 60px; max-width:1180px; margin:0 auto; }
.vbx-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 18px; }
.seg{ display:inline-flex; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px; }
.seg button{ font:inherit; font-size:13px; font-weight:600; color:var(--text-muted); background:none; border:0; padding:7px 16px; border-radius:999px; cursor:pointer; transition:color .15s, background .15s; }
.seg button.is-on{ background:var(--panel); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.vbx-weeknav{ display:inline-flex; align-items:center; gap:6px; }
.vbx-weeknav .wk{ font-size:13px; font-weight:600; color:var(--text); min-width:172px; text-align:center; }
.vbx-navbtn{ width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; display:grid; place-items:center; }
.vbx-navbtn:hover{ background:var(--hover); }
.vbx-navbtn svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.vbx-today{ font-size:12.5px; color:var(--accent); background:none; border:0; cursor:pointer; font-weight:600; padding:6px 8px; }
.vbx-search{ flex:1; min-width:200px; max-width:340px; font:inherit; font-size:13.5px; padding:9px 13px; border-radius:10px; border:1px solid var(--border); background:var(--panel); color:var(--text); }
.vbx-search::placeholder{ color:var(--text-faint); }
.vbx-spacer{ flex:1; }
.vbx-occ{ font-size:12.5px; color:var(--text-muted); white-space:nowrap; }
.vbx-occ b{ color:var(--text); font-weight:700; }
.vbx-legend{ display:inline-flex; gap:14px; font-size:12px; color:var(--text-muted); align-items:center; }
.vbx-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }
.pb{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius,12px); overflow:hidden; }
.pb-scroll{ overflow-x:auto; }
.pb-grid{ min-width:680px; }
.pb-head, .pb-row{ display:grid; grid-template-columns:84px 1fr; }
.pb-head{ position:sticky; top:0; background:var(--rail); border-bottom:1px solid var(--border); z-index:2; }
.pb-corner{ padding:10px 12px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); border-right:1px solid var(--border); }
.pb-days{ display:grid; grid-template-columns:repeat(7,1fr); }
.pb-day{ padding:9px 4px; text-align:center; font-size:12px; color:var(--text-muted); border-right:1px solid var(--border); }
.pb-day:last-child{ border-right:0; }
.pb-day b{ display:block; color:var(--text); font-size:12.5px; }
.pb-day.is-weekend{ background:var(--hover); }
.pb-day.is-now b{ color:var(--accent); }
.pb-day.is-now{ box-shadow:inset 0 -2px 0 var(--accent); }
.pb-row{ border-bottom:1px solid var(--border); }
.pb-row:last-child{ border-bottom:0; }
.pb-room{ display:flex; align-items:center; padding:0 12px; font-size:13px; font-weight:600; color:var(--text); border-right:1px solid var(--border); background:var(--rail); }
.pb-track{ position:relative; height:40px; background:repeating-linear-gradient(to right, transparent 0, transparent calc(100%/7 - 1px), var(--border) calc(100%/7 - 1px), var(--border) calc(100%/7)); }
.pb-now{ position:absolute; top:0; bottom:0; background:var(--accent-soft); z-index:0; pointer-events:none; }
.pb-bar{ position:absolute; top:5px; bottom:5px; z-index:1; border-radius:7px; padding:0 9px; display:flex; align-items:center; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-bar.s-in{ background:var(--success-soft); color:var(--text); box-shadow:inset 3px 0 0 var(--success); }
.pb-bar.s-exp{ background:var(--accent-soft); color:var(--text); box-shadow:inset 3px 0 0 var(--accent); }
.pb-bar.s-out{ background:var(--warning-soft); color:var(--text); box-shadow:inset 3px 0 0 var(--warning); }
.pb-bar .nn{ opacity:.6; font-weight:500; margin-left:6px; }
.vl-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 16px; }
.vl-kpi{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius,12px); padding:14px 16px; }
.vl-kpi .n{ font:700 22px var(--font); color:var(--text); }
.vl-kpi .l{ font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.vl-kpi.is-in{ box-shadow:inset 3px 0 0 var(--success); } .vl-kpi.is-arr{ box-shadow:inset 3px 0 0 var(--accent); } .vl-kpi.is-dep{ box-shadow:inset 3px 0 0 var(--warning); }
.vl-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius,12px); overflow:hidden; }
.vl-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.vl-table th{ text-align:left; font-weight:600; color:var(--text-muted); font-size:12px; padding:11px 16px; border-bottom:1px solid var(--border); white-space:nowrap; }
.vl-table td{ padding:11px 16px; border-bottom:1px solid var(--border); color:var(--text); white-space:nowrap; }
.vl-table tr:last-child td{ border-bottom:0; }
.vl-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; }
.vl-pill::before{ content:''; width:7px; height:7px; border-radius:50%; }
.vl-pill.s-in{ background:var(--success-soft); color:var(--success); } .vl-pill.s-in::before{ background:var(--success); }
.vl-pill.s-exp{ background:var(--accent-soft); color:var(--accent); } .vl-pill.s-exp::before{ background:var(--accent); }
.vl-pill.s-out{ background:var(--warning-soft); color:var(--warning); } .vl-pill.s-out::before{ background:var(--warning); }
.vl-empty{ padding:26px; text-align:center; color:var(--text-faint); font-size:13px; }
@media (max-width:680px){ .vbx{ padding:16px 12px 70px; } .vl-strip{ grid-template-columns:1fr; } .vbx-legend{ display:none; } }
/* Verfijning: sticky kamer-kolom + verdieping-groepering + lege-toggle + detail-modal */
.pb-head{ z-index:4; }
.pb-corner{ position:sticky; left:0; z-index:5; }
.pb-room{ position:sticky; left:0; z-index:2; }
.pb-bar{ cursor:pointer; }
.pb-bar:hover{ filter:brightness(1.05); }
.pb-grouprow{ background:var(--surface); border-bottom:1px solid var(--border); }
.pb-group{ position:sticky; left:0; display:inline-block; padding:6px 12px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }
.vbx-toggle{ font:inherit; font-size:12.5px; font-weight:600; color:var(--text-muted); background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:7px 13px; cursor:pointer; white-space:nowrap; }
.vbx-toggle:hover{ background:var(--hover); }
.vbx-toggle.is-on{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.vl-table tbody tr{ cursor:pointer; }
.vl-table tbody tr:hover{ background:var(--hover); }
.vbm-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--modal-overlay); }
.vbm{ background:var(--panel); border:1px solid var(--border); border-radius:14px; width:100%; max-width:420px; box-shadow:var(--shadow); overflow:hidden; }
.vbm-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); }
.vbm-head h3{ margin:0; font:600 17px var(--font); color:var(--text); }
.vbm-head .sub{ font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.vbm-close{ background:none; border:0; color:var(--text-muted); cursor:pointer; font-size:22px; line-height:1; padding:0 4px; border-radius:8px; }
.vbm-close:hover{ background:var(--hover); color:var(--text); }
.vbm-body{ padding:6px 20px 16px; }
.vbm-row{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.vbm-row:last-child{ border-bottom:0; }
.vbm-row span{ color:var(--text-muted); } .vbm-row b{ color:var(--text); font-weight:600; text-align:right; }
/* Verfijning 2: scale-toggle, datumkiezer, status-filter, klikbare strip-kaarten, tabel-scroll */
.vbx-grp{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vbx-date, .vbx-select{ font:inherit; font-size:13px; padding:7px 10px; border-radius:9px; border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; }
.vbx-date:hover, .vbx-select:hover{ background:var(--hover); }
button.vl-kpi{ display:block; width:100%; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.vl-kpi:hover{ border-color:var(--border-strong); }
.vl-kpi.is-active{ outline:2px solid var(--accent); outline-offset:-1px; }
.vl-tablewrap{ overflow-x:auto; }
/* ── Module-linkernav (.bo-subnav) — connector-modules (Jachthaven, later Kamers) ── */
.bo-shell{ display:flex; align-items:flex-start; gap:0; }
.bo-subnav{ flex:0 0 196px; display:flex; flex-direction:column; gap:2px; padding:2px 8px 8px 0; border-right:1px solid var(--border); position:sticky; top:8px; }
.bo-subnav button{ text-align:left; font:inherit; font-size:13.5px; font-weight:500; color:var(--text-muted); background:none; border:0; padding:9px 14px; border-radius:9px; cursor:pointer; transition:background .15s, color .15s; }
.bo-subnav button:hover{ background:var(--hover); color:var(--text); }
.bo-subnav button.is-on{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.bo-content{ flex:1; min-width:0; padding:0 0 0 22px; }
.jh-secbar{ display:flex; align-items:center; gap:14px; margin:0 0 14px; }
.jh-count{ font-size:12.5px; color:var(--text-muted); }
/* Havenkaart (MapLibre + PDOK-tegels) */
.jh-mapwrap{ display:flex; flex-direction:column; gap:10px; }
.jh-mapbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.jh-mapcount{ font-size:12.5px; color:var(--text-muted); margin-left:auto; }
.jh-maplegend{ display:flex; gap:12px; font-size:12.5px; color:var(--text-muted); }
.jh-maplegend i{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.jh-map{ width:100%; height:calc(100vh - 340px); min-height:430px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.jh-pop b.t{ display:block; font-size:14px; margin-bottom:4px; }
.jh-pop>div{ display:flex; justify-content:space-between; gap:18px; font-size:12.5px; padding:2px 0; }
.jh-pop>div span{ color:var(--text-muted); }
.maplibregl-popup-content{ background:var(--panel); color:var(--text); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); font-family:var(--font); padding:12px 14px; }
.maplibregl-popup-close-button{ color:var(--text-muted); font-size:18px; }
.maplibregl-ctrl-attrib{ font-size:10px; }
@media (max-width:760px){
  .bo-shell{ flex-direction:column; align-items:stretch; }
  .bo-subnav{ flex:none; flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch; border-right:0; border-bottom:1px solid var(--border); padding:0 0 8px; position:static; max-width:100%; }
  .bo-subnav button{ white-space:nowrap; flex:0 0 auto; }
  .bo-content{ padding:14px 0 0; width:100%; }
  .jh-map{ height:60vh; min-height:340px; }
}