/* StayBooking Design System - from docs/staybooking-ui-guidelines-preview.html */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* ================================================================
   StayBooking Design System Preview
   Semantic tokens (light / dark) mapped to existing wb-* classes
   ================================================================ */

body.wb-ui, body.wb-ui-scheme-light, .wb-booking {
  --brand-primary: #005FF9;
  --brand-secondary: #001A3F;
  --brand-tertiary: #636576;

  --text-primary: #0B1F3A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-disabled: #94A3B8;
  --text-link: #005FF9;
  --text-on-primary: #FFFFFF;
  --text-on-dark: #FFFFFF;

  --bg-page: #F7F9FC;
  --bg-surface: #FFFFFF;
  --bg-surface-secondary: #F1F5F9;
  --bg-surface-tertiary: #E8EEF5;
  --bg-elevated: #FFFFFF;
  --bg-disabled: #EEF2F6;
  --bg-overlay: rgba(0,26,63,.55);

  --action-primary: #005FF9;
  --action-primary-hover: #0052D6;
  --action-primary-pressed: #0044B3;
  --action-primary-disabled: #B8D1FA;
  --focus-ring-primary: rgba(0,95,249,.28);

  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-hover: #F0F6FF;
  --btn-secondary-pressed: #E0ECFF;
  --btn-secondary-border: #005FF9;
  --btn-secondary-text: #005FF9;

  --btn-ghost-hover: #F0F6FF;
  --btn-ghost-pressed: #E0ECFF;
  --btn-ghost-text: #475569;
  --btn-ghost-border: transparent;

  --btn-danger-bg: #FFFFFF;
  --btn-danger-border: #D92D20;
  --btn-danger-text: #B42318;
  --btn-danger-hover-bg: #FFF1F0;
  --btn-danger-filled: #D92D20;
  --btn-danger-filled-hover: #B42318;

  --input-bg: #FFFFFF;
  --input-border: #CBD5E1;
  --input-border-hover: #94A3B8;
  --input-border-focus: #005FF9;
  --input-focus-ring: rgba(0,95,249,.18);
  --input-placeholder: #64748B;
  --input-error: #D92D20;

  --border-subtle: #E2E8F0;
  --border-default: #CBD5E1;
  --border-strong: #94A3B8;
  --divider: #E5EAF0;
  --border-brand: #005FF9;

  --icon-primary: #0B1F3A;
  --icon-secondary: #64748B;
  --icon-brand: #005FF9;

  --success-main: #16803C;
  --success-bg: #ECFDF3;
  --success-border: #ABEFC6;
  --success-text: #166534;

  --warning-main: #B45309;
  --warning-bg: #FFF7E8;
  --warning-border: #FED7AA;
  --warning-text: #92400E;

  --error-main: #D92D20;
  --error-bg: #FFF1F0;
  --error-border: #FECDCA;
  --error-text: #B42318;

  --cal-occupied-bg: #FFF8E5;
  --cal-occupied-border: #FED7AA;
  --cal-occupied-text: var(--text-secondary);
  --cal-blocked-bg: #FCE8E8;
  --cal-blocked-border: #FECDCA;
  --cal-blocked-text: var(--text-secondary);

  --info-bg: #EAF2FF;
  --info-text: #0044B3;

  --selection-hover: #F0F6FF;
  --selection-bg: #E0ECFF;
  --selection-text: #0044B3;
  --selection-border: #005FF9;
  --selection-pressed: #CADFFF;

  --step-done-bg: #ECFDF3;
  --step-done-text: #166534;
  --step-done-border: #ABEFC6;
  --step-active-bg: #005FF9;
  --step-active-text: #FFFFFF;
  --step-pending-bg: #F1F5F9;
  --step-pending-text: #64748B;

  --field-label: #334155;
  --field-required: #D92D20;

  --badge-brand-bg: color-mix(in srgb, var(--brand-primary) 10%, var(--bg-surface));
  --badge-brand-text: color-mix(in srgb, var(--brand-primary) 80%, #001A3F);
  --badge-brand-border: color-mix(in srgb, var(--brand-primary) 22%, var(--border-default));
  --table-header-text: #334155;
  --table-row-hover: #F5F8FC;
  --table-row-selected: #EAF2FF;

  --rating: #F59E0B;

  --skeleton-base: #E8EDF3;
  --skeleton-highlight: #F5F7FA;

  --scrim-light: rgba(0,26,63,.35);
  --scrim-strong: rgba(0,15,35,.60);

  --shadow-sm: 0 1px 2px rgba(11,31,58,.04);
  --shadow-md: 0 8px 24px rgba(11,31,58,.08);
  --shadow-lg: 0 16px 40px rgba(11,31,58,.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale */
  --text-display-size: 2.25rem;
  --text-display-weight: 700;
  --text-display-leading: 1.15;
  --text-display-tracking: -0.025em;

  --text-h1-size: 1.75rem;
  --text-h2-size: 1.375rem;
  --text-h3-size: 1.125rem;
  --text-h4-size: 1rem;
  --text-body-lg-size: 1rem;
  --text-body-size: 0.9375rem;
  --text-body-sm-size: 0.8125rem;
  --text-caption-size: 0.75rem;
  --text-overline-size: 0.6875rem;
  --text-label-size: 0.8125rem;

  /* Button sizes */
  --btn-height-xs: 28px;
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-height-xl: 56px;

  /* Shared control height — inputs, selects, adjacent action buttons */
  --control-height: 42px;

  /* Compact toolbar rows (wb-toolbar) — match btn-height-sm, not control-height */
  --toolbar-control-height: var(--btn-height-sm);

  /* Breakpoints (reference — use in @media / @container; not valid as var() in media queries) */
  --bp-xs: 480px;   /* Admin: summary strip 1-col */
  --bp-sm: 540px;   /* Frontend: field-row stack */
  --bp-md: 768px;   /* Room grid, cal overview */
  --bp-admin: 782px;/* wp-admin mobile (WordPress) */
  --bp-lg: 860px;   /* Frontend: booking sidebar stack */
  --bp-xl: 960px;   /* Admin: filter grids, overview 1-col */
  --bp-2xl: 1200px; /* Admin: overview 2-col tweak */
  --bp-3xl: 1400px; /* Admin: summary strip 10-col */

  --toggle-track-off: #CBD5E1;
  --toggle-track-on: var(--action-primary);
  --toggle-thumb: #FFFFFF;
  --tooltip-bg: #0B1F3A;
  --tooltip-fg: #FFFFFF;

  /* Native control icons — light surfaces need dark strokes */
  --icon-date-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3.5' width='12' height='10.5' rx='1.25' stroke='%2364748B' stroke-width='1.5'/%3E%3Cpath stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' d='M2 7h12M5.5 2v2M10.5 2v2'/%3E%3C/svg%3E");
  --icon-time-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.75' stroke='%2364748B' stroke-width='1.5'/%3E%3Cpath stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E");
  --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%2364748B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.25' stroke='%2364748B' stroke-width='1.5'/%3E%3Cpath stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' d='M10.5 10.5L14 14'/%3E%3C/svg%3E");
}

body.wb-ui-scheme-dark {
  --brand-primary: #4D8FFF;
  --brand-secondary: #8DB9FF;
  --brand-tertiary: #AEB1BF;

  --text-primary: #F5F8FC;
  --text-secondary: #C4CBD6;
  --text-tertiary: #929CAB;
  --text-disabled: #667085;
  --text-link: #6EA1FF;

  --bg-page: #07111F;
  --bg-surface: #0D1A2B;
  --bg-surface-secondary: #142338;
  --bg-surface-tertiary: #1B2B42;
  --bg-elevated: #17263A;
  --bg-disabled: #1A2636;
  --bg-overlay: rgba(0,0,0,.70);

  --action-primary: #2875FF;
  --action-primary-hover: #4D8FFF;
  --action-primary-pressed: #1764E8;
  --action-primary-disabled: #294467;
  --focus-ring-primary: rgba(110,161,255,.28);

  --btn-secondary-bg: #0D1A2B;
  --btn-secondary-hover: #162B48;
  --btn-secondary-pressed: #1B365D;
  --btn-secondary-border: #6EA1FF;
  --btn-secondary-text: #8DB9FF;

  --btn-ghost-hover: #142B49;
  --btn-ghost-pressed: #19385F;
  --btn-ghost-text: #C4CBD6;
  --btn-ghost-border: transparent;

  --btn-danger-bg: #0D1A2B;
  --btn-danger-border: #FF746B;
  --btn-danger-text: #FDA29B;
  --btn-danger-hover-bg: #321817;
  --btn-danger-filled: #D92D20;
  --btn-danger-filled-hover: #FF746B;

  --input-bg: #0D1A2B;
  --input-border: #39485C;
  --input-border-hover: #5A687B;
  --input-border-focus: #6EA1FF;
  --input-focus-ring: rgba(110,161,255,.22);
  --input-placeholder: #929CAB;
  --input-error: #FF746B;

  --border-subtle: #26364A;
  --border-default: #39485C;
  --border-strong: #59697E;
  --divider: #253449;
  --border-brand: #6EA1FF;

  --icon-primary: #F5F8FC;
  --icon-secondary: #A8B2C1;
  --icon-brand: #6EA1FF;

  --success-main: #4ADE80;
  --success-bg: #102A1C;
  --success-border: #245E3A;
  --success-text: #86EFAC;

  --warning-main: #FBBF24;
  --warning-bg: #30230C;
  --warning-border: #6A4B12;
  --warning-text: #FCD34D;

  --error-main: #FF746B;
  --error-bg: #321817;
  --error-border: #73302C;
  --error-text: #FDA29B;

  --cal-occupied-bg: color-mix(in srgb, var(--warning-main) 24%, var(--bg-surface));
  --cal-occupied-border: color-mix(in srgb, var(--warning-main) 40%, var(--border-default));
  --cal-occupied-text: var(--text-secondary);
  --cal-blocked-bg: color-mix(in srgb, var(--error-main) 22%, var(--bg-surface));
  --cal-blocked-border: color-mix(in srgb, var(--error-main) 35%, var(--border-default));
  --cal-blocked-text: var(--text-secondary);

  --info-bg: #132D52;
  --info-text: #8DB9FF;

  --selection-hover: #142B49;
  --selection-bg: #17355D;
  --selection-text: #A9C8FF;
  --selection-border: #6EA1FF;
  --selection-pressed: #1D4272;

  --step-done-bg: #102A1C;
  --step-done-text: #86EFAC;
  --step-done-border: #245E3A;
  --step-active-bg: #2875FF;
  --step-active-text: #FFFFFF;
  --step-pending-bg: #142338;
  --step-pending-text: #929CAB;

  --field-label: #DCE3EC;
  --field-required: #FF746B;

  --badge-brand-bg: color-mix(in srgb, var(--brand-primary) 16%, var(--bg-surface));
  --badge-brand-text: color-mix(in srgb, var(--brand-primary) 55%, #FFFFFF);
  --badge-brand-border: color-mix(in srgb, var(--brand-primary) 32%, var(--border-default));

  --table-header-bg: #142338;
  --table-header-text: #DCE3EC;
  --table-row-hover: #13243A;
  --table-row-selected: #17335A;

  --skeleton-base: #1A2A3E;
  --skeleton-highlight: #26384E;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 8px 28px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.45);

  --toggle-track-off: #334155;
  --toggle-track-on: var(--action-primary);
  --toggle-thumb: #F5F8FC;
  --tooltip-bg: #EEF0F4;
  --tooltip-fg: #0B1F3A;

  --icon-date-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3.5' width='12' height='10.5' rx='1.25' stroke='%23A8B2C1' stroke-width='1.5'/%3E%3Cpath stroke='%23A8B2C1' stroke-width='1.5' stroke-linecap='round' d='M2 7h12M5.5 2v2M10.5 2v2'/%3E%3C/svg%3E");
  --icon-time-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.75' stroke='%23A8B2C1' stroke-width='1.5'/%3E%3Cpath stroke='%23A8B2C1' stroke-width='1.5' stroke-linecap='round' d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E");
  --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23A8B2C1' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.25' stroke='%23A8B2C1' stroke-width='1.5'/%3E%3Cpath stroke='%23A8B2C1' stroke-width='1.5' stroke-linecap='round' d='M10.5 10.5L14 14'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-body-size);
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }

/* Layout */
.ds-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 960px) { .ds-shell { grid-template-columns: minmax(0, 1fr); } }

.ds-sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--bg-surface); border-right: 1px solid var(--border-subtle);
  padding: 1.25rem 1rem;
}
@media (max-width: 960px) {
  .ds-sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
}

.ds-brand { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.ds-brand__mark {
  width: 36px; height: 36px; flex-shrink: 0;
  background: transparent; display: block;
}
.ds-brand__title { margin: 0; font-size: 1rem; color: var(--text-primary); font-weight: 700; }
.ds-brand__sub { margin: 0; font-size: .75rem; color: var(--text-tertiary); }

.ds-nav { list-style: none; padding: 0; margin: 1rem 0 0; }
.ds-nav a {
  display: block; padding: .4rem .65rem; border-radius: var(--radius-sm);
  color: var(--text-secondary); text-decoration: none; font-size: .875rem;
}
.ds-nav a:hover { background: var(--selection-hover); color: var(--text-link); }

.ds-main { padding: 1.5rem 2rem 4rem; max-width: 1100px; min-width: 0; }
@media (max-width: 540px) { .ds-main { padding: 1rem; } }

.ds-toolbar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-bottom: 1.5rem; padding: 1rem; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.ds-toolbar label { font-size: .8rem; color: var(--text-tertiary); display: flex; flex-direction: column; gap: .25rem; }
.ds-toolbar .wb-select { min-width: min(120px, 100%); }
.ds-toolbar input[type="color"] {
  width: 42px; height: 42px; padding: .2rem; cursor: pointer;
  border: 1.5px solid var(--input-border); border-radius: var(--radius-md);
  background: var(--input-bg);
}
.ds-toolbar input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ds-toolbar input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-md) - 3px); }

.ds-section { margin-bottom: 3rem; scroll-margin-top: 1rem; min-width: 0; }
.ds-section__head { margin-bottom: 1.25rem; }
.ds-section__head h2 { margin: 0 0 .35rem; color: var(--text-primary); font-size: var(--text-h2-size); font-weight: 700; letter-spacing: -0.015em; }
.ds-section__head p { margin: 0; color: var(--text-tertiary); font-size: var(--text-body-sm-size); max-width: 62ch; line-height: 1.5; }

.ds-panel {
  background: var(--bg-surface); border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
  border-radius: var(--radius-lg); padding: 1.35rem; margin-bottom: 1rem;
  box-shadow: var(--shadow-sm); min-width: 0; overflow: visible;
}
.ds-panel--inset {
  background: var(--bg-surface-secondary); border-color: var(--border-subtle);
  box-shadow: none;
}
.ds-panel__label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-tertiary); margin: 0 0 .75rem;
}

.ds-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.ds-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .75rem; }
.ds-row { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }

/* Typography scale */
.wb-text-display {
  font-size: var(--text-display-size); font-weight: var(--text-display-weight);
  line-height: var(--text-display-leading); letter-spacing: var(--text-display-tracking);
  color: var(--text-primary);
}
.wb-text-h1 { font-size: var(--text-h1-size); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); margin: 0; }
.wb-text-h2 { font-size: var(--text-h2-size); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--text-primary); margin: 0; }
.wb-text-h3 { font-size: var(--text-h3-size); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-primary); margin: 0; }
.wb-text-h4 { font-size: var(--text-h4-size); font-weight: 600; line-height: 1.35; color: var(--text-primary); margin: 0; }
.wb-text-body-lg { font-size: var(--text-body-lg-size); line-height: 1.55; color: var(--text-secondary); }
.wb-text-body { font-size: var(--text-body-size); line-height: 1.55; color: var(--text-secondary); }
.wb-text-body-sm { font-size: var(--text-body-sm-size); line-height: 1.5; color: var(--text-secondary); }
.wb-text-caption { font-size: var(--text-caption-size); line-height: 1.45; color: var(--text-tertiary); }
.wb-text-overline {
  font-size: var(--text-overline-size); font-weight: 600; line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary);
}
.wb-text-label { font-size: var(--text-label-size); font-weight: 500; line-height: 1.4; color: var(--field-label); }

.ds-type-scale { display: grid; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-type-scale__row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) 100px;
  gap: 1rem; align-items: baseline; padding: .85rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ds-type-scale__row:last-child { border-bottom: 0; }
.ds-type-scale__token { font-family: ui-monospace, monospace; font-size: .72rem; color: var(--text-tertiary); }
.ds-type-scale__size { font-size: .72rem; color: var(--text-tertiary); text-align: right; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-link { color: var(--text-link); text-decoration: none; font-weight: 500; }
.text-link:hover { text-decoration: underline; }
h1,h2,h3,h4,h5,h6 { color: var(--text-primary); }

/* Swatches */
.swatch {
  border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-subtle);
}
.swatch__color { height: 56px; }
.swatch__meta { padding: .5rem .65rem; background: var(--bg-surface-secondary); font-size: .75rem; }
.swatch__meta strong { display: block; color: var(--text-primary); }
.swatch__meta span { color: var(--text-tertiary); font-family: ui-monospace, monospace; }

/* Buttons — modern flat style with clear press feedback */
.wb-btn[hidden], .button[hidden] { display: none !important; }
.wb-btn, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border-radius: var(--radius-md); padding: 0 1rem; font-family: inherit; font-weight: 600;
  font-size: var(--text-body-sm-size); line-height: 1; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease, transform .08s ease;
  min-height: var(--btn-height-md);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wb-btn:focus-visible, .button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--focus-ring-primary);
}

.wb-btn--primary, .button-primary {
  background: var(--action-primary); color: var(--text-on-primary);
  border-color: var(--action-primary);
}
.wb-btn--primary:hover:not(:disabled), .button-primary:hover:not(:disabled) {
  background: var(--action-primary-hover); border-color: var(--action-primary-hover);
}
.wb-btn--primary:active:not(:disabled),
.wb-btn--primary.is-pressed:not(:disabled) {
  background: var(--action-primary-pressed); border-color: var(--action-primary-pressed);
  transform: scale(0.97); box-shadow: none;
}
.wb-btn--primary:disabled {
  background: var(--action-primary-disabled); border-color: var(--action-primary-disabled);
  color: color-mix(in srgb, var(--text-on-primary) 70%, transparent);
  box-shadow: none; cursor: not-allowed; transform: none;
}

