/* Manage Leases — page-scoped only (not shared with Manage Bookings' own
   .plx-mb-* set, per this project's duplicate-rather-than-share
   convention for page-specific reference layouts), even though the two
   pages are visually near-identical per Figma. Structure copied from
   Manage Bookings (manage-bookings.css) as the starting point, then
   diverged: 4 stat columns instead of 6 (8 stat cards here vs. 6 there),
   4 field-rows per card instead of 2 (Lease Date/Unit No(s), Lease Start
   Date/Monthly Rent, Lease End Date/Lease Duration, Security Deposit/
   Payment Status), and an evenly-spaced 3-button footer (View Details/
   View Ledger/Manage) instead of the split Check-in-and-out + Ledger/
   Manage grouping. Reuses .plx-tabs, .plx-filter-bar, and .plx-pill
   as-is — those really are the same component. */

.plx-ml-stat-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--space-8);
}

.plx-ml-stat-card {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
}

.plx-ml-stat-icon {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--pm-primary);
  display: inline-flex;
  flex-shrink: 0;
  height: 28px;
  padding: 6px;
  justify-content: center;
  width: 28px;
}

.plx-ml-stat-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.plx-ml-stat-title {
  color: var(--pm-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.plx-ml-stat-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.plx-ml-stat-value {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
}

.plx-ml-stat-trend {
  font-size: var(--text-xs);
}

.plx-ml-property-group {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  padding: var(--space-3);
}

.plx-ml-group-header {
  align-items: center;
  color: var(--text-primary);
  display: flex;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Same wrapper recipe as .plx-ml-info-icon below in this file — was a bare
   colored glyph with no box, unlike the Figma reference. */
.plx-ml-group-header-icon {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--pm-primary);
  display: flex;
  flex-shrink: 0;
  height: var(--space-8);
  justify-content: center;
  width: var(--space-8);
}

.plx-ml-group-type-link {
  color: var(--color-booked);
  font-weight: var(--weight-medium);
}

.plx-ml-card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}

/* Cards-per-page pagination (Skyview Apartment group, manage-leases.js) —
   same feature/markup shape as Manage Bookings' own card-grid pagination
   (manage-bookings.css/.js, its own .plx-mb-card-grid- family: -scroll,
   -footer, -page-length-select-js, -page-hidden), reused class-for-class
   under this page's own .plx-ml- prefix rather than sharing the .plx-mb-
   rules directly (this project's own duplicate-rather-than-share
   convention for page-specific reference layouts, same reasoning as every
   other .plx-ml- rule in this file). See manage-bookings.css's own copy
   of this same comment block for the full reasoning behind each rule
   below. */
.plx-ml-card-grid-scroll {
  overflow-x: scroll;
  padding: var(--space-3);
  margin: calc(var(--space-3) * -1);
}

.plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"] {
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--plx-ml-page-size, 3), 335px);
}

/* Skyview Apartment (data-plx-columns="3"): fixed 6 cards per page, 3 across
   x 2 rows at every viewport; phones keep 3 fixed 335px columns and scroll
   horizontally, tablet up flexes (210px floor, set per tier below). Extra
   attribute selector out-ranks the [data-plx-paginated] rules regardless of
   source order. Same as manage-bookings.css's Grand Plaza rule. */
.plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"][data-plx-columns="3"] {
  align-content: start;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 335px);
}

.plx-ml-card.plx-ml-card-page-hidden {
  display: none;
}

.plx-ml-card-grid-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-4);
}

.plx-ml-card-grid-footer .plx-pagination {
  padding: 0;
}

.plx-ml-group-header-toolbar {
  align-items: center;
  display: flex;
  margin-left: auto;
}

.plx-ml-group-header-toolbar .plx-page-length-select-js {
  width: 130px;
}

/* min-height (not a fixed height) — cards in the Skyview Apartment group's
   own paginated grid (data-plx-paginated="true") sit one-per-column
   (grid-auto-flow: column), so grid's own align-items: stretch only ever
   equalizes cards within the SAME page (already true without this rule) —
   it has nothing to stretch against across pages, since each page is its
   own independent row. Content length varies per card (e.g. LS-86's own
   Payment Status sub-line, .plx-ml-card-value-sub, that most other cards
   don't have), so without a floor the row height visibly shifts every
   time the page changes. 415px matches the tallest card's own natural
   height across every demo card currently on this page — revisit if a
   future card's content grows taller than that. */
.plx-ml-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;
  min-height: 415px;
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

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

