/*
 * /assets/core/utilities.css — utility classes.
 *
 * Replaces the inline `style="margin-top:var(--s3);"` /
 * `style="margin-top:16px;"` pattern that escaped the token system. Always
 * prefer a utility class over an inline style. Always prefer a token-based
 * value over a raw pixel value.
 *
 * Naming: <prop>-<token>, where <token> is the spacing scale 1-9 (4px-96px)
 * mirroring tokens.css. Negative gaps are not provided.
 */

/* ---- Spacing — margin --------------------------------------------------- */
.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: var(--s1); } .mb-1 { margin-bottom: var(--s1); }
.mt-2 { margin-top: var(--s2); } .mb-2 { margin-bottom: var(--s2); }
.mt-3 { margin-top: var(--s3); } .mb-3 { margin-bottom: var(--s3); }
.mt-4 { margin-top: var(--s4); } .mb-4 { margin-bottom: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mb-5 { margin-bottom: var(--s5); }
.mt-6 { margin-top: var(--s6); } .mb-6 { margin-bottom: var(--s6); }

.ml-1 { margin-left: var(--s1); } .mr-1 { margin-right: var(--s1); }
.ml-2 { margin-left: var(--s2); } .mr-2 { margin-right: var(--s2); }
.ml-3 { margin-left: var(--s3); } .mr-3 { margin-right: var(--s3); }
.ml-4 { margin-left: var(--s4); } .mr-4 { margin-right: var(--s4); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ---- Spacing — padding -------------------------------------------------- */
.p-0  { padding: 0 !important; }
.p-2  { padding: var(--s2); }
.p-3  { padding: var(--s3); }
.p-4  { padding: var(--s4); }
.p-5  { padding: var(--s5); }

.pt-2 { padding-top: var(--s2); } .pb-2 { padding-bottom: var(--s2); }
.pt-3 { padding-top: var(--s3); } .pb-3 { padding-bottom: var(--s3); }
.pt-4 { padding-top: var(--s4); } .pb-4 { padding-bottom: var(--s4); }

/* ---- Flex --------------------------------------------------------------- */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; min-width: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-end   { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* ---- Gap ---------------------------------------------------------------- */
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.gap-5 { gap: var(--s5); }

/* ---- Grid --------------------------------------------------------------- */
.grid    { display: grid; }
/* minmax(0, …): plain 1fr tracks bottom out at content min-width, so a wide
   child (table, long select) would stretch the grid past its container. */
.grid-2  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.grid-4  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.col-span-2 { grid-column: span 2; }
.col-span-full { grid-column: 1 / -1; }

/* Responsive collapse. This file loads after style.css, so the collapse
   must live here too — a bare `.grid-2 { ... }` above would otherwise win
   the cascade over style.css's own 720px media rule and forms would stay
   two-up on phones. */
@media (max-width: 900px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .col-span-2 { grid-column: auto; }
}

/* ---- Sizing ------------------------------------------------------------- */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.h-full  { height: 100%; }
.min-w-0 { min-width: 0; }

/* ---- Typography --------------------------------------------------------- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.font-mono   { font-family: var(--f-mono); }
.font-display{ font-family: var(--f-display); }
.text-xs     { font-size: var(--t-xs); }
.text-sm     { font-size: var(--t-sm); }
.text-md     { font-size: var(--t-md); }
.text-lg     { font-size: var(--t-lg); }
.text-muted  { color: var(--fg-3); }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Visibility --------------------------------------------------------- */
/* .hidden already exists in style.css; keep it there as the canonical one. */
.invisible { visibility: hidden; }