/* Finance > Billing > Generate (static demo). Reuses shared .plx-tabs,
   .plx-filter-bar, .plx-table, .plx-pagination-item, .plx-mb-back-footer-bar
   as-is; .plx-settings-table-footer/-info and .plx-settings-info-banner are
   re-declared here rather than relying on properties.css/settings.css
   (never loaded on this page) since the class names are shared, not the
   rule itself — same convention properties.css's own copy documents. */

.plx-settings-info-banner {
  align-items: flex-start;
  background: var(--pm-accent-light);
  border-radius: var(--radius-md);
  color: var(--color-booked);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.plx-settings-info-banner .plx-icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.plx-fin-generate-tab {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.plx-filter-bar-fixed {
  margin-top: var(--space-4);
}

.plx-fin-generate-banner {
  margin-top: var(--space-4);
}

/* Card sits with real breathing room below the info banner instead of
   touching it directly. */
.plx-fin-generate-table-card {
  margin-top: var(--space-4);
}

.plx-fin-generate-card-title {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

/* Leases panel's card header also holds a "Sort by" control on the right,
   so the title's own margin-bottom (above) needs cancelling there — this
   row supplies its own margin-bottom instead. */
.plx-fin-generate-card-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.plx-fin-generate-card-header .plx-fin-generate-card-title {
  margin-bottom: 0;
}

.plx-fin-generate-sort {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.plx-fin-generate-sort-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.plx-fin-generate-sort .plx-select {
  width: auto;
}

/* Table styling matched to the project-standard recipe used elsewhere
   (#plxRoomConversionTableJs, operations.css; Rooms/Units, properties.css):
   --bg-thead header band + --pm-primary text, rounded card frame via the
   wrap, and inset ::before column dividers in --border-medium rather than
   the shared .plx-table's own plain/borderless default. */
.plx-fin-generate-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.plx-fin-generate-table thead th {
  background: var(--bg-thead);
  border-bottom-color: var(--border-default);
  color: var(--pm-primary);
  position: relative;
}

.plx-fin-generate-table tbody td {
  position: relative;
}

.plx-fin-generate-table thead th:not(:last-child)::before,
.plx-fin-generate-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-fin-generate-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plx-fin-generate-booking-id {
  align-items: center;
  color: var(--pm-primary);
  display: inline-flex;
  font-weight: var(--weight-semibold);
  gap: var(--space-2);
}

.plx-fin-generate-status-pill {
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
}

.plx-fin-generate-guest {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.plx-fin-generate-nights {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.plx-fin-generate-next-invoice-date {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.plx-fin-generate-next-invoice-due {
  color: var(--color-success);
  font-size: var(--text-xs);
}

.plx-fin-generate-next-invoice-overdue {
  color: var(--color-danger);
  font-size: var(--text-xs);
}

.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);
}

/* .plx-mb-back-footer-bar (manage-bookings.css) has no gap of its own,
   since its only other caller (Manage Bookings itself) holds a single
   Back button — this page needs three buttons spaced apart. */
.plx-fin-generate-footer-bar {
  gap: var(--space-3);
}

/* Bookings and Leases each render their own footer + Generate dropdown
   (see billing-generate.blade.php) so "Invoice" can point at each tab's
   own review flow — same show/hide-by-attribute pattern as
   .plx-tab-panel (components/tabs.css), toggled in finance-billing-generate.js. */
.plx-fin-generate-footer-bar[data-plx-footer-panel] {
  display: none;
}

.plx-fin-generate-footer-bar[data-plx-footer-panel][data-plx-active="true"] {
  display: flex;
}

/* Generate button's dropdown menu — pixel-matched to the project's
   established Select2/Select2-lookalike dropdown recipe (properties-
   select2.css's .select2-dropdown/.select2-results__option, and
   .plx-room-chip-dropdown in properties.css, which restyled a custom
   dropdown to match that same recipe) rather than Bootstrap's own default
   .dropdown-menu look. Scoped to .plx-fin-generate-menu so it never
   touches a plain Bootstrap dropdown elsewhere in the app. */
.plx-fin-generate-menu {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-focus);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: var(--space-1);
  min-width: 200px;
}

.plx-fin-generate-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: 8px 12px;
}

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

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

.plx-fin-generate-menu-icon {
  flex: 0 0 auto;
}

.plx-fin-generate-menu-icon-invoice { color: var(--color-info); }
.plx-fin-generate-menu-icon-ancillary { color: var(--color-booked); }
.plx-fin-generate-menu-icon-debit { color: var(--color-warning); }
.plx-fin-generate-menu-icon-credit { color: var(--color-success); }

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