/* ==========================================================================
   UTILITIES

   Layout primitives and spacing only. Anything describing a COMPONENT
   (card, badge, button) belongs in that component's stylesheet.
   ========================================================================== */

/* ---- Visibility ----
   !important is warranted here specifically: .u-hidden is frequently
   applied alongside a layout class like .u-row (display:flex), and
   without it the later-declared flex rule wins and the element stays
   visible — the exact bug this utility exists to prevent. */
.u-hidden { display: none !important; }
.u-hidden-center { display: none !important; text-align: center; }

/* ---- Flex rows ---- */
.u-row { display: flex; align-items: center; }
.u-row-2 { display: flex; align-items: center; gap: var(--sp-2); }
.u-row-3 { display: flex; align-items: center; gap: var(--sp-3); }
.u-row-4 { display: flex; align-items: center; gap: var(--sp-4); }
.u-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.u-row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.u-row-wrap { flex-wrap: wrap; }
.u-col { display: flex; flex-direction: column; }
.u-grow { flex: 1; min-width: 0; }
.u-shrink-0 { flex-shrink: 0; }

/* ---- Spacing ---- */
.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mb-1 { margin-bottom: var(--sp-1); }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-5 { margin-bottom: var(--sp-5); }
.u-mb-6 { margin-bottom: var(--sp-6); }
.u-mr-1 { margin-right: var(--sp-1); }
.u-mr-2 { margin-right: var(--sp-2); }
.u-ml-auto { margin-left: auto; }

/* ---- Typography ---- */
.u-text-sm { font-size: var(--fs-body-sm); }
.u-text-xs { font-size: var(--fs-caption); }
.u-muted { color: var(--text-muted); }
.u-faint { color: var(--text-faint); }
.u-danger { color: var(--danger); }
.u-success { color: var(--success); }
.u-nowrap { white-space: nowrap; }
.u-truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.u-center { text-align: center; }

/* ---- Forms ---- */
.u-hint {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}
.u-check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  cursor: pointer;
  color: var(--text-primary);
  user-select: none;
}
.u-check-label input { width: auto; margin: 0; }

/* ---- Sizing ---- */
.u-w-full { width: 100%; }
.u-icon-sm { width: 24px; height: 24px; flex-shrink: 0; }