html, body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

/*
    Mål: AppBaren går hela vägen ut till högerkanten OCH skrollbaren (samt innehållet) håller sig
    UNDER AppBaren. AppBaren är position:fixed; top:0 med width:100%.
      · Om sidan (body) själv skrollar lägger sig en vertikal skrollbar längs hela viewporthöjden
        bredvid AppBaren och krymper dess bredd → stäng av body-skrollen.
      · MudBlazors .mud-main-content börjar vid y=0 och offsetar innehållet med padding-top. Görs den
        till skroll-container glider innehållet UPP UNDER den fixerade AppBaren när man skrollar, och
        skrollbarens topp hamnar bakom AppBaren. Därför ersätter vi padding-top med margin-top: själva
        skroll-containern börjar då FYSISKT under AppBaren (margin-top = AppBar-höjd, höjd = resten av
        viewporten). Innehållet är klippt till containern → kan aldrig hamna under AppBaren, och
        skrollbaren lever helt under AppBarens underkant.
*/
body {
    overflow: hidden;
}

.mud-main-content {
    margin-top: var(--mud-appbar-height);
    padding-top: 0;
    height: calc(100vh - var(--mud-appbar-height));
    overflow-y: auto;
    box-sizing: border-box;
}

/*
    Mini-drawer hover-overlay (ENBART brett läge, ≥ Md). När drawern expanderar vid hover (klassen
    drawer-hover-overlay sätts i MainLayout) hålls huvudinnehållet kvar på mini-bredd, så att den
    expanderade drawern lägger sig OVANPÅ innehållet i stället för att skjuta isär det. Vid fast-låsning
    (hamburgaren) saknas klassen → MudBlazors normala push-beteende råder. I smalt läge (< Md) används
    en temporär drawer utan mini-bredd, så klassen sätts aldrig då. Global regel (ej scoped) eftersom
    MainLayout saknar egen HTML-rot att hänga ett ::deep-scope på.
*/
.drawer-hover-overlay .mud-main-content {
    margin-left: var(--mud-drawer-width-mini-left) !important;
    transition: none !important;
}

/*
    Smalt läge (< Md): den temporära drawerns scrim (mörk overlay, <MudOverlay class="mud-overlay
    mud-overlay-drawer">) lägger sig som standard OVANPÅ AppBaren — MudBlazor ger den
    z-index: calc(var(--mud-zindex-appbar) + 1) OCH den täcker hela viewporten (top:0). Vi vill att
    overlayen mörklägger innehållet men lämnar AppBaren synlig och klickbar (hamburgaren stänger drawern).
    Två oberoende åtgärder så det håller oavsett stacking-context:
      1. Sänk z-index strax UNDER AppBaren.
      2. Flytta ner scrimens topp till under AppBaren (top = appbar-höjden) så den fysiskt aldrig
         täcker AppBaren, även om z-index inte skulle räcka.
    Drawer-panelen (appbar+2) påverkas inte — den är ändå klippt under AppBaren via ClipMode.Always.
*/
.mud-overlay.mud-overlay-drawer {
    z-index: calc(var(--mud-zindex-appbar) - 1) !important;
    top: var(--mud-appbar-height) !important;
}

#blazor-error-ui {
    background: #ffd2d2;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }