/* css/flowrh-visual.css — visual do Flow RH alinhado ao Hub (13/10/2026).
   Camada carregada DEPOIS de css/styles.css, só no vagas.html.
   styles.css é compartilhado com Encontro de Contas, Bonificação e
   Movimentações e NÃO é alterado: tudo aqui é sobreposição.
   Mudanças: fontes (DM Sans + Playfair no título), cores do Hub nos dois
   temas, malha parada no topo com duas correntes lentas, indicadores sem
   enfeite, títulos de seção em texto normal, dashboard na largura toda.
   Comportamento: js/flowrh-visual.js (só exibição). */

/* ── Tokens ─────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  --cream: #f4f5f8;          /* fundo da página */
  --white: #ffffff;          /* superfícies */
  --orange: #e2561a;
  --orange-lt: #ee6a2f;
  --orange-dim: rgba(226, 86, 26, 0.09);
  --r: 10px;
  --sh: 0 1px 2px rgba(15, 28, 46, 0.05), 0 6px 20px rgba(15, 28, 46, 0.05);

  /* cinzas frios no lugar dos cinzas quentes do tema claro antigo */
  --g50: #f8f9fb;
  --g100: #eef0f4;
  --g200: #e4e7ee;
  --g400: #8a94a6;
  --g600: #5f6b7e;
  --g800: #2a2f3a;
  --text: #141a24;

  --fv-line: #e4e7ee;
  --fv-grid: rgba(15, 28, 46, 0.055);
  --fv-fade: rgba(244, 245, 248, 0.8);
  --fv-chrome: #ffffff;
  --fv-chrome-fg: #141a24;
  --fv-chrome-muted: #5f6b7e;
  --fv-chrome-dim: #8a94a6;
  --fv-chrome-hover: #f4f5f8;
  --fv-chrome-line: #e4e7ee;
  --fv-accent-line: rgba(226, 86, 26, 0.35);
}
:root[data-theme="dark"] {
  --navy: #0d1420;
  --cream: #0b111d;
  --white: #111927;
  --orange: #eb5a1e;
  --orange-lt: #f37a45;
  --orange-dim: rgba(235, 90, 30, 0.12);
  --g50: #0f1622;
  --g100: rgba(196, 210, 235, 0.10);
  --g200: rgba(196, 210, 235, 0.16);
  --sh: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);

  --fv-line: rgba(196, 210, 235, 0.10);
  --fv-grid: rgba(196, 210, 235, 0.07);
  --fv-fade: rgba(11, 17, 29, 0.8);
  --fv-chrome: #0d1420;
  --fv-chrome-fg: #eef1f6;
  --fv-chrome-muted: #98a3b5;
  --fv-chrome-dim: #677386;
  --fv-chrome-hover: rgba(196, 210, 235, 0.05);
  --fv-chrome-line: rgba(196, 210, 235, 0.10);
  --fv-accent-line: rgba(235, 90, 30, 0.45);
}

/* ── Fontes ─────────────────────────────────────────────── */
body, .btn, .finp, .filter-select, .search-input, .theme-toggle-btn,
.notif-badge, .nav-badge, .user-avatar, .sidebar-label, .stat-value,
.card-head h3 { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* Fontes antigas escritas direto no HTML/JS (style="font-family:'Barlow…'") */
[style*="Barlow"] { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }

.ph-left h1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600; font-size: 30px; letter-spacing: -0.01em; line-height: 1.15;
  color: var(--text);
}
:root[data-theme="dark"] .ph-left h1 { color: var(--g800); }
.ph-left p { font-size: 14px; color: var(--g400); margin-top: 4px; }

/* ── Topbar e menu lateral ──────────────────────────────── */
.topbar { background: var(--fv-chrome); box-shadow: none; border-bottom: 1px solid var(--fv-chrome-line); }
.sidebar-toggle { border-right: 1px solid var(--fv-chrome-line); }
.logo-img { height: 46px; }
.fv-logo-claro { display: none; }
:root[data-theme="light"] .fv-logo-escuro { display: none; }
:root[data-theme="light"] .fv-logo-claro { display: block; }

