@import "../../styles/utils/admin_variables.less";

.metricsDashboard {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;

    &__statsGrid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    &__chartsGrid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;

        @media (min-width: 1024px) {
            grid-template-columns: 1fr 2fr;
        }
    }

    &__title {
        font-size: 2.25rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: var(--metricsDashboard-color-title);
    }

    &__subtitle {
        color: var(--metricsDashboard-color-subtitle);
        margin-bottom: 2rem;
    }
}
