/* ═══════════════════════════════════════════════════════════════
   dashboard.css — layout do painel principal

   POR QUE ESTE ARQUIVO EXISTE
   O dashboard vinha sendo ajustado por remendos: estilos soltos no
   HTML, três regras diferentes com !important reescrevendo grades, e
   duas colunas com quantidade de cards decidida à mão. O resultado
   era um buraco branco à esquerda e blocos que não alinhavam entre si.

   Aqui o layout tem uma regra só, e ela vale para tudo:

     • uma medida de respiro (--dash-gap) usada em todo lugar
     • os cards se distribuem sozinhos, equilibrando as colunas
     • as três colunas começam na mesma altura
     • os indicadores do topo têm larguras iguais

   index.html: <link rel="stylesheet" href="css/dashboard.css">
   ═══════════════════════════════════════════════════════════════ */

#page-dashboard {
  --dash-gap: 14px;
  --dash-aside: 310px;
  overflow-x: hidden;
}
#page-dashboard,
#page-dashboard * { box-sizing: border-box; }

/* ── Estrutura geral: conteúdo + coluna lateral ───────────────── */
.dash-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dash-aside);
  gap: var(--dash-gap);
  align-items: start;
}
.dash-left-col {
  display: flex;
  flex-direction: column;
  gap: var(--dash-gap);
  min-width: 0;
}
.dash-right-col {
  display: flex;
  flex-direction: column;
  gap: var(--dash-gap);
  position: sticky;
  top: var(--dash-gap);
  align-self: start;
  min-width: 0;
}

/* ── Indicadores do topo: larguras iguais, sem rolagem lateral ── */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dash-gap);
  margin: 0;
}
.dash-kpis .kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  min-width: 0;
}
.dash-kpis .kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dash-kpis .kpi-value {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── Duas colunas, cada card num lugar FIXO ─────────────────────
   Houve uma versão em que o navegador distribuía os cards sozinho,
   equilibrando as alturas. Com dados reais isso dava errado: os
   cards trocavam de coluna conforme o conteúdo chegava, e pulavam
   na frente de quem estava olhando. Posição fixa é o que cria
   hábito — cada informação sempre no mesmo lugar.

   A divisão é por assunto, e equilibra naturalmente a altura:
     esquerda · operação — Novas OS, OS em Aberto, Previsão, Montados
     direita  · gestão   — Carry Over, Faturamento, Despesas, RH,
                           Documentos, Veículos                      */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dash-gap);
  align-items: start;
  margin: 0;
}
.dash-col {
  display: flex;
  flex-direction: column;
  gap: var(--dash-gap);
  min-width: 0;
}
.dash-col > .card { margin: 0; width: 100%; }

/* ── Cards: mesma medida em todo o painel ─────────────────────── */
#page-dashboard .card {
  min-width: 0;
  max-width: 100%;
  border-radius: 12px;
}
#page-dashboard .card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 10px;
}
/* o link "ver todas →" encosta à direita sem empurrar o título */
#page-dashboard .card-title .card-action { margin-left: auto; flex-shrink: 0; }
#page-dashboard .card-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Enquanto carrega, o card já ocupa altura — evita a tela pulando */
#page-dashboard .card .empty {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Conteúdo não estoura o card ──────────────────────────────── */
#page-dashboard table { width: 100%; table-layout: fixed; }
#page-dashboard td,
#page-dashboard th { overflow: hidden; text-overflow: ellipsis; }
#page-dashboard [style*="grid-template-columns"] > *,
#page-dashboard [style*="display:flex"] > *,
#page-dashboard [style*="display: flex"] > * { min-width: 0; }