.notif-btn, .theme-toggle-topbar { background: var(--white); border: 1px solid var(--fv-chrome-line); color: var(--fv-chrome-muted); }
.notif-btn svg { stroke: var(--fv-chrome-muted); }
.notif-btn:hover, .theme-toggle-topbar:hover { background: var(--white); border-color: var(--fv-accent-line); color: var(--orange); }
.notif-btn:hover svg { stroke: var(--orange); }
.notif-badge { border-color: var(--fv-chrome); }
.user-chip { background: var(--white); border: 1px solid var(--fv-chrome-line); }
.user-chip svg { stroke: var(--fv-chrome-dim) !important; }
.user-chip-name { color: var(--fv-chrome-fg); font-size: 13px; }
.user-avatar { background: var(--orange); color: #fff; font-weight: 700; }

.sidebar { background: var(--fv-chrome); border-right: 1px solid var(--fv-chrome-line); padding: 14px 10px 24px; }
.sidebar-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--fv-chrome-dim); padding: 14px 10px 6px; }
.nav-item, .nav-group-header { border-left: 0; border-radius: 8px; padding: 8px 10px; }
.nav-item span, .nav-group-header .nav-group-label { color: var(--fv-chrome-muted); font-size: 13.5px; }
.nav-item svg, .nav-group-header svg:first-child, .nav-group-arrow { stroke: var(--fv-chrome-muted); }
.nav-item:hover, .nav-group-header:hover, .nav-group.open .nav-group-header { background: var(--fv-chrome-hover); }
.nav-item:hover span, .nav-group-header:hover .nav-group-label { color: var(--fv-chrome-fg); }
.nav-item.active { background: var(--orange-dim); position: relative; }
.nav-item.active::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--orange); }
.nav-item.active span { color: var(--fv-chrome-fg); }
.nav-item.active svg { stroke: var(--orange); }
.nav-sub { border-left: 0; border-radius: 8px; padding: 7px 10px 7px 34px; }
.nav-sub span { color: var(--fv-chrome-muted); }
.nav-sub svg { stroke: var(--fv-chrome-dim); }
.nav-sub:hover { background: var(--fv-chrome-hover); }
.nav-sub.active { background: var(--orange-dim); }
.nav-sub.active span { color: var(--fv-chrome-fg); }
.nav-sub.active svg { stroke: var(--orange); }
.sidebar-divider { background: var(--fv-chrome-line); margin: 10px; }
.sidebar-footer { border-top-color: var(--fv-chrome-line); }

