/* ============================================================
   brval-theme.css - TEMA GENIUS DARK (Global)
   
   Este arquivo define todo o tema visual da aplicação:
   - Cores e paleta de cores
   - Estilos base e reset
   - Componentes reutilizáveis (botões, cards)
   - Animações
   ============================================================ */

/* ========== VARIÁVEIS CSS (Custom Properties) ========== */
:root {
  /* --- PALETA DE CORES: Dark Future --- */

  /* Cores de fundo */
  --brval-bg-body: #0f172a; /* Fundo principal escuro */
  --brval-bg-card: rgba(
    30,
    41,
    59,
    0.7
  ); /* Fundo dos cards com efeito de vidro */
  --brval-bg-card-hover: rgba(
    51,
    65,
    85,
    0.8
  ); /* Fundo dos cards ao passar o mouse */

  /* Cores de destaque (Accents) */
  --brval-primary: #f59e0b; /* Cor primária - Âmbar/Laranja (Neon) */
  --brval-primary-glow: rgba(245, 158, 11, 0.4); /* Brilho da cor primária */
  --brval-teal: #10b981; /* Verde - Sucesso/Seguro */
  --brval-red: #ef4444; /* Vermelho - Perigo/Alarme */
  --brval-blue: #3b82f6; /* Azul - Informação */

  /* Cores de texto */
  --brval-text-main: #f8fafc; /* Texto principal (quase branco) */
  --brval-text-muted: #94a3b8; /* Texto esmaecido (cinza claro) */

  /* Efeitos de vidro (Glassmorphism) */
  --glass-border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil para efeito glass */
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Sombra para profundidade */

  /* Tipografia */
  --font-main: "Inter", sans-serif; /* Fonte principal */

  /* Raios de borda (Border Radius) */
  --radius-sm: 6px; /* Pequeno */
  --radius-md: 8px; /* Médio */
  --radius-lg: 16px; /* Grande */
}

/* ========== RESET GLOBAL E ESTILOS BASE ========== */

/* Aplica box-sizing para todos os elementos */
* {
  box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
}

