/*
    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: omärkta kolumner syns alltid, .col-tablet syns från 600px, .col-desktop syns
    från 960px. Sätts på BÅDE <th> och <td> för samma kolumn. Regeln: docs/ui/skarmklasser.md.
    Prefixet behövs: MudBlazors `display: table-cell` (0,1,3) slår en ensam klass.
*/
@media (max-width: 959.98px) {
    .mud-simple-table .col-desktop,
    .mud-table .col-desktop { display: none; }
}
@media (max-width: 599.98px) {
    .mud-simple-table .col-tablet,
    .mud-table .col-tablet { display: none; }
}

/*
    Prognos-markering (netdemand): rader ur OFIRMADE prognoskörningar och deras chip. Lila är den
    enda kulör som inte redan bär betydelse i Portalen (blå info, grön ok, amber varning, röd fel,
    grå inaktivt) — samma färg i chips, beläggningens prognossegment och drilldown-sektionen: en
    betydelse, en färg. Tonade radbakgrunden ligger på deep purple med låg alfa så den fungerar på
    både ljus och mörk MudBlazor-yta; !important behövs mot Striped-tabellernas radfärg.
*/
.forecast-row,
.hammar-table tbody tr.forecast-row:nth-of-type(odd),
.hammar-table tbody tr.forecast-row:nth-of-type(even) {
    background-color: rgba(126, 87, 194, 0.10) !important;
}

.forecast-chip {
    color: #7e57c2 !important;
    border-color: #7e57c2 !important;
}

/* Strukturbehov-chipet i FlowPegSummary: otäckt behov hos förfäder i strukturen som saknar
   tillverkningsorder eller plan. */
.structure-chip {
    color: #7a5a1c !important;
    border-color: #c99a3a !important;
    border-style: dashed !important;
    background-color: #fff5e0 !important;
}

/* Nolldestination i FlowPegSummary/FlowPegTable — visas ändå (alla fem alltid), men tonas ned. */
.peg-zero {
    opacity: .55;
}

/*
    Behovstäckningens fem destinationsfärger, delade av PegColumnHeaders/PegColumnCells
    (WorkorderList, framtida konsumenter) och legenden på Fargpalett. Prognos delar .forecast-chip
    (samma lila) ovan i stället för en sjätte klass.
*/
.peg-customerorder { color: var(--mud-palette-success) !important; }
.peg-safetystock    { color: var(--mud-palette-info) !important; }
.peg-buffer         { color: var(--mud-palette-primary) !important; }
.peg-cyclestock     { color: #00ACC1 !important; border-color: #00ACC1 !important; }
.stocklevel-contract { color: #C2185B !important; }
.peg-overstock      { color: var(--mud-palette-warning) !important; }

/* Rubrikens färgruta: fylld för Kundorder/Överlager, kontur för de tre andra — currentColor läser
   färgen av destinationsklassen den kombineras med. */
.peg-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}
.peg-swatch.filled { background-color: currentColor; }
.peg-swatch.outline { border: 1.5px solid currentColor; }


/*
    Radton per ANSKAFFNINGSSÄTT (HammarAppPalette.RowTone). Kulören är grafnodens stroke ur
    nodePalette.js — en köpt artikel har samma orange i Inköpsbehov som i materialflödet — lagd med
    låg alfa så bottnen fungerar på både ljus och mörk MudBlazor-yta. Samma teknik som .forecast-row
    ovan, och !important behövs av samma skäl: Striped-tabellernas nth-of-type vinner annars.

    Tonen säger vad raden ÄR. Tillståndet (Klar/Brådskar/Försenad) bärs av chipen och rörs inte här.
    Prognosrader tonas inte — .forecast-row äger dem, och två bottnar på samma rad går inte att läsa.
*/
.hammar-tone.tone-purchase,
.hammar-table tbody tr.tone-purchase:nth-of-type(odd),
.hammar-table tbody tr.tone-purchase:nth-of-type(even) {
    background-color: rgba(230, 81, 0, 0.10) !important;
}

.hammar-tone.tone-lego,
.hammar-table tbody tr.tone-lego:nth-of-type(odd),
.hammar-table tbody tr.tone-lego:nth-of-type(even) {
    background-color: rgba(210, 69, 69, 0.10) !important;
}

.hammar-tone.tone-transfer,
.hammar-table tbody tr.tone-transfer:nth-of-type(odd),
.hammar-table tbody tr.tone-transfer:nth-of-type(even) {
    background-color: rgba(123, 31, 162, 0.10) !important;
}

.hammar-tone.tone-manufacture,
.hammar-table tbody tr.tone-manufacture:nth-of-type(odd),
.hammar-table tbody tr.tone-manufacture:nth-of-type(even) {
    background-color: rgba(4, 127, 89, 0.10) !important;
}

.hammar-tone.tone-stock,
.hammar-table tbody tr.tone-stock:nth-of-type(odd),
.hammar-table tbody tr.tone-stock:nth-of-type(even) {
    background-color: rgba(63, 105, 153, 0.10) !important;
}

/* Hover måste vinna över tonen, annars svarar en tonad rad inte på musen alls. */
.hammar-table tbody tr.tone-purchase:hover    { background-color: rgba(230, 81, 0, 0.20) !important; }
.hammar-table tbody tr.tone-lego:hover        { background-color: rgba(210, 69, 69, 0.20) !important; }
.hammar-table tbody tr.tone-transfer:hover    { background-color: rgba(123, 31, 162, 0.20) !important; }
.hammar-table tbody tr.tone-manufacture:hover { background-color: rgba(4, 127, 89, 0.20) !important; }
.hammar-table tbody tr.tone-stock:hover       { background-color: rgba(63, 105, 153, 0.20) !important; }

/* Palettsidans provruta använder SAMMA klasser som raderna, så den aldrig kan visa en färg
   listorna inte har. Storleken är rutans, färgen är radens. */
.hammar-tone {
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid currentColor;
}