/* Lease Debit Note Generation (Finance > Billing > Generate > Debit Note,
   Leases tab). Duplicate of
   finance-billing-booking-debit-note-generate.css with plx-ldn- classes in
   place of plx-bdn- and GST/Tourism Tax (not CGST/SGST) via
   x-finance.ldn-tax-dropdown, 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) for
   the same reason Booking Invoice Generation's own stylesheet documents:
   that file 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, which would break this page's
   normal whole-page scroll if loaded here too. */

.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). */
.plx-ldn-table thead th:not(:last-child)::before,
.plx-ldn-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-ldn-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 stay 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);
  overflow: hidden;
  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-totals-line-strong {
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
}

.plx-fin-doc-totals-line-strong .plx-fin-doc-totals-label,
.plx-fin-doc-totals-line-strong .plx-fin-doc-totals-value {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

.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-ldn-footer-bar {
  gap: var(--space-3);
}

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

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

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

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

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

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

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

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

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

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

/* Quantity holds composite text ("4 Nights x 4 Rooms") that the shared
   6rem above is too narrow for — widened just for this column so the text
   isn't clipped, unlike Rate/Amount which are short numbers. Matches the
   ".plx-ldn-table .plx-input" selector's own specificity (two classes)
   so it actually wins instead of silently losing to that shared rule. */
.plx-ldn-table .plx-ldn-qty-js {
  min-width: 8rem;
}

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

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

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

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

/* Two columns — Debit Summary (with its own Debit Amount highlight)
   stacked with Remarks/Terms on the left, Tax Summary alone on the right,
   per client ask (client explicitly asked for Remarks to sit below the
   summary card rather than beside it, same correction Booking Credit Note
   Generation's own bottom grid got in this session). */
.plx-ldn-bottom-grid {
  align-items: start;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}

.plx-ldn-bottom-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* A true card footer — full-bleed to the Debit Summary card's own edges,
   not just another inset row. Negative left/right/bottom margins cancel
   .plx-fin-doc-totals-card's own padding (var(--space-4)) so the box's
   background reaches the card's actual edges, with only the bottom
   corners rounded to match the card's own radius. */
.plx-ldn-debit-due-box {
  background: var(--color-danger-bg);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: flex;
  justify-content: space-between;
  margin: var(--space-3) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4);
}

.plx-ldn-debit-due-label {
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}

.plx-ldn-debit-due-value {
  color: var(--color-danger);
  font-weight: var(--weight-bold);
}

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

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

/* Tax Summary's per-charge breakdown table — copied from Booking Debit
   Note Generation's own equivalent block. Only .plx-ldn-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-ldn-tax-summary-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

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

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

.plx-ldn-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-ldn-tax-summary-table thead th:first-child {
  text-align: left;
}

.plx-ldn-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-ldn-tax-summary-table td:first-child {
  text-align: left;
}

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

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

.plx-ldn-tax-summary-table thead th:not(:last-child)::before,
.plx-ldn-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-ldn-tax-summary-desc {
  color: var(--color-info);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.plx-ldn-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-ldn-tax-summary-total-label {
  color: var(--pm-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

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

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

/* properties-select2.css only themes .select2-selection--single — the Tax
   picker needs the same box recipe copied for --multiple (border/height/
   chevron), scoped to this page only. */
.plx-ldn-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-ldn-table .select2-container--default.select2-container--open .select2-selection--multiple,
.plx-ldn-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-ldn-tax-summary-js. */
.plx-ldn-table .select2-selection--multiple .select2-selection__rendered {
  display: none;
}

/* Multi-select also always renders its own inline type-to-search <input>
   (.select2-search--inline) 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. */
.plx-ldn-table .select2-search--inline,
.plx-ldn-table .select2-search--inline .select2-search__field {
  display: none;
}

.plx-ldn-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. dropdownCssClass (initTaxSelect2) 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-ldn-tax-dropdown-panel.select2-dropdown {
  min-width: 260px;
  width: auto;
}

/* Dropdown list rows — checkbox + name + rate% + this row's own tax
   amount. white-space: nowrap on the label/percent stops wrapping and
   overlapping the amount column at this width. */
.plx-ldn-tax-option {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  width: 100%;
}

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

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

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

.plx-ldn-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,
   vendor select2.min.css, 3 classes) — wrong here, since the checkbox
   itself is what should show selection state. Keep only a light hover
   tint. No !important: chaining .select2-dropdown onto our own class
   (both already match this same element) adds a 3rd class here too, so
   this ties the vendor rule's specificity and wins on source order since
   this file loads after it. */
.select2-dropdown.plx-ldn-tax-dropdown-panel .select2-results__option[aria-selected='true'],
.select2-dropdown.plx-ldn-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. */
.plx-ldn-charge-modal-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.plx-ldn-charge-modal-table thead th {
  background: var(--bg-thead);
  border-bottom-color: var(--border-default);
  color: var(--pm-primary);
}

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

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

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

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

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

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

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

.plx-ldn-charge-modal-add-confirm,
.plx-ldn-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-ldn-charge-modal-add-confirm {
  color: var(--color-success);
}

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

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

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

.plx-ldn-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-ldn-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-ldn-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-ldn-tenant-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ldn-bottom-grid {
    grid-template-columns: 1fr;
  }
}

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

  .plx-ldn-bottom-grid {
    grid-template-columns: 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-ldn-tenant-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ldn-bottom-grid {
    grid-template-columns: 1fr;
  }
}