/* ============================================================
 * TEDDY DS — FEEDBACK
 *
 * NÃO duplica o que já está em components.css:
 *   .toast / .modal / .skeleton / .progress / .empty-state
 *
 * Adiciona aqui:
 *   .tag-* semântico (success/warning/error/info) usando tokens
 *   .tag-sm modificador de tamanho
 *   .alert  (banner inline persistente — para o que não cabe em toast)
 *
 * Componentes legados que continuam existindo intactos:
 *   .tag, .tag-blue, .tag-green, .tag-gray (em original.css)
 *   .badge-status.online/.offline (em components.css)
 * ============================================================ */

/* ── Tags semânticas ───────────────────────────────────────── */
/* O .tag base já existe em original.css. Aqui adicionamos as
   variantes que faltavam, alinhadas com as cores semânticas. */

.tag-success {
  background: var(--color-success-bg);
  color: var(--color-success-ink);
}
.tag-warning {
  background: var(--color-warning-bg);
  color: #92400e; /* warning-ink — escuro o suficiente para contrast AA */
}
.tag-error,
.tag-danger {
  background: var(--color-error-bg);
  color: #991b1b;
}
.tag-info {
  background: var(--color-info-bg);
  color: #1e40af;
}

/* Tag com ícone (boxicons inline) */
.tag-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tag-icon i { font-size: 12px; }

/* Tamanho pequeno */
.tag-sm {
  padding: 2px 8px !important;
  font-size: 10px !important;
}

/* ── Alert (banner inline) ─────────────────────────────────── */
/* Usado para mensagens persistentes no fluxo da página — ao
   contrário do toast (temporário, fora do fluxo). */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-info);
  background: var(--color-info-bg);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}
.alert i {
  font-size: 22px;
  color: var(--color-info);
  flex-shrink: 0;
  margin-top: -2px;
}
.alert-body { flex: 1; min-width: 0; }
.alert-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: 2px;
  font-size: var(--font-size-sm);
}
.alert-message {
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
}
.alert-close {
  cursor: pointer;
  color: var(--color-text-mute);
  font-size: 20px;
  margin-left: var(--space-2);
}
.alert-close:hover { color: var(--color-text); }

/* Variantes */
.alert.alert-success { border-left-color: var(--color-success); background: var(--color-success-bg); }
.alert.alert-success i { color: var(--color-success); }
.alert.alert-warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.alert.alert-warning i { color: var(--color-warning); }
.alert.alert-error,
.alert.alert-danger  { border-left-color: var(--color-error); background: var(--color-error-bg); }
.alert.alert-error i,
.alert.alert-danger i { color: var(--color-error); }