/* ============================================================================
   Sidebar (SmartAdmin #left-panel) — novo padrão de design do FIN
   ----------------------------------------------------------------------------
   Mesma linguagem das telas de auth / header de títulos / toasts:
   navy indigo + brand #3845cd, texto branco, acento de borda no item ativo.

   Carregado por último no head.php (depois do SmartAdmin e do your_style.css).
   Escopo em .smart-style-4 #left-panel + !important para vencer o skin (que já
   usa !important). Não edita o template nem o your_style.css.
   ============================================================================ */

:root {
    --sb-bg-top:      #0b173a;
    --sb-bg-bottom:   #141d6e;
    --sb-brand:       #3845cd;
    --sb-brand-soft:  #6872e5;
    --sb-text:        rgba(255, 255, 255, .80);
    --sb-text-dim:    rgba(255, 255, 255, .55);
    --sb-radius:      8px;
}

/* ---- Painel ---- */
.smart-style-4 aside#left-panel,
.smart-style-4 #left-panel {
    background: linear-gradient(180deg, var(--sb-bg-top) 0%, var(--sb-bg-bottom) 100%) !important;
    border: none !important;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .28) !important;
}

/* ---- Chip do usuário (login-info) ---- */
.smart-style-4 .login-info {
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    margin-bottom: 6px !important;
}
.smart-style-4 .login-info a,
.smart-style-4 .login-info a span {
    color: var(--sb-text) !important;
    font-weight: 600 !important;
}
.smart-style-4 .login-info a:hover span { color: #fff !important; }
.smart-style-4 .login-info img {
    border: 2px solid rgba(255, 255, 255, .25) !important;
    box-shadow: 0 0 0 2px rgba(56, 69, 205, .40) !important;
}

/* ---- Itens (nível 1) ---- */
.smart-style-4 #left-panel nav ul li a {
    color: var(--sb-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: var(--sb-radius) !important;
    border-left: none !important;
    border-right: none !important;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
}
.smart-style-4 #left-panel nav ul li a i {
    color: var(--sb-text-dim) !important;
    transition: color .15s ease !important;
}

/* nomes longos (ex.: "Títulos Financeiros Vencidos"): ícone fixo + rótulo ocupa
   o resto, encolhe (min-width:0) e quebra alinhado, sem a quebra estranha. */
.smart-style-4 #left-panel nav ul li a > i,
.smart-style-4 #left-panel nav ul li a .fa-fw { flex: 0 0 auto !important; }
.smart-style-4 #left-panel nav ul li a .menu-item-parent {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.25 !important;
}

/* hover nível 1 — sem o gradiente legado do skin */
.smart-style-4 #left-panel nav > ul > li:hover {
    background: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}
.smart-style-4 #left-panel nav > ul > li > a:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
    border-left: none !important;
    border-right: none !important;
    padding-left: 14px !important;
    padding-right: 9px !important;
}
.smart-style-4 #left-panel nav ul li a:hover i { color: var(--sb-brand-soft) !important; }

/* item ativo / submenu aberto — acento brand à esquerda */
.smart-style-4 #left-panel nav > ul > li.active > a,
.smart-style-4 #left-panel nav > ul > li.open > a {
    background: rgba(56, 69, 205, .22) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: inset 3px 0 0 0 var(--sb-brand) !important;
}
.smart-style-4 #left-panel nav > ul > li.active > a i,
.smart-style-4 #left-panel nav > ul > li.open > a i { color: var(--sb-brand-soft) !important; }

/* ---- Submenus (nível 2+) ---- */
.smart-style-4 #left-panel nav ul ul,
.smart-style-4 #left-panel nav > ul > li > ul {
    background: rgba(0, 0, 0, .20) !important;
    border: none !important;
}
.smart-style-4 #left-panel nav ul ul li a {
    color: var(--sb-text-dim) !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    border-radius: 0 !important;
}
.smart-style-4 #left-panel nav ul ul li a:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}
.smart-style-4 #left-panel nav ul ul li.active > a,
.smart-style-4 #left-panel nav ul ul li:hover > a {
    color: #fff !important;
    background-color: rgba(56, 69, 205, .18) !important;
}

/* corrige a inconsistência: o skin pinta os <li> de submenu de cinza (#363a4b /
   #22262E…). Deixa transparentes para mostrar só o fundo uniforme do <ul>. */
.smart-style-4 #left-panel nav ul ul li,
.smart-style-4.minified #left-panel nav li li {
    background: transparent !important;
}

/* remove o indicador legado do item ativo (::before com checkmark + borda branca),
   que conflitava com o nosso acento brand */
.smart-style-4 #left-panel nav ul li.active > a:before,
.smart-style-4 #left-panel nav ul li.active:not(.open) > a:before { display: none !important; }

/* ---- Submenu: dots no lugar de ícones (visual mais leve) ---- */
.smart-style-4 #left-panel nav ul ul li > a > i { display: none !important; }
.smart-style-4 #left-panel nav ul ul li > a {
    display: flex !important;
    align-items: center !important;
    padding-left: 22px !important;
}
.smart-style-4 #left-panel nav ul ul li > a::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    opacity: .45 !important;
    margin-right: 12px !important;
    transition: opacity .15s ease, transform .15s ease, background .15s ease !important;
}
.smart-style-4 #left-panel nav ul ul li.active > a::before,
.smart-style-4 #left-panel nav ul ul li:hover > a::before {
    opacity: 1 !important;
    background: var(--sb-brand-soft) !important;
    transform: scale(1.3) !important;
}

