/* ───────────────────────────────────────────────────────────────────────────
   states.css — shared loading / empty / error UI states

   Every data-bearing screen has three states beyond its happy path:
     • loading  — skeleton shimmer or button spinner while data is in flight
     • empty    — a calm "nothing here yet" message (not an error)
     • error    — something failed, with a way to retry

   Pages simulate async loads (setTimeout) so these states are real today and
   drop straight onto the real Supabase/API calls later. Append ?state=loading,
   ?state=empty or ?state=error to any page to force that state for demos.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Skeleton shimmer ── */
@keyframes sai-shimmer {
  0%   { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}
.skeleton {
  background: #EDF0F6;
  background-image: linear-gradient(90deg, #EDF0F6 0px, #F6F8FB 80px, #EDF0F6 160px);
  background-size: 480px 100%;
  border-radius: 8px;
  animation: sai-shimmer 1.2s ease-in-out infinite;
}
.skeleton-line { height: 12px; border-radius: 6px; }
html[data-theme="dark"] .skeleton {
  background: #232A33;
  background-image: linear-gradient(90deg, #232A33 0px, #2C333D 80px, #232A33 160px);
}

/* ── Inline spinner (buttons) ── */
@keyframes sai-spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sai-spin .6s linear infinite;
  vertical-align: -3px;
}
.spinner.dark {
  border-color: rgba(179,27,27,.3);
  border-top-color: #B31B1B;
}
html[data-theme="dark"] .spinner.dark {
  border-color: rgba(228,94,91,.3);
  border-top-color: #E45E5B;
}
button.is-loading { pointer-events: none; opacity: .85; }

/* ── Empty / error blocks ── */
.state-block {
  text-align: center;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.state-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.state-ico.empty { background: #F1F3F8; color: #9CA3AF; }
.state-ico.error { background: #FEF2F2; color: #DC2626; }
.state-ico svg { width: 22px; height: 22px; }
html[data-theme="dark"] .state-ico.empty { background: #232A33; color: #99A2B0; }
html[data-theme="dark"] .state-ico.error { background: #3A1A1A; color: #F87171; }
.state-title { font-size: 14.5px; font-weight: 650; color: #374151; }
.state-msg   { font-size: 13px; color: #9CA3AF; line-height: 1.5; max-width: 280px; }
html[data-theme="dark"] .state-title { color: #E7EAF0; }
html[data-theme="dark"] .state-msg   { color: #99A2B0; }
.state-retry {
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: #B31B1B; background: #FFF0F0; border: none;
  border-radius: 9px; padding: 8px 16px; margin-top: 4px; cursor: pointer;
  transition: background .14s;
}
.state-retry:hover { background: #FFE0E0; }
html[data-theme="dark"] .state-retry { color: #E45E5B; background: #2C1B1C; }
html[data-theme="dark"] .state-retry:hover { background: #3A2224; }