/* Styling cho bảng chấm công */
#tableContainer {
    margin-top: 15px;
    border: 1px solid #dee2e6;
}

#tableContainer table {
    border-collapse: separate; /* Required for sticky to work perfectly with borders */
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}

#tableContainer th, #tableContainer td {
    border: 1px solid #dee2e6;
    padding: 0.25rem 0.5rem;
    text-align: center;
    vertical-align: middle;
    font-size: 0.85rem;
}

#tableContainer thead th {
    background-color: #f4f6f9;
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: bold;
    white-space: pre-wrap; /* Cho phép tự động ngắt dòng */
    word-wrap: break-word;
    max-width: 120px; /* Hạn chế chiều rộng tối đa để ngắt dòng hiệu quả */
}

/* Các cột cố định (A, B, C) */
#tableContainer th:nth-child(-n+3),
#tableContainer td:nth-child(-n+3) {
    position: sticky;
    left: 0;
    background-color: #f9fbfd;
    z-index: 5;
}

/* Fix z-index for intersection of sticky row and sticky column */
#tableContainer thead th:nth-child(-n+3) {
    z-index: 15;
}

/* Ô nhập ngày công */
#tableContainer td.cell-day {
    cursor: pointer;
    min-width: 45px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

#tableContainer td.cell-day:hover {
    background-color: #e2e6ea;
}

/* Nút ký hiệu trong Modal */
.btn-kyhieu {
    width: 60px;
    font-weight: 500;
}

/* Màu xanh khi đã chọn */
.btn-kyhieu.selected {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.gap-2 {
    gap: 0.5rem;
}