/* ============================================
   Reorder kolom (drag header) + sortir kolom (klik header)
   Pasangan dari public/js/table-column-reorder.js & public/js/table-sort.js.

   Berkas ini sengaja dimuat SESUDAH 16-api-key-logs-reseller.css: gaya handle resize
   didefinisikan di sana, dan aturan di bawah menumpang di atasnya (handle tetap menang
   soal kursor karena ia elemen anak sendiri, bukan bagian dari th).
   ============================================ */

/* ---- Reorder: header yang bisa ditarik ---- */

.data-table th.is-col-draggable,
table[data-resize-key] th.is-col-draggable {
    cursor: grab;
    /* Teks header tidak ikut terseleksi saat ditarik — seleksi bikin drag batal di Firefox. */
    -webkit-user-select: none;
    user-select: none;
}

table[data-resize-key] th.is-col-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

/* Indikator posisi jatuh. Sengaja box-shadow inset, bukan pseudo-element: ::after sudah
   dipakai panah sortir dan ::before dipakai handle resize di sebagian tema. */
table[data-resize-key] th.is-drop-before {
    box-shadow: inset 3px 0 0 0 var(--primary-color);
}

table[data-resize-key] th.is-drop-after {
    box-shadow: inset -3px 0 0 0 var(--primary-color);
}

/* Saat drag: kunci kursor & matikan seleksi teks di seluruh halaman. */
body.is-col-reordering {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- Sortir: header yang bisa diklik ---- */

table[data-resize-key] th.is-col-sortable {
    cursor: pointer;
    /* Ruang untuk panah sortir + handle resize (7px) supaya tidak menabrak teks header. */
    padding-right: 26px;
}

table[data-resize-key] th.is-col-sortable:hover {
    /* Header tabel berlatar gelap di kedua tema, jadi sorotannya putih transparan. */
    background-color: rgba(255, 255, 255, 0.08);
}

/* Panah netral: samar saat kolom belum diurutkan, jadi petunjuk bahwa kolom bisa diklik. */
table[data-resize-key] th.is-col-sortable::after {
    content: '\2195';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
    opacity: 0.32;
    pointer-events: none;
    transition: opacity var(--ui-duration) var(--ui-ease);
}

table[data-resize-key] th.is-col-sortable:hover::after {
    opacity: 0.6;
}

table[data-resize-key] th.is-sorted-asc::after {
    content: '\2191';
    opacity: 1;
}

table[data-resize-key] th.is-sorted-desc::after {
    content: '\2193';
    opacity: 1;
}

/* Kolom aktif ditegaskan supaya user tahu tabel sedang tidak dalam urutan aslinya. */
table[data-resize-key] th.is-sorted-asc,
table[data-resize-key] th.is-sorted-desc {
    background-color: rgba(59, 130, 246, 0.22);
}

/* ---- Tombol reset di menu "Pilih Kolom" ---- */

.column-selector-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.column-selector-footer .btn {
    width: 100%;
    justify-content: center;
}

/* Sentuhan layar tidak mengenal hover; panah dibuat selalu terbaca supaya tetap ada petunjuk. */
@media (hover: none) {
    table[data-resize-key] th.is-col-sortable::after {
        opacity: 0.55;
    }
}