/*
 * Utility classes — single home for the small, presentational declarations that
 * used to live in inline `style="…"` attributes across the templates.
 *
 * Inline style attributes are forbidden under the strict CSP (`style-src 'self'`,
 * no 'unsafe-inline'). These classes replace them 1:1, preserving the EXACT
 * legacy values so the refactor is purely structural — no visual change.
 *
 * Prefix `u-` marks a generic, reusable utility and avoids collisions with
 * Bootstrap and module styles. A handful of universal Bootstrap utilities
 * (d-none, w-100, mx-auto, position-relative, text-uppercase, rounded-circle)
 * are reused directly in the templates and are intentionally NOT redefined here.
 *
 * Dynamic values (per-tenant colour, progress width) are NOT here — they are
 * applied via CSSOM by csp-dynamic-style.js (see that file for the rationale).
 */

/* ----- max-width (px) ------------------------------------------------------ */
.u-mw-160 { max-width: 160px; }
.u-mw-180 { max-width: 180px; }
.u-mw-200 { max-width: 200px; }
.u-mw-240 { max-width: 240px; }
.u-mw-300 { max-width: 300px; }
.u-mw-320 { max-width: 320px; }
.u-mw-400 { max-width: 400px; }
.u-mw-420 { max-width: 420px; }
.u-mw-480 { max-width: 480px; }
.u-mw-500 { max-width: 500px; }
.u-mw-520 { max-width: 520px; }
.u-mw-560 { max-width: 560px; }
.u-mw-600 { max-width: 600px; }
.u-mw-720 { max-width: 720px; }

/* ----- width / min-width --------------------------------------------------- */
.u-w-auto  { width: auto; }
.u-w-60    { width: 60px; }
.u-w-90    { width: 90px; }
.u-w-100px { width: 100px; }
.u-w-180   { width: 180px; }
.u-w-20p   { width: 20%; }
.u-w-40p   { width: 40%; }
.u-minw-100 { min-width: 100px; }
.u-minw-120 { min-width: 120px; }

/* ----- height -------------------------------------------------------------- */
.u-h-6  { height: 6px; }
.u-h-32 { height: 32px; }
.u-h-48 { height: 48px; }

/* ----- max-height + overflow ---------------------------------------------- */
.u-mh-40  { max-height: 40px; }
.u-mh-48  { max-height: 48px; }
.u-mh-80  { max-height: 80px; }
.u-mh-200 { max-height: 200px; }
.u-mh-400 { max-height: 400px; }
.u-oy-auto { overflow-y: auto; }
.u-o-auto  { overflow: auto; }

/* ----- font-size ----------------------------------------------------------- */
.u-fs-6  { font-size: .6rem; }
.u-fs-7  { font-size: .7rem; }
.u-fs-75 { font-size: .75rem; }
.u-fs-3r { font-size: 3rem; }

/* ----- misc presentational ------------------------------------------------- */
.u-cursor-pointer { cursor: pointer; }
.u-ws-pre-wrap    { white-space: pre-wrap; }
.u-object-cover   { object-fit: cover; }
.u-img-pixelated  { image-rendering: pixelated; }
.u-muted-disabled { opacity: .5; pointer-events: none; }

/* Small persona colour swatch — fixed box; the colour is applied via
 * data-csp-bg (csp-dynamic-style.js). */
.u-swatch-xs {
  width: 20px;
  height: 20px;
  font-size: .6rem;
}

/* Impersonation banner — full-width danger bar pinned above the shell. */
.impersonation-banner {
  background-color: #dc3545;
  color: #fff;
  border: none;
  position: relative;
  z-index: 1100;
}