/* ===========================================
   GESTIOLEX - Loading States Unificati
   Pattern riutilizzabile per spinner, overlay
   e bottoni in stato di caricamento.
   =========================================== */

:root {
  /* ---- Loading Variables ---- */
  --loading-overlay-bg: rgba(255, 255, 255, 0.82);
  --loading-overlay-blur: 2px;
  --loading-spinner-color: var(--brand-primary, #0B5E70);
  --loading-spinner-size: 2rem;
  --loading-text-color: var(--gray-600, #6c757d);
  --loading-fade-duration: var(--transition-base, 250ms);
  --loading-btn-opacity: 0.75;
}

/* ---- Overlay su sezione/card/pagina ---- */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--loading-overlay-bg);
  backdrop-filter: blur(var(--loading-overlay-blur));
  -webkit-backdrop-filter: blur(var(--loading-overlay-blur));
  z-index: 10;
  border-radius: inherit;
  animation: loadingOverlayFadeIn var(--loading-fade-duration) ease;
}

/* Fade-out per rimozione */
.loading-overlay.fade-out {
  animation: loadingOverlayFadeOut 200ms ease forwards;
}

/* ---- Spinner dentro overlay ---- */
.loading-overlay .loading-spinner {
  width: var(--loading-spinner-size);
  height: var(--loading-spinner-size);
  color: var(--loading-spinner-color);
}

/* ---- Testo sotto lo spinner ---- */
.loading-overlay .loading-text {
  margin-top: var(--space-sm, 0.5rem);
  font-size: var(--text-sm, 0.75rem);
  color: var(--loading-text-color);
  font-weight: 500;
}

/* ---- Bottone in stato loading ---- */
.btn-loading {
  pointer-events: none;
  opacity: var(--loading-btn-opacity);
  position: relative;
}

.btn-loading .spinner-border {
  vertical-align: middle;
}

/* ---- Animazioni ---- */
@keyframes loadingOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* ---- Skeleton Loading (shimmer placeholder per tabelle) ---- */
:root {
  --skeleton-base: #e9ecef;
  --skeleton-shine: #f8f9fa;
}

.skeleton-text {
  height: 1em;
  border-radius: var(--radius-sm, 4px);
  background: linear-gradient(90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

.skeleton-badge {
  display: inline-block;
  height: 1.4em;
  width: 5em;
  border-radius: var(--radius-lg, 10px);
  background: linear-gradient(90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

.skeleton-card {
  transition: opacity 0.2s ease;
}

.skeleton-card.fade-out {
  opacity: 0;
}

.skeleton-row td {
  padding: 0.65rem 0.5rem;
}

/* Stagger animation per righe successive */
.skeleton-row:nth-child(2) .skeleton-text,
.skeleton-row:nth-child(2) .skeleton-badge { animation-delay: 0.1s; }
.skeleton-row:nth-child(3) .skeleton-text,
.skeleton-row:nth-child(3) .skeleton-badge { animation-delay: 0.2s; }
.skeleton-row:nth-child(4) .skeleton-text,
.skeleton-row:nth-child(4) .skeleton-badge { animation-delay: 0.3s; }
.skeleton-row:nth-child(5) .skeleton-text,
.skeleton-row:nth-child(5) .skeleton-badge { animation-delay: 0.4s; }
.skeleton-row:nth-child(6) .skeleton-text,
.skeleton-row:nth-child(6) .skeleton-badge { animation-delay: 0.5s; }

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

/* ---- Dark mode ---- */
[data-bs-theme="dark"] {
  --loading-overlay-bg: rgba(33, 37, 41, 0.82);
  --loading-text-color: var(--gray-500, #adb5bd);
  --skeleton-base: #2c3034;
  --skeleton-shine: #3a3f44;
}

/* ---- Rispetta preferenze animazioni ridotte ---- */
@media (prefers-reduced-motion: reduce) {
  .loading-overlay {
    animation: none;
  }
  .loading-overlay.fade-out {
    animation: none;
  }
  .skeleton-text,
  .skeleton-badge {
    animation: none;
    background: var(--skeleton-base);
  }
}