/**
 * ==========================================================================
 * THEME CUSTOMIZATION - Override CSS Variables
 * ==========================================================================
 * 
 * Este arquivo permite personalizar cores do tema sem alterar os arquivos base.
 * Quando atualizar o tema, este arquivo não será afetado.
 * 
 * COMO FUNCIONA:
 * 1. O tema base (app.min.css) define variáveis para cada data-attribute
 * 2. Este arquivo sobrescreve apenas o que você quer personalizar
 * 3. Use seletores com data-attributes para maior especificidade
 * 
 * ==========================================================================
 */


/* ==========================================================================
   VARIÁVEIS DISPONÍVEIS - REFERÊNCIA
   ==========================================================================
   
   SIDEBAR (--ins-sidenav-*):
   --ins-sidenav-bg                 : Background do sidebar
   --ins-sidenav-border-color       : Cor da borda
   --ins-sidenav-item-color         : Cor do texto dos itens
   --ins-sidenav-item-hover-bg      : Background ao passar o mouse
   --ins-sidenav-item-active-bg     : Background do item ativo
   --ins-sidenav-item-active-color  : Cor do texto do item ativo
   
   TOPBAR (--ins-topbar-*):
   --ins-topbar-bg                  : Background do topbar
   --ins-topbar-item-color          : Cor dos itens
   --ins-topbar-item-hover-color    : Cor ao passar o mouse
   --ins-topbar-search-bg           : Background do campo de busca
   --ins-topbar-search-border       : Borda do campo de busca

   ========================================================================== */


/* ==========================================================================
   EXEMPLO 1: Sidebar Azul Corporativo (customizado)
   ========================================================================== */


html[data-menu-color="SimpWeb"] {
    /* Background do sidebar */
    --ins-sidenav-bg: #004C99;
    --ins-sidenav-border-color: #004C99;
    
    /* Cor padrão dos itens */
    --ins-sidenav-item-color: rgba(255, 255, 255, 0.8);
    
    /* Hover dos itens */
    --ins-sidenav-item-hover-bg: #003d7a;          /* Fundo ao passar o mouse */
    --ins-sidenav-item-hover-color: #ffffff;       /* Texto ao passar o mouse */
    
    /* Item ativo/selecionado */
    --ins-sidenav-item-active-bg: #003366;
    --ins-sidenav-item-active-color: #ffffff;
    
    /* Tamanho do logo */
    --ins-logo-lg-height: 72px;    /* Logo grande (padrão: 22px) */
    --ins-logo-sm-height: 50px;    /* Logo pequeno - sidebar recolhido (padrão: 22px) */
}

/* SimpWeb: Logo - mostra versão clara (fundo escuro) */
html[data-menu-color="SimpWeb"] .sidenav-menu .logo.logo-light {
    display: block;
}
html[data-menu-color="SimpWeb"] .sidenav-menu .logo.logo-dark {
    display: none;
}

.bg-fecomercio {
    background-color: #004C99 !important;
}

.border-fecomercio {
    border-color: #004C99 !important;
}

.text-fecomercio {
    color: #004C99 !important;
}

