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