@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
}

:root {
  --field-short-width: 120px;
  --reservation-form-width: 1280px;
  --reservation-price-width: 320px;
  --planboard-mobile-unit-width: 80px;
  --green-50: #F2F8F5;
  --green-100: #DDEFE7;
  --green-400: #63D2A1;
  --green-500: #3BAE7C;
  --green-600: #247154;
  --green-700: #1D5A43;
  --green-800: #12372A;
  --brand-panel-bg: #04753F;
  --blue-50: #eff6ff;
  --blue-600: #2563eb;
  --amber-50: #FFF8E8;
  --amber-600: #A96813;
  --red-50: #fef2f2;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --violet-600: #7c3aed;
  --surface: #fff;
  --raised: #fff;
  --canvas: #F3F6F4;
  --sunken: #f8fafb;
  --hover: #fcfdfd;
  --weekend: #f4f6f8;
  --input: #fff;
  --topbar-bg: rgb(255 255 255 / 94%);
  --ink: #18221E;
  --text: #3d4650;
  --muted: #5d6874;
  --subtle: #98a4b0;
  --nav-text: #515c68;
  --border: #dfe4e9;
  --border-strong: #c9d1d8;
  --border-hover: #98a4b0;
  --on-solid: #fff;
  --logo-canvas: #fff;
  --accent-solid: var(--green-700);
  --accent-solid-hover: var(--green-800);
  --accent-on-solid: #fff;
  --accent-text: var(--green-700);
  --accent-border: var(--green-600);
  --accent-soft: var(--green-50);
  --accent-soft-strong: var(--green-100);
  --accent-soft-text: var(--green-800);
  --focus-ring: rgb(29 90 67 / 30%);
  --focus-shadow: rgb(29 90 67 / 12%);
  --selection-bg: var(--green-100);
  --selection-text: #022c1a;
  --info-bg: var(--blue-50);
  --info-border: #bfdbfe;
  --warning-bg: var(--amber-50);
  --warning-bg-hover: #fef3c7;
  --warning-border: #fde68a;
  --warning-text: #8a4d03;
  --error-bg: var(--red-50);
  --error-border: #fecaca;
  --neutral-status-bg: #e4e8eb;
  --neutral-status-border: #c9d1d8;
  --neutral-status-text: #37414b;
  --green-tone-bg: var(--green-50);
  --green-tone-text: var(--green-800);
  --calendar-available-bg: var(--green-100);
  --calendar-available-border: var(--green-400);
  --calendar-available-text: var(--green-800);
  --calendar-range-bg: #A9D4C0;
  --calendar-range-border: var(--green-400);
  --calendar-range-text: #064e3b;
  --violet-50: #f5f3ff;
  --violet-tone-bg: var(--violet-50);
  --violet-tone-text: #6d28d9;
  --blue-tone-bg: var(--blue-50);
  --blue-tone-text: #1d4ed8;
  --amber-tone-bg: var(--amber-50);
  --amber-tone-text: #9a5a04;
  --red-tone-bg: var(--red-50);
  --red-tone-text: var(--red-700);
  --claim-confirmed: var(--green-600);
  --claim-option: var(--violet-600);
  --claim-request: #f59e0b;
  --claim-request-text: #3d2600;
  --claim-overdue: var(--red-600);
  --claim-cancelled: #59636f;
  --claim-manual-block: #59636f;
  --claim-ical: #2563a8;
  --claim-hold: #6d4fc2;
  --claim-hold-stripe: #8064cf;
  --claim-text: #fff;
  --overlay: rgb(13 17 22 / 38%);
  --dialog-overlay: rgb(13 17 22 / 45%);
  --auth-glow: #F2F8F5;
  --code-bg: #18221E;
  --code-text: #e5e7eb;
  --canvas-texture: none;
  --dark-canvas-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.035' filter='url(%23noise)'/%3E%3C/svg%3E");
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 20px;
  --t-2xl: 26px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --hairline: 1px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 15px;
  --shadow: 0 1px 3px rgb(13 17 22 / 7%), 0 8px 24px -12px rgb(13 17 22 / 18%);
  --shadow-xs: 0 1px 2px rgb(13 17 22 / 3%);
  --shadow-drawer: -12px 0 45px rgb(13 17 22 / 17%);
  --shadow-dialog: 0 22px 80px rgb(13 17 22 / 27%);
  --shadow-drag: 0 8px 20px rgb(13 17 22 / 25%);
  --sidebar: 242px;
  --topbar: 64px;
  --ease: 160ms ease;
  --font: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #12171d;
  --raised: #171d24;
  --canvas: #0d1116;
  --sunken: #0f141a;
  --hover: rgb(255 255 255 / 4%);
  --weekend: #10161c;
  --input: #171d24;
  --topbar-bg: rgb(18 23 29 / 94%);
  --ink: #f2f5f7;
  --text: #c5ced7;
  --muted: #8b96a2;
  --subtle: #68727d;
  --nav-text: #aeb8c2;
  --border: #242c35;
  --border-strong: #323c47;
  --border-hover: #536171;
  --on-solid: #fff;
  --accent-solid: var(--green-500);
  --accent-solid-hover: var(--green-400);
  --accent-on-solid: #04250f;
  --accent-text: var(--green-400);
  --accent-border: var(--green-400);
  --accent-soft: rgb(18 178 113 / 12%);
  --accent-soft-strong: rgb(18 178 113 / 20%);
  --accent-soft-text: #6ee7b0;
  --focus-ring: rgb(52 211 145 / 38%);
  --focus-shadow: rgb(52 211 145 / 14%);
  --selection-bg: var(--green-700);
  --selection-text: #fff;
  --info-bg: rgb(59 130 246 / 10%);
  --info-border: rgb(59 130 246 / 28%);
  --warning-bg: rgb(245 158 11 / 10%);
  --warning-bg-hover: rgb(245 158 11 / 16%);
  --warning-border: rgb(245 158 11 / 28%);
  --warning-text: #fbbf24;
  --error-bg: rgb(239 68 68 / 10%);
  --error-border: rgb(239 68 68 / 28%);
  --neutral-status-bg: #242c35;
  --neutral-status-border: #3a4653;
  --neutral-status-text: #c5ced7;
  --green-tone-bg: rgb(18 178 113 / 14%);
  --green-tone-text: #6ee7b0;
  --calendar-available-bg: var(--green-tone-bg);
  --calendar-available-border: var(--accent-soft-strong);
  --calendar-available-text: var(--green-tone-text);
  --calendar-range-bg: var(--selection-bg);
  --calendar-range-border: var(--green-400);
  --calendar-range-text: var(--selection-text);
  --violet-tone-bg: rgb(139 92 246 / 16%);
  --violet-tone-text: #c4b5fd;
  --blue-tone-bg: rgb(59 130 246 / 14%);
  --blue-tone-text: #93c5fd;
  --amber-tone-bg: rgb(245 158 11 / 14%);
  --amber-tone-text: #fbbf24;
  --red-tone-bg: rgb(239 68 68 / 14%);
  --red-tone-text: #fca5a5;
  --overlay: rgb(0 0 0 / 58%);
  --dialog-overlay: rgb(0 0 0 / 66%);
  --auth-glow: #171d24;
  --canvas-texture: var(--dark-canvas-texture);
  --shadow: 0 1px 3px rgb(0 0 0 / 45%), 0 8px 24px -12px rgb(0 0 0 / 75%);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 45%);
  --shadow-drawer: -12px 0 45px rgb(0 0 0 / 55%);
  --shadow-dialog: 0 22px 80px rgb(0 0 0 / 62%);
  --shadow-drag: 0 8px 20px rgb(0 0 0 / 65%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --surface: #12171d;
    --raised: #171d24;
    --canvas: #0d1116;
    --sunken: #0f141a;
    --hover: rgb(255 255 255 / 4%);
    --weekend: #10161c;
    --input: #171d24;
    --topbar-bg: rgb(18 23 29 / 94%);
    --ink: #f2f5f7;
    --text: #c5ced7;
    --muted: #8b96a2;
    --subtle: #68727d;
    --nav-text: #aeb8c2;
    --border: #242c35;
    --border-strong: #323c47;
    --border-hover: #536171;
    --on-solid: #fff;
    --accent-solid: var(--green-500);
    --accent-solid-hover: var(--green-400);
    --accent-on-solid: #04250f;
    --accent-text: var(--green-400);
    --accent-border: var(--green-400);
    --accent-soft: rgb(18 178 113 / 12%);
    --accent-soft-strong: rgb(18 178 113 / 20%);
    --accent-soft-text: #6ee7b0;
    --focus-ring: rgb(52 211 145 / 38%);
    --focus-shadow: rgb(52 211 145 / 14%);
    --selection-bg: var(--green-700);
    --selection-text: #fff;
    --info-bg: rgb(59 130 246 / 10%);
    --info-border: rgb(59 130 246 / 28%);
    --warning-bg: rgb(245 158 11 / 10%);
    --warning-bg-hover: rgb(245 158 11 / 16%);
    --warning-border: rgb(245 158 11 / 28%);
    --warning-text: #fbbf24;
    --error-bg: rgb(239 68 68 / 10%);
    --error-border: rgb(239 68 68 / 28%);
    --neutral-status-bg: #242c35;
    --neutral-status-border: #3a4653;
    --neutral-status-text: #c5ced7;
    --green-tone-bg: rgb(18 178 113 / 14%);
    --green-tone-text: #6ee7b0;
    --calendar-available-bg: var(--green-tone-bg);
    --calendar-available-border: var(--accent-soft-strong);
    --calendar-available-text: var(--green-tone-text);
    --calendar-range-bg: var(--selection-bg);
    --calendar-range-border: var(--green-400);
    --calendar-range-text: var(--selection-text);
    --violet-tone-bg: rgb(139 92 246 / 16%);
  --violet-tone-text: #c4b5fd;
  --blue-tone-bg: rgb(59 130 246 / 14%);
    --blue-tone-text: #93c5fd;
    --amber-tone-bg: rgb(245 158 11 / 14%);
    --amber-tone-text: #fbbf24;
    --red-tone-bg: rgb(239 68 68 / 14%);
    --red-tone-text: #fca5a5;
    --overlay: rgb(0 0 0 / 58%);
    --dialog-overlay: rgb(0 0 0 / 66%);
    --auth-glow: #171d24;
    --canvas-texture: var(--dark-canvas-texture);
    --shadow: 0 1px 3px rgb(0 0 0 / 45%), 0 8px 24px -12px rgb(0 0 0 / 75%);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 45%);
    --shadow-drawer: -12px 0 45px rgb(0 0 0 / 55%);
    --shadow-dialog: 0 22px 80px rgb(0 0 0 / 62%);
    --shadow-drag: 0 8px 20px rgb(0 0 0 / 65%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* Componenten die zelf een display-waarde meebrengen, zoals .suffix-input, winnen
   het anders van het hidden-attribuut en blijven zichtbaar terwijl JavaScript ze
   verborgen denkt te hebben. */
[hidden] { display: none !important; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; background-color: var(--canvas); background-image: var(--canvas-texture); background-size: 180px 180px; color: var(--text); font: var(--t-md)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { color: inherit; font: inherit; }
button, summary { cursor: pointer; }
/* Use the app's interaction styles instead of the browser's touch overlay.
   Keep keyboard focus and selection of content and editable fields available. */
:where(a, button, summary, input, select, textarea, label, [role="button"]) { -webkit-tap-highlight-color: transparent; }
:where(button, summary, .button, .nav-list > a, [role="button"]) { -webkit-user-select: none; user-select: none; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, strong { color: var(--ink); }
h1 { font-size: var(--t-xl); line-height: 1.25; }
h2 { font-size: var(--t-lg); line-height: 1.3; }
h3 { font-size: var(--t-md); }
svg { display: block; height: 18px; width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
:focus-visible { border-radius: 3px; outline: 3px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--selection-bg); color: var(--selection-text); }

.sr-only { background: transparent!important; position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: calc(-1 * var(--hairline))!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-160%); border-radius: var(--radius-sm); background: var(--ink); color: var(--canvas); padding: var(--s-2) var(--s-3); }
.skip-link:focus { transform: none; }
.muted { color: var(--muted); }
.text-danger { color: var(--red-tone-text)!important; }
.numeric { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; }
.eyebrow { color: var(--muted); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100vh; height: 100dvh; left: 0; position: sticky; top: 0; z-index: 40; }
.brand { align-items: center; background: var(--brand-panel-bg); display: flex; flex-shrink: 0; justify-content: center; gap: var(--s-2); height: var(--topbar); padding: 0 var(--s-4); color: var(--accent-text); font-size: var(--t-lg); font-weight: 780; letter-spacing: -.035em; }
.brand__mark { display: none; flex-shrink: 0; height: var(--s-8); width: var(--s-8); }
.brand__wordmark { display: block; height: auto; width: 160px; }
.auth-brand__logo { display: block; height: auto; max-width: 100%; width: 224px; }
.brand__flag { background: var(--neutral-status-bg); border-radius: var(--radius-sm); color: var(--neutral-status-text); font-size: var(--t-xs); font-weight: 750; letter-spacing: .06em; padding: 2px var(--s-1); text-transform: uppercase; }
.nav-list { display: flex; flex: 1; flex-direction: column; gap: var(--s-1); overflow-y: auto; padding: var(--s-3) var(--s-3) var(--s-4); }
.nav-list > a { align-items: center; border-radius: 7px; color: var(--nav-text); display: flex; font-weight: 570; gap: var(--s-3); min-height: 40px; padding: var(--s-2) var(--s-3); text-decoration: none; transition: background var(--ease), color var(--ease); }
.nav-list > a:hover { background: var(--sunken); color: var(--ink); }
.nav-list > a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-soft-text); }
.nav-list svg { height: 18px; width: 18px; }
.nav-label { color: var(--muted); font-size: var(--t-xs); font-weight: 750; letter-spacing: .06em; padding: var(--s-4) var(--s-3) var(--s-1); text-transform: uppercase; }
.nav-spacer { flex: 1; }
.sidebar-footer { border-top: 1px solid var(--border); display: grid; flex: 0 0 auto; gap: var(--s-1); padding: var(--s-3) var(--s-3) var(--s-3); }
.sidebar-footer > a { align-items: center; border-radius: 7px; color: var(--nav-text); display: flex; font-weight: 570; gap: var(--s-3); min-height: 40px; padding: var(--s-2) var(--s-3); text-decoration: none; transition: background var(--ease), color var(--ease); }
.sidebar-footer > a:hover { background: var(--sunken); color: var(--ink); }
.sidebar-footer > a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-soft-text); }
.sidebar-footer svg { height: 18px; width: 18px; }
.impersonation-return button { align-items: center; background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 7px; color: var(--warning-text); display: flex; font-weight: 650; gap: var(--s-2); min-height: 40px; padding: var(--s-2) var(--s-3); text-align: left; width: 100%; }
.impersonation-return button:hover { background: var(--warning-bg-hover); }
.platform-admin-entry button { align-items: center; background: var(--accent-soft); border: 1px solid var(--accent-soft-strong); border-radius: 7px; color: var(--accent-soft-text); display: flex; font-weight: 650; gap: var(--s-2); min-height: 40px; padding: var(--s-2) var(--s-3); text-align: left; width: 100%; }
.platform-admin-entry button:hover { background: var(--accent-soft-strong); }
.sidebar-user { min-width: 0; position: relative; }
.sidebar-user > summary { align-items: center; border-radius: 7px; display: flex; gap: var(--s-2); list-style: none; min-height: 47px; padding: var(--s-1); }
.sidebar-user > summary::-webkit-details-marker { display: none; }
.sidebar-user > summary:hover, .sidebar-user[open] > summary { background: var(--sunken); }
.sidebar-user__identity { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sidebar-user__identity strong, .sidebar-user__identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user__identity strong { font-size: var(--t-xs); }
.sidebar-user__identity span { color: var(--muted); font-size: var(--t-xs); }
.sidebar-user__chevron { color: var(--muted); flex: 0 0 auto; transition: transform var(--ease); }
.sidebar-user[open] .sidebar-user__chevron { transform: rotate(-90deg); }
.sidebar-user__menu { background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); bottom: calc(100% + 8px); box-shadow: var(--shadow); left: 0; min-width: 100%; padding: var(--s-2); position: absolute; z-index: 70; }
.workspace { min-width: 0; }
.topbar { align-items: center; background: var(--topbar-bg); border-bottom: 1px solid var(--border); display: flex; height: var(--topbar); justify-content: space-between; padding: 0 var(--s-6); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px); }
/* In de losse PWA loopt de balk onder de statusbalk; het inset-vlak blijft vrij. */
@media (display-mode: standalone) {
  .topbar { height: auto; min-height: var(--topbar); padding-top: env(safe-area-inset-top, 0px); }
}
.topbar__heading { align-items: baseline; display: flex; gap: var(--s-2); }
.topbar__heading span { color: var(--muted); font-size: var(--t-xs); }
.topbar__actions { align-items: center; display: flex; gap: var(--s-2); }
.sidebar-toggle { display: none!important; }
.main { min-height: calc(100vh - var(--topbar)); min-height: calc(100dvh - var(--topbar)); }
.page { margin: 0 auto; max-width: 1500px; padding: var(--s-6) var(--s-6) var(--s-12); }
.page--wide { max-width: none; padding: var(--s-4); }
.page--form { max-width: 1160px; }

.button, .icon-button { align-items: center; background: var(--input); border: 1px solid var(--border-strong); border-radius: 7px; box-shadow: var(--shadow-xs); color: var(--text); display: inline-flex; font-weight: 620; gap: var(--s-2); justify-content: center; line-height: 1; min-height: 38px; padding: 0 var(--s-3); text-decoration: none; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease); }
.button:hover, .icon-button:hover { background: var(--sunken); border-color: var(--border-hover); }
.button--secondary { background: var(--input); border-color: var(--border-strong); color: var(--text); }
.button--primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-on-solid); }
.button--primary:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); }
.button--danger { background: var(--red-600); border-color: var(--red-600); color: var(--on-solid); }
.button--danger:hover { background: var(--red-700); border-color: var(--red-700); }
.button--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent-text); }
.button--ghost:hover { background: var(--sunken); border-color: var(--border); }
.button--small { font-size: var(--t-xs); min-height: 32px; padding: 0 var(--s-2); }
.button--large { min-height: 46px; }
.button--wide { width: 100%; }
.icon-button { height: 36px; min-height: 36px; padding: 0; width: 36px; }
.button[disabled], .icon-button[disabled] { cursor: not-allowed; opacity: .45; }
.button-group { display: flex; gap: var(--s-1); }
.text-link { align-items: center; color: var(--accent-text); display: inline-flex; font-size: var(--t-sm); font-weight: 650; gap: var(--s-1); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link svg { height: 14px; width: 14px; }

.account-menu, .row-menu { position: relative; }
.account-menu > summary { align-items: center; display: flex; gap: var(--s-2); list-style: none; padding: var(--s-1); }
.account-menu > summary::-webkit-details-marker, .row-menu > summary::-webkit-details-marker { display: none; }
.avatar { align-items: center; background: var(--accent-soft-strong); border-radius: 50%; color: var(--accent-soft-text); display: inline-flex; flex: 0 0 auto; font-size: var(--t-xs); font-weight: 750; height: 31px; justify-content: center; width: 31px; }
.avatar--small { font-size: var(--t-xs); height: 24px; width: 24px; }
.avatar--large { font-size: var(--t-lg); height: 56px; width: 56px; }
.account-menu__panel, .row-menu > div { background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 220px; padding: var(--s-2); position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; }
/* Een menu onder in een lade klapt omhoog; naar beneden valt het buiten het scherm. */
.row-menu--up > div { bottom: calc(100% + 8px); min-width: 300px; top: auto; }
.row-menu--up > div .inline-form { padding: 0 var(--s-2) var(--s-2); }
@media (max-width: 760px) {
  .drawer--reservation .drawer__footer .row-menu--up > div { left: 0; right: auto; min-width: 0; width: max-content; max-width: calc(100vw - var(--s-8)); max-height: calc(100dvh - 2 * var(--s-12)); overflow: auto; overflow-wrap: anywhere; }
}
.menu-caption { color: var(--muted); display: block; font-size: var(--t-xs); padding: var(--s-2) var(--s-2); }
.menu-action { background: transparent; border: 0; border-radius: 6px; display: block; padding: var(--s-2); text-align: left; text-decoration: none; width: 100%; }
.menu-action:hover { background: var(--sunken); }
.menu-action--danger { color: var(--red-tone-text); }
.language-switcher { display: grid; gap: var(--s-1); margin: 0 0 var(--s-1); }
/* :where houdt de specificiteit laag zodat de mobiele 16px/48px-regels winnen. */
.language-switcher :where(select) { background: var(--input); border: 1px solid var(--border); border-radius: 6px; color: var(--nav-text); font: inherit; font-size: var(--t-md); font-weight: 650; min-height: 40px; padding: 0 var(--s-2); width: 100%; }
.language-switcher select:hover { background: var(--sunken); color: var(--ink); }
.theme-picker { border-bottom: 1px solid var(--border); display: grid; margin-bottom: var(--s-1); padding-bottom: var(--s-1); }
.theme-choice { padding-left: var(--s-6); position: relative; }
.theme-choice[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 650; }
.theme-choice[aria-pressed="true"]::before { content: "✓"; left: 9px; position: absolute; }

.notice { align-items: start; background: var(--info-bg); border: 1px solid var(--info-border); border-radius: var(--radius); display: flex; gap: var(--s-2); margin-bottom: var(--s-3); padding: var(--s-3) var(--s-3); }
.notice strong { margin-right: var(--s-1); }
.notice--success { background: var(--green-tone-bg); border-color: var(--accent-soft-strong); }
.notice--warning { background: var(--warning-bg); border-color: var(--warning-border); }
.notice--error { background: var(--error-bg); border-color: var(--error-border); }
/* Een melding met een vervolgactie houdt de knop rechts, los van de lopende tekst. */
.notice__action { align-self: center; flex: 0 0 auto; margin-left: auto; }
.price-revision { display: grid; gap: var(--s-3); }
.price-revision__columns { display: grid; gap: var(--s-3); }
@media (min-width: 760px) {
  .price-revision__columns { grid-template-columns: 1fr 1fr; }
}
.price-revision__columns h4 { font-size: var(--t-sm); margin: 0; }
.price-revision__total { font-size: var(--t-2xl); font-variant-numeric: tabular-nums; font-weight: 650; margin: 0; }
.price-revision__lines { display: grid; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.price-revision__lines li { display: flex; font-size: var(--t-sm); gap: var(--s-2); justify-content: space-between; }
.price-revision__lines span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.price-estimate-card { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--s-3); padding: var(--s-3); }
.price-estimate-card__header { align-items: start; display: flex; gap: var(--s-3); justify-content: space-between; }
.price-estimate-card__header > div { display: grid; gap: var(--s-1); }
.price-estimate-card__header h4 { color: var(--ink); font-size: var(--t-sm); margin: 0; }
.price-estimate-card__header p { color: var(--muted); font-size: var(--t-xs); line-height: 1.45; margin: 0; max-width: 62ch; }
.price-estimate-card__header .button { flex: 0 0 auto; }
.price-estimate-card__body { min-height: 20px; transition: opacity var(--ease); }
.price-estimate-card__body.htmx-request { opacity: .55; }
.price-estimate { display: grid; gap: var(--s-2); }
.price-estimate__total { align-items: baseline; display: flex; gap: var(--s-2); justify-content: space-between; }
.price-estimate__total span { color: var(--muted); font-size: var(--t-xs); }
.price-estimate__total strong { font-size: var(--t-2xl); font-variant-numeric: tabular-nums; font-weight: 650; }
.price-estimate__basis, .price-estimate__empty { color: var(--muted); font-size: var(--t-xs); }
.price-estimate__stale { display: none; }
[data-price-estimate-panel][data-stale="true"] .price-estimate__stale { color: var(--warning-text); display: block; font-size: var(--t-xs); }
@media (max-width: 560px) {
  .price-estimate-card__header { align-items: stretch; flex-direction: column; }
  .price-estimate-card__header .button { align-self: flex-start; }
}
.rates-gap-row > td { padding: var(--s-1) var(--s-3); }
.rates-gap-row:hover { background: transparent; }
.rates-gap-row .notice { margin-bottom: 0; }
.request-errors { display: grid; max-width: min(440px, calc(100vw - 24px)); pointer-events: none; position: fixed; right: 16px; top: 16px; z-index: 200; }
.request-error { align-items: center; box-shadow: var(--shadow); margin: 0; pointer-events: auto; }
.request-error__content { display: grid; flex: 1; gap: 0; }
.request-error__content strong { margin: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); min-width: 0; }
.card__header { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: var(--s-3); justify-content: space-between; min-height: 60px; padding: var(--s-3) var(--s-4); }
.card__header > div { align-items: center; display: flex; gap: var(--s-2); }
.card__header > div:has(.eyebrow), .card__header > div:has(p) { align-items: flex-start; flex-direction: column; gap: 0; }
.card__header p { color: var(--muted); font-size: var(--t-xs); line-height: 1.45; max-width: 78ch; }
.card__body { padding: var(--s-4); }
.card__body--flush { padding: 0; }
.card__footer { align-items: center; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s-2); min-height: 55px; padding: var(--s-2) var(--s-4); }
.integration-popover { display: grid; gap: var(--s-3); margin-top: var(--s-2); min-width: min(620px, 80vw); position: absolute; right: 0; z-index: 20; }
.integration-popover hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
td details { position: relative; }
.error-text, td small { color: var(--muted); display: block; font-size: var(--t-xs); margin-top: var(--s-1); max-width: 440px; }
.stack-list { display: grid; gap: var(--s-4); }
.setup-page { display: grid; gap: var(--s-4); }
.setup-experience { align-items: start; }
.setup-journey { align-items: stretch; display: grid; gap: var(--s-2); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.setup-journey--linear { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.setup-journey li { align-items: center; background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--s-2); grid-template-columns: max-content minmax(0, 1fr); padding: var(--s-3); }
.setup-journey li > span { align-items: center; background: var(--neutral-status-bg); border: 1px solid var(--neutral-status-border); border-radius: 999px; color: var(--neutral-status-text); display: flex; font-size: var(--t-xs); font-weight: 750; height: 32px; justify-content: center; width: 32px; }
.setup-journey li > div { display: grid; gap: var(--s-1); }
.setup-journey small { color: var(--muted); font-size: var(--t-xs); }
.setup-journey .is-current { border-color: var(--info-border); }
.setup-journey .is-current > span { background: var(--info-bg); border-color: var(--info-border); color: var(--blue-tone-text); }
.setup-journey .is-complete { border-color: var(--accent-soft-strong); }
.setup-journey .is-complete > span { background: var(--green-tone-bg); border-color: var(--accent-soft-strong); color: var(--green-tone-text); }
.setup-step-nav { padding: var(--s-3); }
.setup-step-card, .setup-focus { display: flex; flex-direction: column; }
.setup-step-card__body { display: grid; gap: var(--s-4); line-height: 1.55; }
.setup-step-card__body > p { max-width: 70ch; }
.setup-step-card__footer { justify-content: space-between; padding-bottom: var(--s-3); padding-top: var(--s-3); }
.setup-step-card__footer > span { color: var(--muted); font-size: var(--t-xs); max-width: 70ch; }
.setup-focus__body { display: flex; flex: 1; flex-direction: column; gap: var(--s-4); }
.setup-focus__body > p:first-child { line-height: 1.55; max-width: 70ch; }
.setup-focus__body > .button { align-self: flex-start; }
.setup-example { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--s-1); padding: var(--s-3); }
.setup-example span { color: var(--text); font-size: var(--t-sm); line-height: 1.5; }
.setup-find-later { border-top: 1px solid var(--border); color: var(--muted); font-size: var(--t-xs); margin-top: auto; padding-top: var(--s-3); }
.setup-find-later a { color: var(--accent-text); font-weight: 650; }
.setup-tour__body { display: grid; gap: var(--s-4); }
.setup-map__links { border: 1px solid var(--border); border-radius: var(--radius); display: grid; overflow: hidden; }
.setup-map__links > a, .setup-map__links > div { color: inherit; display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); text-decoration: none; }
.setup-map__links > a + a, .setup-map__links > div + div { border-top: 1px solid var(--border); }
.setup-map__links > a:hover { background: var(--sunken); }
.setup-map__links > a:hover span { color: var(--text); }
.setup-map__links span { color: var(--muted); font-size: var(--t-xs); line-height: 1.45; }
.setup-next { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--s-2); padding: var(--s-4); }
.setup-next h3 { font-size: var(--t-sm); margin: 0; }
.setup-next p { color: var(--text); font-size: var(--t-sm); }
.setup-next ul { display: grid; gap: var(--s-2); margin: 0; padding-left: var(--s-6); }
.setup-next li { padding-left: var(--s-1); }
.setup-progress { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); }
.setup-progress span { color: var(--muted); font-size: var(--t-xs); }
.setup-checklist { border: 1px solid var(--border); border-radius: var(--radius); list-style: none; margin: 0; padding: 0; }
.setup-checklist__item { align-items: center; display: grid; gap: var(--s-3); grid-template-columns: max-content minmax(0, 1fr) auto; padding: var(--s-3); }
.setup-checklist__item + .setup-checklist__item { border-top: 1px solid var(--border); }
.setup-checklist__copy h3 { font-size: var(--t-sm); margin: 0; }
.setup-checklist__copy p { color: var(--muted); font-size: var(--t-xs); margin: var(--s-1) 0 0; }
.setup-blocker { align-items: center; justify-content: space-between; margin: var(--s-4) 0 0; }
.setup-blocker span { display: grid; gap: var(--s-1); }
.setup-publish { justify-content: space-between; }
.setup-publish > span { color: var(--muted); font-size: var(--t-xs); }
.setup-confirmations { display: grid; gap: 0; padding-bottom: 0; padding-top: 0; }
.setup-confirmation { align-items: end; display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(320px, 1fr)); padding: var(--s-4) 0; }
.setup-confirmation + .setup-confirmation { border-top: 1px solid var(--border); }
.setup-confirmation p { color: var(--muted); font-size: var(--t-xs); margin: var(--s-1) 0 0; }
.setup-confirmation__controls { align-items: end; display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.setup-confirmation__controls .field { min-width: min(100%, 320px); }
.support-hub-links { list-style: none; margin: 0; padding: 0; }
.support-hub-links a { font-weight: 650; }

.page-intro { align-items: center; display: flex; justify-content: space-between; margin-bottom: var(--s-3); }
.metric-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--s-4); }
.metric-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--s-1); min-height: 125px; padding: var(--s-4); }
.metric-card__label { color: var(--muted); font-size: var(--t-xs); font-weight: 600; }
.metric-card strong { font-size: var(--t-2xl); letter-spacing: -.03em; }
.metric-card .muted { font-size: var(--t-xs); }
.dashboard-grid { align-items: start; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr); }
.dashboard-side { display: grid; gap: var(--s-4); }
.count-badge { align-items: center; background: var(--red-tone-bg); border-radius: 999px; color: var(--red-tone-text); display: inline-flex; font-size: var(--t-xs); font-weight: 750; height: 22px; justify-content: center; min-width: 22px; padding: 0 var(--s-1); }

