/* ================================================================
   utilities.css — Phase 2A-prep of the SOC 2 CSP roadmap (#1195)
   ----------------------------------------------------------------
   Utility classes used to replace the ~1,351 inline `style="..."`
   attributes in templates. Adding these classes does NOT change
   any rendering on its own; template conversions happen in 2A-1
   through 2A-final.

   Convention: every class is namespaced `u-*` to avoid colliding
   with component classes in components.css. Tokens come from
   main.css custom properties so this file has no hard-coded
   colors or spacing values.
   ================================================================ */

/* ── Display ─────────────────────────────────────────────────────── */
.u-hidden          { display: none !important; }
.u-block           { display: block; }
.u-inline          { display: inline; }
.u-inline-block    { display: inline-block; }
.u-flex            { display: flex; }
.u-inline-flex     { display: inline-flex; }
.u-grid            { display: grid; }

/* ── Flex helpers ────────────────────────────────────────────────── */
.u-flex-shrink-0   { flex-shrink: 0; }
.u-flex-1          { flex: 1; }
.u-flex-wrap       { flex-wrap: wrap; }
.u-flex-col        { flex-direction: column; }

.u-items-center    { align-items: center; }
.u-items-start     { align-items: flex-start; }
.u-items-end       { align-items: flex-end; }

.u-justify-center  { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end     { justify-content: flex-end; }

/* Composite shortcuts for the two most common patterns */
.u-flex-center     { display: flex; align-items: center; justify-content: center; }
.u-flex-between    { display: flex; align-items: center; justify-content: space-between; }
.u-flex-row-center { display: flex; align-items: center; }

/* ── Gap (mapped to --space-N tokens from main.css) ──────────────── */
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }

/* ── Text colors ─────────────────────────────────────────────────── */
.u-text-primary  { color: var(--color-primary); }
.u-text-default  { color: var(--color-text); }
.u-text-muted    { color: var(--color-text-muted); }
.u-text-subtle   { color: var(--color-text-subtle); }
.u-text-success  { color: var(--color-success); }
.u-text-warning  { color: var(--color-warning); }
.u-text-danger   { color: var(--color-danger); }
.u-text-info     { color: var(--color-info); }
.u-text-white    { color: #fff; }

/* ── Text size ───────────────────────────────────────────────────── */
.u-text-xs   { font-size: .7rem; }
.u-text-sm   { font-size: .8125rem; }
.u-text-base { font-size: .9375rem; }
.u-text-lg   { font-size: 1rem; }

/* ── Text weight ─────────────────────────────────────────────────── */
.u-font-normal   { font-weight: 400; }
.u-font-medium   { font-weight: 500; }
.u-font-semibold { font-weight: 600; }
.u-font-bold     { font-weight: 700; }

/* ── Text alignment ──────────────────────────────────────────────── */
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }
.u-text-center { text-align: center; }

/* ── Line height ─────────────────────────────────────────────────── */
.u-leading-tight  { line-height: 1.3; }
.u-leading-normal { line-height: 1.5; }
.u-leading-relax  { line-height: 1.6; }

/* ── Whitespace ──────────────────────────────────────────────────── */
.u-nowrap    { white-space: nowrap; }
.u-pre-wrap  { white-space: pre-wrap; }
.u-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Width / height ──────────────────────────────────────────────── */
.u-w-full  { width: 100%; }
.u-w-auto  { width: auto; }
.u-h-full  { height: 100%; }
.u-h-auto  { height: auto; }

.u-min-w-0 { min-width: 0; }

/* ── Margins (top-only, most common pattern) ─────────────────────── */
.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }

.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }

.u-m-0  { margin: 0; }

/* ── Status dots — the recurring 7×7 and 12×12 pattern ───────────── */
.u-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.u-dot--sm { width: 7px; height: 7px; }
.u-dot--success { background: var(--color-success); }
.u-dot--warning { background: var(--color-warning); }
.u-dot--danger  { background: var(--color-danger); }
.u-dot--info    { background: var(--color-info); }
.u-dot--muted   { background: var(--color-text-muted); }

/* ── Button full-width — captures `width:100%;justify-content:center` ─ */
.u-btn-full {
  width: 100%;
  justify-content: center;
}

/* ── Skeleton loading bar — recurring `height:.875rem;flex:1;border-radius:4px` ─ */
.u-skel-bar {
  height: .875rem;
  flex: 1;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--color-surface-sunken) 0%,
    var(--color-border) 50%,
    var(--color-surface-sunken) 100%
  );
  background-size: 200% 100%;
  animation: u-skel-shimmer 1.4s linear infinite;
}
@keyframes u-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Line clamp ──────────────────────────────────────────────────── */
.u-line-clamp-2,
.u-line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-line-clamp-2 { -webkit-line-clamp: 2; }
.u-line-clamp-3 { -webkit-line-clamp: 3; }

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

/* ── Visibility (keeps layout, vs .u-hidden which removes) ───────── */
.u-invisible { visibility: hidden; }

/* ── Pointer events (used on overlay decorations) ────────────────── */
.u-pe-none { pointer-events: none; }
.u-pe-auto { pointer-events: auto; }

/* ── Position ────────────────────────────────────────────────────── */
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-sticky   { position: sticky; }