/*
 * Dashboard V2 — reconstrução do zero, fiel ao Figma "Novo projeto".
 *
 * Diferente dos arquivos redesign-dashboard-*.css (que sobrescreviam
 * classes antigas .dash-completo-* reaproveitadas por outras 8
 * paginas), este arquivo estiliza classes NOVAS e EXCLUSIVAS (prefixo
 * .dm-), usadas só por renderDashboardCompletoMasterV2(). Nenhuma
 * regra antiga do sistema pode colidir com essas classes, porque elas
 * nunca existiram antes.
 *
 * So' ativo via ?v2=1 (pagina de preview) - nao afeta a Dashboard
 * padrao nem nenhuma outra tela. Depois de validado, isso vira o
 * padrao (migracao).
 *
 * Cores/radius/fontes vem dos tokens --ds-* (design-tokens.css,
 * Etapa 1), que ja replicam exatamente os valores de theme.css do
 * Figma. So' ativa no preset escuro, igual ao resto do redesign.
 */

body[data-theme-preset="dark"] .dm-wrap {
  padding: 0 0 20px;
}

/* ================= KPIs ================= */
body[data-theme-preset="dark"] .dm-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
body[data-theme-preset="dark"] .dm-kpi {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s ease;
}
body[data-theme-preset="dark"] .dm-kpi:hover {
  border-color: color-mix(in srgb, var(--ds-border) 60%, var(--ds-foreground));
}
body[data-theme-preset="dark"] .dm-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body[data-theme-preset="dark"] .dm-kpi-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ds-muted-foreground);
}
body[data-theme-preset="dark"] .dm-kpi-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--ds-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body[data-theme-preset="dark"] .dm-kpi-icon svg { width: 12px; height: 12px; }
body[data-theme-preset="dark"] .dm-kpi-icon--teal { background: color-mix(in srgb, #10B981 15%, transparent); color: #10B981; }
body[data-theme-preset="dark"] .dm-kpi-icon--red { background: color-mix(in srgb, #EF4444 15%, transparent); color: #EF4444; }
body[data-theme-preset="dark"] .dm-kpi-icon--blue { background: color-mix(in srgb, #3B82F6 15%, transparent); color: #3B82F6; }
body[data-theme-preset="dark"] .dm-kpi-icon--purple { background: color-mix(in srgb, #A78BFA 15%, transparent); color: #A78BFA; }
body[data-theme-preset="dark"] .dm-kpi-icon--orange { background: color-mix(in srgb, #F59E0B 15%, transparent); color: #F59E0B; }
body[data-theme-preset="dark"] .dm-kpi-icon--warn { background: color-mix(in srgb, #F97316 15%, transparent); color: #F97316; }
body[data-theme-preset="dark"] .dm-kpi-value {
  font-family: var(--ds-font-mono);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
body[data-theme-preset="dark"] .dm-kpi-value--teal { color: #10B981; }
body[data-theme-preset="dark"] .dm-kpi-value--red { color: #EF4444; }
body[data-theme-preset="dark"] .dm-kpi-value--blue { color: #3B82F6; }
body[data-theme-preset="dark"] .dm-kpi-value--purple { color: #A78BFA; }
body[data-theme-preset="dark"] .dm-kpi-value--orange { color: #F59E0B; }
body[data-theme-preset="dark"] .dm-kpi-value--warn { color: #F97316; }
body[data-theme-preset="dark"] .dm-kpi-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body[data-theme-preset="dark"] .dm-kpi-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
}
body[data-theme-preset="dark"] .dm-kpi-badge.is-up { color: #10B981; background: color-mix(in srgb, #10B981 12%, transparent); }
body[data-theme-preset="dark"] .dm-kpi-badge.is-down { color: #EF4444; background: color-mix(in srgb, #EF4444 12%, transparent); }
body[data-theme-preset="dark"] .dm-kpi-sub { font-size: 10px; color: var(--ds-muted-foreground); }

/* ================= Painéis ================= */
body[data-theme-preset="dark"] .dm-row-top {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
body[data-theme-preset="dark"] .dm-row-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
body[data-theme-preset="dark"] .dm-row-bottom--alerts { margin-top: 20px; }
body[data-theme-preset="dark"] .dm-panel {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: 20px;
}
body[data-theme-preset="dark"] .dm-panel--side {
  display: flex;
  flex-direction: column;
}
body[data-theme-preset="dark"] .dm-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}
body[data-theme-preset="dark"] .dm-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-foreground);
}
body[data-theme-preset="dark"] .dm-panel-subtitle {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--ds-muted-foreground);
}

/* ================= Gráfico principal ================= */
body[data-theme-preset="dark"] .dm-chart-canvas-wrap {
  position: relative;
  height: 240px;
  width: 100%;
}
/* Tooltip customizado (Chart.js "external") - o tooltip nativo nao
   consegue misturar peso normal/negrito na mesma linha (label normal +
   valor em negrito), nem pontinho colorido por serie do jeito do
   Figma. Posicionado via JS (tt.caretX/caretY), relativo ao wrap. */
body[data-theme-preset="dark"] .dm-chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(12px, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s ease;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 10px 12px;
  min-width: 150px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  z-index: 50;
}
body[data-theme-preset="dark"] .dm-chart-tooltip-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-muted-foreground);
  margin-bottom: 6px;
}
body[data-theme-preset="dark"] .dm-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ds-foreground);
  padding: 2px 0;
  white-space: nowrap;
}
body[data-theme-preset="dark"] .dm-chart-tooltip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
body[data-theme-preset="dark"] .dm-chart-tooltip-label {
  color: var(--ds-muted-foreground);
}
body[data-theme-preset="dark"] .dm-chart-tooltip-value {
  font-family: var(--ds-font-mono);
  font-weight: 700;
  margin-left: auto;
  padding-left: 10px;
}

/* ================= Donut (Ativações / Composição financeira) ================= */
body[data-theme-preset="dark"] .dm-donut-wrap {
  position: relative;
  width: min(100%, 140px);
  height: 140px;
  margin: 0 auto;
  background: transparent;
}
body[data-theme-preset="dark"] .dm-donut-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
body[data-theme-preset="dark"] .dm-legend {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-theme-preset="dark"] .dm-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
body[data-theme-preset="dark"] .dm-legend-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-muted-foreground);
}
body[data-theme-preset="dark"] .dm-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
body[data-theme-preset="dark"] .dm-legend-dot--teal { background: #22D3EE; }
body[data-theme-preset="dark"] .dm-legend-dot--blue { background: #3B82F6; }
body[data-theme-preset="dark"] .dm-legend-dot--green { background: #10B981; }
body[data-theme-preset="dark"] .dm-legend-dot--rose { background: #EF4444; }
body[data-theme-preset="dark"] .dm-legend-value {
  font-family: var(--ds-font-mono);
  font-weight: 500;
  color: var(--ds-foreground);
}
body[data-theme-preset="dark"] .dm-legend-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
body[data-theme-preset="dark"] .dm-legend-pct { color: var(--ds-muted-foreground); }

body[data-theme-preset="dark"] .dm-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ds-border);
}
body[data-theme-preset="dark"] .dm-note strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ds-muted-foreground);
}
body[data-theme-preset="dark"] .dm-note-sub {
  display: block;
  font-size: 11px;
  color: color-mix(in srgb, var(--ds-muted-foreground) 60%, transparent);
  margin-top: 2px;
}
body[data-theme-preset="dark"] .dm-note--tint {
  margin: 12px -4px 0;
  padding: 12px;
  border-radius: var(--ds-radius-md);
}
body[data-theme-preset="dark"] .dm-note--tint.is-negative { background: color-mix(in srgb, #EF4444 8%, transparent); }
body[data-theme-preset="dark"] .dm-note--tint.is-negative strong { color: #EF4444; }
body[data-theme-preset="dark"] .dm-note--tint.is-positive { background: color-mix(in srgb, #10B981 8%, transparent); }
body[data-theme-preset="dark"] .dm-note--tint.is-positive strong { color: #10B981; }

/* ================= Serviços / Despesas / colaboradores ================= */
body[data-theme-preset="dark"] .dm-subheading {
  margin: 20px 0 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-muted-foreground);
}
body[data-theme-preset="dark"] .dm-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body[data-theme-preset="dark"] .dm-progress-list--roomy { gap: 20px; }
body[data-theme-preset="dark"] .dm-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
body[data-theme-preset="dark"] .dm-progress-label { font-size: 13px; color: var(--ds-foreground); }
body[data-theme-preset="dark"] .dm-progress-value {
  font-family: var(--ds-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-foreground);
}
body[data-theme-preset="dark"] .dm-progress-value--accent { color: var(--ds-accent); }
body[data-theme-preset="dark"] .dm-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ds-secondary);
  overflow: hidden;
}
body[data-theme-preset="dark"] .dm-progress-fill { height: 100%; border-radius: 999px; }
body[data-theme-preset="dark"] .dm-progress-fill--teal { background: #22D3EE; }

body[data-theme-preset="dark"] .dm-plain-list { list-style: none; margin: 0; padding: 0; }
body[data-theme-preset="dark"] .dm-plain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
body[data-theme-preset="dark"] .dm-empty { font-size: 13px; color: var(--ds-muted-foreground); }

/* ================= Cartões (alertas) ================= */
body[data-theme-preset="dark"] .dm-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-theme-preset="dark"] .dm-alert-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ds-secondary);
  border: 1px solid var(--ds-border);
  color: var(--ds-foreground);
}
body[data-theme-preset="dark"] .dm-alert-item.is-danger {
  border-color: color-mix(in srgb, #EF4444 45%, transparent);
  background: color-mix(in srgb, #EF4444 12%, var(--ds-card));
}

/* ================= Responsivo (fallback razoavel - Figma nao define
   mobile; estes breakpoints so' evitam quebra visual, nao sao pixel-
   matched a nenhuma referencia) ================= */
@media (max-width: 1100px) {
  body[data-theme-preset="dark"] .dm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body[data-theme-preset="dark"] .dm-row-top { grid-template-columns: 1fr; }
  body[data-theme-preset="dark"] .dm-row-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body[data-theme-preset="dark"] .dm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  body[data-theme-preset="dark"] .dm-kpis { grid-template-columns: 1fr; }
}