/* ════════════════════════════════════════════════════════════════════
 *  TABLE — canonical site-wide component.
 *
 *  Soft hairline header with small uppercase muted labels, fine row
 *  dividers, rounded container. Sage UI typography matches the rest of
 *  the redesigned aesthetic. Bootstrap's `.table-hover` is preserved so
 *  hover highlighting works on row-clickable tables.
 *
 *  Variants:
 *    .table-hover   — Bootstrap modifier; adds hover row tint
 *    .table-card    — wraps the table in a hairline-bordered card
 *
 *  Column widths: keep using .col-type / .col-date / .col-actions /
 *  etc. — they're declared at the bottom of this file.
 * ════════════════════════════════════════════════════════════════════ */

.table {
    /* Reset Bootstrap 5's `.table` CSS custom properties so its
     * `.table > :not(caption) > * > *` rule doesn't paint cells. */
    --bs-table-bg: transparent;
    --bs-table-color: #161616;
    --bs-table-accent-bg: transparent;
    --bs-table-border-color: #e5e8ea;
    --bs-table-hover-bg: #fafbfb;

    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 13px;
    font-family: "Sage UI", "Helvetica Neue", Arial, sans-serif;
    color: #161616;
    margin-bottom: 0;
}

.table thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    background: #fafbfb;
    border-bottom: 1px solid #e5e8ea;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none;
}
.table thead th:first-child { padding-left: 18px; }
.table thead th:last-child  { padding-right: 18px; }

.table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f2f3;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    vertical-align: middle;
    color: #161616;
    background: #fff;
    box-shadow: none;
}
.table tbody td:first-child { padding-left: 18px; }
.table tbody td:last-child  { padding-right: 18px; }
.table tbody tr:last-child td { border-bottom: 0; }

/* Hover highlight — preserves Bootstrap's `.table-hover` behaviour. */
.table-hover tbody tr:hover td {
    background: #fafbfb;
}

/* When the table is wrapped in `.table-card` (or `.table-responsive`)
 * the surrounding hairline + radius give the soft-card look. */
.table-card,
.table-responsive {
    background: #fff;
    border: 1px solid #e5e8ea;
    border-radius: 10px;
    overflow: hidden;
}
.table-card .table,
.table-responsive .table {
    border: 0;
}
.table-card .table thead th:first-child,
.table-responsive .table thead th:first-child { padding-left: 18px; }
.table-card .table thead th:last-child,
.table-responsive .table thead th:last-child  { padding-right: 18px; }

/* Common cell helpers — work inside any .table */
.table .text-end,
.table tbody td.text-end,
.table thead th.text-end { text-align: right; }
.table tbody td.muted,
.table .muted { color: #666; }
.table tbody td.num,
.table .num   { font-variant-numeric: tabular-nums; font-weight: 600; }
.table tbody td.actions,
.table .actions { text-align: right; white-space: nowrap; }
.table tbody td.mono,
.table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }

/* In-table anchors — keep them dark, brand-green on hover. base.css's
 * global anchor not-chain re-paints them green by default; match its
 * specificity so plain links inside cells read as body text. */
.table a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: #161616;
    text-decoration: none;
    font-weight: 500;
}
.table a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* Row-click affordance for whole-row navigation patterns. */
.table tbody tr.cursor-pointer { cursor: pointer; }

/* ── Column widths (legacy, kept) ───────────────────────────────── */
.col-type { width: 150px; }
.col-date { width: 200px; }
.col-ref { width: 150px; }
.col-value { width: 150px; text-align: right; }
.col-icon { width: 32px; }
.col-status { width: 50px; text-align: center; }
.col-actions { width: 100px; text-align: right; }

.table-actions td {
    overflow: visible;
    word-wrap: break-word;
    white-space: normal;
}
.table-actions .text-muted.small {
    word-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}
.actions-table {
    overflow-x: auto;
    overflow-y: visible;
    min-height: 400px;
}

/* Success / failure counters used in execution-history rows. Pair an icon
 * with the colour so the success/fail/total trio is distinguishable for
 * colour-blind users. */
.exec-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}
.exec-count--success { color: var(--status-success-bg); }
.exec-count--failed  { color: var(--status-failed-bg); }
.exec-count .bi { font-size: 0.85em; }

/* Whole-row click affordance for tables. JS in layout.html forwards a
 * click anywhere on the row (except inside an explicit link/button) to
 * the URL declared in `data-row-href`. */
tr[data-row-href] { cursor: pointer; }
tr[data-row-href]:focus-within { outline: 2px solid var(--brand-primary); outline-offset: -2px; }