/* ================================================================
   ERP Starz — Shared UI Utilities (erp-utilities.css)
   Semantic replacement classes for the former inline style="" sweep.
   Every rule copies the original inline value verbatim so rendering
   is unchanged. Loaded globally via base.html.twig.
   ================================================================ */

/* ---- Table column widths (shared scale) ------------------------- */
.table-col-width-sm { width: 15%; }
.table-col-width-md { width: 20%; }
.table-col-width-lg { width: 25%; }
.table-col-width-xl { width: 30%; }

/* ---- Exact-value width utilities (columns / fixed elements) ----- */
.u-width-10   { width: 10%; }
.u-width-12   { width: 12%; }
.u-width-14   { width: 14%; }
.u-width-16   { width: 16%; }
.u-width-18   { width: 18%; }
.u-width-24   { width: 24%; }
.u-width-29   { width: 29%; }
.u-width-35   { width: 35%; }
.u-width-40   { width: 40%; }
.u-width-45   { width: 45%; }
.u-width-46   { width: 46%; }
.u-width-65   { width: 65%; }
.u-width-80px  { width: 80px; }
.u-width-90px  { width: 90px; }
.u-width-100px { width: 100px; }
.u-width-110px { width: 110px; }
.u-width-130px { width: 130px; }
.u-width-140px { width: 140px; }
.u-width-150px { width: 150px; }
.u-width-160px { width: 160px; }
.u-width-5rem  { width: 5rem; }
.u-width-6rem  { width: 6rem; }

/* ---- Sizes ------------------------------------------------------ */
.u-height-40px { height: 40px; }
.u-max-width-460px { max-width: 460px; }
.u-max-width-500px { max-width: 500px; }
.u-max-width-560px { max-width: 560px; }
.u-max-width-600px { max-width: 600px; }
.u-max-width-620px { max-width: 620px; }
.u-max-width-640px { max-width: 640px; }
.u-max-width-700px { max-width: 700px; }
.u-max-width-760px { max-width: 760px; }
.u-max-width-960px { max-width: 960px; }
.u-min-width-220px { min-width: 220px; }
.u-min-width-12rem { min-width: 12rem; }
.u-min-width-16rem { min-width: 16rem; }
.u-max-height-560px { max-height: 560px; }

/* ---- Spacing (values with no Bootstrap 5 utility) --------------- */
.u-mt-0-75   { margin-top: 0.75rem; }
.u-mt-1-25   { margin-top: 1.25rem; }
.u-mt-40px   { margin-top: 40px; }
.u-mt-4px    { margin-top: 4px; }
.u-mt-3px    { margin-top: 3px; }
.u-mt-0      { margin-top: 0; }
.u-mt-spacing-3 { margin-top: var(--spacing-3); }
.u-mb-spacing-3 { margin-bottom: var(--spacing-3); }
.u-mb-space-3   { margin-bottom: var(--space-3); }
.u-mb-0-75   { margin-bottom: 0.75rem; }
.u-mb-10px   { margin-bottom: 10px; }
.u-mb-20px   { margin-bottom: 20px; }
.u-mb-6px    { margin-bottom: 6px; }
.u-me-6px    { margin-right: 6px; }
.u-p-20px    { padding: 20px; }
.u-px-spacing-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }

/* ---- Typography -------------------------------------------------- */
.u-text-tiny    { font-size: 10px; }
.u-text-micro   { font-size: 0.5rem; }
.u-text-small   { font-size: 0.85rem; }
.u-text-0-80rem { font-size: 0.80rem; }
.u-text-11px    { font-size: 11px; }
.u-text-12px    { font-size: 12px; }
.u-text-14px    { font-size: 14px; }
.u-text-1-1rem  { font-size: 1.1rem; }
.u-text-1-2em   { font-size: 1.2em; }
.u-text-9pt     { font-size: 9pt; }
.u-text-base    { font-size: var(--font-size-base); }
.u-text-italic  { font-style: italic; }

