/* ── KfDtResponsive — shared generic DataTable mobile styles ──────────────
   Per-table breakpoint/column rules are injected dynamically by kf-dt-responsive.js
   ─────────────────────────────────────────────────────────────────────────── */

/* Table container base */
.table-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
}

/* Word-wrap for all DataTable cells */
table.dataTable td {
    word-wrap: break-word;
    max-width: 200px;
}

/* Action column — stays compact and centred */
table.dataTable tbody td.action-column {
    white-space: nowrap;
    width: 1%;
    text-align: center;
}

/* ── SURGICAL DUPLICATE TOGGLE ELIMINATION ─────────────────────────────────
   Hide ONLY duplicate green circles, preserve legitimate red close buttons
   ─────────────────────────────────────────────────────────────────────────── */

/* Hide the green + button in the expanded details row (the next tr after parent) */
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild.parent + tr td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild.parent + tr th:first-child::before {
    display: none !important;
    content: "" !important;
}

/* Hide green circles on child/detail rows - comprehensive targeting */
table.dataTable.dtr-inline.collapsed > tbody > tr.child > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.child > th:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.child td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.child th:first-child::before {
    display: none !important;
    content: "" !important;
}

/* Hide the green button that appears in the row immediately following any expanded row */
table.dataTable.dtr-inline.collapsed > tbody > tr.parent + tr td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent + tr th:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.gradeX.parent + tr td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.gradeX.parent + tr th:first-child::before {
    display: none !important;
    content: "" !important;
}

/* Universal rule for expanded-once class (tickets.blade.php compatibility) */
table.dataTable.dtr-inline.collapsed > tbody > tr.expanded-once:not(.parent) > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.expanded-once:not(.parent) > th:first-child::before {
    display: none !important;
}

/* Mobile-toggle-active container compatibility */
.mobile-toggle-active table.dataTable.dtr-inline.collapsed > tbody > tr.expanded-once:not(.parent) > td:first-child::before,
.mobile-toggle-active table.dataTable.dtr-inline.collapsed > tbody > tr.expanded-once:not(.parent) > th:first-child::before {
    display: none !important;
}

/* DataTables processing overlay (used when serverSide: true) */
.dataTables_wrapper {
    position: relative;
}
.dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 350px !important;
    height: 60px !important;
    margin-left: -175px !important;
    margin-top: -30px !important;
    padding: 20px 15px !important;
    border: 1px solid #ddd !important;
    text-align: center !important;
    color: #666 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    background-color: white !important;
    box-shadow: 0 2px 8px 2px rgba(0, 0, 0, .15) !important;
    border-radius: 6px !important;
    z-index: 1000 !important;
}

/* Expanded detail row (inline responsive row) */
.dtr-details {
    background-color: #f9f9f9;
}

.dtr-details li {
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 0;
}

.dtr-title {
    font-weight: bold;
    color: #333;
}



/* Mobile form control sizing */
@media (max-width: 480px) {
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.2em 0.5em;
        margin: 0.1em;
        font-size: 11px;
    }

    table.dataTable {
        font-size: 11px;
    }

    .btn-xs {
        padding: 6px 10px;
        font-size: 11px;
        min-width: 45px;
    }
}