/* _content/BrandstofApp.Server/Components/Ui/DataTable.razor.rz.scp.css */
/*
    De cellen worden door de pagina geschreven, dus ze kunnen geen utility-klassen van dit
    component meekrijgen. Vandaar ::deep — het alternatief is zes klassen per cel overtypen
    en één keer vergeten.

    De waarden komen uit design/tokens.css, dat Tailwind in :root zet.
*/

[b-rrekkbzm3r] thead tr,
[b-rrekkbzm3r] tfoot tr {
    background: var(--color-plane);
}

[b-rrekkbzm3r] th {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

[b-rrekkbzm3r] td {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);
    border-bottom: 1px solid var(--color-border);
}

[b-rrekkbzm3r] tbody tr:last-child td {
    border-bottom: 0;
}

[b-rrekkbzm3r] tbody tr:hover td {
    background: var(--color-raised);
}

/* Eén uitgelichte rij: de laatste, of degene waar het scherm om draait. */
[b-rrekkbzm3r] tbody tr[aria-current] td {
    background: var(--color-raised);
}

[b-rrekkbzm3r] tfoot td {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);
    border-bottom: 0;
    border-top: 1px solid var(--color-border-strong);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Rechts uitlijnen wat een getal is, links wat een woord is. */
[b-rrekkbzm3r] .num {
    text-align: right;
}

[b-rrekkbzm3r] .total {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
}