/* ============================================================
   Gaya Responsif - Sistem Pengurusan Projek MDK
   Hanya aktif pada skrin kecil (telefon & tablet).
   Paparan komputer tidak terjejas.
   ============================================================ */

@media (max-width: 768px) {

    /* kurangkan padding badan pada telefon */
    body {
        padding: 12px !important;
    }

    /* bekas jadi anjal - tidak lagi lebar tetap */
    .bekas {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* jadual boleh skrol mendatar dengan kemas */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* borang berbilang lajur jadi menegak (satu lajur) */
    .baris {
        grid-template-columns: 1fr !important;
    }

    /* kad ringkasan jadi lebih rapat */
    .kad-baris,
    .jenis-baris {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    }

    /* menu atas membalut dengan kemas */
    .menu-baris {
        gap: 6px !important;
    }
    .menu-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* butang & pautan lebih besar untuk sentuhan jari */
    button,
    .btn,
    .menu-btn {
        min-height: 42px !important;
    }

    /* borang carian jadi menegak pada telefon */
    .cari-borang {
        flex-wrap: wrap !important;
    }
    .cari-borang input {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* tajuk sedikit lebih kecil supaya muat */
    .tajuk {
        font-size: 19px !important;
    }

    /* bahagian atas kanan (log masuk info) turun ke bawah */
    .atas-kanan {
        text-align: left !important;
        margin-top: 10px !important;
    }
}

/* tablet - saiz pertengahan */
@media (min-width: 769px) and (max-width: 1024px) {
    .bekas {
        max-width: 100% !important;
        padding: 0 12px !important;
    }
}