/* ============================
   Loading States & Overlays
   ============================ */

/* === Full Page Loading Overlay === */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(
    var(--surface-0-rgb, 18, 18, 18),
    0.85
  ); /* Use surface-0 with opacity */

  backdrop-filter: blur(5px);
  display: flex; /* Changed from none to flex for direct control with opacity/visibility */
  justify-content: center;
  align-items: center;
  z-index: var(--z-loading-overlay);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal);
  contain: strict; /* Performance: isolate rendering */
}

.loading-overlay.visible,
.loading-overlay[style*="display: flex"] /* Compatibility with older JS that might use display property */ {
  opacity: 1;
  visibility: visible;
}

body.light-mode .loading-overlay {
  background-color: rgb(var(--surface-0-rgb-light, 248, 249, 250), 0.85);
}

.loading-content {
  text-align: center;
  padding: var(--space-6);
  background-color: var(--surface-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 400px;
  width: 90%;
  color: var(--text-primary);

  /* Ensure inner elements (spinner, text, progress) are perfectly centered */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Enhanced Spinner */
.loading-spinner {
  position: relative;
  width: 50px; /* Slightly smaller */
  height: 50px;
  margin: 0 auto var(--space-4);

  /* Make 100% sizing include borders so the ring remains centered */
  box-sizing: border-box;
  display: inline-block;
}

.loading-spinner::before {
  /* Main spinner ring */
  content: "";
  position: absolute;

  /* Fill the container while accounting for border in sizing */
  inset: 0;
  box-sizing: border-box;
  border: 4px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Optional: Inner dot for more visual interest */
.loading-spinner::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-dot 1s ease-in-out infinite alternate;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-dot {
  from {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.7;
  }

  to {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}

/* Loading Text */
.loading-text {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-medium);
  min-height: 1.5em; /* Prevent layout shift */
  transition: color var(--transition-fast);
}

.loading-text.text-danger {
  color: var(--danger) !important;
}

.loading-text.text-success {
  color: var(--success) !important;
}

/* Progress Bar */
.loading-progress {
  background-color: var(--surface-3);
  border-radius: var(--radius-full);
  height: 8px; /* Slightly thicker */
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.loading-progress .progress-bar {
  /* Assumes an inner div for the bar */
  height: 100%;
  background: var(--primary-gradient);
  border-radius: var(--radius-full);
  transition:
    width var(--transition-slow),
    background-color var(--transition-slow);
  box-shadow: 0 0 10px rgb(var(--primary-rgb), 0.3);
}

.loading-progress .progress-bar.bg-success {
  background: var(--success-gradient);
  box-shadow: 0 0 10px rgb(var(--success-rgb), 0.3);
}

.loading-progress .progress-bar.bg-danger {
  background: var(--danger-gradient);
  box-shadow: 0 0 10px rgb(var(--danger-rgb), 0.3);
}

/* === Button Loading State === */
.btn.btn-loading {
  /* Add .btn-loading to the button itself */
  position: relative;
  color: transparent !important; /* Hide button text */
  pointer-events: none; /* Prevent clicks while loading */
}

.btn.btn-loading::after {
  /* Spinner element */
  content: "";
  position: absolute;
  width: 1em; /* Relative to button font size */
  height: 1em;
  top: 50%;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  border: 2px solid currentcolor; /* Use button's text color for spinner */
  border-radius: 50%;
  border-top-color: transparent !important; /* Create the spinning effect */
  border-right-color: transparent !important; /* Make it a semi-circle for cleaner spin */
  animation: btn-spin 0.6s linear infinite;
  opacity: 0.7;
}

/* Adjust spinner color for filled buttons */
.btn-primary.btn-loading::after,
.btn-secondary.btn-loading::after,
.btn-success.btn-loading::after,
.btn-danger.btn-loading::after,
.btn-warning.btn-loading::after,
.btn-info.btn-loading::after {
  border-color: var(--text-on-primary); /* Or appropriate contrast color */
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* === Skeleton Loading === */
.skeleton-loader {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-2); /* Base color for skeleton */
  border-radius: var(--radius-sm);
}

.skeleton-loader::after {
  /* Shimmer element */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--surface-3),
    /* Shimmer color */ transparent
  );
  animation: skeleton-shine 1.5s infinite;
  background-size: 200% 100%;
}

body.light-mode .skeleton-loader {
  background-color: var(--surface-3);
}

body.light-mode .skeleton-loader::after {
  background-color: var(--surface-4);
}

@keyframes skeleton-shine {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton-text {
  /* Apply to text-like skeleton elements */
  height: 1em;
  margin: 0.25em 0;
  border-radius: var(--radius-xs);
}

.skeleton-text:last-child {
  width: 70%;
} /* Common pattern for last line */
.skeleton-avatar {
  /* For avatar placeholders */
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-image {
  /* For image placeholders */
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio, adjust as needed */
  height: 0;
}

/* === Map Specific Loading Indicator === */
.map-loading {
  /* Class for an indicator directly on the map */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dropdown); /* Above map, below popups */
  background-color: var(--surface-glass);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-align: center;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.map-loading .spinner-border {
  /* If using Bootstrap spinner */
  width: 2rem;
  height: 2rem;
  border-width: 0.2em;
  color: var(--primary);
}

.map-loading-text {
  font-size: var(--font-size-sm);
}

/* === Responsive Adjustments === */
@media (width <= 576px) {
  .loading-content {
    padding: var(--space-4);
  }

  .loading-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-3);
  }

  .loading-text {
    font-size: var(--font-size-md);
  }
}

/* === Reduced Motion Support === */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner::before,
  .loading-spinner::after,
  .btn.btn-loading::after,
  .skeleton-loader::after {
    animation: none; /* Disable animations */
  }

  /* Provide a static state for spinners if animation is off */
  .loading-spinner::before {
    border-top-color: var(--primary-light); /* Make it a full circle */
    opacity: 0.5;
  }

  .loading-spinner::after {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }

  .skeleton-loader::after {
    background: none; /* Hide shimmer */
  }
}

/* Define RGB for surface-0 for light mode if not already defined in style.css */
:root {
  --surface-0-rgb: 18, 18, 18; /* From #121212 */
  --surface-0-rgb-light: 248, 249, 250; /* From #f8f9fa */
}