/* ========================================
   PHASE 3 BATCH 3: EXTRACTED UTILITY CLASSES
   Safe patterns: flex layouts, card backgrounds, text styling
   ======================================== */

/* Flex: center alignment with gap and margin (7 occurrences) */
.flex-center-gap-mb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

/* Card: elevated large (6 occurrences) */
.card-elevated-lg {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* Text: center muted padded large (5 occurrences) */
.text-center-muted-padded-lg {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-4);
}

/* Text: 9px secondary with margin (5 occurrences) */
.text-9-secondary-mt {
    font-size: 9px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* Text: 9px muted (5 occurrences) */
.text-9-muted {
    font-size: 9px;
    color: var(--color-text-muted);
}

/* Flex: space-between align-center (5 occurrences) */
.flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Flex: column with gap (5 occurrences) */
.flex-col-gap-2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Card: centered padded (5 occurrences) */
.card-centered-padded {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
}

/* Text: center padded (4 occurrences) */
.text-center-padded {
    text-align: center;
    padding: var(--space-2);
}

/* Max height with scroll (4 occurrences) */
.max-h-200-scroll {
    max-height: 200px;
    overflow-y: auto;
}

/* Fixed height (4 occurrences) */
.h-250 {
    height: 250px;
}

/* Text: center muted small padded (3 occurrences) */
.text-center-muted-sm-padded {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    padding: var(--space-4);
}

/* Text: center muted small (3 occurrences) */
.text-center-muted-sm {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Text: semibold small (3 occurrences) */
.text-semibold-sm {
    font-weight: 600;
    font-size: var(--text-sm);
}

/* Text: small mb-3 colored (3 occurrences) */
.text-sm-mb-3-colored {
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

/* Flex: between with card (3 occurrences) */
.flex-between-card {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

/* Flex: between simple (3 occurrences) */
.flex-between {
    display: flex;
    justify-content: space-between;
}

/* Text: muted small (3 occurrences) */
.text-muted-sm {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Card: medium elevated centered (3 occurrences) */
.card-elevated-md-centered {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    text-align: center;
}

/* Text: center padded with bg (2 occurrences) */
.text-center-padded-bg {
    text-align: center;
    padding: var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

/* Badge: danger pill (2 occurrences) */
.badge-danger {
    padding: 2px 8px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
}

/* Reset margin (2 occurrences) */
.m-0 {
    margin: 0;
}

/* Card: top margin with padding (2 occurrences) */
.card-mt-padded {
    margin-top: var(--space-3);
    padding: var(--space-2);
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

/* Text: xs mt-2 secondary (2 occurrences) */
.text-xs-mt-secondary {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}