/* DataTables Custom Styling */
@layer components {
    /* DataTables Wrapper - Keep existing backgrounds, fix text visibility */
    .dataTables_wrapper {
        @apply max-w-full;
    }

    /* DataTables Labels and Text - Make visible on dark backgrounds */
    .dataTables_length label,
    .dt-length label {
        @apply text-white;
    }

    .dataTables_filter label,
    .dt-search label {
        @apply text-white font-medium;
    }

    .dataTables_info,
    .dt-info {
        @apply text-gray-300 text-sm;
    }

    .dataTables_paginate,
    .dt-paging {
        @apply text-gray-300;
    }

    .dataTables_paginate .paginate_button,
    .dt-paging .dt-paging-button {
        @apply text-gray-300 hover:text-white;
    }

    .dataTables_paginate .paginate_button.current,
    .dt-paging .dt-paging-button.current {
        @apply text-blue-400 bg-blue-900/50;
    }

    /* DataTables Inputs - Keep readable with dark text on light background */
    .dataTables_length select,
    .dt-length select,
    .dt-input,
    .dataTables_filter input,
    .dt-search input {
        @apply text-gray-900 bg-white border-gray-300 rounded;
    }

    .dataTables_filter input,
    .dt-search input {
        @apply pl-9 pr-4 py-2 text-sm shadow-sm focus:ring-2 focus:ring-blue-500;
        min-width: 250px;
    }

    /* DataTables Buttons */
    .dt-button {
        @apply px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded text-sm transition-colors;
    }

    .dt-buttons {
        @apply flex gap-2;
    }

    /* Search icon */
    .dataTables_filter::before,
    .dt-search::before {
        content: "";
        @apply absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 bg-no-repeat bg-center opacity-40;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    }

    /* DataTables Main Table - Keep existing styling for table content */
    .dataTable thead th {
        @apply text-gray-900 bg-gray-50;
    }

    .dataTable tbody td {
        @apply text-gray-900;
    }

    .dataTable tbody tr.odd {
        @apply bg-white;
    }

    .dataTable tbody tr.even {
        @apply bg-gray-50;
    }

    .dataTable tbody tr:hover {
        @apply bg-gray-100;
    }

    .dataTable a {
        @apply text-blue-600 hover:text-blue-800 hover:underline;
    }

    /* Sorting Headers */
    .dataTable thead th.sorting,
    .dataTable thead th.sorting_asc,
    .dataTable thead th.sorting_desc {
        @apply text-gray-900 cursor-pointer;
    }

    .dataTable thead th.sorting:hover,
    .dataTable thead th.sorting_asc:hover,
    .dataTable thead th.sorting_desc:hover {
        @apply bg-gray-100;
    }
}

@layer utilities {
    /* Custom scrollbar styling */
    .dataTables_wrapper .dataTables_scroll {
        margin-bottom: 0.5em;
    }

    .dataTables_scrollBody::-webkit-scrollbar {
        height: 10px;
        width: 10px;
    }

    .dataTables_scrollBody::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .dataTables_scrollBody::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }

    .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
        background: #666;
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
        .dataTables_filter input,
        .dt-search input {
            min-width: 200px;
        }

        table.dataTable {
            margin: 0 !important;
        }

        .dataTables_wrapper {
            padding: 0 !important;
            width: 100% !important;
        }

        .dataTables_scrollBody {
            width: 100% !important;
        }

        .dataTables_scrollHeadInner {
            width: 100% !important;
        }

        .dataTables_scrollHeadInner table {
            width: 100% !important;
        }

        .dataTables_wrapper .dt-buttons {
            margin: 0.5rem !important;
        }

        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dt-search {
            margin: 0.5rem !important;
        }

        table.dataTable td,
        table.dataTable th {
            text-align: center !important;
            vertical-align: middle !important;
        }

        table.dataTable thead>tr>th.dt-orderable-asc,
        table.dataTable thead>tr>th.dt-orderable-desc {
            padding-right: 25px;
            padding-left: 4px !important;
        }

        table.dataTable>tbody>tr>th,
        table.dataTable>tbody>tr>td {
            padding: 4px 2px !important;
        }
    }

    /* Sticky columns and z-index management */
    .sticky {
        background-color: white;
    }

    @media (max-width: 1024px) {
        .sticky.left-0,
        .sticky.left-24 {
            position: static;
        }
    }

    .overflow-auto::-webkit-scrollbar {
        height: 10px;
        width: 10px;
    }

    .overflow-auto::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .overflow-auto::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }

    .overflow-auto::-webkit-scrollbar-thumb:hover {
        background: #666;
    }

    /* Z-index management for sticky elements */
    table.dataTable thead tr>.dtfc-fixed-start {
        z-index: 40 !important;
    }

    .dt-scroll-head {
        z-index: 1 !important;
    }

    .sticky.top-0 {
        z-index: 20 !important;
    }

    /* Sort icon positioning */
    .dt-column-order {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    th.dt-center .dt-column-order {
        justify-content: center;
    }

    td.dt-type-numeric,
    td.dt-type-date {
        text-align: center !important;
    }

    span.dt-column-order {
        right: unset !important;
        margin-left: 5px;
    }

    /* Admin datatable pagination selector */
    select.dt-input {
        padding: 8px 40px 8px 12px !important;
    }
}

