/* Dashboard — adaptação visual ao shell novo (Fase 4).
 *
 * NÃO existe um segundo Dashboard: `rDash()` continua sendo o mesmo, gerando o
 * mesmo HTML, com os mesmos ids, classes e ações. Este arquivo só reveste o que
 * ela já produz, dentro do escopo `.caixa-dash-scope` que ela própria usa — por
 * isso nada aqui vaza para os outros módulos.
 *
 * A paleta vem do shell e do `.jd-ext`. Não há terceira paleta: o que se faz é
 * apontar os tokens que o Dashboard já tinha para os valores que a página do
 * processo usa, de modo que os dois pareçam o mesmo produto.
 *
 * O que motivou cada regra está medido — a baseline nas sete larguras exigidas
 * mostrou dois cartões cortados em 360 px e botões de 24 px de altura.
 */

.caixa-dash-scope {
  /* mesmos valores do shell (slate), no lugar dos cinzas genéricos de antes */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border-light: #e2e8f0;
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / .05);
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* ── cartões: mesma borda, raio e sombra dos cartões do processo ────────── */
.caixa-dash-scope .card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / .04);
  background: #fff;
}

.caixa-dash-scope .stat-card {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.caixa-dash-scope .stat-card[onclick]:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -2px rgb(15 23 42 / .08);
}
.caixa-dash-scope .stat-card[onclick]:focus-visible {
  outline: 2px solid var(--jd-foco);
  outline-offset: 2px;
}

.caixa-dash-scope .stat-value { color: #0f172a }
.caixa-dash-scope .stat-label { color: #64748b }

/* ── grade de KPIs: adaptável, sem cartão espremido ─────────────────────
   Era `repeat(4, 1fr)` fixo com quebras manuais. Com `auto-fit`/`minmax` a
   quantidade de colunas passa a depender do espaço real — que muda também
   quando a sidebar é recolhida, não só quando a janela muda. */
.caixa-dash-scope .stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/* Abaixo de 420 px dois cartões não cabem: em 360 px a medição mostrou dois
   deles ultrapassando a borda da tela. Uma coluna resolve sem esconder nada. */
@media (max-width: 420px) {
  .caixa-dash-scope .stat-grid { grid-template-columns: 1fr }
  .caixa-dash-scope .stat-card { padding: 14px 16px }
  .caixa-dash-scope .stat-value { font-size: 26px }
}

/* ── atalhos ───────────────────────────────────────────────────────────── */
.caixa-dash-scope .shortcuts-row { gap: 8px }
.caixa-dash-scope .dash-chip {
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-weight: 500;
}
.caixa-dash-scope .dash-chip:hover { border-color: #cbd5e1; background: #f8fafc }
.caixa-dash-scope .dash-chip.primary {
  background: var(--jd-navy); border-color: var(--jd-navy); color: #fff;
}
.caixa-dash-scope .dash-chip.primary:hover { background: #1e293b }
.caixa-dash-scope .dash-chip:focus-visible {
  outline: 2px solid var(--jd-foco); outline-offset: 2px;
}

/* O botão "Novo" do cabeçalho de seção vinha com 24 px de altura. */
.caixa-dash-scope .section-header .btn,
.caixa-dash-scope .list-header .btn {
  min-height: 34px; display: inline-flex; align-items: center; gap: 5px;
}
@media (max-width: 767px) {
  .caixa-dash-scope .section-header .btn,
  .caixa-dash-scope .list-header .btn { min-height: 40px }
}

/* ── listas: título, metadados e data continuam legíveis ────────────────── */
.caixa-dash-scope .list-header-title,
.caixa-dash-scope .section-header-title { color: #0f172a }
.caixa-dash-scope .link-btn { color: #334155 }
.caixa-dash-scope .link-btn:hover { color: #0f172a; text-decoration: underline }

.caixa-dash-scope .list-item {
  border-radius: 7px;
}
.caixa-dash-scope .list-item:hover { background: #f8fafc }

/* Nome longo trunca com reticências, mas o valor completo continua acessível
   pelo `title` que a própria `rDash()` já coloca. */
.caixa-dash-scope .list-item .li-titulo,
.caixa-dash-scope .list-item strong {
  overflow: hidden; text-overflow: ellipsis;
}

/* ── duas colunas: empilha quando não há espaço ─────────────────────────── */
.caixa-dash-scope .two-col {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

/* ── celular: alvo de toque e respiro ───────────────────────────────────── */
@media (max-width: 767px) {
  .caixa-dash-scope .dash-chip { min-height: 42px; flex: 1 1 calc(50% - 4px) }
  .caixa-dash-scope .list-item { padding-top: 10px; padding-bottom: 10px }
  .caixa-dash-scope .two-col { grid-template-columns: 1fr }
}

/* ── impressão: o Dashboard não é documento ────────────────────────────── */
@media print {
  .caixa-dash-scope .shortcuts-card,
  .caixa-dash-scope .dash-chip { display: none !important }
}