/* Empty MVC / jQuery unobtrusive validation summary (placeholder ul still present) */
.validation-summary-valid {
  display: none !important;
}

/**
 * Constrain app logos: custom SVGs often have large width/height attributes.
 * Without max-width, sidebar/header logos can overflow the layout.
 */

/* Sidebar (desktop): full + collapsed mini - do NOT set display, Metronic toggles it */
.demo1 .sidebar-header img.default-logo,
.demo1 .sidebar-header img.small-logo {
  max-height: 45px;
  max-width: min(100%, 220px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.demo1.sidebar-collapse .sidebar:not(:hover) .sidebar-header img.small-logo {
  max-width: 56px;
  max-height: 45px;
}

/* Mobile header logo */
/* Mega nav can grow; without shrink-0 the topbar flex item collapses and clips theme/logout */
.demo1 #header_container > div:last-child {
  flex-shrink: 0;
}

.demo1 #header .booking-header-mini-logo,
.demo1 #header .container-fluid > .flex.gap-1 img,
.demo1 #header a.shrink-0 img {
  max-height: 28px;
  width: auto !important;
  max-width: min(100vw, 180px);
  object-fit: contain;
  display: block;
}

/* Top quick nav: compact cluster (no space-between), single-line Arabic, title bold only */
.demo1 #mega_menu.booking-top-quick-nav {
  justify-content: flex-start;
  align-items: center;
}
.demo1 #mega_menu .booking-top-quick-row {
  align-items: center;
  justify-content: flex-start;
}
.demo1 #mega_menu .booking-top-quick-links {
  justify-content: flex-start;
  align-items: center;
}
.demo1 #mega_menu .booking-top-quick-brand,
.demo1 #mega_menu .booking-top-quick-brand span,
.demo1 #mega_menu .booking-top-quick-link {
  white-space: nowrap;
  word-break: keep-all;
}
.demo1 #mega_menu .booking-top-quick-link {
  flex: 0 0 auto;
}
@media (min-width: 1024px) {
  .demo1 #mega_menu .booking-top-quick-link {
    width: auto !important;
  }
  .demo1 #mega_menu .booking-top-quick-links {
    flex-wrap: nowrap !important;
    gap: 0.5rem;
  }
  .demo1 #mega_menu .booking-top-quick-row {
    flex-wrap: nowrap !important;
  }
}

