/* HotelDash stylesheet. Built from main.css by build-css.mjs: edit the source files, then run node build-css.mjs. */
/* Tokens */
/* tokens/colors.css */
/* Design tokens from the Figma variables. Edit values here to re-theme. */

:root {
  /* Primary */
  --color-primary-50: #f3f9fa;
  --color-primary-100: #e4f1f4;
  --color-primary-200: #c9e0e6;
  --color-primary-300: #9fc4ce;
  --color-primary-400: #5c97a5;
  --color-primary-500: #0b6678;
  --color-primary-600: #09596a;
  --color-primary-700: #074b5a;
  --color-primary-800: #053d49;
  --color-primary-900: #032c36;
  --color-primary-950: #011a20;

  /* Neutral */
  --color-neutral-50: #ffffff;
  --color-neutral-100: #f7f7f7;
  --color-neutral-200: #ededed;
  --color-neutral-300: #d9d9d9;
  --color-neutral-400: #bfbfbf;
  --color-neutral-500: #9e9e9e;
  --color-neutral-600: #7a7a7a;
  --color-neutral-700: #555555;
  --color-neutral-800: #333333;
  --color-neutral-900: #1a1a1a;
  --color-neutral-950: #000000;

  /* Success */
  --color-success-50: #e5faef;
  --color-success-100: #cbf6df;
  --color-success-200: #9bedc1;
  --color-success-300: #68e4a1;
  --color-success-400: #34db81;
  --color-success-500: #20b364;
  --color-success-600: #1a8f50;
  --color-success-700: #136c3c;
  --color-success-800: #0d4a29;
  --color-success-900: #062313;
  --color-success-950: #03110a;

  /* Error */
  --color-error-50: #fbeaea;
  --color-error-100: #f7d4d5;
  --color-error-200: #efaeaf;
  --color-error-300: #e78484;
  --color-error-400: #de595a;
  --color-error-500: #d63031;
  --color-error-600: #af2323;
  --color-error-700: #841a1b;
  --color-error-800: #591212;
  --color-error-900: #2b0809;
  --color-error-950: #150404;

  /* Warning */
  --color-warning-50: #fef5e6;
  --color-warning-100: #fdecd3;
  --color-warning-200: #fcd7a1;
  --color-warning-300: #fac475;
  --color-warning-400: #f9b149;
  --color-warning-500: #f79e1b;
  --color-warning-600: #d48107;
  --color-warning-700: #9e6006;
  --color-warning-800: #673f04;
  --color-warning-900: #362102;
  --color-warning-950: #190f01;

  /* Info */
  --color-info-50: #e7f4fe;
  --color-info-100: #d3eafd;
  --color-info-200: #a8d6fa;
  --color-info-300: #78bff8;
  --color-info-400: #4caaf5;
  --color-info-500: #2196f3;
  --color-info-600: #0b79d0;
  --color-info-700: #085a9b;
  --color-info-800: #063e6a;
  --color-info-900: #031f35;
  --color-info-950: #010e18;

  /* Aliases (same as Figma aliases) */
  --color-primary: var(--color-primary-500);
  --color-success: var(--color-success-500);
  --color-error: var(--color-error-500);
  --color-warning: var(--color-warning-500);
  --color-info: var(--color-info-500);

  /*
   * Semantic roles. Components use these, never the scales above, so tokens/theme-dark.css can
   * re-theme the whole template by remapping this list only.
   */

  /* Surfaces: page background, cards, raised layers (menus, popovers, modals, toasts), inverse (tooltips, dark chips). */
  --color-page: var(--color-neutral-100);
  --color-surface: var(--color-neutral-50);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-raised: var(--color-neutral-50);
  --color-surface-inverse: var(--color-neutral-950);
  --color-surface-inverse-hover: var(--color-neutral-800);
  --color-surface-inverse-muted: var(--color-neutral-900);

  /* Borders, lightest to strongest: dividers, grid lines, unselected chips, form fields, selected or focused. */
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-medium: var(--color-neutral-400);
  --color-border-control: var(--color-neutral-700);
  --color-border-emphasis: var(--color-neutral-950);

  /* Text and icons */
  --color-text: var(--color-neutral-950);
  --color-text-muted: var(--color-neutral-700);
  --color-text-subtle: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-50);
  --color-placeholder: var(--color-neutral-700);
  --color-disabled: var(--color-neutral-400);
  /* Text on a warning fill (light amber in both themes) and on photos (always over a dark scrim). */
  --color-text-on-warning: var(--color-neutral-950);
  --color-text-on-media: var(--color-neutral-50);

  /* Primary roles: soft tint background, hover tint, tinted border, text on a tint, button states. */
  --color-primary-soft: var(--color-primary-50);
  --color-primary-subtle: var(--color-primary-100);
  --color-primary-border: var(--color-primary-200);
  --color-primary-border-strong: var(--color-primary-300);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-active: var(--color-primary-700);
  --color-primary-strong: var(--color-primary-700);
  --color-primary-deep: var(--color-primary-950);

  /*
   * Status tones, same roles for each: soft (badge, alert, tile background), subtle (hover, ring,
   * track), border, border-strong, strong (text and icons on a soft background, AA on soft and
   * surface), solid and solid-hover (filled buttons, checks and banners with --color-text-inverse).
   */
  --color-success-soft: var(--color-success-50);
  --color-success-subtle: var(--color-success-100);
  --color-success-border: var(--color-success-200);
  --color-success-border-strong: var(--color-success-300);
  --color-success-strong: var(--color-success-700);
  --color-success-solid: var(--color-success-700);
  --color-success-solid-hover: var(--color-success-800);

  --color-warning-soft: var(--color-warning-50);
  --color-warning-subtle: var(--color-warning-100);
  --color-warning-border: var(--color-warning-200);
  --color-warning-border-strong: var(--color-warning-300);
  --color-warning-strong: var(--color-warning-800);
  --color-warning-solid: var(--color-warning-600);
  --color-warning-solid-hover: var(--color-warning-700);
  /* Light amber fill with --color-text-on-warning (solid warning button), the same in both themes. */
  --color-warning-bright: var(--color-warning-400);
  --color-warning-bright-hover: var(--color-warning-500);

  --color-error-soft: var(--color-error-50);
  --color-error-subtle: var(--color-error-100);
  --color-error-border: var(--color-error-200);
  --color-error-border-strong: var(--color-error-300);
  --color-error-strong: var(--color-error-600);
  --color-error-solid: var(--color-error-600);
  --color-error-solid-hover: var(--color-error-700);

  --color-info-soft: var(--color-info-50);
  --color-info-subtle: var(--color-info-100);
  --color-info-border: var(--color-info-200);
  --color-info-border-strong: var(--color-info-300);
  --color-info-strong: var(--color-info-700);
  --color-info-solid: var(--color-info-600);
  --color-info-solid-hover: var(--color-info-700);

  /* Loading skeletons: base and the moving shine. */
  --color-skeleton: var(--color-neutral-100);
  --color-skeleton-shine: var(--color-neutral-200);

  /* Charts: grid lines, axis and zero lines, axis labels. Chart scripts read these at draw time. */
  --color-chart-grid: var(--color-neutral-300);
  --color-chart-axis: var(--color-neutral-500);
  --color-chart-label: var(--color-neutral-700);
  /* Chart colors used in Figma that are not part of the variable set (Platform Usage gauge). */
  --color-chart-pink: #ff829d;
  --color-chart-purple: #ad85ff;

  /* Scrollbars */
  --color-scrollbar: var(--color-neutral-300);
  --color-scrollbar-hover: var(--color-neutral-500);

  /* Code blocks (showcase): dark in both themes. */
  --color-code-bg: var(--color-neutral-950);
  --color-code-text: var(--color-neutral-50);
  --color-code-muted: var(--color-neutral-400);
  --color-code-border: var(--color-neutral-800);

  /* Modal and drawer backdrop: Figma N-950 at 25% opacity. */
  --color-overlay: color-mix(in srgb, var(--color-neutral-950) 25%, transparent);
  /* Dark layer over photos (gallery "+3 more" tile, carousel captions). */
  --color-scrim: color-mix(in srgb, var(--color-neutral-950) 55%, transparent);
  --color-scrim-strong: color-mix(in srgb, var(--color-neutral-950) 65%, transparent);
  /* Base colour for soft shadows drawn with gradients (scroll areas). */
  --color-shadow: var(--color-neutral-950);
}

/* tokens/typography.css */
/* Design tokens from the Figma variables. Edit values here to re-theme. */

:root {
  --font-family-heading: 'Outfit', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-family-body: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  --font-size-8xl: 96px;
  --font-size-9xl: 128px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --line-height-xs: 16px;
  --line-height-sm: 20px;
  --line-height-base: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 28px;
  --line-height-2xl: 32px;
  --line-height-3xl: 36px;
  --line-height-4xl: 40px;
  --line-height-5xl: 48px;
  --line-height-6xl: 60px;
  --line-height-7xl: 72px;
  --line-height-8xl: 96px;
  --line-height-9xl: 128px;
}

/* tokens/spacing.css */
/* Design tokens from the Figma variables. Edit values here to re-theme. */

/* Figma Padding (p-N) and Margin (m-N) use the same scale, so both map to --space-N. */
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-26: 104px;
  --space-28: 112px;
  --space-30: 120px;

  /* Figma: Dashboard Space/Gutter */
  --gutter: 30px;
}

/* tokens/radius.css */
/* Design tokens from the Figma variables. Edit values here to re-theme. */

:root {
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
}

/* tokens/shadows.css */
/* Design tokens from the Figma variables. Edit values here to re-theme. */

:root {
  /* Figma effect styles */
  --shadow-base: 0 4px 8px 0 rgb(0 0 0 / 6%);
  --shadow-md: 0 6px 12px 0 rgb(0 0 0 / 7%);
  --shadow-lg: 0 8px 20px 0 rgb(0 0 0 / 8%);
  /* For filter: drop-shadow() (no spread value), e.g. the upload icon tile. */
  --shadow-drop: 0 8px 10px rgb(0 0 0 / 8%);
}

/* tokens/layout.css */
/* Design tokens from the Figma variables. Edit values here to re-theme. */

:root {
  /* Figma: Border Width */
  --border-width-0: 0px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  /* Figma: Opacity (0-100 converted to 0-1) */
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-35: 0.35;
  --opacity-40: 0.4;
  --opacity-45: 0.45;
  --opacity-50: 0.5;
  --opacity-55: 0.55;
  --opacity-60: 0.6;
  --opacity-65: 0.65;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-85: 0.85;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  /* Layout sizes measured from Figma frames */
  --sidebar-width: 294px;
  --sidebar-rail: 80px;
  --header-height: 96px;
  --footer-height: 58px;

  /* Stacking order. raised, -2, -3: local layers inside one component (a focused button over its
     neighbours, a sticky column, a dragged row); the rest are page layers. */
  --z-raised: 1;
  --z-raised-2: 2;
  --z-raised-3: 3;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-enter: 360ms;
  /* Durations for one-off animations, shortest to longest: pop-ins, ticks and exits, sheets and
     switches, progress fills, spinners, the bell ring. */
  --duration-xs: 160ms;
  --duration-sm: 220ms;
  --duration-md: 280ms;
  --duration-lg: 500ms;
  --duration-spin: 800ms;
  --duration-xl: 900ms;
  /* Slight overshoot (switch handle). */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Charts: entry draw and value changes (assets/js/utils/motion.js reads the same length). */
  --duration-chart: 700ms;

  /* Writing direction as a sign for transforms that move along the inline axis (switch handles,
     drawers, slide-ins): translateX(calc(16px * var(--flip))). 1 left-to-right, -1 right-to-left. */
  --flip: 1;
}

[dir='rtl'] {
  --flip: -1;
}

[dir='ltr'] {
  --flip: 1;
}

/* tokens/icons.css */
/*
 * Icon masks for CSS-drawn marks (Phosphor paths as data URIs): the check in checkboxes and ticked
 * menu items, the dash of an indeterminate checkbox, the caret in breadcrumbs, accordions and submenus.
 * Use with mask: var(--icon-check) center / contain no-repeat; and a background-color.
 */

:root {
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E");
  --icon-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
}

/* tokens/theme-dark.css */
/*
 * Dark theme. Remaps the semantic roles from colors.css and shadows.css; components never change.
 *
 * <html data-theme="dark">   always dark
 * <html data-theme="light">  always light
 * no data-theme              follows the system (prefers-color-scheme)
 *
 * assets/js/theme-boot.js sets the attribute before paint, core/theme.js changes it from the header.
 * The two blocks below hold the same values: keep them in sync when you edit one.
 *
 * Approach: lighter brand and status fills with dark text on them (--color-text-inverse flips),
 * tints mixed into the dark surface, text tones from the light end of each scale. Every text and
 * badge pair keeps WCAG AA contrast. Both blocks are screen only, so printing always uses the light theme.
 */

:root {
  color-scheme: light;
}

@media screen {
  :root[data-theme='dark'] {
    color-scheme: dark;

    --color-primary: #4fb0c4;
    --color-success: var(--color-success-400);
    --color-warning: var(--color-warning-400);
    --color-error: #ec6a6b;
    --color-info: var(--color-info-400);

    --color-page: #0e1315;
    --color-surface: #151b1e;
    --color-surface-muted: #1c2326;
    --color-surface-raised: #1f272b;
    --color-surface-inverse: #e9eef0;
    --color-surface-inverse-hover: #cfd8dc;
    --color-surface-inverse-muted: #d7dfe2;

    --color-border: #2a3438;
    --color-border-strong: #364146;
    --color-border-medium: #4a565c;
    --color-border-control: #66737a;
    --color-border-emphasis: #b8c3c8;

    --color-text: #e9eef0;
    --color-text-muted: #aab5ba;
    --color-text-subtle: #87939a;
    --color-text-inverse: #0e1315;
    --color-placeholder: #87939a;
    --color-disabled: #4f5a60;

    --color-primary-soft: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
    --color-primary-subtle: color-mix(in srgb, var(--color-primary) 24%, var(--color-surface));
    --color-primary-border: color-mix(in srgb, var(--color-primary) 38%, var(--color-surface));
    --color-primary-border-strong: color-mix(in srgb, var(--color-primary) 55%, var(--color-surface));
    --color-primary-hover: #6cc0d1;
    --color-primary-active: #8ccfdc;
    --color-primary-strong: #8fd3e0;
    --color-primary-deep: #c9e9ef;

    --color-success-soft: color-mix(in srgb, var(--color-success-500) 14%, var(--color-surface));
    --color-success-subtle: color-mix(in srgb, var(--color-success-500) 24%, var(--color-surface));
    --color-success-border: color-mix(in srgb, var(--color-success-500) 38%, var(--color-surface));
    --color-success-border-strong: color-mix(in srgb, var(--color-success-500) 55%, var(--color-surface));
    --color-success-strong: var(--color-success-300);
    --color-success-solid: var(--color-success-400);
    --color-success-solid-hover: var(--color-success-300);

    --color-warning-soft: color-mix(in srgb, var(--color-warning-500) 14%, var(--color-surface));
    --color-warning-subtle: color-mix(in srgb, var(--color-warning-500) 24%, var(--color-surface));
    --color-warning-border: color-mix(in srgb, var(--color-warning-500) 38%, var(--color-surface));
    --color-warning-border-strong: color-mix(in srgb, var(--color-warning-500) 55%, var(--color-surface));
    --color-warning-strong: var(--color-warning-300);
    --color-warning-solid: var(--color-warning-400);
    --color-warning-solid-hover: var(--color-warning-300);

    --color-error-soft: color-mix(in srgb, var(--color-error-500) 16%, var(--color-surface));
    --color-error-subtle: color-mix(in srgb, var(--color-error-500) 26%, var(--color-surface));
    --color-error-border: color-mix(in srgb, var(--color-error-500) 42%, var(--color-surface));
    --color-error-border-strong: color-mix(in srgb, var(--color-error-500) 60%, var(--color-surface));
    --color-error-strong: #f19a9a;
    --color-error-solid: #ec6a6b;
    --color-error-solid-hover: #f08a8b;

    --color-info-soft: color-mix(in srgb, var(--color-info-500) 14%, var(--color-surface));
    --color-info-subtle: color-mix(in srgb, var(--color-info-500) 24%, var(--color-surface));
    --color-info-border: color-mix(in srgb, var(--color-info-500) 38%, var(--color-surface));
    --color-info-border-strong: color-mix(in srgb, var(--color-info-500) 55%, var(--color-surface));
    --color-info-strong: var(--color-info-300);
    --color-info-solid: var(--color-info-400);
    --color-info-solid-hover: var(--color-info-300);

    --color-skeleton: #1c2326;
    --color-skeleton-shine: #2a3438;

    --color-chart-grid: #2a3438;
    --color-chart-axis: #66737a;
    --color-chart-label: #aab5ba;

    --color-scrollbar: #3a454a;
    --color-scrollbar-hover: #56636a;

    --color-code-bg: #0a0e10;
    --color-code-text: #e9eef0;
    --color-code-muted: #87939a;
    --color-code-border: #2a3438;

    --color-overlay: rgb(0 0 0 / 60%);

    --shadow-base: 0 4px 8px 0 rgb(0 0 0 / 35%);
    --shadow-md: 0 6px 12px 0 rgb(0 0 0 / 40%);
    --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 50%);
    --shadow-drop: 0 8px 10px rgb(0 0 0 / 45%);
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --color-primary: #4fb0c4;
    --color-success: var(--color-success-400);
    --color-warning: var(--color-warning-400);
    --color-error: #ec6a6b;
    --color-info: var(--color-info-400);

    --color-page: #0e1315;
    --color-surface: #151b1e;
    --color-surface-muted: #1c2326;
    --color-surface-raised: #1f272b;
    --color-surface-inverse: #e9eef0;
    --color-surface-inverse-hover: #cfd8dc;
    --color-surface-inverse-muted: #d7dfe2;

    --color-border: #2a3438;
    --color-border-strong: #364146;
    --color-border-medium: #4a565c;
    --color-border-control: #66737a;
    --color-border-emphasis: #b8c3c8;

    --color-text: #e9eef0;
    --color-text-muted: #aab5ba;
    --color-text-subtle: #87939a;
    --color-text-inverse: #0e1315;
    --color-placeholder: #87939a;
    --color-disabled: #4f5a60;

    --color-primary-soft: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
    --color-primary-subtle: color-mix(in srgb, var(--color-primary) 24%, var(--color-surface));
    --color-primary-border: color-mix(in srgb, var(--color-primary) 38%, var(--color-surface));
    --color-primary-border-strong: color-mix(in srgb, var(--color-primary) 55%, var(--color-surface));
    --color-primary-hover: #6cc0d1;
    --color-primary-active: #8ccfdc;
    --color-primary-strong: #8fd3e0;
    --color-primary-deep: #c9e9ef;

    --color-success-soft: color-mix(in srgb, var(--color-success-500) 14%, var(--color-surface));
    --color-success-subtle: color-mix(in srgb, var(--color-success-500) 24%, var(--color-surface));
    --color-success-border: color-mix(in srgb, var(--color-success-500) 38%, var(--color-surface));
    --color-success-border-strong: color-mix(in srgb, var(--color-success-500) 55%, var(--color-surface));
    --color-success-strong: var(--color-success-300);
    --color-success-solid: var(--color-success-400);
    --color-success-solid-hover: var(--color-success-300);

    --color-warning-soft: color-mix(in srgb, var(--color-warning-500) 14%, var(--color-surface));
    --color-warning-subtle: color-mix(in srgb, var(--color-warning-500) 24%, var(--color-surface));
    --color-warning-border: color-mix(in srgb, var(--color-warning-500) 38%, var(--color-surface));
    --color-warning-border-strong: color-mix(in srgb, var(--color-warning-500) 55%, var(--color-surface));
    --color-warning-strong: var(--color-warning-300);
    --color-warning-solid: var(--color-warning-400);
    --color-warning-solid-hover: var(--color-warning-300);

    --color-error-soft: color-mix(in srgb, var(--color-error-500) 16%, var(--color-surface));
    --color-error-subtle: color-mix(in srgb, var(--color-error-500) 26%, var(--color-surface));
    --color-error-border: color-mix(in srgb, var(--color-error-500) 42%, var(--color-surface));
    --color-error-border-strong: color-mix(in srgb, var(--color-error-500) 60%, var(--color-surface));
    --color-error-strong: #f19a9a;
    --color-error-solid: #ec6a6b;
    --color-error-solid-hover: #f08a8b;

    --color-info-soft: color-mix(in srgb, var(--color-info-500) 14%, var(--color-surface));
    --color-info-subtle: color-mix(in srgb, var(--color-info-500) 24%, var(--color-surface));
    --color-info-border: color-mix(in srgb, var(--color-info-500) 38%, var(--color-surface));
    --color-info-border-strong: color-mix(in srgb, var(--color-info-500) 55%, var(--color-surface));
    --color-info-strong: var(--color-info-300);
    --color-info-solid: var(--color-info-400);
    --color-info-solid-hover: var(--color-info-300);

    --color-skeleton: #1c2326;
    --color-skeleton-shine: #2a3438;

    --color-chart-grid: #2a3438;
    --color-chart-axis: #66737a;
    --color-chart-label: #aab5ba;

    --color-scrollbar: #3a454a;
    --color-scrollbar-hover: #56636a;

    --color-code-bg: #0a0e10;
    --color-code-text: #e9eef0;
    --color-code-muted: #87939a;
    --color-code-border: #2a3438;

    --color-overlay: rgb(0 0 0 / 60%);

    --shadow-base: 0 4px 8px 0 rgb(0 0 0 / 35%);
    --shadow-md: 0 6px 12px 0 rgb(0 0 0 / 40%);
    --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 50%);
    --shadow-drop: 0 8px 10px rgb(0 0 0 / 45%);
  }
}

/* Base */
/* base/reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

/* base/global.css */
html {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
}

body {
  background-color: var(--color-page);
}

:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

::selection {
  background-color: var(--color-primary-subtle);
}

/* Shared icon element. Size comes from the size attribute; color follows the text color. */
hd-icon {
  --icon-size: 24px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  color: inherit;
}

hd-icon[size='16'] {
  --icon-size: 16px;
}

hd-icon[size='18'] {
  --icon-size: 18px;
}

hd-icon[size='20'] {
  --icon-size: 20px;
}

hd-icon[size='22'] {
  --icon-size: 22px;
}

hd-icon[size='28'] {
  --icon-size: 28px;
}

hd-icon[size='32'] {
  --icon-size: 32px;
}

hd-icon[size='40'] {
  --icon-size: 40px;
}

hd-icon[size='48'] {
  --icon-size: 48px;
}

hd-icon svg {
  width: 100%;
  height: 100%;
}

/*
 * Right-to-left: icons that point along the reading direction (back / next arrows, carets) mirror.
 * The scale property composes with any transform a component adds (a caret rotated when open).
 * Add data-no-flip to an icon that must keep its direction.
 */
[dir='rtl'] hd-icon:is([name^='arrow-'], [name^='caret-']):is([name$='-left'], [name$='-right']):not([data-no-flip]) {
  scale: -1 1;
}

/* The logo SVG is inlined, so its brand fills follow the theme (same colours in light). */
hd-icon[name='logo'] [fill='#011A20' i] {
  fill: var(--color-primary-deep);
}

hd-icon[name='logo'] [fill='#0B6678' i] {
  fill: var(--color-primary);
}

/* base/typography.css */
/* Variable fonts cover every weight used in Figma (Inter 400-800, Outfit 500-600). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit/outfit-latin-variable.woff2') format('woff2');
}

/* Arabic (core/i18n.js). unicode-range: the files load only when a page shows Arabic letters; Latin text
   such as names, ids and numbers stays in Inter and Outfit. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* Text styles. Names follow the Figma text styles (text-<size>/<weight>). */
.text-6xl {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-6xl);
  line-height: var(--line-height-6xl);
}

.text-3xl {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-3xl);
}

.text-2xl {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-2xl);
}

.text-xl {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}

.text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.text-base {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.text-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-extrabold {
  font-weight: var(--font-weight-extrabold);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-primary {
  color: var(--color-primary);
}

/* Arabic letters join, so letter spacing (used on small uppercase labels) would break the words apart. */
:lang(ar) * {
  letter-spacing: normal !important;
}

/* A translated page stays hidden until core/i18n.js has translated it (theme-boot.js sets the class). */
.i18n-pending body {
  visibility: hidden;
}

/* Addresses and numbers people type stay left to right in a right-to-left page. */
[dir='rtl'] input:is([type='email'], [type='tel'], [type='url']) {
  direction: ltr;
  text-align: right;
}

/* base/motion.css */
/*
 * Motion: short entrance animations. Timing comes from the motion tokens (tokens/layout.css).
 * Visitors who prefer reduced motion get none of this (base/reset.css). Animations use
 * `backwards` fill, so no transform stays on an element after it has played.
 * Charts and count-up numbers are animated in JS (assets/js/utils/motion.js).
 */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
}

/* Page content rises in, one block after another. */
.app__main > * {
  animation: fade-up var(--duration-enter) var(--ease-out) backwards;
}

.app__main > :nth-child(2) { animation-delay: 40ms; }
.app__main > :nth-child(3) { animation-delay: 80ms; }
.app__main > :nth-child(4) { animation-delay: 120ms; }
.app__main > :nth-child(5) { animation-delay: 160ms; }
.app__main > :nth-child(n + 6) { animation-delay: 200ms; }

/* Dropdowns, select lists, the date picker and sidebar submenus. */
.dropdown__menu:not([hidden]),
.datepicker__popover:not([hidden]) {
  transform-origin: top;
  animation: pop-in var(--duration-xs) var(--ease-out) backwards;
}

.sidebar__submenu:not([hidden]) {
  animation: fade-in var(--transition-base) backwards;
}

/* Modals: the overlay fades and the panel pops in (drawers keep their slide, modals.css). */
.modal:not([hidden]) .modal__overlay {
  animation: fade-in var(--transition-base) backwards;
}

.modal:not([hidden], .modal--drawer) .modal__panel {
  animation: pop-in var(--duration-sm) var(--ease-out) backwards;
}

/* Tab panels, collapsible bodies and section states fade in when they show. */
.tab-panel:not([hidden]),
.section-card__body:not([hidden]),
.card--collapsible .card__body:not([hidden]),
.section-state {
  animation: fade-in var(--transition-slow) backwards;
}

/* Table rows fade in on load, search, filter and paging. */
.table tbody tr {
  animation: fade-in var(--transition-slow) backwards;
}

/* Clickable cards lift a little on hover. */
.report-card,
.task-card {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.report-card:hover,
.task-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

@media (max-width: 767.98px) {
  /* Form modals and drawers open as a bottom sheet on mobile (components/modals.css). */
  .modal:not([hidden], .modal--sm, .modal--confirm, .modal--command) .modal__panel {
    animation: sheet-up var(--duration-md) var(--ease-out) backwards;
  }
}

/* ---------- Micro-interaction keyframes (used by the component styles) ---------- */

@keyframes shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes check-draw {
  from {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.15); }
}

@keyframes bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}

@keyframes row-leave {
  to {
    opacity: 0;
    transform: translateX(calc(24px * var(--flip)));
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(calc(24px * var(--flip)));
  }
}

/* Layout */
/* layout/app.css */
/*
 * Application shell: fixed sidebar + content column (header, main, footer).
 * Below 1280px the sidebar becomes an off-canvas drawer (see layout/responsive.css).
 */
.app {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

.app__sidebar {
  background-color: var(--color-surface);
}

.app__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.app__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-surface);
}

@media (min-width: 768px) {
  .app__main {
    gap: var(--gutter);
    padding: var(--gutter);
  }
}

