/* TerraStack.Blazor.UI
   ---------------------------------------------------------------------------
   Link from the host app:
     <link href="_content/TerraStack.Blazor.UI/TerraStack.Blazor.UI.css" rel="stylesheet" />

   Optional. Every component keeps a working inline fallback, so an app that has
   not linked this file still renders correctly - it just loses the row tinting
   on the frozen column described below.
   --------------------------------------------------------------------------- */

/* ── TableListComponent: frozen first column ────────────────────────────────
   A sticky cell is painted after its siblings, so it needs an opaque background
   of its own or the columns scrolling underneath show straight through it. A
   flat palette colour is not enough: the row it sits in is striped, hovered and
   selected with *translucent* overlays, and a cell painted a fixed colour stays
   stubbornly untinted while the rest of the row changes.

   So the cell paints two layers - an opaque base plus the row's current overlay
   as a gradient - and the row publishes its overlay through --ts-row-tint. The
   selectors below mirror MudBlazor's own striped/hover rules so the tint lands
   on exactly the rows MudBlazor tints. A host that restyles those states can
   set --ts-row-tint in its own rule to keep the frozen column in step. */

.ts-sticky-table td.ts-sticky-col {
    /* !important beats the inline fallback style on the element itself. */
    background-color: var(--mud-palette-surface) !important;
    background-image: linear-gradient(var(--ts-row-tint, transparent),
                                      var(--ts-row-tint, transparent)) !important;
}

.ts-sticky-table.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    --ts-row-tint: var(--mud-palette-table-striped);
}

@media (hover: hover) and (pointer: fine) {
    .ts-sticky-table.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
        --ts-row-tint: var(--mud-palette-table-hover);
    }
}