/**
 * DataTables Responsive "+" Control — Mobile Only
 *
 * Add class `dtr-mobile-only` to a DataTables table element to:
 *  - Hide the "+" expand icon on desktop (≥ 992px)
 *  - Keep the "+" icon on mobile/tablet (< 992px) so users can still see
 *    hidden columns via the expand detail row.
 *
 * Usage (Razor / HTML):
 *   <table id="myTable" class="table table-hover table-sm w-100 dtr-mobile-only"></table>
 *
 * Pair with DataTables init:
 *   responsive: true
 *
 * IMPLEMENTATION NOTE:
 *   The bundled theme CSS (`wwwroot/css/app.min.css`) injects a "+" icon via:
 *     body .dt-bootstrap5 .dataTable.dtr-inline tr td.dtr-control:before {
 *         content: "+" !important; display: inline-flex !important; ...
 *     }
 *   Our override must match that selector prefix AND have higher specificity +
 *   !important to win cascade. We scope with `body .dt-bootstrap5` exactly.
 */
@media (min-width: 992px) {
    /* Inline mode (default): "+" icon is a :before pseudo on first-cell dtr-control */
    body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only tr td.dtr-control:before,
    body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only tr th.dtr-control:before,
    body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only tr td.dtr-control::before,
    body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only tr th.dtr-control::before,
    /* Expanded row (parent) — arrow pseudo */
    body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only tr.parent td.dtr-control:before,
    body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only tr.parent th.dtr-control:before,
    /* Has-child state (theme variant) */
    body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only tr.dt-hasChild td.dtr-control:before,
    body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only tr.dt-hasChild th.dtr-control:before {
        content: none !important;
        display: none !important;
    }

    /* Column mode (if used): "+" icon in dedicated control column */
    body .dt-bootstrap5 .dataTable.dtr-column.dtr-mobile-only tr td.dtr-control:before,
    body .dt-bootstrap5 .dataTable.dtr-column.dtr-mobile-only tr th.dtr-control:before,
    body .dt-bootstrap5 .dataTable.dtr-column.dtr-mobile-only tr td.control:before,
    body .dt-bootstrap5 .dataTable.dtr-column.dtr-mobile-only tr th.control:before {
        content: none !important;
        display: none !important;
    }

    /* Disable click interaction on the control cell */
    body .dataTable.dtr-mobile-only tr td.dtr-control,
    body .dataTable.dtr-mobile-only tr th.dtr-control,
    body .dataTable.dtr-mobile-only tr td.control,
    body .dataTable.dtr-mobile-only tr th.control {
        cursor: default !important;
        pointer-events: none;
    }
}

/* Di semua ukuran layar: kalau tidak ada kolom yang tersembunyi (plugin tidak
   menambah class `.collapsed` di table), "+" tidak perlu muncul. Template
   tema menampilkan "+" via `!important` tanpa cek `.collapsed`, jadi kita
   override di sini. */
body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only:not(.collapsed) tr td.dtr-control:before,
body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only:not(.collapsed) tr th.dtr-control:before,
body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only:not(.collapsed) tr td.dtr-control::before,
body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only:not(.collapsed) tr th.dtr-control::before {
    content: none !important;
    display: none !important;
}
body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only:not(.collapsed) tr td.dtr-control,
body .dt-bootstrap5 .dataTable.dtr-inline.dtr-mobile-only:not(.collapsed) tr th.dtr-control {
    cursor: default !important;
    pointer-events: none;
}

/* ── dtr-control column: compact size (global) ── */
body .dt-bootstrap5 .dataTable tr td.dtr-control,
body .dt-bootstrap5 .dataTable tr th.dtr-control {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    padding-left: 2px !important;
    padding-right: 0 !important;
}

body .dt-bootstrap5 .dataTable tr td.dtr-control + td,
body .dt-bootstrap5 .dataTable tr th.dtr-control + th {
    padding-left: 4px !important;
}

/* "+" / "-" content + compact size for dtr-column and dtr-inline */
body .dt-bootstrap5 .dataTable.dtr-column tr td.dtr-control::before,
body .dt-bootstrap5 .dataTable.dtr-column tr th.dtr-control::before,
body .dt-bootstrap5 .dataTable.dtr-inline tr td.dtr-control::before,
body .dt-bootstrap5 .dataTable.dtr-inline tr th.dtr-control::before {
    content: '+' !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    font-size: 14px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
}

/* Expanded row: "-" */
body .dt-bootstrap5 .dataTable.dtr-column tr.dt-hasChild td.dtr-control::before,
body .dt-bootstrap5 .dataTable.dtr-column tr.dt-hasChild th.dtr-control::before,
body .dt-bootstrap5 .dataTable.dtr-inline tr.dt-hasChild td.dtr-control::before,
body .dt-bootstrap5 .dataTable.dtr-inline tr.dt-hasChild th.dtr-control::before {
    content: '-' !important;
}