/*
 * Redesign — Etapa 4: Dashboard.
 *
 * Escopado a body[data-theme-preset="dark"] + @media (min-width:901px)
 * (mesmo cuidado das etapas anteriores: mobile fica intocado).
 *
 * O componente .dash-completo-tiles/.dash-completo-tile/.dash-completo-panel
 * e reaproveitado por VARIAS telas (bancos, despesas, vendas, os, cartoes,
 * boletos, cancelamento, instalacoes), nao so a Dashboard - entao essa
 * mudanca aparece em mais de uma tela, o que e esperado (e' o mesmo
 * componente, so um lugar pra estilizar). Varias dessas telas tem regras
 * bem especificas tipo `body[data-page="X"] ... .dash-completo-tile
 * {border-right:none}` - por isso o !important abaixo, pra garantir que
 * o novo estilo (borda nos 4 lados, card separado) vence em todas elas
 * sem eu precisar caçar e editar cada uma das ~10 ocorrencias.
 *
 * Fora de escopo por decisao explicita (ver regras do cliente): as CORES
 * DAS LINHAS/BARRAS DO GRAFICO em si (Chart.js, renderizado via JS/canvas)
 * nao sao tocadas aqui - so o "moldura" do card ao redor (fundo, borda,
 * radius, cabecalho). Mudar cor de dataset do Chart.js seria mexer em JS
 * de funcionamento, fora do que foi pedido pra esta etapa.
 *
 * Tambem fora de escopo: nao adicionei icones SVG dentro dos chips de KPI
 * (o Figma usa icones tipo TrendingUp/FileText/Bell; o sistema atual tem
 * o CSS pronto pra icone mas o render atual (renderDashboardCompletoMaster)
 * nao passa nenhum - adicionar exigiria editar a funcao PHP pra incluir
 * markup de icone, o que preferi nao fazer nesta etapa so-CSS. Os chips
 * ficam com a cor certa, só sem o desenho do glifo dentro.
 */

@media (min-width: 901px) {
  /* KPIs: de tira conectada (bordas internas) pra cards separados */
  body[data-theme-preset="dark"] .dash-completo-tiles {
    gap: 12px;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
  body[data-theme-preset="dark"] .dash-completo-tile {
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-xl) !important;
    background: var(--ds-card) !important;
  }

  body[data-theme-preset="dark"] .dash-completo-tile-value {
    font-family: var(--ds-font-mono);
    font-weight: 700;
  }
  body[data-theme-preset="dark"] .dash-completo-tile-label {
    color: var(--ds-muted-foreground);
  }
  body[data-theme-preset="dark"] .dash-completo-tile-delta {
    color: var(--ds-muted-foreground);
  }

  /* Chips de icone: de fundo solido pra fundo levemente tingido (estilo Figma) */
  body[data-theme-preset="dark"] .dash-completo-tile-icon {
    opacity: 1;
  }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--teal{ background: color-mix(in srgb, #10B981 18%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--red{ background: color-mix(in srgb, #EF4444 18%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--blue{ background: color-mix(in srgb, #3B82F6 18%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--purple{ background: color-mix(in srgb, #A78BFA 18%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--orange{ background: color-mix(in srgb, #F59E0B 18%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--warn{ background: color-mix(in srgb, #F97316 18%, transparent) !important; }

  /* Painel "Balanço financeiro" e os cards ao lado */
  body[data-theme-preset="dark"] .dash-completo-panel {
    background: var(--ds-card) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-xl) !important;
  }
  body[data-theme-preset="dark"] .dash-completo-panel h3 {
    font-weight: 600;
  }
}