/* Importação de Fontes conforme Documentação  */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400&display=swap');

/* Variáveis de Tema */
:root {
  /* MODO ESCURO (Padrão) */
  --background: #0F172A;      /* Gunmetal Profundo */
  --surface: #1E293B;         /* Azul Noturno para Cards */
  --text-primary: #F8FAFC;    /* Branco Gelo */
  --text-secondary: #94A3B8;  /* Cinza Azulado */
  --primary: #00FFA3;         /* Verde Neon Tech */
  --border: #334155;          /* Borda sutil escura */
  
  /* Fontes */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* MODO CLARO (Ativado via classe ou atributo data-theme) */
[data-theme="light"] {
  --background: #F1F5F9;      /* Cinza Gelo Suave */
  --surface: #FFFFFF;         /* Branco Puro */
  --text-primary: #0F172A;    /* Gunmetal (Invertido) */
  --text-secondary: #64748B;  /* Cinza Médio */
  --primary: #00FFA3;         /* Verde Neon (Mantido) */
  --border: #E2E8F0;          /* Borda sutil clara */
}

/* Bloqueia seleção de texto no site todo */
* {
  -webkit-user-select: none; /* Chrome, Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge antigo */
  user-select: none;         /* Padrão */
}

/* Permite seleção em campos de formulário */
input,
textarea,
[contenteditable="true"],
.user-select-all,
.user-select-all * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Remove o highlight de seleção em toda a página */
::selection {
  background: transparent;
}

/* Reativa o highlight apenas em campos de formulário */
input::selection,
textarea::selection,
.user-select-all::selection,
.user-select-all *::selection {
  background: var(--primary);
}

body, html {
  /* Animação */
  opacity: 0;
  animation: fadeIn 0.4s ease-out forwards;
}

/* Animação */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reset Básico e Tipografia */
body {
  background-color: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Componentes de UI - Cards */
.card, .bento-item {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-primary);
}

/* Botões */
.btn-primary {
  background-color: var(--primary);
  border: none;
  color: #0F172A !important; /* Texto escuro obrigatório no botão verde */
  font-weight: 600;
  font-family: var(--font-heading);
  padding: 10px 24px;
  border-radius: 8px;
  transition: all 0.2s;
}

.btn-primary:hover {
  background-color: #00cc82; /* Leve escurecimento no hover */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 255, 163, 0.2);
}

/* Inputs Customizados */
.form-control {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px;
  border-radius: 8px;
}

.form-control:focus {
  background-color: var(--surface);
  border-color: var(--primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 163, 0.1);
}

/* Scrollbar Customizada (Fina) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background); 
}

::-webkit-scrollbar-thumb {
  background: var(--border); 
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary); 
}

/* Utilitários de Texto */
.text-muted {
  color: var(--text-secondary) !important;
}

.font-mono {
  font-family: var(--font-mono);
}

/* Estilização da Modal Dark */
.custom-modal {
  background-color: var(--surface); /* #1E293B */
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* Sombra profunda */
}

.custom-modal .modal-title {
  font-family: var(--font-heading);
}

/* Ajuste do botão de fechar para o modo escuro 
.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.5;
  transition: opacity 0.2s;
}

.btn-close-white:hover {
  opacity: 1;
}
*/

/* Quando o tema for light, removemos o filtro para o ícone voltar a ser escuro */
[data-theme="light"] .btn-close-white {
  filter: none; 
  opacity: 0.5;
}

[data-theme="light"] .btn-close-white:hover {
  opacity: 1;
  filter: none;
}

/* Rolagem interna da modal estilizada */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Utilitário para texto extra pequeno */
.x-small {
  font-size: 0.75rem;
}

.hover-primary:hover {
  color: var(--primary) !important; /* #00FFA3 */
  transition: color 0.2s;
}

/* Toast Notification Styles */

/* Container deve ficar acima de Modais (z-index do modal é 1055) */
#toast-container {
  z-index: 9999; 
  width: 90%;
  max-width: 400px;
  pointer-events: none; /* Permite clicar através do container vazio */
}

/* Reativa cliques nos toasts em si */
#toast-container .toast {
  pointer-events: auto;
  background: transparent; /* O fundo é dado pelo wrapper interno */
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Variações de Cores (Alinhadas ao Tema) */
.toast-success {
  background-color: var(--primary) !important; /* Verde Neon #00FFA3 */
  color: #0F172A !important; /* Texto Escuro para contraste */
}

.toast-danger {
  background-color: #ef4444 !important; /* Vermelho Tech */
  color: white !important;
}

.toast-warning {
  background-color: #f59e0b !important; /* Amber */
  color: #0F172A !important;
}