@media (min-width: 1280px) {
  .app {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
}

.app__main:focus {
  outline: none;
}

/* Keyboard users can jump past the sidebar and header. */
/* Shown only when JavaScript is off: pages build their header, sidebar and content with JS. */
.noscript {
  padding: var(--space-4);
  background-color: var(--color-warning-soft);
  color: var(--color-text);
  text-align: center;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Pages without the shell (auth, onboarding). */
.page-blank {
  min-height: 100vh;
  background-color: var(--color-surface);
}

/* layout/responsive.css */
/*
 * Breakpoints (mobile-first, min-width). CSS custom properties cannot be used in
 * media queries, so these values are written directly where needed:
 *
 *   768px   tablet     2-column grids, tables stay tables (scroll inside card)
 *   1024px  laptop     desktop form columns
 *   1280px  desktop    fixed sidebar (below this it is an off-canvas drawer)
 *   1440px  wide       full Figma desktop layout (designed at 1920px)
 *
 * Below 768px the Figma mobile layout (390px) applies: one column,
 * tables become stacked cards.
 */

.container {
  width: 100%;
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/*
 * Touch targets: below 1024px every small control gets an invisible 44 × 44px tap area
 * (centred ::after), so the Figma visuals stay the same while fingers can hit them.
 * Slider tracks, timeline bars and code boxes get their 44px in their own files.
 */
@media (max-width: 1023.98px) {
  :where(.icon-btn, .pagination__page, .control__action, .datepicker__toggle, .btn, .chip-button,
    .card__toggle, .upload__choose, .link-inline, .cell-stack__primary--link, .detail-page__back, .sidebar__sublink,
    .report-card__link, .tabs__tab, label.choice, .facility-picker__tab, .dropdown__item, .header__user-trigger,
    .table__sort, .auth__link, .notice__link, .toast__close, .timeline__more, .link-clamp, .onboarding__logo,
    .control--xs, .select__trigger, .facility-pill, .inventory-card__action, .tap-target,
    .toggle, .number-input__step, .tag__remove, .rating-input__star, .combobox__toggle,
    .breadcrumb__link, .breadcrumb__more, .badge__remove, .carousel__dot, .alert__action, .alert__close,
    .banner__action, .banner__close, .room-card__action, .datepicker__day, .ql-toolbar button,
    .table__drag-handle, .table__edit, .event-cal__date, .event-cal__event, .event-cal__more,
    .showcase-doc__chip, .showcase-toc__link, .showcase-view__used-link) {
    position: relative;
  }

  :where(.icon-btn, .pagination__page, .control__action, .datepicker__toggle, .btn, .chip-button,
    .card__toggle, .upload__choose, .link-inline, .cell-stack__primary--link, .detail-page__back, .sidebar__sublink,
    .report-card__link, .tabs__tab, label.choice, .facility-picker__tab, .dropdown__item, .header__user-trigger,
    .table__sort, .auth__link, .notice__link, .toast__close, .timeline__more, .link-clamp, .onboarding__logo,
    .control--xs, .select__trigger, .facility-pill, .inventory-card__action, .tap-target,
    .toggle, .number-input__step, .tag__remove, .rating-input__star, .combobox__toggle,
    .breadcrumb__link, .breadcrumb__more, .badge__remove, .carousel__dot, .alert__action, .alert__close,
    .banner__action, .banner__close, .room-card__action, .datepicker__day, .ql-toolbar button,
    .table__drag-handle, .table__edit, .event-cal__date, .event-cal__event, .event-cal__more,
    .showcase-doc__chip, .showcase-toc__link, .showcase-view__used-link)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* Figma fields are 40px tall; the input itself reaches 44px of tap height (2px past each edge). */
@media (max-width: 1023.98px) {
  .control:not(.control--xs, .control--textarea) > input.control__input {
    margin-block: -10px;
    padding-block: 10px;
  }
}

/* layout/sidebar.css */
/*
 * Sidebar. Figma: Single Admin / SideBar Expended (294px).
 * Fixed column from 1280px; off-canvas drawer below.
 */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  max-width: 85vw;
  border-inline-end: var(--border-width-2) solid var(--color-border);
  background-color: var(--color-surface);
  overflow-y: auto;
  scrollbar-width: none;
  transform: translateX(calc(-100% * var(--flip)));
  visibility: hidden;
  transition:
    transform var(--transition-slow),
    visibility var(--transition-slow);
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar.is-open {
  transform: translateX(0);
  visibility: visible;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background-color: var(--color-overlay);
}

@media (min-width: 1280px) {
  .sidebar {
    position: sticky;
    z-index: auto;
    height: 100vh;
    max-width: none;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .sidebar-overlay {
    display: none;
  }
}

.sidebar__brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-height);
  padding: 0 var(--space-4);
  border-bottom: var(--border-width-2) solid var(--color-border);
}

.sidebar__logo {
  display: inline-flex;
  flex: 1;
}

.sidebar__logo-mark {
  width: 162px;
  height: 36px;
}

/* Close button for keyboard and screen reader users; visible only when focused (not in Figma).
   Hidden with the shared visually-hidden rule in utilities/display.css. */

.sidebar__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.sidebar .sidebar__search {
  position: relative;
  padding-inline-end: 84px;
}

/* Figma: shortcut keys sit inside the search box, 8px from the top. */
.sidebar__shortcut {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: 6px;
  display: inline-flex;
  gap: var(--space-1);
  padding: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* The keys open the command palette. */
.sidebar__shortcut:hover .sidebar__key {
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}

.sidebar__shortcut:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

.sidebar__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: var(--space-1);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
}

.sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  text-align: start;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.sidebar__link:hover {
  background-color: var(--color-surface-muted);
}

.sidebar__label {
  flex: 1;
  min-width: 0;
}

.sidebar__caret {
  transition: transform var(--transition-fast);
}

.sidebar__link[aria-expanded='true'] .sidebar__caret {
  transform: rotate(-90deg);
}

/* Current section: tinted background, primary text and a 4px bar on the start edge. */
.sidebar__link.is-current {
  padding-inline-start: 0;
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.sidebar__link.is-current::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 24px;
  border-start-end-radius: var(--radius-full);
  border-end-end-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.sidebar__sublink {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.sidebar__sublink::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  margin-inline: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-muted);
}

.sidebar__sublink:hover {
  color: var(--color-primary);
}

.sidebar__sublink[aria-current='page'] {
  color: var(--color-primary);
}

.sidebar__sublink[aria-current='page']::before {
  background-color: var(--color-primary);
}

.sidebar__empty {
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Collapsed icon rail (desktop, header toggle). Labels are hidden visually only (utilities/display.css), so links keep their names. */
@media (min-width: 1280px) {
  .app {
    transition: grid-template-columns var(--transition-slow);
  }

  .sidebar {
    transition: width var(--transition-slow);
  }

  .is-sidebar-collapsed .app {
    grid-template-columns: var(--sidebar-rail) minmax(0, 1fr);
  }

  .is-sidebar-collapsed .sidebar {
    width: var(--sidebar-rail);
  }

  .is-sidebar-collapsed .sidebar__brand {
    justify-content: center;
    padding: 0;
  }

  .is-sidebar-collapsed .sidebar__logo {
    flex: 0 0 36px;
    overflow: hidden;
  }

  .is-sidebar-collapsed .sidebar__body {
    padding-inline: var(--space-3);
  }

  .is-sidebar-collapsed .sidebar__search,
  .is-sidebar-collapsed .sidebar__caret,
  .is-sidebar-collapsed .sidebar__submenu,
  .is-sidebar-collapsed .sidebar__empty {
    display: none;
  }

  .is-sidebar-collapsed .sidebar__link,
  .is-sidebar-collapsed .sidebar__link.is-current {
    justify-content: center;
    padding-inline: 0;
  }

  .is-sidebar-collapsed .sidebar__link.is-current::before {
    position: absolute;
    inset-inline-start: 0;
  }
}

/* layout/header.css */
/* Top header. Figma: Single Main Header (96px desktop, 88px mobile). */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding: var(--space-6) var(--gutter);
  border-bottom: var(--border-width-2) solid var(--color-border);
  background-color: var(--color-surface);
}

.header__left,
.header__right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
}

.header__left {
  flex: 1;
}

.header__branch {
  flex: 0 1 350px;
  min-width: 0;
}

.header__branch .control {
  gap: var(--space-3);
}

.header__country {
  width: 180px;
}

.header__notifications {
  position: relative;
}

/* Theme menu (Light / Dark / System, core/theme.js) and language menu (core/i18n.js). Not in Figma. */
.header__tool {
  width: 48px;
  height: 48px;
}

.dropdown__menu.theme-menu {
  min-width: 180px;
}

.header__bell-icon {
  --icon-size: 28px;
}

.header__divider {
  align-self: stretch;
  width: var(--border-width-1);
  background-color: var(--color-border);
}

.header__user-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: start;
  cursor: pointer;
}

.header__user-text {
  display: flex;
  flex-direction: column;
}

.header__user-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.header__user-role {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  text-transform: uppercase;
}

.header__user-caret {
  display: none;
}

.header .header__menu {
  display: none;
}

/* Below 1280px the sidebar is a drawer, so the header shows a menu button instead of the collapse toggle. */
@media (max-width: 1279.98px) {
  .header .header__menu {
    display: inline-flex;
  }

  .header .header__collapse {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .header__country {
    display: none;
  }

  /* Name and role stay readable for screen readers (utilities/display.css), so the avatar button keeps its name. */
  .header__user-text hd-icon {
    display: none;
  }

  .header__user-caret {
    display: inline-flex;
  }
}

/* Figma mobile header: menu, bell and avatar only. */
@media (max-width: 767.98px) {
  .header {
    min-height: 88px;
    padding: calc(var(--space-6) - var(--border-width-2)) var(--space-4) var(--space-6);
  }

  .header__bell,
  .header__tool {
    width: 40px;
    height: 40px;
  }

  .header__left,
  .header__right {
    gap: var(--space-3);
  }

  .header__branch,
  .header__divider {
    display: none;
  }

  .header .header__bell {
    padding: var(--space-2);
  }

  .header__bell-icon {
    --icon-size: 24px;
  }

  .header .header__count {
    inset-inline-start: 28px;
  }
}

/* Notification panel. Figma: 3. Notification Dropdown (400px). */
.dropdown__menu.notification-menu {
  width: 400px;
  max-width: calc(100vw - var(--space-8));
  padding: 0;
  border: 0;
  overflow: hidden;
}

.notification-menu__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.notification-menu__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.notification-menu__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.notification-menu__heading {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-semibold);
}

.notification-menu__time,
.notification-menu__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.notification-menu__time {
  flex-shrink: 0;
  white-space: nowrap;
}

.notification-menu__text {
  padding-inline-start: 34px;
}

.notification-menu__all {
  width: 100%;
  border-radius: 0;
}

/* Profile menu. Figma: Admin Dropdown (219px). */
.dropdown__menu.user-menu {
  width: 219px;
  box-shadow: var(--shadow-md);
}

/* Dim the page behind dropdowns marked data-dropdown-overlay (notification panel). */
.dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-dropdown) - 1);
  background-color: var(--color-overlay);
}

/* Figma mobile Notification Dropdown: 14px title, 12px time, 2-line preview, 2px below the bell. */
@media (max-width: 767.98px) {
  .dropdown__menu.notification-menu {
    inset-inline-end: -72px;
    width: 269px;
    margin-top: 2px;
    top: 100%;
  }

  .notification-menu__heading {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .notification-menu__time {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
  }

  .notification-menu__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Notification bell rings and its badge pops once after load (components/header.js); rings on hover too. */
.header__notifications.is-ringing .header__bell-icon,
.header__bell:hover .header__bell-icon {
  transform-origin: 50% 10%;
  animation: bell-ring var(--duration-xl) ease-in-out;
}

.header__notifications.is-ringing .header__count {
  animation: pop var(--duration-enter) var(--ease-out);
}

/* layout/footer.css */
/* Footer. Figma: Footer (58px desktop, two lines on mobile). */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--footer-height);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width-2) solid var(--color-border);
  background-color: var(--color-surface);
}

.footer__text {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

@media (max-width: 767.98px) {
  .footer {
    border-top-width: var(--border-width-1);
  }

  .footer__text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
  }

  .footer__line {
    display: block;
  }
}

/* layout/auth.css */
/*
 * Auth pages (sign in, two-factor, password recovery). Figma: Onboarding / Login.
 * Desktop: centred 600px card on a dotted background. Mobile (< 768px): full-width white sheet,
 * copyright pinned to the bottom on the grey page colour.
 */
/* The skip link focuses <main class="auth" tabindex="-1">; no ring around the whole page. */
.auth:focus {
  outline: none;
}

.auth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-10) var(--space-4);
  background-color: var(--color-page);
}

/* 24px dot grid that fades out from the centre. */
.auth::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--color-border-strong) 1.5px, transparent 1.6px);
  background-position: center;
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 50% 50% at center, #000 0%, transparent 100%);
  pointer-events: none;
}

.auth__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.auth__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-10);
  border-bottom: var(--border-width-1) solid var(--color-border);
  text-align: center;
}

.auth__logo {
  width: 162px;
  height: 36px;
}

/* Round badge around the 2FA illustration. */
.auth__badge {
  display: inline-flex;
  padding: var(--space-6);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-soft);
  color: var(--color-text);
}

.auth__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.auth__titles--loose {
  gap: var(--space-2);
}

.auth__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-2xl);
}

.auth__subtitle {
  color: var(--color-text-muted);
}

.auth__subtitle strong,
.auth__email {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.auth__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-10);
}

.auth__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.auth__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: calc(var(--space-2) * -1);
  font-weight: var(--font-weight-medium);
}

.auth__options .choice {
  font: inherit;
}

.auth__link {
  color: var(--color-text);
}

.auth__link:hover {
  color: var(--color-primary);
}

/* "Resend Code in: 25 Seconds". Uses the heading font. */
.auth__resend {
  font-family: var(--font-family-heading);
  text-align: center;
}

.auth__resend-time,
.auth__resend-button {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.auth__resend-button {
  cursor: pointer;
}

.auth__resend-button:hover {
  text-decoration: underline;
}

.auth__note {
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width-1) solid var(--color-border);
}

.auth__copyright {
  position: relative;
  padding: var(--space-4) var(--space-6);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

@media (max-width: 767.98px) {
  .auth {
    justify-content: flex-start;
    gap: 0;
    padding: 0;
  }

  .auth::before {
    display: none;
  }

  .auth__card {
    flex: 1;
    max-width: none;
    border-radius: 0;
  }

  .auth__header {
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
  }

  .auth__badge {
    padding: var(--space-3);
  }

  .auth__badge hd-icon {
    --icon-size: 36px;
  }

  .auth__titles,
  .auth__titles--loose {
    gap: var(--space-1);
  }

  .auth__title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
  }

  .auth__subtitle {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .auth__body {
    padding: var(--space-6) var(--space-4);
  }

  .auth__options {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  /* Mobile Figma uses the compact field and the regular button size. */
  .auth .control {
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
  }

  .auth .control__icon,
  .auth .control__action hd-icon {
    --icon-size: 18px;
  }

  .auth .btn--lg {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .auth .otp__input {
    padding-block: var(--space-2);
  }

  .auth__copyright {
    width: 100%;
  }
}

/* layout/onboarding.css */
/*
 * Initial setup (onboarding). Figma: 9. Setup - Select Region, 10. Setup - Property Type.
 * Desktop: logo bar, grey step list on the left, content with a sticky action bar.
 * Mobile (< 768px): centred logo, ring progress summary, stacked cards, grey copyright bar.
 */
.onboarding {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background-color: var(--color-surface);
}

.onboarding__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: var(--gutter);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.onboarding__logo {
  display: inline-flex;
}

.onboarding__logo hd-icon {
  width: 162px;
  height: 36px;
}

.onboarding__body {
  display: grid;
  flex: 1;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 0;
}

.onboarding__aside {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--color-page);
}

.onboarding__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-6);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.onboarding__intro-title,
.onboarding__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-2xl);
}

.onboarding__intro-text,
.onboarding__subtitle {
  color: var(--color-text-muted);
}

.onboarding__steps {
  flex: 1;
  padding: var(--space-6);
  overflow-y: auto;
}

.onboarding__copyright {
  padding: var(--space-4) var(--space-6);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Mobile-only pieces. */
.onboarding__summary,
.onboarding__copyright--bar {
  display: none;
}

.onboarding__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.onboarding__form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.onboarding__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
}

.onboarding__head-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 240px;
}

.onboarding__content {
  flex: 1;
  min-height: 0;
  padding: var(--space-6);
  overflow-y: auto;
  scrollbar-color: var(--color-primary) transparent;
  scrollbar-width: thin;
}

.onboarding__error {
  margin-bottom: var(--space-4);
}

.onboarding__grid {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.onboarding__actions {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-6);
  border-top: var(--border-width-2) solid var(--color-border);
}

.onboarding__actions .btn hd-icon {
  --icon-size: 28px;
}

/* Search box with the dark button inside it. Figma: Search (Select Country). */
.search-box {
  position: relative;
  width: min(600px, 100%);
}

.search-box .control {
  padding-inline-end: 130px;
}

.search-box .btn {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  bottom: 4px;
}

@media (max-width: 1023.98px) {
  .onboarding__body {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .onboarding__head .search-box {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .onboarding {
    background-color: var(--color-page);
  }

  .onboarding__header {
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface);
  }

  .onboarding__body {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
  }

  .onboarding__aside {
    display: none;
  }

  .onboarding__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--color-page);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .onboarding__summary-title {
    font-weight: var(--font-weight-semibold);
  }

  .onboarding__summary-text {
    color: var(--color-text-muted);
  }

  .onboarding__main {
    flex: 1;
  }

  /* The step summary names the page on mobile; Figma has no title or search here. */
  .onboarding__head {
    display: none;
  }

  .onboarding__content {
    padding: var(--space-4);
  }

  .onboarding__grid {
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
  }

  .onboarding__actions {
    justify-content: space-between;
    padding: var(--space-4);
    border-top-width: var(--border-width-1);
  }

  .onboarding__actions > .btn:only-child {
    margin-inline-start: auto;
  }

  .onboarding__actions .btn--lg {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .onboarding__actions .btn hd-icon {
    --icon-size: 24px;
  }

  /* First step has nowhere to go back to on mobile (Figma shows Next only). */
  .onboarding__actions [data-setup-first] {
    display: none;
  }

  .onboarding__copyright--bar {
    display: block;
    flex-shrink: 0;
    text-align: center;
  }
}

/* Components */
/* components/buttons.css */
/*
 * Buttons. Figma: Button, Table Button, Edit Button, Delete Button, Suspend.
 * Hover, active and disabled states are not designed in Figma; they are derived from tokens.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: var(--opacity-50);
  cursor: not-allowed;
  pointer-events: none;
}

/* Busy (request in progress): set aria-busy="true" and disabled. Not designed in Figma. */
.btn[aria-busy='true'] {
  opacity: 1;
  cursor: progress;
}

.btn[aria-busy='true']::before {
  content: '';
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-full);
  animation: spin var(--duration-spin) linear infinite;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
}

.btn--primary:active {
  background-color: var(--color-primary-active);
}

.btn--outline {
  border-color: var(--color-border-control);
  color: var(--color-text-muted);
}

.btn--outline:hover {
  background-color: var(--color-surface-muted);
}

.btn--outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--outline-primary:hover {
  background-color: var(--color-primary-soft);
}

.btn--dark {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.btn--dark:hover {
  background-color: var(--color-surface-inverse-hover);
}

.btn--danger {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
}

.btn--danger:hover {
  background-color: var(--color-error-solid);
}

.btn--ghost:hover {
  background-color: var(--color-surface-muted);
}

/* Text-only destructive action ("Change Customer", "Cancel" in the guest form). */
.btn--text-danger {
  color: var(--color-error);
}

.btn--text-danger:hover {
  background-color: var(--color-error-soft);
}

.btn--link {
  padding-inline-start: 0;
  color: var(--color-primary);
}

.btn--link:hover {
  color: var(--color-primary-strong);
}

/*
 * Status tones (not in Figma). One tone class per style:
 *   solid    btn--success, btn--warning, btn--info (btn--primary and btn--danger above)
 *   soft     btn--soft (primary), btn--soft-success, -warning, -info, -danger
 *   outline  btn--outline-success, -warning, -info, -danger (btn--outline-primary above)
 *   ghost    btn--ghost-primary, -success, -warning, -info, -danger
 * Text uses the 700 shade (800 for warning; info solid is 600) so every tone keeps 4.5:1 contrast.
 */
.btn--soft,
.btn--ghost-primary {
  --tone-text: var(--color-primary-strong);
  --tone-soft: var(--color-primary-soft);
  --tone-soft-hover: var(--color-primary-subtle);
}

.btn--success,
.btn--soft-success,
.btn--outline-success,
.btn--ghost-success {
  --tone-solid: var(--color-success-solid);
  --tone-solid-hover: var(--color-success-solid-hover);
  --tone-on-solid: var(--color-text-inverse);
  --tone-border: var(--color-success-solid);
  --tone-text: var(--color-success-strong);
  --tone-soft: var(--color-success-soft);
  --tone-soft-hover: var(--color-success-subtle);
}

.btn--warning,
.btn--soft-warning,
.btn--outline-warning,
.btn--ghost-warning {
  /* Light amber with dark text in both themes. */
  --tone-solid: var(--color-warning-bright);
  --tone-solid-hover: var(--color-warning-bright-hover);
  --tone-on-solid: var(--color-text-on-warning);
  --tone-border: var(--color-warning);
  --tone-text: var(--color-warning-strong);
  --tone-soft: var(--color-warning-soft);
  --tone-soft-hover: var(--color-warning-subtle);
}

.btn--info,
.btn--soft-info,
.btn--outline-info,
.btn--ghost-info {
  --tone-solid: var(--color-info-solid);
  --tone-solid-hover: var(--color-info-solid-hover);
  --tone-on-solid: var(--color-text-inverse);
  --tone-border: var(--color-info-solid);
  --tone-text: var(--color-info-strong);
  --tone-soft: var(--color-info-soft);
  --tone-soft-hover: var(--color-info-subtle);
}

.btn--soft-danger,
.btn--outline-danger,
.btn--ghost-danger {
  --tone-border: var(--color-error);
  --tone-text: var(--color-error-strong);
  --tone-soft: var(--color-error-soft);
  --tone-soft-hover: var(--color-error-subtle);
}

.btn--success,
.btn--warning,
.btn--info {
  background-color: var(--tone-solid);
  color: var(--tone-on-solid);
}

.btn--success:hover,
.btn--warning:hover,
.btn--info:hover {
  background-color: var(--tone-solid-hover);
}

.btn--soft,
.btn--soft-success,
.btn--soft-warning,
.btn--soft-info,
.btn--soft-danger {
  background-color: var(--tone-soft);
  color: var(--tone-text);
}

.btn--soft:hover,
.btn--soft-success:hover,
.btn--soft-warning:hover,
.btn--soft-info:hover,
.btn--soft-danger:hover {
  background-color: var(--tone-soft-hover);
}

.btn--outline-success,
.btn--outline-warning,
.btn--outline-info,
.btn--outline-danger {
  border-color: var(--tone-border);
  color: var(--tone-text);
}

.btn--ghost-primary,
.btn--ghost-success,
.btn--ghost-warning,
.btn--ghost-info,
.btn--ghost-danger {
  color: var(--tone-text);
}

.btn--outline-success:hover,
.btn--outline-warning:hover,
.btn--outline-info:hover,
.btn--outline-danger:hover,
.btn--ghost-primary:hover,
.btn--ghost-success:hover,
.btn--ghost-warning:hover,
.btn--ghost-info:hover,
.btn--ghost-danger:hover {
  background-color: var(--tone-soft);
}

/*
 * Sizes: btn--sm (32px, toolbars), default (40px, forms and page actions), btn--lg (48px, confirmation
 * modal footers). Add btn--icon for a square icon-only button in any size (give it an aria-label).
 */
.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}

.btn--sm {
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  aspect-ratio: 1;
  padding-inline: 0;
}

.btn--icon:not(.btn--sm, .btn--lg) {
  width: 42px;
}

.btn--icon.btn--sm {
  width: 30px;
}

.btn--icon.btn--lg {
  width: 50px;
}

/* Square icon-only buttons (table actions, header controls). */
.icon-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.icon-btn:hover {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary-subtle);
  color: var(--color-primary);
}

.icon-btn:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

.icon-btn--sm {
  width: 32px;
  height: 32px;
  padding: var(--space-1);
}

/* Header bell: 12px padding around a 28px icon. */
.icon-btn--lg {
  width: auto;
  height: auto;
  padding: var(--space-3);
}

/* Destructive actions (delete, suspend). Figma "Suspend / Hover". */
.icon-btn--danger:hover {
  background-color: var(--color-error-soft);
  border-color: transparent;
  color: var(--color-error);
}

/* Modal close button. */
.icon-btn--outline {
  width: auto;
  height: auto;
  padding: var(--space-1);
  border-color: var(--color-border-control);
  background-color: transparent;
}

.icon-btn--outline:hover {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border-control);
  color: var(--color-text);
}

/* Pagination arrows. */
.icon-btn--soft {
  border-color: transparent;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
}

.icon-btn--soft:hover {
  background-color: var(--color-primary-subtle);
  border-color: transparent;
}

/* Small red counter on top of an icon button (notifications). */
.icon-btn__count {
  position: absolute;
  top: -8px;
  inset-inline-start: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 18px;
}

.icon-btn-wrap {
  position: relative;
  display: inline-flex;
}

/* Danger icon button shown in its "on" state (e.g. unblock a blocked staff member). */
.icon-btn--active-danger {
  border-color: var(--color-error-border);
  background-color: var(--color-error-soft);
  color: var(--color-error);
}

/* Buttons press in slightly. */
.btn:active:not(:disabled),
.icon-btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Copy button (copy-button.js): the icon swaps to a check while "Copied" shows. */
.btn.is-copied {
  border-color: var(--color-success);
  color: var(--color-success-strong);
}

.btn.is-copied hd-icon {
  display: none;
}

/* withBusyButton(): after the spinner, a check mark draws in the button. */
.btn.is-done::before,
.btn.is-copied::before {
  content: '';
  width: 0.55em;
  height: 0.95em;
  margin-top: -0.2em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  animation: check-draw var(--duration-md) var(--ease-out) backwards;
}

/* components/inputs.css */
/*
 * Form fields. Figma: Forms.
 * Two looks: outlined white (forms, modals) and filled grey (search, filters, header selects).
 */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.field__required {
  color: var(--color-error);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-lg);
}

