/* ─────────────────────────────────────────────────────────────────────
   utilities.css — atomic classes for layout, spacing, text, presentation.
   ─────────────────────────────────────────────────────────────────────

   Conventions:
     • Spacing scale (--sp-1..10) drives every gap/margin/padding utility.
     • Colors named semantically (.text-meta, not .text-stone-400).
     • font-size lives in typography.css (.t-1..t-8). Don't re-declare here.
     • Composite shortcuts (.row, .row-between, .stack) live alongside
       atomic classes — for very common combos.
   ───────────────────────────────────────────────────────────────────── */

/* ───── DISPLAY ───── */
.flex         { display: flex }
.inline-flex  { display: inline-flex }
.grid         { display: grid }
.inline-grid  { display: inline-grid }
.block        { display: block }
.inline-block { display: inline-block }
.inline       { display: inline }
.hidden       { display: none !important } /* !important wins over .row, .col, .stack composites */

/* ───── FLEX MODIFIERS ───── */
.flex-row     { flex-direction: row }
.flex-col     { flex-direction: column }
.flex-row-rev { flex-direction: row-reverse }
.flex-col-rev { flex-direction: column-reverse }
.flex-wrap    { flex-wrap: wrap }
.flex-nowrap  { flex-wrap: nowrap }
.flex-1       { flex: 1 1 0 }
.flex-auto    { flex: 1 1 auto }
.flex-none    { flex: none }
.shrink-0     { flex-shrink: 0 }
.shrink-1     { flex-shrink: 1 }
.grow-0       { flex-grow: 0 }
.grow-1       { flex-grow: 1 }

/* ───── JUSTIFY (main axis) ───── */
.justify-start   { justify-content: flex-start }
.justify-center  { justify-content: center }
.justify-end     { justify-content: flex-end }
.justify-between { justify-content: space-between }
.justify-around  { justify-content: space-around }
.justify-evenly  { justify-content: space-evenly }

/* ───── ALIGN (cross axis) ───── */
.items-start    { align-items: flex-start }
.items-center   { align-items: center }
.items-end      { align-items: flex-end }
.items-baseline { align-items: baseline }
.items-stretch  { align-items: stretch }
.self-start     { align-self: flex-start }
.self-center    { align-self: center }
.self-end       { align-self: flex-end }
.self-stretch   { align-self: stretch }

/* ───── COMPOSITE SHORTCUTS ───── */
.row          { display: flex; align-items: center }
.row-between  { display: flex; align-items: center; justify-content: space-between }
.row-end      { display: flex; align-items: center; justify-content: flex-end }
.row-baseline { display: flex; align-items: baseline }
.col          { display: flex; flex-direction: column }
.stack        { display: flex; flex-direction: column; gap: var(--sp-3) }
.center       { display: flex; align-items: center; justify-content: center }

/* ───── GAP ───── */
.gap-px   { gap: var(--sp-px) }
.gap-0\.5 { gap: 2px }
.gap-1 { gap: var(--sp-1) }
.gap-2 { gap: var(--sp-2) }
.gap-3 { gap: var(--sp-3) }
.gap-4 { gap: var(--sp-4) }
.gap-5 { gap: var(--sp-5) }
.gap-6 { gap: var(--sp-6) }
.gap-7 { gap: var(--sp-7) }
.gap-8 { gap: var(--sp-8) }
.gap-9 { gap: var(--sp-9) }
.gap-10{ gap: var(--sp-10) }

.gap-x-1{column-gap:var(--sp-1)}.gap-x-2{column-gap:var(--sp-2)}.gap-x-3{column-gap:var(--sp-3)}
.gap-x-4{column-gap:var(--sp-4)}.gap-x-5{column-gap:var(--sp-5)}.gap-x-6{column-gap:var(--sp-6)}
.gap-x-7{column-gap:var(--sp-7)}.gap-x-8{column-gap:var(--sp-8)}

.gap-y-1{row-gap:var(--sp-1)}.gap-y-2{row-gap:var(--sp-2)}.gap-y-3{row-gap:var(--sp-3)}
.gap-y-4{row-gap:var(--sp-4)}.gap-y-5{row-gap:var(--sp-5)}.gap-y-6{row-gap:var(--sp-6)}
.gap-y-7{row-gap:var(--sp-7)}.gap-y-8{row-gap:var(--sp-8)}

