/* =====================================================================
   Sistema de design global — "instrumento" (Onda 0).
   Promove a linguagem do Plantel (gema, Space Grotesk, tabular, semáforo)
   para o app inteiro:
     (1) retrofit das classes legadas (.page-title, .kpi-hero, tabelas,
         .section-card) — propaga o visual sem editar 100 templates;
     (2) componentes ds-* novos para uso estrutural nas ondas seguintes.
   Carregado depois de theme.css; usa os tokens do :root.
   ===================================================================== */

/* --- (1) Retrofit das classes legadas -------------------------------- */

/* Títulos de página + cabeçalhos de seção em fonte de instrumento. */
.page-title,
.page-panel > h1,
.page-panel > h2,
.section-card > h2,
.section-card > h3,
.kpi-hero {
    font-family: var(--font-display);
}
.page-title { letter-spacing: -0.01em; }

/* Números-herói (KPIs financeiros e de produção) em display + tabular. */
.kpi-hero,
.farm-tile__value {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Tabelas Bootstrap: cabeçalho em instrumento, números tabulares. */
table.table thead th {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    color: var(--muted-strong);
}
table.table td { font-variant-numeric: tabular-nums; }
table.table td.text-end, table.table th.text-end,
table.table td.num, table.table th.num { text-align: right; }

/* Card legado tokenizado (padding na escala). */
.section-card { padding: var(--space-4); }

/* --- (2) Componentes ds-* (uso novo / estrutural) -------------------- */

.ds-card {
    background: var(--surface);
    border: 1px solid var(--line-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    padding: var(--space-4);
}
.ds-card--ok      { border-left: 4px solid var(--vital-saudavel); }
.ds-card--atencao { border-left: 4px solid var(--vital-atencao); }
.ds-card--critico { border-left: 4px solid var(--vital-critico); }
.ds-card--gema    { border-left: 4px solid var(--gema); }

.ds-h {
    font-family: var(--font-display); font-weight: 600;
    color: var(--text-strong); margin: 0 0 var(--space-3);
}
.ds-eyebrow {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: 0.12em; font-size: 0.7rem; font-weight: 600; color: var(--muted);
}
.ds-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* Grade de KPIs */
.ds-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); }
.ds-kpi { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.ds-kpi__v { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ds-kpi__k { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
.ds-kpi--ok .ds-kpi__v { color: var(--vital-saudavel); }
.ds-kpi--atencao .ds-kpi__v { color: var(--vital-atencao); }
.ds-kpi--critico .ds-kpi__v { color: var(--vital-critico); }

/* Tabela instrumento */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ds-table th, .ds-table td { padding: 7px 9px; border-bottom: 1px solid var(--line-2); text-align: left; }
.ds-table th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; color: var(--muted-strong); }
.ds-table td { color: var(--text); font-variant-numeric: tabular-nums; }
.ds-table .num { text-align: right; }

/* Badges de severidade — sistema ÚNICO (substitui text-success/danger,
   .rt-sev-* e .aging sev-* nas ondas seguintes). */
.ds-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; }
.ds-badge--ok      { background: var(--vital-saudavel-soft); color: var(--vital-saudavel); }
.ds-badge--atencao { background: var(--vital-atencao-soft); color: var(--vital-atencao); }
.ds-badge--critico { background: var(--vital-critico-soft); color: var(--vital-critico); }
.ds-badge--gema    { background: var(--gema-soft); color: var(--gema-strong); }
.ds-badge--neutral { background: var(--surface-3); color: var(--muted-strong); }

/* Estado vazio instrumento (convite à ação). */
.ds-empty { text-align: center; padding: var(--space-6) var(--space-4); background: var(--surface); border: 1px dashed var(--line-card); border-radius: var(--radius); color: var(--muted); }
.ds-empty h2, .ds-empty h3 { font-family: var(--font-display); color: var(--text-strong); }

/* Utilitários de severidade (texto). */
.is-saudavel { color: var(--vital-saudavel); }
.is-atencao  { color: var(--vital-atencao); }
.is-critico  { color: var(--vital-critico); }

/* Spinner intencional p/ estados de carregamento. */
.ds-loading { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--fs-sm); }
.ds-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--gema); border-radius: 50%; animation: ds-spin 0.7s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-loading::before { animation: none; } }