/* =====================================================
   CLAUX - RESPONSIVE
   ===================================================== */

@media (max-width: 784px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .view-grid {
        grid-template-columns: 1fr;
    }

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

    .env-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    #mainContent {
        padding: 16px;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .app-footer {
        font-size: 0.8125rem;
        flex-direction: column;
        gap: 8px;
        padding: 20px 0;
    }
}