/* ==========================================================================
   CM PLATFORM - GLOBAL UTILITY CLASSES
   Atomic helper utilities for flexbox, spacing, alignment, and typography.
   ========================================================================== */

/* --- Flexbox Utilities --- */
.cm-flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.cm-flex-col {
    display: flex;
    flex-direction: column;
}

.cm-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cm-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cm-flex-start {
    display: flex;
    align-items: flex-start;
}

.cm-flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cm-flex-wrap {
    flex-wrap: wrap;
}

/* --- Gap Utilities --- */
.cm-gap-xs { gap: var(--cm-space-xs, 4px); }
.cm-gap-sm { gap: var(--cm-space-sm, 8px); }
.cm-gap-md { gap: var(--cm-space-md, 16px); }
.cm-gap-lg { gap: var(--cm-space-lg, 24px); }

/* --- Typography Helpers --- */
.cm-text-muted {
    color: var(--cm-text-secondary, #94A3B8) !important;
}

.cm-text-primary {
    color: var(--cm-text-primary, #F8FAFC) !important;
}

.cm-text-accent {
    color: var(--cm-accent, #3398DC) !important;
}

.cm-text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Pill & Badge Helpers --- */
.cm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.cm-badge--primary {
    background: var(--cm-accent-muted, rgba(51, 152, 220, 0.15));
    color: var(--cm-accent, #3398DC);
    border: 1px solid var(--cm-accent-glow, rgba(51, 152, 220, 0.3));
}

.cm-badge--info {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.cm-badge--success {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}