/* ============================================================
   LOS CLAWS — Skeleton Loading Animations
   ============================================================ */

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

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

/* Specific skeleton sizes */
.skeleton-stat {
  height: 2.25rem;
  width: 80px;
  display: inline-block;
}

.skeleton-text {
  height: 0.875rem;
  display: inline-block;
}

.skeleton-row {
  height: 52px;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

/* District offline indicator */
.district-card[data-status="offline"] .district-status .status-text::after {
  content: ' (offline)';
  opacity: 0.6;
}

/* Offline dimming */
[data-district][data-status="offline"] .stat-value {
  color: var(--text-muted);
}

/* Roll-up animation for numbers */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.count-in {
  animation: countUp 0.4s ease forwards;
}