/* Tokens de cor dos gráficos e dashboards (--viz-*). ÚNICA fonte de cor de gráfico: o JS lê estas variáveis (dash-viz.js)
   e o CSS dos cartões usa var(--viz-*). Claro e escuro são passos próprios da mesma paleta, validados contra a superfície do
   gráfico em cada modo: node FrontEnd/Web/tools/dash-cores/dash-cores-check.js (zero FAIL). Não digite hex de gráfico fora daqui.
   Categóricas em ordem fixa (nunca ciclar; filtro não repinta quem sobrou). Status é fixo e sempre vem com ícone + rótulo. */

:root {
    /* superfície onde o gráfico é desenhado: o azul-claro dos cartões do tema (o mesmo dos cards do Painel/Fábrica), não o branco */
    --viz-surface: #dde8f5;
    --viz-ink: #1b2c42;
    --viz-ink-2: #3a5068;
    --viz-muted: #52667f;
    /* texto de apoio (rótulos, dicas, subtítulos) nos cartões: >= 4,5:1 sobre o cartão, o fundo da página e o cabeçalho de tabela */
    --viz-hint: #42596f;
    --viz-grid: #c9d6e6;
    --viz-axis: #b3c2d6;
    --viz-ring: rgba(27, 44, 66, 0.10);

    --viz-s1: #5b57e0;   /* índigo (marca) */
    --viz-s2: #d9531e;   /* laranja */
    --viz-s3: #1baf7a;   /* água */
    --viz-s4: #eda100;   /* amarelo */
    --viz-s5: #d4578a;   /* magenta */
    --viz-s6: #008300;   /* verde */
    --viz-s7: #2a78d6;   /* azul */
    --viz-s8: #e34948;   /* vermelho */

    /* faixas de severidade crescente (aging): aviso -> grave -> crítico -> muito crítico -> extremo */
    --viz-sev-4: #a32424;
    --viz-sev-5: #6e1717;

    /* comparação neutra (ex.: mesmo período do ano anterior): recua, mas precisa ser vista (>= 3:1) */
    --viz-compare: #6b7f9b;
    /* linha de referência/meta: tracejada, em tinta neutra (nunca na cor de uma série) */
    --viz-ref: #3a5068;

    /* status: fixos nos dois modos; nunca no lugar de série; sempre com ícone + rótulo */
    --viz-good: #0ca30c;
    --viz-warning: #fab219;
    --viz-serious: #ec835a;
    --viz-critical: #d03b3b;
    --viz-delta-up: #006300;
    --viz-delta-down: #b42323;
    --viz-warning-text: #8a5700;   /* texto/valor em aviso: o amarelo de status não tem contraste como texto no claro */
    --viz-on-fill: #ffffff;       /* rótulo dentro de preenchimento categórico */
    --viz-on-fill-warm: #0b0b0b;  /* ...exceto sobre amarelo e warning */

    /* rampa sequencial de uma matiz (azul), do claro ao escuro: magnitude contínua (mapas de calor) */
    --viz-seq-1: #cde2fb;
    --viz-seq-2: #9ec5f4;
    --viz-seq-3: #6da7ec;
    --viz-seq-4: #3987e5;
    --viz-seq-5: #256abf;
    --viz-seq-6: #184f95;
    --viz-seq-7: #0d366b;
}

html.dark-mode,
body.dark-mode {
    --viz-surface: #1e293b;
    --viz-ink: #f0f6ff;
    --viz-ink-2: #cbd5e1;
    --viz-muted: #94a3b8;
    --viz-grid: #2e3b50;
    --viz-axis: #3b4a61;
    --viz-ring: rgba(255, 255, 255, 0.10);

    --viz-s1: #7c79f0;
    --viz-s2: #d95926;
    --viz-s3: #199e70;
    --viz-s4: #c98500;
    --viz-s5: #d55181;
    --viz-s6: #008300;
    --viz-s7: #3987e5;
    --viz-s8: #e66767;

    --viz-sev-4: #f06060;
    --viz-sev-5: #ff8f8f;

    --viz-compare: #8b9db5;
    --viz-ref: #cbd5e1;

    --viz-delta-up: #26b34f;
    --viz-delta-down: #f87171;
    --viz-warning-text: #fab219;
    --viz-on-fill-warm: #0b0b0b;
}

