/* Tema visual do Financeiro Eletropontes.
   Sobrepõe o Filament sem build: menu lateral azul-marinho, azul institucional,
   Manrope, cantos e sombras suaves. Modo escuro continua o nativo (.dark). */

:root {
	--cv-navy: #07101F;
	--cv-navy-2: #0A1628;
	--cv-navy-3: #0D1B30;
	--cv-navy-4: #10223C;
	--cv-blue-dark: #1559C9;
	--cv-blue: #176FE5;
	--cv-blue-accent: #2684FF;
	--cv-blue-light: #5AA2FF;
	--cv-blue-soft: #D9EAFF;
	--cv-blue-bg: #EEF6FF;
	--cv-bg: #F4F8FD;
	--cv-surface: #FFFFFF;
	--cv-border: #E1EAF4;
	--cv-text: #10213A;
	--cv-text-2: #56687E; /* escurecido em relação ao Figma (#6E7F95) para passar de 4,5:1 em texto pequeno */
	--cv-shadow: 0 4px 12px rgba(23, 65, 112, .06);
	--cv-shadow-lg: 0 12px 32px rgba(23, 65, 112, .10);
	--cv-radius: 16px;
	--cv-radius-sm: 10px;
}

.dark {
	--cv-bg: #07101F;
	--cv-surface: #0D1B30;
	--cv-border: #1A3150;
	--cv-text: #E6EEF8;
	--cv-text-2: #93A6BF;
	--cv-blue-bg: #10223C;
	--cv-blue-soft: #143A6B;
	--cv-shadow: 0 4px 12px rgba(0, 0, 0, .28);
	--cv-shadow-lg: 0 12px 32px rgba(0, 0, 0, .40);
}

/* ── base ─────────────────────────────────────────────────────────── */
body,
.fi-body,
.fi-layout {
	background-color: var(--cv-bg) !important;
}

.fi-header-heading {
	font-weight: 800 !important;
	letter-spacing: -.01em;
	color: var(--cv-text) !important;
}

.fi-header-subheading,
.fi-section-header-description,
.fi-ta-header-description {
	color: var(--cv-text-2) !important;
}

/* ── menu lateral ─────────────────────────────────────────────────── */
.fi-sidebar {
	background: linear-gradient(180deg, var(--cv-navy-2) 0%, var(--cv-navy) 100%) !important;
	--tw-ring-color: rgba(255, 255, 255, .06) !important;
}