.plx-ml-card-top {
  align-items: center;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.plx-ml-card-top-info {
  align-items: baseline;
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.plx-ml-card-id {
  color: var(--color-booked);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.plx-ml-card-guest {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

/* Card header: id + guest name always share one line (nowrap, guest name
   truncates); the status pill sits to their right when the card is wide
   enough and wraps onto its own line beneath them when it isn't. Pure flex
   wrapping instead of a viewport/container breakpoint, so it follows the
   card's actual width at every screen size (the flexed 3-across columns
   beside the sidebar change width continuously, no fixed cutoff fits). */
.plx-ml-card-top {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.plx-ml-card-top-info {
  max-width: 100%;
  white-space: nowrap;
}

.plx-ml-card-guest {
  overflow: hidden;
  text-overflow: ellipsis;
}

.plx-ml-card-row {
  border-bottom: 1px solid var(--border-default);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

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

.plx-ml-card-row .plx-ml-card-field:first-child {
  border-right: 1px solid var(--border-default);
  flex: 2 1 0;
  padding-right: var(--space-4);
}

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

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

.plx-ml-card-value-sub {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

/* Same shape as Manage Bookings' own card footer (.plx-mb-card-footer):
   View Details sits alone on the left (this page's equivalent of Check-in
   & Check-out's position), View Ledger + Manage grouped together on the
   right via their own wrapper div so they stay adjacent instead of
   space-between spreading all three apart evenly. */
.plx-ml-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: space-between;
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
}

.plx-ml-card-footer-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* View Details/View Ledger (.plx-btn-secondary.plx-btn-sm) sit next to
   Manage in the same footer row — matched to the same var(--space-10)
   height/space-3 padding Manage above uses, same fix Manage Bookings'
   own card footer applies (.plx-mb-card-footer .plx-btn-secondary,
   manage-bookings.css).

   Real bug found (client screenshot): this rule and buttons.css's own
   `.plx-btn.plx-btn-sm { height: 24px }` (inside its
   1200-1399.98px density breakpoint) are an exact specificity tie
   ((0,2,0) both ways) — which one wins is decided purely by cascade
   order between the two files, not anything deliberate, so it only
   "happened" to lose here at that viewport width (Manage's own
   `.plx-ml-card-footer .plx-view-btn` rule right below never had this
   problem — buttons.css's own matching selector there is just
   `.plx-view-btn` alone, (0,1,0), so it was never a tie to begin with).
   Fixed by adding `.plx-btn-sm` to this selector too so it's
   unambiguously (0,3,0) and wins regardless of viewport width or file
   order — not by relying on load order staying lucky. */
.plx-ml-card-footer .plx-btn-secondary.plx-btn-sm {
  height: var(--space-8);
  padding: 0 var(--space-3);
}

/* Manage — the exact same solid-filled treatment Manage Bookings' own
   card footer gives its Manage button (.plx-mb-card-footer .plx-view-btn,
   manage-bookings.css): taller than .plx-view-btn's plain 30px default,
   filled with the primary brand color instead of View Ledger's neutral
   .plx-btn-secondary look, so the two pages' Manage buttons read as the
   identical button, not a lookalike. */
.plx-ml-card-footer .plx-view-btn {
  background: var(--pm-primary);
  border-color: var(--pm-accent-soft);
  color: var(--text-inverse);
  height: var(--space-8);
  padding: 0 var(--space-3);
}

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

/* ---- View Details modal (_manage_leases_view_details_modal.blade.php) ----
   Info grid/notes/section-title/table-wrap rules copied from Manage
   Bookings' own detail modal (.plx-mbm-*, manage-bookings.css) as this
   page's own .plx-ml-* set, per the project's duplicate-rather-than-share
   convention. .plx-document-card stays un-prefixed — it's already a
   same-name-per-page duplicate elsewhere too (booking-engine.css/
   manage-bookings.css both define their own copy under the identical
   class name), so this follows that established exception rather than
   inventing a third naming scheme for the same component. */

.plx-ml-info-grid {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  column-gap: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--space-6);
  padding: var(--space-2) 0;
}

.plx-ml-info-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  position: relative;
}

/* Inset ::before divider (same per-row-segment technique used project-wide
   for table column dividers — Property Sub-Type/Rooms Configuration/
   Manage Bookings) instead of a real border-right, which reads as one
   continuous line spanning every row instead of a short segment per
   item. */
.plx-ml-info-item:nth-child(odd)::before {
  background: var(--border-default);
  bottom: var(--space-2);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  width: 1px;
}

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

.plx-ml-info-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.plx-ml-info-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.plx-ml-info-value {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
}

.plx-ml-info-sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* Quick-facts box — no direct Manage Bookings equivalent (that modal has
   no compact icon+label+value strip like this one), so this is genuinely
   new markup: one bordered box holding two 5-column rows (own
   .plx-ml-quickfacts-row per row, not one flat 10-item grid) separated by
   a real full-width divider div — reused as-is for the Instalment
   Schedule's own 4-item totals strip below the table (a single row,
   no divider). Two explicit rows (rather than one grid the divider item
   auto-flows into) so the divider is guaranteed the row's own full width
   regardless of grid auto-placement, instead of a implicit-grid line that
   could end up spanning fewer columns than intended. */
.plx-ml-quickfacts {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
}

.plx-ml-quickfacts-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(5, 1fr);
}

.plx-ml-quickfacts-divider {
  background: var(--border-default);
  height: 1px;
  /* margin: var(--space-4) 0; */
}

.plx-ml-quickfact {
  align-items: flex-start;
  display: flex;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) 0;
  position: relative;
}

/* Same inset-segment divider technique as .plx-ml-info-item above —
   scoped to :not(:last-child) within each row, so it lines up with real
   column boundaries at every breakpoint (3-col, 2-col) automatically,
   not just the base 5-col layout. */
.plx-ml-quickfacts-row .plx-ml-quickfact:not(:last-child)::before {
  background: var(--border-default);
  bottom: var(--space-2);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  width: 1px;
}

/* Same boxed treatment as .plx-ml-info-icon above, per the client's own
   reference (pasted that exact icon's rendered markup) — pale lavender
   square, rounded corners, navy glyph. Label stays plain text-muted
   below, unlike an earlier attempt at this same box that also recolored
   the label to accent purple and was rejected as "even worse" — this
   time only the icon itself changes. */
.plx-ml-quickfact-icon {
  align-items: center;
  background: var(--pm-accent-light);
  border-radius: var(--radius-sm);
  color: var(--pm-primary);
  display: flex;
  flex-shrink: 0;
  height: var(--space-8);
  justify-content: center;
  width: var(--space-8);
}

.plx-ml-quickfact-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.plx-ml-quickfact-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.plx-ml-quickfact-value {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
}

/* align-items: stretch (not start) so the Documents sidebar's own card
   grows to match the Instalment Schedule column's real height per Figma,
   instead of stopping at its own shorter content height. */
.plx-ml-detail-layout {
  align-items: stretch;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr) 340px;
  margin-bottom: var(--space-6);
}

.plx-ml-detail-main,
.plx-ml-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Grid items don't shrink past their content's min-content size just
     because the track itself is minmax(0, 1fr) — that only sets the
     TRACK's minimum, not this item's own automatic min-width, which
     otherwise stays content-based. Without this, the 9-column Instalment
     Schedule table forced .plx-ml-detail-main (and the whole modal with
     it) wider than the modal's own max-width, pushing the dialog off-
     center instead of letting .plx-ml-table-wrap's own overflow-x: auto
     do its job and scroll internally. */
  min-width: 0;
}

/* Documents card grows to fill the sidebar column's own stretched height
   (.plx-ml-detail-layout's align-items: stretch above) instead of sizing
   to its own shorter content — matches the Instalment Schedule column's
   real height per Figma. Header's border-bottom dropped too (per Figma,
   the "Documents" title has no divider under it here). */
.plx-ml-detail-sidebar .plx-card {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* ------------------------------------------------------------
   Edit Lease modal — bounded modal + independent per-column scroll, no
   third scrollbar on the outer .modal, ported from Manage Bookings' own
   #plxManageBookingModalBk21Js/.plx-mbm-layout mechanism
   (manage-bookings.css). A first attempt at this port kept this modal's
   own pre-existing `align-items: start` on .plx-ml-detail-layout (needed
   so the Updated Lease Summary sidebar stays compact/top-aligned instead
   of stretching to match the main column, per this modal's own earlier,
   separate requirement) — that's exactly what broke it: MB's whole
   mechanism depends on `align-items: stretch` giving BOTH grid items a
   real, bounded height equal to the grid row's own
   `grid-template-rows: minmax(0, 1fr)` size; with `start` instead, grid
   items just size to their own content and align at the row's top edge,
   so .plx-ml-detail-main never actually receives a bounded height for
   its own overflow:auto descendant to shrink against — flex:1 on that
   descendant had nothing definite to fill, so it just rendered at full
   content height and nothing ever scrolled internally, while the
   uncapped-in-that-version .modal itself scrolled the entire dialog
   backup. Fix: `align-items: stretch` here after all (so .plx-ml-detail-
   main gets bounded correctly), with the sidebar's own compactness
   preserved via `align-self: start` on .plx-ml-detail-sidebar alone
   (overriding the grid's own stretch for just that one item) instead of
   turning stretch off for the whole row. ------------------------------------------------------------ */
#plxLeaseEditModalJs.modal {
  overflow: hidden;
}

#plxLeaseEditModalJs .modal-dialog {
  margin-bottom: var(--space-4);
  margin-top: var(--space-4);
  max-height: calc(100vh - (var(--space-4) * 2));
}

