/* Shared design tokens and employee layouts. Loaded after historical layers. */
:root {
  --color-primary: #174EA6;
  --color-primary-hover: #123F88;
  --color-primary-active: #0E326D;
  --color-on-primary: #FFFFFF;
  --color-primary-soft: #EAF0FB;
  --color-secondary: #334155;
  --color-background: #F6F8FC;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F0F4FA;
  --color-text: #172033;
  --color-text-secondary: #475569;
  --color-border: #CBD5E1;
  --color-control-border: #64748B;
  --color-free: #14532D;
  --color-free-bg: #EAF6EE;
  --color-booked: #8A1C1C;
  --color-booked-bg: #FDEEEE;
  --color-maintenance: #713F12;
  --color-maintenance-bg: #FFF4D6;
  --color-focus: #174EA6;
  --color-disabled-text: #334155;
  --color-disabled-bg: #E2E8F0;
  --font-heading: "Sarabun", "Leelawadee UI", Tahoma, sans-serif;
  --font-body: "Sarabun", "Leelawadee UI", Tahoma, sans-serif;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --text-h2: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --text-h1: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --radius-control: .5rem;
  --radius-card: .75rem;
  --control-min: 3rem;
  --shadow-card: 0 2px 8px #1720330A;
  --duration-fast: 120ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  /* Compatibility aliases for existing PHP templates and CSS. */
  --app-font: var(--font-body);
  --primary: var(--color-primary);
  --primary-2: var(--color-primary-hover);
  --text: var(--color-text);
  --text-primary: var(--color-text);
  --muted: var(--color-text-secondary);
  --danger: var(--color-booked);
  --ui-ink: var(--color-text);
  --ui-muted: var(--color-text-secondary);
  --ui-surface: var(--color-surface);
  --ui-border: var(--color-border);
  --ui-control-border: var(--color-control-border);
  --ui-focus: var(--color-focus);
  --touch-target: 48px;
}

