/* ============================================================
   components.css — Componentes reutilizáveis da Plataforma.
   Carregado em base.html após tokens.css.
   Referência: docs/auditoria_design.md (Sprints 1+).
   ============================================================ */

/* ── .stat-card — card de métrica com acento lateral de 3px ──
   Padrão "card neutro + acento de cor", substituindo o antigo
   card 100% saturado. Veja auditoria §4 ("problema do semáforo").

   Uso:
     <a class="stat-card clickable" style="--stat-accent: var(--stat-success);" href="…">
       <div class="valor">42</div>
       <div class="label">Realizados</div>
     </a>

   Acentos disponíveis (definidos em tokens.css):
     --stat-default | --stat-brand   | --stat-info
     --stat-success | --stat-warning | --stat-danger | --stat-purple
*/
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  position: relative;
  display: block;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--stat-accent, var(--stat-default));
}
.stat-card .valor {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  line-height: 1;
}
.stat-card .label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: var(--sp-1);
}
.stat-card.clickable {
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.stat-card.clickable:hover {
  background: var(--surface-2);
}
.stat-card.ativo {
  box-shadow: 0 0 0 2px var(--stat-accent, var(--brand));
  background: var(--surface-2);
}


/* ── .stat-card.filled — variante saturada ──
   Fundo todo na cor do --stat-accent (--danger / --warning / --success / etc.)
   com texto branco. Usada em listagens onde o status precisa "saltar":
   Controle de Exames (lab_recepcao) e Interface Vencimentos. */
.stat-card.filled {
  background: var(--stat-accent, var(--stat-default));
  border-color: transparent;
  color: #fff;
}
.stat-card.filled::before { display: none; }
.stat-card.filled .valor  { color: #fff; }
.stat-card.filled .label  { color: rgba(255, 255, 255, .92); }
.stat-card.filled.clickable:hover {
  background: var(--stat-accent, var(--stat-default));
  filter: brightness(1.08);
}
.stat-card.filled.ativo {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: 0 0 0 2px var(--stat-accent, var(--brand));
}


/* ── .topbar-crumbs — breadcrumb da topbar ──
   Uso (em qualquer template):
     {% block breadcrumb %}
       <a href="{{ url_for('lab_recepcao.index') }}">Laboratório</a>
       <span class="crumb-sep">›</span>
       <span class="crumb-current">Controle de Exames</span>
     {% endblock %}
   Sem override do block, cai no fallback de page_title em base.html.
*/
.topbar-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.3;
}
.topbar-crumbs a {
  color: var(--ink-3);
  text-decoration: none;
}
.topbar-crumbs a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.topbar-crumbs .crumb-current {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.topbar-crumbs .crumb-sep {
  color: var(--ink-4);
  font-size: var(--fs-xs);
}


/* ── .env-badge — indicador de ambiente nao-PROD ──
   Aparece automaticamente em base.html quando config.AMBIENTE_PYTHON
   nao for [PROD]. Cor de aviso para evitar acidentes. */
.env-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--warning);
  color: #fff;
}


/* ── tr:target — destaque visual para deep-links com fragment (#exec-N) ──
   Usado pelo sino de notificacoes pra apontar pra uma linha especifica
   em paginas de historico (ver `webapp/notificacoes.py`). */
tr:target > td {
  background: rgba(253, 126, 20, .18) !important;  /* tom warning suave */
  animation: trHighlight 1.6s ease-out;
}
@keyframes trHighlight {
  0%   { background: rgba(253, 126, 20, .55); }
  100% { background: rgba(253, 126, 20, .18); }
}


/* ── .empty-state — placeholder para listas/tabelas vazias ──
   Pareado com webapp/templates/_components/empty_state.html. */
.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--ink-3);
}
.empty-state-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 12px;
  opacity: .4;
  color: var(--ink-3);
}
.empty-state-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: 4px;
}
.empty-state-desc {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.4;
}
.empty-state-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}