/* Texto de apoio dos painéis no claro: o --text-tertiary do tema (#6a819a) dá só 2,5-3,2:1 sobre os cartões azul-claros.
   Só no modo claro e só dentro do painel (o escuro já passa e as demais telas não mudam). */
html:not(.dark-mode) :is(.cx-page, .fb-page, .wp-page, .dk-card, .viz-card, .chart-card, .exec-card, .dk-section-title, .dashboard-header) {
    --text-tertiary: var(--viz-hint);
}

/* Marcadores dos cartões (painel.css/dashboard.css têm #10b981/#ef4444/#f59e0b fixos): receber = s3, pagar = s8, as mesmas séries dos gráficos.
   O Painel de Caixas redefine pos/neg (entradas = s7, saídas = s2) em caixa-painel.css, com seletor mais específico. */
html .dk-dot--pos  { background: var(--viz-s3); }
html .dk-dot--neg  { background: var(--viz-s8); }
html .dk-dot--warn { background: var(--viz-warning); }

/* Sobretítulo (kicker) dos cartões: o índigo da marca puro dá 2,9:1 no cartão claro; mistura com a tinta para chegar a >= 4,5:1 */
html:not(.dark-mode) .xp-kicker,
html:not(.dark-mode) .cx-kicker,
html:not(.dark-mode) .wp-link,
html:not(.dark-mode) .cx-link,
html:not(.dark-mode) .wp-page [data-aba].active,
html:not(.dark-mode) .wp-page table a {
    color: color-mix(in srgb, var(--viz-s1) 78%, var(--viz-ink));
}

/* Botão ativo dos seletores de período/segmento: texto branco sobre o primário puro dá 3,7:1; um passo mais escuro passa de 4,5:1 */
html :is(.cx-seg, .wp-seg, .fb-seg, .lt-seg, .periodo-btns) button.active {
    background: color-mix(in srgb, var(--primary-color, #667eea) 82%, #000);
}

html:not(.dark-mode) .fb-prod-atencao { color: color-mix(in srgb, var(--viz-warning-text) 72%, var(--viz-ink)); }

/* Chips de alerta do WMS sobre fundo translúcido: um passo mais escuro no claro (3,9 -> >= 4,5:1) */
html:not(.dark-mode) .wo-chip--neg  { color: var(--viz-sev-5); }
html:not(.dark-mode) .wo-chip--warn { color: color-mix(in srgb, var(--viz-warning-text) 72%, var(--viz-ink)); }

/* Tags de variação (painel.css tem verde/vermelho/âmbar fixos que dão 1,8-2,6:1 no claro): texto e fundo pelos tokens de status */
:is(.cx-page, .fb-page, .wp-page, .dk-card, .viz-card, .chart-card, .exec-card) .xp-tag.up   { background: color-mix(in srgb, var(--viz-good) 16%, transparent);     color: var(--viz-delta-up); }
:is(.cx-page, .fb-page, .wp-page, .dk-card, .viz-card, .chart-card, .exec-card) .xp-tag.dn   { background: color-mix(in srgb, var(--viz-critical) 16%, transparent); color: var(--viz-sev-4); }
:is(.cx-page, .fb-page, .wp-page, .dk-card, .viz-card, .chart-card, .exec-card) .xp-tag.info { background: color-mix(in srgb, var(--viz-warning) 20%, transparent);  color: var(--viz-warning-text); }

/* Cartão de gráfico: no claro usa a superfície do gráfico (mais clara que o fundo da página) para o contraste das marcas */
.viz-card,
.chart-card,
.exec-card {
    --viz-card-bg: var(--viz-surface);
}

/* Fundo dos cards de TODO o sistema: gradiente diagonal suave (receita do cabeçalho "Indicadores Comerciais e de Estoque", .ic-head).
   É uma película translúcida em background-image — o accent entra a 14% no canto superior esquerdo e some em 75% — por cima do
   fundo que o card já tem (claro ou escuro), então não depende de qual CSS define a cor do card nem de especificidade.
   Troque o accent de um card com --cg (ex.: style="--cg: var(--viz-critical)").
   Ficam de fora: quem já tem gradiente próprio (.ic-head, .ic-kpi, .pg-banner), cards coloridos por significado (.bg-*, fundo inline,
   .alert-card, .lc-conta-card = débito/crédito, .venc-card = por status) e .loading-card. */
html :is(.card, .almox-card, .as-card, .bl-card, .caixa-card, .chart-card, .company-card, .config-card, .confirm-card, .cp-card, .det-card,
         .detalhe-card, .dk-card, .dr-card, .exec-card, .fb-g-card, .form-card, .fx-card, .gerador-card, .hk-card, .ic-insights, .ic-panel,
         .ic-summary, .in-card, .info-card, .kpi-card, .lt-card, .mn-card, .onb-card, .parcelas-card, .pc-tipo-card, .pl-card, .plano-card,
         .prof-tabs-card, .rsv-card, .rw-card, .sac-card, .side-card, .tax-card, .tr-card, .user-card, .viz-card, .wo-card, .wp-card, .xp-card,
         .sessao-header-card, .filtros-box, .cc-painel, .cc-conta, .cf-kpi, .rsv-kpi, .rsv-panel, .mn-box, .mn-stat, .tf-resumo, .tf-kpi, .tl-totais, .lc-totais,
         .tr-resumo-rota, .tr-ficha-lado, .ex-resumo-item, .ex-passo, .bx-resumo, .mv-ficha-item, .saldo-box, .wo-tile):not([class*="bg-"]):not([style*="background"]):not([style*="gradient"]) {
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--cg, var(--viz-s7)) 14%, transparent), transparent 75%) !important;
}

