/* Operations module
   resources/views/operations/ota-allotments-create.blade.php
   resources/views/operations/ota-allotments.blade.php
   resources/views/operations/partials/_ota_booking_modals.blade.php */


/* ── Create Allotment ──────────────────────────────────────────────────── */

.plx-create-allotment-card .plx-card-body {
  padding: var(--space-5) var(--space-4);
}

/* Disabled placeholder on this specific select needs an explicit visual
   treatment; disabled alone doesn't suppress hover/focus styles in every
   browser, and the default placeholder color is the same as selectable options. */
#input-property option:disabled {
  background-color: var(--bg-surface);
  color: var(--text-muted);
}

.plx-nights-display {
  align-items: center;
  background: var(--bg-surface-muted);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: flex;
  font-size: var(--text-base);
  height: 38px;
  padding: 0 var(--space-3);
}

.plx-nights-display strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  margin-right: var(--space-1);
}

/* ── Room Inventory (create) ───────────────────────────────────────────── */
/* Page-scoped duplicate of Booking Engine's own Step 2 Room Inventory card
   (.plx-booking-inventory-* in booking-engine.css) — same reference design,
   deliberately not shared per this project's OTA-Allotments-vs-Booking-Engine
   duplication convention (see PROJECT_MEMORY.md). */
.plx-ota-inventory-card {
  margin-top: var(--space-8);
}

.plx-ota-inventory-card .plx-card-header {
  background: var(--bg-surface-muted);
}

/* Room Inventory rows are grouped per floor (data-plx-floor-label) purely
   so ota-allotments-create.js can match a row to its own room type's
   Auto/Manual checkboxes — those checkboxes themselves live on each room
   type's own group header below (.plx-rnf-type-modes, inside
   .plx-room-number-group-header), not in this card. */
.plx-ota-inventory-floors {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 991.98px) {
  .plx-ota-inventory-floors {
    grid-template-columns: 1fr;
  }
}

.plx-ota-inventory-table-wrap {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.plx-ota-inventory-table thead th {
  background: var(--bg-thead);
  border-bottom-color: var(--border-default);
  color: var(--pm-primary);
  font-size: var(--text-base);
  position: relative;
}

.plx-ota-inventory-table tbody td {
  border-bottom-color: var(--border-default);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  position: relative;
}

.plx-ota-inventory-table thead th,
.plx-ota-inventory-table tbody td {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.plx-ota-inventory-table thead th:first-child,
.plx-ota-inventory-table tbody td:first-child {
  padding-left: var(--space-3);
  width: 1%;
}

.plx-ota-inventory-table tbody td:nth-child(2) {
  white-space: normal;
}

/* Selected can carry the "needs a pairing room" hint (an uncovered Partial
   selection) alongside the count — allowed to wrap like Room Type instead
   of forcing the half-width table wider. */
.plx-ota-inventory-table tbody td:last-child {
  white-space: normal;
}

.plx-ota-inventory-table thead th:not(:last-child)::before,
.plx-ota-inventory-table tbody td:not(:last-child)::before {
  background: var(--border-default);
  bottom: var(--space-2);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  width: 1px;
}

.plx-ota-inventory-table thead th:nth-child(n+3),
.plx-ota-inventory-table tbody td:nth-child(n+3) {
  text-align: center;
}

/* Required is the one editable cell in this table (the others are static
   demo figures) — a compact right-sized number input rather than the full
   38px form-field height everything else on the page uses, so it reads as
   a table value first and an input second. */
.plx-ota-inventory-required-input {
  height: 30px;
  margin: 0 auto;
  padding: 0 var(--space-2);
  text-align: center;
  width: 56px;
}

/* Hide the native number spinner so the box reads exactly like the
   reference — a plain bordered value, not a stepper control. */
.plx-ota-inventory-required-input::-webkit-outer-spin-button,
.plx-ota-inventory-required-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.plx-ota-inventory-required-input {
  -moz-appearance: textfield;
}

/* ── Coverage lines (footer) ────────────────────────────────────────────── */
/* Page-scoped duplicate of Booking Engine's own coverage-line wording/
   coloring (.plx-coverage-line-covered/-gap in booking-engine.css) —
   the badge itself reuses the existing "Selected Rooms for OTA Allotment :"
   title (plx-selected-rooms-label) plus the shared .plx-pill component
   (badges.css), no separate label of its own. */
.plx-ota-coverage-line {
  font-size: var(--text-sm);
  margin: 0;
  overflow-wrap: break-word;
}

.plx-ota-coverage-line-covered {
  color: var(--color-available);
}

/* Same amber as the "Partially Covered" pill for both the Partially
   Covered and Not Covered lines — matches Booking Engine's own
   .plx-coverage-line-gap treatment. */
.plx-ota-coverage-line-gap {
  color: var(--color-warning);
}

/* Header — stacked title/meta block above the filters row, same structure
   as Booking Engine's Step 2 header (.plx-booking-step2-header /
   .plx-booking-filters-row in booking-engine.css) instead of the old
   single side-by-side row. */
.plx-room-select-header {
  margin-bottom: var(--space-5);
  margin-top: var(--space-8);
}

.plx-room-select-header-top {
  margin-bottom: var(--space-5);
}

.plx-room-select-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: 0;
  margin-top: var(--space-1);
}

/* Filters row — reused verbatim from Booking Engine's own
   .plx-booking-filters-row / .plx-booking-filters-group (booking-engine.css,
   page-scoped there so copied here rather than shared): filter selects +
   reset on the left, status legend on the right. */
.plx-booking-filters-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}

.plx-booking-filters-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .plx-booking-filters-group .plx-select {
    width: 160px;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .plx-booking-filters-group .plx-select {
    flex: 1 1 auto;
  }
}

