/* Relatórios 4.0 (Fase I do MIGRATION_ROADMAP.md) — layout próprio só para
   o seletor de período e a grade de cartões de relatório. Cartões em si
   reaproveitam .panel/.aps-card/.forecast-grid/.forecast-item já definidos
   em financeiro-3.0.css (mesma família visual do Financeiro), carregado
   antes deste arquivo em relatorios.html — nenhuma duplicação de regra. */

.report-period{padding:16px 20px;margin-bottom:18px}
.report-period-row{display:flex;flex-wrap:wrap;align-items:end;gap:14px}
.report-period-field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--dd-ink-soft)}
.report-period-field select,.report-period-field input{
  padding:9px 11px;border:1px solid var(--dd-border);border-radius:var(--dd-radius-md);
  background:var(--dd-bg);color:var(--dd-ink);font:600 13.5px/1.2 var(--dd-font-body);min-height:44px
}
.report-period-field select:focus-visible,.report-period-field input:focus-visible{outline:2px solid var(--dd-violet);outline-offset:1px}
.report-period-custom{display:flex;flex-wrap:wrap;align-items:end;gap:14px}
/* [hidden] perde para o display:flex acima (mesma especificidade, esta regra
   vence por vir depois) — mesmo padrão de .aps-state[hidden] (Fase I). Sem
   isso, o seletor de data personalizada ficava visível mesmo com preset !==
   'custom' (atributo hidden presente no HTML e setado por JS). */
.report-period-custom[hidden]{display:none}
.report-period-label{margin:12px 0 0;color:var(--dd-ink-mute);font-size:12.5px}

.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.report-card{display:flex;flex-direction:column;gap:14px}
.report-card-grid{margin-top:2px}
.report-card-big{
  font-family:var(--dd-font-display);font-size:40px;font-weight:700;line-height:1;color:var(--dd-ink);
  padding:6px 0 2px
}
.report-card-note{margin:0;color:var(--dd-ink-mute);font-size:12px}
.report-card-cta{
  margin-top:auto;align-self:flex-start;color:var(--dd-violet);font-size:12.5px;font-weight:700;
  text-decoration:none
}
.report-card-cta:hover,.report-card-cta:focus-visible{text-decoration:underline}

.report-scope-note{margin:18px 2px 0;color:var(--dd-ink-mute);font-size:12.5px;max-width:640px}
.report-scope-note a{color:var(--dd-violet);font-weight:600}

#report-error,#report-empty{margin-bottom:18px}

@media (max-width:1180px){
  .report-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .report-grid{grid-template-columns:1fr}
  .report-period-row{flex-direction:column;align-items:stretch}
  .report-period-custom{flex-direction:column;align-items:stretch}
  .report-period-field select,.report-period-field input{width:100%}
  #report-apply{width:100%}
}

/* prefers-reduced-motion: nenhuma animação própria nesta tela — só a
   herdada de .aps-btn/.dd-mais-sheet etc., já tratada nas folhas globais. */