:root {
	--apc-primary: #0b5ed7; /* Professional blue */
	--apc-primary-dark: #094db3;
	--apc-success: #198754;
	--apc-bg: #f7f9fb;
}

[data-theme="dark"] {
	--apc-bg: #0b1220;
}

html, body { height: 100%; }
body {
	background: radial-gradient(1200px 800px at 80% -10%, #eaf2ff 0%, transparent 60%),
						radial-gradient(800px 600px at -10% 20%, #eaf7f1 0%, transparent 60%),
						var(--apc-bg);
}
[data-theme="dark"] body,
[data-theme="dark"] {
	color: #e5e7eb;
}
[data-theme="dark"] body {
	background: radial-gradient(1200px 800px at 80% -10%, rgba(59,130,246,.12) 0%, transparent 60%),
					radial-gradient(800px 600px at -10% 20%, rgba(34,197,94,.10) 0%, transparent 60%),
					var(--apc-bg);
}
.navbar { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.navbar.bg-primary { background: linear-gradient(135deg, var(--apc-primary) 0%, var(--apc-primary-dark) 100%) !important; }
.navbar .nav-link { padding: .5rem .75rem; border-radius: .5rem; }
.navbar .nav-link.active { background-color: rgba(255,255,255,.18); color: #fff !important; }
.dropdown-menu .dropdown-item.active { background-color: var(--apc-primary); color: #fff; }
.navbar-brand { font-weight: 700; letter-spacing: .2px; }
/* Navbar brand logo (mais discreta) */
.navbar-brand .brand-logo {
	max-height: 30px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: 4px;
	background: transparent;
	padding: 0;
	border: 0;
	opacity: .9;
	transition: opacity .2s ease;
}

/* Truncar texto longo da marca no navbar de forma responsiva */
.navbar-brand .brand-text {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55vw;
}
@media (min-width: 576px) {
	.navbar-brand .brand-text { max-width: 60vw; }
}
@media (min-width: 768px) {
	.navbar-brand .brand-text { max-width: 420px; }
}
@media (max-width: 360px) {
	.navbar-brand .brand-text { max-width: 50vw; font-size: .95rem; }
}
.navbar-brand .brand-logo:hover { opacity: 1; }
@media (min-resolution: 2dppx) {
	.navbar-brand .brand-logo { image-rendering: -webkit-optimize-contrast; }
}
@media (max-width: 576px) {
	.navbar-brand .brand-logo { height: 27px; }
}
@media (max-width: 576px) {
	.navbar .btn-group .btn { padding: .25rem .4rem !important; }
}
[data-theme="dark"] .btn.active,
.btn.btn-outline-light.active { background-color: rgba(255,255,255,.2); color: #fff; }
[data-theme="dark"] .btn.btn-outline-light.active { border-color: rgba(255,255,255,.5); }
[data-theme="dark"] .navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.85); }
[data-theme="dark"] .navbar-dark .navbar-nav .nav-link:hover { color: #fff; }

.card { border: 0; box-shadow: 0 4px 14px rgba(0,0,0,.06); border-radius: 12px; }
.card-header { background: #fff; border-bottom: 1px solid rgba(0,0,0,.05); font-weight: 600; }
[data-theme="dark"] .card { background-color: #0f172a; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
[data-theme="dark"] .card-header { background-color: #0b1220; border-color: rgba(255,255,255,.06); color: #e5e7eb; }

.table { --bs-table-striped-bg: rgba(13,110,253,.03); }
[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,.04); --bs-table-hover-bg: rgba(255,255,255,.06); color: #e5e7eb; }
.table td, .table th { vertical-align: middle; }
.table-hover tbody tr:hover { background: rgba(13,110,253,.06); }
[data-theme="dark"] thead th { color: #f3f4f6; border-bottom-color: rgba(255,255,255,.08); }

.btn-primary { box-shadow: 0 4px 10px rgba(13,110,253,.2); background: linear-gradient(180deg, var(--apc-primary) 0%, var(--apc-primary-dark) 100%); border-color: var(--apc-primary-dark); }
.btn-outline-primary { color: var(--apc-primary); border-color: var(--apc-primary); }
.btn-outline-primary:hover { background-color: var(--apc-primary); border-color: var(--apc-primary); color: #fff; }
.btn-outline-primary { border-width: 2px; }
[data-theme="dark"] .btn-outline-secondary { color: #cbd5e1; border-color: #475569; }
[data-theme="dark"] .btn-outline-secondary:hover { background-color: #334155; color: #e5e7eb; }
[data-theme="dark"] .btn-outline-light { color: #e5e7eb; border-color: rgba(255,255,255,.35); }
[data-theme="dark"] .btn-outline-light:hover { background-color: rgba(255,255,255,.15); color: #fff; }

/* Forms */
.form-control, .form-select { border-radius: 10px; }
.form-text { color: #6c757d; }
[data-theme="dark"] .text-muted, [data-theme="dark"] .form-text { color: #94a3b8 !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background-color: #0b1220; border-color: #1f2937; color: #e5e7eb; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { border-color: #3758f9; box-shadow: 0 0 0 .2rem rgba(59,130,246,.25); }
[data-theme="dark"] .input-group-text { background-color: #0b1220; border-color: #1f2937; color: #cbd5e1; }
[data-theme="dark"] .dropdown-menu { background-color: #0b1220; color: #e5e7eb; border-color: #1f2937; }
[data-theme="dark"] .dropdown-item { color: #e5e7eb; }
[data-theme="dark"] .dropdown-item:hover { background-color: rgba(255,255,255,.06); }

/* Charts */
canvas { max-width: 100%; height: auto !important; }
/* Containers responsivos para Chart.js (dashboard) */
.chart-container { position: relative; width: 100%; height: 240px; }
@media (min-width: 768px) { .chart-container { height: 260px; } }
@media (min-width: 1200px) { .chart-container { height: 300px; } }
.chart-container-md { position: relative; width: 100%; height: 180px; }
@media (min-width: 768px) { .chart-container-md { height: 200px; } }
@media (min-width: 1200px) { .chart-container-md { height: 220px; } }
.chart-container-sm { position: relative; width: 100%; height: 140px; }
@media (min-width: 768px) { .chart-container-sm { height: 150px; } }
@media (min-width: 1200px) { .chart-container-sm { height: 160px; } }
.chart-container-xs { position: relative; width: 100%; height: 110px; }
@media (min-width: 768px) { .chart-container-xs { height: 120px; } }
@media (min-width: 1200px) { .chart-container-xs { height: 130px; } }
/* Container quadrado fixo 280x280 */
.chart-container-280 { position: relative; width: 280px; height: 280px; margin: 0 auto; }
/* Limita largura e centraliza gráficos gerais (melhor composição visual em cards largos) */
.chart-wrap-narrow { max-width: 320px; margin: 0 auto; }
@media (min-width: 992px) { .chart-wrap-narrow { max-width: 360px; } }
/* Força o canvas a respeitar o tamanho do container, mesmo com width/height inline do Chart.js */
.chart-container canvas,
.chart-container-md canvas,
.chart-container-sm canvas,
.chart-container-xs canvas,
.chart-container-280 canvas { width: 100% !important; height: 100% !important; display: block; }

/* Utilities */
.page-header { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.page-header h3 { margin: 0; }

/* Dashboard: seletor de ano mais legível no mobile */
.year-select { min-width: 120px; }
@media (max-width: 576px) {
	/* Em telas pequenas, ocupar linha inteira e aumentar legibilidade */
	.year-select { width: 100%; font-size: 1rem; padding: .375rem .5rem; }
}

/* Prestação de Contas: barra de ações fixa e ajustes responsivos */
.pc-sticky-actions { 
	border-top: 1px solid rgba(0,0,0,.06);
	border-bottom: 1px solid rgba(0,0,0,.06);
	z-index: 1020; /* acima do conteúdo */
}
[data-theme="dark"] .pc-sticky-actions { border-color: rgba(255,255,255,.08); }
/* Evita sobreposição com navbar fixa */
.pc-sticky-actions.sticky-top { top: 56px; }
[data-theme="dark"] .pc-sticky-actions { border-color: rgba(255,255,255,.08); }

/* Mobile: reduzir espaçamento vertical e dar mais respiro ao conteúdo */
@media (max-width: 576px) {
	.pc-sticky-actions { padding-top: .25rem !important; padding-bottom: .25rem !important; }
	.pc-sticky-actions .btn-group { gap: .5rem !important; }
	/* Evitar overflow horizontal por textos longos nos botões */
	.pc-sticky-actions .btn { white-space: nowrap; }
}

/* Select de Fonte: garantir boa leitura no desktop */
@media (min-width: 768px) {
	/* Em md, caber em ~col-md-4 mantendo legibilidade e evitando overflow de gutter */
	.pc-source-select { min-width: 240px; width: 100%; }
}
@media (min-width: 992px) {
	/* Em lg, alinhar com ~33% da largura do container (col-md-4 ≈ 320px) descontando padding da coluna */
	.pc-source-select { min-width: 300px; width: 100%; }
}
@media (min-width: 1200px) {
	/* Em xl, ampliar um pouco sem pressionar a coluna vizinha do botão */
	.pc-source-select { min-width: 360px; width: 100%; }
}

/* Tabela de pagamentos mais compacta em telas pequenas */
@media (max-width: 576px) {
	/* Empilhar tabela como cartões para visibilidade total no mobile */
	.pc-payments thead { display: none; }
	.pc-payments, .pc-payments table, .pc-payments tbody, .pc-payments tr, .pc-payments td, .pc-payments th { display: block; width: 100%; }
	.pc-payments tr { border: 1px solid rgba(0,0,0,.08); border-radius: 8px; margin-bottom: .75rem; overflow: hidden; background: var(--bs-body-bg, #fff); }
	.pc-payments tbody td { display: grid; grid-template-columns: 120px 1fr; gap: .5rem; align-items: center; padding: .5rem .75rem; font-size: .925rem; }
	.pc-payments tbody td::before { content: attr(data-label); font-weight: 600; color: #6c757d; }
	.pc-payments tbody td .form-control-sm { padding: .375rem .5rem; font-size: .95rem; }
	.pc-payments tbody td input.form-control-sm { min-width: 0; }
	.pc-payments tbody td[data-label="Valor"] { justify-content: space-between; }
	.pc-payments tfoot { display: block; }
	.pc-payments tfoot tr { display: flex; justify-content: space-between; padding: .5rem .75rem; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; }
	.pc-payments tfoot th { display: inline; padding: 0; font-size: 1rem; }

	/* Estado recolhido: mostrar apenas campos-chave */
	.pc-payments tr.is-collapsed td { display: none; }
	.pc-payments tr.is-collapsed td[data-label="#"],
	.pc-payments tr.is-collapsed td[data-label="🏷 Tipo"],
	.pc-payments tr.is-collapsed td[data-label="👤 Fav."],
	.pc-payments tr.is-collapsed td[data-label="💰 Valor"] { display: grid; }
	/* Botão de toggle: animação do ícone */
	.pc-payments .js-row-toggle .bi { transition: transform .2s ease; }
	.pc-payments .js-row-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
}

/* Formulário: melhorar usabilidade em mobile */
@media (max-width: 576px) {
	.form-label { font-size: .95rem; }
	.input-group-text { padding: .25rem .5rem; font-size: .875rem; }
	.form-control, .form-select { padding: .375rem .5rem; font-size: .95rem; }
}

@media (max-width: 576px) {
	.btn { width: 100%; }
	.page-header { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* Auth */
.auth-card { max-width: 520px; margin: 0 auto; position: relative; overflow: hidden; }
.auth-brand { display: flex; flex-direction: column; align-items: center; }
.auth-brand img.auth-logo { width: 160px; height: 160px; max-width: 160px; max-height: 160px; display: block; object-fit: contain; border-radius: 6px; background: transparent; padding: 0; border: 0; opacity: .95; }
.auth-brand .brand-name { font-weight: 700; letter-spacing: .2px; text-align: center; width: 100%; white-space: nowrap; }
[data-theme="dark"] .auth-brand .brand-name { color: #e5e7eb; }

/* Layout dedicado para a página de login */
.auth-page {
	/* Fundo suave e profissional, adapta ao tema */
	background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}
[data-theme="dark"] .auth-page {
	background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}
.auth-page .container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.auth-card {
	border-radius: 12px;
}
@media (min-width: 992px) {
	/* Em desktop, reduzir ainda mais o recuo vertical e permitir card um pouco mais largo */
	.auth-page .container { padding-top: .5rem; padding-bottom: .5rem; }
	.auth-card { max-width: 560px; }
}
[data-theme="dark"] .auth-card .card-header {
	background-color: rgba(255,255,255,.04);
}
.auth-card .card-header {
	font-weight: 600;
}