/* ================================================================
   SicoTrack — primitivele de layout („Every Layout”) și utilitarele
   ================================================================
   Ca un modul să se așeze fără `style=` (azi peste 1300 de display / gap / margin
   inline în view-uri). Distanțele vin din tokenii --sp-* (css/tokens.css), iar
   modificatorii sunt clase, nu variabile setate din `style=`. ui-componente, 06.10.2026.

   .stack        elemente unul sub altul, cu spațiu egal între ele
   .cluster      elemente pe un rând, care se rup pe rândul următor când nu încap
   .sidebar-layout  conținut + o coloană laterală care trece dedesubt pe ecran îngust
   .grid-auto    carduri pe coloane care se reașază singure (minim 240 px fiecare)
   .switcher     rând care devine coloană sub ~640 px de container
   .gap-1 … .gap-7  distanța (4 … 28 px), pe oricare din cele de mai sus
   ================================================================ */

.stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-4)); }
.stack > * { margin-block: 0; }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--sp-3)); }
.cluster.between { justify-content: space-between; }
.cluster.end { justify-content: flex-end; }
.cluster.baseline { align-items: baseline; }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 240px), 100%), 1fr));
  gap: var(--gap, var(--sp-4));
}
.grid-auto.wide { --min: 340px; }

.switcher { display: flex; flex-wrap: wrap; gap: var(--gap, var(--sp-4)); }
.switcher > * { flex-grow: 1; flex-basis: calc((640px - 100%) * 999); }

.gap-1 { --gap: var(--sp-1); }
.gap-2 { --gap: var(--sp-2); }
.gap-3 { --gap: var(--sp-3); }
.gap-4 { --gap: var(--sp-4); }

/* ── Utilitare de text ─────────────────────────────────────────── */
.num { font-variant-numeric: var(--num); text-align: right; white-space: nowrap; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Atributul `hidden` câștigă și peste un `display` dat de o clasă (ex. `.cpa-pager { display:flex }`): fără regula
   asta, `el.hidden = true` nu ascundea nimic pe elementele cu display propriu (ui-cheltuieli-lista, 08.10.2026). */
[hidden] { display: none !important; }
/* x-cloak: ascuns până pornește Alpine, care scoate atributul. Era scris în <style>-ul fiecărei pagini; unde
   <style>-ul a dispărut la redesign, ferestrele Alpine apăreau o clipă la încărcare (ui-ecrane-mici, 08.10.2026) */
[x-cloak] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}