/* DataTable Theme Styles */
.dataTables_wrapper {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
}

/* Table Header */
table.dataTable thead th {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-weight-semibold);
}

/* Table Body */
table.dataTable tbody td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

/* Striped Rows */
table.dataTable.stripe tbody tr:nth-of-type(odd) {
    background-color: var(--color-surface-hover);
}

/* Hover State */
table.dataTable.hover tbody tr:hover {
    background-color: var(--color-primary-50);
}

/* Search Input */
.dataTables_filter input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    transition: var(--transition-all);
}

.dataTables_filter input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

/* Length Selection */
.dataTables_length select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    transition: var(--transition-all);
}

.dataTables_length select:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

/* Pagination */
.dataTables_paginate {
    margin-top: var(--space-4);
}

.dataTables_paginate .paginate_button {
    padding: var(--space-2) var(--space-3);
    margin: 0 var(--space-1);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-primary) !important;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: var(--transition-all);
}

.dataTables_paginate .paginate_button:hover {
    background-color: var(--color-primary-50) !important;
    border-color: var(--color-primary);
    color: var(--color-primary) !important;
}

.dataTables_paginate .paginate_button.current {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary);
    color: var(--color-background) !important;
}

.dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Info Text */
.dataTables_info {
    color: var(--color-text-tertiary);
    padding-top: var(--space-4);
}

/* Processing Display */
.dataTables_processing {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
}

/* Sorting Icons */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    opacity: 0.5;
    color: var(--color-text-primary);
}
table.dataTable thead .sorting_asc::after{
    content: "\f0de";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--color-text-primary);
    margin-left: 5px;
}

table.dataTable thead .sorting::after{
    content: "\f0dc";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--color-text-primary);
    margin-left: 5px;
}
table.dataTable thead .sorting_desc::after{
    content: "\f0dd";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--color-text-primary);
    margin-left: 5px;
}

/* Responsive Features */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
    background-color: var(--color-primary);
    border: 2px solid var(--color-background);
}

/* Empty Table State */
.dataTables_empty {
    padding: var(--space-8) !important;
    text-align: center;
    color: var(--color-text-tertiary);
    background-color: var(--color-surface) !important;
}

/* Scrolling */
.dataTables_scrollBody {
    border-bottom: 1px solid var(--color-border);
}

/* Responsive Layout */
@media screen and (max-width: 767px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: left;
        float: none;
        margin-bottom: var(--space-3);
    }
    
    .dataTables_wrapper .dataTables_paginate {
        margin-top: var(--space-3);
    }
}