/* Booking Ledger (Finance > Account Ledger card, and Manage Bookings' own
   Ledger button — one shared demo page, see routes/web.php's own comment on
   why there's only one route for both entry points). Reuses
   .plx-mb-back-footer-bar/.plx-page-has-sticky-footer (manage-bookings.css)
   for the sticky Back bar, same as every other page in this rollout (see
   HANDOVER.md's 2026-09-15 sitewide sticky-footer entry). */

.plx-bl-section {
  margin-bottom: var(--space-4);
}

.plx-bl-header-row {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.plx-bl-divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 0 0 var(--space-4);
}

/* .plx-btn-sm's own base height/padding (28px / 0 8px) lose to Manage
   Bookings' own higher-specificity .plx-mb-card-footer .plx-btn-secondary
   rule (32px / 0 var(--space-3)) for the Ledger button it's being matched
   against — mirrored here at the same specificity so this button renders
   identically rather than falling back to .plx-btn-sm's own smaller size. */
.plx-bl-header-row .plx-btn-secondary {
  height: var(--space-8);
  padding: 0 var(--space-3);
}

.plx-bl-booking-id-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Same font-size as Manage Bookings' own card label/value pair
   (.plx-mb-card-label/-value, manage-bookings.css) — was --text-xs, too
   small next to that reference. */
.plx-bl-field-label {
  color: var(--text-muted);
  font-size: var(--text-base);
}

.plx-bl-booking-id-row {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.plx-bl-booking-id-value {
  color: var(--pm-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.plx-bl-info-grid {
  column-gap: var(--space-4);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: var(--space-4);
}

.plx-bl-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.plx-bl-field-value {
  color: var(--pm-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.plx-bl-field-value-muted {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

.plx-bl-section-title {
  color: var(--pm-primary);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

/* Transactions table — same shape as this project's other plain data
   tables (Settings pages, Finance detail tables). */
.plx-bl-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: auto;
}

.plx-bl-table thead th {
  background: var(--bg-thead);
  border-bottom: 1px solid var(--border-default);
  color: var(--pm-primary);
  padding: var(--space-3);
  position: relative;
  text-align: left;
  white-space: nowrap;
}

.plx-bl-table td {
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-sm);
  padding: var(--space-3);
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
}

.plx-bl-table tbody tr:last-child td {
  border-bottom: none;
}

/* Vertical column dividers — same inset ::before technique as the Tax
   Summary tables' own .plx-*-tax-summary-table (e.g. Booking Ancillary
   Invoice Generation's own), rather than a plain border-right so the line
   doesn't touch the row's own top/bottom edges. */
.plx-bl-table thead th:not(:last-child)::before,
.plx-bl-table tbody td:not(:last-child)::before {
  background: var(--border-medium);
  bottom: var(--space-2);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  width: 1px;
}

.plx-bl-time {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Lease Ledger's own table only (#plxLlTransactionsTableJs) — its
   Description text is much longer than Booking Ledger's (e.g. "Refund to
   Tenant (Security Deposit + Advance Overpayment)"), so under the shared
   nowrap rule it forced horizontal scroll far too early. A fixed layout
   with percentage widths (the previous fix) instead squeezed the short
   columns below their own content and let it spill over, scrolling anyway.
   Auto layout sizes every short column to its content (dates/amounts/
   status stay nowrap so they never break mid-value); Type, Description
   and Reference No. may wrap, absorbing the remaining width. The wrapper's overflow: auto stays
   as the fallback where even that can't fit (phones/small tablets). */
#plxLlTransactionsTableJs {
  table-layout: auto;
  width: 100%;
}

#plxLlTransactionsTableJs td:nth-child(3),
#plxLlTransactionsTableJs td:nth-child(4) {
  white-space: normal;
}

/* Type keeps its pill on one line (nowrap, from the shared rule) and gets
   a floor wide enough for the longest pill ("Refund Credit") plus cell
   padding, so the pill never spills over the column divider. */
#plxLlTransactionsTableJs th:nth-child(2),
#plxLlTransactionsTableJs td:nth-child(2) {
  min-width: 150px;
}

#plxLlTransactionsTableJs td:nth-child(3) {
  min-width: 140px;
  overflow-wrap: anywhere;
}

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

/* Same footer/pagination shape as properties.css's own
   .plx-settings-table-footer (Manage Properties' Rooms tab) — copied
   rather than shared (page-scoped utility, not global). flex-wrap/gap
   keeps the count text and pager from overlapping at narrow widths; the
   pagination's own padding is reset to 0 here since .plx-pagination
   otherwise carries its own standalone padding meant for when it's not
   already inside a flex row with its own spacing. */
.plx-settings-table-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-4);
}

.plx-settings-table-footer .plx-pagination {
  padding: 0;
}