/* ---- Setinha de expandir (+/-) ---- */
.smart-style-4 #left-panel nav ul li a b.collapse-sign,
.smart-style-4 #left-panel nav ul li a b.collapse-sign i { color: var(--sb-text-dim) !important; }

/* ---- Botão Fixar / Desafixar (pin / unpin) ---- */
.smart-style-4 aside .minifyme {
    background: rgba(0, 0, 0, .28) !important;
    color: var(--sb-text) !important;
    border-radius: 6px !important;
}
.smart-style-4 aside .minifyme:hover {
    background: var(--sb-brand) !important;
    color: #fff !important;
}

/* ícone vira um thumbtack (pin) em ambos os estados — sobrescreve o \f0a9 do skin no minified */
.smart-style-4 #left-panel .minifyme i { transition: transform .15s ease, color .15s ease, opacity .15s ease !important; }
.smart-style-4 #left-panel .minifyme i:before,
.smart-style-4.minified #left-panel .minifyme .fa:before { content: "\f08d" !important; }

/* FIXADO (menu full): pin reto, cor brand */
.smart-style-4 #left-panel .minifyme i {
    transform: rotate(0deg) !important;
    color: var(--sb-brand-soft) !important;
    opacity: 1 !important;
}

/* DESAFIXADO (menu minified): pin inclinado e esmaecido */
.smart-style-4.minified #left-panel .minifyme i {
    transform: rotate(-40deg) !important;
    color: var(--sb-text-dim) !important;
    opacity: .85 !important;
}

/* no hover do botão, o pin fica branco pra contraste com o fundo brand */
.smart-style-4 #left-panel .minifyme:hover i { color: #fff !important; }

/* ---- Scrollbar (slimScroll) discreta ---- */
.smart-style-4 #left-panel .slimScrollBar { background: rgba(255, 255, 255, .22) !important; }

/* ============================================================================
   Estado minified (desktop recolhido): o skin desenha bordas top/bottom em
   cada item e bordas claras no flyout (label + submenu). Limpa tudo e deixa o
   flyout na mesma linguagem (navy, cantos arredondados, sombra).
   ============================================================================ */

/* remove as linhas/bordas entre os ícones */
.smart-style-4.minified #left-panel nav > ul > li {
    border-top: none !important;
    border-bottom: none !important;
}

/* ----------------------------------------------------------------------------
   Hover = expandir o painel inteiro de volta ao tamanho original (overlay),
   no lugar do flyout lateral por item. O conteúdo (#main) NÃO reflua: continua
   em margin-left:45px e a sidebar abre por cima — parecido com o off-canvas do
   mobile. O #left-panel já tem transition:250ms, então a expansão é suave.
   ---------------------------------------------------------------------------- */
.smart-style-4.minified #left-panel:hover {
    width: 220px !important;
    z-index: 904 !important;   /* sobrepõe o conteúdo (#main/#ribbon) e fica sob o #header (905) — não cobre o logo */
    box-shadow: 6px 0 28px rgba(0, 0, 0, .40) !important;
}

/* rótulos voltam a ser inline (desfaz o flyout absoluto do skin) — todos visíveis */
.smart-style-4.minified #left-panel:hover nav > ul > li > a > .menu-item-parent {
    display: inline !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
}

/* a setinha de expandir (+/-) reaparece */
.smart-style-4.minified #left-panel:hover nav > ul > li > a > b { display: block !important; }

/* ícones voltam ao layout normal (o skin os deixa block/centralizados no minified) */
.smart-style-4.minified #left-panel:hover nav > ul > li > a > i,
.smart-style-4.minified #left-panel:hover nav > ul > li > a .fa.fa-fw {
    display: inline-block !important;
    width: 1.28571429em !important;   /* largura padrão do fa-fw — mantém os rótulos alinhados */
    text-align: center !important;
    margin: 0 4px !important;
}

/* botão de recolher não estica com o painel: volta ao botão compacto original */
.smart-style-4.minified #left-panel:hover .minifyme {
    position: absolute !important;
    right: 0 !important;
    width: 36px !important;
    height: 28px !important;
    margin-top: 7px !important;
    padding: 0 !important;
    border-radius: 5px 0 0 5px !important;
    font-size: 19px !important;
}

/* submenus deixam de ser flyout absoluto: fluem inline sob o item pai */
.smart-style-4.minified #left-panel:hover nav > ul > li > ul {
    position: static !important;
    left: auto !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, .20) !important;
    overflow: visible !important;
}

/* submenu fica fechado; abre só no clique (.open, alternado pelo JS) ou na rota
   ativa (.active) — igual ao modo full. Sem auto-show no hover do item. */
.smart-style-4.minified #left-panel:hover nav > ul > li > ul { display: none !important; }
.smart-style-4.minified #left-panel:hover nav > ul > li.open > ul,
.smart-style-4.minified #left-panel:hover nav > ul > li.active > ul { display: block !important; }