/* MOBILE ONLY */
@media (max-width: 768px) {

    /* Container vertikal */
    .container {
        flex-direction: column !important;
    }

    /* Sidebar full width di atas */
    .sidebar {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        border-right: none !important;
        border-bottom: 1px solid #ddd !important;
    }

    /* Main content full width */
    .main-content {
        width: 100% !important;
        padding: 15px !important;
        border-radius: 0 !important;
    }

    /* Tabel scroll horizontal */
    table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }

    /* Filter form jadi vertikal */
    .filter-form {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Tombol filter dan download full width */
    .filter-form button,
    .btn {
        width: 100% !important;
    }

    /* Header user-info rapi */
    .header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .header .user-info {
        flex-direction: row !important;
        gap: 10px !important;
    }

    /* Teks judul lebih kecil */
    .page-title {
        font-size: 22px !important;
    }
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: Arial, sans-serif;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background: url('https://gudang-basarnas-banten.id/images/BASARNAS.webp') no-repeat center center;
    background-size: cover;
    position: relative;
}

/* Overlay gelap supaya form terbaca */
body::before {
    content:"";
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.5);
    z-index:0;
}

.login-container {
    position: relative;
    z-index:1;
    background: rgba(255,255,255,0.95);
    padding:2rem;
    border-radius:12px;
    width:100%;
    max-width:400px;
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
    border-top: 6px solid #dc2626; /* aksen merah */
}

.logo { text-align:center; margin-bottom:2rem; }
.logo h1 { color:#dc2626; font-size:2rem; margin-bottom:0.5rem; }
.logo p { color:#111827; font-weight:bold; }

.form-group { margin-bottom:1rem; }
label { display:block; margin-bottom:0.5rem; color:#111827; font-weight:bold; }
input[type="text"],
input[type="password"] {
    width:100%;
    padding:0.75rem;
    border:2px solid #dc2626;
    border-radius:8px;
    font-size:1rem;
}
input[type="text"]:focus,
input[type="password"]:focus {
    outline:none;
    border-color:#b91c1c;
    box-shadow:0 0 0 4px rgba(220,38,38,0.2);
}

.btn {
    width:100%;
    padding:0.75rem;
    background:#dc2626;
    color:white;
    border:none;
    border-radius:8px;
    font-size:1rem;
    cursor:pointer;
    font-weight:bold;
    transition: background 0.3s;
}
.btn:hover { background:#b91c1c; }

.error {
    color:#dc2626;
    text-align:center;
    margin-bottom:1rem;
    font-weight:bold;
}

.info { text-align:center; margin-top:1rem; color:#111827; }
.info a { color:#dc2626; font-weight:bold; text-decoration:none; }
.info a:hover { text-decoration:underline; }