/******************************************************************************
 * MOISÉS ERP — SHALOM-LABS
 * ----------------------------------------------------------------------------
 * ARQUIVO: style.css
 *
 * FINALIDADE:
 * Estilo global do ERP
 *
 * VERSÃO: 1.0
 * DATA: 04/06/2026
 ******************************************************************************/

:root{

    /* ---- Paleta oficial Shalom-Labs ----------------------------------------
       Fonte da verdade: docs/identidade-visual/identidade-visual-shalom-labs.md,
       extraída do Plano de Negócios (as cores realmente usadas nos slides).
       Antes daqui a paleta era a da New Voice Telecom (ciano neon e azuis de
       telecom), que não tem relação com esta marca.                           */
    --sl-azul-profundo:#1a2e5a;  /* institucional: sidebar, títulos, texto     */
    --sl-azul-medio:#24406f;     /* hover / segundo plano do institucional     */
    --sl-azul-claro:#8fa3c4;     /* apoio: cards, gráficos, o "MOISÉS ERP"     */
    --sl-azul-palido:#c7d2e4;    /* bordas e divisórias                        */
    --sl-azul-link:#4a73b0;      /* links e badges                             */
    --sl-dourado:#c9a227;        /* a assinatura da marca — usar com parcimônia*/
    --sl-cinza:#5b6577;          /* texto secundário                           */
    --sl-fundo:#edf1f8;          /* fundo da página                            */
    --sl-grafite:#1f2733;        /* quase-preto, para contraste máximo         */
    --sl-branco:#ffffff;         /* branco fixo (não muda no tema escuro)      */

    /* ---- Aliases --sl-* -----------------------------------------------------
       Nomes semânticos herdados da marca anterior (renomeados de nv-* para sl-*
       em 2026-09-14, mantendo o sufixo); ~436 usos espalhados pelos CSS de
       módulo referenciam estes tokens, nunca hex solto. Mantê-los como apelidos
       troca a marca inteira aqui, em um lugar só. Os nomes falam de telecom; os
       valores, de Shalom-Labs.                                                */
    --sl-blue-deep:var(--sl-azul-profundo);
    --sl-blue-petrol:var(--sl-azul-medio);
    --sl-cyan-vibrant:var(--sl-dourado);   /* "destaque" — hoje é o dourado */
    --sl-blue-tech:var(--sl-azul-link);
    --sl-blue-medium:var(--sl-azul-claro);

    --sl-gradient-primary:linear-gradient(135deg,#1a2e5a 0%,#24406f 45%,#c9a227 100%);

    --sl-bg-main:var(--sl-fundo);
    --sl-bg-card:#ffffff;
    --sl-text-main:var(--sl-azul-profundo);
    --sl-text-muted:var(--sl-cinza);
    --sl-border-soft:var(--sl-azul-palido);
    --sl-on-primary:#ffffff;

    --sl-success:#16a34a;
    --sl-warning:#f59e0b;
    --sl-danger:#dc2626;
    --sl-info:var(--sl-azul-link);

    /* ---- Aliases legados (compatibilidade com CSS já existente) ---- */
    --sl-primary:var(--sl-blue-deep);
    --sl-secondary:var(--sl-blue-petrol);
    --sl-accent:var(--sl-cyan-vibrant);
    --sl-bg:var(--sl-bg-main);
    --sl-white:var(--sl-bg-card);
    --sl-text:var(--sl-text-main);
    --sl-border:var(--sl-border-soft);
}

/******************************************************************************
 * RESET
 ******************************************************************************/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Carlito',Calibri,'Segoe UI',system-ui,sans-serif;

    background:var(--sl-bg);

    color:var(--sl-text);
}

/******************************************************************************
 * SIDEBAR
 ******************************************************************************/

.sidebar{

    position:fixed;

    left:0;
    top:0;

    width:260px;

    height:100vh;

    background:var(--sl-primary);

    color:#fff;

    overflow-y:auto;
}

/******************************************************************************
 * LOGO
 ******************************************************************************/

.logo-area{

    padding:25px 20px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.logo-area img{

    width:100%;

    max-width:180px;

    height:auto;

    display:block;

    margin:0 auto;
}

/* Co-marca: logo do cliente em destaque + "Moisés ERP · Shalom-Labs" discreto. */
.logo-area .logo-cliente{
    max-width:160px;
}

.logo-area .logo-produto-divisor{
    width:60%;
    height:1px;
    margin:14px auto;
    background:rgba(255,255,255,.12);
}

.logo-area .logo-produto-rotulo{
    margin:0;
    font-size:11px;
    letter-spacing:.02em;
    color:rgba(255,255,255,.55);
    text-align:center;
}

/* Cartão claro (APP_CLIENTE_LOGO_FUNDO=claro): para logo de cliente cujas cores
   não combinam com o azul. Logo e rótulo do produto vão num cartão branco quase
   encostado nas bordas da sidebar, que ganha cantos arredondados à direita e
   não se funde com a barra superior (também branca). Branco fixo: o logo tem
   cores próprias e precisa do mesmo fundo no tema escuro. A barra dourada na
   base do cartão é a assinatura da marca.
   Altura do cartão FIXA (--sl-logo-cartao-*): a barra superior usa a mesma
   conta para terminar na linha da barra dourada, seja qual for o formato do
   logo — ele se encaixa na altura, sem distorcer.                            */
:root{
    --sl-logo-cartao-margem:3px;
    --sl-logo-cartao-altura:90px;
}

.sidebar--logo-clara{
    border-radius:0 18px 18px 0;
}

.logo-area--clara{
    padding:var(--sl-logo-cartao-margem) var(--sl-logo-cartao-margem) 10px;
    border-bottom:0;
}

.logo-area--clara .logo-cliente-cartao{
    position:relative;
    overflow:hidden;
    box-sizing:border-box;
    height:var(--sl-logo-cartao-altura);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:10px 16px 13px;
    background:var(--sl-branco);
    border-radius:14px 15px 14px 14px;
    box-shadow:0 1px 2px rgba(0,0,0,.20), 0 8px 20px rgba(0,0,0,.18);
}

.logo-area--clara .logo-cliente-cartao::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:var(--sl-dourado);
}

.logo-area--clara .logo-cliente{
    width:auto;
    max-width:min(184px, 100%);
    max-height:42px;
    object-fit:contain;
}

.logo-area--clara .logo-produto-divisor{
    display:none;
}

.logo-area--clara .logo-produto-rotulo{
    margin-top:10px;
    font-size:10.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--sl-cinza);
}

.sidebar ul{

    list-style:none;

    margin:0;

    padding:0;
}

.sidebar ul li{

    list-style:none;
}

.sidebar ul li a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    text-decoration:none;

    padding:14px 20px;

    transition:all .3s ease;
}

.sidebar ul li a:hover{

    background:rgba(255,255,255,.08);

    border-left:4px solid var(--sl-accent);
}

.sidebar > ul > li > a.active{
    background:color-mix(in srgb, var(--sl-blue-tech) 16%, transparent);
    border-left:4px solid var(--sl-accent);
}

.sidebar ul ul li a.active{
    color:var(--sl-on-primary);
    background:color-mix(in srgb, var(--sl-blue-tech) 18%, transparent);
    border-left:4px solid var(--sl-accent);
}

.sidebar ul li a i{

    font-size:18px;

    min-width:22px;

    text-align:center;

    color:var(--sl-accent);
}


/******************************************************************************
 * CONTEÚDO
 ******************************************************************************/

.main-content{

    margin-left:260px;

    min-height:100vh;

    padding:25px;
}

/******************************************************************************
 * CONTAINER BOOTSTRAP
 *
 * Remove espaçamento lateral duplicado.
 ******************************************************************************/

.main-content .container-fluid{

    padding-left:0;

    padding-right:0;
}

.topbar{

    background:var(--sl-bg-card);

    height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.page-content{

    padding:0;
}

/******************************************************************************
 * BARRA SUPERIOR GLOBAL (usuário logado)
 * Estica até as bordas do .main-content (que tem padding 25px) e cria respiro
 * abaixo. Alinha o identificador do usuário e o "Sair" à direita.
 ******************************************************************************/

.app-topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin:-25px -25px 22px;

    padding:10px 25px;

    background:var(--sl-bg-card);

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    min-height:62px;
}

/* Primeiro andar: funções globais. O segundo (.sl-module-nav) entra no mesmo
   bloco, ocupando a largura toda, colado na borda de baixo. */
.app-topbar:has(.sl-module-nav){
    flex-wrap:wrap;
    align-content:space-between;
    row-gap:6px;
    padding-bottom:0;
}

