/* =============================================================================
   FvInvest — Base
   -----------------------------------------------------------------------------
   Camada que faz o AdminLTE 3 respeitar os tokens: tipografia, cores de fundo
   e texto, links, foco, densidade e utilitários. Carrega DEPOIS do
   adminlte.min.css e ANTES de componentes.css.
   Nenhum hex aqui — só var(--fv-*).
   ========================================================================== */

/* ---- Tipografia global -------------------------------------------------- */
body,
.wrapper,
.content-wrapper,
.main-header,
.main-sidebar,
.btn,
.form-control,
.custom-select,
.dropdown-menu,
.modal,
table {
  font-family: var(--fv-font-sans);
}

body {
  background-color: var(--fv-bg);
  color: var(--fv-text);
  font-size: var(--fv-fs-md);
  line-height: var(--fv-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--fv-fw-semibold);
  color: var(--fv-text);
  line-height: var(--fv-lh-tight);
}

/* Cabeçalho de página do AdminLTE (.content-header h1) */
.content-header h1,
.content-header .h1 {
  font-size: var(--fv-fs-2xl);
  letter-spacing: -0.01em;
}

.text-muted,
small,
.small {
  color: var(--fv-text-soft) !important;
}

/* ---- Superfície de conteúdo ------------------------------------------- */
.content-wrapper {
  background-color: var(--fv-bg);
  color: var(--fv-text);
}

.main-footer {
  background-color: var(--fv-surface);
  color: var(--fv-text-soft);
  border-top: 1px solid var(--fv-border);
  font-size: var(--fv-fs-sm);
}

/* Preloader (AdminLTE) — tela cheia mostrada a cada troca de página.
   Vinha com fundo #f4f6f9 fixo do AdminLTE, nunca tokenizado; no tema
   escuro isso é o "flash branco" na troca de tela. A marca (mark_navy.svg)
   é navy sólida — invertida pra branco quando o fundo também escurece,
   senão ficaria invisível (navy sobre navy). */
.preloader {
  background-color: var(--fv-bg);
}

:root[data-fv-theme="dark"] .preloader img {
  filter: brightness(0) invert(1);
}

.card {
  background-color: var(--fv-surface);
  color: var(--fv-text);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius);
  box-shadow: var(--fv-shadow-sm);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--fv-border);
}

.card-header .card-title {
  font-size: var(--fv-fs-lg);
  font-weight: var(--fv-fw-semibold);
}

/* Card com faixa colorida no topo (card-outline) — só a borda muda de cor */
.card.card-outline {
  border-top: 3px solid var(--fv-accent);
}

.card.card-primary.card-outline { border-top-color: var(--fv-accent); }
.card.card-info.card-outline { border-top-color: var(--fv-accent); }
.card.card-success.card-outline { border-top-color: var(--fv-money-pos); }
.card.card-warning.card-outline { border-top-color: var(--fv-warning); }
.card.card-danger.card-outline { border-top-color: var(--fv-danger); }

/* card-* SEM outline (header colorido sólido do AdminLTE) — neutraliza */
.card.card-primary:not(.card-outline) > .card-header,
.card.card-info:not(.card-outline) > .card-header,
.card.card-secondary:not(.card-outline) > .card-header {
  background-color: var(--fv-table-header-bg);
  color: #fff;
}

/* ---- Callout (AdminLTE) — some no tema escuro sem isto -------------- */
.callout {
  background-color: var(--fv-surface);
  color: var(--fv-text);
  border: 1px solid var(--fv-border);
  border-left: 5px solid var(--fv-border-strong);
  border-radius: var(--fv-radius-sm);
  box-shadow: var(--fv-shadow-sm);
}

.callout a { color: var(--fv-accent); }
.callout.callout-info { border-left-color: var(--fv-accent); }
.callout.callout-success { border-left-color: var(--fv-money-pos); }
.callout.callout-warning { border-left-color: var(--fv-warning); }
.callout.callout-danger { border-left-color: var(--fv-danger); }