.field__help {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.field__error {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* The visible box. Holds the native control plus optional icons. */
.control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-1) solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Figma mobile forms: 40px fields (8px block padding). Before the modifiers so they still win. */
@media (max-width: 767.98px) {
  .control {
    padding-block: var(--space-2);
  }
}

.control:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.control__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.control__input::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

.control__icon {
  --icon-size: 22px;
  color: var(--color-text);
}

.control--filled {
  border-color: var(--color-border);
  background-color: var(--color-surface-muted);
}

.control--filled .control__input::placeholder {
  color: var(--color-text-muted);
}

/* Compact select in card headers (period filter). */
.control--sm {
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}

.control--sm .control__icon {
  --icon-size: 18px;
}

/* Rows-per-page select in table footers. */
.control--xs {
  gap: var(--space-2);
  width: auto;
  padding: var(--space-1) var(--space-2);
  border-color: var(--color-border-emphasis);
  border-radius: var(--radius-md);
}

.control--xs .control__input {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.control--xs .control__icon {
  --icon-size: 16px;
}

.control--textarea {
  align-items: flex-start;
}

.control--textarea .control__input {
  /* Figma box is 156px tall: 12px top + 24px line + 120px bottom space. */
  min-height: 132px;
  resize: vertical;
}

.control.is-invalid,
.field.is-invalid .control {
  border-color: var(--color-error);
}

.control.is-invalid:focus-within,
.field.is-invalid .control:focus-within {
  box-shadow: 0 0 0 3px var(--color-error-subtle);
}

.control.is-disabled,
.control:has(.control__input:disabled) {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.control:has(.control__input:disabled) .control__input {
  cursor: not-allowed;
}

/*
 * Not in Figma: large size, read-only, tone states and a field with a button beside it.
 *   control--lg                                  56px field for search pages and hero forms
 *   <input readonly>                             grey box, text stays selectable and focusable
 *   control--success, --warning, --info, --error coloured border and tint; pair with field__help--<tone>
 */
.control--lg {
  padding: var(--space-4) var(--space-6);
}

.control--lg .control__input {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

/* Date pickers make their input read-only to open the calendar; they keep the normal look. */
.control:not(.datepicker):has(.control__input[readonly]) {
  border-color: var(--color-border);
  background-color: var(--color-surface-muted);
}

.control--success {
  --tone-border: var(--color-success-strong);
  --tone-tint: var(--color-success-soft);
  --tone-ring: var(--color-success-subtle);
}

.control--warning {
  --tone-border: var(--color-warning-strong);
  --tone-tint: var(--color-warning-soft);
  --tone-ring: var(--color-warning-subtle);
}

.control--info {
  --tone-border: var(--color-info-strong);
  --tone-tint: var(--color-info-soft);
  --tone-ring: var(--color-info-subtle);
}

.control--error {
  --tone-border: var(--color-error);
  --tone-tint: var(--color-error-soft);
  --tone-ring: var(--color-error-subtle);
}

.control--success,
.control--warning,
.control--info,
.control--error {
  border-color: var(--tone-border);
  background-color: var(--tone-tint);
}

.control--success:focus-within,
.control--warning:focus-within,
.control--info:focus-within,
.control--error:focus-within {
  border-color: var(--tone-border);
  box-shadow: 0 0 0 3px var(--tone-ring);
}

.field__help--success {
  color: var(--color-success-strong);
}

.field__help--warning {
  color: var(--color-warning-strong);
}

.field__help--info {
  color: var(--color-info-strong);
}

.field__help--error {
  color: var(--color-error-strong);
}

/* A field and a button side by side (Subscribe, Apply code). Stacks on phones. */
.control-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.control-row > .field {
  flex: 1;
}

@media (max-width: 479.98px) {
  .control-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Icon button inside a control, e.g. show/hide password. */
.control__action {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}

.control__action hd-icon {
  --icon-size: 22px;
}

/* One-time code: one box per digit with dashes between. Figma: Two-Factor Authentication. */
/* Digits always run left to right, also in RTL pages. */
.otp {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.otp__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) 0;
  border: var(--border-width-1) solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  text-align: center;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.otp__input:focus,
.otp__input:not(:placeholder-shown) {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.otp__separator {
  flex-shrink: 0;
  width: 8px;
  font-family: var(--font-family-heading);
  text-align: center;
}

.otp.is-invalid .otp__input {
  border-color: var(--color-error);
  box-shadow: none;
}

@media (max-width: 767.98px) {
  .otp {
    gap: var(--space-2);
  }
}

/* Two fields side by side on wider screens. */
.form-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .form-grid--2,
  .form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Submit row under a form section, right aligned. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-4);
}

/* Grouped block inside a step (General Information, Pet Policy, Room Images…). */
.form-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.form-block > :not(.group-title) {
  margin-inline: var(--space-2);
}

.form-block > :last-child {
  margin-bottom: var(--space-2);
}

.form-block .group-title {
  background-color: var(--color-surface);
}

/* Figma mobile forms: 20px field icons, 14px required star, full-width form buttons. */
@media (max-width: 767.98px) {
  .control:not(.control--sm, .control--xs) .control__icon,
  .control__action hd-icon {
    --icon-size: 20px;
  }

  .field__required {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .form-actions > .btn {
    flex: 1;
  }
}

/* Invalid fields shake once and their message slides in. */
.field.is-shaking .control,
.field.is-shaking .otp {
  animation: shake var(--duration-enter) ease-in-out;
}

.field__error:not([hidden]) {
  animation: slide-down var(--transition-base) backwards;
}

/* Touch: 44px code boxes; six still fit at 375px when the gaps tighten. */
@media (max-width: 1023.98px) {
  .otp {
    gap: 2px;
  }

  .otp__input {
    min-width: 44px;
    min-height: 44px;
  }
}

/* components/form-layout.css */
/*
 * Form layouts and patterns (not in Figma). Built on .field / .control / .form-grid.
 *   form-grid__full                  a field that spans every column of a .form-grid
 *   form-horizontal                  label on the left of each field (from 768px); --end aligns labels right
 *   form-section, __header, __title  a group of fields under a tinted header bar
 *   form-divider                     a line between groups of fields
 *   fieldset                         bordered group with a <legend>; <fieldset disabled> greys every control
 *   form-summary                     error summary above a form (showErrorSummary in form-validation.js)
 *   repeater                         rows the user adds and removes (components/repeater.js)
 */
.form-grid__full {
  grid-column: 1 / -1;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* A <fieldset> used only to group (or disable) fields keeps no border of its own. */
fieldset.form-stack,
fieldset.form-grid {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---- Horizontal: label column + field column ---- */
.form-horizontal {
  --label-width: 180px;

  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .form-horizontal {
    gap: var(--space-4);
  }

  .form-horizontal .field {
    display: grid;
    grid-template-columns: var(--label-width) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-1) var(--space-6);
  }

  .form-horizontal .field > :not(.field__label) {
    grid-column: 2;
  }

  /* Tall controls: the label lines up with the first line. */
  .form-horizontal .field:has(.control--textarea, .choice-group, .upload) {
    align-items: start;
  }

  .form-horizontal .field:has(.control--textarea, .upload) > .field__label {
    padding-block-start: var(--space-3);
  }

  .form-horizontal--end .field > .field__label {
    justify-content: flex-end;
    text-align: end;
  }

  .form-horizontal .form-actions {
    justify-content: flex-start;
    padding-inline-start: calc(var(--label-width) + var(--space-6));
  }
}

/* ---- Sections and dividers ---- */
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.form-section__title {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
}

.form-section__heading {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.form-divider {
  margin: 0;
  border: 0;
  border-block-start: var(--border-width-1) solid var(--color-border);
}

/* ---- Fieldset ---- */
.fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  margin: 0;
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.fieldset__legend {
  padding-inline: var(--space-2);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-lg);
}

.fieldset--muted {
  border-color: transparent;
  background-color: var(--color-surface-muted);
}

.fieldset--muted .fieldset__legend {
  float: inline-start;
  width: 100%;
  padding: 0;
}

.fieldset:disabled .field__label,
.fieldset:disabled .fieldset__legend,
.fieldset:disabled .field__help {
  color: var(--color-text-muted);
}

/* ---- Error summary ---- */
.form-summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  padding-inline-start: var(--space-6);
}

.form-summary__list a {
  color: inherit;
  text-decoration: underline;
}

/* ---- Repeater ---- */
.repeater {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.repeater__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.repeater__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.repeater__fields {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

.repeater__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (max-width: 767.98px) {
  .repeater__row {
    flex-direction: column;
    align-items: stretch;
  }

  .repeater__row > [data-repeater-remove] {
    align-self: flex-end;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .repeater__row.is-new {
    animation: fade-up var(--duration-enter) var(--ease-out);
  }
}

/* components/selects.css */
/*
 * Custom select. A native <select> stays in the markup for forms and is enhanced by
 * assets/js/components/select.js into a button + list styled like the other dropdowns.
 */
.select {
  position: relative;
  width: 100%;
}

.select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.select__trigger {
  text-align: start;
  cursor: pointer;
}

/* Disabled: the script sets disabled on the trigger and .is-disabled on its .control (inputs.css). */
.select__trigger:disabled,
.multiselect__trigger:disabled {
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.control.is-disabled .control__icon,
.control.is-disabled .select__value.is-placeholder {
  color: var(--color-disabled);
}

.select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Placeholder text in a select value or a picker field (roles staff picker, city places). */
.select__value.is-placeholder,
.control__input.is-placeholder,
.is-placeholder {
  color: var(--color-placeholder);
}

.control--xs .select__value {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.select__caret {
  transition: transform var(--transition-fast);
}

.select.is-open .select__caret {
  transform: rotate(180deg);
}

.select .dropdown__menu {
  width: 100%;
  max-height: 408px;
  overflow-y: auto;
}

.select--fit {
  width: auto;
}

.select--fit .dropdown__menu {
  width: max-content;
  min-width: 100%;
}

/* Button trigger (data-variant="button"): the select looks like a primary button. */
.control--button {
  width: auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.control--button:hover {
  background-color: var(--color-primary-hover);
}

.control--button .select__value,
.control--button .select__value.is-placeholder,
.control--button .control__icon {
  color: var(--color-text-inverse);
}

/* components/checks.css */
/*
 * Checkbox, radio and switch. Figma: Checkbox, Radio, Toggle.
 * Checked checkbox and "on" switch are not designed; they follow the checked radio (primary fill, white check).
 */
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  cursor: pointer;
}

.checkbox,
.radio {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  border: var(--border-width-1) solid var(--color-border-emphasis);
  background-color: var(--color-surface);
  appearance: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.checkbox {
  border-radius: var(--radius-md);
}

.radio {
  border-radius: var(--radius-full);
}

.checkbox::after,
.radio::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background-color: var(--color-text-inverse);
  mask: var(--icon-check) center / contain no-repeat;
  opacity: 0;
}

.checkbox:checked,
.checkbox:indeterminate:not([type='radio']),
.radio:checked {
  background-color: var(--color-primary);
}

.checkbox:checked::after,
.radio:checked::after {
  opacity: 1;
}

.checkbox:indeterminate:not([type='radio'])::after {
  mask-image: var(--icon-minus);
  opacity: 1;
}

.checkbox:disabled,
.radio:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

/* Switch: 40x24 track with a 16px handle. */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  margin: 0;
  padding: var(--space-1);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-muted);
  appearance: none;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base);
}

.switch::before {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--color-disabled);
  transition:
    transform var(--duration-md) var(--ease-spring),
    width var(--transition-fast),
    background-color var(--transition-base);
}

.switch:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.switch:checked::before {
  background-color: var(--color-text-inverse);
  transform: translateX(calc(16px * var(--flip)));
}

.switch:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

/* Choices in a row that wraps (radio and checkbox groups). */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Stacked checkbox group under a legend: <fieldset class="field"><legend class="field__label">…</legend>
   <div class="choice-group choice-group--stack">…</div></fieldset>. "Select all" uses data-check-all (checkbox.js). */
.choice-group--stack {
  flex-direction: column;
  gap: var(--space-3);
}

.choice-group--stack .choice--nested {
  margin-inline-start: var(--space-8);
}

.choice--switch {
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

/* Switch row: icon, title + description, switch (Pay at Property, Program Status). */
.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.toggle-row__icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.toggle-row__text {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.toggle-row__hint {
  display: block;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.toggle-row--muted {
  border: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-surface-muted);
}

/* Checkbox tick draws left to right; radio dot pops; switch handle overshoots a little. */
.checkbox:checked::after {
  animation: check-draw var(--duration-sm) var(--ease-out) backwards;
}

.radio:checked::after {
  animation: pop var(--duration-sm) var(--ease-out) backwards;
}

.switch:active::before {
  width: 20px;
}

.switch:checked:active::before {
  transform: translateX(calc(12px * var(--flip)));
}

/*
 * Not part of the original design.
 *   choice--top + choice__text / choice__hint   checkbox or radio with a description under its label
 *   choice-card                                 the whole card is the label; border and tint when checked
 *   choice-grid                                 choices in two columns (three on wide screens)
 *   switch--sm / switch--lg; switch--success / --warning / --info / --danger
 *   toggle-row--bordered                        setting row with a border on a white card
 */
.choice--top {
  align-items: flex-start;
}

.choice__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.choice__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.choice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.choice-card:hover {
  border-color: var(--color-primary-border-strong);
}

.choice-card:has(:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.choice-card:has(:focus-visible) {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

.choice-card:has(:disabled) {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

.choice-card .choice__text {
  flex: 1;
}

.choice-card__title {
  font-weight: var(--font-weight-semibold);
}

.choice-cards {
  display: grid;
  gap: var(--space-3);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
}

@media (min-width: 1024px) {
  .choice-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.switch--sm {
  width: 32px;
  height: 20px;
}

.switch--sm::before {
  top: 3px;
  inset-inline-start: 3px;
  width: 12px;
  height: 12px;
}

.switch--sm:checked::before {
  transform: translateX(calc(12px * var(--flip)));
}

.switch--lg {
  width: 52px;
  height: 30px;
}

.switch--lg::before {
  top: 4px;
  inset-inline-start: 4px;
  width: 20px;
  height: 20px;
}

.switch--lg:checked::before {
  transform: translateX(calc(22px * var(--flip)));
}

.switch--success:checked {
  border-color: var(--color-success-solid);
  background-color: var(--color-success-solid);
}

.switch--warning:checked {
  border-color: var(--color-warning-solid);
  background-color: var(--color-warning-solid);
}

.switch--info:checked {
  border-color: var(--color-info-solid);
  background-color: var(--color-info-solid);
}

.switch--danger:checked {
  border-color: var(--color-error);
  background-color: var(--color-error);
}

.toggle-row--bordered {
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.switch--sm:active::before {
  width: 15px;
}

.switch--sm:checked:active::before {
  transform: translateX(calc(9px * var(--flip)));
}

.switch--lg:active::before {
  width: 25px;
}

.switch--lg:checked:active::before {
  transform: translateX(calc(17px * var(--flip)));
}

/* components/badges.css */
/* Status badge. Figma: Status. Tone colors come from utils/status.js. */
.badge {
  --badge-bg: var(--color-surface-muted);
  --badge-fg: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 28px;
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background-color: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

.badge hd-icon {
  --icon-size: 16px;
}

/* Fixed width used in table status columns. */
.badge--fixed {
  min-width: 100px;
}

/* Badge text uses the darker 600 / 700 shades so it reaches WCAG AA 4.5:1 on the tinted background. */
.badge--success {
  --badge-bg: var(--color-success-soft);
  --badge-fg: var(--color-success-strong);
}

.badge--error {
  --badge-bg: var(--color-error-soft);
  --badge-fg: var(--color-error-strong);
}

.badge--warning {
  --badge-bg: var(--color-warning-soft);
  --badge-fg: var(--color-warning-strong);
}

.badge--info {
  --badge-bg: var(--color-info-soft);
  --badge-fg: var(--color-info-strong);
}

.badge--primary {
  --badge-bg: var(--color-primary-soft);
  --badge-fg: var(--color-primary);
}

.badge--neutral {
  --badge-bg: var(--color-surface-muted);
  --badge-fg: var(--color-text-muted);
}

/* Not in Figma: extra shapes built on the same tones. */
.badge--sm {
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

/* Coloured dot before the text. */
.badge--dot::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
}

.badge--outline {
  border: var(--border-width-1) solid currentColor;
  background-color: transparent;
}

/* Removable: <span class="badge badge--primary">Pool <button class="badge__remove" aria-label="Remove Pool">…</button></span> */
.badge__remove {
  display: inline-flex;
  padding: 1px;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
}

.badge__remove hd-icon {
  --icon-size: 12px;
}

.badge__remove:hover {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
}

.badge__remove:focus-visible {
  outline: var(--border-width-2) solid currentColor;
}

/* components/avatars.css */
/* Avatar. Figma header avatar: 40px circle, thin N-700 ring with a small gap. */
.avatar {
  --avatar-size: 40px;
  display: inline-flex;
  flex-shrink: 0;
  width: var(--avatar-size);
  height: var(--avatar-size);
  padding: 1px;
  border: var(--border-width-1) solid var(--color-border-control);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  overflow: hidden;
}

.avatar__image {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.avatar--sm {
  --avatar-size: 32px;
}

.avatar--lg {
  --avatar-size: 60px;
}

/* No photo: initials on a tint. <span class="avatar avatar--initials" role="img" aria-label="Sarah Connor">SC</span> */
.avatar--initials {
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-soft);
  background-clip: content-box;
  color: var(--color-primary);
  font-size: calc(var(--avatar-size) * 0.36);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-transform: uppercase;
}

/* Status dot on the avatar's corner: wrap both in .avatar-status. */
.avatar-status {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.avatar-status > .status-dot {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
}

/* Avatar group: overlapping avatars with a "+N" at the end. Not part of the original design. */
.avatar-group {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.avatar-group > * + * {
  margin-inline-start: calc(var(--avatar-size, 40px) * -0.3);
}

.avatar-group .avatar {
  border-color: var(--color-surface);
  border-width: 2px;
  padding: 0;
}

.avatar--more {
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* Square thumbnail used in table rows (Figma 60px, radius 8). */
.thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
  object-fit: cover;
}

/* Thumbnail without a photo shows the first letter. */
.thumb--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.thumb--sm {
  width: 44px;
  height: 44px;
}

.thumb--lg {
  width: 72px;
  height: 72px;
}

/* components/cards.css */
/* Card container used by charts, tables and form sections. */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  overflow: hidden;
}

.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.card__header--lg {
  gap: var(--space-6);
  padding: var(--space-6);
}

.card__titles {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.card__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.card__title {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.card__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
}

.card__body--compact {
  padding: var(--space-4);
}

.card__body--flush {
  padding: 0;
}

/* Footer row for card actions (Cancel / Save, View all). Not part of the original design. */
.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: var(--border-width-1) solid var(--color-border);
}

.card__footer--between {
  justify-content: space-between;
}

/* Variants (not in Figma): plain = tinted, no border; elevated = shadow instead of border. */
.card--plain {
  border-color: transparent;
  background-color: var(--color-surface-muted);
}

.card--elevated {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

@media (max-width: 767.98px) {
  .card__header--lg,
  .card__body {
    padding: var(--space-4);
  }

  /* Figma mobile: title row first, then filters / legend on their own full-width rows. */
  .card__header {
    flex-wrap: wrap;
  }

  .card__title {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .card__actions:has(.select, .chart-legend) {
    flex-wrap: wrap;
    width: 100%;
  }

  .card__actions .chart-legend {
    flex-basis: 100%;
  }

  .card__actions .select {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Card with edit / delete buttons shown on hover or keyboard focus (rule cards, steps). */
.card-hover {
  position: relative;
}

.card-hover > :first-child {
  height: 100%;
}

.card-hover__actions {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  display: flex;
  gap: var(--space-2);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.card-hover:hover .card-hover__actions,
.card-hover:focus-within .card-hover__actions {
  opacity: 1;
}

@media (hover: none) {
  .card-hover__actions {
    opacity: 1;
  }
}

/* Small dark number square (cancellation tiers, key highlight points). */
.number-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding-inline: var(--space-1);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.card__subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

/* Collapsible section card (Figma room details sections). The heading wraps the toggle button. */
.card__title--toggle {
  display: flex;
  flex: 1;
  min-width: 0;
}

.card__toggle {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.card__toggle .card__caret {
  margin-inline-start: auto;
  transition: transform var(--transition-fast);
}

.card__toggle[aria-expanded='false'] .card__caret {
  transform: rotate(180deg);
}

/* components/stat-widget.css */
/*
 * Stat widgets (not in Figma): a number with a small chart, for dashboards.
 *   <article class="stat-widget">
 *     <div class="stat-widget__head">
 *       <div><p class="stat-widget__label">Bookings</p><p class="stat-widget__value">2,545</p></div>
 *       <span class="stat-widget__delta stat-widget__delta--up">+1.2%</span>
 *     </div>
 *     <span class="sparkline stat-widget__chart" data-sparkline="…" role="img" aria-label="…"></span>
 *   </article>
 * Charts: a sparkline (stat-widget__chart), .mini-bars, or a .progress-ring beside the text (--inline).
 * Tones: stat-widget--success, --warning, --error, --info tint the card and colour its chart.
 */
.stat-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.stat-widget {
  --tone: var(--color-primary);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  overflow: hidden;
}

.stat-widget__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.stat-widget__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.stat-widget__value {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-2xl);
  font-variant-numeric: tabular-nums;
}

.stat-widget__delta {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
}

.stat-widget__delta--up {
  color: var(--color-success-strong);
}

.stat-widget__delta--down {
  color: var(--color-error-strong);
}

/* A sparkline that spans the card's width at the bottom. */
.stat-widget__chart.sparkline {
  width: 100%;
  height: 56px;
  margin-top: auto;
  color: var(--tone);
}

/* Ring beside the number. */
.stat-widget--inline {
  flex-direction: row;
  align-items: center;
}

.stat-widget--inline .stat-widget__head {
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
}

/* Tinted tile: the card takes the tone's lightest shade. */
.stat-widget--success {
  --tone: var(--color-success-strong);
  border-color: var(--color-success-subtle);
  background-color: var(--color-success-soft);
}

.stat-widget--warning {
  --tone: var(--color-warning-strong);
  border-color: var(--color-warning-subtle);
  background-color: var(--color-warning-soft);
}

.stat-widget--error {
  --tone: var(--color-error);
  border-color: var(--color-error-subtle);
  background-color: var(--color-error-soft);
}

.stat-widget--info {
  --tone: var(--color-info-strong);
  border-color: var(--color-info-subtle);
  background-color: var(--color-info-soft);
}

/*
 * Mini bars: a few bars with no axes. Set --value (0–100) on each bar; .is-active highlights one.
 *   <div class="mini-bars" role="img" aria-label="Views by day: highest on Wednesday">
 *     <span style="--value: 40"></span> …
 *   </div>
 */
.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
  margin-top: auto;
}

.mini-bars > span {
  flex: 1;
  height: calc(var(--value, 50) * 1%);
  min-height: 4px;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--tone, var(--color-primary)) 25%, transparent);
}

.mini-bars > span.is-active {
  background-color: var(--tone, var(--color-primary));
}

@media (prefers-reduced-motion: no-preference) {
  .mini-bars > span {
    transform-origin: bottom;
    animation: mini-bar-grow var(--duration-chart) var(--ease-out) backwards;
  }
}

@keyframes mini-bar-grow {
  from {
    transform: scaleY(0);
  }
}

/* A taller chart for wider widget cards. */
.stat-widget__chart--tall.sparkline,
.mini-bars.stat-widget__chart--tall {
  height: 120px;
}

/* Two figures side by side under a chart (Room revenue / Extras). */
.stat-widget__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* components/tabs.css */
/* Tabs. Figma: Tabs (underline, e.g. customer details) and segmented (settings). */
.tabs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  border-top: var(--border-width-2) solid var(--color-border);
  border-bottom: var(--border-width-2) solid var(--color-border);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: calc(var(--border-width-2) * -1);
  padding: var(--space-4);
  border-bottom: var(--border-width-2) solid transparent;
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.tabs__tab:hover {
  color: var(--color-primary);
}

.tabs__tab[aria-selected='true'] {
  border-bottom-color: var(--color-primary);
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.tabs--segmented {
  display: inline-flex;
  align-self: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-primary-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
}

.tabs--segmented .tabs__tab {
  flex: 1;
  justify-content: center;
  gap: var(--space-1);
  min-width: 189px;
  margin: 0;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.tabs--segmented .tabs__tab:hover {
  color: var(--color-primary);
}

/* Links used as tabs (page navigation) mark the current page with aria-current. */
.tabs--segmented .tabs__tab[aria-selected='true'],
.tabs--segmented .tabs__tab[aria-current='page'] {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/*
 * Sliding indicator (assets/js/components/tabs.js): a bar under underline tabs, a pill behind
 * segmented tabs. It replaces each tab's own highlight once the script has placed it.
 */
.tabs.has-indicator {
  position: relative;
}

/* Physical left: tabs.js moves it with translate(offsetLeft, offsetTop), measured from the left edge in both directions. */
.tabs__indicator {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition:
    transform var(--duration-enter) var(--ease-out),
    width var(--duration-enter) var(--ease-out),
    height var(--duration-enter) var(--ease-out);
}

.tabs:not(.tabs--segmented) > .tabs__indicator {
  border-bottom: var(--border-width-2) solid var(--color-primary);
}

.tabs.has-indicator:not(.tabs--segmented) .tabs__tab[aria-selected='true'] {
  border-bottom-color: transparent;
}

.tabs--segmented > .tabs__indicator {
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
}

.tabs--segmented.has-indicator .tabs__tab {
  position: relative;
  transition: color var(--transition-slow);
}

.tabs--segmented.has-indicator .tabs__tab[aria-selected='true'] {
  background-color: transparent;
}

@media (max-width: 767.98px) {
  .tabs--segmented {
    display: flex;
    width: 100%;
  }

  .tabs--segmented .tabs__tab {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
}

/*
 * Not part of the original design.
 *   tabs--pills     segmented tabs without the tinted container (add to tabs--segmented)
 *   tabs--vertical  tabs in a column (set aria-orientation="vertical"); pair with .tabs-layout
 *   disabled tab    <button disabled> or aria-disabled="true"
 */
.tabs--segmented.tabs--pills {
  padding: 0;
  border: 0;
  background-color: transparent;
}

.tabs--pills .tabs__tab {
  flex: none;
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

.tabs--pills > .tabs__indicator {
  border-radius: var(--radius-full);
}

.tabs__tab:disabled,
.tabs__tab[aria-disabled='true'] {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

.tabs__tab:disabled:hover,
.tabs__tab[aria-disabled='true']:hover {
  color: var(--color-text);
}

.tabs--vertical {
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
  border-top: 0;
  border-bottom: 0;
}

.tabs--vertical:not(.tabs--segmented) {
  border-inline-start: var(--border-width-2) solid var(--color-border);
}

.tabs--vertical:not(.tabs--segmented) .tabs__tab {
  margin-bottom: 0;
  margin-inline-start: calc(var(--border-width-2) * -1);
  padding-block: var(--space-3);
  border-bottom: 0;
  border-inline-start: var(--border-width-2) solid transparent;
}

.tabs--vertical:not(.tabs--segmented) > .tabs__indicator {
  margin-inline-start: calc(var(--border-width-2) * -1);
  border-bottom: 0;
  border-inline-start: var(--border-width-2) solid var(--color-primary);
}

.tabs--vertical.tabs--segmented {
  display: flex;
  align-self: stretch;
}

.tabs--vertical.tabs--segmented .tabs__tab {
  flex: none;
  justify-content: flex-start;
  min-width: 0;
  padding-inline: var(--space-4);
}

/* Vertical tabs beside their panel; the tabs move above it on phones. */
.tabs-layout {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .tabs-layout {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
  }
}

/* Tabs that share the row equally (booking detail) and dense tabs (availability calendar). */
.tabs--block {
  display: flex;
  align-self: stretch;
}

.tabs--block .tabs__tab {
  min-width: 0;
}

.tabs--compact .tabs__tab {
  min-width: 0;
  padding: var(--space-2);
  white-space: nowrap;
}

/* components/pagination.css */
/* Table footer with rows-per-page and pagination. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width-1) solid var(--color-border);
}

.pagination__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

.pagination__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  cursor: pointer;
}

.pagination__page:hover {
  background-color: var(--color-primary-soft);
}

.pagination__page[aria-current='page'] {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.pagination__ellipsis {
  min-width: 24px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Figma mobile footer: summary on top, smaller page buttons below. */
@media (max-width: 767.98px) {
  .pagination {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4) 0 0;
  }

  .pagination__nav {
    gap: var(--space-3);
  }

  .pagination .icon-btn--soft {
    width: 28px;
    height: 28px;
    padding: var(--space-1);
  }

  .pagination .icon-btn--soft hd-icon {
    --icon-size: 20px;
  }

  .pagination__page {
    min-width: 28px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }
}

/* components/dropdowns.css */
/* Dropdown menus. Figma: Dropdown (list), Admin Dropdown (actions). */
.dropdown {
  position: relative;
  display: inline-flex;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.dropdown__menu--end {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  text-align: start;
  cursor: pointer;
}

.dropdown__item:first-child {
  padding-top: 0;
}

.dropdown__item:hover,
.dropdown__item:focus-visible,
.dropdown__item.is-active {
  color: var(--color-primary);
  outline: none;
}

.dropdown__item[aria-selected='true'] {
  color: var(--color-primary);
}

.dropdown__item[aria-disabled='true'] {
  color: var(--color-disabled);
  cursor: not-allowed;
}

/* Option groups (<optgroup> in a select): a small heading over the group's options. */
.dropdown__group {
  display: flex;
  flex-direction: column;
}

.dropdown__group + .dropdown__group,
.dropdown__item + .dropdown__group {
  margin-block-start: var(--space-3);
}

.dropdown__group-label {
  padding-block-end: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dropdown__group-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown__group-list .dropdown__item:first-child {
  padding-top: var(--space-2);
}

.dropdown__option-icon {
  --icon-size: 20px;
  flex-shrink: 0;
}

/* Compact action menu with icon boxes (profile menu, row actions). */
.dropdown__menu--actions {
  gap: var(--space-3);
}

.dropdown__menu--actions .dropdown__item {
  gap: var(--space-2);
  padding: 0;
  border: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
}

.dropdown__item-icon {
  display: inline-flex;
  padding: var(--space-1);
  background-color: var(--color-surface-muted);
}

.dropdown__item--danger {
  color: var(--color-error);
}

/*
 * Rich menus (not in Figma): compact rows with labels, separators, shortcuts, checkbox / radio items
 * and submenus. Built from the action menu style. Markup and keys: assets/js/components/dropdown.js.
 */
.dropdown__menu--compact {
  min-width: 240px;
  padding: var(--space-2);
}

.dropdown__menu--compact .dropdown__item {
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.dropdown__menu--compact .dropdown__item:is(:hover, :focus-visible, .is-active, [aria-expanded='true']) {
  background-color: var(--color-primary-soft);
}

.dropdown__menu--compact .dropdown__item hd-icon {
  --icon-size: 18px;
  flex-shrink: 0;
}

.dropdown__label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dropdown__separator {
  height: var(--border-width-1);
  margin-block: var(--space-1);
  background-color: var(--color-border);
}

.dropdown__shortcut {
  margin-inline-start: auto;
  padding-inline-start: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-xs);
  letter-spacing: 0.04em;
}

/* Checkbox and radio items: a tick or a dot in a fixed column at the start. */
.dropdown__item:is([role='menuitemcheckbox'], [role='menuitemradio']) {
  position: relative;
  padding-inline-start: 36px;
}

.dropdown__item:is([role='menuitemcheckbox'], [role='menuitemradio'])::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: var(--space-3);
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}

.dropdown__item[role='menuitemcheckbox'][aria-checked='true']::before {
  background-color: var(--color-primary);
  mask: var(--icon-check) center / contain no-repeat;
}

.dropdown__item[role='menuitemradio'][aria-checked='true']::before {
  width: 8px;
  height: 8px;
  margin-inline-start: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

/* Submenu item: a caret at the end; the submenu floats beside it. */
.dropdown__item[aria-haspopup='menu']::after {
  content: '';
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  background-color: currentColor;
  mask: var(--icon-caret-right) center / contain no-repeat;
}

.dropdown__item[aria-haspopup='menu']:has(.dropdown__shortcut)::after {
  margin-inline-start: var(--space-2);
}

.dropdown__menu--sub {
  min-width: 200px;
}

/* Phones: the submenu opens inside its menu, indented under its item. */
.dropdown__menu--sub.is-inline {
  position: static;
  min-width: 0;
  padding: 0;
  padding-inline-start: var(--space-6);
  border: 0;
  box-shadow: none;
  animation: none;
}

.dropdown__item[aria-haspopup='menu'][aria-expanded='true']:has(+ .is-inline)::after {
  transform: rotate(90deg);
}

[dir='rtl'] .dropdown__item[aria-haspopup='menu']::after {
  transform: scaleX(-1);
}

.dropdown__menu--actions .dropdown__item--danger:hover {
  color: var(--color-error-strong);
}

/* components/modals.css */
/* Modal. Figma: form modal (800 wide), Delete Modal / Disable Modal (500 wide). */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
}

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - var(--space-8));
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.modal--sm .modal__panel {
  max-width: 500px;
}

/* Wide form modals (Add Room Type, 1080 wide). */
.modal--lg .modal__panel {
  max-width: 1080px;
}

/* Title with a "Step 1 of 3" badge under it. */
.modal__header--stack {
  align-items: flex-start;
}

.modal__heading {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.modal__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-2xl);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  overflow-y: auto;
}

/* Form inside the modal body (footer submit button uses form="..."). */
.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-4);
  border-top: var(--border-width-1) solid var(--color-border);
}

/* Confirmation (delete / disable) layout. */
.modal--confirm .modal__body {
  align-items: center;
  text-align: center;
}

.modal--confirm .modal__footer .btn {
  flex: 1;
}

.modal__icon {
  --icon-tone-bg: var(--color-error-soft);
  --icon-tone-fg: var(--color-error);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background-color: var(--icon-tone-bg);
  color: var(--icon-tone-fg);
}

/* Danger is the default tone (delete, suspend); the modifier names it explicitly. */
.modal__icon--danger {
  --icon-tone-bg: var(--color-error-soft);
  --icon-tone-fg: var(--color-error);
}

.modal__icon--warning {
  --icon-tone-bg: var(--color-warning-soft);
  --icon-tone-fg: var(--color-warning);
}

.modal__icon--success {
  --icon-tone-bg: var(--color-success-soft);
  --icon-tone-fg: var(--color-success);
}

.modal__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.modal__message {
  color: var(--color-text-muted);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* Drawer: right-side panel. Figma: Booking Details sidebar (700 wide, 24px from the edges, radius 24). */
.modal--drawer {
  justify-content: flex-end;
  padding: var(--space-6);
}

.modal--drawer .modal__panel {
  max-width: 700px;
  height: 100%;
  max-height: none;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  animation: drawer-in var(--transition-slow);
}

.modal--drawer .modal__body {
  flex: 1;
}

.modal--drawer .modal__footer .btn {
  flex: 1;
}

@keyframes drawer-in {
  from {
    transform: var(--drawer-from, translateX(40px));
    opacity: 0;
  }
}

/*
 * Drawer sides: data-props '{"size": "drawer", "side": "left|top|bottom"}' (default right).
 * Not part of the original design; same panel, opened from another edge. On phones every drawer is a bottom sheet.
 */
.modal--from-left {
  --drawer-from: translateX(-40px);
  justify-content: flex-start;
}

.modal--from-top,
.modal--from-bottom {
  justify-content: center;
}

.modal--from-top {
  --drawer-from: translateY(-40px);
  align-items: flex-start;
}

.modal--from-bottom {
  --drawer-from: translateY(40px);
  align-items: flex-end;
}

.modal--drawer:is(.modal--from-top, .modal--from-bottom) .modal__panel {
  max-width: 1080px;
  height: auto;
  max-height: min(70vh, 640px);
}

[dir='rtl'] .modal--drawer:not(.modal--from-left, .modal--from-top, .modal--from-bottom) {
  --drawer-from: translateX(-40px);
}

[dir='rtl'] .modal--from-left {
  --drawer-from: translateX(40px);
}

/* Keeps the page from scrolling behind an open modal or drawer. */
.has-overlay {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  /* Figma mobile: drawers open as the same bottom sheet as form modals. */
  .modal--drawer {
    align-items: flex-end;
    padding: 0;
  }

  .modal--drawer .modal__panel {
    height: auto;
    max-height: max(60dvh, calc(100dvh - 160px));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }

  .modal--drawer .modal__title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
  }

  /* Form modals become a bottom sheet. Figma: Setup - Property Type New Add (mobile). */
  .modal:not(.modal--drawer, .modal--sm, .modal--confirm, .modal--command) {
    align-items: flex-end;
    padding: 0;
  }

  /* Figma mobile: the sheet tops out 160px below the screen top. */
  .modal:not(.modal--drawer, .modal--sm, .modal--confirm, .modal--command) .modal__panel {
    max-height: max(60dvh, calc(100dvh - 160px));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }

  .modal:not(.modal--drawer, .modal--sm, .modal--confirm, .modal--command) .modal__title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
  }

  .modal:not(.modal--drawer, .modal--sm, .modal--confirm, .modal--command) .modal__footer .btn {
    flex: 1;
  }

  .modal__header,
  .modal__body {
    padding: var(--space-4);
  }
}

/* Full-screen dialog (size "full"): the panel fills the screen with a small margin. */
.modal--full .modal__panel {
  width: calc(100vw - var(--space-8));
  max-width: none;
  height: calc(100dvh - var(--space-8));
  max-height: none;
}

.modal--full .modal__body {
  flex: 1;
}

/* A footer the script left empty (e.g. a read-only query) takes no room. */
.modal__footer:empty {
  display: none;
}

/* Extra wide dialog (Add / Edit Booking). */
.modal--xl .modal__panel {
  max-width: 1200px;
}

/* components/tooltips.css */
/*
 * Tooltip. Figma: Tooltip (black, 12px text, arrow at top-left).
 * Markup: <span class="tooltip"><button aria-describedby="tip-1">…</button>
 *         <span class="tooltip__bubble" role="tooltip" id="tip-1">Text</span></span>
 * assets/js/components/tooltip.js floats the bubble (flips to stay on screen, never cut off), adds a
 * short open delay and Escape. Without the script, CSS :hover / :focus-within still shows it.
 * Hover card (same script): a small read-only card on hover, e.g. a guest or staff preview.
 */
.tooltip,
.hover-card {
  position: relative;
  display: inline-flex;
}

.tooltip__bubble {
  --arrow-x: 23px;
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-start: -10px;
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: min(320px, calc(100vw - var(--space-8)));
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
  /* display: none (not just invisible) so a closed bubble never widens the page on small screens. */
  display: none;
}

/*
 * Arrow: above the bubble pointing up, or below it when the bubble opened above the trigger.
 * tooltip.js measures --arrow-x from the bubble's left edge, so the arrow stays physical (left).
 */
.tooltip__bubble::before {
  content: '';
  position: absolute;
  top: -12px;
  left: calc(var(--arrow-x) - 9px);
  border-inline: 9px solid transparent;
  border-bottom: 13px solid var(--color-surface-inverse);
}

/* Without the script the bubble hangs from the start edge, so the arrow follows it in RTL. */
[dir='rtl'] .tooltip:not(.is-ready) .tooltip__bubble::before {
  right: calc(var(--arrow-x) - 9px);
  left: auto;
}

.tooltip__bubble.is-above::before {
  top: auto;
  bottom: -12px;
  border-top: 13px solid var(--color-surface-inverse);
  border-bottom: 0;
}

.tooltip:not(.is-ready):is(:hover, :focus-within) .tooltip__bubble,
.tooltip.is-open .tooltip__bubble {
  display: block;
  animation: fade-in var(--transition-fast) backwards;
}

/* Hover card. */
.hover-card__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--z-tooltip);
  display: none;
  width: min(320px, calc(100vw - var(--space-8)));
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-sm);
  text-align: start;
}

.hover-card.is-open .hover-card__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: pop-in var(--duration-xs) var(--ease-out) backwards;
}

.hover-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hover-card__name,
.hover-card__meta {
  display: block;
}

.hover-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
}

.hover-card__meta {
  color: var(--color-text-muted);
}

.hover-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.hover-card__stat strong {
  display: block;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-variant-numeric: tabular-nums;
}

/* components/alerts.css */
/* Inline alert / note. Figma: "Note:" box in Create New Event. */
.alert {
  --alert-bg: var(--color-error-soft);
  --alert-border: var(--color-error-border);
  --alert-title: var(--color-error-strong);
  --alert-text: var(--color-error-strong);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--alert-border);
  border-radius: var(--radius-lg);
  background-color: var(--alert-bg);
  color: var(--alert-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.alert__title {
  color: var(--alert-title);
  font-weight: var(--font-weight-semibold);
}

/* Optional parts (not in Figma): an action link and a close button (banner.js closes it). */
.alert__text {
  flex: 1;
  min-width: 0;
}

.alert__action {
  flex-shrink: 0;
  color: var(--alert-title);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alert__close,
.banner__close {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
}

.alert__close:hover,
.banner__close:hover {
  background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.alert__close:focus-visible,
.banner__close:focus-visible,
.alert__action:focus-visible,
.banner__action:focus-visible {
  outline: var(--border-width-2) solid currentColor;
  outline-offset: 2px;
}

/*
 * Banner: a page-wide notice above the page content (maintenance, trial ending, offline).
 * Not part of the original design; built from the alert colors. Close with [data-dismiss]; data-banner-id remembers it.
 *   <div class="banner banner--warning" role="region" aria-label="Notice" data-banner-id="maintenance-oct">
 *     <hd-icon class="banner__icon" name="warning"></hd-icon>
 *     <p class="banner__text"><strong>Planned maintenance</strong> Sunday 2–4 AM. Bookings stay open.</p>
 *     <a class="banner__action" href="…">Details</a>
 *     <button type="button" class="banner__close" data-dismiss aria-label="Dismiss notice">…</button>
 *   </div>
 */
.banner {
  --banner-bg: var(--color-primary);
  --banner-fg: var(--color-text-inverse);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--banner-bg);
  color: var(--banner-fg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.banner__icon {
  --icon-size: 20px;
  flex-shrink: 0;
}

.banner__text {
  flex: 1 1 240px;
  min-width: 0;
}

.banner__text strong {
  font-weight: var(--font-weight-semibold);
}

.banner__action {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width-1) solid currentColor;
  border-radius: var(--radius-md);
  color: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.banner__action:hover {
  background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.banner--warning {
  --banner-bg: var(--color-warning-subtle);
  --banner-fg: var(--color-warning-strong);
}

.banner--error {
  --banner-bg: var(--color-error-solid);
  --banner-fg: var(--color-text-inverse);
}

.banner--success {
  --banner-bg: var(--color-success-soft);
  --banner-fg: var(--color-success-strong);
}

.banner--info {
  --banner-bg: var(--color-info-soft);
  --banner-fg: var(--color-info-strong);
}

.banner.is-leaving,
.alert.is-leaving {
  animation: fade-out var(--transition-base) forwards;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* Error is the default tone; .alert--error names it, so it also wins over a tone set by a parent. */
.alert--error {
  --alert-bg: var(--color-error-soft);
  --alert-border: var(--color-error-border);
  --alert-title: var(--color-error-strong);
  --alert-text: var(--color-error-strong);
}

.alert--warning {
  --alert-bg: var(--color-warning-soft);
  --alert-border: var(--color-warning-border);
  --alert-title: var(--color-warning-strong);
  --alert-text: var(--color-warning-strong);
}

.alert--success {
  --alert-bg: var(--color-success-soft);
  --alert-border: var(--color-success-border);
  --alert-title: var(--color-success-strong);
  --alert-text: var(--color-success-strong);
}

.alert--info {
  --alert-bg: var(--color-info-soft);
  --alert-border: var(--color-info-border);
  --alert-title: var(--color-info-strong);
  --alert-text: var(--color-info-strong);
}

/* Toasts. Figma: Alerts (Password reset success), stacked at the top right. */
.toast-region {
  position: fixed;
  top: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(450px, calc(100vw - var(--space-8)));
}

.toast {
  --toast-bg: var(--color-success-soft);
  --toast-border: var(--color-success-border-strong);
  --toast-accent: var(--color-success);
  --toast-track: var(--color-success-subtle);
  overflow: hidden;
  border: var(--border-width-1) solid var(--toast-border);
  border-radius: var(--radius-lg);
  background-color: var(--toast-bg);
  box-shadow: var(--shadow-md);
  animation: toast-in var(--transition-base);
}

.toast--error {
  --toast-bg: var(--color-error-soft);
  --toast-border: var(--color-error-border-strong);
  --toast-accent: var(--color-error);
  --toast-track: var(--color-error-subtle);
}

.toast--warning {
  --toast-bg: var(--color-warning-soft);
  --toast-border: var(--color-warning-border-strong);
  --toast-accent: var(--color-warning);
  --toast-track: var(--color-warning-subtle);
}

.toast--info {
  --toast-bg: var(--color-info-soft);
  --toast-border: var(--color-info-border-strong);
  --toast-accent: var(--color-info);
  --toast-track: var(--color-info-subtle);
}

.toast__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
}

.toast__icon {
  flex-shrink: 0;
  color: var(--toast-accent);
}

.toast__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.toast__title {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.toast__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.toast__close {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* Not in Figma: an action button (Undo, View) and a loading tone with a spinner. */
.toast__action {
  align-self: flex-start;
  margin-block-start: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width-1) solid var(--toast-accent);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  cursor: pointer;
}

.toast__action:hover {
  background-color: var(--toast-track);
}

.toast--loading {
  --toast-bg: var(--color-surface);
  --toast-border: var(--color-border);
  --toast-accent: var(--color-primary);
  --toast-track: var(--color-primary-subtle);
}

.toast__icon.spinner {
  width: 22px;
  height: 22px;
  margin: 1px;
  color: var(--toast-accent);
}

.toast__timer {
  height: 5px;
  background-color: var(--toast-track);
}

.toast__progress {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--toast-accent);
  transform-origin: left;
  animation: toast-timer linear forwards;
}

[dir='rtl'] .toast__progress {
  transform-origin: right;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes toast-timer {
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast__progress {
    animation: none;
  }
}

/* Callout: coloured icon square + title + text (+ action). Figma: Places API, Referral Reward Update. */
.callout {
  --callout-bg: var(--color-error-soft);
  --callout-accent: var(--color-error);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--callout-bg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.callout > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.callout__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-self: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--callout-accent);
  color: var(--color-text-inverse);
}

.callout__title {
  font-weight: var(--font-weight-semibold);
}

.callout--warning {
  --callout-bg: var(--color-warning-soft);
  --callout-accent: var(--color-warning);
}

.callout strong {
  display: block;
}

/* Toasts slide out toward the end edge (components/toast.js) and pause their timer while hovered. */
.toast.is-leaving {
  animation: toast-out var(--duration-sm) ease-in forwards;
}

.toast:hover .toast__progress {
  animation-play-state: paused;
}

/* components/loaders.css */
/* Spinner and skeleton (loading state is not designed in Figma; built from tokens). */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-primary-subtle);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin var(--duration-spin) linear infinite;
}

.spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

/* Sizes and color (not in Figma). Give a lone spinner role="status" and a visually-hidden label. */
.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* Takes the text color, e.g. inside a button: <button class="btn btn--primary"><span class="spinner spinner--sm spinner--current"></span>Saving</button> */
.spinner--current {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
}

.skeleton {
  display: block;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--color-skeleton) 0%, var(--color-skeleton-shine) 50%, var(--color-skeleton) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

/*
 * Ready-made skeleton shapes (not in Figma). Hide them from screen readers (aria-hidden="true") and
 * mark the loading region with aria-busy="true".
 *   .skeleton--text   one line of body text (add --short for a 60% line)
 *   .skeleton--title  a heading line
 *   .skeleton--circle an avatar (set --size)
 *   .skeleton--block  an image or card area (set --height)
 *   .skeleton-stack   lines spaced like a paragraph; .skeleton-row  media + text side by side
 */
.skeleton--text {
  height: 0.9em;
  border-radius: var(--radius-sm);
}

.skeleton--text.skeleton--short {
  width: 60%;
}

.skeleton--title {
  width: 45%;
  height: 1.4em;
  border-radius: var(--radius-md);
}

.skeleton--circle {
  flex-shrink: 0;
  width: var(--size, 40px);
  height: var(--size, 40px);
  border-radius: var(--radius-full);
}

.skeleton--circle.skeleton--lg {
  --size: 48px;
}

.skeleton--block {
  width: 100%;
  height: var(--height, 160px);
}

.skeleton--block-sm {
  --height: 96px;
}

.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skeleton-row > .skeleton-stack {
  flex: 1;
}

.divider {
  width: 100%;
  height: 0;
  border: 0;
  border-top: var(--border-width-1) solid var(--color-border);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

/* components/tables.css */
/*
 * DataTable. Figma: Table (staff, recent bookings). Desktop: real table with 24px row padding
 * and 30px column gaps. Tablet: same table, scrolls inside the card. Mobile: stacked cards.
 */
.data-table__header .card__actions .btn {
  white-space: nowrap;
}

.data-table__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
}

.data-table__search {
  flex: 0 1 450px;
}

/* The actions keep one row; when the card is too narrow for both, they move below the search. */
.data-table__actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.data-table__actions:empty {
  display: none;
}

/* Filter menus sit inline with the other actions; on mobile they fold behind the funnel toggle. */
.data-table__filters {
  display: contents;
}

.data-table__filter-toggle {
  display: none;
}

.data-table__bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-top: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-primary-soft);
}

.data-table__bulk-count {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.data-table__bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.data-table__state {
  padding: var(--space-6);
}

.data-table__scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  min-width: 960px;
  table-layout: auto;
  text-align: start;
}

.table th {
  padding: var(--space-4) 15px;
  border-top: var(--border-width-1) solid var(--color-border);
  border-bottom: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.table td {
  padding: var(--space-6) 15px;
  color: var(--color-text);
  vertical-align: top;
}

.table tbody tr + tr td {
  border-top: var(--border-width-1) solid var(--color-border);
}

.table th:first-child,
.table td:first-child {
  padding-inline-start: var(--space-6);
}

.table th:last-child,
.table td:last-child {
  padding-inline-end: var(--space-6);
}

.table tbody tr {
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover,
.table tbody tr.is-selected {
  background-color: var(--color-primary-soft);
}

.table .table__cell--end {
  text-align: end;
}

.table__check {
  width: 24px;
}

.table__col-check {
  width: 63px;
}

.table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.table__sort-icon {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.table__sort:hover .table__sort-icon,
[aria-sort='ascending'] .table__sort-icon,
[aria-sort='descending'] .table__sort-icon {
  opacity: 1;
}

/* Cell layouts (assets/js/components/table-cells.js). */
.cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.cell-stack__primary {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.cell-stack__primary--link,
.cell-stack__secondary,
.cell-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

.cell-stack__secondary--link {
  color: var(--color-primary);
}

.cell-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.cell-meta__dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-muted);
}

.cell-range {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.cell-amount {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
  white-space: nowrap;
}

.cell-text {
  white-space: nowrap;
}

.cell-media {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.cell-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

/* Column visibility checklist inside the "Columns" dropdown. */
.dropdown__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  white-space: nowrap;
  cursor: pointer;
}

/* The table's Columns menu: a compact menu of checkbox rows, a little narrower. */
.dropdown__menu--compact:has(.dropdown__check) {
  gap: var(--space-1);
  min-width: 220px;
}

/* Figma mobile: each row is a bordered card with LABEL : value lines. */
@media (max-width: 767.98px) {
  .data-table {
    padding: var(--space-4);
  }

  .data-table__header {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 var(--space-4);
  }

  .data-table__header .card__actions,
  .data-table__header .card__actions .btn {
    width: 100%;
  }

  /* Figma mobile: search + funnel on one row, then Columns / Exports splitting the width. */
  .data-table__toolbar {
    padding: 0;
  }

  .data-table__search {
    flex: 1 1 0;
    gap: var(--space-2);
    min-width: 0;
    padding-block: var(--space-2);
  }

  .data-table__filter-toggle {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
  }

  .data-table__filter-toggle[aria-expanded='true'] {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .data-table__actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    min-width: 0;
  }

  /* Filter, Columns and Exports menus pair up two per row (Figma). */
  .data-table__actions > .dropdown,
  .data-table__actions > .btn,
  .data-table__filters > .dropdown {
    flex: 1 1 calc(50% - var(--space-4));
  }

  .data-table__actions > .dropdown > .btn,
  .data-table__filters > .dropdown > .btn {
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    padding-inline: var(--space-3);
  }

  .data-table__actions .dropdown > .btn hd-icon {
    --icon-size: 20px;
  }

  .data-table--filter-toggle .data-table__filters {
    display: none;
  }

  .data-table--filter-toggle .data-table__toolbar:has([data-table-filter-toggle][aria-expanded='true']) .data-table__filters {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: var(--space-4);
  }

  .data-table__state {
    padding: var(--space-4) 0 0;
  }

  .table {
    min-width: 0;
  }

  .table caption,
  .table colgroup,
  .table thead {
    display: none;
  }

  .table,
  .table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .table tbody {
    padding-top: var(--space-4);
  }

  /* One column of label/value lines; cells reorder with --mobile-order (column.mobileOrder) and
     .table__cell--inline pairs (column.mobileInline) share a row. */
  .table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding: var(--space-4);
    border: var(--border-width-1) solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .table td,
  .table td:first-child,
  .table td:last-child {
    display: flex;
    grid-column: 1 / -1;
    order: var(--mobile-order, 0);
    align-items: center;
    gap: var(--space-2);
    padding: 0;
  }

  .table tbody td.table__cell--inline {
    grid-column: auto;
  }

  /* Paired cells touch so their dividers join; the second one keeps a gap from the first. */
  .table tbody tr {
    column-gap: 0;
  }

  .table tbody td.table__cell--inline + td.table__cell--inline {
    padding-inline-start: var(--space-4);
  }

  /* An inline first cell (e.g. ID) shares the top row with the next unordered inline cell
     (status, count, view button): no divider, pushed right. */
  .table tbody tr > td.table__cell--inline:first-child ~ td.table__cell--inline:not([style]) {
    justify-content: flex-end;
    padding-top: 0;
    border-top: 0;
  }

  .table tbody tr td:first-child {
    border-top: 0;
  }

  .table tbody tr td:not(:first-child) {
    padding-top: var(--space-4);
    border-top: var(--border-width-1) solid var(--color-border);
  }

  .table td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    width: 100px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-sm);
    text-transform: uppercase;
  }

  .table td[data-label='']::before {
    display: none;
  }

  .table .table__cell--end,
  .table .cell-actions {
    justify-content: flex-start;
    text-align: start;
  }

  .cell-stack__primary,
  .cell-stack__secondary,
  .cell-meta {
    white-space: normal;
  }

  /* A table inside a card body (Room Reviews, customer bookings) drops its own frame. */
  .card__body .data-table {
    padding: 0;
    border: 0;
  }

  .table td:empty,
  .table td.table__cell--mobile-hidden {
    display: none;
  }

  /* mobileVariant: 'media' (Figma Room Types / All Rooms): no labels or dividers, actions bottom-right. */
  .data-table--media .table tbody tr td:not(:first-child) {
    padding-top: 0;
    border-top: 0;
  }

  .data-table--media .table .table__cell--end {
    justify-content: flex-end;
  }
}

/* Icon + text lines in a cell (email / phone, targeting). */
.icon-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.icon-lines li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.cell-nowrap {
  white-space: nowrap;
}

/* Totals row (reports). */
.table tfoot th,
.table tfoot td {
  padding: var(--space-4) 15px;
  border-top: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-surface-muted);
  font-weight: var(--font-weight-semibold);
  text-align: start;
}

.table tfoot th:first-child {
  padding-inline-start: var(--space-6);
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  .table tfoot tr {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .table tfoot td,
  .table tfoot th {
    display: flex;
    justify-content: space-between;
    padding: 0;
    border: 0;
  }

  .table tfoot td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
  }

  .table tfoot .table__cell--blank {
    display: none;
  }
}

/* Text link with an "open" icon (booking ids, properties in reports and refunds). */
.link-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  white-space: nowrap;
}

/* Table rows removed by a reload (deleted) slide out before the table redraws (components/table.js). */
.table tbody tr.is-leaving {
  animation: row-leave var(--duration-md) var(--ease-out) forwards;
}

/*
 * createDataTable options (not in Figma).
 *   expandable   a toggle column; the detail row opens under its row
 *   stickyFirst  the control columns and the first data column stay in view while scrolling sideways
 *   density      'compact': shorter rows for long lists
 */
.data-table {
  --table-expand-width: 56px;
  --table-check-width: 63px;
}

.table__col-expand {
  width: var(--table-expand-width);
}

.table .table__expand {
  width: 32px;
  padding-inline-end: 0;
}

.table__expand-toggle hd-icon {
  transition: transform var(--transition-fast);
}

.table__expand-toggle[aria-expanded='true'] hd-icon {
  transform: rotate(90deg);
}

.table tbody tr.table__detail td {
  padding-block: var(--space-4);
  border-top: 0;
  background-color: var(--color-surface-muted);
}

.table tbody tr.table__detail:hover {
  background-color: transparent;
}

.data-table--compact .table th {
  padding-block: var(--space-2);
}

.data-table--compact .table td {
  padding-block: var(--space-3);
}

@media (min-width: 768px) {
  .data-table--sticky-first .table :is(.table__expand, .table__check, .table__cell--sticky) {
    position: sticky;
    z-index: var(--z-raised);
    background-color: var(--color-surface);
  }

  .data-table--sticky-first .table thead :is(.table__expand, .table__check, .table__cell--sticky) {
    background-color: var(--color-surface-muted);
  }

  .data-table--sticky-first .table tbody tr:is(:hover, .is-selected) :is(.table__expand, .table__check, .table__cell--sticky) {
    background-color: var(--color-primary-soft);
  }

  .data-table--sticky-first .table .table__expand {
    inset-inline-start: 0;
  }

  .data-table--sticky-first .table .table__check {
    inset-inline-start: var(--sticky-check-left, 0px);
  }

  .data-table--sticky-first .table .table__cell--sticky {
    inset-inline-start: var(--sticky-first-left, 0px);
    box-shadow: inset -1px 0 0 var(--color-border);
  }
}

/*
 * createDataTable options (not in Figma).
 *   columns[].editable  the cell is a button; click (or Enter) turns it into a field
 *   reorderable         a drag handle per row; the row being moved is lifted
 */
.table__edit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-1) dashed transparent;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: text;
}

.table__edit:hover,
.table__edit:focus-visible {
  border-color: var(--color-border);
  background-color: var(--color-surface);
}

.table__edit-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.table__edit:hover .table__edit-icon,
.table__edit:focus-visible .table__edit-icon {
  opacity: 1;
}

.table__edit-control {
  min-width: 140px;
  margin-block: calc(var(--space-2) * -1);
}

.table__col-drag {
  width: 48px;
}

.table .table__drag {
  width: 24px;
  padding-inline-end: 0;
}

.table__drag-handle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  cursor: grab;
  touch-action: none;
}

.table__drag-handle:hover,
.table__drag-handle[aria-pressed='true'] {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}

.table__drag-handle:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

.table tbody tr.is-dragging {
  position: relative;
  z-index: var(--z-raised-2);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.table tbody tr.is-dragging .table__drag-handle {
  cursor: grabbing;
}

/* components/virtual-list.css */
/*
 * Virtual list (components/virtual-list.js): a scroll box that keeps only the visible rows in the page.
 * Not part of the original design. --row-height and --list-height come from the script options.
 * Put a .virtual-list__head above it for column titles; rows lay their content out themselves
 * (a grid with the same columns as the head keeps them lined up).
 */
.virtual-list {
  overflow: hidden;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.virtual-list__head {
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 36px);
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  text-transform: uppercase;
}

.virtual-list__viewport {
  position: relative;
  height: var(--list-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.virtual-list__viewport:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: -2px;
}

.virtual-list__spacer {
  position: relative;
}

.virtual-list__rows {
  position: absolute;
  inset: 0 0 auto;
  will-change: transform;
}

.virtual-list__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--row-height);
  padding-inline: var(--space-4);
  border-block-end: var(--border-width-1) solid var(--color-border);
  cursor: pointer;
}

.virtual-list__row:hover {
  background-color: var(--color-surface-muted);
}

.virtual-list__row.is-selected {
  background-color: var(--color-primary-soft);
}

.virtual-list__viewport:focus-visible .virtual-list__row.is-active {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.virtual-list__check {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: var(--border-width-1) solid var(--color-border-emphasis);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

.virtual-list__row.is-selected .virtual-list__check {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.virtual-list__row.is-selected .virtual-list__check::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background-color: var(--color-text-inverse);
  mask: var(--icon-check) center / contain no-repeat;
}

/* components/datepicker.css */
/*
 * Date picker. Figma shows the field only (outlined input + CalendarDots icon);
 * the popover follows the Figma dropdown style (white, 16px radius, shadow-lg).
 */
.datepicker {
  position: relative;
  cursor: pointer;
}

.datepicker .control__input {
  cursor: pointer;
}

.datepicker__toggle {
  display: inline-flex;
  color: var(--color-text);
  cursor: pointer;
}

.datepicker__popover {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  width: 320px;
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
  cursor: default;
}

.datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.datepicker__title {
  font-weight: var(--font-weight-semibold);
}

.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.datepicker__weekday {
  padding: var(--space-1) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  text-align: center;
}

.datepicker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  cursor: pointer;
}

.datepicker__day:hover:not(:disabled) {
  background-color: var(--color-primary-soft);
}

.datepicker__day.is-today {
  border-color: var(--color-primary);
}

.datepicker__day.is-in-range,
.datepicker__day.is-in-preview {
  border-radius: 0;
  background-color: var(--color-primary-soft);
}

.datepicker__day.is-selected,
.datepicker__day.is-range-start,
.datepicker__day.is-range-end {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.datepicker__day:disabled {
  color: var(--color-disabled);
  cursor: not-allowed;
}

.datepicker__day.is-empty {
  cursor: default;
}

@media (max-width: 479.98px) {
  .datepicker__popover {
    width: min(320px, calc(100vw - var(--space-8)));
  }
}

/* Month grid (month-calendar.js): two months side by side in the range picker. */
.month-grid--double {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .month-grid--double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.month-grid__spacer {
  width: 32px;
}

/* Inline calendar: the month grid on the page, in a bordered panel. Markup: <div data-calendar>. */
.calendar-inline {
  width: min(100%, 320px);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

/* Date range picker: presets beside two months. Markup: <input data-daterange>. */
.daterange__popover {
  width: auto;
  max-width: calc(100vw - var(--space-4));
}

.daterange__body {
  display: grid;
  gap: var(--space-4);
}

.daterange__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.daterange__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.daterange__summary {
  flex: 1;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

@media (min-width: 768px) {
  .daterange__popover {
    width: 720px;
  }

  .daterange__body {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .daterange__presets {
    flex-direction: column;
    flex-wrap: nowrap;
    padding-inline-end: var(--space-4);
    border-inline-end: var(--border-width-1) solid var(--color-border);
  }

  .daterange__presets .toggle {
    width: 100%;
    justify-content: flex-start;
  }
}

/* components/stepper.css */
/*
 * Vertical stepper. Figma: Progress step ("Setup Progress", Add Property / Add Room Type).
 * Completed state is not designed: primary circle with a white check.
 */
.stepper {
  display: flex;
  flex-direction: column;
}

.stepper__step {
  position: relative;
  display: flex;
  gap: var(--space-3);
  min-height: 56px;
  padding-bottom: var(--space-8);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-align: start;
}

.stepper__step:last-child {
  min-height: 0;
  padding-bottom: 0;
}

.stepper__marker {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
}

.stepper__marker::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
}

/* Connector line between steps (fills in when the step completes, see the end of this file). */
.stepper__step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 26px;
  bottom: 4px;
  inset-inline-start: 9px;
  width: 2px;
  border-radius: var(--radius-full);
}

.stepper__step[aria-current='step'] .stepper__marker {
  border-color: var(--color-primary);
}

.stepper__step[aria-current='step'] .stepper__marker::after {
  background-color: var(--color-primary);
}

.stepper__step.is-complete .stepper__marker {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.stepper__step.is-complete .stepper__marker::after {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background-color: var(--color-text-inverse);
  mask: var(--icon-check) center / contain no-repeat;
}

button.stepper__step {
  cursor: pointer;
}

button.stepper__step:hover .stepper__label {
  color: var(--color-primary);
}

/* Step with a description line. Large size: Figma Progress step (Initial Setup). */
.stepper__text {
  display: flex;
  flex-direction: column;
}

.stepper__description {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.stepper--lg .stepper__label {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}

.stepper--lg .stepper__marker {
  margin-top: 0;
}

.stepper--lg .stepper__step:not(:last-child)::before {
  top: 24px;
}

/* Ring showing "1/2" progress. Set --progress (0-100) inline. Figma: Progress Bar (mobile setup). */
.step-ring {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.step-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: conic-gradient(var(--color-primary) calc(var(--progress, 0) * 1%), var(--color-border-strong) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}

/* Setup progress bar. Figma: Progress (dashboard set-up). */
.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-2xl);
  background-color: var(--color-primary-soft);
}

.progress__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.progress__value {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.progress__track {
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-subtle);
  overflow: hidden;
}

.progress__bar {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  transition: width var(--transition-slow);
}

.progress__caption {
  color: var(--color-text-muted);
  font-family: var(--font-family-heading);
  text-align: end;
}

/* Mobile / tablet setup progress. Shown below 1024px,
   where the step list is hidden. */
.wizard-progress {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}

.wizard-progress__title {
  color: var(--color-text-muted);
}

.wizard-progress__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.wizard-progress__text {
  display: flex;
  flex-direction: column;
}

.wizard-progress__step {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.wizard-progress__name {
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 1023.98px) {
  .wizard-progress {
    display: flex;
  }
}

/* Stepper: the connector fills downward and the check pops in when a step completes. */
.stepper__step:not(:last-child)::before {
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) top / 100% 0% no-repeat,
    linear-gradient(var(--color-border), var(--color-border)) top / 100% 100% no-repeat;
  transition: background-size var(--duration-lg) var(--ease-out);
}

.stepper__step.is-complete:not(:last-child)::before {
  background-size: 100% 100%, 100% 100%;
}

.stepper__step.is-complete .stepper__marker::after {
  animation: pop var(--duration-md) var(--ease-out) backwards;
}

.stepper__marker {
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

/*
 * Not part of the original design.
 *   stepper--numbered    markers show the step number; a check once complete
 *   stepper--horizontal  steps in a row with the connector between markers (wizards above a form)
 */
.stepper--numbered {
  counter-reset: step;
}

.stepper--numbered .stepper__step {
  counter-increment: step;
}

.stepper--numbered .stepper__marker {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.stepper--numbered .stepper__marker::after {
  content: counter(step);
  position: static;
  width: auto;
  height: auto;
  background-color: transparent;
}

.stepper--numbered .stepper__step[aria-current='step'] .stepper__marker {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.stepper--numbered .stepper__step[aria-current='step'] .stepper__marker::after {
  background-color: transparent;
}

.stepper--numbered .stepper__step.is-complete .stepper__marker::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  background-color: var(--color-text-inverse);
}

.stepper--numbered .stepper__step:not(:last-child)::before {
  top: 34px;
  inset-inline-start: 13px;
}

.stepper--horizontal {
  flex-direction: row;
}

.stepper--horizontal .stepper__step {
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-height: 0;
  padding-bottom: 0;
  text-align: center;
}

.stepper--horizontal .stepper__label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.stepper--horizontal .stepper__step:not(:last-child)::before {
  top: 13px;
  inset-inline-end: calc(-50% + 20px);
  bottom: auto;
  inset-inline-start: calc(50% + 20px);
  width: auto;
  height: 2px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) left / 0% 100% no-repeat,
    linear-gradient(var(--color-border), var(--color-border)) left / 100% 100% no-repeat;
}

.stepper--horizontal .stepper__step.is-complete:not(:last-child)::before {
  background-size: 100% 100%, 100% 100%;
}

.stepper--horizontal:not(.stepper--numbered) .stepper__step:not(:last-child)::before {
  top: 11px;
  inset-inline-end: calc(-50% + 16px);
  inset-inline-start: calc(50% + 16px);
}

/* components/upload.css */
/* File upload. Figma: Upload (empty and "image uploaded" states). */
.upload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6);
  border: var(--border-width-2) dashed var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-muted);
  text-align: center;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.upload__zone.is-dragover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.upload__zone:focus-within {
  border-color: var(--color-primary);
}

.upload__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-primary);
  filter: drop-shadow(var(--shadow-drop));
}

.upload__text {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.upload__choose {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  cursor: pointer;
}

.upload__note {
  display: flex;
  justify-content: space-between;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.upload__previews {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.upload__previews:empty {
  display: none;
}

.upload__preview {
  position: relative;
  width: min(433px, 100%);
  aspect-ratio: 433 / 338;
}

/* Multiple images: 4-column grid under the drop zone. */
.upload__previews--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .upload__previews--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.upload__previews--grid .upload__preview {
  width: auto;
  aspect-ratio: 237 / 197;
}

.upload__previews--grid .upload__image {
  border-radius: var(--radius-lg);
}

.upload__image {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.upload__file {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: 14px;
  background-color: var(--color-surface);
  font-size: var(--font-size-sm);
  word-break: break-all;
}

/* Remove button (not in Figma). */
.upload__remove {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
}

/*
 * Not part of the original design.
 *   upload--accent  tinted primary drop zone            data-props: "variant": "accent"
 *   upload--card    white card with a large icon tile    data-props: "variant": "card"
 *   file-input      the native file field, styled; file-input--sm / --lg
 */
.upload--accent .upload__zone {
  border-color: var(--color-primary-border-strong);
  background-color: var(--color-primary-soft);
}

.upload--card .upload__zone {
  gap: var(--space-4);
  padding: var(--space-10) var(--space-6);
  border-width: var(--border-width-1);
  background-color: var(--color-surface);
}

.upload--card .upload__icon {
  order: 1;
  width: 96px;
  height: 96px;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  filter: none;
}

.upload--card .upload__icon hd-icon {
  --icon-size: 32px;
}

.upload--card .upload__text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.file-input {
  width: 100%;
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  cursor: pointer;
}

.file-input::file-selector-button {
  margin-inline-end: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font: inherit;
  cursor: pointer;
}

.file-input:hover::file-selector-button {
  background-color: var(--color-primary-subtle);
}

.file-input:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

.file-input--sm {
  padding: var(--space-1);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.file-input--lg {
  padding: var(--space-3);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

/* components/rich-text-editor.css */
/*
 * Quill editor themed to match the Figma form field (outlined white box, radius 8).
 * The toolbar is not designed in Figma; it uses the same tokens as other controls.
 */
.control--rich {
  display: block;
  padding: 0;
  overflow: hidden;
}

.control--rich .ql-toolbar.ql-snow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-surface-muted);
  font-family: var(--font-family-body);
}

.control--rich .ql-container.ql-snow {
  border: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
}

.control--rich .ql-editor {
  min-height: 156px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  line-height: var(--line-height-base);
}

.control--rich .ql-editor.ql-blank::before {
  inset-inline-end: var(--space-4);
  inset-inline-start: var(--space-4);
  color: var(--color-placeholder);
  font-style: normal;
}

.control--rich .ql-snow .ql-stroke {
  stroke: var(--color-text-muted);
}

.control--rich .ql-snow .ql-fill {
  fill: var(--color-text-muted);
}

.control--rich .ql-snow .ql-picker {
  color: var(--color-text-muted);
}

.control--rich .ql-snow button:hover .ql-stroke,
.control--rich .ql-snow button.ql-active .ql-stroke,
.control--rich .ql-snow .ql-picker-label:hover .ql-stroke {
  stroke: var(--color-primary);
}

.control--rich .ql-snow button:hover .ql-fill,
.control--rich .ql-snow button.ql-active .ql-fill {
  fill: var(--color-primary);
}

.control--rich .ql-snow.ql-toolbar button:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  border-radius: var(--radius-md);
}

.control--rich .ql-snow .ql-tooltip {
  z-index: var(--z-dropdown);
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

/* components/charts.css */
/* Charts. Figma: Booking Overview, Platform Usage, Rooms Booked & Revenue, Top Performing Rooms. */
/* Charts keep a left-to-right plot in RTL pages: the scripts place bars, labels and tooltips in physical pixels. */
.chart,
.chart-bars,
.chart-hbars,
.chart-donut,
.chart-gauge,
.chart-tiles,
.sparkline {
  direction: ltr;
}

.chart {
  position: relative;
  width: 100%;
}

.chart__plot {
  position: relative;
  flex: 1;
  min-width: 0;
}

.chart--area,
.chart--line {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
}

.chart--area .chart__svg,
.chart--line .chart__svg {
  display: block;
  width: 100%;
  height: 386px;
  overflow: visible;
}

.chart__y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 386px;
  margin-top: -10px;
  margin-bottom: 26px;
  color: var(--color-chart-label);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.chart__x-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  color: var(--color-chart-label);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.chart__x-axis--even li {
  flex: 1;
  text-align: center;
}

/* Area chart labels sit exactly under their points (x set by area-chart.js); the end labels stay inside. */
.chart--area .chart__x-axis,
.chart--line .chart__x-axis {
  position: relative;
  display: block;
  height: var(--line-height-sm);
}

.chart--area .chart__x-axis li,
.chart--line .chart__x-axis li {
  position: absolute;
  top: 0;
  left: var(--x, 0);
  transform: translateX(var(--shift, -50%));
  white-space: nowrap;
}

.chart__grid {
  stroke: var(--color-chart-grid);
  stroke-dasharray: 4 4;
}

.chart__crosshair {
  stroke: var(--color-primary-border);
}

.chart__marker {
  fill: var(--color-surface);
  stroke: var(--color-primary);
  stroke-width: 4;
}

/* Tooltip: black header (N-950) above a dark body (N-900); light on dark pages (inverse surfaces). */
.chart-tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  min-width: 134px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-inverse-muted);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.chart-tooltip__title {
  padding: 2px var(--space-3) 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background-color: var(--color-surface-inverse);
  font-weight: var(--font-weight-semibold);
}

.chart-tooltip__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.chart-tooltip__rows li {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.chart-tooltip__rows b {
  font-weight: var(--font-weight-semibold);
}

.chart-tooltip__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

/* Legend. */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-size: var(--font-size-sm);
  line-height: 17px;
}

.chart-legend--center {
  justify-content: center;
  gap: var(--space-12);
}

.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.chart-legend__dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.chart-legend__dot--success {
  background-color: var(--color-success-border);
}

.chart-legend__dot--primary {
  background-color: var(--color-primary);
}

.chart-legend__dot--primary-light {
  background-color: var(--color-primary-border-strong);
}

.chart-legend__dot--neutral {
  background-color: var(--color-disabled);
}

.chart-legend__dot--warning {
  background-color: var(--color-warning);
}

.chart-legend__dot--error {
  background-color: var(--color-error-border);
}

/* Gauge */
.chart--gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-6);
}

.chart-gauge {
  position: relative;
  width: min(380px, 100%);
}

.chart-gauge__svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-gauge__label {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
}

.chart-gauge__total {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-2xl);
}

.chart-gauge__caption {
  color: var(--color-text-muted);
}

.chart-tiles {
  display: flex;
  gap: var(--gutter);
  width: 100%;
}

.chart-tiles__tile {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 10px;
  background-color: var(--color-primary-soft);
}

.chart-tiles__value {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-sm);
}

.chart-tiles__label {
  font-weight: var(--font-weight-semibold);
}

/* Grouped bars */
/* Bars and their labels share one grid (one column per period), so a label always sits under its bars. */
.chart-bars {
  display: grid;
  grid-template-columns: repeat(var(--groups, 12), minmax(0, 1fr));
  align-items: end;
  gap: var(--space-2);
  height: 386px;
  padding: 0 var(--space-4);
  background-image: repeating-linear-gradient(to top, var(--color-chart-grid) 0 1px, transparent 1px 40px);
  background-position: bottom;
}

.chart-bars__group {
  display: flex;
  justify-self: center;
  align-items: flex-end;
  width: min(100%, 80px);
  gap: var(--space-1);
  height: 100%;
  outline-offset: 4px;
  cursor: pointer;
}

.chart-bars__bar {
  flex: 1;
  min-height: 2px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background-color: var(--bar-color);
  transition:
    background-color var(--transition-fast),
    height var(--duration-chart) var(--ease-out);
}

.chart-bars__group:hover .chart-bars__bar:first-child,
.chart-bars__group:focus-visible .chart-bars__bar:first-child {
  background-color: var(--bar-active);
}

.chart--bars .chart__x-axis {
  display: grid;
  grid-template-columns: repeat(var(--groups, 12), minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

/* Horizontal bars */
.chart-hbars {
  display: flex;
  flex-direction: column;
}

.chart-hbars__row {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;
}

.chart-hbars__label {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-hbars__track {
  display: flex;
  margin: 0 var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
}

.chart-hbars__bar {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-border);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    width var(--duration-chart) var(--ease-out);
}

.chart-hbars__bar:hover,
.chart-hbars__bar:focus-visible {
  background-color: var(--color-primary);
}

.chart-hbars__value {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-sm);
}

.chart-hbars__axis {
  display: flex;
  justify-content: space-between;
  margin: var(--space-2) 0 0 calc(280px + var(--space-4));
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 767.98px) {
  .chart-bars {
    gap: 2px;
    padding: 0;
  }

  /* Figma mobile: thin 6px bars, each pair kept together over its label. */
  .chart-bars__group {
    justify-content: center;
    gap: 2px;
    width: 100%;
  }

  .chart-bars__bar {
    flex: 0 0 6px;
  }

  .chart--bars .chart__x-axis {
    padding: var(--space-2) 0;
    font-size: var(--font-size-xs);
  }

  /* Figma mobile: all 12 month labels, tilted 45°. */
  .chart--area .chart__x-axis,
  .chart--bars .chart__x-axis {
    font-size: var(--font-size-xs);
  }

  .chart--bars .chart__x-axis li {
    transform: rotate(-45deg);
    transform-origin: center;
    white-space: nowrap;
  }

  .chart--area .chart__x-axis {
    height: var(--space-8);
  }

  /* Tilted labels end at their point, so neighbours never overlap. */
  .chart--area .chart__x-axis li {
    top: 0;
    transform: translateX(-100%) rotate(-45deg);
    transform-origin: right center;
  }

  .chart-hbars__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) 0;
  }

  .chart-hbars__track {
    margin: 0;
  }

  .chart-hbars__axis {
    margin-inline-start: 0;
  }

  .chart-tiles {
    gap: var(--space-4);
  }
}

/* Donut chart (Customer Booking Status). */
.chart--donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.chart-donut {
  position: relative;
  width: min(100%, 220px);
}

.chart-donut__svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-donut__svg path:focus-visible {
  outline: none;
  stroke: var(--color-text);
  stroke-width: 2;
}

.chart-donut__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.chart-donut__caption {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.chart-donut__total {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

/*
 * Chart loading (assets/js/components/charts/base.js). Only the marks pulse — the line's area,
 * the bars and the arcs — while the card, header and axes stay in place.
 * .is-skeleton is the first load: grey marks and grey blocks where the labels will be.
 */
@keyframes chart-pulse {
  50% {
    opacity: 0.4;
  }
}

.chart.is-loading :is(.chart__area, .chart__line, .chart-bars__bar, .chart-hbars__bar, .chart-gauge__svg path, .chart-donut__svg path) {
  animation: chart-pulse 1.2s ease-in-out infinite;
}

.chart.is-skeleton .chart__area,
.chart.is-skeleton :is(.chart-gauge__svg, .chart-donut__svg) path {
  fill: var(--color-skeleton-shine);
}

.chart.is-skeleton :is(.chart-bars__bar, .chart-hbars__bar) {
  background-color: var(--color-skeleton-shine);
}

.chart.is-skeleton .chart__line {
  stroke: var(--color-skeleton-shine);
}

.chart.is-skeleton :is(.chart__y-axis li, .chart__x-axis li, .chart-hbars__label, .chart-hbars__value, .chart-hbars__axis li,
  .chart-gauge__total, .chart-gauge__caption, .chart-donut__total, .chart-donut__caption, .chart-tiles__value) {
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-muted);
  color: transparent;
}

.chart.is-skeleton .chart-legend,
.chart.is-skeleton .chart-tiles__label {
  visibility: hidden;
}

/*
 * Stacked bars (charts/stacked-bar-chart.js): one column per period, parts stacked bottom to top.
 * Not part of the original design; built from the grouped bar styles.
 */
.chart--stacked .chart-bars__group {
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 2px;
  width: min(100%, 48px);
}

.chart--stacked .chart-bars__bar {
  flex: none;
  width: 100%;
  min-height: 0;
  border-radius: 0;
}

.chart--stacked .chart-bars__bar:last-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.chart--stacked .chart-bars__group:is(:hover, :focus-visible) .chart-bars__bar {
  filter: brightness(0.92);
}

/* Sparkline (charts/sparkline.js): a tiny trend line, no axes. */
.sparkline {
  --spark: currentColor;
  position: relative;
  display: inline-block;
  width: 96px;
  height: 32px;
  color: var(--color-primary);
  vertical-align: middle;
}

.sparkline svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sparkline__line {
  fill: none;
  stroke: var(--spark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline__area {
  fill: var(--spark);
  opacity: 0.12;
}

.sparkline__end {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--spark);
  transform: translate(-50%, -50%);
}

.sparkline--success { color: var(--color-success); }
.sparkline--error { color: var(--color-error); }
.sparkline--warning { color: var(--color-warning); }

/*
 * Diverging bars (charts/diverging-bar-chart.js): each period's bar grows up from the zero line for
 * positive values and down for negative ones. Not part of the original design; built from the grouped bar styles.
 */
.chart--diverging .chart-bars {
  position: relative;
  background-image:
    linear-gradient(var(--color-chart-axis), var(--color-chart-axis)),
    repeating-linear-gradient(to top, var(--color-chart-grid) 0 1px, transparent 1px 40px);
  background-position: center, bottom;
  background-size: 100% 1px, auto;
  background-repeat: no-repeat, repeat;
}

.chart--diverging .chart-bars__group {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(100%, 40px);
}

.chart-diverge__half {
  display: flex;
  flex: 1;
}

.chart-diverge__half--up {
  align-items: flex-end;
}

.chart-diverge__half--down {
  align-items: flex-start;
}

.chart--diverging .chart-bars__bar {
  flex: 1;
  min-height: 0;
}

.chart-diverge__half--down .chart-bars__bar {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.chart--diverging .chart-bars__group:is(:hover, :focus-visible) .chart-bars__bar {
  filter: brightness(0.92);
}

/* components/calendar.css */
/* Availability calendar: timeline (Calendar View) and room grid (Room Grid View). */
.calendar-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.calendar-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

/* ---------- Timeline ---------- */
.timeline {
  --cell: 80px;
  --room-column: 250px;
  --bar-height: 36px;
  --bar-gap: var(--space-1);
}

.timeline__scroll {
  overflow-x: auto;
}

.timeline__grid {
  display: grid;
  grid-template-columns: var(--room-column) calc(var(--cell) * var(--days));
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.timeline__corner,
.timeline__room {
  position: sticky;
  inset-inline-start: 0;
  z-index: var(--z-raised-2);
  border-inline-end: 0.5px solid var(--color-border);
  border-bottom: 0.5px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.timeline__corner {
  display: flex;
  align-items: flex-end;
  height: 56px;
  padding: 13px;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
}

.timeline__dates {
  display: grid;
  grid-template-columns: repeat(var(--days), var(--cell));
}

.timeline__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-inline-end: 0.5px solid var(--color-border);
  border-bottom: 0.5px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.timeline__weekday {
  color: var(--color-text-muted);
}

.timeline__day {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.timeline__date.is-today {
  border-top: 4px solid var(--color-primary);
  background-color: var(--color-primary-soft);
}

.timeline__date.is-today .timeline__weekday,
.timeline__date.is-today .timeline__day {
  color: var(--color-primary);
}

.timeline__room {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}

.timeline__room-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
}

/* Lane: day grid lines + today column, bookings positioned by day offset. */
.timeline__lane {
  position: relative;
  min-height: calc(var(--rows) * (var(--bar-height) + var(--bar-gap)) + var(--bar-gap));
  border-bottom: 0.5px solid var(--color-border);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary-soft) 30%, transparent), color-mix(in srgb, var(--color-primary-soft) 30%, transparent)),
    repeating-linear-gradient(to right, transparent 0 calc(var(--cell) - 0.5px), var(--color-border) calc(var(--cell) - 0.5px) var(--cell));
  background-repeat: no-repeat, repeat;
  background-size: var(--cell) 100%, auto;
  background-position: calc(var(--today) * var(--cell)) 0, 0 0;
}

/* Bars sit --offset days from the start edge and span --length days, so they flip in RTL. */
.timeline__booking,
.timeline__more {
  position: absolute;
  top: calc(2px + var(--stack) * (var(--bar-height) + var(--bar-gap)));
  inset-inline-start: calc(var(--offset) * var(--cell) + 2px);
}

.timeline__booking {
  width: calc(var(--length) * var(--cell) - 4px);
  height: var(--bar-height);
  padding: var(--space-2);
  overflow: hidden;
  border-inline-start: var(--border-width-2) solid var(--color-primary);
  background-color: var(--color-primary-soft);
  color: var(--color-text);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.timeline__booking:hover {
  filter: brightness(0.97);
}

.timeline__booking--confirmed {
  border-inline-start-color: var(--color-success);
  background-color: var(--color-success-soft);
}

.timeline__booking--completed {
  border-inline-start-color: var(--color-border-control);
  background-color: var(--color-border);
}

.timeline__more {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  cursor: pointer;
}

.timeline__more:hover,
.timeline__more[aria-expanded='true'] {
  background-color: var(--color-primary-soft);
}

/* RTL: the day grid and today column are drawn from the right edge. */
[dir='rtl'] .timeline__lane {
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary-soft) 30%, transparent), color-mix(in srgb, var(--color-primary-soft) 30%, transparent)),
    repeating-linear-gradient(to left, transparent 0 calc(var(--cell) - 0.5px), var(--color-border) calc(var(--cell) - 0.5px) var(--cell));
  background-position: right calc(var(--today) * var(--cell)) top 0, right 0 top 0;
}

/* Legend under the calendar (Figma footer). */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.calendar-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.calendar-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.calendar-legend__dot--success {
  background-color: var(--color-success);
}

.calendar-legend__dot--neutral {
  background-color: var(--color-text-muted);
}

.calendar-legend__dot--available {
  border: var(--border-width-1) solid var(--color-border-strong);
  background-color: var(--color-surface);
}

.calendar-legend__dot--booked {
  background-color: var(--color-error);
}

.calendar-legend__dot--inactive {
  background-color: var(--color-text-subtle);
}

/* ---------- Room grid ---------- */
.room-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.room-floor {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.room-floor__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.room-floor__name {
  flex: 1;
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.room-floor__rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 150px));
  gap: var(--space-4);
}

.room-grid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 132px;
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  text-align: center;
  cursor: pointer;
}

.room-grid-card:hover:not(:disabled) {
  border-color: var(--color-primary);
}

.room-grid-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.room-grid-card__caption {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.room-grid-card__number {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-2xl);
}

.room-grid-card__type {
  width: 100%;
  overflow: hidden;
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Picked in the Select Room modal. */
.room-grid-card[aria-pressed='true'] {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.room-grid-card[aria-pressed='true'] .room-grid-card__head {
  border-bottom-color: var(--color-primary-border);
}

.room-grid-card--booked {
  border-color: var(--color-error);
  background-color: var(--color-error-soft);
}

.room-grid-card--booked .room-grid-card__head {
  border-bottom-color: var(--color-error-border);
}

.room-grid-card--inactive {
  background-color: var(--color-surface-muted);
  cursor: not-allowed;
}

.room-grid-card--inactive .room-grid-card__caption {
  color: var(--color-text-subtle);
}

.room-grid-card--inactive .room-grid-card__number,
.room-grid-card--inactive .room-grid-card__type {
  color: var(--color-text-muted);
}

@media (max-width: 767.98px) {
  .timeline {
    --room-column: 150px;
  }

  .timeline__room {
    padding: var(--space-3);
  }

  /* Figma mobile calendar: rooms across the top, one 56px row per day, bookings drop down their room. */
  .timeline--vertical {
    --cell: 56px;
    --date-column: 74px;
    --bar-width: 120px;
  }

  .timeline__caption {
    padding: var(--space-4) 13px;
    border-bottom: 0.5px solid var(--color-border);
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-sm);
  }

  .timeline--vertical .timeline__scroll {
    max-height: 410px;
    overflow: auto;
  }

  .timeline--vertical .timeline__grid {
    grid-template-columns: var(--date-column) repeat(var(--room-count), auto);
  }

  .timeline--vertical .timeline__corner {
    top: 0;
    z-index: var(--z-raised-3);
    height: auto;
    padding: 0;
  }

  .timeline--vertical .timeline__room {
    position: sticky;
    top: 0;
    inset-inline-start: auto;
    z-index: var(--z-raised-2);
    min-width: 217px;
    padding: var(--space-3);
  }

  .timeline--vertical .calendar-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline--vertical .timeline__dates {
    position: sticky;
    inset-inline-start: 0;
    z-index: var(--z-raised);
    grid-template-columns: none;
    grid-template-rows: repeat(var(--days), var(--cell));
  }

  .timeline--vertical .timeline__date {
    height: auto;
  }

  .timeline--vertical .timeline__date.is-today {
    border-top: 0;
    border-inline-start: 4px solid var(--color-primary);
  }

  .timeline--vertical .timeline__lane {
    width: max(217px, calc(var(--rows) * (var(--bar-width) + var(--bar-gap)) + var(--bar-gap)));
    min-height: 0;
    height: calc(var(--days) * var(--cell));
    border-inline-end: 0.5px solid var(--color-border);
    border-bottom: 0;
    background-image:
      linear-gradient(color-mix(in srgb, var(--color-primary-soft) 30%, transparent), color-mix(in srgb, var(--color-primary-soft) 30%, transparent)),
      repeating-linear-gradient(to bottom, transparent 0 calc(var(--cell) - 0.5px), var(--color-border) calc(var(--cell) - 0.5px) var(--cell));
    background-size: 100% var(--cell), auto;
    background-position: 0 calc(var(--today) * var(--cell)), 0 0;
  }

  .timeline--vertical .timeline__booking,
  .timeline--vertical .timeline__more {
    top: calc(var(--offset) * var(--cell) + 2px);
    inset-inline-start: calc(var(--bar-gap) + var(--stack) * (var(--bar-width) + var(--bar-gap)));
  }

  .timeline--vertical .timeline__booking {
    width: var(--bar-width);
    height: calc(var(--length) * var(--cell) - 4px);
  }

  .timeline--vertical .timeline__more {
    width: var(--bar-width);
  }

  .room-floor__rooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Figma mobile room grid: 16px floor name, 20px room number, 14px type. */
  .room-floor {
    gap: var(--space-4);
  }

  .room-floor__name {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .room-grid-card {
    height: 124px;
  }

  .room-grid-card__number {
    font-family: var(--font-family-body);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }

  .room-grid-card__type {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }
}

/* Touch: booking bars reach a 44px tap height. */
@media (max-width: 1023.98px) {
  .timeline {
    --bar-height: 44px;
  }
}

/* components/event-calendar.css */
/*
 * Event calendar (components/event-calendar.js): month, week, day and agenda views.
 * Not part of the original design; built from the card, toggle group and badge colours.
 * Event tones: --primary, --success, --warning, --error, --info, --neutral.
 */
.event-cal {
  --event-bg: var(--color-primary-soft);
  --event-text: var(--color-primary-strong);
  --event-solid: var(--color-primary);
  --time-column: 56px;

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* ---- Toolbar ---- */
.event-cal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.event-cal__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.event-cal__title {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

@media (max-width: 767.98px) {
  .event-cal__title {
    order: -1;
    width: 100%;
  }
}

/* ---- Event tones ---- */
.event-cal__event--success { --event-bg: var(--color-success-soft); --event-text: var(--color-success-strong); --event-solid: var(--color-success-solid); }
.event-cal__event--warning { --event-bg: var(--color-warning-soft); --event-text: var(--color-warning-strong); --event-solid: var(--color-warning); }
.event-cal__event--error { --event-bg: var(--color-error-soft); --event-text: var(--color-error-strong); --event-solid: var(--color-error); }
.event-cal__event--info { --event-bg: var(--color-info-soft); --event-text: var(--color-info-strong); --event-solid: var(--color-info-solid); }
.event-cal__event--neutral { --event-bg: var(--color-surface-muted); --event-text: var(--color-text); --event-solid: var(--color-text-subtle); }

.event-cal__event {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
  padding: 2px var(--space-2);
  overflow: hidden;
  border: 0;
  border-inline-start: 3px solid var(--event-solid);
  border-radius: var(--radius-sm);
  background-color: var(--event-bg);
  color: var(--event-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.event-cal__event:hover {
  filter: brightness(0.97);
}

.event-cal__event:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 1px;
}

.event-cal__time {
  font-weight: var(--font-weight-normal);
}

/* ---- Month ---- */
.event-cal__month {
  overflow: hidden;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.event-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  text-align: center;
  text-transform: uppercase;
}

.event-cal__weekdays span {
  padding: var(--space-2);
}

.event-cal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 32px repeat(var(--lanes), 24px) 24px;
  row-gap: 2px;
  min-height: 116px;
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.event-cal__day {
  grid-row: 1 / -1;
  padding: var(--space-1);
  text-align: end;
}

.event-cal__day + .event-cal__day {
  border-inline-start: var(--border-width-1) solid var(--color-border);
}

.event-cal__day.is-outside {
  background-color: var(--color-surface-muted);
}

.event-cal__date {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
}

.event-cal__day.is-outside .event-cal__date {
  color: var(--color-text-muted);
}

.event-cal__date:hover {
  background-color: var(--color-surface-muted);
}

.event-cal__day.is-today .event-cal__date {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

.event-cal__slot {
  z-index: var(--z-raised);
  min-width: 0;
  padding-inline: var(--space-1);
}

.event-cal__event.is-bar.is-continued {
  border-inline-start-width: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.event-cal__event.is-bar.is-continuing {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.event-cal__event.is-timed {
  border-inline-start-width: 0;
  background-color: transparent;
  color: var(--color-text);
}

.event-cal__event.is-timed::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--event-solid);
}

.event-cal__more {
  z-index: var(--z-raised);
  margin-inline: var(--space-1);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: start;
  cursor: pointer;
}

.event-cal__more:hover {
  background-color: var(--color-primary-soft);
}

/* ---- Week and day ---- */
.event-cal__time-grid {
  max-height: 600px;
  overflow: auto;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.event-cal[data-view='week'] .event-cal__sticky,
.event-cal[data-view='week'] .event-cal__times {
  min-width: 720px;
}

.event-cal__sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-raised-2);
  background-color: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border);
}

.event-cal__row {
  display: grid;
  grid-template-columns: var(--time-column) repeat(var(--days), minmax(0, 1fr));
}

.event-cal__day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2);
  border: 0;
  border-inline-start: var(--border-width-1) solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  cursor: pointer;
}

.event-cal__day-head strong {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.event-cal__day-head.is-today strong {
  color: var(--color-primary);
}

.event-cal__allday-row {
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.event-cal__allday-label {
  padding: var(--space-2) var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  text-align: center;
}

.event-cal__allday-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 32px;
  padding: var(--space-1);
  border-inline-start: var(--border-width-1) solid var(--color-border);
}

.event-cal__hours {
  display: flex;
  flex-direction: column;
}

.event-cal__hour {
  height: var(--hour-height);
  padding-inline-end: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1;
  text-align: end;
  transform: translateY(-6px);
}

.event-cal__hour:first-child {
  visibility: hidden;
}

.event-cal__column {
  position: relative;
  height: calc(var(--hours) * var(--hour-height));
  border-inline-start: var(--border-width-1) solid var(--color-border);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour-height) - 1px), var(--color-border) calc(var(--hour-height) - 1px) var(--hour-height));
}

.event-cal__column.is-today {
  background-color: color-mix(in srgb, var(--color-primary-soft) 50%, transparent);
}

.event-cal__block {
  position: absolute;
  z-index: var(--z-raised);
  padding: 1px 2px;
}

.event-cal__event.is-block {
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding-block: var(--space-1);
  white-space: normal;
}

.event-cal__now {
  position: absolute;
  inset-inline: 0;
  z-index: var(--z-raised-2);
  height: 2px;
  background-color: var(--color-error);
}

.event-cal__now::before {
  content: '';
  position: absolute;
  top: -4px;
  inset-inline-start: -5px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-error);
}

/* ---- Agenda ---- */
.event-cal__agenda {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.event-cal__agenda-day {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.event-cal__agenda-day + .event-cal__agenda-day {
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.event-cal__agenda-date {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.event-cal__agenda-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-cal__agenda-item {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.event-cal__agenda-time {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.event-cal__event.is-agenda {
  gap: var(--space-2);
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.event-cal__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--event-solid);
}

.event-cal__empty {
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 767.98px) {
  .event-cal__week {
    grid-template-rows: 32px repeat(var(--lanes), 20px) 20px;
    min-height: 96px;
  }

  .event-cal__event {
    padding-inline: var(--space-1);
  }

  .event-cal__agenda-day,
  .event-cal__agenda-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* components/gallery.css */
/* Image gallery. */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
}

.gallery__item {
  aspect-ratio: 367 / 305;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-primary-soft);
}

.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery--rounded .gallery__item {
  border-radius: var(--radius-2xl);
}

/* Small thumbnails with a "+N" overlay (review photos). */
.thumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.thumb-strip__item {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.thumb-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-strip__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-scrim);
  color: var(--color-text-on-media);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 1023.98px) {
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* components/hotel.css */
/* Hotel components. Figma: Report Card, System Setup Cards, Room Inventory Card, Rooms Card,
   Facility Card, Amenities_Card, Rule Card, Testimonial, How it works, Pricing Summary, customer block. */

/* Report card [12225:81302] */
.report-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.report-card__icon {
  display: inline-flex;
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.report-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.report-card__title {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
}

.report-card__description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.report-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-1);
  padding-inline: 0 var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.report-card__link:hover {
  color: var(--color-primary-strong);
}

/* Setup card [7762:85501]. Desktop: icon above text, checkbox top right. Mobile: one row. */
.setup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.setup-card:hover,
.setup-card:has(.setup-card__check:checked) {
  border-color: var(--color-primary);
}

.setup-card:has(.setup-card__check:focus-visible) {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

.setup-card__check {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
}

.setup-card__icon {
  flex-shrink: 0;
}

.setup-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.setup-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.setup-card__description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* "Don't see your property type?" call to action [7762:85506]. */
.setup-card--add {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: var(--color-primary-border);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-deep);
  text-align: center;
  cursor: default;
}

.setup-card--add:hover {
  border-color: var(--color-primary-border);
}

@media (max-width: 767.98px) {
  .setup-card:not(.setup-card--add) {
    flex-direction: row;
    align-items: center;
    padding: var(--space-4);
    border-radius: var(--radius-xl);
  }

  .setup-card:not(.setup-card--add) .setup-card__text {
    flex: 1;
  }

  .setup-card__check {
    position: static;
    order: 1;
  }

  .setup-card__title {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
}

/* Room inventory card [10595:139440] */
.inventory-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.inventory-card:hover {
  box-shadow: var(--shadow-md);
}

.inventory-card:has(.checkbox:checked) {
  border-color: var(--color-primary);
}

.inventory-card__head,
.inventory-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.inventory-card__head {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.inventory-card__name {
  flex: 1;
  font-family: var(--font-family-heading);
}

.inventory-card__type {
  flex: 1;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* Edit / delete appear on hover or focus, as in the Figma hover state. */
.inventory-card__action {
  display: inline-flex;
  color: var(--color-text);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.inventory-card:hover .inventory-card__action,
.inventory-card:focus-within .inventory-card__action {
  opacity: 1;
}

.inventory-card__action--danger {
  color: var(--color-error);
}

/* Room type card [7982:83693] */
.room-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border-medium);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.room-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.room-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.room-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  min-height: 72px;
}

.room-card__title {
  overflow: hidden;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
  text-overflow: ellipsis;
}

.room-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.room-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.room-card__actions {
  display: flex;
  gap: var(--space-4);
}

.room-card__action {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  cursor: pointer;
}

.room-card__action:hover {
  background-color: var(--color-surface-muted);
}

.room-card__action--danger:hover {
  background-color: var(--color-error-soft);
  color: var(--color-error);
}

.room-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.room-card__facts dt {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.room-card__facts dd {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  color: var(--color-primary-deep);
  font-weight: var(--font-weight-bold);
}

.room-card__check hd-icon {
  color: var(--color-success);
}

/* Facility card [7915:103768] */
.facility-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-surface-muted);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.facility-card__icon {
  display: inline-flex;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.facility-card__name,
.amenity-card__name {
  font-family: var(--font-family-heading);
}

/* Amenity card [7969:121795] */
.amenity-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.amenity-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

/* Rule card [7918:105796] */
.rule-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.rule-card__icon {
  display: inline-flex;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.rule-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.rule-card__title,
.step-card__title {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.rule-card__description,
.step-card__description {
  color: var(--color-text-muted);
}

.rule-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
}

.rule-card__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Testimonial [7846:97433] */
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-muted);
  font-family: var(--font-family-heading);
}

.testimonial-card__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.testimonial-card__photo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial-card__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.testimonial-card__name {
  font-weight: var(--font-weight-medium);
}

.testimonial-card__stay,
.testimonial-card__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.testimonial-card__rating {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-warning-soft);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.testimonial-card__rating hd-icon {
  color: var(--color-warning);
}

.testimonial-card__check {
  position: absolute;
  top: -12px;
  inset-inline-end: -12px;
}

/* How it works step [7752:82433] */
.step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.step-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
}

.step-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Pricing / payment summary panel [8166:49156] */
.summary-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.summary-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.summary-panel__title h3 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xl);
}

.summary-panel__icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.summary-panel__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
  font-family: var(--font-family-heading);
}

.summary-panel__rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.summary-panel__total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: calc(var(--space-6) * -1 + var(--space-4));
  padding: var(--space-3) 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.summary-panel__total-value {
  color: var(--color-primary);
}

/* Customer block (booking details drawer) [10614:139387] */
.customer-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  font-family: var(--font-family-heading);
}

.customer-info__photo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.customer-info__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.customer-info__name {
  font-weight: var(--font-weight-semibold);
}

.customer-info__line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  overflow-wrap: anywhere;
}

.customer-info__id {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.customer-info__id-label {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.customer-info__id-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

/* Figma mobile: Customer ID / #01 row on top, photo + contact lines below. */
@media (max-width: 767.98px) {
  .customer-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
  }

  .customer-info__id {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .customer-info__line {
    overflow-wrap: normal;
    word-break: break-all;
  }
}

@media (max-width: 767.98px) {
  .room-card__head,
  .customer-info {
    flex-wrap: wrap;
  }

  .room-card__facts {
    gap: var(--space-4);
  }

  .inventory-card__action {
    opacity: 1;
  }
}

/* components/button-group.css */
/*
 * Button group: buttons joined into one control (export formats, list / grid view).
 *   <div class="btn-group" role="group" aria-label="View"> <button class="btn btn--outline">…</button> … </div>
 * Not part of the original design; built from the Button styles.
 */
.btn-group {
  display: inline-flex;
  isolation: isolate;
}

.btn-group > :where(.btn, .icon-btn) {
  border-radius: 0;
}

.btn-group > :where(.btn, .icon-btn):first-child {
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
}

.btn-group > :where(.btn, .icon-btn):last-child {
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}

/* Shared borders: each button overlaps its neighbour by one border width. */
.btn-group > :where(.btn, .icon-btn) + :where(.btn, .icon-btn) {
  margin-inline-start: calc(var(--border-width-1) * -1);
}

.btn-group > :where(.btn, .icon-btn):is(:hover, :focus-visible) {
  z-index: var(--z-raised);
}

/* Filled buttons have no visible border, so a darker line separates them. */
.btn-group > .btn--primary + .btn--primary {
  border-inline-start-color: var(--color-primary-active);
}

.btn-group > .btn--dark + .btn--dark {
  border-inline-start-color: var(--color-border-control);
}

.btn-group--vertical {
  flex-direction: column;
}

.btn-group--vertical > :where(.btn, .icon-btn) {
  border-radius: 0;
}

.btn-group--vertical > :where(.btn, .icon-btn):first-child {
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  border-end-start-radius: 0;
}

.btn-group--vertical > :where(.btn, .icon-btn):last-child {
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  border-start-end-radius: 0;
}

.btn-group--vertical > :where(.btn, .icon-btn) + :where(.btn, .icon-btn) {
  margin-inline-start: 0;
  margin-block-start: calc(var(--border-width-1) * -1);
}

/* components/toggle.css */
/*
 * Toggle and toggle group (assets/js/components/toggle.js). Not part of the original design; built from the Button and
 * chip styles. A toggle is a button that stays pressed: aria-pressed="true".
 *   <button type="button" class="toggle" data-toggle aria-pressed="false">Bold</button>
 *   <div class="toggle-group" data-toggle-group="single" aria-label="Period"> <button class="toggle" data-value="week">…</button> … </div>
 */
.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-1) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.toggle hd-icon {
  --icon-size: 18px;
}

.toggle:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}

.toggle:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

.toggle[aria-pressed='true'],
.toggle[aria-checked='true'] {
  border-color: var(--color-primary-border);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.toggle:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

.toggle--sm {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
}

/* Square, icon only (editor toolbars). Give it an aria-label. */
.toggle--icon {
  min-width: 40px;
  padding: var(--space-2);
}

.toggle-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Joined variant: one bordered strip, like a button group. */
.toggle-group--attached {
  flex-wrap: nowrap;
  gap: 0;
  isolation: isolate;
}

.toggle-group--attached > .toggle {
  border-radius: 0;
}

.toggle-group--attached > .toggle:first-child {
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
}

.toggle-group--attached > .toggle:last-child {
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}

.toggle-group--attached > .toggle + .toggle {
  margin-inline-start: calc(var(--border-width-1) * -1);
}

.toggle-group--attached > .toggle:is([aria-pressed='true'], [aria-checked='true'], :focus-visible) {
  z-index: var(--z-raised);
}

/* components/input-group.css */
/*
 * Input group: a field with fixed parts before or after it (https://, USD, a Copy button).
 *   <div class="input-group">
 *     <span class="input-group__addon">https://</span>
 *     <div class="control"><input class="control__input" …></div>
 *     <button type="button" class="btn btn--outline">Copy</button>
 *   </div>
 * For short text inside the field itself ($, % , / night) use <span class="control__affix"> in the .control.
 * Not part of the original design; built from the field styles.
 */
.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  isolation: isolate;
}

.input-group > .control {
  flex: 1;
  min-width: 0;
}

.input-group > * {
  border-radius: 0;
}

.input-group > :first-child {
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
}

.input-group > :last-child {
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}

.input-group > * + * {
  margin-inline-start: calc(var(--border-width-1) * -1);
}

/* The focused field draws its ring above its neighbours. */
.input-group > :is(.control:focus-within, .btn:focus-visible, .btn:hover) {
  z-index: var(--z-raised);
}

.input-group__addon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  border: var(--border-width-1) solid var(--color-border-control);
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.input-group > .btn--outline {
  border-color: var(--color-border-control);
}

/* Inline text inside a control: currency sign, unit (control__suffix: a unit after the value, "sq ft"). */
.control__affix,
.control__suffix {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* components/number-input.css */
/*
 * Number input with − / + buttons (assets/js/components/number-input.js). Guests, rooms, beds, nights.
 *   <div class="control number-input" data-number-input>
 *     <button type="button" class="number-input__step" data-step="-1">…</button>
 *     <input class="control__input" type="number" min="1" max="10" value="2">
 *     <button type="button" class="number-input__step" data-step="1">…</button>
 *   </div>
 * Not part of the original design; built from the field and soft icon button styles.
 */
.number-input {
  gap: var(--space-2);
  padding-inline: var(--space-2);
}

.number-input .control__input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}

.number-input .control__input::-webkit-inner-spin-button,
.number-input .control__input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.number-input__step {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.number-input__step hd-icon {
  --icon-size: 16px;
}

.number-input__step:hover:not([aria-disabled='true']) {
  background-color: var(--color-primary-subtle);
}

.number-input__step:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 1px;
}

.number-input__step[aria-disabled='true'] {
  background-color: var(--color-surface-muted);
  color: var(--color-disabled);
  cursor: not-allowed;
}

/* Fixed width for counters in rows (guests, rooms). */
.number-input--compact {
  width: 148px;
}

@media (max-width: 767.98px) {
  .number-input {
    padding-block: var(--space-1);
  }
}

/* components/combobox.css */
/*
 * Combobox: a select you can type in to search (assets/js/components/combobox.js), and the time picker
 * built on it. The list uses the dropdown menu styles. Not part of the original design.
 *   <select data-combobox data-placeholder="Search country">…</select>
 *   <input class="control__input" data-timepicker data-step="30">  (inside a .control)
 */
.combobox {
  position: relative;
  width: 100%;
}

.combobox .control {
  cursor: text;
}

.combobox__toggle {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-text);
  cursor: pointer;
}

.combobox__toggle hd-icon {
  transition: transform var(--transition-fast);
}

.combobox.is-open .combobox__toggle hd-icon {
  transform: rotate(180deg);
}

.combobox__list {
  max-height: 320px;
  overflow-y: auto;
}

.combobox__list .dropdown__item {
  justify-content: space-between;
}

.combobox__list mark {
  background: none;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.combobox__check {
  --icon-size: 18px;
  color: var(--color-primary);
}

.combobox__hint {
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.combobox__empty {
  padding: var(--space-2) var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* Time picker lists are long and short-lined: tighter rows. */
.combobox__list--compact .dropdown__item {
  padding-block: var(--space-2);
}

.combobox__list--compact .dropdown__item:first-child {
  padding-top: var(--space-2);
}

/* components/slider.css */
/*
 * Slider and range slider (assets/js/components/slider.js): native <input type="range">, so keyboard
 * and screen readers work as usual. A range slider stacks two inputs on one track.
 *   <div class="slider" data-slider>
 *     <div class="slider__track"><input type="range" class="slider__input" …></div>
 *     <output class="slider__value"></output>
 *   </div>
 *   A range slider has two inputs in .slider__track (minimum first).
 * The script sets --from and --to (0–100%) for the filled part. Not part of the original design.
 */
.slider {
  --from: 0%;
  --to: 50%;
  --thumb: 20px;
  display: grid;
  gap: var(--space-2);
  width: 100%;
}

.slider__track {
  position: relative;
  height: var(--thumb);
}

/* Empty track and filled part. */
.slider__track::before,
.slider__track::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 6px;
  border-radius: var(--radius-full);
  transform: translateY(-50%);
}

.slider__track::before {
  inset-inline: 0;
  background-color: var(--color-border);
}

.slider__track::after {
  inset-inline-start: var(--from);
  inset-inline-end: calc(100% - var(--to));
  background-color: var(--color-primary);
}

.slider__input {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  appearance: none;
  pointer-events: none;
}

.slider__input::-webkit-slider-runnable-track {
  height: 100%;
  background: none;
}

.slider__input::-moz-range-track {
  height: 100%;
  background: none;
}

.slider__input::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-base);
  appearance: none;
  pointer-events: auto;
  cursor: grab;
}

.slider__input::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-base);
  pointer-events: auto;
  cursor: grab;
}

.slider__input:focus-visible {
  outline: 0;
}

.slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--color-primary-subtle);
}

.slider__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--color-primary-subtle);
}