/* Login page */
body:not(.demo1) .card img[src*="default-logo"],
body:not(.demo1) .card img[src*="mini-logo"] {
  max-height: 2.5rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* -------------------------------------------------------------------------- */
/* Navy / slate dark mode — replaces Metronic near-black “coal” surfaces.      */
/* Metronic compiles many dark:coal utilities as hardcoded RGB; override those */
/* and theme tokens so cards, shell, and menus read as dark blue—not pure black. */
/* -------------------------------------------------------------------------- */
html.dark {
  --tw-coal-100: rgb(55 72 102);
  --tw-coal-200: rgb(42 62 94);
  --tw-coal-300: rgb(36 54 82);
  --tw-coal-400: rgb(30 48 75);
  --tw-coal-500: rgb(22 40 68);
  --tw-coal-600: rgb(14 28 52);
  --tw-coal-black: rgb(8 18 38);
  --tw-coal-clarity: rgba(22, 40, 68, 0.5);
  --tw-page-bg-dark: rgb(14 28 52);
  --tw-card-background-color: rgb(28 48 78);
  --tw-table-head-background-color: rgb(24 42 70);
  --tw-card-border: 1px solid rgb(55 72 102);
  --tw-table-border: 1px solid rgb(55 72 102);
  --tw-dropdown-background-color: rgb(22 40 68);
  --tw-popover-background-color: rgb(22 40 68);
  --tw-modal-background-color: rgb(22 40 68);
  --tw-drawer-background-color: rgb(22 40 68);
  --tw-dropdown-border: 1px solid rgb(55 72 102);
  --tw-popover-border: 1px solid rgb(55 72 102);
  --tw-tooltip-background-color: rgb(14 28 52);
  --tw-tooltip-border: 1px solid rgb(55 72 102);
}

/* Hardcoded coal utilities in Metronic bundle (must beat compiled rgb) */
html.dark .dark\:bg-coal-100:is(.dark *) {
  background-color: rgb(55 72 102) !important;
}
html.dark .dark\:bg-coal-500:is(.dark *) {
  background-color: rgb(22 40 68) !important;
}
html.dark .dark\:bg-coal-500\/70:is(.dark *) {
  background-color: rgba(22, 40, 68, 0.7) !important;
}
html.dark .dark\:bg-coal-600:is(.dark *) {
  background-color: rgb(14 28 52) !important;
}
html.dark .dark\:hover\:bg-coal-300:hover:is(.dark *) {
  background-color: rgb(36 54 82) !important;
}
html.dark .dark\:border-coal-100:is(.dark *),
html.dark .dark\:border-b-coal-100:is(.dark *),
html.dark .dark\:border-r-coal-100:is(.dark *) {
  border-color: rgb(55 72 102) !important;
}

html.dark .menu-item.active.dark\:menu-item-active\:\!bg-coal-600:is(.dark *),
html.dark .menu-item.active > .menu-link.dark\:menu-item-active\:\!bg-coal-600:is(.dark *),
html.dark .menu-item.active > .menu-link .dark\:menu-item-active\:\!bg-coal-600:is(.dark *),
html.dark .menu-item.active > .menu-label.dark\:menu-item-active\:\!bg-coal-600:is(.dark *),
html.dark .menu-item.active > .menu-label .dark\:menu-item-active\:\!bg-coal-600:is(.dark *),
html.dark .menu-link:hover.dark\:menu-link-hover\:\!bg-coal-600:is(.dark *),
html.dark .menu-link:hover .dark\:menu-link-hover\:\!bg-coal-600:is(.dark *) {
  background-color: rgb(14 28 52) !important;
}

html.dark .menu-item.active.dark\:menu-item-active\:bg-coal-300:is(.dark *),
html.dark .menu-item.active > .menu-link.dark\:menu-item-active\:bg-coal-300:is(.dark *),
html.dark .menu-item.active > .menu-link .dark\:menu-item-active\:bg-coal-300:is(.dark *),
html.dark .menu-item.active > .menu-label.dark\:menu-item-active\:bg-coal-300:is(.dark *),
html.dark .menu-item.active > .menu-label .dark\:menu-item-active\:bg-coal-300:is(.dark *),
html.dark [data-scrollspy-anchor].active.dark\:scrollspy-active\:bg-coal-300:is(.dark *),
html.dark [data-scrollspy-anchor].active .dark\:scrollspy-active\:bg-coal-300:is(.dark *) {
  background-color: rgb(36 54 82) !important;
}

@media (min-width: 1024px) {
  html.dark .dark\:lg\:border-l-coal-100:is(.dark *) {
    border-left-color: rgb(55 72 102) !important;
  }
  html.dark .dark\:lg\:border-r-coal-100:is(.dark *) {
    border-right-color: rgb(55 72 102) !important;
  }
}

/* Metronic shell: header/main/footer used fixed #f6f6f6 utilities — align with page dark canvas */
html.dark .booking-shell-canvas,
html.dark .booking-shell-wrapper {
  background-color: var(--tw-page-bg-dark, rgb(14 28 52)) !important;
}
html.dark .booking-shell-header,
html.dark .booking-shell-main,
html.dark .booking-shell-footer {
  background-color: var(--tw-page-bg-dark, rgb(14 28 52)) !important;
}
html.dark .booking-shell-footer .text-gray-600,
html.dark .booking-shell-footer .text-gray-500 {
  color: rgb(156 163 175) !important;
}
html.dark .booking-shell-footer a.text-gray-600 {
  color: rgb(186 198 220) !important;
}

/* Main column: light gray text utilities on dark page canvas (skip buttons) */
html.dark #booking_main_inner .text-gray-900:not(.btn):not([class*="btn-"]) {
  color: #f3f4f6 !important;
}
html.dark #booking_main_inner .text-gray-800:not(.btn):not([class*="btn-"]) {
  color: #e5e7eb !important;
}
html.dark #booking_main_inner .text-gray-700:not(.btn):not([class*="btn-"]) {
  color: #d1d5db !important;
}
html.dark #booking_main_inner .text-gray-600:not(.btn):not([class*="btn-"]) {
  color: #9ca3af !important;
}
html.dark #booking_main_inner .text-gray-500:not(.btn):not([class*="btn-"]) {
  color: #9ca3af !important;
}

