:root{
    --sidebar-open: 260px;
    --sidebar-closed: 72px;
    --topbar-height: 64px;
}

/* Layout */

.app-layout{
    min-height:100vh;
}

.app-sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:var(--sidebar-open);
    z-index:1030;
    border-right:1px solid var(--tblr-border-color);
    background:var(--tblr-bg-surface);
    transition:width .2s ease, transform .2s ease;
    overflow-x:hidden;
    overflow-y:auto;
}

.main-area{
    min-height:100vh;
    margin-left:var(--sidebar-open);
    transition:margin-left .2s ease;
}

.app-topbar{
    height:var(--topbar-height);
    position:sticky;
    top:0;
    z-index:1020;
    background:var(--tblr-bg-surface);
    border-bottom:1px solid var(--tblr-border-color);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 1rem;
}

.app-content{
    padding:1.25rem;
}

/* Sidebar header */

.sidebar-header{
    height:var(--topbar-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 .9rem;
    border-bottom:1px solid var(--tblr-border-color);
}

.sidebar-logo{
    color:inherit;
    text-decoration:none;
    font-weight:700;
    white-space:nowrap;
}

.logo-mini{
    display:none;
}

/* Sidebar nav */

.sidebar-nav{
    list-style:none;
    padding:.75rem;
    margin:0;
}

.sidebar-nav li{
    margin-bottom:.25rem;
}

.sidebar-nav a{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.65rem .75rem;
    border-radius:.5rem;
    color:var(--tblr-body-color);
    text-decoration:none;
    white-space:nowrap;
}

.sidebar-nav a:hover{
    background:var(--tblr-bg-surface-secondary);
}

.sidebar-nav i{
    width:20px;
    min-width:20px;
    text-align:center;
    font-size:18px;
}

/* Collapsed desktop */

body.sidebar-collapsed .app-sidebar{
    width:var(--sidebar-closed);
}

body.sidebar-collapsed .main-area{
    margin-left:var(--sidebar-closed);
}

body.sidebar-collapsed .logo-full{
    display:none;
}

body.sidebar-collapsed .logo-mini{
    display:inline;
}

body.sidebar-collapsed .sidebar-header{
    justify-content:center;
    padding:0 .5rem;
}

body.sidebar-collapsed #btnSidebar{
    position:absolute;
    top:12px;
    left:50%;
    transform:translateX(-50%);
}

body.sidebar-collapsed .sidebar-nav{
    padding:.75rem .45rem;
    margin-top:2.25rem;
}

body.sidebar-collapsed .sidebar-nav a{
    justify-content:center;
    padding:.65rem 0;
}

body.sidebar-collapsed .sidebar-nav a span{
    display:none;
}


.app-topbar {
    height: 64px;
    padding: 0 20px;
}

#txtRicercaGlobale {
    max-width: 600px;
}

#cmbEventoCorrente {
    max-width: 300px;
}

@media (max-width: 991px){

    #txtRicercaGlobale{
        display:none;
    }

    #cmbEventoCorrente{
        min-width:180px !important;
        max-width:180px !important;
    }

}


/* Mobile */

.sidebar-overlay{
    display:none;
}

@media (max-width: 991.98px){

    .app-sidebar{
        transform:translateX(-100%);
        width:var(--sidebar-open);
    }

    .main-area{
        margin-left:0;
    }

    body.sidebar-mobile-open .app-sidebar{
        transform:translateX(0);
    }

    body.sidebar-mobile-open .sidebar-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.45);
        z-index:1025;
    }

    body.sidebar-collapsed .app-sidebar{
        width:var(--sidebar-open);
    }

    body.sidebar-collapsed .main-area{
        margin-left:0;
    }

    body.sidebar-collapsed .logo-full{
        display:inline;
    }

    body.sidebar-collapsed .logo-mini{
        display:none;
    }

    body.sidebar-collapsed .sidebar-nav a span{
        display:inline;
    }

    body.sidebar-collapsed .sidebar-nav a{
        justify-content:flex-start;
        padding:.65rem .75rem;
    }
}