/* Layout responsive di MainLayout / MainFormLayout.
   File separato da site.css perché ogni tema sostituisce wwwroot/css/site.css in build. */

/* #region Layout web / mobile
   Mobile: sotto md su qualsiasi dispositivo, oppure dispositivo touch (telefono/tablet/iPad) sotto xl.
   Web: tutto il resto (desktop/laptop con mouse o touchpad da md in su, touch da xl in su).
   Le regole nascondono soltanto, non forzano display: così d-block/d-none sul footer mobile
   (gestiti dal JS in App.razor all'apertura della tastiera) continuano a funzionare.
   Classe doppia = specificità (0,2,0), vince su d-block (!important) lasciato sugli elementi mobile. */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1199.98px) {
    .web-only.web-only {
        display: none !important;
    }
}

/* Esatto complementare della query precedente (sintassi Media Queries Level 4).
   Su browser che non la supportano la regola viene ignorata e restano visibili gli elementi mobile. */
@media not ((max-width: 767.98px) or ((hover: none) and (pointer: coarse) and (max-width: 1199.98px))) {
    .mobile-only.mobile-only {
        display: none !important;
    }
}
/* #endregion */

/* Backdrop della sidebar web espansa: visibile solo md (classi d-none d-md-block d-lg-none web-only sul markup).
   z-index 1: sotto l'header (2) così il toggle resta cliccabile, sopra il body. */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, .3);
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Il body occupa solo lo spazio rimasto: annulla il width:100vw che Radzen applica fino a 768px incluso
       (a 768px, es. iPad Mini, si sovrappone a md dove la sidebar web è visibile e il contenuto esce a destra).
       !important perché la regola Radzen (.rz-layout:not(:has(...)) .rz-body) è più specifica.
       min-width: 0 impedisce al contenuto di allargare la colonna 1fr oltre la pagina. */
    .app-layout .rz-body {
        width: auto !important;
        min-width: 0;
    }
}

/* Sidebar web espansa in overlay: solo desktop (mouse/touchpad) tra md e lg. Sui touch la sidebar web è nascosta. */
@media (min-width: 768px) and (max-width: 991.98px) and (hover: hover) and (pointer: fine) {
    /* L'elemento resta nella griglia alla larghezza della barra di icone,
       il menu con testo esce in overlay sopra il contenuto invece di spingerlo. */
    .app-layout.sidebar-open .m-wb-sidebar {
        /* Larghezza della sidebar compressa (solo icone): se il contenuto "salta" all'apertura, regolare qui */
        width: 4.5rem !important;
        overflow: visible;
        position: relative;
        z-index: 3;
    }

    .app-layout.sidebar-open .m-wb-sidebar > .rz-stack {
        width: max-content;
        max-height: 100%;
        overflow-y: auto;
        /* Colore sidebar del tema sopra un fondo opaco (in alcuni temi è transparent) */
        background: linear-gradient(var(--rz-sidebar-background-color), var(--rz-sidebar-background-color)), var(--bs-body-bg, #fff);
        box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
    }
}