/* Lease Ancillary Invoice Generation (Finance > Billing > Generate >
   Ancillary Invoice, Leases tab). Duplicate of
   finance-billing-lease-invoice-generate.css with plx-lan- classes in
   place of plx-lig-, per this project's established convention of
   duplicating parallel flows rather than sharing one file (see OTA
   Allotments vs Booking Engine's own Room Inventory system). Reuses
   .plx-mb-back-footer-bar (manage-bookings.css) as-is. The
   .plx-fin-doc-items-table/.plx-fin-doc-item-title/.plx-fin-doc-totals-*
   rules below are copied (not shared via finance-billing-invoice.css) —
   that stylesheet also pins html/body/.plx-shell/.plx-main/.plx-content to
   a fixed 100vh with overflow:hidden for the Booking/Lease Invoice detail
   pages' own independent two-column scroll, and is documented there as
   "safe since it's the only page that loads it" — loading it here broke
   this page's normal whole-page scroll. Copying just the table/totals
   rules keeps the two pages' CSS fully independent. */

.plx-fin-doc-items-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

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

.plx-fin-doc-items-table td {
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  position: relative;
  vertical-align: top;
}

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

/* Inset vertical column dividers — same ::before technique as the
   Booking/Lease Invoice detail pages' own Invoice Items table
   (finance-billing-invoice.css) and #plxRoomConversionTableJs
   (operations.css). Dropped when this table's own CSS was first copied
   from that class; restoring it so this table reads consistently with
   every other .plx-fin-doc-items-table-based table in the app instead of
   looking flatter than the rest. */
.plx-lan-table thead th:not(:last-child)::before,
.plx-lan-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;
}

/* This table's cells hold form controls (inputs/Select2), not plain text —
   vertical-align: middle (overriding the inherited top above) keeps a
   short single-line row's controls centered instead of pinned to the top,
   same as every other editable-row table in the project (Other Charges
   modal, Room Type rows, etc). */
.plx-lan-table td {
  vertical-align: middle;
}

.plx-fin-doc-item-title {
  color: var(--pm-primary);
  display: block;
  font-weight: var(--weight-bold);
}

/* This page's own Charge Name sub-line (the billing-period date range)
   reads in the same blue as the title, just not bold — a genuinely
   different look than the Booking/Lease Invoice detail pages' own
   muted-gray .plx-fin-doc-item-sub, which this class name is copied from.
   Overridden here to match the Figma reference rather than that page's
   convention. */
.plx-fin-doc-item-sub {
  color: var(--pm-primary);
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  margin-top: var(--space-1);
}

.plx-fin-doc-totals-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

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

.plx-fin-doc-totals-line {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
}

.plx-fin-doc-totals-label {
  color: var(--pm-primary);
  font-size: var(--text-sm);
}

