/*
    Shopfloor-hostens globala CSS. Handdator: liten skärm, fetthandskar, alltid porträtt.
    Layouten är topbar (fixed) + skrollande innehåll + bottennav (fixed) — ingen drawer.
*/

:root {
    /* Bottennavets höjd. Ändras den MÅSTE .mud-main-content-höjden nedan följa med — de två
       är samma tal, annars hamnar sista raden innehåll under flikarna. */
    --shopfloor-bottomnav-height: 60px;
}

html, body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    /*
        body { overflow: hidden } av samma skäl som i Portal: den fixerade topbaren ska gå kant i
        kant och skrollbaren leva under den. .mud-main-content är appens enda skroll-container.
    */
    overflow: hidden;
    /*
        Android Chromes pull-to-refresh laddar om HELA WASM-appen — en oavsiktlig nedåtdragning
        mitt i ett arbetsmoment kostar flera sekunders omstart och tappar sidans tillstånd.
        overscroll-behavior-y: contain stänger av gesten utan att röra vanlig skrollning.
        (Installerad som PWA i fullscreen finns gesten inte alls, men appen körs även i webbläsare.)
    */
    overscroll-behavior-y: contain;
}

/*
    Samma margin-top-i-stället-för-padding-top-trick som Portal: skroll-containern börjar FYSISKT
    under den fixerade topbaren, så innehållet aldrig glider upp under den.

    Höjden räknar bort bottennavet + safe-area. Använd INTE padding-bottom för det: Core.Blazors
    ExpandablePanel ankrar sitt fullskärmsläge mot .mud-main-content:s PADDING-box (contain: paint
    + inset: 0), så ett padding-bottom skulle låta den lägga sig ovanpå flikraden.
*/
.mud-main-content {
    margin-top: var(--mud-appbar-height);
    padding-top: 0;
    height: calc(100vh - var(--mud-appbar-height) - var(--shopfloor-bottomnav-height)); /* fallback utan dvh */
    height: calc(100dvh - var(--mud-appbar-height) - var(--shopfloor-bottomnav-height) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    box-sizing: border-box;
}

/*
    Bottennavet. Egen fixed-rad i stället för <MudAppBar Bottom> — vi äger höjden själva, och samma
    tal används i .mud-main-content-uträkningen ovan.

    padding-bottom = safe-area gör att flikarna hamnar OVANFÖR Androids gestfält / iOS home indicator
    i stället för under det (kräver viewport-fit=cover i index.html).
*/
.shopfloor-bottomnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--mud-zindex-appbar);
    min-height: var(--shopfloor-bottomnav-height);
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/*
    Helskärmsytorna före appens chrome finns: stationsinloggning och operatörsinloggning renderas
    UTANFÖR MudLayout (ingen topbar, inget nav — det finns inget att navigera till än).
*/
.shopfloor-fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 100dvh;
    padding: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    text-align: center;
}

.shopfloor-tabs {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.shopfloor-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* 56 px är Material-minimum för en tryckyta; med handskar är mindre inte träffbart. */
    min-height: 56px;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.shopfloor-tab.active {
    color: var(--mud-palette-primary);
}

/* Hela appen: tryckytor stora nog för handske. */
.mud-button-root,
.mud-list-item {
    min-height: 48px;
}

#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;
    }