/* ───── MARGIN ───── */
.m-0{margin:0}.m-px{margin:var(--sp-px)}.m-0\.5{margin:2px}
.m-1{margin:var(--sp-1)}.m-2{margin:var(--sp-2)}.m-3{margin:var(--sp-3)}.m-4{margin:var(--sp-4)}
.m-5{margin:var(--sp-5)}.m-6{margin:var(--sp-6)}.m-7{margin:var(--sp-7)}.m-8{margin:var(--sp-8)}
.m-9{margin:var(--sp-9)}.m-10{margin:var(--sp-10)}.m-auto{margin:auto}

.mt-0{margin-top:0}.mt-px{margin-top:var(--sp-px)}.mt-0\.5{margin-top:2px}
.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}.mt-8{margin-top:var(--sp-8)}.mt-9{margin-top:var(--sp-9)}
.mt-10{margin-top:var(--sp-10)}.mt-auto{margin-top:auto}

.mb-0{margin-bottom:0}.mb-px{margin-bottom:var(--sp-px)}.mb-0\.5{margin-bottom:2px}
.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.mb-7{margin-bottom:var(--sp-7)}.mb-8{margin-bottom:var(--sp-8)}.mb-9{margin-bottom:var(--sp-9)}
.mb-10{margin-bottom:var(--sp-10)}.mb-auto{margin-bottom:auto}

.ml-0{margin-left:0}.ml-px{margin-left:var(--sp-px)}.ml-0\.5{margin-left:2px}
.ml-1{margin-left:var(--sp-1)}.ml-2{margin-left:var(--sp-2)}.ml-3{margin-left:var(--sp-3)}
.ml-4{margin-left:var(--sp-4)}.ml-5{margin-left:var(--sp-5)}.ml-6{margin-left:var(--sp-6)}
.ml-7{margin-left:var(--sp-7)}.ml-8{margin-left:var(--sp-8)}.ml-9{margin-left:var(--sp-9)}
.ml-10{margin-left:var(--sp-10)}.ml-auto{margin-left:auto}

.mr-0{margin-right:0}.mr-px{margin-right:var(--sp-px)}.mr-0\.5{margin-right:2px}
.mr-1{margin-right:var(--sp-1)}.mr-2{margin-right:var(--sp-2)}.mr-3{margin-right:var(--sp-3)}
.mr-4{margin-right:var(--sp-4)}.mr-5{margin-right:var(--sp-5)}.mr-6{margin-right:var(--sp-6)}
.mr-7{margin-right:var(--sp-7)}.mr-8{margin-right:var(--sp-8)}.mr-9{margin-right:var(--sp-9)}
.mr-10{margin-right:var(--sp-10)}.mr-auto{margin-right:auto}

.mx-0{margin-left:0;margin-right:0}
.mx-1{margin-left:var(--sp-1);margin-right:var(--sp-1)}
.mx-2{margin-left:var(--sp-2);margin-right:var(--sp-2)}
.mx-3{margin-left:var(--sp-3);margin-right:var(--sp-3)}
.mx-4{margin-left:var(--sp-4);margin-right:var(--sp-4)}
.mx-5{margin-left:var(--sp-5);margin-right:var(--sp-5)}
.mx-6{margin-left:var(--sp-6);margin-right:var(--sp-6)}
.mx-7{margin-left:var(--sp-7);margin-right:var(--sp-7)}
.mx-8{margin-left:var(--sp-8);margin-right:var(--sp-8)}
.mx-9{margin-left:var(--sp-9);margin-right:var(--sp-9)}
.mx-10{margin-left:var(--sp-10);margin-right:var(--sp-10)}
.mx-auto{margin-left:auto;margin-right:auto}