.wb-btn--secondary, .button-secondary {
  background: var(--btn-secondary-bg); color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.wb-btn--secondary:hover:not(:disabled) { background: var(--btn-secondary-hover); }
.wb-btn--secondary:active:not(:disabled),
.wb-btn--secondary.is-pressed:not(:disabled) {
  background: var(--btn-secondary-pressed); transform: scale(0.97);
}
.wb-btn--secondary:disabled, .button-secondary:disabled {
  background: var(--bg-disabled); color: var(--text-disabled);
  border-color: var(--border-subtle); box-shadow: none;
  cursor: not-allowed; transform: none;
}
.wb-btn.is-disabled,
a.wb-btn.is-disabled {
  background: var(--bg-disabled); color: var(--text-disabled);
  border-color: var(--border-subtle); box-shadow: none;
  cursor: not-allowed; transform: none; pointer-events: none;
}

.wb-btn--ghost, .button-ghost {
  background: transparent; color: var(--btn-ghost-text);
  border-color: var(--btn-ghost-border); font-weight: 500;
}
.wb-btn--ghost:hover:not(:disabled) {
  background: var(--btn-ghost-hover); color: var(--text-link);
}
.wb-btn--ghost:active:not(:disabled),
.wb-btn--ghost.is-pressed:not(:disabled) {
  background: var(--btn-ghost-pressed); transform: scale(0.97);
}
.wb-btn--ghost:disabled, .button-ghost:disabled {
  background: var(--bg-disabled); color: var(--text-disabled);
  border-color: var(--border-subtle); box-shadow: none;
  cursor: not-allowed; transform: none;
}

.wb-btn--danger {
  background: var(--btn-danger-bg); color: var(--btn-danger-text);
  border-color: var(--btn-danger-border);
}
.wb-btn--danger:hover:not(:disabled) { background: var(--btn-danger-hover-bg); }
.wb-btn--danger:active:not(:disabled),
.wb-btn--danger.is-pressed:not(:disabled) { transform: scale(0.97); background: var(--btn-danger-hover-bg); }
.wb-btn--danger.wb-btn--filled {
  background: var(--btn-danger-filled); border-color: var(--btn-danger-filled); color: #fff;
}
.wb-btn--danger.wb-btn--filled:active:not(:disabled),
.wb-btn--danger.wb-btn--filled.is-pressed:not(:disabled) {
  background: var(--btn-danger-filled-hover); transform: scale(0.97);
}

.wb-btn--block { width: 100%; }
.wb-btn--xs { min-height: var(--btn-height-xs); padding: 0 .6rem; font-size: var(--text-caption-size); border-radius: 6px; }
.wb-btn--sm { min-height: var(--btn-height-sm); padding: 0 .75rem; font-size: var(--text-body-sm-size); }
.wb-btn--lg { min-height: var(--btn-height-lg); padding: 0 1.35rem; font-size: var(--text-body-size); border-radius: var(--radius-md); }
.wb-btn--xl { min-height: var(--btn-height-xl); padding: 0 1.75rem; font-size: var(--text-body-lg-size); border-radius: var(--radius-md); font-weight: 700; }

.wb-btn .dashicons,
.button .dashicons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
}

.wb-btn .dashicons::before,
.button .dashicons::before {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
  display: block;
}

.wb-btn--sm .dashicons,
.wb-btn--sm .dashicons::before,
.button.button-small .dashicons,
.button.button-small .dashicons::before {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.wb-btn--lg .dashicons,
.wb-btn--lg .dashicons::before {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.wb-btn--xl .dashicons,
.wb-btn--xl .dashicons::before {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

/* Icon color hierarchy — tokens: --icon-primary, --icon-secondary, --icon-brand */
body.wb-ui :is(
  .wb-legend__title,
  .wb-tableau-section__title,
  .wb-currency-converter__title,
  .wb-finance-overview__title,
  .wb-booking-search__title,
  .wb-room-occupancy__title,
  .wb-avail-check__title,
  .wb-widget__title
) .dashicons,
.wrap.wb-admin :is(
  .wb-legend__title,
  .wb-tableau-section__title,
  .wb-currency-converter__title,
  .wb-finance-overview__title,
  .wb-booking-search__title,
  .wb-room-occupancy__title,
  .wb-avail-check__title,
  .wb-widget__title
) .dashicons {
  color: var(--icon-primary);
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

body.wb-ui :is(
  .wb-legend__title,
  .wb-tableau-section__title,
  .wb-currency-converter__title,
  .wb-finance-overview__title,
  .wb-booking-search__title,
  .wb-room-occupancy__title,
  .wb-avail-check__title,
  .wb-widget__title
) .wb-icon,
.wrap.wb-admin :is(
  .wb-legend__title,
  .wb-tableau-section__title,
  .wb-currency-converter__title,
  .wb-finance-overview__title,
  .wb-booking-search__title,
  .wb-room-occupancy__title,
  .wb-avail-check__title,
  .wb-widget__title
) .wb-icon {
  color: var(--icon-primary);
}

.wb-btn--control-height {
  height: var(--control-height, 42px);
  min-height: var(--control-height, 42px);
  box-sizing: border-box;
}

.ds-size-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; }
.ds-size-matrix { display: grid; gap: .65rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-size-matrix__head, .ds-size-matrix__row {
  display: grid; grid-template-columns: 100px repeat(3, minmax(100px, 1fr));
  gap: .75rem; align-items: center;
}
.ds-size-matrix__head {
  font-size: var(--text-caption-size); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-tertiary); padding-bottom: .35rem;
  border-bottom: 1px solid var(--border-subtle);
}
.ds-size-matrix__label { font-size: var(--text-caption-size); color: var(--text-tertiary); font-family: ui-monospace, monospace; }
.ds-state-demo {
  display: flex; flex-wrap: wrap; gap: .65rem; padding: 1rem;
  background: var(--bg-surface-secondary); border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.ds-state-demo__hint { width: 100%; font-size: var(--text-caption-size); color: var(--text-tertiary); margin: 0 0 .25rem; }

/* Action bar — groups related buttons with clear hierarchy */
.wb-action-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--divider);
}
.wb-action-bar__start, .wb-action-bar__end { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wb-action-bar__end { margin-left: auto; }
.wb-action-bar__danger-zone {
  display: flex; gap: .5rem; padding-right: .75rem; margin-right: .75rem;
  border-right: 1px solid var(--divider);
}

/* Specimen labels for design review */
.ds-specimen { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.ds-specimen__tag {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-tertiary); font-weight: 600;
  line-height: 1.3; max-width: 100%;
}

/* Form fields — labels readable; states visually distinct */
.wb-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .85rem; }
.wb-field > span:first-child {
  font-size: .875rem; font-weight: 500; color: var(--field-label);
}
.wb-field__required { color: var(--field-required); margin-left: .15rem; }
.wb-field__hint { font-size: .78rem; color: var(--text-tertiary); margin-top: -.15rem; }
.wb-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wb-field select,
.wb-field textarea {
  width: 100%; max-width: 100%; min-width: 0;
  background: var(--input-bg); color: var(--text-primary);
  border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  font: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
}
.wb-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wb-field select {
  height: var(--control-height); min-height: var(--control-height);
  padding: 0 .75rem; line-height: 1.25;
}
.wb-field textarea {
  min-height: var(--control-height); padding: .65rem .75rem; line-height: 1.45;
}
.wb-field input::placeholder, .wb-field textarea::placeholder { color: var(--input-placeholder); }
.wb-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-field input::placeholder {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-field input:hover:not(:disabled), .wb-field select:hover:not(:disabled), .wb-field textarea:hover:not(:disabled) {
  border-color: var(--input-border-hover);
}
.wb-field input:focus, .wb-field select:focus, .wb-field textarea:focus {
  outline: none; border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.wb-field.is-error input, .wb-field.is-error select, .wb-field.is-error textarea,
.wb-field.is-error .wb-select__trigger,
.wb-field.is-error .wb-date-picker__trigger {
  border-color: var(--input-error); background: var(--error-bg);
}
.wb-select.is-error .wb-select__trigger,
.wb-occupancy__age-control.is-error .wb-select__trigger,
.wb-occupancy__age-control.is-error select:not(.wb-select__native) {
  border-color: var(--input-error); background: var(--error-bg);
}
.wb-field__error {
  display: flex; align-items: center; gap: .35rem;
  color: var(--error-text); font-size: .8rem; font-weight: 500;
}
.wb-field.is-disabled input, .wb-field.is-disabled select {
  background: var(--bg-disabled); color: var(--text-disabled);
  border-color: var(--border-subtle); cursor: not-allowed;
}
.wb-field--readonly input {
  background: var(--bg-surface-secondary); border-style: dashed;
  color: var(--text-secondary); cursor: default;
}
.wb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .wb-field-row { grid-template-columns: 1fr; } }
.wb-field--grow { flex: 1; min-width: 0; }

/* Modifier row — type select + percent/price value (LOS, seasons, coupons) */
.wb-modifier-row {
  display: flex; flex-wrap: wrap; gap: .65rem; align-items: center;
  max-width: min(100%, 26rem);
  container-type: inline-size;
  container-name: wb-modifier-row;
}
.wb-modifier-row__type {
  flex: 1 1 10rem; min-width: 0; margin-bottom: 0;
}
.wb-modifier-row__type .wb-select { width: 100%; min-width: 0; }
.wb-modifier-row__value { flex: 0 0 auto; min-width: 0; }
.wb-modifier-row .wb-price-input {
  min-height: var(--control-height); height: var(--control-height); max-width: 9rem;
}
@container wb-modifier-row (max-width: 360px) {
  .wb-modifier-row__type,
  .wb-modifier-row__value { flex: 1 1 100%; width: 100%; }
  .wb-modifier-row .wb-price-input { max-width: 100%; width: 100%; }
}

/* Extra tier rows — staffelpreise in extra editor */
.wb-extra-tiers {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.wb-extra-tier-row__time {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 14rem;
}
.wb-extra-tier-row__price {
  flex: 0 0 auto;
  min-width: 8rem;
}
.wb-input-action-row > .wb-extra-tier-row__remove {
  width: var(--control-height);
  min-width: var(--control-height);
  max-width: var(--control-height);
  padding: 0;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-secondary);
  color: var(--text-tertiary);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}
.wb-input-action-row > .wb-extra-tier-row__remove:hover:not(:disabled) {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}
.wb-input-action-row > .wb-extra-tier-row__remove:active:not(:disabled),
.wb-input-action-row > .wb-extra-tier-row__remove.is-pressed:not(:disabled) {
  transform: scale(0.92);
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}
.wb-extra-form__actions {
  margin: .85rem 0 0;
  padding: 0;
}
.wb-extra-form__overflow {
  margin-top: .85rem;
  max-width: 28rem;
}

/* Stacked pricing alternatives — e.g. package fixed total vs. discount % */
.wb-pricing-alternatives {
  display: flex; flex-direction: column; gap: .85rem;
  max-width: min(100%, 20rem);
}
.wb-pricing-alternatives .wb-field { margin-bottom: 0; }
.wb-pricing-alternatives .wb-price-input { align-self: flex-start; }

/* Input + button row — action buttons match control height */
.wb-input-action-row,
.wb-coupon-row {
  display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-end;
}
.wb-input-action-row .wb-field,
.wb-coupon-row .wb-field { flex: 1; margin-bottom: 0; min-width: 0; }
.wb-input-action-row > .wb-btn,
.wb-coupon-row > .wb-btn {
  height: var(--control-height); min-height: var(--control-height);
  align-self: flex-end; flex-shrink: 0;
  white-space: nowrap;
}

/* Mixed control row — select, input, date/time picker, button share one height (42px) */
.wb-control-row {
  display: flex; flex-wrap: wrap; gap: .65rem; align-items: center;
}
.wb-control-row--grid {
  display: grid; align-items: center;
}
.wb-control-row .wb-select,
.wb-control-row .wb-date-picker,
.wb-control-row .wb-time-picker,
.wb-control-row .wb-currency-picker,
.wb-control-row .wb-search-field,
.wb-control-row > label {
  min-width: 0;
}
.wb-control-row .wb-select__trigger,
.wb-control-row .wb-date-picker__trigger,
.wb-control-row .wb-time-picker__trigger,
.wb-control-row .wb-currency-picker__trigger,
.wb-control-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.wb-control-row select:not(.wb-select__native),
.wb-control-row > .wb-btn,
.wb-control-row > .button,
.wb-control-row > button[type="submit"],
.wb-input-action-row .wb-select__trigger,
.wb-input-action-row .wb-date-picker__trigger,
.wb-input-action-row .wb-time-picker__trigger,
.wb-input-action-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.wb-input-action-row select:not(.wb-select__native) {
  height: var(--control-height); min-height: var(--control-height); box-sizing: border-box;
}
.wb-control-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.wb-input-action-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-control-row input::placeholder,
.wb-input-action-row input::placeholder {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Compact toolbar — horizontal actions at btn-height-sm (32px), not control-height */
.wb-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--wb-space-sm, .5rem); align-items: center;
  padding: 12px 16px; background: var(--wb-toolbar-bg, var(--bg-surface-tertiary));
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  margin-bottom: var(--wb-space-md, 1rem);
}
.wb-toolbar form {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-sm, .5rem); margin: 0;
}
.wb-toolbar label {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: var(--text-body-sm-size); line-height: 1.3; white-space: nowrap;
}
.wb-toolbar .button,
.wb-toolbar .wb-btn,
.wb-toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.wb-toolbar select:not(.wb-select__native),
.wb-toolbar .wb-select__trigger {
  box-sizing: border-box;
  height: var(--toolbar-control-height, var(--btn-height-sm));
  min-height: var(--toolbar-control-height, var(--btn-height-sm));
  max-height: var(--toolbar-control-height, var(--btn-height-sm));
  margin: 0;
}
.wb-toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.wb-toolbar select:not(.wb-select__native) {
  padding: 0 .5rem; border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  background: var(--input-bg); color: var(--text-primary); font: inherit; font-size: var(--text-body-sm-size);
}
.wb-toolbar input.wb-input--narrow,
.wb-toolbar input[type="number"].wb-input--narrow {
  width: 3.75rem; min-width: 0; padding-inline: .35rem; text-align: center;
}
.wb-toolbar .button,
.wb-toolbar .wb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .75rem; line-height: 1.2; font-size: var(--text-body-sm-size);
}

.wb-control-row .wb-select__trigger,
.wb-control-row .wb-date-picker__trigger,
.wb-control-row .wb-time-picker__trigger,
.wb-control-row .wb-currency-picker__trigger,
.wb-input-action-row .wb-select__trigger,
.wb-input-action-row .wb-date-picker__trigger,
.wb-input-action-row .wb-time-picker__trigger {
  padding-top: 0; padding-bottom: 0;
}
.wb-coupon-row .wb-field input {
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* Search fields sit on secondary surface to separate from page content */
.wb-search-panel {
  background: var(--bg-surface-secondary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 1rem;
}

/* Native input icons — browser defaults stay dark on dark backgrounds */
.wb-field input[type="date"],
.wb-field input[type="time"],
.wb-field input[type="datetime-local"],
.wb-search input[type="date"],
.wb-search input[type="time"],
.ds-toolbar input[type="date"] {
  min-width: 0;
  color-scheme: light;
}
body.wb-ui-scheme-dark .wb-field input[type="date"],
body.wb-ui-scheme-dark .wb-field input[type="time"],
body.wb-ui-scheme-dark .wb-field input[type="datetime-local"],
body.wb-ui-scheme-dark .wb-search input[type="date"],
body.wb-ui-scheme-dark .wb-search input[type="time"],
body.wb-ui-scheme-dark .ds-toolbar input[type="date"] {
  color-scheme: dark;
}

.wb-field input[type="date"]::-webkit-calendar-picker-indicator,
.wb-field input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.wb-search input[type="date"]::-webkit-calendar-picker-indicator,
.ds-toolbar input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 4px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  opacity: 1;
  background: var(--icon-date-calendar) center / 16px 16px no-repeat;
  color: transparent;
}

.wb-field input[type="time"]::-webkit-calendar-picker-indicator,
.wb-search input[type="time"]::-webkit-calendar-picker-indicator {
  margin-left: 4px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  opacity: 1;
  background: var(--icon-time-clock) center / 16px 16px no-repeat;
  color: transparent;
}

.wb-field input[type="date"]::-webkit-datetime-edit,
.wb-search input[type="date"]::-webkit-datetime-edit {
  color: var(--text-primary);
}

.wb-field input[type="number"]::-webkit-outer-spin-button,
.wb-field input[type="number"]::-webkit-inner-spin-button,
.wb-search input[type="number"]::-webkit-outer-spin-button,
.wb-search input[type="number"]::-webkit-inner-spin-button {
  opacity: 1;
  filter: none;
}
body.wb-ui-scheme-dark .wb-field input[type="number"]::-webkit-outer-spin-button,
body.wb-ui-scheme-dark .wb-field input[type="number"]::-webkit-inner-spin-button,
body.wb-ui-scheme-dark .wb-search input[type="number"]::-webkit-outer-spin-button,
body.wb-ui-scheme-dark .wb-search input[type="number"]::-webkit-inner-spin-button {
  filter: invert(1) brightness(1.35);
}

.wb-field select,
.wb-search select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: var(--icon-select-chevron);
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: 16px;
}

/* Badges — wb-badge */
.wb-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  height: 24px; min-height: 24px; padding: 0 .55rem;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
  white-space: nowrap; flex-shrink: 0; box-sizing: border-box;
}
.wb-badge--status-confirmed { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.wb-badge--status-pending { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.wb-badge--status-cancelled { background: var(--error-bg); color: var(--error-text); border-color: var(--error-border); }
.wb-badge--status-checked_in { background: var(--info-bg); color: var(--info-text); border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--border-subtle)); }
.wb-badge--neutral { background: var(--bg-surface-secondary); color: var(--text-secondary); border-color: var(--border-default); }
.wb-badge--brand {
  background: var(--badge-brand-bg);
  color: var(--badge-brand-text);
  border-color: var(--badge-brand-border);
  padding-inline: .5rem .65rem;
  gap: .4rem;
}
.wb-badge--brand::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 25%, transparent);
  flex-shrink: 0;
}
.wb-badge--source-web { background: var(--bg-surface-tertiary); color: var(--text-secondary); border-color: var(--border-default); }
.wb-badge--warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.wb-badge--discount { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }

/* Alerts — icon badge + high-contrast title/body split */
.wb-alert {
  padding: .9rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid; border-left-width: 4px;
  display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem;
}
.wb-alert__icon {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
}
.wb-alert__icon .wb-icon { width: .85rem; height: .85rem; color: #fff; }
.wb-alert strong { display: block; color: var(--text-primary); margin-bottom: .15rem; }
.wb-alert--success { background: var(--success-bg); border-color: var(--success-border); border-left-color: var(--success-main); color: var(--success-text); }
.wb-alert--success .wb-alert__icon { background: var(--success-main); color: #fff; }
.wb-alert--warning { background: var(--warning-bg); border-color: var(--warning-border); border-left-color: var(--warning-main); color: var(--warning-text); }
.wb-alert--warning .wb-alert__icon { background: var(--warning-main); color: #fff; }
.wb-alert--danger, .wb-error { background: var(--error-bg); border-color: var(--error-border); border-left-color: var(--error-main); color: var(--error-text); }
.wb-alert--danger .wb-alert__icon { background: var(--error-main); color: #fff; }
.wb-alert--info { background: var(--info-bg); border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-subtle)); border-left-color: var(--brand-primary); color: var(--info-text); }
.wb-alert--info .wb-alert__icon { background: var(--brand-primary); color: #fff; }

/* Tabs — wb-tabs (single row; horizontal scroll when labels overflow).
   Divider + active bar use inset box-shadow so overflow-x:auto cannot clip them. */
.wb-tabs {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0;
  border-bottom: 0; margin-bottom: 1rem;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  scrollbar-gutter: stable; scrollbar-width: thin;
  box-shadow: inset 0 -1px 0 var(--divider);
}
.wb-scroll-hint:not(.has-h-scroll) > .wb-tabs {
  overflow: visible;
  scrollbar-gutter: auto;
}
.wb-tabs__tab {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: .65rem 1rem; background: transparent; border: 0;
  color: var(--text-tertiary); font: inherit; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-sizing: border-box; -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}
.wb-tabs__tab:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: -2px;
}
.wb-tabs__tab:hover { color: var(--text-secondary); background: var(--bg-surface-secondary); }
.wb-tabs__tab.is-active {
  color: var(--text-primary); font-weight: 700; background: transparent;
  box-shadow: inset 0 -2px 0 var(--brand-primary);
}

/* Sub-Tabs — wb-subtabs (secondary nav under one primary wb-tabs row). */
.wb-nav-stack { margin-bottom: 1rem; }
.wb-nav-stack > .wb-scroll-hint:first-child .wb-tabs { margin-bottom: 0; }
.wb-nav-stack__sub {
  background: var(--bg-surface-secondary);
  border-bottom: 1px solid var(--divider);
}
.wb-nav-stack__sub .wb-subtabs { margin-bottom: 0; }
.wb-subtabs {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0;
  border-bottom: 0; margin-bottom: 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  scrollbar-gutter: stable; scrollbar-width: thin;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--divider) 85%, transparent);
}
.wb-scroll-hint:not(.has-h-scroll) > .wb-subtabs {
  overflow: visible;
  scrollbar-gutter: auto;
}
.wb-subtabs__tab {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: .45rem .85rem; background: transparent; border: 0;
  color: var(--text-tertiary); font: inherit; font-size: var(--text-body-sm-size); font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-sizing: border-box; -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}
