/*
 * ONE zebra stripe for every list in the app.
 *
 * Why a shared file: the alternation is a convention, not a per-page decision. Two
 * pages inventing their own shade is exactly the drift docs/UI-CONVENTIONS.md warns
 * about, and a table that stripes itself will disagree with the one beside it.
 *
 * Loaded by BOTH layouts, immediately after the theme + vendor CSS (see
 * tests/Feature/UiConventionsTest.php). Source order matters here: the theme ships
 * .table-striped at the SAME specificity, so whichever loads last wins - relying on
 * specificity alone would be a coin flip against a theme update.
 *
 * Only `tbody` rows are striped:
 *   - a header (`thead`) keeps its own emphasis - striping it fights the sticky header;
 *   - colour-coded rows are left alone. Bootstrap paints contextual rows (table-warning,
 *     table-danger, ...) through --bs-table-bg, and list-group variants through
 *     --bs-list-group-bg. A blanket background-color would erase those, so both row sets
 *     are excluded below and the list-group rule sets the VARIABLE rather than the colour.
 *
 * Opt a single list out with class="bim-no-zebra".
 */

:root {
    /* "light gray and white alternating" - the gray is a hair, not a band: at #f8fafc it
       reads as a row guide rather than a stripe, which is what keeps dense financial
       tables readable. */
    --bim-zebra-odd: #ffffff;
    --bim-zebra-even: #f8fafc;
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */

/* `--bs-table-striped-bg: transparent` is NOT decoration - it is what makes the
   stripe visible at all on a table that also carries `.table-striped`.

   Bootstrap paints a striped row with TWO layers: the cell's own background-color,
   and an inset box-shadow (`inset 0 0 0 9999px var(--bs-table-accent-bg)`) whose
   accent resolves to `var(--bs-table-striped-bg)` on `tr:nth-child(odd)` - which in
   this theme is `rgba(76, 78, 100, .05)`. So on odd rows the theme laid a 5% grey
   FILM over our #ffffff: measured rgb(246, 246, 247) against our even row's
   rgb(248, 250, 252). Two colours 1-2% apart read as one flat colour, so a striped
   table looked completely unstriped - while the same table WITHOUT the
   `.table-striped` class alternated correctly. That was the "blog posts list is not
   zebra striped" report.

   Neutralising the striped VARIABLE (rather than the box-shadow itself) is the fix
   that keeps hover working: Bootstrap's `.table-hover` accent uses
   `--bs-table-hover-bg`, a different variable, so a `.table-hover` row still lights
   up. `box-shadow: none` here would have killed hover highlighting sitewide.

   The two rules below are deliberately written OUT with every contextual row excluded
   rather than "striped, then corrected": a correction rule would have to out-specify the
   stripe, and this file is loaded late on purpose, so the stripe wins every specificity
   tie. Excluding in the selector is the only version that cannot silently recolour an
   "overdue" red row.

   `.table:not(.bim-no-zebra)` is the opt-out: the class goes on the <table> itself, so a
   list that must not be striped simply never matches here and needs no counter-rule. */
.table:not(.bim-no-zebra) > tbody > tr:nth-child(odd):not(.table-primary):not(.table-secondary):not(.table-success):not(.table-info):not(.table-warning):not(.table-danger):not(.table-light):not(.table-dark):not(.table-active) > * {
    background-color: var(--bim-zebra-odd);
    --bs-table-striped-bg: transparent;
}

.table:not(.bim-no-zebra) > tbody > tr:nth-child(even):not(.table-primary):not(.table-secondary):not(.table-success):not(.table-info):not(.table-warning):not(.table-danger):not(.table-light):not(.table-dark):not(.table-active) > * {
    background-color: var(--bim-zebra-even);
    --bs-table-striped-bg: transparent;
}

/* ── Lists ──────────────────────────────────────────────────────────────────── */

/* Set the VARIABLE, not background-color: a variant class only redefines the variable,
   so an item that opts into list-group-item-danger keeps its colour. */
.list-group:not(.bim-no-zebra) > .list-group-item:nth-child(even):not(.list-group-item-primary):not(.list-group-item-secondary):not(.list-group-item-success):not(.list-group-item-info):not(.list-group-item-warning):not(.list-group-item-danger):not(.list-group-item-light):not(.list-group-item-dark) {
    --bs-list-group-bg: var(--bim-zebra-even);
}

/* ── Money in a list ────────────────────────────────────────────────────────── */

/* An amount is a value, not a label: no capsule, no fill - just aligned, tabular
   figures so a column of them lines up on the decimal point. */
.bim-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #2f3349;
    white-space: nowrap;
}

/* ── Identity in a list ─────────────────────────────────────────────────────── */

/* A login's accounts and its platform role sit in their own columns. They get a
   DELICATE fill - a light background and a thin border, regular weight - so the cell
   reads as a label without competing with the status chips on the same row. (The name
   column is not a chip: it stays plain bold grey, which is the differentiation.) */
.bim-identity {
    display: inline-block;
    padding: .14rem .5rem;
    font-weight: 400;
    line-height: 1.5;
    color: #4a5568;
    background-color: #f2f4f7;
    border: 1px solid #e3e7ec;
    border-radius: .375rem;
    white-space: nowrap;
    text-decoration: none;
}

a.bim-identity:hover {
    background-color: #e9edf1;
}

/* ── A list table standing on its own ───────────────────────────────────────── */

/* A table inside .bim-list-panel gets its top and bottom edges from the panel's own
   1px border. A table that stands alone in a card body has only row separators and the
   header underline, so it reads as unbounded against the card - this gives it the same
   two edges. Same colour token as the panel border and the header underline, so the
   three cannot drift apart. */
.bim-table-edges {
    border-top: 1px solid rgba(var(--bs-body-color-rgb, 130, 131, 147), .12);
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb, 130, 131, 147), .12);
}