/* ==========================================================================
   EGPHP tables - one system for every <table> on the site.

   Engine: Bootstrap 5.3.8 table module (github.com/twbs/bootstrap, 174k stars, MIT), vendored whole
   in css/vendor/bootstrap-tables.css and used through its own --bs-table-* variables:
   striped rows, hover row, active row, striped columns, sm, bordered, group divider, caption-top,
   contextual variants and .table-responsive-*. It is aliased to a bare <table> (zero specificity),
   so no page needed an edit. This file only maps the SITE's tokens onto those variables and adds the
   four things Bootstrap leaves to the site: a distinct header, numeric columns, a phone card row and RTL.
   Read docs/tables.md before changing it.

   Layering: the vendored rules sit in @layer bs-tables, so any rule a page writes for its own table
   (padding, colour, border, a highlighted cell) wins over the system whatever its specificity.
   This file is unlayered, but every selector here is :where() so it too yields to the page.
   ========================================================================== */

:root {
    /* dark theme (the site's default): a copper-tinted lift, calm but visible on every ink tier */
    --tbl-stripe:  rgba(255, 176, 130, 0.085);
    --tbl-hover:   rgba(232, 86, 34, 0.20);
    --tbl-active:  rgba(232, 86, 34, 0.26);
    --tbl-head:    rgba(255, 255, 255, 0.11);
    --tbl-head-line: rgba(255, 255, 255, 0.24);
}
:root[data-theme="light"] {
    --tbl-stripe:  rgba(166, 58, 12, 0.075);
    --tbl-hover:   rgba(184, 65, 15, 0.13);
    --tbl-active:  rgba(184, 65, 15, 0.18);
    --tbl-head:    rgba(43, 40, 59, 0.10);
    --tbl-head-line: rgba(43, 40, 59, 0.34);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) {
        --tbl-stripe:  rgba(166, 58, 12, 0.075);
        --tbl-hover:   rgba(184, 65, 15, 0.13);
        --tbl-active:  rgba(184, 65, 15, 0.18);
        --tbl-head:    rgba(43, 40, 59, 0.10);
        --tbl-head-line: rgba(43, 40, 59, 0.34);
    }
}

/* The site's tokens on Bootstrap's variables. Text colour is INHERITED (a table inside a muted card
   keeps its muted words), the cell fill is transparent (the table sits on glass and scene bands, a
   solid Bootstrap fill would make a slab), and the 1rem bottom margin is gone (one screen per section). */
:where(table, .table, .table-striped, .table-hover) {
    --bs-border-width: 1px;
    --bs-table-color: inherit;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line, rgba(255, 255, 255, 0.10));
    --bs-table-striped-color: inherit;
    --bs-table-striped-bg: var(--tbl-stripe);
    --bs-table-active-color: inherit;
    --bs-table-active-bg: var(--tbl-active);
    --bs-table-hover-color: inherit;
    --bs-table-hover-bg: var(--tbl-hover);
    width: auto;
    margin-bottom: 0;
    vertical-align: middle;
}
/* The vendored .table sets width: 100% - only for a table that opts in with the class */
:where(.table) { width: 100%; }
:where(table, .table) > tbody { vertical-align: middle; }

/* A row you point at or tab into is lit as a whole */
:where(table, .table) > tbody > tr:focus-within > * {
    --bs-table-color-state: inherit;
    --bs-table-bg-state: var(--tbl-hover);
}

/* A distinct header: a heavier tone, a stronger rule under it, weight. The tone rides Bootstrap's own
   "type" channel, so a striped or hovered body row never repaints it. */
:where(table, .table) > thead > tr > *,
:where(table, .table) > tfoot > tr > * {
    --bs-table-bg-type: var(--tbl-head);
    --bs-table-bg-state: initial;
}
:where(table, .table) > thead > tr:last-child > * {
    border-bottom: 2px solid var(--tbl-head-line);
    font-weight: 600;
}
:where(table, .table) > tfoot > tr:first-child > * { border-top: 2px solid var(--tbl-head-line); }
/* a header cell in the first column of a body row labels its row */
:where(table, .table) > tbody > tr > th { font-weight: 600; }
/* the last body row needs no rule: the section frame closes the table */
:where(table, .table) > tbody > tr:last-child > * { border-bottom-width: 0; }

/* numbers line up: tabular figures everywhere, flush to the END edge (right in LTR, left in RTL)
   in a column js/tables.js found to be all numbers; a page's own text-align still wins */
:where(table, .table) :where(td, th) { font-variant-numeric: tabular-nums; }
:where(table, .table) :where(td, th).is-num { text-align: end; }

caption { caption-side: top; text-align: start; }

/* ---- a stacked row (a phone card) ------------------------------------------------------------
   Pages restack their rows into blocks under their own breakpoint. js/tables.js sees that from the
   computed display of the cells and sets [data-stacked]. Then the tint moves from each cell to the
   whole card, so a stripe never comes in fragments, and the row keeps its rule and its spacing. */
table[data-stacked] > tbody > tr > * { box-shadow: none; }
table[data-stacked] > tbody > tr {
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.10));
}
table[data-stacked] > tbody > tr:nth-of-type(odd) {
    background-image: linear-gradient(var(--tbl-stripe), var(--tbl-stripe));
}
table[data-stacked] > tbody > tr:hover,
table[data-stacked] > tbody > tr:focus-within {
    background-image: linear-gradient(var(--tbl-hover), var(--tbl-hover));
}
table[data-stacked] > tbody > tr:last-child { border-bottom-width: 0; }

/* ---- long tables in the page flow keep their header in view --------------------------------
   Only a table js/tables.js measured as taller than a screen AND not inside a scroll container
   (position: sticky is dead inside overflow), so a header that sticks is a header that works. */
table.tbl-sticky > thead > tr > * { position: sticky; top: var(--tbl-sticky-top, 64px); z-index: 2; background-color: var(--bg, #12101A); }

/* ---- the customer portal (css/account.css draws its tables with the --app-* tokens) ------- */
.account-body {
    --tbl-stripe: rgba(255, 176, 130, 0.075);
    --tbl-hover:  rgba(232, 86, 34, 0.16);
    --tbl-head:   rgba(255, 255, 255, 0.07);
    --tbl-head-line: rgba(255, 255, 255, 0.20);
}
:root[data-theme="light"] .account-body {
    --tbl-stripe: rgba(166, 58, 12, 0.07);
    --tbl-hover:  rgba(184, 65, 15, 0.12);
    --tbl-head:   rgba(43, 40, 59, 0.07);
    --tbl-head-line: rgba(43, 40, 59, 0.30);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .account-body {
        --tbl-stripe: rgba(166, 58, 12, 0.07);
        --tbl-hover:  rgba(184, 65, 15, 0.12);
        --tbl-head:   rgba(43, 40, 59, 0.07);
        --tbl-head-line: rgba(43, 40, 59, 0.30);
    }
}
.account-body .acct-table { --bs-table-border-color: var(--app-line-soft); }
/* account.css paints the hover as a background; the row's own tint now carries it */
.account-body .acct-table tbody tr:hover td { background: transparent; }

/* ---- a table made of <div role="row"> rows (the rollout chart on sap-eta-integration.php) -----
   The same tone and hover as a <table>; the header row (the first child) keeps its own look. */
:where([role="table"]) > :where([role="row"]):nth-child(even) { box-shadow: inset 0 0 0 9999px var(--tbl-stripe); }
:where([role="table"]) > :where([role="row"]):hover { box-shadow: inset 0 0 0 9999px var(--tbl-hover); }