/* ============================================================
   skeleton.css — Shared Skeleton Loading Styles
   TH Dashsecurity Project
   ============================================================ */

.skeleton-line {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s infinite;
  border-radius: 6px;
  display: block;
}

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

/* ── Size helpers ── */
.sk-xs  { height: 10px; }
.sk-sm  { height: 14px; }
.sk-md  { height: 18px; }
.sk-lg  { height: 24px; }
.sk-xl  { height: 36px; }

.sk-w-30  { width: 30%;  }
.sk-w-40  { width: 40%;  }
.sk-w-50  { width: 50%;  }
.sk-w-60  { width: 60%;  }
.sk-w-70  { width: 70%;  }
.sk-w-80  { width: 80%;  }
.sk-w-100 { width: 100%; }

.sk-mb { margin-bottom: 10px; }
.sk-mb-sm { margin-bottom: 6px; }
.sk-mb-lg { margin-bottom: 16px; }

.sk-rounded { border-radius: 50%; }
.sk-pill    { border-radius: 999px; }

/* ── Table skeleton row ── */
.skeleton-tr td {
  padding: 14px 16px;
  vertical-align: middle;
}

/* ── Profile avatar ── */
.sk-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s infinite;
}

/* ── Skeleton card wrapper ── */
.skeleton-card-block {
  background: rgba(18, 18, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
}