/*
 * Redesign — Dashboard: reconstrução estrutural fiel ao Figma "Novo
 * projeto" (App.tsx + theme.css, lidos direto do arquivo fonte).
 *
 * Escopo: SOMENTE a pagina Dashboard (body[data-page="dashboard"] ou
 * "dashboard_master" - os dois valores possiveis pra essa pagina) +
 * preset escuro. As classes .dash-completo-* sao reaproveitadas por
 * ~8 outras paginas (bancos, despesas, vendas, os, cartoes, boletos,
 * cancelamento, instalacoes) - por isso TODO seletor aqui comeca com
 * o escopo de pagina via :is(), nunca sobrescrevendo essas classes de
 * forma global.
 *
 * Nao mexe em nenhuma logica PHP alem de 1 excecao ja feita a parte
 * (cor da barra de "Despesas por categoria", que depende do nome da
 * categoria - script fix_despesas_category_color.py). Nao mexe em
 * responsivo/mobile: tudo abaixo de min-width:901px fica de fora.
 *
 * Sem CSS nesting nativo (&) de proposito - os outros arquivos desta
 * migracao (Etapas 1-5) sao todos seletores flat, entao mantive o
 * mesmo padrao aqui pra nao depender de suporte de navegador extra.
 */

/* Seguranca de mobile: o titulo/filtro tem 2 versoes no DOM agora - a
   antiga (dentro do conteudo, classe dash-master-head-mobile) e a nova
   (dentro do header global, dash-master-topbar-*). Por padrao (mobile
   e telas <901px) fica a versao ANTIGA visivel e ativa, exatamente
   como sempre foi - a versao nova so aparece a partir de 901px (ver
   bloco @media abaixo), onde a antiga entao se esconde. Isso garante
   que o mobile nao muda em nada. */
:is(body[data-page="dashboard"], body[data-page="dashboard_master"]) .dash-master-topbar-info,
:is(body[data-page="dashboard"], body[data-page="dashboard_master"]) .dash-master-topbar-filter {
  display: none;
}

/* CORRECAO URGENTE: o sistema usa navegacao parcial (spa-nav.js) que
   so' troca main.container.app-content - o <header> (onde esses
   elementos vivem) nunca e' removido/recriado ao trocar de pagina.
   spa-nav.js ATUALIZA body[data-page] corretamente (confirmado no
   codigo dele), mas eu nunca tinha uma regra pra ESCONDER esses
   elementos quando data-page NAO e' a dashboard - sem essa regra,
   eles ficavam expostos (display padrao do navegador) em qualquer
   outra pagina depois de navegar a partir da Dashboard, sem precisar
   de reload completo. Essa regra fecha essa lacuna, sempre, em
   qualquer tamanho de tela. */
body:not([data-page="dashboard"]):not([data-page="dashboard_master"]) .dash-master-topbar-info,
body:not([data-page="dashboard"]):not([data-page="dashboard_master"]) .dash-master-topbar-filter {
  display: none !important;
}

:is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-wrap {
  /* Fix de raiz: as variaveis --dash-* (definidas aqui) ainda apontavam
     pros tokens ANTIGOS (--app-card-bg-color etc.), nao pros --ds-*.
     Isso e' consumido por dezenas de seletores (.dash-completo-tiles,
     .dash-completo-panel, .dash-completo-progress-track, .dash-completo-
     subheading, listas de links/alertas...) - redefinir aqui uma vez
     conserta tudo que depende dessas variaveis de uma vez, em vez de
     sobrescrever cada seletor individualmente. */
  --dash-border: var(--ds-border);
  --dash-muted: var(--ds-muted-foreground);
  --dash-surface: var(--ds-card);
  --dash-surface-soft: var(--ds-secondary);
  --dash-track: var(--ds-secondary);
  padding: 24px;
}

