/* =============================================================================
   data-table.css
   Shared styles for the reusable DataTable component (data-table.js).
   Applies to any table using the DataTable class conventions.
   ============================================================================= */

/* --- Sortable column headers --- */
.sortable-header {
    cursor: pointer;
    position: relative;
    padding-right: 1.8rem !important;
    user-select: none;
    transition: background-color 0.2s;
}

.sortable-header:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Default: double-arrow icon indicating the column is sortable */
.sortable-header::after {
    content: '\21C5';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    opacity: 0.5;
    font-size: 0.9em;
}

/* Active ascending sort */
.sortable-header.asc::after {
    content: '\2191';
    color: #495057;
    opacity: 1;
    font-weight: bold;
}

/* Active descending sort */
.sortable-header.desc::after {
    content: '\2193';
    color: #495057;
    opacity: 1;
    font-weight: bold;
}

/* --- Top controls bar (search + length selector + info) --- */
.dt-controls {
    background-color: #f8f9fa;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* --- Pagination active page colour (matches Skote primary) --- */
.pagination .page-item.active .page-link {
    background-color: #556ee6;
    border-color: #556ee6;
}

/* --- Dark mode --- */
[data-bs-theme="dark"] .dt-controls {
    background-color: #2a3042;
    border-color: #32394e !important;
}

[data-bs-theme="dark"] .dt-controls label {
    color: #a6b0cf !important;
}

[data-bs-theme="dark"] .dt-controls .form-select {
    background-color: #2a3042;
    border-color: #3b4261;
    color: #a6b0cf;
}

[data-bs-theme="dark"] .dt-controls .form-select:focus {
    background-color: #2a3042;
    border-color: #556ee6;
    color: #a6b0cf;
}

[data-bs-theme="dark"] .dt-controls .input-group-text {
    background-color: #2a3042 !important;
    border-color: #3b4261;
}

[data-bs-theme="dark"] .dt-controls .input-group-text i {
    color: #a6b0cf;
}

[data-bs-theme="dark"] .dt-controls .form-control {
    background-color: #2a3042;
    border-color: #3b4261;
    color: #a6b0cf;
}

[data-bs-theme="dark"] .dt-controls .form-control:focus {
    background-color: #2a3042;
    border-color: #556ee6;
    color: #a6b0cf;
}

[data-bs-theme="dark"] .dt-controls .form-control::placeholder {
    color: #6a7492;
}

[data-bs-theme="dark"] .dt-controls .text-muted {
    color: #a6b0cf !important;
}

[data-bs-theme="dark"] .dt-controls .text-dark {
    color: #e9ecef !important;
}

[data-bs-theme="dark"] .sortable-header:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .sortable-header::after {
    color: #6a7492;
}

[data-bs-theme="dark"] .sortable-header.asc::after,
[data-bs-theme="dark"] .sortable-header.desc::after {
    color: #a6b0cf;
}