/* Mengatasi tampilan di perangkat seluler */
@media screen and (max-width: 768px) {
    .login-container {
        width: 90%;
        padding: 20px;
    }
    
    .card-grid {
        grid-template-columns: 1fr; /* 1 kolom untuk HP */
    }

    table {
        min-width: 600px; /* Force table to have width so it can scroll horizontally */
    }

    .data-card {
        overflow-x: auto; /* Allow scrolling for wide tables */
    }

    .topbar {
        padding: 0 15px;
    }

    .content {
        padding: 15px;
    }
}