@media (max-width: 767.98px) {
  .plx-booking-filters-group .plx-select {
    flex: 1 1 calc((100% - var(--space-3)) / 2);
  }

  .plx-booking-filters-group .plx-btn {
    flex: 0 0 auto;
  }
}

/* Status legend — same 6 swatches/colors as Booking Engine's own
   .plx-booking-legend (booking-engine.css). Only "Available" ever actually
   appears on this page's chips (every room/unit shown here is available to
   allot — there's no booked/tentative/partial/blocked/OTA concept in this
   page's data), but the legend itself is a static color key and is cloned
   in full for visual parity. */
.plx-booking-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.plx-booking-legend-item {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
}

.plx-booking-legend-item::before {
  border-radius: 0;
  border-style: solid;
  border-width: 2px;
  content: '';
  height: 16px;
  width: 16px;
}

.plx-booking-legend-item[data-plx-legend="available"]::before { background: var(--color-success-bg); border-color: var(--color-available); }
.plx-booking-legend-item[data-plx-legend="booked"]::before { background: var(--color-booked-bg); border-color: var(--color-booked); }
.plx-booking-legend-item[data-plx-legend="tentative"]::before { background: var(--color-warning-bg); border-color: var(--color-warning); }
/* Matches the 115/215 Partial chips' own special-cased colors (above)
   rather than the generic --color-partial/-bg, so the legend swatch reads
   the same as the actual Partial chips on this page. */
.plx-booking-legend-item[data-plx-legend="partial"]::before { background: var(--plx-popover-partial-bg); border-color: var(--plx-popover-partial-color); }
.plx-booking-legend-item[data-plx-legend="blocked"]::before { background: var(--color-blocked-bg); border-color: var(--color-blocked); }
.plx-booking-legend-item[data-plx-legend="ota"]::before { background: var(--color-danger-bg); border-color: var(--color-danger); }

/* Filters row + legend trimmed the same way booking-engine.css trims its
   own Step 2 header at this range, so both selects + reset + all 6 legend
   items still fit on one line with no wrap. */
