/* ================================================================
   PAGES REFACTOR — classes globais do design language "Automação EAR"
   para uso em TODAS as páginas (complementa o bloco global de
   zz_theme_dark.css: .page-hero/.chip/.kpi-strip/.theme-table).
   Cores SEMPRE via vars --theme-* (claro/escuro automático).
   Arquivo congelado após a Fase 0 da refatoração — adições somente
   pelo orquestrador entre ondas.
   ================================================================ */

/* --- moldura de tabela (versão global do .aear-page .aear-tablewrap) ---
   Uso: html.Div(className="theme-tablewrap theme-table", children=[tabela])
   .theme-table (zz_theme_dark.css) dá borda/radius/fundo/sombra;
   .theme-tablewrap garante rolagem horizontal interna (a página nunca
   rola lateralmente) e zera margens de tabela filha. */
.theme-tablewrap {
  overflow-x: auto;
  max-width: 100%;
}
.theme-tablewrap > table { margin-bottom: 0; }

/* --- tabela HTML5 semântica dentro de .theme-table ---
   (o bloco global só cobre DataTable via .dash-spreadsheet-container) */
.theme-table table {
  width: 100%;
  border-collapse: collapse;
  color: var(--theme-ink);
  font-size: 13px;
}
.theme-table thead th {
  background: var(--theme-panel2);
  color: var(--theme-ink);
  font-weight: 600;
  text-align: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--theme-line);
  white-space: nowrap;
}
.theme-table tbody td {
  padding: 6px 9px;
  text-align: center;
  border-bottom: 1px solid var(--theme-line);
  background: transparent;
}
.theme-table tbody tr:nth-child(even) td { background: var(--theme-panel2); }
.theme-table tbody tr:last-child td { border-bottom: none; }
.theme-table tbody tr:hover td { background: rgba(148, 214, 0, .07); }
html[data-theme="dark"] .theme-table tbody tr:hover td {
  background: rgba(164, 206, 78, .10);
}

/* --- card padrão de conteúdo (substitui o dict inline repetido:
   border 1px var(--theme-line) + radius 12px + bg var(--theme-panel)) ---
   Uso: html.Section(className="theme-card") / html.Div(className="theme-card") */
.theme-card {
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  background: var(--theme-panel);
  padding: 16px 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}
html[data-theme="dark"] .theme-card { box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
.theme-card + .theme-card { margin-top: 14px; }

/* painel de filtros (mesma pele do card, padding menor) */
.filters-panel {
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-panel);
  padding: 12px 14px;
}

/* --- título de seção dentro de card/section (H3/H4 serif discreto) --- */
.theme-card h3, .theme-card h4,
.section-title {
  font-family: var(--theme-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--theme-ink);
  margin: 0 0 10px;
}
.section-title em { font-style: italic; color: var(--comerc-green); }
html:not([data-theme="dark"]) .section-title em { color: #6BA800; }

/* --- rótulo de filtro / textos auxiliares --- */
.filter-label {
  color: var(--theme-mut);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 4px;
  display: block;
}
.theme-note { color: var(--theme-dim, var(--theme-mut)); font-size: 12px; }
.theme-legend { color: var(--theme-dim, var(--theme-mut)); font-size: 11.5px; }
.theme-legend .sw {
  display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  margin-right: 5px; vertical-align: -2px;
}