/*
 * Tema v2 - ligação com o sistema (etapa 1)
 *
 * O theme-v2.css (do pacote do protótipo) só troca VALORES de variáveis. As fontes novas
 * precisam ser aplicadas, porque o core.css escreve 'Inter' direto no body.
 * Regra do README: títulos e números em Plus Jakarta Sans, texto em DM Sans,
 * números de tabela e de indicador com algarismos de largura fixa.
 * Carregar DEPOIS do theme-v2.css.
 */
body {
    font-family: var(--tc-font-body);
}

h1, h2, h3, h4,
.modal-title,
.card-header h3,
.stat-valor, .stat-value, .resumo-valor, .resumo-numero, .metrica-valor, .kpi-value, .metric-value {
    font-family: var(--tc-font-display);
}

.stat-valor, .stat-value, .resumo-valor, .resumo-numero, .metrica-valor, .kpi-value, .metric-value,
table td, table th {
    font-variant-numeric: tabular-nums;
}

/* Campos e botões herdam a fonte do texto (o navegador usa a do sistema por padrão) */
button, input, select, textarea {
    font-family: inherit;
}

/* Cabeçalho fixo em vidro. O tema deixa --header-bg transparente; como o cabeçalho do sistema
   fica preso no topo, sem fundo o conteúdo passaria por trás do título ao rolar. */
header {
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
}

/* Camadas que ficam por cima de outro conteúdo precisam de fundo sólido
   (o --card-bg do tema é translúcido). */
.busca-global-resultados,
.autocomplete-results {
    background: var(--tc-surface-solid);
}

/* Menu lateral: texto longo numa linha só, cortado com reticências (como no protótipo) */
.sidebar-menu a span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Escala de cinzas no tema escuro. O theme-v2.css não redefine --gray-*, e o sistema usa os
   claros (50-300) como FUNDO de caixas e campos e os escuros (500-900) como COR DE TEXTO.
   No escuro a escala se inverte: fundos viram brancos translúcidos, textos viram claros.
   Só vale com o tema escuro ligado (hoje desligado: <html data-theme="light">). */
:root[data-theme="dark"] {
    --gray-50: rgba(255, 255, 255, .04);
    --gray-100: rgba(255, 255, 255, .07);
    --gray-200: rgba(255, 255, 255, .12);
    --gray-300: rgba(255, 255, 255, .18);
    --gray-400: #8296a6;
    --gray-500: #a3b4c0;
    --gray-600: #b8c6d0;
    --gray-700: #cfdbe3;
    --gray-800: #e3ecf1;
    --gray-900: #eaf2f6;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gray-50: rgba(255, 255, 255, .04);
        --gray-100: rgba(255, 255, 255, .07);
        --gray-200: rgba(255, 255, 255, .12);
        --gray-300: rgba(255, 255, 255, .18);
        --gray-400: #8296a6;
        --gray-500: #a3b4c0;
        --gray-600: #b8c6d0;
        --gray-700: #cfdbe3;
        --gray-800: #e3ecf1;
        --gray-900: #eaf2f6;
    }
}

/* Cores fixas convertidas (texto, fundos claros neutros e bordas claras).
   As telas usam var(--tc-dk-*, <cor original>). Essas variáveis SÓ existem no escuro:
   no claro vale a cor original, sem nenhuma mudança. --dark (roxo da marca) é cor de título;
   no escuro vira claro. */
:root[data-theme="dark"] {
    --tc-dk-ink: #eaf2f6;
    --tc-dk-ink-2: #a3b4c0;
    --tc-dk-soft: rgba(255, 255, 255, .05);
    --tc-dk-line: rgba(255, 255, 255, .10);
    --tc-dk-ok-bg: rgba(16, 185, 129, .16);
    --tc-dk-ok-ink: #4adeb0;
    --tc-dk-warn-bg: rgba(245, 158, 11, .18);
    --tc-dk-bad-bg: rgba(239, 68, 68, .18);
    --tc-dk-info-bg: rgba(68, 191, 225, .14);
    --tc-dk-info-ink: #7fd3ec;
    --dark: #eaf2f6;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tc-dk-ink: #eaf2f6;
        --tc-dk-ink-2: #a3b4c0;
        --tc-dk-soft: rgba(255, 255, 255, .05);
        --tc-dk-line: rgba(255, 255, 255, .10);
        --tc-dk-ok-bg: rgba(16, 185, 129, .16);
        --tc-dk-ok-ink: #4adeb0;
        --tc-dk-warn-bg: rgba(245, 158, 11, .18);
        --tc-dk-bad-bg: rgba(239, 68, 68, .18);
        --tc-dk-info-bg: rgba(68, 191, 225, .14);
        --tc-dk-info-ink: #7fd3ec;
        --dark: #eaf2f6;
    }
}

/* Painel do Mês (motor/painel/conteudo.php) define as próprias cores em .mf-painel.
   No escuro, damos valores escuros a elas aqui, sem tocar no arquivo do motor. */
:root[data-theme="dark"] .mf-painel {
    --tinta: #eaf2f6;
    --tinta-fraca: #a3b4c0;
    --linha: rgba(255, 255, 255, .10);
    --carta: var(--tc-surface-solid);
    --azul: #7fd0ee;
    --neutro: #8296a6;
}