body {
  background-color: #f8fafc;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

/* Styling ::-webkit-scrollbar turns macOS's floating scrollbar into a
   classic one that TAKES 8px. The page scrolls on every tab except a short
   one (Offers), so the body was 1440px there and 1432px elsewhere, and the
   centred layout jumped 4px sideways on every switch in or out of it.
   Always showing the (transparent) scrollbar keeps the width identical.
   NOT `scrollbar-gutter: stable` - tried first, and Chrome ignored it on the
   root alongside the custom scrollbar styling: Offers stayed 8px wider. */
html { overflow-y: scroll; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.badge-inactive {
  background: linear-gradient(135deg, #fecaca, #fca5a5);
  color: #7f1d1d;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}
.toast-enter { animation: toastIn 0.25s ease-out both; }
.toast-leave { animation: toastOut 0.2s ease-in both; }

.spinner {
  border: 2.5px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 9999px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }