/* 05-utilities.css — Tailwind-style utility classes used across ~report/detail templates but
   previously UNDEFINED, so figures/spacing/weights fell back to browser defaults. Mapped to the
   Astu design tokens (01-variables.css). Loaded after 04-components.css. (#158)
   Note: .text-sm/.text-xs, .grid-cols-*, .gap-sm/md/lg/xl are already defined in 04-components. */

/* ---- font size (larger sizes used for report/KPI figures) ---- */
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

/* ---- font weight ---- */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ---- text colors (Tailwind -500/-600 names → Astu tokens) ---- */
.text-primary-600 { color: var(--color-primary); }
.text-success-600 { color: var(--status-active); }
.text-warning-600 { color: var(--status-pending); }
.text-danger-600  { color: var(--status-urgent); }
.text-neutral-600 { color: var(--text-secondary); }
.text-neutral-500 { color: var(--text-tertiary); }

/* ---- numeric gaps (→ space tokens) ---- */
.gap-1 { gap: var(--space-xs); }
.gap-2 { gap: var(--space-sm); }
.gap-3 { gap: var(--space-md); }
.gap-4 { gap: var(--space-lg); }
.gap-6 { gap: var(--space-2xl); }

/* ---- numeric margin / padding (→ space tokens) ---- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-6 { margin-bottom: var(--space-2xl); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-6 { margin-top: var(--space-2xl); }
.mr-1 { margin-right: var(--space-xs); }
.mr-2 { margin-right: var(--space-sm); }
.ml-1 { margin-left: var(--space-xs); }
.ml-2 { margin-left: var(--space-sm); }
.p-0 { padding: 0; }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }

/* ---- numbered step badge (replaces keycap emoji 1️⃣–4️⃣ per DESIGN.md ban) ---- */
.step-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--text-primary);
  font-weight: 700;
}

/* ---- mobile: wide tables scroll instead of bleeding the viewport (#158) ----
   One rule covers every .data-table / .table (incl. the unwrapped financial/ledger/M&E tables)
   without 54 per-template wrapper edits. display:block + overflow-x lets cells keep their
   layout while the table scrolls horizontally on small screens. */
@media (max-width: 768px) {
  .data-table, table.table, .data-table-wrapper > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
}