/* ================================================================
   VARIÁVEIS GLOBAIS (O CORAÇÃO DA IDENTIDADE VISUAL)
================================================================ 
*/
:root {
  /* Paleta Vibrante */
  --primary: #7000ff;
  --primary-hover: #a259ff;
  --accent: #00f2c3;
  --accent-hover: #09a385;
  --danger: #ff0055;
  --danger-hover: #9c1944;
  --warning: #ffb300;
  --warning-hover: #ffea00;
  --info: #1d8cf8;
  --info-hover: #0963bc;
  --success: #198754;
  --success-hover: #146c43;

  /* Tema Claro (Padrão) */
  --bg-system: #f8f9fe;
  --bg-card: #ffffff;
  --sidebar-bg: #ffffff; /* Sidebar CLARA no modo claro */
  --sidebar-text: #2d3436; /* Texto escuro para sidebar clara */
  --sidebar-link-muted: rgba(0, 0, 0, 0.5);
  --text-main: #2d3436;
  --text-muted: #636e72;
  --border-color: rgba(0, 0, 0, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  /* Transições */
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   TEMA ESCURO (DARK MODE)
================================================================ 
*/
[data-bs-theme="dark"] {
  --bg-system: #0b0e14;
  --bg-card: #161b22;
  --sidebar-bg: #110c21; /* Sidebar ESCURA no modo escuro */
  --sidebar-text: #e6edf3; /* Texto claro para sidebar escura */
  --sidebar-link-muted: rgba(255, 255, 255, 0.5);
  --text-main: #e6edf3;
  --text-muted: #8b949e;
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* ================================================================
   ESTILOS GERAIS
================================================================ 
*/
body {
  background-color: var(--bg-system);
  color: var(--text-main);
  font-family: "Poppins", sans-serif;
  transition: var(--transition);
  overflow-x: hidden;
}

/* ================================================================
   SIDEBAR REPROJETADA (RESPONSIVA)
================================================================ 
*/
.sidebar {
  width: 280px;
  height: 100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--border-color); /* Linha sutil para separar no modo claro */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  transition: var(--transition);
  padding: 1.5rem;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);

  /* Habilita a rolagem vertical */
  overflow-y: auto;
  /* Esconde a rolagem horizontal caso algo escape */
  overflow-x: hidden;
}

/* Estilização da Barra de Rolagem (Webkit - Chrome, Edge, Safari) */
.sidebar::-webkit-scrollbar {
  width: 5px; /* Bem fininha para ser discreta */
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05); /* Fundo quase invisível */
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--primary); /* Cor roxa vibrante no scroll */
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--accent); /* Muda para o verde neon no hover */
}

/* Para Firefox */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) rgba(255, 255, 255, 0.05);
}

/* Garante que os títulos de seção (como "Configurações") sejam visíveis */
.sidebar .text-muted {
  /* Branco suave para não brilhar demais */
  color: var(--sidebar-link-muted) !important;
  font-weight: 600;
  display: block;
  margin-top: 1.5rem;
  transition: var(--transition);
}

/* Opcional: Efeito ao passar o mouse para dar feedback visual */
.sidebar .text-muted:hover {
  color: var(--sidebar-text) !important;
}

/* Estado Fechado (Mobile) */
@media (max-width: 992px) {
  .sidebar {
    left: -280px;
  }
  .sidebar.active {
    left: 0;
  }
  .main-content {
    margin-left: 0 !important;
  }
}

/* ================================================================
   BOTÕES VIBRANTES E MODERNOS
================================================================ */

.btn-primary {
  background: linear-gradient(45deg, var(--primary), var(--primary-hover));
  border: none;
  color: #fff !important;
  border-radius: 12px;
  /*box-shadow: 0 4px 15px rgba(112, 0, 255, 0.3);*/
  box-shadow: 0 4px 15px rgb(from var(--primary) r g b / 0.3);
  transition: var(--transition);
}