.wb-subtabs__tab:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: -2px;
}
.wb-subtabs__tab:hover { color: var(--text-secondary); background: color-mix(in srgb, var(--bg-surface) 55%, transparent); }
.wb-subtabs__tab.is-active {
  color: var(--text-primary); font-weight: 600; background: transparent;
  box-shadow: inset 0 -1px 0 var(--brand-primary);
}

/* Steps — three distinct states: done (green), active (filled), pending (muted) */
.wb-steps__list {
  display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0;
  flex-wrap: wrap; align-items: stretch;
}
.wb-steps__item {
  flex: 1 1 0; min-width: 5.5rem; max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: .5rem .55rem;
  border-radius: var(--radius-sm); font-size: .75rem; font-weight: 500; line-height: 1.2;
  text-align: center; white-space: nowrap;
  border: 1.5px solid transparent; box-sizing: border-box;
}
.wb-steps__item.is-done {
  background: var(--step-done-bg); color: var(--step-done-text);
  border-color: var(--step-done-border);
}
.wb-steps__item.is-done::before {
  content: '\2713'; margin-right: .25rem; font-weight: 700; flex-shrink: 0;
}
.wb-steps__item.is-active {
  background: var(--step-active-bg); color: var(--step-active-text);
  border-color: var(--step-active-bg); font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.wb-steps__item:not(.is-active):not(.is-done) {
  background: var(--step-pending-bg); color: var(--step-pending-text);
  border-color: var(--border-subtle);
}
/* Compact strip — e.g. customization preview beside chips */
.wb-steps__list--compact {
  flex: 0 1 auto; max-width: min(100%, 17.5rem); margin: 0;
}
.wb-steps__list--compact .wb-steps__item {
  flex: 1 1 0; min-width: 4.25rem; min-height: 34px;
  padding: .45rem .55rem; font-size: .72rem;
}

/* Horizontal scroll hint — fade edges when content overflows horizontally */
.wb-scroll-hint {
  position: relative; min-width: 0; max-width: 100%;
}
.wb-scroll-hint::before,
.wb-scroll-hint::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 1.35rem;
  pointer-events: none; z-index: 3; opacity: 0; transition: opacity .15s ease;
}
.wb-scroll-hint::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-surface) 12%, transparent);
}
.wb-scroll-hint::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-surface) 12%, transparent);
}
.wb-scroll-hint.has-h-scroll.can-scroll-left::before { opacity: 1; }
.wb-scroll-hint.has-h-scroll.can-scroll-right::after { opacity: 1; }

/* Tall tables / timelines — mirror scrollbar at top + edge fade (sichtbar ohne ans Ende zu scrollen) */
.wb-scroll-hint--tall .wb-scroll-hint__top {
  display: none; overflow-x: auto; overflow-y: hidden; height: 10px;
  margin: 0 0 .4rem; scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 45%, transparent) var(--bg-surface-secondary);
}
.wb-scroll-hint--tall.has-h-scroll .wb-scroll-hint__top { display: block; }
.wb-scroll-hint__top-track { height: 1px; pointer-events: none; }
.wb-scroll-hint__top::-webkit-scrollbar,
.wb-scroll-hint__body::-webkit-scrollbar,
.wb-scroll-hint--tall > .wb-table-wrap::-webkit-scrollbar,
.wb-scroll-hint--tall > .wb-table-card__scroll::-webkit-scrollbar {
  height: 8px;
}
.wb-scroll-hint__top::-webkit-scrollbar-track,
.wb-scroll-hint__body::-webkit-scrollbar-track,
.wb-scroll-hint--tall > .wb-table-wrap::-webkit-scrollbar-track,
.wb-scroll-hint--tall > .wb-table-card__scroll::-webkit-scrollbar-track {
  background: var(--bg-surface-secondary); border-radius: 99px;
}
.wb-scroll-hint__top::-webkit-scrollbar-thumb,
.wb-scroll-hint__body::-webkit-scrollbar-thumb,
.wb-scroll-hint--tall > .wb-table-wrap::-webkit-scrollbar-thumb,
.wb-scroll-hint--tall > .wb-table-card__scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-tertiary) 40%, transparent);
  border-radius: 99px; border: 2px solid var(--bg-surface-secondary);
}
.wb-scroll-hint__body,
.wb-scroll-hint--tall > .wb-table-wrap,
.wb-scroll-hint--tall > .wb-table-card__scroll,
.wb-scroll-hint--tall > .wb-belegungsplan {
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 45%, transparent) var(--bg-surface-secondary);
}
.ds-panel > .wb-scroll-hint--tall::before {
  background: linear-gradient(to right, var(--bg-surface) 12%, transparent);
}
.ds-panel > .wb-scroll-hint--tall::after {
  background: linear-gradient(to left, var(--bg-surface) 12%, transparent);
}
.ds-section > .wb-scroll-hint--tall::before {
  background: linear-gradient(to right, var(--bg-page) 12%, transparent);
}
.ds-section > .wb-scroll-hint--tall::after {
  background: linear-gradient(to left, var(--bg-page) 12%, transparent);
}

/* Cards — wb-card, wb-room-card */
.wb-card, .wb-room-card {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.wb-card { padding: 1rem; cursor: pointer; position: relative; }
.wb-card:hover:not(.is-selected) { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.wb-card.is-selected {
  border-color: var(--selection-border); border-width: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--selection-border) 22%, transparent);
  background: color-mix(in srgb, var(--selection-bg) 55%, var(--bg-surface));
}
.wb-card.is-selected::after {
  content: '\2713'; position: absolute; top: .65rem; right: .65rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--action-primary); color: var(--text-on-primary);
  font-size: .7rem; font-weight: 700; display: grid; place-items: center;
}
.wb-card__title { margin: 0 0 .25rem; font-size: 1rem; color: var(--text-primary); }
.wb-card__meta { margin: 0; font-size: .875rem; color: var(--text-tertiary); }
.wb-card__price { margin-top: .5rem; font-weight: 700; color: var(--text-primary); }
.wb-card__price-old { text-decoration: line-through; color: var(--text-tertiary); font-weight: 400; font-size: .85rem; margin-right: .35rem; }
.wb-card__price-discount { color: var(--success-text); font-size: .8rem; font-weight: 600; }

.wb-card--room { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
.wb-card--room.is-selected::after { display: none; }
.wb-card--room .wb-card__media {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
}
.wb-card--room.is-selected .wb-card__media::after {
  content: '\2713'; position: absolute; top: .45rem; right: .45rem; z-index: 1;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--action-primary); color: var(--text-on-primary);
  font-size: .7rem; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(11,31,58,.28), 0 0 0 2px #fff;
}
.wb-card__media img { width: 100%; height: 80px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.wb-card--room .wb-card__media img { border-radius: 0; }

/* Tier picker */
.wb-tier-picker__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .65rem; }
.wb-tier-option {
  padding: .75rem; border: 2px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); cursor: pointer; text-align: left;
}
.wb-tier-option:hover { background: var(--selection-hover); }
.wb-tier-option:active, .wb-tier-option.is-pressed { transform: scale(0.98); background: var(--selection-pressed); }
.wb-tier-option.is-selected {
  border-color: var(--selection-border); background: var(--selection-bg);
  box-shadow: inset 0 0 0 1px var(--selection-border);
}
.wb-tier-option.is-selected .wb-tier-option__label::after {
  content: ' \2713'; color: var(--selection-text); font-weight: 700;
}
.wb-tier-option__label { font-weight: 600; font-size: .9rem; color: var(--text-primary); display: block; }
.wb-tier-option__price { font-size: .85rem; color: var(--text-tertiary); }

/* Table */
.wb-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.wb-table th, .wb-table td { padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.wb-table th { background: var(--table-header-bg); color: var(--table-header-text); font-weight: 600; }
.wb-table tbody tr:hover { background: var(--table-row-hover); }
.wb-table tbody tr.is-selected {
  background: var(--table-row-selected);
  box-shadow: inset 3px 0 0 var(--brand-primary);
}
.wb-table tbody tr.is-selected td:first-child { font-weight: 600; color: var(--text-primary); }

/* Toast */
.wb-toast-root {
  position: fixed; top: 1rem; right: 1rem; z-index: 9000;
  display: flex; flex-direction: column; gap: .5rem;
  max-width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}
.wb-toast {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--brand-primary); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); pointer-events: auto;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.wb-toast.is-visible { opacity: 1; transform: translateY(0); }
.wb-toast__body {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .75rem .85rem .65rem;
}
.wb-toast__message {
  flex: 1; margin: 0; font-size: var(--text-body-sm-size);
  line-height: 1.45; color: var(--text-primary);
}
.wb-toast__close {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: var(--radius-sm); background: transparent;
  color: var(--text-tertiary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.wb-toast__close:hover { background: var(--bg-surface-secondary); color: var(--text-primary); }
.wb-toast__close .wb-icon { width: 14px; height: 14px; }
.wb-toast__progress {
  height: 3px; background: color-mix(in srgb, var(--border-subtle) 70%, transparent);
}
.wb-toast__progress-bar {
  display: block; height: 100%; width: 100%;
  transform-origin: left center;
  animation: wb-toast-progress linear forwards;
  background: var(--action-primary);
}
.wb-toast.is-paused .wb-toast__progress-bar { animation-play-state: paused; }
.wb-toast--demo .wb-toast__progress-bar { animation: none; transform: scaleX(0.42); }
.wb-toast--success { border-left-color: var(--success-main); }
.wb-toast--success .wb-toast__progress-bar { background: var(--success-main); }
.wb-toast--warning { border-left-color: var(--warning-main); }
.wb-toast--warning .wb-toast__progress-bar { background: var(--warning-main); }
.wb-toast--error, .wb-toast--danger { border-left-color: var(--error-main); }
.wb-toast--error .wb-toast__progress-bar, .wb-toast--danger .wb-toast__progress-bar { background: var(--error-main); }
.wb-toast--info { border-left-color: var(--brand-primary); }
.wb-toast--info .wb-toast__progress-bar { background: var(--brand-primary); }
@keyframes wb-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
.wb-toast-demo { max-width: 420px; }
.wb-toast-demo__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
@media (max-width: 540px) {
  .wb-toast-root {
    top: auto; bottom: 1rem; left: 1rem; right: 1rem; max-width: none;
  }
}

/* Skeleton */
.wb-skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Image scrim demo */
.wb-hero-scrim {
  position: relative; border-radius: var(--radius-md); overflow: hidden; height: 180px;
  background: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=800&q=80') center/cover;
}
.wb-hero-scrim::after { content: ''; position: absolute; inset: 0; background: var(--scrim-light); }
.wb-hero-scrim__content {
  position: relative; z-index: 1; padding: 1.25rem; color: var(--text-on-dark); height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.wb-hero-scrim__content h3 { margin: 0; color: var(--text-on-dark); }

/* Calendar mini */
.wb-cal-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: .75rem; }
.wb-cal-mini__day {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: default;
}
.wb-cal-mini__day--muted { color: var(--text-disabled); }
.wb-cal-mini__day--today {
  border-color: var(--border-brand); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--border-brand);
}
.wb-cal-mini__day--available { color: var(--text-primary); }
.wb-cal-mini__day--available:hover { background: var(--selection-hover); cursor: pointer; border-color: var(--border-subtle); }
.wb-cal-mini__day--unavailable {
  color: var(--text-disabled); text-decoration: line-through;
  background: repeating-linear-gradient(-45deg, var(--bg-disabled), var(--bg-disabled) 2px, var(--bg-surface-secondary) 2px, var(--bg-surface-secondary) 4px);
  cursor: not-allowed; opacity: .85;
}
.wb-cal-mini__day--range { background: var(--selection-bg); color: var(--selection-text); border-radius: 0; }
.wb-cal-mini__day--start { background: var(--action-primary); color: var(--text-on-primary); font-weight: 700; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.wb-cal-mini__day--end { background: var(--action-primary); color: var(--text-on-primary); font-weight: 700; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.wb-cal-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1rem; font-size: .75rem; color: var(--text-tertiary); }
.wb-cal-legend__item { display: inline-flex; align-items: center; gap: .4rem; }
.wb-cal-legend__swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-subtle); }
.wb-cal-mini__day--special { position: relative; }
.wb-cal-mini__day--special::after {
  content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--warning-main);
}

/* Rating */
.wb-rating { display: inline-flex; align-items: center; gap: .35rem; color: var(--rating); }
.wb-rating__stars { display: inline-flex; gap: .08rem; align-items: center; }
.wb-rating__value { color: var(--text-primary); font-weight: 600; }

/* Admin components */
.wb-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.wb-page-header__title { margin: 0; font-size: 1.35rem; color: var(--text-primary); }
.wb-breadcrumb { display: flex; gap: .5rem; font-size: .8rem; color: var(--text-tertiary); margin-bottom: 1rem; }
.wb-breadcrumb a { color: var(--text-link); text-decoration: none; }
.wb-heute-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.wb-heute-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 1rem;
}
.wb-heute-card__value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.wb-heute-card--alert { border-color: var(--warning-border); background: var(--warning-bg); }
.wb-heute-card--alert .wb-heute-card__value { color: var(--warning-text); }
.wb-heute-card__label { font-size: .75rem; color: var(--text-tertiary); margin: 0 0 .25rem; font-weight: 500; }

.wb-booking-summary-strip {
  display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem;
  background: var(--bg-surface-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
}
.wb-booking-summary-strip__label { font-size: .7rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.wb-booking-summary-strip__value { font-weight: 600; color: var(--text-primary); }

/* Search widget */
.wb-search__grid { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: .75rem; align-items: end; }
.wb-search__grid > * { min-width: 0; }
.wb-search label {
  display: flex; flex-direction: column; gap: 0;
  font-size: .8rem; font-weight: 500; color: var(--field-label);
}
.wb-search label > span { display: block; margin-bottom: .3rem; }
.wb-search input {
  width: 100%; padding: .65rem .75rem; border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  background: var(--input-bg); color: var(--text-primary); font: inherit; min-height: 42px;
}
.wb-search input:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.wb-search__submit {
  padding: .65rem 1.25rem; min-height: 42px;
  background: var(--action-primary); color: var(--text-on-primary); border: 0; border-radius: var(--radius-sm);
  font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.wb-search__submit:hover { background: var(--action-primary-hover); }

/* Sidebar — elevated, visually separate from form */
.wb-sidebar-card {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 1.25rem;
  box-shadow: var(--shadow-md);
}
.wb-sidebar-card h3 { margin: 0 0 1rem; font-size: 1rem; color: var(--text-primary); }
.wb-sidebar-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 2px solid var(--divider); font-size: 1.05rem; color: var(--text-secondary);
}
.wb-sidebar-total strong { font-size: 1.25rem; color: var(--text-primary); }

.wb-qty-btn {
  width: 34px; height: 34px; border: 1.5px solid var(--border-default); background: var(--bg-surface);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; color: var(--text-primary);
  display: grid; place-items: center;
}
.wb-qty-btn:hover { border-color: var(--border-brand); background: var(--selection-hover); }
.wb-qty-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring-primary); }

.wb-chip.is-selected {
  background: var(--selection-bg); border-color: var(--selection-border);
  color: var(--selection-text); font-weight: 600;
}
.wb-chip.is-selected::before { content: '\2713 '; font-size: .7rem; }

/* Note callout */
.ds-callout {
  padding: 1rem 1.15rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;
  background: var(--info-bg); border: 1px solid var(--border-brand); color: var(--info-text);
  font-size: .9rem;
}
.ds-callout strong { color: inherit; }

.ds-principles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem;
  margin-bottom: 1.25rem;
}
.ds-principle {
  padding: .85rem; border-radius: var(--radius-sm); background: var(--bg-surface-secondary);
  border: 1px solid var(--border-subtle); font-size: .82rem;
}
.ds-principle strong { display: block; color: var(--text-primary); margin-bottom: .25rem; font-size: .85rem; }

/* Extra item */
.wb-extra-list { display: grid; gap: 0; }
.wb-extra-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .85rem;
  padding: .85rem 0; border-bottom: 1px solid var(--divider);
  overflow: visible;
}
.wb-extra-item:last-child { border-bottom: 0; }
.wb-extra-item.is-active,
.wb-extra-item--binary:has(.wb-toggle__input:checked) {
  background: color-mix(in srgb, var(--selection-bg) 65%, var(--bg-surface));
  margin: 0 -.65rem; padding: .85rem .65rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--selection-border); border-bottom: 1.5px solid var(--selection-border);
}
.wb-extra-item.is-disabled {
  opacity: .55;
  pointer-events: none;
}
.wb-extra-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .65rem; }
.wb-extra-item__row { display: flex; align-items: center; justify-content: space-between; gap: .85rem; }
.wb-extra-item__info strong { display: block; color: var(--text-primary); font-size: var(--text-body-sm-size); }
.wb-extra-item__meta { display: block; margin-top: .15rem; font-size: var(--text-caption-size); color: var(--text-tertiary); }
.wb-extra-item__option {
  display: none; align-items: flex-end; gap: .65rem; flex-wrap: wrap;
}
.wb-extra-item--binary:has(.wb-toggle__input:checked) .wb-extra-item__option,
.wb-extra-item.is-active .wb-extra-item__option { display: flex; }
.wb-extra-item__time-label {
  flex: 0 0 auto;
  font-size: var(--text-caption-size); font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: .55rem;
}
.wb-extra-item__option .wb-time-picker {
  flex: 1 1 9rem; min-width: min(100%, 9.5rem); max-width: 11rem;
  align-self: flex-end;
}
.wb-extra-item__option .wb-time-picker__popover { z-index: 80; }
.wb-extra-item__qty { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0; }
.wb-extra-item__qty-val {
  min-width: 1.25rem; text-align: center; font-weight: 600; font-size: var(--text-body-sm-size);
  color: var(--text-primary);
}
.wb-toggle--compact { gap: 0; }
.wb-toggle--compact .wb-toggle__copy { display: none; }

/* Chips / filters */
.wb-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem;
  border-radius: var(--radius-pill); border: 1.5px solid var(--border-default);
  background: var(--bg-surface); color: var(--text-secondary); font-size: .8rem; cursor: pointer;
}
.wb-chip:hover { background: var(--selection-hover); border-color: var(--border-strong); }
.wb-chip:active, .wb-chip.is-pressed { transform: scale(0.96); background: var(--selection-pressed); }

.ds-note { font-size: .8rem; color: var(--text-tertiary); margin-top: .5rem; }
.is-hidden { display: none !important; }