/* ── Telas menores ────────────────────────────────────────────── */
@media (max-width: 1400px) {
  #page-dashboard { --dash-aside: 280px; }
}
@media (max-width: 1150px) {
  .dash-cards { grid-template-columns: minmax(0, 1fr); }
  .dash-kpis  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash-main-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-right-col { position: static; order: -1; }
}
@media (max-width: 560px) {
  #page-dashboard { --dash-gap: 10px; }
  .dash-kpis { grid-template-columns: minmax(0, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════
   ACABAMENTO
   Nada é movido, removido nem reagrupado — todos os cards de hoje
   continuam onde estão. O que muda é só o acabamento: respiro,
   peso de texto, cantos e contraste. A intenção é a tela parecer
   mais nova sem ninguém precisar reaprender onde as coisas ficam.
   ═══════════════════════════════════════════════════════════════ */

/* ── Cards: borda mais leve, sombra no lugar do traço duro ────── */
#page-dashboard .card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px 16px;
  box-shadow: 0 1px 2px rgba(16, 15, 14, .04);
  transition: box-shadow .15s ease, border-color .15s ease;
}
#page-dashboard .card:hover {
  box-shadow: 0 3px 10px rgba(16, 15, 14, .07);
  border-color: var(--border2);
}

/* ── Título do card: hierarquia mais clara ───────────────────── */
#page-dashboard .card-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--text);
  padding-bottom: 10px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--border2);
}
#page-dashboard .card-action {
  font-size: 11.5px;
  font-weight: 600;
  opacity: .75;
  transition: opacity .15s;
}
#page-dashboard .card-action:hover { opacity: 1; }

/* ── Indicadores: mais ar e número em evidência ──────────────── */
.dash-kpis .kpi {
  min-height: 56px;
  padding: 12px 15px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 15, 14, .04);
  transition: box-shadow .15s ease, transform .15s ease;
}
/* a faixa colorida da esquerda é o que identifica cada indicador —
   define a borda sem tocar em border-left, senão ela some */
.dash-kpis .kpi {
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dash-kpis .kpi.kpi-blue,
.dash-kpis .kpi.kpi-amber,
.dash-kpis .kpi.kpi-red,
.dash-kpis .kpi.kpi-purple { border-left-width: 3px; border-left-style: solid; }
.dash-kpis .kpi:hover {
  box-shadow: 0 3px 10px rgba(16, 15, 14, .08);
  transform: translateY(-1px);
}
.dash-kpis .kpi-label {
  font-size: 10.5px;
  letter-spacing: .5px;
  color: var(--text3);
}
.dash-kpis .kpi-value { font-size: 22px; letter-spacing: -.5px; }

/* ── Barra de despesas: mesma linguagem dos cards ────────────── */
#page-dashboard .desp-bar {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16, 15, 14, .04);
  margin-bottom: var(--dash-gap);
  transition: box-shadow .15s ease;
}
#page-dashboard .desp-bar:hover { box-shadow: 0 3px 10px rgba(16, 15, 14, .07); }
#page-dashboard .desp-bar-cat { letter-spacing: .4px; }
#page-dashboard .desp-bar-val { font-variant-numeric: tabular-nums; }

/* ── Listas dentro dos cards: linhas respiram melhor ─────────── */
#page-dashboard .card table td,
#page-dashboard .card table th { padding-top: 7px; padding-bottom: 7px; }
#page-dashboard .card table tr + tr td { border-top: 1px solid var(--border2); }

/* ── Números sempre alinhados na vertical ────────────────────── */
#page-dashboard .kpi-value,
#page-dashboard .co-box-val,
#page-dashboard [class*="valor"],
#page-dashboard [class*="total"],
#page-dashboard [class*="-val"] { font-variant-numeric: tabular-nums; }

/* ── Carregando: barras no lugar do círculo girando ──────────── */
#page-dashboard .card .empty .spinner { opacity: .55; }
#page-dashboard .card .empty {
  color: var(--text3);
  font-size: 12px;
}

/* ── Coluna lateral: mesmo acabamento ────────────────────────── */
.dash-agenda-sticky { border-radius: 14px; }