@media (min-width: 1200px) and (max-width: 1535.98px) {
  .plx-booking-filters-row {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .plx-booking-filters-group {
    gap: var(--space-2);
  }

  .plx-booking-filters-group .plx-select {
    width: 148px;
  }

  .plx-booking-legend {
    gap: var(--space-2);
  }

  .plx-booking-legend-item {
    gap: 4px;
  }
}

/* Floor card — same "Group 15.png" scheme as Booking Engine's own
   .plx-booking-floor-card (booking-engine.css): gray --bg-card fill with a
   neutral border on the shared .plx-card/.plx-card-flush base (1.5px
   border, radius-lg unchanged), so the white room-type groups inside read
   as raised surfaces. Header/body padding now come from the shared
   .plx-card-header/.plx-card-body (cards.css), trimmed the same way
   booking-engine.css trims them for its own floor card. */
.plx-rnf-card-js {
  background: var(--bg-card);
  border-color: var(--border-default);
}

/* Floor filter — same [data-plx-hidden] convention already used for
   .plx-room-view-card elsewhere on this page (and .plx-booking-floor-card
   in booking-engine.css) — toggled by applyRoomFilters() in
   ota-allotments-create.js. */
.plx-rnf-card-js[data-plx-hidden="true"] {
  display: none;
}

/* The reference has no divider between the floor title and the groups. */
.plx-rnf-card-js .plx-card-header {
  border-bottom: 0;
  padding-bottom: 0;
}

.plx-rnf-card-js .plx-card-header .plx-section-title {
  font-size: var(--text-md);
}

.plx-rnf-card-js .plx-card-body {
  padding: 15px;
}

.plx-rnf-groups-js {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.plx-room-number-group-js {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

/* Border color/opacity, align-items, and padding-bottom copied from
   Booking Engine's own .plx-booking-room-type-header (booking-engine.css)
   — same soft accent divider under each room-type's heading line. */
.plx-room-number-group-header {
  align-items: baseline;
  border-bottom: 1px solid rgba(154, 162, 255, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
}

.plx-room-number-group-header .plx-rng-title-js {
  color: var(--text-primary);
  flex: 1 1 auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  min-width: 0;
}

.plx-rng-count-js {
  color: var(--pm-accent);
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* Hotel Grand Plaza only: each room type gets its own Auto/Manual Select
   pair, inside that type's own group header — the client's real workflow
   is Required counts first, then an independent Auto/Manual decision per
   room type (not per floor, and not one global toggle for the whole
   inventory). Sits as this header's third flex child alongside the title
   and room count, wrapping onto its own line on narrow widths same as the
   other two. */
.plx-rnf-type-modes {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: flex-end;
}

.plx-rnf-type-modes .plx-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.plx-room-type-price {
  color: var(--color-info);
  font-weight: var(--weight-medium);
  margin-left: var(--space-1);
}

/* Skyview Apartments: two floor cards stacked with a gap between them. */
.plx-rnf-floors-js {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Column widths and gap match .plx-room-number-grid from properties.css
   (same values produce 10 chips per row at each design-breakpoint viewport). */
.plx-room-chip-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fill, minmax(87px, 1fr));
}

/* Floor chips — reused verbatim from Booking Engine's own .plx-floor-chip
   (booking-engine.css, page-scoped there so copied here rather than
   shared), including every status color (Available/Booked/Tentative/
   Partial/Maintenance("blocked")/OTA) since this page's rooms now carry
   the same per-room status data Booking Engine's own demo dataset does. */
:root {
  --plx-chip-active-ring: var(--pm-accent);
  --plx-chip-active-shadow: var(--shadow-md);
  --plx-popover-partial-bg: #FCEFFF;
  --plx-popover-partial-color: #C755DE;
  --plx-popover-ota-bg: #FDFDFF;
  --plx-popover-ota-color: #D72149;
  --plx-chip-ota-bg: #FFF3F5;
  --plx-chip-ota-selected-shadow: rgba(215, 33, 73, 0.22);
  --plx-popover-booked-bg: #F8F8F8;
}

:root[data-bs-theme="dark"] {
  --plx-popover-partial-bg: #2E1A33;
  --plx-popover-partial-color: #E29CF0;
  --plx-popover-ota-bg: #2A1820;
  --plx-popover-ota-color: #FF7A93;
  --plx-chip-ota-bg: #2A1820;
  --plx-chip-ota-selected-shadow: rgb(255 122 147 / 48%);
  --plx-popover-booked-bg: #20222C;
}

.plx-floor-chip {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  height: 38px;
  overflow: visible;
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.plx-floor-chip[data-plx-status="available"] {
  background: var(--color-success-bg);
  border-color: var(--color-available);
  color: var(--text-primary);
}

.plx-floor-chip[data-plx-status="booked"] {
  background: var(--color-booked-bg);
  border-color: var(--color-booked);
  color: var(--color-booked);
}

.plx-floor-chip[data-plx-status="tentative"] {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.plx-floor-chip[data-plx-status="partial"] {
  background: var(--color-partial-bg);
  border-color: var(--color-partial);
  color: var(--color-partial);
}

/* Room/unit 116 only — matched to the status popover's own
   .plx-popover-row-tentative (--toggle-track-off/--color-notification-dot)
   instead of the generic --color-warning/-bg every other "tentative" chip
   uses, same special-case Booking Engine's own data carries for this
   exact room number. */
.plx-floor-chip[data-plx-status="tentative"][data-plx-room="116"] {
  background: var(--toggle-track-off);
  border-color: var(--color-notification-dot);
  color: var(--color-notification-dot);
}

/* Room/unit 115 and 215 only — matched to .plx-popover-row-partial's own
   --plx-popover-partial-bg/-color instead of the generic --color-partial/
   -bg, same special-case Booking Engine's own data carries for this exact
   room number (215 added so its Partial chip reads identically to 115's,
   instead of the generic partial color every other partial chip uses). */
.plx-floor-chip[data-plx-status="partial"][data-plx-room="115"],
.plx-floor-chip[data-plx-status="partial"][data-plx-room="215"] {
  background: var(--plx-popover-partial-bg);
  border-color: var(--plx-popover-partial-color);
  color: var(--plx-popover-partial-color);
}

.plx-floor-chip[data-plx-status="blocked"] {
  background: repeating-linear-gradient(45deg, var(--color-blocked-bg), var(--color-blocked-bg) 6px, var(--bg-surface) 6px, var(--bg-surface) 12px);
  border-color: var(--color-blocked);
  color: var(--text-muted);
}

.plx-floor-chip[data-plx-status="ota"] {
  background: var(--plx-chip-ota-bg);
  border-color: var(--plx-popover-ota-color);
  color: var(--plx-popover-ota-color);
}

.plx-floor-chip[data-plx-selected="true"] {
  background: var(--bg-surface);
  border-width: 2px;
  box-shadow: 0 0 0 .5px var(--plx-chip-active-ring), var(--plx-chip-active-shadow);
}

.plx-floor-chip[data-plx-selected="true"][data-plx-status="available"] {
  border-color: var(--border-focus);
  color: var(--text-primary);
}

/* OTA-partial chips selected via the status popover's "Select This Slot" —
   keep the chip's own OTA red background/border/text, expressed only
   through a matching red-tinted ring + glow shadow instead of the shared
   selected-state's white fill + purple border above. */
.plx-floor-chip[data-plx-selected="true"][data-plx-status="ota"] {
  background: var(--plx-chip-ota-bg);
  border-color: var(--plx-popover-ota-color);
  color: var(--plx-popover-ota-color);
  box-shadow: 0 0 0 2.5px var(--plx-chip-ota-selected-shadow), 0 0 10px var(--plx-chip-ota-selected-shadow);
}

/* Blocked/Maintenance chips selected via "Select This Slot" — background/
   border-color intentionally stay on the chip's own default striped
   "blocked" look; selection reads through a thin highlighted ring plus a
   soft ambient shadow instead. */
.plx-floor-chip[data-plx-selected="true"][data-plx-status="blocked"] {
  background: repeating-linear-gradient(45deg, var(--color-blocked-bg), var(--color-blocked-bg) 6px, var(--bg-surface) 6px, var(--bg-surface) 12px);
  border-color: var(--border-focus);
  color: var(--text-muted);
  box-shadow: 0 0 0 .5px var(--plx-chip-active-ring), var(--plx-chip-active-shadow);
}

/* Partial chips selected via "Select This Slot" — fill/border/text switch
   to the same --plx-popover-partial-* variables the status popover's own
   "Partial" row/pill use, so retuning one retunes both consistently. */
.plx-floor-chip[data-plx-selected="true"][data-plx-status="partial"] {
  background: var(--plx-popover-partial-bg);
  border-color: var(--plx-popover-partial-color);
  color: var(--plx-popover-partial-color);
}

/* ---- Status popover (#plxOtaStatusPopoverModalJs) ----
   Reused verbatim from Booking Engine's own status popover
   (booking-engine.css, page-scoped there so copied here rather than
   shared) — opens when a Booked/Tentative/Partial/Maintenance/OTA floor
   chip is clicked (see ota-allotments-status-popover.js). */
#plxOtaStatusPopoverModalJs .modal-body {
  padding-top: var(--space-4);
}

#plxOtaStatusPopoverModalJs .modal-header.plx-modal-header-bare {
  align-items: center;
  display: flex;
  height: 36px;
  padding: 0;
  position: absolute;
  right: var(--space-6);
  top: var(--space-4);
  z-index: 1;
}

/* Same edge-to-edge divider Booking Engine's own popover uses — the shared
   .plx-modal-divider (this section, "OTA Allotments list / view modals")
   has no negative margin, so this modal gets its own scoped override
   rather than changing that shared rule for every other modal using it. */
#plxOtaStatusPopoverModalJs .plx-modal-divider {
  margin: var(--space-4) calc(-1 * var(--space-6));
}

.plx-popover-header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
}

.plx-popover-icon {
  align-items: center;
  background: var(--pm-accent-light);
  border-radius: var(--radius-sm);
  color: var(--pm-primary);
  display: flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.plx-popover-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.plx-popover-subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

.plx-popover-row {
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  padding: var(--space-3);
}

.plx-popover-row-main {
  align-items: center;
  display: flex;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  gap: var(--space-3);
  justify-content: space-between;
}

.plx-popover-row-left-group {
  display: flex;
  flex-direction: column;
}

.plx-popover-row-sub {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  margin: var(--space-1) 0 0;
}

.plx-popover-row-accent { background: var(--bg-surface); color: var(--pm-accent); border: 1px solid var(--pm-accent); }
.plx-popover-row-blue { background: var(--plx-popover-booked-bg); border: 1px solid var(--color-booked); color: var(--color-booked); }
.plx-popover-row-tentative { background: var(--toggle-track-off); border: 1px solid var(--color-notification-dot); color: var(--color-notification-dot); }
.plx-popover-row-partial { background: var(--plx-popover-partial-bg); border: 1px solid var(--plx-popover-partial-color); color: var(--plx-popover-partial-color); }
.plx-popover-row-gray { background: var(--color-blocked-bg); border: 1px solid var(--color-blocked); color: var(--text-secondary); }
.plx-popover-row-danger { background: var(--plx-popover-ota-bg); border: 1px solid var(--plx-popover-ota-color); color: var(--plx-popover-ota-color); }
.plx-popover-row-success { background: var(--color-success-bg); border: 1px solid var(--color-available); color: var(--color-available); }

.plx-popover-row-accent .plx-popover-row-right,
.plx-popover-row-danger .plx-popover-row-right:not(:has(.plx-pill)) {
  color: var(--text-secondary);
}

.plx-popover-caption {
  color: var(--step-pending);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 var(--space-2);
  text-transform: uppercase;
}

.plx-popover-footer-caption {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  margin-top: var(--space-3);
  text-align: center;
  text-transform: uppercase;
}

.plx-popover-footer-caption-left {
  color: var(--step-pending);
  margin-top: var(--space-4);
  text-align: left;
}

@media (max-width: 767.98px) {
  #plxOtaStatusPopoverModalJs .modal-body {
    max-height: 65vh;
    overflow-y: auto;
  }

  /* Close button is position:absolute at the top-right of the modal body —
     reserve explicit right clearance so the room title text cannot slide
     underneath the × on narrow viewports. */
  .plx-popover-header {
    padding-right: calc(28px + var(--space-3));
  }

  /* Stack the left-group (date/label text + sub-line) above the right
     element (pill badge or action button) instead of the desktop side-by-
     side layout, which runs out of horizontal room on phone-sized
     viewports. Applies to every .plx-popover-row variant since they all
     share .plx-popover-row-main. */
  .plx-popover-row-main {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* "Select This Slot" button: go full-width for a comfortable tap target. */
  .plx-popover-row-right .plx-btn {
    justify-content: center;
    width: 100%;
  }
}

/* Fixed footer: sits above the sidebar's z-index, inset from the left by the
   sidebar width so it doesn't overlap the sidebar on desktop. Grid, not
   flex — a flex row lets a long unbroken coverage line grow past the
   available width and push the actions column onto its own line below
   instead of wrapping in place. minmax(0, 1fr) forces the content column
   to actually respect the space left after the actions column's own
   width, so long lines wrap inside that column instead of shoving
   Back/Create Allotment down. Content aligns to the top of its row (the
   heading reads first, exactly where it always has); the Back/Create
   Allotment buttons are vertically centered independently via their own
   align-self below. min-height further down matches .plx-sidebar-user's
   own height so the two fixed bars line up. */
.plx-selected-rooms-bar {
  align-items: start;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  bottom: 0;
  box-shadow: 0 -4px 12px rgba(17, 24, 39, 0.05);
  column-gap: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  left: var(--sidebar-width);
  padding: var(--space-1) var(--space-8);
  position: fixed;
  right: 0;
  z-index: 1015;
}

@media (max-width: 767.98px) {
  /* Narrow viewports: stack instead of squeezing Back/Create Allotment
     into a shrinking second column. */
  .plx-selected-rooms-bar {
    grid-template-columns: 1fr;
    row-gap: var(--space-3);
  }
}

/* Flex row, matching Booking Engine's own .plx-booking-coverage-summary
   exactly (same column-gap/row-gap values) — the label, the coverage
   pill, and the active property flow's own lines are all direct flex
   children here, not a <p>-wrapped label with hand-tuned margins trying
   to approximate the same spacing. */
.plx-selected-rooms-content {
  align-items: center;
  column-gap: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  row-gap: var(--space-1);
}

/* Forces each property flow's wrapper onto its own row below the
   label/pill, same trick Booking Engine's own .plx-booking-coverage-lines
   uses (flex-basis: 100%) inside its equivalent flex-wrap row — the
   hidden flow (Skyview, while Grand Plaza is active, or vice versa) is
   simply absent from layout via its own [hidden] attribute, so this only
   ever affects whichever one is actually showing. */
.plx-selected-rooms-content [data-plx-property-flow] {
  flex-basis: 100%;
  min-width: 0;
}

/* Flex column, matching Booking Engine's own .plx-booking-coverage-lines
   exactly — each coverage line is a separate <p> (margin: 0, see
   .plx-ota-coverage-line above), so without this they'd stack with zero
   gap between them; gap: var(--space-1) is the same value Booking
   Engine's version uses. */
#plxHgpRoomTypeSummaryJs {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.plx-selected-rooms-label {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* Solid-fill treatment, matching Booking Engine's own coverage pill
   (#plxCoveragePillJs.plx-pill-active/-warning in booking-engine.css) —
   the shared .plx-pill-active/-warning classes (badges.css) are a lighter
   tint by default; this page's own pill needs the same ID-scoped override
   Booking Engine already has, not just the shared class default. Left
   untouched: .plx-pill-pending's own light-tint "No rooms selected"
   empty state. */
#plxHgpCoveragePillJs.plx-pill-active {
  background: var(--color-available);
  border-color: var(--color-available);
  color: var(--text-inverse);
}

#plxHgpCoveragePillJs.plx-pill-warning {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--text-inverse);
}

.plx-selected-rooms-list {
  color: var(--color-available);
  font-size: var(--text-sm);
  margin: 0;
}

/* Hotel Grand Plaza's summary can list many rooms — starts reserved for
   just 2 lines (cleaner at rest) and grows up to 4 as more get selected,
   scrolling internally past that rather than growing further. Both
   min-height AND max-height matter here: without a min-height, this box
   would collapse to 0/1-line height whenever nothing (or only one line)
   is selected — a smaller version of the layout-shift problem this same
   min/max pairing exists to avoid, since the heading above it is still
   its own row-mate on the same growing side of the bar. Sized off the
   same tokens the lines themselves use (--text-sm, --space-1) so both
   figures stay correct if either is retuned later. */
.plx-selected-rooms-bar [data-plx-property-flow="Hotel Grand Plaza"] {
  min-height: calc(2 * var(--text-sm) * 1.21 + var(--space-1));
  max-height: calc(4 * var(--text-sm) * 1.21 + 3 * var(--space-1));
  min-width: 0;
  overflow-y: auto;
}

.plx-selected-rooms-actions {
  align-items: center;
  align-self: center;
  display: flex;
  gap: var(--space-3);
}

@media (max-width: 767.98px) {
  /* Overrides align-self: center once the bar stacks to a single column
     above — centering would otherwise shrink this to its content width
     instead of spanning the row like the buttons inside it expect to. */
  .plx-selected-rooms-actions {
    align-self: stretch;
    width: 100%;
  }

  .plx-selected-rooms-actions .plx-btn {
    flex: 1 1 0;
  }
}

.plx-page-has-sticky-footer {
  padding-bottom: 96px;
}

@media (min-width: 992px) {
  /* Floor of 81px matches .plx-sidebar-user's height (var(--space-5)*2
     padding + 40px avatar + 1px border) so the two fixed bars align. */
  .plx-selected-rooms-bar {
    min-height: 81px;
  }
}

@media (min-width: 1200px) and (max-width: 1535.98px) {
  .plx-room-chip-grid {
    grid-template-columns: repeat(auto-fill, minmax(77px, 1fr));
  }

  .plx-floor-chip {
    height: 30px;
  }

  /* .plx-sidebar-user's padding shrinks here (sidebar.css), so its height
     does too; match that reduced height in the footer bar. */
  .plx-selected-rooms-bar {
    min-height: 73px;
  }
}

@media (min-width: 1536px) and (max-width: 1919.98px) {
  .plx-room-chip-grid {
    grid-template-columns: repeat(auto-fill, minmax(97px, 1fr));
  }
}

@media (min-width: 1920px) {
  .plx-room-chip-grid {
    grid-template-columns: repeat(auto-fill, minmax(127px, 1fr));
  }
}

@media (max-width: 991.98px) {
  .plx-selected-rooms-bar {
    left: 0;
  }
}

@media (max-width: 575.98px) {
  .plx-selected-rooms-bar {
    padding: var(--space-3) var(--space-4);
  }

  .plx-page-has-sticky-footer {
    padding-bottom: 140px;
  }
}


/* ── OTA Allotments list / view modals ─────────────────────────────────── */

/* Dark Mode only: .plx-stat-card's title/value/label read var(--pm-primary)
   / var(--text-primary) by default (components/cards.css), both near
   -illegible against this card's own dark fill. Swapped to the project's
   standard light-text token instead of introducing a new variable.
   .plx-stat-card is only ever rendered on this page, but the rule is kept
   here (not in cards.css/theme-dark.css) so it can never affect the class
   anywhere else it might be reused in future. */
:root[data-bs-theme="dark"] .plx-stat-card-title,
:root[data-bs-theme="dark"] .plx-stat-card-value,
:root[data-bs-theme="dark"] .plx-stat-card-label {
  color: var(--text-inverse);
}

/* Plain 2x2 detail grid, shared by Property overview tabs and the generic
   booking modal (_booking_modals.blade.php) — no longer used by the OTA
   allotments flow now that plxViewOtaBookingModalUnitJs has moved to the
   .plx-ota-summary-card layout below, matching Grand Plaza Hotel's own
   modal. Kept bare/unscoped since it's shared across those other callers,
   not owned by any one modal. */
.plx-detail-grid {
  display: grid;
  gap: var(--space-4) var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}

.plx-detail-field {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.plx-detail-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.plx-detail-value {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.plx-modal-divider {
  border: 0;
  border-top: 1px solid var(--pm-accent-soft);
  opacity: 1;
}

/* Widened from the shared .plx-modal-property's 700px (components/modals.css)
   to match new-View-ota-booking.png / new-View-ota-lease.png's own
   proportions (both 800px-wide references) — scoped to these two modals'
   ids so every Edit Property modal that also uses size="property" keeps
   its existing 700px cap untouched. */
#plxViewOtaBookingModalJs .plx-modal-property,
#plxViewOtaBookingModalUnitJs .plx-modal-property {
  max-width: 790px;
}

/* Booking summary modals (plxViewOtaBookingModalJs, plxViewOtaBookingModalUnitJs)
   — status pill relocated next to the title (see ota-allotments-modals.js /
   ota-allotments-modals-unit.js), pixel-matched against new-View-ota-booking.png
   / new-View-ota-lease.png. Scoped to these modals' ids so .plx-modal-heading
   — a plain stacked title/subtitle block everywhere else — stays untouched
   for every other modal in the project. */
#plxViewOtaBookingModalJs .plx-modal-heading,
#plxViewOtaBookingModalUnitJs .plx-modal-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Booking summary card — OTA / Property / Original Dates. A 2-column grid
   with an icon avatar (same soft-tint square as .plx-type-card-icon,
   components/cards.css — kept as its own class so the two can evolve
   independently) beside each label/value pair. Original Dates is the grid's
   3rd item, so it auto-flows into column 1 of row 2 and leaves column 2
   empty, exactly like the reference. */
.plx-ota-summary-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-5) var(--space-6);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-6);
}

