/* ============================================================
   UTILITIES
   Single-purpose helpers. Keep this file lean.
   ============================================================ */

/* ── Visibility ───────────────────────────────────────────── */

.hidden {
  display: none !important;
}

/* Screen-reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Text ─────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-primary   { color: var(--color-text-primary)   !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-tertiary  { color: var(--color-text-tertiary)  !important; }
.text-accent    { color: var(--color-accent)          !important; }
.text-error     { color: var(--color-error)           !important; }
.text-success   { color: var(--color-success)         !important; }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-bold { font-weight: var(--font-bold); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-unavailable {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ── Spacing ──────────────────────────────────────────────── */

.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.mt-3    { margin-top: var(--space-3); }
.mt-4    { margin-top: var(--space-4); }

/* Card row — consistent padding for list rows inside .card */
.card__row { padding: var(--space-3) var(--space-2); }

/* ── Sizing ───────────────────────────────────────────────── */

.w-full { width: 100%; }

/* ── Overflow ─────────────────────────────────────────────── */

.scroll-y {
  overflow-y: auto;
  max-height: 80vh;
}

/* ── Misc ─────────────────────────────────────────────────── */

.rounded { border-radius: var(--radius-md); }
.shadow  { box-shadow: var(--shadow-md); }