/* =============================================================================
   FvInvest — Componentes
   -----------------------------------------------------------------------------
   Navbar, sidebar, toggle de módulo, tabelas de layout, cards de resumo,
   filtros, toast, tela de boas-vindas e tela de login.
   Migrado de temafv1.css + custom.css + o <style> inline do _LayoutIdentity.
   Carrega por último. Nenhum hex — só var(--fv-*).
   Métricas de layout (--fv-sidebar-width, --fv-navbar-height…) vêm de tokens.css.
   ========================================================================== */

/* =========================================================================
   NAVBAR (chrome — igual nos dois temas)
   ====================================================================== */
.fv-navbar-xp {
  /* sem border-bottom: navbar e sidebar têm a mesma cor e o AdminLTE já
     reserva 3.5rem + 1px de offset para o conteúdo — uma borda aqui cria
     um fio de 1px desalinhado entre a navbar e o topo da sidebar. */
  border-bottom: 0;
  background: var(--fv-chrome-bg) !important;
  color: var(--fv-chrome-text-strong);
  position: relative;
  height: var(--fv-navbar-height);
  min-height: var(--fv-navbar-height);
}

.fv-navbar-xp .nav-link,
.fv-navbar-xp .navbar-brand,
.fv-navbar-xp i {
  color: var(--fv-chrome-text) !important;
}

.fv-navbar-xp .nav-link:hover {
  color: var(--fv-chrome-text-strong) !important;
}

/* navbar sempre full width, acima da sidebar */
.main-header {
  margin-left: 0 !important;
  z-index: var(--fv-z-navbar);
}

/* alinha o toggle Caixa/Investimentos com o início do content-wrapper */
.fv-navbar-xp > .navbar-nav:first-child {
  width: var(--fv-sidebar-width);
  flex-shrink: 0;
  transition: width 0.3s ease;
}

body.sidebar-collapse .fv-navbar-xp > .navbar-nav:first-child {
  width: var(--fv-sidebar-mini-width);
  overflow: hidden;
}

body.sidebar-collapse .fv-brand-name {
  display: none;
}

.main-header .navbar-nav:first-child,
.sidebar-collapse .main-header .navbar-nav:first-child {
  margin-left: 0 !important;
}

/* =========================================================================
   BRAND
   ====================================================================== */
.fv-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 8px;
}

.fv-brand-logo {
  width: 34px;
  height: 34px;
  border-radius: var(--fv-radius);
  object-fit: cover;
  border: none;
  box-shadow: none;
  background: transparent !important;
}

.fv-brand-name {
  font-weight: var(--fv-fw-semibold);
  color: var(--fv-chrome-text-strong);
  letter-spacing: 0.2px;
}

/* =========================================================================
   TOGGLE / BOTÕES DE MÓDULO (Caixa · Investimentos · Suporte)
   ====================================================================== */
.xp-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  background: var(--fv-chrome-hover-bg);
  border: 1px solid var(--fv-chrome-border);
  border-radius: var(--fv-radius);
  padding: 3px;
  gap: 4px;
}

.fv-modo-btns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 1rem;
}

.xp-btn {
  border: 0;
  background: transparent;
  padding: 0.45rem 0.9rem;
  border-radius: var(--fv-radius);
  font-weight: var(--fv-fw-semibold);
  color: var(--fv-chrome-text);
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
}

.xp-btn:hover {
  background: var(--fv-chrome-hover-bg);
  color: var(--fv-chrome-text-strong);
}

.xp-btn.active {
  background: var(--fv-chrome-active-bg);
  color: var(--fv-chrome-text-strong);
  box-shadow: var(--fv-shadow);
}

/* =========================================================================
   CAMPO DE BUSCA NA NAVBAR
   ====================================================================== */
.fv-navbar-xp .form-control-navbar,
.fv-navbar-xp .form-control-navbar:focus {
  background: var(--fv-chrome-hover-bg);
  border: 1px solid var(--fv-chrome-border);
  color: var(--fv-chrome-text-strong);
  box-shadow: none;
}