.plx-ota-summary-field {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
}

/* :nth-child(odd) always lands on column 1 in this 2-column grid — true for
   both a full row (OTA/Property) and a lone trailing item (Original Dates),
   so each row's divider is sized to its own row's height, matching the two
   separate segments in the reference rather than one line spanning the
   whole card. */
.plx-ota-summary-field:nth-child(odd) {
  border-right: 1px solid var(--border-default);
  padding-right: var(--space-6);
}

.plx-ota-summary-field-icon {
  align-items: center;
  background: var(--pm-accent-soft);
  border-radius: var(--radius-md);
  color: var(--pm-primary);
  display: inline-flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.plx-ota-summary-field-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.plx-ota-summary-field-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.plx-ota-summary-field-value {
  color: var(--text-primary);
  font-size: var(--text-base);
  /* font-weight: var(--weight-semibold); */
}

/* Allotted rooms/units card — heading, filters, and the room-card grid all
   share this one bordered wrapper in the reference, instead of sitting
   directly on the modal body like the summary fields used to. */
.plx-ota-rooms-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.plx-room-list-heading {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin: 0 0 var(--space-4);
}

.plx-conversion-history-heading {
  margin-bottom: var(--space-3);
}

.plx-room-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.plx-room-list-filters .plx-select {
  flex: 0 0 auto;
  height: 30px;
  width: 121px;
}

.plx-room-list-filters .plx-select:nth-child(2) {
  width: 141px;
}

.plx-room-view-card-list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
  max-height: 420px;
  overflow-y: auto;
  padding-right: var(--space-1);
}