.bg-fecomercio-subtle {
    background-color: #004C99 !important;
}
.btn-fecomercio {
    background-color: #004C99 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   CLASSES UTILITÁRIAS PARA LOGO
   Controla qual logo aparece baseado no contraste do fundo
   ========================================================================== */

/* Logos para fundos escuros/claros */
.logo-for-dark {
    display: none;
}

.logo-for-light {
    display: block;
}

/* Sidebar escuro → mostra logo claro */
html[data-menu-color="dark"] .sidenav-menu .logo-for-dark,
html[data-menu-color="gradient"] .sidenav-menu .logo-for-dark,
html[data-menu-color="image"] .sidenav-menu .logo-for-dark,
html[data-bs-theme="dark"] .sidenav-menu .logo-for-dark {
    display: block;
}

html[data-menu-color="dark"] .sidenav-menu .logo-for-light,
html[data-menu-color="gradient"] .sidenav-menu .logo-for-light,
html[data-menu-color="image"] .sidenav-menu .logo-for-light,
html[data-bs-theme="dark"] .sidenav-menu .logo-for-light {
    display: none;
}

/* Topbar escuro → mostra logo claro */
html[data-topbar-color="dark"] .app-topbar .logo-for-dark,
html[data-topbar-color="gradient"] .app-topbar .logo-for-dark {
    display: block;
}

html[data-topbar-color="dark"] .app-topbar .logo-for-light,
html[data-topbar-color="gradient"] .app-topbar .logo-for-light {
    display: none;
}


/* ==========================================================================
   PÁGINAS DE AUTENTICAÇÃO (Login, Registro, etc)
   ========================================================================== */

/* Imagem de fundo da página de login/autenticação */
.card-side-img {
    background-image: url('../assets/images/fundo-login.webp') !important;
    /* 
     * Substitua 'auth-bg.jpg' pelo nome da sua imagem.
     * Coloque a imagem em: static/images/auth-bg.jpg
     * 
     * Dica: Use imagens com pelo menos 1920x1080px para melhor qualidade.
     * 
     * Opções de posicionamento:
     * background-position: center;  (padrão)
     * background-position: top;
     * background-position: bottom;
     * background-position: left;
     * background-position: right;
     */
}

/* Overlay sobre a imagem (escurecer para melhor contraste) */
.auth-overlay {
    /* background: rgba(0, 0, 0, 0.3); */ /* Descomente para escurecer */
    background: linear-gradient(to top, rgba(0,0,0,0.1), transparent); /* Gradiente */
}


/* ==========================================================================
   SUAS PERSONALIZAÇÕES AQUI
   Adicione suas customizações abaixo
   ========================================================================== */

/* ==========================================================================
   FILTRO: Logo Branco - REMOVIDO
   ========================================================================== */
/* 
 * O filtro branco agora é controlado dinamicamente via SYSTEM_CONFIG.logo_white_filter
 * Ver: templates/partials/styles.html (CSS dinâmico injetado)
 */

/* ==========================================================================
   TOPBAR - Avatar do Usuário (imagem retangular)
   ========================================================================== */

/* Avatar do usuário no topbar - mantém forma retangular com cantos arredondados */
.topbar-item.nav-user img[alt="foto-usuario"] {
    border-radius: 0.3rem !important; /* Cantos arredondados, não circular */
    object-fit: cover;
}

/* ==========================================================================
   PÁGINA DE LOGIN - Tamanho do Logo
   ========================================================================== */

/* Variável CSS para controlar o tamanho do logo na página de login */
:root {
    --auth-logo-height: 130px; /* Altura padrão do logo na página de login (ajuste conforme necessário) */
}

/* Logo na página de login - tamanho customizável */
.auth-brand .logo img {
    height: var(--auth-logo-height) !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Ajuste responsivo para telas menores */
@media (max-width: 768px) {
    :root {
        --auth-logo-height: 60px; /* Logo menor em telas pequenas */
    }
}

/* ==========================================================================
   FILEPOND - Estilos para Erros (apenas mudança de cor)
   ========================================================================== */

/* Apenas mudar a cor de fundo do painel para vermelho - manter tudo padrão */
[data-filepond-item-state*=error] .filepond--item-panel,
[data-filepond-item-state*=invalid] .filepond--item-panel {
    background-color: #f1556c !important; /* Vermelho do tema (--ins-danger) */
}

/* ==========================================================================
   SIDEBAR MENU - Manter collapses sempre abertos
   ========================================================================== */

/* Garantir que todos os collapses do menu lateral sempre fiquem abertos */
.side-nav .collapse {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Remover transições que podem causar animações indesejadas */
.side-nav .collapse.show {
    transition: none !important;
}

/* Prevenir que o Bootstrap feche os collapses */
.side-nav .collapse:not(.show) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* Prevenir animação "collapsing" - remover imediatamente se aparecer */
.side-nav .collapse.collapsing {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    transition: none !important;
}