/* ============================================================================
   NOVA Logistics — Utility classes
   Promoted from admin/layout.php's utility set (previously admin-only) to
   global use, plus a few additions for the spacing scale in tokens.css.
   Small, single-purpose classes — compose them rather than writing one-off
   inline styles (the redesign goal: kill scattered `style="..."` attributes).
   ========================================================================= */

/* ── Text ────────────────────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.text-navy  { color: var(--navy); }
.text-gold  { color: var(--gold); }
.text-sm    { font-size: 12px; }
.text-xs    { font-size: 11px; }
.fw-bold    { font-weight: 700; }
.text-center{ text-align: center; }
.text-right { text-align: right; }

/* ── Spacing (margin-top/bottom using the --space-* scale) ───────────────── */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

/* ── Flex / grid helpers ─────────────────────────────────────────────────── */
.d-flex          { display: flex; }
.d-grid          { display: grid; }
.flex-wrap       { flex-wrap: wrap; }
.flex-col        { flex-direction: column; }
.gap-1           { gap: var(--space-1); }
.gap-2           { gap: var(--space-2); }
.gap-3           { gap: var(--space-3); }
.align-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }

/* ── Visibility helpers (for progressive responsive disclosure) ──────────── */
.hide-mobile { display: initial; }
.show-mobile { display: none; }
@media (max-width: 600px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: initial !important; }
}