.app-topbar__linha{
    display:flex;
    flex:1 0 100%;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.app-topbar__left,
.app-topbar__right{

    display:flex;

    align-items:center;

    gap:10px;
}

/******************************************************************************
 * PESQUISA GLOBAL (barra superior)
 * Campo à esquerda da barra; a lista suspensa agrupa Clientes, Leads,
 * Empresas, Contatos e Fornecedores. JS em assets/js/sl-busca-global.js.
 ******************************************************************************/

.app-topbar__left:has(.sl-busca-global){

    flex:1 1 auto;

    min-width:0;
}

.sl-busca-global{

    position:relative;

    flex:1 1 auto;

    max-width:480px;

    min-width:0;

    margin:0;
}

.sl-busca-global__icone{

    position:absolute;

    left:12px;

    top:50%;

    transform:translateY(-50%);

    color:var(--sl-text-muted);

    pointer-events:none;
}

.sl-busca-global__campo{

    width:100%;

    height:40px;

    padding:0 40px 0 36px;

    border:1px solid var(--sl-border-soft);

    border-radius:var(--sl-radius-sm, 8px);

    background:var(--sl-bg-main);

    color:var(--sl-text-main);

    transition:border-color .15s ease, background-color .15s ease;
}

.sl-busca-global__campo::placeholder{

    color:var(--sl-text-muted);
}

.sl-busca-global__campo:focus{

    outline:none;

    border-color:var(--sl-blue-tech);

    background:var(--sl-bg-card);
}

.sl-busca-global__atalho{

    position:absolute;

    right:10px;

    top:50%;

    transform:translateY(-50%);

    padding:1px 7px;

    border:1px solid var(--sl-border-soft);

    border-radius:5px;

    background:var(--sl-bg-card);

    color:var(--sl-text-muted);

    font-size:.75rem;

    pointer-events:none;
}

.sl-busca-global__campo:focus ~ .sl-busca-global__atalho{

    display:none;
}

.sl-busca-global__painel{

    position:absolute;

    top:calc(100% + 6px);

    left:0;

    right:0;

    z-index:1070;

    max-height:min(70vh, 460px);

    overflow-y:auto;

    padding:6px 0;

    border:1px solid var(--sl-border-soft);

    border-radius:var(--sl-radius, 10px);

    background:var(--sl-bg-card);

    box-shadow:var(--sl-shadow-btn-hover);
}

.sl-busca-global__grupo + .sl-busca-global__grupo{

    margin-top:4px;

    padding-top:4px;

    border-top:1px solid var(--sl-border-soft);
}

.sl-busca-global__grupo-titulo{

    padding:6px 14px 2px;

    color:var(--sl-text-muted);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;
}

.sl-busca-global__item{

    display:block;

    padding:7px 14px;

    color:var(--sl-text-main);

    text-decoration:none;
}

.sl-busca-global__item:hover,
.sl-busca-global__item.is-ativa{

    background:var(--sl-bg-main);

    color:var(--sl-text-main);

    box-shadow:inset 3px 0 0 var(--sl-accent);
}

.sl-busca-global__item-titulo,
.sl-busca-global__item-detalhe{

    display:block;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;
}

.sl-busca-global__item-detalhe{

    color:var(--sl-text-muted);

    font-size:.8rem;
}

.sl-busca-global__msg{

    padding:10px 14px;

    color:var(--sl-text-muted);

    font-size:.875rem;
}

@media(max-width:768px){

    .sl-busca-global__atalho{

        display:none;
    }

    .sl-busca-global__campo{

        padding-right:12px;
    }
}

/******************************************************************************
 * NAVEGAÇÃO SECUNDÁRIA — FINANCEIRO (7 ÁREAS)
 ******************************************************************************/

.financeiro-module-nav{
    margin:-8px 0 22px;
    padding:8px;
    border:1px solid var(--sl-border-soft);
    border-radius:14px;
    background:var(--sl-bg-card);
    box-shadow:0 2px 10px color-mix(in srgb, var(--sl-blue-deep) 7%, transparent);
}

.financeiro-module-nav__desktop{
    display:flex;
    align-items:stretch;
    gap:4px;
}

.financeiro-module-nav__desktop > .dropdown{
    display:flex;
    flex:1 1 auto;
}

.financeiro-module-nav__tab{
    display:inline-flex;
    flex:1 1 auto;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:8px 11px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--sl-text-main);
    font:inherit;
    font-size:.82rem;
    font-weight:500;
    line-height:1.25;
    text-align:center;
    text-decoration:none;
    transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.financeiro-module-nav__tab:hover,
.financeiro-module-nav__tab:focus-visible{
    background:color-mix(in srgb, var(--sl-blue-tech) 10%, var(--sl-bg-card));
    color:var(--sl-blue-deep);
}

.financeiro-module-nav__tab:focus-visible,
.financeiro-module-nav__mobile .form-select:focus{
    outline:0;
    box-shadow:0 0 0 .2rem color-mix(in srgb, var(--sl-blue-tech) 28%, transparent);
}

.financeiro-module-nav__tab i{
    color:var(--sl-blue-medium);
    font-size:1rem;
}

.financeiro-module-nav__tab.is-active{
    background:var(--sl-blue-deep);
    color:var(--sl-on-primary);
    font-weight:600;
}

.financeiro-module-nav__tab.is-active i{
    color:var(--sl-cyan-vibrant);
}

.financeiro-module-nav__menu{
    min-width:220px;
    padding:6px;
    border-color:var(--sl-border-soft);
}

.financeiro-module-nav__menu .dropdown-item{
    border-radius:7px;
    font-size:.88rem;
}

.financeiro-module-nav__menu .dropdown-item.active,
.financeiro-module-nav__menu .dropdown-item:active{
    background:var(--sl-blue-deep);
    color:var(--sl-on-primary);
}

.financeiro-module-nav__mobile{
    display:none;
    align-items:center;
    gap:10px;
}

.financeiro-module-nav__mobile > i{
    color:var(--sl-blue-medium);
    font-size:1.2rem;
}

.financeiro-module-nav__mobile .form-select{
    color:var(--sl-text-main);
    border-color:var(--sl-border-soft);
    background-color:var(--sl-bg-card);
}

/******************************************************************************
 * NAVEGAÇÃO SECUNDÁRIA — MÓDULOS DO ERP
 * O catálogo e o RBAC são resolvidos no servidor por NavegacaoModuloService.
 ******************************************************************************/
/* Segundo andar da top bar (opção A, 2026-11-01): mesmo bloco branco, separado
   por uma linha fina. Abas no tamanho do texto (nunca flex-grow) e alinhadas à
   esquerda — 2 abas não viram dois botões de meia tela. Sem espaço, as abas
   quebram para a linha de baixo, nunca o rótulo. */
.sl-module-nav{
    display:flex;
    flex:1 0 100%;
    align-items:stretch;
    gap:12px;
    min-height:44px;
    margin:0 -25px;
    padding:0 25px;
    border-top:1px solid var(--sl-border-soft);
}

.sl-module-nav__inicio{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:12px;
    padding:6px 0;
}

.sl-module-nav__modulo{
    padding-right:12px;
    border-right:1px solid var(--sl-border-soft);
    color:var(--sl-blue-deep);
    font-weight:700;
    white-space:nowrap;
}

.sl-module-nav .sl-btn-back{
    display:inline-flex;
    align-items:center;
    gap:2px;
    min-height:30px;
    padding:.2rem .7rem .2rem .45rem;
    font-size:.84rem;
}

.sl-module-nav__list{
    display:flex;
    flex:1 1 auto;
    flex-wrap:wrap;
    align-items:stretch;
    gap:2px;
    min-width:0;
    margin:0;
    padding:0;
    list-style:none;
}

/* A aba nunca quebra o rótulo ("Propostas/Pedidos" em duas linhas): o grupo
   não encolhe abaixo do próprio texto e não cresce além dele. */
.sl-module-nav__group{ position:relative; flex:0 0 auto; min-width:max-content; display:flex; }
.sl-module-nav__group > .sl-module-nav__tab{
    min-height:44px;
    padding:0 10px;
    border-bottom:2px solid transparent;
    border-radius:0;
    color:var(--sl-text-muted);
    cursor:pointer;
    white-space:nowrap;
    overflow-wrap:normal;
}
.sl-module-nav__group > .sl-module-nav__tab .bi-chevron-down{ font-size:.7rem; color:inherit; }
.sl-module-nav__group > .sl-module-nav__tab.is-active{
    background:transparent;
    color:var(--sl-blue-deep);
    font-weight:700;
    border-bottom-color:var(--sl-dourado);
}
.sl-module-nav__links{
    position:absolute;
    z-index:1030;
    top:100%;
    left:0;
    width:max-content;
    min-width:200px;
    max-width:min(280px, calc(100vw - 48px));
    margin:0;
    padding:6px;
    list-style:none;
    border:1px solid var(--sl-border-soft);
    border-radius:7px;
    background:var(--sl-bg-card);
    box-shadow:0 6px 18px color-mix(in srgb, var(--sl-blue-deep) 16%, transparent);
}
.sl-module-nav__links[hidden]{ display:none; }
.sl-module-nav__group:last-child .sl-module-nav__links{ left:auto; right:0; }
.sl-module-nav__links .sl-module-nav__tab{ display:flex; width:100%; }
.sl-module-nav__group.is-open > .sl-module-nav__tab{
    background:color-mix(in srgb, var(--sl-blue-tech) 8%, var(--sl-bg-card));
    color:var(--sl-blue-deep);
}

.sl-module-nav__tab{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    min-height:34px;
    padding:6px 9px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--sl-text-main);
    font:inherit;
    font-size:.86rem;
    line-height:1.2;
    text-decoration:none;
    white-space:normal;
    overflow-wrap:anywhere;
    transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sl-module-nav__tab:hover,
.sl-module-nav__tab:focus-visible{
    background:color-mix(in srgb, var(--sl-blue-tech) 8%, var(--sl-bg-card));
    color:var(--sl-blue-deep);
}

.sl-module-nav__tab:focus-visible{
    outline:0;
    box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--sl-blue-tech) 40%, transparent);
}

