/* Planning/PlanningRunCard: ett steg som var av när körningen startades — ram i stället för kort. */
.mud-paper.planning-run-card--skipped {
    box-shadow: none;
    background-color: transparent;
    border: 1px solid var(--mud-palette-lines-default);
}

.planning-run-card--skipped .planning-run-card__heading {
    opacity: 0.6;
}

/*
    Delade panelklasser för Common/ExpandablePanel. Laddas globalt av varje host (Portal:
    wwwroot/index.html) — utan <link>-raden saknar panelen all layout och renderar som staplade divar.

    Två inline-satta custom properties på slotten styr all höjd:
      --hammar-panel-max-height       max-höjd i expanderat läge (default 360px ≈ 10 dense-rader)
      --hammar-panel-full-max-height  valfritt tak även i fullskärm (default none = fyll ytan)
*/

.hammar-panel {
    display: flex;
    flex-direction: column;
    /* Utan detta vägrar en flex-item krympa under sitt innehålls storlek, och body:ns overflow
       skulle aldrig slå in — panelen skulle växa med tabellen i stället för att skrolla. */
    min-height: 0;
    /* Klipper innehållet mot .mud-papers rundade hörn — en randig tabellrad som går ända ut
       fyrkantar annars underkanten.
       clip, INTE hidden: hidden gör lådan till en scroll-container (en som aldrig skrollar), och då
       fryser .sticky-th mot HENNE i stället för mot ytan som faktiskt rör sig. Det spelar ingen roll
       så länge kroppen har egen skroll — men i smalt läge (media-queryn längst ned) har den inte
       det, och då ska rubrikraden frysa mot sidan. clip klipper likadant utan att bli skrollport. */
    overflow: clip;
}

.hammar-panel__header {
    display: flex;
    align-items: center;
    /* HeaderActions kan bära riktiga knappar med text (CalendarRulesPanel: "Ny regel" + "Bygg om
       kalender") och panelen kan stå i en smal kolumn. MudBlazor sätter ingen white-space: nowrap
       på .mud-button, så utan wrap radbryts etiketterna INUTI knapparna i stället för att raden
       lägger sig om — och .hammar-panel { overflow: clip } klipper det som ändå inte får plats. */
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    flex: 0 0 auto;
    cursor: pointer;
    user-select: none;
}

/* Rubriken ska bara se klickbar ut när klicket gör något. Utan AllowCollapse är rubrikklicket en
   no-op, och i fullskärm stänger man med X eller Escape — inte genom att klicka på raden. */
.hammar-panel--locked > .hammar-panel__header,
.hammar-panel--full > .hammar-panel__header {
    cursor: default;
}

.hammar-panel--disabled .hammar-panel__header {
    cursor: default;
    color: var(--mud-palette-text-disabled);
}

/* ...men en inaktiverad panel som står ÖPPEN går fortfarande att minimera (annars är användaren
   instängd i den, se SetStageAsync). Då ska rubriken se klickbar ut igen. */
.hammar-panel--disabled.hammar-panel--expanded > .hammar-panel__header {
    cursor: pointer;
}

