/* =====================================================================
   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
   ===================================================================== */

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

/* 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; }
}

/* ---------- MOBILE (< xl = < 1200px) ---------- */
@media (max-width: 1199.98px) {
    /* 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). */
    .header-container.userbar {
        display: flex !important;
        padding: 6px 10px !important;
        height: auto !important;
        gap: 0.5rem;
    }

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

    /* Undvik duplicerad profile/notifications/school-switch på mobile.
       NewSideBar.razor renderar `.mobile-buttons`-rad inuti drawer med dropdowns —
       gömma UserBar:s right-section så användaren inte ser dem två gånger. */
    .header-container.userbar .right-section {
        display: none !important;
    }

    /* 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;
    }

    /* Main content / header take full viewport width on mobile —
       neutralise the desktop margin rules from MainLayout.razor.css. */
    .expanded-main-content,
    .collapsed-main-content,
    .main-content,
    .header-container {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ---------- DESKTOP (>= xl = 1200px) ---------- */
@media (min-width: 1200px) {
    /* 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;
    }

}