/* =========================================
   DataTables + Tailwind Professional Theme
   Unified Global Styles for Paces UI
   ========================================= */

/* Root Variables */
:root {
    --dt-primary: var(--color-primary, #4f46e5);
    --dt-primary-hover: color-mix(in srgb, var(--color-primary, #4f46e5) 85%, black);
    --dt-text: var(--color-default-700, #374151);
    --dt-text-muted: var(--color-default-500, #6b7280);
    --dt-border: var(--color-default-200, #e5e7eb);
    --dt-bg-hover: var(--color-default-50, #f9fafb);
    --dt-radius: 0.375rem;
    --dt-transition: all 0.2s ease-in-out;
}

/* Base Wrapper */
.dataTables_wrapper {
    width: 100%;
    padding: 0;
}

/* Top/Bottom Controls Padding */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: 1rem 1.5rem !important;
    font-size: 0.875rem;
}

/* Info Text */
.dataTables_wrapper .dataTables_info {
    color: var(--dt-text-muted);
    clear: none;
    padding-top: 1rem !important;
}

/* Pagination Container */
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
}

/* Pagination Buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.375rem 0.75rem !important;
    margin-left: 0.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--dt-text) !important;
    background: transparent !important;
    border: 1px solid var(--dt-border) !important;
    border-radius: var(--dt-radius) !important;
    cursor: pointer !important;
    transition: var(--dt-transition) !important;
}

/* Pagination Hover */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: var(--dt-bg-hover) !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-border) !important;
}

/* Pagination Active */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--dt-primary) !important;
    color: #fff !important;
    border-color: var(--dt-primary) !important;
    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--dt-primary) 30%, transparent) !important;
}

/* Pagination Disabled */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    opacity: 0.5;
    cursor: not-allowed !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Hide Default Filter/Length (Custom UI used in headers) */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    display: none !important;
}

/* Table Base Styling */
table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

/* Table Header */
table.dataTable thead th,
table.dataTable thead td {
    padding: 0.75rem 1rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: var(--dt-text-muted) !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--dt-border) !important;
    background-color: var(--color-default-50, #f8fafc) !important;
}

table.dataTable thead th {
    text-align: left;
}

/* Table Body */
table.dataTable tbody td,
table.dataTable tbody th {
    padding: 1rem !important;
    font-size: 0.875rem !important;
    color: var(--dt-text) !important;
    vertical-align: middle !important;
    border-bottom: 1px dashed var(--dt-border) !important;
}

/* Row Hover Effect */
table.dataTable tbody tr {
    background-color: transparent !important;
    transition: background-color 0.15s ease !important;
}

table.dataTable tbody tr:hover {
    background-color: var(--dt-bg-hover) !important;
}

/* Last Row Border Removal */
table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* Sorting Icons Reset & Styling */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important; /* Remove legacy images */
    position: relative !important;
    cursor: pointer !important;
    padding-right: 1.5rem !important;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--dt-text-muted);
    opacity: 0.3;
}

table.dataTable thead .sorting::after {
    content: "\f0dc"; /* fa-sort */
}

table.dataTable thead .sorting_asc::after {
    content: "\f0de"; /* fa-sort-up */
    color: var(--dt-primary);
    opacity: 1;
}

table.dataTable thead .sorting_desc::after {
    content: "\f0dd"; /* fa-sort-down */
    color: var(--dt-primary);
    opacity: 1;
}

/* Empty State / Loading State */
.dataTables_empty {
    padding: 3rem 1rem !important;
    text-align: center !important;
    color: var(--dt-text-muted) !important;
    font-size: 0.875rem !important;
}

/* Responsive Overrides */
@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_info {
        text-align: center !important;
        padding-bottom: 0.5rem !important;
    }
    .dataTables_wrapper .dataTables_paginate {
        justify-content: center !important;
    }
    table.dataTable tbody td {
        padding: 0.75rem !important;
    }
}