/* Additional DataTables specific overrides */
@layer base {
    .dataTables_wrapper {
        .sorting,
        .sorting_asc,
        .sorting_desc {
            @apply text-left text-xs font-medium text-gray-900 uppercase bg-gray-50;
        }

        .dt-center {
            @apply text-center;
        }

        .dt-center .sorting,
        .dt-center .sorting_asc,
        .dt-center .sorting_desc {
            text-align: center !important;
            @apply text-gray-900;
        }

        td {
            @apply text-sm border-b border-gray-200 text-gray-900;
        }

        th {
            @apply sticky top-0 bg-gray-50 border-b-2 border-gray-200 text-gray-900;
        }
    }
}



/*Admin-Only Styles*/
/* Admin-specific DataTables styling - scope to admin pages only */
body.admin .dt-container {
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

/* Additional admin-specific DataTables overrides */
body.admin .dataTables_wrapper {
    @apply text-slate-300;
}

body.admin .dataTables_length label,
body.admin .dt-length label,
body.admin .dataTables_filter label,
body.admin .dt-search label,
body.admin .dataTables_info,
body.admin .dt-info {
    @apply text-slate-300;
}

body.admin .dataTables_paginate,
body.admin .dt-paging {
    @apply text-slate-300;
}

body.admin .dataTables_paginate .paginate_button,
body.admin .dt-paging .dt-paging-button {
    @apply text-slate-300 hover:text-white;
}

body.admin .dataTables_paginate .paginate_button.current,
body.admin .dt-paging .dt-paging-button.current {
    @apply text-blue-400 bg-blue-900/50;
}

/* Add these rules to app/assets/stylesheets/datatables.css at the bottom, after the existing admin styles */

/*Admin-Only Styles - Additional DataTables Dark Theme Overrides*/
/* Admin-specific DataTables floating/sticky header styling for dark theme */
body.admin .dtfh-floatingparent {
    background-color: rgb(30 41 59) !important; /* slate-800 */
}

body.admin .dtfh-floatingparent table.fixedHeader-floating {
    background-color: rgb(30 41 59) !important; /* slate-800 */
}

body.admin .dtfh-floatingparent table.fixedHeader-floating thead th {
    background-color: rgb(30 41 59) !important; /* slate-800 */
    color: rgb(203 213 225) !important; /* slate-300 */
    border-bottom: 2px solid rgb(71 85 105) !important; /* slate-600 */
}

/* Admin DataTables sorting header states for floating headers */
body.admin .fixedHeader-floating .dt-orderable-asc,
body.admin .fixedHeader-floating .dt-orderable-desc {
    background-color: rgb(30 41 59) !important; /* slate-800 */
    color: rgb(203 213 225) !important; /* slate-300 */
}

/* Admin DataTables hover states for floating headers */
body.admin .fixedHeader-floating th:hover {
    background-color: rgb(51 65 85) !important; /* slate-700 */
}

/* Admin DataTables main table styling */
body.admin .dataTable thead th {
    @apply text-slate-300 bg-slate-800 !important;
}

body.admin .dataTable tbody td {
    @apply text-white;
}

body.admin .dataTable tbody tr.odd {
    @apply bg-slate-800;
}

body.admin .dataTable tbody tr.even {
    @apply bg-slate-750;
}

body.admin .dataTable tbody tr:hover {
    @apply bg-slate-700/50;
}

/* Additional admin overall results table styling - add to datatables.css */

/* Ensure overall results table headers match race table styling exactly */
body.admin [data-controller="shared--overall-results"] .dataTable thead th {
    @apply bg-slate-700/50 text-slate-300 px-4 py-3 text-sm font-medium uppercase !important;
}

/* Fix for overall results floating headers to match race tables */
body.admin [data-controller="shared--overall-results"] .dtfh-floatingparent {
    background-color: rgb(51 65 85 / 0.5) !important; /* slate-700/50 */
}

body.admin [data-controller="shared--overall-results"] .dtfh-floatingparent table.fixedHeader-floating {
    background-color: rgb(51 65 85 / 0.5) !important; /* slate-700/50 */
}

body.admin [data-controller="shared--overall-results"] .dtfh-floatingparent table.fixedHeader-floating thead th {
    background-color: rgb(51 65 85 / 0.5) !important; /* slate-700/50 */
    color: rgb(203 213 225) !important; /* slate-300 */
    padding: 12px 16px !important; /* py-3 px-4 */
    font-size: 14px !important; /* text-sm */
    font-weight: 500 !important; /* font-medium */
    text-transform: uppercase !important;
}

/* Admin DataTables sorting header states for floating headers in overall results */
body.admin [data-controller="shared--overall-results"] .fixedHeader-floating .dt-orderable-asc,
body.admin [data-controller="shared--overall-results"] .fixedHeader-floating .dt-orderable-desc {
    background-color: rgb(51 65 85 / 0.5) !important; /* slate-700/50 */
    color: rgb(203 213 225) !important; /* slate-300 */
}

/* Admin DataTables hover states for floating headers in overall results */
body.admin [data-controller="shared--overall-results"] .fixedHeader-floating th:hover {
    background-color: rgb(51 65 85 / 0.7) !important; /* Slightly darker slate-700 */
}

/* Center alignment for race columns */
body.admin [data-controller="shared--overall-results"] .dataTable .dt-head-center {
    text-align: center !important;
}

/* Ensure consistent hover states */
body.admin [data-controller="shared--overall-results"] .dataTable tbody tr:hover {
    @apply bg-slate-700/50;
}



/*datatables gradient*/