.table-scroll { overflow: auto; min-width: 0; width: 100%; }
table { border-collapse: collapse; width: 100%; }
th { background: var(--sunken); border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--t-xs); font-weight: 730; letter-spacing: .04em; padding: var(--s-2) var(--s-3); text-align: left; text-transform: uppercase; white-space: nowrap; }
td { border-bottom: 1px solid var(--border); padding: var(--s-3) var(--s-3); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--hover); }
.cell-main, .cell-sub { display: block; }
a.cell-main { color: var(--ink); text-decoration: none; }
a.cell-main:hover { color: var(--accent-text); text-decoration: underline; }
.cell-main { color: var(--ink); font-weight: 620; }
.cell-sub { color: var(--muted); font-size: var(--t-xs); margin-top: 0; text-decoration: none; }
.guest-cell { align-items: center; display: flex; gap: var(--s-2); white-space: nowrap; }
.status { background: var(--neutral-status-bg); border: 1px solid var(--neutral-status-border); border-radius: 999px; color: var(--neutral-status-text); display: inline-flex; font-size: var(--t-xs); font-weight: 720; padding: var(--s-1) var(--s-2); white-space: nowrap; }
.status--ok { background: var(--green-tone-bg); color: var(--green-tone-text); }
.status--info { background: var(--blue-tone-bg); color: var(--blue-tone-text); }
.status--option { background: var(--violet-tone-bg); color: var(--violet-tone-text); }
.status--warn { background: var(--amber-tone-bg); color: var(--amber-tone-text); }
.status--bad { background: var(--red-tone-bg); color: var(--red-tone-text); }
.status--neutral { background: var(--neutral-status-bg); color: var(--neutral-status-text); }
.compact-list { display: flex; flex-direction: column; }
.compact-list__item { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: var(--s-2); justify-content: space-between; padding: var(--s-3) var(--s-4); text-decoration: none; }
.compact-list__item:last-child { border-bottom: 0; }.compact-list__item:hover { background: var(--sunken); }
.compact-list__item > span { display: flex; flex-direction: column; }.compact-list small { color: var(--muted); }
/* Het label en het terugdraaien horen bij elkaar aan de rechterkant, niet onder elkaar. */
.compact-list__item > .payment-row__end { align-items: center; flex-direction: row; flex-shrink: 0; gap: var(--s-2); }
.empty-state { align-items: center; color: var(--muted); display: flex; flex-direction: column; gap: var(--s-1); justify-content: center; min-height: 110px; padding: var(--s-4); text-align: center; }

.filterbar { align-items: center; background: var(--sunken); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s-2); min-height: 66px; padding: var(--s-3) var(--s-4); }
.filterbar .field { flex: 0 1 220px; }
.filterbar__count { color: var(--muted); margin-left: auto; }
.search-field { align-items: center; display: flex; min-width: 260px; position: relative; }
.search-field svg { color: var(--muted); left: 11px; position: absolute; }
.search-field input { padding-left: var(--s-8); width: 100%; }
input, select, textarea { background: var(--input); border: 1px solid var(--border-strong); border-radius: 7px; min-height: 38px; padding: var(--s-2) var(--s-2); }
/* Kaats- en keuzerondjes: 20px doos, duidelijk raakbaar naast 14px-tekst. */
input[type="checkbox"], input[type="radio"] { flex: 0 0 auto; height: 20px; min-height: 0; width: 20px; }
input:hover, select:hover, textarea:hover { border-color: var(--border-hover); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--focus-shadow); outline: 0; }
textarea { line-height: 1.5; resize: vertical; }

.reservation-toolbar { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: var(--s-4); justify-content: space-between; min-height: 66px; padding: var(--s-3); }
.reservation-segments { background: var(--sunken); border: 1px solid var(--border); border-radius: 7px; display: inline-flex; flex: 0 0 auto; padding: var(--s-1); }
.reservation-segments a { align-items: center; background: transparent; border-radius: 5px; color: var(--muted); display: inline-flex; font-size: var(--t-xs); font-weight: 570; gap: var(--s-1); line-height: 1; min-height: 28px; padding: 0 var(--s-2); text-decoration: none; }
.reservation-segments a:hover { color: var(--ink); }
.reservation-segments a.is-active { background: var(--surface); box-shadow: var(--shadow-xs); color: var(--ink); font-weight: 650; }
.reservation-segments__count { background: var(--neutral-status-bg); border-radius: 999px; color: var(--neutral-status-text); font-size: var(--t-xs); font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.5; min-width: 20px; padding: 0 var(--s-1); text-align: center; }
.reservation-segments a[data-tone="warn"] .reservation-segments__count { background: var(--amber-tone-bg); color: var(--amber-tone-text); }
.reservation-segments a[data-tone="option"] .reservation-segments__count { background: var(--violet-tone-bg); color: var(--violet-tone-text); }
.reservation-toolbar__filters { align-items: center; display: flex; flex: 0 1 auto; gap: var(--s-2); }
.reservation-scope select { max-width: 220px; min-height: 38px; }
.archive-period { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: var(--s-2); }
.archive-period select { min-width: 132px; }
.reservation-search { flex: 0 1 320px; }
.reservation-search label { align-items: center; background: var(--input); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); display: flex; gap: var(--s-1); height: 38px; padding: 0 var(--s-1) 0 var(--s-3); transition: border-color var(--ease), box-shadow var(--ease); }
.reservation-search label:hover { border-color: var(--border-hover); }
.reservation-search label:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--focus-shadow); color: var(--ink); }
.reservation-search input { background: transparent; border: 0; border-radius: 0; flex: 1; min-height: 0; min-width: 0; padding: 0; width: 100%; }
.reservation-search input:hover, .reservation-search input:focus { border: 0; box-shadow: none; outline: 0; }
.reservation-search__submit { align-items: center; appearance: none; background: transparent; border: 0; border-radius: 6px; color: inherit; cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 30px; justify-content: center; padding: 0; width: 30px; }
.reservation-search__submit:hover { background: var(--sunken); color: var(--ink); }
.reservation-search__submit svg { height: 15px; width: 15px; }
.reservation-table-wrap { container: reservation-results / inline-size; }
.reservation-table { font-size: var(--t-xs); min-width: 980px; }
.reservation-table th { padding: var(--s-2) var(--s-3); }
.reservation-sort { display: flex; }
.reservation-sort button { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: inline-flex; font: inherit; font-weight: inherit; gap: var(--s-1); letter-spacing: inherit; padding: 0; text-transform: inherit; }
.reservation-sort button:hover { color: var(--ink); }
.reservation-sort__indicator { color: var(--muted); display: inline-grid; font-size: var(--t-xs); line-height: 1; min-width: 11px; place-items: center; }
.reservation-sort__indicator::before { content: "↕"; }
.reservation-table th[aria-sort="ascending"] .reservation-sort__indicator::before { color: var(--ink); content: "↑"; }
.reservation-table th[aria-sort="descending"] .reservation-sort__indicator::before { color: var(--ink); content: "↓"; }
.reservation-table th.numeric .reservation-sort { justify-content: flex-end; }
.reservation-table th[aria-sort] .reservation-sort button { color: var(--ink); }
.reservation-table th:last-child { position: relative; }
.reservation-table th:last-child .sr-only { left: 0; top: 0; }
.reservation-table td { height: 64px; padding: var(--s-3) var(--s-3); transition: background var(--ease), opacity var(--ease), transform var(--ease); }
.reservation-row { cursor: pointer; }
.reservation-row.htmx-added > td { opacity: 0; transform: translateY(var(--s-2)); }
.reservation-row--request > td { background: color-mix(in srgb, var(--amber-tone-bg) 45%, var(--surface)); }
.reservation-row--option > td { background: color-mix(in srgb, var(--violet-tone-bg) 45%, var(--surface)); }
.reservation-row--checked_in > td { background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); }
.reservation-row--checked_out > td { background: color-mix(in srgb, var(--sunken) 68%, var(--surface)); }
.reservation-row--manual_block > td { background: color-mix(in srgb, var(--neutral-status-bg) 38%, var(--surface)); }
.reservation-row--cancelled > td, .reservation-row--expired > td { background: color-mix(in srgb, var(--neutral-status-bg) 45%, var(--surface)); }
.reservation-row:hover > td, .reservation-row.is-active > td { background: var(--hover); }
.reservation-row.is-active > td:first-child { box-shadow: inset 3px 0 var(--accent-text); }
.reservation-stay, .reservation-accommodation, .reservation-payment { display: grid; gap: var(--s-1); min-width: 0; }
.reservation-stay__dates { align-items: center; color: var(--ink); display: flex; font-size: var(--t-xs); font-weight: 550; gap: var(--s-2); white-space: nowrap; }
.reservation-stay__dates svg { color: var(--subtle); height: 13px; width: 13px; }
.reservation-stay > span, .reservation-accommodation > span, .reservation-guest__copy > span { color: var(--muted); font-size: var(--t-xs); line-height: 1.2; }
.reservation-stay > span { align-items: center; display: flex; gap: var(--s-1); }
.reservation-stay > span i { color: var(--muted); font-style: normal; }
.reservation-stay > span em { color: var(--muted); font-style: normal; font-weight: 650; }
.reservation-row--request .reservation-stay em { color: var(--amber-tone-text); }
.reservation-row--option .reservation-stay em { color: var(--violet-tone-text); }
.reservation-row--checked_in .reservation-stay em { color: var(--accent-soft-text); }
.reservation-row--manual_block .reservation-stay em { color: var(--neutral-status-text); }
.reservation-row--cancelled .reservation-stay em, .reservation-row--expired .reservation-stay em { color: var(--neutral-status-text); }
.reservation-guest { align-items: center; display: flex; gap: var(--s-2); min-width: 190px; }
.reservation-guest__avatar { align-items: center; background: var(--accent-soft-strong); border-radius: 50%; color: var(--accent-soft-text); display: flex; flex: 0 0 30px; font-size: var(--t-xs); font-weight: 700; height: 30px; justify-content: center; letter-spacing: .02em; width: 30px; }
.reservation-row--manual_block .reservation-guest__avatar { background: var(--neutral-status-bg); color: var(--neutral-status-text); }
.reservation-guest__copy { display: grid; gap: var(--s-1); min-width: 0; text-decoration: none; }
.reservation-guest__copy strong, .reservation-accommodation strong, .reservation-payment strong { color: var(--ink); font-size: var(--t-sm); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reservation-guest__copy:hover strong { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.reservation-guest__copy > span { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.reservation-accommodation { min-width: 150px; }
.reservation-place { color: var(--ink); display: block; font-size: var(--t-xs); font-weight: 650; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reservation-payment > .reservation-payment__mobile { display: none; }
.reservation-payment { justify-items: end; text-align: right; }
.reservation-payment > span { align-items: center; color: var(--muted); display: inline-flex; font-size: var(--t-xs); font-variant-numeric: tabular-nums; gap: var(--s-1); }
.reservation-payment > span svg { flex: 0 0 auto; height: 13px; width: 13px; }
.reservation-payment[data-tone="ok"] > span { color: var(--accent-soft-text); }
.reservation-payment[data-tone="warn"] > span { color: var(--warning-text); font-weight: 650; }
.reservation-payment[data-tone="bad"] > span { color: var(--red-tone-text); font-weight: 650; }
.reservation-payment[data-tone="neutral"] > span { color: var(--muted); }
.reservation-not-applicable { color: var(--muted); }
.reservation-documents { display: grid; gap: var(--s-1); }
.reservation-document { color: var(--text); font-size: var(--t-xs); }
.reservation-document--pending, .reservation-document-link span { display: grid; gap: 0; }
.reservation-document--pending strong, .reservation-document-link strong { font-size: var(--t-xs); font-weight: 650; }
.reservation-document--pending small, .reservation-document-link small { color: var(--muted); font-size: var(--t-xs); font-weight: 500; }
.reservation-document-link { align-items: center; color: var(--accent-text); display: inline-flex; font-size: var(--t-xs); gap: var(--s-1); max-width: 150px; text-decoration: none; }
.reservation-document-link--invoice { color: var(--muted); }
.reservation-document-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.reservation-document-link svg { height: 13px; width: 13px; }
.reservation-col--open { padding-left: 0!important; padding-right: var(--s-2)!important; text-align: right; white-space: nowrap; }
.reservation-row-actions { align-items: center; display: flex; gap: var(--s-1); justify-content: flex-end; }
.reservation-check { display: contents; }
.reservation-check button svg { height: 13px; width: 13px; }
.reservation-open { color: var(--subtle); display: inline-grid; padding: var(--s-1); place-items: center; text-decoration: none; transition: color var(--ease), transform var(--ease); }
.reservation-open svg { height: 14px; width: 14px; }
.reservation-row:hover .reservation-open, .reservation-row.is-active .reservation-open { color: var(--ink); transform: translateX(2px); }
.reservation-signals { align-items: center; display: inline-flex; flex: 0 0 auto; gap: var(--s-1); }
.reservation-signal { align-items: center; color: var(--subtle); display: inline-grid; place-items: center; }
.reservation-signal svg { height: 13px; width: 13px; }
@container reservation-results (max-width: 1060px) { .reservation-col--document { display: none; }.reservation-table { min-width: 820px; } }
@container reservation-results (max-width: 650px) { .reservation-table th:nth-child(3), .reservation-col--accommodation { display: none; }.reservation-table { min-width: 650px; } }

.breadcrumb { align-items: center; color: var(--muted); display: flex; font-size: var(--t-xs); gap: var(--s-1); margin-bottom: var(--s-3); }
.breadcrumb a { color: var(--accent-text); text-decoration: none; }.breadcrumb svg { height: 13px; width: 13px; }
.detail-header { align-items: center; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; padding: var(--s-4); }
.detail-header h2 { font-size: var(--t-xl); margin-top: var(--s-2); }
.detail-header__status, .detail-actions form { align-items: center; display: flex; gap: var(--s-2); }
.detail-summary { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius); display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: var(--s-4); }
.detail-summary > div { display: flex; flex-direction: column; gap: 0; padding: var(--s-3); }.detail-summary > div + div { border-left: 1px solid var(--border); }.detail-summary small { color: var(--muted); }
.detail-columns { display: grid; gap: var(--s-8); grid-template-columns: 1fr 1fr; }.detail-stack { display: flex; flex-direction: column; gap: var(--s-6); }.detail-stack > .notice { margin-bottom: 0; }
/* Een sectie kan meer dan een kop en een lijst bevatten; de gap bepaalt het ritme, zodat elk kind dezelfde afstand krijgt. */
.detail-section { display: grid; gap: var(--s-3); }
.detail-section h3 { border-bottom: 1px solid var(--border); padding-bottom: var(--s-2); }
.detail-summary__figure { font-size: var(--t-2xl); font-variant-numeric: tabular-nums; line-height: 1.2; }
.detail-summary__figure--neutral { color: var(--ink); }
.detail-summary__figure--ok { color: var(--green-tone-text); }
.detail-summary__figure--warn { color: var(--amber-tone-text); }
.detail-summary__figure--bad { color: var(--red-tone-text); }
/* Een sectiekop met een waarde ernaast: de streep hoort onder het paar, niet onder de
   kop alleen, anders loopt de lijn halverwege de regel dood. */
.detail-section__head { align-items: baseline; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: space-between; padding-bottom: var(--s-2); }
.detail-section__head h3 { border-bottom: 0; padding-bottom: 0; }
/* Kostenoverzicht en logboek zijn naslag, geen dagelijks werk. Dichtgeklapt houden ze de
   lade leesbaar; de kopregel toont het cijfer waarvoor je ze meestal opent. */
.detail-disclosure { border: 1px solid var(--border); border-radius: var(--radius); }
.detail-disclosure > summary { align-items: center; cursor: pointer; display: flex; gap: var(--s-2); list-style: none; min-height: 44px; padding: var(--s-2) var(--s-3); }
.detail-disclosure > summary::-webkit-details-marker { display: none; }
.detail-disclosure > summary:focus-visible { border-radius: var(--radius); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }
.detail-disclosure > summary > svg { flex: none; height: 14px; transition: transform var(--ease); width: 14px; }
.detail-disclosure[open] > summary > svg { transform: rotate(90deg); }
.detail-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.detail-disclosure > summary > span { flex: 1; font-weight: 700; }
.detail-disclosure > summary > strong { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 650; }
.detail-disclosure > :not(summary) { padding: var(--s-3); }
/* Betaling boeken zonder de reservering te verlaten. Elk veld is zo breed als zijn inhoud
   vraagt: bedrag kort, datum kort, methode midden. */
.payment-entry { align-items: end; border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--s-2) var(--s-3); grid-template-columns: minmax(0, 120px) minmax(0, 150px) minmax(0, 1fr) auto; padding: var(--s-3); }
.payment-entry input, .payment-entry select { width: 100%; }
.payment-entry__amount input { font-variant-numeric: tabular-nums; }
.payment-entry__help { color: var(--muted); font-size: var(--t-xs); grid-column: 1 / -1; line-height: 1.45; }
.note { background: var(--info-bg); border-radius: var(--radius); display: grid; gap: var(--s-1); padding: var(--s-3); }
.note p { margin: 0; }
.inline-form { align-items: end; display: flex; flex-wrap: wrap; gap: var(--s-2); }.inline-form .field { flex: 1 1 320px; min-width: 0; }.inline-form select { width: 100%; }
.money-lines > div { align-items: center; display: flex; justify-content: space-between; padding: var(--s-2) 0; }.money-lines strong { font-variant-numeric: tabular-nums; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-3); }.timeline li { border-left: 1px solid var(--border-strong); display: flex; flex-direction: column; padding: 0 0 var(--s-4) var(--s-4); position: relative; }.timeline li::before { background: var(--accent-solid); border: 3px solid var(--surface); border-radius: 50%; content: ""; height: 11px; left: -6px; position: absolute; top: 2px; width: 11px; }.timeline span, .timeline time { color: var(--muted); font-size: var(--t-xs); }

.drawer-backdrop, .mobile-backdrop { background: var(--overlay); inset: 0; position: fixed; z-index: 80; }
.drawer { background: var(--raised); box-shadow: var(--shadow-drawer); display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 720px; position: fixed; right: 0; top: 0; width: min(720px, 94vw); z-index: 90; animation: slide-in 180ms ease-out; }
@keyframes slide-in { from { transform: translateX(24px); opacity: .7; } }
.drawer__badges { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.drawer__header { align-items: flex-start; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; padding: var(--s-3) var(--s-4); }.drawer__header h2 { font-size: var(--t-xl); margin-top: var(--s-2); }.drawer--form .drawer__header h2 { margin-top: 0; }.drawer__context { color: var(--muted); margin-top: 0; }.drawer__context:empty { display: none; }.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-4); }.drawer__footer { border-top: 1px solid var(--border); display: flex; flex-shrink: 0; gap: var(--s-2); justify-content: flex-end; padding: var(--s-3) var(--s-4); }.drawer--form { max-width: 840px; width: min(840px, 94vw); }.drawer--compact { max-width: 520px; width: min(520px, 94vw); }.drawer__form { display: flex; flex: 1; flex-direction: column; min-height: 0; }.drawer-form__errors { margin-bottom: var(--s-4); }