.my-0{margin-top:0;margin-bottom:0}
.my-1{margin-top:var(--sp-1);margin-bottom:var(--sp-1)}
.my-2{margin-top:var(--sp-2);margin-bottom:var(--sp-2)}
.my-3{margin-top:var(--sp-3);margin-bottom:var(--sp-3)}
.my-4{margin-top:var(--sp-4);margin-bottom:var(--sp-4)}
.my-5{margin-top:var(--sp-5);margin-bottom:var(--sp-5)}
.my-6{margin-top:var(--sp-6);margin-bottom:var(--sp-6)}
.my-7{margin-top:var(--sp-7);margin-bottom:var(--sp-7)}
.my-8{margin-top:var(--sp-8);margin-bottom:var(--sp-8)}
.my-9{margin-top:var(--sp-9);margin-bottom:var(--sp-9)}
.my-10{margin-top:var(--sp-10);margin-bottom:var(--sp-10)}

/* ───── PADDING ───── */
.p-0{padding:0}.p-px{padding:var(--sp-px)}.p-0\.5{padding:2px}
.p-1{padding:var(--sp-1)}.p-2{padding:var(--sp-2)}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}
.p-5{padding:var(--sp-5)}.p-6{padding:var(--sp-6)}.p-7{padding:var(--sp-7)}.p-8{padding:var(--sp-8)}
.p-9{padding:var(--sp-9)}.p-10{padding:var(--sp-10)}

.pt-0{padding-top:0}
.pt-1{padding-top:var(--sp-1)}.pt-2{padding-top:var(--sp-2)}.pt-3{padding-top:var(--sp-3)}
.pt-4{padding-top:var(--sp-4)}.pt-5{padding-top:var(--sp-5)}.pt-6{padding-top:var(--sp-6)}
.pt-7{padding-top:var(--sp-7)}.pt-8{padding-top:var(--sp-8)}.pt-9{padding-top:var(--sp-9)}
.pt-10{padding-top:var(--sp-10)}

.pb-0{padding-bottom:0}
.pb-1{padding-bottom:var(--sp-1)}.pb-2{padding-bottom:var(--sp-2)}.pb-3{padding-bottom:var(--sp-3)}
.pb-4{padding-bottom:var(--sp-4)}.pb-5{padding-bottom:var(--sp-5)}.pb-6{padding-bottom:var(--sp-6)}
.pb-7{padding-bottom:var(--sp-7)}.pb-8{padding-bottom:var(--sp-8)}.pb-9{padding-bottom:var(--sp-9)}
.pb-10{padding-bottom:var(--sp-10)}

.pl-0{padding-left:0}
.pl-1{padding-left:var(--sp-1)}.pl-2{padding-left:var(--sp-2)}.pl-3{padding-left:var(--sp-3)}
.pl-4{padding-left:var(--sp-4)}.pl-5{padding-left:var(--sp-5)}.pl-6{padding-left:var(--sp-6)}
.pl-7{padding-left:var(--sp-7)}.pl-8{padding-left:var(--sp-8)}.pl-9{padding-left:var(--sp-9)}
.pl-10{padding-left:var(--sp-10)}

.pr-0{padding-right:0}
.pr-1{padding-right:var(--sp-1)}.pr-2{padding-right:var(--sp-2)}.pr-3{padding-right:var(--sp-3)}
.pr-4{padding-right:var(--sp-4)}.pr-5{padding-right:var(--sp-5)}.pr-6{padding-right:var(--sp-6)}
.pr-7{padding-right:var(--sp-7)}.pr-8{padding-right:var(--sp-8)}.pr-9{padding-right:var(--sp-9)}
.pr-10{padding-right:var(--sp-10)}

.px-0{padding-left:0;padding-right:0}
.px-1{padding-left:var(--sp-1);padding-right:var(--sp-1)}
.px-2{padding-left:var(--sp-2);padding-right:var(--sp-2)}
.px-3{padding-left:var(--sp-3);padding-right:var(--sp-3)}
.px-4{padding-left:var(--sp-4);padding-right:var(--sp-4)}
.px-5{padding-left:var(--sp-5);padding-right:var(--sp-5)}
.px-6{padding-left:var(--sp-6);padding-right:var(--sp-6)}
.px-7{padding-left:var(--sp-7);padding-right:var(--sp-7)}
.px-8{padding-left:var(--sp-8);padding-right:var(--sp-8)}
.px-9{padding-left:var(--sp-9);padding-right:var(--sp-9)}
.px-10{padding-left:var(--sp-10);padding-right:var(--sp-10)}

