/* =============================================================================
   DEX Portal - Reorderable / sortable table columns

   The small gear above a list table, the drag affordances its headers get in
   edit mode, and the sort arrows. Paired with core/table-columns.js.
   ============================================================================= */

.table-cols-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 var(--gutter);
    margin: 2px 0 -6px;
    min-height: 24px;
}

/* A quiet hint that only shows while arranging. */
.table-cols-bar--editing::before {
    content: 'Drag column headers to reorder';
    margin-right: auto;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

.table-cols-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}

.table-cols-gear:hover {
    background: var(--surface-subtle, #f3f4f6);
    color: var(--text-primary, #0f1115);
}

.table-cols-gear--on {
    background: var(--accent-bg, #e8f0ff);
    border-color: var(--accent, #2f6fed);
    color: var(--accent, #2f6fed);
}

/* ---- edit mode: headers become draggable handles --------------------------- */

.table-cols--editing th[data-col] {
    cursor: grab;
    user-select: none;
    background: var(--surface-subtle, #f3f4f6);
}

.table-cols--editing th[data-col]:active {
    cursor: grabbing;
}

th.table-col--dragging {
    opacity: 0.45;
}

/* Where the dragged column will land. */
th.table-col--drop {
    box-shadow: inset 2px 0 0 var(--accent, #2f6fed);
}

/* ---- sort ------------------------------------------------------------------ */

.table-col--sortable {
    cursor: pointer;
}

.table-col--sortable::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
    opacity: 0.18;
}

.table-col--sorted-asc::after {
    opacity: 0.9;
    border-bottom: 5px solid currentColor;
    border-top: 0;
}

.table-col--sorted-desc::after {
    opacity: 0.9;
    border-top: 5px solid currentColor;
    border-bottom: 0;
}

/* A sortable header stops showing the sort arrow while you are rearranging -
   the click does a different thing then. */
.table-cols--editing .table-col--sortable {
    cursor: grab;
}

.table-cols--editing .table-col--sortable::after {
    opacity: 0;
}