/* ============================================================
   clean-ui.css — Camada visual "clean" do sistema inteiro
   EQI Budget System  |  Controlling

   Carregado por ÚLTIMO no <head> de todas as telas, depois do CSS
   do módulo. Não muda layout nem comportamento: só suaviza o que
   pesava na leitura, no mesmo padrão já aplicado em /auc-aum/,
   /revenue/ e no resumo de /opex/:

     • cabeçalho de tabela claro (antes: faixa verde-escura com
       texto branco) — continua fixo (sticky) onde já era;
     • linhas divisórias mais leves, sem zebra verde;
     • totais em verde suave com linha verde em cima (antes:
       faixa verde-escura ou verde 20%);
     • cabeçalhos de card/gráfico claros, título escuro.

   Por que um arquivo só em vez de editar os ~20 CSS de módulo:
   a mudança fica centralizada e reversível (basta remover o
   <link>). Os seletores repetem os do módulo com prefixo "html"
   (+1 de especificidade) para vencer sem depender da ordem; onde
   o módulo usa !important, aqui também é preciso.

   Tokens locais (não conflitam com ../styles.css):
   ============================================================ */
:root {
  --cu-head-bg:     #F7F9F9;  /* fundo do cabeçalho de tabela (opaco — sticky) */
  --cu-head-fg:     var(--text-muted, #5A6A66);
  --cu-line:        #EEF2F1;  /* divisória entre linhas */
  --cu-hover:       #F4F8F7;
  --cu-total-bg:    #EAF5F1;  /* linha de total geral */
  --cu-total-strong:#DDEFE8;  /* célula "Total Ano" dentro da linha de total */
  --cu-subtotal-bg: #F4FAF8;  /* subtotais / coluna de total */
  --cu-green:       var(--green-primary, #009E76);
  --cu-dark:        var(--green-dark, #00291E);
}

/* ============================================================
   1. CABEÇALHOS DE TABELA — de verde-escuro para claro
   ============================================================ */
html .accounts-table thead,        html .accounts-table thead tr,        html .accounts-table th,
html .cc-table thead,              html .cc-table thead tr,              html .cc-table th,
html .cf-table thead,              html .cf-table thead tr,              html .cf-table thead th,
html .da-table thead,              html .da-table thead tr,              html .da-table thead th,
html .projection-table thead,      html .projection-table thead tr,      html .projection-table thead th,
html .fd-table thead tr:first-child th,
html .drivers-table thead,         html .drivers-table thead tr,         html .drivers-table th,
html .hc-summary-table thead,      html .hc-summary-table thead tr,      html .hc-summary-table th,
html .opex-table thead,            html .opex-table thead tr,            html .opex-table thead th,
html .boaas-table thead th,
html .opx-mtx-table thead th,
html .via-qty-table th,
html .rd-table thead th,
html .rhc-table thead th,
html .rri-table thead th,
html .reports-table thead,         html .reports-table thead tr,         html .reports-table thead th,
html .rr-table thead th,
html .rra-table thead th,
html .suppliers-table thead,       html .suppliers-table thead tr,       html .suppliers-table th,
html .csv-preview th,
html .pa-table thead th:first-child {
  background: var(--cu-head-bg);
  color: var(--cu-head-fg);
}

/* th: peso e divisória inferior uniformes (tamanho/caixa ficam os do módulo) */
html .accounts-table th, html .cc-table th, html .cf-table thead th, html .da-table thead th,
html .projection-table thead th, html .fd-table thead tr:first-child th, html .drivers-table th,
html .hc-summary-table th, html .opex-table thead th, html .boaas-table thead th,
html .opx-mtx-table thead th, html .via-qty-table th, html .rd-table thead th,
html .rhc-table thead th, html .rri-table thead th, html .reports-table thead th,
html .rr-table thead th, html .rra-table thead th, html .suppliers-table th, html .csv-preview th {
  font-weight: 600;
  border-bottom: 1px solid var(--border, #D0DCDA);
}

/* Colunas ordenáveis: hover em verde-escuro (antes: branco) */
html .accounts-table th.sortable:hover,
html .cc-table th.sortable:hover,
html .drivers-table th.sortable:hover,
html .suppliers-table th.sortable:hover { color: var(--cu-dark); }

/* Colunas de "Total" no cabeçalho: verde suave sobre o fundo claro */
html .cf-table thead .total-col,
html .projection-table thead .proj-total-col {
  background: #EAF5F1;
  color: var(--cu-dark);
  border-left: 1px solid var(--border, #D0DCDA) !important;
}
html .reports-table thead th.col-sep { border-left: 1px solid var(--border, #D0DCDA); }

/* ============================================================
   2. CORPO — divisórias leves, sem zebra verde
   ============================================================ */
html .accounts-table tbody td, html .cc-table tbody td, html .cf-table tbody td,
html .da-table tbody td, html .projection-table tbody td, html .fd-table tbody td,
html .drivers-table tbody td, html .hc-summary-table tbody td, html .opex-table tbody td,
html .boaas-table tbody td, html .opx-mtx-table tbody td, html .rd-table tbody td,
html .rhc-table tbody td, html .rri-table tbody td, html .reports-table tbody td,
html .rr-table tbody td, html .rra-table tbody td, html .suppliers-table tbody td,
html .data-table tbody td, html .fopag-table tbody td {
  border-bottom-color: var(--cu-line);
}

html .rd-table tbody tr:nth-child(even),
html .rhc-table tbody tr:nth-child(even),
html .rri-table tbody tr:nth-child(even) { background: #FAFBFB; }

html .boaas-table tbody tr:nth-child(even) { background: transparent; }
html #boaas-auc-card .boaas-table tbody tr:nth-child(even) td:first-child { background: #fff; }
html .boaas-table tbody tr:hover td,
html #boaas-auc-card .boaas-table tbody tr:hover td:first-child { background: var(--cu-hover); }

/* Números sempre com dígitos de largura fixa (colunas alinhadas) */
html .accounts-table td, html .cc-table td, html .cf-table td, html .da-table td,
html .projection-table td, html .fd-table td, html .drivers-table td, html .hc-summary-table td,
html .opex-table td, html .boaas-table td, html .opx-mtx-table td, html .rd-table td,
html .rhc-table td, html .rri-table td, html .reports-table td, html .rr-table td,
html .rra-table td, html .suppliers-table td {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   3. TOTAIS — verde suave + linha verde em cima
   ============================================================ */
html .grand-total-row { background: var(--cu-total-bg); }
html .grand-total-row td {
  border-top: 2px solid var(--cu-green);
  color: var(--cu-dark);
}
html .total-cell--grand { background: var(--cu-total-strong); }

/* Relatórios (/reports/): rodapé era faixa verde-escura */
html .reports-table tfoot tr {
  background: var(--cu-total-bg);
  color: var(--cu-dark);
}
html .reports-table tfoot td { border-top: 2px solid var(--cu-green); }

/* D&A — projeção */
html .projection-table tfoot td { border-top: 2px solid var(--cu-green); }

/* BoaaS — subtotal (era verde 20%) e total geral (era verde-escuro) */
html .boaas-auc-total-row td,
html #boaas-auc-card .boaas-auc-total-row td:first-child {
  background: var(--cu-subtotal-bg) !important;
  border-bottom: 1px solid var(--border, #D0DCDA);
}
html .boaas-row-grand-total td {
  background: var(--cu-total-bg) !important;
  border-top: 2px solid var(--cu-green);
}
html .boaas-auc-total-geral-row td,
html #boaas-auc-card .boaas-auc-total-geral-row td:first-child {
  background: var(--cu-total-bg) !important;
  color: var(--cu-dark);
  border-top: 2px solid var(--cu-green);
}

/* Headcount — FOPAG */
html .fopag-summary-row th, html .fopag-summary-row td,
html .fopag-table tr.row-total th, html .fopag-table tr.row-total td {
  background: var(--cu-total-bg);
  border-top: 2px solid var(--cu-green);
  border-bottom-color: var(--cu-line);
}

/* ============================================================
   4. CABEÇALHOS DE CARD / GRÁFICO — claros, título escuro
   ============================================================ */
html .chart-card-hdr,
html .waterfall-card-hdr {
  background: transparent;
  border-bottom: 1px solid var(--cu-line);
}
html .chart-card-title,
html .waterfall-card-title {
  color: var(--cu-dark);
  font-size: 0.9375rem;
}
html .chart-card-sub { color: var(--text-muted, #5A6A66); }

/* Headcount — linha-título dos blocos da FOPAG (tinha botão branco) */
html .fopag-title-row th {
  background: var(--cu-head-bg);
  color: var(--cu-head-fg);
  border-bottom: 1px solid var(--border, #D0DCDA);
}
html .fopag-toggle-btn { color: var(--cu-dark); }
html .fopag-toggle-btn:hover { background: rgba(0, 41, 30, 0.04); }

/* AuC/AuM — cabeçalho de cada produto nas telas de input */
html .pa-produto-header {
  background: var(--cu-head-bg);
  color: var(--cu-dark);
  border-bottom: 1px solid var(--border, #D0DCDA);
}
html .pa-produto-header .rr-tipo-badge--volume { background: #EFF6FF; color: #1D4ED8; }
html .pa-produto-header .rr-tipo-badge--auc    { background: #ECFDF5; color: #047857; }

/* OPEX Viagens — cabeçalho da árvore de viagens */
html .tree-head.trip-tree-head,
html .tree-head .tree-cnt,
html .tree-head .tree-tot {
  background: var(--cu-head-bg);
  color: var(--cu-head-fg);
}
html .tree-head.trip-tree-head { border-bottom: 1px solid var(--border, #D0DCDA); }

/* ============================================================
   5. UNIDADE E ZEROS NAS TABELAS SOMENTE LEITURA
   A unidade ("Valores em R$") aparece uma vez, acima da tabela;
   as células trazem só o número e o zero vira um traço claro.
   ============================================================ */
.cu-unit-note {
  margin: 0;
  padding: 0.625rem 1rem;
  font-size: 0.75rem;
  color: var(--text-muted, #5A6A66);
  border-bottom: 1px solid var(--cu-line);
}
.cell-zero { color: var(--border, #D0DCDA); }

/* ── Breadcrumb único (Etapa 1 da nova navegação, 2026-10-21) ─────────────
   48 telas ainda desenhavam uma trilha própria dentro da página, repetindo o
   breadcrumb do cabeçalho (header.js → .gh-breadcrumb) e com links antigos
   ("Início" → ../../index.html). Fica escondida, não apagada: module-tabs.js
   ainda usa o elemento como âncora para posicionar a barra de abas. */
html .breadcrumb:not(.gh-breadcrumb) { display: none !important; }