/*
    aq-table - the shared, global table component

    For plain HTML tables only - anywhere the grid is NOT AG-Grid (AG-Grid has its own theming via
    ag-grid-shared.js / aquilastrap.css's .ag-theme-quartz overrides, is a completely different rendering
    engine, and should never be mixed with this on the same table).

    DENSITY AND WEIGHT - the two things this component is opinionated about:

    Rows are deliberately roomy (0.75rem of padding on every side, 1.5 line-height, ~46px tall) and text is
    deliberately NOT bold. The first cut of this file inherited NACHA's own numbers - 0.35rem padding and
    font-weight 700 on every heading, amount and highlighted figure - which is dense-terminal styling: it
    packs more rows in, but a wall of bold in a tight grid reads as heavy and cramped, and once everything
    is bold nothing is actually emphasised. So: one text weight for data (400), one for the few things that
    genuinely lead (500), and never 700. Emphasis comes from colour and space, not from weight.

    A screen that truly needs density back - a 500-row grid where scroll length is the dominant problem -
    adds `.aq-table-compact` to the table rather than overriding padding cell by cell. Both densities read
    as the same component; only the breathing room changes.

    Everything is driven by the --aq-table-* custom properties declared on `.aq-table` itself, so a screen
    can dial one value (say the row padding) without restating the rule.

    COLOUR: state modifiers (row and cell) reuse the app's own --aq-<state>-colour tokens and the same state
    vocabulary aq-btn/aq-badge already use (primary, secondary, success, error/danger, warning, attention,
    info/information, description, neutral, accent) - not a new palette. Row tints are a light wash; cell
    modifiers are text colour only. Neither shouts.

    USAGE SKETCH:

        <div class="aq-table-wrap">
          <table class="aq-table">
            <thead>
              <tr>
                <th scope="col" class="aq-table-col-chevron"></th>
                <th scope="col">
                  <button type="button" class="aq-table-header-sort aq-table-sorted" data-sort-field="...">
                    Column <i class="fas fa-arrow-down-long aq-table-sort-icon" aria-hidden="true"></i>
                  </button>
                </th>
                <th scope="col" class="aq-table-col-number">Amount</th>
              </tr>
              <tr class="aq-table-filter-row">
                <td></td>
                <td class="aq-table-column-filter">
                  <input type="search" class="form-control form-control-sm aq-table-filter-input" ...>
                </td>
                <td></td>
              </tr>
            </thead>
            <tbody>
              <tr class="aq-table-row aq-table-row-expandable aq-table-row-error">
                <td class="aq-table-col-chevron"><i class="fas fa-chevron-right aq-table-chevron"></i></td>
                <td>ACME LTD</td>
                <td class="aq-table-col-number aq-table-cell-error">204,357.86</td>
              </tr>
              <tr class="aq-table-detail-row">
                <td colspan="3"><div class="aq-table-detail-panel">...</div></td>
              </tr>
            </tbody>
          </table>
        </div>

    A table opts in with `.aq-table` on the <table> itself. Do NOT also put Bootstrap's `.table` on it -
    aquilastrap overrides `.table > tbody > tr > td` with its own 10px/18px padding and `.table-hover` with
    a solid grey ground plus `color: white !important` on every cell, both of which fight this component.
*/

