/* ---------------------------------------------------------------------------
   components.css — SÓ os componentes que as telas usam hoje.

   Convive com o Bootstrap 5.3: os modificadores têm prefixo próprio (`.btn--*`,
   `.badge--*`) e se somam às classes-base do Bootstrap, então nada do que já
   existe regride. Toda cor vem de `tokens.css` (nenhum hex aqui).
   --------------------------------------------------------------------------- */

/* --- Títulos ---------------------------------------------------------------
   O nível do heading é a ESTRUTURA (h1 é o título da tela, e há um só); o
   tamanho é o TOKEN. Antes o tamanho vinha de `.h3`/`.h6` grudado no elemento,
   o que fazia a hierarquia semântica e a visual discordarem. */
.page-title {
  font-size: var(--t-xl);
  font-weight: var(--w-bold);
  line-height: 1.2;
  color: var(--c-text);
}
.section-title {
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  line-height: 1.3;
  color: var(--c-text);
}

/* Campo de busca do cabeçalho de lista (era um `style=` inline por tela). */
.search-input {
  max-width: 260px;
}

/* --- Cartão ---------------------------------------------------------------- */
.card {
  border-color: var(--c-border);
  border-radius: var(--r-lg);
}
.card.shadow-sm {
  box-shadow: var(--sh-2) !important;
}
.card-header {
  font-size: var(--t-sm);
}

/* --- Botão: 3 variantes, 2 tamanhos ---------------------------------------
   Use junto de `.btn` do Bootstrap: `class="btn btn--primary btn--sm"`. */
.btn {
  --bs-btn-font-weight: var(--w-medium);
  border-radius: var(--r-md);
}
.btn--primary,
.btn-primary {
  --bs-btn-color: var(--c-text-on-brand);
  --bs-btn-bg: var(--c-brand);
  --bs-btn-border-color: var(--c-brand);
  --bs-btn-hover-color: var(--c-text-on-brand);
  --bs-btn-hover-bg: var(--c-brand-hover);
  --bs-btn-hover-border-color: var(--c-brand-hover);
  --bs-btn-active-color: var(--c-text-on-brand);
  --bs-btn-active-bg: var(--c-brand-active);
  --bs-btn-active-border-color: var(--c-brand-active);
  box-shadow: 0 2px 8px rgba(var(--c-brand-rgb), 0.28);
}
.btn--secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--c-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-border);
  --bs-btn-hover-color: var(--c-brand);
  --bs-btn-hover-bg: rgba(var(--c-brand-rgb), 0.08);
  --bs-btn-hover-border-color: var(--c-brand);
  --bs-btn-active-color: var(--c-brand);
  --bs-btn-active-bg: rgba(var(--c-brand-rgb), 0.14);
  --bs-btn-active-border-color: var(--c-brand);
}
.btn--danger,
.btn-outline-danger {
  --bs-btn-color: var(--c-danger);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-danger);
  --bs-btn-hover-color: var(--c-text-on-brand);
  --bs-btn-hover-bg: var(--c-danger);
  --bs-btn-hover-border-color: var(--c-danger);
  --bs-btn-active-color: var(--c-text-on-brand);
  --bs-btn-active-bg: var(--c-danger);
  --bs-btn-active-border-color: var(--c-danger);
}
/* As duas restantes do inventário (1 uso cada): mesmo mapeamento, sem variante
   própria — não são papéis novos, são call-sites que ainda não migraram. */
.btn-outline-primary {
  --bs-btn-color: var(--c-brand);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-brand);
  --bs-btn-hover-color: var(--c-text-on-brand);
  --bs-btn-hover-bg: var(--c-brand);
  --bs-btn-hover-border-color: var(--c-brand);
  --bs-btn-active-color: var(--c-text-on-brand);
  --bs-btn-active-bg: var(--c-brand-active);
  --bs-btn-active-border-color: var(--c-brand-active);
}
.btn-success {
  --bs-btn-color: var(--c-text-on-brand);
  --bs-btn-bg: var(--c-ok);
  --bs-btn-border-color: var(--c-ok);
  --bs-btn-hover-color: var(--c-text-on-brand);
  --bs-btn-hover-bg: var(--c-ok);
  --bs-btn-hover-border-color: var(--c-ok);
  --bs-btn-active-color: var(--c-text-on-brand);
  --bs-btn-active-bg: var(--c-ok);
  --bs-btn-active-border-color: var(--c-ok);
}