.fi-sidebar-header {
	background: transparent !important;
	--tw-ring-color: rgba(255, 255, 255, .08) !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.fi-sidebar-header .fi-logo {
	color: #FFFFFF !important;
	letter-spacing: -.01em;
}

/* Logo de qualquer formato cabe no cabeçalho do menu: o tamanho escolhido em
   Configurações vale como teto, e o cabeçalho cresce em vez de a imagem vazar. */
.fi-sidebar-header {
	height: auto !important;
	min-height: 4rem;
	padding-top: .5rem !important;
	padding-bottom: .5rem !important;
}

.fi-sidebar-header .fi-logo,
.fi-topbar .fi-logo {
	height: auto !important;
}

.fi-sidebar-header .fi-logo img {
	height: auto !important;
	max-height: 5rem !important;
	max-width: 100% !important;
	margin: 0 !important;
}

.fi-topbar .fi-logo img {
	height: auto !important;
	max-height: 2.5rem !important;
	max-width: 100% !important;
	margin: 0 !important;
}

.fi-sidebar-nav {
	scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

.fi-sidebar-group-label {
	color: #6F86A6 !important;
	font-size: .68rem !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.fi-sidebar-group-button,
.fi-sidebar-group-collapse-button,
.fi-sidebar-group-icon {
	color: #93A6BF !important;
}

.fi-sidebar-item-button {
	border-radius: var(--cv-radius-sm) !important;
	color: #B7C6DA !important;
	transition: background-color .15s ease, color .15s ease;
}

.fi-sidebar-item-button:hover {
	background: rgba(255, 255, 255, .06) !important;
	color: #FFFFFF !important;
}

.fi-sidebar-item-label {
	color: inherit !important;
	font-weight: 500;
}

.fi-sidebar-item-icon {
	color: #7F94B1 !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
	color: #FFFFFF !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
	background: linear-gradient(90deg, rgba(23, 111, 229, .32), rgba(23, 111, 229, .12)) !important;
	color: #FFFFFF !important;
	box-shadow: inset 3px 0 0 var(--cv-blue-accent);
}

.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-label {
	color: #FFFFFF !important;
}

.fi-sidebar-item-grouped-border {
	border-color: rgba(255, 255, 255, .12) !important;
}

.fi-sidebar .fi-badge {
	background: var(--cv-blue) !important;
	color: #FFFFFF !important;
	--tw-ring-color: transparent !important;
}

/* ── barra superior ───────────────────────────────────────────────── */
.fi-topbar > nav {
	background: var(--cv-surface) !important;
	--tw-ring-color: var(--cv-border) !important;
	box-shadow: var(--cv-shadow) !important;
}

.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
	color: var(--cv-text-2) !important;
}

/* ── caixas, tabelas, formulários ─────────────────────────────────── */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-tabs,
.fi-in-tabs,
.fi-wi-widget > .fi-section,
.fi-ac-modal-content,
.fi-modal-window,
.fi-dropdown-panel {
	border-radius: var(--cv-radius) !important;
	background: var(--cv-surface) !important;
	--tw-ring-color: var(--cv-border) !important;
	box-shadow: var(--cv-shadow) !important;
}

.fi-dropdown-panel {
	box-shadow: var(--cv-shadow-lg) !important;
}

.fi-section-header-heading,
.fi-ta-header-heading,
.fi-modal-heading {
	font-weight: 700 !important;
	color: var(--cv-text) !important;
}

.fi-ta-header-cell {
	background: var(--cv-blue-bg) !important;
}

.fi-ta-header-cell-label {
	color: var(--cv-text-2) !important;
	font-size: .72rem !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.fi-ta-row:hover {
	background: var(--cv-blue-bg) !important;
}

.fi-ta-table {
	--tw-divide-opacity: 1;
}

.fi-ta-cell {
	color: var(--cv-text);
}

.fi-fo-tabs,
.fi-in-tabs {
	padding: .35rem !important;
}

.fi-tabs-item-active {
	background: var(--cv-blue-bg) !important;
	color: var(--cv-blue) !important;
}

.dark .fi-tabs-item-active {
	color: var(--cv-blue-light) !important;
}

.fi-input-wrp,
.fi-select-input,
.fi-fo-file-upload {
	border-radius: var(--cv-radius-sm) !important;
	--tw-ring-color: var(--cv-border) !important;
}

.fi-input-wrp:focus-within {
	--tw-ring-color: var(--cv-blue) !important;
}

/* Campo inválido continua vermelho, com ou sem foco. */
.fi-input-wrp.fi-invalid,
.fi-input-wrp.fi-invalid:focus-within {
	--tw-ring-color: #DF5D67 !important;
}

.fi-fo-field-wrp-label span {
	color: var(--cv-text) !important;
	font-weight: 600 !important;
}

.fi-pagination-item-active,
.fi-pagination-item-active:hover {
	background: var(--cv-blue) !important;
	color: #FFFFFF !important;
}

/* ── botões ───────────────────────────────────────────────────────── */
.fi-btn {
	border-radius: var(--cv-radius-sm) !important;
	font-weight: 600 !important;
}

.fi-btn-color-primary {
	box-shadow: 0 6px 16px rgba(23, 111, 229, .28);
}

/* Foco de teclado visível em todo botão, inclusive os que o tema estiliza. */
.fi-btn:focus-visible,
.cv-welcome-logout.fi-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--cv-surface), 0 0 0 4px var(--cv-blue-accent) !important;
}

.fi-btn-color-gray {
	--tw-ring-color: var(--cv-border) !important;
}

.fi-badge {
	border-radius: 999px !important;
	font-weight: 700 !important;
}

/* ── cards de indicador ───────────────────────────────────────────── */
.fi-wi-stats-overview-stat {
	position: relative;
	padding: 1.25rem 1.5rem 1.35rem !important;
	min-height: 9.5rem;
	transition: transform .15s ease, box-shadow .15s ease;
}

a.fi-wi-stats-overview-stat:hover,
.cursor-pointer.fi-wi-stats-overview-stat:hover {
	transform: translateY(-2px);
	box-shadow: var(--cv-shadow-lg) !important;
}

.fi-wi-stats-overview-stat > div:first-child {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: .75rem;
}

.fi-wi-stats-overview-stat-icon {
	width: 2.75rem !important;
	height: 2.75rem !important;
	padding: .65rem;
	border-radius: 12px;
	background: var(--cv-blue-bg);
	color: var(--cv-blue) !important;
	order: -1;
}

.fi-wi-stats-overview-stat-label {
	color: var(--cv-text-2) !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
	letter-spacing: .01em;
}

.fi-wi-stats-overview-stat-value {
	color: var(--cv-text) !important;
	font-weight: 800 !important;
	font-size: clamp(1rem, 1.35vw, 1.7rem) !important;
	line-height: 1.2 !important;
	letter-spacing: -.02em;
	overflow-wrap: normal;
	word-break: keep-all;
}

/* A cor da descrição fica com a do card (verde quitado, vermelho pendente...). */
.fi-wi-stats-overview-stat-description {
	font-weight: 600 !important;
	font-size: .78rem !important;
}

/* ── boas-vindas (widget de conta) ────────────────────────────────── */
.cv-welcome-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-radius: 20px;
	color: #FFFFFF;
	background: linear-gradient(115deg, var(--cv-navy-2) 0%, var(--cv-navy-4) 55%, var(--cv-blue-dark) 100%);
	box-shadow: var(--cv-shadow-lg);
	position: relative;
	overflow: hidden;
}