.aq-table {
    /* DENSITY - the whole scale lives here, so `.aq-table-compact` (and any screen that needs its own
       density) only has to restate these two values rather than every padding rule below. */
    --aq-table-cell-pad-y: 0.75rem;
    --aq-table-cell-pad-x: 0.75rem;
    --aq-table-line-height: 1.5;

    /* TYPE - one size for data, one a step below it for headings/secondary text. No third size. */
    --aq-table-text: var(--aq-font-size);
    --aq-table-text-sm: calc(var(--aq-font-size) - 2px);
    /* The only emphasis weight on the whole component. Nothing here is ever 700 - see the file banner. */
    --aq-table-weight-strong: 500;

    --aq-table-font-mono: Consolas, "SF Mono", Menlo, "Courier New", monospace;

    --aq-table-radius-sm: calc(var(--aq-radius) / 2.5);
    --aq-table-radius-xs: calc(var(--aq-radius) / 4);

    /* SURFACES AND LINES - hairlines, not rules. A table this wide reads as a grid from its alignment
       alone; drawing a box around every cell only adds noise. */
    --aq-table-surface: var(--aq-white);
    --aq-table-surface-muted: color-mix(in srgb, var(--aq-off-white) 70%, var(--aq-white));
    --aq-table-border: color-mix(in srgb, var(--aq-grey-light) 45%, var(--aq-white));
    /* Slightly stronger, for the one line that has to hold its own while rows scroll under it. */
    --aq-table-border-strong: color-mix(in srgb, var(--aq-grey-light) 75%, var(--aq-white));

    --aq-table-text-muted: var(--aq-grey-text);
    --aq-table-hover: color-mix(in srgb, var(--aq-main-colour) 7%, var(--aq-white));
    /* Accent, not a deeper wash of hover's teal - a selected/expanded row is a different kind of state
       from "your pointer is here", so it gets a colour of its own rather than more of the same one. */
    --aq-table-selected: color-mix(in srgb, var(--aq-accent-colour) 10%, var(--aq-white));
    --aq-table-selected-hover: color-mix(in srgb, var(--aq-accent-colour) 15%, var(--aq-white));

    /* Sticky-offset bookkeeping - the filter row pins beneath the heading row, and a group row beneath
       both. Derived from the padding above so changing density keeps the offsets correct; the +1px is each
       row's own bottom border, without which the row below it pins one pixel high and content shows
       through the seam while scrolling. */
    --aq-table-header-row-h: calc((var(--aq-table-cell-pad-y) * 2) + (var(--aq-table-text-sm) * var(--aq-table-line-height)) + 1px);
    --aq-table-filter-row-h: 3rem;

    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    font-size: var(--aq-table-text);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--aq-text-colour, inherit);
}

/* Density modifier - for a grid where scroll length genuinely is the problem. Same component, tighter. */
.aq-table.aq-table-compact {
    --aq-table-cell-pad-y: 0.4rem;
    --aq-table-cell-pad-x: 0.5rem;
    --aq-table-line-height: 1.45;
    --aq-table-filter-row-h: 2.4rem;
}

/* Scrolling container - gives the sticky header something to stick within. Optional: a table that just
   flows with the page doesn't need it. */
.aq-table-wrap {
    overflow: auto;
}

/*------------------------------------*\
    TYPE HELPERS
\*------------------------------------*/

.aq-table .aq-table-strong {
    font-weight: var(--aq-table-weight-strong);
}

.aq-table .aq-table-mono {
    font-family: var(--aq-table-font-mono);
    font-size: var(--aq-table-text-sm);
}

/* Secondary line inside a cell - a reference under a name, a date under an amount. Lets a column carry
   two facts without needing two columns. */
.aq-table .aq-table-cell-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--aq-table-text-sm);
    color: var(--aq-table-text-muted);
}

/*------------------------------------*\
    HEADER

    No filled grey band. A muted, normal-weight label over a single hairline is what separates a heading
    from its data - the heavy tinted header block that used to sit here was most of why the table read as
    cramped, because it made every column look like a button.
\*------------------------------------*/

.aq-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--aq-table-surface);
    padding: var(--aq-table-cell-pad-y) var(--aq-table-cell-pad-x);
    border-top: none;
    border-bottom: 1px solid var(--aq-table-border-strong);
    font-size: var(--aq-table-text-sm);
    font-weight: var(--aq-table-weight-strong);
    line-height: var(--aq-table-line-height);
    letter-spacing: 0.01em;
    color: var(--aq-table-text-muted);
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

    /* A column heading that carries field documentation via the app's own tooltip system. */
    .aq-table thead th[data-tooltip] {
        cursor: help;
    }