.slider__input:active::-webkit-slider-thumb {
  cursor: grabbing;
}

.slider__input:disabled::-webkit-slider-thumb {
  border-color: var(--color-border-medium);
  cursor: not-allowed;
}

.slider__value {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  font-variant-numeric: tabular-nums;
}

.slider__scale {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-variant-numeric: tabular-nums;
}

/* Bigger thumbs on touch screens. */
@media (max-width: 1023.98px) {
  .slider {
    --thumb: 28px;
  }
}

/* Sizes and the disabled look. */
.slider--sm {
  --thumb: 16px;
}

.slider--sm .slider__track::before,
.slider--sm .slider__track::after {
  height: 4px;
}

.slider--lg {
  --thumb: 26px;
}

.slider--lg .slider__track::before,
.slider--lg .slider__track::after {
  height: 8px;
}

.slider:has(.slider__input:disabled) {
  opacity: var(--opacity-50);
}

.slider:has(.slider__input:disabled) .slider__track::after {
  background-color: var(--color-disabled);
}

.slider__input:disabled::-moz-range-thumb {
  border-color: var(--color-border-medium);
  cursor: not-allowed;
}

/* Touch: the rail stays 6px; the track (and the range inputs that fill it) grows to a 44px tap height. */
@media (max-width: 1023.98px) {
  .slider__track {
    height: max(var(--thumb), 44px);
  }
}