.sl-module-nav__links .sl-module-nav__tab.is-active{
    background:var(--sl-blue-deep);
    color:var(--sl-on-primary);
    font-weight:700;
}

/******************************************************************************
 * BOTÕES OPERACIONAIS PADRONIZADOS
 ******************************************************************************/
.sl-btn-filter,
.sl-btn-back,
.sl-btn-clear{
    min-height:38px;
    padding:.43rem .9rem;
    border-radius:7px;
    font-size:.875rem;
    font-weight:500;
    line-height:1.25;
}

.sl-btn-filter{
    border-color:var(--sl-blue-deep);
    background:var(--sl-blue-deep);
    color:var(--sl-on-primary);
}

.sl-btn-filter:hover,
.sl-btn-filter:focus-visible{
    border-color:var(--sl-blue-petrol);
    background:var(--sl-blue-petrol);
    color:var(--sl-on-primary);
}

.sl-btn-back,
.sl-btn-clear{
    border-color:var(--sl-border-soft);
    color:var(--sl-text-main);
    background:var(--sl-bg-card);
}

.sl-btn-back:hover,
.sl-btn-clear:hover{
    border-color:var(--sl-blue-medium);
    background:color-mix(in srgb, var(--sl-blue-tech) 8%, var(--sl-bg-card));
    color:var(--sl-blue-deep);
}

.sl-page-navigation{ display:flex; margin:0 0 18px; }
.sl-page-navigation .sl-btn-back[disabled]{ opacity:.6; cursor:not-allowed; }

@media(max-width:991.98px){
    .financeiro-module-nav__desktop{
        display:none;
    }

    .financeiro-module-nav__mobile{
        display:flex;
    }

}

/* Botões-ícone da barra superior (minimizar menu / alternar tema). */
.app-icon-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    padding:0;

    border:none;

    border-radius:10px;

    background:transparent;

    color:var(--sl-text-main);

    font-size:20px;

    line-height:1;

    cursor:pointer;

    transition:background-color .15s ease, color .15s ease;
}

.app-icon-btn:hover,
.app-icon-btn:focus{

    background:var(--sl-bg-main);

    color:var(--sl-blue-tech);
}

.app-user-btn{

    display:flex;

    align-items:center;

    gap:10px;

    background:transparent;

    border:none;

    padding:6px 8px;

    border-radius:10px;

    color:var(--sl-text-main);

    font-weight:500;

    font-size:14px;

    cursor:pointer;
}

.app-user-btn:hover,
.app-user-btn:focus{

    background:var(--sl-bg-main);
}

.app-user-avatar{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    background:var(--sl-gradient-primary);

    color:#fff;

    font-weight:600;

    font-size:14px;

    letter-spacing:.5px;

    flex-shrink:0;
}

/******************************************************************************
 * CARDS
 ******************************************************************************/

.card{

    background:var(--sl-bg-card);

    border-radius:12px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.card-dashboard{

    background:var(--sl-bg-card);

    border-radius:15px;

    padding:20px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    border-left:5px solid var(--sl-accent);
}

/******************************************************************************
 * BOTÕES
 ******************************************************************************/

.btn{

    /* Altura padronizada para alinhar com .form-control / .form-select
       (filtros e botões com a MESMA altura em todo o ERP). */
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    height:42px;

    padding:0 16px;

    border:none;

    border-radius:8px;

    text-decoration:none;

    cursor:pointer;

    font-size:14px;

    line-height:1;

    vertical-align:middle;

    transition:.2s;
}

.btn:hover{

    opacity:.9;
}

.btn-primary{

    background:var(--sl-primary);

    color:#fff;
}

.btn-success{

    background:var(--sl-success);

    color:#fff;
}

.btn-danger{

    background:var(--sl-danger);

    color:#fff;
}

.btn-warning{

    background:var(--sl-warning);

    color:#000;
}

.btn-sm{

    height:36px;

    padding:0 12px;

    font-size:13px;
}

/******************************************************************************
 * TABELAS
 ******************************************************************************/

.table{

    width:100%;

    border-collapse:collapse;
}

.table thead{

    background:var(--sl-primary);

    color:#fff;
}

.table th{

    padding:12px;

    text-align:left;
}

.table td{

    padding:12px;

    border-bottom:1px solid var(--sl-border);
}

.table tbody tr:hover{

    background:var(--sl-bg-main);
}

/* Grid padrão do ERP. Alinhamentos específicos continuam definidos por coluna. */
.sl-grid thead th{

    vertical-align:middle;

    font-weight:600;
}

.sl-grid tbody td{

    vertical-align:middle;
}

/* Destaque leve (atenção, não prioridade): linha de chamado aberto sem
   responsável. Fundo âmbar bem suave (token --sl-warning), sobre a célula para
   conviver com o table-hover do Bootstrap. */
.sl-grid tbody tr.sl-linha-sem-responsavel > td{

    background-color:rgba(245,158,11,0.10);
}

.sl-grid tbody tr.sl-linha-sem-responsavel:hover > td{

    background-color:rgba(245,158,11,0.16);
}

/* Marca leve de SLA vencido: chamado aberto cujo prazo já passou. Vermelho bem
   suave, sobre a célula para conviver com o table-hover e com a linha sem
   responsável (as cores se sobrepõem sem esconder o conteúdo). */
.sl-grid tbody tr.sl-linha-sla-vencido > td{

    background-color:rgba(220,53,69,0.08);
}

.sl-grid tbody tr.sl-linha-sla-vencido:hover > td{

    background-color:rgba(220,53,69,0.14);
}

.sl-grid .col-id,
.sl-grid .col-cnpj,
.sl-grid .col-status,
.sl-grid .col-ativo,
.sl-grid .col-acoes,
.sl-grid .sl-col-center,
.sl-grid .sl-col-status{

    text-align:center;
}

.sl-grid .col-id,
.sl-grid .sl-col-id{

    width:72px;
}

.sl-grid .col-acoes,
.sl-grid .sl-col-actions{

    width:230px;

    white-space:nowrap;
}

.sl-grid .empresa-acoes .btn,
.sl-grid .sl-grid-actions .btn,
.sl-grid td > .btn,
.sl-grid td > form .btn,
.sl-grid td > .btn-group .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;
}

.sl-grid .sl-col-money,
.sl-grid .sl-col-number,
.sl-grid .fin-valor-direita{

    text-align:right;

    font-variant-numeric:tabular-nums;
}

.sl-grid .sl-grid-actions{

    display:inline-flex;

    align-items:center;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:6px;
}

.sl-grid td.text-end:has(.btn),
.sl-grid td.fin-acoes,
.sl-grid td.sl-col-actions{

    white-space:nowrap;
}

.sl-grid td > .btn + .btn,
.sl-grid td > form.d-inline + .btn,
.sl-grid td > .btn + form.d-inline,
.sl-grid td > form.d-inline + form.d-inline{

    margin-left:4px;
}

.sl-grid--report tfoot :is(th, td){

    font-weight:600;

    font-variant-numeric:tabular-nums;
}