/* Card footers: btn-light was near-black on dark cards */
html.dark .card .card-footer .btn.btn-light {
  background-color: rgb(55 72 102);
  border-color: rgb(75 92 122);
  color: #e5e7eb;
}
html.dark .card .card-footer .btn.btn-light:hover {
  background-color: rgb(65 82 112);
  color: #f3f4f6;
}

/*
 * Super-admin home KPI strip: ~/assets/css/styles.css is a fixed Tailwind build and does not
 * include arbitrary classes from .cshtml (e.g. h-[150px]). Use real CSS here so layout applies.
 */
.dashboard-sa-kpi-row {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.dashboard-sa-kpi-card {
  height: 150px;
  min-height: 150px;
  box-sizing: border-box;
}
.dashboard-sa-kpi-card > .card-body {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  text-align: center;
}
/* Stat value: bundle often lacks sm:/lg: text-* variants used in Razor */
.dashboard-sa-kpi-card > .card-body > [id^="sa-stat-"] {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .dashboard-sa-kpi-card > .card-body > [id^="sa-stat-"] {
    font-size: 1.875rem;
  }
}
@media (min-width: 1024px) {
  .dashboard-sa-kpi-card > .card-body > [id^="sa-stat-"] {
    font-size: 2.25rem;
  }
}
.dashboard-sa-kpi-card > .card-body > div:not([id^="sa-stat-"]) {
  font-size: 0.875rem;
  line-height: 1.375;
  color: #4b5563;
}
@media (min-width: 640px) {
  .dashboard-sa-kpi-card > .card-body > div:not([id^="sa-stat-"]) {
    font-size: 1rem;
  }
}
html.dark .dashboard-sa-kpi-card > .card-body > div:not([id^="sa-stat-"]) {
  color: #9ca3af;
}
.dashboard-sa-kpi-card #sa-stat-pending {
  color: #d97706;
}
html.dark .dashboard-sa-kpi-card #sa-stat-pending {
  color: #fbbf24;
}
.dashboard-sa-kpi-card #sa-stat-approved-month {
  color: var(--tw-success, #198754);
}
html.dark .dashboard-sa-kpi-card #sa-stat-buildings,
html.dark .dashboard-sa-kpi-card #sa-stat-rooms,
html.dark .dashboard-sa-kpi-card #sa-stat-floors,
html.dark .dashboard-sa-kpi-card #sa-stat-departments {
  color: #f3f4f6;
}