#plxLeaseEditModalJs .modal-content {
  max-height: calc(100vh - (var(--space-4) * 2));
}

#plxLeaseEditModalJs .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#plxLeaseEditModalJs .plx-ml-detail-layout {
  align-items: stretch;
  flex: 1;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

#plxLeaseEditModalJs .plx-ml-detail-main {
  min-height: 0;
}

/* Keeps the Updated Lease Summary compact/top-aligned (not stretched to
   match the main column's full height) despite the grid's own
   align-items: stretch above — see the long comment at the top of this
   section for why this can't just be align-items: start on the layout
   itself any more. */
#plxLeaseEditModalJs .plx-ml-detail-sidebar {
  align-self: start;
}

#plxLeaseEditModalJs .plx-ml-detail-sidebar .plx-card {
  flex: none;
}

/* The scrollable content region inside .plx-ml-detail-main (everything
   except the Cancel/Update Lease footer, which stays put below it) —
   flex:1/min-height:0 lets it shrink to whatever the now-genuinely-
   bounded .plx-ml-detail-main actually leaves it, same as Manage
   Bookings' own .plx-mbm-main (which doesn't need a separate wrapper for
   this since it has no footer living inside its own main column). */
#plxLeaseEditModalJs .plx-ml-detail-main-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-2);
}

/* Safety net only — with align-self: start above, the sidebar itself
   doesn't get a bounded height from the grid, so this card's own
   max-height (same viewport-based cap as modal-content) is what actually
   stops "Updated Lease Summary" from growing past the viewport in the
   unlikely event its content gets long; .plx-card-body is what scrolls
   internally if that cap is ever hit. */
#plxLeaseEditModalJs .plx-ml-detail-sidebar .plx-card {
  max-height: calc(100vh - (var(--space-4) * 2));
  overflow: hidden;
}

#plxLeaseEditModalJs .plx-ml-detail-sidebar .plx-card-body {
  min-height: 0;
  overflow-y: auto;
}

.plx-ml-detail-sidebar .plx-card-header {
  border-bottom: 0;
}

.plx-ml-detail-sidebar .plx-card-body {
  flex: 1;
}

/* margin-top (not margin-bottom) so it plays correctly with normal-flow
   margin collapsing against whatever precedes it (e.g. .plx-ml-edit-
   actions-row's own margin-bottom) instead of stacking into a double
   gap. Was missing entirely — every .plx-ml-section (Lease Information
   card, Modify Lease Dates panel, etc.) sat flush against whatever came
   right before it. */
.plx-ml-section {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.plx-ml-section-title {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3);
}

.plx-ml-table-wrap {
  /* border: 1px solid var(--border-default); */
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  overflow-y: hidden;
}

.plx-ml-table-wrap .plx-table thead th {
  background: var(--bg-thead);
  border-bottom-color: var(--border-default);
  color: var(--pm-primary);
}

/* Vertical column dividers — same inset ::before technique used
   project-wide (Property Sub-Type/Rooms Configuration/Manage Bookings)
   rather than a real border-right, which would run the full cell height
   instead of reading as a per-row segment. */
.plx-ml-table-wrap .plx-table th,
.plx-ml-table-wrap .plx-table td {
  position: relative;
}

.plx-ml-table-wrap .plx-table th:not(:last-child)::before,
.plx-ml-table-wrap .plx-table td:not(:last-child)::before {
  /* background: var(--border-default); */
  background: var(--border-medium);
  bottom: var(--space-2);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  width: 1px;
}

/* Status/Action are the last two columns of the Instalment Schedule table
   (the only table using .plx-ml-table-wrap) — Figma centers both instead
   of the shared .plx-table's default left-align, same fix already applied
   to Manage Bookings' own Invoice History table (.plx-mbm-invoice-table,
   manage-bookings.css). */
.plx-ml-table-wrap .plx-table th:nth-child(7),
.plx-ml-table-wrap .plx-table td:nth-child(7),
.plx-ml-table-wrap .plx-table th:last-child,
.plx-ml-table-wrap .plx-table td:last-child {
  text-align: center;
}

/* Per Figma: a filled strip (own background + radius), not a bare
   border-top-only row — padding on all 4 sides now, not just the top. */
.plx-ml-instalment-totals {
  background: var(--bg-thead);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
}

.plx-ml-instalment-totals .plx-ml-quickfact:not(:last-child)::before {
  background: var(--border-default);
  bottom: var(--space-2);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  width: 1px;
}

.plx-ml-documents-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plx-document-card {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
}

.plx-document-card-icon {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-inverse);
  display: flex;
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  height: var(--space-8);
  justify-content: center;
  width: var(--space-8);
}

.plx-document-card-icon-danger { background: var(--color-danger); }
.plx-document-card-icon-info { background: var(--color-info); }
.plx-document-card-icon-available { background: var(--color-available); }

.plx-document-card-info {
  flex: 1;
  min-width: 0;
}

.plx-document-card-name {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  margin: 0 0 var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plx-document-card-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.plx-document-card-download {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  flex-shrink: 0;
  height: var(--space-6);
  justify-content: center;
  width: var(--space-6);
}

.plx-document-card-download:hover {
  color: var(--pm-primary);
}

.plx-ml-notes-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}

.plx-ml-note-card {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

/* Danger-tinted (not warning/amber) — matched to the reference's own pink/
   red-bordered Internal Remarks card, distinct from Manage Bookings' own
   equivalent note (.plx-mbm-note-card-warning), which is genuinely amber. */
.plx-ml-note-card-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

.plx-ml-note-title {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-2);
}