.fv-navbar-xp .form-control-navbar::placeholder {
  color: var(--fv-chrome-text);
}

.fv-navbar-xp .btn-navbar {
  color: var(--fv-chrome-text);
}

/* Badge de contagem no sino de notificações */
.fv-bell-badge {
  background: var(--fv-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: var(--fv-fw-semibold);
  padding: 2px 5px;
  border-radius: var(--fv-radius-pill);
}

.fv-navbar-select {
  min-width: 264px;
  width: auto;
  max-width: 420px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* --fv-chrome-hover-bg é uma tinta de 8% de branco pensada pra sobrepor o
     :hover de um link em cima do navy da navbar — como fundo de um <select>
     sozinho, o navegador pinta a base nativa (opaca, tende a branco) por
     baixo, e os 8% quase não mudam nada: o controle fica quase todo branco.
     Precisa de uma cor opaca de verdade. Navbar/sidebar são sempre navy nos
     dois temas, então usa token de chrome (não --fv-surface, que segue o
     toggle claro/escuro) pra ficar consistente com o resto do chrome. */
  background-color: var(--fv-chrome-bg-2);
  border: 1px solid var(--fv-chrome-border);
  color: var(--fv-chrome-text-strong);
}

.fv-navbar-select option {
  color: var(--fv-chrome-text-strong);
  background-color: var(--fv-chrome-bg-2);
}

@media (max-width: 576px) {
  .fv-navbar-xp {
    padding-left: 0;
  }

  .xp-toggle {
    min-width: auto;
  }

  .fv-brand-name {
    display: none;
  }
}

/* =========================================================================
   SIDEBAR — layout (largura fixa, estado mini)
   ====================================================================== */
.main-sidebar {
  width: var(--fv-sidebar-width) !important;
  overflow: hidden !important;
  transition: width 0.3s ease;
  background: var(--fv-chrome-bg) !important;
  z-index: var(--fv-z-sidebar);
}

.content-wrapper,
.main-footer {
  margin-left: var(--fv-sidebar-width) !important;
  transition: margin-left 0.3s ease;
}

body.sidebar-collapse .main-sidebar {
  width: var(--fv-sidebar-mini-width) !important;
  margin-left: 0 !important; /* AdminLTE aplica -250px — neutraliza */
}

body.sidebar-collapse .main-sidebar .nav-sidebar .nav-link p,
body.sidebar-collapse .main-sidebar .user-panel .info,
body.sidebar-collapse .main-sidebar .brand-text {
  display: none !important;
}

/* Recolhido: centralizar o ícone no trilho de 60px. O .nav-link do Bootstrap
   é `display:block`, então `justify-content` sozinho não fazia nada — é
   preciso forçar flex. Zera padding e as margens do .nav-icon do AdminLTE
   (margin-left:.05rem / margin-right:.2rem) para o centro ficar exato. */
body.sidebar-collapse .main-sidebar .nav-sidebar .nav-link {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.sidebar-collapse .main-sidebar .nav-icon {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body.sidebar-collapse .main-sidebar .user-panel {
  justify-content: center;
}

body.sidebar-collapse .content-wrapper,
body.sidebar-collapse .main-footer {
  margin-left: var(--fv-sidebar-mini-width) !important;
}

/* =========================================================================
   SIDEBAR — chrome (cores)
   ====================================================================== */
/* Painel do usuário — remove a linha cinza do AdminLTE (#4f5962), que
   destoa do azul sólido da sidebar. */
.main-sidebar .user-panel {
  border-bottom: 0;
}

.fv-user-name {
  color: var(--fv-chrome-text) !important;
  font-weight: var(--fv-fw-semibold);
}

.nav-sidebar .nav-link {
  color: var(--fv-chrome-text) !important;
  border-radius: var(--fv-radius-sm);
}

.nav-sidebar .nav-link:hover {
  background: var(--fv-chrome-hover-bg) !important;
  color: var(--fv-chrome-text-strong) !important;
}

.nav-sidebar .nav-link.active {
  background: var(--fv-chrome-active-bg) !important;
  color: var(--fv-chrome-text-strong) !important;
}

/* navbar fixa */
body.layout-navbar-fixed .main-sidebar {
  margin-top: var(--fv-navbar-height);
}

.content-wrapper > .content {
  padding-top: var(--fv-space-4);
  padding-bottom: var(--fv-space-2);
}

/* =========================================================================
   TABELAS DE LAYOUT
   ====================================================================== */
/* Cabeçalho de tabela — azul-escuro sólido, sem gradiente */
.fv-table-header,
.fv-table-header th {
  background: var(--fv-table-header-bg);
  color: var(--fv-table-header-text);
}

.fv-table-header th {
  border-color: rgba(255, 255, 255, 0.15);
  font-weight: var(--fv-fw-semibold);
}

/* Linha selecionada (DataTables e seleção manual) */
table.dataTable tr.selected,
.table tr.fv-selected {
  background-color: var(--fv-accent-soft) !important;
}

/* Botões de ação na linha da tabela (ver / editar / excluir).
   Nas listagens vêm como btn-warning / btn-info / btn-danger + btn-sm.
   Uniformiza como botão fantasma: ícone neutro, hover azul; excluir hover vermelho.
   Pega qualquer .btn na célula de ações (última coluna / text-right / text-nowrap),
   com ou sem btn-sm, incluindo grids legados como _ListaAtivos. */
.table td .btn.btn-sm,
.table td.text-right .btn,
.table td.text-nowrap .btn,
.table td:last-child .btn,
table.fv-table-compact td .btn {
  background-color: transparent;
  border-color: var(--fv-border);
  color: var(--fv-text-soft);
  box-shadow: none;
  padding: 0.2rem 0.5rem;
  font-size: var(--fv-fs-sm);
  line-height: 1.4;
}

.table td .btn.btn-sm:hover,
.table td.text-right .btn:hover,
.table td.text-nowrap .btn:hover,
.table td:last-child .btn:hover,
table.fv-table-compact td .btn:hover {
  background-color: var(--fv-surface-2);
  border-color: var(--fv-border-strong);
  color: var(--fv-accent);
}

.table td .btn.btn-danger.btn-sm,
.table td.text-right .btn.btn-danger,
.table td.text-nowrap .btn.btn-danger,
.table td:last-child .btn.btn-danger,
table.fv-table-compact td .btn.btn-danger {
  color: var(--fv-danger);
}

.table td .btn.btn-danger.btn-sm:hover,
.table td.text-right .btn.btn-danger:hover,
.table td.text-nowrap .btn.btn-danger:hover,
.table td:last-child .btn.btn-danger:hover,
table.fv-table-compact td .btn.btn-danger:hover {
  background-color: var(--fv-danger);
  border-color: var(--fv-danger);
  color: #fff;
}

/* Grid: densidade única para TODAS as tabelas — table-sm, fv-table-compact
   e as com DataTables convergem para o mesmo tamanho (o do grid de
   "Detalhe do Ativo", que é a referência). */
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
table.fv-table-compact > thead > tr > th,
table.fv-table-compact > tbody > tr > td,
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td {
  padding: 0.4rem 0.6rem;
  vertical-align: middle;
  line-height: 1.35;
}

table.fv-table-compact td:last-child,
.table td.text-nowrap {
  white-space: nowrap;
}

/* botões de ação na célula seguem o btn-sm padrão (sem override de tamanho) */
table.fv-table-compact td .btn.btn-sm {
  font-size: var(--fv-fs-sm);
  line-height: 1.4;
}

/* espaço para a seta de ordenação do DataTables */
table.dataTable > thead > tr > th.sorting,
table.dataTable > thead > tr > th.sorting_asc,
table.dataTable > thead > tr > th.sorting_desc {
  padding-right: 1.5rem;
}

/* ---- DataTables: alinhar ao visual do tema ----------------------------
   A folha do DataTables (CDN) adiciona bordas #111 e listra cinza via
   box-shadow. Anula tudo e usa os tokens (mesmo look do grid "Detalhe do Ativo"). */
table.dataTable,
table.dataTable.no-footer,
table.dataTable.table-bordered,
table.dataTable thead th,
table.dataTable thead td {
  border: 0 !important;
}

table.dataTable tbody td,
table.dataTable tbody th {
  border: 0 !important;
  border-bottom: 1px solid var(--fv-border) !important;
}

/* Listra zebrada — o DataTables (bootstrap4) faz a listra com
   box-shadow: inset ... rgba(0,0,0,.05) nas CÉLULAS, o que dá o cinza e
   ainda cobre qualquer background que a gente ponha na <tr>. Por isso
   pintamos direto nas células (> *) e matamos o box-shadow, com !important. */
table.dataTable > tbody > tr:nth-of-type(odd) > *,
table.dataTable > tbody > tr.odd > * {
  background-color: var(--fv-surface-2) !important;
  box-shadow: none !important;
}

table.dataTable > tbody > tr:nth-of-type(even) > *,
table.dataTable > tbody > tr.even > * {
  background-color: var(--fv-surface) !important;
  box-shadow: none !important;
}

/* hover — depois da listra e com a mesma especificidade → vence */
table.dataTable > tbody > tr:hover > * {
  background-color: var(--fv-accent-soft) !important;
  box-shadow: none !important;
}

/* Mantém texto numa linha só nas tabelas com scroll horizontal */
.table-responsive table.dataTable th,
.table-responsive table.dataTable td {
  white-space: nowrap;
}

/* DataTables — centraliza só a paginação, "Mostrando…" à esquerda */
.dataTables_wrapper .dataTables_paginate {
  float: none !important;
  text-align: center !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.dataTables_wrapper .dataTables_info {
  text-align: left !important;
  color: var(--fv-text-soft);
}

.dataTables_wrapper .col-md-7 {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
}

.dataTables_wrapper .col-md-5 {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: left;
}

/* =========================================================================
   SMALL-BOX (dashboards) — ajuste de ícone e variante compacta
   ====================================================================== */
.small-box .icon > i.fa,
.small-box .icon > i.fas,
.small-box .icon > i.far,
.small-box .icon > i.fab,
.small-box .icon > i.fal,
.small-box .icon > i.fad,
.small-box .icon > i.ion {
  top: 30px !important;
}

/* small-box com cor de fundo por tipo (bg-info/primary/success/warning/danger)
   é usado como "card de contagem" em ~21 telas de listagem. Neutraliza para
   superfície branca com número azul — sem "arco-íris". */
.small-box.bg-primary,
.small-box.bg-info,
.small-box.bg-success,
.small-box.bg-warning,
.small-box.bg-danger,
.small-box.bg-secondary {
  background-color: var(--fv-surface) !important;
  color: var(--fv-text) !important;
  border: 1px solid var(--fv-border);
  border-top: 3px solid var(--fv-brand-500);
  box-shadow: var(--fv-shadow-sm);
}

/* altura consistente entre os cards de contagem de uma linha
   (ex.: "Movimentos" / "Total Compras" / "Total Vendas") */
.small-box.fv-small-box-compact {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Densidade padrão do small-box — o AdminLTE é bem grande (valor ~2.2rem,
   ícone 70px). Interface data-first: reduz para o tamanho de KPI. */
.small-box > .inner {
  padding: 0.75rem 1rem;
}

.small-box .inner h3,
.small-box .inner h4 {
  color: var(--fv-text);
  font-weight: var(--fv-fw-semibold);
  font-variant-numeric: tabular-nums;
  font-size: var(--fv-fs-xl);
  margin-bottom: 0.15rem;
  line-height: 1.15;
}

.small-box .inner p {
  color: var(--fv-text-soft);
  font-size: var(--fv-fs-sm);
  margin-bottom: 0;
}

.small-box .icon {
  font-size: 0;
}

.small-box .icon > i {
  color: var(--fv-brand-100) !important;
  font-size: 40px !important;
  top: 14px !important;
}

.small-box .small-box-footer {
  background: transparent;
  color: var(--fv-text-soft);
}

.fv-small-box-compact > .inner {
  padding: 0.5rem 0.75rem;
}

.fv-small-box-compact .inner h4 {
  font-size: var(--fv-fs-lg);
  margin-bottom: 2px;
}

.fv-small-box-compact .icon > i {
  font-size: 34px !important;
  top: 12px !important;
}

/* Botão de logout inline na navbar */
.main-header .nav-link.btn.btn-link {
  padding: 0.5rem 0.75rem;
  color: inherit;
  background: none;
  border: none;
  box-shadow: none;
}

.main-header .nav-link.btn.btn-link:hover {
  color: inherit;
  opacity: 0.75;
}

/* =========================================================================
   CARDS DE RESUMO / KPI
   ====================================================================== */
/* Cartão de indicador do dashboard — superfície neutra, sem cor de fundo por
   tipo (regra: sem "arco-íris"). Só o valor pode receber cor, e apenas quando
   representa ganho/perda (classe .fv-money-pos / .fv-money-neg). */
.fv-kpi {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-top: 3px solid var(--fv-brand-500);
  border-radius: var(--fv-radius);
  padding: 0.85rem 1rem 0.9rem;
  height: 100%;
  box-shadow: var(--fv-shadow);
}

.fv-kpi__label {
  font-size: var(--fv-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fv-text-soft);
  font-weight: var(--fv-fw-semibold);
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.fv-kpi__value {
  font-size: var(--fv-fs-2xl);
  font-weight: var(--fv-fw-semibold);
  color: var(--fv-text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.fv-kpi__value.fv-money-pos { color: var(--fv-money-pos); }
.fv-kpi__value.fv-money-neg { color: var(--fv-money-neg); }

.fv-kpi__hint {
  display: block;
  font-size: var(--fv-fs-xs);
  color: var(--fv-text-faint);
  margin-top: 0.25rem;
}

/* Dashboards: cards da mesma linha com altura igual (o card-body cresce
   para preencher; o mais curto acompanha o mais alto).
   Escopo restrito ao wrapper .fv-dashboard — NÃO vale para as demais telas
   (senão quebra o alinhamento de formulários e cards de contagem). */
.fv-dashboard .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.fv-dashboard .row > [class*="col-"] > .card,
.fv-dashboard .row > [class*="col-"] > .fv-kpi,
.fv-dashboard .row > [class*="col-"] > .small-box {
  width: 100%;
  flex: 1 1 auto;
}

.fv-dashboard .card .card-body {
  flex: 1 1 auto;
}

/* Contêiner de gráfico com altura fixa — padrão recomendado do Chart.js
   (responsive + maintainAspectRatio:false). Sem isso, o canvas cresce sem
   limite quando o .card-body estica (equal-height) — a rosca vira um círculo
   gigante ao voltar de outra tela. */
.fv-chart-box {
  position: relative;
  height: 190px;
  width: 100%;
}

.fv-chart-box--lg {
  height: 260px;
}

/* Listas de "Maiores Altas e Quedas" no dashboard */
.fv-var-titulo {
  font-size: var(--fv-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fv-text-soft);
  font-weight: var(--fv-fw-semibold);
  margin-bottom: 0.35rem;
}

.fv-var-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fv-var-lista li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "cod pct" "cod lucro";
  column-gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--fv-border);
  font-size: var(--fv-fs-sm);
}

.fv-var-lista li:last-child {
  border-bottom: 0;
}

.fv-var-cod {
  grid-area: cod;
  align-self: center;
  font-weight: var(--fv-fw-semibold);
  color: var(--fv-text);
}

.fv-var-pct {
  grid-area: pct;
  text-align: right;
  font-weight: var(--fv-fw-semibold);
  font-variant-numeric: tabular-nums;
}

.fv-var-lucro {
  grid-area: lucro;
  text-align: right;
  font-size: var(--fv-fs-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.fv-var-vazio {
  color: var(--fv-text-faint);
  padding: 0.3rem 0;
  font-size: var(--fv-fs-sm);
}

.fv-summary-card .card-body {
  padding: 0.75rem 1rem;
}

.fv-summary-label {
  font-size: var(--fv-fs-sm);
  color: var(--fv-text-soft);
  margin-bottom: 0.2rem;
  line-height: 1.1;
}

.fv-summary-value {
  font-size: var(--fv-fs-xl);
  font-weight: var(--fv-fw-semibold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   CABEÇALHO DE PÁGINA (_PageHeader)
   ====================================================================== */
.fv-page-header h1 {
  letter-spacing: -0.01em;
}

.fv-breadcrumb {
  font-size: var(--fv-fs-sm);
}

.fv-breadcrumb .breadcrumb-item,
.fv-breadcrumb .breadcrumb-item.active {
  color: var(--fv-text-soft);
}

.fv-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--fv-text-faint);
}

.fv-breadcrumb .breadcrumb-item a {
  color: var(--fv-text-soft);
}

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

/* =========================================================================
   FORMULÁRIO (Create/Edit) — ver ui-patterns.md §3
   ====================================================================== */
.fv-form-card {
  max-width: 640px;
}

/* Asterisco de campo obrigatório, ao lado do label. */
.fv-required {
  color: var(--fv-danger);
  margin-left: 2px;
  font-weight: var(--fv-fw-semibold);
}

/* Rodapé de ações do card (form Create/Edit e tela de Excluir).
   Convenção Windows: ação primária à esquerda, Cancelar à direita, os dois
   agrupados na quina direita do card. Ordem no DOM = ordem visual.
   Ver ui-patterns.md §3 e §8. */
.fv-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--fv-space-2);
}

@media (max-width: 575.98px) {
  .fv-card-actions {
    flex-direction: column;
  }

  .fv-card-actions > *,
  .fv-card-actions .btn {
    width: 100%;
  }
}

/* =========================================================================
   ESTADO VAZIO (_EstadoVazio)
   ====================================================================== */
.fv-estado-vazio {
  padding: 3rem 1.5rem;
  color: var(--fv-text-soft);
}

.fv-estado-vazio > i {
  font-size: 2.75rem;
  color: var(--fv-brand-200);
  margin-bottom: 1rem;
  display: block;
}

.fv-estado-vazio__titulo {
  font-size: var(--fv-fs-lg);
  font-weight: var(--fv-fw-semibold);
  color: var(--fv-text);
  margin-bottom: 0.35rem;
}

.fv-estado-vazio__msg {
  max-width: 42ch;
  margin: 0 auto 1rem;
  font-size: var(--fv-fs-sm);
}

/* =========================================================================
   PRIMEIROS PASSOS (onboarding)
   ====================================================================== */
.fv-primeiros-passos .list-group-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-color: var(--fv-border);
  background: var(--fv-surface);
}

.fv-primeiros-passos .fv-passo-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--fv-radius-pill);
  background: var(--fv-accent-soft);
  color: var(--fv-accent);
  font-size: var(--fv-fs-sm);
  font-weight: var(--fv-fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fv-primeiros-passos .fv-passo-feito .fv-passo-num {
  background: var(--fv-money-pos-soft);
  color: var(--fv-money-pos);
}

.fv-primeiros-passos .fv-passo-feito .fv-passo-texto {
  color: var(--fv-text-soft);
  text-decoration: line-through;
}

/* =========================================================================
   AJUDA CONTEXTUAL
   ====================================================================== */
.fv-ajuda {
  background: var(--fv-info-soft);
  border: 1px solid color-mix(in srgb, var(--fv-accent) 30%, transparent);
  border-radius: var(--fv-radius);
  padding: 0.6rem 0.9rem;
  font-size: var(--fv-fs-sm);
  color: var(--fv-text);
}

.fv-ajuda > summary {
  cursor: pointer;
  color: var(--fv-accent);
  font-weight: var(--fv-fw-semibold);
  list-style: none;
}

.fv-ajuda > summary::-webkit-details-marker { display: none; }

.fv-ajuda > summary::before {
  content: "\f059"; /* fa-question-circle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.4rem;
}

.fv-ajuda[open] > summary { margin-bottom: 0.5rem; }

.fv-ajuda p:last-child { margin-bottom: 0; }

/* =========================================================================
   FILTROS
   ====================================================================== */
.fv-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.fv-filter-actions .btn {
  min-width: 110px;
}

/* Barra de filtros padrão — _FiltroBar.cshtml */
.fv-filtro-bar {
  border: 1px solid var(--fv-border);
}

.fv-filtro-avancado {
  background: var(--fv-surface-2);
}

.fv-filtro-chips {
  background: var(--fv-surface);
  border-top: 1px solid var(--fv-border);
}

.fv-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.15rem;
  font-size: var(--fv-fs-xs);
  line-height: 1.4;
  border-radius: 999px;
  background: var(--fv-accent-soft);
  color: var(--fv-accent);
  border: 1px solid var(--fv-accent);
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}

.fv-chip:hover,
.fv-chip:focus {
  background: var(--fv-accent);
  color: #fff;
  text-decoration: none;
}

.fv-chip i {
  font-size: 0.7em;
  opacity: 0.8;
}

/* =========================================================================
   TOAST
   ====================================================================== */
.fv-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--fv-z-toast);
  min-width: 320px;
  box-shadow: var(--fv-shadow-lg);
}

/* =========================================================================
   TELA DE BOAS-VINDAS (sem empresa selecionada)
   ====================================================================== */
body.fv-sem-empresa .content-wrapper,
body.fv-sem-empresa .main-footer {
  margin-left: 0 !important;
}

body.fv-sem-empresa .content-wrapper {
  background: linear-gradient(
    150deg,
    var(--fv-brand-300) 0%,
    var(--fv-brand-200) 35%,
    var(--fv-brand-100) 65%,
    var(--fv-brand-50) 100%
  );
  min-height: 100vh;
}

/* No tema escuro a tela de boas-vindas usa um degradê navy (o degradê azul
   claro acima é constante — não vem de token de tema). */
:root[data-fv-theme="dark"] body.fv-sem-empresa .content-wrapper {
  background: linear-gradient(150deg, var(--fv-surface) 0%, var(--fv-bg) 65%);
}

.fv-welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--fv-navbar-height));
}

