@import '_content/HammarApp.Core.Blazor/HammarApp.Core.Blazor.tw4ypd7124.bundle.scp.css';

/* /Pages/Materialflode.razor.rz.scp.css */
/*
    Sidan äger sin egen höjd- och breddbudget.

    HÖJD — .mf-page är exakt lika hög som den synliga ytan i MudMainContent och grafpanelen tar all
    resthöjd (flex). Sidan kan därför aldrig skrolla vertikalt, och det är också det som håller den
    fri från HORISONTELL skroll: skrollade .mud-main-content vertikalt drog dess skrollbar av ~15 px
    från den användbara bredden medan panelen fortfarande mätte sig mot hela 100vw → 15 px överskott
    i sidled. Tidigare låstes höjden med en gissad konstant (100dvh − 230px) som var för hög för
    sidans faktiska rubrik + väljare + verktygsrad, så båda skrollbarerna fanns alltid.
    Räkningen: MudMainContent är 100dvh − appbar (app.css) minus safe-area, och MudContainer lägger
    my-4 = 16px upptill och nedtill.

    BREDD — bryter ut ur MudContainer-guttrarnas horisontella padding (24px × 2) och max-bredd-
    begränsningen så panelen fyller hela MudMainContent.
      Smalt läge (< 960 px, temporär drawer): ta bara bort guttrarna (−24 px × 2).
      Brett läge (≥ 960 px, mini-drawer): fyll hela MudMainContent (= 100vw − drawerbredd).
      Formel: margin-left = (drawer-width − 100vw + 100%) / 2
              där 100% = MudContainers content-bredd. Formeln är generisk i den bredden — den
              stämmer oavsett vilken MaxWidth MainLayout sätter (idag ExtraLarge → 1 872 px).
*/
.mf-page[b-8cjhr5kvhg] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--mud-appbar-height) - 32px - env(safe-area-inset-bottom, 0px)); /* fallback för webbläsare utan dvh */
    height: calc(100dvh - var(--mud-appbar-height) - 32px - env(safe-area-inset-bottom, 0px)); /* följer mobilens hopfällbara chrome */
    overflow: hidden;
    outline: none; /* tar emot fokus (tabindex) för Esc-utgången — men ska inte rita fokusring */
}

.mf-heading[b-8cjhr5kvhg],
.mf-toolbar[b-8cjhr5kvhg] {
    flex: 0 0 auto;
}

.mf-toolbar[b-8cjhr5kvhg] {
    min-height: 2.5rem;
}

/*
    ::deep behövs för allt som sitter på en MudBlazor-KOMPONENT: CSS-isoleringens scope-attribut
    hamnar bara på HTML-element som står i den här komponentens egen markup, aldrig på taggar som
    <MudPaper Class="mf-selector"> — utan ::deep matchar reglerna därför ingenting.
*/
.mf-page[b-8cjhr5kvhg]  .mf-selector {
    flex: 0 0 auto; /* väljaren behåller sin höjd; det är canvasen som ska krympa vid platsbrist */
}

/* Ihopfällt val: en rad i verktygsraden i stället för väljarpanelen — texten kapas hellre än bryter raden. */
.mf-toolbar[b-8cjhr5kvhg]  .mf-selection-summary {
    max-width: 20rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mf-graph-panel[b-8cjhr5kvhg] {
    position: relative;
    flex: 1 1 0;
    min-height: 0; /* utan denna vägrar flex-barnet krympa under sitt innehåll → sidan skrollar igen */
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    background: white;
}

@media (min-width: 960px) {
    .mf-graph-panel[b-8cjhr5kvhg] {
        width: calc(100vw - var(--mud-drawer-width-mini-left, 56px));
        margin-left: calc((var(--mud-drawer-width-mini-left, 56px) - 100vw + 100%) / 2);
        margin-right: 0;
    }
}

/*
    Maximerat läge — hela sidan (verktygsrad + canvas) läggs över fönstret. z-index måste passera
    AppBaren; MudBlazors dialog/snackbar/tooltip ligger kvar ovanför oss, vilket är rätt. Popovers
    (autocomplete-listor, z-index under appbaren) skulle däremot hamna BAKOM panelen — därför fäller
    koden ihop artikel-/lagerväljaren när sidan maximeras och avmaximerar när den fälls ut igen.
*/
.mf-page.mf-maximized[b-8cjhr5kvhg] {
    position: fixed;
    inset: 0;
    height: auto;
    z-index: calc(var(--mud-zindex-appbar, 1300) + 1);
    background: var(--mud-palette-surface);
    padding: 8px 12px 12px;
}

.mf-page.mf-maximized .mf-heading[b-8cjhr5kvhg] {
    display: none;
}

.mf-page.mf-maximized .mf-graph-panel[b-8cjhr5kvhg] {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.mf-overlay[b-8cjhr5kvhg] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}