/* Tema visual — cores da Arati Distribuidora (autorizada Coca-Cola), mesma
   paleta do arati-financeiro / arati-fill-rate / arati-checklist. */

:root {
  --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-primary: #F40009;
  --pico-primary-background: #F40009;
  --pico-primary-border: #F40009;
  --pico-primary-underline: #F40009;
  --pico-primary-hover: #C40007;
  --pico-primary-hover-background: #C40007;
  --pico-primary-hover-border: #C40007;
  --pico-primary-hover-underline: #C40007;
  --pico-primary-focus: rgba(244, 0, 9, 0.375);
  --pico-primary-inverse: #FFFFFF;

  --pico-background-color: #FFFFFF;
  --pico-color: #1A1A1A;
  --pico-h1-color: #1A1A1A;
  --pico-h2-color: #1A1A1A;
  --pico-h3-color: #1A1A1A;

  --pico-card-background-color: #F5F5F5;
  --pico-card-sectioning-background-color: #F5F5F5;
  --pico-table-row-stripped-background-color: #F5F5F5;
}

a:not([role="button"]) {
  color: var(--pico-primary);
}


.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.marca { margin-bottom: 0.25rem; }
.marca span { color: var(--pico-primary); }

.filtros { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.filtros label { flex: 0 1 14rem; }
.filtro-ativo { margin-bottom: 0.75rem; color: var(--pico-muted-color); }

.aviso {
  padding: 0.75rem 1rem;
  border-left: 4px solid #E0A800;
  background: #FFF6DA;
  border-radius: var(--pico-border-radius);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: var(--pico-block-spacing-vertical);
}
.kpi { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }
.kpi { padding: 1rem; }
.kpi strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi span, .kpi small { color: var(--pico-muted-color); font-size: 0.85rem; }

article > header { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; justify-content: space-between; }
article > header small { color: var(--pico-muted-color); }

table.numerica > * > tr > td:not(:first-child),
table.numerica > * > tr > th:not(:first-child),
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

table.clicavel > tbody > tr[hx-get] { cursor: pointer; }
table.clicavel > tbody > tr[hx-get]:hover td { background: #FDE6E7; }

.linha-total td { font-weight: 700; border-top: 2px solid var(--pico-color); }

.bom { color: #1B7F3B; }
.ruim { color: #C40007; }
.alerta { color: #8A5A00; }

tr.sub > td { padding: 0; border: 0; }
tr.sub > td:not(:empty) { padding: 0.5rem 0 1rem 1rem; }
.lancamentos {
  /* width 0 + min-width 100%: a lista nao alarga as colunas da tabela de contas. */
  width: 0; min-width: 100%;
  max-height: 26rem; overflow: auto;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  padding: 0.5rem; margin-bottom: 0.5rem;
}
.lancamentos table { font-size: 0.8rem; margin-bottom: 0.5rem; }
.lancamentos td { white-space: nowrap; }
.fechar { padding: 0.25rem 0.75rem; font-size: 0.85rem; width: auto; margin: 0; }
.lancamentos-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }

/* Enquanto o HTMX busca (hx-indicator), apaga o bloco pra mostrar que esta carregando. */
.carregavel.htmx-request { opacity: 0.45; transition: opacity 150ms; }

/* Importacao do CSV (so admin), no fim da tela. */
.upload { margin-top: 1rem; }
.upload > summary[role="button"] { width: auto; display: inline-block; }
.upload form { margin-top: 0.75rem; }
.upload .datas { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.upload .datas label { flex: 0 1 12rem; }
.upload .acoes { display: flex; gap: 0.5rem; }
.upload .acoes button { width: auto; }
.ok { padding: 0.75rem 1rem; border-left: 4px solid #1B7F3B; background: #E3F2E7; border-radius: var(--pico-border-radius); }
.erro { padding: 0.75rem 1rem; border-left: 4px solid #C40007; background: #FDE6E7; border-radius: var(--pico-border-radius); }
table.compacta { font-size: 0.85rem; }
table.compacta button { padding: 0.15rem 0.6rem; font-size: 0.8rem; width: auto; margin: 0; }
.substituida td { color: var(--pico-muted-color); }

/* Duas tabelas lado a lado (revendas x departamentos). */
.lado-a-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 1.5rem; }
.tabela-rolavel { overflow-x: auto; }
.kpi .chip { font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: #EDEDEB; color: var(--pico-color); white-space: nowrap; align-self: flex-start; }
.kpi .chip.ruim { background: #FDE6E7; color: #C40007; }
.kpi .chip.bom { background: #E3F2E7; color: #1B7F3B; }
.rank { color: var(--pico-muted-color); width: 2.5rem; }
.historico { font-size: 0.82rem; margin-bottom: 0.25rem; }

/* Evolucao (static/js/evolucao.js): barras = ritmo mensal das horas a pagar por
   periodo, vermelho Coca-Cola; periodo em andamento vazado. Texto nas cores de texto. */
.grafico-barras {
  --serie: #F40009; --grade: #e1e0d9; --eixo: #c3c2b7; --rotulo: #6b6a65;
  position: relative; width: 100%; overflow: hidden; margin-bottom: 0.75rem;
}
.grafico-barras svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.grafico-barras svg:focus { outline: 2px solid var(--serie); outline-offset: 2px; }
.grafico-barras .grade { stroke: var(--grade); stroke-width: 1; }
.grafico-barras .eixo { stroke: var(--eixo); stroke-width: 1; }
.grafico-barras .rotulo { fill: var(--rotulo); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico-barras .valor { fill: var(--pico-color); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grafico-barras .barra { fill: var(--serie); }
.grafico-barras .barra.parcial { fill: #fff; stroke: var(--serie); stroke-width: 1.5; }
.grafico-barras .barra.apagada { opacity: 0.35; }
.grafico-barras .alvo { fill: transparent; }
.grafico-barras .faixa { fill: rgba(11, 11, 11, 0.04); }
.dica {
  position: absolute; top: 0.5rem; z-index: 2; pointer-events: none;
  background: #fff; border: 1px solid rgba(11, 11, 11, 0.12); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); padding: 0.4rem 0.6rem; font-size: 0.78rem; white-space: nowrap;
}
.dica-mes { color: var(--pico-muted-color); margin-bottom: 0.15rem; }
.dica b { font-variant-numeric: tabular-nums; }
.dica-valor { color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
.legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.85rem; color: var(--pico-muted-color); margin-bottom: 0.5rem; }
.legenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.chave-barra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: #F40009; }
.chave-barra.parcial { background: #fff; border: 1.5px solid #F40009; }
.contents { display: contents; }
/* Colunas de texto em tabela numerica (nome, revenda, departamento). */
table.numerica > * > tr > th.txt, table.numerica > * > tr > td.txt { text-align: left; white-space: normal; }
table.compacta > * > tr > th, table.compacta > * > tr > td { padding: 0.45rem 0.5rem; }