/* ============================================================================
   css/components/utilities.css — Small Reusable Utility Classes (v1)
   ----------------------------------------------------------------------------
   Single-purpose helper classes meant to be composed onto markup instead
   of writing one-off inline styles. Includes the original 44x44 touch-
   target helpers plus new helpers added during the CSS refactor to absorb
   the most-repeated inline styles found in category.html / student.html /
   settings.html (see CHANGELOG note in repo root for the audit).
   Load this file LAST (after app.css) so its rules win on specificity ties.
   ============================================================================ */

/* ══════════════════════════════════════════════
   TOUCH TARGETS — shared utility classes
   ──────────────────────────────────────────────
   WCAG 2.5.5 (AA-adjacent best practice): every clickable
   element should resolve to a minimum 44×44px hit area.
   These utilities expand the *hit area* via padding/min-size
   without changing the visible icon/glyph size, so existing
   visual density is preserved. Apply by adding the class to
   the element — no other markup changes required.
══════════════════════════════════════════════ */

/* Bootstrap 4's default .close button (modal-header dismiss
   '×') renders ~32-40px depending on padding/line-height
   context, under the 44px target. Same pseudo-element pattern
   as .tap-target-icon: expands only the hit area, leaving the
   glyph's visible size/position (and Bootstrap's existing
   layout/spacing) completely untouched. Global rule — applies
   to every modal across the app with no markup changes. */
.close {
  position: relative;
  touch-action: manipulation;
}
.close::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.tap-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

/* Variant: small icon-only glyphs (card action icons, modal
   close buttons, back buttons). Expands the *clickable* area
   via an absolutely-positioned ::before pseudo-element so the
   visible icon's size/position/spacing is completely
   unaffected — no layout shift, no row-height growth. The
   pseudo-element is transparent and sits behind the icon;
   clicks anywhere in its bounds still resolve to the icon
   itself since ::before is part of the same element's box for
   hit-testing purposes.
   Use on isolated icons (plenty of surrounding space): full
   44×44 hit area. */
.tap-target-icon {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.tap-target-icon::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Use on icons packed tightly in a row (e.g. info/edit/delete
   sitting ~12px apart on a student/category card) where a full
   44px-wide hit zone on each would overlap its neighbor and
   risk mis-taps. Maximizes height (unconstrained — no sibling
   above/below) to 44px while capping width so adjacent hit
   zones meet edge-to-edge rather than overlap. This is a
   deliberate, documented compromise: see audit notes for the
   remaining gap on the horizontal axis. */
.tap-target-icon--clustered::before {
  width: 28px;
  height: 44px;
}

/* Use on small circular/square controls arranged in a wrapping
   row with a consistent gap on both axes (e.g. settings theme
   swatches, 28px circles with 12px gap). Caps the hit area at
   the midpoint between neighbors on every side — the largest
   size achievable without any overlap, given the gap. */
.tap-target-icon--swatch::before {
  width: 40px;
  height: 40px;
}

/* ── Misc single-purpose helpers (pre-existing) ── */
.mt--7 { margin-top: -3.5rem; }

/* ══════════════════════════════════════════════
   NEW — extracted from repeated inline styles
   (category.html, student.html, settings.html, login.html)
   Replacing style="..." with these classes removes ~120 inline-style
   occurrences without changing any visual output.
══════════════════════════════════════════════ */

/* Theme-colored badge/pill text — was:
   style="background-color:var(--app-theme-color);color:aliceblue;font-weight:bolder;"
   (7 occurrences across category.html / student.html) */
.u-theme-badge {
  background-color: var(--app-theme-color);
  color: aliceblue;
  font-weight: bolder;
}

/* Neutral grey badge variant — was:
   style="background-color:#6c757d;color:#fff;font-weight:bolder;" */
.u-muted-badge {
  background-color: #6c757d;
  color: #fff;
  font-weight: bolder;
}

/* Font-weight helpers — were repeated 20+ times as style="font-weight:800;"
   and style="font-weight:500;" */
.u-fw-500 { font-weight: 500; }
.u-fw-800 { font-weight: 800; }
.u-fw-800-lg { font-weight: 800; font-size: large; }

/* Block element with no bottom padding — was:
   style="display:block;padding-bottom:0;" */
.u-block-tight { display: block; padding-bottom: 0; }

/* Full-bleed media wrapper — was: style="width:100%;height:100%;" */
.u-fill { width: 100%; height: 100%; }

/* Common one-off spacing/sizing helpers seen across forms/lists */
.u-w-95 { width: 95%; }
.u-max-w-100 { max-width: 100%; }
.u-no-padding { padding: 0; }
.u-pt-120 { padding-top: 120px; }
.u-mt-8 { margin-top: 8px; }
.u-mb-4rem-imp { margin-bottom: 4rem !important; }
.u-pb-4em-imp-pt-half { padding-bottom: 4em !important; padding-top: 0.5rem; }
.u-overflow-scroll { overflow: scroll; }
.u-hidden { display: none; }
.u-center-padded { justify-content: center; padding: 0.5rem; }
.u-flex-wrap-gap-8 { display: flex; flex-wrap: wrap; gap: 8px; }
.u-text-black-xl { color: black; font-size: xx-large; }
.u-text-navy { color: #181a63; }
.u-border-bottom-grey { border-bottom: solid; border-bottom-color: #dee2e6; }