.cv-welcome-card::after {
	content: "";
	position: absolute;
	right: -4rem;
	top: -4rem;
	width: 14rem;
	height: 14rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(38, 132, 255, .35), transparent 70%);
	pointer-events: none;
}

.cv-welcome-avatar .fi-avatar {
	width: 3.25rem !important;
	height: 3.25rem !important;
	--tw-ring-color: rgba(255, 255, 255, .35) !important;
	--tw-ring-offset-width: 0 !important;
}

.cv-welcome-text {
	flex: 1;
	min-width: 0;
}

.cv-welcome-text h2 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #FFFFFF;
}

.cv-welcome-text p {
	margin: .15rem 0 0;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #A9BDD8;
}

.cv-welcome-logout.fi-btn {
	background: rgba(255, 255, 255, .08) !important;
	color: #FFFFFF !important;
	--tw-ring-color: rgba(255, 255, 255, .25) !important;
	box-shadow: none !important;
}

.cv-welcome-logout.fi-btn:hover {
	background: rgba(255, 255, 255, .16) !important;
}

/* ── painel: chamada acima do título e subtítulo (só CSS) ─────────── */
.fi-dashboard-page .fi-header-heading::before {
	content: "Visão geral";
	display: block;
	margin-bottom: .3rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cv-blue);
}

.fi-dashboard-page .fi-header-heading::after {
	content: "Acompanhe a saúde financeira e os pagamentos da operação.";
	display: block;
	margin-top: .35rem;
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--cv-text-2);
}

/* ── nome e papel ao lado do avatar ───────────────────────────────── */
.cv-user-name {
	display: none;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.15;
	margin-inline-end: .25rem;
}

@media (min-width: 768px) {
	.cv-user-name {
		display: flex;
	}
}

.cv-user-name-n {
	font-size: .82rem;
	font-weight: 700;
	color: var(--cv-text);
}

.cv-user-name-r {
	font-size: .68rem;
	font-weight: 600;
	color: var(--cv-text-2);
}

/* ── pé do menu lateral ───────────────────────────────────────────── */
.cv-sidebar-foot {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: .5rem .75rem .75rem;
	padding: .65rem .8rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	color: #C9D6E8;
}

.cv-sidebar-foot-dot {
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: #18A874;
	box-shadow: 0 0 0 4px rgba(24, 168, 116, .18);
	flex: 0 0 auto;
}

.cv-sidebar-foot-hmg .cv-sidebar-foot-dot {
	background: #E89A19;
	box-shadow: 0 0 0 4px rgba(232, 154, 25, .2);
}

.cv-sidebar-foot-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.cv-sidebar-foot-text strong {
	font-size: .74rem;
	font-weight: 700;
	color: #FFFFFF;
}

.cv-sidebar-foot-text small {
	font-size: .66rem;
	color: #93A6BF;
}

/* ── menu recolhido ───────────────────────────────────────────────── */
/* Sem a classe fi-sidebar-open o menu está recolhido (no computador) ou fechado
   fora da tela (no celular, onde nada disto aparece). */

/* Topo: o ícone do sistema em cima e a seta de expandir logo abaixo. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
	flex-direction: column;
	justify-content: center;
	gap: .35rem;
	padding-inline: 0 !important;
	padding-top: .75rem !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--cv-sistema-icone) center / contain no-repeat;
}

/* Rodapé: só a bolinha de status, centralizada; o texto vem ao passar o mouse. */
.fi-sidebar:not(.fi-sidebar-open) .cv-sidebar-foot {
	justify-content: center;
	margin-inline: .5rem;
	padding: .65rem 0;
}

.fi-sidebar:not(.fi-sidebar-open) .cv-sidebar-foot-text {
	display: none;
}

/* ── login ────────────────────────────────────────────────────────── */
.fi-simple-layout {
	background:
		radial-gradient(120% 80% at 50% 10%, var(--cv-navy-4) 0%, var(--cv-navy-2) 45%, var(--cv-navy) 100%) !important;
}

.fi-simple-main {
	border-radius: 20px !important;
	box-shadow: var(--cv-shadow-lg) !important;
	--tw-ring-color: transparent !important;
}

.fi-simple-header-heading {
	font-weight: 800 !important;
	letter-spacing: -.01em;
}