/*
 * AffiliateHub — Icon & Utility Styles
 * Kredit: lautandigital.id
 * Versi: 1.0.0
 */

/* Utility: visually hidden for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Utility: flex helpers */
.flex        { display: flex; }
.items-center{ align-items: center; }
.gap-2       { gap: 0.5rem; }
.gap-3       { gap: 0.75rem; }
.ml-auto     { margin-left: auto; }
.text-muted  { color: var(--text-muted); }
.text-sm     { font-size: 0.8125rem; }
.font-mono   { font-family: monospace; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius);
}

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

.skeleton-text  { height: 14px; margin-bottom: 6px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 8px; }
.skeleton-avatar{ width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.empty-icon  { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
.empty-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.375rem; }
.empty-desc  { font-size: 0.875rem; color: var(--text-muted); max-width: 300px; }

/* Spinner */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Progress Bar */
.progress-bar-wrapper {
  background: #f1f5f9;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.8s ease;
}

.progress-bar--success { background: var(--color-success); }
.progress-bar--warning { background: var(--color-warning); }

/* Copy feedback */
.copy-success {
  animation: popIn 0.25s ease;
}

@keyframes popIn {
  0%   { transform: scale(0.9); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}