/* components/tags.css */
/*
 * Tag (a removable chip), tag input and multi-select. Not part of the original design; built from the badge and field styles.
 *   <span class="tag">Wi-Fi <button type="button" class="tag__remove" aria-label="Remove Wi-Fi">…</button></span>
 *   <div class="control tag-input" data-tag-input data-name="amenities">…</div>   (tag-input.js)
 *   <select multiple data-multiselect data-placeholder="Choose places">…</select>  (multiselect.js)
 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  min-height: 28px;
  padding-block: var(--space-1);
  padding-inline: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.tag:not(:has(.tag__remove)) {
  padding-inline-end: var(--space-2);
}

.tag__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag__remove {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
}

.tag__remove hd-icon {
  --icon-size: 14px;
}

.tag__remove:hover {
  background-color: var(--color-primary-subtle);
}

.tag__remove:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
}

.tag--more {
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
}

/* Tag input: tags and the text field share one box and wrap. */
.tag-input {
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-2);
  cursor: text;
}

.tag-input__list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-input .control__input {
  flex: 1 0 120px;
  min-height: 28px;
}

/* Multi-select: selected options show as tags on the trigger; the list has check boxes. */
.multiselect {
  position: relative;
  width: 100%;
}

.multiselect__trigger {
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 50px;
  padding-block: var(--space-2);
}

