/* ==========================================================================
   Utility classes that replace inline style attributes (brand rule 9).
   js/core/dom.js (STYLE_CLASSES) maps a widget's `style` option onto these;
   PrimeFlex supplies the rest (w-full, text-center, flex, ml-2, ...).
   ========================================================================== */

/* Widths */
.u-w-5 { width: 5%; }
.u-w-10 { width: 10%; }
.u-w-12 { width: 12%; }
.u-w-15 { width: 15%; }
.u-w-20 { width: 20%; }
.u-w-25 { width: 25%; }
.u-w-28 { width: 28%; }
.u-w-30 { width: 30%; }
.u-w-35 { width: 35%; }
.u-w-45 { width: 45%; }
.u-w-50 { width: 50%; }
.u-w-55 { width: 55%; }
.u-w-60 { width: 60%; }
.u-w-75 { width: 75%; }
.u-w-90 { width: 90%; }
.u-w-32px { width: 32px; }
.u-w-42px { width: 42px; }
.u-w-64px { width: 64px; }
.u-w-100px { width: 100px; }
.u-w-150px { width: 150px; }
.u-w-50rem { width: 50rem; }
.u-minw-0 { min-width: 0; }
.u-minw-full { min-width: 100%; }
.u-minw-700 { min-width: 700px; }
.u-minw-50rem { min-width: 50rem; }
.u-minw-60rem { min-width: 60rem; }
.u-maxw-20px { max-width: 20px; }

/* Heights */
.u-h-250 { height: 250px; }
.u-h-350 { height: 350px; }
.u-h-400 { height: 400px; }
.u-h-480 { height: 480px; }
.u-h-500 { height: 500px; }
.u-h-650 { height: 650px; }
.u-h-750 { height: 750px; }
.u-h-30rem { height: 30rem; }
.u-minh-40 { min-height: 40px; }
.u-minh-350 { min-height: 350px; }
.u-scroll-200 { max-height: 200px; }

/* Offsets (centering a narrowed button in its column) */
.u-ml-5 { margin-left: 5%; }
.u-ml-25 { margin-left: 25%; }
.u-ml-35 { margin-left: 35%; }
.u-ml-20px { margin-left: 20px; }
.u-ml-32px { margin-left: 32px; }
.u-gap-30 { gap: 30px; }
.u-float-right { float: right; }
.u-float-left { float: left; }
.u-top-20 { top: 20px; }
.u-right-60 { right: 60px; }

/* Dialog widths (standard: min(900px, 100vw - 32px)) */
.p-dialog.u-dlg-sm { width: min(600px, calc(100vw - 32px)); }
.p-dialog.u-dlg-md, .p-dialog.u-dlg-lg { width: min(900px, calc(100vw - 32px)); }

/* Compact in-table buttons */
.p-button.u-btn-compact { max-height: 24px; padding: 2px 10px; font-size: 0.88rem; }
.u-icon-btn-xs { width: 1rem; height: 1rem; min-width: 1rem; padding: 0; background: transparent; color: var(--muted); }
.u-bare { padding: 0 !important; border: 0 none; background: transparent; }

.u-spin-fast { animation-duration: 0.5s; }
.text-accent { color: var(--accent); }
.contents { display: contents; }

/* Narrowed buttons go full width once columns collapse */
@media (max-width: 900px) {
  .u-w-90, .u-w-50 { width: 100%; }
  .u-ml-5, .u-ml-25, .u-ml-35 { margin-left: 0; }
}