/* Owner check-in action appears above the existing mobile navigation. */
.mobile-checkin-prompt { display: none; }
@media (max-width: 900px) {
  .mobile-checkin-prompt:not([hidden]) {
    display: block; position: fixed; z-index: 90;
    inset-inline: 12px; bottom: calc(var(--checkin-nav-height, 88px) + 12px);
    padding: 14px; border: 2px solid var(--color-primary); border-radius: 16px;
    background: var(--color-surface); color: var(--color-text);
    box-shadow: 0 8px 30px rgba(15, 23, 42, .18);
    max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); overflow-y: auto;
  }
  .mobile-checkin-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .mobile-checkin-heading h2 { margin: 0; font-size: 1rem; }
  .mobile-checkin-heading a { min-height: 44px; display: inline-flex; align-items: center; }
  .mobile-checkin-prompt p { margin: 4px 0 8px; font-size: .875rem; }
  .mobile-checkin-prompt strong { display: block; overflow-wrap: anywhere; }
  .mobile-checkin-prompt form .btn { width: 100%; min-height: 52px; font-size: 1rem; }
  body.has-mobile-checkin .content { padding-bottom: calc(350px + env(safe-area-inset-bottom)); }
  body.nav-lock .mobile-checkin-prompt { display: none; }
}
body { background: var(--color-background); color: var(--color-text); line-height: 1.65; }
html, body, button, input, select, textarea { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.4; }
.page-heading h1, .page-dashboard h1 { font-size: var(--text-h1); }
.employee-dashboard h2, .employee-next-meeting h2 { font-size: var(--text-h2); }
.help, .field-help, .search-time-preview { color: var(--color-text-secondary); }
.btn, .icon-btn, summary { min-height: 48px; }
.btn, .icon-btn { min-width: 48px; }
.input, .select, .textarea { font-size: 1rem; border-radius: var(--radius-control); }
.btn { border-radius: var(--radius-control); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); box-shadow: none; }
.btn-primary:active { background: var(--color-primary-active); }
.btn-muted, .btn-outline { color: var(--color-secondary); background: var(--color-surface); border: 1px solid var(--color-control-border); }
.btn:disabled { color: var(--color-disabled-text); background: var(--color-disabled-bg); opacity: 1; box-shadow: none; }
.btn:hover, .room-card:hover { transform: none; }
.badge.badge-success, .room-availability.is-available, .room-flashcard-status.is-available { color: var(--color-free); background: var(--color-free-bg); }
.badge.badge-danger, .room-availability.is-busy, .room-flashcard-status.is-busy { color: var(--color-booked); background: var(--color-booked-bg); }
.badge.badge-warning, .room-availability.is-restricted, .room-flashcard-status.is-restricted { color: var(--color-maintenance); background: var(--color-maintenance-bg); }
.feature-tags, .meta, .room-card-footer { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag { color: var(--color-secondary); background: var(--color-background); border: 1px solid var(--color-border); white-space: normal; }
.room-card, .availability-search-card, .employee-dashboard .card, .employee-next-meeting { border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-card); }
.content, .room-grid, .room-body, .employee-dashboard, .availability-search-grid > * { min-width: 0; }
.room-card, .employee-booking-list, .employee-next-meeting { overflow-wrap: anywhere; }
.room-media { aspect-ratio: 16 / 9; height: auto; }
.room-media img { width: 100%; height: 100%; object-fit: cover; }
body:is(.page-rooms, [data-page$="-rooms"]) .room-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.employee-dashboard { display: grid; gap: var(--space-lg); }
.employee-dashboard > *, .employee-next-meeting { min-width: 0; margin: 0; }
.employee-dashboard .card, .employee-next-meeting { padding: var(--space-lg); }
.employee-section-heading, .employee-meeting-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.employee-section-heading h2 { margin: 0; }
.employee-meeting-time { font-size: var(--text-lg); font-weight: 600; color: var(--color-primary); font-variant-numeric: tabular-nums; margin-block: var(--space-md); }
.employee-next-meeting h3 { margin-block: var(--space-xs); }
.employee-meeting-actions { justify-content: flex-start; }
.employee-booking-list { list-style: none; padding: 0; margin: var(--space-md) 0 0; }
.employee-booking-list li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding-block: var(--space-md); border-top: 1px solid var(--color-border); }
.employee-booking-list li > div { min-width: 0; }
.employee-booking-list a { color: var(--color-primary); text-decoration: underline; text-underline-offset: .2em; }
.employee-booking-list p { color: var(--color-text-secondary); margin: var(--space-xs) 0 0; font-variant-numeric: tabular-nums; }
.availability-search-grid { grid-template-columns: minmax(0, 1fr); }
.availability-search-grid .full { grid-column: 1 / -1; }
.availability-search-grid .btn { grid-column: 1 / -1; }
.search-time-preview { margin: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.home-dashboard-p0p2 .employee-next-meeting { order: -4; }
.room-availability-label { align-self: flex-start; margin: 0 0 var(--space-sm); }
.employee-tablet-nav { display: none; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px #FFFFFF; }
.sidebar :is(a, button):focus-visible { outline-color: #FFFFFF; }
:is(input, select, textarea, button, a, summary) { scroll-margin-block-start: calc(var(--topbar-height, 80px) + 16px); scroll-margin-block-end: 96px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
}
@media (max-width: 47.99rem) {
  .employee-dashboard .card, .employee-next-meeting { padding: var(--space-md); }
  .employee-section-heading > .btn { width: 100%; }
  .mobile-tabbar { left: 0; right: 0; bottom: 0; border-radius: 0; border: 0; border-top: 1px solid var(--color-border); background: var(--color-surface); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: none; backdrop-filter: none; }
  .mobile-tabbar-item { color: var(--color-text-secondary); font-size: .75rem; line-height: 1.5; }
  .mobile-tabbar-item:is(:hover, :focus-visible, .is-active) { color: var(--color-primary); background: var(--color-primary-soft); }
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .booking-form :is(input, select, textarea, button, a, summary, [tabindex]) { scroll-margin-block-end: 96px; }
  /* A readable day agenda replaces the dense calendar below 48rem. */
  .calendar-view-group [data-calendar-view="month"],
  .calendar-view-group [data-calendar-view="week"] { display: none; }

}
@media (min-width: 48rem) {
  .employee-booking-list li { flex-direction: row; align-items: center; justify-content: space-between; }
  .availability-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:is(.page-rooms, [data-page$="-rooms"]) .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Existing drawer behavior uses 900px; match its boundary to avoid two active navs. */
@media (min-width: 48rem) and (max-width: 900px) {
  .mobile-tabbar { display: none; }
  .employee-tablet-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
  .employee-tablet-nav a { min-height: 48px; display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); color: var(--color-text-secondary); border-radius: var(--radius-control); }
  .employee-tablet-nav a[aria-current="page"] { color: var(--color-primary); background: var(--color-primary-soft); }
  .employee-tablet-nav svg { width: 20px; height: 20px; }
}
@media (min-width: 901px) {
  body:not(.is-login-page) .app-shell:not(.sidebar-collapsed) { --sidebar-width: 224px; }
}
@media (min-width: 75rem) {
  .employee-dashboard { grid-template-columns: minmax(0, 1fr) minmax(16rem, .65fr); }
  .employee-dashboard > .page-heading, .employee-dashboard > .employee-search-panel { grid-column: 1 / -1; }
  .employee-upcoming { grid-column: 1 / -1; }
  .employee-admin-shortcuts { grid-column: 2; grid-row: 2; align-self: start; }
  .employee-next-meeting { grid-column: 1 / -1; }
  .employee-dashboard:has(.employee-admin-shortcuts) > .employee-next-meeting { grid-column: 1; }
  .availability-search-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
  .availability-search-grid .btn { grid-column: auto; }
  .room-search-extra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body:is(.page-rooms, [data-page$="-rooms"]) .room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .badge, .btn, .tag { border: 1px solid CanvasText; }
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
  .mobile-tabbar-item.is-active { border: 2px solid Highlight; }
}

/* Compact home search; scoped so room search and other hero cards retain their layout. */
.home-availability-launcher {
  container-type: inline-size;
  container-name: home-room-search;
  padding: 16px 20px;
  gap: 12px;
  margin-bottom: 0;
  align-content: start;
}
.home-availability-launcher::after { content: none; }
.home-availability-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}
.home-availability-heading .eyebrow {
  padding: 3px 8px;
  font-size: .75rem;
  line-height: 1.5;
}
.home-availability-launcher .home-availability-heading h2 {
  margin: 0;
  font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  line-height: 1.4;
}
.home-availability-heading .help {
  flex-basis: 100%;
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
}
.home-availability-launcher .employee-quick-search {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}
.home-availability-launcher .employee-quick-search label { gap: 4px; font-size: .875rem; }
.home-availability-launcher .employee-quick-search :is(.input, .select) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 8px 10px;
}
.home-availability-launcher .employee-quick-search .btn {
  grid-column: 1 / -1;
  min-height: 48px;
  padding: 8px 16px;
  white-space: normal;
}
.home-availability-launcher .search-time-preview {
  margin: 0;
  line-height: 1.5;
  font-size: .8125rem;
}
/* Viewport fallback for browsers without size container queries. */
@media (min-width: 75rem) {
  .home-availability-launcher .employee-quick-search { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
  .home-availability-launcher .employee-quick-search .btn { grid-column: auto; }
}
@media (max-width: 479px) {
  .home-availability-launcher { padding: 12px; }
}
@media (max-width: 359px) {
  .home-availability-launcher .employee-quick-search { grid-template-columns: minmax(0, 1fr); }
}
@supports (container-type: inline-size) {
  @container home-room-search (max-width: 17rem) {
    .home-availability-launcher .employee-quick-search { grid-template-columns: minmax(0, 1fr); }
    .home-availability-launcher .employee-quick-search .btn { grid-column: 1 / -1; }
  }
  @container home-room-search (min-width: 17rem) and (max-width: 47.999rem) {
    .home-availability-launcher .employee-quick-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-availability-launcher .employee-quick-search .btn { grid-column: 1 / -1; }
  }
  @container home-room-search (min-width: 48rem) {
    .home-availability-launcher .employee-quick-search { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
    .home-availability-launcher .employee-quick-search .btn { grid-column: auto; }
  }
}

.is-login-page .employee-tablet-nav { display: none; }

/* Calm shared header; avoid low-contrast text on legacy gradients. */
.topbar { background: var(--color-surface); color: var(--color-text); box-shadow: none; backdrop-filter: none; border-bottom: 1px solid var(--color-border); }
.topbar .brand-text strong, .topbar .topbar-page-context strong, .topbar .user-chip strong { color: var(--color-text); }
.topbar .brand-text small, .topbar .topbar-page-context small, .topbar .user-chip small { color: var(--color-text-secondary); }
.topbar .top-link, .topbar .icon-btn, .topbar .topbar-tools .btn-outline { background: var(--color-surface); color: var(--color-secondary); border: 1px solid var(--color-control-border); }
.topbar .user-chip { background: var(--color-background); border-color: var(--color-border); }
.topbar .avatar, .topbar .app-version-badge { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-border); }
.employee-dashboard .page-heading { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }

@media (max-width: 47.99rem) {
  .topbar .app-version-badge { display: none; }
  .topbar .brand-text strong { max-width: none; font-size: .875rem; }
}

/* Room identity stripe matches the room color used in the calendar. */
.room-flashcard {
  border-inline-start: 5px solid var(--room-accent, var(--color-primary));
}
.room-flashcard:hover {
  border-inline-start-color: var(--room-accent, var(--color-primary));
}

/* Selected-day details grow naturally; overflow is handled with pagination. */
.booking-calendar-card[data-calendar-view] .booking-calendar-side {
  max-height: none;
  height: auto;
  overflow: visible;
  align-self: start;
}
.booking-calendar-card .calendar-side-list,
.booking-calendar-card .calendar-selected-time-groups {
  max-height: none;
  overflow: visible;
}
.calendar-selected-pagination { display: grid; gap: var(--space-xs); }
.calendar-selected-page-caption { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.calendar-selected-page-controls { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.calendar-selected-page-controls .btn { flex: 1 1 auto; min-height: 48px; white-space: normal; }

/* Homepage meeting details stay below the calendar; the summary stays aside. */
.calendar-below-details {
  margin-block-start: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  scroll-margin-block-start: calc(var(--topbar-height, 80px) + 16px);
  min-width: 0;
}
.calendar-below-details[hidden] { display: none; }
.calendar-below-details .calendar-side-title { margin: 0; }
.calendar-below-details-list { display: grid; gap: var(--space-sm); min-width: 0; }
.calendar-below-details-list .calendar-detail-card { min-width: 0; overflow-wrap: anywhere; }
.calendar-below-details-list .calendar-selected-pagination { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .calendar-below-details-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Typography normalization: bounded overrides replace legacy component sizes.
   !important is restricted to font sizes where historical layers compete. */
:root { --text-caption: .75rem; }
body { font-size: var(--text-base); }
body :is(button, input, select, textarea) { font-family: var(--font-body); }
body .btn { font-size: var(--text-base) !important; line-height: 1.5; }
body .btn.btn-sm { font-size: var(--text-sm) !important; }
body :is(.badge, .tag, .pill, .nav-badge) { font-size: var(--text-sm) !important; line-height: 1.5; }
body :is(.help, .field-help, .field-error, .form-intro, .form-section-description,
  .mini-note, .inline-status, .result-summary, .room-filter-summary,
  .calendar-side-meta, .calendar-side-date, .calendar-period-subtitle,
  .calendar-detail-meta, .calendar-detail-time, .calendar-event-meta,
  .event-list-time, .event-list-meta) { font-size: var(--text-sm) !important; line-height: 1.65; }
body small { font-size: var(--text-sm); line-height: 1.6; }
body :is(.filter-field, .calendar-filter-field) > span { font-size: var(--text-sm) !important; }
body :is(.booking-review-card, .booking-task-card) dt { font-size: var(--text-sm) !important; }
body th { font-size: var(--text-sm) !important; line-height: 1.6; letter-spacing: normal; white-space: normal; }
body td { font-size: var(--text-sm); line-height: 1.65; }
body :is(.mobile-tabbar-item, .nav-label, .booking-stepper .step-name) { font-size: var(--text-sm) !important; line-height: 1.5; }
body .sidebar .nav-group-text strong { font-size: var(--text-sm); }
body .room-flashcard-name { font-size: var(--text-base) !important; line-height: 1.5; }
body :is(.room-flashcard-meta, .room-flashcard-status, .room-flashcard-action) { font-size: var(--text-sm) !important; line-height: 1.5; }
body :is(.room-flashcard-info, .room-flashcard-status, .room-flashcard-action) { overflow-wrap: anywhere; }
body .calendar-room-summary p { font-size: var(--text-sm) !important; line-height: 1.6; }
body :is(.calendar-time-heading, .calendar-month-room, .calendar-month-room-more,
  .calendar-time-preview, .calendar-brief-more, .calendar-day-more,
  .calendar-day-meta, .calendar-weekday, .calendar-day-count) { font-size: var(--text-sm) !important; line-height: 1.5; }
body .calendar-day-number { font-size: var(--text-base) !important; line-height: 1.4; }
body .calendar-day-count { height: auto; min-height: 22px; min-width: 22px; padding: 1px 6px; }
body .calendar-day-head { flex-wrap: wrap; }
body .calendar-grid.calendar-grid-month {
  height: auto;
  grid-template-rows: repeat(var(--calendar-week-count, 6), minmax(5.5rem, auto));
}
body .calendar-grid-month .calendar-day { min-height: 5.5rem; padding: 6px; }
body .calendar-grid-month .calendar-day-list.calendar-day-brief { overflow: visible; gap: 4px; min-height: auto; }
body .calendar-selected-time-groups .calendar-month-room { padding: 5px; }
body .calendar-month-room-name { min-width: 0; }
body .page-footer { font-size: 10px !important; }
body .page-footer :is(p, a, span, .page-footer-privacy) { font-size: 10px !important; line-height: 1.6; }
/* Nonessential chrome may remain smaller; never use it for meeting details. */
body .topbar :is(.brand-text small, .topbar-page-context small, .user-chip small) { font-size: var(--text-caption); }
body :is(.app-version-badge, .sidebar-title-wrap small, .nav-section-label, .eyebrow) { font-size: var(--text-caption) !important; }
body.is-authenticated .topbar-tools .topbar-quick-link .pill {
  font-size: var(--text-sm) !important;
  min-width: 24px;
  min-height: 24px;
  height: auto;
  padding: 1px 4px;
}
body :is(.stat-label, .overview-label, .calendar-status-legend span,
  .room-view-stat span, .room-view-stat strong, .room-view-count,
  .booking-filter-summary strong, .user-chip strong) {
  font-size: var(--text-sm) !important;
  line-height: 1.6;
}
body .booking-stepper button > span:first-child { font-size: var(--text-sm) !important; }
body .sidebar .nav-group-text small { font-size: var(--text-caption) !important; }
body code { font-size: max(var(--text-sm), 1em) !important; overflow-wrap: anywhere; }
.special-request-row { border-top: 1px solid var(--color-border); padding-block: var(--space-md); overflow-wrap: anywhere; }
.special-request-actions { display: grid; gap: var(--space-md); }
.special-request-actions textarea { width: 100%; }
.special-room-page .card, .special-room-settings .card { padding: var(--space-lg); min-width: 0; }
.special-room-settings .terms-check, .special-room-page .terms-check { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.special-room-settings .terms-check input, .special-room-page .terms-check input { min-width: 24px; width: 24px; height: 24px; accent-color: var(--color-primary); }
.special-room-page, .special-room-settings { min-width: 0; overflow-wrap: anywhere; }

/* 1.10.15: show search context and recovery without competing with results. */
body .room-active-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none;
  padding: 0; margin: var(--space-xs) 0 0; min-width: 0;
}
body .room-active-filters li {
  color: var(--color-secondary); background: var(--color-primary-soft);
  border: 1px solid var(--color-border); border-radius: var(--radius-control);
  padding: .375rem .75rem; font-size: var(--text-sm); overflow-wrap: anywhere;
  max-width: 100%; min-width: 0;
}
body .unified-room-result-summary { display: block; }
body .room-filter-empty { text-align: center; padding: var(--space-lg); }
body .room-filter-empty h2 { margin: 0 0 var(--space-xs); font-size: var(--text-h2); }
body .room-filter-empty p { margin: 0 0 var(--space-md); }
body .room-filter-empty .empty-state-actions { margin-top: var(--space-md); }
body .room-filter-empty .btn { white-space: normal; }
body .room-access-note { color: var(--color-maintenance); font-size: var(--text-sm); margin: 0 0 var(--space-xs); }
body .availability-search-editor input { scroll-margin-block: 6rem; }
@media (max-width: 30rem) {
  body .room-filter-empty .btn { width: 100%; }
}
body .room-image-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-xs); height: 100%; min-height: 9rem; padding: var(--space-md);
  color: var(--color-text-secondary); background: var(--color-background); font-size: var(--text-sm);
}
body .room-image-placeholder svg { width: 40px; height: 40px; }
@media (max-width: 900px) {
  .app-shell:not(.nav-open) .sidebar { box-shadow: none; }
}

/* 1.10.18: booking management follows the available content width. */
body .admin-booking-table-card { container-type: inline-size; overflow: visible; }
.booking-results-heading { padding: 1.25rem; border-bottom: 1px solid var(--color-border); }
.booking-results-heading h2, .booking-results-heading p { margin: 0; }
.booking-results-heading p { margin-top: .5rem; }
body .admin-booking-table-card .table-wrap { padding: .25rem; }
.booking-management-table caption { text-align: start; }
.admin-booking-table-card .table-wrap table.booking-management-table { min-width: 90rem; }
.booking-management-table td:nth-child(1) { min-width: 10rem; }
.booking-management-table td:nth-child(2) { min-width: 14rem; }
.booking-management-table td:nth-child(4) { min-width: 10rem; }
.booking-management-table td:nth-child(5), .booking-management-table td:nth-child(6) { min-width: 7rem; }
.booking-cell-label { display: none; }
.admin-booking-table-card .table-wrap td::before { content: none; display: none; }
body .admin-booking-table-card td { white-space: normal; overflow-wrap: anywhere; }
body .admin-booking-actions { min-width: 15rem; }
body .admin-booking-actions > summary { border-color: var(--color-control-border); padding: .75rem; }
body .admin-booking-action-content { padding-top: .5rem; }
body .admin-booking-action-content .btn { min-height: 48px; }
body .admin-delete-disclosure { border: 1px solid #c99494; border-radius: .5rem; padding: .75rem; background: #fff8f8; }
body .admin-delete-disclosure > summary { color: #8a1c1c; padding-block: .5rem; }
.booking-delete-scope { color: #713f12; background: #fff4d6; border-inline-start: 3px solid #a16207; padding: .75rem; margin: 0; line-height: 1.7; }
body .admin-delete-form textarea { min-height: 6rem; resize: vertical; }
body .admin-filter-panel .booking-search-actions { padding-top: .5rem; }
body .admin-booking-filter-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
body .admin-booking-filter-form :is(input, select) { min-width: 0; width: 100%; }
.booking-filter-field { display: grid; gap: .375rem; min-width: 0; }
body .booking-view-tabs a { min-height: 48px; white-space: normal; }
body .booking-task-card :is(h2, dd), body .booking-task-actions .btn { overflow-wrap: anywhere; white-space: normal; }
/* Native dialog remains scrollable with long summaries, zoom or short screens. */
body .confirmation-dialog { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
body .confirmation-dialog-actions .btn { min-width: min(145px, 100%); }
@container (max-width: 90rem) {
  body .admin-booking-table-card .table-wrap { overflow: visible; }
  .admin-booking-table-card .table-wrap table.booking-management-table { display: block; width: 100%; min-width: 0; }
  /* Keep column headers in the accessibility tree; explicit roles preserve semantics. */
  .admin-booking-table-card .table-wrap thead { display: block; position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .admin-booking-table-card .table-wrap tbody { display: grid; gap: 1rem; padding: 1rem; }
  .admin-booking-table-card .table-wrap tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface); overflow: visible; }
  .admin-booking-table-card .table-wrap td { display: block; min-width: 0; width: auto; padding: .75rem 1rem; border: 0; }
  .booking-management-table td:nth-child(2), .booking-management-table td:last-child, .booking-management-table td[colspan] { grid-column: 1 / -1; }
  .booking-management-table .booking-cell-label { display: block; font-weight: 700; color: var(--color-text-secondary); margin-bottom: .25rem; }
  .booking-management-table td:last-child { border-top: 1px solid var(--color-border); }
  body .admin-booking-actions { min-width: 0; }
}
@container (min-width: 60rem) and (max-width: 90rem) {
  .admin-booking-table-card .table-wrap tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@container (max-width: 28rem) {
  .admin-booking-table-card .table-wrap tbody { padding: .5rem; }
  .admin-booking-table-card .table-wrap tbody tr { grid-template-columns: minmax(0, 1fr); }
  .admin-booking-table-card .table-wrap td { grid-column: 1; padding: .625rem .75rem; }
  .admin-booking-action-content :is(.btn, .input, .select, .textarea) { max-width: 100%; }
}
@media (max-width: 30rem) {
  body .admin-filter-panel { padding: 1rem; }
  body .admin-booking-filter-form { grid-template-columns: minmax(0, 1fr); }
  body .admin-filter-panel .booking-search-actions .btn { flex: 1 1 100%; }
}