/*
 * Tema v2 (tki) - selos (.badge), alertas (.alert), barra de progresso e
 * spinners.
 * Badge do tki: pilula, 12px/500, fundo -50 + texto -700 + borda -100 (no
 * escuro: fundo escuro tingido + texto -400).
 */

/* ---------- Badge ---------- */

:where(html.tki-layout) .badge {
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.35;
  border-radius: 999px;
}

html.tki-layout .badge {
  --tki-badge-bg: var(--tki-soft-neutral-bg);
  --tki-badge-fg: var(--tki-soft-neutral-fg);
  --tki-badge-bd: var(--tki-soft-neutral-bd);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  border: 1px solid transparent;
}

html.tki-layout .badge:is([class*='bg-'], [class*='text-bg-'], .badge-soft, .badge-pill) {
  background: var(--tki-badge-bg) !important;
  color: var(--tki-badge-fg) !important;
  border-color: var(--tki-badge-bd) !important;
}

html.tki-layout .badge:is(.bg-success, .bg-success-subtle, .text-bg-success, .badge-soft-success) { --tki-badge-bg: var(--tki-soft-success-bg); --tki-badge-fg: var(--tki-soft-success-fg); --tki-badge-bd: var(--tki-soft-success-bd); }
html.tki-layout .badge:is(.bg-warning, .bg-warning-subtle, .text-bg-warning, .badge-soft-warning) { --tki-badge-bg: var(--tki-soft-warning-bg); --tki-badge-fg: var(--tki-soft-warning-fg); --tki-badge-bd: var(--tki-soft-warning-bd); }
html.tki-layout .badge:is(.bg-danger, .bg-danger-subtle, .text-bg-danger, .badge-soft-danger) { --tki-badge-bg: var(--tki-soft-danger-bg); --tki-badge-fg: var(--tki-soft-danger-fg); --tki-badge-bd: var(--tki-soft-danger-bd); }
html.tki-layout .badge:is(.bg-info, .bg-info-subtle, .text-bg-info, .badge-soft-info) { --tki-badge-bg: var(--tki-soft-info-bg); --tki-badge-fg: var(--tki-soft-info-fg); --tki-badge-bd: var(--tki-soft-info-bd); }
html.tki-layout .badge:is(.bg-primary-subtle, .badge-soft-primary) { --tki-badge-bg: var(--tki-soft-primary-bg); --tki-badge-fg: var(--tki-primary-text); --tki-badge-bd: var(--tki-soft-primary-bd); }

/* bg-primary "cheio" = selo padrao do tki (cor da marca, texto branco) */
html.tki-layout .badge:is(.bg-primary, .text-bg-primary) {
  --tki-badge-bg: var(--tki-primary);
  --tki-badge-fg: #fff;
  --tki-badge-bd: var(--tki-primary);
}

html.tki-layout .badge:is(.bg-dark, .text-bg-dark) {
  --tki-badge-bg: #18181b;
  --tki-badge-fg: #fff;
  --tki-badge-bd: #18181b;
}
html.tki-layout[data-bs-theme='dark'] .badge:is(.bg-dark, .text-bg-dark) {
  --tki-badge-bg: #f4f4f5;
  --tki-badge-fg: #18181b;
  --tki-badge-bd: #f4f4f5;
}

/* Badge sem cor nenhuma (so' .badge): neutro */
html.tki-layout .badge:not([class*='bg-']):not([style*='background']) {
  background: var(--tki-badge-bg);
  color: var(--tki-badge-fg);
  border-color: var(--tki-badge-bd);
}

/* Bolinha de contagem (rounded-circle / position-absolute) continua cheia */
html.tki-layout .badge.rounded-circle,
html.tki-layout .badge.position-absolute { padding: 2px 6px; font-size: 11px; }

/* ---------- Alertas ---------- */

html.tki-layout .alert {
  --tki-alert-bg: var(--tki-soft-neutral-bg);
  --tki-alert-fg: var(--tki-fg-2);
  --tki-alert-bd: var(--tki-soft-neutral-bd);
  background: var(--tki-alert-bg) !important;
  color: var(--tki-alert-fg) !important;
  border: 1px solid var(--tki-alert-bd) !important;
  border-radius: var(--tki-radius-control) !important;
  padding: 12px 16px;
  font-size: 14px;
  box-shadow: none !important;
}

html.tki-layout .alert:is(.alert-success) { --tki-alert-bg: var(--tki-soft-success-bg); --tki-alert-fg: var(--tki-soft-success-fg); --tki-alert-bd: var(--tki-soft-success-bd); }
html.tki-layout .alert:is(.alert-warning) { --tki-alert-bg: var(--tki-soft-warning-bg); --tki-alert-fg: var(--tki-soft-warning-fg); --tki-alert-bd: var(--tki-soft-warning-bd); }
html.tki-layout .alert:is(.alert-danger) { --tki-alert-bg: var(--tki-soft-danger-bg); --tki-alert-fg: var(--tki-soft-danger-fg); --tki-alert-bd: var(--tki-soft-danger-bd); }
html.tki-layout .alert:is(.alert-info) { --tki-alert-bg: var(--tki-soft-info-bg); --tki-alert-fg: var(--tki-soft-info-fg); --tki-alert-bd: var(--tki-soft-info-bd); }
html.tki-layout .alert:is(.alert-primary) { --tki-alert-bg: var(--tki-soft-primary-bg); --tki-alert-fg: var(--tki-fg); --tki-alert-bd: var(--tki-soft-primary-bd); }
html.tki-layout .alert:is(.alert-dark) { --tki-alert-bg: var(--tki-surface-2); --tki-alert-fg: var(--tki-fg); --tki-alert-bd: var(--tki-border); }

/* Texto e links dentro do alerta seguem a cor dele (text-muted/dark etc.) */
html.tki-layout .alert :is(.alert-heading, h1, h2, h3, h4, h5, h6, strong, b, p, span, small, li, .text-dark, .text-muted, .text-body) {
  color: inherit !important;
}
html.tki-layout .alert .alert-link,
html.tki-layout .alert a:not(.btn) { color: inherit !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
html.tki-layout .alert hr { border-top-color: var(--tki-alert-bd); }
html.tki-layout .alert-dismissible .btn-close { padding: 8px; top: 8px; right: 8px; }

/* ---------- Progresso ---------- */

html.tki-layout .progress,
html.tki-layout .progress-stacked {
  --bs-progress-bg: var(--tki-soft-neutral-bg);
  --bs-progress-bar-bg: var(--tki-primary);
  --bs-progress-border-radius: 999px;
  --bs-progress-bar-color: #fff;
  background-color: var(--tki-soft-neutral-bg);
  border-radius: 999px;
  box-shadow: none;
}

html.tki-layout .progress-bar:not([class*='bg-']) { background: var(--tki-primary); }

/* ---------- Spinners ---------- */

html.tki-layout .spinner-border:not([class*='text-']) { color: var(--tki-primary); }
html.tki-layout .spinner-border { border-width: 2px; }
html.tki-layout .spinner-grow:not([class*='text-']) { color: var(--tki-primary); }