/* Column header that sorts. A <button> so the sort is keyboard reachable. */
.aq-table-header-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: color 0.15s ease;
}

    .aq-table-header-sort:hover {
        color: var(--aq-main-colour);
    }

    .aq-table-header-sort:focus-visible {
        outline: 2px solid var(--aq-blue-text);
        outline-offset: 2px;
        border-radius: var(--aq-table-radius-xs);
    }

    /* Dimmed until the column is actually the sorted one, so a row of headers isn't a row of arrows. */
    .aq-table-header-sort .aq-table-sort-icon {
        font-size: 0.75em;
        opacity: 0.45;
        transition: opacity 0.15s ease, color 0.15s ease;
    }

    .aq-table-header-sort:hover .aq-table-sort-icon {
        opacity: 0.8;
    }

    .aq-table-header-sort.aq-table-sorted {
        color: var(--aq-main-colour);
    }

        .aq-table-header-sort.aq-table-sorted .aq-table-sort-icon {
            opacity: 1;
            color: var(--aq-main-colour);
        }

/*------------------------------------*\
    COLUMN FILTER ROW
\*------------------------------------*/

/* Pinned directly beneath the headings as the body scrolls, on a faintly tinted ground so it reads as a
   control strip rather than a second header. */
.aq-table thead .aq-table-filter-row td {
    position: sticky;
    top: var(--aq-table-header-row-h);
    z-index: 2;
    background-color: var(--aq-table-surface-muted);
    border-top: none;
    border-bottom: 1px solid var(--aq-table-border);
    padding: 0.4rem var(--aq-table-cell-pad-x);
    height: var(--aq-table-filter-row-h);
    vertical-align: middle;
}

/* Apply to each <td> that actually holds a filter control; the rest stay plain empty <td>s. Exists so a
   caller can target the filter cells specifically without re-deriving the row selector. */
.aq-table-column-filter {
    white-space: nowrap;
}

.aq-table-filter-input,
.aq-table-filter-select {
    min-width: 0;
    font-size: var(--aq-table-text-sm);
    border-radius: var(--aq-table-radius-sm);
}

/* For a column that only ever holds a few characters (an id, a page number) - a full-width box just looks
   empty. form-control is display:block, so this needs auto margins, not the parent's text-align. */
.aq-table-filter-input-narrow {
    width: 9ch;
    flex: none;
    margin: 0 auto;
}

/*------------------------------------*\
    BODY CELLS
\*------------------------------------*/

.aq-table tbody td {
    padding: var(--aq-table-cell-pad-y) var(--aq-table-cell-pad-x);
    border-top: none;
    /* One hairline per row, and none between columns - alignment already does that job. */
    border-bottom: 1px solid var(--aq-table-border);
    font-size: var(--aq-table-text);
    font-weight: 400;
    line-height: var(--aq-table-line-height);
    vertical-align: middle;
    /* A data table stays on one line per row - a wrapped cell in a wide grid drags its whole row taller
       and breaks the scan down the column. This is what Bootstrap's own `.table tbody tr td` rule gave
       these tables before; `.aq-table` deliberately isn't combined with `.table`, so it states it itself.
       Opt a genuinely long free-text column out with .aq-table-cell-wrap. */
    white-space: nowrap;
}

    /* The last row's own line would double up with whatever closes the pane below it. */
    .aq-table tbody tr:last-child > td {
        border-bottom: none;
    }

/* For a column of real prose (a description, remittance text) where truncating to one line loses more
   than an uneven row height costs. */
.aq-table td.aq-table-cell-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Numeric column - right-aligned and tabular so digits line up down the column. Medium weight at most:
   a column of bold numbers is the single heaviest thing a table can do. */
.aq-table .aq-table-col-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: var(--aq-table-weight-strong);
    white-space: nowrap;
}

.aq-table .aq-table-col-centre {
    text-align: center;
}

/*------------------------------------*\
    ROWS - hover / expand / select
\*------------------------------------*/

.aq-table-row > td {
    transition: background-color 0.15s ease;
}

.aq-table-row.aq-table-row-expandable {
    cursor: pointer;
}

    .aq-table-row.aq-table-row-expandable:hover > td {
        background-color: var(--aq-table-hover);
    }

    .aq-table-row.aq-table-row-expandable:focus-visible {
        outline: 2px solid var(--aq-blue-text);
        outline-offset: -2px;
    }

