@keyframes fade-in-up {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.5; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-fade-in-up { animation: fade-in-up 500ms ease-out both; }

.animate-slide-in-right { animation: slide-in-right 500ms ease-out both; }

.animate-scale-in { animation: scale-in 380ms ease-out both; }

.animate-gradient-shift { animation: gradient-shift 12s ease infinite; background-size: 200% 200%; }

.reveal-on-scroll { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 500ms ease, transform 500ms ease; }

.reveal-on-scroll.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

.stagger-item { animation-delay: var(--stagger-delay, 0ms); }

.shimmer-loading {
  background: linear-gradient(110deg, #e2e8f0 8%, #f8fafc 18%, #e2e8f0 33%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.status-pulse-ring {
  position: relative;
}

.status-pulse-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid rgba(59, 130, 246, 0.35);
  border-radius: 9999px;
  animation: pulse-ring 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

@tailwind base;

@tailwind components;

@tailwind utilities;

:root {
  --sidebar-width: 260px;
  
  /* Default theme colors (Professional Blue) - will be overridden by ThemeProvider */
  --theme-primary: #1e40af;
  --theme-primary-dark: #1e3a8a;
  --theme-accent: #3b82f6;
  --theme-accent-light: #93c5fd;
  --theme-sidebar-bg: #f8fafc;
  --theme-sidebar-text: #334155;
  --theme-sidebar-active: #dbeafe;
  --theme-sidebar-hover: #f1f5f9;
  --theme-header-bg: #ffffff;
  --theme-header-text: #1e293b;
  --theme-button-primary: #2563eb;
  --theme-button-primary-hover: #1d4ed8;
  --theme-login-gradient-from: #1e40af;
  --theme-login-gradient-to: #3b82f6;
  --theme-login-card-bg: #ffffff;
}

body, html, #root {
  height: 100%;
}

.table {
  @apply w-full border-collapse;
}

.table th, .table td {
  @apply border border-slate-200 px-3 py-2 text-sm;
}

.badge {
  @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
}

.badge-green { @apply bg-green-100 text-green-700; }

.badge-yellow { @apply bg-yellow-100 text-yellow-700; }

.badge-gray { @apply bg-gray-100 text-gray-600; }

.badge-red { @apply bg-red-100 text-red-700; }

.link { @apply text-blue-600 hover:underline; }

.card { @apply bg-white rounded-xl border border-slate-200 p-5; box-shadow: none; }

/* Theme-aware link */

.link-themed {
  color: var(--theme-primary);
}

.link-themed:hover {
  text-decoration: underline;
}

/* Theme-aware primary button */

.btn-themed-primary {
  @apply px-6 py-2 rounded-lg font-medium text-sm text-white transition-colors;
  background-color: var(--theme-button-primary);
}

.btn-themed-primary:hover {
  background-color: var(--theme-button-primary-hover);
}

.btn-themed-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--theme-accent-light);
}

.btn-themed-primary:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Theme-aware secondary/outline button */

.btn-themed-secondary {
  @apply px-6 py-2 rounded-lg font-medium text-sm transition-colors border;
  color: var(--theme-primary);
  border-color: var(--theme-primary);
  background-color: transparent;
}

.btn-themed-secondary:hover {
  background-color: var(--theme-accent-light);
}

.btn-themed-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--theme-accent-light);
}

.btn-themed-secondary:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Theme-aware small button */

.btn-themed-sm {
  @apply px-3 py-1.5 rounded-md font-medium text-xs text-white transition-colors;
  background-color: var(--theme-button-primary);
}

.btn-themed-sm:hover {
  background-color: var(--theme-button-primary-hover);
}

.btn-themed-sm:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--theme-accent-light);
}

.btn-themed-sm:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Theme-aware form input focus */

.input-themed:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px var(--theme-accent-light);
}

/* Theme-aware form input */

.input-themed {
  @apply w-full px-3 py-2 border border-slate-300 rounded-lg transition-colors;
}

/* Disabled/readonly state for inputs */

.input-themed:disabled,
.input-themed[readonly] {
  @apply opacity-50 cursor-not-allowed bg-gray-100;
}

/* Theme-aware select */

.select-themed {
  @apply w-full px-3 py-2 border border-slate-300 rounded-lg transition-colors;
}

.select-themed:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px var(--theme-accent-light);
}

/* Disabled state for selects */

.select-themed:disabled {
  @apply opacity-50 cursor-not-allowed bg-gray-100;
}

/* Theme-aware checkbox */

.checkbox-themed:checked {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* Theme-aware card */

.card-themed {
  @apply bg-white rounded-xl border p-4;
  border-color: color-mix(in srgb, var(--theme-primary) 16%, #ffffff);
  box-shadow: none;
}

.card-themed:focus-within {
  box-shadow: 0 0 0 3px var(--theme-accent-light);
}

/* Theme-aware header/title text */

.text-themed-primary {
  color: var(--theme-primary);
}

.text-themed-accent {
  color: var(--theme-accent);
}

/* Theme-aware background */

.bg-themed-primary {
  background-color: var(--theme-primary);
}

.bg-themed-accent {
  background-color: var(--theme-accent);
}

.bg-themed-accent-light {
  background-color: var(--theme-accent-light);
}

/* Theme-aware sidebar background */

.bg-themed-sidebar {
  background-color: var(--theme-sidebar-bg);
}

/* Theme-aware header background */

.bg-themed-header {
  background-color: var(--theme-header-bg);
}

/* Info/alert box for filter summaries, notices */

.alert-info {
  @apply text-sm rounded px-3 py-2 border;
  background-color: color-mix(in srgb, var(--theme-accent) 10%, transparent);
  border-color: var(--theme-accent);
  color: var(--theme-primary);
}