/* Customer theme override demo — only frontend sections */
[data-custom-brand="true"] [data-customer-ui] {
  --brand-primary: var(--custom-brand, #005FF9);
  --text-link: var(--brand-readable, var(--custom-brand, #005FF9));
  --action-primary: var(--custom-brand, #005FF9);
  --action-primary-hover: color-mix(in srgb, var(--custom-brand, #005FF9) 88%, var(--text-on-brand, #fff));
  --action-primary-pressed: color-mix(in srgb, var(--custom-brand, #005FF9) 78%, var(--text-on-brand, #000));
  --text-on-primary: var(--text-on-brand, #FFFFFF);
  --btn-secondary-border: var(--brand-readable, var(--custom-brand, #005FF9));
  --btn-secondary-text: var(--brand-readable, var(--custom-brand, #005FF9));
  --selection-border: var(--brand-readable, var(--custom-brand, #005FF9));
  --selection-bg: color-mix(in srgb, var(--custom-brand, #005FF9) 18%, var(--bg-surface));
  --selection-text: var(--text-on-brand-soft, var(--text-primary));
  --input-border-focus: var(--brand-readable, var(--custom-brand, #005FF9));
  --badge-brand-bg: color-mix(in srgb, var(--custom-brand, #005FF9) 12%, var(--bg-surface));
  --badge-brand-text: var(--text-on-brand-soft, var(--text-primary));
  --badge-brand-border: color-mix(in srgb, var(--custom-brand, #005FF9) 24%, var(--border-default));
  --step-active-bg: var(--custom-brand, #005FF9);
  --step-active-text: var(--text-on-brand, #FFFFFF);
  --border-brand: var(--brand-readable, var(--custom-brand, #005FF9));
}
body.wb-ui-scheme-dark [data-custom-brand="true"] [data-customer-ui] {
  --selection-bg: color-mix(in srgb, var(--custom-brand, #005FF9) 22%, var(--bg-surface));
  --badge-brand-bg: color-mix(in srgb, var(--custom-brand, #005FF9) 18%, var(--bg-surface));
}

/* Brand contrast spec + live readout */
.wb-contrast-readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .65rem;
  padding: .85rem 1rem; background: var(--bg-surface-secondary);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  font-size: var(--text-caption-size); font-family: ui-monospace, monospace;
}
.wb-contrast-readout__item { display: flex; flex-direction: column; gap: .15rem; }
.wb-contrast-readout__label { color: var(--text-tertiary); font-family: var(--font); font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; }
.wb-contrast-readout__value { color: var(--text-primary); font-weight: 600; }
.wb-contrast-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .65rem; }
.wb-contrast-swatch {
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle);
}
.wb-contrast-swatch__surface {
  min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; padding: .75rem; text-align: center;
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}
.wb-contrast-swatch__meta {
  padding: .45rem .55rem; background: var(--bg-surface-secondary);
  font-size: .62rem; font-family: ui-monospace, monospace; color: var(--text-tertiary);
  border-radius: 0 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px);
}
.wb-brand-presets { display: flex; flex-wrap: wrap; gap: .45rem; }
.wb-brand-preset {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--bg-surface); font: inherit; font-size: var(--text-caption-size);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.wb-brand-preset:hover { border-color: var(--border-strong); background: var(--bg-surface-secondary); }
.wb-brand-preset__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent); }
.wb-contrast-rules { margin: 0; padding-left: 1.15rem; color: var(--text-secondary); font-size: var(--text-body-sm-size); line-height: 1.55; }
.wb-contrast-rules li { margin-bottom: .35rem; }
.wb-contrast-rules code { font-size: .85em; }

.wb-brand-context {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--divider);
}
.wb-brand-context__meta { font-size: .82rem; color: var(--text-tertiary); }

/* ============================================================
   Custom date picker (replaces native browser calendar UI)
   ============================================================ */
.wb-date-picker { position: relative; }
.wb-date-picker__trigger {
  width: 100%; height: var(--control-height); min-height: var(--control-height); max-height: var(--control-height); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 0 .75rem; background: var(--input-bg); color: var(--text-primary);
  border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  font: inherit; text-align: left; cursor: pointer; line-height: 1.2;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s, transform .08s, background .12s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.wb-date-picker__trigger:hover { border-color: var(--input-border-hover); }
.wb-date-picker__trigger:active,
.wb-date-picker__trigger.is-pressed { transform: scale(0.99); background: var(--bg-surface-secondary); }
.wb-date-picker__trigger:focus-visible, .wb-date-picker.is-open .wb-date-picker__trigger {
  outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.wb-date-picker__value {
  flex: 1; min-width: 0; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-date-picker__value.is-placeholder { color: var(--input-placeholder); font-weight: 400; }
.wb-date-picker__icon {
  width: 16px; height: 16px; flex-shrink: 0;
  background: var(--icon-date-calendar) center / 16px no-repeat;
}
.wb-date-picker__popover {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 0;
  width: min(320px, calc(100vw - 2rem));
  max-width: min(360px, calc(100vw - 2rem));
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1rem; overflow: hidden;
}
.wb-date-picker.is-open .wb-date-picker__popover { display: block; }
.wb-date-picker.is-open .wb-date-picker__popover.is-fixed {
  position: fixed; top: auto; left: auto; width: auto;
  max-width: calc(100vw - 1rem); z-index: 120;
}
.wb-date-picker__popover[hidden] { display: none !important; }
.wb-date-picker__header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .65rem; padding-bottom: .65rem; border-bottom: 1px solid var(--divider);
  position: relative;
}
.wb-date-picker__month { font-weight: 700; font-size: .95rem; color: var(--text-primary); flex: 1; text-align: center; }
.wb-date-picker__month-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: .15rem; min-height: 36px; padding: 0 .15rem; border: 0; background: none;
  color: inherit; cursor: pointer; font: inherit; border-radius: var(--radius-sm);
}
.wb-date-picker__month-btn:focus { outline: none; }
.wb-date-picker__month-btn:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring-primary); }
.wb-date-picker__month-btn .wb-date-picker__month { flex: 0 1 auto; }
.wb-date-picker__month-chevron {
  width: 24px; height: 24px; flex: 0 0 24px; color: var(--text-secondary);
  transition: transform .15s ease;
}
.wb-date-picker__month-btn[aria-expanded="true"] .wb-date-picker__month-chevron {
  transform: rotate(180deg);
}
.wb-date-picker__month-menu {
  position: absolute; top: calc(100% - .2rem); left: 50%; transform: translateX(-50%);
  z-index: 8; min-width: 11rem; max-height: 16.5rem; overflow: auto;
  background: var(--bg-elevated, #fff); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md, 0 10px 28px rgba(0, 0, 0, .12));
  padding: .25rem 0;
}
.wb-date-picker__month-menu[hidden] { display: none !important; }
.wb-date-picker__month-option {
  display: block; width: 100%; border: 0; background: none; cursor: pointer;
  text-align: left; padding: .7rem .95rem; font: inherit; font-size: .7rem;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-primary);
}
.wb-date-picker__month-option:hover,
.wb-date-picker__month-option:focus-visible {
  background: var(--selection-hover, #f7f1e4);
}
.wb-date-picker__month-option.is-selected {
  font-weight: 700; color: var(--text-secondary);
}
.wb-date-picker__nav {
  width: 36px; height: 36px; border: none; border-radius: var(--radius-sm);
  background: var(--bg-surface-secondary); color: var(--text-secondary); cursor: pointer;
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
  transition: background .12s, color .12s, transform .08s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.wb-date-picker__nav:hover { background: var(--selection-hover); color: var(--text-primary); }
.wb-date-picker__nav:active, .wb-date-picker__nav.is-pressed {
  background: var(--selection-pressed); transform: scale(0.92);
}
.wb-date-picker__nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring-primary); }
.wb-date-picker__nav[hidden] { display: none !important; }
.wb-date-picker__weekdays, .wb-date-picker__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.wb-date-picker__weekday {
  text-align: center; font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-tertiary); padding: .25rem 0;
}
.wb-date-picker__day {
  aspect-ratio: 1; border: none; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-primary); font: inherit; font-size: var(--text-body-sm-size); font-weight: 500;
  cursor: pointer; display: grid; place-items: center; position: relative;
  min-height: 38px; min-width: 0; width: 100%;
  transition: background .1s ease, color .1s ease, transform .08s ease;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.wb-date-range__popover .wb-date-picker__day,
.wb-date-picker__popover .wb-date-picker__day {
  min-height: 0;
  font-size: clamp(.72rem, 2.8vw, var(--text-body-sm-size));
}
.wb-date-picker__day:hover:not(:disabled):not(.wb-date-picker__day--range-start):not(.wb-date-picker__day--range-end):not(.wb-date-picker__day--preview-end):not(.wb-date-picker__day--in-range):not(.wb-date-picker__day--in-range-preview):not(.wb-date-picker__day--selected) {
  background: var(--selection-hover);
  color: var(--text-primary);
}
.wb-date-picker__day--in-range:hover:not(:disabled),
.wb-date-picker__day--in-range-preview:hover:not(:disabled) {
  background: color-mix(in srgb, var(--selection-bg) 80%, var(--selection-hover));
  color: var(--selection-text);
}
.wb-date-picker__day--preview-end:hover:not(:disabled) {
  background: var(--action-primary);
  color: var(--text-on-primary);
}
.wb-date-picker__day:active:not(:disabled),
.wb-date-picker__day.is-pressed:not(:disabled) {
  transform: scale(0.88);
  background: var(--selection-pressed) !important;
  color: var(--selection-text);
}
.wb-date-picker__day--range-start:active:not(:disabled),
.wb-date-picker__day--range-start.is-pressed:not(:disabled),
.wb-date-picker__day--range-end:active:not(:disabled),
.wb-date-picker__day--range-end.is-pressed:not(:disabled),
.wb-date-picker__day--selected:active:not(:disabled),
.wb-date-picker__day--selected.is-pressed:not(:disabled) {
  background: var(--action-primary-pressed) !important;
  color: var(--text-on-primary); transform: scale(0.92);
}
.wb-date-picker__day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-primary); z-index: 1; }
.wb-date-picker__day--outside { color: var(--text-disabled); }
.wb-date-picker__day--today {
  box-shadow: inset 0 0 0 1.5px var(--border-brand); font-weight: 700;
}
.wb-date-picker__day--unavailable {
  color: var(--text-disabled); text-decoration: line-through; cursor: not-allowed;
  background: repeating-linear-gradient(-45deg, var(--bg-disabled), var(--bg-disabled) 2px, transparent 2px, transparent 4px);
}
.wb-date-picker__day--special::after {
  content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--warning-main);
}
.wb-date-picker__day--in-range { background: var(--selection-bg); color: var(--selection-text); border-radius: 0; }
.wb-date-picker__day--range-start {
  background: var(--action-primary); color: var(--text-on-primary); font-weight: 700;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}
.wb-date-picker__day--range-end {
  background: var(--action-primary); color: var(--text-on-primary); font-weight: 700;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}
.wb-date-picker__day--selected {
  background: var(--action-primary); color: var(--text-on-primary); font-weight: 700;
  border-radius: var(--radius-pill);
}
.wb-date-picker--single .wb-date-picker__day--range-start,
.wb-date-picker--single .wb-date-picker__day--range-end,
.wb-date-picker--single .wb-date-picker__day--range-start.wb-date-picker__day--range-end {
  border-radius: var(--radius-pill);
}
.wb-date-picker__footer {
  display: flex; justify-content: space-between; gap: .5rem;
  margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--divider);
}
.wb-date-range {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; position: relative;
}
.wb-date-range--combined {
  grid-template-columns: 1fr;
}
.wb-date-picker--combined-end { display: none !important; }
@media (max-width: 540px) { .wb-date-range { grid-template-columns: 1fr; } }
.wb-date-range__calendars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  overflow: visible;
}
.wb-date-picker__month-col {
  position: relative;
  min-width: 0;
  overflow: visible;
}
.wb-date-picker__month-col:has([aria-expanded="true"]) {
  z-index: 2;
}
@media (max-width: 699px) {
  .wb-date-range__calendars { grid-template-columns: 1fr; }
}
.wb-date-picker__month-jump {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0;
}
.wb-date-picker__month-jump select {
  font: inherit;
  font-weight: 700;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.wb-date-picker__header-spacer { width: 36px; height: 36px; }
.wb-date-range--months-2 .wb-date-range__popover {
  width: min(720px, calc(100vw - 1rem));
  overflow: visible;
}
.wb-date-range--months-2 .wb-date-picker__month {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.wb-date-range--inline-cal {
  display: block;
}
.wb-date-range--inline-cal .wb-date-range__popover,
.wb-date-range--inline-cal.is-open .wb-date-range__popover {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  box-shadow: none;
  margin-top: 1rem;
}
.wb-date-range--inline-cal .wb-date-range__popover[hidden] { display: none !important; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  border: 0;
}

.wb-occupancy { position: relative; }
.wb-occupancy__label {
  display: block;
  margin-bottom: .3rem;
  font-size: var(--text-caption-size);
  font-weight: 600;
}
.wb-occupancy__trigger {
  width: 100%; min-height: var(--control-height);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 0 .75rem; background: var(--input-bg); color: var(--text-primary);
  border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  font: inherit; text-align: left; cursor: pointer;
}
.wb-occupancy__trigger:hover { border-color: var(--input-border-hover); }
.wb-occupancy.is-open .wb-occupancy__trigger,
.wb-occupancy__trigger:focus-visible {
  outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.wb-occupancy__value { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-occupancy__chevron {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--text-secondary);
}
.wb-occupancy__panel {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 120;
  width: min(360px, calc(100vw - 1rem));
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1rem;
  box-sizing: border-box;
  overflow: visible;
}
.wb-occupancy.is-open .wb-occupancy__panel,
.wb-occupancy--inline.is-open .wb-occupancy__panel { display: block; }
.wb-occupancy.is-open .wb-occupancy__panel.is-fixed {
  position: fixed; top: auto; left: auto; width: auto;
  max-width: calc(100vw - 1rem);
}
.wb-occupancy__panel[hidden] { display: none !important; }
.wb-occupancy--inline .wb-occupancy__panel {
  position: static; width: 100%; max-width: none; box-shadow: none; margin-top: 1rem;
}
.wb-occupancy__room {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: .75rem;
}
.wb-occupancy--guests-only .wb-occupancy__room {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
.wb-occupancy__room-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem;
}
.wb-occupancy__row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 44px;
}
.wb-occupancy__row + .wb-occupancy__row { margin-top: .35rem; }
.wb-occupancy__row--age { margin-top: .75rem; align-items: center; }
.wb-occupancy__copy { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.wb-occupancy__name { font-weight: 500; line-height: 1.25; }
.wb-occupancy__sub {
  margin: 0; font-size: .8rem; line-height: 1.25; font-weight: 400;
  color: var(--text-tertiary);
}
.wb-occupancy__age-control { width: 8.75rem; flex: 0 0 8.75rem; }
.wb-occupancy__age-control .wb-select { width: 100%; }
.wb-occupancy__age-control .wb-select__trigger,
.wb-occupancy__age-control select:not(.wb-select__native) {
  width: 100%; height: 36px; min-height: 36px; box-sizing: border-box;
  padding: 0 .6rem; border: 1.5px solid var(--input-border);
  border-radius: var(--radius-sm); background: var(--input-bg);
  color: var(--text-primary); font: inherit; font-size: .8125rem; font-weight: 500;
}
.wb-occupancy__age-control select:not(.wb-select__native) {
  appearance: none; padding-right: 1.65rem; cursor: pointer;
  background-image: var(--icon-select-chevron);
  background-repeat: no-repeat; background-position: right .45rem center; background-size: 16px;
}
.wb-occupancy__age-control .wb-select.is-open .wb-select__trigger,
.wb-occupancy__age-control .wb-select__trigger:focus-visible,
.wb-occupancy__age-control select:not(.wb-select__native):focus {
  outline: none; border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.wb-occupancy__age-control .wb-select__value.is-placeholder { color: var(--input-placeholder); font-weight: 400; }
.wb-occupancy__age-control .wb-select__menu {
  max-height: 14.5rem; overflow-y: auto;
}
/* Absolute menus stretch to the 8.75rem control. Fixed menus are viewport-positioned —
   min-width: 100% would become the window width. */
.wb-occupancy__age-control .wb-select__menu:not(.is-fixed) {
  min-width: 100%;
}
.wb-occupancy__age-control .wb-select__option {
  padding: .55rem .7rem; font-size: .8125rem;
}
.wb-occupancy__row small { color: var(--text-tertiary); font-weight: 400; }
.wb-occupancy__stepper { display: flex; align-items: center; gap: .5rem; width: 7.5rem; justify-content: space-between; }
.wb-occupancy__step {
  width: 32px; height: 32px; border: 1px solid var(--input-border); border-radius: 50%;
  background: var(--bg-surface); cursor: pointer; font: inherit; line-height: 1;
}
.wb-occupancy__step:disabled { opacity: .35; cursor: not-allowed; }
.wb-occupancy__step:hover:not(:disabled) { border-color: var(--input-border-focus); }
.wb-occupancy__count { min-width: 1.25rem; text-align: center; font-weight: 600; }
.wb-occupancy__ages { margin-top: .25rem; display: flex; flex-direction: column; gap: 0; }
.wb-occupancy__add {
  width: 100%; min-height: 44px; border: 1px dashed var(--border-default);
  background: transparent; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--text-secondary); border-radius: var(--radius-md);
}
.wb-occupancy__add:hover:not(:disabled) { border-color: var(--input-border-focus); color: var(--text-primary); }
.wb-occupancy__options {
  margin-top: .85rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-surface-secondary);
}
.wb-occupancy__options-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
}
.wb-occupancy__options-head strong {
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wb-occupancy__options-info {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.wb-occupancy__options-list {
  display: grid;
  gap: .4rem;
}
.wb-occupancy__option {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  cursor: pointer;
}
.wb-occupancy__option input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}
.wb-occupancy__add:disabled { opacity: .4; cursor: not-allowed; }
.wb-occupancy__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin: -4px -6px -4px 0;
  border: 0; background: none; color: var(--text-secondary); cursor: pointer;
  border-radius: 50%; line-height: 0;
}
.wb-occupancy__remove svg { display: block; }
.wb-occupancy__remove:hover,
.wb-occupancy__remove:focus-visible {
  color: var(--text-primary);
  background: var(--bg-surface-secondary, color-mix(in srgb, var(--text-primary) 6%, transparent));
}
.wb-occupancy__remove:focus-visible { outline: 2px solid var(--input-border-focus); outline-offset: 2px; }
.wb-occupancy__hint { margin: .5rem 0 0; color: var(--warning-main, #a15c00); font-size: .85rem; }
.wb-date-range__popover {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 120;
  width: min(360px, calc(100vw - 1rem));
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1rem; overflow: hidden;
  box-sizing: border-box;
}
.wb-date-range.is-open .wb-date-range__popover { display: block; }
.wb-date-range.is-open .wb-date-range__popover.is-fixed {
  position: fixed; top: auto; left: auto; width: auto;
  max-width: calc(100vw - 1rem);
}
.wb-date-range__popover[hidden] { display: none !important; }
.wb-date-range__hint {
  display: flex; gap: .45rem; margin-bottom: .75rem;
}
.wb-date-range__step {
  flex: 1; text-align: center; padding: .4rem .55rem; border-radius: var(--radius-sm);
  font-size: var(--text-caption-size); font-weight: 600; color: var(--text-tertiary);
  background: var(--bg-surface-secondary); transition: background .12s, color .12s, box-shadow .12s;
  cursor: pointer; border: 0; font: inherit;
}
.wb-date-range__step.is-active {
  background: var(--selection-bg); color: var(--selection-text);
  box-shadow: inset 0 0 0 1.5px var(--selection-border);
}
.wb-date-range__step.is-done { color: var(--text-secondary); }
.wb-date-range.is-open .wb-date-picker.is-range-focus .wb-date-picker__trigger {
  border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.wb-date-picker__day--in-range-preview { background: color-mix(in srgb, var(--selection-bg) 55%, transparent); color: var(--selection-text); border-radius: 0; }
.wb-date-picker__day--preview-end {
  background: color-mix(in srgb, var(--action-primary) 72%, var(--bg-elevated));
  color: var(--text-on-primary); font-weight: 700;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* Custom time picker (replaces native browser time UI)
   ============================================================ */
.wb-time-picker {
  --wb-time-option-h: 36px;
  --wb-time-scroll-h: 156px;
  --wb-time-scroll-pad: calc((var(--wb-time-scroll-h) - var(--wb-time-option-h)) / 2);
  --wb-time-scrollbar-w: 8px;
  --wb-time-scroll-inset-x: 4px;
  position: relative;
}
.wb-time-picker:not(.is-open) { height: auto; }
.wb-time-picker__trigger {
  width: 100%; height: var(--control-height); min-height: var(--control-height); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 0 .75rem; background: var(--input-bg); color: var(--text-primary);
  border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .08s, background .12s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.wb-time-picker__trigger:hover { border-color: var(--input-border-hover); }
.wb-time-picker__trigger:active,
.wb-time-picker__trigger.is-pressed { transform: scale(0.99); background: var(--bg-surface-secondary); }
.wb-time-picker__trigger:focus-visible,
.wb-time-picker.is-open .wb-time-picker__trigger {
  outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.wb-time-picker__value { flex: 1; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.wb-time-picker__value.is-placeholder { color: var(--input-placeholder); font-weight: 400; }
.wb-time-picker__icon {
  width: 16px; height: 16px; flex-shrink: 0;
  background: var(--icon-time-clock) center / 16px no-repeat;
}
.wb-time-picker__popover {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 120;
  width: min(100%, 280px); background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: .85rem; overflow: hidden;
}
.wb-time-picker.is-open .wb-time-picker__popover { display: block; }
.wb-time-picker.is-open .wb-time-picker__popover.is-fixed {
  position: fixed; top: auto; left: auto; width: auto; max-width: calc(100vw - 1rem);
}
.wb-time-picker__popover[hidden] { display: none !important; }
.wb-time-picker__presets {
  display: flex; flex-wrap: nowrap; gap: .25rem; margin-bottom: .75rem;
}
.wb-time-picker__preset {
  flex: 1 1 0; min-width: 0; padding: .3rem .35rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-subtle); background: var(--bg-surface-secondary);
  color: var(--text-secondary); font: inherit; font-size: var(--text-caption-size);
  font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.wb-time-picker__preset:hover { background: var(--selection-hover); color: var(--text-primary); border-color: var(--border-default); }
.wb-time-picker__preset:active,
.wb-time-picker__preset.is-pressed { transform: scale(0.96); background: var(--selection-pressed); }
.wb-time-picker__preset.is-selected {
  background: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-primary);
}
.wb-time-picker__columns {
  display: grid; grid-template-columns: minmax(3.25rem, 1fr) auto minmax(3.25rem, 1fr);
  gap: .35rem; align-items: end;
  margin-bottom: .75rem;
}
.wb-time-picker__col-label {
  display: block; text-align: center; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary);
  margin-bottom: .35rem;
}
.wb-time-picker__column { position: relative; min-width: 0; display: flex; flex-direction: column; }
.wb-time-picker__scroll {
  position: relative;
  height: var(--wb-time-scroll-h);
  max-height: var(--wb-time-scroll-h);
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}
.wb-time-picker__scroll::before {
  content: ''; position: absolute;
  left: var(--wb-time-scroll-inset-x);
  right: calc(var(--wb-time-scroll-inset-x) + var(--wb-time-scrollbar-w));
  top: 50%;
  transform: translateY(-50%); height: var(--wb-time-option-h); border-radius: var(--radius-sm);
  background: var(--selection-bg); border: 1px solid var(--selection-border);
  pointer-events: none; z-index: 0;
}
.wb-time-picker__scroll::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; z-index: 2;
  background:
    linear-gradient(to bottom, var(--bg-elevated) 0%, transparent 28%),
    linear-gradient(to top, var(--bg-elevated) 0%, transparent 28%);
}
.wb-time-picker__track {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: auto;
  scrollbar-gutter: stable;
  padding: var(--wb-time-scroll-pad) var(--wb-time-scroll-inset-x) var(--wb-time-scroll-pad) var(--wb-time-scroll-inset-x);
  position: relative;
  z-index: 1;
}
.wb-time-picker__track::-webkit-scrollbar { width: var(--wb-time-scrollbar-w); }
.wb-time-picker__track::-webkit-scrollbar-track {
  background: var(--bg-surface-secondary); border-radius: 99px;
}
.wb-time-picker__track::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px; min-height: 28px;
}
.wb-time-picker__option {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--wb-time-option-h); min-height: var(--wb-time-option-h);
  border: 0; background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 1.05rem; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  scroll-snap-align: center;
  transition: color .12s, transform .08s;
  user-select: none; -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.wb-time-picker__option:hover { color: var(--text-primary); }
.wb-time-picker__option:active,
.wb-time-picker__option.is-pressed { transform: scale(0.92); }
.wb-time-picker__option.is-selected {
  color: var(--selection-text); font-weight: 700;
}
.wb-time-picker__option:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-primary); border-radius: var(--radius-sm); }
.wb-time-picker__sep {
  align-self: end; margin-bottom: calc(var(--wb-time-scroll-pad) - 0.15rem);
  font-size: 1.35rem; font-weight: 700; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.wb-time-picker__footer {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding-top: .65rem; border-top: 1px solid var(--divider);
}

/* Compact variant — inline in extra rows, filter bars, etc. */
.wb-time-picker--compact {
  --wb-time-scroll-h: 132px;
}
.wb-time-picker--compact .wb-time-picker__trigger {
  min-height: 38px; padding: .45rem .65rem;
  font-size: var(--text-body-sm-size);
}
.wb-time-picker--compact .wb-time-picker__popover {
  width: min(100%, 260px);
}
.wb-time-picker--compact .wb-time-picker__footer [data-time-action="now"] { display: none; }
.wb-time-picker--compact .wb-time-picker__footer { justify-content: flex-end; }

/* Modal / dialog */
.wb-modal-demo { position: relative; min-height: 280px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface-secondary); }
.wb-modal-demo__backdrop {
  position: absolute; inset: 0; background: var(--bg-overlay);
}
.wb-modal-demo__panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 2rem)); background: var(--bg-elevated);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.wb-modal-demo__head, .wb-modal-demo__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem; background: var(--bg-surface-secondary); border-bottom: 1px solid var(--divider);
}
.wb-modal-demo__foot { border-bottom: 0; border-top: 1px solid var(--divider); justify-content: flex-end; }
.wb-modal-demo__title { margin: 0; font-size: 1rem; color: var(--text-primary); }
.wb-modal-demo__body { padding: 1rem; font-size: .9rem; color: var(--text-secondary); }

/* Menu panels — hover on items, not container (no dead zones top/bottom) */
.wb-action-menu__list,
.wb-currency-picker__panel,
.wb-select__menu,
.wb-filter-dropdown__menu,
.wb-search__suggestions {
  padding: 0;
  overflow: hidden;
}
.wb-select__menu,
.wb-search__suggestions {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Dropdown / action menu */
.wb-action-menu { position: relative; display: inline-block; }
.wb-action-menu__list {
  position: absolute; top: calc(100% + 6px); left: 0; right: auto; z-index: 40;
  min-width: min(200px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
  margin: 0; list-style: none;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
/* Tabellen / Header-Aktionen rechts — Menü nach links aufklappen */
.wb-action-menu--align-end .wb-action-menu__list { left: auto; right: 0; }
.wb-action-menu.is-open .wb-action-menu__list.is-fixed,
.wb-select.is-open .wb-select__menu.is-fixed,
.wb-currency-picker.is-open .wb-currency-picker__panel.is-fixed,
.wb-filter-dropdown.is-open .wb-filter-dropdown__menu.is-fixed {
  position: fixed; top: auto; bottom: auto; left: auto; right: auto; width: auto;
  min-width: 0;
  max-width: calc(100vw - 1rem);
  z-index: 100;
}
.wb-action-menu__list > li { margin: 0; padding: 0; }
.wb-action-menu__item {
  display: block; width: 100%; padding: .55rem .85rem; border: 0; background: transparent;
  text-align: left; font: inherit; font-size: .875rem; color: var(--text-secondary); cursor: pointer;
  white-space: nowrap;
}
.wb-action-menu__item:hover, .wb-action-menu__item:focus-visible {
  background: var(--selection-hover); color: var(--text-primary); outline: none;
}
.wb-action-menu__item--danger { color: var(--error-text); }
.wb-action-menu__item--danger:hover { background: var(--error-bg); }

/* Gateway, coupon, waitlist, upgrade */
.wb-gateway-option {
  display: flex; align-items: center; gap: .65rem; padding: .75rem .85rem;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-surface); cursor: pointer; margin-bottom: .5rem;
}
.wb-gateway-option.is-selected,
.wb-gateway-option:has(input:checked) {
  border-color: var(--selection-border); background: color-mix(in srgb, var(--selection-bg) 50%, var(--bg-surface));
}
.wb-gateway-option input { accent-color: var(--action-primary); width: 16px; height: 16px; }
.wb-coupon-msg--ok { color: var(--success-text); font-size: .85rem; margin-top: .35rem; display: inline-flex; align-items: center; gap: .35rem; }

/* Inline SVG icons — no emojis in UI */
.wb-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: currentColor;
}
.wb-icon svg {
  width: 100%; height: 100%; stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.wb-icon--xs { width: 12px; height: 12px; }
.wb-icon--sm { width: 14px; height: 14px; }
.wb-icon--md { width: 18px; height: 18px; }
.wb-icon--lg { width: 22px; height: 22px; }
.wb-icon--fill svg { fill: currentColor; stroke: none; }
.wb-tile__icon .wb-icon { width: 18px; height: 18px; }
.wb-field__error .wb-icon { width: 14px; height: 14px; color: var(--error-main); }
.wb-rating__stars .wb-icon { width: 14px; height: 14px; }
.wb-waitlist {
  padding: 1rem; border: 1px solid var(--warning-border); border-radius: var(--radius-md);
  background: var(--warning-bg);
}
.wb-waitlist__title { margin: 0 0 .35rem; color: var(--warning-text); font-size: .95rem; }
.wb-upgrade-card {
  display: grid; grid-template-columns: 72px 1fr auto; gap: .75rem; align-items: center;
  padding: .75rem; border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); cursor: pointer; text-align: left;
}
.wb-upgrade-card.is-selected { border-color: var(--selection-border); background: var(--selection-bg); }
.wb-upgrade-card img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); }
.wb-upgrade-card__delta { font-weight: 700; color: var(--text-primary); white-space: nowrap; }

/* Order card, portal, empty state */
.wb-order-card {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); padding: 1rem 1.15rem;
}
.wb-order-card__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.wb-order-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.wb-empty-state {
  text-align: center; padding: 2rem 1.25rem; border: 1px dashed var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-surface-secondary);
}
.wb-empty-state__title { margin: 0 0 .35rem; color: var(--text-primary); }
.wb-empty-state__desc { margin: 0 0 1rem; color: var(--text-tertiary); font-size: .9rem; }

/* Checkbox / radio grid */
.wb-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.wb-checkbox-grid__item {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .65rem;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-surface); cursor: pointer; font-size: .875rem;
}
.wb-checkbox-grid__item:has(input:checked) {
  border-color: var(--selection-border); background: var(--selection-bg);
}
.wb-checkbox-grid__item input { accent-color: var(--action-primary); }

/* Currency picker, search suggestions, festival hints */
.wb-currency-picker { position: relative; display: inline-block; }
.wb-currency-picker__trigger {
  display: inline-flex; align-items: center; gap: .4rem; padding: 0 .65rem;
  min-height: var(--control-height, 42px); height: var(--control-height, 42px);
  border: 1.5px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--input-bg); color: var(--text-primary); font: inherit; cursor: pointer;
  box-sizing: border-box;
}
.wb-currency-picker__panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: min(180px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.wb-currency-picker__option {
  display: block; width: 100%; padding: .45rem .75rem; border: 0; background: transparent;
  text-align: left; font: inherit; cursor: pointer; color: var(--text-secondary);
}
.wb-currency-picker__option:hover, .wb-currency-picker__option.is-selected {
  background: var(--selection-hover); color: var(--text-primary);
}
.wb-search__suggestions {
  margin-top: .35rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-elevated); box-shadow: var(--shadow-sm);
}
.wb-search__suggestion {
  display: block; width: 100%; padding: .55rem .75rem; border: 0; background: transparent;
  text-align: left; font: inherit; cursor: pointer; color: var(--text-secondary);
}
.wb-search__suggestion:hover, .wb-search__suggestion.is-active { background: var(--selection-hover); }
.wb-search__suggestion-type {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-tertiary); margin-right: .35rem;
}
.wb-festival-hints {
  padding: .75rem 1rem; border-left: 4px solid var(--warning-main);
  background: var(--warning-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--warning-text); font-size: .875rem;
}

/* Admin occupancy mini grid */
.wb-occ-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: .7rem; }
.wb-occ-cell {
  aspect-ratio: 1; border-radius: 3px; border: 1px solid var(--border-subtle);
  display: grid; place-items: center; font-weight: 600;
}
.wb-occ-cell--free { background: var(--bg-surface); color: var(--text-tertiary); }
.wb-occ-cell--confirmed { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.wb-occ-cell--pending { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.wb-occ-cell--blocked { background: var(--error-bg); color: var(--error-text); border-color: var(--error-border); text-decoration: line-through; }

/* Layout grids */
.wb-rooms-grid { display: grid; gap: 1rem; }
.wb-rooms-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .wb-rooms-grid--cols-3 { grid-template-columns: 1fr; } }
.wb-room-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); }
.wb-room-card__media img { width: 100%; height: 120px; object-fit: cover; display: block; }
.wb-room-card__body { padding: .85rem 1rem 1rem; }

/* ============================================================
   Custom Select (wb-select) — replaces native browser dropdown
   ============================================================ */
.wb-select { position: relative; }
.wb-select__native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wb-select__trigger {
  width: 100%; height: var(--control-height); min-height: var(--control-height); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 0 .75rem; background: var(--input-bg); color: var(--text-primary);
  border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  font: inherit; font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .08s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.wb-select__trigger:hover:not(:disabled) { border-color: var(--input-border-hover); }
.wb-select__trigger:active:not(:disabled), .wb-select__trigger.is-pressed:not(:disabled) { transform: scale(0.995); background: var(--bg-surface-secondary); }
.wb-select.is-disabled .wb-select__trigger,
.wb-select__trigger:disabled {
  background: var(--bg-disabled); color: var(--text-disabled);
  border-color: var(--border-subtle); cursor: not-allowed;
  box-shadow: none; transform: none;
}
.wb-select.is-open .wb-select__trigger,
.wb-select__trigger:focus-visible {
  outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.wb-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-select__value.is-placeholder { color: var(--input-placeholder); font-weight: 400; }
.wb-select__chevron {
  width: 16px; height: 16px; flex-shrink: 0; opacity: .7;
  background: var(--icon-select-chevron) center / 16px no-repeat;
  transition: transform .15s ease;
}
.wb-select.is-open .wb-select__chevron { transform: rotate(180deg); }
.wb-select__menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  max-height: 240px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.wb-select.is-open .wb-select__menu { display: block; }
.wb-select__menu[hidden] { display: none !important; }
/* Footer / pagination — menu opens upward when absolutely positioned (not WBPanelPosition) */
.wb-select--drop-up .wb-select__menu:not(.is-fixed) {
  top: auto; bottom: calc(100% + 6px);
}
.wb-select__option {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .55rem .65rem; border: 0; border-radius: 0;
  background: transparent; color: var(--text-secondary); font: inherit; text-align: left;
  cursor: pointer; transition: background .1s, color .1s;
}
.wb-select__option:hover { background: var(--selection-hover); color: var(--text-primary); }
.wb-select__option.is-selected {
  background: var(--selection-bg); color: var(--selection-text); font-weight: 600;
}
.wb-select__option.is-selected::after { content: '\2713'; font-size: .75rem; font-weight: 700; }
.wb-select__option.is-pressed { background: var(--selection-pressed); transform: scale(0.99); }
.wb-select__option[hidden] { display: none !important; }

/* Multi-select — wb-select trigger, checkbox menu, collapsed label shows selection */
.wb-multi-select .wb-select__menu {
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}
.wb-multi-select__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .65rem;
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 0;
  margin: 0;
}
.wb-multi-select__item:hover { background: var(--selection-hover); color: var(--text-primary); }
.wb-multi-select__item.is-selected {
  background: var(--selection-bg);
  color: var(--selection-text);
  font-weight: 600;
}
.wb-multi-select__item input {
  accent-color: var(--action-primary);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
}
.wb-multi-select__item span { flex: 1; min-width: 0; }

/* Combobox — select + search */
.wb-combobox .wb-select__menu { display: none; flex-direction: column; max-height: 280px; overflow: hidden; }
.wb-combobox.is-open .wb-select__menu { display: flex; }
.wb-combobox__search-wrap {
  padding: .55rem; border-bottom: 1px solid var(--divider); background: var(--bg-surface-secondary);
}
.wb-combobox__search {
  width: 100%; padding: .5rem .65rem .5rem 2rem; border: 1.5px solid var(--input-border);
  border-radius: var(--radius-sm); background: var(--input-bg) var(--icon-search) .55rem center / 14px no-repeat;
  color: var(--text-primary); font: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-combobox__search::placeholder {
  color: var(--input-placeholder);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-combobox__search:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.wb-combobox__options { overflow-y: auto; flex: 1; min-height: 0; }
.wb-combobox__options.is-empty { display: flex; align-items: center; justify-content: center; min-height: 132px; padding: .5rem; }
.wb-combobox__empty {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .5rem .75rem; text-align: center; width: 100%;
}
.wb-combobox__empty-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-surface-secondary); color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: center;
}
.wb-combobox__empty-icon .wb-icon { width: 18px; height: 18px; opacity: .75; }
.wb-combobox__empty-title { margin: 0; font-size: var(--text-body-sm-size); font-weight: 600; color: var(--text-secondary); }
.wb-combobox__empty-desc { margin: 0; font-size: var(--text-caption-size); color: var(--text-tertiary); max-width: 24ch; line-height: 1.4; }

/* Search field — icon is always present; text/placeholder never overlap it */
.wb-search-field {
  --wb-search-icon-size: 16px;
  --wb-search-icon-inset: 12px;
  --wb-search-icon-gap: 10px;
  --wb-search-clear-size: 28px;
  --wb-search-clear-inset: 8px;
  --wb-search-pad-start: calc(var(--wb-search-icon-inset) + var(--wb-search-icon-size) + var(--wb-search-icon-gap));
  --wb-search-pad-end: calc(var(--wb-search-clear-inset) + var(--wb-search-clear-size));
  position: relative; min-width: 0; width: 100%;
}
.wb-search-field input[type="search"],
.wb-search-field input[type="search"].wb-search-field__input,
.wb-search-field .wb-search-field__input {
  width: 100%; height: var(--control-height); min-height: var(--control-height); box-sizing: border-box;
  min-width: 0;
  padding: 0 var(--wb-search-pad-end) 0 var(--wb-search-pad-start);
  border: 1.5px solid var(--input-border); border-radius: var(--radius-md);
  background: var(--input-bg); color: var(--text-primary); font: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  appearance: none; -webkit-appearance: none;
}
.wb-search-field__input::-webkit-search-decoration,
.wb-search-field__input::-webkit-search-cancel-button,
.wb-search-field__input::-webkit-search-results-button,
.wb-search-field__input::-webkit-search-results-decoration {
  -webkit-appearance: none; appearance: none;
}
.wb-search-field__input:hover { border-color: var(--input-border-hover); }
.wb-search-field__input:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.wb-search-field__input::placeholder {
  color: var(--input-placeholder);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-search-field__icon {
  position: absolute; left: var(--wb-search-icon-inset); top: 50%; transform: translateY(-50%);
  width: var(--wb-search-icon-size); height: var(--wb-search-icon-size); pointer-events: none; opacity: .55;
  background: var(--icon-search) center / var(--wb-search-icon-size) no-repeat;
}
.wb-search-field__clear {
  position: absolute; right: var(--wb-search-clear-inset); top: 50%; transform: translateY(-50%);
  width: var(--wb-search-clear-size); height: var(--wb-search-clear-size); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 1rem;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.wb-search-field__clear[hidden] { display: none !important; }
.wb-search-field__clear:hover { background: var(--bg-surface-secondary); color: var(--text-primary); }
.wb-search-field__clear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-primary); }

/* Toggle / Switch */
.wb-toggle-field { display: flex; flex-direction: column; gap: .35rem; }
.wb-toggle { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; }
.wb-toggle__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wb-toggle__track {
  position: relative; flex: 0 0 auto; width: 46px; height: 28px; cursor: pointer;
}
.wb-toggle__track::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: var(--toggle-track-off); transition: background .2s ease;
}
.wb-toggle__thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--toggle-thumb); box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .22s cubic-bezier(.54,1.6,.5,1); pointer-events: none;
}
.wb-toggle__input:checked + .wb-toggle__track::before { background: var(--toggle-track-on); }
.wb-toggle__input:checked + .wb-toggle__track .wb-toggle__thumb { transform: translateX(18px); }
.wb-toggle__input:focus-visible + .wb-toggle__track { outline: none; box-shadow: 0 0 0 3px var(--focus-ring-primary); border-radius: 999px; }
.wb-toggle__copy { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.wb-toggle__label { font-size: var(--text-body-sm-size); color: var(--text-secondary); font-weight: 500; line-height: 1.35; }
.wb-toggle__state { font-size: var(--text-caption-size); font-weight: 600; letter-spacing: .02em; line-height: 1.2; }
.wb-toggle__state-value--on { display: none; color: var(--success-text); }
.wb-toggle__state-value--off { display: inline; color: var(--text-tertiary); }
.wb-toggle__input:checked ~ .wb-toggle__copy .wb-toggle__label { color: var(--text-primary); }
.wb-toggle__input:checked ~ .wb-toggle__copy .wb-toggle__state-value--on { display: inline; }
.wb-toggle__input:checked ~ .wb-toggle__copy .wb-toggle__state-value--off { display: none; }

/* Radio buttons */
.wb-radio-group { display: flex; flex-direction: column; gap: .5rem; }
.wb-radio-group--inline { flex-direction: row; flex-wrap: wrap; gap: .65rem 1rem; }
.wb-radio {
  display: inline-flex; align-items: flex-start; gap: .55rem; padding: .65rem .75rem;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s;
}
.wb-radio:hover { border-color: var(--border-strong); background: var(--selection-hover); }
.wb-radio:has(input:checked) {
  border-color: var(--selection-border); background: var(--selection-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--selection-border) 40%, transparent);
}
.wb-radio input {
  width: 18px; height: 18px; margin: .1rem 0 0; accent-color: var(--action-primary); flex-shrink: 0;
}
.wb-radio__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.wb-radio__text strong { font-size: var(--text-body-sm-size); color: var(--text-primary); font-weight: 600; }
.wb-radio__text span { font-size: var(--text-caption-size); color: var(--text-tertiary); }

/* Filter bar & dropdown filter */
.wb-filter-panel {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 1rem;
}
.wb-filter-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.wb-filter-bar .wb-select { min-width: 0; width: 100%; }
.wb-filter-field { display: flex; flex-direction: column; gap: .35rem; min-width: min(140px, 100%); flex: 1; }
.wb-filter-field__label { font-size: var(--text-caption-size); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.wb-filter-field__label--spacer { visibility: hidden; user-select: none; }
.wb-filter-field--search { flex: 2; min-width: min(100%, 220px); }
.wb-filter-field--date-range { flex: 1 1 19.25rem; min-width: 19.25rem; }
.wb-filter-field--date-range .wb-date-range--inline {
  gap: 0;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  overflow: hidden;
}
.wb-filter-field--date-range .wb-date-range--inline:hover {
  border-color: var(--input-border-hover);
}
.wb-filter-field--date-range .wb-date-range--inline.is-open,
.wb-filter-field--date-range .wb-date-range--inline:focus-within {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.wb-filter-field--date-range .wb-date-range--inline .wb-field {
  margin: 0;
  gap: 0;
}
.wb-filter-field--date-range .wb-date-range--inline .wb-date-picker__trigger {
  min-width: 0;
  padding: 0 .55rem;
  gap: .35rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wb-filter-field--date-range .wb-date-range--inline .wb-date-picker__trigger:hover {
  background: var(--bg-surface-secondary);
}
.wb-filter-field--date-range .wb-date-range--inline .wb-date-picker__trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--input-border-focus);
}
.wb-filter-field--date-range .wb-date-range.is-open .wb-date-picker.is-range-focus .wb-date-picker__trigger {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--input-border-focus);
  background: var(--selection-bg);
}
.wb-filter-field--date-range .wb-date-range--inline .wb-date-range__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 .35rem;
  color: var(--text-tertiary);
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  line-height: 1;
  user-select: none;
  border-left: 1px solid var(--input-border);
  border-right: 1px solid var(--input-border);
  background: var(--bg-surface-secondary);
}
.wb-filter-field--narrow { flex: 0 1 auto; min-width: 152px; max-width: 180px; }
.wb-filter-field--action { flex: 0 0 auto; min-width: auto; }
.wb-filter-bar .wb-filter-dropdown { position: relative; width: 100%; }
.wb-filter-bar .wb-filter-dropdown__trigger {
  width: 100%; min-height: var(--control-height); padding: 0 .85rem;
  display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem;
  border-radius: var(--radius-md); font-size: var(--text-body-sm-size); font-weight: 500;
}
.wb-filter-bar .wb-filter-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  min-height: var(--control-height);
  min-width: 108px;
  padding: 0 1.1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
a.wb-btn.wb-filter-actions__btn {
  text-decoration: none;
}
.wb-filter-dropdown__chevron {
  width: 16px; height: 16px; flex-shrink: 0; opacity: .7;
  background: var(--icon-select-chevron) center / 16px no-repeat;
}
.wb-filter-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .85rem; padding-top: .75rem;
  border-top: 1px solid var(--divider);
}
.wb-filter-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .35rem .7rem; border: 1.5px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--bg-surface-secondary); color: var(--text-secondary); font: inherit; font-size: var(--text-caption-size);
  font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.wb-filter-chip:hover { border-color: var(--border-strong); background: var(--selection-hover); }
.wb-filter-chip.is-active {
  background: var(--selection-bg); border-color: var(--selection-border); color: var(--selection-text); font-weight: 600;
}
.wb-filter-dropdown { position: relative; display: inline-block; }
.wb-filter-dropdown__menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: min(220px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.wb-filter-dropdown.is-open .wb-filter-dropdown__menu { display: block; }
.wb-filter-dropdown__item {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .65rem;
  font-size: var(--text-body-sm-size); color: var(--text-secondary); cursor: pointer; border-radius: 0;
}
.wb-filter-dropdown__item:hover { background: var(--selection-hover); color: var(--text-primary); }
.wb-filter-dropdown__item input { accent-color: var(--action-primary); }

/* Tiles */
.wb-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .65rem; }
.wb-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  padding: .85rem .9rem; border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); cursor: pointer; text-align: left; transition: border-color .12s, background .12s, transform .08s;
}
.wb-tile:hover { border-color: var(--border-strong); background: var(--selection-hover); }
.wb-tile.is-selected {
  border-color: var(--selection-border); background: var(--selection-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--selection-border) 18%, transparent);
}
.wb-tile__icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--bg-surface-secondary); display: grid; place-items: center;
  color: var(--action-primary);
}
.wb-tile.is-selected .wb-tile__icon { background: color-mix(in srgb, var(--action-primary) 14%, var(--bg-surface)); color: var(--selection-text); }
.wb-tile__title { font-size: var(--text-body-sm-size); font-weight: 600; color: var(--text-primary); margin: 0; }
.wb-tile__meta { font-size: var(--text-caption-size); color: var(--text-tertiary); margin: 0; }

/* Tooltips */
.wb-tooltip-wrap { position: relative; display: inline-flex; }
.wb-tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; right: auto;
  transform: translateX(-50%);
  width: max-content; max-width: min(280px, calc(100vw - 2rem)); margin-inline: 0;
  padding: .7rem .95rem; border-radius: var(--radius-md);
  background: var(--tooltip-bg); color: var(--tooltip-fg);
  font-size: var(--text-body-sm-size); font-weight: 500; line-height: 1.5;
  letter-spacing: .01em; white-space: normal;
  border: 1px solid color-mix(in srgb, var(--tooltip-fg) 14%, transparent);
  box-shadow: var(--shadow-lg);
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .15s, visibility .15s; z-index: 80;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.wb-tooltip::after {
  content: ''; position: absolute; top: 100%; left: calc(50% - 5px);
  width: 10px; height: 10px; background: var(--tooltip-bg);
  border-right: 1px solid color-mix(in srgb, var(--tooltip-fg) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--tooltip-fg) 14%, transparent);
  rotate: 45deg; translate: 0 -50%;
}
.wb-tooltip-wrap:hover .wb-tooltip, .wb-tooltip-wrap:focus-within .wb-tooltip { opacity: 1; visibility: visible; }

/* Accordion — wb-accordion (generalizes wb-checkin-adult, wb-avail-check) */
.wb-accordion { display: flex; flex-direction: column; gap: .5rem; }
.wb-accordion__item {
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-surface);
  transition: border-color .15s, box-shadow .15s;
}
.wb-accordion__item.is-open { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.wb-accordion__item.is-complete { border-color: color-mix(in srgb, var(--success-main) 35%, var(--border-default)); }
.wb-accordion__item.is-incomplete { border-color: color-mix(in srgb, var(--warning-main) 35%, var(--border-default)); }
.wb-accordion__item.is-disabled { opacity: .55; }
.wb-accordion__trigger {
  width: 100%; display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem; border: 0; background: var(--bg-surface-secondary);
  color: var(--text-primary); font: inherit; font-weight: 600; font-size: var(--text-body-sm-size);
  text-align: left; cursor: pointer;
  transition: background .12s, transform .08s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.wb-accordion__trigger:hover:not(:disabled) { background: var(--selection-hover); }
.wb-accordion__trigger:active:not(:disabled),
.wb-accordion__trigger.is-pressed:not(:disabled) { transform: scale(0.995); background: var(--selection-pressed); }
.wb-accordion__trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring-primary); }
.wb-accordion__trigger:disabled { cursor: not-allowed; }
.wb-accordion__chevron {
  width: 16px; height: 16px; flex-shrink: 0; opacity: .75;
  background: var(--icon-select-chevron) center / 16px no-repeat;
  transition: transform .2s ease;
}
.wb-accordion__item.is-open .wb-accordion__chevron { transform: rotate(180deg); }
.wb-accordion__title { flex: 1; min-width: 0; line-height: 1.35; }
.wb-accordion__subtitle {
  display: block; font-weight: 400; font-size: var(--text-caption-size);
  color: var(--text-tertiary); margin-top: .1rem;
}
.wb-accordion__meta { flex-shrink: 0; }
.wb-accordion__panel {
  padding: 1rem; border-top: 1px solid var(--divider);
  font-size: var(--text-body-sm-size); color: var(--text-secondary);
}
.wb-accordion__panel[hidden] { display: none; }
.wb-accordion--flush { gap: 0; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.wb-accordion--flush .wb-accordion__item { border: 0; border-radius: 0; border-bottom: 1px solid var(--divider); }
.wb-accordion--flush .wb-accordion__item:last-child { border-bottom: 0; }
.wb-accordion--flush .wb-accordion__item.is-open { box-shadow: none; }

/* Admin calendar overview */
.wb-cal-overview {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 1rem;
}
.wb-cal-overview__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--divider);
}
.wb-cal-overview__spans { display: flex; flex-wrap: wrap; gap: .35rem; }
.wb-cal-overview__span {
  padding: .35rem .65rem; border: 1.5px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--bg-surface-secondary); color: var(--text-secondary); font-size: var(--text-caption-size);
  font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.wb-cal-overview__span.is-active {
  background: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-primary); font-weight: 600;
}
.wb-cal-overview__nav {
  display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: .35rem; flex: 0 1 auto; max-width: 100%; min-width: 0; margin-left: auto;
}
.wb-cal-overview__range-label {
  font-weight: 600; font-size: var(--text-body-sm-size); min-width: 0; flex: 1 1 auto;
  text-align: center; color: var(--text-primary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.wb-cal-overview__nav-btn {
  flex: 0 0 auto; min-width: var(--btn-height-sm, 32px); padding-inline: .5rem !important;
}
.wb-cal-overview__months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 768px) { .wb-cal-overview__months { grid-template-columns: 1fr; } }
.wb-cal-overview__month {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: .65rem; min-width: 0;
}
.wb-cal-overview__month.is-focus { border-color: var(--border-brand); box-shadow: inset 0 0 0 1px var(--border-brand); }
.wb-cal-overview__month-title { font-weight: 700; font-size: var(--text-body-sm-size); margin: 0 0 .35rem; color: var(--text-primary); }
.wb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wb-cal-grid__head { font-size: .62rem; font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); text-align: center; padding: .15rem 0; }
.wb-cal-grid__cell {
  aspect-ratio: 1; min-height: 28px; border-radius: 4px; border: 1px solid transparent;
  display: grid; place-items: center; font-size: .68rem; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: background .1s, transform .08s;
}
.wb-cal-grid__cell:hover:not(.wb-cal-grid__cell--outside) { background: var(--selection-hover); }
.wb-cal-grid__cell--outside { color: var(--text-disabled); }
.wb-cal-grid__cell--occupied {
  background: var(--cal-occupied-bg); color: var(--cal-occupied-text); border-color: var(--cal-occupied-border);
}
.wb-cal-grid__cell--blocked {
  background: var(--cal-blocked-bg); color: var(--cal-blocked-text); border-color: var(--cal-blocked-border);
}
.wb-cal-grid__cell--today .wb-cal-grid__daynum {
  background: var(--action-primary); color: var(--text-on-primary); border-radius: 999px;
  min-width: 1.4em; min-height: 1.4em; display: grid; place-items: center;
}
.wb-cal-grid__cell.is-selected-day { outline: 2px solid var(--action-primary); outline-offset: -2px; z-index: 1; }

