/* static/styles/utilities.css
 *
 * V1 (inline-CSS-extraktion, Fase 1): utility-klasser for de hyppigste
 * inline-style-mønstre i templates. Mål: "no inline CSS" (jf. README +
 * INSTRUCTIONS §5). Indlæses globalt via base.html.
 *
 * Bemærk navnekollisioner: .section-title og .meta-label findes allerede i
 * components.css med ANDRE værdier — derfor bruger vi .u-card-title og
 * .u-meta-note her. .text-center og .mb-8 genbruges fra components.css/v6.css.
 */

/* width:100%; margin-top:4px; font-size:13px; */
.field-input { width: 100%; margin-top: 4px; font-size: 13px; }

/* font-size:12px; margin-top:2px; (kollision: .meta-label er optaget) */
.u-meta-note { font-size: 12px; margin-top: 2px; }

/* margin-bottom:12px; */
.mb-12 { margin-bottom: 12px; }

/* font-size:16px; font-weight:800; margin:0 0 12px; (kollision: .section-title optaget) */
.u-card-title { font-size: 16px; font-weight: 800; margin: 0 0 12px; }

/* font-size:13px; margin:0; */
.body-sm { font-size: 13px; margin: 0; }

/* width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px; box-sizing:border-box; */
.form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

/* padding:18px; */
.p-18 { padding: 18px; }

/* ── V1 Fase 2: udvidede utility-klasser (hyppige statiske mønstre) ──────
 * u-prefiks for at undgå navnekollision med eksisterende klasser. Rene
 * spacing/layout/tekst-mønstre; dynamiske og JS-togglede (display:none) styles
 * er bevidst IKKE konverteret. */
.u-bb-line       { border-bottom: 1px solid var(--line); }
.u-bt-line       { border-top: 1px solid var(--line-solid); }
.u-bg-subtle     { background: var(--bg-subtle); }
.u-mt-2          { margin-top: 2px; }
.u-mt-10         { margin-top: 10px; }
.u-mt-14         { margin-top: 14px; }
.u-mt-lg         { margin-top: 1.5rem; }
.u-mb-4          { margin-bottom: 4px; }
.u-mb-14         { margin-bottom: 14px; }
.u-mb-18         { margin-bottom: 18px; }
.u-py-4          { padding: 4px 0; }
.u-p-6           { padding: 6px; }
.u-p-8-10        { padding: 8px 10px; }
.u-p-16          { padding: 16px; }
.u-jc-center     { justify-content: center; }
.u-flex-center-8 { display: flex; align-items: center; gap: 8px; }
.u-row-between-16{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.u-maxw-760      { max-width: 760px; margin: 0 auto; }
.u-maxw-800      { max-width: 800px; margin: 0 auto; }
.u-maxw-900      { max-width: 900px; margin: 0 auto; }
.u-fs-14         { font-size: 14px; }
.u-fs-14-700     { font-size: 14px; font-weight: 700; }
.u-fs-11-600     { font-size: 11px; font-weight: 600; }
.u-hint-11       { font-size: 11px; margin-top: 4px; }
.u-label-12-600  { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.u-link-12       { font-size: 12px; text-decoration: none; }
.u-link-13       { font-size: 13px; text-decoration: none; }
.my-8            { margin: 8px 0; }

/* ── V1 Fase 2: long-tail sweep (yderligere hyppige statiske mønstre) ── */
.u-cell-c-700   { padding: 10px 12px; text-align: center; font-weight: 700; }
.u-field-input-12 { width: 100%; margin-top: 4px; font-size: 12px; }
.u-input-8      { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.u-input-8-13   { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.u-input-w12    { width: 100%; font-size: 12px; padding: 6px 8px; }
.u-input-50     { width: 50px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 12px; }
.u-check-bullet { position: absolute; left: 0; color: #16a34a; font-weight: 700; }
.u-p-810-c      { padding: 8px 10px; text-align: center; }
.u-p-24-c       { padding: 24px; text-align: center; }
.u-p16-mb12     { padding: 16px; margin-bottom: 12px; }
.u-p108-l       { padding: 10px 8px; text-align: left; }
.u-l-p108       { text-align: left; padding: 10px 8px; }
.u-p108-c-80    { padding: 10px 8px; text-align: center; width: 80px; }
.u-c-p32        { text-align: center; padding: 32px; }
.u-c-p16        { text-align: center; padding: 16px; }
.u-p-910        { padding: 9px 10px; }
.u-p-8          { padding: 8px; }
.u-p-1012       { padding: 10px 12px; }
.u-p1012-c      { padding: 10px 12px; text-align: center; }
.u-py-10        { padding: 10px 0; }
.u-py10-600     { padding: 10px 0; font-weight: 600; }
.u-pl18-rel     { padding-left: 18px; position: relative; }
.u-fs14-600     { font-size: 14px; font-weight: 600; }
.u-fs11-600-ok  { font-size: 11px; font-weight: 600; color: var(--success); }
.u-fs10-slate   { font-size: 10px; color: #64748b; }
.u-inline-m0    { display: inline; margin: 0; }
.u-block-label  { display: block; font-size: 11px; color: var(--muted); margin: 2px 0 4px; }
.u-block-mb14   { display: block; margin-bottom: 14px; }
.u-grid2-10     { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.u-mt-12        { margin-top: 12px; }
.u-ml-6         { margin-left: 6px; }
.u-h-22         { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.u-flex-0       { flex: 0 0 auto; }
.u-thead-row    { background: var(--bg-subtle); border-bottom: 2px solid var(--line); }
.u-cursor-default { cursor: default; }
.u-help-link        { font-size: 10px; font-weight: 400; color: var(--primary, #3b82f6); margin-left: auto; cursor: pointer; }
.u-help-link-muted  { font-size: 10px; font-weight: 400; color: var(--muted); cursor: pointer; }
/* api-tokens (autokontrol A1): */
.u-mono         { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.u-bd-0         { border: 0; padding: 0; margin: 0; }
.u-bd-success   { border: 1px solid var(--success, #16a34a); }
.u-row-gap-6    { display: inline-flex; align-items: center; gap: 6px; }

/* visibility: */
.u-hidden { display: none !important; }