/* Finance > Billing > Booking Invoice detail (view-only, static demo data).
   Reuses shared .plx-card/-muted/-sm, .plx-table, .plx-pill, .plx-btn-*
   components as-is; only the invoice document layout itself (plx-fin-doc-*)
   is page-specific. */

.plx-fin-doc-title-pill {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* This page pins the whole app shell to the viewport instead of letting the
   document scroll, so only the two invoice columns below ever scroll —
   scoped entirely to this page's own stylesheet (only loaded here), so
   every other page keeps its normal whole-page scroll untouched.
   .plx-shell/.plx-main/.plx-content are the shared layout wrapper, topbar
   and <main> from layouts/app.blade.php; turning them into a fixed-height
   flex column (instead of the shared layout's own min-height: 100vh, which
   lets content grow past the viewport and scroll the document) is what
   makes "100%" further down actually mean something for the columns. */
html, body {
  height: 100%;
  overflow: hidden;
}

.plx-shell {
  height: 100vh;
}

.plx-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* padding-bottom reserves room below .plx-fin-doc-layout for the fixed
   .plx-fin-doc-back-footer-bar (further down this file) so it never covers
   the last row of either scrolling column — same padding-bottom values as
   every other page's own .plx-page-has-sticky-footer (operations.css/
   properties.css/settings.css), just applied straight to .plx-content
   itself (already overridden here for this page's fixed-height/internal-
   scroll layout above) rather than a separate wrapper div, since padding
   on a flex:1 child shrinks the space it hands to .plx-fin-doc-layout the
   same way either way. Below 1200px .plx-content reverts to normal
   document flow (media query further down) but keeps this same
   padding-bottom, which still does the right thing there — plain trailing
   space above the bar at the bottom of the page, exactly what every other
   page's wrapper achieves. */
.plx-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 96px;
}

/* Both columns are genuinely independent scroll panes: the row itself
   flexes to fill whatever space .plx-content has left after the Download/
   Share row above (min-height: 0 is what lets a flex/grid child shrink
   below its content size instead of forcing the row — and the page — to
   grow), then .plx-fin-doc-main/.plx-fin-doc-sidebar each scroll their own
   overflow against that height. Collapses to plain stacked, page-level
   scrolling below 1200px, matching the grid's existing breakpoint — the
   shell-level overflow: hidden above is undone there too. */
.plx-fin-doc-layout {
  display: grid;
  flex: 1;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  min-height: 0;
}

.plx-fin-doc-main,
.plx-fin-doc-sidebar {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}

.plx-fin-doc-sidebar {
  display: flex;
  flex-direction: column;
}

/* .plx-card has overflow: hidden (to clip its own rounded corners) — per
   spec that gives it an automatic flex min-height of 0, so as a flex child
   here it was shrinking below its real content size to fit the sidebar's
   fixed height (clipping mid-row) instead of the sidebar scrolling past it.
   flex-shrink: 0 keeps every card at its natural height; the sidebar's own
   overflow-y: auto (above) is what scrolls once they no longer fit. */
.plx-fin-doc-sidebar-section {
  flex-shrink: 0;
}

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

.plx-fin-doc-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.plx-fin-doc-brand {
  align-items: center;
  display: flex;
}

.plx-fin-doc-brand-logo {
  height: 28px;
  width: auto;
}

.plx-fin-doc-header-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: right;
}