.btn-primary:hover {
  transform: translateY(-3px);
  /*box-shadow: 0 8px 25px rgba(112, 0, 255, 0.5);*/
  box-shadow: 0 8px 25px rgb(from var(--primary) r g b / 0.5);
  filter: brightness(1.1);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-success {
  border: none;
  color: #fff !important;
  border-radius: 12px;
  /*box-shadow: 0 4px 15px rgba(25, 135, 84, 0.3);*/
  box-shadow: 0 4px 15px rgb(from var(--success) r g b / 0.3);
  transition: var(--transition);
}

.btn-success:hover {
  transform: translateY(-3px);
  /*box-shadow: 0 8px 25px rgba(25, 135, 84, 0.5);*/
  box-shadow: 0 8px 25px rgb(from var(--success) r g b / 0.5);
  filter: brightness(1.1);
}

.btn-success:active {
  transform: translateY(0);
}

.btn-info {
  border: none;
  color: #fff !important;
  border-radius: 12px;
  /*box-shadow: 0 4px 15px rgba(29, 140, 248, 0.3);*/
  box-shadow: 0 8px 25px rgb(from var(--info) r g b / 0.3);
  transition: var(--transition);
}

.btn-info:hover {
  transform: translateY(-3px);
  /*box-shadow: 0 8px 25px rgba(29, 140, 248, 0.5);*/
  box-shadow: 0 8px 25px rgb(from var(--info) r g b / 0.5);
  filter: brightness(1.1);
}

.btn-info:active {
  transform: translateY(0);
}

.btn-warning {
  border: none;
  color: #000;
  border-radius: 12px;
  /*box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);*/
  box-shadow: 0 4px 15px rgb(from var(--warning) r g b / 0.3);
  transition: var(--transition);
}

.btn-warning:hover {
  transform: translateY(-3px);
  /*box-shadow: 0 8px 25px rgba(255, 193, 7, 0.5);*/
  box-shadow: 0 8px 25px rgb(from var(--warning) r g b / 0.5);
  filter: brightness(1.1);
}

.btn-warning:active {
  transform: translateY(0);
}

.btn-danger {
  border: none;
  color: #fff !important;
  border-radius: 12px;
  /*box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);*/
  box-shadow: 0 4px 15px rgb(from var(--danger) r g b / 0.3);
  transition: var(--transition);
}

.btn-danger:hover {
  transform: translateY(-3px);
  /*box-shadow: 0 8px 25px rgba(220, 53, 69, 0.5);*/
  box-shadow: 0 8px 25px rgb(from var(--danger) r g b / 0.5);
  filter: brightness(1.1);
}

.btn-danger:active {
  transform: translateY(0);
}

/* Botão de contorno moderno para ações secundárias */
.btn-outline-vibrant {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
  font-weight: 600;
  padding: 8px 22px;
  border-radius: 12px;
  transition: var(--transition);
}

.btn-outline-vibrant:hover {
  background: var(--primary);
  color: #fff;
}

/* Ajuste para Telas Pequenas (Mobile) */
@media (max-width: 576px) {
  .btn-vibrant-primary,
  .btn-vibrant-warning,
  .btn-vibrant-danger {
    padding: 8px 16px; /* Reduz o preenchimento */
    font-size: 14px; /* Diminui levemente a fonte */
    border-radius: 10px; /* Arredondamento um pouco menor */
    width: 50%; /* Faz o botão ocupar a largura de 50% no mobile para não estourar */
    white-space: normal; /* Permite que o texto quebre se for muito grande */
    text-align: center;
  }

  /* Ajuste para ícones dentro do botão no mobile */
  .btn-vibrant-primary,
  .btn-vibrant-warning,
  .btn-vibrant-danger i {
    font-size: 1.1rem;
  }
}

/* ================================================================
   CUSTOMIZAÇÃO DE BOTÕES SECUNDÁRIOS (Bootstrap Override)
================================================================ */

.btn-outline-secondary {
  border: 2px solid var(--border-color); /* Usa a borda sutil do nosso tema */
  color: var(--text-muted); /* Texto cinza elegante */
  border-radius: 12px; /* Mesma curvatura dos cards */
  font-weight: 500;
  transition: var(--transition);
  background: transparent;
}

.btn-outline-secondary:hover {
  background-color: var(--border-color); /* Fundo leve ao passar o mouse */
  border-color: var(--text-muted);
  color: var(--text-main);
  transform: translateY(-2px); /* Pequeno efeito de subida */
}

/* Ajuste específico para quando o botão estiver no modo escuro */
[data-bs-theme="dark"] .btn-outline-secondary {
  border-color: rgba(255, 255, 255, 0.1);
  color: #8b949e;
}

/* Conteúdo Principal */
.main-content {
  margin-left: 280px;
  padding: 2rem;
  transition: var(--transition);
  min-height: 100vh;
}

/* Links do Menu */
.nav-link {
  color: var(--sidebar-link-muted); /* Cor adaptativa */
  padding: 12px 20px;
  border-radius: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  font-weight: 500;
  transition: var(--transition);
}

.nav-link i {
  font-size: 1.2rem;
  margin-right: 12px;
}

.nav-link:hover,
.nav-link.active {
  background: linear-gradient(45deg, var(--primary), #a259ff);
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(112, 0, 255, 0.3);
}

/* Botão Toggle (Hambúrguer) */
.toggle-btn {
  display: none;
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  margin-right: 15px;
}

@media (max-width: 992px) {
  .toggle-btn {
    display: block;
  }
}

/* ================================================================
   ANIMAÇÕES DE ENTRADA
================================================================ 
*/
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-up {
  animation: slideUp 0.6s ease-out forwards;
}

/* ================================================================
   REFINAMENTO DE CARDS E ELEMENTOS INTERNOS
================================================================ */

/* Ajuste no Container de Cards para não ficarem gigantes em telas largas */
.row-cols-md-3 > .col {
  max-width: 400px; /* Evita que o card estique demais */
}

/* Estado Natural do Card */
.card-modern {
  border-radius: 20px;
  transition: all 0.3s ease-in-out; /* Suaviza a subida e a sombra */
  border: 1px solid var(--border-color);
  background: var(--bg-card); /* Use sua variável de fundo de card */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra padrão leve */
  backdrop-filter: blur(10px);
}

/* Efeito ao passar o Mouse (Elevação) */
.card-modern:hover {
  transform: translateY(-8px); /* Eleva o card para cima */
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.6),
    0 0 15px rgb(from var(--primary) r g b / 0.811); /* Sombra maior e mais escura */
  border: 1px solid var(--primary); /* Borda mais grossa */
  border-color: var(--primary); /* Opcional: destaca a borda com sua cor neon */
}

/* Avatar Circular Perfeito */
.avatar-circle {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary), #a259ff);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0; /* Impede o avatar de amassar */
  box-shadow: 0 4px 10px rgba(112, 0, 255, 0.2);
}

