/* UI Table Grid Rail (extracted from Billing)
   - Default zebra striping for :is(.billing-grid, .ui-grid) tables
   - View/Edit mode helpers
*/

/* Phase 15 — Unified Excel-like header styling (Billing-wide)
   Keep header appearance consistent across all Billing tables.
   Applied to any table with class :is(.billing-grid, .ui-grid) (most Billing pages).
*/
:root {
  --billing-xls-head-bg: #5b9bd5;
  --billing-xls-head-fg: #ffffff;
  --billing-xls-head-border: #3f73a6;

  --ui-xls-head-bg: var(--billing-xls-head-bg);
  --ui-xls-head-fg: var(--billing-xls-head-fg);
  --ui-xls-head-border: var(--billing-xls-head-border);
}

:is(.billing-grid, .ui-grid).table tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Excel-like header (works for both sticky and non-sticky tables) */
table:is(.billing-grid, .ui-grid) thead th,
table:is(.billing-grid, .ui-grid) thead td {
  background-color: var(--billing-xls-head-bg);
  color: var(--billing-xls-head-fg);
  font-weight: 600;
  border-color: var(--billing-xls-head-border);
}

table:is(.billing-grid, .ui-grid) thead th a,
table:is(.billing-grid, .ui-grid) thead th i,
table:is(.billing-grid, .ui-grid) thead th svg,
table:is(.billing-grid, .ui-grid) thead td a,
table:is(.billing-grid, .ui-grid) thead td i,
table:is(.billing-grid, .ui-grid) thead td svg {
  color: inherit;
}

table:is(.billing-grid, .ui-grid) thead th .text-muted,
table:is(.billing-grid, .ui-grid) thead td .text-muted {
  color: rgba(255, 255, 255, 0.85) !important;
}

:is(.billing-grid, .ui-grid) td, :is(.billing-grid, .ui-grid) th {
  vertical-align: middle;
  white-space: nowrap;
}

:is(.billing-grid, .ui-grid) td {
  cursor: pointer;
}

/* Optional modifiers (for non-spreadsheet tables)
   - ui-grid-wrap: allow wrapping content (default grid is nowrap like spreadsheets)
   - ui-grid-no-pointer: remove pointer cursor on cells
*/
:is(.billing-grid, .ui-grid).ui-grid-wrap td,
:is(.billing-grid, .ui-grid).ui-grid-wrap th {
  white-space: normal;
}

:is(.billing-grid, .ui-grid).ui-grid-no-pointer td {
  cursor: default;
}

:is(.billing-grid, .ui-grid)[data-mode="view"] td[data-editable="1"] {
  cursor: default;
}

:is(.billing-grid, .ui-grid) .cell-muted {
  color: #6c757d;
}

:is(.billing-grid, .ui-grid) .cell-highlight {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

/* Phase 8C — Spreadsheet-like selection */
:is(.billing-grid, .ui-grid) td.cell-active {
  outline: 2px solid rgba(13, 110, 253, 0.8);
  outline-offset: -2px;
}

:is(.billing-grid, .ui-grid) td.cell-selected {
  background-color: rgba(13, 110, 253, 0.08);
}

:is(.billing-grid, .ui-grid) td.cell-selected.cell-active {
  background-color: rgba(13, 110, 253, 0.12);
}



/* Assessment/QW sheet modifier — use the same bordered spreadsheet feel as Billing */
:is(.billing-grid, .ui-grid).ui-grid-sheet.table {
  --ui-sheet-border: #d6dbe3;
}

:is(.billing-grid, .ui-grid).ui-grid-sheet.table > :not(caption) > * > * {
  border-color: var(--ui-sheet-border);
}

/* Keep header separators readable on sheet-style tables */
table:is(.billing-grid, .ui-grid).ui-grid-sheet thead th,
table:is(.billing-grid, .ui-grid).ui-grid-sheet thead td {
  border-right-color: rgba(255, 255, 255, 0.28);
}

/* Make the resize rail easier to discover on sheet-style tables */
table.ui-grid-sheet[data-col-resize="1"] .col-resize-handle::after {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  right: 2px;
  width: 1px;
  background: rgba(255, 255, 255, 0.38);
}

/* Phase 10A.2 — Column resize rail (drag at header right edge) */
table[data-col-resize="1"] th {
  position: relative;
}

table[data-col-resize="1"] {
  /* Enforce predictable column widths when user drags */
  table-layout: fixed;
}

table[data-col-resize="1"] .col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

table[data-col-resize="1"] .col-resize-handle:hover {
  background: rgba(13, 110, 253, 0.12);
}

table[data-col-resize="1"].col-resize-active,
table[data-col-resize="1"].col-resize-active * {
  cursor: col-resize !important;
}

/* Mobile: disable any resize handles if viewport changes after load */
@media (max-width: 767.98px) {
  table[data-col-resize="1"] .col-resize-handle { display: none !important; }
  table[data-resize="1"] .col-resizer { display: none !important; }
}

/* Phase 10J — Sticky header + first columns (Excel-like) */
:is(.billing-scroll, .ui-scroll) {
  /* Keep very large grids usable without losing header */
  max-height: 75vh;
  overflow: auto;
}

table:is(.billing-sticky, .ui-sticky) thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  /* Ensure header remains opaque and matches Billing-wide header style */
  background-color: var(--billing-xls-head-bg);
  color: var(--billing-xls-head-fg);
  border-color: var(--billing-xls-head-border);
}

