/* ============================================================
   UTILITY CLASSES — extracted from inline styles
   ============================================================ */

/* SVG icon alignment helpers */
.icon-top { vertical-align: top; }
.icon-middle { vertical-align: middle; }
.icon-mr-4 { margin-right: 4px; }
.icon-mr-6 { margin-right: 6px; }
.icon-mr-8 { margin-right: 8px; }

/* Display state helpers (used by JS to toggle) */
.display-none { display: none; }
.display-block { display: block; }
.display-flex { display: flex; }

/* Margin helpers */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mr-2 { margin-right: 0.5rem; }

/* Flex helpers */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.flex-1 { flex: 1; }
.flex-auto { flex: 0 1 auto; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.self-end { align-self: flex-end; }

/* Text helpers */
.text-center { text-align: center; }
.text-capitalize { text-transform: capitalize; }
.text-uppercase { text-transform: uppercase; }
.text-mono { font-family: monospace; }
.text-sm { font-size: 0.75rem; }
.text-xs { font-size: 0.65rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* Spacing helpers */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }

/* Background helpers */
.bg-surface-2 { background: var(--surface2); }
.bg-bg-2 { background: var(--bg2); }
.bg-bg-3 { background: var(--bg3); }
.radius-12 { border-radius: 12px; }
.radius-10 { border-radius: 10px; }
.overflow-hidden { overflow: hidden; }

/* Width helpers */
.w-full { width: 100%; }
.w-auto { width: auto; }
.min-h-screen { min-height: 100vh; }

/* Position helpers */
.absolute { position: absolute; }
.relative { position: relative; }
.top-8 { top: 8px; }
.right-8 { right: 8px; }

/* Admin-specific helpers */
.admin-error-page,
.admin-access-denied {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #0a0a12;
  color: #e2e8f0;
  font-family: Inter, sans-serif;
  flex-direction: column;
  gap: 16px;
}
.admin-error-page a,
.admin-access-denied a {
  color: #a855f7;
}
.admin-error-page h1 { font-size: 1.5rem; margin: 0; }
.admin-error-page p { color: #94a3b8; margin: 0; }