/* ═══════════════════════════════════════════════
   Skeleton / Content Loader
   Shimmer sweep animation used project-wide
   ═══════════════════════════════════════════════ */

@keyframes sk_shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes sk_fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sk_block {
  display: block;
  background: linear-gradient(90deg, #ececec 25%, #d8d8d8 50%, #ececec 75%);
  background-size: 600px 100%;
  animation: sk_shimmer 1.4s ease-in-out infinite;
}

/* ── Fade-in for skeleton containers ── */
.sk_table_row,
.sk_perm_group,
.sk_profile_card,
.sk_detail_row {
  animation: sk_fadeIn 0.25s ease both;
}

/* ── Fade-in utility for real content replacing skeleton ── */
.sk_content_fade {
  animation: sk_fadeIn 0.3s ease both;
}

/* Table content rows fade in when they mount (after loading, after filter, etc.) */
tbody tr {
  animation: sk_fadeIn 0.2s ease both;
}

/* ── Table skeleton ── */
.sk_table_head {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #e0e0e0;
  border-radius: 6px 6px 0 0;
  gap: 10px;
  animation: sk_fadeIn 0.25s ease both;
}
.sk_table_head .sk_block {
  background: linear-gradient(90deg, #d4d4d4 25%, #c8c8c8 50%, #d4d4d4 75%);
  background-size: 600px 100%;
  animation: sk_shimmer 1.4s ease-in-out infinite;
}
.sk_th {
  display: flex;
  align-items: center;
}

.sk_table_row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  gap: 10px;
}
.sk_table_row.alt {
  background: #fafafa;
}
.sk_td {
  display: flex;
  align-items: center;
}

/* ── Permission skeleton ── */
.sk_perm_group {
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}
.sk_perm_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #f7f8fb;
  border-bottom: 1px solid #eee;
}
.sk_perm_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f5f5f5;
  gap: 12px;
}
.sk_perm_item:last-child {
  border-bottom: none;
}

/* ── Profile skeleton ── */
.sk_profile_card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  margin-bottom: 8px;
  gap: 16px;
  flex-wrap: wrap;
}
.sk_detail_row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f5f5f5;
  gap: 32px;
}
.sk_detail_row:last-child {
  border-bottom: none;
}