/**
 * css/utilities.css  -  Single-purpose utility helpers
 *
 * Load order: AFTER components.css, BEFORE style.css
 * Naming: u- prefix
 *
 * These replace common inline styles. Use composably:
 *   <span class="u-text-sm u-text-muted">hint text</span>
 */

/* ── Scroll lock (global modal scroll prevention, see js/init.js) ─────── */

html.u-scroll-locked,
html.u-scroll-locked body {
  overflow: hidden !important;
}

/* ── Typography ──────────────────────────────────────── */

.u-text-xs   { font-size: .75rem; }
.u-text-sm   { font-size: .85rem; }
.u-text-base { font-size: .9rem; }

.u-text-primary   { color: var(--theme-text-primary); }
.u-text-secondary { color: var(--theme-text-secondary); }
.u-text-muted     { color: var(--theme-text-muted); }
.u-color-accent   { color: var(--theme-accent); }

.u-font-mono { font-family: monospace; }
.u-font-bold { font-weight: 700; }
.u-font-semibold { font-weight: 600; }
.u-line-through { text-decoration: line-through; }

/* Replaces: style="color:#198754" / "color:#dc3545" / "color:#fd7e14" (financial +/-/neutral amounts) */
.u-text-success { color: #198754; }
.u-text-danger  { color: #dc3545; }
.u-text-warning { color: #fd7e14; }

/* ── Spacing  -  margin-top ────────────────────────────── */

.u-mt-1 { margin-top: 4px; }
.u-mt-2 { margin-top: 8px; }
.u-mt-3 { margin-top: 12px; }
.u-mt-4 { margin-top: 16px; }
.u-mt-5 { margin-top: 20px; }

/* ── Spacing  -  margin-right ──────────────────────────── */

.u-mr-1 { margin-right: 4px; }
.u-mr-2 { margin-right: 8px; }

/* ── Form hints (replaces common inline style patterns) ─ */

/* Replaces: style="font-size:.8rem; color:var(--theme-text-muted); margin:-4px 0 10px" */
.u-form-hint {
  font-size: .8rem;
  color: var(--theme-text-muted);
  margin: -4px 0 10px;
}

/* Replaces: style="font-size:.78rem; color:var(--theme-text-muted); margin:4px 0 0" */
.u-form-hint-sm {
  font-size: .78rem;
  color: var(--theme-text-muted);
  margin: 4px 0 0;
}

/* Replaces: style="font-size:.85rem; color:var(--theme-text-secondary)" */
.u-label-secondary {
  font-size: .85rem;
  color: var(--theme-text-secondary);
}

/* ── Display ─────────────────────────────────────────── */

.u-hidden       { display: none !important; }   /* replaces style="display:none" everywhere */
.u-block        { display: block; }
.u-flex         { display: flex; }
.u-flex-center  { display: flex; align-items: center; }
.u-flex-gap-1   { gap: 4px; }
.u-flex-gap-2   { gap: 8px; }
.u-flex-gap-3   { gap: 12px; }

/* ── Spacing  -  margin-bottom ─────────────────────────── */

.u-mb-1 { margin-bottom: 4px; }
.u-mb-2 { margin-bottom: 8px; }
.u-mb-3 { margin-bottom: 12px; }
.u-mb-4 { margin-bottom: 16px; }
.u-mb-5 { margin-bottom: 20px; }

/* ── Spacing  -  padding ───────────────────────────────── */

.u-p-1 { padding: 4px; }
.u-p-2 { padding: 8px; }
.u-p-3 { padding: 12px; }

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

.u-w-100 { width: 100%; }

/* ── Interactivity ───────────────────────────────────── */

.u-cursor-pointer { cursor: pointer; }

/* ── Font sizes (supplement u-text-xs/sm for fine-grained control) ── */

.u-font-size-xs { font-size: 0.7rem; }   /* 11.2px  -  smallest labels */
.u-font-size-sm { font-size: 0.8rem; }   /* 12.8px  -  replaces style="font-size:13px" patterns */

/* ── Border radius ───────────────────────────────────── */

.u-rounded { border-radius: var(--theme-radius, 8px); }

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

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