/* Estilos do elemento body (corpo da página) */
body {
  margin: 0; /* Remove margem padrão */
  font-family: var(--font-main); /* Aplica a fonte principal */
  /* Fundo com gradiente radial do roxo escuro para azul escuro */
  background: radial-gradient(circle at top right, #1e1b4b, #0f172a);
  color: var(--brval-text-main); /* Cor do texto padrão */
  height: 100vh; /* Altura total da viewport */
  overflow: hidden; /* Esconde overflow (os dashboards gerenciam seu próprio scroll) */
}

/* ========== FUNDO ANIMADO ========== */

/* Cria um pseudo-elemento before para o fundo animado */
body::before {
  content: ""; /* Conteúdo vazio (mas necessário para exibir o pseudo-elemento) */
  position: absolute; /* Posicionamento absoluto */
  top: -50%; /* Posiciona acima da tela */
  left: -50%; /* Posiciona à esquerda da tela */
  width: 200%; /* Largura dobrada */
  height: 200%; /* Altura dobrada */
  /* Gradiente radial com a cor primária muito transparente */
  background: radial-gradient(
    circle at center,
    rgba(245, 158, 11, 0.03) 0%,
    transparent 50%
  );
  animation: pulse-bg 15s infinite alternate; /* Animação de pulso infinita */
  pointer-events: none; /* Não captura eventos do mouse */
  z-index: -1; /* Fica atrás de todo o conteúdo */
}

/* Define a animação de pulso do fundo */
@keyframes pulse-bg {
  0% {
    transform: scale(1); /* Escala normal */
    opacity: 0.5; /* Semi-transparente */
  }

  100% {
    transform: scale(1.2); /* Aumenta 20% */
    opacity: 1; /* Totalmente opaco */
  }
}

/* ========== CLASSES UTILITÁRIAS ========== */

/* Classe para aplicar cor primária ao texto */
.text-primary {
  color: var(--brval-primary) !important;
}

/* Classe para aplicar cor de sucesso ao texto */
.text-success {
  color: var(--brval-teal) !important;
}

/* Classe para aplicar cor de perigo ao texto */
.text-danger {
  color: var(--brval-red) !important;
}

/* Classe para aplicar cor de texto esmaecido */
.text-muted {
  color: var(--brval-text-muted) !important;
}

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

/* Estilo base para todos os botões BRVAL */
.btn-brval {
  padding: 10px 20px; /* Espaçamento interno */
  border-radius: var(--radius-md); /* Cantos arredondados médios */
  font-weight: 600; /* Texto semi-bold */
  cursor: pointer; /* Cursor de mão ao passar o mouse */
  transition: all 0.3s ease; /* Transição suave para todas as propriedades */
  border: none; /* Remove borda padrão */
  display: inline-flex; /* Flexbox inline para alinhar ícone e texto */
  align-items: center; /* Centraliza verticalmente */
  gap: 8px; /* Espaço entre ícone e texto */
  text-decoration: none; /* Remove sublinhado (para links estilizados como botão) */
  font-size: 0.9rem; /* Tamanho da fonte */
}

/* Botão com estilo primário (laranja) */
.btn-brval-primary {
  background: var(--brval-primary); /* Fundo laranja */
  color: #fff; /* Texto branco */
  box-shadow: 0 0 15px var(--brval-primary-glow); /* Brilho laranja ao redor */
}

/* Efeito hover do botão primário */
.btn-brval-primary:hover {
  background: #d97706; /* Laranja mais escuro */
  transform: translateY(-2px); /* Levanta o botão 2px */
}

/* Botão com contorno (outline) */
.btn-brval-outline {
  background: transparent; /* Fundo transparente */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borda branca semi-transparente */
  color: var(--brval-text-main); /* Texto claro */
}

/* Efeito hover do botão outline */
.btn-brval-outline:hover {
  background: rgba(255, 255, 255, 0.1); /* Fundo levemente branco */
  border-color: #fff; /* Borda totalmente branca */
}

/* Botão com contorno de perigo (vermelho) */
.btn-brval-outline-danger {
  background: transparent; /* Fundo transparente */
  border: 1px solid var(--brval-red); /* Borda vermelha */
  color: var(--brval-red); /* Texto vermelho */
}

/* Efeito hover do botão outline danger */
.btn-brval-outline-danger:hover {
  background: var(--brval-red); /* Fundo vermelho */
  color: #fff; /* Texto branco */
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); /* Brilho vermelho */
}

/* ========== CARDS COM EFEITO DE VIDRO (Glassmorphism) ========== */

/* Classe para criar cards com efeito de vidro embaçado */
.glass-card {
  background: var(--brval-bg-card); /* Fundo semi-transparente */
  backdrop-filter: blur(16px); /* Desfoque do fundo (padrão) */
  -webkit-backdrop-filter: blur(16px); /* Desfoque do fundo (Safari) */
  border: var(--glass-border); /* Borda sutil */
  box-shadow: var(--glass-shadow); /* Sombra para profundidade */
  border-radius: var(--radius-lg); /* Cantos bem arredondados */
}

/* ========== SIDEBAR COMPARTILHADA ========== */

/* Container da marca (logo + nome) na sidebar */
.sidebar-brand {
  display: flex; /* Usa flexbox */
  align-items: center; /* Centraliza verticalmente */
  gap: 12px; /* Espaço entre logo e texto */
  margin-bottom: 40px; /* Espaço abaixo da marca */
  padding: 0 10px; /* Padding lateral */
}

/* Logo na sidebar */
.sidebar-brand img {
  height: 32px; /* Altura fixa */
  background: #fff; /* Fundo branco */
  padding: 4px; /* Espaçamento interno */
  border-radius: 6px; /* Cantos levemente arredondados */
}

/* Texto da marca (nome da aplicação) */
.sidebar-brand span {
  font-weight: 800; /* Extra bold */
  font-size: 1.2rem; /* Tamanho grande */
  letter-spacing: 1px; /* Espaçamento entre letras */
  /* Gradiente de branco para cinza */
  background: linear-gradient(to right, #fff, #94a3b8);
  -webkit-background-clip: text; /* Aplica o gradiente ao texto */
  -webkit-text-fill-color: transparent; /* Torna o texto transparente para mostrar o gradiente */
}