/* Mobile CSS — responsive layout for phones */

@media (max-width: 768px) {
    body { font-size: 13px; }

    .navbar {
        flex-wrap: wrap;
        height: auto;
        padding: 0.5rem;
    }
    .nav-brand { width: 100%; margin-bottom: 0.3rem; }
    .nav-links { overflow-x: auto; flex-wrap: nowrap; }
    .nav-link { padding: 0.3rem 0.5rem; font-size: 12px; white-space: nowrap; }
    .nav-logout { font-size: 12px; }

    .content { padding: 0.75rem; }

    .filters-bar {
        gap: 0.3rem;
    }
    .filters-bar select { font-size: 12px; padding: 0.25rem 0.4rem; }

    .table-wrapper { overflow-x: scroll; -webkit-overflow-scrolling: touch; }
    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 0.3rem 0.4rem; }

    .totals-bar { flex-direction: column; gap: 0.5rem; font-size: 12px; }

    .source-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

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

    .login-card { width: 90%; max-width: 360px; }

    .pagination button { padding: 0.25rem 0.6rem; }
}