.plx-settings-table-footer-info {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Ledger Summary — one 4-column grid; each column is its own stack (Total
   Invoiced/Total Payment and Balance Due/Status are two stacked fields in
   their own column, Adjustments/Refunds are a label + two inline lines),
   matching the Figma reference's own single-card layout exactly rather
   than two separate grid rows. */
.plx-bl-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.plx-bl-summary-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-6);
}

.plx-bl-summary-col:first-child {
  padding-left: 0;
}

.plx-bl-summary-col:not(:first-child) {
  border-left: 1px solid var(--border-default);
}

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

.plx-bl-summary-label {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-1);
}

.plx-bl-summary-label .plx-icon {
  color: var(--text-muted);
}

.plx-bl-summary-value {
  color: var(--pm-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

/* .plx-text-danger (typography.css) loads before this page's own CSS, so
   without this override the two same-specificity rules' load order (this
   file wins) would silently keep Balance Due's negative figure in
   --pm-primary instead of red. */
.plx-bl-summary-value.plx-text-danger {
  color: var(--color-danger);
}

/* Label above, value on its own line below — per Figma reference, not a
   same-line label:value row (space-between made the value sit too far
   from its own label at this column width). */
.plx-bl-summary-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plx-bl-summary-line-label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.plx-bl-summary-line-value {
  font-weight: var(--weight-semibold);
}

/* Refund Balance highlight box — same "info banner" recipe as
   .plx-settings-info-banner (settings.css), in the warning palette instead
   of the accent one since this is a pending-refund callout, not a neutral
   hint. */
.plx-bl-refund-box {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

/* Only the figure itself (.plx-bl-refund-box-value below) is orange per
   the Figma reference — the label and note text stay neutral/muted, same
   as every other field label on this page. */
.plx-bl-refund-box-label {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  gap: var(--space-1);
}

.plx-bl-refund-box-value {
  color: var(--color-warning);
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-top: var(--space-1);
}

.plx-bl-refund-box-note {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* Same recipe as .plx-settings-info-banner (settings.css) — copied rather
   than shared, per this project's established convention. */
.plx-bl-formula-note {
  align-items: flex-start;
  background: var(--pm-accent-light);
  border-radius: var(--radius-md);
  color: var(--color-booked);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.plx-bl-formula-note .plx-icon {
  flex: 0 0 auto;
}

/* View Booking / Edit Booking popups (plxBlViewBookingModalJs/
   plxBlEditBookingModalJs, partials/_booking_ledger_modals.blade.php) —
   same independent per-column scroll treatment as Manage Bookings' own
   BK-21/BK-20/BK-18 .plx-mbm-layout popups (manage-bookings.css, its own
   ID-scoped block around .plx-mbm-layout/-main/-sidebar) — that block is
   scoped to those specific modal ids only, so this page's own ids need
   their own copy rather than inheriting it. Caps .modal-dialog/-content to
   the viewport and flexes .modal-body down through .plx-mbm-layout so the
   main column and sidebar each own their own scrollbar instead of the
   whole dialog growing past the viewport and the page itself scrolling.
   One deliberate difference from BK-21's own version: this page's sidebar
   holds TWO cards (Final Bill Summary + Documents), not BK-21's one, so
   there's no single card to stretch-and-scroll — the sidebar column itself
   scrolls instead once its two cards together exceed the column height. */
#plxBlViewBookingModalJs.modal,
#plxBlEditBookingModalJs.modal {
  overflow: hidden;
}

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

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

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

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

#plxBlViewBookingModalJs .plx-mbm-main,
#plxBlEditBookingModalJs .plx-mbm-main {
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-2);
}

#plxBlViewBookingModalJs .plx-mbm-sidebar,
#plxBlEditBookingModalJs .plx-mbm-sidebar {
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-2);
}

/* Without this, the sidebar's own overflow-y: auto above never actually
   triggers: as flex-column children, the two cards default to
   flex-shrink: 1 + min-height: auto, which lets them compress BELOW their
   own content's natural height to fit whatever room .plx-mbm-sidebar has
   — so the sidebar's scrollHeight never exceeds its clientHeight, and the
   content that no longer fits just paints past each card's own edge
   instead (unclipped, since a plain .plx-card has no overflow rule of its
   own) rather than the column scrolling. flex-shrink: 0 keeps both cards
   at their natural height so the sidebar actually overflows and its own
   scrollbar engages. */
#plxBlViewBookingModalJs .plx-mbm-sidebar > .plx-card,
#plxBlEditBookingModalJs .plx-mbm-sidebar > .plx-card {
  flex-shrink: 0;
}