.btn--sm {
  --bs-btn-padding-y: var(--sp-1);
  --bs-btn-padding-x: var(--sp-3);
  --bs-btn-font-size: var(--t-sm);
  border-radius: var(--r-sm);
}
.btn--md {
  --bs-btn-padding-y: var(--sp-2);
  --bs-btn-padding-x: var(--sp-4);
  --bs-btn-font-size: var(--t-md);
}
/* Foco: um só anel, obrigatório em TODO interativo. */
.btn:focus-visible,
.field__control:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Campo de formulário --------------------------------------------------- */
.field {
  margin-bottom: var(--sp-4);
}
.field__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--c-text);
}
/* Legado: `imports.js` e `plans.js` ainda emitem `form-label fw-semibold`.
   A margem existia em `styles.css` e sumiu com ele — volta como token. */
.form-label.fw-semibold {
  margin-bottom: var(--sp-1);
}
.field__required {
  color: var(--c-danger);
}
.field__hint {
  margin-top: var(--sp-1);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
}
.field__error {
  margin-top: var(--sp-1);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--c-danger);
}
/* O raio e o anel de foco valem em TODO input do portal, não só no que o
   `forms.js` emite: 9 inputs nascem à mão (`list.js`, `channels.js`,
   `catalog.js`, `imports.js`, `testchat.js`, `tenant.js`) e voltariam ao foco
   azul padrão do Bootstrap se o seletor citasse só `.field__control`. */
.field__control,
.form-control,
.form-select {
  border-radius: var(--r-md);
}
.field__control:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 0.2rem rgba(var(--c-brand-rgb), 0.18);
}
.field--error .field__control,
.field--error .field__control:focus {
  border-color: var(--c-danger);
}
.field--error .field__control:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--c-danger-rgb), 0.18);
}

/* --- Badge: 3 tons para os 3 estados reais ---------------------------------
   ESCOPADO de propósito. A forma-pílula e o tamanho valem para os badges DESTA
   fundação (`.badge--*`); os `badge text-bg-*` que sobraram no app — e o
   `chat.html` público, que nem carrega estas telas — seguem com a aparência
   Bootstrap que sempre tiveram. Um `.badge` global reformataria badge de tela
   nenhuma migrada, que é regressão silenciosa, não fundação. */
.badge--ok,
.badge--neutral,
.badge--attention {
  font-weight: var(--w-bold);
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
  border-radius: var(--r-round);
  padding: var(--sp-1) var(--sp-3);
}
/* Legado do arquivo anterior: os `badge rounded-pill` não migrados mantêm o
   peso e o tracking que `styles.css` lhes dava. */
.badge.rounded-pill {
  font-weight: var(--w-medium);
  letter-spacing: 0.01em;
}
.badge--ok {
  color: var(--c-ok);
  background-color: var(--c-ok-soft);
}
.badge--neutral {
  color: var(--c-text-muted);
  background-color: var(--c-surface-raised);
}
.badge--attention {
  color: var(--c-warn);
  background-color: var(--c-warn-soft);
}

/* --- Tabela ---------------------------------------------------------------- */
.table > :not(caption) > * > * {
  padding-block: var(--sp-3);
}
.table > thead th {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--c-brand-rgb), 0.05);
}

/* --- Estado vazio ---------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--c-text-muted);
}
.empty__icon {
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--c-brand);
  opacity: 0.6;
}
.empty__title {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  color: var(--c-text);
}
.empty__body {
  margin: 0;
  font-size: var(--t-sm);
  max-width: 44ch;
}

/* --- Nota (substitui `alert-secondary` + `alert-info`) --------------------- */
.note {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-brand);
  border-radius: var(--r-md);
  background-color: var(--c-surface-raised);
  color: var(--c-text);
  font-size: var(--t-sm);
}

/* --- Texto secundário: um token, três nomes --------------------------------
   Isto é um ALIAS, não uma migração: `.text-soft` é o nome novo, e os 35 usos
   de `text-muted` (13) e `text-body-secondary` (22) que continuam no app são
   redirecionados para o mesmo token daqui. Enquanto esses call-sites existirem,
   remover uma destas três linhas muda a cor de 35 lugares — por isso o alias é
   guardado por teste (`test/cssContract.test.js`), não por disciplina. */
.text-soft,
.text-muted,
.text-body-secondary {
  color: var(--c-text-muted) !important;
}