/* Animação de Entrada Customizada (Slide Down suave) */
.toast.show {
  animation: slideDownFade 0.3s ease forwards;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Override dos Estados Ativos do Botão Primário --- */

/* 1. Estado Clicado/Ativo (O seletor que você enviou + variações) */
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary.show,
.btn-primary:first-child:active,
:not(.btn-check) + .btn-primary:active {
  background-color: var(--primary) !important; /* Mantém o Verde */
  border-color: var(--primary) !important;
  color: #0F172A !important; /* Garante texto escuro para leitura */
  
  /* Opcional: Um leve escurecimento ou sombra interna para dar sensação de clique */
  filter: brightness(0.95); 
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
}

/* 2. Estado de Foco (O "Glow" ao redor do botão) */
/* Por padrão o Bootstrap coloca um glow azul. Vamos mudar para verde. */
.btn-primary:focus, 
.btn-primary.focus {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #0F172A !important;
  /* Cria um anel de foco verde translúcido */
  box-shadow: 0 0 0 0.25rem rgba(0, 255, 163, 0.4) !important; 
}

/* 3. Prevenir comportamento indesejado no hover quando ativo */
.btn-check:checked + .btn-primary:hover,
.btn-primary.active:hover,
.btn-primary.show:hover {
   background-color: var(--primary) !important;
   color: #0F172A !important;
   filter: brightness(0.9); /* Um pouco mais escuro no hover do ativo */
}

/* --- Customização do Placeholder (Cinza Claro) --- */

.form-control::placeholder, .search-input::placeholder {
  /* Use uma cor cinza claro. Sugestão: #CBD5E1 (Slate 300) ou #d1d5db */
  color: #CBD5E1 !important; 
  opacity: 1; /* Remove transparência padrão do navegador */
}

/* Se quiser diferenciar levemente no modo light (opcional) */
[data-theme="light"] .form-control::placeholder, .search-input::placeholder {
  color: #94A3B8 !important; /* Um pouco mais escuro no fundo branco para contraste */
}

/* --- Custom Accordion (Dark Mode Friendly) --- */

.custom-accordion .accordion-item {
  background-color: transparent;
  border: 1px solid rgba(148, 163, 184, 0.2); /* Borda sutil */
  border-radius: 8px !important;
  margin-bottom: 10px; /* Espaço entre os itens */
  overflow: hidden;
}

.custom-accordion .accordion-button {
  background-color: rgba(255, 255, 255, 0.03); /* Fundo levemente claro */
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: none !important; /* Remove o glow azul padrão */
  padding: 1rem;
}

/* Estado Expandido */
.custom-accordion .accordion-button:not(.collapsed) {
  background-color: rgba(0, 255, 163, 0.1); /* Fundo Verde Suave */
  color: var(--primary); /* Texto Verde */
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

/* Ícone da seta (Accordion arrow) */
.custom-accordion .accordion-button::after {
  filter: invert(1) grayscale(100%) brightness(200%); /* Deixa a seta branca */
  transition: transform 0.3s;
}

/* Quando expandido, pinta a seta de verde */
.custom-accordion .accordion-button:not(.collapsed)::after {
  filter: none; /* Volta a cor original (que vamos manipular via SVG se necessário, mas o filtro acima resolve para branco) */
  /* Para forçar verde na seta svg padrão é complexo, então geralmente deixamos branca ou usamos um background-image customizado. 
     Vamos deixar branca ou cinza claro para simplificar. */
  filter: sepia(100%) hue-rotate(90deg) saturate(500%); /* Tenta puxar para o verde */
}

.custom-accordion .accordion-body {
  background-color: transparent;
  /* color: var(--text-secondary); */
}

/* Outros ajustes */
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: unset;
}

.text-white {
  color: var(--text-primary) !important;
}

.text-primary {
  color: var(--text-primary) !important;
}

.text-emphasis {
  color: var(--primary) !important;
}

.text-contrast { color: var(--text-primary) !important; }
.bg-surface { background-color: var(--surface) !important; }
.bg-background { background-color: var(--background) !important; }

.page-loader {
  z-index: 9998;
}
.page-loader.bg-body {
  background-color: var(--background) !important;
}

.page-loader .spinner-border {
  color: var(--primary);
  height: 4rem;
  width: 4rem;
}

.bg-contrast {
  background-color: var(--background) !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

/* Menu dropdown */
.dropdown-item.active, .dropdown-item:active {
  color: var(--text-primary);
  text-decoration: none;
  background-color: var(--background);
}

.text-neon {
  color: #00FFA3;
}

.bg-neon {
  background-color: #00FFA3;
}