/* ============================================================
   ui-nova.css — visual clean da nova navegação (2026-10-21)
   Aproxima o sistema do protótipo aprovado: fonte Figtree, fundo
   cinza-esverdeado claro, cabeçalho branco, cartões com borda fina
   (sem sombra pesada), títulos e campos no mesmo padrão em todas as
   telas. TUDO sob html.nav-nova (classe posta por js/nav-tema.js só
   com o menu novo ligado) — no menu atual nada muda.
   Carregado por último no <head> (depois de clean-ui.css).
   ============================================================ */

/* Figtree (SIL Open Font License — fonts/figtree/OFL.txt), servida pelo próprio sistema:
   a CSP (font-src 'self') não permite Google Fonts. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/figtree/figtree-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/figtree/figtree-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/figtree/figtree-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/figtree/figtree-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/figtree/figtree-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/figtree/figtree-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html.nav-nova {
  --ui-bg: #F5F7F6;
  --ui-card: #FFFFFF;
  --ui-line: #E1E8E6;
  --ui-line-2: #EEF2F1;
  --ui-head: #F7F9F9;
  --ui-ink: #00291E;
  --ui-text: #18231F;
  --ui-muted: #5A6A66;
  --ui-green: #009E76;
  --ui-green-2: #63C6A5;
  --ui-total: #EAF5F1;
  /* tokens do sistema usados pelos módulos */
  --off-white: #F5F7F6;
  --surface: #FFFFFF;
  --border: #E1E8E6;
  --text-muted: #5A6A66;
  --shadow-sm: none;
  --shadow-md: 0 4px 14px rgba(0, 41, 30, 0.08);
}

html.nav-nova body {
  font-family: 'Figtree', 'Aeonik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--ui-bg) !important;
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
}
html.nav-nova button, html.nav-nova input, html.nav-nova select, html.nav-nova textarea { font-family: inherit; }
html.nav-nova .app-layout > main, html.nav-nova main#main-content { background: var(--ui-bg); }