/* Contador de pendentes no menu: apagado com zero, laranja com pendência */
.nav-badge { border-radius: 999px; font-size: 11.5px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.nav-item .nav-badge { color: #fff; }
.nav-item .nav-badge.fv-zero { background: var(--g50); color: var(--fv-chrome-dim); border: 1px solid var(--fv-chrome-line); }

/* Voltar aos processos */
.fv-voltar {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px;
  border: 1px solid var(--fv-chrome-line); border-radius: 8px;
  color: var(--fv-chrome-muted); font-size: 13px; text-decoration: none;
}
.fv-voltar svg { width: 15px; height: 15px; stroke: currentColor; }
.fv-voltar:hover { color: var(--orange); border-color: var(--fv-accent-line); }

/* ── Fundo: malha parada no topo + duas correntes lentas ── */
/* Malha na área inteira; "local" faz ela rolar junto com o conteúdo */
.content {
  position: relative;
  background:
    linear-gradient(180deg, transparent 0%, transparent 30%, var(--fv-fade) 100%),
    linear-gradient(var(--fv-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--fv-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--cream);
  /* a 1ª camada (esmaecer) fica presa à tela; a malha rola com o conteúdo */
  background-attachment: scroll, local, local, local;
}
/* As correntes ficam só no topo e somem descendo */
.fv-fundo {
  position: absolute; left: 0; right: 0; top: 0; height: 340px; pointer-events: none; overflow: hidden; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.fv-fundo i { position: absolute; overflow: hidden; }
.fv-fundo .fv-h { left: 0; right: 0; top: 48px; height: 1px; }
.fv-fundo .fv-v { top: 0; bottom: 0; left: 576px; width: 1px; }
.fv-fundo i::after { content: ''; position: absolute; opacity: .55; }
.fv-fundo .fv-h::after { top: 0; left: -25%; width: 18%; height: 1px; background: linear-gradient(90deg, transparent, var(--orange), transparent); animation: fv-h 22s linear infinite; }
.fv-fundo .fv-v::after { left: 0; top: -40%; width: 1px; height: 35%; background: linear-gradient(180deg, transparent, var(--orange), transparent); animation: fv-v 17s linear infinite -6s; }
@keyframes fv-h { from { left: -25%; } to { left: 110%; } }
@keyframes fv-v { from { top: -40%; } to { top: 110%; } }
.page { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .fv-fundo i { display: none; } }

/* ── Botões, cards, tabelas, etiquetas ──────────────────── */
.btn { border-radius: 9px; }
.btn-primary { box-shadow: 0 6px 18px rgba(226, 86, 26, 0.22); }
.btn-primary:hover { background: var(--orange-lt); }
.btn-ghost { border: 1px solid var(--fv-line); }

.card { border-radius: 12px; border: 1px solid var(--fv-line); }
.card-head { padding: 14px 18px; border-bottom: 1px solid var(--fv-line); }
.card-head h3 { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
:root[data-theme="dark"] .card-head h3 { color: var(--g800); }
.card-head h3::before { display: none; }

.tbl th { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--fv-line); }
.tbl td { border-bottom: 1px solid var(--fv-line); }
.badge { border-radius: 999px; font-size: 12px; letter-spacing: 0; }

/* Indicadores: bolinha de cor, número, legenda. Sem borda colorida, círculo e ícone */
.stat-card { border-top: 0; border: 1px solid var(--fv-line); border-radius: 12px; gap: 4px; padding: 16px 18px; }
.stat-card.orange, .stat-card.green, .stat-card.blue, .stat-card.amber { border-top-color: var(--fv-line); }
.stat-card::after, .stat-icon { display: none; }
.stat-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--g400); }
.stat-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--g400); flex: none; }
.stat-card.orange .stat-label::before { background: var(--blue); }
.stat-card.green  .stat-label::before { background: var(--green); }
.stat-card.amber  .stat-label::before { background: var(--orange); }
.stat-value { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .stat-value { color: var(--g800); }
.stat-delta { font-size: 12.5px; }
/* Card de pendências: apagado com zero, laranja quando há algo para aprovar */
.stat-card.fv-quieto .stat-value { color: var(--g400); }
.stat-card.amber.fv-alerta { border-color: var(--fv-accent-line); background: linear-gradient(var(--orange-dim), var(--orange-dim)), var(--white); }
.stat-card.fv-alerta .stat-value { color: var(--orange); }
.stat-card.fv-alerta .stat-delta { color: var(--orange); font-weight: 600; }

/* ── Dashboard ──────────────────────────────────────────── */
#page-dashboard .page-wrap { max-width: none; }
.stats-grid { gap: 14px; margin-bottom: 22px; }
#page-dashboard .two-col { gap: 14px; align-items: start; }
#page-dashboard .card { margin-bottom: 0; }
table:has(.fv-vazio) thead { display: none; }
.fv-vazio td { padding: 0 !important; cursor: default; }
.fv-vazio:hover td { background: transparent !important; }
.fv-vazio-box { display: flex; align-items: center; gap: 14px; padding: 20px 18px; text-align: left; }
.fv-vazio-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--green-lt); color: var(--green); flex: none; }
.fv-vazio-ico svg { width: 20px; height: 20px; }
.fv-vazio-box strong { display: block; font-size: 14px; color: var(--text); }
:root[data-theme="dark"] .fv-vazio-box strong { color: var(--g800); }
.fv-vazio-box span { font-size: 13px; color: var(--g400); }

