/* ==========================================================
   app.css – Legacy compatibility layer
   All design tokens and component styles are now in style.css.
   This file is kept for any third-party or page-specific overrides.
   ========================================================== */

/* DataTables 1.x and 2.x – common select/input styling.
   We use !important because Bootstrap's .form-select / .form-control rules
   that DataTables auto-applies have higher precedence than ours otherwise. */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.dt-container .dt-length select,
.dt-container .dt-search input,
div.dt-length > select.dt-input,
div.dt-search > input.dt-input {
    border: 1px solid var(--border-default) !important;
    border-radius: 6px !important;
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    height: 32px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

/* The length-select needs a CUSTOM chevron because we strip the native one */
.dataTables_wrapper .dataTables_length select,
.dt-container .dt-length select,
div.dt-length > select.dt-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px 12px !important;
    /* Generous right-padding so the chevron NEVER touches the digits */
    padding: 4px 30px 4px 12px !important;
    min-width: 70px;
    cursor: pointer;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] .dt-container .dt-length select,
[data-bs-theme="dark"] div.dt-length > select.dt-input {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important;
}

/* Filter / search input padding (left only, no chevron) */
.dataTables_wrapper .dataTables_filter input,
.dt-container .dt-search input,
div.dt-search > input.dt-input {
    padding: 4px 12px !important;
}

.dataTables_wrapper .dataTables_length,
.dt-container .dt-length,
.dt-length {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.dataTables_wrapper .dataTables_length label,
.dt-container .dt-length label,
.dt-length label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    color: var(--text-secondary);
}

.dataTables_wrapper .dataTables_info {
    color: var(--text-secondary);
    font-size: 12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-primary) !important;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 6px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* Sort icons in DataTables */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-color: var(--bg-subtle);
}