.multiselect__tags {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
}

.multiselect__placeholder {
  color: var(--color-placeholder);
}

.multiselect .dropdown__menu {
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
}

.multiselect .dropdown__item {
  gap: var(--space-3);
}

/* Checkbox look for list options (the option itself carries aria-selected). */
.multiselect__check {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: var(--border-width-1) solid var(--color-border-emphasis);
  border-radius: var(--radius-md);
}

.multiselect__check::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background-color: var(--color-text-inverse);
  mask: var(--icon-check) center / contain no-repeat;
  opacity: 0;
}

.dropdown__item[aria-selected='true'] .multiselect__check {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.dropdown__item[aria-selected='true'] .multiselect__check::after {
  opacity: 1;
}

@media (max-width: 767.98px) {
  .multiselect__trigger {
    min-height: 42px;
  }
}

/* components/rating-input.css */
/*
 * Rating input: five stars to click (assets/js/components/rating-input.js). Native radio buttons,
 * visually hidden, so arrow keys and screen readers work. Not part of the original design; star color from the star rating.
 *   <fieldset class="field rating-input" data-rating-input> <legend class="field__label">…</legend> radios + labels </fieldset>
 */
.rating-input__stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.rating-input__star {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius-md);
  color: var(--color-border-strong);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.rating-input__star hd-icon {
  --icon-size: 28px;
}

.rating-input__star.is-lit {
  color: var(--color-warning);
}

.rating-input__star:hover {
  transform: scale(1.1);
}

.rating-input__radio:focus-visible + .rating-input__star {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 1px;
}

.rating-input__value {
  margin-inline-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-variant-numeric: tabular-nums;
}

.rating-input:disabled .rating-input__star {
  cursor: not-allowed;
  opacity: var(--opacity-50);
}

/* components/popover.css */
/*
 * Popover: a floating panel for any content next to a button (assets/js/components/popover.js).
 *   <div class="popover" id="…" role="dialog" aria-label="…" hidden>
 *     <p class="popover__title">Quick filters</p> … <div class="popover__footer">…</div>
 *   </div>
 * Not part of the original design; built from the dropdown panel style.
 */
.popover {
  position: absolute;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(340px, calc(100vw - var(--space-4)));
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.popover:not([hidden]) {
  animation: pop-in var(--duration-xs) var(--ease-out) backwards;
}

.popover:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
}

.popover__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.popover__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.popover__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width-1) solid var(--color-border);
}

/*
 * Not part of the original design.
 *   popover--sm / popover--lg    260px / 480px wide (default 340px)
 *   popover--flyout              a menu of rich links: icon tile, title and one line each
 *   data-backdrop                dims the page behind the open popover (.popover-backdrop)
 */
.popover--sm {
  width: min(260px, calc(100vw - var(--space-4)));
}

.popover--lg {
  width: min(480px, calc(100vw - var(--space-4)));
}

.popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-dropdown) - 1);
  background-color: var(--color-scrim);
  animation: fade-in var(--duration-xs) var(--ease-out);
}

.popover--flyout {
  gap: var(--space-1);
  width: min(400px, calc(100vw - var(--space-4)));
  padding: var(--space-2);
}

.flyout__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-decoration: none;
}

.flyout__item:hover,
.flyout__item:focus-visible {
  background-color: var(--color-surface-muted);
}

.flyout__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.flyout__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.flyout__title {
  font-weight: var(--font-weight-semibold);
}

.flyout__desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.flyout__footer {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

/* A row of top-level menu buttons that open flyouts (website-style navigation). */
.flyout-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.flyout-nav .btn[aria-expanded='true'] {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

/* components/command-palette.css */
/*
 * Command palette (assets/js/components/command-palette.js): Ctrl / ⌘ K search over pages and actions.
 * Uses the modal shell (overlay, focus trap, Escape); the panel sits near the top of the screen.
 * Not part of the original design; built from the modal, field and dropdown styles.
 */
.modal--command {
  align-items: flex-start;
  padding-block-start: min(12vh, 120px);
}

.command {
  max-width: 640px;
  max-height: min(560px, calc(100dvh - 2 * min(12vh, 120px)));
  overflow: hidden;
}

.command__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-block-end: var(--border-width-1) solid var(--color-border);
}

.command__search hd-icon {
  --icon-size: 22px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.command__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.command__input::placeholder {
  color: var(--color-placeholder);
}

.command__list {
  flex: 1;
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
  list-style: none;
}

.command__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.command__group + .command__group {
  margin-block-start: var(--space-2);
}

.command__group-title {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.command__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  cursor: pointer;
}

.command__item hd-icon {
  --icon-size: 20px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.command__item[aria-selected='true'] {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.command__item[aria-selected='true'] hd-icon {
  color: var(--color-primary);
}

.command__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command__label mark {
  background: none;
  color: inherit;
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.command__hint {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.command__empty {
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

.command__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-block-start: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.command__footer span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.command__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 var(--space-1);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

@media (max-width: 767.98px) {
  /* A full-width sheet from the top on phones, so the keyboard does not cover the results. */
  .modal--command {
    padding: var(--space-2);
  }

  .command {
    max-height: calc(100dvh - var(--space-4));
    border-radius: var(--radius-2xl);
  }

  .command__footer {
    display: none;
  }
}

/* Inline command list (components/command-list.js): the palette's list on the page. */
.command--inline {
  display: flex;
  flex-direction: column;
  max-height: 380px;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.command--inline .command__input {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* Touch: the field fills the search row's height (44px+ tap area) without changing the look. */
@media (max-width: 1023.98px) {
  .command__input {
    align-self: stretch;
    margin-block: calc(var(--space-4) * -1);
    padding-block: var(--space-4);
  }
}

.command__item[aria-disabled='true'] {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

.command__item .command__key {
  margin-inline-start: auto;
}

/* components/breadcrumb.css */
/*
 * Breadcrumb: where a detail page sits (Bookings › All Bookings › BK-0264). Not part of the original design.
 *   <nav class="breadcrumb" aria-label="Breadcrumb" data-breadcrumb>
 *     <ol class="breadcrumb__list">
 *       <li class="breadcrumb__item"><a class="breadcrumb__link" href="…">Bookings</a></li>
 *       <li class="breadcrumb__item"><span class="breadcrumb__current" aria-current="page">BK-0264</span></li>
 *     </ol>
 *   </nav>
 * With four or more items, phones show the first and the last two; a "…" button reveals the rest
 * (assets/js/components/breadcrumb.js). Without the script every item shows and wraps.
 */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Separator: a small caret before every item but the first (mirrored for right-to-left). */
.breadcrumb__item + .breadcrumb__item::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-color: var(--color-text-subtle);
  mask: var(--icon-caret-right) center / contain no-repeat;
}

[dir='rtl'] .breadcrumb__item + .breadcrumb__item::before {
  transform: scaleX(-1);
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb__link:focus-visible,
.breadcrumb__more:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

.breadcrumb__link hd-icon {
  --icon-size: 16px;
}

.breadcrumb__current {
  overflow: hidden;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb__more {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.breadcrumb__more:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}

.breadcrumb__ellipsis {
  display: none;
}

@media (max-width: 767.98px) {
  .breadcrumb.is-collapsible:not(.is-expanded) .breadcrumb__item.is-middle {
    display: none;
  }

  .breadcrumb.is-collapsible:not(.is-expanded) .breadcrumb__ellipsis {
    display: inline-flex;
  }
}

/* components/scroll-area.css */
/*
 * Scroll area: a box with thin, themed scrollbars and soft shadows at the edges that still have
 * content to scroll. Pure CSS; native scrolling, touch and keyboard keep working. Not part of the original design.
 *   <div class="scroll-area" tabindex="0" role="region" aria-label="Recent activity" style="--scroll-height: 280px">…</div>
 *   <div class="scroll-area scroll-area--x" tabindex="0" role="region" aria-label="Room photos">…</div>
 * tabindex="0" lets keyboard users scroll it (WCAG 2.1.1); give it a role and a name.
 * The edge shadows use background-attachment: local, so they need an opaque background (--scroll-bg).
 */
.scroll-area {
  --scroll-bg: var(--color-surface);
  --scroll-shadow: color-mix(in srgb, var(--color-shadow) 14%, transparent);
  max-height: var(--scroll-height, 320px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--scroll-bg) 30%, transparent) top / 100% 32px no-repeat local,
    linear-gradient(transparent, var(--scroll-bg) 70%) bottom / 100% 32px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--scroll-shadow), transparent) top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--scroll-shadow), transparent) bottom / 100% 12px no-repeat scroll;
  background-color: var(--scroll-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar) transparent;
}

.scroll-area:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

.scroll-area::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scroll-area::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  background-color: var(--color-scrollbar);
  background-clip: padding-box;
}

.scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbar-hover);
}

.scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

/* Sideways scrolling (photo strips, wide chips). Shadows at the start and end edges. */
.scroll-area--x {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  background:
    linear-gradient(to right, var(--scroll-bg) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--scroll-bg) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right / 12px 100% no-repeat scroll;
  background-color: var(--scroll-bg);
}

.scroll-area__row {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  padding-block-end: var(--space-2);
}

/* components/accordion.css */
/*
 * Accordion: questions or sections that open and close (FAQs, policies, grouped settings).
 * Native <details> / <summary>: keyboard, screen readers and find-in-page work with no script.
 * Give every <details> the same name="…" to keep only one open at a time. Not part of the original design.
 *   <div class="accordion">
 *     <details class="accordion__item" name="faq" open>
 *       <summary class="accordion__trigger">How do I cancel a booking?</summary>
 *       <div class="accordion__content">…</div>
 *     </details>
 *   </div>
 */
.accordion {
  display: flex;
  flex-direction: column;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.accordion__item + .accordion__item {
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  list-style: none;
  cursor: pointer;
}

.accordion__trigger::-webkit-details-marker {
  display: none;
}

/* Caret at the end; turns when open. */
.accordion__trigger::after {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: var(--icon-caret-right) center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform var(--transition-base);
}

.accordion__item[open] > .accordion__trigger::after {
  transform: rotate(-90deg);
}

.accordion__trigger:hover {
  color: var(--color-primary);
}

.accordion__trigger:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

.accordion__content {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

.accordion__item[open] > .accordion__content {
  animation: slide-down var(--transition-base) backwards;
}

/* Separate cards instead of one bordered list. */
.accordion--separated {
  gap: var(--space-3);
  border: 0;
  background: none;
}

.accordion--separated .accordion__item {
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

/* components/table-basic.css */
/*
 * Basic table: static rows without the DataTable features (no search, paging or mobile cards).
 * For small fixed lists: price breakdowns, tax rates, opening hours. Not part of the original design; built from the
 * DataTable header and row styles. Wrap it so wide tables scroll inside their box.
 *   <div class="table-basic__wrap"><table class="table-basic table-basic--striped">…</table></div>
 * Modifiers: --striped, --compact. Right-align numbers with .table-basic__num.
 */
.table-basic__wrap {
  position: relative; /* keeps visually hidden labels inside the scroll area */
  overflow-x: auto;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.table-basic {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  text-align: start;
}

.table-basic caption {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  text-align: start;
  caption-side: bottom;
}

.table-basic th,
.table-basic td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: middle;
}

.table-basic thead th {
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table-basic tbody tr + tr :is(th, td),
.table-basic tfoot :is(th, td) {
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.table-basic tbody th {
  font-weight: var(--font-weight-medium);
}

.table-basic tfoot :is(th, td) {
  font-weight: var(--font-weight-semibold);
}

.table-basic .table-basic__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.table-basic--striped tbody tr:nth-child(even) {
  background-color: var(--color-surface-muted);
}

.table-basic--compact :is(th, td) {
  padding: var(--space-2) var(--space-3);
}

/*
 * Not part of the original design.
 *   table-basic--hover                    rows tint under the pointer
 *   table-basic__wrap--scroll             the box scrolls after --table-height (320px); pair with
 *   table-basic--sticky                   a header that stays at the top while the rows scroll
 *   tfoot                                 summary row (bold, with a line above)
 * Rich cells reuse the DataTable cell parts: .cell-stack, .avatar, .avatar-group, .badge and the
 * row action menu (.dropdown__menu--actions).
 */
.table-basic--hover tbody tr {
  transition: background-color var(--transition-fast);
}

.table-basic--hover tbody tr:hover {
  background-color: var(--color-primary-soft);
}

.table-basic__wrap--scroll {
  max-height: var(--table-height, 320px);
  overflow-y: auto;
}

.table-basic--sticky thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}

.table-basic tfoot :is(th, td) {
  background-color: var(--color-surface-muted);
}

/* components/data-display.css */
/*
 * Small data display components (not in Figma; built from the existing tokens):
 *   Description list   <dl class="desc-list"> <div class="desc-list__row"><dt>Check-in</dt><dd>Oct 23</dd></div> </dl>
 *                      --grid: label / value pairs in two columns; --stacked: label above value
 *   List item          <ul class="item-list"> <li class="list-item"> media · body · meta · actions </li> </ul>
 *   Activity timeline  <ol class="activity-timeline"> <li class="activity-timeline__item activity-timeline__item--success">…</li> </ol>
 *   Status dot         <span class="status-dot status-dot--online"></span> (pair it with visible text or a visually-hidden label)
 *   Kbd                <kbd class="kbd">Ctrl</kbd> <kbd class="kbd">K</kbd>
 *   Aspect ratio       <div class="aspect-ratio" style="--ratio: 16 / 9"><img …></div> or --video, --photo, --square
 */

/* ---------- Description list ---------- */
.desc-list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.desc-list__row {
  display: grid;
  grid-template-columns: minmax(120px, 40%) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.desc-list__row + .desc-list__row {
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.desc-list dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.desc-list dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  overflow-wrap: anywhere;
}

.desc-list--stacked .desc-list__row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
}

.desc-list--grid {
  display: grid;
  gap: var(--space-4) var(--space-6);
}

.desc-list--grid .desc-list__row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: 0;
  border: 0;
}

@media (min-width: 768px) {
  .desc-list--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .desc-list__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* ---------- List item ---------- */
.item-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-list > li + li {
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

a.list-item,
.list-item--interactive {
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-fast);
}

a.list-item:hover,
.list-item--interactive:hover {
  background-color: var(--color-surface-muted);
}

a.list-item:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: -2px;
}

.list-item__media {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.list-item__media hd-icon {
  --icon-size: 20px;
}

.list-item__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.list-item__title {
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.list-item__meta {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-variant-numeric: tabular-nums;
}

.list-item__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
}

/* ---------- Activity timeline ---------- */
.activity-timeline {
  --marker: 28px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-timeline__item {
  --tone: var(--color-primary);
  --tone-bg: var(--color-primary-soft);
  position: relative;
  display: grid;
  grid-template-columns: var(--marker) minmax(0, 1fr);
  gap: var(--space-3);
  padding-block-end: var(--space-6);
}

/* The line joining one marker to the next. */
.activity-timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-block: var(--marker) 0;
  inset-inline-start: calc(var(--marker) / 2 - 1px);
  width: 2px;
  background-color: var(--color-border);
}

.activity-timeline__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--marker);
  height: var(--marker);
  border-radius: var(--radius-full);
  background-color: var(--tone-bg);
  color: var(--tone);
}

.activity-timeline__marker hd-icon {
  --icon-size: 16px;
}

.activity-timeline__item--success {
  --tone: var(--color-success-strong);
  --tone-bg: var(--color-success-soft);
}

.activity-timeline__item--warning {
  --tone: var(--color-warning-strong);
  --tone-bg: var(--color-warning-soft);
}

.activity-timeline__item--error {
  --tone: var(--color-error-strong);
  --tone-bg: var(--color-error-soft);
}

.activity-timeline__item--neutral {
  --tone: var(--color-text-muted);
  --tone-bg: var(--color-surface-muted);
}

.activity-timeline__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-start: 3px;
}

.activity-timeline__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.activity-timeline__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.activity-timeline__time {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

/* ---------- Status dot ---------- */
.status-dot {
  --dot: var(--color-disabled);
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-full);
  background-color: var(--dot);
  box-sizing: content-box;
}

.status-dot--online { --dot: var(--color-success); }
.status-dot--away { --dot: var(--color-warning); }
.status-dot--busy { --dot: var(--color-error); }
.status-dot--offline { --dot: var(--color-disabled); }

/* Text with a dot in front: <span class="status-label"><span class="status-dot status-dot--online"></span>Online</span> */
.status-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .status-dot--pulse {
    animation: status-pulse 2s ease-out infinite;
  }
}

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px transparent; }
}

/* ---------- Kbd ---------- */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-1);
  border: var(--border-width-1) solid var(--color-border);
  border-block-end-width: 2px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.kbd hd-icon {
  --icon-size: 14px;
}

.kbd-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* ---------- Aspect ratio ---------- */
.aspect-ratio {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.aspect-ratio > :is(img, video, iframe, .aspect-ratio__fill) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.aspect-ratio--video { --ratio: 16 / 9; }
.aspect-ratio--photo { --ratio: 4 / 3; }
.aspect-ratio--square { --ratio: 1 / 1; }

/* components/carousel.css */
/*
 * Carousel: one slide at a time with previous / next buttons and dots (assets/js/components/carousel.js).
 * Slides scroll with CSS scroll snap, so swiping on touch screens and the trackpad work natively.
 * No autoplay (nothing moves on its own). Not part of the original design; built from the gallery and icon button styles.
 */
.carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.carousel__track {
  display: flex;
  overflow-x: auto;
  border-radius: var(--radius-xl);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__track:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .carousel__track {
    scroll-behavior: smooth;
  }
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.carousel__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.carousel__caption {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-end: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-scrim-strong);
  color: var(--color-text-on-media);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* Previous / next sit over the slide, centred vertically. */
.carousel__nav {
  position: absolute;
  top: calc(50% - 32px);
  z-index: var(--z-raised);
  box-shadow: var(--shadow-md);
}

.carousel__nav--prev {
  inset-inline-start: var(--space-3);
}

.carousel__nav--next {
  inset-inline-end: var(--space-3);
}

.carousel__nav:disabled {
  visibility: hidden;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border-strong);
  cursor: pointer;
  transition:
    width var(--transition-base),
    background-color var(--transition-base);
}

.carousel__dot[aria-current='true'] {
  width: 24px;
  background-color: var(--color-primary);
}

.carousel__dot:focus-visible {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

/* components/rich-text.css */
/*
 * Rich text: styles for long text written by people (policies, blog posts, room descriptions),
 * including what the rich text editor produces. Wrap the content: <div class="rich-text">…</div>.
 * Not part of the original design; built from the type tokens. (The property pages' smaller .prose block stays as it is.)
 */
.rich-text {
  max-width: 72ch;
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: 1.7;
}

.rich-text > * + * {
  margin-block-start: var(--space-4);
}

.rich-text :is(h2, h3, h4) {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  text-wrap: balance;
}

.rich-text > :is(h2, h3, h4) {
  margin-block-start: var(--space-8);
}

.rich-text > :first-child {
  margin-block-start: 0;
}

.rich-text h2 { font-size: var(--font-size-2xl); }
.rich-text h3 { font-size: var(--font-size-xl); }
.rich-text h4 { font-size: var(--font-size-lg); }

.rich-text :is(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline-start: var(--space-6);
}

.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }

.rich-text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rich-text a:hover {
  color: var(--color-primary-strong);
}

.rich-text strong {
  font-weight: var(--font-weight-semibold);
}

.rich-text blockquote {
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-text-muted);
}

.rich-text code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-muted);
  font-size: 0.9em;
}

.rich-text hr {
  border: 0;
  border-block-start: var(--border-width-1) solid var(--color-border);
}

.rich-text .rich-text__lead {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

/* components/progress-ring.css */
/*
 * Progress ring: circular completion (profile, setup). Pure CSS: set --value (0–100) and the matching
 * ARIA values; the ring fills with a short animation. Not part of the original design; built from the progress bar colors.
 *   <div class="progress-ring" role="progressbar" aria-label="Profile complete" aria-valuemin="0"
 *        aria-valuemax="100" aria-valuenow="65" style="--value: 65">
 *     <span class="progress-ring__track"></span>
 *     <span class="progress-ring__value" aria-hidden="true">65%</span>
 *   </div>
 * Sizes: --sm (40px), default (64px), --lg (96px). Tones: --success, --warning, --error.
 */
@property --ring {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.progress-ring {
  --size: 64px;
  --thickness: 7px;
  --tone: var(--color-primary);
  --track: var(--color-primary-subtle);
  position: relative;
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--size);
  height: var(--size);
}

/* The ring itself: a conic fill cut into a ring by a radial mask (the label sits on top, unmasked). */
.progress-ring__track {
  --ring: var(--value, 0);
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: conic-gradient(var(--tone) calc(var(--ring) * 1%), var(--track) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
  transition: --ring var(--duration-chart) var(--ease-out);
}

.progress-ring__value {
  position: relative;
  color: var(--color-text);
  font-size: calc(var(--size) * 0.24);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.progress-ring--sm {
  --size: 40px;
  --thickness: 5px;
}

.progress-ring--lg {
  --size: 96px;
  --thickness: 9px;
}

.progress-ring--success {
  --tone: var(--color-success);
  --track: var(--color-success-subtle);
}

.progress-ring--warning {
  --tone: var(--color-warning);
  --track: var(--color-warning-subtle);
}

.progress-ring--error {
  --tone: var(--color-error);
  --track: var(--color-error-subtle);
}

/* Fill in from zero when the ring first appears. */
@media (prefers-reduced-motion: no-preference) {
  @starting-style {
    .progress-ring__track {
      --ring: 0;
    }
  }
}

/* Patterns */
/* patterns/page-header.css */
/* Page title block with actions. Figma: Body Content / Header. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.page-header__text {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.page-header__title {
  color: var(--color-text);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-2xl);
}

.page-header__subtitle {
  color: var(--color-text-muted);
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.page-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.page-header__back:hover {
  color: var(--color-primary);
}

@media (max-width: 767.98px) {
  /* Figma mobile: 16px semibold body title, 14px subtitle. */
  .page-header__title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
  }

  .page-header__subtitle {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .page-header__actions {
    justify-content: flex-start;
    width: 100%;
  }

  /* Figma mobile: one action stays beside the title; several actions drop to their own row. */
  .page-header:has(.page-header__actions > .btn:only-child) {
    flex-wrap: nowrap;
  }

  .page-header:has(.page-header__actions > .btn:only-child) .page-header__text {
    flex: 1 1 0;
  }

  .page-header__actions:has(> .btn:only-child) {
    width: auto;
  }

  .page-header__actions > .btn {
    white-space: nowrap;
  }

  .page-header__actions > .tabs {
    flex: 1;
  }
}

/* patterns/stat-card.css */
/* Dashboard "Today Metrics" panel and its stat cards. */
.metrics-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-primary-subtle);
  border-radius: var(--radius-2xl);
  background-color: var(--color-primary-soft);
}