.form-layout { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }.form-layout--single { grid-template-columns: 1fr; max-width: 780px; }.form-wide, .form-actions { grid-column: 1 / -1; }
.form-section { align-self: start; }
.field-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }.field > span, .field legend { color: var(--ink); font-size: var(--t-xs); font-weight: 650; }.field small { color: var(--muted); font-size: var(--t-xs); }.field--wide { grid-column: 1 / -1; }fieldset.field { border: 0; margin: 0; padding: 0; }
.country-picker { position: relative; }
.country-picker.is-open { z-index: 20; }
.country-picker__label { color: var(--ink); font-size: var(--t-xs); font-weight: 650; }
.country-picker.is-enhanced > select { display: none; }
.country-combobox, .country-search-control { position: relative; }
.country-trigger {
  align-items: center;
  background: var(--input);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  min-height: 38px;
  padding: var(--s-2) var(--s-3);
  text-align: left;
  width: 100%;
}
.country-trigger:hover { border-color: var(--border-hover); }
.country-trigger:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--focus-shadow); outline: 0; }
.country-trigger.is-empty { color: var(--muted); }
.country-trigger::after {
  border-bottom: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  content: "";
  height: 7px;
  margin: calc(-1 * var(--s-1)) 0 0 var(--s-3);
  transform: rotate(45deg);
  transition: transform var(--ease), margin var(--ease);
  width: 7px;
}
.country-picker.is-open .country-trigger::after { margin-top: var(--s-1); transform: rotate(225deg); }
.country-search-control::before {
  border: 1.7px solid var(--muted);
  border-radius: 50%;
  content: "";
  height: 11px;
  left: 13px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-62%);
  width: 11px;
  z-index: 1;
}
.country-search-control::after {
  background: var(--muted);
  border-radius: 2px;
  content: "";
  height: 2px;
  left: 24px;
  pointer-events: none;
  position: absolute;
  top: calc(50% + 4px);
  transform: rotate(45deg);
  transform-origin: left center;
  width: 6px;
  z-index: 1;
}
.country-search-control input[type="text"] { padding-left: var(--s-8); width: 100%; }
.country-dropdown {
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  box-shadow: var(--shadow);
  left: 0;
  padding: var(--s-2);
  position: absolute;
  top: calc(100% + 5px);
  width: 100%;
  z-index: 30;
}
.country-options { margin-top: var(--s-1); max-height: 230px; overflow-y: auto; overscroll-behavior: contain; }
.country-option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  gap: var(--s-2);
  min-height: 34px;
  padding: var(--s-2) var(--s-2);
  text-align: left;
  width: 100%;
}
.country-option:hover, .country-option.is-active { background: var(--hover); }
.country-option.is-selected { background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 700; }
.country-option.is-active { box-shadow: inset 0 0 0 1px var(--border-strong); }
.country-option.is-selected.is-active { box-shadow: inset 0 0 0 1px var(--accent-border); }
.country-option-name { flex: 1; min-width: 0; }
.country-option-code { color: var(--muted); font-size: var(--t-xs); font-weight: 750; letter-spacing: .08em; }
.country-option.is-selected .country-option-code { color: var(--accent-text); }
.country-empty { color: var(--muted); margin: 0; padding: var(--s-4) var(--s-2); text-align: center; }
.reservation-calendar { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-3); }.reservation-calendar__header { align-items: center; display: flex; gap: var(--s-4); justify-content: space-between; margin-bottom: var(--s-3); }.reservation-calendar__header strong { color: var(--ink); font-size: var(--t-sm); }.reservation-calendar__header p { color: var(--muted); font-size: var(--t-xs); margin-top: var(--s-1); }.reservation-calendar__navigation { align-items: center; display: flex; flex-shrink: 0; gap: var(--s-2); }.reservation-calendar__navigation > span { color: var(--ink); font-size: var(--t-xs); font-weight: 700; min-width: 92px; text-align: center; text-transform: capitalize; }.reservation-calendar__months { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }.reservation-calendar__month { min-width: 0; }.reservation-calendar__month h4 { color: var(--ink); font-size: var(--t-xs); margin-bottom: var(--s-2); text-align: center; text-transform: capitalize; }.reservation-calendar__weekdays, .reservation-calendar__days { display: grid; gap: var(--s-1); grid-template-columns: repeat(7, minmax(0, 1fr)); }.reservation-calendar__weekdays { margin-bottom: var(--s-1); }.reservation-calendar__weekdays span { color: var(--muted); font-size: var(--t-xs); font-weight: 700; text-align: center; text-transform: uppercase; }.reservation-calendar__blank, .reservation-calendar__day { aspect-ratio: 1; min-width: 0; }.reservation-calendar__day { align-items: center; appearance: none; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text); cursor: pointer; display: flex; font: inherit; font-size: var(--t-xs); font-weight: 700; justify-content: center; padding: 0; position: relative; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }.reservation-calendar__day.is-available { background: var(--calendar-available-bg); border-color: var(--calendar-available-border); color: var(--calendar-available-text); }.reservation-calendar__day.is-available:not(:disabled):hover { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--focus-shadow); transform: translateY(-1px); }.reservation-calendar__day.is-unavailable { background: var(--red-tone-bg); border-color: var(--error-border); color: var(--red-tone-text); cursor: not-allowed; opacity: .75; text-decoration: line-through; }.reservation-calendar__day.is-rate-covered { background: var(--blue-tone-bg); border-color: var(--info-border); color: var(--blue-tone-text); cursor: not-allowed; opacity: .9; }.reservation-calendar__day.is-range-blocked { cursor: not-allowed; opacity: .6; }.reservation-calendar__day.is-in-range { background: var(--calendar-range-bg); border-color: var(--calendar-range-border); color: var(--calendar-range-text); }.reservation-calendar__day.is-arrival, .reservation-calendar__day.is-departure, .reservation-calendar__day.is-anchor { background: var(--accent-solid); border-color: var(--accent-solid); border-radius: 7px; box-shadow: none; color: var(--accent-on-solid); opacity: 1; text-decoration: none; }.reservation-calendar__day.is-anchor { box-shadow: 0 0 0 2px var(--focus-shadow); }.reservation-calendar__day.is-today::after { border: 1px solid currentcolor; border-radius: 999px; bottom: 3px; content: ""; height: 2px; position: absolute; width: 2px; }.reservation-calendar__day:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; z-index: 1; }.reservation-calendar__legend { align-items: center; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); }.reservation-calendar__legend span { align-items: center; color: var(--muted); display: flex; font-size: var(--t-xs); gap: var(--s-1); }.reservation-calendar__key { border: 1px solid; border-radius: 4px; display: inline-block; height: 12px; width: 18px; }.reservation-calendar__key--available { background: var(--calendar-available-bg); border-color: var(--calendar-available-border); }.reservation-calendar__key--unavailable { background: var(--red-tone-bg); border-color: var(--error-border); }.reservation-calendar__key--rate-covered { background: var(--blue-tone-bg); border-color: var(--info-border); }.reservation-calendar__key--selected { background: var(--calendar-range-bg); border-color: var(--calendar-range-border); box-shadow: inset 4px 0 var(--accent-solid), inset -4px 0 var(--accent-solid); }
.reservation-calendar__key--selected { box-shadow: none; }
.date-range-calendar { min-width: 0; }
.date-range-calendar__label { color: var(--ink); display: block; font-size: var(--t-xs); font-weight: 650; margin-bottom: var(--s-1); }
.date-range-calendar__selection { display: block; }
.date-range-calendar__trigger { align-items: center; background: var(--input); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--text); display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 30px; min-height: 62px; min-width: 0; padding: var(--s-2); text-align: left; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease); width: 100%; }
.date-range-calendar__part { appearance: none; background: transparent; border: 0; border-radius: var(--radius-sm); color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 0; min-height: 48px; min-width: 0; padding: var(--s-1); text-align: left; }
.date-range-calendar__direction { align-items: center; color: var(--muted); display: flex; justify-content: center; }
.date-range-calendar__direction svg { height: 14px; width: 14px; }
.date-range-calendar__part small { color: var(--muted); font-size: var(--t-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.date-range-calendar__part strong { color: var(--ink); font-size: var(--t-sm); font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-range-calendar__trigger > svg { background: var(--sunken); border: 1px solid var(--border); border-radius: 7px; color: var(--muted); flex: 0 0 auto; height: 30px; padding: var(--s-1); width: 30px; }
.date-range-calendar__part:hover { background: var(--hover); }
.date-range-calendar__part:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }
.date-range-calendar__part[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-soft-text); }
.date-range-calendar__trigger:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--focus-shadow); }
.date-range-calendar__trigger:has(.date-range-calendar__part:hover) > svg, .date-range-calendar__trigger:focus-within > svg { border-color: var(--border-hover); color: var(--ink); }
.date-range-calendar__selection:not(.is-pending):not(.is-complete) .date-range-calendar__part:first-child strong, .date-range-calendar__selection.is-pending .date-range-calendar__part:last-of-type strong { color: var(--accent-text); }
.date-range-calendar__selection.is-complete .date-range-calendar__trigger > svg { background: var(--accent-soft); border-color: var(--calendar-available-border); color: var(--accent-text); }
.date-range-calendar__selection.is-complete .date-range-calendar__trigger strong { color: var(--accent-text); }
.calendar-popover { background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-dialog); color: var(--text); inset: auto; margin: 0; max-width: calc(100vw - 16px); overflow: auto; overscroll-behavior: contain; padding: 0; position: fixed; }.calendar-popover .reservation-calendar { background: var(--raised); border: 0; border-radius: var(--radius); padding: var(--s-4); }.calendar-popover__header-actions { align-items: center; display: flex; gap: var(--s-2); }.calendar-popover__footer { align-items: center; border-top: 1px solid var(--border); display: flex; gap: var(--s-3); justify-content: space-between; margin-top: var(--s-3); padding-top: var(--s-3); }.calendar-popover__footer > span { display: flex; gap: var(--s-2); margin-left: auto; }
.reservation-calendar__day.is-rate-boundary { background: linear-gradient(135deg, var(--calendar-range-bg) 0 50%, var(--blue-tone-bg) 50%); border-color: var(--accent-border); color: var(--ink); cursor: pointer; opacity: 1; }.reservation-calendar__day.is-rate-boundary:not(:disabled):hover { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--focus-shadow); transform: translateY(-1px); }
/* --- Reserveringslade -----------------------------------------------------
   Aankomst en vertrek zijn samen één gegeven en staan daarom in één balk, met het
   totaalbedrag ertegenover. Het totaal is een feit en blijft neutraal; de regel
   eronder draagt de toestand van het geld, in kleur én in woorden.

   De vier tabbladen zijn radioknoppen met labels: geen JavaScript nodig, en met
   het toetsenbord wissel je met de pijltjes. Kent de browser :has() niet, dan
   verschijnen alle panelen onder elkaar zoals voorheen. */
.reservation-detail__meta { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: var(--t-xs); gap: var(--s-2); margin-top: var(--s-1); }
.reservation-detail__meta i { color: var(--border-strong); font-style: normal; }
.reservation-stay-bar { align-items: center; background: var(--sunken); border-bottom: 1px solid var(--border); display: flex; flex: none; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; padding: var(--s-3) var(--s-4); }
.reservation-stay-bar__stay { min-width: 0; }
.reservation-stay-bar__dates { align-items: center; color: var(--ink); display: flex; flex-wrap: wrap; font-size: var(--t-md); font-weight: 700; gap: var(--s-2); }
.reservation-stay-bar__dates time { font-variant-numeric: tabular-nums; }
.reservation-stay-bar__dates svg { color: var(--muted); flex: none; height: 14px; width: 14px; }
.reservation-stay-bar__nights { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: var(--t-xs); font-weight: 620; padding: 2px var(--s-2); }
.reservation-stay-bar__times { color: var(--muted); font-size: var(--t-xs); margin-top: var(--s-1); }
.reservation-stay-bar__money { display: flex; flex-direction: column; text-align: right; }
.reservation-stay-bar__money strong { color: var(--ink); font-size: var(--t-xl); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.2; }
.reservation-stay-bar__balance { font-size: var(--t-xs); font-weight: 620; }
.reservation-stay-bar__balance--neutral { color: var(--muted); }
.reservation-stay-bar__balance--ok { color: var(--green-tone-text); }
.reservation-stay-bar__balance--warn { color: var(--amber-tone-text); }
.reservation-stay-bar__balance--bad { color: var(--red-tone-text); }
.reservation-tabs { border-bottom: 1px solid var(--border); display: flex; flex: none; gap: var(--s-4); padding: 0 var(--s-4); }
.reservation-tabs__input { height: 1px; opacity: 0; pointer-events: none; position: absolute; width: 1px; }
.reservation-tabs label { align-items: center; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; display: flex; font-size: var(--t-sm); font-weight: 620; gap: var(--s-2); min-height: 44px; padding: 0 0 var(--s-1); }
.reservation-tabs label:hover { color: var(--ink); }
.reservation-tabs__count { background: var(--sunken); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; padding: 0 var(--s-2); }
.reservation-tabs__input:checked + label { border-bottom-color: var(--accent-solid); color: var(--ink); font-weight: 700; }
.reservation-tabs__input:focus-visible + label { border-radius: 3px; outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.reservation-panels { display: flex; flex-direction: column; }
.reservation-panel { display: none; flex-direction: column; gap: var(--s-6); }
.drawer--reservation:has(#reservation-tab-overview:checked) .reservation-panel--overview,
.drawer--reservation:has(#reservation-tab-financial:checked) .reservation-panel--financial,
.drawer--reservation:has(#reservation-tab-guest:checked) .reservation-panel--guest,
.drawer--reservation:has(#reservation-tab-log:checked) .reservation-panel--log { display: flex; }
@supports not selector(:has(*)) { .reservation-panel { display: flex; } .reservation-tabs { display: none; } }
.reservation-quick-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.reservation-quick-actions form { flex: 1 1 180px; }
.reservation-quick-actions .button { justify-content: center; width: 100%; }
.reservation-progress { background: var(--border); border-radius: 999px; height: 6px; overflow: hidden; }
.reservation-progress > span { background: var(--accent-solid); border-radius: 999px; display: block; height: 100%; width: calc(var(--paid-share, 0) * 1%); }
.reservation-progress__caption { color: var(--muted); font-size: var(--t-xs); }
.money-lines__total { border-top: 1px solid var(--border); font-weight: 700; margin-top: var(--s-1); }
.note .eyebrow { align-items: center; display: flex; gap: var(--s-1); }
.note .eyebrow svg { height: 12px; width: 12px; }
@media (max-width: 560px) {
  .reservation-tabs { gap: var(--s-3); overflow-x: auto; scrollbar-width: none; }
  .reservation-tabs::-webkit-scrollbar { display: none; }
  .reservation-stay-bar__money { text-align: left; }
}

.drawer-sections { display: grid; }/* Geavanceerde instellingen: dichtgeklapt standaard, open zodra een waarde afwijkt. */.drawer-advanced { margin-top: var(--s-4); }.drawer-advanced__body { display: grid; gap: var(--s-3); }.drawer-advanced__help { color: var(--muted); font-size: var(--t-sm); line-height: 1.45; margin: 0; }.drawer-section { display: grid; gap: var(--s-4); padding-bottom: var(--s-4); }.drawer-section + .drawer-section { border-top: 1px solid var(--border); padding-top: var(--s-4); }.drawer-section:last-child { padding-bottom: 0; }/* Kop en toelichting onder elkaar: naast elkaar leest een sectiekop als een
   doorlopende zin in plaats van als kop. */
.drawer-section__header { display: grid; gap: var(--s-1); }.drawer-section__header h3 { font-size: var(--t-md); font-weight: 700; letter-spacing: -.01em; }.drawer-section__header p { color: var(--muted); font-size: var(--t-xs); line-height: 1.45; max-width: 62ch; }.rate-drawer__prices { width: 100%; }fieldset.rate-drawer__changeover { background: transparent; border: 0; border-radius: 0; padding: 0; }.rate-drawer__changeover > legend { padding: 0; }
.form-actions { align-items: center; display: flex; gap: var(--s-2); justify-content: flex-end; padding: var(--s-1) 0 var(--s-6); }
.choice-list { border: 0; display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; }.choice-list label, .radio-cards label { align-items: center; border: 1px solid var(--border); border-radius: 8px; display: flex; gap: var(--s-2); padding: var(--s-2); }.choice-list input, .radio-cards input, .switch-field input, .check-row input { min-height: 0; }.choice-list label > span, .radio-cards label > span { display: flex; flex-direction: column; }.choice-list small, .radio-cards small { color: var(--muted); }
.money-input, .suffix-input { align-items: stretch; display: flex; }.money-input b, .suffix-input b { align-items: center; background: var(--sunken); border: 1px solid var(--border-strong); border-radius: 7px 0 0 7px; color: var(--muted); display: flex; font-weight: 500; padding: 0 var(--s-2); }.money-input input { border-left: 0; border-radius: 0 7px 7px 0; min-width: 0; width: 100%; }.suffix-input input { border-radius: 7px 0 0 7px; min-width: 0; width: 100%; }.suffix-input b { border-left: 0; border-radius: 0 7px 7px 0; font-size: var(--t-xs); white-space: nowrap; }
.discount-value-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; }.discount-value-control > input { border-radius: 7px 0 0 7px; min-width: 0; width: 100%; }.discount-value-units { display: grid; grid-template-columns: repeat(2, 43px); }.discount-value-units label { cursor: pointer; position: relative; }.discount-value-units input { min-height: 0; opacity: 0; position: absolute; }.discount-value-units span { align-items: center; background: var(--sunken); border: 1px solid var(--border-strong); border-left: 0; color: var(--muted); display: flex; font-size: var(--t-md); font-weight: 750; height: 100%; justify-content: center; transition: background var(--ease), border-color var(--ease), color var(--ease); }.discount-value-units label:last-child span { border-radius: 0 7px 7px 0; }.discount-value-units input:checked + span { background: var(--accent-soft-strong); border-color: var(--accent-border); color: var(--accent-soft-text); box-shadow: inset 0 0 0 1px var(--accent-border); }.discount-value-units input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 1px; position: relative; z-index: 1; }
.discount-value-field { max-width: 320px; }
.discount-value-field--compact { max-width: calc(50% - var(--s-2)); }
.optional-period { gap: var(--s-1); }
.switch-field { align-items: center; display: flex; gap: var(--s-2); grid-column: 1 / -1; }.switch-field input { accent-color: var(--accent-solid); flex: 0 0 auto; height: 20px; width: 20px; }.switch-field > span { display: grid; gap: 0; }.switch-field small { color: var(--muted); font-size: var(--t-xs); line-height: 1.45; }
/* De bestandskiezer van de browser brengt zijn eigen Engelse tekst en vorm mee.
   De input blijft bereikbaar met het toetsenbord; alleen de weergave is van ons. */
.file-field { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.file-field > input[type="file"] { height: 1px; opacity: 0; position: absolute; width: 1px; }
.file-field > label { cursor: pointer; }
.file-field > input[type="file"]:focus-visible + label { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--focus-ring); }
.file-field__name { color: var(--muted); font-size: var(--t-xs); min-width: 0; overflow-wrap: anywhere; }
.file-field__name.is-chosen { color: var(--text); font-weight: 620; }
.file-field__hint { color: var(--muted); display: block; font-size: var(--t-xs); margin-top: var(--s-1); }
/* Uploadvlak: dezelfde input, maar groot genoeg om de kaart te vullen en om een
   gesleept bestand aan te nemen. Slepen is een toevoeging; kiezen met de knop en
   met het toetsenbord blijft de weg die zonder JavaScript ook werkt. Het vlak
   heeft geen eigen tabstop, dus de rand licht op via :focus-within. */
.file-field--drop { background: var(--sunken); border: 1px dashed var(--border); border-radius: var(--radius); flex-direction: column; gap: var(--s-3); justify-content: center; padding: var(--s-8) var(--s-4); position: relative; text-align: center; transition: background var(--ease), border-color var(--ease); }
.file-field--drop:focus-within, .file-field--drop.is-dragging { background: var(--accent-soft); border-color: var(--accent-border); border-style: solid; }
.file-field__icon { color: var(--subtle); height: 28px; width: 28px; }
.file-field__lead { font-size: var(--t-sm); font-weight: 650; margin: 0; }
.file-field__chosen { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; gap: var(--s-2); margin: 0; max-width: 100%; padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); }
.file-field__chosen[hidden] { display: none; }
.file-field__chosen svg { color: var(--subtle); flex: 0 0 auto; height: 16px; width: 16px; }
.file-field--drop .file-field__name { font-size: var(--t-sm); }
.file-field--drop .file-field__hint { margin-top: 0; }
.rental-terms { display: grid; gap: var(--s-3); justify-items: start; }
.rental-terms__current { align-items: center; background: var(--sunken); border: 1px solid var(--border); border-radius: 8px; display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-3); }
.rental-terms__current svg { color: var(--subtle); height: 16px; width: 16px; }
.drawer__note { color: var(--muted); font-size: var(--t-xs); line-height: 1.45; margin-top: var(--s-4); }
/* Toggle chips: one row of checkboxes where the chip itself carries the state,
   so a long list of short labels reads as a block instead of a scattered grid. */
.check-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.check-row label { position: relative; }
.check-row input { opacity: 0; position: absolute; }
.check-row span { align-items: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; display: flex; font-size: var(--t-sm); gap: var(--s-1); line-height: 1.2; min-height: 32px; padding: 0 var(--s-3); transition: background var(--ease), border-color var(--ease), color var(--ease); }
.check-row span svg { height: 14px; opacity: 0; width: 14px; }
.check-row label:hover span { border-color: var(--border-hover); }
.check-row input:checked + span { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-soft-text); }
.check-row input:checked + span svg { opacity: 1; }
.check-row input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.changeover-days { gap: var(--s-2); }fieldset.changeover-days { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-3); }.changeover-days > legend { font-size: var(--t-sm); padding: 0 var(--s-1); }.changeover-days > small { margin: 0 0 var(--s-1); }.changeover-days__grid { align-items: center; display: grid; gap: var(--s-1); grid-template-columns: minmax(78px, 1.35fr) repeat(7, minmax(38px, 1fr)); }.changeover-days__day { color: var(--muted); font-size: var(--t-xs); font-weight: 750; text-align: center; text-transform: uppercase; }.changeover-days__grid > strong { font-size: var(--t-xs); font-weight: 700; padding-right: var(--s-1); }.changeover-days__grid > label { cursor: pointer; min-width: 0; position: relative; }.changeover-days__grid input { min-height: 0; opacity: 0; position: absolute; }.changeover-days__grid label > span[aria-hidden] { align-items: center; background: var(--input); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--accent-soft-text); display: flex; font-size: var(--t-lg); font-weight: 800; height: 38px; justify-content: center; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease); }.changeover-days__grid label:hover > span[aria-hidden] { border-color: var(--border-hover); transform: translateY(-1px); }.changeover-days__grid input:checked + span[aria-hidden] { background: var(--accent-soft-strong); border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }.changeover-days__grid input:checked + span[aria-hidden]::after { content: "✓"; }.changeover-days__grid input:focus-visible + span[aria-hidden] { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

.intro-banner { align-items: center; background: linear-gradient(105deg, var(--surface), var(--accent-soft)); border: 1px solid var(--border); border-radius: var(--radius); display: flex; justify-content: space-between; margin-bottom: var(--s-4); padding: var(--s-4) var(--s-4); }.intro-banner p { color: var(--muted); margin-top: var(--s-1); max-width: 720px; }.intro-banner > span { background: var(--raised); border: 1px solid var(--border); border-radius: 999px; padding: var(--s-1) var(--s-2); }
.discount-sections { display: grid; gap: var(--s-6); }
.discount-section__header { gap: var(--s-4); }
.discount-section__header > div { flex-wrap: wrap; min-width: 0; }
.discount-section__header > .button { flex: 0 0 auto; white-space: nowrap; }
.accommodation-list { gap: var(--s-6); }
.accommodation-card { overflow: visible; }
.accommodation-card__hero { background: linear-gradient(115deg, var(--surface) 52%, var(--accent-soft)); border-radius: var(--radius) var(--radius) 0 0; display: grid; min-height: 128px; padding: var(--s-6) var(--s-6); }
.accommodation-card__identity { align-items: start; display: grid; gap: var(--s-3); grid-template-columns: auto minmax(0, 1fr) auto; }
.type-icon { align-items: center; background: var(--accent-soft-strong); border-radius: 11px; color: var(--accent-text); display: flex; height: 48px; justify-content: center; width: 48px; }
.type-icon svg { height: 22px; width: 22px; }
.heading-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.accommodation-card__copy h2 { font-size: var(--t-xl); letter-spacing: -.02em; }
.accommodation-card__copy h2 a { color: inherit; text-decoration: none; }
.accommodation-card__copy h2 a:hover { color: var(--accent-text); }
.accommodation-card__copy > p { color: var(--text); font-size: var(--t-sm); line-height: 1.55; margin-top: var(--s-2); max-width: 680px; }
.accommodation-card__controls { align-items: center; align-self: start; display: flex; gap: var(--s-1); }
.accommodation-card__controls > .icon-button { height: 32px; min-height: 32px; width: 32px; }
.accommodation-card__edit { align-self: start; }
.accommodation-card__body { border-top: 1px solid var(--border); padding: var(--s-4) var(--s-6); }
.accommodation-actions { display: grid; gap: var(--s-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.payment-terms { container-type: inline-size; display: grid; gap: var(--s-2); grid-column: 1 / -1; min-width: 0; }
.payment-terms__help { color: var(--muted); font-size: var(--t-xs); line-height: 1.45; margin: 0; }
/* Eén omlijnde lijst met één regel per termijn en de labels één keer als
   kolomkop; drie losse kaders met herhaalde labels maakten het blok onrustig. */
.payment-terms__list { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-width: 0; overflow: hidden; }
.payment-terms__colhead, .payment-term { align-items: center; display: grid; gap: var(--s-3); grid-template-columns: 24px minmax(110px, 140px) minmax(0, 1fr) 30px; min-width: 0; padding: var(--s-2) var(--s-3); }
.payment-terms__colhead { background: var(--sunken); border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--t-xs); font-weight: 680; letter-spacing: .02em; padding-bottom: var(--s-2); padding-top: var(--s-2); text-transform: uppercase; }
.payment-term + .payment-term { border-top: 1px solid var(--border); }
.payment-term input, .payment-term select { min-height: 34px; }
.payment-term__number { align-items: center; background: var(--accent-soft); border-radius: 50%; color: var(--accent-soft-text); display: inline-flex; font-size: var(--t-xs); font-weight: 750; height: 24px; justify-content: center; width: 24px; }
.payment-term__remove { align-items: center; appearance: none; background: transparent; border: 0; border-radius: 6px; color: var(--muted); display: inline-flex; height: 30px; justify-content: center; justify-self: end; padding: 0; transition: background var(--ease), color var(--ease); width: 30px; }
.payment-term__remove:hover { background: var(--error-bg); color: var(--red-tone-text); }
.payment-term__remove:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }
.payment-term__remove svg { height: 14px; width: 14px; }
/* Het relatieve moment vormt één zin: "14 dagen voor aankomst". De keuzelijst
   is daarom het achterste deel van hetzelfde invoerveld. */
.payment-term__when-control { display: grid; grid-template-columns: minmax(62px, 84px) minmax(170px, 240px); min-width: 0; }
/* :where houdt de specificiteit laag zodat de mobiele 16px/48px-regels winnen. */
.payment-term__when-control :where(input) { border-radius: 7px 0 0 7px; min-height: 40px; min-width: 0; text-align: center; width: 100%; }
.payment-term__when-control :where(select) { background: var(--sunken); border-left: 0; border-radius: 0 7px 7px 0; font-size: var(--t-sm); font-weight: 620; min-height: 40px; min-width: 0; width: 100%; }
.payment-term__when-control input:focus, .payment-term__when-control select:focus { position: relative; z-index: 1; }
.payment-term__when-control.is-at-booking { grid-template-columns: minmax(170px, 240px); }
.payment-term__when-control.is-at-booking select { background: var(--input); border-left: 1px solid var(--border-strong); border-radius: 7px; }
.payment-terms__footer { align-items: center; display: flex; gap: var(--s-2); justify-content: space-between; }
.payment-terms__total { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 999px; color: var(--accent-soft-text); font-size: var(--t-xs); font-weight: 700; padding: var(--s-1) var(--s-2); white-space: nowrap; }
.payment-terms__total.is-invalid { background: var(--error-bg); border-color: var(--error-border); color: var(--red-tone-text); }
@container (max-width: 620px) { .payment-terms__colhead { display: none; }.payment-term { grid-template-columns: 24px minmax(0, 1fr) 30px; row-gap: var(--s-2); }.payment-term__remove { grid-column: 3; grid-row: 1; }.payment-term__when-control { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(62px, 84px) minmax(0, 1fr); }.payment-term__when-control.is-at-booking { grid-template-columns: minmax(0, 1fr); }.payment-terms__footer { align-items: stretch; flex-direction: column-reverse; }.payment-terms__footer .button { align-self: flex-start; }.payment-terms__total { align-self: flex-start; } }
.accommodation-actions > a { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); display: grid; gap: var(--s-2); grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; padding: var(--s-3); text-decoration: none; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.accommodation-actions > a:hover { background: var(--accent-soft); border-color: var(--accent-border); box-shadow: var(--shadow-xs); transform: translateY(-1px); }
.accommodation-actions__icon { align-items: center; background: var(--accent-soft); border-radius: 8px; color: var(--accent-text); display: flex; height: 34px; justify-content: center; width: 34px; }
.accommodation-actions strong, .accommodation-actions small { display: block; }
.accommodation-actions strong { color: var(--ink); font-size: var(--t-xs); }
.accommodation-actions small { color: var(--muted); font-size: var(--t-xs); margin-top: 0; }
.accommodation-actions__arrow { color: var(--subtle); height: 14px; width: 14px; }
.accommodation-unit-table, .order-table { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.accommodation-unit-table th:first-child, .accommodation-unit-table td:first-child, .order-table th:first-child, .order-table td:first-child { padding-left: var(--s-2); padding-right: var(--s-1); width: 42px; }
.accommodation-unit-table th:last-child, .accommodation-unit-table td:last-child, .order-table th:last-child, .order-table td:last-child { width: 1%; }
.accommodation-unit-table tbody tr, .order-table tbody tr { transition: background var(--ease), box-shadow var(--ease), opacity var(--ease); }
.accommodation-unit-table tbody tr.is-dragging, .order-table tbody tr.is-dragging { background: var(--accent-soft); box-shadow: var(--shadow-drag); opacity: .55; }
.accommodation-unit-table tbody tr.is-saving, .order-table tbody tr.is-saving { cursor: progress; opacity: .65; }
.accommodation-unit-table__order, .order-table__order { touch-action: none; }
.unit-drag-handle { align-items: center; appearance: none; background: transparent; border: 0; color: var(--muted); cursor: grab; display: inline-flex; height: 32px; justify-content: center; padding: 0; width: 32px; }
.unit-drag-handle:active { cursor: grabbing; }
.unit-drag-handle:focus-visible { border-radius: 6px; outline: 3px solid var(--focus-ring); }
.unit-drag-handle svg { height: 17px; transform: rotate(90deg); width: 17px; }
.accommodation-unit-table__actions, .order-table__actions { display: flex; gap: var(--s-1); justify-content: flex-end; }
.accommodation-unit-table__actions .icon-button { height: 30px; min-height: 30px; width: 30px; }
.accommodation-unit-table__actions [data-unit-move="up"] svg { transform: rotate(90deg); }
.accommodation-unit-table__actions [data-unit-move="down"] svg { transform: rotate(90deg); }
.accommodation-unit-order-status, .order-table__status { color: var(--muted); font-size: var(--t-xs); min-height: 18px; padding-top: var(--s-1); }
.accommodation-unit-order-status.is-error, .order-table__status.is-error { color: var(--red-tone-text); }
/* Zoeken en boeken. De labeltabel geeft elke gasttaal een eigen kolom, zodat de
   verhuurder één voorziening in één rij afmaakt. De kolomkop draagt de taal, dus
   het veldlabel is in tabelvorm verborgen; onder 760px valt de tabel uit elkaar
   in kaarten en moet het label zichtbaar worden. */
.search-amenity-table th[scope="row"] { background: transparent; color: var(--text); font-size: var(--t-sm); font-weight: 400; letter-spacing: normal; min-width: 180px; padding: var(--s-3); text-transform: none; vertical-align: middle; white-space: normal; }
.search-amenity-table th:last-child, .search-amenity-table td:last-child { width: 1%; }
.search-amenity-table td .field > span { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: calc(-1 * var(--hairline)); overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.search-amenity-table td input { min-width: 190px; }
.search-warnings { display: grid; gap: var(--s-1); list-style: none; margin: var(--s-1) 0 0; padding: 0; }
.search-warnings li { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.search-settings__footer { justify-content: flex-end; }
@media (max-width: 760px) {
  .search-amenity-table thead { display: none; }
  .search-amenity-table tbody tr { border-bottom: 1px solid var(--border); display: grid; gap: var(--s-2); padding: var(--s-3) 0; }
  .search-amenity-table th[scope="row"], .search-amenity-table td { border-bottom: 0; padding: 0 var(--s-3); width: auto; }
  .search-amenity-table td .field > span { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: normal; width: auto; }
  .search-amenity-table td input { min-width: 0; width: 100%; }
}
.dialog.booking-preview-dialog, .dialog.mail-preview-dialog { height: min(900px, calc(100vh - 30px)); height: min(900px, calc(100dvh - 30px)); max-height: calc(100vh - 30px); max-height: calc(100dvh - 30px); max-width: calc(100vw - 30px); }
.dialog.booking-preview-dialog { width: 1180px; }
.dialog.mail-preview-dialog { width: 760px; }
.booking-preview-dialog[open], .mail-preview-dialog[open] { display: flex; flex-direction: column; }
.booking-preview-dialog header, .mail-preview-dialog header { flex: 0 0 auto; }
.booking-preview-dialog__body, .mail-preview-dialog__body { background: var(--canvas); flex: 1 1 auto; min-height: 0; overflow: hidden; }
.booking-preview-dialog iframe, .mail-preview-dialog iframe { background: var(--canvas); border: 0; display: block; height: 100%; width: 100%; }
.extra-order-table th:first-child, .extra-order-table td:first-child { padding-left: var(--s-2); padding-right: var(--s-1); width: 42px; }
.extra-order-table th:last-child, .extra-order-table td:last-child { width: 1%; }
.extra-order-table tbody tr { transition: background var(--ease), box-shadow var(--ease), opacity var(--ease); }
.extra-order-table tbody tr.is-dragging { background: var(--accent-soft); box-shadow: var(--shadow-drag); opacity: .55; }
.extra-order-table tbody tr.is-saving { cursor: progress; opacity: .65; }
.extra-order-table__order { touch-action: none; }
.extra-order-status { color: var(--muted); font-size: var(--t-xs); min-height: 18px; padding: var(--s-1) var(--s-4) 0; }
.extra-order-status.is-error { color: var(--red-tone-text); }
.dialog { background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); color: var(--text); max-height: 90vh; max-width: calc(100vw - 30px); padding: 0; width: 620px; }.dialog::backdrop { background: var(--dialog-overlay); backdrop-filter: blur(2px); }.dialog header, .dialog footer { align-items: center; display: flex; justify-content: space-between; padding: var(--s-4) var(--s-4); }.dialog header { border-bottom: 1px solid var(--border); }.dialog footer { border-top: 1px solid var(--border); gap: var(--s-2); justify-content: flex-end; }.dialog__body { max-height: 65vh; overflow-y: auto; padding: var(--s-4); }
.platform-announcement[open] { display: flex; flex-direction: column; }
.platform-announcement h2, .platform-announcement__body { margin: 0; }
.platform-announcement__body { overflow-wrap: anywhere; white-space: pre-line; }

/* Calendar integrations: start with the user's task and reveal only the relevant direction. */
.integration-page { display: grid; gap: var(--s-6); }
.integration-intro { align-items: center; display: grid; gap: var(--s-6); grid-template-columns: minmax(210px, .75fr) minmax(540px, 1.8fr); padding: var(--s-4); }
.integration-intro__copy h2 { font-size: var(--t-lg); margin: 0 0 var(--s-1); }
.integration-intro__copy > p:last-child, .integration-section-head p, .integration-dialog header p { color: var(--muted); }
.integration-direction-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.integration-direction { align-items: center; appearance: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); display: grid; gap: var(--s-3); grid-template-columns: auto minmax(0, 1fr) auto; min-height: 86px; padding: var(--s-3); text-align: left; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease); }
.integration-direction:hover { background: var(--sunken); border-color: var(--accent-border); }
.integration-direction[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); box-shadow: inset 0 0 0 1px var(--accent-border); }
.integration-direction__icon { align-items: center; background: var(--accent-soft-strong); border-radius: 9px; color: var(--accent-text); display: flex; height: 36px; justify-content: center; width: 36px; }
.integration-direction strong, .integration-direction small { display: block; }
.integration-direction strong { font-size: var(--t-sm); margin-bottom: var(--s-1); }
.integration-direction small { color: var(--muted); font-size: var(--t-xs); line-height: 1.35; }
.integration-direction__count { align-items: center; background: var(--raised); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); display: flex; font-size: var(--t-xs); font-weight: 700; height: 25px; justify-content: center; min-width: 25px; padding: 0 var(--s-2); }
.integration-panel { display: grid; gap: var(--s-3); }
.integration-section-head { align-items: flex-end; display: flex; gap: var(--s-4); justify-content: space-between; }
.integration-section-head > div { max-width: 680px; }
.integration-section-head h2 { margin: 0 0 var(--s-1); }
.integration-table { min-width: 880px; }
.integration-table td:last-child { width: 1%; }
.integration-attention { color: var(--muted); font-size: var(--t-xs); white-space: nowrap; }
.integration-row-actions { align-items: center; display: flex; gap: var(--s-1); justify-content: flex-end; white-space: nowrap; }
.integration-row-actions form { display: inline-flex; }
.integration-link-state { display: flex; flex-direction: column; white-space: nowrap; }
.integration-link-state small { margin-top: 0; }
.integration-selection-summary { color: var(--muted); display: block; font-size: var(--t-xs); max-width: 240px; }
.integration-review { border-color: var(--warning-border); }
.integration-link-result { align-items: end; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); display: grid; gap: var(--s-6); grid-template-columns: minmax(220px, .8fr) minmax(360px, 1.2fr); padding: var(--s-4); }
.integration-link-result h2 { margin: 0 0 var(--s-1); }
.integration-link-result p:last-child { color: var(--muted); }
.integration-copy-field { display: flex; }
.integration-copy-field input { border-radius: 7px 0 0 7px; flex: 1; min-width: 0; }
.integration-copy-field .button { border-radius: 0 7px 7px 0; flex: 0 0 auto; }
.integration-link-action { min-width: 126px; }
.integration-dialog { width: 660px; }
.integration-dialog header { align-items: flex-start; }
.integration-dialog header h2 { margin: 0 0 var(--s-1); }
.integration-dialog__body { display: grid; gap: var(--s-4); }
.integration-export-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--s-1); }
.integration-export-choices label { align-items: flex-start; }
.integration-danger-zone { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--s-3); padding: var(--s-3); }
.integration-danger-zone h3 { margin-bottom: var(--s-1); }
.integration-danger-zone p { color: var(--muted); font-size: var(--t-xs); }
.integration-stop-form { align-items: end; display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr) auto; }

