/**
 * DataTables Dark Mode Styles
 * Based on DataTables CSS structure to ensure proper specificity
 */

/* Layout: Keep length and search controls on one line - override responsive breakpoint */
div.dt-container div.dt-layout-row {
    display: flex !important;
    flex-wrap: nowrap !important;
}

div.dt-container div.dt-layout-row div.dt-layout-cell {
    display: flex !important;
}

div.dt-container .dt-layout-start,
div.dt-container .dt-layout-end {
    display: flex;
    align-items: center;
}

/* Keep length selector inline */
div.dt-container .dt-length {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

div.dt-container .dt-length label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
    margin: 0 !important;
}

/* Keep search inline */
div.dt-container .dt-search {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    /* Remove border from pagination nav */
    div.dt-paging nav {
        border-bottom: none !important;
    }

    /* Search input */
    div.dt-container .dt-search input {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }

    div.dt-container .dt-search input:focus {
        background-color: #333;
        border-color: #666;
        outline: none;
    }

    /* Length selector dropdown */
    div.dt-container .dt-length select.dt-input,
    div.dt-container select.dt-input {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }

    div.dt-container .dt-length select.dt-input:hover,
    div.dt-container select.dt-input:hover {
        border-color: #666;
    }

    div.dt-container .dt-length select.dt-input:focus,
    div.dt-container select.dt-input:focus {
        background-color: #333;
        border-color: #777;
        outline: none;
    }

    div.dt-container .dt-length select.dt-input option,
    div.dt-container select.dt-input option {
        background-color: #2a2a2a;
        color: #e0e0e0;
    }

    /* Pagination buttons */
    div.dt-container .dt-paging .dt-paging-button {
        background-color: #2a2a2a !important;
        background: #2a2a2a !important;
        color: #e0e0e0 !important;
        border: 1px solid #444 !important;
    }

    div.dt-container .dt-paging .dt-paging-button.current,
    div.dt-container .dt-paging .dt-paging-button.current:hover {
        border-color: #666 !important;
        background-color: #444 !important;
        background: #444 !important;
        color: #fff !important;
    }

    div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
        color: #e0e0e0 !important;
        border-color: #666 !important;
        background-color: #3a3a3a !important;
        background: #3a3a3a !important;
    }

    div.dt-container .dt-paging .dt-paging-button.disabled:hover {
        color: #666 !important;
        background-color: transparent !important;
        background: transparent !important;
        border-color: #444 !important;
        cursor: default !important;
    }

    div.dt-container .dt-paging .dt-paging-button:active:not(.disabled) {
        background-color: #2a2a2a !important;
        background: #2a2a2a !important;
    }

    div.dt-container .dt-paging .dt-paging-button.disabled {
        color: #666 !important;
        background-color: transparent !important;
        background: transparent !important;
        border-color: #444 !important;
    }

    /* Info text */
    div.dt-container .dt-info {
        color: #b0b0b0;
    }

    /* Table styling */
    table.dataTable {
        color: #e0e0e0;
    }

    table.dataTable > thead > tr > th,
    table.dataTable > thead > tr > td {
        background-color: #1a1a1a;
        color: #e0e0e0;
        border-bottom-color: #444;
    }

    table.dataTable > thead > tr > th:hover,
    table.dataTable > thead > tr > td:hover {
        background-color: #222;
    }

    table.dataTable > tbody > tr {
        background-color: #1a1a1a;
    }

    table.dataTable > tbody > tr:hover {
        background-color: #2a2a2a;
    }

    table.dataTable > tbody > tr > th,
    table.dataTable > tbody > tr > td {
        color: #e0e0e0;
    }

    table.dataTable.row-border > tbody > tr > *,
    table.dataTable.display > tbody > tr > * {
        border-top-color: #333;
    }

    table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
    table.dataTable.display > tbody > tr:nth-child(odd) > * {
        box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.02);
    }

    table.dataTable.hover > tbody > tr:hover > *,
    table.dataTable.display > tbody > tr:hover > * {
        box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.04);
    }

    /* Labels */
    div.dt-container .dt-length label,
    div.dt-container .dt-search label {
        color: #e0e0e0;
    }
}