/* ---- info-box (AdminLTE) ------------------------------------------- */
.info-box {
  background-color: var(--fv-surface);
  color: var(--fv-text);
  box-shadow: var(--fv-shadow-sm);
}

.info-box .info-box-text,
.info-box .info-box-number {
  color: var(--fv-text);
}

/* Painel de diferença da conciliação (bater / não bater) */
.info-box.fv-concilia-ok {
  background-color: var(--fv-money-pos-soft);
  border: 1px solid var(--fv-money-pos);
}

.info-box.fv-concilia-dif {
  background-color: var(--fv-money-neg-soft);
  border: 1px solid var(--fv-money-neg);
}

/* ---- Links ----------------------------------------------------------- */
a {
  color: var(--fv-accent);
}

a:hover {
  color: var(--fv-accent-hover);
}

/* Não recolorir links que são itens de menu ou botão SEM variante de cor.
   Botões com variante (btn-primary, btn-info, btn-danger…) definem a própria
   cor mais abaixo — `a.btn` genérico aqui roubava o texto branco deles. */
.nav-sidebar a,
.navbar a,
.page-link {
  color: inherit;
}

a.btn:not([class*="btn-"]) {
  color: var(--fv-text);
}

/* ---- Foco visível -------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fv-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* Bootstrap fixa background-color:#fff E color:#495057 em :focus (mesma
   classe de bug do [readonly]/:disabled abaixo) — sem repetir os dois
   aqui, o campo clareava o fundo e/ou deixava o texto cinza (a cor de
   texto do Bootstrap, pensada pro fundo branco dele) ao focar, mesmo já
   tokenizado no resto do tempo. */
.form-control:focus,
.custom-select:focus {
  background-color: var(--fv-surface);
  color: var(--fv-text);
  border-color: var(--fv-accent);
  box-shadow: 0 0 0 0.15rem var(--fv-accent-soft);
}

/* ---- Formulários --------------------------------------------------- */
label {
  font-size: var(--fv-fs-sm);
  color: var(--fv-text-soft);
  font-weight: var(--fv-fw-semibold);
  margin-bottom: var(--fv-space-1);
}

.form-control,
.custom-select {
  background-color: var(--fv-surface);
  border-color: var(--fv-border);
  color: var(--fv-text);
  border-radius: var(--fv-radius-sm);
}

.form-control::placeholder {
  color: var(--fv-text-faint);
}

/* Bootstrap força background-color claro em [readonly]/:disabled com seletor
   mais específico que .form-control — no tema escuro isso deixa o campo
   ilegível. Reancoramos nos tokens para funcionar nos dois temas. */
.form-control[readonly],
.form-control:disabled,
.custom-select:disabled {
  background-color: var(--fv-surface-2);
  color: var(--fv-text-soft);
  border-color: var(--fv-border);
  opacity: 1;
}

.form-control:disabled,
.custom-select:disabled {
  cursor: not-allowed;
}

.form-control.is-invalid {
  border-color: var(--fv-danger);
}

.invalid-feedback {
  color: var(--fv-danger);
}

/* ---- Tabelas ------------------------------------------------------- */
.table {
  color: var(--fv-text);
}

/* Cabeçalho de grid — azul-escuro sólido em TODAS as variações de thead
   (fv-table-header, thead-dark, thead-light e thead sem classe). */
