/* =====================================================
   NCBS Prototype — 4-State Pattern
   Empty / Loading / Error / Happy (default)
   Import: @import url('./states.css'); from styles.css
   Use: <div data-state="happy|empty|loading|error">
   ===================================================== */

/* ── State container — show one at a time ── */
[data-state] > [data-show] { display: none; }
[data-state="happy"]   > [data-show="happy"]   { display: block; }
[data-state="empty"]   > [data-show="empty"]   { display: block; }
[data-state="loading"] > [data-show="loading"] { display: block; }
[data-state="error"]   > [data-show="error"]   { display: block; }

/* ── Empty State ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  color: var(--text-secondary);
  min-height: 280px;
}
.empty-state .empty-icon {
  width: 72px; height: 72px;
  background: var(--purple-50);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--purple-400);
}
.empty-state .empty-icon svg { width: 36px; height: 36px; }
.empty-state .empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.empty-state .empty-message {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.empty-state .empty-actions {
  display: flex;
  gap: 12px;
}

/* ── Loading State (skeleton) ── */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  display: inline-block;
}
.skeleton.skeleton-text { height: 14px; width: 100%; }
.skeleton.skeleton-title { height: 20px; width: 60%; }
.skeleton.skeleton-circle { border-radius: 50%; }
.skeleton.skeleton-row { height: 48px; width: 100%; margin-bottom: 12px; }

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

.loading-state {
  padding: 24px;
}
.loading-state .skeleton-row + .skeleton-row { margin-top: 0; }

/* ── Error State ── */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  min-height: 280px;
}
.error-state .error-icon {
  width: 72px; height: 72px;
  background: var(--red-50);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--red-500);
}
.error-state .error-icon svg { width: 36px; height: 36px; }
.error-state .error-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--red-700);
  margin-bottom: 8px;
}
.error-state .error-message {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.error-state .error-detail {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  background: var(--gray-50);
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  word-break: break-all;
}
.error-state .error-actions {
  display: flex;
  gap: 12px;
}

/* ── Toast (transient) ── */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 10px;
  background: white;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  pointer-events: auto;
  animation: toast-slide-in 0.3s ease-out;
  max-width: 420px;
  border-left: 4px solid var(--gray-300);
}
.toast.toast-success { border-left-color: var(--green-500); }
.toast.toast-success .toast-icon { color: var(--green-500); }
.toast.toast-error   { border-left-color: var(--red-500); }
.toast.toast-error   .toast-icon { color: var(--red-500); }
.toast.toast-warning { border-left-color: var(--orange-300); }
.toast.toast-warning .toast-icon { color: var(--orange-300); }
.toast.toast-info    { border-left-color: var(--blue-400); }
.toast.toast-info    .toast-icon { color: var(--blue-400); }

/* Simple toast mode — SVG is direct child (no .toast-icon wrapper) */
.toast > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.toast.toast-success > svg { color: var(--green-500); }
.toast.toast-error   > svg { color: var(--red-500); }
.toast.toast-warning > svg { color: var(--orange-300); }
.toast.toast-info    > svg { color: var(--blue-400); }

.toast-icon { flex-shrink: 0; }
.toast-icon svg { width: 20px; height: 20px; }
.toast-content { flex: 1; }
.toast-title { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.toast-message { color: var(--text-secondary); font-size: 13px; }
.toast-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px;
  display: flex; align-items: center; justify-content: center;
}
.toast-close:hover { color: var(--text-primary); }

@keyframes toast-slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-slide-out {
  to { transform: translateX(120%); opacity: 0; }
}