@media (max-width: 1024px) {
  .integration-intro { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .integration-direction-grid, .integration-link-result { grid-template-columns: 1fr; }
  .integration-section-head { align-items: stretch; flex-direction: column; }
  .integration-section-head .button { align-self: flex-start; }
  .integration-stop-form { align-items: stretch; grid-template-columns: 1fr; }
  .integration-export-choices { grid-template-columns: 1fr; }
  .integration-copy-field { flex-direction: column; gap: var(--s-2); }
  .integration-copy-field input, .integration-copy-field .button { border-radius: 7px; width: 100%; }
  .payment-terms__colhead { display: none; }
  .payment-term { grid-template-columns: 24px minmax(0, 1fr) 30px; row-gap: var(--s-2); }
  .payment-term__remove { grid-column: 3; grid-row: 1; }
  .payment-term__when-control { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(62px, 84px) minmax(0, 1fr); }
  .payment-term__when-control.is-at-booking { grid-template-columns: minmax(0, 1fr); }
  .payment-terms__footer { align-items: stretch; flex-direction: column-reverse; }
  .payment-terms__footer .button, .payment-terms__total { align-self: flex-start; }
}

.settings-layout { align-items: start; display: grid; gap: var(--s-4); grid-template-columns: 190px minmax(0, 1fr); }.settings-nav { display: flex; flex-direction: column; gap: 0; position: sticky; top: calc(var(--topbar) + 20px); }.settings-nav a { border-radius: 6px; color: var(--muted); padding: var(--s-2) var(--s-2); text-decoration: none; }.settings-nav a:hover { background: var(--surface); color: var(--accent-text); }.settings-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 680; }.settings-content { display: grid; gap: var(--s-4); }.settings-content .card { scroll-margin-top: calc(var(--topbar) + 15px); }
/* Binnen één kaart meerdere onderwerpen scheiden zonder een nieuwe kaart te
   openen; houdt lange instellingenpagina's leesbaar naarmate er meer bij komt. */
.settings-groups { display: grid; gap: var(--s-4); }.settings-group + .settings-group { border-top: 1px solid var(--border); padding-top: var(--s-4); }.settings-group h3 { font-size: var(--t-sm); font-weight: 700; }.settings-group__hint { color: var(--muted); font-size: var(--t-xs); line-height: 1.45; margin: 0 0 var(--s-3); max-width: 70ch; }.radio-cards { display: grid; gap: var(--s-2); grid-template-columns: 1fr 1fr; }.radio-cards input { accent-color: var(--accent-solid); }.sticky-actions { align-items: center; background: var(--topbar-bg); border: 1px solid var(--border); border-radius: var(--radius); bottom: 12px; box-shadow: var(--shadow); display: flex; justify-content: space-between; padding: var(--s-3) var(--s-3); position: sticky; }

.planboard-card { overflow: hidden; }.planboard-toolbar { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: var(--s-4); min-height: 61px; padding: var(--s-2) var(--s-3); }.planboard-toolbar .muted { margin-left: auto; }.planboard-scroll { overflow: auto; }.planboard { --unit-width: 180px; --cell-width: 44px; display: grid; grid-template-columns: var(--unit-width) calc(var(--days) * var(--cell-width)); min-width: calc(var(--unit-width) + var(--days) * var(--cell-width)); }.planboard__corner, .planboard__unit { background: var(--surface); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); left: 0; padding: var(--s-2) var(--s-3); position: sticky; z-index: 4; }.planboard__corner { align-items: center; color: var(--muted); display: flex; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; top: 0; z-index: 6; }.planboard__unit { display: flex; flex-direction: column; min-height: 58px; }.planboard__unit span { color: var(--muted); font-size: var(--t-xs); }.planboard__days, .planboard__lane, .planboard__cells { display: grid; grid-template-columns: repeat(var(--days), var(--cell-width)); position: relative; }.planboard__days { grid-template-rows: 28px 24px auto; position: sticky; top: 0; z-index: 5; }.planboard__cells { grid-column: 1 / -1; grid-row: 1; }.planboard__day { align-items: center; background: var(--sunken); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; font-size: var(--t-xs); grid-row: 3; justify-content: center; min-height: 50px; }.planboard__day span { color: var(--muted); text-transform: uppercase; }.planboard__day.is-weekend, .planboard__cell.is-weekend { background: var(--weekend); }.planboard__day.is-today { background: var(--accent-soft); color: var(--accent-soft-text); }.planboard__cell { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); min-height: 58px; }.planboard__cell.is-today { box-shadow: inset 2px 0 var(--focus-ring), inset -2px 0 var(--focus-ring); }.booking-block { align-self: center; background: var(--claim-confirmed); border-radius: 6px; color: var(--claim-text); display: flex; flex-direction: column; grid-column: var(--start) / span var(--span); grid-row: 1; height: 40px; justify-content: center; margin: 0 0; min-width: 0; overflow: hidden; padding: var(--s-1) var(--s-2); position: relative; text-decoration: none; z-index: 2; }.booking-block strong { color: inherit; font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.booking-block span { font-size: var(--t-xs); opacity: .85; }.booking-block--confirmed { background: var(--claim-confirmed); }.booking-block--option { background: var(--claim-option); }.booking-block--request { background: var(--claim-request); color: var(--claim-request-text); }.booking-block--overdue { background: var(--claim-overdue); }.booking-block--cancelled { background: var(--claim-cancelled); }.planboard-legend { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-4); padding: var(--s-3) var(--s-4); }.planboard-legend span { align-items: center; color: var(--muted); display: flex; font-size: var(--t-xs); gap: var(--s-1); }.legend-dot { background: var(--claim-confirmed); border-radius: 3px; height: 10px; width: 16px; }.legend-dot--confirmed { background: var(--claim-confirmed); }.legend-dot--option { background: var(--claim-option); }.legend-dot--request { background: var(--claim-request); }.legend-dot--overdue { background: var(--claim-overdue); }

.planboard__month, .planboard__week { align-items: center; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; grid-column: var(--start) / span var(--span); min-width: 0; overflow: hidden; white-space: nowrap; }
.planboard__month { background: var(--surface); color: var(--ink); font-size: var(--t-xs); font-weight: 700; grid-row: 1; padding: 0 var(--s-2); }
.planboard__week { background: var(--sunken); color: var(--muted); font-size: var(--t-xs); font-weight: 700; grid-row: 2; justify-content: center; }

.planboard-periods { background: var(--sunken); border: 1px solid var(--border); border-radius: 7px; display: inline-flex; flex: 0 0 auto; padding: var(--s-1); }
.planboard-periods form { display: contents; }
.planboard-periods button { background: transparent; border: 0; border-radius: 5px; color: var(--muted); font-size: var(--t-xs); font-weight: 570; line-height: 1; min-height: 28px; padding: 0 var(--s-2); white-space: nowrap; }
.planboard-periods button:hover { color: var(--ink); }
.planboard-periods button.is-active { background: var(--surface); box-shadow: var(--shadow-xs); color: var(--ink); font-weight: 650; }

.planboard { --half-cell-width: 22px; }.booking-block--arrival-midpoint { margin-left: var(--half-cell-width); }.booking-block--departure-midpoint { margin-right: calc(-1 * var(--half-cell-width)); }

.planboard__group { align-items: center; background: var(--sunken); border-bottom: 1px solid var(--border-strong); border-right: 1px solid var(--border); border-top: 1px solid var(--border-strong); display: flex; gap: var(--s-2); left: 0; min-height: 34px; padding: var(--s-1) var(--s-3); position: sticky; z-index: 4; }.planboard__group strong { color: var(--ink); font-size: var(--t-xs); }.planboard__group span { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); display: inline-flex; font-size: var(--t-xs); font-variant-numeric: tabular-nums; height: 20px; justify-content: center; margin-left: auto; min-width: 20px; padding: 0 var(--s-1); }.planboard__group-lane { background: var(--sunken); border-bottom: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong); display: grid; grid-template-columns: repeat(var(--days), var(--cell-width)); min-height: 34px; }.planboard__group-cell { border-right: 1px solid var(--border); }.planboard__unit { justify-content: center; }

.booking-block { flex-direction: row; justify-content: stretch; padding: 0; }.booking-block.is-modifiable { cursor: grab; touch-action: none; }.booking-block.is-dragging { box-shadow: var(--shadow-drag); cursor: grabbing; opacity: .92; transition: none; z-index: 10; }.booking-block.is-invalid-drop { box-shadow: 0 0 0 3px var(--error-border), var(--shadow-drag); opacity: .72; }.booking-block.is-saving { cursor: progress; opacity: .72; }.booking-block__link { color: inherit; display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; padding: var(--s-1) var(--s-2); text-decoration: none; }.booking-block__handle { background: transparent; border: 0; border-radius: 0; cursor: ew-resize; flex: 0 0 8px; min-height: 0; padding: 0; position: relative; touch-action: none; width: 8px; z-index: 2; }.booking-block__handle--start { border-radius: inherit; border-bottom-right-radius: 0; border-top-right-radius: 0; }.booking-block__handle--end { border-radius: inherit; border-bottom-left-radius: 0; border-top-left-radius: 0; }.booking-block__handle::after { background: rgb(255 255 255 / 68%); border-radius: 2px; content: ""; inset: 8px 3px; opacity: 0; position: absolute; transition: opacity var(--ease); }.booking-block:hover .booking-block__handle::after, .booking-block__handle:focus-visible::after, .booking-block.is-dragging .booking-block__handle::after { opacity: 1; }.booking-block__handle:focus-visible { outline: 2px solid var(--claim-text); outline-offset: -2px; }.booking-block--request .booking-block__handle::after { background: rgb(61 38 0 / 55%); }.planboard-legend__hint { margin-left: auto; }.planboard-feedback { color: var(--accent-text)!important; font-weight: 650; }.planboard-feedback.is-error { color: var(--red-tone-text)!important; }

.planboard__lane { touch-action: pan-x pan-y; }.planboard__block-cell { -webkit-user-drag: none; display: block; min-height: 58px; position: relative; user-select: none; z-index: 1; }.planboard__block-cell:hover, .planboard__block-cell:focus-visible { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--focus-ring); outline: 0; }.planboard__block-cell[data-planboard-openable="true"] { cursor: pointer; }.planboard__lane.is-creating, .planboard__lane.is-creating .planboard__block-cell { cursor: crosshair; }.booking-block--create-preview { background: var(--accent-soft-strong); border: 1px solid var(--accent-border); box-shadow: var(--shadow-drag); color: var(--accent-soft-text); justify-content: center; pointer-events: none; transition: none; user-select: none; z-index: 3; }.booking-block--create-preview strong { font-size: var(--t-xs); text-align: center; }.booking-block--manual-block { background: var(--claim-manual-block); }.booking-block--ical { background: var(--claim-ical); }.booking-block--payment-hold { background: repeating-linear-gradient(135deg, var(--claim-hold), var(--claim-hold) 8px, var(--claim-hold-stripe) 8px, var(--claim-hold-stripe) 16px); }.legend-dot--manual-block { background: var(--claim-manual-block); }.legend-dot--ical { background: var(--claim-ical); }.legend-dot--payment-hold { background: repeating-linear-gradient(135deg, var(--claim-hold), var(--claim-hold) 3px, var(--claim-hold-stripe) 3px, var(--claim-hold-stripe) 6px); }.drawer__footer--split { justify-content: space-between; }.drawer__footer-actions { display: flex; gap: var(--s-2); margin-left: auto; }

.planboard__lane.is-drop-target::after, .planboard__lane.is-invalid-drop-target::after { border: 2px solid var(--accent-border); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 9; }.planboard__lane.is-invalid-drop-target::after { border-color: var(--error-border); }

.planboard-create-menu { background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; min-width: 220px; padding: var(--s-1); position: fixed; z-index: 75; }.planboard-create-menu__action { background: transparent; border: 0; border-radius: 6px; color: var(--text); font-weight: 650; padding: var(--s-2); text-align: left; }.planboard-create-menu__action:hover, .planboard-create-menu__action:focus-visible { background: var(--accent-soft); color: var(--accent-soft-text); outline: 0; }

/* The page keeps scrolling normally. The planboard controls and table header
   stick together below the app topbar; the setup notice above them scrolls away. */
.planboard-card { overflow: visible; }
.planboard-sticky-header { background: var(--surface); position: sticky; top: var(--topbar); width: 100%; z-index: 20; }
.planboard-header-viewport { overflow: hidden; width: 100%; }
.planboard-header-viewport.is-pending { visibility: hidden; }
.planboard--header .planboard__corner, .planboard--header .planboard__days { position: relative; top: auto; }
.planboard--header .planboard__days { transform: translateX(var(--planboard-scroll-offset, 0)); }
.planboard-header-viewport.is-panning, .planboard-header-viewport.is-panning .planboard__days { cursor: grabbing; }

