/* === Utilities — design system spacing scale ===
   Complementa Tailwind play CDN com gaps/spacings custom (6/10/14/18/22)
   que não estão no scale default. Tailwind cobre 4/8/12/16/24/32 (gap-1..gap-8).
*/

/* gaps fora do scale Tailwind */
.dx-gap-6  { gap: 6px; }
.dx-gap-10 { gap: 10px; }
.dx-gap-14 { gap: 14px; }
.dx-gap-18 { gap: 18px; }
.dx-gap-22 { gap: 22px; }

/* alias dos tokens spacing pra uso semântico */
.dx-gap-s1 { gap: var(--s-1); }
.dx-gap-s2 { gap: var(--s-2); }
.dx-gap-s3 { gap: var(--s-3); }
.dx-gap-s4 { gap: var(--s-4); }
.dx-gap-s5 { gap: var(--s-5); }

/* layout shortcuts (composições muito repetidas) */
.dx-row             { display: flex; flex-direction: row; }
.dx-col             { display: flex; flex-direction: column; }
.dx-row-center      { display: flex; flex-direction: row; align-items: center; }
.dx-row-between     { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.dx-row-end         { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }
.dx-row-start       { display: flex; flex-direction: row; align-items: flex-start; }
.dx-col-start       { display: flex; flex-direction: column; align-items: flex-start; }

/* flex item helpers (Tailwind tem mas reforço aliases curtos) */
.dx-flex-1          { flex: 1; }
.dx-flex-1-min0     { flex: 1; min-width: 0; }
.dx-shrink-0        { flex-shrink: 0; }
.dx-ml-auto         { margin-left: auto; }
.dx-mt-auto         { margin-top: auto; }

/* paddings repetidos em modais */
.dx-pad-modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border-soft); }
.dx-pad-modal-footer { padding: 14px 22px; border-top: 1px solid var(--border-soft); }
.dx-pad-modal-body   { padding: 20px 22px; }

/* dividers / separators verticais comuns */
.dx-vline-20        { width: 1px; height: 20px; background: var(--border); }
.dx-vline-24        { width: 1px; height: 24px; background: var(--border); }

/* full-width row de ações (ex: ações no fim do modal) */
.dx-actions         { display: flex; align-items: center; gap: 8px; }
.dx-actions-end     { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* margins/spacings fora do scale Tailwind */
.dx-mb-2  { margin-bottom: 2px; }
.dx-mb-6  { margin-bottom: 6px; }
.dx-mb-10 { margin-bottom: 10px; }
.dx-mb-14 { margin-bottom: 14px; }
.dx-mb-18 { margin-bottom: 18px; }
.dx-mb-28 { margin-bottom: 28px; }
.dx-mt-2  { margin-top: 2px; }
.dx-mt-6  { margin-top: 6px; }
.dx-mt-14 { margin-top: 14px; }
.dx-mt-18 { margin-top: 18px; }

/* padding patterns recorrentes */
.dx-pad-card        { padding: 22px; }                      /* card padrão */
.dx-pad-card-tight  { padding: 14px; }                      /* card menor */
.dx-pad-canvas      { padding: 32px 40px; }                 /* área de canvas/panel */
.dx-pad-section     { padding: 18px 22px; }                 /* seção dentro de modal */

/* clickable wrappers */
.dx-clickable       { cursor: pointer; }
.dx-card-clickable  { padding: 22px; cursor: pointer; }

/* font-size custom (fora do tailwind default) */
.dx-fs-13 { font-size: 13px; }
.dx-fs-22 { font-size: 22px; }

/* text colors usando tokens */
.dx-text-primary   { color: var(--text-primary); }
.dx-text-body      { color: var(--text-body); }
.dx-text-muted     { color: var(--text-muted); }
.dx-text-subtle    { color: var(--text-subtle); }
.dx-text-accent    { color: var(--primary); }
.dx-text-success   { color: var(--semantic-success); }
.dx-text-warning   { color: var(--semantic-warning); }
.dx-text-danger    { color: var(--semantic-danger); }
.dx-text-info      { color: var(--semantic-info); }

/* ícone de header de modal (recorrente: cor primary + 22px) */
.dx-modal-icon     { color: var(--primary); font-size: 22px; }

/* canvas / panel container (overview, surfaces) */
.dx-canvas         { padding: 32px 40px; max-width: 1280px; margin: 0 auto; }

/* dot-status backgrounds */
.dx-bg-success     { background: var(--semantic-success); }
.dx-bg-warning     { background: var(--semantic-warning); }
.dx-bg-danger      { background: var(--semantic-danger); }
.dx-bg-info        { background: var(--semantic-info); }
.dx-bg-secondary   { background: var(--secondary); color: var(--primary); }

/* button width/justify shortcuts (sidebar action buttons) */
.dx-btn-row        { width: 100%; justify-content: flex-start; }

/* card linha-clicável (12 14 + cursor) — list-tile precursor */
.dx-tile-row       { padding: 12px 14px; cursor: pointer; }

/* common gap+mb combos */
.dx-gap-2-mb-6     { gap: 8px; margin-bottom: 6px; }