.metrics-panel__caption {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.metrics-panel__row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .metrics-panel__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .metrics-panel__row {
    gap: var(--gutter);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.stat-card__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.stat-card__label {
  color: var(--color-text-muted);
}

.stat-card__value {
  color: var(--color-text);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-2xl);
}

.stat-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

@media (max-width: 767.98px) {
  /* Figma mobile: 12px panel padding, 16px caption, 20px values in the body font. */
  .metrics-panel {
    padding: var(--space-3);
    border-radius: var(--radius-xl);
  }

  .metrics-panel__row {
    gap: var(--space-3);
  }

  .stat-card {
    border-radius: var(--radius-lg);
  }

  .stat-card__label {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .stat-card__value {
    font-family: var(--font-family-body);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }
}

/* patterns/summary-card.css */
/*
 * Colored summary cards (dashboard "Total Bookings", "Total Revenue Amount", ...).
 * Card tone sets background and border; icon tone sets the icon color.
 */
.summary-card {
  --summary-bg: var(--color-primary-soft);
  --summary-border: var(--color-info-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--summary-border);
  border-radius: var(--radius-2xl);
  background-color: var(--summary-bg);
}

.summary-card--success {
  --summary-bg: var(--color-success-soft);
  --summary-border: var(--color-success-subtle);
}

.summary-card--warning {
  --summary-bg: var(--color-warning-soft);
  --summary-border: var(--color-warning-subtle);
}

.summary-card--error {
  --summary-bg: var(--color-error-soft);
  --summary-border: var(--color-error-subtle);
}

.summary-card__icon {
  --summary-icon: var(--color-info);
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--summary-icon);
}

.summary-card__icon--success {
  --summary-icon: var(--color-success);
}

.summary-card__icon--error {
  --summary-icon: var(--color-error);
}

.summary-card__icon--warning {
  --summary-icon: var(--color-warning);
}

.summary-card__icon--primary {
  --summary-icon: var(--color-primary);
}

.summary-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.summary-card__label {
  color: var(--color-text-muted);
}

.summary-card__value {
  color: var(--color-text);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-2xl);
}

.summary-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  /* Figma mobile: icon beside the text, 20px value. */
  .summary-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    border-radius: var(--radius-xl);
  }

  .summary-card__label {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .summary-card__value {
    font-family: var(--font-family-body);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }
}

/* patterns/states.css */
/*
 * Empty, loading and error states. Figma: Empty State (all modules).
 * Loading and error follow the same layout (not designed in Figma).
 */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-muted);
  text-align: center;
}

.state__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.state--error .state__icon {
  background-color: var(--color-error-soft);
  color: var(--color-error);
}

.state__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 560px;
}

.state__title {
  color: var(--color-text);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.state__message {
  color: var(--color-text-muted);
  font-family: var(--font-family-heading);
}

.state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* State drawn over a dashboard section while it loads (see components/async-section.js). */
.has-section-state {
  position: relative;
  min-height: 240px;
}

.section-state {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  display: flex;
  padding: var(--space-4);
  background-color: var(--color-surface);
}

.section-state > .state {
  flex: 1;
}

/* 404 page: the empty state with a large code above the title. */
.not-found {
  padding: var(--space-16) var(--space-4);
}

.not-found__code {
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/* patterns/checklist.css */
/*
 * Platform Setup Checklist (dashboard set-up state). Figma: 1. Dashboard / Set-up [7636:72417].
 * Header with title and progress box, then a grey well of task cards (3 per row on desktop).
 */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.checklist__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--gutter);
}

.checklist__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 240px;
}

.checklist__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-2xl);
}

.checklist__subtitle {
  color: var(--color-text-muted);
}

.checklist__progress {
  width: 328px;
  max-width: 100%;
}

.checklist__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-muted);
}

@media (min-width: 768px) {
  .checklist__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .checklist__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* One setup task. Figma: Setup Card. */
.task-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.task-card__icon {
  display: inline-flex;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.task-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.task-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.task-card__description {
  overflow: hidden;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card.is-done .task-card__icon {
  background-color: var(--color-success-soft);
  color: var(--color-success);
}

@media (max-width: 767.98px) {
  .checklist {
    padding: var(--space-4);
  }

  .checklist__title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
  }

  .checklist__subtitle {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .checklist__progress {
    width: 100%;
  }

  .checklist__grid {
    border-radius: var(--radius-lg);
  }

  /* Figma mobile Setup Card: icon beside a one-line text block, compact button below. */
  .task-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }

  .task-card__title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .task-card__description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .task-card .btn {
    grid-column: 1 / -1;
    justify-self: start;
    gap: var(--space-1);
    min-height: 0;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
  }

  .task-card .btn hd-icon,
  .task-card .btn svg {
    width: 20px;
    height: 20px;
  }
}

/* patterns/profile.css */
/* Admin profile. Figma: 2. Dashboard / Admin Profile [8237:123513]. */
.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.profile-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.profile-card__avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

.profile-card__name {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-semibold);
}

/* Figma mobile: Edit Details sits under the name. */
@media (max-width: 767.98px) {
  .profile-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-2);
  }

  .profile-card__avatar {
    grid-row: span 2;
    width: 64px;
    height: 64px;
  }

  .profile-card__name {
    align-self: end;
  }

  .profile-card__head > .btn {
    justify-self: start;
    align-self: start;
  }
}

.profile-card__divider {
  height: 1px;
  border: 0;
  background-color: var(--color-border);
}

.profile-card__contacts {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .profile-card__contacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Icon + label + value. Reused wherever contact details are listed. */
.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.contact-item__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--color-info-soft);
  color: var(--color-info);
}

.contact-item__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.contact-item__label {
  color: var(--color-text-muted);
}

.contact-item__value {
  overflow-wrap: anywhere;
  color: var(--color-primary-deep);
}

/* Grey box of contact items (Inquiry Details, Country view). */
.contact-panel {
  gap: var(--space-4);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.contact-panel .contact-item__icon {
  background-color: var(--color-surface);
}

/* patterns/booking.css */
/*
 * Booking views. Figma: Bookings / All Bookings, Booking Details, Add Booking, Today's Check-ins.
 * Reusable outside bookings: kpi cards, detail page shell, detail grid, info tiles, price list,
 * detail box (quick view), section title.
 */

/* ---------- KPI cards (Card Statistic [7731:76119]) ---------- */
.kpi-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .kpi-grid {
    gap: var(--gutter);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kpi-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kpi-card {
  --kpi-bg: var(--color-info-soft);
  --kpi-accent: var(--color-info);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-2xl);
  background-color: var(--kpi-bg);
}

.kpi-card--error {
  --kpi-bg: var(--color-error-soft);
  --kpi-accent: var(--color-error);
}

.kpi-card--success {
  --kpi-bg: var(--color-success-soft);
  --kpi-accent: var(--color-success);
}

.kpi-card--warning {
  --kpi-bg: var(--color-warning-soft);
  --kpi-accent: var(--color-warning);
}

.kpi-card--info {
  --kpi-bg: var(--color-info-soft);
  --kpi-accent: var(--color-info);
}

.kpi-card--primary {
  --kpi-bg: var(--color-primary-soft);
  --kpi-accent: var(--color-primary);
}

/* Optional caption under a divider (Refer & Earn). */
.kpi-card__note {
  flex-basis: 100%;
  padding-top: var(--space-3);
  border-top: var(--border-width-1) solid color-mix(in srgb, var(--kpi-accent) 25%, transparent);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.kpi-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--kpi-accent);
  color: var(--color-text-inverse);
}

.kpi-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.kpi-card__label {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-card__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xl);
}

/* ---------- Detail page shell: white heading band over a grey body ---------- */
.app__main.detail-page {
  gap: 0;
  padding: 0;
  background-color: var(--color-page);
}

.detail-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-surface);
}

.detail-page__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.detail-page__back:hover {
  color: var(--color-primary);
}

.detail-page__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.detail-page__title {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.detail-page__title::after {
  order: 1;
  content: '';
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-disabled);
}

.detail-page__title > :last-child {
  order: 2;
}

.detail-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.detail-page__body {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-4);
}

.detail-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

@media (min-width: 768px) {
  .detail-page__head,
  .detail-page__body {
    padding: var(--gutter);
  }

  .detail-page__body,
  .detail-stack {
    gap: var(--gutter);
  }
}

@media (min-width: 1440px) {
  /* Main column 1034px, side column 502px. */
  .detail-page__body {
    grid-template-columns: minmax(0, 1034fr) minmax(0, 502fr);
    align-items: start;
  }
}

/* Person heading inside a detail card (icon + name + id). */
.person-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.person-row__icon {
  display: inline-flex;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--color-info-soft);
  color: var(--color-info);
}

.person-row__name {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-semibold);
}

.person-row__id {
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.detail-subtitle {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.contact-item--muted .contact-item__icon {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}

.contact-item--muted .contact-item__value {
  color: var(--color-text);
}

/* Label / value grid (Booking Details card). */
.detail-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

@media (min-width: 1024px) {
  .detail-grid {
    gap: var(--gutter);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.detail-grid dt,
.detail-rows dt {
  color: var(--color-text-muted);
}

.detail-grid dd {
  overflow-wrap: anywhere;
}

/* Small summary tiles (Payment Status / Method / Booking Source). */
.info-tiles {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (min-width: 768px) {
  .info-tiles {
    gap: var(--gutter);
  }
}

.info-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.info-tile__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.info-tile__value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
}

.info-tile__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.info-tile__note {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-sm);
}

/* Price rows with dividers and a grey total box (Financial Details). */
.price-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--font-family-heading);
}

.price-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.price-list__row + .price-list__row {
  padding-top: var(--space-4);
  border-top: var(--border-width-1) solid var(--color-border);
}

.price-list__row--negative dd {
  color: var(--color-error);
}

.price-list__total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

/* Cancelled booking: settlement block under the total. */
.settlement {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
  font-family: var(--font-family-heading);
}

.settlement__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  font-weight: var(--font-weight-medium);
}

.settlement__note {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.settlement__charge {
  display: flex;
  justify-content: space-between;
  color: var(--color-error);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.settlement__net {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

/* ---------- Booking quick view (modal / drawer) [7811:95802] ---------- */
.booking-quick {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.booking-quick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.booking-quick__id {
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
}

.detail-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.detail-box__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

/* Two-column label / value rows. */
.detail-rows {
  display: grid;
  gap: var(--space-6) var(--space-1);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.detail-rows > div {
  display: contents;
}

.detail-rows dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow-wrap: anywhere;
}

/* Check-in / check-out pair: label above value. */
.detail-rows > .detail-rows__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.payment-box {
  overflow: hidden;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.payment-box__title {
  padding: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.payment-box .price-list {
  padding: var(--space-4);
}

.payment-box .price-list__row {
  align-items: center;
}

.payment-box .price-list__row:first-child dd {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

/* Push the payment box to the bottom of the drawer (Figma). */
.booking-drawer,
.modal--drawer .booking-quick {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.modal--drawer .payment-box {
  margin-top: auto;
}

/* Status radios + room number under the quick view (check-in / check-out). */
.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6);
}

.status-row > .field:last-child {
  flex: 1;
  min-width: 220px;
}

/* ---------- Booking form (Add / Edit Booking modal) [12181:103603] ---------- */
.booking-form {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .booking-form {
    grid-template-columns: minmax(0, 700fr) minmax(0, 428fr);
    align-items: start;
  }
}

.booking-form__main,
.booking-form__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-title__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.section-title__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xl);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline "New Guest Registration" panel [7755:87341]. */
.guest-register {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.guest-register__title {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.guest-register__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width-1) solid var(--color-border);
}

@media (max-width: 767.98px) {
  .detail-page__head {
    gap: var(--space-4);
  }

  .kpi-card__note {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .section-title__text {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .detail-page__title-row {
    flex-wrap: nowrap;
  }

  .detail-page__title {
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .detail-page__actions {
    flex-wrap: nowrap;
    gap: var(--space-3);
  }

  /* Figma mobile: header actions shrink to 40px icon buttons; the label stays for screen readers. */
  .detail-page__actions .btn:has(.btn__label) {
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
  }

  .person-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: 0;
  }

  .person-row__icon {
    grid-row: span 2;
  }

  .person-row__id {
    font-family: var(--font-family-body);
  }

  .detail-subtitle {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .detail-grid {
    gap: var(--space-6) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Figma mobile: total is a plain divided row, 16px semibold. */
  .price-list__total {
    padding: var(--space-4) 0 0;
    border-top: var(--border-width-1) solid var(--color-border);
    border-radius: 0;
    background-color: transparent;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .info-tile {
    padding: var(--space-4);
  }
}

/* ---------- Availability Calendar [10595:148955] ---------- */
.availability__date {
  width: 200px;
}

.availability__grid {
  padding: 0 var(--space-4) var(--space-4);
}

/* Colour key between the page and the footer. */
.legend-bar {
  padding: var(--space-2) var(--space-6);
  border-top: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-surface);
}

@media (max-width: 767.98px) {
  .availability__date {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  .availability .data-table__toolbar {
    padding: var(--space-4);
  }

  .availability .data-table__actions {
    flex-wrap: nowrap;
  }

  .availability .data-table__actions > .btn {
    flex: 0 0 auto;
  }

  .availability .data-table__actions:has(.availability__type:not([hidden])) {
    flex-wrap: wrap;
  }

  /* Grid view (Figma): room type + Today on one row, the date below. */
  .availability .data-table__actions .availability__type {
    flex: 1 1 0;
    min-width: 0;
  }

  .availability .data-table__actions:has(.availability__type:not([hidden])) .availability__date {
    flex-basis: 100%;
  }

  .availability__grid {
    padding: 0;
  }

  .legend-bar {
    padding: var(--space-3) var(--space-4);
  }
}

/* patterns/rooms.css */
/*
 * Room Management and Guest Reviews. Figma: Room Types, All Rooms, Room Details, Room Inventory,
 * Guest Reviews. Table cells, detail sections, step-modal pieces and the inventory accordion.
 */

/* ---------- Table cells ---------- */
.media-cell {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.media-cell__image {
  flex-shrink: 0;
  width: 72px;
  height: 60px;
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
  object-fit: cover;
}

.media-cell__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.media-cell__title {
  font-weight: var(--font-weight-semibold);
}

/* Extra line shown only in mobile cards (e.g. the rating under the room name). */
.media-cell__mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .media-cell__mobile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
  }

  #rooms-table .price-cell small {
    display: block;
  }
}

.spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.spec-list li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.spec-list strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.spec-list__icon--guests {
  color: var(--color-info);
}

.spec-list__icon--bed {
  color: var(--color-success);
}

.spec-list__icon--size {
  color: var(--color-error);
}

.count-text {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  text-transform: uppercase;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.rating hd-icon {
  color: var(--color-success);
}

.rating--warm hd-icon {
  color: var(--color-warning);
}

.rating__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-sm);
}

.price-cell {
  font-weight: var(--font-weight-bold);
}

.price-cell small {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

/* Five stars with a numeric score (reviews). */
.stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
}

.stars__icons {
  display: inline-flex;
  gap: var(--space-2);
  color: var(--color-border-strong);
}

.stars__icons .is-on {
  color: var(--color-warning);
}

.review-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  white-space: normal;
}

.review-cell__text {
  color: var(--color-text-muted);
}

.review-cell .thumb-strip__item {
  width: 72px;
  height: 60px;
  border-radius: var(--radius-lg);
}

/* ---------- Room / room type details ---------- */
.room-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.room-hero__image {
  flex-shrink: 0;
  width: 96px;
  height: 80px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.room-hero__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.room-hero__name {
  overflow: hidden;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.room-hero__id {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Room details use one full-width column. */
.detail-page__body.detail-page__body--single {
  grid-template-columns: minmax(0, 1fr);
}

.detail-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.detail-sections .card__title {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.detail-sections .card__header {
  padding: var(--space-6);
}

.room-description {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* Centered spec tiles (Room Specification). */
.spec-cards {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.spec-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-muted);
  text-align: center;
}

.spec-card__icon {
  display: inline-flex;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.spec-card__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.spec-card__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.amenity-grid {
  display: grid;
  gap: var(--space-6) var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Big centered nightly price (Pricing Details). */
.price-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-primary-soft);
  text-align: center;
}

.price-hero__value {
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-3xl);
}

.price-hero__label {
  color: var(--color-text-muted);
}

.price-box {
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.price-box .price-list__total {
  background-color: var(--color-surface);
}

/* ---------- Step modals (Add Room Type / Add Room) ---------- */
.group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.group-title__text {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.group-title__count {
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.group-title__count.is-full {
  color: var(--color-error);
}

/* Label + checkbox row (amenity picker). */
.option-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.option-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  cursor: pointer;
}

.option-row span {
  flex: 1;
}

.option-row:has(.checkbox:checked) {
  border-color: var(--color-primary);
}

.step-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Room type summary (Add Room step 1) [7954:118730]. */
.type-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.type-summary__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.type-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.type-summary__room {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-2);
}

.type-summary__icon {
  display: inline-flex;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.type-summary__name {
  font-weight: var(--font-weight-semibold);
}

.type-summary__beds {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.type-summary__facts {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-4) var(--space-2) var(--space-2);
  border-top: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.type-summary__facts dt {
  color: var(--color-text-muted);
}

.type-summary__facts dd {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.type-summary__facts hd-icon {
  color: var(--color-success);
}

/* Base price row with the dark currency badge [7960:120911]. */
.price-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.price-input__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.price-input__intro {
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.price-input__intro p {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.price-input__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.price-input__currency {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.price-input__row .control {
  flex: 1;
}

/* ---------- Room inventory [10593:136052] ---------- */
.floor-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.floor-card {
  overflow: hidden;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.floor-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  text-align: start;
  cursor: pointer;
}

.floor-card__head[aria-expanded='true'] {
  background-color: var(--color-surface-muted);
}

.floor-card__number {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

.floor-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.floor-card__name {
  font-weight: var(--font-weight-semibold);
}

.floor-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.floor-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.floor-card__meta span + span::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-inline-end: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-disabled);
}

.floor-card__caret {
  display: inline-flex;
  padding: var(--space-1);
  border: var(--border-width-1) solid var(--color-border-control);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast);
}

.floor-card__head[aria-expanded='true'] .floor-card__caret {
  border-color: var(--color-border-emphasis);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  transform: rotate(180deg);
}

.floor-card__body {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  padding: var(--space-4);
}

@media (min-width: 1280px) {
  .floor-card__body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Bulk action bar shown when rooms are selected. */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-1) solid var(--color-primary-subtle);
  border-radius: var(--radius-2xl);
  background-color: var(--color-primary-soft);
}

.bulk-bar__icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.bulk-bar__text {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.bulk-bar__actions {
  display: flex;
  gap: var(--space-4);
}

/* "Add Room" generator panel [10593:135435]. */
.generate-panel .card__header {
  border-bottom: 0;
}

.generate-panel__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  padding: 0 var(--space-4) var(--space-4);
}

@media (min-width: 1024px) {
  .generate-panel__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

.generate-panel__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-4);
  border-top: var(--border-width-1) solid var(--color-border);
}

/* ---------- Review modal [7988:120237] ---------- */
.review-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.review-box__room {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.review-box__room img {
  width: 64px;
  height: 52px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.review-box__chips {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-box__chip {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
}

.review-box__chip span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-xs);
}

.review-box__chip a {
  color: var(--color-primary);
}

.review-body__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.review-body__date {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.review-body__text {
  color: var(--color-text-muted);
}

.review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.review-photos img {
  width: 132px;
  height: 104px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .detail-sections .card__header {
    padding: var(--space-4);
  }

  /* Figma mobile room details: 16px titles, 5-line description, row spec tiles, 2-column amenities. */
  .detail-sections .card__title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .room-hero__name {
    white-space: normal;
  }

  .review-cell__text {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .review-cell .thumb-strip__item {
    width: calc((100% - 3 * var(--space-2)) / 4);
    max-width: 68px;
    height: 56px;
  }

  /* Floor meta stacks on mobile, so the dot separator goes. */
  .floor-card__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .floor-card__meta span + span::before {
    display: none;
  }

  /* Figma mobile Room Details head: name and ID only. */
  .room-hero__image,
  .room-hero__meta .rating {
    display: none;
  }

  .room-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
  }

  .spec-cards {
    gap: var(--space-4);
  }

  .spec-card {
    flex-direction: row;
    gap: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: start;
  }

  .spec-card__value {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .amenity-grid {
    gap: var(--space-6) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .amenity-card {
    gap: var(--space-3);
  }

  .amenity-card__icon {
    width: 40px;
    height: 40px;
  }

  .amenity-card__icon hd-icon {
    --icon-size: 20px;
  }

  .review-box__chips {
    grid-template-columns: minmax(0, 1fr);
  }
}

.review-modal__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.review-modal__id {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.review-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* patterns/section-card.css */
/*
 * Collapsible section card: icon, title, description, actions and a dark toggle.
 * Used by FAQ topics, Manage Homepage, About Page, Legal Policy sections and City Details.
 * The toggle reuses .card__toggle, so the shared collapse handler opens and closes the body.
 */
.section-card {
  overflow: hidden;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.section-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}

.section-card:has(> .section-card__head [aria-expanded='true']) > .section-card__head {
  background-color: var(--color-surface-muted);
}

.section-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.section-card:has(> .section-card__head [aria-expanded='true']) .section-card__icon {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.section-card__icon--number,
.section-card:has(> .section-card__head [aria-expanded='true']) .section-card__icon--number {
  border: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.section-card__text {
  flex: 1;
  min-width: 200px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.section-card__title {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.section-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-card__count {
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.card__toggle.section-card__toggle {
  flex: 0 0 auto;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: var(--border-width-1) solid var(--color-border-emphasis);
  border-radius: var(--radius-md);
}

.section-card__toggle[aria-expanded='true'] {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.section-card__toggle .card__caret {
  margin: 0;
}

.section-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3);
}

.section-card__add {
  align-self: flex-start;
  padding-top: var(--space-3);
}

/* Figma mobile: count + edit / delete on the first row, number / title / toggle on the second. */
@media (max-width: 767.98px) {
  .section-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: var(--space-3);
    row-gap: var(--space-4);
    padding: var(--space-4);
  }

  .section-card__text {
    grid-column: 2 / 4;
    min-width: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .section-card__title {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .section-card__text p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .section-card__actions {
    display: contents;
  }

  .section-card__toggle {
    grid-column: 4;
  }

  .section-card__head:has(.section-card__count) > :is(.section-card__icon, .section-card__text),
  .section-card__head:has(.section-card__count) .section-card__toggle {
    grid-row: 2;
  }

  .section-card__count {
    grid-row: 1;
    grid-column: 1 / 3;
    justify-self: start;
  }

  .section-card__actions > .icon-btn {
    grid-row: 1;
    grid-column: 3;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background-color: transparent;
  }

  .section-card__actions > .icon-btn--danger {
    grid-column: 4;
  }

  .section-card__body {
    padding: var(--space-4);
  }

  /* A button directly in the head (Add Rule) takes its own full-width row. */
  .section-card__head > .btn {
    grid-column: 1 / -1;
  }

  .section-card__head > .btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .section-card__icon {
    min-width: 48px;
    height: 48px;
  }

  .section-card__icon--number {
    min-width: 44px;
    height: 44px;
  }
}

/* Tinted icon square (blog categories, cities, place categories). */
.category-icon {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Numbered rule rows (cancellation rules in Cancellation Policy and Add Property). */
.tier {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.tier__text,
.tier__refund {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.tier__text {
  flex: 1;
}

.tier__refund {
  align-items: flex-end;
}

.tier small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-xs);
}

@media (max-width: 767.98px) {
  /* Tier rows (cancellation rules): number + period, then refund on the left, actions on the right. */
  .tier {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--space-4) var(--space-3);
    padding: var(--space-4);
  }

  .tier__text {
    grid-column: 2 / -1;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .tier__refund {
    grid-column: 1 / 3;
    align-items: flex-start;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .tier small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .tier .icon-btn {
    width: 40px;
    height: 40px;
    padding: var(--space-2);
    border-color: var(--color-border);
    background-color: var(--color-surface);
  }
}

/* Modules */
/* modules/showcase.css */
/*
 * Layers, lightest to darkest: page and cards (surface, white) → panels (--sc-panel: side list, code,
 * API) → the stage behind each component (--sc-stage) → hover and dividers (--sc-line). The components themselves stay white, so they stand out on the grey stage.
 */

/*
 * Component showcase page (pages/components.html).
 * Two columns: the component list (.showcase-nav) and one component at a time (.showcase-view).
 * showcase.js builds the list from the sections on the page and shows the one named in the URL hash.
 */
.showcase-layout {
  --sc-panel: var(--color-surface-muted);
  --sc-stage: var(--color-surface-muted);
  --sc-line: var(--color-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .showcase-layout {
    grid-template-columns: 248px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-8);
  }
}

/* ---- Component list ---- */
.showcase-nav {
  display: flex;
  flex-direction: column;
  background-color: var(--sc-panel);
  border: var(--border-width-1) solid var(--sc-line);
  border-radius: var(--radius-2xl);
}

@media (min-width: 1024px) {
  .showcase-nav {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - var(--space-8));
  }
}

.showcase-nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  color: var(--color-text);
  text-align: start;
  background: none;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
}

.showcase-nav__toggle-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-nav__caret {
  transition: transform var(--transition-fast);
}

.showcase-nav.is-open .showcase-nav__caret {
  transform: rotate(180deg);
}

.showcase-nav__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-3);
}

@media (max-width: 1023.98px) {
  .showcase-nav:not(.is-open) .showcase-nav__panel {
    display: none;
  }

  .showcase-nav.is-open .showcase-nav__panel {
    max-height: 60vh;
    border-block-start: var(--border-width-1) solid var(--color-border);
  }
}

@media (min-width: 1024px) {
  .showcase-nav__toggle {
    display: none;
  }
}

.showcase-nav__search.control {
  flex: none;
  border-color: var(--sc-line);
  background-color: var(--color-surface);
}

@media (max-width: 1023.98px) {
  .showcase-nav__kbd {
    display: none;
  }
}

.showcase-nav__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 0;
  margin-inline: calc(var(--space-3) * -1);
  padding-inline: var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.showcase-nav__heading {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Group heading: a button that folds its list open and closed. */
.showcase-nav__group-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  text-transform: inherit;
  cursor: pointer;
}

.showcase-nav__group-toggle:hover {
  background-color: var(--sc-line);
  color: var(--color-text);
}

.showcase-nav__group-toggle[aria-expanded='true'] {
  color: var(--color-text);
}

.showcase-nav__group-label {
  flex: 1;
}

.showcase-nav__count {
  font-variant-numeric: tabular-nums;
}

.showcase-nav__group-caret {
  --icon-size: 14px;
  flex-shrink: 0;
  transform: rotate(-90deg);
  transition: transform var(--transition-fast);
}

[dir='rtl'] .showcase-nav__group-caret {
  transform: rotate(90deg);
}

.showcase-nav__group-toggle[aria-expanded='true'] .showcase-nav__group-caret {
  transform: none;
}

.showcase-nav__tools {
  display: flex;
  justify-content: flex-end;
  margin-block-end: calc(var(--space-1) * -1);
}

.showcase-nav__expand {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-primary-strong);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  cursor: pointer;
}

.showcase-nav__expand:hover {
  background-color: var(--sc-line);
}

.showcase-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-lg);
}

@media (max-width: 1023.98px) {
  .showcase-nav__link {
    padding-block: var(--space-3);
  }
}

.showcase-nav__link:hover {
  background-color: var(--sc-line);
}

.showcase-nav__link[aria-current='page'] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-strong);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-base);
}

.showcase-nav__empty {
  padding: var(--space-4) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---- One component ---- */
.showcase-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.showcase-view__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.showcase-view__group {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
  color: var(--color-primary);
}

.showcase-view__title {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-3xl);
}

.showcase-view__title:focus {
  outline: none;
}

.showcase-view__desc {
  max-width: 68ch;
  color: var(--color-text-muted);
}

/* The preview: the component centred on a plain grey stage. Wide components (tables, charts) use the full width. */
.showcase__canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 320px;
  padding: var(--space-10) var(--space-4);
  background-color: var(--sc-stage);
  border: var(--border-width-1) solid var(--sc-line);
  border-radius: var(--radius-2xl);
}

.showcase__canvas > :not(.modal) {
  width: 100%;
  max-width: 640px;
}

.showcase__section--wide .showcase__canvas {
  align-items: stretch;
  padding: var(--space-4);
}

.showcase__section--wide .showcase__canvas > :not(.modal) {
  max-width: none;
}

.showcase__canvas .showcase__variants {
  justify-content: center;
}

@media (min-width: 768px) {
  .showcase__canvas {
    padding: var(--space-12) var(--space-8);
  }
}

/* Previous / next component. */
.showcase-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.showcase-pager__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  border: var(--border-width-1) solid var(--sc-line);
  border-radius: var(--radius-xl);
  background-color: var(--sc-panel);
}

.showcase-pager__link:hover {
  border-color: var(--color-primary);
  background-color: var(--color-surface);
}

.showcase-pager__link--next {
  grid-column: 2;
  align-items: flex-end;
  text-align: end;
}

.showcase-pager__hint {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  color: var(--color-text-muted);
}

.showcase-pager__name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

/* Labelled variants inside one box: the label says why there is more than one. */
.showcase__variants {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6);
}

.showcase__variant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Variants that share the row equally (scroll area demos). */
.showcase__variants--fill > .showcase__variant {
  flex: 1 1 280px;
  align-items: stretch;
  min-width: 0;
}

.showcase__activity {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 var(--space-3);
  list-style: none;
}

.showcase__activity li {
  padding-block: var(--space-3);
  border-block-end: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* Media demos stay small: aspect ratio boxes and the carousel. */
.showcase__media {
  width: min(100%, 200px);
}

.showcase__carousel {
  max-width: 720px;
}

.showcase__stat {
  gap: var(--space-2);
}

.showcase__stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.showcase__stat-row strong {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-2xl);
}

.showcase__photo {
  width: 160px;
  height: 110px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.showcase__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.showcase__palettes {
  display: grid;
  gap: var(--space-6);
}

.showcase__palette {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-transform: capitalize;
}

/* auto-fit: the 11 shades stretch across the full width; they wrap on narrow screens. */
.showcase__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--space-2);
}

.showcase__swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-transform: none;
}

.showcase__swatch-color {
  height: 56px;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.showcase__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.showcase__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.showcase__bar {
  display: block;
  height: var(--space-4);
  background-color: var(--color-primary-border);
  border-radius: var(--radius-sm);
}

.showcase__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.showcase__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 120px;
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.showcase__box {
  width: 64px;
  height: 64px;
  background-color: var(--color-primary-subtle);
  border: var(--border-width-1) solid var(--color-primary-border-strong);
}

.showcase__row-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.showcase__w-350 {
  width: min(350px, 100%);
}

.showcase__w-150 {
  width: 150px;
}

.showcase__split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .showcase__split {
    grid-template-columns: 369px minmax(0, 1fr);
  }
}

.showcase__box--surface {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
}

/* ---- Component views built from a fragment (modules/showcase/view.js) ---- */
.showcase-view__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-text-muted);
}

.showcase-view__used-link {
  color: var(--color-primary);
}

.showcase-doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.showcase-doc__examples {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.showcase-doc__status {
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

/* On this page: jump links to the examples of a long view. */
.showcase-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.showcase-toc__label {
  margin-inline-end: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.showcase-toc__link,
.showcase-doc__chip {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-text);
  text-decoration: none;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-full);
}

.showcase-toc__link {
  background-color: var(--sc-panel);
  border-color: var(--sc-line);
}

.showcase-toc__link:hover,
.showcase-doc__chip:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* One example: title, Preview / Code tabs, then the canvas or the code. */
.showcase-example {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-margin-top: var(--space-6);
  border: var(--border-width-1) solid var(--sc-line);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-base);
}

.showcase-example__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-block-end: var(--border-width-1) solid var(--sc-line);
}

@media (min-width: 768px) {
  .showcase-example__head {
    padding-inline: var(--space-6);
  }
}

.showcase-example__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.showcase-example__title {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.showcase-example__desc {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-text-muted);
}

.showcase-example__tabs.tabs--segmented {
  display: flex;
  width: fit-content;
  border-color: var(--sc-line);
  background-color: var(--sc-panel);
}

.showcase-example__tabs .tabs__tab {
  flex: none;
  min-width: 0;
  min-height: 36px;
  padding-block: var(--space-1);
  padding-inline: var(--space-4);
}

/* Inside a card the stage fills the body: no border or rounding of its own. */
.showcase-example .showcase__canvas {
  min-height: 200px;
  border: 0;
  border-radius: 0;
}

.showcase-example__code {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--sc-panel);
}

.showcase-code {
  --code-font: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  overflow: hidden;
  color: var(--color-code-text);
  background-color: var(--color-code-bg);
  border-radius: var(--radius-xl);
}

.showcase-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  padding-inline: var(--space-4) var(--space-2);
  border-block-end: var(--border-width-1) solid var(--color-code-border);
}

.showcase-code__lang {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-code-muted);
}

.showcase-code__bar .btn--ghost {
  color: var(--color-code-text);
}

.showcase-code__bar .btn--ghost:hover {
  color: var(--color-text);
}

.showcase-code__pre {
  max-height: 480px;
  margin: 0;
  padding: var(--space-4);
  overflow: auto;
  font-family: var(--code-font);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
  scrollbar-width: thin;
}

/* API, accessibility and related parts under the examples. */
.showcase-doc__part {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--sc-line);
  border-radius: var(--radius-2xl);
  background-color: var(--sc-panel);
}

@media (min-width: 768px) {
  .showcase-doc__part {
    padding: var(--space-6);
  }
}

.showcase-doc__part .table-basic__wrap {
  border-color: var(--sc-line);
  background-color: var(--color-surface);
}

.showcase-doc__chip {
  background-color: var(--color-surface);
}

.showcase-doc__heading {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}

.showcase-doc__related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Icon browser (Foundations → Icons). */
.icon-browser {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.icon-browser__status {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.icon-browser__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-browser__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 96px;
  padding: var(--space-3) var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.icon-browser__tile:hover,
.icon-browser__tile:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.icon-browser__tile.is-copied {
  border-color: var(--color-success);
  background-color: var(--color-success-soft);
}

.icon-browser__name {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-browser__more {
  align-self: center;
}

/* Motion page: a stage where the demo box replays each animation. */
.motion-stage {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: var(--border-width-1) dashed var(--color-border);
  border-radius: var(--radius-xl);
}

.motion-box {
  display: grid;
  place-items: center;
  width: 160px;
  height: 96px;
  border-radius: var(--radius-xl);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-md);
}

/* Virtual list demo: the head and each row share three columns. */
.vl-demo__row {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 64px;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* modules/dashboard.css */
/* Dashboard pages layout. Figma: 2. Dashboard [8113:124026], 4. Notification page [7947:117413]. */
.dashboard-split {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1440px) {
  /* Booking Overview 1034px, Platform Usage 502px. */
  .dashboard-split {
    grid-template-columns: minmax(0, 1034fr) minmax(0, 502fr);
  }
}

/* Notification details cell. */
.notice {
  display: flex;
  align-items: stretch;
  gap: var(--gutter);
  min-width: 0;
}

.notice__icon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-2xl);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.notice.is-unread .notice__icon::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: -8px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.notice__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.notice__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.notice__title {
  color: var(--color-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xl);
}

.notice__message {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  white-space: normal;
}

.notice__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.notice__link:hover {
  color: var(--color-primary-strong);
}

@media (max-width: 767.98px) {
  .notice {
    gap: var(--space-4);
  }

  .notice__icon {
    align-self: flex-start;
    padding: var(--space-3);
  }

  .notice__icon hd-icon {
    --icon-size: 32px;
  }

  .notice__title {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .notice__message {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .notice__content {
    display: contents;
  }

  .notice {
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-3);
  }

  .notice__text {
    flex: 1;
    min-width: 0;
  }

  .notice__link {
    flex-basis: 100%;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .notice__icon hd-icon {
    --icon-size: 24px;
  }

  .notice.is-unread .notice__icon::after {
    inset-inline-end: 0;
  }

  /* Figma mobile Notification page: a divided list, not label cards; time and delete share a row. */
  [data-module='notifications'] #notifications-table .data-table {
    padding: 0;
  }

  [data-module='notifications'] #notifications-table .table tbody {
    gap: 0;
    padding-top: 0;
  }

  [data-module='notifications'] #notifications-table .table tbody tr {
    align-items: center;
    border: 0;
    border-bottom: var(--border-width-1) solid var(--color-border);
    border-radius: 0;
  }

  [data-module='notifications'] #notifications-table .table tbody tr td:not(:first-child) {
    padding-top: 0;
    border-top: 0;
  }

  [data-module='notifications'] #notifications-table .table td:nth-child(2) {
    color: var(--color-text-muted);
  }

  [data-module='notifications'] #notifications-table [data-table-footer] {
    padding: 0 var(--space-6) var(--space-4);
  }
}