.wb-cal-overview__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--divider);
  font-size: var(--text-caption-size); color: var(--text-tertiary);
}
.wb-cal-overview__legend-title {
  font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-primary);
}
.wb-cal-overview__legend-items {
  display: flex; flex-wrap: wrap; gap: .5rem .875rem; list-style: none; margin: 0; padding: 0;
}
.wb-cal-overview__legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.wb-cal-overview__swatch {
  display: inline-block; width: 14px; height: 14px; border: 1px solid var(--border-default);
  border-radius: 3px; flex-shrink: 0; box-sizing: border-box;
}
.wb-cal-overview__swatch--occupied {
  background: var(--cal-occupied-bg); border-color: var(--cal-occupied-border);
}
.wb-cal-overview__swatch--blocked {
  background: var(--cal-blocked-bg); border-color: var(--cal-blocked-border);
}
.wb-cal-overview__swatch--today {
  width: 16px; height: 16px; background: var(--action-primary); border-color: var(--action-primary);
  border-radius: 999px;
}
.wb-cal-overview__swatch--selected {
  background: var(--bg-surface); border: 2px solid var(--action-primary);
}
.wb-cal-overview__swatch--focus-month {
  background: var(--bg-surface); border: 2px solid var(--action-primary);
  box-shadow: inset 0 0 0 1px var(--action-primary);
}

/* Belegungsplan timeline */
.wb-belegungsplan { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); }
.wb-belegungsplan__head, .wb-belegungsplan__row {
  display: grid; grid-template-columns: 140px 1fr; min-width: 720px;
}
.wb-belegungsplan__head {
  position: sticky; top: 0; z-index: 3; background: var(--bg-surface-secondary);
  border-bottom: 1px solid var(--divider); font-size: var(--text-caption-size); font-weight: 600; color: var(--text-tertiary);
}
.wb-belegungsplan__days {
  display: grid; grid-template-columns: repeat(14, minmax(36px, 1fr));
  position: relative; z-index: 0;
}
.wb-belegungsplan__head > *, .wb-belegungsplan__row > * { padding: .45rem .35rem; border-right: 1px solid var(--border-subtle); }
.wb-belegungsplan__head .wb-belegungsplan__days > span { text-align: center; border-right: 1px solid var(--border-subtle); padding: .45rem .2rem; }
.wb-belegungsplan__room {
  text-align: left !important; font-weight: 600; color: var(--text-primary); font-size: var(--text-body-sm-size);
  position: sticky; left: 0; z-index: 2;
  background: var(--bg-surface);
  border-right: 1px solid var(--divider);
  box-shadow: 4px 0 8px -6px color-mix(in srgb, var(--text-primary) 16%, transparent);
}
.wb-belegungsplan__head .wb-belegungsplan__room {
  z-index: 2; background: var(--bg-surface-secondary);
}
.wb-belegungsplan__track {
  display: grid; grid-template-columns: repeat(14, minmax(36px, 1fr)); align-items: center; min-height: 40px;
  position: relative; z-index: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent calc(100% / 14 - 1px), var(--border-subtle) calc(100% / 14 - 1px), var(--border-subtle) calc(100% / 14));
}
.wb-belegungsplan__bar {
  grid-row: 1; margin: .2rem .15rem; border-radius: var(--radius-sm);
  min-height: 26px; display: flex; align-items: center; padding: 0 .45rem;
  font-size: .62rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden;
  cursor: grab; user-select: none; touch-action: none; position: relative; z-index: 0;
  transition: box-shadow .12s, opacity .12s, outline-color .12s;
}
.wb-belegungsplan__bar.is-dragging {
  cursor: grabbing; z-index: 6; opacity: .94;
  box-shadow: var(--shadow-md);
  outline: 2px solid color-mix(in srgb, #fff 70%, transparent);
}
.wb-belegungsplan__bar.is-drop-invalid { outline: 2px solid var(--error-main); }
.wb-belegungsplan__track.is-drop-target {
  background-color: color-mix(in srgb, var(--selection-bg) 40%, transparent);
}
.wb-belegungsplan__bar--confirmed { background: var(--success-main); }
.wb-belegungsplan__bar--pending { background: var(--warning-main); }
.wb-belegungsplan__bar--blocked { background: var(--error-main); opacity: .75; }
.wb-belegungsplan__cell { min-height: 36px; }

/* Table empty states */
.wb-table-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.wb-table-empty, .wb-table-no-results {
  padding: 2.5rem 1.5rem; text-align: center; background: var(--bg-surface);
}
.wb-table-empty__icon, .wb-table-no-results__icon {
  width: 48px; height: 48px; margin: 0 auto .75rem; border-radius: 50%;
  background: var(--bg-surface-secondary); display: grid; place-items: center;
  color: var(--text-tertiary);
}
.wb-table-empty__title, .wb-table-no-results__title { margin: 0 0 .35rem; font-size: var(--text-h4-size); color: var(--text-primary); }
.wb-table-empty__desc, .wb-table-no-results__desc { margin: 0 0 1rem; font-size: var(--text-body-sm-size); color: var(--text-tertiary); max-width: 36ch; margin-inline: auto; }

/* Pagination — wb-pagination (Buchungsliste Admin) */
.wb-table-card {
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--bg-surface); overflow: visible;
}
.wb-table-card__scroll { overflow-x: auto; }
.wb-table-card .wb-table,
.wb-table-wrap .wb-table {
  margin: 0;
  border-radius: 0;
}
.wb-table-card__filters {
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface-secondary);
}
.wb-filter-panel:has(+ .wb-table-card) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  margin-bottom: 0;
}
.wb-filter-panel + .wb-table-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.wb-table-card .wb-table th:first-child, .wb-table-card .wb-table td:first-child { padding-left: 1rem; }
.wb-table-card .wb-table th:last-child, .wb-table-card .wb-table td:last-child { padding-right: 1rem; }
.wb-pagination {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; border-top: 1px solid var(--divider); background: var(--bg-surface-secondary);
  overflow: visible;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.wb-pagination__summary {
  margin: 0; font-size: var(--text-body-sm-size); color: var(--text-tertiary);
}
.wb-pagination__controls {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: flex-end; margin-left: auto;
  overflow: visible; min-width: 0; flex: 1 1 auto;
}
.wb-pagination__per-page { margin: 0; position: relative; }
.wb-pagination__per-page .wb-select.is-open { z-index: 80; }
.wb-pagination__per-page label {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-size: var(--text-body-sm-size); color: var(--text-tertiary);
}
.wb-pagination__per-page .wb-select { min-width: 72px; }
.wb-pagination__per-page .wb-select__trigger { height: 32px; min-height: 32px; padding: 0 .55rem; font-size: var(--text-body-sm-size); border-radius: var(--radius-sm); }
.wb-pagination__nav-scroll { min-width: 0; flex: 1 1 auto; max-width: 100%; }
.wb-pagination__nav {
  display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px;
  max-width: 100%; min-width: 0;
}
.wb-scroll-hint > .wb-pagination__nav {
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  justify-content: flex-start; width: 100%;
}
.wb-pagination__btn,
.wb-pagination__ellipsis { flex: 0 0 auto; }
.wb-pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 .5rem;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-secondary);
  text-decoration: none; font-size: var(--text-body-sm-size); line-height: 1;
  cursor: pointer; font-family: inherit; font-weight: 500;
  transition: border-color .12s, background .12s, color .12s, transform .08s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