.py-0{padding-top:0;padding-bottom:0}
.py-1{padding-top:var(--sp-1);padding-bottom:var(--sp-1)}
.py-2{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.py-3{padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.py-4{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
.py-5{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.py-6{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
.py-7{padding-top:var(--sp-7);padding-bottom:var(--sp-7)}
.py-8{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
.py-9{padding-top:var(--sp-9);padding-bottom:var(--sp-9)}
.py-10{padding-top:var(--sp-10);padding-bottom:var(--sp-10)}

/* ───── TEXT COLOR (semantic) ───── */
.text-default   { color: var(--text) }
.text-secondary { color: var(--text-2) }
.text-meta      { color: var(--text-3) }
.text-faint     { color: var(--text-4) }
.text-primary   { color: var(--primary) }
.text-success   { color: var(--success) }
.text-danger    { color: var(--danger) }
.text-warning   { color: var(--warning) }
.text-violet    { color: var(--violet) }
.text-inherit   { color: inherit }

/* ───── TEXT WEIGHT ───── */
.font-normal   { font-weight: 400 }
.font-medium   { font-weight: 500 }
.font-semibold { font-weight: 600 }
.font-bold     { font-weight: 700 }

/* ───── TEXT STYLE / FORMAT ───── */
.uppercase     { text-transform: uppercase; letter-spacing: 0.05em }
.normal-case   { text-transform: none; letter-spacing: 0 }
.italic        { font-style: italic }
.text-mono     { font-family: 'Geist Mono', ui-monospace, monospace; font-feature-settings: 'tnum','zero' }
.text-nowrap   { white-space: nowrap }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.underline     { text-decoration: underline }
.no-underline  { text-decoration: none }

/* ───── TEXT ALIGNMENT ───── */
.text-left   { text-align: left }
.text-center { text-align: center }
.text-right  { text-align: right }

/* ───── BACKGROUND (semantic) ───── */
.bg-surface      { background: var(--surface) }
.bg-surface-2    { background: var(--surface-2) }
.bg-surface-3    { background: var(--surface-3) }
.bg-primary-soft { background: var(--primary-soft) }
.bg-success-soft { background: var(--success-soft) }
.bg-danger-soft  { background: var(--danger-soft) }
.bg-warning-soft { background: var(--warning-soft) }
.bg-violet-soft  { background: var(--violet-soft) }
.bg-transparent  { background: transparent }

/* ───── BORDER ───── */
.border          { border: 1px solid var(--border) }
.border-t        { border-top: 1px solid var(--border) }
.border-b        { border-bottom: 1px solid var(--border) }
.border-l        { border-left: 1px solid var(--border) }
.border-r        { border-right: 1px solid var(--border) }
.border-none     { border: none }
.border-strong   { border-color: var(--border-2) !important }
.border-dashed   { border-style: dashed }
.border-t-dashed { border-top: 1px dashed var(--border) }
.border-b-dashed { border-bottom: 1px dashed var(--border) }

/* ───── RADIUS ───── */
.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: var(--r-sm) }     /* 5px  — pills */
.rounded      { border-radius: var(--r-md) }     /* 6px  — default */
.rounded-md   { border-radius: var(--r-lg) }     /* 7px  — buttons, inputs */
.rounded-lg   { border-radius: var(--r-xl) }     /* 8px  — cmd-input */
.rounded-xl   { border-radius: var(--r-2xl) }    /* 10px — collapse, kpi */
.rounded-2xl  { border-radius: var(--r-3xl) }    /* 12px — section-card */
.rounded-3xl  { border-radius: var(--r-4xl) }    /* 14px — hero */
.rounded-full { border-radius: var(--r-full) }

/* ───── SIZING ───── */
.w-full  { width: 100% }
.w-auto  { width: auto }
.h-full  { height: 100% }
.h-auto  { height: auto }
.h-px    { height: 1px }
.min-w-0 { min-width: 0 }

/* Closed scale for sizing inputs/selects to match expected content.
   !important wins over base `input[type=text] { width: 100% }` rule. */
.w-xs  { width: 70px  !important }  /* 2–3 char codes (VC, BSP) */
.w-sm  { width: 110px !important }  /* PCC, EPR, short numeric, dates */
.w-md  { width: 180px !important }  /* short labels, currency, status */
.w-lg  { width: 260px !important }  /* names, short emails */
.w-xl  { width: 360px !important }  /* full names, descriptions */
.w-2xl { width: 480px !important }  /* long text, addresses */

/* Square sizes for icons / dots / mini-avatars */
.size-3 { width: 12px; height: 12px }
.size-4 { width: 16px; height: 16px }
.size-5 { width: 20px; height: 20px }
.size-6 { width: 24px; height: 24px }
.size-7 { width: 28px; height: 28px }
.size-8 { width: 32px; height: 32px }

/* ───── POSITION ───── */
.relative  { position: relative }
.absolute  { position: absolute }
.fixed-pos { position: fixed }   /* .fixed is reserved by shell layout */
.sticky    { position: sticky }
.static    { position: static }
.inset-0   { inset: 0 }

/* ───── OVERFLOW ───── */
.overflow-hidden  { overflow: hidden }
.overflow-auto    { overflow: auto }
.overflow-scroll  { overflow: scroll }
.overflow-visible { overflow: visible }
.overflow-x-auto  { overflow-x: auto }
.overflow-y-auto  { overflow-y: auto }

/* ───── INTERACTIVITY ───── */
.cursor-pointer     { cursor: pointer }
.cursor-default     { cursor: default }
.cursor-not-allowed { cursor: not-allowed }
.cursor-help        { cursor: help }
.select-none        { user-select: none }
.select-text        { user-select: text }
.pointer-events-none{ pointer-events: none }

/* ───── OPACITY ───── */
.opacity-0   { opacity: 0 }
.opacity-25  { opacity: 0.25 }
.opacity-50  { opacity: 0.5 }
.opacity-75  { opacity: 0.75 }
.opacity-100 { opacity: 1 }

/* ───── GRID TEMPLATES ─────
   Equal-share columns (1fr each) for hero stat strips, KPI rows.

   Responsive baked in (class-based — Just Works in any markup):
     ≤ 1024px : .grid-5/.grid-6 → 3 cols · .grid-4 → 2 cols
     ≤  700px : .grid-3/.grid-4/.grid-5/.grid-6 → 2 cols · .grid-2 → 1 col
   Use these classes in markup; the responsive collapse comes for free. */
.grid-2 { grid-template-columns: 1fr 1fr }
.grid-3 { grid-template-columns: repeat(3, 1fr) }
.grid-4 { grid-template-columns: repeat(4, 1fr) }
.grid-5 { grid-template-columns: repeat(5, 1fr) }
.grid-6 { grid-template-columns: repeat(6, 1fr) }

@media (max-width: 1024px) {
  .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr) }
  .grid-4          { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 700px) {
  .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr) }
  .grid-2                            { grid-template-columns: 1fr }
}

/* Label-value 2-column layouts (fixed left, flexible right). */
.grid-label-sm { grid-template-columns: 130px 1fr }
.grid-label    { grid-template-columns: 160px 1fr }
.grid-label-lg { grid-template-columns: 200px 1fr }

/* ───── TABLE WRAPPER (mobile horizontal scroll) ─────
   Wrap a wide <table class="tbl"> in <div class="tbl-wrap"> so it can
   scroll horizontally inside its section-card on narrow viewports.
   Desktop: invisible. Mobile rules live in shell.css responsive block. */
.tbl-wrap { width: 100% }

/* ───── ANIMATIONS ───── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: translateY(0) }
}
.fade-up { animation: fadeUp .42s cubic-bezier(0.16, 1, 0.3, 1) backwards }

/* ───── LINK STYLE (opt-in) ───── */
.ulink {
  color: var(--primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--primary-soft-2);
  text-underline-offset: 2px;
}
.ulink:hover { text-decoration-color: var(--primary) }

/* ───── SCROLLBAR ───── */
::-webkit-scrollbar       { width: 10px; height: 10px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; border: 2px solid transparent; background-clip: content-box }
*:hover::-webkit-scrollbar-thumb { background: var(--text-4); background-clip: content-box }