/*
 * Official dashboard layout helpers.
 *
 * Components own their internals.
 * Dashboard page CSS may use these layout helpers to arrange official components.
 */

.ar-dashboard-page {
    display: grid;
    gap: var(--space-5, 1.25rem);
}

.ar-dashboard-page--full {
    width: 100%;
    max-width: none;
}

.ar-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4, 1rem);
    padding: var(--space-5, 1.25rem);
    border: 1px solid var(--color-border, #d0d7de);
    border-radius: var(--radius-lg, 0.625rem);
    background: var(--color-surface, #fff);
}

.ar-dashboard-header__title {
    margin: 0;
    color: var(--color-text, #111827);
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
}

.ar-dashboard-header__subtitle {
    max-width: 48rem;
    margin: 0.5rem 0 0;
    color: var(--color-text-muted, #667085);
    font-size: 0.92rem;
    line-height: 1.45;
}

.ar-dashboard-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-end;
    gap: 0.625rem;
}

.ar-dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(10rem, 1fr));
    gap: var(--space-3, 0.75rem);
    align-items: stretch;
}

.ar-dashboard-kpi-grid--4 {
    grid-template-columns: repeat(4, minmax(12rem, 1fr));
}

.ar-dashboard-panel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4, 1rem);
    align-items: stretch;
}

.ar-dashboard-panel-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ar-dashboard-section {
    min-width: 0;
    padding: var(--space-5, 1.25rem);
    border: 1px solid var(--color-border, #d0d7de);
    border-radius: var(--radius-lg, 0.625rem);
    background: var(--color-surface, #fff);
}

.ar-dashboard-section__header {
    margin-bottom: var(--space-4, 1rem);
}

.ar-dashboard-section__eyebrow {
    color: var(--color-text-muted, #667085);
    font-size: 0.8rem;
}

.ar-dashboard-section__title {
    margin: 0.25rem 0 0;
    color: var(--color-text, #111827);
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 700;
}

.ar-dashboard-section__subtitle {
    margin: 0.35rem 0 0;
    color: var(--color-text-muted, #667085);
    font-size: 0.875rem;
    line-height: 1.45;
}

[dir="rtl"] .ar-dashboard-header {
    direction: rtl;
}

[dir="rtl"] .ar-dashboard-header__actions {
    direction: ltr;
}

@media (max-width: 1400px) {
    .ar-dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ar-dashboard-panel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .ar-dashboard-kpi-grid--4,
    .ar-dashboard-panel-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .ar-dashboard-header,
    .ar-dashboard-header__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ar-dashboard-kpi-grid,
    .ar-dashboard-kpi-grid--4,
    .ar-dashboard-panel-grid,
    .ar-dashboard-panel-grid--2 {
        grid-template-columns: 1fr;
    }
}