/* 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
   ============================ */

/* 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: light-dark(#1e293b, #e5e7eb);
}

.dataTables_wrapper .dataTables_filter input {
    background: light-dark(#ffffff, rgba(30,41,59,.35));
    border: 1px solid light-dark(#d1d5db, rgba(148,163,184,.4));
    color: light-dark(#111827, #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: light-dark(#1e293b, #e5e7eb);
}

.dataTables_wrapper .dataTables_length select {
    background: rgba(30,41,59,.35);
    border: 1px solid rgba(148,163,184,.4);
    color: light-dark(#111827, #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: light-dark(#4b5563, #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);
}

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: light-dark(#111827, #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: light-dark(#111827, #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: light-dark(#f1f5f9, rgba(148,163,184,.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;
    }