/* Cartões de KPI (pequenos): mesma receita do .ic-kpi — 20% e 72% — e a cor do indicador (--cg) por significado */
html :is(.kpi-card, .sx-kpi, .ic-kpi, .cf-kpi, .tf-kpi, .rsv-kpi, .wo-tile):not([class*="bg-"]):not([style*="background"]):not([style*="gradient"]) {
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--cg, var(--viz-s7)) 20%, transparent), transparent 72%) !important;
}
/* O banner de página (.pg-banner) é escuro nos DOIS temas: o texto dentro dele usa as cores do tema escuro, senão no claro
   rótulos, valores e selos ficam azul-escuro sobre fundo escuro (var(--text-secondary), --viz-delta-up etc. são do tema claro). */
.sx-banner { --text-primary: #f0f6ff; }
.pg-banner {
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --viz-ink: #f0f6ff;
    --viz-ink-2: #cbd5e1;
    --viz-muted: #94a3b8;
    --viz-delta-up: #26b34f;
    --viz-delta-down: #f87171;
    --viz-warning-text: #fab219;
}

/* Detalhe da sessão de caixa: o KPI já define a própria cor (--sx-cor); o cabeçalho da sessão acompanha o status */
.sx-kpi { --cg: var(--sx-cor, var(--viz-s7)); }
.tl-kpi--venc-pagar   { --cg: var(--viz-critical); }
.tl-kpi--venc-receber { --cg: var(--viz-s2); }
.tl-kpi--hoje         { --cg: var(--viz-warning); }
.tl-kpi--pago         { --cg: var(--viz-good); }
.cc-kpi--ok           { --cg: var(--viz-good); }
.cc-kpi--alerta       { --cg: var(--viz-warning); }
/* Demais KPIs: a cor do ícone do cartão (utilitários do Bootstrap ou as classes do Fluxo) define o accent do gradiente */
.kpi-card:has(.kpi-ico .text-success)   { --cg: var(--viz-good); }
.kpi-card:has(.kpi-ico .text-danger)    { --cg: var(--viz-critical); }
.kpi-card:has(.kpi-ico .text-warning)   { --cg: var(--viz-warning); }
.kpi-card:has(.kpi-ico .text-info)      { --cg: var(--viz-s3); }
.kpi-card:has(.kpi-ico .text-secondary) { --cg: var(--viz-compare); }
.kpi-card:has(.fx-ico--saldo) { --cg: var(--viz-s1); }
.kpi-card:has(.fx-ico--ent)   { --cg: var(--viz-s7); }
.kpi-card:has(.fx-ico--sai)   { --cg: var(--viz-s2); }
.kpi-card:has(.fx-ico--atras) { --cg: var(--viz-critical); }
.kpi-card:has(.fx-ico--prev)  { --cg: var(--viz-warning); }

/* Borda tingida do mesmo accent nos cards de dashboard (nas demais telas a borda de cada card segue como está) */
html :is(.dk-card, .viz-card, .chart-card, .exec-card, .xp-card, .sac-card, .rsv-card, .ic-panel, .ic-summary, .ic-insights, .fb-g-card) {
    border-color: color-mix(in srgb, var(--cg, var(--viz-s7)) 30%, var(--border-color));
}

/* O corpo do card e o contêiner do tema da grade (dark) tinham fundo opaco (formdefault.css com !important, aggrid-theme.css,
   lista.css) e escondiam o gradiente: dentro de um card com gradiente eles passam a ser transparentes. Grades fora de card não mudam. */
html :is(.card, .dk-card, .viz-card, .chart-card, .info-card, .kpi-card, .form-card, .side-card):not([class*="bg-"]):not([style*="background"]) > .card-body {
    background-color: transparent !important;
}
html :is(.card, .dk-card, .viz-card, .chart-card, .info-card, .kpi-card, .form-card, .side-card):not([class*="bg-"]):not([style*="background"]) :is(.ag-theme-alpine, .ag-theme-alpine-dark) {
    background-color: transparent !important;
}

/* Blocos internos com fundo opaco (cartões de topo, faixas de KPI) deixam o gradiente do card aparecer */
html :is(.dk-card) :is(.dk-hero, .dk-strip, .dk-tile) {
    background: transparent;
}
html :is(.dk-card) a.dk-tile:hover { background: color-mix(in srgb, var(--viz-ink) 5%, transparent); }

@media print {
    html .card, html [class*="-card"] { background-image: none !important; }
}

/* ═══ Cabeçalhos de tabela e grade no tema claro: o mesmo tom do menu lateral (--sidebar-bg), texto claro ═══
   No escuro o cabeçalho já é escuro e não muda. O fundo vem de uma regra única porque cada tabela do sistema define o cabeçalho de
   um jeito (AG Grid, .cx-table, .fx-tabela, .wp-tabela, .tf-table, .models-table, .table do Bootstrap...). Para uma tabela ficar
   de fora: <table class="sem-cabecalho-escuro">. */
html:not(.dark-mode) table:not(.sem-cabecalho-escuro) thead :is(th, td) {
    --bs-table-bg: var(--sidebar-bg);
    --bs-table-accent-bg: transparent;
    background: var(--sidebar-bg) !important;
    color: #f0f6ff !important;
    border-color: rgba(255, 255, 255, .12) !important;
    box-shadow: none !important;
}
html:not(.dark-mode) table:not(.sem-cabecalho-escuro) thead :is(th, td) :is(a, span, i, label, small, b, strong):not(.badge) {
    color: inherit !important;
}

/* AG Grid (listas e grades de módulos) */
html:not(.dark-mode) :is(.ag-theme-alpine) {
    --ag-header-background-color: var(--sidebar-bg);
    --ag-header-foreground-color: #f0f6ff;
}
html:not(.dark-mode) .ag-theme-alpine :is(.ag-header, .ag-header-row:not(.ag-header-row-floating-filter), .ag-header-viewport, .ag-header-container,
                                         .ag-pinned-left-header, .ag-pinned-right-header) {
    background-color: var(--sidebar-bg) !important;
    border-bottom-color: rgba(255, 255, 255, .12) !important;
}
html:not(.dark-mode) .ag-theme-alpine :is(.ag-header-cell, .ag-header-group-cell) {
    color: #f0f6ff !important;
}
html:not(.dark-mode) .ag-theme-alpine :is(.ag-header-cell-text, .ag-header-cell-label, .ag-header-icon, .ag-header-cell-menu-button, .ag-icon,
                                         .ag-sort-indicator-icon, .ag-header-cell-comp-wrapper) {
    color: #f0f6ff !important;
}
html:not(.dark-mode) .ag-theme-alpine .ag-header-cell::after,
html:not(.dark-mode) .ag-theme-alpine .ag-header-cell-resize::after {
    background-color: rgba(255, 255, 255, .22) !important;
}
/* checkbox de seleção no cabeçalho continua legível */
html:not(.dark-mode) .ag-theme-alpine .ag-header .ag-checkbox-input-wrapper { background-color: #fff; border-radius: 3px; }

/* Linha de destaque (ex.: "Saldo Calculado" no resumo da sessão de caixa): mesmo tom do cabeçalho */
html:not(.dark-mode) .resumo-row-highlight {
    background: var(--sidebar-bg) !important;
    color: #f0f6ff !important;
}
html:not(.dark-mode) .resumo-row-highlight * { color: #f0f6ff !important; }

/* ═══ Códigos, IDs e valores numéricos no tema claro ═══
   Colunas "cd*" da grade (lista.css deixava em --text-tertiary: 3,2:1) e o .pc-codigo do Plano de Contas (#818cf8: 2,4:1) ficavam
   quase invisíveis. Um estilo único de código: índigo escuro (>= 7:1), peso 600 e algarismos de largura fixa para alinhar. */
html:not(.dark-mode) {
    --viz-code: color-mix(in srgb, var(--viz-s1) 62%, var(--viz-ink));
}
html:not(.dark-mode) .ag-theme-alpine .ag-cell[col-id^="cd"],
html:not(.dark-mode) :is(.pc-codigo, .models-id, .usugrupo-id, .cargo-id, .empresa-id, .setor-id, .usuempresa-id, .acesso-id, .perfil-id,
                         .perm-id, .mv-cod, .mv-lote, .lt-lote, .empresa-cnpj, .company-cnpj) {
    color: var(--viz-code) !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* valores positivos/negativos em verde/vermelho: os tons de Bootstrap dão 3,7:1 no cartão claro */
html:not(.dark-mode) :is(.cc-num--ok, .mv-num--entrada, .mv-num--total-entrada, .ep-num--bom) { color: var(--viz-delta-up) !important; }
html:not(.dark-mode) :is(.cc-num--erro, .mv-num--saida, .mv-num--total-saida, .ep-num--ruim, .tl-num--venc) { color: var(--viz-delta-down) !important; }
html:not(.dark-mode) .tl-num--hoje { color: var(--viz-warning-text) !important; }
html:not(.dark-mode) .pc-inativo { color: var(--text-secondary) !important; }

/* ═══ Classes de texto do Bootstrap, nos dois temas ═══
   Os tons padrão dão 3,1-3,8:1 (secondary, success, danger, primary) e text-warning/text-info somem no claro (1,3:1 e 1,6:1).
   (.text-muted já passa nos dois temas e não muda.) */
html .text-success   { color: var(--viz-delta-up) !important; }
html .text-danger    { color: var(--viz-delta-down) !important; }
html .text-warning   { color: var(--viz-warning-text) !important; }
html .text-secondary { color: var(--text-secondary) !important; }
html .text-primary   { color: color-mix(in srgb, var(--viz-s7) 70%, var(--viz-ink)) !important; }
html .text-info      { color: color-mix(in srgb, var(--viz-s3) 60%, var(--viz-ink)) !important; }