/* Gate desk: SweetAlert “doors opening” animation (entry success) */
.gate-door-swal {
  position: relative;
  width: 88px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, #eaf2fb 0%, #dbeafe 100%);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(43, 124, 211, 0.35);
}
html.dark .gate-door-swal {
  background: linear-gradient(180deg, #1e3a5f 0%, #172554 100%);
  box-shadow: inset 0 0 0 2px rgba(91, 163, 235, 0.4);
}
.gate-door-swal .gate-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(180deg, #2B7CD3 0%, #246CAD 100%);
  opacity: 0.92;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.gate-door-swal .gate-door-l {
  left: 0;
  transform-origin: left center;
  animation: booking-gate-door-l 1.1s ease-in-out infinite;
}
.gate-door-swal .gate-door-r {
  right: 0;
  transform-origin: right center;
  animation: booking-gate-door-r 1.1s ease-in-out infinite;
}
@keyframes booking-gate-door-l {
  0%,
  100% {
    transform: translateX(0) scaleX(1);
  }
  45%,
  55% {
    transform: translateX(-14px) scaleX(0.88);
  }
}
@keyframes booking-gate-door-r {
  0%,
  100% {
    transform: translateX(0) scaleX(1);
  }
  45%,
  55% {
    transform: translateX(14px) scaleX(0.88);
  }
}
.swal2-popup.gate-swal-popup {
  padding-bottom: 1.25rem;
}

/* Above Metronic KTDrawer / gate walk-in panel (z-[100050]). */
.swal2-container.gate-swal-above-drawer {
  z-index: 100060 !important;
}

/* Gate walk-in: Metronic KTDrawer (see data-drawer-class on #gate-walkin-modal). */
/*
 * First paint happens before KTDrawer merges data-drawer-class onto the node, so .drawer is missing briefly.
 * Without this, the panel sits in normal flow / full width and then “slides” away when JS runs — visible flash on refresh.
 */
#gate-walkin-modal.gate-walkin-drawer:not(.drawer),
#front-desk-register-drawer.gate-walkin-drawer:not(.drawer) {
  position: fixed !important;
  top: 0;
  bottom: 0;
  width: min(calc(100vw - 0.75rem), 40rem) !important;
  max-width: min(calc(100vw - 0.75rem), 40rem) !important;
  max-height: 100dvh !important;
  box-sizing: border-box !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
[dir='ltr'] #gate-walkin-modal.gate-walkin-drawer:not(.drawer),
[dir='ltr'] #front-desk-register-drawer.gate-walkin-drawer:not(.drawer) {
  right: 0;
  left: auto;
  transform: translateX(110%) !important;
}
[dir='rtl'] #gate-walkin-modal.gate-walkin-drawer:not(.drawer),
[dir='rtl'] #front-desk-register-drawer.gate-walkin-drawer:not(.drawer) {
  left: 0;
  right: auto;
  transform: translateX(-110%) !important;
}
/* This bundle’s styles.css defines .drawer-end.open but not the closed translate baseline; match KT expectations. */
#gate-walkin-modal.drawer.drawer-end:not(.open),
#front-desk-register-drawer.drawer.drawer-end:not(.open) {
  transform: translateX(100%);
}
[dir='rtl'] #gate-walkin-modal.drawer.drawer-end:not(.open),
[dir='rtl'] #front-desk-register-drawer.drawer.drawer-end:not(.open) {
  transform: translateX(-100%);
}
/* KTDrawer + w-full was expanding past the viewport; cap width and box sizing. */
#gate-walkin-modal.gate-walkin-drawer.drawer,
#front-desk-register-drawer.gate-walkin-drawer.drawer {
  width: min(calc(100vw - 0.75rem), 40rem) !important;
  max-width: min(calc(100vw - 0.75rem), 40rem) !important;
  box-sizing: border-box !important;
}
#gate-walkin-modal .gate-walkin-drawer-inner,
#front-desk-register-drawer .gate-walkin-drawer-inner {
  min-width: 0;
  max-width: 100%;
}

/* Native <select> (no Select2): use class="input w-full" on admin/booking pages for parity with text inputs and Select2-themed fields.
   class="select w-full" remains for gate/kiosk/workforce flows where a distinct control density is intentional. */

