/* ==========================================================================
   PERFEX CRM .s_table RESPONSIVE OVERRIDE RESET (PRESERVES HIDDEN COLUMNS)
   ========================================================================== */

@media only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px) {

    /* 1. Reset wrapper container for horizontal scroll */
    .s_table.table-responsive,
    .table-responsive.s_table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0;
        background: transparent;
    }

    /* 2. Re-establish desktop table grid structure */
    .s_table table,
    .s_table.table-responsive table {
        display: table !important;
        width: 100% !important;
        min-width: 700px !important;
        table-layout: auto !important;
        margin-bottom: 15px !important;
    }

    /* 3. Restore Header (only for non-hidden columns) */
    .s_table thead,
    .s_table.table-responsive thead {
        display: table-header-group !important;
    }

    .s_table thead tr,
    .s_table.table-responsive thead tr {
        display: table-row !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
    }

    /* Target th EXCLUDING hidden classes */
    .s_table th:not(.hide):not(.hidden):not(.not_visible):not([style*="display: none"]),
    .s_table.table-responsive th:not(.hide):not(.hidden):not(.not_visible):not([style*="display: none"]) {
        display: table-cell !important;
        white-space: nowrap !important;
        position: static !important;
    }

    /* 4. Restore Rows and Cells (EXCLUDING hidden columns) */
    .s_table tbody,
    .s_table.table-responsive tbody {
        display: table-row-group !important;
    }

    .s_table tr,
    .s_table.table-responsive tr {
        display: table-row !important;
    }

    /* Target td EXCLUDING hidden classes */
    .s_table td:not(.hide):not(.hidden):not(.not_visible):not([style*="display: none"]),
    .s_table.table-responsive td:not(.hide):not(.hidden):not(.not_visible):not([style*="display: none"]),
    .s_table .table.items tbody > tr > td:not(:first-child):not(.hide):not(.hidden):not(.not_visible):not([style*="display: none"]) {
        display: table-cell !important;
        width: auto !important;
        padding-left: 8px !important;
        position: static !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* 5. Explicitly reinforce hidden columns stay hidden */
    .s_table th.hide, .s_table td.hide,
    .s_table th.hidden, .s_table td.hidden,
    .s_table th.not_visible, .s_table td.not_visible,
    .s_table th[style*="display: none"], .s_table td[style*="display: none"] {
        display: none !important;
    }

    /* 6. Disable mobile pseudo-headers (:before) */
    .s_table td:before,
    .s_table.table-responsive td:before {
        content: none !important;
        display: none !important;
    }

    /* 7. Fix form field sizes */
    .s_table table td .form-control,
    .s_table table td input,
    .s_table table td select,
    .s_table table td textarea,
    .s_table table td .bootstrap-select {
        display: block !important;
        width: 100% !important;
        min-width: 120px !important;
        box-sizing: border-box !important;
    }

    .s_table table td input[type="number"],
    .s_table table td input.qty {
        min-width: 65px !important;
    }
}