/* ═══════════════════════════════════════════════════════════════════
   legacy-utils.css

   Extracted from legacy/app-legacy.css 2026-05-26 as part of the
   Option C cleanup. Lines 5772–5836 of the legacy
   file (65 lines).

   The rules are width/sizing/spacing utility classes — wrapped in
   @layer utilities so they sit in the correct cascade tier (later than
   components, so a utility class always wins over a component's
   computed value as utilities are supposed to do).
   ═══════════════════════════════════════════════════════════════════ */

@layer utilities {
/* ============================================
   UTILITIES (merged from admin/utilities.css)
   Common inline-style patterns extracted from views for CSP compliance.
   ============================================ */

/* Width utilities */
.w-24px { width: 24px; }
.w-28px { width: 28px; }
.w-30px { width: 30px; }
.w-100px { width: 100px; }
.w-120px { width: 120px; }
.w-160px { width: 160px; }

/* Max-width utilities */
.mw-100 { max-width: 100%; }
.mw-250px { max-width: 250px; }
.mw-500px { max-width: 500px; }

/* Scrollable containers */
.scrollable-200 { max-height: 200px; overflow-y: auto; }
.scrollable-500 { max-height: 500px; overflow-y: auto; }

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

/* Border accent utilities */
.border-accent-warning { border-left: 3px solid var(--bs-warning); }
.border-accent-success { border-left: 3px solid var(--bs-success); }
.border-accent-danger  { border-left: 3px solid var(--bs-danger); }
.border-accent-info    { border-left: 3px solid var(--bs-info); }
.divider-accent        { border-left: 3px solid var(--bs-secondary); }

/* Flex utilities */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* Gap utilities */
.gap-2px { gap: 2px; }
.gap-4px { gap: 4px; }

/* Text truncation */
.text-truncate-250 {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Form styling */
.form-width-auto { width: auto; }

/* Uptime chart sizing */
.circular-chart-size { width: 80px; height: 80px; }

/* Small label text */
.text-label-small { font-size: 0.7rem; }

/* Uptime progress bar */
.uptime-progress-bar { width: 60px; height: 6px; }

/* MODERNIZATION + PERF cross-cutting rules (text-wrap, hover defenses,
   content-visibility, contain:layout, scrollbar-gutter, @view-transition)
   moved to components/cross-cutting.css 2026-05-25 */

}