/* Finance > Payments — reuses Billing's stat grid, tabs, filter bar and
   invoice-card list (finance-billing.css, loaded alongside this file) and
   Booking Ledger's info note (.plx-bl-formula-note); only the pieces below
   are specific to this page. */

/* Actions column: status pill stacked above the View button, per Figma. */
.plx-fin-pay-actions {
  flex-direction: column;
  gap: var(--space-2);
  /* Fixed (not min-) so the field columns line up across cards whose
     status pills differ in width. */
  width: 160px;
}

.plx-fin-pay-mode {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
}

.plx-fin-pay-mode-upi {
  color: var(--pm-primary);
  font-size: var(--text-xs);
  font-style: italic;
  font-weight: var(--weight-bold);
}

/* Mastercard-style overlapping circles. */
.plx-fin-pay-mode-card {
  display: inline-flex;
}

.plx-fin-pay-mode-card span {
  border-radius: var(--radius-full);
  height: 14px;
  width: 14px;
}

.plx-fin-pay-mode-card span:first-child {
  background: #EB001B;
}

.plx-fin-pay-mode-card span:last-child {
  background: #F79E1B;
  margin-left: -6px;
  opacity: 0.9;
}

.plx-fin-pay-note {
  margin-top: var(--space-4);
}

/* Security Deposits cards: 4 fields per row instead of 5. */
.plx-fin-invoice-card-row.plx-fin-pay-row-4 {
  grid-template-columns: repeat(4, 1fr);
}

.plx-fin-pay-stat-sub {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Tab-scoped chrome (topbar buttons, stats, filter bars, banners): the
   browser's own [hidden] rule has the lowest priority, so any component
   that sets display (grid/flex) would beat it. Two attribute selectors
   outrank those single-class display rules without needing !important. */
[data-plx-show-tabs][hidden] {
  display: none;
}

/* Manage button's chevron + dropdown menu — same Select2-lookalike recipe
   as Billing's Generate menu (.plx-fin-generate-menu,
   finance-billing-generate.css, not loaded on this page), scoped here. */
.plx-fin-pay-manage-btn {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
}

.plx-fin-pay-menu {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-focus);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  padding: var(--space-1);
}

.plx-fin-pay-menu-item {
  align-items: center;
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  display: flex;
  font-family: var(--font-body);
  font-size: var(--text-base);
  gap: var(--space-2);
  margin-bottom: 2px;
  padding: var(--space-2) var(--space-3);
}

.plx-fin-pay-menu li:last-child .plx-fin-pay-menu-item {
  margin-bottom: 0;
}

.plx-fin-pay-menu-icon {
  color: var(--text-secondary);
  flex: 0 0 auto;
}

.plx-fin-pay-menu-item:hover,
.plx-fin-pay-menu-item:focus {
  background-color: var(--select-highlight-bg);
  color: var(--text-inverse);
}

.plx-fin-pay-menu-item:hover .plx-fin-pay-menu-icon,
.plx-fin-pay-menu-item:focus .plx-fin-pay-menu-icon {
  color: var(--text-inverse);
}

/* Stat-card icon: small rounded square with inner padding (per Figma), not
   Manage Bookings' larger default box. */
/* Icon vertically centred beside the text stack, per Figma. */
.plx-fin-stat-grid .plx-mb-stat-card {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}

/* Security Deposits rows hold 4 fields (not Billing's 5), so Billing's own
   5→3→2 column steps don't fit: 4 columns from 1200px, 2 below. Dividers
   follow the visible columns (after field 2 and 4 → none at 2-col). */
@media (max-width: 1199.98px) {
  .plx-fin-invoice-card-row.plx-fin-pay-row-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-fin-pay-row-4 .plx-fin-invoice-field:not(:last-child)::before {
    display: block;
  }

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

/* Stacked card: the actions column becomes a full-width footer, so the
   pill/button row sits side by side instead of a 160px column. */
@media (max-width: 767.98px) {
  .plx-fin-pay-actions {
    flex-direction: row;
    justify-content: space-between;
    width: auto;
  }
}

/* Narrow columns: let long values (property names) wrap instead of being
   clipped under the next column. */
@media (max-width: 767.98px) {
  .plx-fin-pay-row-4 .plx-fin-invoice-field-value {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* Billing's 4-up stat grid only drops to 2 columns below 992px, but with the
   sidebar open the 4 cards (esp. Security Deposits' sub-lines) don't fit
   until ~1400px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .plx-fin-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}