/* Linje mellan rubrik och innehåll — bara när det finns något innehåll att skilja den från. */
.hammar-panel--expanded > .hammar-panel__header,
.hammar-panel--full > .hammar-panel__header {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/*
    Innehållet. Panelen är scroll-container i BÅDA axlarna — avsiktligt, med två följder:
      · .sticky-th (hammar-tables.css) fryser mot NÄRMASTE scroll-container, dvs. mot panelen i
        stället för mot sidan. Det är precis vad vi vill så snart panelen kapar höjden.
      · En bred tabell skrollar i sidled INNE i panelen i stället för att lämna över till
        .mud-main-content.
    INGEN overscroll-behavior: contain. Den satt här förr så att sidan bakom inte skulle börja åka
    när panelen tagit slut — men priset var att panelen åt hjulet helt. overflow: auto gör kroppen
    till scroll-container ÄVEN när innehållet ryms med marginal, och contain gäller containern som
    sådan, inte bara när den har något att skrolla: en panel utan överskott varken skrollade själv
    eller lämnade över, så sidan stod still så fort muspekaren råkade hamna över en panel. Kedjning
    är vad webbläsaren gör överallt annars, och att skrolla en bit för långt är billigare än att inte
    komma vidare alls.
*/
.hammar-panel__body {
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Minimerat läge göms med CSS i stället för att tas ur render-trädet: innehållet har redan
   renderats en gång, och att behålla det i DOM:en bevarar tabellens state (val, sortering,
   skrollposition) över en kollaps. */
.hammar-panel__body--hidden {
    display: none;
}

.hammar-panel--expanded > .hammar-panel__body {
    max-height: var(--hammar-panel-max-height, 360px);
}

.hammar-panel--full > .hammar-panel__body {
    max-height: var(--hammar-panel-full-max-height, none);
}

/* MudSimpleTables default-marginal ger annars en glipa mot scroll-containerns kant (samma sak som
   de befintliga max-height-tabellerna löser med Style="margin: 0;"). */
.hammar-panel__body > .mud-simple-table {
    margin: 0;
}

/*
    En tabell ska gå kant i kant med panelen — allt annat behöver luft. Tabellkomponenterna i huset
    växlar mellan tabellen och ett tomtillstånd (laddar-rad, IdleText, MudAlert), så paddingen kan
    inte sättas av anroparen en gång för alla: den måste följa vad som faktiskt renderas just nu.
*/
.hammar-panel__body:not(:has(> .mud-table)) {
    padding: 0.5rem 0.75rem;
}

/*
    ...men regeln ovan tittar bara på om en tabell finns, inte på om den är ENSAM. En panel med
    BLANDAT innehåll (kontrollrad + tabell — t.ex. leverantörens Kapacitet med Från/Till-pickers,
    eller Volymtrappan med sin Lägg till-knapp) tappar därför paddingen så fort tabellen renderas,
    och kontrollerna ligger kant i kant med panelkanten. Värre: paddingen kommer TILLBAKA i tomt/
    laddande läge, när tabellen inte finns, så layouten hoppar mellan tillstånden.
    Sådana paneler begär i stället padding uttryckligen via ContentClass, och får den i alla lägen.
    Priset är att tabellen paddas med — rätt avvägning här: den är ändå inte ensam om ytan.
*/
.hammar-panel__body--padded {
    padding: 0.5rem 0.75rem;
}

/* MudList bär egen lodrät padding ovanpå den panelen just gav → dubbel luft över första raden och
   under den sista. Panelen äger luften; listan ska bara vara rader. (Gäller varje list-baserad
   panel, t.ex. Stock/StockBalancePanel.) */
.hammar-panel__body > .mud-list {
    padding-top: 0;
    padding-bottom: 0;
}

/*
    TÄT PANEL (ExpandablePanel.Dense) — opt-in, grundreglerna ovan är orörda.

    VARFÖR KNAPPARNA MÅSTE MED: rubrikradens höjd sätts av LÄGESKNAPPARNA, inte av texten. En
    MudIconButton i Size.Small är 30 px, och Shopfloor lyfter dessutom varje .mud-button-root till
    48 px för handske (Shopfloor/wwwroot/css/app.css) — där blir raden ~64 px med 8 px padding i
    topp och botten. Krymper man BARA paddingen händer alltså nästan ingenting i just den host där
    höjden kostar. Med knapparna på 32 px landar raden på ~36 px i båda hostarna.

    AVVÄGNINGEN, RAKT UT: hela rubrikraden är toggeln (@onclick på .hammar-panel__header), så målet
    är radens fulla BREDD — det är bara HÖJDEN som krymper, och den landar på ~36 px, alltså under
    både Shopfloors egna 48 px och WCAG AAA:s 44. Det är ett medvetet avsteg (Viktor bad om en
    lägre rubrikrad), och det är försvarbart just här: verbet är minimera/expandera en
    sammanfattningsrad, inget destruktivt, och inget annat interaktivt element ligger inom 4 px.
    Sätt därför INTE Dense på en panel vars rubrik bär riktiga åtgärder i HeaderActions — där är
    48 px-regeln på riktigt. Och krymp aldrig under 32: fullskärms- och minimera-knappen står
    intill varandra, och två 24 px-mål med 4 px emellan är ett feltryck med handske.

    Selektorerna bär .hammar-panel--dense och slår därför både grundreglerna här och Shopfloors
    .mud-button-root på specificitet, oavsett i vilken ordning stilmallarna laddas.
*/
.hammar-panel--dense > .hammar-panel__header {
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
}

.hammar-panel--dense > .hammar-panel__header .mud-button-root {
    min-height: 32px;
    height: 32px;
    width: 32px;
    padding: 4px;
}

/* Kroppen: halva luften. BÅDA paddingreglerna ovan behöver en tät motsvarighet — utan den andra
   tappar en tät panel med blandat innehåll (ContentClass) sin padding helt i stället för att få
   mindre. */
.hammar-panel--dense > .hammar-panel__body:not(:has(> .mud-table)),
.hammar-panel--dense > .hammar-panel__body--padded {
    padding: 0.25rem 0.375rem;
}

/*
    .hammar-table finns till för att INTE bli scroll-container, så att rubriken kan frysa mot sidans
    skrollyta. Inuti panelen finns redan en scroll-container — då skulle klassens smala-skärm-regel
    (overflow-x: auto under 960 px) lägga en nästlad x-scroller under rubriken och döda .sticky-th
    igen, precis den fälla hammar-tables.css beskriver. Inuti panelen sköter panelen båda axlarna —
    men bara ≥ 960 px: smalt läge ger .hammar-table sin x-skroll tillbaka, eftersom panelen då inte
    längre är scroll-container (se media-queryn nedan).
    (Den INRE .mud-table-container neutraliseras redan globalt av hammar-tables.css — utan det
    fryser rubriken inte här heller.)
*/
.hammar-panel__body .hammar-table {
    overflow-x: visible;
}

/*
    SMALT LÄGE (< 960 px) — panelen tar inte över skrollen.

    Höjdtaket är räknat för en desktopsida. På en fyratumsskärm är 360 px nästan hela synytan, så
    varje panel blev en egen skrollyta mitt i sidan: ett svep landade nästan alltid i en panel och
    rörde aldrig sidan. Här släpps taket i stället — panelen växer med sitt innehåll och skärmen är
    enda skrollytan. Vägen förbi en lång lista är minimera-knappen; vägen ner i den är fullskärm.

    BARA --expanded. Fullskärm är en fixed låda med fast höjd, och där MÅSTE kroppen behålla sin egen
    skroll — annars går det som ligger under vikningen inte att nå alls.
*/
@media (max-width: 959.98px) {
    .hammar-panel--expanded > .hammar-panel__body {
        max-height: none;
        overflow: visible;
    }

    /*
        ...och då behöver .hammar-table sin egen vågräta skroll tillbaka: neutraliseringen ovan finns
        för att panelen redan sköter båda axlarna, vilket den inte längre gör här. Följden är att
        .sticky-th ger vika mot en x-scroller med innehållsstyrd höjd — men exakt så beter sig en
        .hammar-table utanför en panel under 960 px redan (hammar-tables.css), så en tabell blir inte
        olik sig av att ligga i en panel. I fullskärm gäller neutraliseringen fortfarande.
    */
    .hammar-panel--expanded > .hammar-panel__body .hammar-table {
        overflow-x: auto;
    }
}

/*
    FULLSKÄRM — panelen ska fylla sidans innehållsyta, inte hela fönstret: AppBar och drawer ska
    vara kvar synliga och klickbara.

    FÄLLAN: ingen sida, MudPaper eller MudContainer är positionerad, så `absolute; inset: 0` skulle
    ankra mot <html> och täcka AppBaren. Och `absolute` inuti en scroll-container skrollar dessutom
    MED innehållet — panelen skulle glida ur bild så snart sidan var nedskrollad.

    Lösningen är paint-containment på skrollytan. `contain: paint` gör elementet till containing
    block även för position:fixed-ättlingar (css-contain), så `inset: 0` blir EXAKT
    .mud-main-content:s padding-box — under AppBaren (margin-top) och höger om drawern (margin-left)
    utan en enda magisk offset, och utan att följa med skrollen. Samma regel ger ett eget stacking
    context, så panelens z-index är lokal och kan aldrig nå över AppBaren.

    Regeln gäller BARA medan en panel faktiskt är i fullskärm (:has()) — i övrigt rörs inte layouten.
    overflow: hidden fryser sidan bakom och tar bort dess skrollbar; utan den blir en kvarlämnad
    skrollbar synlig till höger om en panel som utger sig för att vara fullskärm (skrollbaren ligger
    mellan padding-box och border-box, dit inset: 0 inte når).

    En host eller sida som vill begränsa fullskärmen till en mindre yta sätter .hammar-panel-scope
    på valfri ancestor och får samma behandling.
*/
.mud-main-content:has(.hammar-panel--full),
.hammar-panel-scope:has(.hammar-panel--full) {
    contain: paint;
    overflow: hidden;
}

.hammar-panel--full {
    position: fixed;
    inset: 0;
    /* Måste slå allt annat i skrollytan: .sticky-th är 1, MudBlazors egna innehålls-lager går upp
       till 5 (sticky-header-celler 2, .sticky-left/right 3, inline .mud-overlay 5). Vid lika
       z-index avgör DOM-ordningen, så en panel LÄNGRE NER på sidan målade annars sin frysta
       rubrikrad ovanpå overlayen. Högt värde är gratis: contain: paint kapslar in panelen i ett
       lokalt stacking context, så den kan ändå aldrig nå över AppBaren. */
    z-index: 10;
    border-radius: 0;
    /* !important därför att anroparens Class ofta är en MudBlazor-spacing-hjälpklass (mt-4, mb-2),
       och de är själva !important. På en fixed box med inset: 0 dras marginalen från den
       tillgängliga ytan — panelen skulle alltså hamna snett och bli för kort i fullskärm. */
    margin: 0 !important;
}

/* Platsen i flödet kollapsar när panelen går fixed. Slotten håller kvar ungefär sin höjd så att
   sidan bakom inte reflowar och skrollpositionen ligger kvar när man lämnar fullskärm. Egen
   property, inte --hammar-panel-max-height: en taklös panel (ExpandedMaxHeight="none") hade annars
   fått min-height: none, vilket är ogiltigt och tyst tappar platshållaren. */
.hammar-panel-slot--full {
    min-height: var(--hammar-panel-slot-min-height, var(--hammar-panel-max-height, 360px));
}

/* Operationsrad och produktionsgruppsremsa (Items/ItemOperationsPanel, Workorder/WorkorderOperationsPanel) */
/* Grupprubrik i läsläget: en tonad rad, inte en expansionspanel — går inte att fälla ihop. */
.hammar-ops-group-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hammar-ops-group-code {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hammar-ops-group-count {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

/* Operationsrad i läsläget: [Op-chip][benämning][tider]; chevronen ligger utanför griden. Under sm
   (MudBlazor xs, <600px) bär benämningen tiderna som caption och chipkolumnen döljs. */
.hammar-ops-row {
    display: grid;
    grid-template-columns: minmax(56px, auto) minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    flex: 1 1 auto;
    min-width: 0;
}

.hammar-ops-row .mud-chip {
    margin: 0;
    justify-self: start;
}

.hammar-ops-desc {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hammar-ops-desc .mud-typography {
    font-size: 0.875rem;
    line-height: 1.35;
}

.hammar-ops-desc .mud-chip {
    margin-left: 6px;
}

.hammar-ops-caption {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.hammar-ops-time--warn {
    color: var(--mud-palette-warning-darken);
}

.hammar-ops-times {
    display: none;
}

/* En rad utan innehåll är ingen expansionspanel: samma padding som panelrubriken plus en tom
   kolumn där panelernas chevron sitter, så att tiderna linjerar med de utfällbara raderna. */
.hammar-ops-plain {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    min-height: 48px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hammar-ops-panels .mud-expand-panel-header {
    padding: 10px 24px;
}

.hammar-ops-chevron-space {
    flex: 0 0 24px;
}

@media (min-width: 600px) {
    .hammar-ops-row {
        grid-template-columns: minmax(56px, auto) minmax(0, 1fr) auto;
        align-items: center;
    }

    .hammar-ops-desc .mud-typography {
        font-size: 1rem;
    }

    .hammar-ops-caption {
        display: none;
    }

    .hammar-ops-times {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }
}

.hammar-ops-meta {
    display: none;
}

@media (min-width: 600px) {
    .hammar-ops-meta {
        display: inline;
        margin-left: 8px;
        color: var(--mud-palette-text-secondary);
        font-size: 0.8125rem;
        font-variant-numeric: tabular-nums;
    }
}

.hammar-ops-report-header {
    padding: 6px 16px;
    font-size: 0.8125rem;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hammar-ops-plain.hammar-ops-indent {
    padding-left: 32px;
}

.hammar-ops-panels .hammar-ops-indent .mud-expand-panel-header {
    padding-left: 32px;
}

/* Ett menyval som bara gör något på pekskärm (Files/FeatureImagePreview: «Ta nytt foto»). Global
   eftersom MudMenus val renderas i MudPopoverProvider, utanför komponentens CSS-scope. */
@media not all and (pointer: coarse) {
    .hammar-touch-only {
        display: none !important;
    }
}