/* ========================================
   PHASE 3 BATCH 2: EXTRACTED UTILITY CLASSES
   Safe patterns: text styling, flex utilities
   ======================================== */

/* Text: xs muted (12 occurrences) */
.text-xs-muted {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Text: base with margin-bottom (11 occurrences) */
.text-base-mb-3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
}

/* Text: muted color only (6 occurrences) */
.text-muted {
    color: var(--color-text-muted);
}

/* Text: default color only (6 occurrences) */
.text-color {
    color: var(--color-text);
}

/* Text: xs secondary (6 occurrences) */
.text-xs-secondary {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* Text: micro uppercase with mb-1 (6 occurrences) */
.text-micro-uppercase-mb-1 {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

/* Text: micro uppercase with mb-2 (5 occurrences) */
.text-micro-uppercase-mb-2 {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

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

/* Margin bottom: standard (5 occurrences) */
.mb-3 {
    margin-bottom: var(--space-3);
}

/* Font weight: semibold (5 occurrences) */
.font-semibold {
    font-weight: 600;
}

/* Text size: sm (5 occurrences) */
.text-sm-size {
    font-size: var(--text-sm);
}

/* Text: 9px secondary with mt-4px (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-2 (5 occurrences) */
.flex-col-gap-2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

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

/* Card elevated (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 with padding (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: base with mb3 and color (3 occurrences) */
.text-base-mb-3-colored {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

/* Large icons (3 occurrences each) */
.icon-32 {
    font-size: 32px;
}

.icon-24 {
    font-size: 24px;
}

/* Progress bar width: 0% (4 occurrences) */
.w-0 {
    width: 0%;
}

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