.plx-room-view-card {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.plx-room-view-card-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.plx-room-view-card .plx-pill {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
    font-weight: var(--weight-regular);

}

.plx-room-view-card-chevron {
  color: var(--text-secondary);
  flex-shrink: 0;
  font-size: 24px;
}

.plx-room-view-card:hover {
  border-color: var(--pm-primary);
  box-shadow: var(--shadow-sm);
}

/* Dark Mode only: --pm-primary reads as a saturated brand blue against the
   dark surface, so this card's own hover border swaps to --border-hover —
   the same neutral, theme-aware token every other hover-only border change
   already uses project-wide (.plx-input, .plx-select, .plx-room-chip, ...)
   — instead of introducing a new variable. Scoped to these modals' ids and
   :root[data-bs-theme="dark"] so Light Mode's --pm-primary hover above is
   completely untouched. */
:root[data-bs-theme="dark"] #plxViewOtaBookingModalJs .plx-room-view-card.plx-room-view-card-js:hover,
:root[data-bs-theme="dark"] #plxViewOtaBookingModalUnitJs .plx-room-view-card.plx-room-view-card-js:hover {
  border-color: var(--border-hover);
}

.plx-room-view-card[data-plx-hidden="true"] {
  display: none;
}

.plx-room-view-card-row {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.plx-room-view-card-title {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.plx-room-view-card-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Release Dates modal only (plxReleaseDatesModalJs) — outer bordered card
   wrapping its "Filter By" row and "Available Allotted Dates" box,
   pixel-matched against figma-ui-folder/screens/new-allotment.png. The Room
   modal (plxRoomBookingModalJs) used to share this same wrapper but no
   longer does, so its own "Filter By"/"Available Allotted Dates" now sit
   directly in the modal body instead — the rules just below (filter row,
   filter label, select width, date grid/boxes) stay shared between the two
   modals since removing the card wrapper doesn't change any of that. */
#plxReleaseDatesModalJs .plx-room-detail-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
}

/* Release Dates modal only (plxReleaseDatesModalJs) — the "Filter By" row
   above its outer card. The Room modal (plxRoomBookingModalJs) used to
   share this same row but no longer has one at all, so these rules are
   scoped to Release Dates alone; the unit-category flow's own separate
   copy of this modal (_ota_booking_modals_unit.blade.php) never matches
   this id, so it's unaffected either way. */
#plxReleaseDatesModalJs .plx-room-filter-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

#plxReleaseDatesModalJs .plx-room-filter-label {
  color: var(--text-primary);
  font-size: var(--text-base);
font-weight: var(--weight-medium);
}