/* ==========================================================================
   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-bl-header-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Stacked single column below 768px (.plx-mbm-layout's own generic,
     non-ID-scoped collapse-to-1-column rule in manage-bookings.css
     already applies here) — the desktop per-column split-scroll above
     only makes sense when main/sidebar sit side by side sharing a row
     height, so it's reset to one plain scroll on the modal body instead,
     same as BK-21's own mobile/tablet override. */
  #plxBlViewBookingModalJs.modal,
  #plxBlEditBookingModalJs.modal {
    overflow-y: auto;
  }

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

  #plxBlViewBookingModalJs .modal-body,
  #plxBlEditBookingModalJs .modal-body {
    display: block;
    overflow: visible;
  }

  #plxBlViewBookingModalJs .plx-mbm-layout,
  #plxBlEditBookingModalJs .plx-mbm-layout {
    display: block;
    flex: none;
  }

  #plxBlViewBookingModalJs .plx-mbm-main,
  #plxBlEditBookingModalJs .plx-mbm-main,
  #plxBlViewBookingModalJs .plx-mbm-sidebar,
  #plxBlEditBookingModalJs .plx-mbm-sidebar {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  /* .plx-mbm-layout going display: block above (its own generic
     collapse-to-1-column rule) drops its grid gap between the main/
     sidebar columns — with nothing to replace it, the sidebar's first
     card (Final Bill Summary) butts straight up against .plx-mbm-main's
     own last element (the Cancel Booking/Edit/Print button row) with no
     space between them at all. Restored here on the sidebar itself, same
     var(--space-6) the grid gap used at desktop width. */
  #plxBlViewBookingModalJs .plx-mbm-sidebar,
  #plxBlEditBookingModalJs .plx-mbm-sidebar {
    margin-top: var(--space-6);
  }

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

  .plx-bl-summary-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-4);
  }

  .plx-bl-summary-col:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }

  .plx-bl-summary-col:nth-child(3),
  .plx-bl-summary-col:nth-child(4) {
    border-top: 1px solid var(--border-default);
    padding-top: var(--space-4);
  }

  .plx-bl-info-grid {
    grid-template-columns: 1fr;
  }

  /* Single column — every column is now its own row, so no vertical
     dividers/left padding anywhere; every column instead gets the same
     top-border row separator nth-child(3) already uses above, except the
     very first (nothing above it to separate from). */
  .plx-bl-summary-grid {
    grid-template-columns: 1fr;
  }

  .plx-bl-summary-col {
    border-left: none;
    padding-left: 0;
  }

  .plx-bl-summary-col:not(:first-child) {
    border-top: 1px solid var(--border-default);
    padding-top: var(--space-4);
  }
}

@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. */

  /* Same stacked-single-column scroll reset as the 0-575.98 tier above —
     .plx-mbm-layout is still 1 column at this tier too (its own generic
     collapse rule in manage-bookings.css spans 0-767.98px). */
  #plxBlViewBookingModalJs.modal,
  #plxBlEditBookingModalJs.modal {
    overflow-y: auto;
  }

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

  #plxBlViewBookingModalJs .modal-body,
  #plxBlEditBookingModalJs .modal-body {
    display: block;
    overflow: visible;
  }

  #plxBlViewBookingModalJs .plx-mbm-layout,
  #plxBlEditBookingModalJs .plx-mbm-layout {
    display: block;
    flex: none;
  }

  #plxBlViewBookingModalJs .plx-mbm-main,
  #plxBlEditBookingModalJs .plx-mbm-main,
  #plxBlViewBookingModalJs .plx-mbm-sidebar,
  #plxBlEditBookingModalJs .plx-mbm-sidebar {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  /* Same lost-grid-gap fix as the 0-575.98 tier above. */
  #plxBlViewBookingModalJs .plx-mbm-sidebar,
  #plxBlEditBookingModalJs .plx-mbm-sidebar {
    margin-top: var(--space-6);
  }

  .plx-bl-header-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

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

  .plx-bl-summary-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-4);
  }

  .plx-bl-summary-col:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }

  .plx-bl-summary-col:nth-child(3),
  .plx-bl-summary-col:nth-child(4) {
    border-top: 1px solid var(--border-default);
    padding-top: var(--space-4);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
/* 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 three — the 575.98px block below still
   overrides this one back to 1 column at the narrowest tier via source
   order. */

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

  /* 4 columns become 2×2 — the 3rd/4th column's own divider/padding (meant
     for sitting beside column 2/3) would otherwise land mid-row against
     column 1/2's own right edge instead of at the start of row 2, so
     every "start of its own row" column resets to column 1's own
     no-divider/no-padding state, and every "2nd of its own row" column
     gets a top border instead (a real row boundary now exists that the
     4-column layout never needed). */
  .plx-bl-summary-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-4);
  }

  .plx-bl-summary-col:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }

  .plx-bl-summary-col:nth-child(3),
  .plx-bl-summary-col:nth-child(4) {
    border-top: 1px solid var(--border-default);
    padding-top: var(--space-4);
  }
}