/* Shared table headers and the equivalent controls for mobile/card lists. */
.list-sort-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    max-width: 100%;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.list-sort-label { min-width: 0; }
.list-sort-indicator { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.list-sort-button:hover,
.list-sort-button[data-direction='asc'],
.list-sort-button[data-direction='desc'] { color: var(--brand); }
.list-sort-button[data-direction='asc'] .list-sort-indicator,
.list-sort-button[data-direction='desc'] .list-sort-indicator { color: currentColor; }
.list-sort-button:focus-visible,
.list-sort-controls :is(select, button):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}
.list-sort-controls {
    display: none;
    grid-column: 1 / -1;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    padding: 12px 16px;
    color: var(--text-subtle);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.list-sort-controls-always { display: flex; }
.list-sort-controls label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}
.list-sort-controls select,
.list-sort-controls .list-sort-direction {
    width: auto;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-size: 12px;
}
.list-sort-controls .list-sort-direction { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.list-sort-controls .list-sort-direction:hover { background: var(--surface-soft); border-color: var(--brand); }
.list-sort-controls .list-sort-direction:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
    .list-sort-controls { display: flex; padding: 12px; }
    .list-sort-controls label { flex: 1 1 160px; }
    .list-sort-controls select { flex: 1 1 0; min-width: 0; }
    .list-sort-controls .list-sort-direction { min-height: 44px; }
    .list-sort-button { min-height: 44px; }
}

@media (max-width: 820px) {
    .settings-list-scroll > .list-sort-controls { display: flex; }
}