/* ============================================================================
   TABLES
   Consolidated from theme.css (vendor) and theme-override.css (app). Both
   sources' table rules are deleted; this file is the single owner of `.table`,
   its variants, the in-house table helper classes, and table row states.

   LOAD ORDER (required): after bootstrap.min.css and theme.css. Every colour
   here reads a token, so the light theme is entirely a matter of what
   tokens.css resolves them to.

   NOT owned here: DataTables plugin chrome (vendor/datatables.css) and the
   scroll pane and its sticky head (table-pane.css).

   `!important` is kept ONLY where it is load-bearing; each survivor is
   commented with what it has to beat.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.table {
    color: var(--text-secondary);
}

/* Cell chrome. `border-color` stays !important so the flat #ebedf2 seam wins
   over `.table td`'s own border-top below. `vertical-align` stays !important
   because bootstrap's `.table thead th { vertical-align: bottom }` is more
   specific than this selector. */
.table td,
.table th {
    font-size: 14px;
    border-top-width: 0;
    border-bottom: 1px solid;
    border-color: #ebedf2 !important;
    vertical-align: middle !important;
}

/* Dark chrome repaints every cell edge; more specific than the rule above, so
   this is the border colour that actually applies in the dark theme. */
body[data-background-color="dark"] .table td,
body[data-background-color="dark"] .table th {
    border-color: rgba(181, 181, 181, 0.1) !important;
}

.table td {
    border-top: 1px solid var(--border-subtle);
}

.table td.align-top,
.table th.align-top {
    /* Beats the .table td/th `vertical-align: middle !important` above. */
    vertical-align: top !important;
}

.table thead th {
    color: var(--text-primary);
    font-weight: var(--font-weight-strong);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-normal);
}

/* Bootstrap paints this box #dee2e6, a grey chosen for a white page, which
   reads as a white frame around the table on the dark theme. The cells' seam
   is already repainted below; this is the outer box they sit in. */
.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--border-normal);
}

/* Striped rows drop their cell rules entirely; the zebra fill does the work. */
.table-striped td,
.table-striped th {
    border-top: 0;
    border-bottom: 0;
}

/* `.table thead th` (0,1,2) outranks `.table-striped th` above, so the header
   keeps its 2px rule unless a selector of equal weight says otherwise. On a
   zebra table the fill already separates the header from row one, so the seam
   only needs to be a hairline. */
.table-striped thead th {
    border-bottom: 1px solid var(--border-subtle);
}

.table-responsive {
    /* Beats bootstrap's per-breakpoint `.table-responsive-*` width rules. */
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Checkboxes/radios in table formsets carry no gutter of their own. */
td .custom-control.custom-radio,
td .custom-control.custom-checkbox {
    padding-left: 0;
}

/* ----------------------------------------------------------------------------
   Row states
   -------------------------------------------------------------------------- */

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--surface-1);
}

.table-hover tbody tr:hover {
    background-color: var(--surface-2);
    color: var(--text-primary);
}

/* The row itself only reacts to double-click, so no pointer cursor — a pointer
   on the whole row would promise a single-click that isn't there. Single-click
   affordance lives on the in-cell link below. */
tr.clickable-row td {
    transition: background-color 0.12s ease;
}

tr.clickable-row:hover td {
    background-color: var(--surface-1);
}

/* Opt-in for the primary identifier link in a table cell: a padded hit area
   around just the text — easy to click even when the label is a few characters,
   without making the whole cell a link. Negative margin cancels the padding so
   table alignment is unchanged. The min-width floors the target at 44px for
   labels only one or two characters wide. */
td a.cell-link {
    display: inline-block;
    min-width: 2.75rem;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
}

td a.cell-link:hover {
    background: var(--surface-3);
    text-decoration: none;
}

/* ----------------------------------------------------------------------------
   Contextual row/cell tints
   One shared fill rule; each variant only supplies its colour. The custom
   property is set on the row and inherits down to its own cells.
   `!important` is required: bootstrap's `.table-hover .table-danger:hover > td`
   is far more specific than these selectors.
   -------------------------------------------------------------------------- */

