@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-menu {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav-menu a {
        display: block;
        padding: 0.5rem 0;
    }

    .form-inline {
        grid-template-columns: 1fr;
    }

    .form-inline button {
        grid-column: 1 / -1;
    }

    .dashboard-widgets,
    .admin-widgets {
        grid-template-columns: 1fr;
    }

    table {
        font-size: 0.9rem;
    }

    table th,
    table td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .navbar h1 {
        font-size: 1.2rem;
    }

    .container {
        padding: 0 10px;
    }

    .btn {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}