/* Keep the six-week planning view readable without horizontal scrolling on desktop. */
.planboard { --unit-width: 124px; --min-cell-width: 18px; --cell-width: 18px; --half-cell-width: 9px; grid-template-columns: var(--unit-width) minmax(calc(var(--days) * var(--min-cell-width)), 1fr); min-width: calc(var(--unit-width) + var(--days) * var(--min-cell-width)); width: 100%; }
.planboard__days, .planboard__lane, .planboard__cells, .planboard__group-lane { grid-template-columns: repeat(var(--days), minmax(var(--min-cell-width), 1fr)); }
.planboard.is-grid-synced .planboard__days, .planboard.is-grid-synced .planboard__lane, .planboard.is-grid-synced .planboard__cells, .planboard.is-grid-synced .planboard__group-lane { grid-template-columns: repeat(var(--days), var(--cell-width)); }
.planboard__corner, .planboard__unit { padding: var(--s-2) var(--s-2); }
.planboard__unit { min-height: 46px; overflow: hidden; }
.planboard__unit strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planboard__day { font-size: var(--t-xs); min-height: 42px; }
.planboard__cell, .planboard__block-cell { min-height: 46px; }
.planboard__group, .planboard__group-lane { min-height: 30px; }
.planboard__group { padding: var(--s-1) var(--s-2); }
.planboard__group strong { font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-block { border-radius: 5px; height: 32px; }
.booking-block__link { padding: 0 var(--s-1); }
.booking-block strong { font-size: var(--t-xs); }
.booking-block span { font-size: var(--t-xs); }
.booking-block__handle { flex-basis: 6px; width: 6px; }
.booking-block__handle::after { inset: 6px 2px; }

/* JavaScript keeps a wide virtual time runway while claim data stays windowed.
   The first HTML paint is the same shell: units and a header, no per-day cells.
   Hide that shell until the windowed board is scrolled into place, so a visit
   from another page does not flash the empty fallback first. */
.planboard-scroll { overscroll-behavior-inline: contain; overflow-anchor: none; }
.planboard-scroll.is-pending { visibility: hidden; }
@media (scripting: none) {
  .planboard-scroll.is-pending { visibility: visible; }
}
.planboard-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); outline: 0; }
.planboard.is-windowed { grid-template-columns: var(--unit-width) calc(var(--days) * var(--cell-width)); min-width: calc(var(--unit-width) + var(--days) * var(--cell-width)); width: max-content; }
.planboard.is-windowed .planboard__days,
.planboard.is-windowed .planboard__lane,
.planboard.is-windowed .planboard__group-lane { grid-template-columns: repeat(var(--days), var(--cell-width)); }
.planboard.is-windowed .planboard__days { cursor: grab; display: block; height: 94px; min-height: 94px; touch-action: pan-x pan-y; user-select: none; }
.planboard-scroll.is-panning,
.planboard-scroll.is-panning .planboard__days { cursor: grabbing; }
.planboard-scroll.is-panning { user-select: none; will-change: scroll-position; }
.planboard.is-windowed .planboard__lane,
.planboard.is-windowed .planboard__group-lane { display: block; }
.planboard.is-windowed .planboard__month,
.planboard.is-windowed .planboard__week {
  box-sizing: border-box;
  left: calc((var(--start) - 1) * var(--cell-width));
  position: absolute;
  width: calc(var(--span) * var(--cell-width));
}
.planboard.is-windowed .planboard__month { height: 28px; top: 0; }
.planboard.is-windowed .planboard__week { height: 24px; top: 28px; }
.planboard.is-windowed .planboard__day {
  box-sizing: border-box;
  height: 42px;
  left: calc(var(--day-index) * var(--cell-width));
  position: absolute;
  top: 52px;
  width: var(--cell-width);
}
.planboard.is-windowed .planboard__cells { display: none; }
.planboard.is-windowed .planboard__lane,
.planboard.is-windowed .planboard__group-lane {
  background-image:
    repeating-linear-gradient(to right, transparent 0 calc(var(--cell-width) - 1px), var(--border) calc(var(--cell-width) - 1px) var(--cell-width)),
    linear-gradient(var(--accent-soft), var(--accent-soft)),
    linear-gradient(to right, var(--weekend) 0 calc(2 * var(--cell-width)), transparent calc(2 * var(--cell-width)));
  background-position:
    0 0,
    calc(var(--today-index, -1000) * var(--cell-width)) 0,
    calc(var(--weekend-offset, 5) * var(--cell-width)) 0;
  background-repeat: repeat, no-repeat, repeat-x;
  background-size: auto, var(--cell-width) 100%, calc(7 * var(--cell-width)) 100%;
}
.planboard__day.is-today {
  background: var(--accent-soft-strong);
  box-shadow: none;
  color: var(--accent-soft-text);
  font-weight: 800;
  position: relative;
  z-index: 1;
}
.planboard__day.is-today span { color: inherit; }
.planboard__cell.is-today {
  background: var(--accent-soft-strong);
  box-shadow: none;
}
.planboard.is-windowed .planboard__lane,
.planboard.is-windowed .planboard__group-lane { position: relative; }
.planboard.is-windowed .planboard__lane.is-drag-source { content-visibility: visible; z-index: 10; }
.planboard.is-windowed .planboard__claims {
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(calc(-1 * var(--window-start-day) * var(--cell-width)));
}
.planboard.is-windowed [data-planboard-booking] {
  --claim-end-offset: 2px;
  --claim-start-offset: 2px;
  grid-column: auto;
  left: calc(var(--claim-start-day) * var(--cell-width) + var(--claim-start-offset));
  margin: 0;
  pointer-events: auto;
  position: absolute;
  top: 3px;
  width: calc(var(--span) * var(--cell-width) - var(--claim-start-offset) - var(--claim-end-offset));
}
.planboard.is-windowed .booking-block--create-preview {
  left: calc((var(--start) - 1) * var(--cell-width) + 2px);
  position: absolute;
  top: 3px;
  width: calc(var(--span) * var(--cell-width) - 4px);
}
.planboard.is-windowed [data-planboard-booking].booking-block--arrival-midpoint {
  --claim-start-offset: var(--half-cell-width);
}
.planboard.is-windowed [data-planboard-booking].booking-block--departure-midpoint {
  --claim-end-offset: calc(-1 * var(--half-cell-width));
}
.planboard.is-windowed .planboard__lane.has-today::before,
.planboard.is-windowed .planboard__group-lane.has-today::before {
  background: var(--accent-soft-strong);
  content: "";
  inset-block: 0;
  left: calc(var(--today-index, -1000) * var(--cell-width));
  pointer-events: none;
  position: absolute;
  width: var(--cell-width);
  z-index: 0;
}
.planboard.is-windowed .planboard__lane { border-bottom: 1px solid var(--border); min-height: 46px; }
.planboard.is-windowed .planboard__lane { contain-intrinsic-block-size: 46px; content-visibility: auto; }
.planboard.is-windowed .planboard__group-lane { contain-intrinsic-block-size: 30px; content-visibility: auto; min-height: 30px; }
.planboard.is-windowed .planboard__unit,
.planboard.is-windowed .planboard__group,
.planboard.is-windowed .planboard__corner { left: 0; }
.planboard__keyboard-cell { inset-block: 0; left: calc((var(--start) - 1) * var(--cell-width)); pointer-events: none; position: absolute; width: var(--cell-width); z-index: 1; }
.planboard-scroll:focus-visible .planboard__keyboard-cell { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-border), 0 0 0 2px var(--focus-shadow); }
.planboard-card.is-loading .planboard-scroll,
.planboard-card.is-refreshing .planboard-scroll,
.planboard.is-loading,
.planboard.is-refreshing { cursor: progress; }
.planboard-card.is-loading .planboard,
.planboard.is-loading { opacity: .72; }
.planboard[aria-busy="true"] { cursor: progress; }
.planboard-status { align-items: center; background: var(--sunken); border-top: 1px solid var(--border); color: var(--muted); display: flex; flex-wrap: wrap; font-size: var(--t-xs); gap: var(--s-2); min-height: 36px; padding: var(--s-1) var(--s-4); }
/* Keep the status row in the layout while horizontal scrolling loads a period. */
.planboard-status [hidden] { display: none; }
.planboard-card.has-load-error .planboard-status,
.planboard-status.is-error,
.planboard-status:has(> [data-planboard-error]:not([hidden])) { background: var(--error-bg); color: var(--red-tone-text); }
.planboard-status [data-planboard-retry] { margin-left: auto; }

html.planboard-standalone .app-shell { display: block; min-height: 100vh; min-height: 100dvh; }
html.planboard-standalone .sidebar,
html.planboard-standalone .topbar,
html.planboard-standalone #notices,
html.planboard-standalone .mobile-backdrop { display: none; }
html.planboard-standalone .workspace,
html.planboard-standalone .main { min-width: 0; }
html.planboard-standalone .page--wide { max-width: none; padding: 0; }
html.planboard-standalone .planboard-card { border: 0; border-radius: 0; min-height: 100vh; min-height: 100dvh; }
html.planboard-standalone .planboard-sticky-header { top: 0; }

.row-menu { position: relative; }.row-menu > div { min-width: 250px; }.mobile-backdrop { display: none; }.auth-page { background: radial-gradient(circle at top, var(--auth-glow), var(--canvas) 45%); min-height: 100vh; min-height: 100dvh; }.auth-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: var(--s-4); }.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--s-6); max-width: 430px; padding: var(--s-8); width: 100%; }.help-wiki { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--s-6); max-width: 760px; padding: var(--s-8); width: 100%; }.help-wiki h1 { font-size: var(--t-2xl); margin: 0; }.auth-brand { align-items: center; color: var(--accent-text); display: flex; font-size: var(--t-lg); font-weight: 780; gap: var(--s-2); letter-spacing: -.035em; }.auth-brand svg { height: 32px; width: 32px; }.auth-card h1 { font-size: var(--t-2xl); margin-bottom: var(--s-1); }.auth-help { color: var(--muted); font-size: var(--t-xs); text-align: center; }
.auth-page { background-image: radial-gradient(circle at top, var(--auth-glow), var(--canvas) 45%), var(--canvas-texture); background-size: auto, 180px 180px; }

@media (max-width: 1024px) {
  :root { --sidebar: 70px; }
  .brand__mark { display: block; }
  .brand { justify-content: center; padding: 0; }.brand span, .nav-list > a span, .nav-label, .sidebar-footer > a span, .impersonation-return span, .platform-admin-entry span, .sidebar-user__identity, .sidebar-user__chevron { display: none; }.nav-list > a, .sidebar-footer > a, .impersonation-return button, .platform-admin-entry button, .sidebar-user > summary { justify-content: center; padding: var(--s-2); }.sidebar-user__menu { bottom: 0; left: calc(100% + 8px); min-width: 220px; }.dashboard-grid { grid-template-columns: 1fr; }.dashboard-side { grid-template-columns: 1fr 1fr; }.metric-grid { grid-template-columns: repeat(2, 1fr); }
  .setup-confirmation { grid-template-columns: minmax(0, 1fr); }
  .setup-confirmation__controls { justify-content: flex-start; }
  .setup-map__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-map__links > a + a, .setup-map__links > div + div { border-top: 0; }
  .setup-map__links > a, .setup-map__links > div { border-bottom: 1px solid var(--border); }
}
/* Op de iconenbalk (760-1024px, ook de uitgeklapte vouwtelefoon) verdwijnt de
   linktekst visueel maar niet uit de toegankelijkheidsboom: met `display: none`
   houdt de link geen naam meer over voor een schermlezer. */
@media (min-width: 760px) and (max-width: 1024px) {
  .brand span, .nav-list > a span, .sidebar-footer > a span, .impersonation-return span, .platform-admin-entry span {
    border: 0; clip: rect(0, 0, 0, 0); display: initial; height: 1px; margin: calc(-1 * var(--hairline));
    overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;
  }
}
@media (max-width: 760px) {
  :root { --sidebar: 260px; }
  .brand__mark { display: none; }
  .app-shell { display: block; }.sidebar { box-shadow: var(--shadow); position: fixed; transform: translateX(-105%); transition: transform var(--ease); width: var(--sidebar); }.sidebar.is-open { transform: none; }.sidebar.is-open + .workspace .topbar { pointer-events: none; }.brand { justify-content: center; padding: 0 var(--s-4); }.brand span, .nav-list > a span, .nav-label, .sidebar-footer > a span, .impersonation-return span, .platform-admin-entry span { clip: auto; display: initial; height: auto; margin: 0; overflow: visible; position: static; white-space: normal; width: auto; }.sidebar-user__identity { display: flex; }.sidebar-user__chevron { display: block; }.nav-list > a, .sidebar-footer > a, .impersonation-return button, .platform-admin-entry button { justify-content: flex-start; padding: var(--s-2) var(--s-3); }.sidebar-user > summary { justify-content: flex-start; padding: var(--s-1); }.sidebar-user__menu { bottom: calc(100% + 8px); left: 0; min-width: 100%; }.sidebar-toggle { display: inline-flex!important; height: var(--s-12); width: var(--s-12); }.topbar { gap: var(--s-2); padding: 0 var(--s-3); }.topbar__heading { flex: 1; }.topbar__heading span, .account-menu > summary > span:last-child { display: none; }.topbar__actions .button { font-size: 0; gap: 0; min-height: var(--s-12); padding: 0; width: var(--s-12); }.topbar__actions .button svg { margin: 0; }.page { padding: var(--s-4) var(--s-3) var(--s-8); }.mobile-backdrop.is-visible { display: block; z-index: 35; }.metric-grid, .metric-grid--three, .dashboard-side, .form-layout, .detail-columns, .detail-summary, .settings-layout, .radio-cards, .payment-entry { grid-template-columns: 1fr; }.detail-summary > div + div { border-left: 0; border-top: 1px solid var(--border); }.form-section { grid-column: 1; }.settings-nav { flex-direction: row; flex-wrap: wrap; gap: var(--s-1); position: static; }.field-grid { grid-template-columns: 1fr; }.field--wide { grid-column: 1; }.filterbar { align-items: stretch; flex-direction: column; }.filterbar__count { margin-left: 0; }.search-field { min-width: 0; }.filterbar .field { flex: 1 1 auto; }.header-meta { align-items: flex-start!important; flex-direction: column!important; }.planboard-toolbar { align-items: flex-start; flex-wrap: wrap; }.planboard-toolbar .muted { margin-left: 0; }.sticky-actions { gap: var(--s-2); }.sticky-actions .muted { display: none; }.drawer__body { padding: var(--s-4); }.changeover-days__grid { gap: 0; grid-template-columns: minmax(58px, 1.4fr) repeat(7, minmax(26px, 1fr)); }.changeover-days__grid > strong { font-size: var(--t-xs); }.changeover-days__grid label > span[aria-hidden] { border-radius: 5px; height: 34px; }
  .reservation-toolbar { align-items: stretch; flex-direction: column; gap: var(--s-2); }
  .archive-period { width: 100%; }
  .archive-period select { flex: 1; min-width: 0; }
  .reservation-segments { max-width: 100%; overflow-x: auto; }
  .reservation-segments a { padding-left: var(--s-1); padding-right: var(--s-1); white-space: nowrap; }
  .reservation-toolbar__filters { flex-direction: column; width: 100%; }
  .reservation-scope, .reservation-scope select { width: 100%; }
  .reservation-scope select { max-width: none; }
  .reservation-search { flex-basis: auto; width: 100%; }
  .setup-checklist__item { align-items: start; grid-template-columns: minmax(0, 1fr); }
  .setup-journey, .setup-map__links { grid-template-columns: minmax(0, 1fr); }
  .setup-map__links > a + a, .setup-map__links > div + div { border-top: 1px solid var(--border); }
  .setup-map__links > a, .setup-map__links > div { border-bottom: 0; }
  .setup-focus__body > .button { align-self: stretch; }
  .setup-step-card__footer { align-items: stretch; flex-direction: column; }
  .setup-step-card__footer .button { width: 100%; }
  .setup-checklist__item .status, .setup-checklist__item > .button { justify-self: start; }
  .setup-confirmation { align-items: stretch; grid-template-columns: 1fr; }
  .setup-confirmation__controls { align-items: stretch; flex-direction: column; }
  .setup-confirmation__controls .field { min-width: 0; }
  .setup-blocker, .setup-publish { align-items: stretch; flex-direction: column; }
  .reservation-calendar__months { grid-template-columns: minmax(0, 1fr); }.reservation-calendar__month:nth-child(2) { display: none; }.reservation-calendar__day { min-height: 35px; }.reservation-calendar__header { align-items: flex-start; flex-direction: column; }.reservation-calendar__navigation { justify-content: space-between; width: 100%; }.calendar-popover .reservation-calendar { padding: var(--s-3); }.calendar-popover__header-actions { justify-content: space-between; width: 100%; }.calendar-popover__header-actions .reservation-calendar__navigation { flex: 1; }.calendar-popover__footer { align-items: stretch; flex-direction: column; }.calendar-popover__footer > span { justify-content: flex-end; margin-left: 0; }.date-range-calendar__trigger { gap: var(--s-1); grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 28px; min-height: 56px; padding: var(--s-1); }.date-range-calendar__part { min-height: 48px; }.date-range-calendar__trigger > svg { height: 28px; padding: var(--s-1); width: 28px; }.discount-value-field--compact { max-width: none; }
}
.planboard-mobile-tools { display: none; }
.planboard--body { min-height: var(--s-12); }
.planboard [hidden], [data-planboard-no-units][hidden] { display: none !important; }
@media (pointer: coarse) {
  .planboard .booking-block, .planboard .booking-block__link { touch-action: pan-x pan-y; }
  .planboard .booking-block__handle { display: none; }
}
@media (max-width: 760px) {
  .planboard { --unit-width: var(--planboard-mobile-unit-width); }
  .planboard-toolbar { align-items: center; gap: var(--s-2); padding: var(--s-2); }
  .planboard-toolbar h2 { flex: 1; font-size: var(--t-xs); text-align: right; }
  .planboard-toolbar > .muted, .planboard-periods { display: none; }
  .planboard-mobile-tools:not([hidden]) { display: grid; gap: var(--s-2); padding: var(--s-2); }
  .planboard-mobile-tools__navigation { align-items: center; display: flex; gap: var(--s-2); }
  .planboard-mobile-tools__navigation input { flex: 1; min-width: 0; width: 0; }
  .planboard-mobile-tools input { min-height: var(--s-8); }
  .planboard-mobile-tools .button { min-height: var(--s-8); padding-inline: var(--s-2); }
  .planboard-mobile-tools [aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-soft-text); }
  .planboard-mobile-tools p { font-size: var(--t-xs); margin: 0; }
  .planboard__unit { justify-content: center; }
  .planboard__unit strong { display: -webkit-box; font-size: var(--t-xs); overflow-wrap: anywhere; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .planboard__group { width: var(--viewport-width); }
  .planboard__group span { margin-left: 0; }
  .planboard.is-windowed .planboard__days { height: var(--s-12); min-height: var(--s-12); }
  .planboard.is-windowed .planboard__day { height: var(--s-12); top: 0; }
  .planboard.is-windowed .planboard__month, .planboard.is-windowed .planboard__week { display: none; }
  .planboard__corner { font-size: var(--t-xs); letter-spacing: normal; text-transform: none; }
  .planboard .booking-block, .planboard .booking-block__link { touch-action: pan-x pan-y; }
  .planboard .booking-block__link { padding-left: max(var(--s-1), calc((var(--viewport-start-day) - var(--claim-start-day)) * var(--cell-width) - var(--claim-start-offset) + var(--s-1))); }
  .planboard .booking-block__handle { display: none; }
  .planboard .booking-block { border-radius: var(--radius-sm); height: var(--s-8); }
  .planboard-legend { gap: var(--s-2); padding: var(--s-2); }
  .planboard-legend__hint { display: none !important; }
  .planboard-create-menu { max-width: calc(100vw - var(--s-4)); }
  .planboard-create-menu__action { min-height: var(--s-8); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; } }
@media (max-width: 760px) { .intro-banner { align-items: flex-start; flex-direction: column; gap: var(--s-3); }.accommodation-card__hero { gap: var(--s-4); grid-template-columns: 1fr; padding: var(--s-4); }.accommodation-card__identity { grid-template-columns: auto minmax(0, 1fr); }.accommodation-card__controls { gap: var(--s-2); grid-column: 2; justify-self: start; }.accommodation-card__controls > .icon-button { height: var(--s-12); min-height: var(--s-12); width: var(--s-12); }.accommodation-card__body { padding: var(--s-4); }.accommodation-actions { grid-template-columns: 1fr; }.accommodation-units > summary { padding-left: var(--s-4); padding-right: var(--s-4); }.accommodation-units__body { padding-left: var(--s-4); padding-right: var(--s-4); }.accommodation-unit-list { grid-template-columns: 1fr; }.accommodation-units__toggle { font-size: 0; }.booking-preview-dialog, .mail-preview-dialog { height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); max-width: calc(100vw - 16px); width: calc(100vw - 16px); } }
@media (max-width: 760px) { .discount-section__header { align-items: stretch; flex-direction: column; }.discount-section__header > .button { align-self: flex-start; } }

.settings-content-form { display: grid; gap: var(--s-4); }
/* De importkaart draagt een download naast de twee stappen van de import. De
   secundaire link blijft links staan zodat proefdraaien en vastleggen samen
   rechts eindigen, net als in de andere kaartvoetteksten. */