.aq-table-row.aq-table-row-expanded > td {
    background-color: var(--aq-table-selected);
}

    /* An open row keeps a distinct ground on hover rather than losing its state. */
    .aq-table-row.aq-table-row-expanded:hover > td {
        background-color: var(--aq-table-selected-hover);
    }

/*------------------------------------*\
    ROW STATE MODIFIERS

    Same state vocabulary as aq-btn/aq-badge. A light wash - enough to scan a column of rows and see which
    ones differ, not enough to make the text sitting on it work harder. Composes with -expandable/-expanded:
    a state modifier only sets the resting ground, so hover and selected still take over on top of it.
\*------------------------------------*/

.aq-table-row-primary > td { background-color: color-mix(in srgb, var(--aq-main-colour) 7%, var(--aq-white)); }
.aq-table-row-secondary > td { background-color: color-mix(in srgb, var(--aq-secondary-colour) 7%, var(--aq-white)); }
.aq-table-row-success > td { background-color: color-mix(in srgb, var(--aq-success-colour) 7%, var(--aq-white)); }
.aq-table-row-error > td,
.aq-table-row-danger > td { background-color: color-mix(in srgb, var(--aq-error-colour) 6%, var(--aq-white)); }
.aq-table-row-warning > td { background-color: color-mix(in srgb, var(--aq-warning-colour) 14%, var(--aq-white)); }
.aq-table-row-attention > td { background-color: color-mix(in srgb, var(--aq-attention-colour) 7%, var(--aq-white)); }
.aq-table-row-info > td,
.aq-table-row-information > td { background-color: color-mix(in srgb, var(--aq-information-colour) 6%, var(--aq-white)); }
.aq-table-row-description > td { background-color: color-mix(in srgb, var(--aq-description-colour) 6%, var(--aq-white)); }
.aq-table-row-neutral > td { background-color: color-mix(in srgb, var(--aq-neutral-colour) 5%, var(--aq-white)); }
.aq-table-row-accent > td { background-color: color-mix(in srgb, var(--aq-accent-colour) 7%, var(--aq-white)); }

/*------------------------------------*\
    CELL STATE MODIFIERS

    For one figure within an otherwise plain row (an out-of-balance amount, a flagged count) - colour and
    a half-step of weight, no background of its own, so it reads as "this value" without competing with a
    row tint if one is also present.
\*------------------------------------*/

.aq-table-cell-primary,
.aq-table-cell-secondary,
.aq-table-cell-success,
.aq-table-cell-error,
.aq-table-cell-danger,
.aq-table-cell-warning,
.aq-table-cell-attention,
.aq-table-cell-info,
.aq-table-cell-information,
.aq-table-cell-description,
.aq-table-cell-neutral,
.aq-table-cell-accent {
    font-weight: var(--aq-table-weight-strong);
}

.aq-table-cell-primary { color: var(--aq-main-colour-dark-50) !important; }
.aq-table-cell-secondary { color: var(--aq-secondary-colour-dark-25) !important; }
.aq-table-cell-success { color: var(--aq-success-colour-dark-25) !important; }
.aq-table-cell-error,
.aq-table-cell-danger { color: var(--aq-error-colour-dark-25) !important; }
.aq-table-cell-warning { color: var(--aq-warning-colour-dark-50) !important; }
.aq-table-cell-attention { color: var(--aq-attention-colour-dark-25) !important; }
.aq-table-cell-info,
.aq-table-cell-information { color: var(--aq-information-colour-dark-25) !important; }
.aq-table-cell-description { color: var(--aq-description-colour-dark-25) !important; }
.aq-table-cell-neutral { color: var(--aq-neutral-colour-dark-25) !important; }
.aq-table-cell-accent { color: var(--aq-accent-colour-dark-25) !important; }

/*------------------------------------*\
    CHEVRON / ICON COLUMNS
\*------------------------------------*/

/* Narrow lead column carrying only the expand affordance - empty on a row with nothing to expand. */
.aq-table .aq-table-col-chevron {
    width: 2.25rem;
    padding-left: 0.5rem;
    padding-right: 0.25rem;
    text-align: center;
}

