/* =============================================================================
   DASHBOARD — estilos exclusivos da tela
   -----------------------------------------------------------------------------
   Estava num bloco de estilo inline dentro de views/dashboard.html. Saiu de lá
   em 17/09/2026: estilo inline em template injetado pelo Angular é frágil, e ao
   fechar a <div ng-if="!loading"> (aberta desde a linha 6, que engolia o bloco)
   ele passou a ficar na raiz do template e deixou de ser aplicado — os quadros
   de Ofertas e Matches perderam o `display:grid` e empilharam.

   Regra desta tela: CSS vai em arquivo, nunca inline no template.
   A base dos cards de mercado fica em css/mercado.css, compartilhada com a tela
   de Mercado. Aqui só o que é exclusivo ou divergente do dashboard.
   ============================================================================= */

/* --- Dashboard é mais compacto que a tela de Mercado: 7 overrides --- */
.dm-secao        { margin-bottom: 18px; }
.dm-secao-titulo { border-bottom: 1px solid var(--borda); }
.dm-grid         { gap: 10px; }
.dm-card         { border-radius: var(--radius); padding: 14px; }
.dm-label        { margin-bottom: 6px; }
.dm-valor        { font-size: 1.4rem; }
.dm-unidade      { font-size: .7rem; }
.dm-noticia      { padding: 10px 14px; }

/* --- Linhas de oferta, exclusivas desta tela --- */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
}
.dash-row-nome  { min-width: 100px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.dash-row-preco { white-space: nowrap; font-weight: 600; color: var(--marrom); font-size: .85rem; }
.dash-row-score { flex-shrink: 0; }
.dash-row-status { margin-left: 12px; flex-shrink: 0; }
.dash-row-tipo  { flex: 1; min-width: 0; }

/* Restaurada: estava no bloco original e se perdeu na unificação do CSS.
   Abaixo de 900px os quadros de Ofertas e Matches empilham; acima disso
   ficam lado a lado, que é o layout desta tela. */
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .dm-grid { grid-template-columns: 1fr; }
}