/* Sticky first column(s)
   - Thead sticky-col should use the header style.
   - Body/tfoot sticky-col should stay white (grid sheet look).
*/
table:is(.billing-sticky, .ui-sticky) thead th.sticky-col {
  position: sticky;
  /* Default for single sticky column (e.g., Month Board). Ledger overrides via .sticky-col-0/1/2. */
  left: 0;
  z-index: 5;
  background-color: var(--billing-xls-head-bg);
  color: var(--billing-xls-head-fg);
  border-color: var(--billing-xls-head-border);
}

table:is(.billing-sticky, .ui-sticky) tbody th.sticky-col,
table:is(.billing-sticky, .ui-sticky) tbody td.sticky-col,
table:is(.billing-sticky, .ui-sticky) tfoot th.sticky-col,
table:is(.billing-sticky, .ui-sticky) tfoot td.sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: #fff;
}

/* Helpers for multi-sticky columns (Ledger) */
table:is(.billing-sticky, .ui-sticky) .sticky-col-0 { left: 0; }
table:is(.billing-sticky, .ui-sticky) .sticky-col-1 { left: 38px; }
table:is(.billing-sticky, .ui-sticky) .sticky-col-2 { left: 90px; }

/* Phase 14B — Window sticky header fallback
   For tables inside a horizontal scroll wrapper that doesn't scroll vertically.
   In that case, native position: sticky (top:0) won't keep header visible when the page scrolls.
   We render a fixed header dock that follows the wrapper and syncs horizontal scroll.
*/
:is(.billing-window-sticky, .ui-window-sticky) {
  position: fixed;
  display: none;
  z-index: 1015; /* below Bootstrap sticky-top (≈1020), above page content */
  pointer-events: none; /* avoid blocking interactions */
}

:is(.billing-window-sticky, .ui-window-sticky).is-active { display: block; }

:is(.billing-window-sticky, .ui-window-sticky) :is(:is(.billing-window-sticky, .ui-window-sticky)-left, .ui-window-sticky-left),
:is(.billing-window-sticky, .ui-window-sticky) :is(:is(.billing-window-sticky, .ui-window-sticky)-right, .ui-window-sticky-right) {
  display: inline-block;
  vertical-align: top;
}

:is(.billing-window-sticky, .ui-window-sticky) :is(:is(.billing-window-sticky, .ui-window-sticky)-right, .ui-window-sticky-right) {
  overflow: hidden;
}

:is(.billing-window-sticky, .ui-window-sticky) table {
  margin: 0;
}

:is(.billing-window-sticky, .ui-window-sticky) :is(:is(.billing-window-sticky, .ui-window-sticky)-shadow, .ui-window-sticky-shadow) {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  border-radius: 6px;
  overflow: hidden;
}

/* Disable top-sticky in the cloned header (it's already fixed). */
:is(.billing-window-sticky, .ui-window-sticky) table:is(.billing-sticky, .ui-sticky) thead th {
  position: static !important;
}
/* AJAX filter rail: keep search input focused while the result region refreshes. */
.ui-ajax-filter-loading {
  opacity: .72;
  transition: opacity .12s ease;
}