#plxReleaseDatesModalJs .plx-room-filter-row .plx-select {
  width: 200px;
}

/* The card above already provides top/bottom padding, so the highlight
   box's own default margin-bottom (used everywhere else it appears, e.g.
   the Release Dates modal's own "Nights to release" box further down)
   would only double up the gap below it here. Release Dates modal only —
   the Room modal's own "Available Allotted Dates" box no longer sits
   inside a .plx-room-detail-card, so it keeps the shared .plx-highlight-box
   default margin-bottom instead, which is exactly the spacing it needs now
   that nothing else provides it. */
#plxReleaseDatesModalJs .plx-room-detail-card .plx-highlight-box {
  margin-bottom: 0;
}

#plxRoomBookingModalJs .plx-available-dates-grid,
#plxReleaseDatesModalJs .plx-available-dates-grid,
#plxReleaseDatesModalUnitJs .plx-available-dates-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-3);
}

@media (max-width: 575.98px) {
  #plxRoomBookingModalJs .plx-available-dates-grid,
  #plxReleaseDatesModalJs .plx-available-dates-grid,
  #plxReleaseDatesModalUnitJs .plx-available-dates-grid {
    grid-template-columns: 1fr;
  }
}

#plxRoomBookingModalJs .plx-available-date-box,
#plxReleaseDatesModalJs .plx-available-date-box,
#plxReleaseDatesModalUnitJs .plx-available-date-box {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  display: flex;
  font-size: var(--text-base);
  height: 38px;
  padding: 0 var(--space-3);
}

