:root {
  --navbar-height: 56px;
  --report-header-height: 72px;
}

/* Sticky report header (P&L / Cashflow / Balance Sheet nav + Xero toggle) */
.report-sticky-header {
  position: sticky;
  top: var(--navbar-height);
  z-index: 100;
  background-color: var(--bg-page);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

/* Financial table styles */
/*
 * border-collapse: separate is required for position:sticky to work on <td>/<th>.
 * Bootstrap's reboot sets border-collapse:collapse on all tables, which prevents
 * sticky table cells from working (browser spec limitation).
 * border-spacing:0 keeps the visual appearance identical to collapse mode.
 */
.table-financial {
  border-collapse: separate !important;
  border-spacing: 0;
}
.table-financial th,
.table-financial td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/*
 * Sticky header row.
 * position:sticky only works when the scroll container is the element itself,
 * not a distant ancestor. table-responsive has overflow-x:auto which the CSS
 * spec silently promotes to overflow:auto, making it the sticky ancestor — but
 * with no height constraint it never scrolls, so sticky never fires.
 *
 * Fix: give the container an explicit max-height so it becomes the real vertical
 * scroll container. The navbar is outside (and sticky on the page), so thead th
 * only needs top:0 within the container — no navbar-height offset needed.
 */
.report-table-scroll {
  overflow: auto;
  max-height: calc(100vh - var(--navbar-height) - var(--report-header-height) - 2rem);
}
.report-table-scroll .table-financial thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--table-head-bg);
  color: var(--table-head-fg);
}
.report-table-scroll .table-financial thead th:first-child {
  z-index: 3;
}

/* Sticky label column */
.table-financial th:first-child,
.table-financial td:first-child {
  text-align: left;
  white-space: normal;
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--bg-surface);
  border-right: 2px solid var(--border);
}
.table-financial thead th:first-child {
  background-color: var(--table-head-bg);
  color: var(--table-head-fg);
  z-index: 2;
  border-right-color: var(--border-strong);
}
.table-financial tr.table-section-header td:first-child {
  background-color: var(--bg-surface-2);
}
.table-financial tr.table-subtotal td:first-child,
.table-financial tr.subtotal td:first-child,
.table-financial tr.table-total td:first-child,
.table-financial tr.total td:first-child {
  background-color: var(--bg-surface);
}
.table-financial tr.spacer td:first-child {
  position: static;
  background-color: var(--bg-surface);
  border-right: none;
}

@media print {
  .table-financial {
    border-collapse: collapse !important;
  }
  .report-table-scroll {
    max-height: none;
    overflow: visible;
  }
  .report-table-scroll .table-financial thead th,
  .table-financial th:first-child,
  .table-financial td:first-child {
    position: static;
    border-right: none;
  }
}
.table-financial tr.subtotal td,
.table-financial tr.table-subtotal td {
  font-weight: 600;
  border-top: 1px solid var(--border);
}
.table-financial tr.total td,
.table-financial tr.table-total td {
  font-weight: 700;
  border-top: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
}
.table-financial tr.table-section-header td {
  font-weight: 700;
  background-color: var(--bg-surface-2);
  padding-top: 0.6rem;
  padding-bottom: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table-financial tr.spacer td {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  border: none;
}

/* Xero actual cell indicator */
.xero-actual {
  background-color: var(--xero-actual-bg) !important;
}
.xero-locked {
  opacity: 0.8;
  cursor: not-allowed;
}

/* Print styles */
@media print {
  .no-print,
  .navbar,
  .alert-dismissible .btn-close {
    display: none !important;
  }
  .container-fluid {
    padding: 0 !important;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
  }
  @page {
    margin: 1.5cm;
  }
}