/* ================================================================
   DTTASA Portal — Utility classes (Phase 1 of style-src hardening)
   --------------------------------------------------------------
   These classes replace the most-repeated `style="..."` attribute
   values across the codebase. Each name uses a `u-` prefix to make
   the utility origin obvious and to avoid collision with semantic
   classes (.glass, .btn, .pip-green, etc.).

   The goal is mechanical: convert `style="display:none;"` →
   `class="u-hide"` etc. across HTML + JS template literals, then
   eventually drop `'unsafe-inline'` from CSP `style-src`.

   Order rule: this file is linked AFTER each page's own CSS so
   utilities can override a page-default same-specificity selector
   (e.g. a base `display:flex` on a container, overridden by adding
   `u-hide`). For colour utilities that would conflict with hover
   states, the page CSS still wins via higher specificity, which is
   what we want.
   ================================================================ */

/* Display */
.u-hide { display: none; }

/* Cursor */
.u-click { cursor: pointer; }

/* Text colour (palette tokens declared in each page's own :root) */
.u-red       { color: var(--red); }
.u-gold      { color: var(--gold); }
.u-gold-hex  { color: #f0c832; }
.u-green     { color: var(--green); }
.u-t1        { color: var(--text); }
.u-t2        { color: var(--t2); }
.u-t3        { color: var(--t3); }

/* Font size */
.u-fs9   { font-size: 9px; }
.u-fs10  { font-size: 10px; }
.u-fs11  { font-size: 11px; }
.u-fs12  { font-size: 12px; }
.u-fs13  { font-size: 13px; }

/* Margin right */
.u-mr-1 { margin-right: 4px; }
.u-mr-2 { margin-right: 5px; }
.u-mr-3 { margin-right: 6px; }
.u-mr-4 { margin-right: 8px; }
.u-mr-5 { margin-right: 10px; }

/* Margin bottom */
.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: 4px; }
.u-mb-2 { margin-bottom: 8px; }
.u-mb-3 { margin-bottom: 10px; }
.u-mb-4 { margin-bottom: 12px; }
.u-mb-5 { margin-bottom: 14px; }
.u-mb-6 { margin-bottom: 16px; }
.u-mb-7 { margin-bottom: 18px; }
.u-mb-8 { margin-bottom: 20px; }

/* Margin top */
.u-mt-1 { margin-top: 2px; }
.u-mt-3 { margin-top: 10px; }
.u-mt-5 { margin-top: 14px; }
.u-mt-6 { margin-top: 16px; }

/* Flex */
.u-flex-1   { flex: 1; }
.u-flex-min { flex: 1; min-width: 0; }

/* Image — square photo as round avatar */
.u-img-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Min-width */
.u-mw-140 { min-width: 140px; }