/* Release Dates modals only (both the Room and unit-category flows): each
   date box also carries a checkbox (the Room-step modal's own boxes,
   above, are display-only) — pushed to the box's trailing edge instead of
   the Room modal's plain flex-start. */
#plxReleaseDatesModalJs .plx-available-date-box,
#plxReleaseDatesModalUnitJs .plx-available-date-box {
  justify-content: space-between;
}

/* Widened to match new-allotment.png's own proportions, same technique as
   #plxViewOtaBookingModalJs .plx-modal-property above — scoped to this
   modal's id so the unit-category flow's own plxReleaseDatesModalUnitJs
   keeps the shared .plx-modal-release 660px cap untouched. */
#plxReleaseDatesModalJs .plx-modal-release {
  max-width: 800px;
}

.plx-highlight-box {
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
}

.plx-highlight-box-label {
  display: block;
  font-size: var(--text-base);
font-weight: var(--weight-medium);
  margin-bottom: var(--space-1);
}

.plx-highlight-box-value {
  color: var(--text-primary);
  font-size: var(--text-base);
}

.plx-highlight-box-warning {
  background: var(--bg-surface);
  border: 1.5px solid var(--color-notification-dot);
}

.plx-highlight-box-warning .plx-highlight-box-label {
  color: var(--text-primary);
}

.plx-highlight-box-success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-available);
  border-radius: var(--radius-sm);
  margin-bottom: 0;
  padding: var(--space-2) var(--space-3);
}

.plx-highlight-box-success .plx-highlight-box-value {
  color: var(--text-muted);
}

.plx-highlight-box-success .plx-highlight-box-value strong {
  color: var(--color-available);
  font-weight: var(--weight-semibold);
  margin-right: var(--space-1);
}

.plx-release-dates-row {
  gap: var(--space-5);
}

.plx-nights-to-release-group {
  margin-top: var(--space-6);
}

.plx-release-helper-text {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-5);
}

/* Conversion History table — same table design as the Rooms/Units tables
   on the property Manage pages (properties.css): --bg-thead header band
   with primary-ink labels, neutral borders, and inset vertical dividers
   (equal top/bottom spacing) between all columns. Dividers draw on
   ::before — DataTables' sort arrows own th::after (tables.css). */

/* Rounded outer frame (Frame 173.png). The wrap's existing overflow-x: auto
   already clips the header band along the radius curve, so the horizontal
   scroll behavior on narrow screens is unchanged. */
.plx-table-wrap:has(#plxRoomConversionTableJs) {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
#plxRoomConversionTableJs thead th {
  background: var(--bg-thead);
  border-bottom-color: var(--border-default);
  color: var(--pm-primary);
  position: relative;
}

#plxRoomConversionTableJs tbody td {
  border-bottom: 1px solid var(--border-default);
  position: relative;
  font-weight: var(--weight-regular);
}

/* The border-bottom above out-specifies the global last-row reset
   (.plx-table tbody tr:last-child td, tables.css) — re-assert it so the
   last row doesn't double up with the wrap's outer frame border. */
#plxRoomConversionTableJs tbody tr:last-child td {
  border-bottom: 0;
}

#plxRoomConversionTableJs thead th:not(:last-child)::before,
#plxRoomConversionTableJs tbody td:not(:last-child)::before {
  background: var(--border-default);
  bottom: var(--space-2);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  width: 1px;
}

#plxRoomConversionTableJs .plx-room-cell-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}

#plxRoomConversionTableJs .plx-table-name {
  color: var(--text-secondary);
  line-height: 1.15;
  font-weight: var(--weight-regular);
}

#plxRoomConversionTableJs .plx-table-room-type {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: 1.2;
}

/* Unit-category flow's own Conversion History table
   (plxRoomConversionTableUnitJs, e.g. Skyview Apartment today) — this table
   shared #plxRoomConversionTableJs with Grand Plaza Hotel's table until the
   two flows' modals were split into separate markup/ids, which left this
   one falling back to the plain generic .plx-table look (tables.css)
   instead of the styled header band + rounded frame + inset dividers
   above. Restored here as an identical, independently-scoped copy of that
   same block so this table's UI reads exactly as it did before the split,
   while Grand Plaza Hotel's own rules above stay completely untouched. */
.plx-table-wrap:has(#plxRoomConversionTableUnitJs) {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
#plxRoomConversionTableUnitJs thead th {
  background: var(--bg-thead);
  border-bottom-color: var(--border-default);
  color: var(--pm-primary);
  position: relative;
}

