/* table.css */
/* Mengandungi semua gaya khusus untuk jadual roster. */

/* Pembungkus Jadual untuk Skrol */
.roster-wrapper {
    width: 100%;
    overflow-x: auto; /* Membenarkan skrol secara melintang pada skrin kecil */
    margin-bottom: 20px;
}

/* Jadual Roster */
.roster-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    /* `table-layout: fixed;` dialih keluar untuk membenarkan lajur ringkasan lebih fleksibel */
}

.roster-table th, .roster-table td {
    border: 1px solid #dee2e6;
    padding: 10px 8px;
    min-width: 50px; /* Lebar minimum untuk setiap sel tarikh */
    white-space: nowrap; /* Elak teks terpotong */
}

/* Header Jadual */
.roster-table thead {
    background-color: #e9ecef;
}

.roster-table th {
    font-weight: 600;
    color: #495057;
    padding: 12px 8px;
    vertical-align: middle;
}

.roster-table th.staff-header {
    background-color: #34495e;
    color: #ffffff;
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 180px;
}

/* Badan Jadual */
.roster-table td.staff-name {
    font-weight: 500;
    text-align: left;
    background-color: #f8f9fa;
    color: #34495e;
    padding-left: 15px;
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 2px solid #ced4da;
}

/* Gaya untuk sel syif */
.roster-table td {
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.roster-table td:not(.staff-name):not(.summary-cell):hover {
    background-color: #e0e0e0;
}

/* Warna untuk jenis syif */
.shift-P { background-color: #a7f3d0; color: #065f46; } /* Pagi */
.shift-T { background-color: #fde68a; color: #92400e; } /* Tengah Hari */
.shift-M { background-color: #a5b4fc; color: #3730a3; } /* Malam */
.shift-C { background-color: #fecaca; color: #991b1b; } /* Cuti */

/* Gaya hujung minggu */
.weekend {
    background-color: #e9ecef !important;
}

/* Gaya untuk menyerlahkan tarikh hari ini */
.today {
    background-color: #fff3cd !important;
    border: 2px solid #ffc107;
}

/* Lajur Ringkasan (Summary) */
.summary-header {
    background-color: #34495e;
    color: #ffffff;
    min-width: 200px;
}
.summary-cell {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.85em;
    background-color: #f8f9fa;
    white-space: normal;
    cursor: default;
}

/* Lajur Padam (Delete) */
.delete-header {
    background-color: #34495e;
    color: #ffffff;
    min-width: 60px;
}
.delete-cell {
    background-color: #f8f9fa;
    cursor: default;
}

.delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: 1.2em;
    color: #dc3545;
    transition: color 0.2s, transform 0.2s;
}

.delete-btn:hover {
    color: #a71d2a;
    transform: scale(1.2);
}