/* ====================================
   WebApp - Button Styles & Interactive Fixes
   ==================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Espaçamento ícone↔texto (#88): o .btn é flex, mas sem gap o ícone "cola" no texto
     (o espaço literal entre <i> e o texto é colapsado pelo flex). O gap só atua ENTRE
     itens, então botões só-ícone ou só-texto não são afetados. Vale em todas as áreas. */
  gap: 0.4rem;
  min-height: var(--btn-height-md);
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
}

.btn i,
.btn .bi {
  line-height: 1;
}

/* Botões não devem se mover no hover; o feedback visual deve vir de cor/borda. */
:is(button, a, input, label)[class*="btn"]:is(:hover, :active),
.btn:is(:hover, :active) {
  transform: none !important;
}

:is(button, a, input, label)[class*="btn"]:hover,
.btn:hover {
  box-shadow: none !important;
}

.btn-sm {
  min-height: var(--btn-height-sm);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.btn-lg {
  min-height: var(--btn-height-lg);
}

.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem var(--color-blue-bright);
}

/* All outline buttons - ensure white text on hover/active (background changes) */
/* NOTA: NÃO incluir :focus aqui, pois no focus o background permanece transparente */
[class*="btn-outline"]:hover,
[class*="btn-outline"]:active,
[class*="btn-outline"].active {
  color: var(--color-surface-card) !important;
}

/* All solid buttons - ensure white text on hover/active */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
  color: var(--color-surface-card) !important;
}

/* Warning button - texto escuro legível (fundo amarelo/laranja) */
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active {
  color: var(--color-surface-card) !important;
}
/* No focus sem active, manter cor escura (o fundo continua amarelo) */
.btn-warning:focus:not(:active) {
  color: var(--color-neutral-900) !important;
}

/* Light button special case */
.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active {
  color: var(--color-primary) !important;
  background-color: var(--color-bs-gray-100) !important;
}

/* Global focus ring — usa --focus-ring definido pelo tenant resolvido. */
.btn:focus-visible,
a:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* Baseline GLOBAL de foco acessível (AA 2.4.7) — ADITIVO.
   Desenha anel de foco por teclado nos interativos que NÃO eram cobertos pela
   regra acima: <button> cru, input/select/textarea sem classe Bootstrap, <summary>,
   [tabindex] e [role="button"]. Usa :where() (especificidade 0) para que toda regra
   :focus-visible já existente (botões/inputs com --focus-ring, accordion, topbar,
   auth) continue vencendo. O anel herda a cor de marca da área via --color-focus,
   mantendo o contrato whitelabel. Puramente aditivo: só pinta onde antes não havia. */
:where(button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--color-focus, var(--primary, var(--color-primary)));
  outline-offset: var(--focus-outline-offset, 2px);
}

/* Links - ensure visibility on all states */
a:active,
a:focus,
.nav-link:active,
.nav-link:focus {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Dropdown items — hover/active usa primary-soft (bg) + primary (texto) por área. */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
  background-color: var(--primary-soft) !important;
  color: var(--primary) !important;
}

/* Outline-primary: hover/active = white text, focus = keep original color */
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: var(--color-surface-card) !important;
}

/* Outline-secondary: hover/active = white text, focus = keep original */
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  color: var(--color-surface-card) !important;
}

/* Outline-danger: hover/active = white text, focus = keep original */
.btn-outline-danger:hover,
.btn-outline-danger:active,
.btn-outline-danger.active {
  color: var(--color-surface-card) !important;
}

.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light.active {
  color: var(--color-surface-card) !important;
}

/* Link de reenvio de código — estilo discreto cinza */
.resend-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-gray-400);
  font-weight: 400;
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.resend-link:hover:not(:disabled) {
  color: var(--color-gray-500);
}

.resend-link:disabled {
  color: var(--color-gray-400);
  cursor: default;
  text-decoration: none;
}

.none-decoration {
  text-decoration: none;
}

/* ── Botão Ação Perigo — vermelho (Inativar, Suspender) ── */
.btn-action-danger,
.btn-offer-deactivate {
  background: var(--color-danger-soft-100);
  color: var(--color-danger-700);
  border: 1px solid rgba(185, 28, 28, 0.2);
  border-radius: 10px;
  padding: 0.6rem var(--spacing-md);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.08);
}

.btn-action-danger:hover,
.btn-offer-deactivate:hover {
  background: var(--color-danger-soft-150);
  color: var(--color-danger-800);
  border-color: rgba(185, 28, 28, 0.35);
}

.btn-action-danger:active,
.btn-offer-deactivate:active {
  box-shadow: none;
}

/* ── Botão Ação Sucesso — verde (Reativar) ── */
.btn-action-success,
.btn-offer-reactivate {
  background: var(--color-success-soft-100);
  color: var(--color-success-strong);
  border: 1px solid rgba(21, 128, 61, 0.2);
  border-radius: 10px;
  padding: 0.6rem var(--spacing-md);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 1px 3px rgba(21, 128, 61, 0.08);
}