.sl-sort-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;
}

.sl-sort-link .bi{

    font-size:12px;

    opacity:.85;
}

/******************************************************************************
 * BADGES
 ******************************************************************************/

.badge{

    display:inline-block;

    padding:4px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;
}

.badge-success{

    background:#d1e7dd;

    color:#0f5132;
}

.badge-danger{

    background:#f8d7da;

    color:#842029;
}

.badge-warning{

    background:#fff3cd;

    color:#664d03;
}

.badge-info{

    background:#cff4fc;

    color:#055160;
}

/******************************************************************************
 * FORMULÁRIOS
 ******************************************************************************/

.form-group{

    margin-bottom:15px;
}

.form-label{

    display:block;

    margin-bottom:6px;

    font-weight:500;
}

/* ---- Campos de formulário: bloco ÚNICO de padronização ------------------
   Todo campo (input, select, data, .form-control, .form-select, -sm, -lg,
   .input-group-text) tem a MESMA altura, fonte e tamanho de fonte; só a
   largura varia. Textarea é a única exceção (altura livre). Não sobrescrever
   height/font-size/padding vertical de campo em outro lugar: mude os tokens. */
:root{
    --sl-campo-altura:42px;
    --sl-campo-fonte:inherit;        /* herda o body (Carlito) */
    --sl-campo-tamanho:14px;
    --sl-campo-pad-y:8px;
    --sl-campo-pad-x:12px;
    --sl-campo-pad-seta:36px;        /* espaço do caret do select */
}

.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
.form-control-lg,
.form-select-lg,
.input-group-text,
.input-group > .form-control,
.input-group > .form-select{

    height:var(--sl-campo-altura);

    min-height:var(--sl-campo-altura);

    padding-top:var(--sl-campo-pad-y);

    padding-bottom:var(--sl-campo-pad-y);

    font-family:var(--sl-campo-fonte);

    font-size:var(--sl-campo-tamanho);

    line-height:1.4;
}

.form-control,
.form-control-sm,
.form-control-lg{

    padding-left:var(--sl-campo-pad-x);

    padding-right:var(--sl-campo-pad-x);
}

.form-select,
.form-select-sm,
.form-select-lg{

    padding-left:var(--sl-campo-pad-x);

    padding-right:var(--sl-campo-pad-seta);
}

.form-control,
.form-select{

    width:100%;

    color:var(--sl-text-main);

    background-color:var(--sl-bg-card);

    border:1px solid var(--sl-border);

    border-radius:8px;

    outline:none;
}

.form-control-sm,
.form-select-sm,
.form-control-lg,
.form-select-lg{

    border-radius:8px;
}

.input-group > .form-control,
.input-group > .form-select{

    width:1%;
}

.form-control:focus,
.form-select:focus{

    border-color:var(--sl-info);

    box-shadow:0 0 0 3px rgba(74,115,176,.15);
}

/* Textareas não têm altura fixa (sobrepõe a altura padrão de .form-control). */
textarea.form-control{

    height:auto;

    min-height:120px;

    padding-top:var(--sl-campo-pad-y);

    resize:vertical;
}

/******************************************************************************
 * VALIDAÇÃO
 ******************************************************************************/

.field-error{

    color:var(--sl-danger);

    font-size:12px;

    margin-top:4px;
}

.field-success{

    color:var(--sl-success);

    font-size:12px;

    margin-top:4px;
}

.input-error{

    border-color:var(--sl-danger) !important;
}

.input-success{

    border-color:var(--sl-success) !important;
}

/******************************************************************************
 * GRID
 * ----------------------------------------------------------------------------
 * O ERP usa o GRID DO BOOTSTRAP. Este bloco continha uma reimplementação manual
 * (`.row{display:flex;margin:-10px}` + `.col-12/6/4/3{width:X%;padding:10px}`) e
 * uma versão responsiva dela (`.row{display:block}` abaixo de 768px). Como a
 * folha carrega DEPOIS do bootstrap.min.css e a especificidade era a mesma, essa
 * cópia VENCIA o Bootstrap e provocava dois defeitos globais:
 *
 *  1. no mobile TODA `.row` do ERP perdia o flex (`display:block`), levando com
 *     ela `align-items-*`, `justify-content-*`, `h-100` e `row-cols-*`;
 *  2. `.col-3/4/6/12{width:100%}` abaixo de 768px sobrepunha os breakpoints do
 *     Bootstrap, então `col-6 col-md-3` (chamados/painel.php) era forçado a 100%
 *     mesmo quando a tela pedia 2 colunas;
 *  3. a margem negativa de 10px não casava com o padding de 12px que as colunas
 *     COM breakpoint (`col-md-*`) herdam do Bootstrap (`--bs-gutter-x`), gerando
 *     2px de estouro por lado em toda linha mista.
 *
 * As regras foram REMOVIDAS para que o grid do Bootstrap volte a valer inteiro.
 * As larguras/paddings equivalentes já existem lá; o que muda é só o padding das
 * colunas SEM breakpoint (10px → 12px), usadas em 5 lugares no ERP inteiro.
 ******************************************************************************/

/******************************************************************************
 * RESPONSIVO — CONTENÇÃO HORIZONTAL DAS GRIDS
 * ----------------------------------------------------------------------------
 * `.sl-grid` é o padrão de grid do ERP (CLAUDE.md §11.1) e traz coluna de ações
 * com `white-space:nowrap` + largura fixa: a tabela SEMPRE fica mais larga que a
 * tela num celular. Sem contenção esse excesso escapava do card e virava scroll
 * horizontal da PÁGINA — a barra superior e a sidebar saíam de lugar. Só 12 de
 * 73 telas com tabela envolviam a grid num `.table-responsive`.
 *
 * A regra abaixo dá o scroll ao container DIRETO da grid (na prática o `.card`),
 * resolvendo as ~55 telas de uma vez, sem editar view nenhuma:
 *
 *  - a chave é `table.sl-grid`, que é justamente o OPT-IN documentado. O grid de
 *    permissões, as matrizes editáveis de formulário e as tabelas geradas para
 *    documento/PDF não têm a classe e continuam intocados (§11.1);
 *  - o escopo `.main-content` limita ao app autenticado — login, Portal do
 *    Cliente e DANFE têm layout próprio e não são afetados;
 *  - `:not(:has(.dropdown-menu))` preserva o caso em que a grid tem menu suspenso
 *    dentro da célula (financeiro/contas-receber): container de scroll RECORTA
 *    dropdown, e trocar estouro por menu cortado não seria correção.
 ******************************************************************************/

.main-content :has(> table.sl-grid):not(:has(.dropdown-menu)){

    overflow-x:auto;

    overscroll-behavior-x:contain;

    -webkit-overflow-scrolling:touch;
}

/******************************************************************************
 * RESPONSIVO — MOBILE (até 768px)
 ******************************************************************************/

@media(max-width:768px){

    /* Grid contida mantém forma legível e ROLA, em vez de esmagar 10 colunas em
       375px. Mesmo padrão já usado no plano de contas (financeiro.css). */
    .main-content :has(> table.sl-grid):not(:has(.dropdown-menu)) > table.sl-grid{

        min-width:720px;
    }

    /* --------------------------------------------------------------------
       SIDEBAR = GAVETA (off-canvas)
       Antes ela virava um bloco de largura total e altura automática ACIMA
       do conteúdo (`position:relative;width:100%`): no celular era preciso
       rolar o menu INTEIRO para chegar em qualquer tela. Agora fica fora da
       tela e o mesmo botão ☰ da barra superior abre/fecha (sl-ui.js).
    -------------------------------------------------------------------- */
    .sidebar{

        width:min(280px,86vw);

        height:100vh;

        transform:translateX(-100%);

        z-index:1045;
    }

    html.sl-sidebar-aberta .sidebar{

        transform:translateX(0);

        box-shadow:4px 0 24px rgba(0,0,0,.28);
    }

    /* Véu escuro atrás da gaveta. Sem markup novo e sem JS de estilo: o clique
       fora é tratado por sl-ui.js no document. */
    html.sl-sidebar-aberta body::after{

        content:"";

        position:fixed;

        inset:0;

        /* 1039, nao 1040: o webphone (.sl-webphone-global) esta em 1040 e,
           empatados, o body::after vem depois na ordem de pintura e cobriria
           a gaveta no mobile com a sidebar aberta. O veu fica ABAIXO. */
        z-index:1039;

        background:rgba(26,46,90,.45);
    }

    /* Conteúdo ocupa a largura inteira e respira menos: 25px de padding em
       375px consumia 13% da tela. A barra superior acompanha (os valores
       negativos dela existem para colar nas bordas do .main-content). */
    .main-content{

        margin-left:0;

        padding:16px 14px;
    }

    .app-topbar{

        margin:-16px -14px 16px;

        padding:10px 14px;
    }

    .app-topbar:has(.sl-module-nav){ padding-bottom:0; }

    .sl-module-nav{ margin:0 -14px; padding:0 14px; gap:8px; flex-wrap:wrap; }
    .sl-module-nav__group > .sl-module-nav__tab{ min-height:40px; padding:0 8px; }
    .sl-module-nav__modulo{ padding-right:0; border-right:0; }

    /* O botão flutuante da Kahila vive no rodapé ESQUERDO (z-index 1080) e
       ficaria por cima da gaveta aberta. Some enquanto o menu está aberto. */
    html.sl-sidebar-aberta .kahila-fab{

        display:none;
    }
}