.import-job__actions { justify-content: flex-end; }
.import-job__actions .text-link { margin-right: auto; }
@media (max-width: 760px) {
  .import-job__actions { justify-content: flex-start; }
  .import-job__actions .text-link { margin-right: 0; }
}
.company-logo-editor { align-items: center; display: grid; gap: var(--s-4); grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); }
.company-logo-editor form { align-items: end; display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr) auto; }
.company-logo-preview, .company-logo-placeholder { border: 1px solid var(--border); border-radius: 8px; height: 110px; object-fit: contain; padding: var(--s-3); width: 100%; }
.company-logo-preview { background: var(--logo-canvas); }
.company-logo-placeholder { align-items: center; background: var(--sunken); color: var(--muted); display: flex; justify-content: center; }
@media (max-width: 760px) { .company-logo-editor, .company-logo-editor form { align-items: stretch; grid-template-columns: 1fr; } }
.mail-script { display: grid; gap: var(--s-8); }
.mail-script__section > h2 { margin: 0 0 var(--s-4); }
.mail-script__grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mail-card .card__header > div { align-items: flex-start; display: flex; gap: var(--s-4); justify-content: space-between; width: 100%; }
.mail-card h3 { margin: 0; }
.mail-card .card__body > .button { margin-top: var(--s-3); }
.mail-card__actions, .mail-draft__actions, .mail-language-nav, .mail-reply-to {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: end;
}
.mail-reply-to { margin-top: var(--s-4); }
.mail-reply-to .field { min-width: min(100%, 320px); }
.mail-editor { display: grid; gap: var(--s-8); }
.messaging-start__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.newsletter-flow { gap: var(--s-6); }
.newsletter-flow__back { justify-self: start; }
.newsletter-flow__intro .card__header { min-height: 76px; }
.newsletter-flow__error { margin: 0; }
.newsletter-flow__compose { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.newsletter-step { min-width: 0; }
.newsletter-step__header { align-items: flex-start; justify-content: flex-start; }
.newsletter-step__header > div { flex: 1; }
.newsletter-step__number { align-items: center; background: var(--accent-solid); border-radius: 50%; color: var(--accent-on-solid); display: inline-flex; flex: 0 0 30px; font-size: var(--t-sm); font-weight: 750; height: 30px; justify-content: center; }
.newsletter-step__body { display: grid; gap: var(--s-4); }
.newsletter-date-filter { border: 0; margin: 0; min-width: 0; padding: 0; }
.newsletter-audience-options { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.newsletter-flow__submit { align-items: center; background: var(--accent-soft); border: 1px solid var(--accent-soft-strong); border-radius: var(--radius); display: flex; gap: var(--s-4); grid-column: 1 / -1; justify-content: space-between; padding: var(--s-4); }
.newsletter-flow__submit > div:first-child { display: grid; gap: var(--s-1); }
.newsletter-flow__submit span { color: var(--muted); font-size: var(--t-xs); }
.newsletter-flow__gate { margin: 0; }
.newsletter-review-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.newsletter-review-panel { align-content: start; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--s-4); padding: var(--s-4); }
.newsletter-review-panel h3 { margin: var(--s-1) 0 0; }
.newsletter-recipient-count { display: grid; gap: var(--s-1); margin: 0; }
.newsletter-recipient-count strong { color: var(--accent-text); font-size: var(--t-xl); }
.newsletter-recipient-count span { color: var(--muted); font-size: var(--t-xs); }
/* Translation language panels keep native disclosure and keyboard behaviour. */
.newsletter-step fieldset.field > details > summary { min-height: var(--s-12); padding: var(--s-2) 0; }
.newsletter-step fieldset.field > details > summary:focus-visible { border-radius: var(--radius-sm); }
.newsletter-recipient-details { border-top: 1px solid var(--border); padding-top: var(--s-3); }
.newsletter-recipient-details summary { color: var(--accent-text); cursor: pointer; font-size: var(--t-sm); font-weight: 650; }
.newsletter-recipient-details .mail-missing { margin: var(--s-3) 0 0; max-height: 220px; overflow: auto; }
.newsletter-schedule { border-top: 1px solid var(--border); padding-top: var(--s-4); }
.definition-list {
  display: grid;
  gap: var(--s-2) var(--s-4);
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  margin: 0;
}
.definition-list dt { color: var(--muted); }
.definition-list dd { margin: 0; overflow-wrap: anywhere; }
.admin-tenant { display: grid; gap: var(--s-4); }
.admin-tenant__back { align-items: center; display: inline-flex; gap: var(--s-1); justify-self: start; }
.admin-tenant__back svg { height: 14px; width: 14px; }
.admin-tenant__head { align-items: center; display: flex; gap: var(--s-3); }
.admin-tenant__identity { flex: 1; min-width: 0; }
.admin-tenant__meta { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.admin-tenant__main { display: grid; gap: var(--s-4); min-width: 0; }
.admin-tenant__summary .card__header { align-items: flex-start; }
.admin-tenant__notice { margin: 0; }
.admin-tenant__lifecycle-actions { justify-content: flex-end; }
.admin-tenant__action-card { display: flex; flex-direction: column; }
.admin-tenant__form { align-content: start; flex: 1; }
.admin-tenant__form > .button, .admin-overrides__form > .button { align-self: end; justify-self: start; }
.admin-suspension__body { display: grid; gap: var(--s-4); }
.admin-suspension__lead { color: var(--muted); max-width: 78ch; }
.admin-suspension__disclosure { max-width: 760px; }
.admin-suspension__disclosure > summary { color: var(--red-tone-text); }
.admin-suspension__disclosure > summary:hover { background: var(--error-bg); }
.admin-suspension__form { background: var(--sunken); }
.admin-suspension__warning, .admin-suspension__confirm, .admin-suspension__actions { grid-column: 1 / -1; }
.admin-suspension__warning, .admin-suspension__notice { margin: 0; }
.admin-suspension__warning p, .admin-suspension__notice p { margin-top: var(--s-1); }
.admin-suspension__actions { display: flex; justify-content: flex-end; }
.admin-suspension__facts { max-width: 760px; }
.admin-suspension__lift { align-items: end; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.admin-customer-actions { align-items: center; display: flex; gap: var(--s-1); justify-content: flex-end; }
.admin-customer-filter .search-field { flex: 1 1 280px; }
.admin-customer-filter .field { flex: 0 1 190px; }
.admin-customer-filter .field select { width: 100%; }
.admin-customer-filter .filterbar__count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-suspension-dialog__warning { grid-column: 1 / -1; margin: 0; }
.admin-suspension-dialog__warning p { margin-top: var(--s-1); }
.admin-overrides__create > summary { background: var(--sunken); }
.admin-overrides__create > summary:hover { background: var(--hover); }
.admin-overrides__form { border-bottom: 1px solid var(--border); }
.admin-overrides__table td { line-height: 1.45; }
.admin-overrides__key { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.admin-overrides__starts { font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-overrides__action { min-width: 260px; }
.admin-overrides__revoke { align-items: end; display: grid; gap: var(--s-2); grid-template-columns: minmax(120px, 1fr) auto; }
.admin-overrides__revoke .field { gap: 0; }
@media (max-width: 760px) {
  .admin-tenant__cards { grid-template-columns: minmax(0, 1fr); }
  .admin-tenant__lifecycle-actions { align-items: stretch; flex-direction: column; }
  .admin-tenant__lifecycle-actions .button, .admin-tenant__form > .button, .admin-overrides__form > .button { width: 100%; }
  .admin-suspension__disclosure { max-width: none; }
  .admin-suspension__actions .button { width: 100%; }
  .admin-suspension__lift { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .admin-suspension__lift .button { width: 100%; }
  .admin-customer-actions { align-items: stretch; flex-wrap: wrap; justify-content: flex-start; }
  .admin-customer-actions > .button { min-height: 40px; padding: 0; width: 40px; }
  .admin-customer-actions__label { display: none; }
  .admin-overrides__starts { white-space: normal; }
  .admin-overrides__action { min-width: 0; }
  .admin-overrides__revoke { justify-self: stretch; width: 100%; }
}
.mail-language-nav { margin-bottom: var(--s-4); }
.mail-missing { display: grid; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.mail-draft { display: grid; gap: var(--s-4); }
.mail-diff { margin-top: var(--s-6); }
.mail-editor__preview {
  border: 1px solid var(--border); border-radius: var(--radius); min-height: 320px; width: 100%;
}
@media (max-width: 760px) {
  .mail-script__grid { grid-template-columns: 1fr; }
  .mail-card__actions, .mail-draft__actions { flex-direction: column; align-items: stretch; }
  .messaging-start__actions { align-items: stretch; flex-direction: column; }
  .newsletter-flow__intro .card__header { align-items: flex-start; }
  .newsletter-flow__compose, .newsletter-review-grid { grid-template-columns: minmax(0, 1fr); }
  .newsletter-flow__submit { align-items: stretch; flex-direction: column; }
  .newsletter-flow__submit .button { width: 100%; }
}

.report-editor { align-items: start; display: grid; gap: var(--s-4); grid-template-columns: 240px minmax(0, 1fr); }
.report-rail { display: grid; gap: var(--s-4); padding-top: var(--s-1); position: sticky; top: calc(var(--topbar) + 20px); }
.report-editor__main { min-width: 0; }
.report-editor__body { padding: var(--s-6) var(--s-6) var(--s-4); }
.report-editor.is-wizard [data-report-panel] { display: none; }
.report-editor.is-wizard [data-report-panel].is-active { display: grid; gap: var(--s-3); }
.report-editor__panel h2 { font-size: var(--t-xl); }
.report-editor__panel > p { color: var(--muted); max-width: 62ch; }
.report-editor__panel > .field { max-width: 360px; }
.report-editor__footer { justify-content: flex-end; }
.report-editor__footer [data-report-back] { margin-right: auto; }
.report-steps { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.report-steps li { position: relative; }
.report-steps li:not(:last-child)::before {
  background: var(--border);
  bottom: -6px;
  content: "";
  left: 15px;
  position: absolute;
  top: 38px;
  width: 2px;
}
.report-steps li.is-done:not(:last-child)::before { background: var(--accent-soft-strong); }
.report-steps button {
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: var(--muted);
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 52px;
  padding: var(--s-2);
  text-align: left;
  width: 100%;
}
.report-steps button:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }
.report-steps button:disabled { cursor: not-allowed; opacity: .45; }
.report-steps__num {
  align-items: center;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  font-size: var(--t-sm);
  font-weight: 750;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.report-steps__copy { display: grid; gap: 0; padding-top: var(--s-1); }
.report-steps__copy strong { color: var(--ink); font-size: var(--t-sm); }
.report-steps__copy span { color: var(--muted); font-size: var(--t-xs); line-height: 1.35; }
.report-steps li.is-current button { background: var(--accent-soft); }
.report-steps li.is-current .report-steps__num { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-on-solid); }
.report-steps li.is-done .report-steps__num { background: var(--accent-soft-strong); border-color: var(--accent-soft-strong); color: var(--accent-soft-text); }

/* Scope bar: the period and accommodations that every list on the page runs with. */
.report-toolbar .field { flex: 0 1 200px; }
.report-toolbar .field:has(input[type="date"]) { flex: 0 0 176px; }
.report-scope { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); }
.report-scope__head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); justify-content: space-between; }
.report-scope__title {
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: .06em;
  margin: 0;
  text-transform: uppercase;
}
.report-scope__all { align-items: center; color: var(--text); cursor: pointer; display: flex; font-size: var(--t-sm); font-weight: 680; gap: var(--s-2); min-height: 32px; }
.report-scope__all input {
  accent-color: var(--accent-solid);
  background: none;
  border: 0;
  box-shadow: none;
  flex: 0 0 auto;
  height: 20px;
  min-height: 20px;
  padding: 0;
  width: 20px;
}
.report-scope .error-text { margin: 0; }
.report-lists { display: grid; list-style: none; margin: 0; padding: 0; }
.report-list {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  justify-content: space-between;
  min-height: 56px;
  padding: var(--s-2) var(--s-4);
}
.report-list:first-child { border-top: 0; }
.report-list__meta { flex: 1 1 240px; min-width: 0; position: relative; }
.report-list__name {
  align-items: start;
  background: none;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 0;
  justify-items: start;
  margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-2));
  min-height: 0;
  min-width: 0;
  padding: var(--s-1) var(--s-2);
  text-align: left;
}
.report-list__name strong { font-size: var(--t-md); }
.report-list__summary { color: var(--muted); font-size: var(--t-xs); }
.report-list__name:hover,
.report-list__meta.is-open .report-list__name,
.report-list__name:focus-visible { background: var(--sunken); }
.report-list__name:hover strong,
.report-list__meta.is-open .report-list__name strong,
.report-list__name:focus-visible strong { color: var(--accent-text); }
/* --muted clears only 4.4:1 on --sunken, so the summary darkens with the hover. */
.report-list__name:hover .report-list__summary,
.report-list__meta.is-open .report-list__name .report-list__summary,
.report-list__name:focus-visible .report-list__summary { color: var(--text); }
.report-list__panel {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: none;
  gap: var(--s-3);
  left: 0;
  max-width: min(440px, calc(100vw - 48px));
  padding: var(--s-3) var(--s-3);
  position: absolute;
  top: 100%;
  width: max-content;
  z-index: 40;
}
.report-list__meta:hover .report-list__panel,
.report-list__meta.is-open .report-list__panel,
.report-list__name:focus-visible ~ .report-list__panel {
  display: grid;
}
.report-list__panel section { display: grid; gap: var(--s-1); }
.report-list__panel h3 {
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: .06em;
  margin: 0;
  text-transform: uppercase;
}
.report-list__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.report-list__chips li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--t-xs);
  line-height: 1.2;
  padding: var(--s-1) var(--s-2);
}
.report-list__actions { align-items: center; display: flex; flex: 0 0 auto; gap: var(--s-2); }
.report-list__actions .icon-button { height: 32px; min-height: 32px; width: 32px; }

.report-options { display: grid; gap: var(--s-2); }
.report-options h3 { color: var(--muted); font-size: var(--t-xs); font-weight: 750; letter-spacing: .06em; margin: var(--s-2) 0 0; text-transform: uppercase; }
.report-options h3:first-child { margin-top: 0; }
.report-option {
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 20px minmax(0, 1fr);
  padding: var(--s-3) var(--s-3);
}
.report-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-soft-strong); }
.report-option span { display: grid; gap: 0; }
.report-option strong { color: var(--ink); font-size: var(--t-md); }
.report-option span span { color: var(--muted); font-size: var(--t-xs); }
.report-option input {
  accent-color: var(--accent-solid);
  background: none;
  border: 0;
  box-shadow: none;
  height: 18px;
  margin-top: 0;
  min-height: 18px;
  padding: 0;
  width: 18px;
}

/* The picker doubles as the column order: DOM order is the report order, so a
   counter numbers the checked chips and the number moves along with a drag. */
.report-columns { counter-reset: report-column; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.report-column {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 20px minmax(0, 1fr) auto;
  min-height: 44px;
  padding: var(--s-1) var(--s-2);
}
.report-column input {
  accent-color: var(--accent-solid);
  background: none;
  border: 0;
  box-shadow: none;
  flex: 0 0 auto;
  height: 20px;
  min-height: 20px;
  padding: 0;
  width: 20px;
}
.report-column > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-column.is-checked { background: var(--accent-soft); border-color: var(--accent-soft-strong); counter-increment: report-column; }
.report-column.is-dragging { opacity: .55; }
.report-column__handle { align-items: center; color: var(--subtle); cursor: grab; display: flex; gap: var(--s-1); }
.report-column__order { font-size: var(--t-xs); font-variant-numeric: tabular-nums; font-weight: 750; }
.report-column.is-checked .report-column__order { color: var(--accent-soft-text); }
.report-column.is-checked .report-column__order::before { content: counter(report-column); }
@media (max-width: 760px) {
  .report-editor { grid-template-columns: 1fr; }
  .report-rail { position: static; }
  .report-editor__body { padding: var(--s-4) var(--s-4) var(--s-3); }
  .report-columns { grid-template-columns: 1fr; }
  .report-toolbar .field, .report-toolbar .field:has(input[type="date"]) { flex: 1 1 auto; }
  .report-list__actions { width: 100%; }
  .report-list__actions form:first-child { flex: 1; }
  .report-list__actions form:first-child .button { width: 100%; }
}
.report-print { background: var(--canvas); color: var(--ink); margin: 0; padding: var(--s-6); }
.report-print__header { align-items: start; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; margin-bottom: var(--s-4); padding-bottom: var(--s-3); }
.report-print__header h1 { font-size: var(--t-xl); margin: 0 0 var(--s-1); }
.report-print__header p { color: var(--muted); margin: 0; }
.report-print__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.report-print__scroll { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.report-print__table { width: max-content; min-width: 100%; }
.report-print__table th { position: sticky; top: 0; z-index: 1; }
.report-print__table th, .report-print__table td { padding: var(--s-2) var(--s-3); white-space: nowrap; }
.report-print__totals { align-items: start; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--s-6); }
.report-print__totals table { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: 100%; }
.report-print__totals th, .report-print__totals td { line-height: 1.3; padding: var(--s-2) var(--s-3); }
.report-print__totals th { color: var(--ink); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0; text-transform: none; }
.report-print__totals tbody tr:hover { background: transparent; }
@media print {
  .report-print { padding: 0; }
  .report-print__actions { display: none; }
  .report-print__scroll { border: 0; border-radius: 0; overflow: visible; }
  .report-print__table { min-width: 0; width: 100%; }
  .report-print__table th { position: static; }
  .report-print__table th, .report-print__table td { font-size: var(--t-xs); padding: var(--s-1) var(--s-2); white-space: normal; }
  .report-print__totals { break-inside: avoid; }
  .report-print__table thead { display: table-header-group; }
}

.workspace:has(.help-desk),
.workspace:has(.tickets-desk) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
.workspace:has(.help-desk) .main,
.workspace:has(.tickets-desk) .main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.page.help-desk,
.tickets-desk {
  background: var(--surface);
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.page.help-desk {
  margin: 0;
  max-width: none;
  padding: 0;
}

/* Ticket list column, shared with the tenant help desk. */
.help-list,
.tickets-list {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex: none;
  flex-direction: column;
  min-height: 0;
  width: 360px;
}
.tickets-list { width: 388px; }
.help-list__header,
.tickets-list__header {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) 0;
}
.tickets-list__header { position: relative; z-index: 2; }
/* The status pills and the filter button do not fit on one line beside the
   heading, so the pills wrap under it. */
.tickets-list__title { flex-wrap: wrap; }
.tickets-list__title h2 { flex: 1 1 auto; }
.help-list__title,
.tickets-list__title {
  align-items: center;
  display: flex;
  gap: var(--s-3);
  justify-content: space-between;
}
.help-list__title h2,
.tickets-list__title h2 { font-size: var(--t-xl); }

.tickets-segmented {
  background: var(--canvas);
  border-radius: 999px;
  display: inline-flex;
  flex: none;
  gap: var(--s-1);
  padding: var(--s-1);
}
.tickets-segmented a {
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 650;
  padding: var(--s-1) var(--s-3);
  text-decoration: none;
}
.tickets-segmented a:hover { color: var(--ink); }
.tickets-segmented a[aria-current="page"] {
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--ink);
}

.help-tabs,
.tickets-tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--s-4);
}
.help-tabs a,
.tickets-tabs a {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  display: inline-flex;
  font-size: var(--t-sm);
  font-weight: 620;
  gap: var(--s-1);
  margin-bottom: calc(-1 * var(--hairline));
  padding: 0 0 var(--s-2);
  text-decoration: none;
  white-space: nowrap;
}
.help-tabs a:hover,
.tickets-tabs a:hover { color: var(--ink); }
.help-tabs a[aria-current="page"],
.tickets-tabs a[aria-current="page"] {
  border-bottom-color: var(--accent-border);
  color: var(--ink);
  font-weight: 720;
}
.newsletter-review-tabs { margin-bottom: var(--s-4); }
.newsletter-review-tabs a { min-height: 32px; }
.tickets-tabs__count {
  background: var(--canvas);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 0 var(--s-1);
}
.tickets-tabs a[aria-current="page"] .tickets-tabs__count {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
}

.help-list__items,
.tickets-list__items {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.help-item {
  border-bottom: 1px solid var(--border);
  color: inherit;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-4);
  text-decoration: none;
}
.tickets-item {
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  color: inherit;
  display: grid;
  gap: var(--s-3);
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-4);
  text-decoration: none;
}
.tickets-item > .avatar { margin-top: 0; }
.tickets-item__body { display: grid; gap: var(--s-1); min-width: 0; }
.help-item:hover,
.tickets-item:hover { background: var(--sunken); }
.help-item.is-active,
.tickets-item.is-active { background: var(--canvas); }
.tickets-item.is-active { border-left-color: var(--accent-solid); }
.help-item.is-unread .help-item__preview { color: var(--ink); font-weight: 620; }
.tickets-item.is-unread .tickets-item__subject { color: var(--ink); font-weight: 720; }
.help-item__top,
.tickets-item__top {
  align-items: baseline;
  display: flex;
  gap: var(--s-2);
}
.help-item__top strong,
.tickets-item__top strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tickets-item__top strong { color: var(--ink); }
.help-item__top time,
.tickets-item__top time {
  color: var(--muted);
  flex: none;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}
.tickets-item__subject {
  color: var(--text);
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.help-item__preview,
.tickets-item__preview {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tickets-item__preview { font-size: var(--t-sm); }
.help-item__meta,
.tickets-item__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
}
.tickets-item__number { color: var(--muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.tickets-item__meta .avatar { margin-left: auto; margin-top: 0; }
.help-list__more,
.tickets-more,
.reservation-more {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 620;
  padding: var(--s-3) var(--s-4);
  text-align: center;
  text-decoration: none;
  width: 100%;
}
.help-list__more:hover,
.tickets-more:hover,
.reservation-more:hover {
  background: var(--sunken);
  color: var(--ink);
}
.reservation-more.htmx-request {
  color: transparent;
  cursor: wait;
  pointer-events: none;
}
.reservation-more { position: relative; }
.reservation-more.htmx-request::before {
  animation: reservation-more-spin 640ms linear infinite;
  border: var(--hairline) solid var(--muted);
  border-radius: 999px;
  border-right-color: transparent;
  content: "";
  height: var(--s-4);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--s-4);
}
@keyframes reservation-more-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }
.help-unread {
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent-soft-text);
  font-size: var(--t-xs);
  font-weight: 720;
  padding: 0 var(--s-2);
}

/* Conversation column. */
.help-pane,
.tickets-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.tickets-thread > .empty-state { flex: 1; }
.help-pane__header {
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex: none;
  gap: var(--s-2);
  min-height: 68px;
  padding: var(--s-4) var(--s-6);
}
.help-pane__heading { display: grid; gap: var(--s-1); min-width: 0; }
.help-pane__heading h2 {
  font-size: var(--t-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.help-pane__heading p {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.help-back {
  color: var(--accent-text);
  display: none;
  font-weight: 620;
  text-decoration: none;
}
.help-back:hover { text-decoration: underline; }
.help-pane__empty { flex: 1; }

.tickets-header {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  gap: var(--s-3);
  height: 68px;
  padding: 0 var(--s-4);
}
.tickets-header__heading { display: grid; flex: 1 1 0; gap: 0; min-width: 0; }
.tickets-header__title { align-items: center; display: flex; gap: var(--s-2); min-width: 0; }
.tickets-header__title h2 {
  font-size: var(--t-lg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tickets-header__title .status { flex: none; }
.tickets-header__meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: nowrap;
  font-size: var(--t-xs);
  gap: var(--s-2);
  min-width: 0;
}
.tickets-header__number { flex: none; font-variant-numeric: tabular-nums; font-weight: 650; }
.tickets-header__subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tickets-header__actions { align-items: center; display: flex; flex: none; gap: var(--s-2); }
.tickets-header__actions svg { height: 15px; width: 15px; }
.tickets-header__actions .button { white-space: nowrap; }
.tickets-header__toggle { flex: none; height: 32px; min-height: 32px; width: 32px; }
.tickets-header__details { display: none; }
.tickets-details__back { display: none; }
.tickets-header__toggle svg { color: var(--muted); }

/* Resolve is a split button: the left half acts, the chevron opens the rest. */
.tickets-split { align-items: stretch; display: flex; flex: none; }
.tickets-split__main { border-radius: 7px; }
.tickets-split:has(.tickets-split__more) .tickets-split__main {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.tickets-split__toggle {
  border-bottom-left-radius: 0;
  border-left: 1px solid rgb(255 255 255 / 28%);
  border-top-left-radius: 0;
  cursor: pointer;
  gap: 0;
  list-style: none;
  margin-left: calc(-1 * var(--hairline));
  padding: 0 var(--s-2);
}
.tickets-split__toggle::-webkit-details-marker { display: none; }
.tickets-split__more > div { min-width: 250px; }
.tickets-split__more .menu-action { align-items: center; display: flex; font-size: var(--t-sm); gap: var(--s-2); }
.tickets-split__more .menu-action svg { color: var(--muted); flex: none; height: 15px; width: 15px; }

/* Assignee picker: a compact pill that opens the shared row-menu panel. */
.tickets-pill {
  align-items: center;
  background: var(--input);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--t-xs);
  font-weight: 620;
  gap: var(--s-1);
  list-style: none;
  max-width: 170px;
  min-height: 32px;
  padding: 0 var(--s-2) 0 var(--s-1);
}
.tickets-pill::-webkit-details-marker { display: none; }
.tickets-pill:hover { background: var(--sunken); border-color: var(--border-hover); }
.tickets-pill .avatar { height: 22px; width: 22px; }
.tickets-pill__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tickets-pill svg { color: var(--muted); flex: none; height: 14px; width: 14px; }
.tickets-assign[open] .tickets-pill { border-color: var(--accent-border); }
.tickets-assign > div { max-height: 320px; overflow: auto; }
.tickets-assign .menu-action { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tickets-assign .menu-action[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  font-weight: 700;
}
.tickets-back {
  align-items: center;
  color: var(--accent-text);
  display: none;
  font-size: var(--t-sm);
  font-weight: 650;
  gap: var(--s-1);
  text-decoration: none;
}
.tickets-back svg { height: 15px; width: 15px; }
.tickets-back:hover { text-decoration: underline; }

.help-thread,
.tickets-thread__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 0;
  overflow: auto;
  padding: var(--s-6) var(--s-6);
}
.tickets-message {
  align-items: flex-end;
  align-self: flex-start;
  display: flex;
  gap: var(--s-2);
  max-width: min(78%, 680px);
}
.tickets-message--out { align-self: flex-end; }
.tickets-message > .avatar { margin-bottom: 0; }
.help-bubble,
.tickets-bubble {
  border-radius: 16px;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
}
.help-bubble { max-width: 76%; }
.tickets-bubble { min-width: 0; }
.help-bubble__body,
.tickets-bubble__body {
  color: var(--ink);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.help-bubble__meta,
.tickets-bubble__meta { color: var(--muted); font-size: var(--t-xs); }
.tickets-bubble__label {
  align-items: center;
  color: var(--warning-text);
  display: flex;
  font-size: var(--t-xs);
  font-weight: 700;
  gap: var(--s-1);
}
.tickets-bubble__label svg { height: 13px; width: 13px; }
.help-bubble--in { align-self: flex-start; }
.help-bubble--out { align-self: flex-end; }
.help-bubble--in,
.tickets-bubble--in {
  background: var(--canvas);
  border-bottom-left-radius: 6px;
}
.help-bubble--out,
.tickets-bubble--out {
  background: var(--accent-soft);
  border-bottom-right-radius: 6px;
}
.help-bubble--system,
.tickets-bubble--system {
  align-self: center;
  background: var(--canvas);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--t-xs);
  max-width: min(76%, 460px);
  padding: var(--s-1) var(--s-3);
  text-align: center;
}
.tickets-bubble--note {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-bottom-right-radius: 6px;
}
.tickets-bubble--note .tickets-bubble__meta { color: var(--warning-text); }

.help-composer,
.help-compose {
  display: grid;
  flex: none;
  gap: var(--s-2);
  padding: 0 var(--s-6) var(--s-4);
}
.help-composer textarea { min-height: 88px; resize: vertical; }
.help-compose { align-content: start; flex: 1; overflow: auto; padding-top: var(--s-4); }
.help-composer { grid-template-columns: minmax(0, 1fr) auto; }
.help-composer .button { align-self: end; }
.help-readonly {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  color: var(--warning-text);
  margin: 0 var(--s-6) var(--s-4);
  padding: var(--s-3) var(--s-3);
}

.tickets-composer { flex: none; padding: 0 var(--s-6) var(--s-4); }
.tickets-composer__card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-3);
  transition: background var(--ease), border-color var(--ease);
}
.tickets-composer__card:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--focus-shadow);
}
.tickets-composer__modes {
  background: var(--canvas);
  border-radius: 999px;
  display: inline-flex;
  gap: var(--s-1);
  justify-self: start;
  padding: var(--s-1);
}
.tickets-composer__modes label {
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--t-xs);
  font-weight: 650;
  padding: var(--s-1) var(--s-3);
  position: relative;
}
.tickets-composer__modes input {
  height: 1px;
  margin: 0;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}
.tickets-composer__modes label:has(input:checked) {
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--ink);
}
.tickets-composer__modes label:focus-within { outline: 2px solid var(--accent-border); outline-offset: 1px; }
.tickets-composer textarea {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 84px;
  padding: 0 var(--s-1);
  resize: vertical;
}
.tickets-composer textarea:hover,
.tickets-composer textarea:focus { border-color: transparent; box-shadow: none; }
.tickets-composer__actions { align-items: center; display: flex; gap: var(--s-3); }
.tickets-composer__actions .button { margin-left: auto; }
.tickets-composer__hint {
  align-items: center;
  color: var(--warning-text);
  display: none;
  font-size: var(--t-xs);
  font-weight: 620;
  gap: var(--s-1);
}
.tickets-composer__hint svg { height: 13px; width: 13px; }
.tickets-composer__card:has(input[value="note"]:checked) {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}
.tickets-composer__card:has(input[value="note"]:checked) .tickets-composer__modes { background: var(--warning-bg-hover); }
.tickets-composer__card:has(input[value="note"]:checked) .tickets-composer__hint { display: inline-flex; }

