/* ═══════════════════════════════════════════════════════════════════════
   UTILITY CLASSES — generadas por refactoring (v8)
   ═══════════════════════════════════════════════════════════════════════ */

/* Flexbox */
.d-flex          { display: flex; }
.d-flex.ai-c     { align-items: center; }
.d-flex.jc-c     { justify-content: center; }
.d-flex.fw       { flex-wrap: wrap; }
.d-flex.g4       { gap: 4px; }
.d-flex.g6       { gap: 6px; }
.d-flex.g8       { gap: 8px; }
.d-flex.g10      { gap: 10px; }
.d-flex.g12      { gap: 12px; }
.d-flex.g16      { gap: 16px; }
.flex-1          { flex: 1; min-width: 0; }
.flex-none       { flex-shrink: 0; }
.mt-auto         { margin-top: auto; }
.m0              { margin: 0; }
.p0              { padding: 0; }

/* Text utilities */
.text-ellipsis   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-xs         { font-size: .72rem; }
.text-sm         { font-size: .82rem; }
.text-base       { font-size: .88rem; }
.text-bold       { font-weight: 700; }
.text-bolder     { font-weight: 800; }
.muted           { color: var(--n400, #9BA3B0); }
.text-orange     { color: var(--orange, #E87800); }
.text-danger     { color: #ef4444; }
.text-success    { color: #16a34a; }
.text-center     { text-align: center; }

/* Display */
.hidden          { display: none !important; }
.sr-only         { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* Spacing */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.p-8   { padding: 8px; }
.p-12  { padding: 12px; }
.p-16  { padding: 16px; }

/* Borders / Radius */
.radius-sm  { border-radius: 6px; }
.radius     { border-radius: 10px; }
.radius-lg  { border-radius: 16px; }
.radius-xl  { border-radius: 24px; }
.radius-full{ border-radius: 99px; }

/* Surface */
.surface    { background: var(--surface, #fff); }
.surface-2  { background: var(--n50, #F6F8FA); }
.border     { border: 1.5px solid var(--border, #E2E5EC); }

/* Width */
.w-full  { width: 100%; }
.w-auto  { width: auto; }

/* Extended utility classes — v10 additions */
.d-col        { display: flex; flex-direction: column; }
.d-col.g4     { gap: 4px; }
.d-col.g6     { gap: 6px; }
.d-col.g8     { gap: 8px; }
.d-col.g12    { gap: 12px; }
.d-col.g16    { gap: 16px; }
.d-flex.g14   { gap: 14px; }
.d-flex.g20   { gap: 20px; }
.d-flex.g24   { gap: 24px; }
.jc-sb        { justify-content: space-between; }
.jc-end       { justify-content: flex-end; }

/* Font utilities */
.ff-display   { font-family: var(--f-display, 'Sora', sans-serif); }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }
.fw-800       { font-weight: 800; }
.fw-900       { font-weight: 900; }
.text-default { color: var(--text); }
.text-muted   { color: var(--n500); }
.text-dark    { color: var(--n600); }
.text-lg      { font-size: 1rem; }
.text-base    { font-size: .9rem; }
.text-sm      { font-size: .82rem; }
.text-xs      { font-size: .72rem; }

/* Extra spacing */
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-24 { margin-bottom: 24px; }

/* Misc */
.text-left       { text-align: left; }
.opacity-50      { opacity: .5; }
.opacity-70      { opacity: .7; }
.cursor-pointer  { cursor: pointer; }
.radius-circle   { border-radius: 50%; }
.no-wrap         { white-space: nowrap; }

/* Combos */
.ff-display.fw-800, h1.ff-display { font-family: var(--f-display); font-weight: 800; }
.text-sm.muted   { font-size: .82rem; color: var(--n500); }
.text-xs.muted   { font-size: .72rem; color: var(--n500); }
.fw-800.text-default { font-weight: 800; color: var(--text); }

/* Extra admin utility classes */
.icon-inline    { vertical-align: -2px; margin-right: 4px; }
.col-span-2     { grid-column: span 2; }
.font-mono      { font-family: monospace; }
.overflow-x-auto{ overflow-x: auto; }
.mt-3           { margin-top: 3px; }
.mb-10          { margin-bottom: 10px; }
.p-16-18        { padding: 16px 18px; }