.app-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4) var(--spacing-5);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

.date-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.date-buttons .btn {
    flex: 1 1 calc(33.333% - var(--spacing-2));
}

/* Below ~420px, three side-by-side date buttons get cramped (long labels
   like "Next 7 Days" wrapping mid-word) — stack them full-width instead. */
@media (max-width: 420px) {
    .date-buttons .btn {
        flex: 1 1 100%;
    }
}

@media (min-width: 768px) {
    .app-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "location date"
            "dashboard dashboard"
            "charts charts";
    }

    #location-panel { grid-area: location; }
    #date-panel { grid-area: date; }
    #dashboard { grid-area: dashboard; }
    #charts { grid-area: charts; }
}

@media (min-width: 1200px) {
    .app-grid {
        grid-template-columns: 1fr 1fr;
    }
}