/**
 * SEO Booster — Reusable UI components (empty, loading, alerts)
 * Depends on sbi-design-system.css
 */

/* ── Skeleton loaders ── */
.sbi-skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: sbi-shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}

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

.sbi-skeleton-text {
  height: 14px;
  margin-bottom: 10px;
}

.sbi-skeleton-text.is-short { width: 60%; }
.sbi-skeleton-text.is-med { width: 80%; }

.sbi-skeleton-card {
  height: 120px;
  border-radius: var(--sbi-radius);
}

.sbi-skeleton-stat {
  height: 72px;
  border-radius: var(--sbi-radius);
}

/* ── Empty states ── */
.sbi-empty {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--sbi-border);
  border-radius: var(--sbi-radius);
  background: #fff;
}

.sbi-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--sbi-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sbi-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.sbi-empty h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  color: var(--sbi-text);
}

.sbi-empty p {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  max-width: 360px;
  margin-inline: auto;
}

/* ── Inline alerts ── */
.sbi-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--sbi-radius-sm);
  font-size: 0.9375rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.sbi-alert-info {
  background: var(--sbi-primary-soft);
  border-color: #bfdbfe;
  color: #1e40af;
}

.sbi-alert-success {
  background: var(--sbi-success-soft);
  border-color: #bbf7d0;
  color: #166534;
}

.sbi-alert-warning {
  background: var(--sbi-warning-soft);
  border-color: #fde68a;
  color: #92400e;
}

.sbi-alert-error {
  background: var(--sbi-danger-soft);
  border-color: #fecaca;
  color: #991b1b;
}

/* ── Progress bar ── */
.sbi-progress {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.sbi-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--sbi-primary);
  transition: width 0.3s ease;
}

.sbi-progress-bar.is-indeterminate {
  width: 40% !important;
  animation: sbi-progress-indeterminate 1.2s ease-in-out infinite;
}

@keyframes sbi-progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ── Sticky filter bar ── */
.sbi-sticky-bar {
  position: sticky;
  top: 64px;
  z-index: 50;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sbi-border);
  padding: 12px 0;
  margin-bottom: 16px;
}

/* ── Stat card (dashboard) ── */
.sbi-stat-card {
  background: #fff;
  border: 1px solid var(--sbi-border);
  border-radius: var(--sbi-radius);
  padding: 20px 22px;
  box-shadow: var(--sbi-shadow);
}

.sbi-stat-card-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sbi-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

.sbi-stat-card-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--sbi-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.sbi-stat-card-value.is-success { color: var(--sbi-success); }
.sbi-stat-card-value.is-warning { color: var(--sbi-warning); }
.sbi-stat-card-value.is-danger { color: var(--sbi-danger); }
.sbi-stat-card-value.is-primary { color: var(--sbi-primary); }