button.wb-pagination__btn { appearance: none; }
.wb-pagination__btn:hover:not(.is-disabled):not(.is-current) {
  border-color: var(--border-brand); color: var(--text-link); background: var(--selection-hover);
}
.wb-pagination__btn:active:not(.is-disabled):not(.is-current),
.wb-pagination__btn.is-pressed:not(.is-disabled):not(.is-current) {
  transform: scale(0.94); background: var(--selection-pressed);
}
.wb-pagination__btn.is-current {
  background: var(--selection-bg); border-color: var(--selection-border);
  color: var(--selection-text); font-weight: 700; cursor: default;
}
.wb-pagination__btn.is-disabled {
  opacity: .4; cursor: not-allowed; pointer-events: none;
}
.wb-pagination__ellipsis {
  min-width: 20px; text-align: center; color: var(--text-tertiary);
  font-size: var(--text-body-sm-size); padding: 0 .15rem;
}
.ds-pagination-states { display: grid; gap: 1rem; }
.ds-pagination-states__item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: visible; }
.ds-pagination-states__label {
  padding: .45rem .75rem; font-size: var(--text-caption-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary);
  background: var(--bg-surface-secondary); border-bottom: 1px solid var(--border-subtle);
}

/* Loading screens */
.wb-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  padding: 2rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.wb-loading__spinner {
  width: 32px; height: 32px; border: 3px solid var(--border-default);
  border-top-color: var(--action-primary); border-radius: 50%;
  animation: wb-spin .75s linear infinite;
}
.wb-loading__label { margin: 0; font-size: var(--text-body-sm-size); color: var(--text-tertiary); }
.wb-loading__hint {
  margin: 0; font-size: var(--text-caption-size); color: var(--text-tertiary);
  text-align: center; max-width: 30ch; line-height: 1.45;
}
.wb-loading__title { margin: 0; font-size: var(--text-h4-size); color: var(--text-primary); text-align: center; }
.wb-loading__desc {
  margin: 0; font-size: var(--text-body-sm-size); color: var(--text-tertiary);
  text-align: center; max-width: 34ch; line-height: 1.45;
}
.wb-loading__icon {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
.wb-loading__icon .wb-icon { width: 20px; height: 20px; }
.wb-loading__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .15rem; }
.wb-loading--timeout {
  border-color: var(--warning-border);
  background: color-mix(in srgb, var(--warning-bg) 55%, var(--bg-surface));
}
.wb-loading--timeout .wb-loading__spinner {
  border-top-color: var(--warning-main); animation-duration: 1.15s;
}
.wb-loading--timeout .wb-loading__icon {
  background: var(--warning-bg); color: var(--warning-text); border: 1.5px solid var(--warning-border);
}
.wb-loading--timeout .wb-loading__label { color: var(--warning-text); font-weight: 600; }
.wb-loading--error {
  border-color: var(--error-border); background: var(--error-bg);
}
.wb-loading--error .wb-loading__icon { background: var(--error-main); color: #fff; }
.wb-loading--error .wb-loading__title { color: var(--error-text); }
.wb-loading--error .wb-loading__desc { color: color-mix(in srgb, var(--error-text) 75%, var(--text-tertiary)); }
.wb-loading-demo__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem;
}
.wb-loading-demo__badge {
  font-size: var(--text-caption-size); font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em; margin-right: auto;
}
.wb-loading--overlay {
  position: relative; min-height: 200px;
}
.wb-loading--overlay .wb-loading {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  backdrop-filter: blur(2px); z-index: 5; border: 0; border-radius: inherit;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }
@keyframes wb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.wb-skeleton--shimmer {
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%; animation: wb-shimmer 1.4s ease-in-out infinite;
}

/* Drag & drop — chips + drop zones */
.wb-dnd-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .75rem; }
.wb-dnd-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--bg-surface-secondary); color: var(--text-secondary);
  font-size: var(--text-caption-size); font-weight: 500; cursor: grab; user-select: none;
  transition: background .12s, border-color .12s, transform .08s, box-shadow .12s;
}
.wb-dnd-chip:active { cursor: grabbing; transform: scale(.96); }
.wb-dnd-chip.is-dragging { opacity: .45; box-shadow: var(--shadow-md); }
.wb-dnd-chip__handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: .75rem; height: .75rem; opacity: .5; color: var(--text-tertiary); flex-shrink: 0;
}
.wb-dropzone {
  min-height: 120px; padding: 1rem; border: 2px dashed color-mix(in srgb, var(--border-default) 80%, var(--action-primary));
  border-radius: var(--radius-md); background: var(--bg-surface); transition: border-color .15s, background .15s, box-shadow .15s;
}
.wb-dropzone--text.is-drag-over,
.wb-dropzone.is-drag-over:not(.wb-dropzone--file):not(.wb-dropzone--tile) {
  border-color: var(--action-primary); background: var(--selection-hover);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--action-primary) 25%, transparent);
}
.wb-dropzone--text.is-drag-over::before {
  content: 'Hier ablegen'; display: block; text-align: center; font-size: var(--text-caption-size);
  font-weight: 600; color: var(--action-primary); margin-bottom: .5rem;
}
.wb-dropzone--file,
.wb-dropzone--tile {
  min-height: 176px; padding: 0; cursor: pointer; position: relative; overflow: hidden;
  border-color: color-mix(in srgb, var(--border-default) 70%, var(--action-primary));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--action-primary) 5%, var(--bg-surface-secondary)) 0%, var(--bg-surface) 55%);
}
.wb-dropzone--file:hover,
.wb-dropzone--tile:hover {
  border-color: var(--input-border-hover);
  box-shadow: var(--shadow-sm);
}
.wb-dropzone--file.is-drag-over,
.wb-dropzone--tile.is-drag-over {
  border-color: var(--action-primary); border-style: solid;
  background: color-mix(in srgb, var(--selection-hover) 65%, var(--bg-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 18%, transparent);
}
.wb-dropzone--file.has-file,
.wb-dropzone--tile.has-file {
  cursor: default; border-style: solid; border-color: var(--border-default); background: var(--bg-surface);
}
.wb-dropzone__input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.wb-dropzone__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 176px; padding: 1.35rem 1.25rem; text-align: center; gap: .15rem;
  transition: opacity .15s, transform .15s;
}
.wb-dropzone.is-drag-over .wb-dropzone__empty { opacity: .72; transform: scale(0.985); }
.wb-dropzone__icon-ring {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: .45rem;
  background: color-mix(in srgb, var(--action-primary) 10%, var(--bg-surface));
  border: 1.5px solid color-mix(in srgb, var(--action-primary) 24%, var(--border-subtle));
  color: var(--action-primary);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}
.wb-dropzone__icon-ring svg { width: 1.35rem; height: 1.35rem; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wb-dropzone__formats {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: .55rem;
}
.wb-dropzone__format {
  padding: .18rem .5rem; border-radius: var(--radius-pill);
  background: var(--bg-surface-secondary); border: 1px solid var(--border-subtle);
  font-size: .62rem; font-weight: 700; color: var(--text-tertiary);
  letter-spacing: .04em; text-transform: uppercase;
}
.wb-dropzone__browse {
  border: 0; background: none; padding: 0; margin: 0;
  color: var(--text-link); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.wb-dropzone__browse:hover { color: var(--action-primary-hover); }
.wb-dropzone__browse:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-primary); border-radius: 2px; }
.wb-dropzone__file-preview {
  display: none; grid-template-columns: 4.5rem 1fr auto; gap: .75rem; align-items: center;
  width: 100%; padding: .85rem 1rem;
}
.wb-dropzone.has-file .wb-dropzone__empty { display: none; }
.wb-dropzone.has-file .wb-dropzone__file-preview { display: grid; }
.wb-dropzone__thumb {
  width: 4.5rem; height: 3.4rem; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: var(--bg-surface-secondary);
}
.wb-dropzone__file-meta { min-width: 0; text-align: left; }
.wb-dropzone__file-name {
  margin: 0; font-size: var(--text-body-sm-size); font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-dropzone__file-size { margin: .15rem 0 0; font-size: var(--text-caption-size); color: var(--text-tertiary); }
.wb-dropzone__file-remove {
  width: 2rem; height: 2rem; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface-secondary); color: var(--text-tertiary); cursor: pointer;
  display: grid; place-items: center; font-size: 1rem; line-height: 1; flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.wb-dropzone__file-remove:hover { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.wb-dropzone__file-remove:active,
.wb-dropzone__file-remove.is-pressed { transform: scale(0.92); }
.wb-dropzone__file-remove:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-primary); }
.wb-dropzone--tile { min-height: 140px; }
.wb-dropzone--tile .wb-dropzone__empty { min-height: 140px; }
.wb-dropzone--tile .wb-dropzone__icon-ring {
  width: 2.75rem; height: 2.75rem; margin-bottom: .35rem;
  background: var(--bg-surface-secondary); border-color: var(--border-subtle); color: var(--text-secondary);
}
.wb-dropzone__hint { margin: 0; font-size: var(--text-caption-size); color: var(--text-tertiary); text-align: center; max-width: 18rem; line-height: 1.45; }
.wb-dropzone__title { margin: 0 0 .15rem; font-size: var(--text-body-sm-size); font-weight: 700; color: var(--text-primary); }
.wb-dropzone__preview {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem;
}
.wb-dropzone__chip {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .2rem .3rem .2rem .5rem; border-radius: var(--radius-pill);
  background: var(--selection-bg); color: var(--selection-text);
  font-size: var(--text-caption-size); font-weight: 500;
}
.wb-dropzone__chip-label { line-height: 1.3; }
.wb-dropzone__chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: inherit; opacity: .65; cursor: pointer; font: inherit;
  font-size: .95rem; line-height: 1; flex-shrink: 0;
  transition: opacity .12s, background .12s, transform .08s;
}
.wb-dropzone__chip-remove:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.wb-dropzone__chip-remove:active,
.wb-dropzone__chip-remove.is-pressed { transform: scale(0.9); opacity: 1; }
.wb-dropzone__chip-remove:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--focus-ring-primary);
}

/* Icon inventory */
.wb-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .65rem; }
.wb-icon-item {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .5rem;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface-secondary);
  text-align: center;
}
.wb-icon-item__glyph {
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--icon-primary);
}
.wb-icon-item__glyph svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.wb-icon-item__glyph svg[fill="currentColor"] { fill: currentColor; stroke: none; }
.wb-icon-item__glyph .dashicons { width: 20px; height: 20px; font-size: 20px; line-height: 20px; color: var(--icon-primary); }
.wb-icon-item__glyph img { width: 20px; height: 20px; display: block; }
.wb-icon-item__name { font-size: .58rem; font-family: ui-monospace, monospace; color: var(--text-tertiary); word-break: break-all; line-height: 1.35; }
.wb-icon-cat {
  margin: 1.15rem 0 .55rem; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-tertiary);
}
.wb-icon-cat:first-child { margin-top: 0; }

body.wb-ui, body.wb-ui-scheme-light, .wb-booking {
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.25' stroke='%2364748B' stroke-width='1.5'/%3E%3Cpath stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' d='M10.5 10.5L14 14'/%3E%3C/svg%3E");
}
body.wb-ui-scheme-dark {
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.25' stroke='%23A8B2C1' stroke-width='1.5'/%3E%3Cpath stroke='%23A8B2C1' stroke-width='1.5' stroke-linecap='round' d='M10.5 10.5L14 14'/%3E%3C/svg%3E");
}

/* Hide native select chrome in preview — use wb-select instead */
.wb-field select:not(.wb-native-select) {
  appearance: none; -webkit-appearance: none;
  background-image: var(--icon-select-chevron);
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px;
  padding-right: 2.25rem; cursor: pointer;
}

/* ============================================================
   Responsiveness — breakpoints, viewport bar, container demos
   ============================================================ */
.ds-viewport-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .5rem .85rem; margin: -1.5rem -2rem 1.25rem;
  background: color-mix(in srgb, var(--action-primary) 8%, var(--bg-surface));
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-caption-size); color: var(--text-secondary);
}
@media (max-width: 540px) {
  .ds-viewport-bar { margin: -1rem -1rem 1rem; }
}
.ds-viewport-bar strong { color: var(--text-primary); font-weight: 600; }
.ds-viewport-bar__bp {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .5rem; border-radius: var(--radius-pill);
  background: var(--bg-surface-secondary); font-family: ui-monospace, monospace; font-size: .68rem;
}
.ds-viewport-bar__bp.is-active { background: var(--selection-bg); color: var(--selection-text); font-weight: 600; }

.ds-bp-scale {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: .5rem;
}
.ds-bp-scale__item {
  padding: .65rem .75rem; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle); background: var(--bg-surface-secondary);
}
.ds-bp-scale__item.is-active {
  border-color: var(--selection-border); background: var(--selection-bg);
}
.ds-bp-scale__name { font-weight: 700; font-size: var(--text-body-sm-size); color: var(--text-primary); margin: 0 0 .15rem; }
.ds-bp-scale__range { font-family: ui-monospace, monospace; font-size: .68rem; color: var(--text-tertiary); margin: 0 0 .25rem; }
.ds-bp-scale__use { font-size: .68rem; color: var(--text-secondary); margin: 0; line-height: 1.4; }

.ds-r-matrix { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--text-caption-size); }
.ds-r-matrix th, .ds-r-matrix td {
  padding: .55rem .65rem; text-align: left; border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.ds-r-matrix th { background: var(--bg-surface-secondary); color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .62rem; }
.ds-r-matrix code { font-size: .9em; }

.ds-viewport-demos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1rem; align-items: start; justify-items: start;
}
.ds-viewport-demo {
  border: 1.5px solid var(--border-default); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-surface);
}
.ds-viewport-demo--sm { width: min(100%, 360px); }
.ds-viewport-demo--md { width: min(100%, 720px); }
.ds-viewport-demo--lg { width: 100%; }
.ds-viewport-demo__head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .45rem .65rem; background: var(--bg-surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-caption-size); font-weight: 600; color: var(--text-secondary);
}
.ds-viewport-demo__size { font-family: ui-monospace, monospace; color: var(--text-primary); }
.ds-viewport-demo__frame {
  container-type: inline-size;
  container-name: wb-responsive;
  width: 100%;
  padding: .75rem;
  overflow-x: auto;
  background: var(--bg-page);
}

/* Container-query mirrors of documented viewport tokens inside demo frames */
@container wb-responsive (max-width: 540px) {
  .ds-viewport-demo__frame .wb-field-row { grid-template-columns: 1fr !important; }
  .ds-viewport-demo__frame .wb-date-range { grid-template-columns: 1fr !important; }
  .ds-viewport-demo__frame .wb-action-bar { flex-direction: column; align-items: stretch; }
  .ds-viewport-demo__frame .wb-action-bar__start,
  .ds-viewport-demo__frame .wb-action-bar__end {
    flex-direction: column; align-items: stretch;
    margin-left: 0; width: 100%;
  }
  .ds-viewport-demo__frame .wb-action-bar__start .ds-specimen,
  .ds-viewport-demo__frame .wb-action-bar__end .ds-specimen {
    width: 100%; align-items: stretch;
  }
  .ds-viewport-demo__frame .wb-action-bar__start .wb-btn,
  .ds-viewport-demo__frame .wb-action-bar__end .wb-btn { width: 100%; flex: none; }
  .ds-viewport-demo__frame .wb-action-bar__danger-zone {
    display: block; width: 100%;
    border-right: 0; padding-right: 0; margin-right: 0;
    border-bottom: 1px solid var(--divider);
    padding-bottom: .75rem; margin-bottom: .15rem;
  }
  .ds-viewport-demo__frame .wb-search__grid { grid-template-columns: 1fr !important; }
  .ds-viewport-demo__frame .wb-search__submit { width: 100%; grid-column: 1 / -1; }
  .ds-viewport-demo__frame .wb-pagination { flex-direction: column; align-items: stretch; }
  .ds-viewport-demo__frame .wb-pagination__controls { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: .65rem; }
  .ds-viewport-demo__frame .wb-pagination__nav-scroll { width: 100%; flex: none; }
  .ds-viewport-demo__frame .wb-scroll-hint > .wb-pagination__nav { justify-content: center; }
  .ds-viewport-demo__frame .wb-filter-bar { grid-template-columns: 1fr; }
  .ds-viewport-demo__frame .wb-filter-field,
  .ds-viewport-demo__frame .wb-filter-field--narrow,
  .ds-viewport-demo__frame .wb-filter-field--search,
  .ds-viewport-demo__frame .wb-filter-field--action { grid-column: 1 / -1; }
  .ds-viewport-demo__frame .wb-filter-chip { flex: 1 1 calc(50% - .4rem); min-width: 0; }
}
@container wb-responsive (max-width: 768px) {
  .ds-viewport-demo__frame .wb-rooms-grid--cols-3 { grid-template-columns: 1fr !important; }
  .ds-viewport-demo__frame .wb-card--room { grid-template-columns: 1fr !important; }
}
@container wb-responsive (max-width: 860px) {
  .ds-viewport-demo__frame .wb-booking-layout { grid-template-columns: 1fr !important; }
  .ds-viewport-demo__frame .wb-booking-layout__sidebar { order: -1; }
}
@container wb-responsive (max-width: 960px) {
  .ds-viewport-demo__frame .wb-filter-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end; gap: .75rem;
  }
  .ds-viewport-demo__frame .wb-filter-field,
  .ds-viewport-demo__frame .wb-filter-field--narrow,
  .ds-viewport-demo__frame .wb-filter-field--search { flex: unset; min-width: 0; max-width: none; }
  .ds-viewport-demo__frame .wb-filter-field--search { grid-column: 1 / -1; }
  .ds-viewport-demo__frame .wb-filter-field--action .wb-filter-field__label--spacer { display: none; }
  .ds-viewport-demo__frame .wb-filter-field--action .wb-filter-actions__btn { width: 100%; }
  .ds-viewport-demo__frame .wb-filter-chip { flex: 1 1 auto; min-width: 5.25rem; }
}

.wb-booking-layout {
  display: grid; grid-template-columns: 1fr 220px; gap: .75rem; align-items: start;
}
.wb-booking-layout__sidebar {
  padding: .65rem .75rem; background: var(--selection-bg); border-radius: var(--radius-md);
  font-size: var(--text-caption-size); color: var(--selection-text);
}
.ds-r-pattern-list { margin: 0; padding-left: 1.15rem; color: var(--text-secondary); font-size: var(--text-body-sm-size); line-height: 1.55; }
.ds-r-pattern-list li { margin-bottom: .4rem; }

/* ============================================================
   Logos & product brand (StayBooking — not customer hotels)
   ============================================================ */
.ds-brand__mark img { width: 36px; height: 36px; display: block; object-fit: contain; }

.ds-logo-colors {
  display: flex; flex-wrap: wrap; gap: .65rem;
}
.ds-logo-color {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .65rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle); background: var(--bg-surface-secondary);
  font-size: var(--text-caption-size);
}
.ds-logo-color__swatch {
  width: 1.25rem; height: 1.25rem; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent);
}

