/* ============================================
   DataTables Responsive & Toolbar Styles
   ============================================ */

/* --- General Desktop Toolbar Refinements (Non-Hijacking) --- */

/* Search Wrapper with Icon */
.dt-search {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.dt-search:before {
    content: "\f002"; /* font-awesome search icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 12px;
    color: #a3a1a5;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 5;
}

.dt-search input {
    padding-left: 2.25rem !important;
    border-radius: 0.375rem !important;
    background-color: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    height: 38px !important;
    width: 200px !important;
    transition: all 0.2s ease-in-out;
}

.dark-style .dt-search input {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cfd3ec !important;
}

.dt-search input:focus {
    width: 250px !important;
    border-color: #7367f0 !important;
    box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.1) !important;
}

/* Align Action Buttons */
.dt-action-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Length Menu Styles */
.dt-length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-weight: 400;
}

.dt-length select {
    width: auto !important;
    display: inline-block !important;
}

/* Toolbar Spacing */
.dataTables_wrapper .row:first-child {
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Mobile Only Styles (max-width: 767.98px) */
@media (max-width: 767.98px) {
    
    /* DataTable Wrapper Layout */
    .dataTables_wrapper {
        padding: 0.25rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Target the layout cells to allow ordering */
    .dt-layout-row {
        display: contents !important;
    }

    .dt-layout-cell {
        padding: 0 !important;
    }

    /* Order of elements on mobile */
    .dt-layout-cell:has(.dt-search) { order: 1; }
    .dt-layout-cell:has(.dt-buttons) { order: 2; }
    .dt-layout-cell.dt-layout-table { order: 3; }
    .dt-layout-cell:has(.dt-length) { order: 4; }
    .dt-layout-cell:has(.dt-info) { order: 5; }
    .dt-layout-cell:has(.dt-paging) { order: 6; }
    
    .card-body {
        padding: 0.5rem !important;
    }
    
    /* Top Toolbar Layout - Row 1: [Length] [Search] */
    .dataTables_wrapper > .row:first-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .dt-length {
  
   
        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        align-items: center;
    }

    .dt-length label {
        justify-content: center;
        width: 100%;
    }
    .dt-length select {
        width: max-content !important;
        display: inline-block !important;
    }

    .dt-search {
        flex: 1 !important;
        margin: 0 !important;
        width: 100% !important;
        order: 1;
    }

    .dt-search input {
        width: 100% !important;
        min-width: 100px !important;
        margin-left: 0rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Top Toolbar Layout - Row 2 (Buttons fallback inside topEnd container) */
    .dt-type-feature {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Buttons Container */
    .dt-buttons {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        margin: 0.25rem 0 0.5rem 0 !important;
        width: 100% !important;
        order: 3; /* Ensure it wraps below length and search if in same container */
    }
    
    .dt-buttons .btn {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
        flex: 1 1 auto !important;
        min-width: fit-content;
        white-space: nowrap;
        margin: 0 !important;
    }
    
    .dt-buttons .btn i {
        font-size: 0.875rem;
    }
    
    /* Hide button text on very small screens, keep icons */
    @media (max-width: 375px) {
        .dt-buttons .btn .d-md-inline-block {
            display: none !important;
        }
    }
    
    /* Search and Length Controls */
    .dataTables_filter,
    .dataTables_length {
        margin-bottom: 0.5rem !important;
    }
    
    /* Info and Pagination - Bottom toolbar */
    .dataTables_info {
        font-size: 0.75rem !important;
        padding: 0.5rem 0 !important;
        text-align: center;
    }
    
    .dataTables_paginate {
        margin-top: 0.75rem !important;
        text-align: center !important;
    }
    
    .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    /* ============================================
       Card-Based Table Rows for Mobile
       ============================================ */
    
    /* Hide table headers and control columns on mobile */
    .table-responsive table thead,
    .table-responsive td.control,
    .table-responsive td.dtr-control,
    .table-responsive th.control,
    .table-responsive th.dtr-control {
        display: none !important;
    }
    
    /* Ensure the table itself doesn't try to hide everything */
    table.dataTable.dtr-column > tbody > tr > td.control:before, 
    table.dataTable.dtr-column > tbody > tr > th.control:before {
        display: none !important;
    }

    /* Make each row a card */
    .table-responsive table,
    .table-responsive tbody,
    .table-responsive tr {
        display: block !important;
        width: 100% !important;
    }
    
    .table-responsive tr {
        margin-bottom: 0.75rem !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 0.5rem !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Theme Support: Dark Style */
    .dark-style .table-responsive tr {
        border-color: rgba(255, 255, 255, 0.1) !important;
        background: #2f3349 !important; /* Dark mode card background */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    
    .table-responsive td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.125rem 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        width: 100% !important;
    }

    .dark-style .table-responsive td {
        border-bottom-color: rgba(255, 255, 255, 0.05) !important;
    }
    
    .table-responsive td:last-child {
        border-bottom: none !important;
    }
    
    /* Add labels before each cell */
    .table-responsive td[data-label]:before {
        content: attr(data-label);
        font-weight: 400;
        font-size: 0.6rem;
        color: #a3a1a5;
        flex: 0 0 35%;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-right: 1px solid rgba(0, 0, 0, 0.055);
        padding: 0.25rem 0.5rem;
        width: max-content;
        margin-right: 0.5rem;
    }

    .dark-style .table-responsive td[data-label]:before {
        border-right-color: rgba(255, 255, 255, 0.1);
        color: #7983bb;
    }
    
    .table-responsive td[data-label] > * {
        flex: 1;
        text-align: right;
        display: flex;
        justify-content: center;
    }

    /* Handle cells without data-label (e.g. control columns) */
    .table-responsive td:not([data-label]) {
        justify-content: center !important;
        padding: 0.75rem !important;
        background: rgba(0,0,0,0.02);
        border-radius: 0.5rem;
    }

    .dark-style .table-responsive td:not([data-label]) {
        background: rgba(255, 255, 255, 0.03);
    }
    
    /* Action buttons in cards */
    .table-responsive td .btn-group,
    .table-responsive td .dropdown {
        display: flex;
        justify-content: flex-end;
        gap: 0.25rem;
    }
}

/* Tablet refinements */
@media (min-width: 768px) and (max-width: 991.98px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix for DataTables Responsive Modal being covered by navbar and sidebar */
.dtr-modal {
    z-index: 9999 !important;
}

.dtr-modal-display {
    z-index: 10000 !important;
}

.dtr-modal-overlay {
    z-index: 9998 !important;
}