/* =====================================================================
   Mobile-first responsive layer for APLAdminServer (T20).

   Pure CSS + Blazor state. Drawer state is held in MainLayout
   (`_drawerOpen`) and propagated as `.sidebar-container.drawer-open`
   class. No custom JS, no Bootstrap offcanvas (which would have
   conflicted with desktop sidebar styling). Backdrop element is
   rendered conditionally by Blazor and clicks call `CloseDrawer`.

   Auto-close on navigation handled by MainLayout subscribing to
   `NavigationManager.LocationChanged`.

   The desktop sidebar collapse mechanic (180px <-> 66px) and the
   navbar-layout alternative are NOT touched by this stylesheet.

   Z-index scale (T21):
     navbar 1000 / drawer-backdrop 1040 / drawer 1045 /
     modal-backdrop 1055 / modal 1060 / toast 1080 / tooltip 1090 /
     confirm-backdrop 100000 / confirm 100001

   praxoConfirm() måste ligga ÖVER alla Blazor-/MudBlazor-modaler eftersom
   den är en synchronous-style prompt (user måste svara INNAN något annat
   händer). MudDialog default-z är ~1300, så ett värde i 100000-spannet
   garanterar att confirm-overlayen aldrig fastnar bakom en öppen modal.
   ===================================================================== */

:root {
    --z-navbar: 1000;
    --z-drawer-backdrop: 1040;
    --z-drawer: 1045;
    --z-modal-backdrop: 1055;
    --z-modal: 1060;
    --z-toast: 1080;
    --z-tooltip: 1090;
    --z-confirm-backdrop: 100000;
    --z-confirm: 100001;
}

/* Reaffirm bootstrap modal/offcanvas z-index so future overrides
   in newlook.css / design-system.css don't shift them. */
.modal-backdrop {
    z-index: var(--z-modal-backdrop) !important;
}
.modal,
.mud-dialog-container {
    z-index: var(--z-modal) !important;
}
.mud-overlay {
    z-index: var(--z-modal-backdrop) !important;
}

/* ---------- Mobile top bar (used by navbar layout below xl) ---------- */
.mobile-topbar {
    display: none; /* desktop hides it; @media block below shows it */
    align-items: center;
    gap: 0.5rem;
    height: 48px;
    padding: 0 12px;
    background: var(--nb-bg);
    color: var(--nb-text);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: var(--z-navbar);
}

.mobile-topbar-brand {
    font: 700 1.1rem/1 var(--font, inherit);
    color: var(--nb-text);
}

/* ---------- Hamburger toggle ---------- */
.hamburger-toggle {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.4rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    line-height: 1;
}

.hamburger-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Mobile drawer backdrop ---------- */
.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--z-drawer-backdrop);
    animation: drawer-backdrop-fade-in 0.2s ease;
}

@keyframes drawer-backdrop-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   ⚠ LAYOUT BREAKPOINT = 960px (synkad med MudBlazor Breakpoint.Sm)
   ============================================================
   Layout (sidebar/navbar/userbar) går till mobil drawer-läge under
   960px. MudTable stackar samtidigt via `Breakpoint="Breakpoint.Sm"`
   som stackar viewport 0-959 (Xs + Sm-banden i MudBlazor).

   Skol-skärmar (1024×768 / 1366×768) och zoomade desktops upp till
   ~130% zoom på 1366 (≈1051 CSS-px) hamnar SÄKERT på desktop-sidan
   och behåller sidebar + desktop-tabell.

   Se root.css för full dokumentation av synkpunkterna (--layout-bp-px)
   inkl. MudBlazor-Breakpoint-semantik-tabell.
   ÄNDRA INTE 959.98/960px isolerat — uppdatera ALLA platser samtidigt.
   ============================================================ */