/* Cores Vibrantes para Badges (Substituindo o padrão do Bootstrap) */
.badge-vibrant-info {
  background-color: rgba(29, 140, 248, 0.12) !important;
  color: var(--info) !important;
  border: 1px solid rgba(29, 140, 248, 0.2);
}

.badge-vibrant-success {
  background-color: rgba(0, 242, 195, 0.12) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(0, 242, 195, 0.2);
}

.badge-vibrant-danger {
  background-color: rgba(255, 0, 85, 0.12) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(255, 0, 85, 0.2);
}

/* Ajuste de Espaçamento Interno do Card */
.card-modern .card-body-custom {
  padding: 1.5rem;
}

.card-modern .card-footer-custom {
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 20px 20px;
}

[data-bs-theme="dark"] .card-footer-custom {
  background: rgba(255, 255, 255, 0.02);
}

/* Customização Select2 para Tema Escuro */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: var(--primary);
  border: none;
  color: #fff;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
  background-color: var(--bg-system);
  color: white;
}

/* Cor do texto nos itens selecionados */
[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-results__option {
  color: var(--text-muted);
}

[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-results__option--highlighted {
  background-color: var(--primary);
  color: white;
}

/* Ajuste para o item selecionado no Select2 combinar com o tema IBG */
.select2-container--bootstrap-5 .select2-selection--single {
  height: calc(3rem + 2px) !important; /* Mesma altura dos seus outros inputs */
  padding-top: 0.8rem !important;
  border-radius: 12px !important;
}

.select2-container--bootstrap-5
  .select2-dropdown
  .select2-results__option--highlighted {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

/* ================================================================
   CORREÇÃO SELECT2 - MODO ESCURO (VISIBILIDADE TOTAL)
================================================================ */

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

/* Cor do texto selecionado no campo */
[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--text-main) !important;
}

/* Cor do placeholder (texto de instrução) */
[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--text-muted) !important;
}

/* Cor da seta (dropdown arrow) */
[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: var(--text-muted) transparent transparent transparent !important;
}

/* Dropdown (Lista de opções) */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Itens da lista */
[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-results__option {
  color: var(--text-main) !important;
}

/* Item focado/selecionado na lista (Vibrante) */
[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-results__option--highlighted {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

/* Campo de busca dentro do Select2 */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
  background-color: var(--bg-system) !important;
  color: white !important;
  border-color: var(--border-color) !important;
}

[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-selection--single
  .select2-selection__clear {
  color: var(--text-muted) !important;
}

[data-bs-theme="dark"]
  .select2-container--bootstrap-5
  .select2-selection--single
  .select2-selection__clear:hover {
  color: var(--danger) !important;
}

/* Garante que a barra de navegação fique acima do conteúdo principal */
.main-content nav {
  position: relative;
  z-index: 990; /* Abaixo da sidebar (1000), mas acima dos cards */
}

/* Força o dropdown a ficar no topo de tudo */
.dropdown-menu {
  z-index: 1050 !important;
}

/* Evita que o container do avatar esconda o menu se houver overflow */
.dropdown {
  position: relative;
}

/* Estilização para o menu não "colar" na borda */
.dropdown-menu-end {
  margin-top: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* ESTILOS ADICIONAIS PERSONALIZADOS */

.bg-black-25 {
  background: rgba(182, 227, 242, 0.25);
}

.module-box:hover {
  border-color: var(--primary) !important;
  background: rgba(112, 0, 255, 0.05);
}

.check-membro:checked + .form-check-label span {
  color: var(--primary) !important;
}
.check-membro {
  cursor: pointer;
  width: 1.2rem;
  height: 1.2rem;
}

/* Classe que aplica o efeito de desfoque */
.money-blurred {
  filter: blur(8px) !important;
  user-select: none !important;
  pointer-events: none !important;
  transition: filter 0.3s ease;
}

/* Estilo do botão de visibilidade no topo */
.btn-privacy {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 10px;
  transition: all 0.2s;
}

.btn-privacy:hover {
  background: var(--primary-color);
  color: white;
}

/* Quando a privacidade está ativa no nível da página, embaça todos os campos marcados */
html.privacy-active .h-money {
  filter: blur(10px) !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* Transição suave para quando o usuário clicar no "olho" */
.h-money {
  transition: filter 0.2s ease-in-out;
}