/* ============================================================
   TitleKnight Design System — utilities.css
   Small, single-purpose helpers. One property, one purpose.
   ============================================================ */

/* Layout */
.row     { display: flex; align-items: center; gap: 8px; }
.row--sm { gap: 4px; }
.row--lg { gap: 14px; }
.stack   { display: flex; flex-direction: column; gap: 8px; }
.stack--sm { gap: 4px; }
.stack--lg { gap: 14px; }
.row-end { margin-left: auto; }

/* Alignment */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* Color helpers */
.muted { color: var(--muted); }
.soft  { color: var(--soft); }
.ink   { color: var(--ink); }
.success-text { color: var(--success); }
.error-text   { color: var(--error); }
.warning-text { color: var(--warning-dark); }

/* Numeric */
.tnum { font-feature-settings: "tnum"; }
.mono { font-family: var(--font-mono); }

/* Truncation */
.truncate {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* Visibility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.is-hidden { display: none !important; }

/* Flow */
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-full { grid-column: 1 / -1; }

/* Spacing utilities (used sparingly — prefer composing primitives) */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--sp-2); }
.mt-2 { margin-top: var(--sp-4); }
.mt-3 { margin-top: var(--sp-6); }
.mt-4 { margin-top: var(--sp-8); }
.mt-5 { margin-top: var(--sp-12); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--sp-2); }
.mb-2 { margin-bottom: var(--sp-4); }
.mb-3 { margin-bottom: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-8); }
.mb-5 { margin-bottom: var(--sp-12); }

/* Two-column rail layout */
.layout-rail {
  display: grid; grid-template-columns: 1fr 340px; gap: 16px;
}
@media (max-width: 1180px) {
  .layout-rail { grid-template-columns: 1fr; }
}
.rail { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   Flex / spacing helpers — added for Wave 2B (EditClientOrder
   migration). These replace dead Bootstrap utility classes
   (d-flex, flex-grow-1, gap-X, ms-auto, mb-X, etc.) with
   token-aligned design-system equivalents. Targeted set —
   only what's actually used in pages we've migrated, not a
   full Bootstrap-utility reproduction.
   ============================================================ */

/* Flex helpers — extend the existing .row / .stack pair */
.flex-row     { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-grow-1  { flex: 1 1 auto; min-width: 0; }
.flex-wrap    { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.align-center { align-items: center; }
.align-start  { align-items: flex-start; }
.align-end    { align-items: flex-end; }
.justify-end  { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.ms-auto      { margin-left: auto; }
.me-auto      { margin-right: auto; }

/* Gap utilities — token-aligned */
.gap-1 { gap: var(--sp-2); }   /* 4px */
.gap-2 { gap: var(--sp-4); }   /* 8px */
.gap-3 { gap: var(--sp-6); }   /* 12px */
.gap-4 { gap: var(--sp-8); }   /* 16px */

/* Margin-end / margin-start (LTR-only — we don't ship RTL) */
.me-1 { margin-right: var(--sp-2); }
.me-2 { margin-right: var(--sp-4); }
.me-3 { margin-right: var(--sp-6); }
.ms-1 { margin-left: var(--sp-2); }
.ms-2 { margin-left: var(--sp-4); }
.ms-3 { margin-left: var(--sp-6); }

/* Padding utilities */
.p-1  { padding: var(--sp-2); }
.p-2  { padding: var(--sp-4); }
.p-3  { padding: var(--sp-6); }
.p-4  { padding: var(--sp-8); }
.px-2 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.px-3 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
.px-4 { padding-left: var(--sp-8); padding-right: var(--sp-8); }
.py-1 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.py-2 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.py-3 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }

/* Padding-start / padding-end (LTR) */
.ps-1 { padding-left: var(--sp-2); }
.ps-2 { padding-left: var(--sp-4); }
.ps-3 { padding-left: var(--sp-6); }
.pe-1 { padding-right: var(--sp-2); }
.pe-2 { padding-right: var(--sp-4); }
.pe-3 { padding-right: var(--sp-6); }
.pt-1 { padding-top: var(--sp-2); }
.pt-2 { padding-top: var(--sp-4); }
.pt-3 { padding-top: var(--sp-6); }
.pb-1 { padding-bottom: var(--sp-2); }
.pb-2 { padding-bottom: var(--sp-4); }
.pb-3 { padding-bottom: var(--sp-6); }
.pb-4 { padding-bottom: var(--sp-8); }

/* Width / height fillers */
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.h-fill-scroll { height: 100%; overflow-y: auto; }

/* Tiny text — for hint chips, helper rows */
.tiny { font-size: 12px; }