/* utilities.css - Helper Classes */

/* Flexbox Layouts */
.flex-row { display: flex; flex-direction: row; }
.flex-column { display: flex; flex-direction: column; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-center { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); }

/* Gaps */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* Grid Layout helpers */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
}

.grid-2-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* Margin and Padding helpers */
.p-0 { padding: 0 !important; }
.p-3 { padding: var(--space-md) !important; }
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: var(--space-xs) !important; }
.mt-2 { margin-top: var(--space-sm) !important; }
.mt-3 { margin-top: var(--space-md) !important; }
.mt-4 { margin-top: var(--space-lg) !important; }
.mt-5 { margin-top: var(--space-xl) !important; }
.mb-1 { margin-bottom: var(--space-xs) !important; }
.mb-2 { margin-bottom: var(--space-sm) !important; }
.mb-3 { margin-bottom: var(--space-md) !important; }
.mb-4 { margin-bottom: var(--space-lg) !important; }

/* Width/Max-width helpers */
.max-w-md { max-width: 450px !important; }
.max-w-lg { max-width: 700px !important; }
.max-w-xl { max-width: 900px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Text color overrides */
.text-gold { color: var(--color-gold) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-success { color: var(--color-success) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }

/* Font weights */
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }

/* General helpers */
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-state {
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.search-form {
    display: flex;
    gap: var(--space-sm);
    flex: 1;
    max-width: 600px;
}
.filter-form select {
    width: 200px;
}