.table thead th,
.table thead td,
.table > thead > tr > th,
.table .thead-dark th,
.table .thead-light th,
table.dataTable thead th,
table.dataTable thead td {
  /* !important: a folha do DataTables (CDN) carrega depois do tema em várias
     telas; o cabeçalho de grid é elemento de identidade e precisa vencer. */
  background-color: var(--fv-table-header-bg) !important;
  color: var(--fv-table-header-text) !important;
  border-bottom: 0;
  border-top: 0;
  border-color: rgba(255, 255, 255, 0.15);
  font-size: var(--fv-fs-xs);
  font-weight: var(--fv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table thead th a,
.table thead th a:hover,
table.dataTable thead th a {
  color: var(--fv-table-header-text);
}

/* ícones de ordenação do DataTables — claros sobre o cabeçalho azul */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
  color: var(--fv-table-header-text);
  opacity: 0.35;
}

table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before {
  opacity: 0.9;
}

/* Só separadores horizontais leves — sem "gaiola" de colunas.
   `table-bordered` (usado em quase toda listagem) fica sem bordas verticais,
   só um fio inferior por linha, como no grid de "Detalhe do Ativo". */
.table td,
.table th,
.table-bordered td,
.table-bordered th {
  border: 0;
  border-bottom: 1px solid var(--fv-border);
}

/* Linha de total (tfoot) — subtle, não imita o cabeçalho.
   Neutraliza `thead-light`/`thead-dark` quando usados num tfoot. */
.table tfoot td,
.table tfoot th,
.table tfoot.thead-light td,
.table tfoot.thead-light th,
.table tfoot.thead-dark td,
.table tfoot.thead-dark th {
  background-color: var(--fv-surface-2);
  color: var(--fv-text);
  border-top: 2px solid var(--fv-border-strong);
  text-transform: none;
  font-size: inherit;
  letter-spacing: normal;
}

.table,
.table-bordered {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--fv-surface-2);
}

/* Linhas realçadas de relatório (agrupamento, saldo anterior) */
.table .table-secondary,
.table .table-secondary > td,
.table .table-secondary > th,
.table .table-light,
.table .table-light > td,
.table .table-light > th {
  background-color: var(--fv-surface-2);
  color: var(--fv-text);
}

/* Linha "já conciliada" (verde suave) */
.table .table-success,
.table .table-success > td {
  background-color: var(--fv-money-pos-soft);
  color: var(--fv-text);
}

.table .table-danger,
.table .table-danger > td {
  background-color: var(--fv-money-neg-soft);
  color: var(--fv-text);
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--fv-surface);
}

.table-hover tbody tr:hover,
.table-hover tbody tr:hover > * {
  background-color: var(--fv-accent-soft) !important;
  color: var(--fv-text);
}

/* Números: sempre tabulares e à direita.
   Aplique .fv-num nas <td>/<th> numéricas e nos valores de KPI. */
.fv-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
}

/* ---- Semântico monetário ----------------------------------------- */
.fv-money-pos { color: var(--fv-money-pos); }
.fv-money-neg { color: var(--fv-money-neg); }
.fv-money-flat { color: var(--fv-money-flat); }

/* Utilitários do Bootstrap usados nas telas para valor de ganho/perda —
   retint para os tokens (verde/vermelho mais sóbrios, iguais em todo grid). */
.text-success { color: var(--fv-money-pos) !important; }
.text-danger { color: var(--fv-money-neg) !important; }
.text-info { color: var(--fv-accent) !important; }
.text-primary { color: var(--fv-accent) !important; }
.text-warning { color: var(--fv-warning) !important; }

.bg-light { background-color: var(--fv-surface-2) !important; }
.bg-white { background-color: var(--fv-surface) !important; }

/* Utilitários de texto que fixam claro/escuro do Bootstrap — adaptam ao tema */
.text-dark { color: var(--fv-text) !important; }
.text-body { color: var(--fv-text) !important; }
.text-black-50 { color: var(--fv-text-soft) !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.6) !important; }

.badge-secondary {
  background-color: var(--fv-surface-2);
  color: var(--fv-text-soft);
  border: 1px solid var(--fv-border);
  font-weight: var(--fv-fw-semibold);
}

a.badge-secondary:hover {
  background-color: var(--fv-border);
  color: var(--fv-text);
}

/* ---- Botões ------------------------------------------------------ */
.btn {
  border-radius: var(--fv-radius-sm);
  font-weight: 500;
  padding: 0.375rem 0.9rem;
}

.btn-sm {
  padding: 0.25rem 0.6rem;
}

/* Primário — ação principal da tela (Salvar, Cadastrar). Azul sólido. */
.btn-primary {
  background-color: var(--fv-accent);
  border-color: var(--fv-accent);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--fv-accent-hover);
  border-color: var(--fv-accent-hover);
  color: #fff;
}

