/* =========================================
   LOADING STATES
========================================= */


/* =========================================
   GENERIC LOADER
========================================= */

.loading {

  display: flex;

  align-items: center;
  justify-content: center;

  gap:
    var(--space-3);

  padding:
    var(--space-8);

  text-align: center;

  color:
    var(--color-text-muted);

  font-weight:
    var(--font-medium);
}


/* =========================================
   SPINNER
========================================= */

.spinner {

  width: 22px;
  height: 22px;

  border:
    3px solid
    rgba(37, 99, 235, 0.2);

  border-top:
    3px solid
    var(--color-primary);

  border-radius:
    50%;

  animation:
    spin 0.8s linear infinite;
}


@keyframes spin {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* =========================================
   PAGE LOADER
========================================= */

.page-loader {

  min-height: 60vh;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap:
    var(--space-5);
}


/* =========================================
   INLINE LOADER
========================================= */

.inline-loader {

  display: inline-flex;

  align-items: center;

  gap:
    var(--space-2);

  font-size:
    var(--text-sm);

  color:
    var(--color-text-muted);
}


/* =========================================
   SKELETON
========================================= */

.skeleton {

  position: relative;

  overflow: hidden;

  background:
    var(--color-surface-alt);

  border-radius:
    var(--radius-md);
}


.skeleton::after {

  content: "";

  position: absolute;

  top: 0;
  left: -150px;

  width: 150px;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.5),
      transparent
    );

  animation:
    shimmer 1.4s infinite;
}


@keyframes shimmer {

  100% {
    left: 100%;
  }
}


/* =========================================
   SKELETON VARIANTS
========================================= */

.skeleton-text {

  height: 16px;

  margin-bottom:
    var(--space-3);
}


.skeleton-title {

  height: 28px;

  width: 60%;

  margin-bottom:
    var(--space-5);
}


.skeleton-card {

  height: 220px;

  border-radius:
    var(--radius-lg);
}


/* =========================================
   ERROR BANNERS
========================================= */

.error-banner {

  background:
    var(--color-danger-soft);

  color:
    #991b1b;

  border:
    1px solid #fecaca;

  border-radius:
    var(--radius-md);

  padding:
    var(--space-4);

  margin:
    var(--space-4) 0;
}


.success-banner {

  background:
    var(--color-success-soft);

  color:
    #166534;

  border:
    1px solid #bbf7d0;

  border-radius:
    var(--radius-md);

  padding:
    var(--space-4);

  margin:
    var(--space-4) 0;
}


.warning-banner {

  background:
    var(--color-warning-soft);

  color:
    #92400e;

  border:
    1px solid #fde68a;

  border-radius:
    var(--radius-md);

  padding:
    var(--space-4);

  margin:
    var(--space-4) 0;
}


/* =========================================
   EMPTY STATE
========================================= */

.empty-state {

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  gap:
    var(--space-4);

  padding:
    var(--space-16);

  color:
    var(--color-text-muted);
}


.empty-state h3 {

  color:
    var(--color-text);
}