/* Customer context panel. */
.tickets-details {
  background: var(--canvas);
  border-left: 1px solid var(--border);
  display: flex;
  flex: none;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  width: 320px;
}
.tickets-profile {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  padding: var(--s-6) var(--s-4);
  text-align: center;
}
.tickets-profile h2 { font-size: var(--t-lg); }
.tickets-profile__slug { color: var(--muted); font-size: var(--t-xs); margin-top: calc(-1 * var(--s-1)); }
.tickets-profile form { width: 100%; }
.tickets-profile .button svg { height: 15px; width: 15px; }
.tickets-facts {
  display: grid;
  gap: var(--s-2);
  justify-self: stretch;
  list-style: none;
  margin: 0 0;
  padding: 0;
  text-align: left;
}
.tickets-facts li { align-items: center; display: flex; font-size: var(--t-sm); gap: var(--s-2); min-width: 0; }
.tickets-facts svg { color: var(--subtle); flex: none; height: 15px; width: 15px; }
.tickets-facts a,
.tickets-facts li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tickets-facts a { color: var(--text); text-decoration: none; }
.tickets-facts a:hover { color: var(--accent-text); text-decoration: underline; }
.tickets-details__cards { display: grid; gap: var(--s-2); padding: var(--s-3); }
.tickets-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tickets-card > summary {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: var(--t-sm);
  font-weight: 700;
  gap: var(--s-2);
  list-style: none;
  padding: var(--s-3) var(--s-3);
}
.tickets-card > summary::-webkit-details-marker { display: none; }
.tickets-card > summary svg { color: var(--subtle); height: 15px; width: 15px; }
.tickets-card__count {
  background: var(--canvas);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding: 0 var(--s-2);
}
.tickets-card .definition-list { font-size: var(--t-sm); grid-template-columns: 88px minmax(0, 1fr); padding: 0 var(--s-3) var(--s-3); }
.tickets-previous { display: grid; gap: 0; list-style: none; margin: 0; padding: 0 var(--s-2) var(--s-2); }
.tickets-previous a { border-radius: 7px; display: grid; gap: 0; padding: var(--s-2) var(--s-2); text-decoration: none; }
.tickets-previous a:hover { background: var(--sunken); }
.tickets-previous a span:first-child { color: var(--text); font-size: var(--t-sm); }
.tickets-previous a span + span { font-size: var(--t-xs); }
.tickets-previous li.muted { font-size: var(--t-sm); padding: 0 var(--s-2) var(--s-2); }

/* Filter builder, in the shape of Chatwoot's conversation filters. */
.tickets-filter__toggle { flex: none; height: 32px; min-height: 32px; position: relative; width: 32px; }
.tickets-filter__toggle svg { color: var(--muted); }
.tickets-filter__toggle.is-active { border-color: var(--accent-border); }
.tickets-filter__toggle.is-active svg { color: var(--accent-text); }
.tickets-filter__badge {
  background: var(--accent-solid);
  border-radius: 999px;
  color: var(--accent-on-solid);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1;
  padding: 0 var(--s-1);
  position: absolute;
  right: -5px;
  top: -5px;
}
/* The panel floats over the thread the way Chatwoot's popover does; the list
   column on its own is far too narrow for a four-control row. */
.tickets-filter {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: var(--s-2);
  left: 16px;
  padding: var(--s-4);
  position: absolute;
  top: calc(100% + 4px);
  width: min(470px, calc(100vw - 300px));
  z-index: 60;
}
.tickets-filter__head { align-items: center; display: flex; gap: var(--s-2); justify-content: space-between; }
.tickets-filter__title { color: var(--ink); font-size: var(--t-md); font-weight: 700; }
.tickets-filter__close { flex: none; height: 30px; min-height: 30px; width: 30px; }
.tickets-filter__close svg { color: var(--muted); height: 15px; width: 15px; }
.tickets-filter__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.tickets-filter__row select,
.tickets-filter__row input[type="text"],
.tickets-filter__row input[type="date"],
.tickets-filter__row input[type="number"] {
  background: var(--input);
  font-size: var(--t-xs);
  min-height: 30px;
  min-width: 0;
  padding: 0 var(--s-2);
}
.tickets-filter__row input[type="text"] { flex: 1 1 120px; }
.tickets-filter__lead {
  color: var(--accent-text);
  flex: none;
  font-size: var(--t-xs);
  font-weight: 700;
  min-width: 56px;
}
.tickets-filter__lead--static { padding-left: 0; }
.tickets-filter__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.tickets-filter__chip {
  align-items: center;
  background: var(--input);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--t-xs);
  font-weight: 620;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
}
.tickets-filter__chip:hover { border-color: var(--border-hover); }
.tickets-filter__chip input {
  accent-color: var(--accent-solid);
  height: 13px;
  margin: 0;
  min-height: 0;
  padding: 0;
  width: 13px;
}
.tickets-filter__chip:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-soft-text);
}
.tickets-filter__drop { flex: none; height: 30px; min-height: 30px; width: 30px; }
.tickets-filter__drop svg { color: var(--muted); height: 15px; width: 15px; }
.tickets-filter__drop:hover svg { color: var(--red-tone-text); }
.tickets-filter__hint { color: var(--warning-text); flex-basis: 100%; font-size: var(--t-xs); padding-left: var(--s-12); }
.tickets-filter__actions { align-items: center; display: flex; gap: var(--s-2); }
.tickets-filter__add { background: none; border: 0; cursor: pointer; margin-right: auto; padding: 0; }

@media (max-width: 1024px) {
  .tickets-details { display: none; }
  .tickets-header__toggle { display: none; }
  .tickets-list { width: 330px; }
}

@media (max-width: 760px) {
  /* One pane fills the desk, so the column must shrink to it rather than to
     its own content. */
  .help-list,
  .tickets-list { flex: 1 1 auto; min-width: 0; width: auto; }
  .help-desk--thread .help-list,
  .help-desk--list .help-pane { display: none; }
  .help-desk--thread .help-back { display: inline-flex; }
  .tickets-desk--thread .tickets-list { display: none; }
  .tickets-desk:not(.tickets-desk--thread) .tickets-thread { display: none; }
  .tickets-desk--thread .tickets-back { display: inline-flex; }
  .tickets-header { gap: var(--s-2); padding: 0 var(--s-3); }
  .tickets-header__toggle { display: none; }
  .tickets-thread__body,
  .tickets-composer { padding-left: var(--s-4); padding-right: var(--s-4); }
  .tickets-message { max-width: 92%; }
}

/* Beheer op smalle en gevouwen schermen.
   Het zijmenu wordt onder 760px een lade (zie admin-shell.js); brede tabellen
   worden kaarten zodra ze niet meer eerlijk in kolommen passen. Tussen 560 en
   760px staan die kaarten twee naast elkaar, wat past bij het bijna vierkante
   scherm van een uitgeklapte vouwtelefoon. */


@media (max-width: 760px) {
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; }
  .sidebar-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sidebar-footer > :not(a) { grid-column: 1 / -1; }
  .sidebar-footer > a { border-radius: var(--radius-sm); gap: 0; justify-content: center; min-height: var(--s-12); padding: var(--s-2); }
  /* Keep the translated link names available to assistive technology. */
  .sidebar-footer > a span { border: 0; clip: rect(0, 0, 0, 0); height: var(--hairline); margin: calc(-1 * var(--hairline)); overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: var(--hairline); }
  .table-stack thead { display: none; }
  .table-stack tr { border-bottom: 1px solid var(--border); display: grid; gap: var(--s-1) var(--s-3); grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-3) var(--s-4); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack tr:has(> .table-stack__empty) { display: block; padding: 0; }
  .table-stack td { border: 0; display: grid; gap: var(--s-3); grid-column: 1 / -1; grid-template-columns: 96px minmax(0, 1fr); padding: 0; }
  .table-stack td::before { color: var(--muted); content: attr(data-label); font-size: var(--t-xs); font-weight: 730; letter-spacing: .04em; line-height: 1.6; text-transform: uppercase; }
  .table-stack td > * { justify-self: start; }
  .table-stack td.numeric { text-align: left; }
  .table-stack td:first-child { display: block; font-size: var(--t-md); grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
  .table-stack td.table-stack__action { align-self: start; display: block; grid-column: 2; grid-row: 1; }
  .table-stack td.table-stack__action .icon-button { height: 40px; min-height: 40px; width: 40px; }
  .table-stack td.table-stack__empty { display: block; }
  .table-stack td:first-child::before, .table-stack td.table-stack__action::before, .table-stack td.table-stack__empty::before { content: none; }
}

@media (min-width: 560px) and (max-width: 760px) {
  .table-stack tbody { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s-3); }
  .table-stack tr { border: 1px solid var(--border); border-radius: var(--radius); }
  .table-stack tr:last-child { border-bottom: 1px solid var(--border); }
  .table-stack tr:has(> .table-stack__empty) { border: 0; grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .page-intro { align-items: flex-start; flex-direction: column; gap: var(--s-2); }
  .card__header { flex-wrap: wrap; padding: var(--s-3) var(--s-4); }
}

@media (max-width: 560px) {
  .auth-shell { padding: var(--s-4); }
  .auth-card { gap: var(--s-4); padding: var(--s-6) var(--s-4); }
  .auth-card h1 { font-size: var(--t-xl); }
}


/* Ticketdesk op een telefoon. De drie kolommen worden drie pagina's: lijst,
   gesprek en klantgegevens, met een terugkoppeling op elke pagina. */
@media (max-width: 760px) {
  .tickets-desk--details .tickets-list,
  .tickets-desk--details .tickets-thread { display: none; }
  .tickets-desk--details .tickets-details {
    border-left: 0;
    display: flex;
    flex: 1;
    width: auto;
  }
  .tickets-desk--thread .tickets-header__details { display: inline-flex; }
  .tickets-details__back {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex: none;
    gap: var(--s-1);
    min-height: 52px;
    padding: 0 var(--s-4);
  }
}

@media (max-width: 760px) {
  /* Controls need a thumb-sized target rather than a mouse-sized one. */
  .tickets-header { flex-wrap: wrap; height: auto; padding: var(--s-2) var(--s-3); row-gap: var(--s-2); }
  /* The heading already names the customer, so the avatar only costs space. */
  .tickets-header > .avatar { display: none; }
  .tickets-header__heading { flex: 1 1 100%; order: 2; }
  .tickets-header__actions { flex: 1 1 100%; order: 3; }
  .tickets-header .tickets-back { order: 1; }
  .tickets-back { min-height: 34px; }
  .tickets-pill { max-width: none; min-height: 38px; }
  .tickets-header__actions .button { min-height: 38px; }
  .tickets-header__toggle,
  .tickets-header__details { height: 38px; min-height: 38px; width: 38px; }
  .tickets-split { margin-left: auto; }

  .tickets-list__title h2 { font-size: var(--t-lg); }
  .tickets-tabs { gap: var(--s-3); overflow-x: auto; scrollbar-width: none; }
  .tickets-tabs::-webkit-scrollbar { display: none; }
  .tickets-item { padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); }

  .tickets-thread__body { gap: var(--s-3); padding: var(--s-4) var(--s-3); }
  .tickets-message { max-width: 100%; }
  .tickets-composer { padding: 0 var(--s-3) var(--s-3); }
  .tickets-composer__card { gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2); }
  .tickets-composer textarea { min-height: 64px; }
  .tickets-composer__modes label { min-height: 34px; padding: 0 var(--s-3); }
  .tickets-composer__modes label span { line-height: 34px; }

  .tickets-details { width: auto; }
  .tickets-profile { padding: var(--s-4) var(--s-4); }
  .tickets-details__cards { padding: var(--s-3) var(--s-3); }

  /* A sheet pinned under the topbar. In flow it could outgrow the desk, which
     clips it, so it anchors to the viewport and scrolls on its own. */
  .tickets-filter {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    left: 0;
    margin: 0;
    max-height: calc(100vh - var(--topbar));
    max-height: calc(100dvh - var(--topbar));
    overflow-y: auto;
    position: fixed;
    top: var(--topbar);
    width: 100%;
    z-index: 70;
  }
  .tickets-filter__row {
    display: grid;
    gap: var(--s-2);
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .tickets-filter__lead { align-self: center; grid-column: 1; grid-row: 1; }
  .tickets-filter__drop { grid-column: 2; grid-row: 1; height: 38px; min-height: 38px; width: 38px; }
  .tickets-filter__row > select:not(.tickets-filter__lead),
  .tickets-filter__row > input,
  .tickets-filter__chips,
  .tickets-filter__hint { grid-column: 1 / -1; }
  .tickets-filter__row select,
  .tickets-filter__row input[type="text"],
  .tickets-filter__row input[type="date"],
  .tickets-filter__row input[type="number"] { font-size: var(--t-md); min-height: 38px; }
  .tickets-filter__chip { min-height: 34px; }
  .tickets-filter__close { height: 38px; min-height: 38px; width: 38px; }
  .tickets-filter__hint { padding-left: 0; }
  .tickets-filter__actions { flex-wrap: wrap; }
  .tickets-filter__add { flex-basis: 100%; margin-right: 0; text-align: left; }
  .tickets-filter__actions .button { flex: 1 1 auto; min-height: 38px; }
}

@media (max-width: 560px) {
  .tickets-composer textarea { min-height: 52px; }
  .tickets-list__title { gap: var(--s-2); }
  .tickets-segmented a { padding: var(--s-1) var(--s-2); }
  .tickets-header__meta { font-size: var(--t-xs); }
  .tickets-pill__label { display: none; }
}

/* Vouwtelefoons. Uitgeklapt (560-760px breed) is er ruimte genoeg om
   veld en bewerking naast elkaar te zetten, zodat een filterregel niet vier
   regels hoog wordt; dichtgeklapt (rond 344px) moet alles nog passen. */
@media (min-width: 560px) and (max-width: 760px) {
  .tickets-filter__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .tickets-filter__lead { grid-column: 1 / -1; grid-row: 1; }
  .tickets-filter__drop { grid-column: 3; grid-row: 2; }
  .tickets-filter__row > select:not(.tickets-filter__lead) { grid-column: auto; }
  .tickets-filter__row > input,
  .tickets-filter__chips,
  .tickets-filter__hint { grid-column: 1 / -1; }
  /* Wide enough to put the terugknop and the title on one line, so the header
     costs two rows instead of three. */
  .tickets-header__heading { flex: 1 1 auto; order: 2; }
  .tickets-header { row-gap: var(--s-1); }
}

/* Breed maar laag, zoals een vouwtelefoon in liggende stand: hetzelfde
   verankerde paneel, maar niet over de volle breedte. */
@media (min-width: 760px) and (max-height: 620px) {
  .tickets-filter {
    left: 16px;
    max-height: calc(100vh - var(--topbar) - 12px);
    max-height: calc(100dvh - var(--topbar) - 12px);
    overflow-y: auto;
    position: fixed;
    top: var(--topbar);
    width: min(470px, calc(100vw - 32px));
  }
}

@media (max-width: 560px) {
  .tickets-header { padding: var(--s-2) var(--s-3); }
  .tickets-thread__body { padding: var(--s-3) var(--s-3); }
  .tickets-composer { padding: 0 var(--s-3) var(--s-3); }
  .tickets-list__header { padding: var(--s-3) var(--s-4) 0; }
  .tickets-item { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3); }
  .tickets-tabs { font-size: var(--t-xs); gap: var(--s-3); }
  .tickets-list__title h2 { font-size: var(--t-lg); }
  .tickets-composer__modes label { padding: 0 var(--s-2); }
}

/* Liggend op een vouwtelefoon is het scherm maar ~344px hoog. Het antwoordvak
   houdt dan zijn bureaubladmaat en duwt de verzendknop buiten beeld, dus bij
   weinig hoogte krimpt het mee. */
@media (max-height: 520px) {
  .tickets-header { height: auto; min-height: 56px; }
  .tickets-thread__body { padding-bottom: var(--s-3); padding-top: var(--s-3); }
  .tickets-composer { padding-bottom: var(--s-2); }
  .tickets-composer__card { gap: var(--s-1); padding: var(--s-1) var(--s-2) var(--s-2); }
  .tickets-composer textarea { min-height: 40px; }
  .tickets-composer__modes label { min-height: 28px; padding: 0 var(--s-3); }
  .tickets-profile { gap: var(--s-2); padding: var(--s-3) var(--s-4); }
  .tickets-profile .avatar--large { height: 44px; width: 44px; font-size: var(--t-md); }
  .tickets-filter { max-height: calc(100vh - var(--topbar) - 12px); max-height: calc(100dvh - var(--topbar) - 12px); }
}

/* Insluiten: twee stappen onder elkaar. De code bestaat pas als er een website
   is ingevuld, dus stap 2 is in de eerste toestand een uitleg in plaats van een
   formulier. */
.embed-page { display: grid; gap: var(--s-4); }
.embed-steps { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; margin: 0; padding: 0; }
.embed-steps__item { align-items: center; color: var(--muted); display: flex; font-size: var(--t-sm); font-weight: 550; gap: var(--s-2); }
.embed-steps__item.is-current { color: var(--ink); }
.embed-steps__mark {
  align-items: center; background: var(--neutral-status-bg); border-radius: 50%;
  color: var(--muted); display: flex; flex: 0 0 auto; font-size: var(--t-xs); font-weight: 700;
  height: 24px; justify-content: center; width: 24px;
}
.embed-steps__item.is-current .embed-steps__mark { background: var(--accent-solid); color: var(--accent-on-solid); }
.embed-steps__item.is-done .embed-steps__mark { background: var(--accent-soft-strong); color: var(--accent-soft-text); }
.embed-steps__mark svg { height: 13px; width: 13px; }

.embed-websites { display: grid; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.embed-websites__item {
  align-items: center; background: var(--sunken); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-3);
}
.embed-websites__item svg { color: var(--subtle); flex: 0 0 auto; height: 15px; width: 15px; }
.embed-websites__host { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.embed-add { align-items: end; display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr) auto; }

.embed-locked { text-align: center; }
.embed-locked .card__body { display: grid; gap: var(--s-2); justify-items: center; padding: var(--s-6) var(--s-4); }
.embed-locked h2 { font-size: var(--t-lg); }
.embed-locked p { color: var(--muted); max-width: 52ch; }
.embed-locked__mark {
  align-items: center; background: var(--sunken); border: 1px solid var(--border);
  border-radius: 50%; color: var(--muted); display: flex; height: 40px; justify-content: center; width: 40px;
}
.embed-locked__mark svg { height: 17px; width: 17px; }
.embed-direct { margin-top: var(--s-2); text-align: left; width: min(420px, 100%); }

.embed-choices { display: grid; gap: var(--s-3); }
.embed-choice { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-3) var(--s-3); }
.embed-choice[open] { background: var(--sunken); }
.embed-choice summary { align-items: center; cursor: pointer; display: flex; gap: var(--s-2); }
.embed-choice > p { color: var(--muted); font-size: var(--t-xs); margin: var(--s-2) 0 var(--s-2); max-width: 68ch; }
.embed-snippet pre {
  background: var(--code-bg); border-radius: var(--radius); color: var(--code-text); font-size: var(--t-xs);
  line-height: 1.7; margin: 0 0 var(--s-2); overflow: auto; padding: var(--s-3) var(--s-3);
  white-space: pre-wrap; word-break: break-word;
}
.embed-where { border-top: 1px solid var(--border); padding-top: var(--s-3); }
.embed-where h3 { font-size: var(--t-sm); margin-bottom: var(--s-2); }
.embed-where ul { color: var(--muted); display: grid; font-size: var(--t-xs); gap: var(--s-1); margin: 0 0 var(--s-2); padding-left: var(--s-4); }
.embed-where strong { color: var(--ink); }

@media (max-width: 560px) {
  .embed-add { grid-template-columns: minmax(0, 1fr); }
}