/* ── Cabeçalho claro (o protótipo não tem faixa escura no topo) ─────────── */
html.nav-nova .gh-header {
  background-color: var(--ui-card) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--ui-line);
  box-shadow: none;
}
html.nav-nova .gh-brand-name { color: var(--ui-ink); }
html.nav-nova .gh-divider { background-color: var(--ui-line); }
html.nav-nova .gh-breadcrumb-link, html.nav-nova .gh-breadcrumb-text { color: var(--ui-muted); }
html.nav-nova .gh-breadcrumb-link:hover { color: var(--ui-green); }
html.nav-nova .gh-breadcrumb-current { color: var(--ui-ink); font-weight: 600; }
html.nav-nova .gh-breadcrumb-sep { color: #B8C6C1; }
html.nav-nova .cp-trigger { background: var(--ui-head); border: 1px solid var(--ui-line); color: var(--ui-muted); }
html.nav-nova .cp-trigger:hover { background: #fff; border-color: var(--ui-green-2); }
html.nav-nova .cp-trigger .cp-kbd { background: #fff; border-color: var(--ui-line); color: var(--ui-muted); }
html.nav-nova .gcf-cycle { background: var(--ui-total); border: 1px solid #CBE7DC; border-radius: 999px; padding: 0.25rem 0.7rem; }
html.nav-nova .gcf-badge-label { color: var(--ui-ink); font-weight: 600; }
html.nav-nova .gh-api-status { background: var(--ui-head); }
html.nav-nova .gh-api-label, html.nav-nova .gh-user-name { color: var(--ui-text); }
html.nav-nova .gh-user-avatar { background: var(--ui-total); color: var(--ui-green); }
html.nav-nova .gh-logout-btn { color: var(--ui-muted); }

/* ── Títulos de tela ───────────────────────────────────────────────────── */
html.nav-nova .page-title, html.nav-nova .module-title, html.nav-nova .r-title,
html.nav-nova main h1 {
  color: var(--ui-ink);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
html.nav-nova .page-subtitle, html.nav-nova .module-subtitle, html.nav-nova .r-sub {
  color: var(--ui-muted);
  font-size: 0.875rem;
}
html.nav-nova .page-title-bar, html.nav-nova .module-header { margin-bottom: 1rem; }

/* ── Cartões: brancos, borda fina, sem sombra pesada ───────────────────── */
html.nav-nova .stat-card, html.nav-nova .kpi-card, html.nav-nova .card, html.nav-nova .table-card,
html.nav-nova .chart-card, html.nav-nova .r-panel, html.nav-nova .home-card, html.nav-nova .detail-panel,
html.nav-nova .summary-card, html.nav-nova .module-card, html.nav-nova .panel {
  background: var(--ui-card);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  box-shadow: none;
}
html.nav-nova .stat-card, html.nav-nova .kpi-card { padding: 0.875rem 1rem; }
html.nav-nova .stat-label, html.nav-nova .kpi-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ui-muted);
}
html.nav-nova .stat-value, html.nav-nova .kpi-value {
  color: var(--ui-ink);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Botões ────────────────────────────────────────────────────────────── */
html.nav-nova .button {
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8125rem;
  box-shadow: none;
}
html.nav-nova .button.primary { background: var(--ui-green); border-color: var(--ui-green); color: #fff; }
html.nav-nova .button.primary:hover { background: #008A67; }
/* .button.secondary tinha texto claro (invisível fora de fundo escuro): no tema novo é contornado. */
html.nav-nova .button.secondary { background: #fff; color: var(--ui-ink); border: 1px solid var(--ui-line); }
html.nav-nova .button.secondary:hover { border-color: var(--ui-green-2); background: #F2FAF7; }

/* ── Campos e barras de filtro ─────────────────────────────────────────── */
html.nav-nova .filter-select, html.nav-nova .form-select, html.nav-nova .r-select,
html.nav-nova .search-input, html.nav-nova main select, html.nav-nova main input[type="text"],
html.nav-nova main input[type="search"], html.nav-nova main input[type="number"], html.nav-nova main input[type="date"] {
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--ui-text);
  font-size: 0.8125rem;
}
html.nav-nova main select:focus, html.nav-nova main input:focus {
  outline: none;
  border-color: var(--ui-green-2);
  box-shadow: 0 0 0 3px rgba(99, 198, 165, 0.2);
}
html.nav-nova .toolbar, html.nav-nova .filters-bar, html.nav-nova .r-toolbar {
  background: var(--ui-card);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
}

/* ── Tabelas: linhas um pouco mais leves (o resto vem de clean-ui.css) ──── */
html.nav-nova main table { font-variant-numeric: tabular-nums; }
html.nav-nova main th { font-weight: 600; letter-spacing: 0.01em; }

/* ── Menu lateral: tom sólido do protótipo, rótulos de grupo mais leves ── */
html.nav-nova #eqi-sidebar { background-color: var(--ui-ink) !important; border-right: 0 !important; }
html.nav-nova #eqi-sidebar .sb-header { border-bottom-color: rgba(99, 198, 165, 0.10); }
html.nav-nova #eqi-sidebar .sb-group + .sb-group { border-top: 0; margin-top: 0.25rem; }
html.nav-nova #eqi-sidebar .sb-group-label { color: #7FA597; letter-spacing: 0.12em; padding-top: 0.75rem; }
html.nav-nova #eqi-sidebar .sb-link { color: #C9DED6; font-weight: 500; }
html.nav-nova #eqi-sidebar .sb-link:hover { color: #fff; }
html.nav-nova #eqi-sidebar .sb-link.is-active { background: rgba(0, 158, 118, 0.28); color: #fff; }
html.nav-nova #eqi-sidebar .sb-link.is-active .sb-icon { color: #63C6A5; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── Subtítulos longos: uma linha só; o texto completo aparece ao passar o mouse
   (title) e um clique expande/recolhe (js/nav-tema.js). A informação continua na
   tela, sem ocupar três linhas no topo de cada página. ── */
html.nav-nova .page-subtitle, html.nav-nova .module-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 80ch;
  cursor: pointer;
}
html.nav-nova .page-subtitle.is-aberto, html.nav-nova .module-subtitle.is-aberto {
  -webkit-line-clamp: unset;
  display: block;
}

/* ── Padrão de título + barra de abas em TODAS as telas (2026-10-21) ────────
   Mesmo tamanho/cor de título e subtítulo, mesmo respiro entre o bloco do título e a
   barra (a barra é inserida logo abaixo dele por module-tabs.js). */
html.nav-nova .cx-title, html.nav-nova .v-title, html.nav-nova .home-title {
  color: var(--ui-ink); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
}
html.nav-nova .cx-sub, html.nav-nova .v-sub, html.nav-nova .r-header .r-sub, html.nav-nova .rel-cab p {
  color: var(--ui-muted); font-size: 0.875rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 80ch; cursor: pointer;
}
html.nav-nova .cx-sub.is-aberto, html.nav-nova .v-sub.is-aberto, html.nav-nova .r-header .r-sub.is-aberto, html.nav-nova .rel-cab p.is-aberto { -webkit-line-clamp: unset; display: block; }
html.nav-nova .page-title-bar, html.nav-nova .module-header, html.nav-nova .r-header,
html.nav-nova .rel-cab, html.nav-nova .cx-header, html.nav-nova .v-header {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}
html.nav-nova .tg-shell { margin: 0 0 1.25rem !important; }
html.nav-nova .rel-page > .tg-shell { margin-bottom: 0.25rem !important; }   /* .rel-page já tem gap */
/* Telas de relatório novas (.rel-page usa gap de 1rem): mesmo respiro de 12px das demais. */
html.nav-nova .rel-page > .rel-cab { margin-bottom: 0 !important; }
html.nav-nova .rel-page > .tg-shell { margin-top: -0.25rem !important; }
/* Mesmo topo de conteúdo em todos os módulos (cada um tinha um padding próprio). */
html.nav-nova main, html.nav-nova .app-layout > main { padding-top: 2rem !important; }
/* Título sempre alinhado ao topo do cabeçalho (no Headcount ficava centralizado ao lado de
   botões mais altos e descia 4px em relação às outras telas). */
html.nav-nova .page-title-bar, html.nav-nova .module-header, html.nav-nova .r-header,
html.nav-nova .cx-header, html.nav-nova .v-header { align-items: flex-start !important; }