.ds-logo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .85rem;
}
.ds-logo-card {
  border: 1.5px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-surface);
}
.ds-logo-card__surface {
  display: flex; align-items: center; justify-content: center;
  min-height: 5.5rem; padding: 1rem 1.15rem;
}
.ds-logo-card__surface--light { background: #ffffff; }
.ds-logo-card__surface--dark { background: #001A3F; }
.ds-logo-card__surface--blue { background: #005FF9; }
.ds-logo-card__surface--muted { background: var(--bg-surface-secondary); }
.ds-logo-card__surface--page { background: var(--bg-page); }
.ds-logo-card__surface--wp-menu { background: #1d2327; }
.ds-logo-card__img {
  display: block; width: min(100%, 260px); height: auto; max-height: 56px; object-fit: contain;
}
.ds-logo-card__meta {
  padding: .55rem .75rem; border-top: 1px solid var(--border-subtle);
  font-size: var(--text-caption-size); color: var(--text-secondary); line-height: 1.45;
}
.ds-logo-card__meta code { font-size: .82em; color: var(--text-primary); }

.ds-logo-fav-grid {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
}
.ds-logo-fav {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .75rem; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle); background: var(--bg-surface-secondary);
  min-width: 5.5rem;
}
.ds-logo-fav__surface {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--radius-sm);
}
.ds-logo-fav__surface--dark { background: #1d2327; }
.ds-logo-fav__surface--light { background: #fff; border: 1px solid var(--border-subtle); }
.ds-logo-fav img { width: 20px; height: 20px; display: block; }
.ds-logo-fav__label { font-size: .62rem; color: var(--text-tertiary); text-align: center; font-family: ui-monospace, monospace; }

.wb-brand-panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: .85rem 1rem; border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-surface); max-width: 22rem;
}
.wb-brand-panel__logo {
  display: block; width: min(320px, 100%); height: auto;
}
.wb-brand-panel__meta {
  margin: 0; font-size: var(--text-caption-size); color: var(--text-tertiary);
}
.wb-brand-logo { display: block; height: auto; }
.wb-empty-state__logo { display: block; width: 48px; height: 48px; margin: 0 auto; }

.ds-logo-usage { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: var(--text-caption-size); }
.ds-logo-usage th, .ds-logo-usage td {
  padding: .55rem .65rem; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: top;
}
.ds-logo-usage th {
  background: var(--bg-surface-secondary); color: var(--text-tertiary); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; font-size: .62rem;
}

.ds-logo-donts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .65rem;
}
.ds-logo-dont {
  padding: .65rem; border-radius: var(--radius-md); border: 1.5px dashed var(--border-default);
  font-size: var(--text-caption-size); color: var(--text-tertiary); text-align: center;
}
.ds-logo-dont__sample {
  display: flex; align-items: center; justify-content: center;
  min-height: 3rem; margin-bottom: .4rem; opacity: .55; filter: saturate(.4);
}

/* ============================================================
   Viewport @media — productive rules matching :root tokens
   Order: large → small so the tightest max-width wins.
   ============================================================ */

/* --bp-xl: 960px — admin filter stack, search 2-col */
@media (max-width: 960px) {
  .ds-sidebar { min-width: 0; }
  .wb-filter-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end; gap: .75rem;
  }
  .wb-filter-field,
  .wb-filter-field--narrow,
  .wb-filter-field--search,
  .wb-filter-field--date-range { flex: unset; min-width: 0; max-width: none; width: auto; }
  .wb-filter-field--search,
  .wb-filter-field--date-range { grid-column: 1 / -1; }
  .wb-filter-field--action .wb-filter-field__label--spacer { display: none; }
  .wb-filter-field--action .wb-filter-actions__btn { width: 100%; }
  .wb-filter-chip { flex: 1 1 auto; min-width: 5.25rem; }
  .wb-search__grid { grid-template-columns: 1fr 1fr; }
  .wb-cal-overview__months { grid-template-columns: 1fr 1fr; }
}

/* --bp-lg: 860px — booking sidebar above form */
@media (max-width: 860px) {
  .wb-booking-layout { grid-template-columns: 1fr; }
  .wb-booking-layout__sidebar { order: -1; }
}

/* --bp-md: 768px — room cards, room grid, calendar (grid already at 768) */
@media (max-width: 768px) {
  .wb-card--room { grid-template-columns: 1fr; }
  .wb-card--room .wb-card__media img { height: auto; max-height: 180px; }
  .wb-search__grid { grid-template-columns: 1fr 1fr; }
  .wb-cal-overview__months { grid-template-columns: 1fr; }
}

/* --bp-sm: 540px — field rows, action bars, search 1-col, pagination */
@media (max-width: 540px) {
  .wb-cal-overview__toolbar { flex-direction: column; align-items: stretch; }
  .wb-cal-overview__spans { justify-content: center; }
  .wb-cal-overview__nav { margin-left: 0; width: 100%; }
  .ds-type-scale__row {
    grid-template-columns: 1fr;
    gap: .35rem;
  }
  .ds-type-scale__size { text-align: left; }
  .wb-action-bar { flex-direction: column; align-items: stretch; }
  .wb-action-bar__start,
  .wb-action-bar__end {
    flex-direction: column; align-items: stretch;
    margin-left: 0; width: 100%;
  }
  .wb-action-bar__start .ds-specimen,
  .wb-action-bar__end .ds-specimen {
    width: 100%; align-items: stretch;
  }
  .wb-action-bar__start .wb-btn,
  .wb-action-bar__end .wb-btn { width: 100%; flex: none; }
  .wb-action-bar__danger-zone {
    display: block; width: 100%;
    border-right: 0; padding-right: 0; margin-right: 0;
    border-bottom: 1px solid var(--divider);
    padding-bottom: .75rem; margin-bottom: .15rem;
  }
  .wb-search__grid { grid-template-columns: 1fr; }
  .wb-search__submit { width: 100%; grid-column: 1 / -1; }
  .wb-pagination { flex-direction: column; align-items: stretch; }
  .wb-pagination__controls { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: .65rem; }
  .wb-pagination__per-page label { width: 100%; justify-content: space-between; }
  .wb-pagination__nav-scroll { width: 100%; flex: none; }
  .wb-scroll-hint > .wb-pagination__nav { justify-content: center; }
  .wb-upgrade-card { grid-template-columns: 56px minmax(0, 1fr); }
  .wb-upgrade-card__delta {
    grid-column: 1 / -1; white-space: normal; text-align: right;
  }
  .wb-dropzone__file-preview { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .wb-dropzone__file-remove { grid-column: 2; justify-self: end; }
  .wb-input-action-row,
  .wb-coupon-row {
    flex-direction: column; align-items: stretch; gap: .5rem;
  }
  .wb-input-action-row .wb-field,
  .wb-coupon-row .wb-field { flex: none; width: 100%; min-width: 0; }
  .wb-input-action-row > .wb-btn,
  .wb-coupon-row > .wb-btn {
    width: 100%; flex: none; align-self: stretch;
  }
  .wb-extra-item.is-active,
  .wb-extra-item--binary:has(.wb-toggle__input:checked) { margin-inline: 0; }
  .wb-extra-item__option { flex-direction: column; align-items: stretch; }
  .wb-extra-item__time-label { padding-bottom: 0; }
  .wb-extra-item__option .wb-time-picker {
    flex: 0 0 auto; align-self: stretch;
    max-width: none; width: 100%;
  }
  .wb-filter-bar { grid-template-columns: 1fr; }
  .wb-filter-field,
  .wb-filter-field--narrow,
  .wb-filter-field--search,
  .wb-filter-field--date-range,
  .wb-filter-field--action { grid-column: 1 / -1; min-width: 0; max-width: none; }
  .wb-filter-field--date-range .wb-date-range--inline .wb-date-picker__trigger { min-width: 0; }
  .wb-filter-field--action .wb-filter-actions__btn { width: 100%; }
  .wb-filter-chip { flex: 1 1 calc(50% - .4rem); min-width: 0; }
  .wb-order-card__head { flex-wrap: wrap; }
  .wb-steps__list {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    scrollbar-gutter: stable; padding-bottom: .15rem;
  }
  .wb-steps__item {
    flex: 0 0 auto; min-width: 6.25rem; max-width: none;
    scroll-snap-align: start;
  }
  .wb-tabs__tab { padding: .6rem .85rem; font-size: .8125rem; }
}

/* --bp-xs: 480px — admin summary 1-col, compact chrome */
@media (max-width: 480px) {
  .wb-tier-picker__options { grid-template-columns: 1fr; }
  .wb-booking-summary-strip { display: grid; grid-template-columns: 1fr; }
  .ds-panel { padding: 1rem; }
}

/* ================================================================
   Integration — shell, layout, legacy admin bridge
   ================================================================ */

body.wb-ui {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.wb-booking {
  font-family: var(--font);
  color: var(--text-primary);
  max-width: 1080px;
  margin: 0 auto;
}

.wb-booking__layout,
.wb-booking-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .wb-booking__layout,
  .wb-booking-layout { grid-template-columns: 1fr; }
  .wb-booking__sidebar,
  .wb-booking-layout__sidebar { order: -1; }
}

/* Legacy --wb-* bridge for admin.css */
body.wb-ui,
body.wb-ui-scheme-light,
body.wb-ui-scheme-dark,
body.wb-ui-scheme-auto,
.wb-booking {
  --wb-brand: var(--brand-primary);
  --wb-accent: var(--brand-primary);
  --wb-accent-fg: var(--text-on-primary);
  --wb-primary: var(--brand-primary);
  --wb-accent-soft: var(--selection-bg);
  --wb-accent-muted: color-mix(in srgb, var(--brand-primary) 35%, var(--bg-surface));
  --wb-tab-active-bg: var(--selection-bg);
  --wb-tab-hover-bg: var(--bg-surface-secondary);
  --wb-tab-press-bg: color-mix(in srgb, var(--brand-primary) 12%, var(--bg-surface-secondary));
  --wb-btn-press-bg: color-mix(in srgb, var(--brand-primary) 12%, var(--bg-surface-secondary));
  --wb-mix-base: var(--bg-surface);
  --wb-border-strong: var(--border-strong);
  --wb-input-bg: var(--input-bg);
  --wb-danger: var(--error-main);
  --wb-danger-fg: var(--error-text);
  --wb-warning: var(--warning-main);
  --wb-success: var(--success-main);
  --wb-info: var(--info-text);
  --wb-surface: var(--bg-surface);
  --wb-surface-muted: var(--bg-surface-secondary);
  --wb-surface-alt: var(--bg-surface-secondary);
  --wb-border: var(--border-default);
  --wb-text: var(--text-primary);
  --wb-text-muted: var(--text-tertiary);
  --wb-muted: var(--text-tertiary);
  --wb-link: var(--text-link);
  --wb-link-hover: var(--action-primary-hover);
  --wb-link-on-light: var(--text-link);
  --wb-link-on-light-hover: var(--action-primary-pressed);
  --wb-canvas: var(--bg-page);
  --wb-toolbar-bg: var(--bg-surface-secondary);
  --wb-table-head-bg: var(--table-header-bg, var(--bg-surface-secondary));
  --wb-table-head-fg: var(--table-header-text);
  --wb-radius-sm: var(--radius-sm);
  --wb-radius-md: var(--radius-md);
  --wb-space-sm: 8px;
  --wb-space-md: 16px;
  --wb-space-lg: 24px;
  --wb-shadow-sm: var(--shadow-sm);
  --wb-shadow-md: var(--shadow-md);
  --wb-badge-pending-bg: var(--warning-bg);
  --wb-badge-pending-fg: var(--warning-text);
  --wb-badge-confirmed-bg: var(--success-bg);
  --wb-badge-confirmed-fg: var(--success-text);
  --wb-badge-checked-in-bg: var(--info-bg);
  --wb-badge-checked-in-fg: var(--info-text);
  --wb-badge-neutral-bg: var(--bg-surface-secondary);
  --wb-badge-neutral-fg: var(--text-tertiary);
  --wb-badge-cancelled-bg: var(--error-bg);
  --wb-badge-cancelled-fg: var(--error-text);
  --wb-badge-no-show-fg: var(--text-tertiary);
  --wb-badge-source-web-bg: var(--info-bg);
  --wb-badge-source-web-fg: var(--info-text);
  --wb-badge-source-channel-bg: color-mix(in srgb, var(--brand-primary) 12%, var(--bg-surface));
  --wb-badge-source-channel-fg: var(--text-link);
  --wb-badge-source-expedia-bg: var(--warning-bg);
  --wb-badge-source-expedia-fg: var(--warning-text);
  --wb-badge-source-airbnb-bg: var(--error-bg);
  --wb-badge-source-airbnb-fg: var(--error-text);
  --wb-badge-active-bg: var(--success-bg);
  --wb-badge-active-fg: var(--success-text);
  --wb-badge-active-border: color-mix(in srgb, var(--success-main) 45%, transparent);
  --wb-badge-inactive-bg: var(--bg-surface-secondary);
  --wb-badge-inactive-fg: var(--text-tertiary);
  --wb-occ-free: var(--bg-surface);
  --wb-occ-pending: var(--warning-bg);
  --wb-occ-confirmed: var(--success-bg);
  --wb-occ-cancelled: var(--error-bg);
  --wb-occ-manual: var(--bg-surface-tertiary);
  --wb-occ-selecting: var(--selection-bg);
  --wb-cal-occupied: var(--cal-occupied-bg);
  --wb-cal-blocked: var(--cal-blocked-bg);
  --wb-cal-empty: var(--bg-surface-secondary);
  --wb-cal-empty-fg: var(--text-disabled);
  --wb-grid-available: var(--success-bg);
  --wb-grid-occupied: var(--error-bg);
  --wb-grid-blackout: var(--bg-disabled);
  --wb-grid-blackout-fg: var(--text-tertiary);
  --wb-grid-no-rate: var(--warning-bg);
  --wb-toggle-track-off: var(--toggle-track-off);
  --wb-toggle-track-on: var(--toggle-track-on);
  --wb-toggle-track-border: transparent;
  --wb-toggle-thumb: var(--toggle-thumb);
  --wb-toggle-label-on: var(--selection-text);
  --wb-toggle-label-off: var(--text-tertiary);
  --wb-select-chevron: var(--icon-select-chevron);
  --wb-date-calendar-icon: var(--icon-date-calendar);
  --wb-time-clock-icon: var(--icon-time-clock);
  --wb-code-chip-bg: color-mix(in srgb, var(--selection-bg) 80%, var(--bg-surface-secondary));
  --wb-code-chip-fg: var(--text-primary);
  --wb-code-chip-border: color-mix(in srgb, var(--brand-primary) 24%, var(--border-default));
  --wb-tooltip-bg: var(--tooltip-bg);
  --wb-tooltip-fg: var(--tooltip-fg);
  --wb-drawer-surface: var(--bg-surface);
  --wb-drawer-surface-muted: var(--bg-surface-secondary);
  --wb-drawer-border: var(--border-default);
  --wb-drawer-text: var(--text-primary);
  --wb-drawer-text-muted: var(--text-tertiary);
}

@media (prefers-color-scheme: dark) {
  body.wb-ui-scheme-auto {
    --brand-primary: #4D8FFF;
    --brand-secondary: #8DB9FF;
    --brand-tertiary: #AEB1BF;

    --text-primary: #F5F8FC;
    --text-secondary: #C4CBD6;
    --text-tertiary: #929CAB;
    --text-disabled: #667085;
    --text-link: #6EA1FF;

    --bg-page: #07111F;
    --bg-surface: #0D1A2B;
    --bg-surface-secondary: #142338;
    --bg-surface-tertiary: #1B2B42;
    --bg-elevated: #17263A;
    --bg-disabled: #1A2636;
    --bg-overlay: rgba(0,0,0,.70);

    --action-primary: #2875FF;
    --action-primary-hover: #4D8FFF;
    --action-primary-pressed: #1764E8;
    --action-primary-disabled: #294467;
    --focus-ring-primary: rgba(110,161,255,.28);

    --btn-secondary-bg: #0D1A2B;
    --btn-secondary-hover: #162B48;
    --btn-secondary-pressed: #1B365D;
    --btn-secondary-border: #6EA1FF;
    --btn-secondary-text: #8DB9FF;

    --btn-ghost-hover: #142B49;
    --btn-ghost-pressed: #19385F;
    --btn-ghost-text: #C4CBD6;
    --btn-ghost-border: transparent;

    --btn-danger-bg: #0D1A2B;
    --btn-danger-border: #FF746B;
    --btn-danger-text: #FDA29B;
    --btn-danger-hover-bg: #321817;
    --btn-danger-filled: #D92D20;
    --btn-danger-filled-hover: #FF746B;

    --input-bg: #0D1A2B;
    --input-border: #39485C;
    --input-border-hover: #5A687B;
    --input-border-focus: #6EA1FF;
    --input-focus-ring: rgba(110,161,255,.22);
    --input-placeholder: #929CAB;
    --input-error: #FF746B;

    --border-subtle: #26364A;
    --border-default: #39485C;
    --border-strong: #59697E;
    --divider: #253449;
    --border-brand: #6EA1FF;

    --icon-primary: #F5F8FC;
    --icon-secondary: #A8B2C1;
    --icon-brand: #6EA1FF;

    --success-main: #4ADE80;
    --success-bg: #102A1C;
    --success-border: #245E3A;
    --success-text: #86EFAC;

    --warning-main: #FBBF24;
    --warning-bg: #30230C;
    --warning-border: #6A4B12;
    --warning-text: #FCD34D;

    --error-main: #FF746B;
    --error-bg: #321817;
    --error-border: #73302C;
    --error-text: #FDA29B;

    --cal-occupied-bg: color-mix(in srgb, var(--warning-main) 24%, var(--bg-surface));
    --cal-occupied-border: color-mix(in srgb, var(--warning-main) 40%, var(--border-default));
    --cal-occupied-text: var(--text-secondary);
    --cal-blocked-bg: color-mix(in srgb, var(--error-main) 22%, var(--bg-surface));
    --cal-blocked-border: color-mix(in srgb, var(--error-main) 35%, var(--border-default));
    --cal-blocked-text: var(--text-secondary);

    --info-bg: #132D52;
    --info-text: #8DB9FF;

    --selection-hover: #142B49;
    --selection-bg: #17355D;
    --selection-text: #A9C8FF;
    --selection-border: #6EA1FF;
    --selection-pressed: #1D4272;

    --step-done-bg: #102A1C;
    --step-done-text: #86EFAC;
    --step-done-border: #245E3A;
    --step-active-bg: #2875FF;
    --step-active-text: #FFFFFF;
    --step-pending-bg: #142338;
    --step-pending-text: #929CAB;

    --field-label: #DCE3EC;
    --field-required: #FF746B;

    --badge-brand-bg: color-mix(in srgb, var(--brand-primary) 16%, var(--bg-surface));
    --badge-brand-text: color-mix(in srgb, var(--brand-primary) 55%, #FFFFFF);
    --badge-brand-border: color-mix(in srgb, var(--brand-primary) 32%, var(--border-default));

    --table-header-bg: #142338;
    --table-header-text: #DCE3EC;
    --table-row-hover: #13243A;
    --table-row-selected: #17335A;

    --skeleton-base: #1A2A3E;
    --skeleton-highlight: #26384E;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
    --shadow-md: 0 8px 28px rgba(0,0,0,.35);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.45);

    --toggle-track-off: #334155;
    --toggle-track-on: var(--action-primary);
    --toggle-thumb: #F5F8FC;
    --tooltip-bg: #EEF0F4;
    --tooltip-fg: #0B1F3A;

    --icon-date-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3.5' width='12' height='10.5' rx='1.25' stroke='%23A8B2C1' stroke-width='1.5'/%3E%3Cpath stroke='%23A8B2C1' stroke-width='1.5' stroke-linecap='round' d='M2 7h12M5.5 2v2M10.5 2v2'/%3E%3C/svg%3E");
    --icon-time-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.75' stroke='%23A8B2C1' stroke-width='1.5'/%3E%3Cpath stroke='%23A8B2C1' stroke-width='1.5' stroke-linecap='round' d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E");
    --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23A8B2C1' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
}