/* Navbar */
nav.navbar {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-fixed);
    height: var(--nav-height);
    background-color:var(--card-bg)
}

nav.navbar:not(.login .navbar) {
    width: calc(100vw - var(--sidebar-width));
    margin-left: var(--sidebar-width);
}

/* Sidebar */
#sidebar, #sidebar-offcanvas {
    height: 100vh;
    width: var(--sidebar-width);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    overflow-y: auto;
    background-color:var(--card-bg)
}

#sidebar .nav-link, #sidebar-offcanvas .nav-link{
    color: var(--font-color);
}

#sidebar .nav-link.active, #sidebar-offcanvas .nav-link.active{
    font-size: 16px;
    font-weight: 500;
}

#sidebar .nav .nav-link.active, #sidebar-offcanvas .nav .nav-link.active{
    color: var(--color-accent);
    position: relative;
    padding-bottom: 0.50rem;
}

#sidebar .nav .nav-link i.ph, #sidebar-offcanvas .nav .nav-link i.ph {
    font-size: 20px;
}

#sidebar .nav .nav-link.active span::before, #sidebar-offcanvas .nav .nav-link.active span::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    border-bottom: 1px solid var(--color-underline-accent);
}

#sidebar .nav .nav-link span, #sidebar-offcanvas .nav .nav-link span {
    position: relative;
}

#sidebar .nav .nav-link span::before, #sidebar-offcanvas .nav .nav-link span::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    border-bottom: 1px solid var(--color-underline-accent);
    transition: width 0.3s;
}

#sidebar .nav .nav-link:hover span::before, #sidebar-offcanvas .nav .nav-link:hover span::before {
    width: 70%;
}

#sidebarOffcanvas {
    width: calc(var(--sidebar-width) + 2rem);
}

.logo_sidebar {
    background-image: var(--logo_sidebar);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: var(--sidebar-width);
    padding-top: 40%;
}

*:has(> .logo_sidebar) {
    background-color: var(--bg-logo-sidebar);
    border-radius: 0.75rem;
}

.logo_dashboard {
    background-image: var(--logo_sidebar);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 400px;
    max-width: 100%;
    height: 104px;
    margin: 0 auto;
}

/* Main */
.main-wrapper {
    display: flex;
    width: 100vw;
    height: calc(100vh - 2 * var(--nav-height));
    margin-top: var(--nav-height);
}

.main-wrapper:not(.login .main-wrapper) {
    margin-left: var(--sidebar-width);
    width: calc(100vw - var(--sidebar-width));
}

/* Media query per tablet */
@media (max-width: 992px) {
    nav.navbar:not(.login .navbar) {
        width: 100vw;
        margin-left: 0;
    }
    .main-wrapper:not(.login .main-wrapper) {
        margin-left: 0;
        width: 100vw;
    }
}

.page-wrapper .page-content {
    padding: 2rem 0.75rem;
    width: 90%;
    margin: 0 auto;
    min-height: calc(100vh - var(--nav-height));
}

.login .page-wrapper .page-content {
    padding-top: 0px;
}

.page-title{
    display: flex !important;
    align-items: center;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 2rem;
    margin-bottom: 0.75rem;
}

.page-subtitle {
    margin-top: -0.75rem;
    margin-bottom: 1rem;
}

/* Buttons */
.btn-sbragi {
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(to top right, #707070, #b8b8b8);
    color: #020205;
    border: none;
    transition: background-image 0.3s ease;
}

.btn-sbragi:hover, .btn-sbragi.show {
    background-image: linear-gradient(to top right, #808080, #c8c8c8);
    color: #020205;
}