/**
 * ===================================================================
 * CUSTOM OVERRIDES - Edição rápida sem compilação
 * ===================================================================
 * 
 * Este arquivo é carregado DEPOIS do app.css, tendo prioridade máxima.
 * 
 * ⚠️ IMPORTANTE:
 * - Todas as regras de DROPDOWN estão consolidadas no main.scss
 * - Não adicione regras de dropdown aqui (edite main.scss e recompile)
 * - Use este arquivo APENAS para testes rápidos ou ajustes específicos
 * - Sempre use !important para garantir que sobrescreva app.css
 * 
 * Para aplicar mudanças:
 * 1. Edite este arquivo
 * 2. Salve (Ctrl+S)
 * 3. Recarregue (Ctrl+F5)
 * 
 * Data: 2026-01-21
 * Status: Estrutura consolidada no main.scss
 * ===================================================================
 */

/* ============================================================================
   VARIÁVEIS CSS CUSTOMIZADAS
   ============================================================================ */

:root {
  /* Largura da Sidebar */
  --sidebar-width: 240px;
  
  /* Adicione outras variáveis customizadas aqui */
  /* Exemplo: --custom-color: #FF0000; */
}

/* ============================================================================
   SIDEBAR - Configurações de Largura
   ============================================================================ */

.sidebar,
.sidebar-wrap {
  width: var(--sidebar-width) !important;
}

.navbar-left {
  width: var(--sidebar-width) !important;
}

.navbar-body {
  width: calc(100% - var(--sidebar-width)) !important;
  margin-left: var(--sidebar-width) !important;
}

/* ============================================================================
   NAVBAR - Customizações Rápidas
   ============================================================================ */

/* Exemplo: Mudar background do navbar-body
.navbar-body {
  background: #000000 !important;
}
*/

/* Exemplo: Mudar cor dos nav-links
.navbar-body .navbar-menu .nav-link {
  color: #FFFFFF !important;
}
*/

/* ============================================================================
   SIDEBAR - Customizações Rápidas
   ============================================================================ */

/* Exemplo: Mudar background da sidebar
.sidebar {
  background-color: #000000 !important;
}
*/

/* Exemplo: Mudar cor dos itens do menu
.sidebar .nav-item .nav-link {
  color: #FFFFFF !important;
}
*/

/* ============================================================================
   BOTÕES - Customizações Rápidas
   ============================================================================ */

/* Exemplo: Mudar cor do botão primary
.btn-primary {
  background: #FF0000 !important;
  border-color: #FF0000 !important;
}
*/

/* Exemplo: Mudar cor do botão secondary
.btn-secondary {
  background: #CCCCCC !important;
  border-color: #CCCCCC !important;
}
*/

/* ============================================================================
   CARDS E COMPONENTES - Customizações Rápidas
   ============================================================================ */

/* Exemplo: Mudar background dos cards
.card {
  background-color: #FFFFFF !important;
  border-color: #E5E7EB !important;
}
*/

/* ============================================================================
   DROPDOWN MENU - Customizações de Glassmorphism
   ============================================================================ */

/* 
   ✅ ESTILO ATUAL DO DROPDOWN MENU (Desktop)
   Edite as propriedades abaixo para customizar o efeito glassmorphism
*/

.dropdown .dropdown-menu {
  background: rgba(var(--card-bg-rgb), 0.75) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2) !important;
}

/* ============================================================================
   DROPDOWN MENU - Customizações para Resoluções Pequenas (Mobile/Tablet)
   ============================================================================ */

/* 
   ⚠️ IMPORTANTE: Em resoluções pequenas (max-width: 993px), o dropdown pode
   ter comportamento diferente devido a regras específicas em responsive.scss.
   Use esta seção para garantir consistência visual em mobile.
*/

@media (max-width: 993px) {
  /* ========================================================================
     DROPDOWN MENU - Estilo Glassmorphism (Mobile)
     ======================================================================== */
  
  /* Apenas garante o mesmo estilo glassmorphism do desktop */
  /* As cores de texto, ícones e estados são herdadas do desktop/main.scss */
  
  .dropdown .dropdown-menu,
  .navbar-body .dropdown-menu,
  .navbar-menu .dropdown-menu,
  .navbar-nav .dropdown-menu,
  .navbar-left .dropdown .dropdown-menu {
    /* Transparência e blur consistentes com desktop */
    background: rgba(var(--card-bg-rgb), 0.75) !important;
    background: rgb(0 0 0 / 75%) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2) !important;
  }
}

