.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.CalendarRoomApp {
    font-family: Inter, Roboto, Arial, sans-serif;
    padding: 12px;
  }
  .calendar-app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .calendar-app-body {
    display: flex;
    gap: 12px;
    background-color: #fff !important;
  }
  .left-col {
    width: 260px;
    border: 1px solid #e6e6e6;
    background: #fafafa;
    max-height: 640px;
    overflow: auto;
  }
  .main-col {
    flex: 1 1 auto;
    overflow: auto;
  }

  /* New calendar grid styles */
  .calendar-grid-container { padding: 8px; --day-width: 90px; --row-height: 48px;  overflow: hidden;}
  .calendar-controls { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
  .calendar-controls { display:flex; align-items:center; gap:12px; margin-bottom:8px; justify-content:space-between; }
  .calendar-controls-left { display:flex; align-items:center; gap:0px; }
  .calendar-controls-right { display:flex; align-items:center; gap:8px; position:relative; }
  .calendar-controls-range { font-weight:600; }
  .info-btn { background: transparent; border: 1px solid #e5e7eb; padding:6px; border-radius:6px; cursor:pointer; margin-left:8px; }
  .info-btn svg { display:block; }

  /* legend as dropdown below the info button (right-aligned) */
  /* .legend-panel { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid #e6e6e6; padding:10px; border-radius:6px; border-top-right-radius:0px; box-shadow: 0 6px 18px rgba(16,24,40,0.08); z-index:99999999; font-size:13px; min-width: 180px; } */

  /* temporary selection bar when creating a new booking */
  .booking-bar.creating { background: rgb(36, 114, 151, 0.6); color: #fff; }

  /* popup wrapper uses fixed positioning so it sits above layout and won't expand containers */
  .create-popup { pointer-events: auto; position: fixed; transform: none; left: 0; top: 0; }
  /* allow JS to nudge the arrow using --popup-arrow-offset (px, signed) */
  .create-popup-inner {
    --popup-arrow-offset: 0px;
    pointer-events: auto;
    display: flex;
    gap: 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    position: relative;
    overflow: visible;
    max-width: calc(100vw - 32px);
  }
  /* arrow element inside popup (we position it via inline left/top style or via --popup-arrow-offset) */
  .create-popup-arrow { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 1001; }
  /* default: arrow pointing down (popup below click) - center adjustable */
  .create-popup-inner.below .create-popup-arrow { top: -8px; left: calc(50% + var(--popup-arrow-offset)); transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; box-shadow: 0 -2px 6px rgba(0,0,0,0.04); }
  /* popup above click -> arrow points up (placed at bottom of popup) */
  .create-popup-inner.above .create-popup-arrow { top: auto; bottom: -8px; left: calc(50% + var(--popup-arrow-offset)); transform: translateX(-50%) rotate(180deg); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.04); z-index: 1001; }
  /* popup to the left -> arrow sits on the right edge and should point right (toward the click) */
  .create-popup-inner.left .create-popup-arrow {
    left: auto;
    right: -8px;
    top: calc(50% + var(--popup-arrow-offset));
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #fff; /* triangle pointing right */
    box-shadow: 2px 0 6px rgba(0,0,0,0.04);
  }
  .create-popup-inner.left::before {
    content: '';
    position: absolute;
    right: -10px;
    top: calc(50% + var(--popup-arrow-offset));
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgba(0,0,0,0.04);
    z-index: 1000;
  }
  /* popup to the right -> arrow sits on the left edge and should point left (toward the click) */
  .create-popup-inner.right .create-popup-arrow {
    left: -8px;
    top: calc(50% + var(--popup-arrow-offset));
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fff; /* triangle pointing left */
    box-shadow: -2px 0 6px rgba(0,0,0,0.04);
  }
  .create-popup-inner.right::before {
    content: '';
    position: absolute;
    left: -10px;
    top: calc(50% + var(--popup-arrow-offset));
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgba(0,0,0,0.04);
    z-index: 1000;
  }
  /* fallback pseudo-arrow (kept for older browsers) */
  /* .create-popup-inner::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-width: 8px 8px 0 8px; border-style: solid; border-color: #fff transparent transparent transparent; box-shadow: 0 -2px 6px rgba(0,0,0,0.04); } */
  /* .create-popup-inner::after { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); border-width: 10px 10px 0 10px; border-style: solid; border-color: rgba(0,0,0,0.04) transparent transparent transparent; } */
  /* keep pseudo-arrows but ensure they render below the real arrow element */
  .create-popup-inner.above::before { top: auto; bottom: -8px; transform: translateX(-50%) rotate(180deg); border-width: 0 8px 8px 8px; border-color: transparent transparent #fff transparent; box-shadow: 0 2px 6px rgba(0,0,0,0.04); z-index: 1000; }
  .create-popup-inner.above::after { top: auto; bottom: -10px; transform: translateX(-50%) rotate(180deg); border-width: 0 10px 10px 10px; border-color: transparent transparent rgba(0,0,0,0.04) transparent; z-index: 999; }
  /* ensure inner doesn't clip children */
  .create-popup-inner { overflow: visible; }
  .create-popup-inner button:focus { outline: 2px solid rgba(59,130,246,0.6); outline-offset: 2px; }
  .create-popup-inner button { background:#111827; color:#fff; border:none; padding:6px 10px; border-radius:4px; cursor:pointer; font-weight:600; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
  .create-popup-inner button { font-size: 12px; line-height: 1; }
  .create-popup-inner button.secondary { background:#f3f4f6; color:#111827; border:1px solid #e5e7eb; }
  .legend-row { display:flex; align-items:center; gap:8px; padding:6px 0; }
  .legend-swatch { width:18px; height:12px; display:inline-block; border-radius:3px; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06); }
  .legend-swatch.checkin { background: rgb(36, 114, 151); }
  /* less prominent checkout swatch: muted gray */
  .legend-swatch.checkout { background: #6b7280; }
  .legend-swatch.blocked { background: #7D0A0A; }
  .legend-swatch.reservation { background: rgb(245, 134, 70); }
  .legend-swatch.due_out { background: linear-gradient(90deg, #ef4444, #fca5a5); }
  .legend-swatch.combined { background: #8b5cf6; }

  /* Folio avatar variants by booking/type
     Apply the matching type class on the avatar element, e.g.:
       <div class="folio-avatar checkin">A</div>
     Text and SVG icons inside avatars use white for contrast. */
  /* Solid, consistent avatar colors (from reference palette) so icons read clearly */
  .folio-avatar.checkin { background: rgb(36, 114, 151); color: #ffffff; }
  .folio-avatar.checkout { background: #374151; color: #ffffff; }
  .folio-avatar.reservation { background: rgb(245, 134, 70); color: #ffffff; }
  .folio-avatar.due_out { background: #ef4444; color: #ffffff; }
  .folio-avatar.combined { background: #8b5cf6; color: #ffffff; }
  .folio-avatar.blocked { background: #7D0A0A; color: #ffffff; }

  /* Ensure any SVG or icon inside an avatar inherits the white color */
  .folio-avatar svg { width: 20px; height: 20px; display:block; color: inherit; fill: currentColor; }


  /* The wrapper now handles vertical scrolling for both columns so they move together. */
  .calendar-grid-wrap { display:flex; border-left:1px solid #dee3e7; border-top:1px solid #dee3e7; background-color: #fafafa; align-items: flex-start; /* keep columns top-aligned */
    /* limit height and make wrapper scrollable */
   overflow-y: auto; position: relative; }
   .calendar-grid-wrap { max-height: 70vh;}
  /* room list column should no longer have its own overflow; it will scroll with the wrapper */
  .room-list-col { width:220px; min-width:180px; max-width:320px; border-right:1px solid #f0f0f0; background:#fafafa; }
  /* utility: apply same width constraints as the left room list column
    Use this on elements that should match the room list width (220px default, 180-320 min/max) */
  .match-room-list-width { width:220px; min-width:180px; max-width:320px; }
    /* visually hide scrollbar on room list but keep it scrollable */
    .room-list-col {
      -ms-overflow-style: none; /* IE 10+ */
      scrollbar-width: none; /* Firefox */
    }
    .room-list-col::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .room-list-col .room-row { box-sizing: border-box; height: var(--row-height); line-height: var(--row-height); padding: 0 5px; border-bottom:1px solid #dee3e7; display:flex; align-items:center;  }
  /* Make the room search exactly the same height as a calendar row.
     Use flex alignment and border-box sizing so padding/border don't add
     extra fractional pixels that push the element above `--row-height`. */
  .room-list-col .room-search {
    height: var(--row-height);
    box-sizing: border-box;
    padding: 0 8px; /* horizontal padding only */
    border-bottom:1px solid #dee3e7;
    position: sticky;
    top: 0;
    background: #fafafa;
    z-index: 40;
    display: flex;
    align-items: center;
    box-shadow: 0 6px 16px rgba(16,24,40,0.06);
  }
  .room-list-col .room-search input {
    box-sizing: border-box;
    width: 100%;
    /* make input height fit inside the row (include its padding/border via border-box) */
    height: calc(var(--row-height) - 12px);
    padding: 6px 8px;
    border:1px solid #ddd;
    border-radius:4px;
  }
  .room-list-col .room-row.group { background:#f3f7f9; font-weight:700; }
  .room-list-col .room-row.master { background:#fff; font-weight:600; }

  /* footer wrapper sits at bottom of room-list and has a subtle top shadow */
  .room-list-footer-wrap {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(250,250,250,1));
    box-shadow: 0 -6px 16px rgba(16,24,40,0.06);
    z-index: 90; /* lower than portalized popups (>=1000) so popups render above */
  }
  .room-list-col .room-row.room-footer { box-sizing: border-box; height: var(--row-height); line-height: var(--row-height); padding: 0 10px; border-top:1px solid #e9eef2; border-bottom: none; display:flex; align-items:center; background:#fff; }
  .room-list-col .room-row.room-footer.availability { background:#f3f7f9; }
  .room-list-col .room-row.room-footer.occupancy { background:#f3f7f9; }

  /* create a stacking context for the calendar column so sticky footer/header can be placed above rows
    Note: column no longer scrolls independently; it inherits scrolling from the parent `.calendar-grid-wrap`. */
  .calendar-grid-col { position: relative; flex:1; border-left:1px solid #dee3e7; }
  .calendar-grid-header { display:flex; align-items:center; height: var(--row-height); }
  /* sticky calendar header with matching shadow */
  .calendar-grid-header {
    position: sticky;
    top: 0;
    z-index: 100; /* lowered so popup/backdrop sit above */
    background: #fff; /* ensure it masks content beneath when sticky */
    box-shadow: 0 6px 16px rgba(16,24,40,0.06);
    /* ensure the header stretches the full calendar width */
    width: 100%;
  }
  .grid-date { box-sizing: border-box; width:var(--day-width); padding:6px 8px; text-align:center; border-right:1px solid #f0f0f0;  border-left:1px solid #f0f0f0;   background:#fff; height: var(--row-height); display:flex; align-items:center; justify-content:center; flex-direction:column; }
  .grid-date.weekend { background: #fff8e1; }
  .grid-date .gd-weekday { font-size:11px; color:#6b7280; line-height:1; }
  .grid-date .gd-day { font-size:14px; font-weight:700; line-height:1; margin-top:2px; }
  .grid-date .gd-month { font-size:11px; color:#6b7280; line-height:1; margin-top:2px; }

/* small reservation count badge in header date cell (UI demo only) */
.date-res-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(36, 114, 151);
  color: #fff;
  font-size: 11px;
  border-radius: 999px;
  padding: 0 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  user-select: none;
}

.date-res-count:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(16,24,40,0.12);
}
.date-res-count:active {
  transform: translateY(0);
}
.date-res-count:focus {
  outline: none;
}
.date-res-count:focus-visible {
  box-shadow: 0 6px 12px rgba(16,24,40,0.12), 0 0 0 4px rgba(59,130,246,0.12);
}

  .calendar-grid-body { padding:0; }
  /* allow absolute children in the body to be positioned relative to it
    and clip booking bars so they don't bleed under sticky header/footer
    or across the room-list border. We purposely set overflow on this
    inner body (not on sticky ancestors) so position:sticky continues
    to behave correctly. */
  .calendar-grid-body { position: relative; overflow: hidden; }

  /* absolute-mode popup inside column/row */
  .calendar-grid-col .create-popup { position: absolute; pointer-events: auto; }
  .calendar-grid-col .create-popup .create-popup-inner { transform: translateX(-50%); }
  .grid-row { display:flex; }
  /* Allow overflow so small badge signals positioned near the bar edge remain visible.
    BookingBar.js now clamps bar left/width to avoid large bleeding, so it's safe to
    allow visible overflow here to keep badges readable. */
  .grid-row { display:flex; position:relative; overflow: visible; }
  .grid-cell { box-sizing: border-box; width:var(--day-width); height:var(--row-height); border-right:1px solid #dee3e7; border-left:1px solid #f0f0f0; border-bottom:1px solid #dee3e7; position:relative; overflow:visible; z-index:0; }
  .grid-cell.weekend { background: #fff8e1; }

  /* hovered empty cell highlighting */
  .grid-cell.hovered { background: #fff0f0; }
  /* don't apply the red hover tint to master (parent) rows - keep their original styling */
  .grid-date.hovered, .room-row.hovered:not(.master) { background: #ff5353; color: #fff; }
  .grid-date.hovered .gd-weekday, .grid-date.hovered .gd-month { color: rgba(255,255,255,0.9); }
  .grid-date.hovered .gd-day { color: #fff; }
  .room-row.hovered:not(.master) { box-shadow: inset 0 0 0 9999px rgba(255,83,83,0.12); }
  /* masters keep their own font weight when hovered (don't get the bright overlay) */
  .room-row.hovered.master { font-weight:700; }
  /* when hovering a combined bar, color the master row to match the bar */
  .room-row.hovered-combined-master { background: #8b5cf6 !important; color: #fff; }
  .grid-date.hovered-combined-date { background: #8b5cf6; color: #fff; }
  .grid-date, .room-row { transition: background-color 160ms ease, color 160ms ease; }

  /* blocked selection overlay (red stripes) */
  .selection-blocked-overlay {
    pointer-events: none;
    background-image: repeating-linear-gradient(-45deg, rgba(220,38,38,0.08) 0 6px, rgba(220,38,38,0.18) 6px 12px);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(220,38,38,0.06);
    z-index: 10010; /* ensure overlay sits above booking bars */
  }

  /* small message shown when selection is blocked */
  .selection-blocked-msg {
    z-index: 10020; /* above the striped overlay and booking bars */
    pointer-events: none;
  }

  /* calendar footer wrapper (sticky at bottom) and footer cell styles
     Make this match the room-list footer so both remain visible at the bottom
     of the unified scroll container. */
  .calendar-grid-footer-wrap {
    position: sticky !important;
    bottom: 0;
    z-index: 90; /* lower than portalized popups (>=1000) so popups render above */
    /* match room-list footer visual style */
    background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(250,250,250,1));
    box-shadow: 0 -6px 16px rgba(16,24,40,0.06);
    width: 100%;
  }
  .calendar-grid-footer { background: transparent; z-index: 9999999; position: relative; }
  .calendar-grid-footer .grid-row.footer { display:flex; }
  .calendar-grid-footer .calendar-footer-cell { background: #f3f7f9; box-sizing: border-box; width:var(--day-width); height:var(--row-height); border-right:1px solid #dee3e7; z-index: 90; }
  /* room-type rows (group) adjacent day cells get a slightly different bg */
  .grid-row.group .grid-cell { background: #f3f7f9; }
  /* when a parent/master is expanded, its own day cells should change to white (#fff)
     children remain unchanged */
  .grid-row.parent-expanded .grid-cell { background: #fff; }
  .grid-row.parent-expanded .grid-cell.booked { background: #fffdf6; }
  .grid-row.parent-expanded .grid-cell.covered { background: transparent; }
  /* keep normal grid borders on all cells, including booked/covered ones */
  .grid-cell.booked { background:#fffdf6; }
  .grid-cell.covered { background:transparent; border: none;}

  /* Make booking bars appear as borderless overlays at the top of the row */
  .booking-bar {
    box-sizing: border-box;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
    /* overflow: hidden; */
    white-space: nowrap;
    text-overflow: ellipsis;
   /* compute lane-based height/offset so multiple bars stack vertically without overlap
     lane-index and total-lanes are passed as inline CSS variables from BookingBar; clamp
     visible lanes to reasonable values via CSS (if total-lanes is large, bars will shrink) */
  /* Single-lane layout: fixed bar height and offset from top of row */
    height: calc(var(--row-height) - 12px);
    top: 4px;
    z-index: 40; /* bring above cell borders but below footers/headers */
    transform: translateZ(0); /* create stacking context so it overlays borders cleanly */
    box-shadow: 0 6px 12px rgba(16,24,40,0.08);
    border: none; /* ensure no border lines */
    pointer-events: auto; /* bar should receive drag/click events */
    overflow: visible; /* ensure badges (positioned inside) aren't clipped by bar content */
  }

  /* label inside the booking bar: constrained and ellipsized so long text doesn't hide badges */
    .booking-bar .bar-label {
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      /* leave room on the right for badges + status icon (approx 32px) - reduced so label gets more space */
      max-width: calc(100% - 5px);
      box-sizing: border-box;
      padding-right: 6px;
  }

    /* when creating, ensure the creating label ellipsizes instead of overflowing */
    .booking-bar.creating .bar-label {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
      padding-right: 6px;
    }

  /* per-row overlay that contains booking bars; sits above cells but doesn't block clicks to cells */
  .row-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    pointer-events: none; /* allow underlying cells to receive clicks unless bars handle them */
    /* overflow: hidden; */
  }

  /* no masking; booking bars will sit above cell borders via z-index */

/* Right drawer styles (polished visuals) */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1200; }
.drawer-backdrop { opacity: 0; transition: opacity 240ms cubic-bezier(.2,.9,.2,1); }
.drawer-backdrop.open { opacity: 1; }
.right-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: auto; max-width: 95vw; background: #fff; z-index: 1800; box-shadow: -12px 0 40px rgba(16,24,40,0.12); display:flex; flex-direction:column; transform: translateX(110%); transition: transform 320ms cubic-bezier(.2,.9,.2,1); }
.right-drawer.open { transform: translateX(0); }
.right-drawer-header { display:flex; align-items:center; justify-content:space-between; padding: 0 16px; border-bottom:1px solid #eee; min-height: 56px; }
.drawer-close { background: transparent; border: none; font-size:20px; cursor:pointer; }
.drawer-action { background: #1d4ed8; color: #fff; border: none; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:700; }
.right-drawer-body { overflow:auto; }

/* Ensure buttons inside the drawer header don't stretch to the full header height.
   Some global/vendor .btn rules can make buttons behave like block elements or
   stretch as flex items; scope inline-flex here to keep them compact and centered. */
.right-drawer-header .btn,
.right-drawer-header .btn-outline-secondary {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 8px 10px;
  line-height: 1;
}
.right-drawer-header .drawer-close {
  padding: 6px 8px;
  height: auto;
}
.folio-card { background:#fff; border:1px solid rgba(15,23,42,0.06); padding:16px; border-radius:12px; box-shadow: 0 8px 24px rgba(16,24,40,0.06); }
.folio-row { margin-top:10px; display:flex; gap:12px; }

/* Detailed folio layout */
.folio-grid { display:inline-flex; gap:24px; padding:10px; box-sizing:border-box; }
.folio-main { flex: 1 1 0; min-width: 0; }
.folio-side { width: 380px; max-width: 45%; min-width: 260px; }
.folio-avatar { width:48px; height:48px; border-radius:10px; background:#eef2ff; display:flex; align-items:center; justify-content:center; color:#6b21a8; font-weight:800; font-size:18px; }
.folio-title { font-weight:800; font-size:18px; }
.folio-sub { font-size:13px; color:#6b7280; }
.folio-section .label { font-size:13px; color:#6b7280; margin-bottom:10px; }
.master-card, .billing-card { background:#fff; border:1px solid rgba(15,23,42,0.05); padding:14px; border-radius:10px; box-shadow: 0 8px 24px rgba(16,24,40,0.04); }
.mf-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed #f1f5f9; }
.mf-row:last-child { border-bottom: none; }
.mf-col { color:#6b7280; }
.mf-col.val { font-weight:700; color:#111827; }
.bill-row { display:flex; justify-content:space-between; padding:10px 0; }
.text-danger { color:#dc2626; }

/* Group reservation side (staggered cards with subtle shadow) */
.side-header { font-weight:800; margin-bottom:10px; }
.group-card { background:#fff; border:1px solid rgba(15,23,42,0.06); border-radius:10px; padding:14px; box-shadow: 0 8px 24px rgba(16,24,40,0.06); transform: translateY(6px); opacity: 0; }
.reservation-item { padding:14px; display:block; }
.reservation-item .group-card-header { align-items:flex-start; }
.reservation-item .group-name { font-weight:800; color:#1d4ed8; }
.reservation-item .group-sub { color:#6b7280; margin-top:4px; }
.reservation-item .reservation-meta { font-size:13px; color:#6b7280; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.arrived-badge { background:#eef2ff; color:#1d4ed8; padding:6px 8px; border-radius:8px; font-weight:700; font-size:12px; }

/* two-column layout inside reservation card */
.reservation-item .reservation-left { display:block; }
.reservation-item .res-top { margin-bottom: 6px; width: 100%; }
.reservation-item .res-bottom { padding-top:2px; }
.reservation-item .reservation-right { min-width: 72px; }

/* ensure arrived badge appears visually on the top-right of the card */
.reservation-item { position: relative; }
.reservation-item .arrived-badge { position: absolute; right: 12px; top: 12px; }

/* Status-based visual treatments for modern look */
.reservation-item.checked-in { border: 1px solid rgba(34,197,94,0.18); box-shadow: 0 10px 30px rgba(34,197,94,0.06), inset 0 -6px 20px rgba(34,197,94,0.03); background: linear-gradient(180deg, rgba(245,255,246,0.6), #fff); }
.reservation-item.checked-out { border: 1px solid rgba(239,68,68,0.12); box-shadow: 0 10px 30px rgba(239,68,68,0.04); background: linear-gradient(180deg, rgba(255,244,244,0.6), #fff); }
.reservation-item.blocked { border: 1px solid rgba(250,204,21,0.14); box-shadow: 0 10px 30px rgba(245,158,11,0.05); background: linear-gradient(180deg, rgba(255,249,230,0.6), #fff); }
.reservation-item.reserved { border: 1px solid rgba(99,102,241,0.12); box-shadow: 0 10px 30px rgba(99,102,241,0.04); background: linear-gradient(180deg, rgba(243,242,255,0.6), #fff); }
.reservation-item.unknown { border: 1px solid rgba(15,23,42,0.06); box-shadow: 0 8px 20px rgba(16,24,40,0.04); }

.group-list{
  min-width: 300px;
  padding-top: 10px;
}

/* Ensure cards are visible even if animation state doesn't run immediately */
.group-list .group-card,
.reservation-item {
  opacity: 1 !important;
  transform: none !important;
}

/* stronger default border for unknown state so it reads on white */
.reservation-item.unknown { border: 1px solid rgba(15,23,42,0.12); }


.group-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.pill { background:#f3e8ff; color:#6b21a8; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.group-name { font-weight:700; color:#1d4ed8; }
.group-sub { color:#6b7280; font-size:13px; margin-bottom:6px; }
.group-meta { color:#6b7280; font-size:12px; }

/* custom booking-bar badge backgrounds for VIP and Single Lady */
.bb-bg-vip { background: #f59e0b; color: #fff; }
.bb-vip { color: #fff; }
.bb-bg-lady { background: #be185d; color: #fff; }
.bb-lady { color: #fff; }

/* Layout for left / right columns inside the drawer */
  .left-col { display:flex; flex-direction:column; flex: 0 0 auto; min-width: 180px; max-height: 100vh; }
  .right-col { flex: 0 0 auto; min-width: 220px; max-height: 100vh; overflow-x:hidden; display:flex; flex-direction:column; padding: 0 12px; }
.folio-header { border-bottom: 1px solid #eef2f6; padding-bottom: 10px; }
.action-select { padding:8px 10px; border-radius:6px; border:1px solid #e6e6e6; background:#fff; }

/* Improved dropdown styling for header action-select */
.action-select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%); background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 10px) calc(1em + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.action-select:focus { box-shadow: 0 6px 18px rgba(59,130,246,0.12); outline: none; }

/* tx panel content tweaks (left tx panel removed; styling available on right-col components) */
.right-col input { font-size:14px; }
.right-col .btn-primary { padding:8px 12px; border-radius:8px; }

.info-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px 16px; margin-top:8px; }
.info-row { display:flex; flex-direction:column; }
.info-label { font-size:12px; color:#6b7280; }
.info-val { font-weight:700; color:#111827; }

.billing-card .accordion { margin-top:10px; }
.accordion-toggle { display:inline-block; background:transparent; border:none; color:#1d4ed8; cursor:pointer; padding:6px 0; font-weight:700; }
.accordion-body { margin-top:8px; border-top:1px dashed #f1f5f9; padding-top:8px; }
.bill-item { display:flex; justify-content:space-between; padding:6px 0; color:#374151; }
.bill-desc { color:#6b7280; }
.bill-amt { font-weight:700; }

/* master folio crown spot */
.master-spot { display:flex; align-items:center; gap:8px; color:#f59e0b; }
.group-card.master { border-color: rgba(15,23,42,0.06); box-shadow: 0 8px 24px rgba(16,24,40,0.06); }

.master-card-right { background: linear-gradient(90deg, #fffbeb, #fff); border:1px solid rgba(245,159,11,0.12); padding:12px; border-radius:10px; box-shadow: 0 8px 20px rgba(245,159,11,0.06); }
.master-card-right div { line-height:1; }

/* make the drawer header fixed within the drawer and limit scrolling to group list only */
.right-drawer { --drawer-header-h: 58px; }
.right-drawer .right-drawer-header { position: sticky; top: 0; background: #fff; z-index: 20; height: var(--drawer-header-h); display:flex; align-items:center; padding: 0 16px; }
.right-drawer .right-drawer-body { display: flex; padding: 0; }
.folio-grid { width: 100%; display:flex; }
.left-col { padding-left: 10px; padding-right: 10px; padding-bottom: 10px; }

/* make group-list occupy full viewport height minus header height */
/* .right-col .group-list { max-height: calc(100vh - var(--drawer-header-h));  padding-right:8px; } */
/* .left-col { max-height: calc(100vh - var(--drawer-header-h) - 40px); } */

/* ensure left column and folio-grid maintain a minimum height based on drawer header
  so the left area doesn't collapse when the right drawer opens or when with-tx is applied */

.right-drawer.open .folio-grid,
.right-drawer.with-tx .folio-grid { min-height: calc(100vh - var(--drawer-header-h)); }

/* make the main info area inside left-col scroll while keeping billing pinned */
.left-col .folio-info { overflow:auto; flex: 1 1 auto; }
.left-col .billing-section { margin-top: auto; }

/* Transaction drawer attached to the left of the main folio drawer (Option A)
  The panel is positioned immediately left of the main drawer using right:100%.
  When the main drawer has the `with-tx` class, the main drawer width is reduced
  so both panels sit side-by-side within the viewport. */
/* remove old .tx-drawer rules (we render a fixed sibling panel instead) */
.tx-drawer { display: none; }

/* small icon-only badge used on booking bars to indicate master folio or paid status */
.folio-badge {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.booking-bar .folio-badge { position: absolute; right: 28px; top: 6px; }
.grid-cell .folio-badge { position: absolute; right: 28px; top: 6px; }

/* color tokens via utility classes (used if inline color not provided) */
.badge-gold { color: #f5c542; }
.badge-green { color: #2ecc71; }
.badge-orange { color: #f39c12; }

/* make sure svg badges inherit currentColor and scale nicely */
.folio-badge svg { width: 14px; height: 14px; display: block; color: inherit; }

/* circular small badge placed at the top-right of booking bars (bar badge signal) */
.bar-badge-signal {
  /* let the parent .bar-badges layout badges via flexbox; avoid absolute positioning to prevent overlap */
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px; /* don't shrink */
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff; /* clear white background for clarity */
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  z-index: 600; /* above bar content but below popups */
}
.bar-badge-signal svg { width: 12px; height: 12px; }
/* force SVG icons inside badge signals to be white so backgrounds can carry meaning */
.bar-badge-signal svg { width: 12px; height: 12px; color: #fff; fill: #fff; }
/* wrapper to hold multiple badges aligned top-right */
.bar-badges {
  position: absolute;
  top: -10px;
  left: 0px; /* align group of badges near the right edge but leave small gap */
  display: inline-flex;
  gap: 2px;
  align-items: center;
  z-index: 800 !important;
}

/* make VIP / Single Lady badges override the default white background on .bar-badge-signal */
.bar-badge-signal.bb-bg-vip { background: #f3a010 !important; border-color: rgba(0,0,0,0.06); }
.bar-badge-signal.bb-bg-lady { background: #be185d !important; border-color: rgba(0,0,0,0.06); }

/* icon colors (icon inherits currentColor) */
.bb-gold { color: #f59e0b; } /* warm yellow/amber for crown icon */

/* Legend panel: wider, grid layout with three columns */
.legend-panel {
  position: absolute;
  right: 0px;
  top: 35px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.06);
  /* softer downward shadow so the panel reads as one surface with the arrow */
  box-shadow: 0 15px 26px rgba(2,6,23,0.06);
  padding: 12px;
  border-radius: 6px;
  border-top-right-radius: 0px;
  z-index: 380;
  min-width: 320px;
  max-width: 920px;
}

/* small upward-pointing triangle under the info button when legend is open
   Implemented with two layers: a blurred shadow layer (::before) and the
   crisp foreground triangle (::after). This produces a soft border shadow
   while keeping the triangle's bottom tip sharp (no shadow bleeding onto the panel). */
.legend-arrow {
  position: absolute;
  right: 12px; /* nudge to align visually under the info button */
  top: -8px; /* overlap the panel so the triangle reads as part of it */
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 85;
  
}

/* foreground triangle only — no separate shadow so the arrow feels attached to the panel */
.legend-arrow::after {
  
  content: '';
  position: absolute;
  left: -8px; /* center under the button */
  top: 0; /* sits flush with the panel top (triangle points up into the button area) */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--surface-1, #ffffff);
  /* subtle 1px border along the bottom edge to match panel border and create a crisp seam */
  box-shadow: 0 15px 26px rgba(2,6,23,0.06);

  z-index: 86; /* above the panel */
}

/* make sure the arrow aligns visually when panel shifts slightly */
.legend-panel.open {
  transform-origin: top right;
}

.legend-panel.legend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px 20px;
  align-items: start;
  width: min(840px, 80vw);
}

.legend-col { min-width: 160px; }
.legend-title { font-size: 13px; font-weight:800; margin: 0 0 8px 0; color:#111827; }
.legend-item { display:flex; align-items:center; gap:8px; font-size:13px; color:#475569; padding:4px 0; }
.legend-swatch { width:18px; height:12px; display:inline-block; border-radius:4px; margin-right:8px; vertical-align:middle; }
.legend-icon { display:inline-block; width:18px; height:18px; text-align:center; }

/* Swatches (reuse same classes as booking swatches) */
  /* Legend swatches use the same solid colors as bars/avatars for consistency */
  .legend-swatch.checkin { background: rgb(36, 114, 151); }
  .legend-swatch.checkout { background: #374151; }
  .legend-swatch.reservation { background: rgb(245, 134, 70); }
  .legend-swatch.due_out { background: #ef4444; }
  .legend-swatch.combined { background: #8b5cf6; }

@media (max-width: 720px) {
  .legend-panel { right: 6px; top: 36px; width: calc(100vw - 16px); min-width: auto; }
  .legend-panel.legend-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .legend-panel.legend-grid { grid-template-columns: 1fr; }
}
.bb-green { color: #22c55e; } /* bright green for paid icon */
.bb-red { color: #ef4444; } /* red for unpaid icon */
.bb-group { color: #7c3aed; } /* purple-ish for group badge (matches color bar) */

/* split bill badge (teal) */
.bb-split { color: #0ea5a4; } /* teal-ish */
.bb-bg-split { background: linear-gradient(180deg,#0ea5a4,#0891b2); border-color: rgba(0,0,0,0.06); }

/* gentle/darker background tones for badges (dark gold / dark green / dark red) */
.bb-bg-gold { background: #b06a00; border-color: rgba(0,0,0,0.06); } /* dark-gold tone (opaque) */
.bb-bg-green { background: #065f46; border-color: rgba(0,0,0,0.06); } /* dark-green tone (opaque) */
.bb-bg-red { background: #7f1d1d; border-color: rgba(0,0,0,0.06); } /* dark-red tone (opaque) */
.bb-bg-group { background: linear-gradient(180deg,#6d28d9,#5b21b6); border-color: rgba(0,0,0,0.06); } /* purple gradient for grouped folio */

/* ensure bar-badge-signal keeps white border with tone behind icon */
.bar-badge-signal.bb-bg-gold, .bar-badge-signal.bb-bg-green, .bar-badge-signal.bb-bg-red {
  border: 1px solid rgba(0,0,0,0.04);
}

/* fixed tx panel positioned immediately left of the main drawer without moving it
   The panel visually comes from behind (scale/pop) but does not push/resize the folio drawer. */
/* ensure the main drawer keeps consistent width - allow auto sizing */
.right-drawer { width: auto; }

/* when a non-details mode is active, slightly dim left-col content to indicate overlay */
.left-col.dimmed { filter: brightness(0.98); }

/* small responsive tweak for very small screens */
@media (max-width: 700px) {
  .right-col { width: 100%; }
  .left-col { width: 100%; }
}

/* Slide + fade animation for group cards with small stagger via nth-child */

/* Primary action button group inside billing */
.drawer-primary-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn-primary { background: linear-gradient(180deg,#1d4ed8,#1346b3); color:#fff; border:none; padding:8px 12px; border-radius:8px; font-weight:700; cursor:pointer; box-shadow: 0 6px 16px rgba(16,24,40,0.08); transition: transform 160ms ease, box-shadow 160ms ease; }
.btn-primary:focus { outline: 3px solid rgba(37,99,235,0.12); outline-offset: 2px; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary.outline { background: transparent; color:#1d4ed8; border:1px solid rgba(29,78,216,0.12); box-shadow: none; }
.btn-primary.muted { background: #f3f4f6; color:#374151; border:1px solid #e6e6e6; box-shadow:none; }

/* smaller screens: make buttons full width stacked */
@media (max-width: 560px) {
  .drawer-primary-actions { flex-direction:column; }
  .btn-primary { width: 100%; }
}

@keyframes slideFadeUp {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.group-card { animation: slideFadeUp 360ms cubic-bezier(.2,.9,.2,1) both; }
.group-list .group-card:nth-child(1) { animation-delay: 40ms; }
.group-list .group-card:nth-child(2) { animation-delay: 100ms; }
.group-list .group-card:nth-child(3) { animation-delay: 160ms; }
.group-list .group-card:nth-child(4) { animation-delay: 220ms; }

/* Group list responsive container: uses a CSS variable for header height with sensible fallback */
.group-list {
  /* fill the available vertical space in .right-col and scroll internally */
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 6px; /* space for scrollbar */
  display: flex;
  flex-direction: column;
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}

/* Keep the side header pinned above the scrolling group list */
.right-col .side-header {
  position: sticky;
  top: 12px; /* small gap from drawer header */
  /* ensure this header stays under any dropdowns coming from the drawer/header area */
  z-index: 8;
  background: transparent;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Ensure any dropdown/popover rendered inside the drawer appears above the pinned side header */
.right-drawer .dropdown-menu,
.right-drawer .popover,
.right-drawer .activity-dropdown-panel,
.right-drawer .dropdown-panel,
.right-drawer .popper {
  z-index: 2000 !important;
}


.group-list .group-card:nth-child(5) { animation-delay: 280ms; }
.group-list .group-card:nth-child(6) { animation-delay: 340ms; }

/* Ensure each card snaps fully into view and leaves a small margin from the header */
.group-list .group-card { scroll-snap-align: start; scroll-margin-top: 12px; }

/* responsive adjustments: avoid horizontal scroll, stack on small screens */
@media (max-width: 900px) {
  .folio-grid { flex-direction: column; }
  .folio-side { width: 100%; max-width: 100%; min-width: 0; }
  .right-drawer { width: 100vw; }
}



  /* Visual styles for different booking types */
  /* Solid booking bar colors matching the reference palette */
  .booking-bar.checkin { background: rgb(36, 114, 151); }
  .booking-bar.checkout { background: #374151; color: #ffffff; }
  .booking-bar.reservation { background: rgb(245, 134, 70); }
  .booking-bar.combined { background: #8b5cf6; }
  .booking-bar.combined-dim { opacity: 0.45; box-shadow: none; }
  .booking-bar.due_out { background: #ef4444; color: #ffffff; }
  .booking-bar.blocked { background: #7D0A0A; }
  .booking-bar:hover { filter: brightness(1.05); }
  .booking-bar:active { filter: brightness(0.95); }

  /* small screens: reduce cell size */
  @media (max-width: 800px) {
    .calendar-grid-container { --day-width:72px; }
  }


  /* .room-list .room-type { margin-bottom: 6px; } */
  .room-type-header { display:flex; align-items:center; gap:8px; cursor:pointer; padding:6px; }
  .room-type-children { padding-left: 18px; }
  .room-row { padding:4px 6px; }
  .room-name { cursor:pointer; padding:6px; border-radius:3px; }
  .room-name.selected { background: #e8f3ff; }

  /* helper to prevent text selection on clickable toggles */
  .no-select { user-select: none; -webkit-user-select: none; -moz-user-select: none; }

  .calendar-grid { font-size: 12px; }
  .calendar-grid-header { display:flex; border-bottom:1px solid #dee3e7; }
  .calendar-grid-roomcol { width:180px; padding:8px; background:#fafafa; border-right:1px solid #dee3e7; }
  .calendar-grid-dates { display:flex; flex:1; }
  .calendar-grid-date { flex:0 0 80px; padding:8px; text-align:center; border-right:1px solid #f0f0f0; background:#fff; }

  /* .calendar-grid-body { padding: 4px 0; } */
  .calendar-grid-row { display:flex; border-bottom:1px solid #dee3e7; }
  .room-col { width:180px; padding:8px; border-right:1px solid #dee3e7; }
  .room-col.selected { background:#dee3e7; }
  .dates-col { display:flex; flex:1; }
  .date-cell { flex:0 0 80px; height:48px; border-right:1px solid #dee3e7; position:relative; }
  .date-cell.booked { background:#dee3e7; }
  .booking { position:absolute; left:4px; right:4px; top:6px; bottom:6px; background:#000; color:#fff; padding:6px; border-radius:4px; font-weight:700; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* Activity dropdown styles (RightDrawer) */
.action-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}
.action-select-btn svg { display:inline-block; vertical-align:middle; }
.activity-dropdown-menu { min-width:200px; }
.activity-dropdown-item:focus, .activity-dropdown-item:hover {
  background: #f8fafc;
  outline: none;
}

/* Pay panel styles */
.charge-list { display:flex; flex-direction:column; gap:2px; padding:2px 0; border-radius:0; }
/* make individual charge lines simple text rows (no borders) */
.charge-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-radius:0; background: transparent; border: none; }
.charge-row.extra { background: transparent; }
.charge-desc { color:#374151; font-size:12px; }
.charge-amt { font-weight:400; color:#111827; font-size:12px; }

.payment-methods { display:flex; flex-direction:column; gap:6px; }
.payment-methods .methods-wrap { padding-top:4px; }
.payment-methods label { display:flex; align-items:center; gap:8px; padding:6px 0; border-radius:0; background:transparent; }
.payment-methods input[type="radio"] { width:16px; height:16px; }

.pay-summary { display:flex; justify-content:space-between; align-items:center; padding:12px; border-radius:8px; background: linear-gradient(90deg,#f8fafc,#ffffff); border:1px solid #eef2f6; margin-bottom:12px; }
.pay-summary .left { color:#6b7280; }
.pay-summary .right { font-weight:900; font-size:18px; }

/* small responsive tweaks for pay panel */
@media (max-width:700px) {
  .charge-row { padding:10px; }
  .payment-methods label { padding:12px; }
}

/* Polished hotel-style pay panel */
.guest-summary-title { font-weight:700; margin-bottom:6px; }
.guest-name { font-size:13px; color:#111827; font-weight:700; margin-bottom:4px; }
.guest-meta { display:flex; gap:10px; font-size:12px; color:#6b7280; }

.charge-pill { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-radius:0; background:transparent; margin-bottom:6px; }
.charge-pill .charge-desc { color:#374151; font-size:12px; }
.charge-pill .charge-amt { font-weight:400; font-size:12px; }

.charge-selectable { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-radius:0; border:none; transition: all 120ms ease; }
.charge-selectable:hover { background:transparent; }
.charge-selectable input { width:16px; height:16px; }

.subtotal-box { border-radius:6px; padding:8px; background: transparent; border: none; }
.subtotal-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
.subtotal-row.muted { color:#6b7280; font-size:13px; }
.subtotal-row.subtotal div:last-child { font-weight:700; font-size:13px; }
.subtotal-row.total { font-weight:800; font-size:14px; margin-top:4px; }

.payment-methods label { background:transparent; border:none; padding:6px 0; border-radius:0; display:flex; align-items:center; gap:10px; }
.payment-methods input[type="radio"] { width:16px; height:16px; }

.btn-primary { padding:8px 12px; border-radius:8px; font-weight:700; }
.btn-primary.outline { border-radius:8px; padding:8px 12px; }

/* subtle scrollbar styling for the drawer right column */
.right-col::-webkit-scrollbar { width: 8px; }
.right-col::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius:6px; }

/* thin section separator used between groups in pay panel */
.section-sep { height:1px; background: #eef2f6; width:100%; }

/* payment method icon container */
.pm-icon { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }

/* --- Combined booking bar compact/expanded styling --- */
/* The compact/arrowed design only applies when a combined bar is "expanded" —
   add the `expanded` class to the element to trigger this visual treatment. */
.booking-bar.combined.expanded {
  /* when expanded, make combined bars visually thinner and non-interactive */
  height: calc((var(--row-height) - 18px) / 20) !important;
  top: calc(var(--row-height) / 2) !important;
  border-radius: 8px !important;
  overflow: visible !important;
  box-shadow: none !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  position: relative;
  pointer-events: none; /* prevent interaction when in expanded mode */
}

.booking-bar.combined.expanded .bar-label {
  display: none !important; /* hide text on expanded combined bars */
}

/* small triangular pointers that sit below the bar at left and right. They inherit
   the parent's background (so gradients still match) and are clipped into triangles. */
.booking-bar.combined.expanded::before,
.booking-bar.combined.expanded::after {
  content: '';
  position: absolute;
  bottom: -8px; /* sit slightly below the bar */
  width: 14px;
  height: 10px;
  background: inherit; /* inherit gradient/color from the bar */
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  pointer-events: none;
}
.booking-bar.combined.expanded::before { left: 6px; }
.booking-bar.combined.expanded::after { right: 6px; }

/* Dimmed combined variant when expanded */
.booking-bar.combined.expanded.combined-dim {
  opacity: 0.45 !important;
}

/* Ensure badges and status icon reposition nicely inside the shorter bar */
.booking-bar.combined.expanded .bar-badges { top: 6px; right: 8px; }
.booking-bar.combined.expanded [style*="right: 0"] { top: 2px; bottom: 2px; }


/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/* Responsive fallback: on narrow screens make the filters offcanvas usable */
@media (max-width: 700px){
    #rmv-filters-offcanvas{ width:100vw !important; max-width:100vw !important; }
}

/* Staff card styles */
.staff-card { border-radius: .5rem; }
.staff-card .avatar{ width:44px; height:44px; font-weight:600; }
.staff-card .avatar { font-size:1rem; }
.staff-card.bg-warning { background-color: #fff3cd !important; }
.staff-card.bg-light { background-color: #f8f9fa !important; }
.staff-card + .staff-card { margin-top: .5rem; }
.staff-name { line-height:1; }

.staff-status-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.4rem; vertical-align:middle; flex-shrink:0; }
.staff-status-available{ background-color:#28a745; }
.staff-status-busy{ background-color:#fd7e14; }
.staff-status-off{ background-color:#dc3545; }

/* clickable room card */
.room-action-trigger{
    /* keep default appearance, no hover/active animation */
}

/* only the explicit action target (top label area) is clickable */
.room-action-target{ cursor: pointer; }

/* room cleanliness switch: unchecked = dirty (red), checked = clean (green) */
.room-clean-switch .slider { background-color: #dc3545; }
.room-clean-switch input:checked + .slider { background-color: #198754; }
.room-clean-switch .slider:before { background-color: #fff; }

/* Auto-assign switch (W3Schools style) */
.switch { position: relative; display: inline-block; width:46px; height:24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #0d6efd; }
input:focus + .slider { box-shadow: 0 0 1px #0d6efd; }
input:checked + .slider:before { -webkit-transform: translateX(22px); -ms-transform: translateX(22px); transform: translateX(22px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }



.status-blocked { background: #7D0A0A !important; color: #fff !important; }
/* Container: allow chips to wrap and not stretch to full width */
#buildingTypeChips{
    display: flex !important;
    flex-direction: row !important; /* ensure horizontal flow, override flex-column */
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start; /* pack wrapped rows to the top */
    gap: 0.35rem;
}
.building-chip{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    padding: 0.22rem 0.6rem;
    border-radius: 0.35rem;
    line-height: 1;
    white-space: nowrap;
    height: auto;
}
/* ensure small variant keeps compact sizing */
.building-chip.btn-sm{ padding: 0.18rem 0.5rem; font-size:0.75rem; }
/* visual: active chips show solid primary (JS toggles classes), keep outline when not active */
.building-chip:not(.active){ box-shadow: none; }
.building-chip.active{ box-shadow: 0 0 0 0.125rem rgba(13,110,253,0.15); }
/* Minimum room card width to keep layout readable on wider columns */
.room-card { min-width: 135px; }