/* Fix for DataTable columns overlapping in rules.php - CSS Only Solution */

/* Force table to use full width with proper spacing */
.data-table-export {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

/* Ensure proper column widths and text handling */
.data-table-export thead th,
.data-table-export tbody td {
    padding: 12px 10px !important;
    vertical-align: middle !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

/* Set specific column widths to prevent overlap */
/* Column 1: No. */
.data-table-export thead th:nth-child(1),
.data-table-export tbody td:nth-child(1) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    text-align: center !important;
}

/* Column 2: Employee */
.data-table-export thead th:nth-child(2),
.data-table-export tbody td:nth-child(2) {
    width: 220px !important;
    min-width: 220px !important;
}

/* Column 3: Rule Title */
.data-table-export thead th:nth-child(3),
.data-table-export tbody td:nth-child(3) {
    width: 200px !important;
    min-width: 200px !important;
}

/* Column 4: Rule File */
.data-table-export thead th:nth-child(4),
.data-table-export tbody td:nth-child(4) {
    width: 130px !important;
    min-width: 130px !important;
}

/* Column 5: Status */
.data-table-export thead th:nth-child(5),
.data-table-export tbody td:nth-child(5) {
    width: 150px !important;
    min-width: 150px !important;
    text-align: center !important;
}

/* Column 6: Note */
.data-table-export thead th:nth-child(6),
.data-table-export tbody td:nth-child(6) {
    width: auto !important;
    min-width: 150px !important;
}

/* Ensure images don't break layout */
.data-table-export td img.product-image {
    max-width: 35px !important;
    height: 35px !important;
    object-fit: cover !important;
}

/* Ensure employee name container doesn't overflow */
.data-table-export td .d-flex.align-items-center {
    gap: 8px;
    flex-wrap: nowrap;
}

.data-table-export td .d-flex.align-items-center span {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Fix for buttons and badges */
.data-table-export td .btn,
.data-table-export td .badge {
    font-size: 0.85rem !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
}

/* Ensure DataTable wrapper doesn't cause issues */
.dataTables_wrapper {
    width: 100% !important;
    overflow-x: auto !important;
}

/* Style the horizontal scrollbar */
.dataTables_wrapper::-webkit-scrollbar {
    height: 8px;
}

.dataTables_wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb {
    background: #14B8A6;
    border-radius: 4px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb:hover {
    background: #0d9488;
}

/* Prevent responsive buttons from showing */
.dtr-control::before {
    display: none !important;
}

/* Fix table header alignment */
.data-table-export thead th {
    font-weight: 600 !important;
    background-color: #f8f9fa !important;
}