/* A step below the action icons on purpose - the chevron reports state, it isn't a thing you go and click
   the way View/Audit Trail are, so it shouldn't carry the same weight as them. */
.aq-table-chevron {
    font-size: 0.85rem;
    color: var(--aq-table-text-muted);
    opacity: 0.7;
    transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

.aq-table-row.aq-table-row-expandable:hover .aq-table-chevron {
    opacity: 1;
}

.aq-table-row.aq-table-row-expanded .aq-table-chevron {
    transform: rotate(90deg);
    opacity: 1;
    color: var(--aq-accent-colour);
}

/* Icon-only columns (row actions, a status glyph). `medium` is the same size AG-Grid's own row-action
   cells use (.icon-container in aquilastrap.css) - matching it keeps a plain table's actions the same
   weight as the identical actions on a grid one screen over, rather than a size smaller for no reason
   the user can see. */
.aq-table .aq-table-col-icon {
    width: 1%;
    text-align: center;
    font-size: medium;
    white-space: nowrap;
}

/* A clickable icon inside a row - reset to read as a plain glyph whether it's a bare <i>, a <button> or
   an <a>. Colour, hover pill and radius all match AG-Grid's `.icon-container span`, so row actions read
   as one component across both kinds of grid. */
.aq-table-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--aq-blue-text);
    font-size: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    /* light-25 is the more saturated step - it has to read against a plain white row. */
    .aq-table-action-icon:hover {
        background-color: color-mix(in srgb, var(--aq-accent-colour-light-25) 40%, transparent);
    }

    .aq-table-action-icon:focus-visible {
        outline: 2px solid var(--aq-blue-text);
        outline-offset: -2px;
    }

/*------------------------------------*\
    GROUP ROW (optional)

    A quiet band naming the group whose rows follow - e.g. "Batch 12 CENTRAL BANK BZ" ahead of that batch's
    entries. Not every table needs one.
\*------------------------------------*/

.aq-table .aq-table-group-row > th {
    position: sticky;
    top: calc(var(--aq-table-header-row-h) + var(--aq-table-filter-row-h));
    z-index: 1;
    padding: 0.5rem var(--aq-table-cell-pad-x);
    background-color: var(--aq-table-surface-muted);
    border-top: 1px solid var(--aq-table-border);
    border-bottom: 1px solid var(--aq-table-border);
    font-size: var(--aq-table-text-sm);
    font-weight: var(--aq-table-weight-strong);
    color: var(--aq-blue-text);
    white-space: nowrap;
    cursor: pointer;
}

.aq-table .aq-table-group-row:hover > th {
    background-color: var(--aq-table-hover);
}

.aq-table-group-row-meta {
    font-weight: 400;
    color: var(--aq-table-text-muted);
}

/* The action reads only on hover, so the band stays quiet at rest. */
.aq-table-group-row-action {
    float: right;
    font-weight: 400;
    color: var(--aq-main-colour);
    visibility: hidden;
}

.aq-table .aq-table-group-row:hover .aq-table-group-row-action {
    visibility: visible;
}

/*------------------------------------*\
    DETAIL ROW (expand-in-place)
\*------------------------------------*/

.aq-table .aq-table-detail-row > td {
    padding: 0;
    border-bottom: 1px solid var(--aq-table-border);
    background-color: color-mix(in srgb, var(--aq-accent-colour) 5%, var(--aq-white));
    white-space: normal;
}

.aq-table-detail-panel {
    padding: 1rem 1.25rem;
    /* Rest state is fully visible, so a panel rendered outside the toggle - or with script disabled - is
       never stuck hidden. */
    opacity: 1;
    transform: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

    /* Applied for one frame on insert, then removed via a double requestAnimationFrame - starting the
       element in this state and painting it before the class comes off is what gives the browser
       something to transition from. */
    .aq-table-detail-row.aq-table-detail-entering .aq-table-detail-panel {
        opacity: 0;
        transform: translateY(-4px);
    }

    /* Applied for the exit fade before the row is actually removed - leaving is quicker than arriving. */
    .aq-table-detail-row.aq-table-detail-closing .aq-table-detail-panel {
        opacity: 0;
        transform: translateY(-4px);
        transition-duration: 0.12s;
    }

/*------------------------------------*\
    TOOLBAR
\*------------------------------------*/

/* Sits between the pane's own header and the scrolling table, so it never moves and the sticky thead has
   a fixed edge to stick to. */
.aq-table-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0.85rem;
    background-color: var(--aq-white);
    border-bottom: 1px solid var(--aq-table-border);
    font-size: var(--aq-font-size);
}

