/* Finance > Billing — reuses Manage Bookings' own stat-card
   body (.plx-mb-stat-card/-icon/-body/-title/-label/-value,
   manage-bookings.css, loaded alongside this file) as-is; only the grid
   container itself is page-specific (4 even columns here, not that page's
   own 6). Also reuses the shared .plx-tabs/-tab, .plx-filter-bar,
   .plx-pagination/.plx-cards-empty, and
   .plx-mb-back-footer-bar/.plx-page-has-sticky-footer components/pages as-is
   — only the invoice card list itself (plx-fin-*) is new here. */
.plx-fin-stat-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--space-6);
}

.plx-fin-invoice-list {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: var(--space-4);
}

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

/* Same wrapper recipe as manage-bookings.css's .plx-mbm-info-icon/
   manage-leases.css's .plx-ml-info-icon — was a bare colored glyph with no
   tinted box, unlike the Figma reference (also fixed there, see
   .plx-mb-group-header-icon/.plx-ml-group-header-icon). */
.plx-fin-invoice-list-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-fin-invoice-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plx-fin-invoice-card {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Same drop-shadow treatment as OTA Allotments' own card
   (.plx-allotment-card, operations.css) — base shadow at rest, a
   stronger one on hover. */
.plx-fin-invoice-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

/* Wraps the View button as its own flex child of .plx-fin-invoice-card,
   alongside .plx-fin-invoice-card-body (that one's own layout is untouched
   by this) — gives the button proper spacing against the card's own gap
   without the button itself having to carry layout concerns. */
.plx-fin-invoice-card-actions {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding-left: var(--space-4);
  position: relative;
}

/* Same inset ::before divider technique as .plx-fin-invoice-field above,
   just on this wrapper instead of a border-left/negative-margin hack on
   the button itself. */
.plx-fin-invoice-card-actions::before {
  background: var(--border-default);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

.plx-fin-invoice-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

/* Per Figma: a divider line between the two field rows, not just gap
   (which was the only spacing before — no line ever printed). Bottom
   padding on every row + border/top-padding only on the second (:not
   first-child) keeps the same visual gap on both sides of that line. */
.plx-fin-invoice-card-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: var(--space-3);
}

.plx-fin-invoice-card-row:last-child {
  padding-bottom: 0;
}

.plx-fin-invoice-card-row + .plx-fin-invoice-card-row {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-3);
}

.plx-fin-invoice-field {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  justify-content: center;
}

/* Vertical dividers between fields — same inset ::before technique used
   project-wide (Manage Bookings/Manage Leases tables, Lease Summary
   quickfacts) rather than a real border-right, which would run the full
   row height instead of reading as a per-field segment. */
.plx-fin-invoice-field:not(:last-child)::before {
  background: var(--border-default);
  bottom: 0;
  content: '';
  position: absolute;
  right: calc(var(--space-4) / -2);
  top: 0;
  width: 1px;
}

