/**
 * ==========================================================================
 * 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;
}
/* ==========================================================================
   EXEMPLO 2: Sidebar Verde Natureza
   ========================================================================== */

/*
html[data-menu-color="dark"] {
    --ins-sidenav-bg: #1a4731;
    --ins-sidenav-border-color: #1a4731;
    --ins-sidenav-item-color: #9ae6b4;
    --ins-sidenav-item-hover-bg: #276749;
    --ins-sidenav-item-active-bg: #38a169;
    --ins-sidenav-item-active-color: #ffffff;
}
*/


/* ==========================================================================
   EXEMPLO 3: Sidebar Roxo Moderno
   ========================================================================== */

/*
html[data-menu-color="dark"] {
    --ins-sidenav-bg: #2d1b4e;
    --ins-sidenav-border-color: #2d1b4e;
    --ins-sidenav-item-color: #d6bcfa;
    --ins-sidenav-item-hover-bg: #44337a;
    --ins-sidenav-item-active-bg: #6b46c1;
    --ins-sidenav-item-active-color: #ffffff;
}
*/


/* ==========================================================================
   EXEMPLO 4: Topbar Gradiente Customizado
   ========================================================================== */

/*
html[data-topbar-color="gradient"] {
    --ins-topbar-bg: linear-gradient(to right, #667eea, #764ba2);
    --ins-topbar-item-color: rgba(255, 255, 255, 0.85);
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ins-topbar-search-border: rgba(255, 255, 255, 0.2);
}
*/


/* ==========================================================================
   EXEMPLO 5: Combinação Skin + Cor (mais específico)
   Use quando quiser customizar apenas para um skin específico
   ========================================================================== */

/*
html[data-skin="modern"][data-menu-color="gradient"] {
    --ins-sidenav-bg: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    --ins-sidenav-item-color: #e2e8f0;
    --ins-sidenav-item-active-color: #60a5fa;
    --ins-sidenav-item-active-bg: rgba(96, 165, 250, 0.1);
}
*/


/* ==========================================================================
   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 - Aplicar filtro para deixar logo branco
   ========================================================================== */

/* Aplicar filtro branco nas imagens do logo do sidebar */
.sidenav-menu .logo img {
    filter: brightness(0) invert(1);
    /* 
     * brightness(0) - deixa a imagem preta
     * invert(1) - inverte as cores, transformando preto em branco
     * Resultado: logo fica branco
     */
}

/* Aplicar filtro branco nas imagens do logo da topbar (opcional) */
.logo-white img {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   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) */
}