/* ==========================================================================
   ESTILOS DE LAYOUT: NAVBAR FIXA AZUL (ON TOP) & SIDEBAR COM 3 ESTÁGIOS (MD+)
   Estágio 1: 100% Fechada (hidden: width 0, margin-left 0)
   Estágio 2: Mini / Ícones (toggled: width 6.5rem, margin-left 6.5rem)
   Estágio 3: 100% Aberta (default: width 14rem, margin-left 14rem)
   ========================================================================== */

/* 1. Estrutura Básica do Wrapper */
#wrapper {
    display: flex;
    position: relative;
    width: 100%;
    min-height: 100vh;
}

#content-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fc;
    min-height: 100vh;
    transition: margin-left 0.25s ease;
}

#content {
    flex: 1 0 auto;
    padding-top: 6rem !important; /* Espaço para navbar fixa + afastamento elegante do conteúdo */
}

/* 2. Topbar / Navbar FIXA AZUL (Mesma cor e gradiente da Sidebar) */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 4.375rem !important;
    z-index: 1030 !important;
    background-color: #4e73df !important;
    background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%) !important;
    background-size: cover !important;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.25) !important;
}

/* Ícones e links da Topbar em Branco */
.topbar .nav-item .nav-link,
.topbar .nav-item .nav-link i,
.topbar .navbar-brand,
.topbar .navbar-brand i {
    color: #ffffff !important;
}

.topbar .nav-item .nav-link:hover,
.topbar .nav-item .nav-link:hover i {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Divisor da Topbar */
.topbar .topbar-divider {
    border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Botão hambúrguer na Navbar em Branco */
#sidebarToggleTop {
    cursor: pointer;
    font-size: 1.15rem;
    color: #ffffff !important;
    outline: none;
    transition: all 0.2s ease;
}

#sidebarToggleTop:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Menus dropdown da Navbar sempre acima de tudo */
.topbar .dropdown-menu {
    z-index: 1060 !important;
}

/* 3. Sidebar Base Fixa */
.sidebar {
    position: fixed !important;
    top: 4.375rem !important;
    left: 0 !important;
    height: calc(100vh - 4.375rem) !important;
    height: calc(100dvh - 4.375rem) !important;
    z-index: 1020 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -ms-overflow-style: none; /* IE e Edge */
    scrollbar-width: none;    /* Firefox */
    transition: width 0.25s ease, transform 0.25s ease;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar .sidebar-brand {
    display: none !important;
}

/* 4. Dispositivos MD ou Maiores (>= 768px): 3 ESTÁGIOS */
@media (min-width: 768px) {
    /* ESTÁGIO 1: 100% Fechada (.sidebar-hidden) */
    body.sidebar-hidden .sidebar {
        width: 0 !important;
        overflow: hidden !important;
        display: none !important;
    }

    body.sidebar-hidden #content-wrapper {
        margin-left: 0 !important;
    }

    /* ESTÁGIO 2: Um pouco aberta mostrando os Ícones (.sidebar-toggled) */
    body:not(.sidebar-hidden).sidebar-toggled .sidebar {
        width: 6.5rem !important;
        overflow: visible !important;
        display: block !important;
    }

    body:not(.sidebar-hidden).sidebar-toggled #content-wrapper {
        margin-left: 6.5rem !important;
    }

    body:not(.sidebar-hidden).sidebar-toggled .sidebar .nav-item .collapse {
        z-index: 1050 !important;
    }

    /* ESTÁGIO 3: 100% Aberta (sem .sidebar-hidden e sem .sidebar-toggled) */
    body:not(.sidebar-hidden):not(.sidebar-toggled) .sidebar {
        width: 14rem !important;
        display: block !important;
    }

    body:not(.sidebar-hidden):not(.sidebar-toggled) #content-wrapper {
        margin-left: 14rem !important;
    }
}

/* 5. Dispositivos Móveis (< 768px) */
@media (max-width: 767.98px) {
    /* Fechada no Mobile */
    body.sidebar-toggled .sidebar,
    body.sidebar-hidden .sidebar {
        width: 0 !important;
        display: none !important;
    }

    body.sidebar-toggled #content-wrapper,
    body.sidebar-hidden #content-wrapper {
        margin-left: 0 !important;
    }

    /* Aberta como Drawer Sobreposto no Mobile */
    body:not(.sidebar-toggled):not(.sidebar-hidden) .sidebar {
        width: 14rem !important;
        display: block !important;
        box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.45) !important;
        z-index: 1040 !important;
    }

    body:not(.sidebar-toggled):not(.sidebar-hidden) #content-wrapper {
        margin-left: 0 !important;
    }

    body:not(.sidebar-toggled):not(.sidebar-hidden) .sidebar .nav-item .nav-link {
        text-align: left !important;
        width: 14rem !important;
        padding: 0.85rem 1rem !important;
    }

    body:not(.sidebar-toggled):not(.sidebar-hidden) .sidebar .nav-item .nav-link span {
        display: inline !important;
        font-size: 0.85rem !important;
    }

    body:not(.sidebar-toggled):not(.sidebar-hidden) .sidebar .nav-item .nav-link i {
        margin-right: 0.5rem !important;
    }

    body:not(.sidebar-toggled):not(.sidebar-hidden) .sidebar .sidebar-heading {
        text-align: left !important;
    }

    body:not(.sidebar-toggled):not(.sidebar-hidden) .sidebar .nav-item .collapse {
        position: static !important;
        margin: 0 0.75rem !important;
    }
}

/* 6. Ícones e Alinhamentos da Sidebar */
.sidebar .nav-item .nav-link i {
    display: inline-block;
    vertical-align: middle;
    width: 1.25rem;
    text-align: center;
}