/* ============================================================================
 * ec-metric-card — Card de métrica do dashboard
 * ----------------------------------------------------------------------------
 * Story 4.3 / EPIC-004
 *
 * Card visualmente uniforme para exibir métricas-chave do negócio.
 * Estrutura: label .ec-label UPPERCASE → valor em DM Sans 600 grande
 * (tabular-nums) → meta em .ec-meta cinza.
 *
 * Variantes:
 *   .ec-metric-card               — default (borda completa 0.5px)
 *   .ec-metric-card.is-borderless — só borda esquerda 2px (estilo editorial)
 *   .ec-metric-card.is-clickable  — adiciona hover + cursor pointer (vira <a>)
 *   .ec-metric-card.is-warning    — borda esquerda 3px amarela (atenção)
 *
 * Acessibilidade:
 * - Variante is-clickable é renderizada como <a> com aria-label descritivo
 *   (responsabilidade do template chamador / macro Jinja).
 * - Texto do meta sempre em --ec-gray-600 (ratio ≥ 7:1 contra branco).
 *
 * Referência: ux-design-specification.md §"Estratégia de Componentes"
 * ========================================================================= */

.ec-metric-card {
  display: block;
  background: var(--ec-white);
  border: 0.5px solid var(--ec-gray-100);
  border-radius: var(--ec-radius-md);
  padding: var(--ec-space-4) var(--ec-space-6);
  color: var(--ec-black);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ec-metric-card:hover {
  /* sem hover por default; ativa só na variante is-clickable */
  text-decoration: none;
}

.ec-metric-card__label {
  font-family: var(--ec-font-sans);
  font-weight: 600;
  font-size: 10px;
  line-height: 1.20;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ec-gray-400);
  margin: 0 0 var(--ec-space-1) 0;
}

.ec-metric-card__value {
  font-family: var(--ec-font-sans);
  font-weight: 600;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.10;
  letter-spacing: -0.02em;
  color: var(--ec-black);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  margin: 0;
  /* Sobrescreve .h3/h3 do Bootstrap se a macro herdar de tag de heading */
  display: block;
}

.ec-metric-card__meta {
  font-family: var(--ec-font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.50;
  color: var(--ec-gray-600);
  margin: var(--ec-space-1) 0 0 0;
}

/* ─── Variantes ─────────────────────────────────────────────────────── */

.ec-metric-card.is-borderless {
  border: none;
  border-left: 2px solid var(--ec-gray-100);
  border-radius: 0;
  padding-left: var(--ec-space-6);
}

.ec-metric-card.is-clickable {
  cursor: pointer;
}

.ec-metric-card.is-clickable:hover,
.ec-metric-card.is-clickable:focus-visible {
  box-shadow: var(--ec-shadow-hover);
  text-decoration: none;
}

.ec-metric-card.is-warning {
  border-left: 3px solid var(--ec-yellow);
}