/* 
   📝 PROPRIEDADES DISPONÍVEIS PARA CUSTOMIZAÇÃO:
   
   background: rgba(var(--card-bg-rgb), 0.75) !important;
   - Opacidade do fundo (0.0 = transparente, 1.0 = opaco)
   - Exemplo: 0.75 = 75% opaco, 0.5 = 50% opaco
   
   backdrop-filter: blur(15px) !important;
   - Intensidade do blur (0px = sem blur, 20px+ = muito blur)
   
   border: 1px solid rgba(255, 255, 255, 0.18) !important;
   - Cor e opacidade da borda
   - Exemplo: rgba(255, 255, 255, 0.3) = borda mais visível
   
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2) !important;
   - Sombra do dropdown
   - Formato: offset-x offset-y blur-radius spread-radius color
*/

/* Exemplo 1: Dropdown mais opaco (menos transparente)
.dropdown .dropdown-menu {
  background: rgba(var(--card-bg-rgb), 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
*/

/* Exemplo 2: Dropdown mais transparente
.dropdown .dropdown-menu {
  background: rgba(var(--card-bg-rgb), 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
*/

/* Exemplo 3: Dropdown sem blur (fundo sólido)
.dropdown .dropdown-menu {
  background: rgba(var(--card-bg-rgb), 1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
*/

/* Exemplo 4: Dropdown com borda mais visível
.dropdown .dropdown-menu {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
*/

/* Exemplo 5: Dropdown com sombra mais forte
.dropdown .dropdown-menu {
  box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.4) !important;
}
*/

/* ============================================================================
   ⚠️ INFORMAÇÃO SOBRE DROPDOWNS
   ============================================================================ */

/*
   ✅ As regras de dropdown ITEMS estão CONSOLIDADAS em:
   
   Arquivo: templates/huge/src/scss/main.scss
   Seção: DROPDOWNS - SEÇÃO CONSOLIDADA (linha ~6481)
   
   Para modificar cores/comportamentos de dropdown ITEMS:
   1. Edite main.scss na seção consolidada
   2. Recompile: npx sass src/scss/app.scss:dist/css/app.css --style=expanded --no-source-map
   3. NÃO adicione regras de dropdown-items aqui
   
   Documentação completa: GUIA-EDICAO-CSS.md
*/

/* ============================================================================
   TESTES RÁPIDOS E CUSTOMIZAÇÕES
   ============================================================================ */

/*
   Use esta seção para testar mudanças rapidamente.
   Após validar, mova para main.scss e recompile.
   
   Exemplos de uso:
   
   .sidebar {
     background-color: #000000 !important;
   }
   
   .navbar-body {
     box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
   }
   
   .btn-primary {
     background: #FF0000 !important;
     border-color: #FF0000 !important;
   }
   
   .card {
     border-radius: 12px !important;
   }
*/

/* ============================================================================
   SUAS CUSTOMIZAÇÕES AQUI
   ============================================================================ */

/* Adicione suas customizações abaixo desta linha */
/* Lembre-se de usar !important para garantir prioridade */

/* 
   ⚠️ NOTA SOBRE ÍCONES INFORMATIVOS (.icon-info-color):
   
   As cores são aplicadas igualmente em todas as resoluções (desktop e mobile).
   Para alterar a cor, edite as regras abaixo.
*/

/* Ícones informativos no dropdown navbar - DESKTOP */
.navbar-body .dropdown-menu .icon-info-color,
.navbar-body .dropdown-menu .material-icons.icon-info-color,
.navbar-menu .dropdown-menu .icon-info-color,
.navbar-menu .dropdown-menu .material-icons.icon-info-color,
.navbar-nav .dropdown-menu .icon-info-color,
.navbar-nav .dropdown-menu .material-icons.icon-info-color {
  color: #575565 !important; /* Altere aqui para desktop */
}

/* Ícones informativos no dropdown navbar - DARK MODE DESKTOP */
[data-theme="dark"] .navbar-body .dropdown-menu .icon-info-color,
[data-theme="dark"] .navbar-body .dropdown-menu .material-icons.icon-info-color,
[data-theme="dark"] .navbar-menu .dropdown-menu .icon-info-color,
[data-theme="dark"] .navbar-menu .dropdown-menu .material-icons.icon-info-color,
[data-theme="dark"] .navbar-nav .dropdown-menu .icon-info-color,
[data-theme="dark"] .navbar-nav .dropdown-menu .material-icons.icon-info-color {
  color: #575565 !important; /* Altere aqui para dark mode desktop */
}