.fv-welcome-logo img {
  max-width: 420px;
  width: 100%;
  opacity: 0.92;
  filter: drop-shadow(0 6px 24px rgba(11, 37, 69, 0.13));
}

/* Seleção do logo por tema (o navy some no fundo escuro; o branco some no claro).
   Troca de asset — não de token. */
.fv-welcome-logo--escuro { display: none; }

:root[data-fv-theme="dark"] .fv-welcome-logo--claro { display: none; }
:root[data-fv-theme="dark"] .fv-welcome-logo--escuro { display: block; }

.fv-welcome-hint {
  margin-top: 2.5rem;
  color: var(--fv-text-faint);
  font-size: var(--fv-fs-xs);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* =========================================================================
   TELA DE LOGIN / CONTA (Identity)
   Fundo próprio (bg_login.svg, derivado do kit): gradiente navy + grade +
   glow central + marca fantasma centralizada bem tênue. Sem marca de canto
   que corta em telas curtas. Escala em qualquer resolução (é vetor).
   ====================================================================== */
body.login-page,
.fv-login-bg {
  background-color: var(--fv-brand-900);
  background-image: url("/imagens/bg_login.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.login-page {
  padding: 1.5rem;
}

.login-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 384px;
}

.fv-login-logo {
  /* o PNG do logo tem margem interna generosa; a negativa aproxima do card */
  margin-bottom: -0.75rem;
  text-align: center;
}

.fv-login-logo img {
  width: 240px;
  max-width: 78%;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
}

.fv-login-title {
  font-size: var(--fv-fs-xl);
  font-weight: var(--fv-fw-semibold);
  color: #fff;
  letter-spacing: 0.2px;
  text-align: center;
}

.fv-login-subtitle {
  font-size: var(--fv-fs-sm);
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  margin-top: 0.15rem;
}

/* Card */
.fv-login-card {
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  background: var(--fv-surface);
  overflow: hidden;
}

.fv-login-card .login-card-body {
  /* O AdminLTE tem uma regra própria `.login-card-body { background-color:#fff }`
     em hex fixo (adminlte.min.css). Como esta regra aqui não declarava
     background, essa propriedade nunca era disputada — o branco do AdminLTE
     valia por padrão, mesmo com border-radius/padding/color já tokenizados.
     Resultado: card branco com texto claro do tema escuro em cima, ilegível. */
  background-color: var(--fv-surface);
  border-radius: 0;
  padding: 1.75rem 1.75rem 1.5rem;
  color: var(--fv-text);
}

.fv-login-card .login-box-msg {
  font-size: var(--fv-fs-lg);
  font-weight: var(--fv-fw-semibold);
  color: var(--fv-text);
  text-align: left;
  padding: 0;
  margin-bottom: 1.25rem;
}

/* Campos com ícone à direita — fundo branco, contorno visível, texto em cinza-azulado */
.fv-login-card .input-group {
  margin-bottom: 1rem;
}

.fv-login-card .input-group .form-control {
  height: calc(2.5rem + 2px);
  border-right: 0;
  background: var(--fv-surface);
  border-color: var(--fv-border-strong);
  color: var(--fv-text);
}

.fv-login-card .input-group .form-control::placeholder {
  color: var(--fv-text-soft);
}

.fv-login-card .input-group-append .input-group-text,
.fv-login-card .input-group-prepend .input-group-text {
  background: var(--fv-surface);
  border-color: var(--fv-border-strong);
  color: var(--fv-text-soft);
}

.fv-login-card .input-group .form-control:focus + .input-group-append .input-group-text {
  border-color: var(--fv-accent);
  color: var(--fv-accent);
}

.fv-login-card .btn-primary,
.fv-login-card .btn-block {
  height: calc(2.5rem + 2px);
  font-weight: var(--fv-fw-semibold);
}

.fv-login-card .btn-primary {
  background-color: var(--fv-accent);
  border-color: var(--fv-accent);
}

.fv-login-card .btn-primary:hover {
  background-color: var(--fv-accent-hover);
  border-color: var(--fv-accent-hover);
}

/* :not([class*="btn-"]) — mesmo idioma já usado em base.css para não roubar o
   texto branco de botões com variante de cor (btn-primary etc.) dentro do card. */
.fv-login-card a:not([class*="btn-"]) {
  color: var(--fv-accent);
  font-weight: var(--fv-fw-semibold);
}

.fv-login-card .icheck-primary label {
  color: var(--fv-text);
  font-weight: 400;
  font-size: var(--fv-fs-sm);
}

/* Rodapé fora do card */
.fv-login-footer {
  margin-top: 1.25rem;
}

.fv-login-footer a {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fv-fs-sm);
  text-decoration: none;
}

.fv-login-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.fv-login-footer .separator {
  color: rgba(255, 255, 255, 0.28);
  margin: 0 0.6rem;
}

.fv-login-copy {
  margin-top: 1.5rem;
  text-align: center;
  font-size: var(--fv-fs-xs);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}