.table-warning,
.table-warning > th,
.table-warning > td,
.table-danger,
.table-danger > th,
.table-danger > td,
.table-success,
.table-success > th,
.table-success > td,
.table-info,
.table-info > th,
.table-info > td {
    background-color: var(--table-context-bg) !important;
}

.table-warning {
    --table-context-bg: rgba(var(--bs-warning-rgb), 0.03);
}

.table-danger {
    --table-context-bg: rgba(var(--bs-danger-rgb), 0.05);
}

.table-success {
    --table-context-bg: rgba(var(--bs-success-rgb), 0.08);
}

.table-info {
    --table-context-bg: rgba(var(--bs-info-rgb), 0.08);
}

/* ----------------------------------------------------------------------------
   .table-dark
   -------------------------------------------------------------------------- */

.table-dark {
    background-color: rgba(20, 20, 20, 0.95);
    color: var(--text-secondary);
}

.table-dark thead th {
    border-bottom-color: var(--border-emphasis);
}

.table-dark td {
    border-top-color: var(--border-normal);
}

/* ----------------------------------------------------------------------------
   In-house table helpers
   -------------------------------------------------------------------------- */

/* Compact table styling (for crispy formsets). */
.compactTable {
    margin-bottom: 0;
    padding: 0 !important;
    width: 100%;
    min-width: 800px;
}

.compactTable td {
    white-space: nowrap;
}

.compactTable td,
.compactTable th {
    padding: 2px 2px !important;
}

.compactTable .form-group {
    padding: 0 !important;
}

.paddedTable tr td {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}

.paddedTableLg tr td,
.paddedTableLg tr th {
    padding: 0.5rem 0.5rem !important;
}

/* ----------------------------------------------------------------------------
   Cell padding — must stay BELOW the helpers above
   `.table tr td` and `.paddedTable tr td` have identical specificity and both
   are !important, so source order decides. Today this rule sits later in
   theme-override.css and wins, i.e. .paddedTable is inert and .paddedTableLg is
   a no-op (same value). Moving this block above them would resurrect both and
   change row heights. `!important` is required to beat the vendor
   `padding: 0 10px !important` lineage and bootstrap's `.table-sm td/th`.
   -------------------------------------------------------------------------- */

.table tr td,
.table tr th {
    padding: 0.5rem 0.5rem !important;
}

/* Beats `.table tr td/th` on specificity — needs !important to outrank it. */
.table th.col-form-label {
    padding-left: 15px !important;
}

/* Same specificity as the rule above; must stay after it. */
.compactTable th.col-form-label {
    padding-left: 6px !important;
}

/* Add padding to the X-axis edges of a table. Specificity beats
   `.table tr td/th`, but !important is still needed to outrank its !important. */
table.table.table-px-1 tr th,
table.table.table-px-1 tr td {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

table.table.table-px-2 tr th,
table.table.table-px-2 tr td {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

table.table.table-px-3 tr th,
table.table.table-px-3 tr td {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* Shrink a leading column to its content — a checkbox or a status icon —
   instead of letting the table-px-* gutter reserve empty space. Keeps the
   table's left inset (table-px-* still sets padding-left) and drops the
   right padding so the column hugs the next one. The selector matches
   table-px-* on specificity and comes after it, so it overrides that right
   padding with no inline styles at the call site. */
table.table tr th.col-shrink,
table.table tr td.col-shrink {
    width: 1px !important;
    white-space: nowrap;
    padding-right: 0 !important;
}


/* Bulk actions for a table's row selection, sitting beside the .table-meta
   selection pill in a toolbar. The control holds its slot when nothing is
   selected — hidden by visibility, not display, so the toolbar never reflows
   as the selection comes and goes. */
.selection-actions {
    margin-bottom: 0;
}

.selection-actions.is-idle {
    visibility: hidden;
    pointer-events: none;
}

.selection-actions .btn {
    height: 1.9rem;
    padding: 0 .75rem;
    font-size: .8rem;
}


/* ======================================================================
   Merged in from theme.css / theme-override.css.
   ====================================================================== */

/* ----- from theme.css ----- */
/*     Table    */
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  vertical-align: middle; }
.table > tbody > tr > td, .table > tbody > tr > th {
  padding: 8px; }
.table > tfoot > tr > td, .table > tfoot > tr > th {
  padding: 8px; }