/* TailwindCSS-based spinner animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes progress-spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.app-loading {
  @apply flex flex-col items-center justify-center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Full-screen spinner overlay - first app-loading div */
.app-loading:first-of-type {
  @apply fixed inset-0;
  min-height: 100vh;
  width: 100vw;
}

/* Error message container - second app-loading div */
.app-loading:not(:first-of-type) {
  @apply relative;
  top: 10em;
}

.primeng-spinner {
  @apply inline-block;
  color: var(--p-primary-color, #3b82f6);
}

.primeng-spinner svg {
  @apply block;
  animation: spin 2s linear infinite;
}

.spinner-path {
  animation: progress-spinner-dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

/* Fallback for browsers without CSS custom properties */
.primeng-spinner {
  color: #3b82f6;
}