/* ============================================================
   SKELETON LOADER - Modern loading placeholders
   ============================================================ */

/* Skeleton base */
.nh-skeleton {
  background: linear-gradient(
    90deg,
    var(--nh-panel-bg) 0%,
    var(--nh-elevated-bg) 50%,
    var(--nh-panel-bg) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--nh-radius);
}

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

/* Skeleton variants */
.nh-skeleton-text {
  height: 14px;
  border-radius: 4px;
}

.nh-skeleton-text--sm {
  height: 11px;
  width: 60%;
}

.nh-skeleton-text--lg {
  height: 18px;
  width: 80%;
}

.nh-skeleton-heading {
  height: 24px;
  width: 40%;
  margin-bottom: 16px;
}

.nh-skeleton-chip {
  height: 20px;
  width: 60px;
  display: inline-block;
  margin-right: 6px;
}

/* Room card skeleton */
.nh-skeleton-room-card {
  background-color: var(--nh-panel-bg);
  border: 1px solid var(--nh-border-subtle);
  border-radius: var(--nh-radius);
  padding: 12px;
  margin-bottom: 12px;
}

.nh-skeleton-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.nh-skeleton-room-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Sidebar skeleton */
.nh-skeleton-sidebar-room {
  background-color: var(--nh-panel-bg);
  border-radius: var(--nh-radius);
  padding: 8px;
  margin-bottom: 8px;
}

.nh-skeleton-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Full page skeleton overlay (alternative to spinner) */
.nh-skeleton-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--nh-body-bg);
  z-index: 9998;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.nh-skeleton-overlay.is-active {
  display: block;
  animation: fadeIn 0.2s ease-out forwards;
}

/* Skeleton overlay for .main div only */
.nh-skeleton-main-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--nh-body-bg);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  overflow-y: auto;
  pointer-events: none; /* Default: don't block */
}

.nh-skeleton-main-overlay.is-active {
  opacity: 1;
  pointer-events: all; /* Block clicks while showing */
}

/* Ensure .main has position context for overlay */
.main {
  position: relative;
}

/* Container for skeleton content */
.nh-skeleton-page {
  display: flex;
  height: 100vh;
}

.nh-skeleton-sidebar-wrapper {
  width: 280px;
  background: var(--nh-surface-bg);
  border-right: 1px solid var(--nh-border-subtle);
  padding: 16px;
}

.nh-skeleton-main-wrapper {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Prevent flash of skeleton on fast loads */
.nh-skeleton-overlay.is-active {
  animation-delay: 100ms; /* Only show if load takes >100ms */
}

/* Pulse variant (alternative to shimmer) */
.nh-skeleton-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Wave variant (for lists) */
.nh-skeleton-wave {
  position: relative;
  overflow: hidden;
}

.nh-skeleton-wave::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.03),
    transparent
  );
  animation: wave 1.5s linear infinite;
}

@keyframes wave {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}