@media (max-width: 1100px) {
  #page-dashboard .two-col { grid-template-columns: minmax(0, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Campos no tema escuro: ícone nativo do input date (calendário) claro, senão
   some no fundo escuro e o usuário não acha onde clicar para abrir o seletor */
:root[data-theme="dark"] .finp { color-scheme: dark; }

/* Busca do topo: o texto digitado tinha cor branca fixa (ilegível no tema claro) */
.topbar-search { background: var(--white); border: 1px solid var(--fv-chrome-line); border-radius: 9px; }
.topbar-search svg { stroke: var(--fv-chrome-dim); }
.topbar-search input { color: var(--fv-chrome-fg) !important; }
.topbar-search input::placeholder { color: var(--fv-chrome-dim); }

/* ── Controle de Vagas + Painel Diretoria (fase 03, 15/10/2026) ── */
#page-admin-vagas .page-wrap, #page-admin-diretoria .page-wrap { max-width: none; }
.cv-contadores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.cv-cont { background: var(--white); border: 1px solid var(--fv-line); border-radius: var(--r); padding: 10px 12px; }
.cv-cont span { display: block; font-size: 11.5px; color: var(--g600); }
.cv-cont strong { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .cv-cont strong { color: var(--g800); }
.cv-filtros { padding: 12px 16px; border-bottom: 1px solid var(--g100); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cv-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g600); cursor: pointer; }
.cv-total { margin-left: auto; font-size: 12.5px; color: var(--g400); }
.cv-aviso { padding: 8px 16px; font-size: 13px; border-bottom: 1px solid var(--g100); }
.cv-aviso-erro { background: var(--red-lt); color: var(--red); }
.cv-scroll { overflow-x: auto; }
.cv-tabela { min-width: 1700px; }
.cv-tabela th { white-space: nowrap; cursor: pointer; user-select: none; }
.cv-tabela th.cv-sort-asc::after { content: ' ▲'; font-size: 9px; }
.cv-tabela th.cv-sort-desc::after { content: ' ▼'; font-size: 9px; }
.cv-tabela tr { cursor: default; }
.cv-tabela td { vertical-align: middle; font-size: 13px; }
.cv-nowrap { white-space: nowrap; }
.cv-num { text-align: right; font-variant-numeric: tabular-nums; }
.cv-msg { text-align: center; padding: 28px; color: var(--g400); }
.cv-link { color: var(--orange); font-weight: 600; text-decoration: none; }
.cv-link:hover { text-decoration: underline; }
.cv-legado { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--g100); color: var(--g600); margin-left: 4px; }
.cv-edit { font-size: 12.5px; padding: 5px 7px; border: 1.5px solid var(--g200); border-radius: 6px; background: var(--white); color: var(--text); }
.cv-edit:focus { border-color: var(--orange); outline: none; }
.cv-edit-txt { min-width: 120px; }
.cv-edit-data { min-width: 128px; }
.cv-edit-sel { min-width: 100px; }
.cv-edit.cv-salvando { border-color: var(--blue); }
.cv-edit.cv-salvo { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-lt); }
.cv-edit.cv-erro { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-lt); }
:root[data-theme="dark"] .cv-edit { color-scheme: dark; }
.cv-faixa { white-space: nowrap; }
.cv-f-ok      { background: var(--green-lt); color: var(--green); } .cv-f-ok::before      { background: var(--green); }
.cv-f-atencao { background: var(--amber-lt); color: var(--amber); } .cv-f-atencao::before { background: var(--amber); }
.cv-f-critica { background: var(--orange-dim); color: var(--orange); } .cv-f-critica::before { background: var(--orange); }
.cv-f-muito   { background: var(--red-lt); color: var(--red); } .cv-f-muito::before   { background: var(--red); }
@media (max-width: 1100px) { .cv-contadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Painel: folha clara nos dois temas (é o que vai para o e-mail e o PDF) */
.pd-folha { background: #ffffff; color: #141a24; border: 1px solid var(--fv-line); border-radius: var(--r); padding: 18px 20px; max-width: 1000px; }
.pd-folha .cv-msg { color: #8a94a6; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  .sidebar, .topbar, .pd-no-print { display: none !important; }
  .page:not(#page-admin-diretoria) { display: none !important; }
  .app-wrap, .content, .page-wrap { margin: 0 !important; padding: 0 !important; max-width: none !important; overflow: visible !important; height: auto !important; }
  .pd-folha { border: none; padding: 0; max-width: none; }
  .pd-grupo { break-inside: avoid; }
  body { background: #ffffff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Faixa "dados em conferência" (histórico importado em 15/10/2026) */
.cv-conf { display: flex; align-items: flex-start; gap: 12px; background: var(--amber-lt); color: var(--amber); border: 1px solid var(--amber); border-radius: var(--r); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.45; }
.cv-conf span { flex: 1; }
.cv-conf-fechar { background: none; border: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.cv-conf-fechar:hover { opacity: .7; }