/*
 * ivitra · Design System
 * Camada sobre styles.css: escalas (espaço, tipo, raio, camadas), cores de status e componentes reutilizáveis.
 * Documentação viva em /design. Regra: use token, nunca valor solto.
 */
:root {
  /* Espaço (base 4px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  /* Tipo */
  --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-md: 0.95rem; --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.75rem;
  --fw-regular: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800;
  /* Raios */
  --r-sm: 8px; --r-md: 14px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-pill: 999px;
  /* Camadas */
  --z-nav: 20; --z-overlay: 40; --z-modal: 60; --z-toast: 80;
  /* Status (fundo, texto, borda) */
  --st-ok-bg: #E2F1EA;   --st-ok: #237B62;
  --st-warn-bg: #F8EBD9; --st-warn: #8A5A12;
  --st-err-bg: #F7E3E1;  --st-err: #B84040;
  --st-info-bg: #E0F0EE; --st-info: #075F60;
  --st-neutral-bg: var(--surface-2); --st-neutral: var(--muted);
  /* Menu escuro do admin */
  --side-bg: #0B3F40; --side-text: #E6F2EF; --side-muted: #9DC4BE; --side-active: #FFFFFF; --side-active-text: #075F60;
  --control-h: 44px;
}

/* ---------- Selos ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--st-neutral-bg); color: var(--st-neutral); white-space: nowrap; }
.badge.ok { background: var(--st-ok-bg); color: var(--st-ok); }
.badge.warn { background: var(--st-warn-bg); color: var(--st-warn); }
.badge.err { background: var(--st-err-bg); color: var(--st-err); }
.badge.info { background: var(--st-info-bg); color: var(--st-info); }

/* ---------- Campos ---------- */
.ds-field { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--muted); min-width: 0; }
.ds-input, .ds-field input, .ds-field select, .ds-field textarea {
  min-height: var(--control-h); padding: 8px 12px; width: 100%; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font-size: var(--fs-md); font-weight: var(--fw-regular);
}
.ds-input:hover, .ds-field input:hover, .ds-field select:hover, .ds-field textarea:hover { border-color: color-mix(in srgb, var(--brand-2) 40%, var(--border)); }
.ds-input:focus-visible, .ds-field input:focus-visible, .ds-field select:focus-visible, .ds-field textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--ring) 35%, transparent); outline-offset: 0; border-color: var(--ring); }
.ds-field textarea { resize: vertical; }

/* ---------- Botões (variantes e tamanho) ---------- */
button.sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
button.danger { background: var(--st-err-bg); color: var(--st-err); border: 1px solid transparent; }
button.quiet { background: transparent; border: 0; color: var(--brand-2); }

/* ---------- Cartão ---------- */
.ds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.ds-card-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); }
.ds-card-sub { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Indicador (KPI) ---------- */
.ds-stat { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); position: relative; overflow: hidden; }
.ds-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--brand-2), var(--violet)); }
.ds-stat-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ds-stat-value { font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ---------- Barra de ferramentas e linhas ---------- */
.toolbar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.toolbar > .grow { flex: 1 1 200px; }
.data-row { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.data-row:hover { border-color: color-mix(in srgb, var(--brand-2) 35%, var(--border)); }
.ghost.danger { color: var(--st-err); border-color: color-mix(in srgb, var(--st-err) 45%, transparent); }