.plx-ml-note-text {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.plx-ml-empty {
  color: var(--text-muted);
  padding: var(--space-6) 0;
  text-align: center;
}

/* Same recurring gotcha as Manage Bookings' own Check-in & Check-out/
   Confirmation History modals (manage-bookings.css): .plx-ml-section has
   no margin-bottom of its own and .plx-form-actions (shared, used
   project-wide) has no margin-top of its own — direct siblings here with
   zero gap between them, so the Notes/Internal Remarks box's own real
   bottom border sits flush against the Print row, reading as an unwanted
   divider glued to it rather than the section's own edge. Scoped
   margin-top (same fix pattern, same token) restores real breathing room
   instead of leaving the two touching. */
#plxLeaseViewDetailsModalJs .plx-form-actions,
#plxLeaseManageModalJs .plx-form-actions,
#plxLeaseEditModalJs .plx-form-actions {
  margin-top: var(--space-4);
}

/* ---- Manage Lease modal's own new section
   (_manage_leases_manage_modal.blade.php) — Edit Lease/Terminate Lease
   action cards. No View Details equivalent; genuinely new markup. Same
   tinted-card pattern as .plx-ml-note-card-danger above (pale semantic
   background + matching border) rather than inventing a third card
   style. */
.plx-ml-action-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--space-6);
}

.plx-ml-action-card {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.plx-ml-action-card-success {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.plx-ml-action-card-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

.plx-ml-action-card-icon {
  display: inline-flex;
}

.plx-ml-action-card-success .plx-ml-action-card-icon {
  color: var(--color-success);
}

.plx-ml-action-card-danger .plx-ml-action-card-icon {
  color: var(--color-danger);
}

.plx-ml-action-card-title {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin: var(--space-2) 0 var(--space-1);
}

.plx-ml-action-card-success .plx-ml-action-card-title {
  color: var(--color-success);
}

.plx-ml-action-card-danger .plx-ml-action-card-title {
  color: var(--color-danger);
}

.plx-ml-action-card-desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);

  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  height: var(--space-8);;
}

.plx-ml-action-card-btn {
  background: var(--bg-surface);
  width: 100%;
}

/* ============================================================
   Edit Lease modal (_manage_leases_manage_modal.blade.php's own Edit
   Lease action card opens this) — pixel-matched against its Figma
   reference, which reuses three components that exist today but aren't
   shared/global: manage-bookings.css's own edit-icon-button + action-row
   pattern (Guest/Address pencils, Modify Stay Dates row) and booking-
   engine.css's own Lease Information fields / Unit Rate row / Lease
   Summary card (booking flow's Step 3 Lease panel). Copied here under
   this page's own .plx-ml-* names rather than loading either page's CSS
   file wholesale, same "duplicate under this page's own prefix" call
   already made for .plx-ml-info-grid/-notes-grid above.
   ============================================================ */

/* Tenant/Address/Lease Date info-grid items gain a trailing edit-icon
   button (Property/Lease Start-End/Unit Number(s) don't) — space-between
   scoped to this modal only so the plain Manage/View modals' own items
   (icon+body, no button) are untouched. Same pattern as manage-
   bookings.css's own #plxEditBookingModalJs .plx-mbm-info-item /
   .plx-mbm-info-main, per this modal's own reference markup. */
#plxLeaseEditModalJs .plx-ml-info-item {
  justify-content: space-between;
}

.plx-ml-info-main {
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}

.plx-ml-edit-icon-btn {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-available);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: var(--space-5);
  padding: 0;
  justify-content: center;
  width: var(--space-5);
}

.plx-ml-edit-icon-btn:hover {
  color: var(--color-success);
}

/* Modify Lease Dates/Add Unit(s)/Release Unit(s) — same wrapping,
   left-aligned row as manage-bookings.css's own .plx-mbm-edit-actions-row. */
.plx-ml-edit-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

/* Modify Lease Dates panel's own badge + title pair — copied from
   manage-bookings.css's own .plx-mbm-step-header/-step-badge (Edit
   Booking's Modify Stay Dates panel), not a shared component today. */
.plx-ml-step-header {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Modify Lease Dates panel's own Lease Start/End Date + Duration row had
   no gap before the Check Availability button below it — .plx-form-row's
   own shared margin-bottom is zeroed out on its children by forms.css
   (.plx-form-row > * { margin-bottom: 0 }), so nothing separated the two
   here. Matches Manage Bookings' own equivalent fix
   (.plx-mbm-modify-dates-panel .plx-form-row, manage-bookings.css). */
#plxLeaseModifyDatesPanelJs .plx-form-row,
#plxLeaseModifyDatesPanelLs87Js .plx-form-row,
#plxLeaseModifyDatesPanelLs86Js .plx-form-row {
  margin-bottom: var(--space-2);
}

.plx-ml-step-header .plx-ml-section-title {
  margin-bottom: 0;
}

.plx-ml-step-badge {
  align-items: center;
  background: var(--color-booked);
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  display: inline-flex;
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  height: var(--space-5);
  justify-content: center;
  width: var(--space-5);
}

/* Select Unit(s) row — badge + title reuse .plx-ml-step-header/-step-badge
   above as-is (plain, not itself the toggle); a separate square collapse
   button sits to their right, copied from manage-bookings.css's own
   .plx-mbm-inventory-header/-collapse-btn (Room Inventory/Select Room(s)'
   own collapse chevron), not a bare icon. */
/* margin-top now comes from the shared .plx-ml-section base rule above
   (this row carries that class too) — no rule of its own needed. */

.plx-ml-select-units-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: var(--space-3) 0px;
}

.plx-ml-select-units-header .plx-ml-step-header {
  margin-bottom: 0;
}

.plx-ml-select-units-collapse-btn {
  align-items: center;
  background: color-mix(in srgb, var(--color-booked-bg), var(--color-booked) 15%);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-booked);
  cursor: pointer;
  display: inline-flex;
  height: var(--space-6);
  justify-content: center;
  padding: 0;
  transition: transform var(--transition-fast);
  width: var(--space-6);
}

/* Rest state points right (collapsed, this row's default); rotates to
   point down once expanded (aria-expanded="true", set by
   manage-leases.js) — same rotate-on-open direction as Manage Bookings'
   own chevron, just flipped since that one rests pointing down and
   rotates -90deg closed instead of resting right and rotating open. */
.plx-ml-select-units-collapse-btn .plx-icon {
  transform: rotate(-90deg);
  transition: transform var(--transition-fast);
}

/* aria-expanded now lives on the whole clickable header row
   (.plx-ml-select-units-header), not the collapse button itself — see
   that markup's own comment for why the click target was widened. */
.plx-ml-select-units-header[aria-expanded="true"] .plx-ml-select-units-collapse-btn .plx-icon {
  transform: rotate(0deg);
}

.plx-ml-select-units-header {
  cursor: pointer;
}

