/* ldata.table.css
   Styling for:
   - Per-column header menu (⋮)
   - "Columns ▾" dropdown
   - Dark-mode polish for DataTables controls
   - Disabled state for column move actions

   Goals:
   - Match clean light dropdown you showed (white panel, soft shadow, separators)
   - Keep table chrome dark in page
   - Allow items like "Move column left/right" to look disabled if ColReorder is missing
*/

/* ============================
   DataTables global tweaks
   ============================ */

/* DataTables in dark themes
   - Black theme: keep table header/controls truly black.
   - Gray theme: match the site's slate/card palette (avoid pure black). */

html[data-theme="black"] .dataTables_wrapper table.dataTable thead tr {
    background-color: rgba(0,0,0,.78) !important;
}

html[data-theme="gray"] .dataTables_wrapper table.dataTable thead tr {
    background-color: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 78%, var(--ui-bg, #0F172A) 22%) !important;
}

html[data-theme="black"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="black"] .dataTables_wrapper .dataTables_length select,
html[data-theme="black"] .dataTables_wrapper .ldata-filter-row .ldata-col-filter {
    background: rgba(0,0,0,.55) !important;
}

html[data-theme="gray"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="gray"] .dataTables_wrapper .dataTables_length select,
html[data-theme="gray"] .dataTables_wrapper .ldata-filter-row .ldata-col-filter {
    background: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 84%, var(--ui-bg, #0F172A) 16%) !important;
    border-color: color-mix(in srgb, currentColor 16%, transparent) !important;
    color: inherit !important;
}

/* Hide DataTables' built-in buttons toolbar because we trigger them manually */
div.dt-buttons {
    display: none !important;
}

/* Global search (top-right search box from DataTables) */
.dataTables_wrapper .dataTables_filter label {
    color: #e5e7eb;
}

.dataTables_wrapper .dataTables_filter input {
    background: rgba(30,41,59,.35); /* slate-800/35 */
    border: 1px solid rgba(148,163,184,.4); /* slate-400/40 */
    color: #f1f5f9;
    border-radius: .5rem;
    padding: .5rem .75rem;
    outline: none;
}

    .dataTables_wrapper .dataTables_filter input:focus {
        border-color: #2563EB;
        box-shadow: 0 0 0 2px rgba(37,99,235,.35);
    }

/* Page length dropdown ("Show 10 / 25 / ...") */
.dataTables_wrapper .dataTables_length label {
    color: #e5e7eb;
}

.dataTables_wrapper .dataTables_length select {
    background: rgba(30,41,59,.35);
    border: 1px solid rgba(148,163,184,.4);
    color: #f1f5f9;
    border-radius: .5rem;
    padding: .35rem .5rem;
    outline: none;
}

    .dataTables_wrapper .dataTables_length select:focus {
        border-color: #2563EB;
        box-shadow: 0 0 0 2px rgba(37,99,235,.35);
    }

/* Info + borders */
.dataTables_wrapper .dataTables_info {
    color: #cbd5e1;
}

table.dataTable.no-footer {
    border-bottom: 1px solid rgba(148,163,184,.35);
}

table.dataTable thead th,
table.dataTable tfoot th {
    border-bottom: 1px solid rgba(148,163,184,.35);
}

/* Hide default DataTables sort icons (we use custom header UI) */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead th.sorting_asc_disabled:before,
table.dataTable thead th.sorting_asc_disabled:after,
table.dataTable thead th.sorting_desc_disabled:before,
table.dataTable thead th.sorting_desc_disabled:after {
    display: none !important;
    content: none !important;
}

table.dataTable tbody tr {
    background: transparent;
}

/* ============================
   Per-column header menu (⋮)
   ============================ */

/* Floating popup menu that appears when clicking ⋮ in a TH */
.ldata-th-menu {
    position: absolute;
    min-width: 180px;
    background-color: #fff; /* light surface (like your screenshot) */
    color: #0f172a; /* slate-900-ish text */
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .5rem;
    box-shadow: 0 12px 32px -8px rgba(15,23,42,.4), 0 4px 16px -4px rgba(15,23,42,.25);
    padding: .5rem 0;
    font-size: .8rem;
    line-height: 1.2rem;
    z-index: 99999;
}

/* Each row (button/action) inside the ⋮ menu */
.ldata-th-menu-btnrow {
    width: 100%;
    background: transparent;
    border: 0;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .75rem;
    text-align: left;
    font-weight: 400;
    font-size: .8rem;
    line-height: 1.2rem;
    color: #0f172a;
    cursor: pointer;
}

    .ldata-th-menu-btnrow:hover {
        background-color: #f1f5f9; /* slate-100-ish */
    }

/* Small icon block on the left of each row */
.ldata-th-menu-icon {
    width: 1rem;
    flex-shrink: 0;
    font-size: .8rem;
    line-height: 1rem;
    color: #475569; /* slate-600 */
}

/* Text label of the row */
.ldata-th-menu-label {
    flex: 1 1 auto;
    white-space: nowrap;
}

/* Visual "danger" row (Remove column) */
.ldata-th-menu-danger {
    color: #dc2626; /* red-600 */
}

    .ldata-th-menu-danger .ldata-th-menu-icon {
        color: #dc2626;
    }

/* Separator lines between logical groups in the menu */
.ldata-th-menu-sep {
    height: 1px;
    background-color: rgba(0,0,0,.07);
    margin: .25rem 0;
}

/* Disabled rows (e.g. Move column left/right when ColReorder is not loaded) */
.ldata-th-menu-disabled {
    color: #94a3b8 !important; /* slate-400 */
    cursor: not-allowed !important;
    opacity: .5;
}

    .ldata-th-menu-disabled .ldata-th-menu-icon {
        color: #94a3b8 !important;
    }

    .ldata-th-menu-disabled:hover {
        background-color: transparent !important;
    }

/* ============================
   "Columns ▾" dropdown
   (column visibility manager)
   ============================ */

#colvis-menu {
    font-size: .8rem;
    line-height: 1.2rem;
    /* container itself already gets:
       position:absolute; right:0; etc.
       plus dark bg via inline classes in Razor:
       bg-slate-800/95 text-slate-100 rounded-xl ...
    */
}

    /* Each row inside the Columns ▾ dropdown */
    #colvis-menu .ldata-colvis-row {
        border-radius: .4rem;
        color: #f8fafc;
        background: transparent;
        display: flex;
        align-items: flex-start;
        gap: .5rem;
        padding: .5rem .5rem;
        line-height: 1.2rem;
        cursor: pointer;
    }

        #colvis-menu .ldata-colvis-row:hover {
            background: rgba(148,163,184,.15); /* slate-400/15 */
        }

    /* The checkboxes inside the colvis menu */
    #colvis-menu input[type="checkbox"] {
        /* modern browsers will respect accent-color for checkbox fill */
        accent-color: #2563eb; /* blue-600 */
        margin-top: .2rem;
        flex-shrink: 0;
    }