/*
======================================================
CAMINHO: static/css/
ARQUIVO: sidebar.css

DESCRIÇÃO:
Estilos exclusivos da sidebar recolhível.

RESPONSABILIDADES:
- Controlar largura da sidebar
- Alternar logo completo / ícone
- Ocultar texto do menu quando recolhida
- Centralizar ícones corretamente
- Garantir renderização correta do logo

IMPACTO:
- Apenas visual da sidebar
======================================================
*/

/* =======================
   SIDEBAR BASE
======================= */
.sidebar {
    transition: width 0.25s ease;
}

/* =======================
   SIDEBAR RECOLHIDA
======================= */
.sidebar.collapsed {
    width: 72px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =======================
   LOGO — CONTAINER
======================= */
.sidebar-logo {
    height: 64px;
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* =======================
   LOGO — PADRÃO
======================= */
.sidebar-logo img {
    max-width: 160px;
    max-height: 40px;

    object-fit: contain;
}

/* =======================
   LOGO — ÍCONE
======================= */
.logo-icon {
    display: none;
    max-width: 36px;
    max-height: 36px;
}

/* =======================
   ESTADO RECOLHIDO
======================= */
.sidebar.collapsed .sidebar-logo {
    width: 72px;
}

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

.sidebar.collapsed .logo-icon {
    display: block;
}

/* =======================
   BOTÃO TOGGLE
======================= */
.sidebar-toggle {
    background: none;
    border: none;
    color: #e5e7eb;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 12px;
}

.sidebar.collapsed .sidebar-toggle {
    width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =======================
   MENU (ABERTO)
======================= */
.menu a {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =======================
   ÍCONES
======================= */
.menu-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;

    font-variant-emoji: text;
    color: #e5e7eb;
}

/* Exceção — Relatórios */
.menu a[onclick*="RelatoriosModal"] .menu-icon {
    font-variant-emoji: emoji;
    color: inherit;
}

/* =======================
   TEXTO
======================= */
.menu-text {
    white-space: nowrap;
}

/* =======================
   MENU (RECOLHIDO)
======================= */
.sidebar.collapsed .menu a {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.sidebar.collapsed .menu-icon {
    width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* ESCONDER TEXTO */
.sidebar.collapsed .menu-text,
.sidebar.collapsed .menu-group-title,
.sidebar.collapsed .sidebar-user {
    display: none;
}