/* ---- Text colors (verbatim values) ------------------------------- */
.u-text-555     { color: #555; }
.u-text-666     { color: #666; }
.u-text-777     { color: #777; }
.u-text-888     { color: #888; }
.u-text-999     { color: #999; }
.u-text-bbb     { color: #bbb; }
.u-text-4a4a4a  { color: #4a4a4a; }
.u-text-1a1a1a  { color: #1a1a1a; }
.u-text-amber   { color: #e67700; }
.u-text-c00     { color: #c00; }
.u-text-c0392b  { color: #c0392b; }
.u-text-c62828  { color: #c62828; }
.u-text-red     { color: red; }
.u-text-muted-token { color: var(--color-text-muted); }

/* ---- Backgrounds -------------------------------------------------- */
.u-bg-fff5f5  { background: #fff5f5; }
.u-bg-fff8e1  { background: #fff8e1; }
.u-bg-fffbeb  { background: #fffbeb; }
.u-bg-fffbe6  { background: #fffbe6; }
.u-bg-f5f5f5  { background: #f5f5f5; }
.u-bg-f0f4fa  { background: #f0f4fa; }
.u-bg-e8f4fd  { background: #e8f4fd; }
.u-bg-d4edda  { background: #d4edda; }
.u-bg-f8d7da  { background: #f8d7da; }
.u-bg-fff3cd  { background: #fff3cd; }
.u-bg-cce5ff  { background: #cce5ff; }
.u-bg-e2e3e5  { background: #e2e3e5; }

/* ---- Accent borders (4px start border, status boxes) ------------- */
.u-border-left-4 { border-left: 4px solid; }
.u-border-color-dc3545 { border-left-color: #dc3545; }
.u-border-color-ffc107 { border-left-color: #ffc107; }
.u-border-color-e70013 { border-left-color: #e70013; }
.u-border-color-c1272d { border-left-color: #c1272d; }
.u-border-color-007bff { border-left-color: #007bff; }
.u-border-color-28a745 { border-left-color: #28a745; }
.u-border-color-f59e0b { border-left-color: #f59e0b; }

/* ---- Dividers / total rows ---------------------------------------- */
.u-border-top-333 { border-top: 2px solid #333; }
.u-border-top-ddd { border-top: 2px solid #ddd; }
.u-divider-top    { border-top: 1px solid #ddd; padding-top: 1rem; }
.u-border-bottom-eee { border-bottom: 1px solid #eee; }

/* ---- Layout helpers ------------------------------------------------ */
.u-hidden          { display: none; }
.u-overflow-x-auto { overflow-x: auto; }
.u-overflow-y-auto { overflow-y: auto; }
.u-cursor-pointer  { cursor: pointer; }
.u-offscreen       { position: absolute; left: -9999px; }
.u-gap-12px        { gap: 12px; }
.u-gap-20px        { gap: 20px; }
.u-grid-gap-0-35   { display: grid; gap: 0.35rem; }

/* ---- Recurring composite patterns --------------------------------- */
/* Narrow content container for standalone popup pages */
.u-container-narrow { padding: 1rem; max-width: 960px; }
/* Small grey helper text under form fields */
.u-form-hint { font-size: 0.80rem; color: #666; margin-top: 0.5rem; }
/* Grey note text below sections */
.u-note-text { font-size: 0.85rem; color: #4a4a4a; margin-bottom: 0.75rem; }
/* Dark blue section heading inside cards */
.u-section-title { color: #1a3c6e; margin-bottom: 0.5rem; }
/* Empty-state table cell */
.u-table-empty { padding: 20px; text-align: center; color: #888; }
/* Empty-state cell with wider padding */
.u-table-empty-wide { padding: 20px 16px; text-align: center; color: #999; }
/* Empty-state cell with italic hint */
.u-table-empty-italic { padding: 12px; text-align: center; color: #777; font-style: italic; }
/* Inline mini-select (status dropdowns in tables) */
.u-select-inline { width: auto; font-size: 0.8rem; padding: 2px 6px; }
/* Print-oriented meta line */
.u-print-meta { margin-top: 3mm; font-size: 9pt; }
/* Square avatar/icon button */
.u-square-40 { height: 40px; width: 40px; padding: 0; }
/* Rounded thumbnail with cover fit */
.u-thumb-rounded { border-radius: 4px; object-fit: cover; }
/* Indented list-style note */
.u-list-note { padding-left: 1.5rem; line-height: 1.8; }
/* Small chip button */
.u-chip { font-size: 12px; padding: 6px 12px; }