/*
    Delade tabellklasser. Laddas globalt av varje host (Portal: wwwroot/index.html).

    Sätt .hammar-table på MudSimpleTable och .sticky-th på dess <th> — de två hör ihop: utan
    .hammar-table fryser inte rubrikraden (se nedan).
*/

/*
    Tabellens ytterhölje.

    FÄLLAN som den här klassen finns för: den inline-satta stilen `overflow-x: auto` gjorde
    .sticky-th verkningslös. Enligt CSS Overflow 3 kan inte en axel vara `visible` när den andra är
    `auto` — `overflow-y` beräknas då också till `auto`, så höljet blev en scroll-container. Höljets
    höjd är innehållsstyrd och det skrollar därför aldrig lodrätt, och en sticky-cell fryser mot
    NÄRMASTE scroll-container. Rubriken satt alltså fast i en box som aldrig rörde sig, medan sidan
    skrollade förbi under den.

    Smalt (< 960 px): vågrät skroll som förut — där behövs den, och rubriken får ge vika.
    Brett (≥ 960 px): inget hölje som fångar skrollen → .sticky-th fryser mot sidans skrollyta
    (.mud-main-content). Blir tabellen ändå bredare än containern tar .mud-main-content hand om den
    vågräta skrollen, så inget spiller utanför sidan.
*/
.hammar-table {
    overflow-x: auto;
}

@media (min-width: 960px) {
    .hammar-table {
        overflow-x: visible;
    }
}

/*
    ANDRA lådan i samma fälla. MudSimpleTable renderar TVÅ divar runt <table>:
    .mud-simple-table (den .hammar-table sitter på) och en inre .mud-table-container. MudBlazor ger
    den inre ovillkorligt `width: 100%; overflow-y: auto` — och med overflow-y: auto beräknas även
    overflow-x till auto. Den inre lådan blev alltså scroll-container oavsett vad vi gjorde med den
    yttre, den har innehållsstyrd höjd och skrollar därför aldrig lodrätt, och .sticky-th frös mot
    den. Att bara neutralisera den yttre räckte inte.

    Med båda visible fryser rubriken mot den skrollyta som faktiskt rör sig: sidans
    .mud-main-content, eller panelens innehållsyta när tabellen ligger i en ExpandablePanel.
    Smalt (< 960 px) tar den yttre lådan fortfarande hand om den vågräta skrollen som förut.
*/
.hammar-table > .mud-table-container {
    overflow: visible;
}

/* Fryst rubrikrad — fastnar överst i skrollytan, som börjar under AppBaren (se app.css). */
.sticky-th {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
    /* Underkantslinjen måste ritas av cellen själv: den inre <table> har border-collapse: collapse,
       och en kollapsad kantlinje tillhör rutnätet — inte cellen — så den följer inte med när
       cellen lyfts ur flödet. Utan detta tappar den frysta rubriken sin linje mot raderna. */
    box-shadow: inset 0 -1px 0 var(--mud-palette-table-lines);
}

/*
    Kolumnprioritet: sekundära kolumner göms på små skärmar så raden går att läsa utan att skrolla
    i sidled. Sätts på BÅDE <th> och <td> för samma kolumn — annars glider rubrik och celler isär.
    Behåll radens identitet, mängd, datum och tillstånd; göm härkomst och metadata.
*/
@media (max-width: 959.98px) {
    .col-secondary {
        display: none;
    }
}