/*
 * Redesign — Etapa 5, sub-etapa 8: ajustes finos do Dashboard depois da
 * comparação lado a lado com a referência do Figma.
 *
 * Escopado a body[data-theme-preset="dark"] + desktop (901px+), mesmo
 * cuidado das sub-etapas anteriores.
 */

@media (min-width: 901px) {
  /* Icone do KPI: aproximacao via flex order (Figma aninha o icone
     dentro da mesma linha do rotulo - isso exigiria mudar o HTML/PHP,
     que preferi nao tocar agora; isso aqui só move o bloco do icone
     inteiro pro lado direito do card, chegando visualmente mais perto
     sem alterar a estrutura da funcao PHP que monta o dashboard). */
  body[data-theme-preset="dark"] .dash-completo-tile {
    justify-content: space-between;
  }
  body[data-theme-preset="dark"] .dash-completo-tile-icon {
    order: 2;
  }
  body[data-theme-preset="dark"] .dash-completo-tile-body {
    order: 1;
  }

  /* Chip do icone mais visivel (sem o glifo dentro, uma opacidade maior
     ajuda a ler como indicador de cor mesmo sem o desenho do icone) */
  body[data-theme-preset="dark"] .dash-completo-tile-icon--teal{ background: color-mix(in srgb, #10B981 28%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--red{ background: color-mix(in srgb, #EF4444 28%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--blue{ background: color-mix(in srgb, #3B82F6 28%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--purple{ background: color-mix(in srgb, #A78BFA 28%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--orange{ background: color-mix(in srgb, #F59E0B 28%, transparent) !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--warn{ background: color-mix(in srgb, #F97316 28%, transparent) !important; }

  /* Badge de variacao (%): pilula com fundo tingido, igual ao Figma
     (text-red-400 bg-red-400/10) */
  body[data-theme-preset="dark"] .dash-completo-tile-delta.is-up,
  body[data-theme-preset="dark"] .dash-completo-tile-delta.is-down {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
  }
  body[data-theme-preset="dark"] .dash-completo-tile-delta.is-up {
    color: #10B981;
    background: color-mix(in srgb, #10B981 12%, transparent);
  }
  body[data-theme-preset="dark"] .dash-completo-tile-delta.is-down {
    color: #EF4444;
    background: color-mix(in srgb, #EF4444 12%, transparent);
  }

  /* Titulo do painel principal - Title Case igual ao Figma */
  body[data-theme-preset="dark"] .dash-completo-panel--main h3 {
    text-transform: capitalize;
  }

  /* Cor do glifo do icone (agora que tem SVG de verdade dentro) - cor
     solida da propria categoria, nao mais branco fixo (que so fazia
     sentido com fundo solido, antes da Etapa 4 mudar pra fundo tingido) */
  body[data-theme-preset="dark"] .dash-completo-tile-icon{ opacity: 1; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--teal{ color: #10B981 !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--red{ color: #EF4444 !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--blue{ color: #3B82F6 !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--purple{ color: #A78BFA !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--orange{ color: #F59E0B !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon--warn{ color: #F97316 !important; }
  body[data-theme-preset="dark"] .dash-completo-tile-icon svg{ width: 16px; height: 16px; }

  /* Toggle Area/Linha - segmented control igual ao Figma (bg-secondary
     rounded-lg p-1, botao ativo em accent solido) */
  body[data-theme-preset="dark"] .dash-completo-chart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ds-secondary);
    border-radius: var(--ds-radius-lg);
    padding: 4px;
  }
  body[data-theme-preset="dark"] .dash-completo-chart-toggle-btn {
    border: none;
    background: transparent;
    color: var(--ds-muted-foreground);
    font-size: 11px;
    padding: 4px 12px;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    font-weight: 500;
  }
  body[data-theme-preset="dark"] .dash-completo-chart-toggle-btn.is-active {
    background: var(--ds-accent);
    color: var(--ds-accent-foreground);
    font-weight: 600;
  }

  /* Barras de progresso (Serviços no período / Despesas por categoria) e
     as bolinhas de legenda de Ativações - mesmas cores do Figma usadas
     no grafico donut de Ativações (ver edição em index.php), so que
     aqui sao regras CSS separadas que tambem precisavam da mesma cor. */
  body[data-theme-preset="dark"] .dash-completo-progress-fill {
    background: #22D3EE !important;
  }
  body[data-theme-preset="dark"] .dash-completo-progress-fill--alt {
    background: #3B82F6 !important;
  }
  body[data-theme-preset="dark"] .dash-completo-dot--inst {
    background: #22D3EE !important;
  }
  body[data-theme-preset="dark"] .dash-completo-dot--canc {
    background: #3B82F6 !important;
  }

  /* "Limpar filtro" e' um <a>, nao um <input> - a correcao generica de
     borda da sub-etapa de inputs nao alcança ele. Mesmo bug (#cbd5e1
     fixo) do input de mes ao lado. */
  body[data-theme-preset="dark"] .dashboard-mes-filter a.dashboard-mes-clear {
    border-color: var(--ds-border) !important;
    background: var(--ds-secondary) !important;
    color: var(--ds-muted-foreground) !important;
  }
  body[data-theme-preset="dark"] .dashboard-mes-filter a.dashboard-mes-clear:hover {
    color: var(--ds-foreground) !important;
  }

  /* Caixa "Saldo neutro/positivo/negativo" (Ativações) e os widgets
     de links rapidos / alertas financeiros usam --dash-surface-soft,
     uma variavel que deriva de --app-card-bg-color (a cor de card
     ANTIGA). O redesign so trocou o fundo dos seletores especificos
     (.card, .dash-completo-panel etc.), nao essa variavel de origem -
     por isso esses elementos ainda saem com o tom antigo, destoando
     do resto do painel ja redesenhado. Fix: fundo direto em --ds-card. */
  body[data-theme-preset="dark"] .dash-completo-ativacoes-saldo,
  body[data-theme-preset="dark"] .dash-completo-links a,
  body[data-theme-preset="dark"] .dash-completo-alert-list li {
    background: var(--ds-card) !important;
    border-color: var(--ds-border) !important;
  }
  body[data-theme-preset="dark"] .dash-completo-ativacoes-saldo.is-positive {
    border-color: color-mix(in srgb, #10B981 45%, transparent) !important;
    background: color-mix(in srgb, #10B981 12%, var(--ds-card)) !important;
  }
  body[data-theme-preset="dark"] .dash-completo-ativacoes-saldo.is-positive strong {
    color: #10B981 !important;
  }
  body[data-theme-preset="dark"] .dash-completo-ativacoes-saldo.is-negative {
    border-color: color-mix(in srgb, #EF4444 45%, transparent) !important;
    background: color-mix(in srgb, #EF4444 12%, var(--ds-card)) !important;
  }
  body[data-theme-preset="dark"] .dash-completo-ativacoes-saldo.is-negative strong {
    color: #EF4444 !important;
  }
  body[data-theme-preset="dark"] .dash-completo-links a:hover {
    background: color-mix(in srgb, #22D3EE 14%, var(--ds-card)) !important;
    border-color: color-mix(in srgb, #22D3EE 40%, transparent) !important;
  }
  body[data-theme-preset="dark"] .dash-completo-alert-list li.is-danger {
    border-color: color-mix(in srgb, #EF4444 45%, transparent) !important;
    background: color-mix(in srgb, #EF4444 12%, var(--ds-card)) !important;
  }

  /* Donut de Ativacoes/Composicao financeira estava proporcionalmente
     menor que a referencia do Figma (168x148 vs um donut bem maior no
     mock) - aumentando o container; o canvas acompanha via
     responsive:true + maintainAspectRatio:false do Chart.js, sem
     precisar mexer no JS. */
  body[data-theme-preset="dark"] .dash-completo-ativacoes-chart {
    width: min(100%, 200px);
    height: 180px;
  }
  body[data-theme-preset="dark"] .dash-completo-ativacoes-chart canvas {
    max-height: 180px;
  }
}

/* Logo da sidebar: quadrado com icone (raio), igual ao Figma - via
   ::before, sem tocar em nenhuma marcacao/PHP. So aparece se o admin
   nao tiver configurado uma imagem de logo propria (a imagem real, se
   existir, continua sendo a fonte da verdade - nao inventamos por cima
   dela). */
body[data-theme-preset="dark"] .docs-sidebar__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body[data-theme-preset="dark"] .docs-sidebar__brand-link:not(:has(.brand-logo-image[src]:not([src=""])))::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--ds-radius-sm);
  background-color: var(--ds-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}