/******************************************************************************
 * ALVO DE TOQUE
 * Em ponteiro grosso (dedo) os botões-ícone da barra superior sobem de 40px
 * para os 44px recomendados. Só no toque: no mouse o tamanho não muda.
 ******************************************************************************/

@media(pointer:coarse){

    .app-icon-btn{

        width:44px;

        height:44px;
    }
}

/******************************************************************************
 * WHATSAPP
 ******************************************************************************/

.whatsapp-label{

    color:#25D366;

    font-weight:600;

    cursor:pointer;
}

.form-switch .form-check-input{

    width:3rem;

    height:1.5rem;

    cursor:pointer;
}

.sl-flag.form-switch .form-check-input:checked{

    background-color:var(--sl-blue-deep);

    border-color:var(--sl-blue-deep);
}

.sl-flag.form-switch .form-check-input:focus{

    border-color:var(--sl-blue-deep);

    box-shadow:0 0 0 .25rem rgba(26,46,90,.18);
}

.sl-flag .form-check-label{

    cursor:pointer;

    margin-left:.5rem;
}

/******************************************************************************
 * LISTA DE SELEÇÃO (.sl-lista-selecao)
 * ----------------------------------------------------------------------------
 * Multi-seleção em forma de LISTA: um item por linha, dentro de uma caixa com
 * rolagem. Escala para dezenas de opções sem esticar o formulário, e mantém o
 * clique simples do checkbox — um <select multiple> nativo exigiria Ctrl+clique
 * para marcar mais de um, que é onde o usuário erra.
 *
 * NÃO usar `sl-flag` aqui: flag é SETTING liga/desliga; isto é seleção de itens
 * — mesma exclusão que vale para o grid de permissões e o "marcar todos".
 ******************************************************************************/

.sl-lista-selecao{

    max-height:220px;

    overflow-y:auto;

    border:1px solid var(--sl-border-soft);

    border-radius:var(--sl-radius-sm);

    background:var(--sl-bg-card);

    padding:.25rem 0;
}

.sl-lista-selecao__item{

    margin:0;

    padding:.35rem .75rem .35rem 2rem;
}

.sl-lista-selecao__item + .sl-lista-selecao__item{

    border-top:1px solid var(--sl-border-soft);
}

.sl-lista-selecao__item:hover{

    background:color-mix(in srgb, var(--sl-blue-tech) 7%, transparent);
}

.sl-lista-selecao__item .form-check-label{

    cursor:pointer;

    display:block;
}

/******************************************************************************
 * PAPÉIS DO ENDEREÇO (empresas/form.php)
 * ----------------------------------------------------------------------------
 * Lista de papéis (Fiscal, Cobrança, Entrega, Comercial, Instalação) com o
 * checkbox à esquerda e a flag "Principal" à direita. A flag é um RÁDIO com
 * visual de switch (.sl-flag): o name compartilhado entre os endereços mantém
 * um só principal por papel sem JavaScript.
 ******************************************************************************/

.sl-lista-selecao--papeis{

    max-height:none;
}

.sl-lista-selecao__item.sl-papel-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:.75rem;

    padding:.4rem .75rem;
}

.sl-papel-item .sl-flag{

    display:flex;

    align-items:center;

    flex-shrink:0;

    padding-left:3.5rem;
}

.sl-papel-item .sl-flag .form-check-input{

    margin-left:-3.5rem;
}

.sl-papel-item .sl-flag .form-check-label{

    margin-left:.6rem;

    min-width:4.6rem;

    font-size:.875rem;

    color:var(--sl-text-muted);
}

.sl-papel-item .sl-flag .form-check-input:checked + .form-check-label{

    color:var(--sl-blue-deep);

    font-weight:700;
}

/* Papel desmarcado: a flag fica apagada (o JS também a desliga). */
.sl-papel-item:not(:has([data-end-papel]:checked)) .sl-flag{

    opacity:.45;
}

/******************************************************************************
 * FORMULÁRIO EM MODO SOMENTE LEITURA (empresas/form.php)
 * - <fieldset> neutralizado visualmente (sem borda/margem/padding do browser)
 *   mas com o atributo `disabled` desativando NATIVAMENTE todos os controles,
 *   inclusive os injetados por JS (contas/forecast/contatos) após o load.
 * - Botões de escrita que sobram (adicionar/remover linhas dinâmicas) são
 *   OCULTADOS via CSS — os estáticos já saem por PHP. Tudo CSP-safe (sem JS).
 ******************************************************************************/

.sl-form-fieldset{
    border:0;
    margin:0;
    padding:0;
    min-width:0;
}

/* Oculta as ações de escrita geradas dinamicamente dentro da ficha somente-leitura. */
.sl-form--readonly [data-add-conta],
.sl-form--readonly [data-remove-conta],
.sl-form--readonly [data-ip-add],
.sl-form--readonly [data-ip-remove],
.sl-form--readonly [data-forecast-add],
.sl-form--readonly [data-forecast-remove],
.sl-form--readonly [data-remover-contato],
.sl-form--readonly #btnAddContato{
    display:none !important;
}

/* Sinal visual discreto de leitura: campos desabilitados legíveis, sem "cinza morto". */
.sl-form--readonly .form-control:disabled,
.sl-form--readonly .form-select:disabled,
.sl-form--readonly .form-control[readonly]{
    background-color:var(--sl-bg-main);
    color:var(--sl-text-muted);
    opacity:1;
    cursor:default;
}

/******************************************************************************
 * HARMONIZAÇÃO VISUAL (2026-06-24)
 * - Botões sempre visíveis (sombra sutil + outline com fundo), não só no hover.
 * - Raio unificado "semisquare" em cards/quadros.
 * - Escala tipográfica de cabeçalhos mais harmônica (reduz saltos do Bootstrap).
 ******************************************************************************/

:root{
    --sl-radius:10px;     /* cards / quadros (semisquare) */
    --sl-radius-sm:8px;   /* botões / inputs */
    --sl-shadow-btn:0 1px 3px rgba(26,46,90,.14);
    --sl-shadow-btn-hover:0 4px 10px rgba(26,46,90,.20);
}

/* ---- Botões: sombra sutil sempre visível + elevação no hover ---- */
.btn{
    border-radius:var(--sl-radius-sm);
    box-shadow:var(--sl-shadow-btn);
    transition:box-shadow .15s ease, transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover{
    opacity:1;
    box-shadow:var(--sl-shadow-btn-hover);
    transform:translateY(-1px);
}
.btn:active{ transform:translateY(0); box-shadow:var(--sl-shadow-btn); }

/* Botões "outline" (Bootstrap) ganham fundo branco para aparecer sem hover */
.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,
.btn-outline-danger,.btn-outline-warning,.btn-outline-dark,.btn-outline-info{
    background-color:var(--sl-bg-card);
}

/* ---- Cards / quadros: raio unificado ---- */
.card,.card-dashboard{ border-radius:var(--sl-radius); }

/* ---- Cabeçalhos: escala harmônica (sobrepõe os saltos do Bootstrap) ---- */
h1,.h1{ font-size:1.6rem; }
h2,.h2{ font-size:1.4rem; }
h3,.h3{ font-size:1.25rem; }
h4,.h4{ font-size:1.15rem; }
h5,.h5{ font-size:1.05rem; }
h6,.h6{ font-size:.95rem; }
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    font-weight:600;
    line-height:1.3;
    color:var(--sl-text-main);
}

/* ---- Permissões do usuário: destaque do que difere do perfil (override) ----
   Aplicado por assets/js/usuario-permissoes.js na tela usuarios/editar.php:
   checkbox marcado/desmarcado que não corresponde ao perfil selecionado. */
.perm-chk.perm-override{
    outline:2px solid var(--sl-warning);
    outline-offset:1px;
    border-color:var(--sl-warning);
}