.plx-fin-doc-title {
  color: var(--color-info);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.plx-fin-doc-number {
  color: var(--color-info);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.plx-fin-doc-type {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
}

.plx-fin-doc-header-row {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
}

.plx-fin-doc-gst-row {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
}

.plx-fin-doc-company-name {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.plx-fin-doc-company-address {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

.plx-fin-doc-company-gstin {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.plx-fin-doc-company-gstin strong {
  color: var(--text-primary);
}

.plx-fin-doc-date {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.plx-fin-doc-divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-5) 0;
}

.plx-fin-doc-bill-row {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--space-6);
}

.plx-fin-doc-bill-label {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.plx-fin-doc-bill-name {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.plx-fin-doc-bill-address {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

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

/* Page-scoped card frame + header tint for the Invoice Items table only —
   deliberately not touched in the shared .plx-table (components/tables.css),
   which every other table in the app relies on staying plain. */
.plx-fin-doc-items-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: auto;
}

.plx-fin-doc-items-table {
  min-width: 520px;
}

/* --bg-thead background (the project-standard table header band) but
   --color-info text, not --pm-primary — this page already deliberately
   uses --color-info over --pm-primary everywhere else (item titles, totals
   labels), per an earlier client correction that --pm-primary reads "almost
   black" at this size; keeping the header consistent with that. */
.plx-fin-doc-items-table thead th {
  background: var(--bg-thead);
  border-bottom: 1px solid var(--border-default);
  color: var(--pm-primary);
  position: relative;
  white-space: normal;
}

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

.plx-fin-doc-items-table td:nth-child(2) {
  white-space: normal;
}

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

/* Inset vertical column dividers — same ::before technique as
   #plxRoomConversionTableJs (operations.css) and the Rooms/Units tables
   (properties.css): drawn on ::before rather than a plain border-right so
   the divider can be inset top/bottom instead of running the full cell
   height. */
.plx-fin-doc-items-table thead th:not(:last-child)::before,
.plx-fin-doc-items-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-doc-item-title {
  color: var(--pm-primary);
  display: block;
  font-weight: var(--weight-semibold);
}

.plx-fin-doc-item-booking-id {
  color: var(--color-info);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.plx-fin-doc-item-sub {
  color: var(--text-muted);
  display: block;
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

.plx-fin-doc-totals-row {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(240px, 1fr) minmax(400px, 1.6fr);
  margin-top: var(--space-5);
}

/* Debit/Credit Note's own totals section has no separate Tax Summary card —
   just one full-width Invoice Summary card — so the row's normal two-column
   grid needs collapsing to one column here instead. */
.plx-fin-doc-totals-row-single {
  grid-template-columns: 1fr;
}

.plx-fin-doc-totals-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  min-width: 0;
  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);
}

/* Tax Summary's own per-item breakdown table — same page-scoped card frame
   technique as .plx-fin-doc-items-table-wrap above, sized down for the
   narrower totals-card column. Only .plx-fin-doc-tax-table-scroll (the table
   itself) scrolls horizontally — the outer wrap just clips corners, so the
   Total Tax footer row (a sibling of the scroll div, not inside it) never
   scrolls with the table. */
.plx-fin-doc-tax-table-wrap {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.plx-fin-doc-tax-table-scroll {
  overflow: auto;
}

.plx-fin-doc-tax-table {
  min-width: 320px;
}

.plx-fin-doc-tax-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;
  white-space: normal;
}

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

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

/* Same inset ::before vertical-divider technique as
   .plx-fin-doc-items-table above, scaled to this table's tighter padding. */
.plx-fin-doc-tax-table thead th:not(:last-child)::before,
.plx-fin-doc-tax-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-fin-doc-tax-desc {
  color: var(--color-info);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* Total Tax footer row — lives inside .plx-fin-doc-tax-table-wrap (same
   border/radius as the table above it) rather than as a separate
   .plx-fin-doc-totals-line below the card, matching Figma's single
   continuous bordered box. */
.plx-fin-doc-tax-table-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-fin-doc-tax-table-total-label {
  color: var(--pm-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.plx-fin-doc-tax-table-total-value {
  color: var(--color-info);
  font-size: var(--text-base);
  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-fin-doc-amount-words {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.plx-fin-doc-amount-words strong {
  color: var(--text-primary);
}

.plx-fin-doc-remarks-label {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.plx-fin-doc-remarks {
  background: var(--pm-accent-soft);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  padding: var(--space-4);
}

.plx-fin-doc-terms {
  margin-top: var(--space-5);
}

.plx-fin-doc-terms-label {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.plx-fin-doc-terms ol {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
  padding-left: var(--space-5);
}

.plx-fin-doc-terms li {
  margin-bottom: var(--space-1);
}

.plx-fin-doc-thanks {
  color: var(--text-primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-top: var(--space-6);
  text-align: center;
}

/* Fixed bottom bar carrying every page-level action (Download/Share/Print/
   Back) in one place — same treatment as every other page's own sticky
   footer (OTA Allotments' .plx-ota-back-footer-bar, operations.css;
   Properties' .plx-property-back-footer-bar, properties.css; Settings'
   .plx-settings-back-row, settings.css). Download/Share used to sit in
   their own row above .plx-fin-doc-layout (.plx-fin-doc-page-actions,
   removed) and Print/Back inside the invoice card's own footer
   (.plx-fin-doc-footer-actions, this rule) — consolidated here instead so
   there's one consistent action strip rather than two separate rows in
   different places. */
.plx-fin-doc-back-footer-bar {
  align-items: center;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  bottom: 0;
  box-shadow: 0 -4px 12px rgba(17, 24, 39, 0.05);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  left: var(--sidebar-width);
  padding: var(--space-3) var(--space-6);
  position: fixed;
  right: 0;
  z-index: 1015;
}

/* ---- Sidebar ---- */
/* Height/scroll/flex-direction declared once, near .plx-fin-doc-layout
   above — this block only sets the sidebar's own --space-5 gap. */

.plx-fin-doc-sidebar {
  gap: var(--space-5);
}

.plx-fin-doc-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plx-fin-doc-sidebar-title {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  margin-bottom: 0px;
}

.plx-fin-doc-summary-box {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4);
  text-align: center;
}

.plx-fin-doc-summary-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.plx-fin-doc-summary-label {
  color: var(--color-success);
  font-size: var(--text-sm);
}

.plx-fin-doc-summary-value {
  color: var(--color-success);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.plx-fin-doc-summary-status {
  align-items: center;
  color: var(--text-primary);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.plx-fin-doc-summary-status strong {
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}

/* Paid variant (Lease Invoice) — overrides the default danger color above;
   needs to match that selector's own specificity (element + class on the
   same node) to actually win, a plain .plx-text-success utility class alone
   would lose to it. */
.plx-fin-doc-summary-status strong.plx-text-success {
  color: var(--color-success);
}

.plx-fin-doc-sidebar-btn {
  justify-content: center;
  width: 100%;
}

.plx-fin-doc-detail-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

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

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

.plx-fin-doc-detail-value-id {
  color: var(--pm-primary);
  font-weight: var(--weight-semibold);
}

/* .plx-fin-doc-detail-value and .plx-text-success/-danger (typography.css)
   are equal-specificity single classes loaded in the same order every time
   (this file after typography.css) — the plain color above always wins over
   the utility class unless re-declared together here, same cascade bug as
   .plx-fin-invoice-field-value in finance-billing.css. */
.plx-fin-doc-detail-value.plx-text-success,
.plx-fin-doc-detail-value.plx-text-danger {
  font-weight: var(--weight-semibold);
}

.plx-fin-doc-detail-value.plx-text-success {
  color: var(--color-success);
}

.plx-fin-doc-detail-value.plx-text-danger {
  color: var(--color-danger);
}

.plx-fin-doc-document-row {
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: inherit;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.plx-fin-doc-document-row:hover {
  border-color: var(--border-hover);
}

.plx-fin-doc-document-icon {
  align-items: center;
  color: var(--pm-primary);
  display: flex;
}

.plx-fin-doc-document-label {
  color: var(--text-primary);
  flex: 1;
  font-size: var(--text-sm);
}

.plx-fin-doc-document-download {
  align-items: center;
  color: var(--text-muted);
  display: flex;
}

/* ==========================================================================
   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-content {
    padding-bottom: 140px;
  }

  html, body {
    height: auto;
    overflow: visible;
  }

  .plx-shell,
  .plx-main,
  .plx-content {
    height: auto;
    overflow: visible;
  }

  .plx-fin-doc-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .plx-fin-doc-main,
  .plx-fin-doc-sidebar {
    height: auto;
    overflow-y: visible;
  }

  .plx-fin-doc-totals-row {
    grid-template-columns: 1fr;
  }

  .plx-fin-doc-back-footer-bar {
    left: 0;
  }

  .plx-fin-doc-back-footer-bar {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
  }

  .plx-fin-doc-bill-row,
  .plx-fin-doc-totals-row {
    grid-template-columns: 1fr;
  }

  .plx-fin-doc-header,
  .plx-fin-doc-header-row {
    flex-direction: column;
    gap: var(--space-3);
  }

  .plx-fin-doc-header-right {
    text-align: left;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  html, body {
    height: auto;
    overflow: visible;
  }

  .plx-shell,
  .plx-main,
  .plx-content {
    height: auto;
    overflow: visible;
  }

  .plx-fin-doc-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .plx-fin-doc-main,
  .plx-fin-doc-sidebar {
    height: auto;
    overflow-y: visible;
  }

/* Below this width the two totals cards' combined minmax() floors (240px +
   400px + gap) no longer fit the column — stack them instead of letting the
   row force a page-wide horizontal scroll; each card's own table can still
   scroll internally above this breakpoint. */

/* 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-doc-totals-row {
    grid-template-columns: 1fr;
  }

  .plx-fin-doc-back-footer-bar {
    left: 0;
  }

/* 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-doc-bill-row,
  .plx-fin-doc-totals-row {
    grid-template-columns: 1fr;
  }

  .plx-fin-doc-header,
  .plx-fin-doc-header-row {
    flex-direction: column;
    gap: var(--space-3);
  }

  .plx-fin-doc-header-right {
    text-align: left;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  html, body {
    height: auto;
    overflow: visible;
  }

  .plx-shell,
  .plx-main,
  .plx-content {
    height: auto;
    overflow: visible;
  }

  .plx-fin-doc-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .plx-fin-doc-main,
  .plx-fin-doc-sidebar {
    height: auto;
    overflow-y: visible;
  }

/* 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-fin-doc-back-footer-bar {
    left: 0;
  }
}

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

  html, body {
    height: auto;
    overflow: visible;
  }

  .plx-shell,
  .plx-main,
  .plx-content {
    height: auto;
    overflow: visible;
  }

  .plx-fin-doc-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .plx-fin-doc-main,
  .plx-fin-doc-sidebar {
    height: auto;
    overflow-y: visible;
  }

  .plx-fin-doc-back-footer-bar {
    min-height: 81px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .plx-fin-doc-back-footer-bar {
    min-height: 81px;
  }

  .plx-fin-doc-back-footer-bar {
    min-height: 73px;
  }
}

@media (min-width: 1400px) {
  .plx-fin-doc-back-footer-bar {
    min-height: 81px;
  }
}