.plx-ml-select-units-body:not([hidden]) {
  margin-top: var(--space-3);
}

/* Own page-scoped copy of Booking Engine/OTA Allotments/Manage Bookings'
   own identical :root block (only the Partial pair — this page has no
   OTA/booked-popover chip states to need the other two) — same values,
   so Partial reads identically wherever a user sees it across the app. */
:root {
  --plx-popover-partial-bg: #FCEFFF;
  --plx-popover-partial-color: #C755DE;
}

:root[data-bs-theme="dark"] {
  --plx-popover-partial-bg: #2E1A33;
  --plx-popover-partial-color: #E29CF0;
}

/* Select Unit(s) picker (filters/legend/floor cards/chip grid) — copied
   from manage-bookings.css's own .plx-mbm-select-rooms- prefix and
   .plx-mbm-chip (Manage Bookings' Edit Booking modal, #BK-21's Select
   Room(s) step), own .plx-ml-* names with "room" swapped for "unit"
   throughout, not a shared component today. */
.plx-ml-select-units-filters-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

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

.plx-ml-select-units-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

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

.plx-ml-select-units-legend-item::before {
  border-style: solid;
  border-width: 2px;
  content: '';
  height: 16px;
  width: 16px;
}

.plx-ml-select-units-legend-item[data-plx-legend="available"]::before { background: var(--color-success-bg); border-color: var(--color-available); }
.plx-ml-select-units-legend-item[data-plx-legend="booked"]::before { background: var(--color-booked-bg); border-color: var(--color-booked); }
.plx-ml-select-units-legend-item[data-plx-legend="tentative"]::before { background: var(--color-warning-bg); border-color: var(--color-warning); }
.plx-ml-select-units-legend-item[data-plx-legend="partial"]::before { background: var(--plx-popover-partial-bg); border-color: var(--plx-popover-partial-color); }
.plx-ml-select-units-legend-item[data-plx-legend="blocked"]::before { background: var(--color-blocked-bg); border-color: var(--color-blocked); }

.plx-ml-select-units-floors {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.plx-ml-select-units-floor-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.plx-ml-select-units-floor-card[data-plx-hidden="true"] {
  display: none;
}

.plx-ml-select-units-floor-card .plx-card-header {
  border-bottom: 0;
  padding-bottom: 0;
}

.plx-ml-select-units-unit-group {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.plx-ml-select-units-unit-group + .plx-ml-select-units-unit-group {
  margin-top: var(--space-5);
}

.plx-ml-select-units-unit-group[data-plx-hidden="true"] {
  display: none;
}

.plx-ml-select-units-unit-header {
  align-items: baseline;
  border-bottom: 1px solid var(--pm-accent-soft);
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
}

.plx-ml-select-units-unit-modes {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: flex-end;
}

.plx-ml-select-units-unit-modes .plx-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.plx-ml-select-units-unit-rate {
  color: var(--color-booked);
  font-weight: var(--weight-medium);
}

.plx-ml-select-units-unit-count {
  color: var(--pm-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.plx-ml-chip-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}

.plx-ml-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: var(--space-8);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

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

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

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

.plx-ml-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);
  cursor: default;
}

.plx-ml-chip[data-plx-selected="true"] {
  background: var(--bg-surface);
  border-color: var(--border-focus);
  border-width: 2px;
  box-shadow: 0 0 0 .5px var(--pm-accent), var(--shadow-md);
  color: var(--text-primary);
}

/* Edit Notes/Internal Remarks' title + edit-icon-button row — same
   .plx-ml-edit-icon-btn as the info-grid above, paired with
   .plx-ml-section-title here instead of .plx-ml-info-item. */
.plx-ml-section-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.plx-ml-section-header .plx-ml-section-title {
  margin-bottom: 0;
}

/* Unit Rate row — copied from booking-engine.css's own
   .plx-charges-accordion/-row/-row-icon/-row-label/-row-add (Step 3
   Lease panel's Unit Rate row), not a shared component today. Had no
   margin-top of its own — every instance sits directly after a
   .plx-ml-section (the Lease Information card) that has no margin-bottom
   either, so the two were reading as one stuck-together block. */
.plx-ml-charges-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.plx-ml-charges-row {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  width: 100%;
}

.plx-ml-charges-row-icon {
  align-items: center;
  background: var(--pm-accent-soft);
  border-radius: var(--radius-sm);
  color: var(--pm-primary);
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.plx-ml-charges-row-label {
  color: var(--text-primary);
  flex: 1;
  font-weight: var(--weight-medium);
}

.plx-ml-charges-row-edit {
  align-items: center;
  color: var(--color-booked);
  display: inline-flex;
  flex-shrink: 0;
  font-weight: var(--weight-medium);
  gap: var(--space-1);
}

.plx-ml-charges-row-edit .plx-icon {
  font-size: 18px;
}

/* Updated Lease Summary sidebar card — copied from booking-engine.css's
   own .plx-booking-summary-* (Step 3 Lease panel's Lease Summary card),
   not a shared component today. */
.plx-ml-summary-line {
  border-bottom: 1px dashed var(--pm-accent-soft);
  padding: var(--space-3) 0;
}

.plx-ml-summary-line:first-child {
  padding-top: 0;
}

.plx-ml-summary-line-main {
  display: flex;
  font-weight: var(--weight-semibold);
  justify-content: space-between;
}

.plx-ml-summary-line-months {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.plx-ml-summary-line-meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin: var(--space-1) 0 0;
}

.plx-ml-summary-header {
  margin: 0 0 var(--space-3);
  padding: 0;
}

.plx-ml-summary-header-property {
  color: var(--pm-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-1);
}

.plx-ml-summary-charge-row {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: var(--text-sm);
  justify-content: space-between;
  padding: var(--space-2) 0;
}

.plx-ml-summary-charge-row + .plx-ml-summary-charge-row {
  border-top: 1px dashed var(--pm-accent-soft);
}

/* Dashed divider below the total (not the plain solid one .plx-mbm-
   summary-total/booking flow's own Step 3 Booking Summary use) — matches
   Wireframe-45.png's own Total Lease Value row, same technique booking-
   engine.css uses for it (.plx-wizard-panel[data-plx-flow="lease"]
   .plx-booking-summary-total-row), just scoped to this modal id instead
   since there's no .plx-wizard-panel wrapper here. */
#plxLeaseEditModalJs .plx-ml-summary-total-row {
  align-items: baseline;
  border-bottom: 1px dashed var(--pm-accent-soft);
  border-top: 0;
  display: flex;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  justify-content: space-between;
  margin: var(--space-2) calc(-1 * var(--space-4)) var(--space-3);
  padding: var(--space-3) var(--space-4);
  position: relative;
}

#plxLeaseEditModalJs .plx-ml-summary-total-row::before {
  border-top: 1px solid var(--pm-accent);
  content: '';
  left: var(--space-4);
  position: absolute;
  right: var(--space-4);
  top: 0;
}