/******************************************************************************
 * BOTÃO "VOLTAR" EM PÁGINAS LONGAS (injetado por sl-voltar.js)
 * Barra fina com o botão "Voltar" à esquerda. A do topo cria respiro abaixo;
 * a do fim, um separador acima. Usa o .btn/.btn-outline-primary já temáticos.
 ******************************************************************************/

.sl-voltar{
    display:flex;
}

.sl-voltar--topo{
    margin-bottom:18px;
}

.sl-voltar--fim{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--sl-border-soft);
}

/******************************************************************************
 * TEMA ESCURO (opt-in por usuário — data-theme="dark" no <html>)
 * ----------------------------------------------------------------------------
 * Só redefinimos os TOKENS base; todo o resto do CSS (e os CSS de módulo que
 * usam as variáveis --sl-*) herda o escuro automaticamente. Componentes do
 * Bootstrap ficam escuros via data-bs-theme="dark" (setado junto no <html>).
 * A escolha é aplicada cedo por sl-ui-boot.js para não haver "flash".
 ******************************************************************************/

:root[data-theme="dark"]{

    /* Mesmo matiz do institucional (#1a2e5a), escurecido — o escuro precisa
       parecer a mesma marca com a luz apagada, não um cinza qualquer. */
    --sl-bg-main:#101a2b;      /* fundo da página */
    --sl-bg-card:#18253c;      /* cards, inputs, barra superior, tabelas */
    --sl-text-main:#e6ecf7;    /* texto principal */
    --sl-text-muted:#9dabc4;   /* texto secundário */
    --sl-border-soft:#2b3b58;  /* bordas suaves */

    /* Sombras mais densas para manter profundidade sobre fundo escuro. */
    --sl-shadow-btn:0 1px 3px rgba(0,0,0,.45);
    --sl-shadow-btn-hover:0 4px 12px rgba(0,0,0,.55);

    /* Realce "soft" (faixa clara) usado em pontos como a linha de total do
       forecast (empresas/form.php). No CLARO o token não existe e prevalece o
       fallback inline #eef4fb; no ESCURO definimos um realce azul sutil para
       não gerar faixa branca "estourada" sobre a superfície escura. */
    --sl-blue-soft:rgba(74,115,176,.16);
}

/* Links padrão do Bootstrap dentro do conteúdo ficam mais claros no escuro. */
:root[data-theme="dark"] a:not(.btn):not(.app-user-btn):not(.app-icon-btn){

    color:var(--sl-blue-tech);
}

/******************************************************************************
 * SIDEBAR MINIMIZADA (data — html.sl-sidebar-min)
 * ----------------------------------------------------------------------------
 * Estado estreito (só ícones). Ao passar o mouse, a sidebar volta a 260px por
 * cima do conteúdo (não reflui a página). Só acima de 768px — no mobile a
 * sidebar já tem comportamento próprio.
 ******************************************************************************/

/* `transform` entra aqui (e não no @media do mobile) porque esta regra vem
   depois na folha: com a mesma especificidade, a última vence e apagaria a
   transição declarada lá dentro. */
.sidebar{ transition:width .2s ease, transform .2s ease; }
.main-content{ transition:margin-left .2s ease; }

@media(min-width:769px){

    html.sl-sidebar-min .sidebar{
        width:72px;
    }

    html.sl-sidebar-min .main-content{
        margin-left:72px;
    }

    /* Barra superior termina na linha da barra dourada do cartão do logo.
       Recolhida, a sidebar esconde o cartão e a barra volta à altura normal. */
    html:not(.sl-sidebar-min) body:has(.sidebar--logo-clara) .app-topbar{
        min-height:calc(var(--sl-logo-cartao-margem) + var(--sl-logo-cartao-altura));
    }

    /* Estado estreito (sem hover): só os ícones. O texto dos itens é nó solto
       dentro do <a>; zeramos a fonte do link e restauramos apenas no ícone. */
    html.sl-sidebar-min .sidebar:not(:hover) ul li a{
        font-size:0;
        gap:0;
        justify-content:center;
        padding:14px 0;
    }

    html.sl-sidebar-min .sidebar:not(:hover) ul li a i{
        font-size:18px;
        min-width:auto;
    }

    html.sl-sidebar-min .sidebar:not(:hover) ul li a .bi-chevron-down{
        display:none;
    }

    /* Submenus abertos ficam ocultos enquanto estreito. */
    html.sl-sidebar-min .sidebar:not(:hover) ul ul{
        display:none;
    }

    /* Logo horizontal não cabe estreita: esconde no estado compacto. */
    html.sl-sidebar-min .sidebar:not(:hover) .logo-area{
        padding:18px 8px;
    }

    html.sl-sidebar-min .sidebar:not(:hover) .logo-area img{
        display:none;
    }

    html.sl-sidebar-min .sidebar:not(:hover) .logo-area .logo-cliente-cartao,
    html.sl-sidebar-min .sidebar:not(:hover) .logo-area .logo-produto-divisor,
    html.sl-sidebar-min .sidebar:not(:hover) .logo-area .logo-produto-rotulo{
        display:none;
    }

    /* Hover: expande por cima do conteúdo. */
    html.sl-sidebar-min .sidebar:hover{
        width:260px;
        box-shadow:4px 0 24px rgba(0,0,0,.18);
        z-index:1030;
    }
}

/* =========================================================================
 * sl-busca-select — select pesquisável reutilizável
 * Aplica-se a qualquer <select data-sl-busca-select>.
 * ========================================================================= */

.sl-busca-select{
    position:relative;
}

.sl-busca-select__input{
    cursor:text;
}