/* User administration: browse the team first, edit one task at a time. */
.users-page { display: grid; gap: var(--s-4); }
.users-heading, .users-pagination { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; }
.users-heading p { margin: 0; }
.users-tabs { border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s-4); }
.users-tabs label { align-items: center; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; display: flex; gap: var(--s-2); min-height: var(--s-12); font-weight: 650; }
.users-tabs label span { border-radius: 999px; background: var(--sunken); padding: 0 var(--s-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.users-tabs input:checked + label { border-color: var(--accent-solid); color: var(--ink); }
.users-tabs input:focus-visible + label { outline: 2px solid var(--accent-solid); outline-offset: 2px; border-radius: var(--radius-sm); }
.users-panel { min-width: 0; }
#users-permissions-panel { display: grid; gap: var(--s-4); }
@supports selector(:has(*)) {
  .users-page:has(#users-team:not(:checked)) #users-team-panel,
  .users-page:has(#users-invitations:not(:checked)) #users-invitations-panel,
  .users-page:has(#users-permissions:not(:checked)) #users-permissions-panel { display: none; }
}
@supports not selector(:has(*)) { .users-tabs { display: none; } }
.users-page .table-scroll { overflow: visible; }
.users-page table { width: 100%; }
.users-page th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.users-page td { white-space: normal; overflow-wrap: anywhere; }
.users-page [data-users-list]:not([data-users-list="roles"]) td:last-child { width: var(--s-12); }
.users-page [data-users-list="roles"] th:nth-child(1) { width: 20%; }
.users-page [data-users-list="roles"] th:nth-child(2) { width: 16%; }
.users-page table:has(.empty-state) thead { display: none; }
.users-page .row-menu > div { max-width: calc(100vw - var(--s-12)); }
.users-page .row-menu form { display: grid; gap: var(--s-2); }
.users-name { background: none; border: 0; color: var(--accent-text); cursor: pointer; font: inherit; font-weight: 700; min-height: var(--s-8); padding: 0; text-align: left; text-decoration: underline; text-underline-offset: var(--s-1); }
.users-page td .status { justify-self: start; }
.users-email { color: var(--muted); display: block; font-size: var(--t-sm); }
.users-form { display: grid; gap: var(--s-4); }
.users-form fieldset { min-width: 0; }
.users-form .switch-field { min-height: var(--s-8); }
.users-tools, .users-pagination { padding: var(--s-4); }
.users-tools .field { max-width: 320px; }
.users-pagination { border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.users-transfer > summary { cursor: pointer; font-weight: 650; padding: var(--s-4); min-height: var(--s-8); }
.users-transfer > summary:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: -2px; border-radius: var(--radius); }
.users-transfer__body { display: grid; gap: var(--s-4); padding: 0 var(--s-4) var(--s-4); }
.users-transfer__body p { margin: 0; }
.users-transfer__form { display: grid; gap: var(--s-3); max-width: 320px; }
.users-transfer__form > .button { justify-self: start; }

.users-page [hidden] { display: none !important; }
@media (max-width: 760px) {
  .users-heading { align-items: stretch; flex-direction: column; }
  .users-tabs { gap: var(--s-3); font-size: var(--t-sm); }
  .users-page .card__header { align-items: flex-start; flex-wrap: wrap; gap: var(--s-3); }
  .users-page table, .users-page tbody { display: block; }
  .users-page thead { display: none; }
  .users-page tr { border-top: 1px solid var(--border); display: grid; gap: var(--s-2); padding: var(--s-4); }
  .users-page td { border: 0; display: grid; gap: var(--s-1); padding: 0; width: auto; }
  .users-page td[data-label]::before { color: var(--muted); content: attr(data-label); font-size: var(--t-xs); }
  .users-page [data-users-list]:not([data-users-list="roles"]) td:last-child { width: auto; }
  .users-page [data-users-list]:not([data-users-list="roles"]) td:last-child:not(:has(*)) { display: none; }
  .users-page .row-menu > div { left: 0; right: auto; }
  .users-tools .field { max-width: none; }
}

/* The price remains beside the reservation fields on wider screens. */
.drawer--reservation-form { max-width: var(--reservation-form-width); width: min(var(--reservation-form-width), 100%); height: 100dvh; }
.drawer--reservation-form .drawer__header { flex-shrink: 0; }
.reservation-form-layout { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.reservation-form-fields { display: contents; }
.reservation-form-fields > .drawer-section { min-width: 0; order: 2; }
.reservation-form-fields > .drawer-section:first-child { order: 0; }
.reservation-form-price { min-width: 0; order: 1; padding: var(--s-4); }
.reservation-form-price .price-estimate-card__header { flex-direction: column; }
.reservation-form-price .price-estimate-card__header .button { align-self: flex-start; }
.reservation-form-price .money-lines > div { align-items: baseline; gap: var(--s-3); }
.reservation-form-price .money-lines span { overflow-wrap: anywhere; }
.reservation-form-price .money-lines strong { flex-shrink: 0; text-align: right; }
.reservation-form-price .switch-field { border-top: 1px solid var(--border); padding-top: var(--s-4); }
.reservation-form-price .price-estimate__total { border-bottom: 1px solid var(--border); padding-bottom: var(--s-3); }
@media (min-width: 1024px) {
  .reservation-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--reservation-price-width); gap: var(--s-6); align-items: start; }
  .reservation-form-fields { display: grid; min-width: 0; order: 0; }
  .reservation-form-price { position: sticky; top: 0; max-height: calc(100dvh - var(--s-8) * 6); overflow-y: auto; }
}

/* Installed operator app: the same pages, with explicit connection/update states. */
.pwa-controls { margin: var(--s-4); }
.auth-card .pwa-controls { margin: 0; }
.pwa-controls [hidden] { display: none !important; }
.pwa-controls:not(:has(.notice:not([hidden]))) { display: none; }
.pwa-controls .notice { flex-wrap: wrap; }
@media print { .pwa-controls { display: none; } }

.field-grid--compact { grid-template-columns: repeat(2, minmax(0, var(--field-short-width))); }

/* Customer email composition uses the app's existing fields and action buttons. */
.mail-block-editor { display: grid; gap: var(--s-4); min-width: 0; }
.mail-content-block { border: var(--hairline) solid var(--border); border-radius: var(--radius); padding: var(--s-4); margin-bottom: var(--s-4); }
.mail-content-block h3 { font-size: var(--t-lg); margin: 0 0 var(--s-3); }
.mail-editor-actions, [data-editor-tools] { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.mail-asset-preview { display: block; width: var(--field-short-width); max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.mail-editor-local-preview { padding: var(--s-4); border: var(--hairline) solid var(--border); border-radius: var(--radius); overflow-wrap: anywhere; }
.mail-editor-local-preview p { white-space: pre-wrap; }
@media (max-width: 760px) {
  .mail-content-block .field-grid { grid-template-columns: minmax(0, 1fr); }
}
.reservation-picker { display: grid; gap: var(--s-2); min-width: 0; }
.reservation-picker-results { display: grid; gap: var(--s-1); }
.reservation-picker-results .button { white-space: normal; text-align: left; justify-content: flex-start; }
.mail-editor [data-email-publication] details > summary { cursor: pointer; padding: var(--s-2) 0; font-weight: 700; }
.mail-editor [data-email-publication] details > .field { margin: var(--s-3) 0; }

/* Each booking question owns its form and explicit answer type. */
.booking-question-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-2); }
.booking-question-types label { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); border: var(--hairline) solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.booking-question-types label:has(input:checked) { border-color: var(--accent-border); background: var(--accent-soft); }
.booking-question-types input { flex: none; width: var(--s-4); height: var(--s-4); min-height: 0; margin: var(--s-1) 0 0; accent-color: var(--accent-solid); }
.booking-question-types span { display: grid; gap: var(--s-1); }
.booking-question-types small { color: var(--muted); font-size: var(--t-xs); }
.booking-question-form:has(input[name="kind"][value="text"]:checked) .booking-question-options { display: none; }
@media (max-width: 760px) {
  .booking-question-types { grid-template-columns: minmax(0, 1fr); }
}

.booking-questions-page .table-scroll { overflow: visible; }

.booking-question-option { border: var(--hairline) solid var(--border); border-radius: var(--radius); display: grid; gap: var(--s-3); margin: 0; min-width: 0; padding: var(--s-4); }
.booking-question-option > legend { color: var(--ink); font-size: var(--t-md); font-weight: 700; padding: 0 var(--s-1); }
.booking-question-option > button { justify-self: end; }

/* Independent settings pages share one navigation on desktop and mobile. */
.settings-nav { top: calc(var(--topbar) + var(--s-4)); }
.settings-nav a { border-radius: var(--radius-sm); min-height: 32px; }
.settings-content { min-width: 0; }
.settings-content .card { scroll-margin-top: calc(var(--topbar) + var(--s-4)); }
.settings-nav__select { display: none; }
.settings-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.settings-advanced > summary { cursor: pointer; min-height: 32px; padding: var(--s-4); font-weight: 600; }
@media (max-width: 760px) {
  .settings-nav--enhanced { display: block; }
  .settings-nav--enhanced > a { display: none; }
  .settings-nav--enhanced .settings-nav__select { display: flex; }
}

/* Operator pages on phones. Keep the planboard canvas and its controls independent. */
@media (max-width: 760px) {
  .operator-app .page,
  .operator-app .page :where(.card, .card__body, .form-section, .stack-list, .settings-content),
  .operator-app .drawer :where(.drawer__body, .drawer-section, .field-grid),
  .operator-app .dialog :where(.dialog__body, .field-grid) { min-width: 0; }
  .operator-app :where(.field-grid, .form-layout, .settings-layout, .detail-columns) { grid-template-columns: minmax(0, 1fr); }
  .operator-app .field-grid--compact { grid-template-columns: repeat(2, minmax(0, var(--field-short-width))); }
  .operator-app :where(fieldset, input, select, textarea) { min-width: 0; max-width: 100%; }
  /* 16px avoids automatic input zoom on iOS without disabling user zoom. */
  .operator-app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, .country-trigger) { font-size: var(--t-lg); }
  .operator-app :where(.page, .drawer, .dialog, .sidebar, #notices) :where(.button, .icon-button, .country-trigger, .menu-action) { min-height: var(--s-12); }
  .operator-app :where(.page, .drawer, .dialog) .icon-button { min-width: var(--s-12); }
  .operator-app :where(.page, .drawer, .dialog) .button { white-space: normal; overflow-wrap: anywhere; text-align: center; }
  .operator-app :where(.page, .drawer, .dialog, .sidebar) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: var(--s-12); }
  .operator-app :where(.button-group, .form-actions, .sticky-actions, .drawer__footer, .drawer__footer-actions, .dialog footer) { flex-wrap: wrap; }
  .operator-app :where(.card__header, .drawer__header, .dialog header) > div { min-width: 0; overflow-wrap: anywhere; }
  .operator-app :where(.drawer__header, .dialog header) > .icon-button { flex: none; }
  .operator-app :where(.breadcrumb, .header-meta, .detail-header) { flex-wrap: wrap; }
  .operator-app :where(.notice, .setup-confirmation) { overflow-wrap: anywhere; }
  .operator-app .notice { align-items: flex-start; flex-direction: column; gap: var(--s-2); }
  .operator-app .notice > .button { align-self: flex-start; }
  .operator-app .setup-confirmation { display: grid; grid-template-columns: minmax(0, 1fr); }
  .operator-app .setup-confirmation__controls { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .operator-app .setup-confirmation__controls select { width: 100%; }
  .operator-app .definition-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .operator-app .definition-list dd + dt { margin-top: var(--s-2); }

  /* Page actions stay in the title row: knoppen met pictogram krimpen tot een
     vierkant icoonknopje, tekstknoppen blijven leesbaar maar compact. */
  .operator-app .workspace .topbar__heading { min-width: 0; }
  .operator-app .workspace .topbar__heading h1 { font-size: var(--t-xl); overflow-wrap: anywhere; }
  .operator-app .workspace .topbar__actions:not(:empty) { flex: none; }
  .operator-app .workspace .topbar__actions .button:not(:has(svg)) { font-size: var(--t-sm); min-height: var(--s-8); padding: var(--s-2) var(--s-3); white-space: normal; width: auto; }
  .operator-app .sidebar-toggle { flex: none; height: var(--s-12); width: var(--s-12); }
  .operator-app .sidebar { max-width: calc(100vw - var(--s-12)); overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); padding-top: env(safe-area-inset-top, 0px); }
  .operator-app .sidebar .nav-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .operator-app .sidebar-footer { margin-top: auto; }
  .operator-app .sidebar :where(.nav-list > a, .sidebar-footer > a) { min-height: var(--s-12); }
  .operator-app .sidebar-user__menu { max-height: calc(100dvh - var(--s-12) - var(--s-12) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  .operator-app .settings-nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: var(--s-1); }
  .operator-app .settings-nav a { flex: none; min-height: var(--s-12); }

  /* Each record keeps its field names and complete values, including without JS. */
  .operator-app .table-stack--app { min-width: 0; table-layout: auto; }
  .operator-app .table-stack--app tbody { display: block; padding: 0; }
  .operator-app .table-stack--app tr { border: 0; border-bottom: var(--hairline) solid var(--border); border-radius: 0; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operator-app .table-stack--app td { display: block; grid-column: auto; grid-row: auto; min-width: 0; width: auto; max-width: none; overflow-wrap: anywhere; white-space: normal; }
  .operator-app .table-stack--app td::before { display: block; font-weight: 650; letter-spacing: normal; margin-bottom: var(--s-1); text-transform: none; }
  .operator-app .table-stack--app td:first-child,
  .operator-app .table-stack--app td[colspan],
  .operator-app .table-stack--app td:has(.field, .button-group, .order-table__actions, .accommodation-unit-table__actions, .integration-row-actions),
  .operator-app .table-stack--app td:last-child:has(.button, .icon-button, form) { grid-column: 1 / -1; }
  .operator-app .table-stack--app td.numeric { text-align: right; }
  .operator-app .table-stack--app td > small { display: block; }
  .operator-app .table-stack--app .status { max-width: 100%; white-space: normal; }
  .operator-app .table-stack--app .guest-cell { white-space: normal; }
  .operator-app .table-stack--app .guest-cell .avatar { flex: none; }
  .operator-app .table-stack--app :where(.order-table__actions, .accommodation-unit-table__actions, .integration-row-actions) { flex-wrap: wrap; justify-content: flex-start; }
  .operator-app .table-stack--app :where(.order-table__order, .accommodation-unit-table__order, .extra-order-table__order) { justify-self: start; }
  .operator-app .table-stack--app tfoot { display: block; }
  .operator-app .table-stack--app tfoot tr { display: flex; flex-wrap: wrap; }
  .operator-app .table-stack--app tfoot :where(th, td) { border: 0; white-space: normal; padding: var(--s-2); }
  .operator-app .table-stack--app [hidden] { display: none !important; }

  /* Compact reservation summaries with secondary document links in a footer. */
  .operator-app .card:has(> .reservation-toolbar) { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .operator-app .reservation-toolbar { border-bottom: 0; padding: 0 0 var(--s-3); }
  .operator-app .reservation-table-wrap { container-type: normal; }
  .operator-app .reservation-table { display: block; min-width: 0; }
  .operator-app .reservation-table thead { display: none; }
  .operator-app .reservation-table tbody { display: block; background: var(--canvas); padding: 0; }
  .operator-app .reservation-table tbody tr { background: var(--surface); border: var(--hairline) solid var(--border); border-radius: var(--radius); display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-3); gap: var(--s-2) var(--s-3); position: relative; }
  .operator-app .reservation-table tbody tr + tr { margin-top: var(--s-2); }
  .operator-app .reservation-table td { display: block; border: 0; height: auto; min-width: 0; padding: 0; }
  .operator-app .reservation-table td:nth-child(1) { grid-column: 1 / -1; grid-row: 2; }
  .operator-app .reservation-table td:nth-child(2) { grid-column: 1; grid-row: 1; }
  .operator-app .reservation-table td:nth-child(3) { display: none; }
  .operator-app .reservation-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .operator-app .reservation-table td:nth-child(5) { grid-column: 2; grid-row: 1; align-self: start; }
  .operator-app .reservation-table td:nth-child(5):has(.reservation-payment) { display: contents; }
  .operator-app .reservation-table td[colspan] { grid-column: 1 / -1; grid-row: auto; }
  .operator-app .reservation-table td.reservation-col--document { display: none; }
  .operator-app .reservation-table td.reservation-col--document:has(.reservation-document-link, .reservation-document--pending) { display: block; grid-column: 1 / -1; grid-row: 5; border-top: var(--hairline) solid var(--border); padding-top: var(--s-1); }
  .operator-app .reservation-table .reservation-documents { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
  .operator-app .reservation-table .reservation-document-link { min-height: var(--s-12); }
  .operator-app .reservation-table .reservation-documents strong { display: none; }
  .operator-app .reservation-table .reservation-documents small { font-size: var(--t-xs); }
  .operator-app .reservation-table td.reservation-col--open { grid-column: 2; grid-row: 4; padding: 0 !important; align-self: center; }
  .operator-app .reservation-table td.reservation-col--open:not(:has(.button)) { display: none; }
  .operator-app .reservation-table .reservation-row > td { background: transparent; box-shadow: none; }
  .operator-app .reservation-table .reservation-row.is-active { border-color: var(--accent-border); }
  .operator-app .reservation-table .reservation-row:focus-within { outline: var(--hairline) solid var(--accent-border); }
  .operator-app .reservation-table :where(.reservation-guest, .reservation-accommodation) { min-width: 0; }
  .operator-app .reservation-table .reservation-guest { align-items: flex-start; gap: var(--s-1); }
  .operator-app .reservation-table .reservation-guest__avatar { display: none; }
  .operator-app .reservation-table .reservation-guest__copy { min-height: var(--s-12); gap: var(--s-1); }
  .operator-app .reservation-table .reservation-guest__copy strong { font-size: var(--t-lg); font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
  .operator-app .reservation-table .reservation-guest__copy > span { display: none; }
  .operator-app .reservation-table .reservation-signals { padding-top: var(--s-1); }
  .operator-app .reservation-table .reservation-stay { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
  .operator-app .reservation-table .reservation-stay__dates { font-family: var(--font); font-size: var(--t-sm); font-weight: 600; gap: var(--s-1); }
  .operator-app .reservation-table .reservation-stay > span { flex-wrap: wrap; line-height: 1.5; }
  .operator-app .reservation-table .reservation-place { font-family: var(--font); font-size: var(--t-sm); font-weight: 500; white-space: normal; overflow-wrap: anywhere; max-width: none; }
  .operator-app .reservation-table .reservation-accommodation { gap: var(--s-1); }
  .operator-app .reservation-table .reservation-accommodation strong { font-size: var(--t-xs); font-weight: 500; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
  .operator-app .reservation-table .reservation-payment { display: contents; }
  .operator-app .reservation-table .reservation-payment strong { grid-column: 2; grid-row: 1; align-self: start; font-size: var(--t-lg); font-weight: 700; overflow: visible; text-align: right; padding-top: var(--s-1); }
  .operator-app .reservation-table .reservation-payment > span:not(.reservation-payment__mobile) { display: none; }
  .operator-app .reservation-table .reservation-payment > .reservation-payment__mobile { grid-column: 1; grid-row: 4; align-self: center; display: block; white-space: normal; line-height: 1.5; text-align: left; font-weight: 600; }
  .operator-app .reservation-table .reservation-payment__mobile svg { display: inline-block; margin-right: var(--s-1); vertical-align: middle; }
  .operator-app .reservation-table .reservation-open { display: none; }
  .operator-app .reservation-table .reservation-row-actions { flex-wrap: wrap; }
  .operator-app .reservation-table .reservation-row-actions .button { min-height: var(--s-12); padding: var(--s-2) var(--s-3); font-size: var(--t-sm); }
  .operator-app .reservation-table .reservation-row-actions .button svg { display: none; }
  .operator-app .reservation-segments a { min-height: var(--s-12); }
  /* Het zoekicoon is een tikknop: vul de hele hoogte van het zoekveld. */
  .operator-app .reservation-search label { height: var(--s-12); }
  .operator-app .reservation-search__submit { height: var(--s-12); width: var(--s-12); }
  .operator-app .reservation-search__submit svg { height: 18px; width: 18px; }

  /* Full-width sheets with their own scroll area and reachable footer actions. */
  .operator-app .drawer { height: 100dvh; max-width: 100%; width: 100%; }
  .operator-app .drawer__header { flex: none; }
  .operator-app .drawer__body { min-height: 0; overscroll-behavior: contain; overflow-wrap: anywhere; }
  .operator-app .drawer__footer { padding-bottom: max(var(--s-3), env(safe-area-inset-bottom, 0px)); }
  .operator-app .dialog { max-height: calc(100dvh - var(--s-4)); max-width: calc(100vw - var(--s-4)); }
  .operator-app .dialog[open] { display: flex; flex-direction: column; }
  .operator-app .dialog :where(header, footer) { flex: none; flex-wrap: wrap; gap: var(--s-2); }
  .operator-app .dialog__body { min-height: 0; max-height: none; overflow-wrap: anywhere; }
  .operator-app .reservation-tabs label { flex: none; min-height: var(--s-12); }
  .operator-app .reservation-tabs { scrollbar-width: auto; }
  .operator-app .reservation-tabs::-webkit-scrollbar { display: block; }
  .operator-app .changeover-days__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: var(--s-1); }
  .operator-app .changeover-days__grid > span:first-child { display: none; }
  .operator-app .changeover-days__day { grid-row: 2; }
  .operator-app .changeover-days__grid > strong { grid-column: 1 / -1; grid-row: 1; }
  .operator-app .changeover-days__grid > strong:nth-of-type(2) { grid-row: 4; margin-top: var(--s-2); }
  .operator-app .changeover-days__grid > label { grid-row: 3; }
  .operator-app .changeover-days__grid > label:nth-of-type(n + 8) { grid-row: 5; }
  .operator-app .changeover-days__grid label > span[aria-hidden] { height: var(--s-12); border-radius: var(--radius-sm); }
}

.table-order-controls { display: none; }
.list-pagination { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: space-between; padding: var(--s-3) var(--s-4); }
.list-pagination > span { color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.operator-app [data-paged-list] tr[hidden] { display: none !important; }
@media (max-width: 760px) {
  .operator-app .list-pagination { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-1); padding: var(--s-3); }
  .operator-app .list-pagination > span { font-size: var(--t-xs); text-align: center; }
  .operator-app .list-pagination .button { font-size: var(--t-sm); padding: var(--s-2); }
  .operator-app .table-order-controls { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
  .operator-app td:has(.table-order-controls) > .unit-drag-handle { display: none; }
  .operator-app .reservation-segments a { position: relative; }
  .operator-app :where(.reservation-signals, .reservation-payment > span) { position: relative; }
}

/* Vertical mobile planning uses the same claims and server forms as desktop. */
:root { --planboard-date-width: 48px; --planboard-day-height: 80px; --planboard-phone-width: 560px; --planboard-min-height: 400px; }
.vertical-planboard[hidden] { display: none; }
.has-vertical-planboard .planboard-card > :not(.vertical-planboard) { display: none !important; }
.has-vertical-planboard .planboard-card { overflow: hidden; max-width: var(--planboard-phone-width); margin-inline: auto; }
.has-vertical-planboard .page--wide { padding: var(--s-2); }
.vertical-planboard { display: flex; flex-direction: column; height: calc(100dvh - var(--topbar) - var(--s-4)); min-height: var(--planboard-min-height); }
.vertical-planboard__toolbar { display: grid; grid-template-columns: var(--s-8) minmax(0, 1fr) auto var(--s-8); gap: var(--s-1); align-items: center; padding: var(--s-1) var(--s-2); }
.vertical-planboard__toolbar input { width: 100%; min-width: 0; }
.vertical-planboard__toolbar .button { padding-inline: var(--s-2); }
.vertical-planboard__places { display: grid; grid-template-columns: var(--s-8) minmax(0, 1fr) var(--s-8); gap: var(--s-1); padding: 0 var(--s-2) var(--s-1); }
.vertical-planboard__places select { min-width: 0; width: 100%; font-size: var(--t-xs); }
.vertical-planboard .icon-button { width: var(--s-12); height: var(--s-12); font-size: var(--t-xl); }
/* Compact navigation is deliberately smaller than full-size mobile form controls. */
.has-vertical-planboard :is(.vertical-planboard__toolbar, .vertical-planboard__places) :is(input, select, .button, .icon-button) { height: var(--s-8); min-height: var(--s-8); padding-block: 0; }
.has-vertical-planboard :is(.vertical-planboard__toolbar, .vertical-planboard__places) .icon-button { width: var(--s-8); min-width: var(--s-8); background: transparent; border-color: transparent; box-shadow: none; }
.has-vertical-planboard .vertical-planboard__toolbar .button { font-size: var(--t-xs); white-space: nowrap; }
.has-vertical-planboard :is(.vertical-planboard__toolbar input, .vertical-planboard__places select) { font-size: var(--t-lg); padding-inline: var(--s-2); }
.vertical-planboard__hint { display: none; }
.vertical-planboard__scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--border); touch-action: pan-x pan-y pinch-zoom; scrollbar-width: thin; overflow-anchor: none; }
.vertical-planboard__grid { display: grid; grid-template-columns: var(--planboard-date-width) repeat(var(--planboard-place-count, 5), var(--planboard-place-width)); grid-template-rows: var(--s-12) repeat(var(--planboard-date-count, 85), var(--planboard-day-height)); isolation: isolate; }
.vertical-planboard__corner, .vertical-planboard__place { position: sticky; top: 0; z-index: 4; background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: var(--s-1); min-width: 0; }
.vertical-planboard__corner { font-size: var(--t-xs); color: var(--muted); }
.vertical-planboard__place strong { font-size: var(--t-xs); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vertical-planboard__date { background: var(--surface); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding-top: var(--s-2); }
.vertical-planboard__date span { font-size: var(--t-xs); color: var(--muted); }
.vertical-planboard__date strong { font-size: var(--t-lg); }
.vertical-planboard__cell { border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); padding: 0; min-width: 0; touch-action: pan-x pan-y pinch-zoom; }
.vertical-planboard__grid .is-weekend { background: var(--sunken); }
.vertical-planboard__cell:focus-visible { outline: 2px solid var(--accent-border); outline-offset: -2px; }
.vertical-planboard__cell.is-selected { background: var(--accent-soft-strong); box-shadow: inset 2px 0 var(--accent-border), inset -2px 0 var(--accent-border); }
.vertical-planboard__cell.is-anchor { background: var(--accent-soft-strong); box-shadow: inset 0 0 0 2px var(--accent-border); }
.vertical-planboard__cell.is-endpoint { box-shadow: inset 0 3px var(--accent-border); }
.vertical-planboard__claim { z-index: 2; margin: var(--s-1); border: 0; border-radius: var(--radius-sm); background: var(--claim-confirmed); color: var(--claim-text); min-width: 0; min-height: 0; text-align: left; padding: var(--s-2); align-self: stretch; display: flex; flex-direction: column; gap: var(--s-1); overflow: hidden; touch-action: pan-x pan-y pinch-zoom; }
.vertical-planboard__claim strong { color: inherit; font-size: var(--t-sm); overflow-wrap: anywhere; }
.vertical-planboard__claim span, .vertical-planboard__claim small { font-size: var(--t-xs); }
.vertical-planboard__claim small { margin-top: auto; }
.vertical-planboard__claim.is-short span { display: block; }
.vertical-planboard__claim.is-short strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vertical-planboard__claim:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 1px; }
.vertical-planboard__claim--option { background: var(--claim-option); }
.vertical-planboard__claim--request { background: var(--claim-request); color: var(--claim-request-text); }
.vertical-planboard__claim--overdue { background: var(--claim-overdue); }
.vertical-planboard__claim--manual-block { background: var(--claim-manual-block); }
.vertical-planboard__claim--ical { background: var(--claim-ical); }
.vertical-planboard__claim--payment-hold { background: var(--claim-hold); }
.vertical-planboard__claim.is-moving { outline: 2px dashed var(--accent-border); outline-offset: 1px; opacity: .65; }
.vertical-planboard__footer { border-top: 1px solid var(--border); padding: var(--s-2) var(--s-3); background: var(--surface); font-size: var(--t-xs); }
.vertical-planboard__footer p { margin: 0; color: var(--muted); }
.vertical-planboard__footer .is-error { color: var(--red-tone-text); }
.vertical-planboard__footer:has([data-vp-selection][hidden]):has([data-vp-status]:empty):has([data-vp-retry][hidden]) { display: none; }
.vertical-planboard__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.vertical-planboard__actions .button { flex: 1; padding: var(--s-2); white-space: normal; }
.vertical-planboard__dialog { width: calc(100% - var(--s-6)); max-width: var(--planboard-phone-width); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.vertical-planboard__dialog::backdrop { background: var(--dialog-overlay); }
.vertical-planboard__dialog header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.vertical-planboard__dialog h2 { font-size: var(--t-xl); margin: 0; }
.vertical-planboard__dialog p { margin-top: var(--s-2); }
html.planboard-standalone.has-vertical-planboard .vertical-planboard { height: 100dvh; }

/* Quiet mobile planning: the month and reservations carry the hierarchy. */
.has-vertical-planboard :is(.vertical-planboard__toolbar input, .vertical-planboard__places select, .vertical-planboard__toolbar .button) { border-color: transparent; box-shadow: none; background-color: transparent; }
.vertical-planboard__month { padding: var(--s-1) var(--s-3) var(--s-2); font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
.vertical-planboard__claim { padding: var(--s-1); }
.vertical-planboard__claim strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vertical-planboard__claim span { line-height: 1.25; }

.vertical-planboard__claim time { white-space: nowrap; }

.vertical-planboard__grid { width: calc(var(--planboard-date-width) + var(--planboard-place-count, 5) * var(--planboard-place-width)); }
.vertical-planboard__date { position: sticky; left: 0; z-index: 3; }
.vertical-planboard__corner { left: 0; z-index: 5; }
.vertical-planboard__place { flex-direction: column; align-items: stretch; }
.vertical-planboard__place strong { display: block; white-space: nowrap; text-overflow: ellipsis; }

/* Aanraakschermen: 16px velden tegen de iOS-focuszoom en 44px-rijen rond
   kaatshaken. Het platform-admin-scherm heeft geen .operator-app-klasse,
   dus deze regels staan los en met lage specificiteit. */
@media (pointer: coarse) {
  :where(.workspace, .sidebar) :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) { font-size: var(--t-lg); }
  .switch-field, .choice-list label, .radio-cards label, .report-option, .report-scope__all, .check-row span { align-items: center; min-height: 44px; }
  label:has(> input:is([type="checkbox"], [type="radio"])) { align-items: center; min-height: 44px; }
  .unit-drag-handle { height: 44px; width: 44px; }
}

.choice-list input[type="number"] { width: var(--field-short-width); min-height: var(--s-12); flex-shrink: 0; }

/* Short numeric inputs keep their labels and explanatory text at normal width. */
.field .input--short { max-width: min(100%, var(--field-short-width)); }

.security-deposit .switch-field { min-height: var(--s-12); }

/* Persistent booking work lives in a compact, keyboard-accessible disclosure. */
.notification-menu { position: relative; flex-shrink: 0; }
.notification-menu > summary { align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; display: flex; gap: var(--s-1); justify-content: center; list-style: none; min-height: var(--s-12); min-width: var(--s-12); padding: var(--s-2); }
.notification-menu > summary::-webkit-details-marker { display: none; }
.notification-menu > summary:hover, .notification-menu[open] > summary { background: var(--sunken); }
.notification-menu > summary svg { height: 20px; width: 20px; }
.notification-menu__count { background: var(--warning-bg); border-radius: 999px; color: var(--warning-text); font-size: var(--t-xs); font-weight: 700; padding: 0 var(--s-1); }
.notification-menu__panel { background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); max-height: calc(100dvh - var(--topbar) - var(--s-8)); overflow: auto; overscroll-behavior: contain; padding: var(--s-4); position: absolute; right: 0; top: calc(100% + var(--s-2)); width: min(400px, calc(100vw - var(--s-6))); }
.notification-menu__panel h2 { font-size: var(--t-lg); margin: 0; }
.notification-menu__panel p { font-size: var(--t-sm); margin: var(--s-2) 0 var(--s-3); }
.notification-menu__panel ul { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.notification-menu__panel li + li { border-top: 1px solid var(--border); }
.notification-menu__item > a, .notification-menu__item > div { border-radius: var(--radius-sm); color: var(--text); display: grid; gap: var(--s-1); overflow-wrap: anywhere; padding: var(--s-3) var(--s-2); text-decoration: none; }
.notification-menu__panel li a:hover { background: var(--sunken); }
.notification-menu__item strong { font-size: var(--t-sm); }
.notification-menu__item span { color: var(--muted); font-size: var(--t-sm); }
@media (max-width: 760px) {
  .notification-menu__panel { position: fixed; right: var(--s-3); top: calc(var(--topbar) + env(safe-area-inset-top, 0px) + var(--s-2)); }
}

.notification-menu__item--warn strong { color: var(--warning-text); }
.notification-menu__item--bad strong { color: var(--red-tone-text); }