.plx-fin-invoice-field-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.plx-fin-invoice-field-value {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plx-fin-invoice-field-value:has(.plx-select) {
  overflow: visible;
}

/* Balance Due reuses the shared .plx-text-success/-danger color utilities
   (typography.css) but needs bold weight to match Total Amount's own
   boldness per Figma — scoped here rather than adding font-weight to those
   two utility classes globally, since they're used elsewhere at normal
   weight (e.g. plain inline status text).
   Color is re-declared here too, not just weight: .plx-fin-invoice-field-value
   (this file) and .plx-text-success/-danger (typography.css) are equal
   specificity, and this file loads after app.css/typography.css in
   layouts/app.blade.php, so .plx-fin-invoice-field-value's own
   color: var(--text-primary) was silently winning the cascade and
   overriding the utility's green/red — the amount rendered in default text
   color despite the class being present. Two-class selectors here outrank
   both single-class rules regardless of load order. */
.plx-fin-invoice-field-value.plx-text-success,
.plx-fin-invoice-field-value.plx-text-danger {
  font-weight: var(--weight-bold);
}

.plx-fin-invoice-field-value.plx-text-success {
  color: var(--color-success);
}

.plx-fin-invoice-field-value.plx-text-danger {
  color: var(--color-danger);
}

.plx-fin-invoice-field-value-id,
.plx-fin-invoice-field-value-amount {
  color: var(--pm-primary);
  font-weight: var(--weight-bold);
}

/* Guest field's own status dot (Figma reference) — decorative only in this
   static demo, no defined meaning wired to real data yet. */
.plx-fin-guest-dot {
  background: var(--color-success);
  border-radius: var(--radius-full);
  display: inline-block;
  height: 6px;
  margin-left: var(--space-1);
  vertical-align: middle;
  width: 6px;
}

/* Booking ID dropdown (every invoice card, single- and multi-booking
   alike) — a real select.plx-select, but with its own custom Select2 init
   (finance-billing.js's own .plx-fin-booking-select wiring, not the global
   select2-init.js auto-init) so the open list can render each option as
   two lines ("Booking 1" / "#BK-22") per Figma. Sits inside an inline-flex
   field value (not a filter-bar row), so it still needs its own
   width/select2-container override per select2-init.js's own documented
   pattern (see property-detail.js/booking-engine.css for the same fix). */
.plx-fin-invoice-field-value .plx-select,
.plx-fin-invoice-field-value .select2-container {
  width: auto;
}

/* Two-line option row for the Booking ID dropdown's open list
   (templateResult in finance-billing.js) — label on top, the booking's own
   ID below in muted text, matching the Figma reference. */
.plx-fin-booking-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plx-fin-booking-option-label {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.plx-fin-booking-option-id {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Both spans set their own color above, which otherwise beats the
   highlighted/selected <li>'s inherited white text (properties-select2.css)
   on specificity — without this, hovering/selecting an option left the
   label dark and the ID muted-gray instead of turning white like every
   other Select2 option in the app. */
.select2-results__option--highlighted .plx-fin-booking-option-label,
.select2-results__option--highlighted .plx-fin-booking-option-id,
.select2-results__option[aria-selected="true"] .plx-fin-booking-option-label,
.select2-results__option[aria-selected="true"] .plx-fin-booking-option-id {
  color: var(--text-inverse);
}

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

.plx-fin-invoice-list-footer .plx-pagination {
  padding: 0;
}

/* Same recipe as every other page's own copy of this class (settings.css,
   properties.css, finance-billing-generate.css, finance-booking-ledger.css,
   operations.css). This page's 5 entries-count elements previously used
   .plx-entries-info instead — a class this file never actually defined
   (only operations.css did, which this page doesn't load), so all 5
   rendered completely unstyled. Renamed to the real established
   convention rather than adding yet another copy of the same rule under
   a different name. */
.plx-settings-table-footer-info {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* Empty-state message for the invoice/accounting/credit card lists. The
   header comment above lists it as reused "as-is", but none of the sheets
   loaded alongside this one (manage-bookings.css, finance-payment-*.css)
   define it, so it rendered unstyled and left-aligned when a list was empty. */
.plx-cards-empty {
  color: var(--text-muted);
  font-size: var(--text-base);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

/* ==========================================================================
   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-fin-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .plx-fin-invoice-card-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .plx-fin-invoice-card {
    flex-direction: column;
    align-items: stretch;
  }

  .plx-fin-invoice-card-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-fin-invoice-field:nth-child(2n)::before {
    display: none;
  }

  .plx-fin-invoice-card-actions {
    padding-left: 0;
    padding-top: var(--space-4);
  }

  .plx-fin-invoice-card-actions::before {
    bottom: auto;
    height: 1px;
    right: 0;
    top: 0;
    width: auto;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .plx-fin-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-fin-invoice-card-row {
    grid-template-columns: repeat(3, 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. */

  .plx-fin-invoice-card {
    flex-direction: column;
    align-items: stretch;
  }

  .plx-fin-invoice-card-row {
    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. */

  .plx-fin-invoice-field:nth-child(2n)::before {
    display: none;
  }

/* Actions column becomes a full-width footer once the card itself stacks
   (flex-direction: column above) — its divider needs to flip from a
   vertical left-edge line to a horizontal top one to still read as "a
   separator before this section" instead of a stray vertical stub. 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. */

  .plx-fin-invoice-card-actions {
    padding-left: 0;
    padding-top: var(--space-4);
  }

  .plx-fin-invoice-card-actions::before {
    bottom: auto;
    height: 1px;
    right: 0;
    top: 0;
    width: auto;
  }
}

@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-fin-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-fin-invoice-card-row {
    grid-template-columns: repeat(3, 1fr);
  }

/* .plx-fin-invoice-field's :not(:last-child) divider only knows about the
   true last DOM child (field 5 of 5) — it has no idea the row itself wraps
   to fewer columns at narrower widths, so the last field of every wrapped
   *visual* row (field 3 of 5 at 3-col, fields 2/4 of 5 at 2-col) still
   printed a trailing divider with no column beside it to separate from.
   Suppressing it by nth-child position per breakpoint — the actual fix,
   not just repositioning the line — since which field ends a row changes
   with the column count itself (3-col: every 3rd field; 2-col: every 2nd).
   The 3-col rule is bounded to that tier only (min-width: 768px) — without
   it, it stayed active below 767.98px too and kept hiding field 3's
   divider even once the 2-col rule took over, where field 3 sits beside
   field 4 in the same row and needs its own divider back. Split across
   tier-3/tier-4 to stay within the project's strict 6-tier breakpoint
   scale instead of a cross-tier span. */

  .plx-fin-invoice-field:nth-child(3n)::before {
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
/* 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 four — the 767.98px block
   below still overrides this one back to 2 columns at its narrower
   tiers via source order. */

  .plx-fin-invoice-card-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .plx-fin-invoice-field:nth-child(3n)::before {
    display: none;
  }
}