.btn-outline-primary {
  color: var(--fv-accent);
  border-color: var(--fv-accent);
}

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

.btn-link {
  color: var(--fv-accent);
  font-weight: 500;
}

/* btn-info é usado em quase todas as telas como ação secundária/terciária
   (Incluir no topo da lista, Voltar). Renderiza como contorno azul, para
   NÃO competir com o btn-primary sólido. Hierarquia por peso, não por cor. */
.btn-info {
  background-color: transparent;
  border-color: var(--fv-accent);
  color: var(--fv-accent);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
  background-color: var(--fv-accent);
  border-color: var(--fv-accent);
  color: #fff;
}

.btn-outline-info {
  color: var(--fv-accent);
  border-color: var(--fv-accent);
}

.btn-outline-info:hover {
  background-color: var(--fv-accent);
  border-color: var(--fv-accent);
  color: #fff;
}

/* Secundário neutro (Cancelar, Limpar) — btn-dark também cai aqui
   (usado em telas antigas para ação secundária tipo "Alterar senha"). */
.btn-secondary,
.btn-outline-secondary,
.btn-dark {
  background-color: transparent;
  border-color: var(--fv-border-strong);
  color: var(--fv-text-soft);
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:not(:disabled):not(.disabled):active {
  background-color: var(--fv-surface-2);
  border-color: var(--fv-border-strong);
  color: var(--fv-text);
}

/* ---- Paginação -------------------------------------------------- */
.page-item.active .page-link {
  background-color: var(--fv-accent);
  border-color: var(--fv-accent);
}

.page-link {
  color: var(--fv-accent);
  background-color: var(--fv-surface);
  border-color: var(--fv-border);
}

/* ---- Superfícies flutuantes (dropdown, modal, popover) ------- */
.dropdown-menu {
  background-color: var(--fv-surface);
  border-color: var(--fv-border);
  color: var(--fv-text);
  box-shadow: var(--fv-shadow);
}

.dropdown-item {
  color: var(--fv-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--fv-surface-2);
  color: var(--fv-text);
}

.dropdown-divider {
  border-color: var(--fv-border);
}

.modal-content {
  background-color: var(--fv-surface);
  color: var(--fv-text);
  border-color: var(--fv-border);
}

.modal-header,
.modal-footer {
  border-color: var(--fv-border);
}

.close {
  color: var(--fv-text);
  text-shadow: none;
}

.close:hover {
  color: var(--fv-text);
}

.list-group-item {
  background-color: var(--fv-surface);
  border-color: var(--fv-border);
  color: var(--fv-text);
}

/* ---- Alertas -------------------------------------------------- */
/* Suaviza os alerts do Bootstrap (amarelo/verde/azul berrantes) para os
   tons do tema. Erro de negócio = alert-danger persistente no topo. */
.alert {
  border-radius: var(--fv-radius-sm);
  border-width: 1px;
  border-style: solid;
}

.alert-warning {
  background-color: var(--fv-warning-soft);
  border-color: var(--fv-warning);
  color: var(--fv-warning);
}

.alert-danger {
  background-color: var(--fv-danger-soft);
  border-color: var(--fv-danger);
  color: var(--fv-danger);
}

.alert-success,
.alert-info {
  background-color: var(--fv-info-soft);
  border-color: var(--fv-info);
  color: var(--fv-info);
}

.alert .alert-link {
  color: inherit;
  text-decoration: underline;
  font-weight: var(--fv-fw-semibold);
}

/* ---- Badges de status (neutros — nunca verde/vermelho de dinheiro) ---- */
.badge-fv-ativo {
  background-color: var(--fv-accent-soft);
  color: var(--fv-accent);
}

.badge-fv-inativo {
  background-color: var(--fv-surface-2);
  color: var(--fv-text-soft);
}

/* ---- Scrollbar ------------------------------------------------- */
* {
  scrollbar-color: var(--fv-border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--fv-border-strong);
  border-radius: var(--fv-radius-pill);
  border: 2px solid var(--fv-bg);
}

/* ---- Movimento reduzido -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}