/* A plain input - searching happens as the user types, so there is no button and nothing that looks like
   one. */
.aq-table-search {
    max-width: 22rem;
    flex: 1 1 14rem;
}

.aq-table-shown-count {
    margin-left: auto;
    white-space: nowrap;
    color: var(--aq-grey-text);
}

/* A quiet utility action - flat and wordless at rest, so it reads as housekeeping ("Collapse all",
   "Refresh") rather than competing with Search for attention. */
.aq-table-toolbar-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--aq-radius, 0.6rem);
    font-size: calc(var(--aq-font-size) - 2px);
    color: var(--aq-grey-text);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .aq-table-toolbar-action:hover {
        background-color: color-mix(in srgb, var(--aq-main-colour) 8%, var(--aq-white));
        border-color: color-mix(in srgb, var(--aq-grey-light) 45%, var(--aq-white));
        color: var(--aq-blue-text);
    }

    .aq-table-toolbar-action:focus-visible {
        outline: 2px solid var(--aq-blue-text);
        outline-offset: -2px;
    }

/*------------------------------------*\
    CODE CHIP

    A translated label with its raw underlying code alongside, so a friendly label never hides what the
    record actually says (e.g. "Consumer" next to the raw "PPD").
\*------------------------------------*/

.aq-table-code-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    background-color: var(--aq-table-surface-muted);
    border: 1px solid var(--aq-table-border);
    border-radius: var(--aq-table-radius-sm);
    padding: 0.1rem 0.45rem;
    font-size: calc(var(--aq-font-size) - 2px);
    white-space: nowrap;
}

    .aq-table-code-chip .aq-table-code-chip-raw {
        font-family: var(--aq-table-font-mono);
        color: var(--aq-grey-text);
    }

/*------------------------------------*\
    STATES (placeholder / empty / error)
\*------------------------------------*/

.aq-table-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--aq-grey-text);
}

    .aq-table-state .aq-table-state-icon {
        display: block;
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
        opacity: 0.5;
    }

    .aq-table-state .aq-table-state-title {
        font-weight: 500;
        color: var(--aq-blue-text);
        margin-bottom: 0.25rem;
    }

/* Empty state rendered as a row inside the table body rather than in place of it, so the column layout
   doesn't collapse while there is nothing to show. */
.aq-table tbody td.aq-table-empty-cell {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--aq-grey-text);
    border-bottom: none;
}

/*------------------------------------*\
    FOOTERS (optional)
\*------------------------------------*/

/* Keyboard shortcut legend, pinned to the foot of the pane rather than scrolling with it. */
.aq-table-kbd-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.85rem;
    border-top: 1px solid var(--aq-table-border);
    background-color: var(--aq-white);
    font-size: calc(var(--aq-font-size) - 2px);
    color: var(--aq-grey-text);
}

.aq-table-load-more-wrap {
    padding: 0.85rem;
    text-align: center;
    border-top: 1px solid var(--aq-table-border);
}

/*------------------------------------*\
    REDUCED MOTION

    Same convention as aquilastrap.css's own per-component blocks - state still changes instantly (a row
    still selects, a panel still opens), only the transition between states goes.
\*------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    .aq-table-row > td,
    .aq-table-chevron,
    .aq-table-action-icon,
    .aq-table-header-sort,
    .aq-table-header-sort .aq-table-sort-icon,
    .aq-table-detail-panel {
        transition: none;
    }
}

/*------------------------------------*\
    DARK THEME

    --aq-white stays literal white in dark mode by design (see aquilastrap.css's own note on the
    [data-theme="dark"] block) - components are expected to set their own surfaces, which is what this
    does. Row/cell states use the same rgba-tint recipe aq-badge's dark variants use rather than re-running
    the light-mode colour-mix against a dark ground.
\*------------------------------------*/

