/* Pages / gestao-pessoas / situacao-cargos.css — Prompt 11. Reaproveita as
   classes `.vg-*` genéricas de visao-geral.css (header, filterbar, section,
   empty/error, topn, ver-todos, primary-row/kpi dominante) — este arquivo só
   cobre o que é específico desta página: os cards de KPI em duas fileiras
   (ocupação e financeiro) e a célula de barra de ocupação da matriz. */

/* ---------- Cards de KPI secundário (ocupação + financeiro) ---------- */
.sc-kpi-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--space-4); }
.sc-kpi-card{
  display:flex; flex-direction:column; gap:2px; padding:var(--space-4);
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface);
}
.sc-kpi-card-label{ font-size:12px; color:var(--text-secondary); }
.sc-kpi-card-value{ font-size:20px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }

/* ---------- Links de drill-through (Ver profissionais / Ver vagas em aberto) ---------- */
.sc-drillthrough-links{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }

/* ---------- Barra de % de Ocupação na matriz (seção 17 — valor visível junto ao sinal visual) ---------- */
.sc-ocupacao-cell{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-3); }
.sc-ocupacao-track{
  width:64px; height:6px; border-radius:999px; background:var(--surface-sunken);
  border:1px solid var(--border); overflow:hidden; flex-shrink:0;
}
.sc-ocupacao-fill{ height:100%; background:var(--accent); border-radius:999px; }
.sc-ocupacao-label{ font-size:12.5px; color:var(--text-primary); min-width:48px; text-align:right; }

/* Variante usada como `context` do KPI "% de Ocupação" (Prompt 14, seção
   48) — ocupa a largura toda do card em vez do tamanho fixo da célula da
   matriz; sem rótulo de porcentagem próprio (o valor grande do KPI já
   mostra o número, repeti-lo aqui seria redundante). */
.sc-ocupacao-track--kpi{ width:100%; height:8px; margin-top:2px; }

@media (max-width: 719px){
  .sc-kpi-row{ grid-template-columns:repeat(2, 1fr); }
  .sc-ocupacao-track{ width:40px; }
}