.btn-action-success:hover,
.btn-offer-reactivate:hover {
  background: var(--color-success-soft-200);
  color: var(--color-success-700);
  border-color: rgba(21, 128, 61, 0.35);
}

.btn-action-success:active,
.btn-offer-reactivate:active {
  box-shadow: none;
}

/* ── Botão Ação Warning — âmbar (Encerrar) ── */
.btn-action-warning,
.btn-offer-close {
  background: var(--color-warning-soft-100);
  color: var(--color-warning-amber-800);
  border: 1px solid rgba(146, 64, 14, 0.2);
  border-radius: 10px;
  padding: 0.6rem var(--spacing-md);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 1px 3px rgba(146, 64, 14, 0.08);
}

.btn-action-warning:hover,
.btn-offer-close:hover {
  background: var(--color-warning-soft-150);
  color: var(--color-warning-amber-900);
  border-color: rgba(146, 64, 14, 0.35);
}

.btn-action-warning:active,
.btn-offer-close:active {
  box-shadow: none;
}

/* ── Botão Publicar — VERDE/sucesso (#105: AguardandoLiberacao → EmCaptacao).
   Whitelabel-safe: usa tokens de sucesso, nunca hex solto. ── */
.btn-offer-publish {
  background: var(--color-success-soft-100);
  color: var(--color-success-strong);
  border: 1px solid rgba(21, 128, 61, 0.2);
  border-radius: 10px;
  padding: 0.6rem var(--spacing-md);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 1px 3px rgba(21, 128, 61, 0.08);
}

.btn-offer-publish:hover {
  background: var(--color-success-soft-200);
  color: var(--color-success-700);
  border-color: rgba(21, 128, 61, 0.35);
}

.btn-offer-publish:active {
  box-shadow: none;
}

/* ── Botão Despublicar — ROXO/primário do tenant (#105: EmCaptacao → AguardandoLiberacao).
   Whitelabel-safe: deriva do --color-primary (violeta do tema por tenant), nunca hex solto. ── */
.btn-offer-unpublish {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white));
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-radius: 10px;
  padding: 0.6rem var(--spacing-md);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.btn-offer-unpublish:hover {
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-white));
  color: var(--color-primary-hover, var(--color-primary));
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-offer-unpublish:active {
  box-shadow: none;
}

/* ── Botão "Alterar Situação" — padrão ÚNICO de mudança de situação no admin.
   Cor FIXA (teal), IGUAL em TODOS os tenants e DISTINTA da primária/secundária
   (que variam por tenant) e dos semânticos (success/danger/warning). NUNCA
   derivar de --color-primary nem ser sobrescrito por _TenantStyleOverrides.
   Compõe com `btn`/`btn-sm`. Usado pelo botão que abre o popup de alterar
   situação em TODAS as telas (ofertas, clientes, parceiros, empresas, ordens...). ── */
.btn-status-change {
  --_status-change-bg: #0d9488;       /* teal-600 — fixo, não tematizável */
  --_status-change-bg-hover: #0f766e; /* teal-700 */
  background-color: var(--_status-change-bg);
  border: 1px solid var(--_status-change-bg);
  color: var(--color-white);
  font-weight: 600;
}

.btn-status-change:hover,
.btn-status-change:focus,
.btn-status-change:active {
  background-color: var(--_status-change-bg-hover);
  border-color: var(--_status-change-bg-hover);
  color: var(--color-white);
}

/* ── Botão Ação Crítica — vermelho escuro (Inadimplente) ── */
.btn-action-critical,
.btn-offer-defaulting {
  background: var(--color-danger-soft-150);
  color: var(--color-danger-800);
  border: 1px solid rgba(153, 27, 27, 0.25);
  border-radius: 10px;
  padding: 0.6rem var(--spacing-md);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 1px 3px rgba(153, 27, 27, 0.1);
}

.btn-action-critical:hover,
.btn-offer-defaulting:hover {
  background: var(--color-danger-light);
  color: var(--color-danger-900);
  border-color: rgba(153, 27, 27, 0.4);
}

.btn-action-critical:active,
.btn-offer-defaulting:active {
  box-shadow: none;
}

/* Pointer-clicked links should not show a decorative focus ring.
   Keep the ring only when the browser exposes keyboard intent. */
:where(
    a,
    .nav-link,
    .dropdown-item,
    .navbar-brand
  ):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

:where(
    a,
    .nav-link,
    .dropdown-item,
    .navbar-brand
  ):focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* ====================================================================
   Sem MOVIMENTO no hover/active dos botoes (decisao de design).
   O hover muda apenas cor/fundo — nunca desloca o botao.
   Trava global que sobrepoe os translateY por area/tema.
   ==================================================================== */
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn-auth:hover,
.btn-auth:active,
.btn-auth-outline:hover,
.btn-auth-outline:active {
  transform: none !important;
}