#plxRoomConversionTableUnitJs tbody td {
  border-bottom: 1px solid var(--border-default);
  position: relative;
  font-weight: var(--weight-regular);
}

/* The border-bottom above out-specifies the global last-row reset
   (.plx-table tbody tr:last-child td, tables.css) — re-assert it so the
   last row doesn't double up with the wrap's outer frame border. */
#plxRoomConversionTableUnitJs tbody tr:last-child td {
  border-bottom: 0;
}

#plxRoomConversionTableUnitJs thead th:not(:last-child)::before,
#plxRoomConversionTableUnitJs tbody td:not(:last-child)::before {
  background: var(--border-default);
  bottom: var(--space-2);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  width: 1px;
}

#plxRoomConversionTableUnitJs .plx-room-cell-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}

#plxRoomConversionTableUnitJs .plx-table-name {
  color: var(--text-secondary);
  line-height: 1.15;
  font-weight: var(--weight-regular);
}

#plxRoomConversionTableUnitJs .plx-table-room-type {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: 1.2;
}
#plxReleaseDatesModalUnitJs .modal-footer,
#plxRoomBookingModalUnitJs .modal-footer,
#plxRoomBookingModalJs .modal-footer,
#plxReleaseDatesModalJs .modal-footer {
  border-top: 0;
  padding-top: var(--space-3);
}
#plxRoomBookingModalUnitJs .modal-footer,
#plxRoomBookingModalJs .modal-footer {
  justify-content: center;
}

@media (max-width: 575.98px) {
  .plx-room-view-card-list {
    grid-template-columns: 1fr;
  }
}


/* ── OTA Allotments list — allotment cards ─────────────────────────────── */

/* Same card pattern as /properties/manage (.plx-property-card in
   properties.css) adapted to the allotment layout — own class names so the
   two page stylesheets stay merge-safe. */
/* align-items: stretch is the equal-height contract: every card in a grid
   row takes the height of the tallest card in that row (e.g. when a long
   property name wraps the header to two lines). The card's flex column +
   the footer's margin-top: auto absorb the extra height above the footer,
   keeping Manage buttons bottom-aligned across the row. */
.plx-allotment-cards-grid {
  align-items: stretch;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, 1fr);
}

.plx-allotment-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
:root[data-bs-theme="dark"] .plx-allotment-card:hover {
  /* box-shadow: var(--shadow-md); */
}

.plx-allotment-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

/* Equal-height header across each row: the card's five sections (header,
   three field rows, footer) share the parent grid's row tracks, so every
   section is as tall as its tallest same-row counterpart — a two-line
   property name grows the header of every card in that row, keeping the
   header/body boundary and the row dividers aligned. row-gap: 0 keeps the
   sections contiguous inside the card (the container's gap only separates
   card rows). Browsers without subgrid keep the flex layout above: card
   totals still equalize, only the internal boundaries stay per-card. */
@supports (grid-template-rows: subgrid) {
  .plx-allotment-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* Header: "Allotment ID" caption, then ID | divider | property name */
.plx-allotment-card-header {
  background: var(--bg-hover);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}

.plx-allotment-card-id-label {
  color: var(--text-subtle);
  font-size: var(--text-sm);
}

.plx-allotment-card-id-row {
  align-items: center;
  display: flex;
  gap: var(--space-4);
}

.plx-allotment-card-id {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.plx-allotment-card-separator {
  background: var(--border-subtle);
  flex-shrink: 0;
  height: var(--space-6);
  width: 1px;
}

.plx-allotment-card-property {
  color: var(--text-primary);
  font-size: var(--text-md);
    font-weight: var(--weight-semibold);

  min-width: 0;
}


/* Body: label-over-value fields, two per row. border-top on each row draws
   the header→row and row→row separators (same trick as the property card). */
.plx-allotment-card-row {
  border-top: 1px solid var(--border-default);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.plx-allotment-card-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4);
  position: relative;
}

/* Column divider — inset from the row's horizontal rules like the design */
.plx-allotment-card-field + .plx-allotment-card-field::before {
  background: var(--border-default);
  bottom: var(--space-3);
  content: '';
  left: 0;
  position: absolute;
  top: var(--space-3);
  width: 1px;
}

.plx-allotment-card-label {
  color: var(--text-muted);
  font-size: var(--text-base);
}

.plx-allotment-card-value {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  word-break: break-word;
}

/* The typography utilities load before this page's CSS, so the value's own
   color declaration above would win the cascade — re-assert them here. */
.plx-allotment-card-value.plx-text-available {
  color: var(--color-available);
}

.plx-allotment-card-value.plx-text-muted {
  color: var(--text-muted);
}

/* Footer: right-aligned Manage button, primary-colored like the
   /properties/manage card footer */
.plx-allotment-card-footer {
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
}

.plx-allotment-card-footer .plx-view-btn {
  background: var(--pm-primary);
  border-color: var(--pm-accent-soft);
  color: var(--text-inverse);
  height: 36px;
  padding: 0 var(--space-4);
}

.plx-allotment-card-footer .plx-view-btn:hover {
  background: var(--pm-primary-hover);
  border-color: var(--pm-primary-hover);
  color: var(--text-inverse);
}

/* List footer: "Showing X to Y of Z entries" left, pagination right */
.plx-allotment-list-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-5);
}

.plx-entries-info {
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin: 0;
}

/* The pagination component pads itself for use inside table cards
   (pagination.css); on this open page the footer row owns the spacing. */
.plx-allotment-list-footer .plx-pagination {
  padding: 0;
}

.plx-cards-empty {
  color: var(--text-muted);
  font-size: var(--text-base);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

@media (max-width: 1199.98px) {
  .plx-allotment-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .plx-allotment-cards-grid {
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }
}