#plxLeaseEditModalJs .plx-ml-summary-total-row > span:last-child {
  color: var(--pm-primary);
  font-size: var(--text-lg);
}

.plx-ml-summary-footnote {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin: 0;
}

/* Lease Duration display + Early Termination Allowed toggle — copied
   verbatim from booking-engine.css's own .plx-nights-display/
   -lease-duration-display/-toggle-switch* (Step 3 Lease panel), neither
   of which is a shared component today. */
.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: var(--space-8);
  padding: 0 var(--space-3);
}

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

.plx-lease-duration-display {
  color: var(--pm-primary);
  font-weight: var(--weight-semibold);
}

.plx-lease-duration-display strong {
  color: inherit;
  margin-right: 0;
}

.plx-toggle-switch {
  cursor: pointer;
  display: inline-block;
  height: 24px;
  margin-top: var(--space-2);
  position: relative;
  width: 44px;
}

.plx-toggle-switch input {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

.plx-toggle-switch-track {
  background: var(--border-default);
  border-radius: var(--radius-full);
  display: block;
  height: 100%;
  position: relative;
  transition: background-color var(--transition-fast);
  width: 100%;
}

.plx-toggle-switch-track::before {
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  content: '';
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform var(--transition-fast);
  width: 18px;
}

.plx-toggle-switch input:checked + .plx-toggle-switch-track {
  background: var(--pm-primary);
}

.plx-toggle-switch input:checked + .plx-toggle-switch-track::before {
  transform: translateX(20px);
}

.plx-toggle-switch input:focus-visible + .plx-toggle-switch-track {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ============================================================
   Edit Lease modal's own sub-modals (Edit Tenant/Edit Address/
   Edit Lease Date/Unit Rate/Edit Notes) — wired to the edit-pencil
   buttons/"+ Edit" row in _manage_leases_edit_modal.blade.php.
   ============================================================ */

/* Elevated stacking pair, same technique as Manage Bookings' own
   Edit Guest/Address over Edit Booking (manage-bookings.css's
   .plx-mbm-edit-overlay/.plx-mbm-modal-elevated) — a real second
   backdrop, separate from the shared Manage Lease/Edit Lease one,
   elevated above Edit Lease's default z-index so it actually dims
   Edit Lease underneath; .plx-ml-modal-elevated goes on these
   sub-modals themselves so they render above their own overlay. */
.plx-ml-edit-overlay {
  --bs-backdrop-zindex: 1065;
}

.plx-ml-modal-elevated {
  --bs-modal-zindex: 1075;
}

/* Edit Lease Date — "Current Lease Date : ..." helper line under the
   date field. The date value itself is bold + a distinct color (client
   correction — the label stays plain muted text, only the value reads as
   emphasized); reuses --pm-primary, same navy every other "make this
   value stand out" spot in the app (e.g. the app rate values) already
   uses rather than inventing a new color for just this one line. */
.plx-ml-edit-date-current {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 var(--space-5);
}

.plx-ml-edit-date-current-value {
  color: var(--pm-primary);
  font-weight: var(--weight-semibold);
}

/* Unit Rate popup — own copy of Manage Bookings' .plx-room-rate-row
   set (manage-bookings.css), page-scoped there too so not shared. */
.plx-ml-unit-rate-row {
  align-items: center;
  display: flex;
  gap: var(--space-4);
}

.plx-ml-unit-rate-row-label {
  color: var(--text-primary);
  flex: 0 0 90px;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.plx-ml-unit-rate-current-label,
.plx-ml-unit-rate-new-label {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
}

.plx-ml-unit-rate-row-fields {
  display: grid;
  flex: 1;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}

/* Edit Notes/Internal Remarks — edit state (#plxLeaseNotesEditJs, hidden
   until the pencil icon is clicked; view state reuses the existing
   .plx-ml-notes-grid/.plx-ml-note-card already defined above for the
   read-only display). Not a popup — corrected from an earlier pass that
   wrongly gave this field its own modal; this is an inline swap in
   place, same pattern (and same class names, .plx-ml- for .plx-mbm-) as
   Manage Bookings' own Edit Notes/Internal Remarks
   (manage-bookings.css's .plx-mbm-note-edit-card/-textarea/
   .plx-mbm-notes-edit-actions). Both boxes share one plain neutral card
   style here, unlike the read view's Internal Remarks danger tint. */
.plx-ml-note-edit-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.plx-ml-note-edit-textarea {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 0;
  resize: vertical;
  width: 100%;
}

.plx-ml-note-edit-textarea:focus {
  color: var(--text-primary);
  outline: none;
}

.plx-ml-notes-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------
   Release Unit(s) panel — toggled open by the Edit Lease modal's own
   "Release Unit(s)" button, same [hidden] swap as the Modify Lease
   Dates/Select Unit(s) panels above. Corrected to match Manage Bookings'
   own Release Rooms panel exactly (client reference screenshot): reuses
   .plx-ml-select-units-floor-card/-unit-header/-unit-modes/-unit-rate/
   -unit-count/-legend/-filters-row and .plx-ml-chip-grid/.plx-ml-chip
   wholesale from the Select Unit(s) picker above — an earlier pass
   invented its own flatter .plx-ml-release-floor-header/-select-all/
   -unit-count instead of reusing those, which is why this panel didn't
   match; only the footer button row below is genuinely new. ------------------------------------------------------------ */
.plx-ml-release-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* Fixed footer holding just the Back button, same fixed-bar pattern as
   OTA Allotments Create's .plx-selected-rooms-bar (operations.css) — this
   page has no wizard footer content, so it's a plain right-aligned bar
   rather than that grid layout. Paired with .plx-page-has-sticky-footer
   below on the content wrapper so the page's own content doesn't sit
   underneath it. */
.plx-ml-back-footer-bar {
  align-items: center;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  bottom: 0;
  box-shadow: 0 -4px 12px rgba(17, 24, 39, 0.05);
  display: flex;
  justify-content: flex-end;
  left: var(--sidebar-width);
  padding: var(--space-3) var(--space-8);
  position: fixed;
  right: 0;
  z-index: 1015;
}

/* Reserves room for .plx-ml-back-footer-bar above so page content doesn't
   sit underneath it, same value as OTA Allotments Create's own copy
   (operations.css) for its equivalent fixed footer. */
.plx-page-has-sticky-footer {
  padding-bottom: 96px;
}

/* ==========================================================================
   MEDIA QUERIES — all breakpoints for this file, grouped by tier
   (0–575.98 / 576–767.98 / 768–991.98 / 992–1199.98 / 1200–1399.98 / 1400+),
   consolidated here from their original inline positions so every
   responsive rule for this file lives in one place. Order within each tier
   block matches each rule's original position in the file, since some
   target the same selector and rely on later-wins source order.
   ========================================================================== */

@media (max-width: 575.98px) {
  .plx-ml-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ml-stat-grid {
    grid-template-columns: 1fr;
  }

  .plx-ml-card-grid:not([data-plx-paginated="true"]) {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ml-card-grid:not([data-plx-paginated="true"]) {
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }

  /* Phone width: one card per view, each sized to the viewport instead of
     the desktop 335px fixed column, so a card is never partly cut off at
     the screen edge — same "swipe card-to-card" treatment as Manage
     Bookings' own paginated grid (manage-bookings.css). */
  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"] {
    align-items: start;
    grid-auto-flow: column;
    grid-template-columns: repeat(var(--plx-ml-page-size, 1), calc(100vw - var(--space-8)));
    scroll-snap-type: x mandatory;
  }

  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"] .plx-ml-card {
    height: auto;
    scroll-snap-align: start;
  }

  /* Real bug (client-reported): Manage Bookings' own equivalent rule
     (manage-bookings.css's .plx-mb-card-footer .plx-btn/.plx-view-btn)
     includes .plx-view-btn here too — ours didn't. Without it, only
     View Details/View Ledger (both real .plx-btn) got flex: 1 1 100%,
     while Manage (.plx-view-btn only, no .plx-btn class) fell through
     untouched. That mismatch matters specifically here because
     .plx-ml-card-footer-group also flips to flex-direction: column at
     this breakpoint (below) — for View Ledger, "flex-basis: 100%" then
     resolves along that column's main axis (height) instead of width,
     against an auto-height container with nothing definite to resolve
     against, while Manage (never touched by this rule) kept rendering at
     its own plain height — same root shape as the desktop specificity-tie
     bug fixed just above, different mechanism. */
  .plx-ml-card-footer .plx-btn,
  .plx-ml-card-footer .plx-view-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .plx-ml-card-footer-group {
    flex-direction: column;
  }

  .plx-ml-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .plx-ml-info-item:nth-child(odd)::before {
    display: none;
  }

  .plx-ml-quickfacts-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .plx-ml-quickfacts-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ml-detail-layout {
    grid-template-columns: 1fr;
  }

  /* Stacked single column (.plx-ml-detail-layout's own breakpoint,
     above) — one plain scroll on the modal as a whole instead of the
     desktop/tablet per-column scrolling, which only makes sense when
     main/sidebar are side by side sharing a row height. Same reset
     Manage Bookings' own modals apply at this exact breakpoint. */
  #plxLeaseEditModalJs.modal {
    overflow-y: auto;
  }

  #plxLeaseEditModalJs .modal-dialog,
  #plxLeaseEditModalJs .modal-content {
    max-height: none;
  }

  #plxLeaseEditModalJs .modal-body {
    display: block;
    overflow: visible;
  }

  #plxLeaseEditModalJs .plx-ml-detail-main-scroll,
  #plxLeaseEditModalJs .plx-ml-detail-sidebar .plx-card {
    max-height: none;
  }

  #plxLeaseEditModalJs .plx-ml-detail-main-scroll,
  #plxLeaseEditModalJs .plx-ml-detail-sidebar .plx-card-body {
    overflow-y: visible;
  }

  .plx-ml-instalment-totals {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ml-notes-grid {
    grid-template-columns: 1fr;
  }

  .plx-ml-action-row {
    grid-template-columns: 1fr;
  }

  .plx-ml-select-units-filters-group .plx-select,
  .plx-ml-select-units-filters-group .select2-container {
    flex: 1 1 calc((100% - var(--space-3)) / 2);
  }

  .plx-ml-select-units-filters-group .plx-btn {
    flex: 0 0 auto;
  }

  .plx-form-spacer-js {
    display: none;
  }

  .plx-ml-unit-rate-row {
    align-items: stretch;
    flex-direction: column;
  }

  .plx-ml-unit-rate-row-label {
    flex-basis: auto;
  }

  .plx-ml-back-footer-bar {
    left: 0;
  }

  .plx-ml-back-footer-bar {
    padding: var(--space-3) var(--space-4);
  }

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

@media (min-width: 576px) and (max-width: 767.98px) {
/* Split into one block per tier (576-767.98 / 0-575.98) to stay within the
   project's strict 6-tier breakpoint scale instead of a bare max-width
   spanning both tiers. */

  .plx-ml-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ml-card-grid:not([data-plx-paginated="true"]) {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ml-card-grid:not([data-plx-paginated="true"]) {
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }

/* Tier 2+3 of the project's strict 6-tier breakpoint scale (576–991.98px)
   — same 330px card-width tuning as Manage Bookings' own paginated grid
   (manage-bookings.css), narrower than the 335px desktop default. */

  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"] {
    grid-template-columns: repeat(var(--plx-ml-page-size, 3), 330px);
  }

/* Single column below 767.98px (same breakpoint every other 2-up row in
   this file already stacks at — .plx-form-row/.plx-ml-notes-grid) — this
   grid never actually had a stacking breakpoint of its own before, unlike
   Manage Bookings' own .plx-mbm-info-grid, which does. The vertical
   divider has nothing left to separate once there's only one column, so
   it drops with it. */

/* Split into one block per tier (576-767.98 / 0-575.98) to stay within the
   project's strict 6-tier breakpoint scale instead of a bare max-width
   spanning both tiers. */

  .plx-ml-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .plx-ml-info-item:nth-child(odd)::before {
    display: none;
  }

  .plx-ml-quickfacts-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .plx-ml-quickfacts-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ml-detail-layout {
    grid-template-columns: 1fr;
  }

  /* Stacked single column (.plx-ml-detail-layout's own breakpoint,
     above) — one plain scroll on the modal as a whole instead of the
     desktop/tablet per-column scrolling, which only makes sense when
     main/sidebar are side by side sharing a row height. Same reset
     Manage Bookings' own modals apply at this exact breakpoint. */
  #plxLeaseEditModalJs.modal {
    overflow-y: auto;
  }

  #plxLeaseEditModalJs .modal-dialog,
  #plxLeaseEditModalJs .modal-content {
    max-height: none;
  }

  #plxLeaseEditModalJs .modal-body {
    display: block;
    overflow: visible;
  }

  #plxLeaseEditModalJs .plx-ml-detail-main-scroll,
  #plxLeaseEditModalJs .plx-ml-detail-sidebar .plx-card {
    max-height: none;
  }

  #plxLeaseEditModalJs .plx-ml-detail-main-scroll,
  #plxLeaseEditModalJs .plx-ml-detail-sidebar .plx-card-body {
    overflow-y: visible;
  }