.plx-fin-doc-totals-value {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.plx-fin-doc-grand-total-row {
  align-items: baseline;
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}

.plx-fin-doc-grand-total-label {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.plx-fin-doc-grand-total-value {
  color: var(--pm-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

/* .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 Back/Review & Generate spaced apart. */
.plx-lan-footer-bar {
  gap: var(--space-3);
}

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

.plx-lan-section-title {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}

.plx-lan-section-subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: 0;
}

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

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

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

.plx-lan-field-value {
  color: var(--pm-primary);
  font-weight: var(--weight-semibold);
}

.plx-lan-details-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.plx-lan-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.plx-lan-table .plx-input {
  min-width: 6rem;
}

.plx-lan-row-index {
  color: var(--text-muted);
}

.plx-lan-total-js {
  color: var(--pm-primary);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.plx-lan-delete-btn {
  align-items: center;
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  display: inline-flex;
  padding: var(--space-1);
}

.plx-lan-delete-btn:hover {
  opacity: 0.75;
}

/* Two columns — Invoice Summary stacked with Remarks/Terms on the left,
   Tax Summary (added per Figma reference, 2026-09-18) alone on the right —
   same reflow as Lease Invoice Generation's own bottom grid. */
.plx-lan-bottom-grid {
  align-items: start;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}

.plx-lan-bottom-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.plx-lan-remarks-card .plx-textarea {
  margin-bottom: var(--space-4);
  width: 100%;
}

.plx-lan-terms-title {
  margin-top: var(--space-1);
}

/* Tax Summary's per-charge breakdown table — copied from Lease Invoice
   Generation's own equivalent block. Only .plx-lan-tax-summary-scroll (the
   table itself) scrolls horizontally — the outer wrap just clips corners,
   so the Total Tax footer row never scrolls with the table. */
.plx-lan-tax-summary-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.plx-lan-tax-summary-scroll {
  overflow: auto;
}

.plx-lan-tax-summary-table {
  min-width: 260px;
}

.plx-lan-tax-summary-table thead th {
  background: var(--bg-thead);
  border-bottom: 1px solid var(--border-default);
  color: var(--pm-primary);
  font-size: var(--text-xs);
  padding: var(--space-2);
  position: relative;
  text-align: center;
  white-space: normal;
}

.plx-lan-tax-summary-table thead th:first-child {
  text-align: left;
}

.plx-lan-tax-summary-table td {
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-xs);
  padding: var(--space-2);
  position: relative;
  text-align: center;
  vertical-align: middle;
}

.plx-lan-tax-summary-table td:first-child {
  text-align: left;
}

.plx-lan-tax-summary-table tbody tr:nth-child(even) {
  background: var(--bg-hover);
}

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

.plx-lan-tax-summary-table thead th:not(:last-child)::before,
.plx-lan-tax-summary-table tbody td:not(:last-child)::before {
  background: var(--border-medium);
  bottom: var(--space-1);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-1);
  width: 1px;
}

.plx-lan-tax-summary-desc {
  color: var(--color-info);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.plx-lan-tax-summary-total {
  align-items: baseline;
  background: var(--bg-thead);
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  padding: var(--space-3);
}

.plx-lan-tax-summary-total-label {
  color: var(--pm-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.plx-lan-tax-summary-total-value {
  color: var(--color-info);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

/* Per-row Tax picker (x-finance.lan-tax-dropdown) — a real Select2 multi-
   select, but with its own templateResult and summary label
   (finance-billing-lease-invoice-generate.js's initTaxSelect2), not the
   generic select2-init.js conversion or Select2's stock tag rendering. */
.plx-lan-table .select2-container {
  min-width: 6rem;
}

/* properties-select2.css only themes .select2-selection--single (this
   project's only Select2 usage until now) — the Tax picker is this
   project's first multi-select, so it needs the same box recipe copied
   for --multiple (border/height/chevron), scoped to this page only. */
.plx-lan-table .select2-container--default .select2-selection--multiple {
  align-items: center;
  background: var(--bg-surface);
  background-image: url('/assets/svg/icons/select-chevron.svg');
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 10px 6px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  height: var(--space-8);
  outline: none;
  position: relative;
  transition: border-color var(--transition-fast);
}

.plx-lan-table .select2-container--default.select2-container--open .select2-selection--multiple,
.plx-lan-table .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--border-focus);
}

/* Select2's own multi-select renders one removable tag per selection
   (.select2-selection__rendered's <li> children) — replaced with the
   single label (this row's own computed tax total, matching the merged
   "Tax Amount (₹)" column) injected as .plx-lan-tax-summary-js. */
.plx-lan-table .select2-selection--multiple .select2-selection__rendered {
  display: none;
}

/* Multi-select also always renders its own inline type-to-search <input>
   (.select2-search--inline, a sibling <li> inside .select2-selection__rendered
   above) as a genuine search/filter box — minimumResultsForSearch only
   suppresses the dropdown's own search bar, not this one. With only 2
   fixed options here there's nothing to search, so it's hidden outright
   (its own rule, not folded into .select2-selection__rendered above, so
   this stays correct even if that rule is ever narrowed to just the tags). */
.plx-lan-table .select2-search--inline,
.plx-lan-table .select2-search--inline .select2-search__field {
  display: none;
}

.plx-lan-tax-summary-js {
  color: var(--text-primary);
  font-size: var(--text-sm);
  left: var(--space-3);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Select2 sizes the dropdown panel to the trigger box's own width by
   default (8rem here) — too narrow for the checkbox+name+%+amount rows
   inside, forcing a horizontal scrollbar. dropdownCssClass (initTaxSelect2,
   finance-billing-lease-invoice-generate.js) tags just this dropdown so it
   can be widened independently of the trigger. No !important needed:
   Select2 also writes its own (narrower) inline width style on the panel
   every time it opens, but min-width still overrides a smaller inline
   width regardless of specificity/source, so this rule wins without
   having to fight it. */
.plx-lan-tax-dropdown-panel.select2-dropdown {
  min-width: 260px;
  width: auto;
}

/* Dropdown list rows — checkbox + name + rate% + this row's own tax
   amount, matching the Figma reference exactly (not Select2's default
   plain-text option list). white-space: nowrap on the label/percent stops
   "Tourism Tax" wrapping and overlapping the amount column at this width. */
.plx-lan-tax-option {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  width: 100%;
}

.plx-lan-tax-option .plx-checkbox-custom {
  flex-shrink: 0;
  pointer-events: none;
}

.plx-lan-tax-option-label {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.plx-lan-tax-option-percent {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.plx-lan-tax-option-amount {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  min-width: 3.5rem;
  text-align: right;
}

/* Select2 fills a selected/highlighted option's entire row with its own
   solid accent color by default (.select2-container--default
   .select2-results__option--highlighted.select2-results__option--selectable,
   select2.min.css, 3 classes) — wrong here, since the checkbox itself is
   what should show selection state, not a full-row fill (which also
   crushed the option's own text/amount contrast in the original render).
   Keep only a light hover tint, like every other custom dropdown row in
   this project (tax-dropdown.js's own .plx-tax-dropdown-row). No
   !important: chaining .select2-dropdown onto our own class (both
   already match this same element) adds a 3rd class here too, tying the
   vendor rule's specificity and winning on source order since this file
   loads after it. */
.select2-dropdown.plx-lan-tax-dropdown-panel .select2-results__option[aria-selected='true'],
.select2-dropdown.plx-lan-tax-dropdown-panel .select2-results__option--highlighted {
  background: var(--bg-hover);
  color: inherit;
}

/* Add Charge modal — reuses the fixed charge-name list + "Add Another
   Charge Type" pattern from Booking Engine's Other Charges modal
   (booking-engine.css's .plx-charges-*), stripped to just a checkbox +
   name column (Quantity/Rate/Tax are filled in on the main table after
   adding, not inside this modal). */
.plx-lan-charge-modal-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* --bg-thead tint + bold --pm-primary text — the same recipe
   .plx-charges-table thead th uses (booking-engine.css) for Other Charges'
   own "Charge Name" header; the shared .plx-table thead th rule has its own
   background commented out project-wide, so this needs restating here. */
.plx-lan-charge-modal-table thead th {
  background: var(--bg-thead);
  border-bottom-color: var(--border-default);
  color: var(--pm-primary);
}

.plx-lan-charge-modal-check-col {
  width: 40px;
}

.plx-lan-charge-modal-name-cell {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.plx-lan-charge-modal-add-wrap {
  padding: var(--space-3) var(--space-4);
}

.plx-lan-charge-modal-add-row {
  padding-top: var(--space-2);
}

.plx-lan-charge-modal-add-row-fields {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.plx-lan-charge-modal-add-row-fields input {
  flex: 1 1 auto;
}

.plx-lan-charge-modal-add-row-arrow {
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: 1;
}

.plx-lan-charge-modal-add-confirm,
.plx-lan-charge-modal-add-cancel {
  align-items: center;
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.plx-lan-charge-modal-add-confirm {
  color: var(--color-success);
}

.plx-lan-charge-modal-add-confirm:hover {
  background: var(--color-success-bg);
}

.plx-lan-charge-modal-add-cancel {
  color: var(--color-danger);
}

.plx-lan-charge-modal-add-cancel:hover {
  background: var(--color-danger-bg);
}

.plx-lan-charge-modal-fnb {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: calc(var(--text-lg) + var(--space-3));
}

/* Confirm button, moved into the modal body (same
   .plx-lan-charge-modal-table-wrap as the table/add-row above) instead of
   x-ui.modal's own $footer slot — reads the same as a real modal footer
   (top divider, right-aligned) without actually being one. */
.plx-lan-charge-modal-confirm-row {
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

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

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

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

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

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

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

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