/* ===========================
       SIDEBAR PREMIUM – IWO 2025
=========================== */

/* ===== BASE ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;

    background: #C2C2C2;
    border-right: 1px solid rgba(0,0,0,0.15);

    overflow-y: auto;
    width: 70px;                      
    transition: width .25s ease;
    z-index: 9999;                    
}

/* Ensure main dashboard content is offset to avoid being covered by fixed sidebar.
   Use !important to override inline page styles that set margins. */
body:not(.sidebar-expanded-mode) #dashboardContent {
    margin-left: 70px !important; /* matches collapsed sidebar width */
    transition: margin-left .25s ease;
}

/* When the sidebar is expanded we increase the left offset so content stays visible */
body.sidebar-expanded-mode #dashboardContent {
    margin-left: 260px !important; /* matches expanded sidebar width */
}
/* ===== EXPANDIDA ===== */
.sidebar.sidebar-expanded {
    width: 260px;
    background: #D7D7D7;
}

/* ===========================
       LOGO MINI (RECOLHIDO)
=========================== */
.logo-mini {
    width: 100%;
    height: 105px;
    display: flex;
    justify-content: center;      /* CENTRALIZA */
    align-items: center;          /* CENTRALIZA */

    padding-left: 0 !important;
    padding-top: 0 !important;
    margin-top: 6px;              /* pequeno ajuste visual */
}

.logo-mini img {
    width: 42px;
    opacity: 1;
    transition: none !important;
}

.sidebar.sidebar-expanded .logo-mini img {
    opacity: 0;
}

/* ===========================
       LOGO EXPANDIDO
=========================== */
.sidebar-logo {
    width: 100%;
    height: 105px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-top: -36px;
    opacity: 0;
    transition: none !important;
}

.sidebar-logo img {
    width: 165px;
    transform: translateY(-32px);
    filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.3));
    transition: none !important;
}

.sidebar.sidebar-expanded .sidebar-logo {
    opacity: 1;
}

/* ===========================
       MENU
=========================== */
nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 12px;

    margin-top: -14px;     /* 🔼 MENU SUBIU */
}

.item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;
    background: #F1F1F1;
    border-radius: 12px;
    cursor: pointer;
    transition: .2s;
    pointer-events: auto !important;
    user-select: none;
    -webkit-user-select: none;
}

.item:hover {
    background: #E4E4E4;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.label {
    opacity: 0;
    transition: opacity .2s ease;
    white-space: nowrap;
}

.sidebar.sidebar-expanded .label {
    opacity: 1;
}

.arrow {
    opacity: 0;
    transition: .2s ease;
}

.sidebar.sidebar-expanded .arrow {
    opacity: .6;
}

.item.open .arrow {
    transform: rotate(90deg);
    opacity: 1 !important;
}

/* ===========================
       SUBMENUS
=========================== */
.submenu-toggle {
    pointer-events: auto !important;
}

.submenu {
    display: none;
    flex-direction: column;
    margin-left: 38px;
    gap: 6px;
}

/* 🔴 IMPORTANTE: Mostrar submenu quando tem classe .show */
.submenu.show {
    display: flex !important;
}

/* Apenas esconder submenus sem a classe .show quando sidebar recolhida */
.sidebar:not(.sidebar-expanded) .submenu:not(.show) {
    display: none !important;
}

.submenu a {
    font-size: 0.9rem;
    line-height: 1.3rem;
    color: #444;
    transition: .2s;
    text-decoration: none;
}

.submenu a:hover {
    padding-left: 4px;
    color: black;
}

/* ===========================
       BOTÃO SAIR
=========================== */
.sair {
    background: #c97a7a;
}

.sair:hover {
    background: #b96868;
}