/* ============================================================
   apl-nav-desktop-only / apl-nav-mobile-only — layout-baselined utility
   ============================================================
   Bootstrap-utility-paret `d-none d-lg-block` / `d-lg-none` flipar vid
   `lg` (992) — men resten av repon flipar vid 960 (FE4 layout-baseline).
   I 960-991px-zonen ger Bootstrap-utility:n inkonsekvent beteende: BS säger
   "mobile" (< 992) men responsive.css säger "desktop" (>= 960). Det leder
   till att MainNavbar:s mobile-block visas men hamburger döljs (`>= 960`-
   regeln på rad 351), vilket tappar drawer-toggle.

   Custom utility-paret nedan flipar exakt vid 959.98/960 så MainNavbar
   matchar UserBar/sidebar-mode. Används bara på navbar-layoutens
   desktop/mobile-blocks i `MainNavbar.razor`. */
.apl-nav-desktop-only { display: block; }
.apl-nav-mobile-only { display: none; }

/* ---------- MOBILE (< 960px) ---------- */
@media (max-width: 959.98px) {
    /* Flip MainNavbar:s desktop/mobile-blocks vid 960. */
    .apl-nav-desktop-only { display: none !important; }
    .apl-nav-mobile-only { display: block !important; }

    /* Show the mobile top-bar used by navbar layout. */
    .mobile-topbar {
        display: flex;
    }

    /* Re-enable UserBar (sidebar-layoutens topbar) so vi kan visa hamburger + org-namn.
       UserBar:s root har BÅDE klassen `header-container` och `userbar` — vi använder
       den kombinerade selectorn så vi inte krockar med MainNavbar:s `<div class="userbar">`
       (som måste vara `display: none` på mobile via Bootstrap d-none d-xl-block).
       Höjd, position och z-index synkas med navbar-layoutens `.navbar-mobile-bar`
       via `--mobile-topbar-height` så layout-toggle inte flyttar runt knappar. */
    .header-container.userbar {
        display: flex !important;
        align-items: center;
        padding: 0 1rem !important; /* matchar NewNavbarMobile:s `px-3` */
        height: var(--mobile-topbar-height, 48px) !important;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: var(--z-navbar, 1000);
        background-color: var(--nb-bg);
    }

    .header-container.userbar .brand {
        display: none; /* spara plats — redan mobile-hidden i scoped CSS, reaffirm */
    }

    /* Göm kommunnamnet (`<button class="header-button">@Organisation.Name</button>`)
       i left-section. Bara hamburger ska synas där i mobile — alla ikoner
       sitter i .right-section. */
    .header-container.userbar .left-section .header-button {
        display: none !important;
    }

    /* I mobil-läge ligger ikonerna (skol-switch, notifications, layout, font,
       theme, profil) i navbarens högra kant — INTE i drawern. Drawern är då
       ren menyflik (bara sektioner + URLer). Logiken är inverterad mot
       tidigare design: UserBar:s `.right-section` visas, NewSideBars
       `.mobile-buttons`-rad göms (se .mobile-buttons-regel längre ned). */
    .header-container.userbar .right-section {
        display: flex !important;
        align-items: center;
        gap: 0.25rem;
        flex-wrap: nowrap;
    }

    /* Komprimera luften kring varje ikon så alla ryms utan wrap på 360px. */
    .header-container.userbar .right-section > * {
        margin: 0 !important;
    }

    /* Göm `.mobile-buttons`-raden i drawern — dubbletten av ikoner är inte
       längre önskad eftersom de visas i navbaren ovanför. */
    .sidebar-container .mobile-buttons {
        display: none !important;
    }

    /* Drawer-listor — ta bort default disc-bullets på samtliga <ul>/<li>
       i båda drawer-typerna (sidebar-layoutens NewSideBar via
       `.sidebar-container .sidebar`, navbar-layoutens NewNavbarMobile
       via `.navbar-drawer`). Bootstrap `.nav` nollställer på toppnivå
       men nested `<ul>` (t.ex. `.submenu`-list) eller egna `<li>`
       utanför `.nav`-scope får default disc-bullets vilket sticker ut
       som ful prick i drawerns vänsterkant. */
    .sidebar-container .sidebar ul,
    .sidebar-container .sidebar li,
    .navbar-drawer ul,
    .navbar-drawer li {
        list-style: none !important;
        padding-left: 0;
    }

    /* Sidebar acts as a left-anchored slide-in drawer below xl.
       OBS: vi animerar `left` (inte `transform`) för att UNDVIKA att drawern
       skapar en ny containing block för `position: fixed` — annars klipps
       dropdownsen inuti till drawerns 280px-bredd. */
    .sidebar-container .sidebar {
        position: fixed;
        top: 0;
        left: -100vw;
        height: 100dvh; /* dvh handles iOS Safari URL bar */
        width: min(280px, 85vw);
        transition: left 0.25s ease;
        z-index: var(--z-drawer);
        overflow-y: auto;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
    }

    /* When MainLayout sets .drawer-open on the container, slide the sidebar in. */
    .sidebar-container.drawer-open .sidebar {
        left: 0;
    }

    /* CollapseSidebar wraps NewSideBar in a Bootstrap `.collapse` div which
       has `display:none` by default. Desktop CSS forces it visible via
       `.sidebar .collapse { display: block !important }`; we need the same
       on mobile when the drawer is open, otherwise the drawer slides in
       empty (only the header is visible). */
    .sidebar-container .sidebar .collapse {
        display: block !important;
        height: auto !important;
    }

    /* mobile-buttons-raden i drawer: 3 col-4 inline med originalets stora ikoner.
       Dropdownsen floatar (Bootstrap default position: absolute) men anchor:as till
       hela radens underkant (full drawer-bredd) istället för individuella col-4. */

    /* mobile-buttons blir positioning-context för absolut-ankrade dropdowns */
    .mobile-buttons {
        position: relative !important;
    }

    /* nav-item.dropdown blir position: static så att .dropdown-menu (absolute)
       söker upp till närmaste positioned ancestor = .mobile-buttons-raden */
    .mobile-buttons .nav-item.dropdown {
        position: static !important;
    }

    /* Dropdownen behöver klara två saker:
         1. inte clippas av drawerns overflow-y: auto
         2. inte begränsas av drawerns 280px-bredd (annars ser den ut som
            "innanför drawern")
       Lös: position: fixed → ankrar mot viewporten (escapar drawerns overflow
       OCH drawerns bredd). Top är hardcodad till 130px för att hamna precis
       under sidebar-header (50px) + ikonraden (~70px). I navbar-drawer-layouten
       hamnar den lite längre ner än optimalt men är fortfarande ok.
       Bootstrap/Popper sätter inline transform/inset baserat på trigger-knappen
       — vi tvingar bort dem med !important. */
    .mobile-buttons .dropdown-menu {
        position: fixed !important;
        transform: none !important;
        inset: auto !important;
        top: 100px !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: calc(100vw - 24px);
        margin: 0 !important;
        max-height: 60vh;
        overflow-y: auto;
        z-index: 1055;
        border-radius: 12px;
    }

    .mobile-buttons .dropdown-menu.show {
        display: block;
    }

    /* Dropdowns/popovers från ikon-trigger:erna i topbaren (UserBar:s
       `.right-section` OCH NewNavbarMobile:s `.navbar-mobile-bar__icons`).
       Bootstrap-default `.dropdown-menu` är `position: absolute` ankrad
       till sin trigger, vilket klipps av topbarens flex-rektangel.
       Custom popovers (`.theme-picker-popover`, `.font-size-popover`)
       har samma problem. Tvinga `position: fixed` och ankra direkt till
       viewporten UNDER topbaren så de aldrig täcker ikonerna. */
    .header-container.userbar .right-section .dropdown-menu,
    .header-container.userbar .right-section .dropdown-menu.show,
    .header-container.userbar .right-section .theme-picker-popover,
    .header-container.userbar .right-section .font-size-popover,
    .navbar-mobile-bar__icons .dropdown-menu,
    .navbar-mobile-bar__icons .dropdown-menu.show,
    .navbar-mobile-bar__icons .theme-picker-popover,
    .navbar-mobile-bar__icons .font-size-popover {
        position: fixed !important;
        /* `inset` shorthand ankrar till topbarens nederkant + 8px från höger
           viewport-kant. Bootstrap-Popper sätter inline `style="inset: 0px
           auto auto 0px; transform: translate3d(...);"` — vi tvingar bort
           båda. ATOMIC `inset` (ej individuella top/right/bottom/left)
           eftersom shorthand resetar individuella om de är på fel sida av
           cascade-ordningen. */
        inset: calc(var(--mobile-topbar-height, 48px) + 4px) 8px auto auto !important;
        margin: 0 !important;
        transform: none !important;
        translate: none !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        /* z-index 1100 ligger ÖVER ThemePicker/FontSizePicker:s backdrop
           (`.theme-picker-backdrop` / `.font-size-backdrop` har z-index
           1099 i sina scoped CSS:er). Tidigare värde `--z-tooltip` (1090)
           hamnade UNDER backdrop, vilket fångade alla klick i backdroppen
           innan de nådde popover-knapparna → byt-tema och byt-textstorlek
           kunde inte klickas i mobilvy. */
        z-index: 1100 !important;
    }

    /* SelectSchoolNavbar (skol-switch) och NotificationBell (notifikationer)
       får full mobil-bredd så långa skolnamn / långa notistexter får plats
       utan att trunkeras. Identifiera via deras egna scoped wrapper-klasser
       — `.select-school-navbar` finns inte, men deras `.dropdown-menu` har
       inline-bredd 320px från scoped CSS som vi nu överrider helt. Riktas
       via förekomsten av `<i class="fas fa-school">`/`<i class="fas fa-bell">`
       eller `.bell-icon` ancestor inom topbaren. Eftersom det är svårt att
       riktas via icon-klass utan att förlora specificitet, riktar vi via att
       explicit räkna upp scoped attribut: båda komponenterna inkluderar
       `.dropdown-menu` med stor bredd → skriv över ALLA dropdown-menyer i
       topbaren med 100vw-bredd, ENBART med max-width-default på 360px för
       smala dropdowns (profil-meny). Använd ett extra @media-block med
       högre specificitet för SelectSchool/Notification specifikt. */
    .header-container.userbar .right-section .nav-item.dropdown:has(.fa-school) .dropdown-menu,
    .header-container.userbar .right-section .nav-item.dropdown:has(.bell-icon) .dropdown-menu,
    .navbar-mobile-bar__icons .nav-item.dropdown:has(.fa-school) .dropdown-menu,
    .navbar-mobile-bar__icons .nav-item.dropdown:has(.bell-icon) .dropdown-menu {
        /* Override `inset` från grundregeln (top right=8px bottom=auto left=auto)
           med full bredd: top oförändrad, både vänster och höger 8px så
           dropdown sträcker över viewporten. */
        inset: calc(var(--mobile-topbar-height, 48px) + 4px) 8px auto 8px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Main content / header take full viewport width on mobile —
       neutralise the desktop margin rules from MainLayout.razor.css.
       overflow-x: auto behålls/läggs till så MudTables (Breakpoint.Md = 960px)
       som stannar i desktop-läge mellan 960-1199px scrollar inom main-området
       istället för att spränga viewport-bredden — kritiskt för skolskärmar
       (1366×768) och zoomade desktops där layouten är drawer men tabellen
       fortfarande är desktop-bred. */
    .expanded-main-content,
    .collapsed-main-content,
    .main-content,
    .header-container {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .expanded-main-content,
    .collapsed-main-content,
    .main-content {
        overflow-x: auto;
    }
}

/* ---------- DESKTOP (>= xl = 960px) ---------- */
@media (min-width: 960px) {
    /* Hamburger only exists for the mobile drawer toggle. */
    .hamburger-toggle {
        display: none !important;
    }

    /* Backdrop should never render on desktop (Blazor already gates
       it on _drawerOpen which auto-resets on navigation, but be safe). */
    .mobile-drawer-backdrop {
        display: none !important;
    }
}

/* ---------- TABELL-KOMPRESSION: 1200-1799.98px ------------------------
   Hela hide-cells-zonen (max-width: 1799.98px i newlook.css) får också
   komprimerade celler så de kvarvarande kolumnerna ryms utan horisontell
   scroll. Två sub-band: smalt (1200-1366) använder kompaktare padding
   och liten font; bredare (1367-1799) får lite mer luft.

   Användarens FontSizePicker vinner fortfarande mot dessa regler i den
   meningen att den höjer `--table-font-size`-variabeln som basreglerna
   i newlook.css läser. Klass-selektorerna här har samma specificitet —
   senare deklaration vinner, alltså väljer vi att kompression vinner i
   den här zonen som tradeoff för att slippa scrollbar. */

/* Smalt sub-band — tightare padding, mindre font.
   Font-size läser variabler som FontSizePicker `lg`/`xl` overrider till
   `--table-font-size`/`--table-header-font-size` så zoom-valet vinner
   över kompressionen i den här zonen. Padding hålls kompakt oavsett —
   kolumnerna ska få plats; XL-användare accepterar horizontal-scroll
   som tradeoff för läsbar font. */
@media (min-width: 960px) and (max-width: 1366.98px) {
    .mud-table .mud-table-cell {
        font-size: var(--table-cell-compressed-tight);
        padding: 4px 8px;
        white-space: normal;
        word-break: break-word;
    }

    .mud-table-head .mud-table-cell {
        font-size: var(--table-header-compressed-tight);
        padding: 4px 8px;
    }

    .apl-table-header {
        font-size: var(--table-header-compressed-tight);
    }

    table:not(.mud-table-root):not(.no-compact) td,
    table:not(.mud-table-root):not(.no-compact) th {
        font-size: var(--table-cell-compressed-tight);
        padding: 4px 8px;
        white-space: normal;
        word-break: break-word;
    }
}

/* Bredare sub-band — fortfarande tight men inte lika kompakt */
@media (min-width: 1367px) and (max-width: 1799.98px) {
    .mud-table .mud-table-cell {
        font-size: var(--table-cell-compressed-loose);
        padding: 5px 8px;
        white-space: normal;
        word-break: break-word;
    }

    .mud-table-head .mud-table-cell {
        font-size: var(--table-header-compressed-loose);
        padding: 5px 8px;
    }

    .apl-table-header {
        font-size: var(--table-header-compressed-loose);
    }

    table:not(.mud-table-root):not(.no-compact) td,
    table:not(.mud-table-root):not(.no-compact) th {
        font-size: var(--table-cell-compressed-loose);
        padding: 5px 8px;
        white-space: normal;
        word-break: break-word;
    }
}

/* ============================================================
   Sidebar/layout-bundna media-queries (flyttat från newlook.css 2026-05-12, FE7b)
   ============================================================ */

/* Sidebar layout — main-content padding/margin */
@media (max-width: 959.98px) {
    .mud-main-content {
        padding-top: 0;
    }
}

@media (min-width: 960px) {
    .mud-main-content {
        margin-left: 200px;
        padding-top: 5px;
    }
}

/* Font scaling för medium content-bredder. Konsoliderad till en enda
   width-baserad regel. Bara html/body baseline här — `select` och
   `label/legend` är borttagna (de hade hardcoded 1rem/1.3rem som
   blockade FE17:s `--label-font-size`-skalning från FontSizePicker
   på alla skärmar <1440px). Selects + labels styrs nu globalt via
   FE17-variablerna i :root.css + globala regler i newlook.css. */
@media (max-width: 1439.98px) {
    body {
        font-size: 1.5em;
    }

    html {
        font-size: 0.70rem;
    }
}

/* Hide columns — döljs upp till 1799.98px så zoom-110% på 1080p
   (effektiv viewport ~1745 CSS-px) och zoom-150% på högre upplösningar
   (~1707 CSS-px) hamnar i hide-zonen. Native 1920px-skärmar (>= 1800)
   visar alla kolumner. */
@media (max-width: 1799.98px) {
    .hide-cells {
        display: none;
    }
}

@media (min-width: 1800px) {
    .hide-cells {
        display: table-cell;
    }
}

@media (max-width: 959.98px) {
    .table-buttons {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 2px;
    }
}