/* Select2: match Metronic .input (moved from _BookingRoomSelect2Styles for single source; pages still include partial for select2.min.css CDN). */
.booking-room-select2-wrap .select2-container {
  width: 100% !important;
}
.booking-room-select2-wrap .select2-container--default .select2-selection--single {
  min-height: 2.5rem;
  border: 1px solid var(--tw-gray-300, #d1d5db);
  border-radius: 0.375rem;
  background-color: #fff;
  font-size: 0.875rem;
}
.booking-room-select2-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2.4rem;
  padding-inline-start: 0.75rem;
  padding-inline-end: 1.75rem;
  font-size: 0.875rem;
  color: rgb(17 24 39);
}
.booking-room-select2-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
  font-size: 0.875rem;
  color: rgb(107 114 128);
}
.booking-room-select2-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.4rem;
}
.dark .booking-room-select2-wrap .select2-container--default .select2-selection--single {
  background-color: rgb(31 41 55 / 0.5);
  border-color: rgb(75 85 99);
  color: #e5e7eb;
}
.dark .booking-room-select2-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e5e7eb;
}
.dark .booking-room-select2-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: rgb(156 163 175);
}
.select2-container .select2-dropdown {
  border: 1px solid var(--tw-gray-300, #d1d5db);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgb(15 23 42 / 0.08);
}
.select2-container .select2-search--dropdown {
  padding: 0.5rem;
  border-bottom: 1px solid var(--tw-gray-200, #e5e7eb);
  background-color: #fff;
}
.select2-container .select2-search--dropdown .select2-search__field {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tw-gray-300, #d1d5db);
  border-radius: 0.375rem;
  background-color: var(--tw-light-active, #fff);
  color: var(--tw-gray-700, rgb(55 65 81));
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.select2-container .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--tw-primary, #2b7cd3);
  box-shadow: var(--tw-input-focus-box-shadow, 0 0 0 3px rgba(43, 124, 211, 0.15));
  outline: none;
}
.select2-container .select2-results__option {
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.5rem 0.75rem;
}
.dark .select2-container .select2-dropdown {
  background-color: rgb(17 24 39);
  border-color: rgb(75 85 99);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}
.dark .select2-container .select2-search--dropdown {
  background-color: rgb(17 24 39);
  border-bottom-color: rgb(55 65 81);
}
.dark .select2-container .select2-search--dropdown .select2-search__field {
  background-color: rgb(31 41 55 / 0.5);
  border-color: rgb(75 85 99);
  color: #e5e7eb;
}
.dark .select2-container .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--tw-primary, #2b7cd3);
  box-shadow: var(--tw-input-focus-box-shadow, 0 0 0 3px rgba(43, 124, 211, 0.2));
}
.dark .select2-container .select2-results__option {
  color: #e5e7eb;
}
.booking-room-select2-wrap .select2-container--default.select2-container--open .select2-selection--single,
.booking-room-select2-wrap .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--tw-primary, #2b7cd3);
  box-shadow: var(--tw-input-focus-box-shadow, 0 0 0 3px rgba(43, 124, 211, 0.15));
  outline: none;
}
.select2-container--open .select2-dropdown {
  z-index: 9999;
}

/*
 * Form footer action rows (Buildings + reuse elsewhere).
 * - Theme styles.css defines almost no standalone .btn-lg sizing (only .btn-lg.btn-icon etc.), so we set real lg metrics here.
 * - form-buttons.css uses [dir="rtl"] .form-actions { justify-content: flex-end }, which pins shrink-wrapped rows to the physical LEFT in RTL.
 *   We reset that when this row is the direct child, and make the row width:100% + flex-start so actions sit on the inline-start edge (right in RTL).
 * Alias: use class bk-form-actions-row on any page for the same behavior (pair with .form-actions parent).
 */
.form-actions:has(> .bld-building-form-actions),
.form-actions:has(> .bk-form-actions-row) {
  width: 100%;
  /* Wins over form-buttons.css [dir="rtl"] .form-actions { justify-content: flex-end } */
  justify-content: flex-start !important;
}

.bld-building-form-actions,
.bk-form-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  justify-content: flex-start; /* inline-start: LTR left, RTL right */
  box-sizing: border-box;
}