/* modules/property.css */
/*
 * Property Management. Figma: Property Type, Property Manage (list, Add Property, Property Details),
 * Facilities & Amenities, Property Rules, Registration Fields.
 */

/* ---------- Property type cards [7920:110548] ---------- */
.type-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

.type-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.type-card__icon {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.type-card__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.type-card .badge {
  min-height: 0;
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.type-card .choice-group {
  gap: var(--space-2);
}

.type-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width-1) solid var(--color-border);
}

.type-card__count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

/* Figma mobile (Property Type, Property Rules): the icon shares a row with the 16px title;
   rule cards sit in one white panel. */
@media (max-width: 767.98px) {
  .type-grid {
    gap: var(--space-6);
  }

  #rule-grid {
    padding: var(--space-4);
    border: var(--border-width-1) solid var(--color-border);
    border-radius: var(--radius-2xl);
    background-color: var(--color-surface);
  }

  .type-card,
  .rule-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4) var(--space-3);
    padding: var(--space-4);
  }

  .type-card > :not(.type-card__icon, .type-card__name),
  .rule-card > :not(.rule-card__icon, .rule-card__text) {
    grid-column: 1 / -1;
  }

  .type-card__icon {
    padding: var(--space-3);
  }

  .type-card__icon img {
    width: 24px;
    height: 24px;
  }

  .type-card__icon hd-icon {
    --icon-size: 24px;
  }

  .type-card__name,
  .rule-card__title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .type-card .badge {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .type-card__foot .btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .type-card__count {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .rule-card__text {
    display: contents;
  }

  .rule-card__description {
    grid-column: 1 / -1;
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width-1) solid var(--color-border);
  }
}

/* Grey panel inside a form (Configure Tax, Add New Tax, Dropdown Option). */
.form-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.form-panel--white {
  border: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-surface);
}

.form-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.form-panel__head p {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-xs);
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.form-row > .field {
  flex: 1;
  min-width: 160px;
}

/* ---------- Property list ---------- */
.type-chip {
  display: inline-flex;
  white-space: nowrap;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

/* ---------- Add Property [7897:102454] ---------- */
.wizard-layout {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .wizard-layout {
    padding: var(--gutter);
  }
}

@media (min-width: 1280px) {
  .wizard-layout {
    grid-template-columns: 369px minmax(0, 1fr);
  }
}

.wizard-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
}

.wizard-layout__aside-title {
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border);
  color: var(--color-text-muted);
}

.wizard-layout__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border-top: var(--border-width-2) solid var(--color-border);
  background-color: var(--color-surface);
}

@media (min-width: 768px) {
  .wizard-layout__actions {
    padding: var(--space-6) var(--gutter);
  }
}

.detail-page__title-row .page-header__title {
  flex: 1;
}

.detail-page__step {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.static-map {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.static-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.static-map__pin {
  position: absolute;
  top: 55%;
  left: 23%;
  width: 47px;
  height: 68px;
  transform: translate(-50%, -100%);
}

.static-map__coords {
  position: absolute;
  inset-inline-end: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

/* Facility picker: category list on the left, options on the right [7908:103163]. */
.facility-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--border-width-1) solid var(--color-border);
}

@media (min-width: 1024px) {
  .facility-picker {
    grid-template-columns: 210px minmax(0, 1fr);
  }
}

.facility-picker__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border-inline-end: var(--border-width-1) solid var(--color-border);
}

.facility-picker__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  text-align: start;
  cursor: pointer;
}

.facility-picker__tab hd-icon {
  padding: 2px;
  border-radius: var(--radius-md);
}

.facility-picker__tab[aria-selected='true'] {
  background-color: var(--color-primary-soft);
}

.facility-picker__tab[aria-selected='true'] hd-icon {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.facility-picker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}

.facility-picker__title {
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

/* Yes / No and single / multiple answer questions (Property Rules step). */
.question {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 0;
}

.question__text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.question .choice-group {
  gap: var(--space-4);
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.choice-list .choice {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.split-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
}

.split-row + .split-row {
  border-top: var(--border-width-1) solid var(--color-border);
}

.split-row__value {
  text-align: end;
}

.split-row__value strong {
  display: block;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.split-row__value small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

.split-row .control {
  width: 210px;
}

/* ---------- Property details [8358:141429] ---------- */
.property-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.property-hero__image {
  flex-shrink: 0;
  width: 144px;
  height: 120px;
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
  object-fit: cover;
}

.property-hero__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 240px;
}

.property-hero__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.property-hero__place {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.property-hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width-1) solid var(--color-border);
}

.property-hero__id {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Full-width tab bar between the white head and the grey body. */
.page-tabs {
  background-color: var(--color-surface);
}

.page-tabs .tabs {
  padding-inline: var(--space-4);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-text-muted);
}

.prose h3 {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline-start: var(--space-4);
  list-style: disc;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.bullet-rows li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.bullet-rows li > span:first-child {
  color: var(--color-text-muted);
}

.bullet-rows li > span:first-child::before {
  content: '•';
  margin-inline-end: var(--space-2);
}

.bullet-rows strong {
  text-align: end;
}

.pill-note {
  align-self: flex-start;
  white-space: normal;
}

.fact-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.fact-grid dt {
  color: var(--color-text-muted);
}

.fact-grid dd {
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.media-toolbar {
  display: flex;
  justify-content: flex-end;
}

/* Facility groups (details tab + Facilities & Amenities page). */
.facility-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-muted);
}

.facility-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.facility-group__icon {
  display: inline-flex;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.facility-group__count {
  padding: 2px var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-xs);
}

.facility-group__actions {
  display: flex;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.facility-group__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.facility-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  text-align: start;
}

.facility-pill > hd-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.facility-pill--check > hd-icon {
  color: var(--color-success);
}

.facility-pill span {
  flex: 1;
}

.facility-pill.is-inactive {
  background-color: var(--color-border);
  color: var(--color-text-muted);
}

.facility-pill.is-inactive > hd-icon {
  color: var(--color-text-muted);
}

button.facility-pill {
  cursor: pointer;
}

button.facility-pill:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* Check-in / check-out tiles. */
.time-tiles {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.time-tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-success-soft);
}

.time-tile__icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-success);
  color: var(--color-text-inverse);
}

.time-tile--out {
  background-color: var(--color-error-soft);
}

.time-tile--out .time-tile__icon {
  background-color: var(--color-error);
}

.time-tile p {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.time-tile strong {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

/* Collapsible policy row (details Property Rules tab). */
.policy {
  overflow: hidden;
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.policy__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  text-align: start;
  cursor: pointer;
}

.policy__head[aria-expanded='true'] {
  background-color: var(--color-surface-muted);
}

.policy__icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.policy__text {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.policy__text small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

.policy__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

/* Location tab. */
.location-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1280px) {
  .location-grid {
    grid-template-columns: minmax(0, 877fr) minmax(0, 611fr);
  }
}

.location-grid .static-map {
  min-height: 320px;
}

.address-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.address-panel dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.address-panel dt {
  color: var(--color-text-muted);
}

.address-panel dd {
  font-weight: var(--font-weight-medium);
}

.address-panel .btn {
  align-self: flex-start;
}

.nearby-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.nearby {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
}

.nearby__icon {
  display: inline-flex;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.nearby__text {
  flex: 1;
  font-weight: var(--font-weight-medium);
}

.nearby__text small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.nearby__distance {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* Media tab groups. */
.media-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.media-group__title {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
}

.file-icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-error-soft);
  color: var(--color-error);
}

.file-icon--jpg {
  background-color: var(--color-info-soft);
  color: var(--color-info);
}

@media (max-width: 767.98px) {
  .property-hero {
    padding: var(--space-4);
  }

  /* Figma mobile: photo left of the name / chips / place; ID and rating on a divided row below. */
  .property-hero {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    gap: var(--space-4);
  }

  .property-hero__image {
    width: 126px;
    height: 96px;
  }

  .property-hero__text {
    display: contents;
  }

  .property-hero__meta {
    grid-column: 1 / -1;
  }

  .property-hero__name {
    gap: var(--space-2);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .property-hero__place {
    margin-top: var(--space-2);
  }

  .prose {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
  }

  .prose h3 {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
  }

  .panel-title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .split-row .control {
    width: 100%;
  }
}

/* Add Property wizard wraps head, steps and actions in one form. */
.wizard-form {
  display: contents;
}

.wizard-layout__main,
.room-list {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  min-width: 0;
}

.add-property__map {
  height: 300px;
}

.room-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.room-list:empty {
  display: none;
}

.split-row__wrap {
  flex: 1;
}

/* Facilities & Amenities page. */
.facility-toolbar {
  max-width: 450px;
}

.facility-pill__status {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.facility-group__head h2 {
  font-size: inherit;
  line-height: inherit;
}

.facility-group__grid button.facility-pill {
  width: 100%;
}

/* Figma mobile Facilities & Amenities: icon + name / count, three 40px icon buttons, roomy rows. */
@media (max-width: 767.98px) {
  .facility-group {
    padding: 0;
    gap: 0;
    border: var(--border-width-1) solid var(--color-border);
  }

  .facility-group__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-4);
    border-bottom: var(--border-width-1) solid var(--color-border);
  }

  .facility-group__icon {
    grid-row: span 2;
    padding: var(--space-2);
    border: var(--border-width-1) solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .facility-group__head h2 {
    align-self: end;
  }

  .facility-group__count {
    grid-column: 2;
    justify-self: start;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-muted);
  }

  .facility-group__head .badge {
    grid-column: 2;
    justify-self: start;
  }

  .facility-group__actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    gap: var(--space-3);
  }

  .facility-group__actions .btn,
  .facility-group__actions .icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .facility-group__actions .btn {
    border-color: var(--color-border-emphasis);
    background-color: var(--color-surface-inverse);
    color: var(--color-text-inverse);
  }

  .facility-group__actions .icon-btn--danger {
    border-color: var(--color-error);
    color: var(--color-error);
  }

  .facility-group__grid {
    padding: var(--space-4);
  }

  .facility-group > .state__message {
    padding: var(--space-4);
  }

  .facility-pill {
    gap: var(--space-3);
    min-height: 56px;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
}

.facility-group.is-inactive .facility-group__icon {
  color: var(--color-text-muted);
}

[data-question-list] {
  padding: 0;
  list-style: none;
}

[data-question] .form-row .icon-btn {
  margin-bottom: 6px;
}

/* Below 1024px the setup progress card (components/stepper.css) replaces the step list. */
@media (max-width: 1023.98px) {
  .wizard-layout__aside {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .wizard-form .card__subtitle {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
}

/* modules/content.css */
/*
 * Events & Content. Figma: Event Manage, Event Inquiries, Help & Support FAQs, Manage Homepage,
 * About Page, Blogs, Blog Categories, Legal Policies.
 */

/* ---------- Events [7768:86975] ---------- */
.event-cell__text {
  display: -webkit-box;
  max-width: 460px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* Figma mobile event card: photo beside title + date, then a 2-line description under both. */
@media (max-width: 767.98px) {
  #events-table .media-cell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-1);
  }

  #events-table .media-cell__image {
    grid-row: span 2;
  }

  #events-table .media-cell__text {
    display: contents;
  }

  #events-table .media-cell__title {
    align-self: end;
  }

  #events-table .event-cell__text {
    grid-column: 1 / -1;
    margin-top: var(--space-3);
    -webkit-line-clamp: 2;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
}

/* Figma mobile blog card: number + status, then photo beside the title. */
@media (max-width: 767.98px) {
  #blogs-table .table tbody tr {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #blogs-table .table tbody td[data-key='title'],
  #blogs-table .table tbody td[data-key='title'] * {
    white-space: normal;
  }

  #blogs-table .table tbody td[data-key='actions'] {
    justify-content: flex-end;
  }
}

/* Key features list in the event form. */
.feature-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.feature-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.feature-list__item {
  background-color: var(--color-surface);
}

/* Badge and date side by side under a modal title. */
.modal__heading:has(.modal__meta) {
  flex-flow: row wrap;
  align-items: center;
}

.modal__heading:has(.modal__meta) .modal__title {
  flex-basis: 100%;
}

.modal__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.event-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.event-view__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.event-view__text {
  margin-top: calc(var(--space-2) * -1);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.event-view__image {
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-xl);
  background-color: var(--color-primary-soft);
  object-fit: cover;
}

.event-view__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.event-view__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.event-view__features hd-icon {
  color: var(--color-primary);
}

/* ---------- Event inquiries [7779:88940] ---------- */
.inquiry-message {
  display: -webkit-box;
  white-space: normal;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.inquiry-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------- Shared content layout ---------- */
.content-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ---------- Help & Support FAQs [7752:82410] ---------- */
.step-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.faq-item__number {
  align-self: flex-start;
  font-weight: var(--font-weight-semibold);
}

.faq-item__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.faq-item__question {
  font-weight: var(--font-weight-medium);
}

.faq-item__answer {
  color: var(--color-text-muted);
}

.faq-item__actions {
  display: flex;
  gap: var(--space-1);
}

/* Figma mobile: full-width tabs and add button; FAQ actions drop under the answer. */
@media (max-width: 767.98px) {
  .content-toolbar > .tabs,
  .content-toolbar > .btn {
    flex: 1 1 100%;
  }

  .faq-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4) var(--space-6);
  }

  .faq-item__actions {
    grid-column: 2;
    gap: var(--space-4);
  }

  .faq-item__actions .icon-btn {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background-color: transparent;
  }
}

/* ---------- Manage Homepage [7846:95499] ---------- */
.facility-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.facility-feature__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.facility-feature__head hd-icon {
  color: var(--color-primary);
}

.facility-feature__head span {
  flex: 1;
}

.review-highlights,
.review-picker {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .review-highlights,
  .review-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.review-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 160px;
  padding: var(--space-6);
  border: var(--border-width-1) dashed var(--color-primary-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-primary-soft);
  font-size: var(--font-size-sm);
  text-align: center;
}

.review-picker {
  margin-top: var(--space-4);
  border: 0;
}

.review-picker__item {
  display: block;
  cursor: pointer;
}

.review-picker__item:has(:checked) .testimonial-card {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* ---------- About Page [7937:44352] ---------- */
.point-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.point-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.point-card__head span:not(.number-chip) {
  flex: 1;
}

.section-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width-1) solid var(--color-border);
}

.section-card__foot .btn--primary {
  margin-inline-start: auto;
}

.section-card__limit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- Blogs [7846:98285] ---------- */

.blog-editor {
  display: flex;
  flex-direction: column;
}

.blog-editor__manage {
  align-self: flex-end;
}

.blog-preview__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.blog-preview__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1620 / 823;
  border-radius: var(--radius-xl);
  background-color: var(--color-primary-soft);
}

.blog-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-preview__size {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.blog-preview__date {
  position: absolute;
  inset-inline-end: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.blog-preview__date strong {
  font-size: var(--font-size-base);
}

.blog-preview__category {
  align-self: flex-start;
  min-height: 0;
  font-size: var(--font-size-xs);
}

.blog-preview__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl);
}

.blog-preview__text {
  margin-top: calc(var(--space-4) * -1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.blog-preview__more {
  align-self: flex-start;
  pointer-events: none;
}

.blog-preview__note {
  margin-top: var(--gutter);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

.blog-meta {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-10);
  padding: var(--space-4);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.blog-meta dt {
  color: var(--color-text-muted);
}

.blog-meta dd {
  font-weight: var(--font-weight-semibold);
}

.blog-article {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.blog-article__image {
  width: 100%;
  border-radius: var(--radius-xl);
  object-fit: cover;
  aspect-ratio: 1620 / 823;
}

.blog-article h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
}

.blog-article ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline-start: var(--space-6);
  list-style: disc;
}

/* ---------- Legal Policies [7846:101983] ---------- */

[data-policy-view='editor'] .page-header__text {
  gap: var(--space-2);
}

[data-policy-view='editor'] .detail-page__back {
  margin-bottom: var(--space-4);
}

.policy-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.policy-sections__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.policy-sections__head h2 {
  font-size: inherit;
}

.policy-section:has(> .section-card__head [aria-expanded='true']) > .section-card__head {
  border-bottom: var(--border-width-1) solid var(--color-border);
  background-color: var(--color-surface);
}

.policy-editor__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding-inline: var(--space-3);
}

/* modules/location.css */
/*
 * Location & Taxes. Figma: Country Manage, City Manage, City Details, Currency Manage,
 * Tax Manage, Cancellation Policy.
 */

/* Round country flag. */
.flag-icon {
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
}

.flag-icon hd-icon {
  --icon-size: 36px;
}

.modal__title .cell-media {
  font-size: var(--font-size-base);
}

/* Numbered tax rows (country taxes). */
.tax-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tax-rows:empty {
  display: none;
}

.tax-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.tax-row__name {
  flex: 1;
  font-weight: var(--font-weight-semibold);
}

.tax-row__type {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.panel-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.panel-label hd-icon {
  padding: 2px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ---------- City Manage [7731:92637] ---------- */
.coordinate {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.note-text {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

/* Full-width multi-pick dropdown (nearby places). */
.dropdown--block {
  display: flex;
}

.dropdown--block > .select__trigger {
  text-align: start;
}

.dropdown__menu--block {
  inset-inline-end: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-2);
}

.dropdown__option {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dropdown__option span:nth-child(2) {
  flex: 1;
}

.dropdown__option:has(:checked) {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}

/* ---------- City Details [8361:148161] ---------- */
.section-card--muted {
  border: 0;
  background-color: var(--color-surface-muted);
}

.section-card--muted > .section-card__body {
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.section-card__icon--plain,
.section-card:has(> .section-card__head [aria-expanded='true']) .section-card__icon--plain {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.place-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.place-row__name {
  flex: 1;
  min-width: 160px;
  font-weight: var(--font-weight-medium);
}

.place-row__coord {
  display: inline-flex;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-xs);
}

.place-row__coord span {
  color: var(--color-text-muted);
}

/* ---------- Cancellation Policy [7731:101356] ---------- */
.section-card__head--muted {
  background-color: var(--color-surface-muted);
}

.tier .icon-btn {
  background-color: var(--color-surface);
}

.rule-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.rule-form__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-sm);
}

.rule-form__head > span:nth-child(2) {
  flex: 1;
}

.rule-form__head .icon-btn {
  background-color: var(--color-surface);
}

.rule-form__preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-info-soft);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.rule-form__preview strong {
  color: var(--color-info);
}

.rule-form__preview-icon {
  display: inline-flex;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background-color: var(--color-info);
  color: var(--color-text-inverse);
}

/* modules/marketing.css */
/* Marketing. Figma: Promo Codes, Banner Manage, Refer & Earn, Notifications. */

/* ---------- Promo Codes [7877:96075] ---------- */
.promo-code {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.promo-code__auto {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.promo-code__auto::before {
  content: '·';
  margin-inline-end: var(--space-2);
}

.modal__title .promo-code {
  display: flex;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.promo-tabs {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);
}

/* Checkbox in a grey card (Active Status, Auto-Apply, First Booking Only). */
.check-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.check-card small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

/* Promo details. */
.kv-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.kv-box > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.kv-box strong {
  font-size: var(--font-size-lg);
}

.promo-stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.promo-stats .kv-box {
  background-color: var(--color-surface);
}

.promo-sections {
  display: grid;
  gap: var(--space-6) var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.promo-sections section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kv-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-sm);
}

.kv-row span {
  color: var(--color-text-muted);
}

.kv-row strong {
  text-align: end;
}

.panel-label--plain hd-icon {
  background: none;
  color: var(--color-text);
}

/* ---------- Banners [7928:108402] ---------- */
.cell-meta-lines {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.link-clamp {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---------- Refer & Earn [7877:94651] ---------- */
.rules-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.rules-banner__icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
}

.rules-banner__text {
  flex: 1;
  min-width: 240px;
}

.rules-banner__text h2 {
  color: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.rules-banner__text p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}

.rules-banner__dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-disabled);
}

.btn.rules-banner__button {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Figma mobile: icon beside "Current Rules", the edit button full width below. */
@media (max-width: 767.98px) {
  .rules-banner__text {
    min-width: 0;
  }

  .rules-banner__text p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  .btn.rules-banner__button {
    flex-basis: 100%;
  }
}

.reward-block {
  border: 0;
}

.reward-block__icon {
  display: inline-flex;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

/* ---------- Notifications [7877:94870] ---------- */
.type-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  cursor: pointer;
}

.type-option__icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.type-option:has(:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.type-option:has(:focus-visible) {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 479.98px) {
  .type-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* modules/people.css */
/*
 * Customers, Staff & Roles. Figma: Customer Manage (All Customers, Details, User Queries,
 * Manual Refunds), Staff & Access, Roles & Permissions.
 */

/* Small icon before secondary text (joined platform). */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.icon-text hd-icon {
  --icon-size: 14px;
}

/* ---------- Customer Details [7877:113807] ---------- */
.customer-top {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1280px) {
  .customer-top {
    grid-template-columns: minmax(0, 502fr) minmax(0, 1034fr);
  }
}

.customer-card__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border);
}

.customer-card__who > div {
  flex: 1;
}

.customer-card__name {
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--font-weight-semibold);
}

.customer-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.customer-card__info li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.customer-card__info hd-icon {
  color: var(--color-text-muted);
}

.customer-card__info small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.customer-card__suspend {
  align-self: center;
  padding-top: var(--space-3);
  border-top: var(--border-width-1) solid var(--color-border);
  width: 100%;
  justify-content: center;
}

.total-spent {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.total-spent small {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.total-spent__icon {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--color-text-inverse) 15%, transparent);
}

.data-scope {
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.data-scope strong {
  color: var(--color-text);
}

.property-cell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Activity & Insights */
.insights-filter {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.insights-filter__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.insights-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1280px) {
  .insights-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.insights-chart .chart-bars {
  height: 240px;
}

.top-properties {
  gap: 0;
}

.top-property {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  font-size: var(--font-size-sm);
}

.top-property + .top-property {
  border-top: var(--border-width-1) solid var(--color-border);
}

.top-property__name {
  flex: 1;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.top-property__name small {
  display: block;
  color: var(--color-primary);
}

/* ---------- User Queries [7877:113447] ---------- */
.query-id {
  display: block;
  margin-top: var(--space-1);
}

.query-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.query-card__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border);
  font-size: var(--font-size-sm);
}

.query-card__who small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.query-card__initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

.query-card__message {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---------- Manual Refunds [8128:251216] ---------- */
.refund-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.refund-person {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.refund-person__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.refund-person__row--line {
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: var(--border-width-1) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.refund-person__name {
  flex: 1;
  font-weight: var(--font-weight-semibold);
}

.refund-person__name small,
.refund-person__meta small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

.refund-person__meta {
  color: var(--color-primary);
  text-align: end;
}

.refund-box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.fact-grid__wide {
  grid-column: 1 / -1;
}

.kv-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
}

.kv-line strong {
  font-weight: var(--font-weight-medium);
  text-align: end;
}

.kv-line--total {
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.kv-line--total strong {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.fact-grid.refund-box {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Staff [7877:106477] ---------- */

.staff-form {
  display: flex;
  flex-direction: column;
}

.staff-personal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 768px) {
  .staff-personal {
    grid-template-columns: 132px minmax(0, 1fr);
  }
}

.photo-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.photo-picker__preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: var(--border-width-2) dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

.photo-picker__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-picker:has(input:focus-visible) .btn {
  outline: var(--border-width-2) solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- Roles & Permissions [7877:105660] ---------- */

.cell-small {
  font-size: var(--font-size-xs);
  white-space: normal;
}

.role-top {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .role-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.role-staff {
  overflow: visible;
}

.staff-search {
  margin-bottom: var(--space-2);
}

.dropdown__option small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

.permissions__count {
  margin-inline-start: auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.permission-table th,
.permission-table td {
  text-align: center;
}

.permission-table th:first-child {
  min-width: 260px;
  text-align: start;
}

.permission-table__head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.permission-table__module {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}

.permission-table__module strong {
  display: block;
  font-size: var(--font-size-sm);
}

.permission-table__module small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.permission-table tbody th {
  background: none;
  color: var(--color-text);
  font-size: inherit;
  font-weight: var(--font-weight-normal);
  letter-spacing: normal;
  text-transform: none;
}

/* modules/reports.css */
/* Reports and Web Settings. Figma: Reports / All Reports (+ 18 report pages), Setting / Web Settings. */

/* ---------- All Reports [12225:81278] ---------- */
.report-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface-muted);
}

.chip-button {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-1) solid var(--color-border-medium);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  cursor: pointer;
}

.chip-button[aria-pressed='true'] {
  border-color: var(--color-border-emphasis);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.report-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.report-group__title {
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.report-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* ---------- Report page [12225:81339] ---------- */
.page-header--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.report-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.report-head__icon {
  display: inline-flex;
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

/* ---------- Web Settings [12229:119801] ---------- */
.settings-images .upload__preview {
  width: min(100%, 220px);
}

.settings-images .upload__image {
  width: 100%;
  height: 140px;
  padding: var(--space-4);
  background-color: var(--color-surface);
  object-fit: contain;
}

/* Figma mobile: group chips scroll in one row; report cards put the icon beside the title. */
@media (max-width: 767.98px) {
  .report-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .report-filter .chip-button {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .report-group__title {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }

  .report-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
  }

  .report-card__link {
    grid-column: 1 / -1;
  }
}

/* Utilities */
/* utilities/display.css */
/*
 * Visually hidden, still read by screen readers. The one copy of this pattern: component parts that
 * hide their text only in some states or at some widths are listed here instead of repeating it.
 *   sidebar__close           until it is focused with the keyboard
 *   header__user-text        name and role under 1024px (the avatar button keeps its name)
 *   detail-page__step        "Step 1 of 8" under 1024px when the ring card shows the step
 *   btn__label               icon-only header and facility actions on phones
 *   sidebar__label           the collapsed icon rail (desktop)
 */
.visually-hidden,
.sidebar__close:not(:focus-visible) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1023.98px) {
  .header__user-text,
  .wizard-form .detail-page__step {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .detail-page__actions .btn__label,
  .facility-group__actions .btn__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (min-width: 1280px) {
  .is-sidebar-collapsed .sidebar__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

.flex {
  display: flex !important;
}

.flex-col {
  flex-direction: column !important;
}

.items-center {
  align-items: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.w-full {
  width: 100% !important;
}

/* utilities/spacing.css */
.gap-1 {
  gap: var(--space-1) !important;
}

.gap-2 {
  gap: var(--space-2) !important;
}

.gap-3 {
  gap: var(--space-3) !important;
}

.gap-4 {
  gap: var(--space-4) !important;
}

.gap-6 {
  gap: var(--space-6) !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

/* utilities/text.css */
/*
 * Text tone utilities: status colours for numbers and short labels (a positive change, an overdue
 * amount). They use the -strong tone tokens, which keep AA contrast on surfaces in both themes.
 * .text-muted and .text-primary live in base/typography.css.
 */
.text-success {
  color: var(--color-success-strong);
}

.text-warning {
  color: var(--color-warning-strong);
}

.text-error {
  color: var(--color-error-strong);
}

.text-info {
  color: var(--color-info-strong);
}

/* utilities/responsive.css */
@media (max-width: 767.98px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .show-mobile {
    display: none !important;
  }
}

@media (max-width: 1279.98px) {
  .hide-below-desktop {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .show-below-desktop {
    display: none !important;
  }
}

/* Wraps a bare checkbox or switch so the 44px tap area (layout/responsive.css) can attach to it. */
.tap-target {
  display: inline-flex;
  cursor: pointer;
}

/* utilities/print.css */
/*
 * Print: only the page content. Navigation, toolbars and buttons are left out, cards do not split
 * across pages, and the content uses the full paper width (booking details, invoices, reports).
 */
@media print {
  .app__sidebar,
  .sidebar,
  .header,
  .footer,
  .skip-link,
  .toast-region,
  .page-header__actions,
  .table__toolbar,
  .pagination,
  .detail-page__back,
  .btn,
  .icon-btn,
  [data-sidebar-overlay] {
    display: none !important;
  }

  body,
  .app,
  .app__content,
  .app__main {
    display: block;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: #ffffff;
  }

  .card,
  .section-card,
  .table tr {
    break-inside: avoid;
    box-shadow: none;
  }

  a {
    text-decoration: none;
  }
}