/* 05-utilities.css — Minimal utility classes */
.hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.w-full { width: 100%; }
.h-full { height: 100%; }
.text-center { text-align: center; }
.overflow-auto { overflow: auto; }
.ml-auto { margin-left: auto; }
.mt-4 { margin-top: var(--s-4); }
.mb-4 { margin-bottom: var(--s-4); }
.p-4 { padding: var(--s-4); }

/* Toast notifications */
#toast-root {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--s-8) var(--s-4);
}
.empty-state__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--s-4);
  color: var(--c-border-hi);
}
.empty-state__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--c-text-2);
  margin-bottom: var(--s-2);
}
.empty-state__desc {
  font-size: var(--text-sm);
  color: var(--c-text-3);
}

/* Loading screen */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: var(--s-4);
}
.loading-screen__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--c-surface-2);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Spin animation (global) */
@keyframes spin {
  to { transform: rotate(360deg); }
}