/* ====================================
   WebApp - Area button bindings (Bootstrap btn-* via tokens)
   ====================================

   Mapeia variáveis do Bootstrap (--bs-btn-*, --bs-primary, --bs-link-*)
   para os tokens semânticos definidos em base/_themes.css. Resultado:
   .btn-primary e .btn-outline-primary respeitam a cor da área.

   NUNCA usar hex hardcoded aqui — os hex moram em _themes.css.
   ==================================== */

/* Cada área herda os tokens via _themes.css (.customer-area, etc.).
   Aqui só ligamos os tokens nas variáveis CSS do Bootstrap. */
.area-customer,
.area-partner,
.area-admin {
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
}

.area-customer .btn-primary,
.area-partner .btn-primary,
.area-admin .btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-active);
  --bs-btn-active-border-color: var(--primary-active);
}

.area-customer .btn-outline-primary,
.area-partner .btn-outline-primary,
.area-admin .btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: var(--color-surface-card);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--color-surface-card);
}

/* ── Animação de entrada de página ──────────────────────────── */
/* Aplicada ao conteúdo principal de cada view.
   Garante transição suave ao navegar entre páginas (ex: Settings).
   ATENÇÃO: fill-mode "backwards" (NUNCA both/forwards) e animar só opacity.
   Animação de opacity/transform mantida pelo fill forwards cria stacking
   context PERMANENTE em main.page-content e prende os modais Bootstrap das
   views atrás do .modal-backdrop (bug E5 do STATUS_TRANSITIONS — popups de
   pausar/retomar/publicar inoperáveis). Com backwards o contexto morre ao
   fim dos 0.18s. */
.page-content,
.main-content > .container-fluid,
.settings-page {
  animation: pageEnter 0.18s ease-out backwards;
}

@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}