[data-theme="dark"] .aq-table {
    --aq-table-surface: var(--aq-surface-dark-card);
    --aq-table-surface-muted: var(--aq-surface-dark-inset);
    --aq-table-border: var(--aq-surface-dark-border);
    --aq-table-border-strong: var(--aq-surface-dark-border-2, var(--aq-surface-dark-border));
    --aq-table-text-muted: var(--aq-neutral-colour-light-50);
    --aq-table-hover: rgba(128, 211, 201, 0.08);
    --aq-table-selected: rgba(124, 77, 255, 0.16);
    --aq-table-selected-hover: rgba(124, 77, 255, 0.24);
}

[data-theme="dark"] .aq-table-toolbar,
[data-theme="dark"] .aq-table-kbd-bar {
    background-color: var(--aq-surface-dark-card);
    border-color: var(--aq-surface-dark-border);
}

/* Same pair of overrides AG-Grid's own .icon-container carries for dark mode: the resting blue lifts to a
   readable step, and the hover pill uses the paler violet (light-50), which reads as a glow on a dark
   surface where the more saturated light-25 goes muddy. */
[data-theme="dark"] .aq-table-action-icon {
    color: var(--aq-secondary-colour-light-50);
}

    [data-theme="dark"] .aq-table-action-icon:hover {
        background-color: color-mix(in srgb, var(--aq-accent-colour-light-50) 30%, transparent);
    }

[data-theme="dark"] .aq-table .aq-table-detail-row > td {
    background-color: rgba(124, 77, 255, 0.1);
}

[data-theme="dark"] .aq-table-row-primary > td { background-color: rgba(128, 211, 201, 0.1); }
[data-theme="dark"] .aq-table-row-secondary > td { background-color: rgba(44, 79, 122, 0.18); }
[data-theme="dark"] .aq-table-row-success > td { background-color: rgba(13, 165, 0, 0.1); }
[data-theme="dark"] .aq-table-row-error > td,
[data-theme="dark"] .aq-table-row-danger > td { background-color: rgba(255, 0, 0, 0.1); }
[data-theme="dark"] .aq-table-row-warning > td { background-color: rgba(255, 230, 0, 0.12); }
[data-theme="dark"] .aq-table-row-attention > td { background-color: rgba(255, 107, 0, 0.1); }
[data-theme="dark"] .aq-table-row-info > td,
[data-theme="dark"] .aq-table-row-information > td { background-color: rgba(0, 10, 255, 0.12); }
[data-theme="dark"] .aq-table-row-description > td { background-color: rgba(250, 0, 255, 0.1); }
[data-theme="dark"] .aq-table-row-neutral > td { background-color: rgba(68, 73, 85, 0.2); }
[data-theme="dark"] .aq-table-row-accent > td { background-color: rgba(124, 77, 255, 0.1); }

[data-theme="dark"] .aq-table-cell-primary { color: var(--aq-main-colour) !important; }
[data-theme="dark"] .aq-table-cell-secondary { color: var(--aq-secondary-colour-light-50) !important; }
[data-theme="dark"] .aq-table-cell-success { color: var(--aq-success-colour) !important; }
[data-theme="dark"] .aq-table-cell-error,
[data-theme="dark"] .aq-table-cell-danger { color: var(--aq-error-colour-light-25) !important; }
[data-theme="dark"] .aq-table-cell-warning { color: var(--aq-warning-colour) !important; }
[data-theme="dark"] .aq-table-cell-attention { color: var(--aq-attention-colour) !important; }
[data-theme="dark"] .aq-table-cell-info,
[data-theme="dark"] .aq-table-cell-information { color: var(--aq-information-colour-light-50) !important; }
[data-theme="dark"] .aq-table-cell-description { color: var(--aq-description-colour) !important; }
[data-theme="dark"] .aq-table-cell-neutral { color: var(--aq-neutral-colour-light-75) !important; }
[data-theme="dark"] .aq-table-cell-accent { color: var(--aq-accent-colour-light-50) !important; }