/* Split into one block per tier (576-767.98 / 0-575.98) to stay within the
   project's strict 6-tier breakpoint scale instead of a bare max-width
   spanning both tiers. */

  .plx-ml-instalment-totals {
    grid-template-columns: repeat(2, 1fr);
  }

/* Split into one block per tier (576-767.98 / 0-575.98) to stay within the
   project's strict 6-tier breakpoint scale instead of a bare max-width
   spanning both tiers. */

  .plx-ml-select-units-filters-group .plx-select,
  .plx-ml-select-units-filters-group .select2-container {
    flex: 1 1 calc((100% - var(--space-3)) / 2);
  }

  .plx-ml-select-units-filters-group .plx-btn {
    flex: 0 0 auto;
  }

/* Split into one block per tier (576-767.98 / 0-575.98) to stay within the
   project's strict 6-tier breakpoint scale instead of a bare max-width
   spanning both tiers. */

  .plx-form-spacer-js {
    display: none;
  }

  .plx-ml-back-footer-bar {
    left: 0;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Skyview (data-plx-columns="3"): 3 flexible columns, 210px floor. */
  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"][data-plx-columns="3"] {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
  }

  .plx-ml-card-grid:not([data-plx-paginated="true"]) {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"] {
    grid-template-columns: repeat(var(--plx-ml-page-size, 3), 330px);
  }

  .plx-ml-quickfacts-row {
    grid-template-columns: repeat(3, 1fr);
  }

