/*
 * Small-viewport adjustments. The dashboard previously had zero @media
 * queries and relied entirely on CSS Grid auto-fit to reflow, which left
 * tables overflowing and modals nearly filling narrow screens.
 */

@media (max-width: 768px) {
    body { padding: 12px; }
    .container { max-width: 100%; }

    header { padding: 16px; flex-wrap: wrap; gap: 12px; }

    .modal-content { width: 100%; max-width: 94vw; padding: 18px; }

    .section-card { padding: 16px; }

    th, td { padding: 10px 12px; font-size: 13px; }
}

@media (max-width: 480px) {
    .hero-value { font-size: 32px; }
    .stat-value { font-size: 20px; }
}