.sl-busca-select__dropdown{
    display:none;
    position:absolute;
    z-index:1060;
    left:0;
    right:0;
    top:100%;
    max-height:240px;
    overflow-y:auto;
    background:var(--sl-bg-card,#fff);
    border:1px solid var(--sl-border-soft,#c7d2e4);
    border-top:none;
    border-radius:0 0 .375rem .375rem;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}

.sl-busca-select__dropdown--aberto{
    display:block;
}

/* Flutuante: dentro de .table-responsive/card com overflow o absoluto seria
   cortado — o JS fixa a posição pelo campo (left/top/width). */
.sl-busca-select__dropdown--flutuante{
    position:fixed;
    right:auto;
    z-index:1080;
    border-top:1px solid var(--sl-border-soft,#c7d2e4);
    border-radius:.375rem;
}

.sl-busca-select__item{
    padding:6px 10px;
    font-size:.875rem;
    cursor:pointer;
    color:var(--sl-text-main,#1a2e5a);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sl-busca-select__item:hover,
.sl-busca-select__item--destaque{
    background:var(--sl-blue-tech,#4a73b0);
    color:#fff;
}

.sl-busca-select__item--ativo{
    font-weight:600;
}

.sl-busca-select__vazio{
    padding:8px 10px;
    font-size:.8125rem;
    color:var(--sl-text-muted,#5b6577);
    font-style:italic;
}

[data-theme="dark"] .sl-busca-select__dropdown{
    background:var(--sl-bg-card);
    border-color:var(--sl-border-soft);
}

[data-theme="dark"] .sl-busca-select__item{
    color:var(--sl-text-main);
}

[data-theme="dark"] .sl-busca-select__item:hover,
[data-theme="dark"] .sl-busca-select__item--destaque{
    background:var(--sl-blue-petrol,#24406f);
}

.sl-busca-select__tags{
    display:flex;flex-wrap:wrap;gap:4px;padding:0 0 4px;
    max-height:120px;
    overflow-y:auto;
}
.sl-busca-select__tag{
    display:inline-flex;align-items:center;gap:2px;
    background:var(--sl-blue-tech,#0097b2);color:#fff;
    font-size:.75rem;padding:2px 6px;border-radius:3px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sl-busca-select__tag-remover{
    background:none;border:none;color:#fff;font-size:.875rem;
    cursor:pointer;padding:0 2px;line-height:1;opacity:.8;
}
.sl-busca-select__tag-remover:hover{opacity:1;}

[data-theme="dark"] .sl-busca-select__tag{
    background:var(--sl-blue-petrol,#24406f);
}

/******************************************************************************
 * RODAPÉ / DIREITOS AUTORAIS
 * Marca do PRODUTO (Shalom-Labs / Moisés ERP). A identidade do CLIENTE vive
 * em configuração e aparece na barra superior — nunca aqui.
 ******************************************************************************/

.app-rodape{

    margin-top:40px;

    padding:18px 24px;

    border-top:1px solid var(--sl-borda,rgba(0,0,0,.08));

    font-size:12.5px;

    color:var(--sl-texto-suave,#6c757d);

    text-align:center;
}

.app-rodape strong{

    color:var(--sl-blue-deep,#1A2E5A);

    font-weight:700;
}

@media print{

    .app-rodape{ display:none; }
}

/* ==========================================================================
   Catálogo — fotos do produto (card "Fiscal e logística")
   ========================================================================== */

.sl-fotos-produto{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:16px;
}

.sl-foto-slot{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px;
    border:1px solid var(--sl-border);
    border-radius:var(--sl-radius);
    background:var(--sl-bg-card);
}

.sl-foto-slot--vazio{
    border-style:dashed;
}

.sl-foto-slot__img{
    width:100%;
    height:160px;
    object-fit:contain;
    border-radius:var(--sl-radius-sm);
    background:var(--sl-bg);
}

.sl-foto-slot__vazio{
    display:flex;
    align-items:center;
    justify-content:center;
    height:96px;
    border-radius:var(--sl-radius-sm);
    background:var(--sl-bg);
}

.sl-foto-slot__info{
    display:flex;
    align-items:center;
    gap:8px;
}

.sl-badge-principal{
    background:var(--sl-dourado);
    color:var(--sl-primary);
}

/* ==========================================================================
   Financeiro — matriz de parcelas da condição de pagamento
   ========================================================================== */

.sl-parcelas{
    max-width:640px;
}

.sl-parcelas__numero{
    width:56px;
}

.sl-soma-parcelas{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:8px;
    padding:8px 12px;
    border-radius:var(--sl-radius-sm);
    border:1px solid var(--sl-border);
    font-weight:700;
}

.sl-soma-parcelas--ok{
    border-color:var(--sl-success);
    color:var(--sl-success);
}

.sl-soma-parcelas--pendente{
    border-color:var(--sl-warning);
    color:var(--sl-text);
}

.sl-soma-parcelas--excedente{
    border-color:var(--sl-danger);
    color:var(--sl-danger);
}

/* =========================================================================
 * Itens da proposta de venda (comercial/propostas/venda-form.php)
 * Item mostra ~50 caracteres; quantidade cabe 9999 (com fração); desconto
 * com tipo (%/R$) e valor alinhados na mesma altura.
 * ========================================================================= */

.sl-venda-itens .sl-venda-col-item{
    min-width:27rem;
}

.sl-venda-itens .sl-venda-col-qtd{
    width:5.5rem;
}

.sl-venda-itens .sl-venda-col-valor{
    width:8.5rem;
}

.sl-venda-itens .sl-venda-col-desconto{
    width:10rem;
}

.sl-desconto-grupo .form-select{
    flex:0 0 4rem;
    max-width:4rem;
    padding-right:1.5rem;
}

.sl-desconto-grupo .form-control{
    min-width:0;
}

/* =========================================================================
 * Classificação do produto no catálogo (comercial/catalogo/index.php):
 * acabado × matéria-prima (cheio) e fabricação própria × revenda (contorno).
 * ========================================================================= */

.sl-badge-classe{
    font-weight:700;
}

.sl-badge-classe--acabado{
    background:var(--sl-primary);
    color:var(--sl-on-primary);
}

.sl-badge-classe--mp{
    background:var(--sl-dourado);
    color:var(--sl-azul-profundo);
}

.sl-badge-fab{
    background:transparent;
    border:1px solid currentColor;
    font-weight:400;
}

.sl-badge-fab--propria{
    color:var(--sl-success);
}

.sl-badge-fab--revenda{
    color:var(--sl-blue-tech);
}

/* ---- Pedido de venda: Status de Produção e Status Financeiro -------------
   Badges dos dois status (PedidoStatusService). Cores só por token --sl-*.  */
.sl-badge-status{
    display:inline-block;
    padding:.25em .6em;
    border-radius:var(--sl-radius-sm, 8px);
    font-size:.75em;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    background:var(--sl-azul-palido);
    color:var(--sl-azul-profundo);
}

.sl-badge-etapa--proposta{ background:var(--sl-fundo); color:var(--sl-cinza); border:1px solid var(--sl-azul-palido); }
.sl-badge-etapa--analise_financeira{ background:var(--sl-warning); color:var(--sl-grafite); }
.sl-badge-etapa--pedido_aceito{ background:var(--sl-azul-claro); color:var(--sl-azul-profundo); }
.sl-badge-etapa--fabricacao{ background:var(--sl-azul-medio); color:var(--sl-on-primary); }
.sl-badge-etapa--expedicao{ background:var(--sl-azul-link); color:var(--sl-on-primary); }
.sl-badge-etapa--cotacao_frete{ background:var(--sl-dourado); color:var(--sl-azul-profundo); }
.sl-badge-etapa--concluido{ background:var(--sl-success); color:var(--sl-on-primary); }
.sl-badge-etapa--cancelado{ background:var(--sl-cinza); color:var(--sl-on-primary); }

.sl-badge-fin--nao_faturado{ background:var(--sl-fundo); color:var(--sl-cinza); border:1px solid var(--sl-azul-palido); }
.sl-badge-fin--boleto_gerado{ background:var(--sl-azul-claro); color:var(--sl-azul-profundo); }
.sl-badge-fin--nf_parcial{ background:var(--sl-warning); color:var(--sl-grafite); }
.sl-badge-fin--nf_emitida{ background:var(--sl-azul-link); color:var(--sl-on-primary); }
.sl-badge-fin--boleto_pago{ background:var(--sl-success); color:var(--sl-on-primary); }

/******************************************************************************
 * USUÁRIO — EDIÇÃO (usuarios/editar.php) e GRID DE PERMISSÕES
 * (app/views/usuarios/permissoes-grid.php, também em usuarios/perfis/form.php).
 * Cabeçalho com identidade, seções em cartão, barra de ações fixa no rodapé;
 * módulos de permissão recolhíveis, com colunas de largura fixa para que
 * Visualizar/Criar/Editar/Inativar fiquem alinhadas entre todos os módulos.
 ******************************************************************************/

.sl-usuario__cabecalho{
    display:flex;
    align-items:center;
    gap:16px;
    margin:0 0 20px;
}
.sl-usuario__avatar{
    flex:0 0 52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:1.1rem;
    background:var(--sl-azul-profundo);
    color:var(--sl-on-primary);
    border:2px solid var(--sl-dourado);
}
.sl-usuario__identidade{ min-width:0; }
.sl-usuario__identidade h1{ overflow-wrap:anywhere; }
.sl-usuario__selos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.sl-usuario__selo-perfil{ background:var(--sl-azul-link); color:var(--sl-on-primary); }

.sl-usuario__secao{ margin-bottom:16px; }
.sl-usuario__titulo{
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--sl-text-muted);
    margin:0 0 14px;
}
.sl-usuario__flags{ display:flex; flex-direction:column; gap:6px; }
.sl-usuario__divisor{ border-color:var(--sl-border-soft); opacity:1; margin:16px 0; }

/* Barra de ações sempre à mão em página longa. */
.sl-usuario__acoes{
    position:sticky;
    bottom:0;
    z-index:5;
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin:8px -12px 0;
    padding:12px;
    background:var(--sl-bg-card);
    border-top:1px solid var(--sl-border-soft);
    box-shadow:0 -4px 12px rgba(26,46,90,.06);
}

/* Legenda do destaque de exceção (mesma cor do .perm-override). */
.sl-perm-legenda{
    display:inline-block;
    width:12px;
    height:12px;
    vertical-align:-1px;
    margin-right:4px;
    border-radius:3px;
    outline:2px solid var(--sl-warning);
    outline-offset:1px;
}

/* ---- Grid de permissões ---------------------------------------------------- */
.sl-perm-barra{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 16px;
    margin:0 0 12px;
}
.sl-perm-barra__busca{ position:relative; flex:1 1 260px; }
.sl-perm-barra__busca .bi{
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    color:var(--sl-text-muted);
    pointer-events:none;
}
.sl-perm-barra__busca .form-control{ padding-left:30px; }

.sl-perm-modulo{
    border:1px solid var(--sl-border-soft);
    border-radius:var(--sl-radius-sm);
    margin-bottom:8px;
    background:var(--sl-bg-card);
}
.sl-perm-modulo__cabecalho{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    cursor:pointer;
    list-style:none;
    user-select:none;
}
.sl-perm-modulo__cabecalho::-webkit-details-marker{ display:none; }
.sl-perm-modulo__cabecalho .form-check-input{ margin:0; }
.sl-perm-modulo__seta{ color:var(--sl-text-muted); transition:transform .15s ease; }
.sl-perm-modulo[open] > .sl-perm-modulo__cabecalho .sl-perm-modulo__seta{ transform:rotate(90deg); }
.sl-perm-modulo[open] > .sl-perm-modulo__cabecalho{ border-bottom:1px solid var(--sl-border-soft); }
.sl-perm-modulo__nome{ font-weight:700; color:var(--sl-text-main); }
.sl-perm-modulo__contador{
    margin-left:auto;
    font-size:.78rem;
    padding:2px 8px;
    border-radius:999px;
    background:var(--sl-azul-link);
    color:var(--sl-on-primary);
    white-space:nowrap;
}
.sl-perm-modulo__contador.is-vazio{ background:var(--sl-fundo); color:var(--sl-text-muted); }
.sl-perm-modulo__contador.is-completo{ background:var(--sl-success); }

.sl-perm-tabela{ table-layout:fixed; min-width:640px; }
.sl-perm-tabela__recurso{ width:22%; }
.sl-perm-tabela__verbo{ width:88px; }
.sl-perm-tabela thead th{
    font-size:.78rem;
    font-weight:700;
    color:var(--sl-text-muted);
    background:var(--sl-fundo);
    border-bottom:1px solid var(--sl-border-soft);
    white-space:nowrap;
}
.sl-perm-tabela__coluna{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:0;
    cursor:pointer;
}
.sl-perm-tabela__coluna .form-check-input{ margin:0; }
.sl-perm-tabela td{ border-color:var(--sl-border-soft); }
.sl-perm-tabela tbody tr:hover{ background:var(--sl-fundo); }
.sl-perm-tabela__nome{ overflow-wrap:anywhere; }
.sl-perm-tabela__vazio{ color:var(--sl-azul-palido); }
.sl-perm-acoes{ display:flex; flex-wrap:wrap; gap:4px 16px; }

/******************************************************************************
 * PAGINAÇÃO (paginacaoRenderizar — app/config/paginacao.php)
 * Contador sempre visível + Primeira/Anterior/números/Próxima/Última na
 * paleta da marca. Vale para todas as listas paginadas.
 ******************************************************************************/
.sl-paginacao{
    padding-top:12px;
    border-top:1px solid var(--sl-border-soft);
}
.sl-paginacao__resumo strong{ color:var(--sl-text-main); }
.sl-paginacao__sep{ margin:0 4px; color:var(--sl-border-soft); }
.sl-paginacao .page-link{
    color:var(--sl-azul-profundo);
    border-color:var(--sl-border-soft);
    background:var(--sl-bg-card);
}
.sl-paginacao .page-link:hover{ background:var(--sl-fundo); color:var(--sl-azul-profundo); }
.sl-paginacao .page-item.active .page-link{
    background:var(--sl-azul-profundo);
    border-color:var(--sl-azul-profundo);
    color:var(--sl-on-primary);
}
.sl-paginacao .page-item.disabled .page-link{
    color:var(--sl-text-muted);
    background:var(--sl-bg-card);
    opacity:.55;
}

/******************************************************************************
 * BARRA DE FILTROS COMPACTA DE LISTAGENS (.sl-toolbar) — 2026-11-01
 * Título, contagem, busca, botão "Filtros" (painel flutuante), visão e ações
 * numa linha. Filtros ativos viram chips removíveis logo abaixo (helper
 * app/helpers/filtros_chips.php). JS: assets/js/sl-toolbar.js.
 ******************************************************************************/
.sl-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:0 0 12px;
}
.sl-toolbar .btn-sm{ min-height:32px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.sl-toolbar__cabeca{ display:flex; align-items:center; gap:8px; }
.sl-toolbar__titulo{ margin:0; color:var(--sl-blue-deep); font-weight:700; white-space:nowrap; }
.sl-toolbar__contagem{
    padding:0 8px;
    border:1px solid var(--sl-border-soft);
    border-radius:999px;
    background:var(--sl-bg-card);
    color:var(--sl-text-muted);
    font-size:.78rem;
    font-variant-numeric:tabular-nums;
}
.sl-toolbar__busca{ position:relative; flex:1 1 280px; min-width:200px; }
.sl-toolbar__busca > .bi{
    position:absolute; left:10px; top:50%; transform:translateY(-50%);
    color:var(--sl-text-muted); pointer-events:none;
}
.sl-toolbar__busca .form-control{ min-height:32px; padding-left:32px; }
.sl-toolbar__filtros{ position:relative; }
.sl-toolbar__badge{
    min-width:18px;
    padding:0 5px;
    border-radius:999px;
    background:var(--sl-dourado);
    color:var(--sl-azul-profundo);
    font-size:.72rem;
    font-weight:700;
    line-height:18px;
    text-align:center;
}
.sl-toolbar__painel{
    position:absolute;
    z-index:1020;
    top:calc(100% + 6px);
    right:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(200px, 1fr));
    gap:10px 12px;
    width:min(520px, calc(100vw - 32px));
    padding:14px;
    border:1px solid var(--sl-border-soft);
    border-radius:10px;
    background:var(--sl-bg-card);
    box-shadow:0 12px 30px color-mix(in srgb, var(--sl-blue-deep) 18%, transparent);
}
.sl-toolbar__painel[hidden]{ display:none; }
.sl-toolbar__campo .form-label{ margin-bottom:2px; color:var(--sl-text-muted); font-size:.78rem; }
.sl-toolbar__rodape{ grid-column:1 / -1; display:flex; justify-content:flex-end; gap:8px; padding-top:4px; }
.sl-toolbar__mais{ width:32px; justify-content:center; padding:0; }
.sl-toolbar__chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-4px 0 12px; }
.sl-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-height:26px;
    padding:0 6px 0 10px;
    border:1px solid var(--sl-border-soft);
    border-radius:999px;
    background:var(--sl-bg-card);
    color:var(--sl-text-main);
    font-size:.8rem;
    text-decoration:none;
}
.sl-chip:hover,
.sl-chip:focus-visible{ border-color:var(--sl-blue-tech); color:var(--sl-blue-deep); }
.sl-chip__rotulo{ color:var(--sl-text-muted); }
.sl-toolbar__limpar{ font-size:.8rem; color:var(--sl-blue-tech); }

@media(max-width:767.98px){
    /* Linha 1: título e contagem. Linha 2: ações só com ícone. Linha 3: busca.
       O painel ocupa a largura da barra inteira. */
    .sl-toolbar{ position:relative; }
    .sl-toolbar__cabeca{ flex-basis:100%; }
    .sl-toolbar__busca{ flex-basis:100%; order:3; }
    .sl-toolbar__filtros{ position:static; margin-right:auto; }
    .sl-toolbar__painel{ left:0; right:0; width:auto; grid-template-columns:1fr; }
    .sl-toolbar__rotulo{ display:none; }
}
.sl-toolbar__espaco{ flex:1 1 auto; }
.sl-toolbar__campo--largo{ grid-column:1 / -1; }

/* Abas e ações da TELA no segundo andar da top bar ($slTopbarPagina). Separadas
   das abas do módulo por uma linha vertical; ações coladas à direita. */
.sl-module-nav__pagina{ flex:0 1 auto; padding-left:12px; border-left:1px solid var(--sl-border-soft); }
.sl-module-nav__list + .sl-module-nav__pagina{ margin-left:4px; }
.sl-module-nav__pagina .sl-module-nav__tab.active{
    background:transparent;
    color:var(--sl-blue-deep);
    font-weight:700;
    border-bottom-color:var(--sl-dourado);
}
.sl-module-nav__pagina .sl-module-nav__tab .bi{ font-size:.95rem; color:inherit; }
.sl-module-nav__qtd{
    padding:0 6px;
    border-radius:999px;
    background:var(--sl-bg-main, var(--sl-border-soft));
    color:var(--sl-text-muted);
    font-size:.72rem;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}
.sl-module-nav__alerta{ color:var(--sl-dourado); }
.sl-module-nav__acoes{ display:flex; flex:0 0 auto; align-items:center; gap:6px; margin-left:auto; padding:6px 0; }
.sl-module-nav__acoes .btn{ display:inline-flex; align-items:center; gap:5px; min-height:30px; white-space:nowrap; }
@media(max-width:767.98px){
    .sl-module-nav__pagina{ padding-left:0; border-left:0; flex-basis:100%; }
    .sl-module-nav__acoes{ margin-left:0; }
}
/* Com abas da tela, as do módulo não esticam: as da tela vêm logo depois. */
.sl-module-nav:has(.sl-module-nav__pagina) > .sl-module-nav__list:not(.sl-module-nav__pagina){ flex:0 1 auto; }