/* Split into one block per tier (768-991.98 / 576-767.98 / 0-575.98) to stay
   within the project's strict 6-tier breakpoint scale instead of a bare
   max-width spanning all of them. */

  .plx-ml-detail-layout {
    grid-template-columns: 1fr;
  }

/* Split into one block per tier (768-991.98 / 576-767.98 / 0-575.98) to stay
   within the project's strict 6-tier breakpoint scale instead of a bare
   max-width spanning all of them. */

  /* Stacked single column (.plx-ml-detail-layout's own breakpoint,
     above) — one plain scroll on the modal as a whole instead of the
     desktop/tablet per-column scrolling, which only makes sense when
     main/sidebar are side by side sharing a row height. Same reset
     Manage Bookings' own modals apply at this exact breakpoint. */
  #plxLeaseEditModalJs.modal {
    overflow-y: auto;
  }

  #plxLeaseEditModalJs .modal-dialog,
  #plxLeaseEditModalJs .modal-content {
    max-height: none;
  }

  #plxLeaseEditModalJs .modal-body {
    display: block;
    overflow: visible;
  }

  #plxLeaseEditModalJs .plx-ml-detail-main-scroll,
  #plxLeaseEditModalJs .plx-ml-detail-sidebar .plx-card {
    max-height: none;
  }

  #plxLeaseEditModalJs .plx-ml-detail-main-scroll,
  #plxLeaseEditModalJs .plx-ml-detail-sidebar .plx-card-body {
    overflow-y: visible;
  }

  .plx-ml-select-units-filters-group .plx-select,
  .plx-ml-select-units-filters-group .select2-container {
    width: 160px;
  }

/* Split into one block per tier (768-991.98 / 576-767.98 / 0-575.98) to stay
   within the project's strict 6-tier breakpoint scale instead of a bare
   max-width spanning all of them — the 575.98px block below still overrides
   this one's other property at the narrowest tier via source order. */

  .plx-ml-back-footer-bar {
    left: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Skyview (data-plx-columns="3"): 3 flexible columns, 210px floor. */
  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"][data-plx-columns="3"] {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
  }

/* Split into one block per tier (992-1199.98 / 768-991.98 / 576-767.98 /
   0-575.98) to stay within the project's strict 6-tier breakpoint scale
   instead of a bare max-width spanning all of them — the block below still
   overrides this one at its narrower tiers via source order. */

  .plx-ml-card-grid:not([data-plx-paginated="true"]) {
    grid-template-columns: repeat(2, 1fr);
  }

/* Split into one block per tier (992-1199.98 / 768-991.98 / 576-767.98 /
   0-575.98) to stay within the project's strict 6-tier breakpoint scale
   instead of a bare max-width spanning all of them — the block below still
   overrides this one at its narrower tiers via source order. */

  .plx-ml-quickfacts-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .plx-ml-select-units-filters-group .plx-select,
  .plx-ml-select-units-filters-group .select2-container {
    width: 160px;
  }

  /* 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-ml-back-footer-bar {
    min-height: 81px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Skyview (data-plx-columns="3"): 3 flexible columns, 210px floor. */
  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"][data-plx-columns="3"] {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
  }

/* Same 1200-1399.98px density-trim window Manage Bookings' own stat grid
   uses to recover width at cramped laptop sizes — this grid stays at 4
   columns through this whole range, just tighter gap/padding, instead of
   dropping a column count it's already narrow enough to keep. */

  .plx-ml-stat-grid {
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }

  .plx-ml-card-footer {
    flex-wrap: nowrap;
  }

  .plx-ml-card-footer-group {
    flex-wrap: nowrap;
  }

/* iPad Pro and above (>=1200px) — 335px, matching Manage Bookings' own
   tier-5/6 split (manage-bookings.css) which re-declares its default
   width here for the same strict-6-tier documentation consistency. */

  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"] {
    grid-template-columns: repeat(var(--plx-ml-page-size, 3), 335px);
  }

  .plx-ml-select-units-filters-group .plx-select,
  .plx-ml-select-units-filters-group .select2-container {
    width: 160px;
  }

  /* 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-ml-back-footer-bar {
    min-height: 81px;
  }

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

@media (min-width: 1400px) {
  /* Skyview (data-plx-columns="3"): 3 flexible columns, 210px floor. */
  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"][data-plx-columns="3"] {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
  }

  .plx-ml-card-grid-scroll .plx-ml-card-grid[data-plx-paginated="true"] {
    grid-template-columns: repeat(var(--plx-ml-page-size, 3), 340px);
  }

  .plx-ml-card-footer {
    flex-wrap: nowrap;
  }

  .plx-ml-card-footer-group {
    flex-wrap: nowrap;
  }

  .plx-ml-select-units-filters-group .plx-select,
  .plx-ml-select-units-filters-group .select2-container {
    width: 160px;
  }

  /* 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-ml-back-footer-bar {
    min-height: 81px;
  }
}