/* Metronic bundle lacks plain .btn-lg height/padding — fixed 40px row, normal weight */
.bld-building-form-actions > .btn-lg,
.bk-form-actions-row > .btn-lg {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding-block: 0;
  padding-inline: 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25;
  gap: 0.375rem;
  justify-content: center;
  text-align: center;
}
.bld-building-form-actions > .btn-lg > i,
.bk-form-actions-row > .btn-lg > i {
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.bld-building-form-actions .bld-building-primary-action-wide,
.bk-form-actions-row .bld-building-primary-action-wide {
  min-width: 14rem;
}

/* ---------------------------------------------------------------------------
 * Responsive shell (phones / tablets)
 * ----------------------------------------------------------------------------
 * Nested flex/grid items default to min-width:auto which can widen the whole
 * page past the viewport. Constrain width on the shell chain and hide only
 * overflow-x at the MAIN scroll viewport so horizontal pan is reserved for
 * .table-responsive and similar regions.
 */
.demo1 .booking-shell-canvas {
  min-width: 0;
}

/* Keep the fixed sidebar on the correct physical edge for each direction. */
[dir='ltr'] body.demo1 .sidebar.fixed,
[dir='ltr'] body.demo1 #sidebar.sidebar {
  left: 0;
  right: auto;
}

[dir='rtl'] body.demo1 .sidebar.fixed,
[dir='rtl'] body.demo1 #sidebar.sidebar {
  right: 0;
  left: auto;
}

.demo1 .booking-shell-wrapper.wrapper {
  min-width: 0;
}

.demo1 main.booking-shell-main#content {
  min-width: 0;
  overflow-x: clip;
}

.demo1 #booking_main_inner {
  min-width: 0;
}

.demo1 #booking_main_inner > .container-fluid {
  min-width: 0;
}

/* Prefer in-region scrollbars for responsive tables instead of widening body */
.demo1 #booking_main_inner .table-responsive {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Primary page titles: regular weight; keep size/color from markup utilities */
.demo1 #booking_main_inner h1.text-xl,
.demo1 #booking_main_inner h2.text-xl.m-0,
.demo1 .dashboard-home h1.text-lg.text-gray-900 {
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * Mobile shell only — rules are inside max-width media queries so desktop
 * Metronic sidebar offset (padding-right on .wrapper in RTL) is untouched.
 * --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  html:has(body.demo1),
  body.demo1 {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.demo1 {
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
  }

  body.demo1 #booking_shell_mount {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
  }

  body.demo1 .booking-shell-canvas,
  body.demo1 main.booking-shell-main#content {
    width: 100%;
    max-width: 100%;
    padding-inline: 5px;
  }

  body.demo1 #booking_main_inner > .container-fluid {
    padding-inline: 0;
  }

  body.demo1.sidebar-fixed.header-fixed .booking-shell-header.header {
    left: 0 !important;
    right: 0 !important;
  }

  /* Metronic reparents #mega_menu_wrapper to <body>; header slot stays empty */
  body.demo1 #mega_menu_container {
    display: none;
  }

  body.demo1 #header_container {
    flex-wrap: nowrap;
    padding-inline: 0.65rem;
    min-height: auto;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  body.demo1 #header_container > .flex.gap-1.lg\:hidden {
    flex: 0 0 auto;
  }

  body.demo1 #header_container > div:last-child {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  body.demo1 #booking_topbar_user_menu .menu-toggle {
    max-width: min(12rem, 42vw);
  }

  body.demo1 #bookingTopbarUserName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  body.demo1 .booking-shell-main.content {
    padding-top: 0.75rem;
    padding-bottom: 1.5rem;
  }

  body.demo1 .card .table-responsive {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  body.demo1 .dashboard-home .dash-page-head {
    flex-direction: column;
    align-items: stretch !important;
  }

  body.demo1 .dashboard-home .dash-header-filters {
    margin-inline-start: 0;
    width: 100%;
  }

  /* Drawer init can override Tailwind hidden; keep closed drawers off-screen */
  body.demo1 #mega_menu_wrapper.drawer:not(.open),
  body.demo1 #sidebar.drawer:not(.open) {
    display: none !important;
  }
}