@media (min-width: 901px) {
  /* .container.app-content (pro-ui.css) tem padding proprio
     (24px 28px 36px) que soma com o do .dm-wrap/.dash-completo-wrap -
     por isso zerar so' o wrap interno nao bastava, ainda sobrava
     espaco vindo do pai. Zerado so' na Dashboard (pedido explicito de
     deixar o conteudo colado no topo/laterais). */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .container.app-content {
    padding: 20px 20px 20px !important;
  }

  /* Sidebar/header fixos, so' o conteudo rola por dentro - igual ao
     Figma. Tentativa anterior (removida) travava a pagina inteira
     porque afetava TODAS as paginas de uma vez (site-wide) - dessa
     vez escopado SO' a Dashboard, entao mesmo que precise de mais um
     ajuste, nao arrisca nenhuma outra tela. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"]) {
    height: 100vh;
    overflow: hidden;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"]) .app-layout {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"]) .app-layout__main {
    /* .app-layout .app-layout__main.app-main (app-layout.css, 3
       classes = specificity maior que a minha) forcava height:auto;
       overflow:visible aqui dentro do mesmo breakpoint - cancelava
       meu ajuste sem eu perceber. Precisa de !important pra vencer. */
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* ================= Espaçamento geral entre seções (space-y-5=20px) ================= */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tiles { margin: 0 0 20px; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-mid { margin-bottom: 20px; gap: 20px; grid-template-columns: 3fr 1fr; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-bottom { gap: 20px; margin-bottom: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* ================= KPI row: 6 cards INDEPENDENTES (grid gap-3),
     nao mais uma faixa unica com divisorias internas. ================= */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tiles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile {
    position: relative;
    display: block;
    gap: 0;
    padding: 16px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-xl);
    background: var(--ds-card);
    transition: border-color .15s ease;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile:hover {
    border-color: color-mix(in srgb, var(--ds-border) 60%, var(--ds-foreground));
  }

  /* Icone: no Figma ele fica na mesma linha do rotulo, alinhado a
     direita da label - via position:absolute no topo direito do card,
     sem precisar mudar a ordem do HTML (icone continua sendo o
     primeiro filho, so sai do fluxo do flex). */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border-radius: var(--ds-radius-md);
    opacity: 1;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile-icon svg { width: 12px; height: 12px; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 30px;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .05em;
    color: var(--ds-muted-foreground);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile-value {
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
    font-family: var(--ds-font-mono);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile-delta {
    font-size: 10px;
    color: var(--ds-muted-foreground);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* ================= Painéis (Balanço/Ativações/Serviços/Despesas/Composição) ================= */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-panel {
    padding: 20px;
    border-radius: var(--ds-radius-xl);
  }
  /* index.php:19970 forcava min-height:360px no painel principal,
     calibrado pro grafico antigo (bem mais alto). Com o grafico agora
     em 240px fixos (igual ao Figma), esse minimo sobrava espaco vazio
     embaixo do painel - e no de Ativações ao lado, que estica junto.
     Figma nao tem altura minima nenhuma, e' 100% dirigido pelo
     conteudo. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-panel--main {
    min-height: 0;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-panel-head { margin-bottom: 20px; align-items: flex-start; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-panel-head h3,
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-quick h3,
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-gauge-block h3 {
    font-size: 13px;
    font-weight: 600;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-panel-head p {
    font-size: 11px;
    margin-top: 2px;
  }

  /* Balanço financeiro: altura fixa 240px (Figma: ResponsiveContainer
     height={240}), nao mais min(340px,50vh). Precisa !important pra
     vencer o style inline no elemento. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dashboard-chart-canvas-wrap { height: 240px !important; }

  /* ---- Ativações ----
     Figma usa innerRadius/outerRadius FIXOS (42/68px = 136px de
     diametro), nao relativos ao container - o Chart.js doughnut, com
     maintainAspectRatio:false, preenche TODA a caixa que for dado a
     ele. Container de 160px fazia o donut sair maior que o do Figma;
     140px (menos o padding interno do chart.js) fica bem mais perto
     dos 136px reais. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-ativacoes-chart {
    width: min(100%, 140px);
    height: 140px;
    /* app-layout.css:509 da' fundo solido (--app-elevated-bg) pra essa
       caixa - por isso aparecia um quadrado escuro atras do donut. No
       Figma o donut flutua livre, sem nenhuma caixa/fundo atras. */
    background: transparent !important;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-ativacoes-chart canvas { max-height: 140px; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-ativacoes-metrics .dash-completo-progress-row { font-size: 11px; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-dot { width: 8px; height: 8px; }

  /* "Saldo neutro": no Figma isso e' TEXTO PURO (sem card/fundo), so
     com uma linha divisoria acima. Hoje a divisoria fica no wrapper
     ".dash-completo-ativacoes-info" (antes das metricas) - move pra
     ficar so em cima do bloco de saldo, igual ao mock. So aplica
     dentro do painel lateral (--side); a versao de Composição
     financeira (embaixo) mantem a caixa colorida, que e' diferente
     nesse ponto. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-panel--side .dash-completo-ativacoes-info {
    border-top: none;
    padding-top: 0;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-panel--side .dash-completo-ativacoes-saldo {
    margin-top: 12px;
    padding: 12px 0 0;
    border: none;
    border-top: 1px solid var(--ds-border) !important;
    border-radius: 0 !important;
    background: none !important;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-panel--side .dash-completo-ativacoes-saldo strong {
    font-size: 11px;
    font-weight: 500;
    color: var(--ds-muted-foreground) !important;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-panel--side .dash-completo-ativacoes-saldo .muted {
    font-size: 11px;
    color: color-mix(in srgb, var(--ds-muted-foreground) 60%, transparent);
  }

  /* ---- Composição financeira: mantém a caixa (Figma usa bg-red-500/8
     so' nesse caso, diferente de Ativações), so' refinando padding/
     radius/margem negativa igual ao mock. ---- */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-bottom .dash-completo-ativacoes-saldo {
    margin: 12px -4px 0;
    padding: 12px;
    border: none;
    border-top: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-md) !important;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-bottom .dash-completo-ativacoes-saldo.is-negative {
    background: color-mix(in srgb, #EF4444 8%, transparent) !important;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-bottom .dash-completo-ativacoes-saldo.is-positive {
    background: color-mix(in srgb, #10B981 8%, transparent) !important;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-bottom .dash-completo-ativacoes-saldo.is-neutral {
    background: transparent !important;
  }

  /* ---- Serviços no período / Despesas por categoria ---- */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-subheading {
    font-size: 12px;
    font-weight: 500;
    margin: 20px 0 12px;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-progress-list { gap: 16px; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-progress-row { font-size: 13px; margin-bottom: 8px; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-progress-track { height: 6px; }

  /* Contador de serviço (Reparos/Instalações) fica na cor de destaque
     (accent/cyan), fixo - so' no 1o painel da linha de baixo
     (Serviços), nao no de Despesas (valor em R$, cor neutra) nem nos
     colaboradores (lista --compact, tambem neutra). */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-bottom > .dash-completo-panel:nth-child(1) .dash-completo-progress-list:not(.dash-completo-progress-list--compact) .dash-completo-progress-row strong {
    color: var(--ds-accent);
    font-family: var(--ds-font-mono);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-progress-list--compact .dash-completo-progress-row {
    margin-bottom: 0;
    padding: 6px 0;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-progress-list--compact .dash-completo-progress-row strong {
    font-family: var(--ds-font-mono);
    color: var(--ds-foreground);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-bottom > .dash-completo-panel:nth-child(2) .dash-completo-progress-row strong {
    font-family: var(--ds-font-mono);
    color: var(--ds-foreground);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-bottom > .dash-completo-panel:nth-child(2) .dash-completo-progress-list { gap: 20px; }

  /* ---- Valores em fonte monoespaçada (Geist Mono), igual ao Figma ---- */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-ativacoes-info .dash-completo-progress-row strong,
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-bottom .dash-completo-ativacoes-metrics strong {
    font-family: var(--ds-font-mono);
  }

  /* ================= Achados da auditoria visual (prints lado a lado) ================= */

  /* 1) Título "Dashboard" + subtítulo + filtro agora vivem DENTRO do
     header global (app-topbar), igual ao Figma - lá o topbar inteiro
     (título+subtítulo à esquerda, filtro+avatar à direita) é UMA linha
     só. O header global é compartilhado por todas as páginas, mas este
     bloco só existe/aparece quando $page é dashboard (PHP condicional,
     ver index.php) - nas outras páginas o header continua idêntico a
     antes. Aqui é só a camada visual desse bloco condicional. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .app-topbar {
    /* Figma: gap-3 (12px) especificamente ENTRE filtro/limpar/avatar -
       o espaco grande entre titulo e esse grupo vem do margin-right:auto
       do titulo (abaixo), nao desse gap. */
    gap: 12px;
  }
  /* .header-tools (bloco do "Administrador") tem seu PROPRIO
     margin-left:auto (pro-ui.css, generico pra qualquer pagina) - isso
     competia com o margin-right:auto do titulo e abria um espaco maior
     que 12px entre o filtro e o avatar. So' o titulo precisa empurrar
     tudo pra direita; o resto fica junto, com o gap normal. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .header-tools {
    margin-left: 0 !important;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-master-topbar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-right: auto;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-master-topbar-info h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-foreground);
    white-space: nowrap;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-master-topbar-info p {
    margin: 0;
    font-size: 11px;
    color: var(--ds-muted-foreground);
    white-space: nowrap;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"]) .dash-master-topbar-info {
    display: flex;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"]) .dash-master-topbar-filter {
    display: inline-flex;
  }

  /* "Limpar filtro" no Figma e' um botao SEM preenchimento - so borda,
     fundo transparente (so' a pilula do calendario tem bg-secondary).
     A regra generica (redesign-dashboard-2.css) da fundo cinza pros
     dois igual, porque esse link e' reaproveitado por outras paginas
     (cancelamento, despesas...) que devem continuar como estao - por
     isso a excecao e' so' aqui, escopada so' ao filtro da Dashboard. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-master-topbar-filter .dashboard-mes-clear {
    background: transparent !important;
  }
  /* Figma usa rounded-lg (12px) nos dois - a regra generica usa 8px. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-master-topbar-filter .dashboard-mes-clear,
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-master-topbar-filter input[type="month"] {
    border-radius: var(--ds-radius-lg) !important;
  }

  /* Botao customizado do filtro de mes: o <input type="month"> nativo
     nunca ficaria identico ao Figma (icone/posicao sao desenhados pelo
     navegador, sem controle via CSS). Agora o <input> real fica
     visualmente escondido (mas presente/funcional - showPicker() o
     abre) e esse botao mostra o icone+texto exatamente como o Figma. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-secondary);
    color: var(--ds-muted-foreground);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-trigger:hover {
    border-color: color-mix(in srgb, var(--ds-accent) 30%, transparent);
    color: var(--ds-foreground);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-trigger svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-picker {
    position: relative;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-trigger-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-left: -2px;
    transition: transform .15s ease;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--ds-accent) 40%, transparent);
    color: var(--ds-foreground);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-trigger[aria-expanded="true"] .dm-month-trigger-chevron {
    transform: rotate(180deg);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 300;
    width: 220px;
    background: var(--ds-popover);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    padding: 12px;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 10px;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-panel-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ds-muted-foreground);
    white-space: nowrap;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-year-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--ds-muted-foreground);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-year-nav:hover {
    background: var(--ds-secondary);
    color: var(--ds-foreground);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border: none;
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: var(--ds-foreground);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-cell:hover:not(.is-disabled) {
    background: var(--ds-secondary);
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-cell.is-selected {
    background: var(--ds-accent);
    color: var(--ds-accent-foreground);
    font-weight: 600;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-cell-check {
    font-size: 10px;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dm-month-cell.is-disabled {
    color: color-mix(in srgb, var(--ds-muted-foreground) 55%, transparent);
    cursor: default;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"]) .dash-master-head-mobile {
    display: none;
  }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-master-topbar-filter {
    flex-shrink: 0;
  }

  /* 3) Valor de cada KPI deve ficar na MESMA cor do chip de ícone ao
     lado (Figma: style={{color: kpi.color}}) - hoje todos os 6 valores
     saiam na cor neutra do texto, só o icone era colorido. Usa :has()
     pra pegar a cor a partir do icone irmão, sem precisar duplicar
     classe/cor em cada card no PHP. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile:has(.dash-completo-tile-icon--teal) .dash-completo-tile-value { color: #10B981; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile:has(.dash-completo-tile-icon--red) .dash-completo-tile-value { color: #EF4444; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile:has(.dash-completo-tile-icon--blue) .dash-completo-tile-value { color: #3B82F6; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile:has(.dash-completo-tile-icon--purple) .dash-completo-tile-value { color: #A78BFA; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile:has(.dash-completo-tile-icon--orange) .dash-completo-tile-value { color: #F59E0B; }
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile:has(.dash-completo-tile-icon--warn) .dash-completo-tile-value { color: #F97316; }

  /* 4) Exceção: Lucro do mês fica VERMELHO quando negativo, mesmo o
     icone sendo azul (igual ao Figma: kpi.negative override). Classe
     is-negative-value adicionada via PHP so' quando lucro<0. */
  :is(body[data-page="dashboard"], body[data-page="dashboard_master"])[data-theme-preset="dark"] .dash-completo-tile-value.is-negative-value {
    color: #EF4444 !important;
  }
}