/* media.css */
/* Mengandungi gaya untuk rekaan responsif dan cetakan. */

/* Rekaan Responsif untuk skrin kecil (seperti telefon pintar) */
@media (max-width: 768px) {
    .container {
        padding: 20px;
    }
    
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    header h1 {
        font-size: 1.5em;
    }

    .controls {
        width: 100%;
        justify-content: space-between;
    }

    .select-group {
        flex-basis: 48%; /* Memastikan dua kawalan muat dalam satu baris */
    }

    .actions {
        flex-direction: column;
        gap: 10px;
    }

    button {
        width: 100%;
    }
}

/* Gaya khas untuk Cetakan */
@media print {
    body {
        padding: 0;
        background-color: #fff;
    }

    .container {
        box-shadow: none;
        padding: 0;
        max-width: 100%;
    }

    header h1 {
        font-size: 16pt;
    }

    /* Sembunyikan elemen yang tidak perlu dicetak */
    .controls, .actions, footer {
        display: none;
    }
    
    /* Sembunyikan lajur Ringkasan dan Padam semasa mencetak */
    .summary-header, .summary-cell,
    .delete-header, .delete-cell {
        display: none;
    }

    .roster-wrapper {
        overflow: visible; /* Tunjukkan semua kandungan jadual semasa mencetak */
    }

    .roster-table th, .roster-table td {
        font-size: 9pt;
        padding: 6px 4px;
    }

    /* Buang kedudukan 'sticky' untuk memastikan ia kelihatan betul pada cetakan */
    .roster-table th.staff-header, .roster-table td.staff-name {
        position: static;
    }
    
    /* Buang penyerlahan tarikh hari ini semasa mencetak */
    .today {
        background-color: transparent !important;
        border: 1px solid #dee2e6;
    }
}