/* ═══════════════════════════════════════════════════════════════════
   LOOM — Empty / Error / Loading / Permission-denied states
   Kalem 12: her liste sayfası için standart durum pattern'leri.
   Tasarım tokens'a tam uyum: --brand-*, --grayMain2c-*, --space-*
   ═══════════════════════════════════════════════════════════════════ */

.loom-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12, 48px) var(--space-6, 24px);
  min-height: 320px;
  gap: var(--space-3, 12px);
}

.loom-state__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full, 9999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-2, 8px);
}

.loom-state__icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

.loom-state__title {
  font-size: var(--text-heading-lg, 18px);
  font-weight: 700;
  color: var(--grayMain2c-900);
  margin: 0;
  letter-spacing: -0.01em;
}

.loom-state__body {
  font-size: var(--text-body-sm, 14px);
  color: var(--grayMain2c-600);
  max-width: 440px;
  margin: 0;
  line-height: 1.5;
}

.loom-state__actions {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── EMPTY ─────────────────────────────────── */
.loom-state--empty .loom-state__icon {
  background: var(--brand-100);
  color: var(--brand-500);
}

/* ── ERROR ─────────────────────────────────── */
.loom-state--error .loom-state__icon {
  background: var(--danger-200);
  color: var(--danger-700);
}

/* ── LOADING (skeleton rows) ───────────────── */
.loom-skeleton {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: loomShimmer 1.4s infinite linear;
  border-radius: var(--radius-sm, 6px);
}

.loom-skeleton--row {
  display: grid;
  grid-template-columns: 40px 1fr 80px 120px;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--gray-200);
  align-items: center;
}
.loom-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
.loom-skeleton--line   { height: 12px; }
.loom-skeleton--line.w-80 { width: 80%; }
.loom-skeleton--line.w-60 { width: 60%; }

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

/* ── PERMISSION DENIED ──────────────────────── */
.loom-state--denied .loom-state__icon {
  background: #FFF8E1;
  color: #946A01;
}

.loom-state__hint {
  margin-top: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-caption, 12px);
  color: var(--grayMain2c-600);
  max-width: 480px;
}

.loom-state__hint code {
  font-family: ui-monospace, monospace;
  background: var(--background);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--grayMain2c-900);
}
</content>