{{-- 
    DataTable v3.5 — Full Feature Blade Component
    Path: resources/views/components/datatable.blade.php
    
    Base CSS: v2.3 (tested & stable)
    v3.0: Column visibility, Quick filters, Summary, StatusToggle, Progress, Avatar, Dry run, Print
    v3.1: Mobile responsive fix — compact toolbar, inline buttons, reduced padding, error report link
    v3.2: Auto-collapsible external filters on mobile — [data-dt-filter] elements get toggle panel
    v3.3: Export Modal — replaces dropdown with modal (like Import), fixes mobile overflow
    v3.4: Import loading overlay + JSON parse error fix ("Unexpected token '<'")
          - Shows spinner + row count progress text while file uploads/processes
          - fetch handler checks Content-Type before .json() — graceful error when
            server returns HTML (memory exhaustion, PHP crash, nginx 504, etc.)
          - submitBtn states: Uploading… → Processing… → done
    v3.5: Batch export via AJAX — CSV/XLSX fetched in 500-row batches, file generated
          client-side via SheetJS. Export progress modal with progress bar + cancel.
          PDF option removed — CSV and Excel only.
    
    @once ensures CSS/JS loads only once even if multiple tables exist.
--}}

@once
{{-- SheetJS for client-side XLSX/CSV generation (batch export) --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
/* =========================================
   DATATABLE v3.5 — CORE CSS
   ========================================= */

/* Container */
.dt-container {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    overflow: visible;
    margin: 15px 0;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Table Wrapper */
.dt-container .dt-table-wrapper {
    overflow-x: auto;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #a0aec0 var(--body-bg, #f7fafc);
}
.dt-container .dt-table-wrapper::-webkit-scrollbar { height: 8px; }
.dt-container .dt-table-wrapper::-webkit-scrollbar-track { background: var(--body-bg, #f7fafc); border-radius: 4px; }
.dt-container .dt-table-wrapper::-webkit-scrollbar-thumb { background: #a0aec0; border-radius: 4px; }

/* Toolbar */
.dt-container .dt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--card-bg, #fff);
    border-bottom: 1px solid var(--card-border, #e5e7eb);
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 20;
    overflow: visible;
}
.dt-container .dt-toolbar-left,
.dt-container .dt-toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    overflow: visible;
}

/* Search Input */
.dt-container .dt-search-input {
    padding: 8px 14px;
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-sm, 14px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1f2937);
    min-width: 220px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dt-container .dt-search-input:focus {
    outline: none;
    border-color: #5a67d8;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.15);
}

/* Per Page Select */
.dt-container .dt-perpage-select {
    padding: 8px 12px;
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-sm, 14px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1f2937);
    cursor: pointer;
}

/* Import Button */
.dt-container .dt-import-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-sm, 14px);
    font-weight: 500;
    background: #5a67d8;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dt-container .dt-import-btn:hover { background: #4c56c0; }

/* Hidden by permission */
.dt-container .dt-import-btn.dt-hidden,
.dt-container .dt-export-btn.dt-hidden,
.dt-container .dt-bulk-dropdown.dt-hidden { display: none !important; }
.dt-hidden { display: none !important; }

/* Dropdown Base */
.dt-container .dt-dropdown { position: relative; display: inline-block; }
.dt-container .dt-dropdown-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-sm, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dt-container .dt-dropdown .dt-caret { margin-left: 2px; font-size: 10px; transition: transform 0.2s; }
.dt-container .dt-dropdown.open .dt-caret { transform: rotate(180deg); }
.dt-container .dt-dropdown-menu {
    position: absolute;
    top: 100%;
    margin-top: 6px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}
.dt-container .dt-dropdown.open .dt-dropdown-menu { opacity: 1; visibility: visible; }
.dt-container .dt-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    font-size: var(--font-sm, 14px);
    color: var(--text-primary, #1f2937);
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.dt-container .dt-dropdown-item:first-child { border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0; }
.dt-container .dt-dropdown-item:last-child { border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); }
.dt-container .dt-dropdown-item:hover { background: var(--body-bg, #f7fafc); }
.dt-container .dt-dropdown-divider { height: 1px; background: var(--card-border, #e5e7eb); margin: 6px 0; }

/* v3.3: Export Button (replaces dropdown) */
.dt-container .dt-export-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-sm, 14px);
    font-weight: 500;
    background: #38a169;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dt-container .dt-export-btn:hover { background: #2f8a5a; }

/* Bulk Actions Dropdown */
.dt-container .dt-bulk-dropdown { display: none; }
.dt-container .dt-bulk-dropdown.show { display: inline-block; animation: dtFadeIn 0.2s; }
.dt-container .dt-bulk-dropdown .dt-dropdown-btn { background: #5a67d8; color: #fff; }
.dt-container .dt-bulk-dropdown .dt-dropdown-btn:hover { background: #4c56c0; }
.dt-container .dt-bulk-dropdown .dt-dropdown-menu { left: 0; }
.dt-container .dt-dropdown-item[data-color="red"] { color: #e53e3e; }
.dt-container .dt-dropdown-item[data-color="green"] { color: #38a169; }
.dt-container .dt-dropdown-item[data-color="yellow"] { color: #d69e2e; }
.dt-container .dt-dropdown-item[data-color="blue"] { color: #3182ce; }

/* Selected Count */
.dt-container .dt-selected-count {
    font-size: var(--font-sm, 14px);
    display: none;
    padding: 8px 14px;
    background: rgba(90, 103, 216, 0.1);
    color: #5a67d8;
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
    border: 1px solid rgba(90, 103, 216, 0.2);
}
.dt-container .dt-selected-count.show { display: inline-flex; align-items: center; gap: 6px; animation: dtFadeIn 0.2s; }

@keyframes dtFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* TABLE */
.dt-container .dt-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
}
.dt-container .dt-table th,
.dt-container .dt-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--card-border, #e5e7eb);
    color: var(--text-primary, #1f2937);
    font-size: var(--font-sm, 14px);
    white-space: nowrap;
}
.dt-container .dt-table th {
    background: var(--body-bg, #f7fafc);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}
.dt-container .dt-table tbody tr { transition: background 0.15s; }
.dt-container .dt-table tbody tr:hover { background: var(--body-bg, #f7fafc); }
.dt-container .dt-table tbody tr.selected { background: rgba(90, 103, 216, 0.08); border-left: 3px solid #5a67d8; }
.dt-container .dt-table tbody tr:last-child td { border-bottom: none; }
.dt-container .dt-table td.dt-clickable-cell { cursor: pointer; transition: color 0.15s; }
.dt-container .dt-table td.dt-clickable-cell:hover { color: #5a67d8; text-decoration: underline; }

/* Row number column */
.dt-container .dt-table th.dt-rownum-col,
.dt-container .dt-table td.dt-rownum-col { width: 50px; min-width: 50px; text-align: center; color: var(--text-muted, #6b7280); font-weight: 500; }

/* Checkbox Column */
.dt-container .dt-table th.dt-checkbox-col,
.dt-container .dt-table td.dt-checkbox-col { width: 50px; min-width: 50px; text-align: center; padding: 12px; }
.dt-container .dt-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: #5a67d8; }

/* Actions Column */
.dt-container .dt-table th.dt-actions-col,
.dt-container .dt-table td.dt-actions-col { width: 160px; min-width: 160px; }

/* Sortable Headers */
.dt-container .dt-table th.dt-sort { cursor: pointer; user-select: none; position: relative; padding-right: 28px; transition: background 0.15s; }
.dt-container .dt-table th.dt-sort:hover { background: var(--card-border, #e5e7eb); }
.dt-container .dt-table th.dt-sort::after { content: '\2195'; position: absolute; right: 10px; opacity: 0.3; font-size: 12px; }
.dt-container .dt-table th.dt-sort.asc::after { content: '\2191'; opacity: 1; color: #5a67d8; }
.dt-container .dt-table th.dt-sort.desc::after { content: '\2193'; opacity: 1; color: #5a67d8; }

/* Pagination */
.dt-container .dt-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--card-border, #e5e7eb);
    flex-wrap: wrap;
    gap: 12px;
}
.dt-container .dt-info { color: var(--text-muted, #6b7280); font-size: var(--font-sm, 14px); font-weight: 500; }
.dt-container .dt-pages { display: flex; gap: 5px; }
.dt-container .dt-pages button {
    padding: 6px 12px;
    border: 1px solid var(--input-border, #d1d5db);
    background: var(--input-bg, #fff);
    color: var(--text-primary, #1f2937);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-size: var(--font-xs, 12px);
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}
.dt-container .dt-pages button:hover:not(:disabled) { background: var(--body-bg, #f7fafc); border-color: #5a67d8; }
.dt-container .dt-pages button:disabled { opacity: 0.4; cursor: not-allowed; }
.dt-container .dt-pages button.active { background: #5a67d8; border-color: #5a67d8; color: #fff; }

/* Badges */
.dt-container .dt-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--font-xs, 12px);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: capitalize;
}
.dt-container .dt-badge-active, .dt-container .dt-badge-success, .dt-container .dt-badge-completed, .dt-container .dt-badge-paid, .dt-container .dt-badge-approved { background: rgba(56, 161, 105, 0.12); color: #2f855a; border: 1px solid rgba(56, 161, 105, 0.2); }
.dt-container .dt-badge-inactive, .dt-container .dt-badge-secondary, .dt-container .dt-badge-draft, .dt-container .dt-badge-closed { background: var(--body-bg, #f7fafc); color: var(--text-muted, #6b7280); border: 1px solid var(--card-border, #e5e7eb); }
.dt-container .dt-badge-pending, .dt-container .dt-badge-warning, .dt-container .dt-badge-in_progress, .dt-container .dt-badge-processing, .dt-container .dt-badge-partial { background: rgba(221, 156, 38, 0.12); color: #b7791f; border: 1px solid rgba(221, 156, 38, 0.2); }
.dt-container .dt-badge-cancelled, .dt-container .dt-badge-danger, .dt-container .dt-badge-failed, .dt-container .dt-badge-rejected, .dt-container .dt-badge-overdue { background: rgba(229, 62, 62, 0.12); color: #c53030; border: 1px solid rgba(229, 62, 62, 0.2); }
.dt-container .dt-badge-info, .dt-container .dt-badge-open, .dt-container .dt-badge-new, .dt-container .dt-badge-sent, .dt-container .dt-badge-published { background: rgba(90, 103, 216, 0.12); color: #4c56c0; border: 1px solid rgba(90, 103, 216, 0.2); }
.dt-container .dt-badge-unpaid { background: rgba(237, 137, 54, 0.12); color: #c05621; border: 1px solid rgba(237, 137, 54, 0.2); }

/* Action Buttons */
.dt-container .dt-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.dt-container .dt-btn {
    padding: 5px 10px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-size: var(--font-xs, 12px);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.15s;
    min-width: 50px;
}
.dt-container .dt-btn:hover { opacity: 0.85; }
.dt-container .dt-btn-view { background: #5a67d8; color: #fff; }
.dt-container .dt-btn-edit { background: #dd9c26; color: #fff; }
.dt-container .dt-btn-delete { background: #e53e3e; color: #fff; }

/* Image thumbnail */
.dt-container .dt-thumbnail { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; border: 1px solid var(--card-border, #e5e7eb); }

/* Truncated text */
.dt-container .dt-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }

/* Link cell */
.dt-container .dt-link { color: #5a67d8; text-decoration: none; }
.dt-container .dt-link:hover { text-decoration: underline; }

/* Empty State */
.dt-container .dt-empty { text-align: center; padding: 60px 20px; color: var(--text-muted, #6b7280); }
.dt-container .dt-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.dt-container .dt-empty-text { font-size: 16px; font-weight: 500; }

/* Modal */
.dt-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.dt-modal-overlay.show { opacity: 1; visibility: visible; }
.dt-modal { background: var(--card-bg, #fff); border-radius: var(--radius-lg, 12px); width: 90%; max-width: 500px; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); }
.dt-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--card-border, #e5e7eb); }
.dt-modal-title { font-size: 18px; font-weight: 600; color: var(--text-primary, #1f2937); }
.dt-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-muted, #6b7280); padding: 0; line-height: 1; }
.dt-modal-body { padding: 20px; overflow-y: auto; max-height: calc(90vh - 140px); }
.dt-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--card-border, #e5e7eb); }
.dt-btn-cancel { padding: 10px 20px; border: 1px solid var(--input-border, #d1d5db); background: var(--input-bg, #fff); color: var(--text-primary, #1f2937); border-radius: var(--radius-md, 8px); cursor: pointer; font-weight: 500; }
.dt-btn-submit { padding: 10px 20px; border: none; background: #5a67d8; color: #fff; border-radius: var(--radius-md, 8px); cursor: pointer; font-weight: 500; }
.dt-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.dt-btn-danger { background: #e53e3e; }

/* File Drop */
.dt-file-drop { border: 2px dashed var(--input-border, #d1d5db); border-radius: var(--radius-md, 8px); padding: 40px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.dt-file-drop:hover, .dt-file-drop.dragover { border-color: #5a67d8; background: rgba(90, 103, 216, 0.05); }
.dt-file-drop-icon { font-size: 48px; margin-bottom: 12px; }
.dt-file-drop-text { color: var(--text-muted, #6b7280); font-size: 14px; }
.dt-file-input { display: none; }
.dt-file-name { margin-top: 12px; padding: 10px; background: rgba(56, 161, 105, 0.1); border-radius: var(--radius-md, 8px); color: #2f855a; font-size: 14px; display: none; }
.dt-file-name.show { display: block; }
.dt-template-link { display: inline-block; margin-top: 16px; color: #5a67d8; font-size: 14px; text-decoration: none; }
.dt-template-link:hover { text-decoration: underline; }
.dt-import-results { margin-top: 16px; padding: 12px; border-radius: var(--radius-md, 8px); font-size: 14px; display: none; }
.dt-import-results.show { display: block; }
.dt-import-results.success { background: rgba(56, 161, 105, 0.1); color: #2f855a; }
.dt-import-results.error { background: rgba(229, 62, 62, 0.1); color: #c53030; }
.dt-import-results.warning { background: rgba(236, 201, 75, 0.15); color: #b7791f; }
.dt-import-errors { margin-top: 10px; font-size: 12px; max-height: 150px; overflow-y: auto; }
.dt-import-warnings { margin-top: 8px; font-size: 12px; max-height: 100px; overflow-y: auto; color: #b7791f; }

/* v3.1: Error report download link in import results */
.dt-error-report-link { display: inline-block; margin-top: 8px; padding: 6px 12px; background: rgba(229, 62, 62, 0.1); color: #c53030; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; }
.dt-error-report-link:hover { background: rgba(229, 62, 62, 0.2); text-decoration: none; }

/* v3.1: Import count details */
.dt-import-counts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dt-import-count-badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.dt-import-count-badge.created { background: rgba(56, 161, 105, 0.15); color: #2f855a; }
.dt-import-count-badge.updated { background: rgba(90, 103, 216, 0.15); color: #4c56c0; }
.dt-import-count-badge.skipped { background: rgba(160, 174, 192, 0.2); color: #4a5568; }
.dt-import-count-badge.failed { background: rgba(229, 62, 62, 0.15); color: #c53030; }

/* =========================================
   v3.4 — IMPORT LOADING OVERLAY
   ========================================= */
.dt-import-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 20px;
}
.dt-import-loading.show { display: flex; }

.dt-import-spinner {
    width: 52px; height: 52px;
    border: 4px solid var(--card-border, #e5e7eb);
    border-top-color: #5a67d8;
    border-radius: 50%;
    animation: dtSpin 0.75s linear infinite;
    flex-shrink: 0;
}
@keyframes dtSpin { to { transform: rotate(360deg); } }

.dt-import-loading-title {
    font-size: 16px; font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0;
}
.dt-import-loading-sub {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    margin: 0;
    line-height: 1.5;
}
.dt-import-loading-sub .dt-dots::after {
    content: '';
    animation: dtDots 1.5s steps(4, end) infinite;
}
@keyframes dtDots {
    0%   { content: '';    }
    25%  { content: '.';   }
    50%  { content: '..';  }
    75%  { content: '...'; }
}

.dt-import-loading-meta {
    display: flex; gap: 8px; align-items: center;
    padding: 6px 14px;
    background: var(--body-bg, #f7fafc);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: 20px;
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary, #4b5563);
}

.dt-import-body-content.dt-loading-hide { display: none !important; }

/* v3.0 — Feature styles */

/* Quick Filter Pills */
.dt-quick-filters { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--card-border, #e5e7eb); flex-wrap: wrap; background: var(--body-bg, #f8fafc); }
.dt-pill { padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--card-border, #e5e7eb); background: var(--card-bg, #fff); color: var(--text-secondary, #4b5563); transition: all 0.15s; white-space: nowrap; }
.dt-pill:hover { border-color: #5a67d8; color: #5a67d8; }
.dt-pill.active { background: #5a67d8; color: #fff; border-color: #5a67d8; }

/* Column Visibility */
.dt-colvis-dropdown { position: relative; }
.dt-colvis-btn { padding: 8px 12px; border: 1px solid var(--input-border, #d1d5db); border-radius: var(--radius-md, 8px); font-size: 13px; background: var(--input-bg, #fff); color: var(--text-secondary, #4b5563); cursor: pointer; white-space: nowrap; }
.dt-colvis-btn:hover { border-color: #5a67d8; color: #5a67d8; }
.dt-colvis-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--card-bg, #fff); border: 1px solid var(--card-border, #e5e7eb); border-radius: var(--radius-md, 8px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 200px; max-height: 300px; overflow-y: auto; z-index: 100; display: none; padding: 6px 0; }
.dt-colvis-menu.open { display: block; }
.dt-colvis-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--text-primary, #1f2937); }
.dt-colvis-item:hover { background: var(--body-bg, #f8fafc); }
.dt-colvis-item input[type="checkbox"] { accent-color: #5a67d8; }
.dt-col-hidden { display: none !important; }

/* Status Toggle */
.dt-toggle-wrap { display: flex; align-items: center; gap: 8px; }
.dt-toggle { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #cbd5e0; cursor: pointer; transition: background 0.2s; border: none; padding: 0; flex-shrink: 0; }
.dt-toggle.on { background: #48bb78; }
.dt-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.dt-toggle.on::after { transform: translateX(18px); }
.dt-toggle.loading { opacity: 0.5; pointer-events: none; }
.dt-toggle-label { font-size: 12px; color: var(--text-muted, #6b7280); }

/* Progress bar */
.dt-progress { width: 100%; max-width: 120px; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.dt-progress-bar { height: 100%; border-radius: 4px; transition: width 0.3s; }
.dt-progress-text { font-size: 11px; color: var(--text-muted, #6b7280); margin-left: 6px; }

/* Avatar */
.dt-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; background: #5a67d8; flex-shrink: 0; }

/* Summary row */
.dt-summary-row td { font-weight: 700; background: var(--body-bg, #f7fafc); border-top: 2px solid var(--card-border, #e5e7eb); }

/* Dry run toggle */
.dt-dry-run-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-secondary, #4b5563); }
.dt-dry-run-toggle input { accent-color: #5a67d8; }

/* v3.3 — Export Modal Styles */
.dt-export-modal-info {
    padding: 12px 16px;
    background: var(--body-bg, #f7fafc);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-secondary, #4b5563);
    line-height: 1.5;
}
.dt-export-modal-info.has-selection {
    background: rgba(90, 103, 216, 0.06);
    border-color: rgba(90, 103, 216, 0.2);
    color: #5a67d8;
}
.dt-export-modal-info.has-filters {
    background: rgba(56, 161, 105, 0.06);
    border-color: rgba(56, 161, 105, 0.2);
    color: #2f855a;
}
.dt-export-modal-info svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.dt-export-formats { display: flex; flex-direction: column; gap: 10px; }
.dt-export-format-btn {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px;
    border: 1px solid var(--card-border, #e5e7eb); border-radius: var(--radius-md, 8px);
    background: var(--card-bg, #fff); cursor: pointer; transition: all 0.15s;
    text-align: left; width: 100%;
}
.dt-export-format-btn:hover { border-color: #38a169; background: rgba(56, 161, 105, 0.04); box-shadow: 0 2px 8px rgba(56, 161, 105, 0.1); }
.dt-export-format-btn:active { transform: scale(0.98); }
.dt-export-format-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.dt-export-format-icon.csv { background: rgba(56, 161, 105, 0.12); }
.dt-export-format-icon.xlsx { background: rgba(90, 103, 216, 0.12); }
.dt-export-format-label { font-size: 15px; font-weight: 600; color: var(--text-primary, #1f2937); }
.dt-export-format-desc { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.dt-export-format-ext { margin-left: auto; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; background: var(--body-bg, #f7fafc); color: var(--text-muted, #6b7280); letter-spacing: 0.5px; }

/* v3.2 — Auto-collapsible external filters */
.dt-ext-filter-toggle {
    display: none; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e5e7eb); border-radius: 10px;
    cursor: pointer; transition: all 0.2s; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.dt-ext-filter-toggle:hover { border-color: #5a67d8; }
.dt-ext-filter-toggle-left { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary, #1e293b); }
.dt-ext-filter-toggle-left svg { width: 18px; height: 18px; color: var(--text-muted, #64748b); flex-shrink: 0; }
.dt-ext-filter-badge { display: none; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; background: #5a67d8; color: white; min-width: 20px; text-align: center; line-height: 1.4; }
.dt-ext-filter-badge.show { display: inline-block; }
.dt-ext-filter-chevron { width: 18px; height: 18px; color: var(--text-muted, #64748b); transition: transform 0.25s ease; flex-shrink: 0; }
.dt-ext-filter-toggle.open .dt-ext-filter-chevron { transform: rotate(180deg); }
.dt-ext-filter-toggle.open { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.dt-ext-filter-panel { /* no-op on desktop */ }

@media (max-width: 768px) {
    .dt-ext-filter-toggle { display: flex; margin-bottom: 0; }
    .dt-ext-filter-panel {
        max-height: 0; overflow: hidden; opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
        background: var(--card-bg, #fff);
        border: 1px solid var(--card-border, #e5e7eb); border-top: 0;
        border-radius: 0 0 10px 10px; padding: 0 14px; margin-bottom: 0;
        max-width: 100vw; box-sizing: border-box;
    }
    .dt-ext-filter-panel.open {
        max-height: 800px; opacity: 1;
        padding: 12px 14px 14px; margin-bottom: 12px;
        overflow-x: hidden; overflow-y: auto;
    }
    .dt-ext-filter-panel *, .dt-ext-filter-panel *::before, .dt-ext-filter-panel *::after { box-sizing: border-box !important; max-width: 100% !important; }
    .dt-ext-filter-panel .row { margin-left: 0 !important; margin-right: 0 !important; }
    .dt-ext-filter-panel .row, .dt-ext-filter-panel .d-flex, .dt-ext-filter-panel [class*="col-"] { display: block !important; width: 100% !important; max-width: 100% !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 8px; }
    .dt-ext-filter-panel label, .dt-ext-filter-panel .form-label { font-size: 11px !important; font-weight: 600; margin-bottom: 3px !important; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted, #94a3b8); display: block; }
    .dt-ext-filter-panel select, .dt-ext-filter-panel .form-select, .dt-ext-filter-panel .form-control, .dt-ext-filter-panel input, .dt-ext-filter-panel textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; font-size: 13px !important; padding: 8px 10px !important; height: auto !important; min-height: 36px; border-radius: 8px !important; box-sizing: border-box !important; }
    .dt-ext-filter-panel select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; padding-right: 30px !important; }
    .dt-ext-filter-panel input[type="date"], .dt-ext-filter-panel input[type="text"].datepicker, .dt-ext-filter-panel input[type="text"].flatpickr-input { width: 100% !important; font-size: 13px !important; padding: 8px 10px !important; min-height: 36px; border-radius: 8px !important; }
    .dt-ext-filter-panel .input-group { display: flex !important; width: 100% !important; flex-wrap: nowrap; }
    .dt-ext-filter-panel .input-group input, .dt-ext-filter-panel .input-group select { flex: 1 1 auto; min-width: 0 !important; }
    .dt-ext-filter-panel button, .dt-ext-filter-panel .btn { font-size: 12px !important; padding: 6px 12px !important; border-radius: 8px !important; width: 100%; box-sizing: border-box !important; }
    .flatpickr-calendar { width: calc(100vw - 40px) !important; max-width: 300px !important; font-size: 13px !important; left: 50% !important; transform: translateX(-50%); }
    .flatpickr-months { padding: 4px 0; }
    .flatpickr-months .flatpickr-month { height: 32px; }
    .flatpickr-current-month { font-size: 13px !important; }
    .flatpickr-weekdays { font-size: 11px; }
    .flatpickr-day { width: 34px !important; height: 34px !important; line-height: 34px !important; font-size: 12px !important; margin: 1px; }
    .flatpickr-rContainer, .flatpickr-days { width: 100% !important; }
    .dayContainer { width: 100% !important; min-width: 100% !important; max-width: 100% !important; }
    .pika-single { width: calc(100vw - 40px) !important; max-width: 300px !important; font-size: 13px !important; position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 9999 !important; }
    .dt-ext-filter-panel input[type="date"]::-webkit-calendar-picker-indicator { padding: 2px; width: 18px; height: 18px; }
    .datepicker-dropdown { width: calc(100vw - 40px) !important; max-width: 300px !important; font-size: 12px !important; left: 50% !important; transform: translateX(-50%); }
    .datepicker table { width: 100%; }
    .datepicker td, .datepicker th { width: 36px !important; height: 36px !important; font-size: 12px !important; }
    .dt-ext-filter-panel > div, .dt-ext-filter-panel > .form-group, .dt-ext-filter-panel > .mb-3, .dt-ext-filter-panel > .mb-2 { margin-bottom: 8px !important; }
    .dt-ext-filter-panel > div:last-child, .dt-ext-filter-panel > .form-group:last-child { margin-bottom: 0 !important; }
}

@media (max-width: 480px) {
    .dt-ext-filter-toggle { padding: 8px 12px; }
    .dt-ext-filter-toggle-left { font-size: 13px; gap: 6px; }
    .dt-ext-filter-toggle-left svg { width: 16px; height: 16px; }
    .dt-ext-filter-chevron { width: 16px; height: 16px; }
    .dt-ext-filter-panel.open { padding: 10px 10px 12px; }
    .dt-ext-filter-panel select, .dt-ext-filter-panel .form-select, .dt-ext-filter-panel .form-control, .dt-ext-filter-panel input { font-size: 12px !important; padding: 7px 8px !important; min-height: 34px; }
    .dt-ext-filter-panel label, .dt-ext-filter-panel .form-label { font-size: 10px !important; }
    .flatpickr-calendar { max-width: 280px !important; }
    .flatpickr-day { width: 30px !important; height: 30px !important; line-height: 30px !important; font-size: 11px !important; }
    .datepicker-dropdown { max-width: 280px !important; }
    .datepicker td, .datepicker th { width: 32px !important; height: 32px !important; font-size: 11px !important; }
}

/* v3.1 RESPONSIVE */
@media (max-width: 768px) {
    .dt-container { margin: 8px 0; border-radius: 6px; width: 100%; max-width: 100%; }
    .dt-container .dt-toolbar { padding: 10px; gap: 8px; flex-direction: column; align-items: stretch; }
    .dt-container .dt-toolbar-left { display: flex; flex-wrap: wrap; gap: 4px; order: 1; width: 100%; }
    .dt-container .dt-search-input { min-width: 0; flex: 1 1 0; padding: 7px 10px; font-size: 13px; }
    .dt-container .dt-perpage-select { padding: 7px 8px; font-size: 12px; flex-shrink: 0; width: auto; }
    .dt-container .dt-toolbar-right { display: flex; flex-wrap: nowrap; gap: 6px; order: 2; }
    .dt-container .dt-import-btn { padding: 6px 10px; font-size: 12px; gap: 4px; }
    .dt-container .dt-export-btn { padding: 6px 10px; font-size: 12px; gap: 4px; }
    .dt-container .dt-dropdown-btn { padding: 6px 10px; font-size: 12px; gap: 4px; }
    .dt-container .dt-colvis-btn { padding: 6px 8px; font-size: 11px; }
    .dt-container .dt-selected-count { padding: 3px 8px; font-size: 11px; position: static; }
    .dt-container .dt-bulk-dropdown { position: static; }
    .dt-container .dt-bulk-dropdown .dt-dropdown-btn { padding: 4px 8px; font-size: 11px; gap: 3px; }
    .dt-quick-filters { padding: 6px 10px; gap: 4px; }
    .dt-pill { padding: 4px 10px; font-size: 11px; }
    .dt-container .dt-table th, .dt-container .dt-table td { padding: 8px 6px; font-size: 13px; }
    .dt-container .dt-table th.dt-checkbox-col, .dt-container .dt-table td.dt-checkbox-col { width: 36px; min-width: 36px; padding: 8px 4px; }
    .dt-container .dt-table th.dt-rownum-col, .dt-container .dt-table td.dt-rownum-col { width: 36px; min-width: 36px; }
    .dt-container .dt-checkbox { width: 16px; height: 16px; }
    .dt-container .dt-actions { gap: 4px; }
    .dt-container .dt-btn { padding: 4px 8px; font-size: 11px; min-width: 40px; }
    .dt-container .dt-table th.dt-actions-col, .dt-container .dt-table td.dt-actions-col { width: auto; min-width: 110px; }
    .dt-container .dt-pagination { padding: 8px 10px; gap: 8px; }
    .dt-container .dt-info { font-size: 12px; }
    .dt-container .dt-pages { gap: 3px; }
    .dt-container .dt-pages button { padding: 5px 10px; font-size: 11px; }
    .dt-container .dt-pages button:first-child, .dt-container .dt-pages button:last-child { display: none; }
    .dt-container .dt-badge { padding: 3px 8px; font-size: 11px; }
    .dt-container .dt-empty { padding: 40px 16px; }
    .dt-container .dt-empty-icon { font-size: 36px; }
    .dt-container .dt-empty-text { font-size: 14px; }
    .dt-container .dt-table-wrapper { position: relative; }
    .dt-container .dt-table-wrapper.dt-scrollable::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.06)); pointer-events: none; z-index: 5; }
    .dt-container .dt-table-wrapper.dt-scrolled-right::after { display: none; }
    .dt-summary-row { display: none; }
    .dt-modal { width: 95%; max-width: 450px; }
    .dt-modal-header { padding: 12px 16px; }
    .dt-modal-title { font-size: 16px; }
    .dt-modal-body { padding: 16px; }
    .dt-file-drop { padding: 24px 16px; }
    .dt-file-drop-icon { font-size: 36px; margin-bottom: 8px; }
    .dt-modal-footer { padding: 12px 16px; }
    .dt-btn-cancel, .dt-btn-submit { padding: 8px 16px; font-size: 13px; }
    .dt-export-format-btn { padding: 12px 14px; gap: 12px; }
    .dt-export-format-icon { width: 40px; height: 40px; font-size: 20px; }
    .dt-export-format-label { font-size: 14px; }
    .dt-export-format-desc { font-size: 11px; }
    .dt-export-modal-info { font-size: 12px; padding: 10px 14px; }
    .dt-import-loading { padding: 28px 16px; gap: 16px; }
    .dt-import-spinner { width: 44px; height: 44px; }
    .dt-import-loading-title { font-size: 14px; }
    .dt-import-loading-sub { font-size: 12px; }
}

@media (max-width: 480px) {
    .dt-container { margin: 8px 0; border-radius: var(--radius-md, 8px); }
    .dt-container .dt-toolbar { padding: 8px; gap: 6px; }
    .dt-container .dt-toolbar-left { gap: 4px; }
    .dt-container .dt-search-input { padding: 6px 8px; font-size: 12px; }
    .dt-container .dt-perpage-select { padding: 6px 4px; font-size: 11px; }
    .dt-container .dt-toolbar-right { gap: 4px; }
    .dt-container .dt-import-btn { padding: 5px 8px; font-size: 11px; gap: 3px; }
    .dt-container .dt-export-btn { padding: 5px 8px; font-size: 11px; gap: 3px; }
    .dt-container .dt-dropdown-btn { padding: 5px 8px; font-size: 11px; gap: 3px; }
    .dt-container .dt-colvis-btn { padding: 5px 6px; font-size: 10px; }
    .dt-container .dt-selected-count { padding: 3px 6px; font-size: 10px; }
    .dt-container .dt-bulk-dropdown .dt-dropdown-btn { padding: 5px 8px; font-size: 11px; }
    .dt-quick-filters { padding: 5px 8px; gap: 3px; }
    .dt-pill { padding: 3px 8px; font-size: 10px; }
    .dt-container .dt-table th, .dt-container .dt-table td { padding: 6px; font-size: 12px; }
    .dt-container .dt-table th.dt-checkbox-col, .dt-container .dt-table td.dt-checkbox-col { width: 30px; min-width: 30px; padding: 6px 2px; }
    .dt-container .dt-table th.dt-rownum-col, .dt-container .dt-table td.dt-rownum-col { width: 28px; min-width: 28px; font-size: 11px; }
    .dt-container .dt-checkbox { width: 15px; height: 15px; }
    .dt-container .dt-btn { padding: 4px 6px; min-width: 28px; height: 26px; font-size: 10px; }
    .dt-container .dt-table th.dt-actions-col, .dt-container .dt-table td.dt-actions-col { min-width: 90px; }
    .dt-container .dt-pagination { padding: 8px; gap: 6px; flex-direction: column; align-items: center; }
    .dt-container .dt-info { font-size: 11px; text-align: center; }
    .dt-container .dt-pages { gap: 2px; }
    .dt-container .dt-pages button { padding: 4px 8px; font-size: 10px; }
    .dt-container .dt-badge { padding: 2px 6px; font-size: 10px; }
    .dt-container .dt-bulk-dropdown .dt-dropdown-menu { left: -8px; }
    .dt-container .dt-dropdown-item { padding: 9px 12px; font-size: 13px; }
    .dt-modal-overlay { padding: 6px; }
    .dt-modal { width: 100%; }
    .dt-modal-header { padding: 10px 12px; }
    .dt-modal-title { font-size: 15px; }
    .dt-modal-body { padding: 12px; }
    .dt-file-drop { padding: 20px 12px; }
    .dt-file-drop-icon { font-size: 32px; margin-bottom: 6px; }
    .dt-file-drop-text { font-size: 12px; }
    .dt-modal-footer { padding: 10px 12px; }
    .dt-btn-cancel, .dt-btn-submit { padding: 7px 14px; font-size: 12px; }
    .dt-dry-run-toggle { font-size: 12px; margin-top: 10px; }
    .dt-template-link { font-size: 12px; margin-top: 10px; }
    .dt-export-format-btn { padding: 10px 12px; gap: 10px; }
    .dt-export-format-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 8px; }
    .dt-export-format-label { font-size: 13px; }
    .dt-export-format-ext { padding: 3px 8px; font-size: 10px; }
}

@media (max-width: 360px) {
    .dt-container .dt-toolbar { padding: 6px; gap: 4px; }
    .dt-container .dt-toolbar-left { gap: 3px; }
    .dt-container .dt-toolbar-right { gap: 3px; }
    .dt-container .dt-search-input { padding: 5px 7px; font-size: 11px; }
    .dt-container .dt-perpage-select { padding: 5px 3px; font-size: 10px; }
    .dt-container .dt-import-btn, .dt-container .dt-export-btn, .dt-container .dt-dropdown-btn { padding: 4px 6px; font-size: 10px; }
    .dt-container .dt-table th, .dt-container .dt-table td { padding: 5px 4px; font-size: 11px; }
    .dt-container .dt-pagination { padding: 6px; }
    .dt-container .dt-pages button { padding: 3px 6px; font-size: 10px; }
    .dt-container .dt-info { font-size: 10px; }
}

/* ── Trash button ─────────────────────────────────────────────────────────── */
.dt-container .dt-trash-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #fff); color: var(--text-secondary, #64748b);
    cursor: pointer; transition: all .15s;
}
.dt-container .dt-trash-btn:hover { border-color: #ef4444; color: #ef4444; background: #fff5f5; }
.dt-container .dt-trash-btn.active {
    background: #fef2f2; border-color: #ef4444; color: #ef4444; font-weight: 600;
}

/* Restore action button */
.dt-container .dt-btn-restore {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 5px; font-size: 12px; font-weight: 500;
    background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0;
    cursor: pointer; transition: background .15s;
}
.dt-container .dt-btn-restore:hover { background: #d1fae5; }

/* Trash row highlight */
.dt-container .dt-table tbody tr.trashed { opacity: .7; background: #fff8f8 !important; }

/* ── Inline Edit ──────────────────────────────────────────────────────────── */
.dt-container .dt-inline-cell {
    cursor: pointer; position: relative;
    padding-right: 26px !important;
}
.dt-container .dt-inline-cell:hover { background: var(--hover-bg, rgba(99,102,241,.05)); }
.dt-container .dt-inline-edit-icon {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-size: 12px; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.dt-container .dt-inline-cell:hover .dt-inline-edit-icon { opacity: 1; }
.dt-container .dt-inline-cell.editing { cursor: default; background: transparent !important; }
.dt-container .dt-inline-input {
    width: calc(100% - 4px); padding: 3px 6px; font-size: 13px;
    border: 2px solid var(--primary, #6366f1); border-radius: 4px;
    outline: none; background: var(--card-bg, #fff); color: var(--text-primary, #1e293b);
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

/* ── Stats Cards ──────────────────────────────────────────────────────────── */
.dt-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.dt-stat-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; border-radius: 12px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: transform .15s, box-shadow .15s;
}
.dt-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.dt-stat-card.dt-stat-active { box-shadow: 0 0 0 2px var(--primary, #667eea), 0 4px 12px rgba(0,0,0,.1); transform: translateY(-2px); }
.dt-stat-card[style*="cursor: pointer"]:hover .dt-stat-label::after { content: ' ▾'; font-size:9px; opacity:.6; }
.dt-stat-icon {
    width: 46px; height: 46px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.dt-stat-body { min-width: 0; }
.dt-stat-value {
    font-size: 22px; font-weight: 700; line-height: 1.1;
    color: var(--text-primary, #1e293b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-stat-label {
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-secondary, #64748b);
    margin-top: 2px;
}
.dt-stat-green  .dt-stat-icon { background: #dcfce7; }
.dt-stat-green  .dt-stat-value { color: #16a34a; }
.dt-stat-blue   .dt-stat-icon { background: #dbeafe; }
.dt-stat-blue   .dt-stat-value { color: #2563eb; }
.dt-stat-purple .dt-stat-icon { background: #ede9fe; }
.dt-stat-purple .dt-stat-value { color: #7c3aed; }
.dt-stat-pink   .dt-stat-icon { background: #fce7f3; }
.dt-stat-pink   .dt-stat-value { color: #db2777; }
.dt-stat-orange .dt-stat-icon { background: #ffedd5; }
.dt-stat-orange .dt-stat-value { color: #ea580c; }
.dt-stat-red    .dt-stat-icon { background: #fee2e2; }
.dt-stat-red    .dt-stat-value { color: #dc2626; }
.dt-stat-yellow .dt-stat-icon { background: #fef9c3; }
.dt-stat-yellow .dt-stat-value { color: #ca8a04; }
.dt-stat-teal   .dt-stat-icon { background: #ccfbf1; }
.dt-stat-teal   .dt-stat-value { color: #0f766e; }
[data-theme="dark"] .dt-stat-card { background: var(--card-bg, #1e293b); border-color: var(--border-color, #334155); }
[data-theme="dark"] .dt-stat-green  .dt-stat-icon { background: rgba(22,163,74,.18); }
[data-theme="dark"] .dt-stat-blue   .dt-stat-icon { background: rgba(37,99,235,.18); }
[data-theme="dark"] .dt-stat-purple .dt-stat-icon { background: rgba(124,58,237,.18); }
[data-theme="dark"] .dt-stat-pink   .dt-stat-icon { background: rgba(219,39,119,.18); }
[data-theme="dark"] .dt-stat-orange .dt-stat-icon { background: rgba(234,88,12,.18); }
[data-theme="dark"] .dt-stat-red    .dt-stat-icon { background: rgba(220,38,38,.18); }
[data-theme="dark"] .dt-stat-yellow .dt-stat-icon { background: rgba(202,138,4,.18); }
[data-theme="dark"] .dt-stat-teal   .dt-stat-icon { background: rgba(15,118,110,.18); }
@media (max-width: 640px) {
    .dt-stats-bar { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
    .dt-stat-card { padding: 12px 14px; gap: 10px; border-radius: 10px; }
    .dt-stat-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 8px; }
    .dt-stat-value { font-size: 18px; } .dt-stat-label { font-size: 10px; }
}
@media (max-width: 360px) {
    .dt-stats-bar { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dt-stat-card { padding: 10px; gap: 8px; } .dt-stat-value { font-size: 16px; }
}
</style>

<script>
/**
 * DataTable v3.5
 * v3.0 base + v3.1: error_report_url support, import count badges
 * v3.2: Auto-collapsible external filters on mobile
 * v3.3: Export Modal — replaces dropdown with full modal (like Import)
 * v3.4: Import loading overlay + JSON parse fix
 * v3.5: Batch export — CSV/XLSX fetched in 500-row AJAX batches, file
 *       generated client-side via SheetJS. Export progress modal with
 *       progress bar + cancel. PDF still goes server-side (5k row guard).
 */
(function(){
    'use strict';

    window.dtInstance = window.dtInstance || {};
    var toastCount = 0;

    var tables = document.querySelectorAll('.dt-table[data-route]');
    tables.forEach(function(table){ initTable(table); });

    function initTable(table){
        var tableId = table.id || 'dt_' + Math.random().toString(36).substr(2, 9);
        table.id = tableId;
        
        var route = table.dataset.route;
        var bulkRoute = table.dataset.bulkRoute || route.replace('/data', '/bulk-action');
        var statusRoute = table.dataset.statusRoute || '';
        var hasSearch = table.classList.contains('dt-search');
        var hasExport = table.classList.contains('dt-export');
        var hasImport = table.classList.contains('dt-import');
        var hasPerpage = table.classList.contains('dt-perpage');
        var hasCheckbox = table.classList.contains('dt-checkbox');
        var hasColvis = table.classList.contains('dt-colvis');
        var hasTrash = table.classList.contains('dt-trash');
        var emptyMessage = table.dataset.emptyMessage || 'No data found';
        var quickFiltersAttr = table.dataset.quickFilters || '';
        
        var defaultFilters = {};
        try { defaultFilters = JSON.parse(table.dataset.filters || '{}'); } catch(e) {}

        var bulkActionsConfig = {};
        try { bulkActionsConfig = JSON.parse(table.dataset.bulkActions || '{}'); } catch(e) {}

        var permissions = { canView: true, canEdit: true, canDelete: true, canExport: true, canImport: true };

        var state = {
            page: 1, perPage: 10, search: '', sort: 'id', dir: 'desc',
            filters: Object.assign({}, defaultFilters),
            selected: [], data: [], total: 0, lastPage: 1, summary: {},
            hiddenCols: [],
            trashed: '',
            trashCount: 0
        };

        try { var saved = localStorage.getItem('dt_colvis_' + tableId); if (saved) state.hiddenCols = JSON.parse(saved); } catch(e) {}

        var container = document.createElement('div');
        container.className = 'dt-container';
        table.parentNode.insertBefore(container, table);

        // Quick Filter Pills
        var quickFilterCol = '', quickFilterValues = [];
        if (quickFiltersAttr) {
            var qParts = quickFiltersAttr.split(':');
            quickFilterCol = qParts[0];
            quickFilterValues = qParts[1] ? qParts[1].split(',') : [];
        }
        var pillsContainer = null;
        if (quickFilterValues.length > 0) {
            pillsContainer = document.createElement('div');
            pillsContainer.className = 'dt-quick-filters';
            quickFilterValues.forEach(function(val) {
                var pill = document.createElement('button');
                pill.type = 'button';
                pill.className = 'dt-pill' + (val === 'all' ? ' active' : '');
                pill.textContent = val.charAt(0).toUpperCase() + val.slice(1).replace(/_/g, ' ');
                pill.dataset.value = val;
                pill.onclick = function() {
                    pillsContainer.querySelectorAll('.dt-pill').forEach(function(p) { p.classList.remove('active'); });
                    pill.classList.add('active');
                    if (val === 'all') { delete state.filters[quickFilterCol]; }
                    else { state.filters[quickFilterCol] = val; }
                    state.page = 1; load();
                };
                pillsContainer.appendChild(pill);
            });
            container.appendChild(pillsContainer);
        }

        // Toolbar
        var toolbar = document.createElement('div');
        toolbar.className = 'dt-toolbar';
        var toolbarLeft = document.createElement('div');
        toolbarLeft.className = 'dt-toolbar-left';
        var toolbarRight = document.createElement('div');
        toolbarRight.className = 'dt-toolbar-right';

        // Search
        var searchInput = null;
        if(hasSearch){
            searchInput = document.createElement('input');
            searchInput.type = 'text';
            searchInput.className = 'dt-search-input';
            searchInput.placeholder = 'Search...';
            var searchTimer;
            searchInput.oninput = function(){
                clearTimeout(searchTimer);
                searchTimer = setTimeout(function(){
                    state.search = searchInput.value;
                    state.page = 1;
                    load();
                }, 300);
            };
            toolbarLeft.appendChild(searchInput);
        }

        // Per page
        if(hasPerpage){
            var perPageSelect = document.createElement('select');
            perPageSelect.className = 'dt-perpage-select';
            [10, 25, 50, 100].forEach(function(n){
                var opt = document.createElement('option');
                opt.value = n; opt.textContent = n + ' / page';
                if(n === state.perPage) opt.selected = true;
                perPageSelect.appendChild(opt);
            });
            perPageSelect.onchange = function(){ state.perPage = parseInt(this.value); state.page = 1; load(); };
            toolbarLeft.appendChild(perPageSelect);
        }

        // Selected count
        var selectedCount = document.createElement('span');
        selectedCount.className = 'dt-selected-count';
        toolbarLeft.appendChild(selectedCount);

        // Bulk Actions
        var bulkDropdown = document.createElement('div');
        bulkDropdown.className = 'dt-dropdown dt-bulk-dropdown';
        var bulkBtn = document.createElement('button');
        bulkBtn.className = 'dt-dropdown-btn'; bulkBtn.type = 'button';
        bulkBtn.innerHTML = '\u26A1 Actions <span class="dt-caret">\u25BC</span>';
        var bulkMenu = document.createElement('div');
        bulkMenu.className = 'dt-dropdown-menu';
        bulkDropdown.appendChild(bulkBtn);
        bulkDropdown.appendChild(bulkMenu);
        toolbarLeft.appendChild(bulkDropdown);

        // Column visibility
        var colvisDropdown = null;
        if (hasColvis) {
            colvisDropdown = document.createElement('div');
            colvisDropdown.className = 'dt-colvis-dropdown';
            var colvisBtn = document.createElement('button');
            colvisBtn.type = 'button'; colvisBtn.className = 'dt-colvis-btn';
            colvisBtn.textContent = '\u2630 Columns';
            var colvisMenu = document.createElement('div');
            colvisMenu.className = 'dt-colvis-menu';
            colvisBtn.onclick = function(e) { e.stopPropagation(); colvisMenu.classList.toggle('open'); };
            colvisDropdown.appendChild(colvisBtn);
            colvisDropdown.appendChild(colvisMenu);
            toolbarRight.appendChild(colvisDropdown);
        }

        // Import
        var importBtn = null;
        if(hasImport){
            importBtn = document.createElement('button');
            importBtn.className = 'dt-import-btn'; importBtn.type = 'button';
            importBtn.innerHTML = '\uD83D\uDCE5 Import';
            importBtn.onclick = showImportModal;
            toolbarRight.appendChild(importBtn);
        }

        // Trash toggle button
        var trashBtn = null;
        if(hasTrash){
            trashBtn = document.createElement('button');
            trashBtn.className = 'dt-trash-btn'; trashBtn.type = 'button';
            trashBtn.innerHTML = '\uD83D\uDDD1\uFE0F Trash';
            trashBtn.title = 'View deleted records';
            trashBtn.onclick = function(){
                if(state.trashed === 'only'){
                    state.trashed = '';
                    trashBtn.classList.remove('active');
                    trashBtn.innerHTML = '\uD83D\uDDD1\uFE0F Trash';
                    trashBtn.title = 'View deleted records';
                    table.dataset.emptyMessage = emptyMessage;
                } else {
                    state.trashed = 'only';
                    trashBtn.classList.add('active');
                    trashBtn.innerHTML = '\u2190 Back to List';
                    trashBtn.title = 'Exit trash view';
                }
                state.page = 1;
                state.selected = [];
                load();
            };
            toolbarRight.appendChild(trashBtn);
        }

        // Export Button
        var exportBtnEl = null;
        if(hasExport){
            exportBtnEl = document.createElement('button');
            exportBtnEl.className = 'dt-export-btn'; exportBtnEl.type = 'button';
            exportBtnEl.innerHTML = '\uD83D\uDCE4 Export';
            exportBtnEl.onclick = showExportModal;
            toolbarRight.appendChild(exportBtnEl);
        }

        toolbar.appendChild(toolbarLeft);
        toolbar.appendChild(toolbarRight);
        container.appendChild(toolbar);

        // ── v3.5: Batch Export Progress Modal (injected into body) ──────────
        var batchModal = document.createElement('div');
        batchModal.id = 'dtBatchModal_' + tableId;
        batchModal.className = 'dt-modal-overlay';
        batchModal.setAttribute('data-bs-backdrop', 'static');
        batchModal.innerHTML =
            '<div style="background:var(--card-bg,#fff);border-radius:12px;width:90%;max-width:380px;' +
            'box-shadow:0 20px 60px rgba(0,0,0,.2);padding:28px 24px;text-align:center;">' +
                '<div class="dt-bex-working">' +
                    '<div style="width:52px;height:52px;border:4px solid var(--card-border,#e5e7eb);' +
                    'border-top-color:#5a67d8;border-radius:50%;animation:dtSpin .75s linear infinite;' +
                    'margin:0 auto 18px"></div>' +
                    '<h6 class="dt-bex-title" style="font-weight:600;font-size:15px;margin:0 0 6px;' +
                    'color:var(--text-primary,#1f2937)">Exporting\u2026</h6>' +
                    '<p class="dt-bex-status" style="font-size:13px;color:var(--text-muted,#6b7280);' +
                    'margin:0 0 14px">Preparing\u2026</p>' +
                    '<div style="background:var(--card-border,#e5e7eb);border-radius:4px;height:10px;' +
                    'overflow:hidden;margin-bottom:16px;position:relative;">' +
                        '<div class="dt-bex-bar" style="height:100%;width:0;background:#5a67d8;' +
                        'border-radius:4px;transition:width .4s ease;"></div>' +
                    '</div>' +
                    '<p class="dt-bex-pct" style="font-size:12px;font-weight:600;color:#5a67d8;margin:0 0 4px">0%</p>' +
                    '<p style="font-size:11px;color:var(--text-muted,#9ca3af);margin:0 0 18px">' +
                    '<i>Do not close or navigate away.</i></p>' +
                    '<button class="dt-bex-cancel-btn" style="padding:6px 18px;border:1px solid ' +
                    'var(--card-border,#e5e7eb);border-radius:8px;background:var(--card-bg,#fff);' +
                    'color:var(--text-muted,#6b7280);cursor:pointer;font-size:13px;">' +
                    '\u2715 Cancel</button>' +
                '</div>' +
                '<div class="dt-bex-error" style="display:none">' +
                    '<div style="font-size:40px;margin-bottom:12px">\u26A0\uFE0F</div>' +
                    '<h6 style="font-weight:600;color:#e53e3e;margin:0 0 8px">Export Failed</h6>' +
                    '<p class="dt-bex-error-msg" style="font-size:13px;color:var(--text-muted,#6b7280);' +
                    'margin:0 0 16px"></p>' +
                    '<button class="dt-bex-close-btn" style="padding:6px 18px;border:1px solid ' +
                    'var(--card-border,#e5e7eb);border-radius:8px;background:var(--card-bg,#fff);' +
                    'color:var(--text-muted,#6b7280);cursor:pointer;font-size:13px;">Close</button>' +
                '</div>' +
            '</div>';
        document.body.appendChild(batchModal);
        batchModal.querySelector('.dt-bex-cancel-btn').onclick = function(){ cancelBatchExport(); };
        batchModal.querySelector('.dt-bex-close-btn').onclick = function(){ batchModal.classList.remove('show'); };
        // ─────────────────────────────────────────────────────────────────────

        // Table wrapper
        var wrapper = document.createElement('div');
        wrapper.className = 'dt-table-wrapper';
        wrapper.appendChild(table);
        container.appendChild(wrapper);

        function checkScroll(){
            if(wrapper.scrollWidth > wrapper.clientWidth + 2){
                wrapper.classList.add('dt-scrollable');
                wrapper.classList.toggle('dt-scrolled-right', wrapper.scrollLeft + wrapper.clientWidth >= wrapper.scrollWidth - 2);
            } else {
                wrapper.classList.remove('dt-scrollable', 'dt-scrolled-right');
            }
        }
        wrapper.addEventListener('scroll', checkScroll);
        window.addEventListener('resize', checkScroll);

        // Headers
        var headers = [];
        var ths = table.querySelectorAll('thead th');
        ths.forEach(function(th){
            headers.push({
                col: th.dataset.col || '',
                render: th.dataset.render || '',
                inline: th.dataset.inline || '',
                sortable: th.classList.contains('dt-sort'),
                clickable: th.classList.contains('dt-clickable'),
                label: th.textContent.trim(),
                statusRoute: th.dataset.statusRoute || statusRoute,
                index: headers.length
            });
        });

        // Checkbox column
        if(hasCheckbox){
            var checkTh = document.createElement('th');
            checkTh.className = 'dt-checkbox-col';
            var checkAll = document.createElement('input');
            checkAll.type = 'checkbox'; checkAll.className = 'dt-checkbox';
            checkAll.onchange = function(){
                var checked = this.checked;
                state.selected = checked ? state.data.map(function(r){ return r.id; }) : [];
                updateCheckboxes(); updateBulkUI();
            };
            checkTh.appendChild(checkAll);
            table.querySelector('thead tr').insertBefore(checkTh, table.querySelector('thead tr').firstChild);
            headers.unshift({ col: '_checkbox', render: 'checkbox', label: '', index: -1 });
        }

        // Column visibility menu
        if (hasColvis && colvisDropdown) {
            headers.forEach(function(h, idx) {
                if (!h.label || h.render === 'checkbox' || h.render === 'actions') return;
                var item = document.createElement('label');
                item.className = 'dt-colvis-item';
                var cb = document.createElement('input');
                cb.type = 'checkbox';
                cb.checked = state.hiddenCols.indexOf(idx) === -1;
                cb.onchange = function() {
                    if (this.checked) { state.hiddenCols = state.hiddenCols.filter(function(i) { return i !== idx; }); }
                    else { state.hiddenCols.push(idx); }
                    try { localStorage.setItem('dt_colvis_' + tableId, JSON.stringify(state.hiddenCols)); } catch(e) {}
                    applyColumnVisibility();
                };
                item.appendChild(cb);
                item.appendChild(document.createTextNode(h.label));
                colvisMenu.appendChild(item);
            });
        }

        function applyColumnVisibility() {
            var allThs = table.querySelectorAll('thead th');
            allThs.forEach(function(th, idx) { th.classList.toggle('dt-col-hidden', state.hiddenCols.indexOf(idx) !== -1); });
            table.querySelectorAll('tbody tr').forEach(function(tr) {
                tr.querySelectorAll('td').forEach(function(td, idx) { td.classList.toggle('dt-col-hidden', state.hiddenCols.indexOf(idx) !== -1); });
            });
        }

        // Sort
        ths.forEach(function(th){
            if(th.classList.contains('dt-sort')){
                th.onclick = function(){
                    var col = th.dataset.col;
                    if(state.sort === col){ state.dir = state.dir === 'asc' ? 'desc' : 'asc'; }
                    else { state.sort = col; state.dir = 'asc'; }
                    state.page = 1; load();
                };
            }
        });

        // Pagination container
        var pagination = document.createElement('div');
        pagination.className = 'dt-pagination';
        container.appendChild(pagination);

        // External filters
        var extFilterEls = [];
        document.querySelectorAll('[data-dt-filter][data-dt-table="' + tableId + '"]').forEach(function(el){
            el.addEventListener('change', function(){
                var col = this.dataset.dtFilter;
                if(statActiveFilters[col] !== undefined){
                    delete statActiveFilters[col];
                    if(statsBar) statsBar.querySelectorAll('.dt-stat-active[data-filter-col="'+col+'"]').forEach(function(c){ c.classList.remove('dt-stat-active'); });
                }
                state.filters[col] = this.value;
                state.page = 1;
                load();
            });
            extFilterEls.push(el);
        });
        if(document.querySelectorAll('.dt-table[data-route]').length === 1){
            document.querySelectorAll('[data-dt-filter]:not([data-dt-table])').forEach(function(el){
                el.addEventListener('change', function(){
                    var col = this.dataset.dtFilter;
                    if(statActiveFilters[col] !== undefined){
                        delete statActiveFilters[col];
                        if(statsBar) statsBar.querySelectorAll('.dt-stat-active[data-filter-col="'+col+'"]').forEach(function(c){ c.classList.remove('dt-stat-active'); });
                    }
                    state.filters[col] = this.value;
                    state.page = 1;
                    load();
                });
                extFilterEls.push(el);
            });
        }

        /* v3.2 — Auto-collapsible external filters */
        var filterBadgeEl = null;

        if (extFilterEls.length > 0) {
            var visibleFilters = extFilterEls.filter(function(el) {
                return !el.closest('[style*="display:none"], [style*="display: none"]');
            });

            if (visibleFilters.length > 0) {
                var filterContainer = null;
                var candidate = visibleFilters[0].parentElement;
                while (candidate && candidate !== document.body) {
                    var containsAll = true;
                    for (var fi = 0; fi < visibleFilters.length; fi++) {
                        if (!candidate.contains(visibleFilters[fi])) { containsAll = false; break; }
                    }
                    if (containsAll) { filterContainer = candidate; break; }
                    candidate = candidate.parentElement;
                }

                if (filterContainer) {
                    var depth = 0;
                    var check = visibleFilters[0].parentElement;
                    while (check && check !== filterContainer) { depth++; check = check.parentElement; }

                    if (depth <= 4 && !filterContainer.classList.contains('dt-container')) {
                        var toggleBar = document.createElement('div');
                        toggleBar.className = 'dt-ext-filter-toggle';
                        toggleBar.innerHTML =
                            '<div class="dt-ext-filter-toggle-left">' +
                                '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>' +
                                'Filters' +
                                '<span class="dt-ext-filter-badge" id="dtFB_' + tableId + '">0</span>' +
                            '</div>' +
                            '<svg class="dt-ext-filter-chevron" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>';

                        toggleBar.onclick = function() {
                            toggleBar.classList.toggle('open');
                            filterContainer.classList.toggle('open');
                        };

                        filterContainer.classList.add('dt-ext-filter-panel');
                        filterContainer.parentNode.insertBefore(toggleBar, filterContainer);
                        filterBadgeEl = toggleBar.querySelector('.dt-ext-filter-badge');
                    }
                }
            }

            function updateFilterBadge() {
                if (!filterBadgeEl) return;
                var count = 0;
                extFilterEls.forEach(function(el) { if (el.value && el.value !== '') count++; });
                filterBadgeEl.textContent = count;
                filterBadgeEl.classList.toggle('show', count > 0);
            }

            extFilterEls.forEach(function(el) {
                el.addEventListener('change', function() { setTimeout(updateFilterBadge, 50); });
            });

            setTimeout(updateFilterBadge, 100);
        }

        // Close dropdowns
        document.addEventListener('click', function(e){
            if(e.target.closest && (e.target.closest('.dt-dropdown-btn') || e.target.closest('.dt-colvis-btn'))) return;
            closeAllDropdowns();
            if (colvisDropdown) colvisDropdown.querySelector('.dt-colvis-menu').classList.remove('open');
        });
        document.addEventListener('keydown', function(e){
            if(e.key === 'Escape'){
                closeAllDropdowns();
                if (colvisDropdown) colvisDropdown.querySelector('.dt-colvis-menu').classList.remove('open');
                if(confirmModal && confirmModal.classList.contains('show')) confirmModal.classList.remove('show');
                if(importModal && importModal.classList.contains('show')) importModal.classList.remove('show');
                if(exportModal && exportModal.classList.contains('show')) exportModal.classList.remove('show');
            }
        });

        function closeAllDropdowns(){ container.querySelectorAll('.dt-dropdown.open').forEach(function(d){ d.classList.remove('open'); }); }

        function applyPermissions(){
            if(exportBtnEl) exportBtnEl.classList.toggle('dt-hidden', !permissions.canExport);
            if(importBtn) importBtn.classList.toggle('dt-hidden', !permissions.canImport);
        }

        // Bulk actions
        function loadBulkActions(){
            if(Object.keys(bulkActionsConfig).length > 0){ renderBulkActions(bulkActionsConfig); return; }
            fetch(route + '?bulk_actions=1').then(function(r){ return r.json(); }).then(function(json){
                if(json.actions){ bulkActionsConfig = json.actions; renderBulkActions(json.actions); }
                if(json._permissions){ permissions = json._permissions; applyPermissions(); }
            }).catch(function(){ renderBulkActions({ delete: { label: 'Delete', confirm: true, color: 'red' }}); });
        }

        function renderBulkActions(actions){
            bulkMenu.innerHTML = '';
            var keys = Object.keys(actions);
            if(keys.length === 0){ bulkDropdown.classList.add('dt-hidden'); return; }
            keys.forEach(function(key){
                var action = actions[key];
                var item = document.createElement('button');
                item.className = 'dt-dropdown-item'; item.type = 'button';
                if(action.color) item.dataset.color = action.color;
                item.innerHTML = '<span class="dt-icon">' + getActionIcon(key) + '</span><span>' + action.label + '</span>';
                item.onclick = function(e){ e.stopPropagation(); bulkDropdown.classList.remove('open'); handleBulkAction(key, action); };
                bulkMenu.appendChild(item);
            });
        }

        function getActionIcon(a){
            var icons = { 'delete':'\uD83D\uDDD1\uFE0F','activate':'\u2705','deactivate':'\u26D4','restore':'\u267B\uFE0F','export':'\uD83D\uDCE4','complete':'\u2705','pending':'\u23F3','in_progress':'\uD83D\uDD04','sent':'\uD83D\uDCE8','paid':'\uD83D\uDCB0','cancelled':'\u274C','approved':'\u2705','rejected':'\u26D4' };
            return icons[a] || '\u26A1';
        }

        bulkBtn.onclick = function(e){ e.preventDefault(); e.stopPropagation(); var w = bulkDropdown.classList.contains('open'); closeAllDropdowns(); if(!w) bulkDropdown.classList.add('open'); };

        // ── Stats Cards ──────────────────────────────────────────────────────
        var statsBar = null;

        function renderStats(stats){
            if(!stats || !stats.length) return;
            if(!statsBar){
                statsBar = document.createElement('div');
                statsBar.className = 'dt-stats-bar';
                var anchorId = table.dataset.statsAnchor;
                var anchor   = anchorId ? document.getElementById(anchorId) : null;
                if(anchor){ anchor.appendChild(statsBar); }
                else { container.parentNode.insertBefore(statsBar, container); }
                stats.forEach(function(s){
                    var colorClass   = 'dt-stat-' + (s.color || 'blue');
                    var isFilterable = s.filter_col && s.filter_col !== '*' && s.filter_val !== null && s.filter_val !== undefined;
                    var card = document.createElement('div');
                    card.className = 'dt-stat-card ' + colorClass;
                    if(isFilterable || !s.filter_col){ card.style.cursor = 'pointer'; }
                    if(isFilterable){ card.setAttribute('data-filter-col', s.filter_col); card.setAttribute('data-filter-val', s.filter_val); card.title = 'Filter by ' + s.label; }
                    else { card.title = 'Click to clear filters'; }
                    card.innerHTML =
                        '<div class="dt-stat-icon">' + (s.icon || '📊') + '</div>' +
                        '<div class="dt-stat-body">' +
                            '<div class="dt-stat-value" data-stat-value>' + formatStatNum(s) + '</div>' +
                            '<div class="dt-stat-label">' + s.label + '</div>' +
                        '</div>';
                    if(isFilterable){ card.addEventListener('click', onStatCardClick); }
                    else { card.addEventListener('click', onStatCardClearAll); }
                    statsBar.appendChild(card);
                });
                return;
            }
            var cards = statsBar.querySelectorAll('.dt-stat-card');
            stats.forEach(function(s, i){
                if(cards[i]){ var valEl = cards[i].querySelector('[data-stat-value]'); if(valEl) valEl.textContent = formatStatNum(s); }
            });
        }

        function formatStatNum(s){
            var num = typeof s.value === 'number'
                ? (Number.isInteger(s.value)
                    ? s.value.toLocaleString('en-IN')
                    : parseFloat(s.value).toLocaleString('en-IN', { minimumFractionDigits:2, maximumFractionDigits:2 }))
                : s.value;
            return (s.prefix || '') + num + (s.suffix || '');
        }

        function onStatCardClick(){
            var col      = this.getAttribute('data-filter-col');
            var val      = this.getAttribute('data-filter-val');
            var isActive = this.classList.contains('dt-stat-active');
            var prevCols = [];
            statsBar.querySelectorAll('.dt-stat-active').forEach(function(c){ var prevCol = c.getAttribute('data-filter-col'); if(prevCol && prevCols.indexOf(prevCol) === -1) prevCols.push(prevCol); c.classList.remove('dt-stat-active'); });
            var otherCols = prevCols.filter(function(c){ return c !== col; });
            otherCols.forEach(function(prevCol){ applyStatFilter(prevCol, '', true); });
            if(isActive){ applyStatFilter(col, ''); table.dispatchEvent(new CustomEvent('dt:statClick', { detail:{column:col, value:'', cleared:true}, bubbles:true })); }
            else { this.classList.add('dt-stat-active'); applyStatFilter(col, val); table.dispatchEvent(new CustomEvent('dt:statClick', { detail:{column:col, value:val, cleared:false}, bubbles:true })); }
        }

        function onStatCardClearAll(){
            var hadActive = statsBar && statsBar.querySelector('.dt-stat-active');
            if(!hadActive) return;
            var prevCols = [];
            statsBar.querySelectorAll('.dt-stat-active').forEach(function(c){ var prevCol = c.getAttribute('data-filter-col'); if(prevCol && prevCols.indexOf(prevCol) === -1) prevCols.push(prevCol); c.classList.remove('dt-stat-active'); });
            clearStatFilters(prevCols);
            table.dispatchEvent(new CustomEvent('dt:statClick', { detail:{column:null, value:'', cleared:true}, bubbles:true }));
        }

        var statActiveFilters = {};
        function applyStatFilter(col, val, silent){ if(val === '' || val === null || val === undefined){ delete statActiveFilters[col]; delete state.filters[col]; } else { statActiveFilters[col] = val; state.filters[col] = val; } if(!silent){ state.page = 1; load(); } }
        function clearStatFilters(cols){ cols.forEach(function(col){ delete statActiveFilters[col]; delete state.filters[col]; }); state.page = 1; load(); }
        // ─────────────────────────────────────────────────────────────────────

        // Load data
        function load(){
            var tbody = table.querySelector('tbody');
            tbody.innerHTML = '';
            var params = new URLSearchParams();
            params.set('page', state.page); params.set('per_page', state.perPage);
            params.set('sort', state.sort); params.set('dir', state.dir);
            if(state.search) params.set('search', state.search);
            if(state.trashed) params.set('trashed', state.trashed);
            Object.keys(state.filters).forEach(function(k){ if(state.filters[k]) params.set(k, state.filters[k]); });
            fetch(route + '?' + params.toString())
                .then(function(r){ return r.json(); })
                .then(function(json){
                    state.data = json.data || [];
                    state.total = json.total || 0;
                    state.lastPage = json.last_page || 1;
                    state.summary = json._summary || {};
                    if(json._permissions){ permissions = json._permissions; applyPermissions(); }
                    if(json._stats) renderStats(json._stats);
                    if(typeof json._trash_count !== 'undefined'){ state.trashCount = json._trash_count; table.dispatchEvent(new CustomEvent('dt:trashCount', { detail: { count: json._trash_count }, bubbles: true })); }
                    render(); updateSortUI(); updateCheckboxes(); updateBulkUI(); applyColumnVisibility();
                    setTimeout(checkScroll, 50);
                })
                .catch(function(){
                    tbody.innerHTML = '<tr><td colspan="' + headers.length + '" class="dt-empty"><div class="dt-empty-icon">\u26A0\uFE0F</div><div class="dt-empty-text">Error loading data</div></td></tr>';
                });
        }

        // Render
        function render(){
            var tbody = table.querySelector('tbody');
            tbody.innerHTML = '';
            if(state.data.length === 0){
                var emptyMsg = state.trashed === 'only' ? 'Trash is empty' : emptyMessage;
                tbody.innerHTML = '<tr><td colspan="' + headers.length + '" class="dt-empty"><div class="dt-empty-icon">\uD83D\uDCED</div><div class="dt-empty-text">' + emptyMsg + '</div></td></tr>';
                renderPagination(); return;
            }
            state.data.forEach(function(row, index){
                var tr = document.createElement('tr');
                tr.dataset.id = row.id;
                var rowNum = (state.page - 1) * state.perPage + index + 1;
                if(state.selected.indexOf(row.id) !== -1) tr.classList.add('selected');
                headers.forEach(function(h, colIdx){
                    var td = document.createElement('td');
                    var val = h.col ? row[h.col] : '';
                    if (h.label) td.setAttribute('data-label', h.label);
                    if(h.render === 'row_num'){ td.className = 'dt-rownum-col'; td.textContent = rowNum; }
                    else if(h.render === 'checkbox'){
                        td.className = 'dt-checkbox-col';
                        var cb = document.createElement('input');
                        cb.type = 'checkbox'; cb.className = 'dt-checkbox';
                        cb.checked = state.selected.indexOf(row.id) !== -1;
                        cb.onchange = function(){ if(this.checked){ if(state.selected.indexOf(row.id) === -1) state.selected.push(row.id); } else { state.selected = state.selected.filter(function(id){ return id !== row.id; }); } tr.classList.toggle('selected', this.checked); updateBulkUI(); };
                        td.appendChild(cb);
                    }
                    else if(h.render === 'actions'){ td.className = 'dt-actions-col'; td.innerHTML = renderActions(row); }
                    else if(h.render === 'badge'){ td.innerHTML = '<span class="dt-badge dt-badge-' + String(val).toLowerCase().replace(/\s+/g, '_') + '">' + formatValue(val) + '</span>'; }
                    else if(h.render === 'statusToggle'){ td.innerHTML = renderStatusToggle(row, h); }
                    else if(h.render === 'date'){ td.textContent = val ? new Date(val).toLocaleDateString() : '-'; }
                    else if(h.render === 'datetime'){ td.textContent = val ? new Date(val).toLocaleString() : '-'; }
                    else if(h.render === 'currency'){ td.textContent = val !== null && val !== undefined && val !== '' ? parseFloat(val).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '-'; }
                    else if(h.render === 'image'){ if(val){ var img = document.createElement('img'); img.src = val; img.className = 'dt-thumbnail'; img.alt = ''; img.onerror = function(){ this.style.display = 'none'; }; td.appendChild(img); } else td.textContent = '-'; }
                    else if(h.render === 'link'){ if(val){ var a = document.createElement('a'); a.href = val; a.className = 'dt-link'; a.target = '_blank'; a.rel = 'noopener'; a.textContent = val.replace(/^https?:\/\//, '').substring(0, 40); td.appendChild(a); } else td.textContent = '-'; }
                    else if(h.render === 'truncate'){ td.className = 'dt-truncate'; td.textContent = val || '-'; if(val && val.length > 30) td.title = val; }
                    else if(h.render === 'progress'){ var pct = Math.min(100, Math.max(0, parseInt(val) || 0)); var color = pct >= 75 ? '#48bb78' : pct >= 40 ? '#ecc94b' : '#e53e3e'; td.innerHTML = '<div style="display:flex;align-items:center;"><div class="dt-progress"><div class="dt-progress-bar" style="width:' + pct + '%;background:' + color + ';"></div></div><span class="dt-progress-text">' + pct + '%</span></div>'; }
                    else if(h.render === 'avatar'){ if(val && val.startsWith('http')){ td.innerHTML = '<img src="' + val + '" class="dt-avatar" onerror="this.style.display=\'none\'">'; } else { var name = val || row.name || '?'; var initials = name.split(' ').map(function(n){ return n.charAt(0); }).join('').substring(0, 2).toUpperCase(); td.innerHTML = '<div class="dt-avatar">' + initials + '</div>'; } }
                    else if(window.dtRenders && window.dtRenders[h.render]){ td.innerHTML = window.dtRenders[h.render](val, row); }
                    else if(h.inline && permissions.canEdit){
                        td.className = 'dt-inline-cell';
                        td.setAttribute('data-field', h.inline);
                        td.setAttribute('data-id', row.id);
                        td.setAttribute('data-val', val !== null && val !== undefined ? val : '');
                        td.innerHTML = '<span class="dt-inline-display">' + (val !== null && val !== undefined ? val : '-') + '</span>' +
                            '<span class="dt-inline-edit-icon" title="Click to edit">\u270F\uFE0F</span>';
                        td.onclick = function(e){ if(!td.classList.contains('editing')) activateInlineEdit(td, row.id, h.inline, route); };
                    }
                    else if(h.clickable && row._show_url){ td.className = 'dt-clickable-cell'; td.textContent = val || '-'; td.onclick = function(){ window.location.href = row._show_url; }; }
                    else { td.textContent = val !== null && val !== undefined ? val : '-'; }
                    tr.appendChild(td);
                });
                tbody.appendChild(tr);
            });
            if (Object.keys(state.summary).length > 0) {
                var sumTr = document.createElement('tr');
                sumTr.className = 'dt-summary-row';
                headers.forEach(function(h, idx) {
                    var td = document.createElement('td');
                    if (state.summary[h.col]) { td.textContent = parseFloat(state.summary[h.col].sum).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); td.style.fontWeight = '700'; }
                    else if (h.render === 'row_num' || h.render === 'checkbox') { td.textContent = ''; }
                    else if (idx <= 1) { td.textContent = 'Totals'; td.style.fontWeight = '700'; }
                    sumTr.appendChild(td);
                });
                tbody.appendChild(sumTr);
            }
            renderPagination();
        }

        function renderStatusToggle(row, h) {
            var val = row[h.col];
            var isOn = val == 1 || val === true || val === 'active' || val === 'yes';
            var toggleRoute = h.statusRoute || statusRoute;
            return '<div class="dt-toggle-wrap"><button type="button" class="dt-toggle' + (isOn ? ' on' : '') + '" data-id="' + row.id + '" data-col="' + h.col + '" data-route="' + toggleRoute + '" onclick="dtToggleStatus(this)"></button><span class="dt-toggle-label">' + (isOn ? 'Active' : 'Inactive') + '</span></div>';
        }

        function renderActions(row){
            var html = '<div class="dt-actions">';
            if(state.trashed === 'only'){
                if(permissions.canEdit){ html += '<button type="button" class="dt-btn dt-btn-restore" onclick="dtRestore(\'' + route + '\', ' + row.id + ', \'' + tableId + '\')">Restore</button>'; }
            } else {
                if(row._show_url && permissions.canView) html += '<a href="' + row._show_url + '" class="dt-btn dt-btn-view">View</a>';
                if(row._edit_url && permissions.canEdit) html += '<a href="' + row._edit_url + '" class="dt-btn dt-btn-edit">Edit</a>';
                if(row._delete_url && permissions.canDelete) html += '<button type="button" class="dt-btn dt-btn-delete" onclick="dtDelete(\'' + row._delete_url + '\', \'' + tableId + '\')">Delete</button>';
            }
            html += '</div>';
            return html;
        }

        function formatValue(val){ if(val === null || val === undefined) return '-'; return String(val).replace(/_/g, ' '); }
        function formatDateLabel(dateStr){ try { var d = new Date(dateStr); var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; return d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear(); } catch(e){ return dateStr; } }

        function renderPagination(){
            var start = (state.page - 1) * state.perPage + 1;
            var end = Math.min(state.page * state.perPage, state.total);
            var html = '<div class="dt-info">Showing ' + (state.total ? start : 0) + '-' + end + ' of ' + state.total + '</div>';
            html += '<div class="dt-pages">';
            html += '<button ' + (state.page <= 1 ? 'disabled' : '') + ' onclick="dtPage(\'' + tableId + '\', 1)">First</button>';
            html += '<button ' + (state.page <= 1 ? 'disabled' : '') + ' onclick="dtPage(\'' + tableId + '\', ' + (state.page - 1) + ')">Prev</button>';
            var sp = Math.max(1, state.page - 2), ep = Math.min(state.lastPage, state.page + 2);
            for(var p = sp; p <= ep; p++) html += '<button class="' + (p === state.page ? 'active' : '') + '" onclick="dtPage(\'' + tableId + '\', ' + p + ')">' + p + '</button>';
            html += '<button ' + (state.page >= state.lastPage ? 'disabled' : '') + ' onclick="dtPage(\'' + tableId + '\', ' + (state.page + 1) + ')">Next</button>';
            html += '<button ' + (state.page >= state.lastPage ? 'disabled' : '') + ' onclick="dtPage(\'' + tableId + '\', ' + state.lastPage + ')">Last</button>';
            html += '</div>';
            pagination.innerHTML = html;
        }

        function updateSortUI(){ ths.forEach(function(th){ th.classList.remove('asc', 'desc'); if(th.dataset.col === state.sort) th.classList.add(state.dir); }); }

        // ── Inline Edit ──────────────────────────────────────────────────────
        function activateInlineEdit(td, id, field, dataRoute){
            td.classList.add('editing');
            var original = td.getAttribute('data-val');
            var display  = td.querySelector('.dt-inline-display');
            var icon     = td.querySelector('.dt-inline-edit-icon');
            if(display) display.style.display = 'none';
            if(icon)    icon.style.display = 'none';
            var input = document.createElement('input');
            input.type = 'text'; input.value = original; input.className = 'dt-inline-input';
            td.appendChild(input); input.focus(); input.select();
            function commit(){
                var newVal = input.value;
                if(newVal === original){ cancel(); return; }
                input.disabled = true;
                var csrf = document.querySelector('meta[name="csrf-token"]');
                fetch(dataRoute, { method: 'POST', headers: { 'X-CSRF-TOKEN': csrf ? csrf.content : '', 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ _inline_update: 1, id: id, field: field, value: newVal }) })
                .then(function(r){ return r.json(); })
                .then(function(json){ if(json.success){ var saved = json.value !== undefined ? json.value : newVal; td.setAttribute('data-val', saved); if(display){ display.textContent = saved || '-'; display.style.display = ''; } if(icon) icon.style.display = ''; input.remove(); td.classList.remove('editing'); showToast('Saved', 'success'); } else { showToast(json.message || 'Save failed', 'error'); cancel(); } })
                .catch(function(){ showToast('Save failed', 'error'); cancel(); });
            }
            function cancel(){ if(display) display.style.display = ''; if(icon) icon.style.display = ''; input.remove(); td.classList.remove('editing'); }
            input.onblur  = function(){ setTimeout(commit, 150); };
            input.onkeydown = function(e){ if(e.key === 'Enter'){ e.preventDefault(); input.blur(); } if(e.key === 'Escape'){ input.onblur = null; cancel(); } };
        }
        // ─────────────────────────────────────────────────────────────────────

        function updateCheckboxes(){
            table.querySelectorAll('tbody .dt-checkbox').forEach(function(cb){ var tr = cb.closest('tr'); if(!tr || !tr.dataset.id) return; var id = parseInt(tr.dataset.id); cb.checked = state.selected.indexOf(id) !== -1; tr.classList.toggle('selected', cb.checked); });
            var ca = table.querySelector('thead .dt-checkbox');
            if(ca){ ca.checked = state.data.length > 0 && state.selected.length === state.data.length; ca.indeterminate = state.selected.length > 0 && state.selected.length < state.data.length; }
        }

        function updateBulkUI(){
            var c = state.selected.length;
            if(c > 0){ selectedCount.textContent = c + ' selected'; selectedCount.classList.add('show'); if(bulkMenu.children.length > 0) bulkDropdown.classList.add('show'); }
            else { selectedCount.classList.remove('show'); bulkDropdown.classList.remove('show'); }
        }

        // =====================================================================
        // v3.5 — BATCH EXPORT (CSV / XLSX client-side via SheetJS)
        // =====================================================================

        var exportAbortController = null;

        /**
         * Build URLSearchParams for export requests.
         * Carries current search/filter/sort state + batch-specific params.
         */
        function buildExportParams(format, selectedOnly, extra) {
            var params = new URLSearchParams();
            params.set('export_batch', '1');
            params.set('format', format);
            params.set('sort', state.sort);
            params.set('dir', state.dir);
            if (state.search) params.set('search', state.search);
            Object.keys(state.filters).forEach(function(k){ if(state.filters[k]) params.set(k, state.filters[k]); });
            if (selectedOnly && state.selected.length > 0) params.set('ids', state.selected.join(','));
            if (extra) Object.keys(extra).forEach(function(k){ params.set(k, extra[k]); });
            return params;
        }

        function setBatchProgress(done, tot, label) {
            var pct    = tot > 0 ? Math.round((done / tot) * 100) : 0;
            var bar    = batchModal.querySelector('.dt-bex-bar');
            var pctEl  = batchModal.querySelector('.dt-bex-pct');
            var status = batchModal.querySelector('.dt-bex-status');
            if (bar)    bar.style.width = pct + '%';
            if (pctEl)  pctEl.textContent = pct + '%';
            if (status) status.textContent = label;
        }

        function showBatchError(msg) {
            batchModal.querySelector('.dt-bex-working').style.display = 'none';
            batchModal.querySelector('.dt-bex-error').style.display   = '';
            batchModal.querySelector('.dt-bex-error-msg').textContent = msg;
        }

        function cancelBatchExport() {
            if (exportAbortController) { exportAbortController.abort(); exportAbortController = null; }
            batchModal.classList.remove('show');
        }

        function doExport(format, selectedOnly) {
            if (!permissions.canExport) { showToast('No permission to export', 'error'); return; }
            // CSV / XLSX → AJAX batch
            startBatchExport(format, selectedOnly);
        }

        function startBatchExport(format, selectedOnly) {
            // Reset and show progress modal
            batchModal.querySelector('.dt-bex-working').style.display = '';
            batchModal.querySelector('.dt-bex-error').style.display   = 'none';
            batchModal.querySelector('.dt-bex-title').textContent     = 'Exporting as ' + format.toUpperCase() + '\u2026';
            setBatchProgress(0, 0, 'Preparing\u2026');
            batchModal.classList.add('show');

            exportAbortController = (typeof AbortController !== 'undefined') ? new AbortController() : null;
            var signal = exportAbortController ? exportAbortController.signal : undefined;

            var offset       = 0;
            var batchSize    = 500;
            var total        = null;
            var allRows      = [];
            var headerKeys   = null;
            var headerLabels = null;
            var exportTitle  = '';

            function fetchNext() {
                var extra = { offset: offset, batch_size: batchSize };
                if (total !== null) extra.total = total;
                var params = buildExportParams(format, selectedOnly, extra);
                var fetchOpts = { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } };
                if (signal) fetchOpts.signal = signal;

                fetch(route + '?' + params.toString(), fetchOpts)
                .then(function(r) {
                    if (!r.ok) {
                        return r.json().then(function(e){ throw new Error(e.message || 'Server error ' + r.status); })
                               .catch(function(){ throw new Error('Server error ' + r.status); });
                    }
                    return r.json();
                })
                .then(function(data) {
                    // First batch — capture metadata
                    if (offset === 0) {
                        total        = data.total        || 0;
                        headerKeys   = data.headers      || [];
                        headerLabels = data.header_labels || headerKeys;
                        exportTitle  = data.title         || 'Export';
                    }

                    if (data.rows && data.rows.length) {
                        allRows = allRows.concat(data.rows);
                    }

                    offset = data.next_offset || (offset + batchSize);

                    setBatchProgress(
                        allRows.length, total,
                        'Fetched ' + allRows.length.toLocaleString() +
                        (total ? ' of ' + total.toLocaleString() : '') + ' rows\u2026'
                    );

                    if (data.has_more) {
                        // Small timeout so the progress bar repaints
                        setTimeout(fetchNext, 20);
                    } else {
                        // All rows collected — generate file
                        setBatchProgress(total || allRows.length, total || allRows.length, 'Generating file\u2026');
                        setTimeout(function() {
                            try {
                                var dateStamp = (function(){
                                    var d = new Date();
                                    return d.getFullYear() + '-' +
                                        String(d.getMonth()+1).padStart(2,'0') + '-' +
                                        String(d.getDate()).padStart(2,'0') + '_' +
                                        String(d.getHours()).padStart(2,'0') +
                                        String(d.getMinutes()).padStart(2,'0');
                                })();
                                var modelSlug = route.split('/').filter(Boolean).slice(-2)[0] || 'export';
                                var filename  = modelSlug + '_' + dateStamp + '.' + format;

                                if (format === 'xlsx') {
                                    generateXlsx(headerLabels, allRows, filename, exportTitle);
                                } else {
                                    generateCsv(headerLabels, allRows, filename);
                                }

                                batchModal.classList.remove('show');
                                showToast(
                                    allRows.length.toLocaleString() + ' records exported as ' + format.toUpperCase(),
                                    'success'
                                );
                            } catch(genErr) {
                                showBatchError('File generation failed: ' + genErr.message);
                            }
                        }, 80);
                    }
                })
                .catch(function(err) {
                    if (err && err.name === 'AbortError') {
                        batchModal.classList.remove('show');
                        return;
                    }
                    showBatchError(err.message || 'Unexpected error during export.');
                });
            }

            fetchNext();
        }

        // ── Client-side XLSX via SheetJS ─────────────────────────────────────
        function generateXlsx(labelRow, rows, filename, sheetTitle) {
            if (typeof XLSX === 'undefined') {
                showToast('SheetJS library not loaded yet — please try again.', 'error');
                return;
            }
            // Build array-of-arrays: header row + data rows
            var aoa = [labelRow.map(function(v){ return v === null || v === undefined ? '' : String(v); })];
            rows.forEach(function(row) {
                var vals = Array.isArray(row)
                    ? row
                    : Object.values(row);
                aoa.push(vals.map(function(v){ return (v === null || v === undefined) ? '' : v; }));
            });

            var ws = XLSX.utils.aoa_to_sheet(aoa);

            // Auto column widths (sample up to 300 rows for performance)
            var sample = aoa.slice(0, 301);
            ws['!cols'] = labelRow.map(function(h, i) {
                var max = String(h || '').length;
                sample.forEach(function(r){ var l = String(r[i] || '').length; if(l > max) max = l; });
                return { wch: Math.min(Math.max(max + 2, 8), 50) };
            });

            // Freeze header row
            ws['!freeze'] = { xSplit: 0, ySplit: 1 };

            var wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, (sheetTitle || 'Export').substring(0, 31));
            XLSX.writeFile(wb, filename);
        }

        // ── Client-side CSV ───────────────────────────────────────────────────
        function generateCsv(labelRow, rows, filename) {
            function esc(v) {
                var s = String(v === null || v === undefined ? '' : v);
                return (s.indexOf(',') !== -1 || s.indexOf('"') !== -1 || s.indexOf('\n') !== -1 || s.indexOf('\r') !== -1)
                    ? '"' + s.replace(/"/g, '""') + '"'
                    : s;
            }
            var lines = [labelRow.map(esc).join(',')];
            rows.forEach(function(row) {
                var vals = Array.isArray(row) ? row : Object.values(row);
                lines.push(vals.map(esc).join(','));
            });
            // UTF-8 BOM so Excel opens it correctly
            var blob = new Blob(['\uFEFF' + lines.join('\r\n')], { type: 'text/csv;charset=utf-8;' });
            var url  = URL.createObjectURL(blob);
            var a    = document.createElement('a');
            a.href = url; a.download = filename;
            document.body.appendChild(a); a.click();
            document.body.removeChild(a);
            setTimeout(function(){ URL.revokeObjectURL(url); }, 1000);
        }
        // =====================================================================

        function doPrint() {
            var printWin = window.open('', '_blank');
            var html = '<html><head><title>Print</title><style>body{font-family:Arial,sans-serif;font-size:12px;margin:20px}table{width:100%;border-collapse:collapse}th,td{padding:8px;border:1px solid #ddd;text-align:left}th{background:#f8f9fa;font-weight:bold}.dt-col-hidden{display:none!important}</style></head><body>';
            html += '<h2>' + document.title + '</h2>';
            html += '<table>' + table.querySelector('thead').outerHTML + '<tbody>';
            state.data.forEach(function(row, idx) {
                html += '<tr>';
                headers.forEach(function(h) { if (h.render === 'checkbox' || h.render === 'actions') return; var val = h.render === 'row_num' ? (idx + 1) : (row[h.col] || '-'); html += '<td>' + val + '</td>'; });
                html += '</tr>';
            });
            html += '</tbody></table><script>setTimeout(function(){window.print();},200)<\/script></body></html>';
            printWin.document.write(html); printWin.document.close();
        }

        function handleBulkAction(action, config){ if(state.selected.length === 0){ showToast('No items selected', 'error'); return; } if(config.confirm){ showConfirmModal('Confirm ' + config.label, 'Are you sure you want to ' + config.label.toLowerCase() + ' ' + state.selected.length + ' items?', function(){ executeBulkAction(action); }); } else { executeBulkAction(action); } }

        function executeBulkAction(action){
            var csrf = document.querySelector('meta[name="csrf-token"]');
            fetch(bulkRoute, { method: 'POST', headers: { 'X-CSRF-TOKEN': csrf ? csrf.content : '', 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ action: action, ids: state.selected }) })
            .then(function(r){ return r.json(); })
            .then(function(json){ if(json.success !== false){ showToast(json.message || 'Action completed', 'success'); state.selected = []; load(); } else { showToast(json.message || 'Action failed', 'error'); } })
            .catch(function(){ showToast('Action failed', 'error'); });
        }

        // Confirm Modal
        var confirmModal = null;
        function showConfirmModal(title, message, onConfirm){
            if(!confirmModal){
                confirmModal = document.createElement('div');
                confirmModal.className = 'dt-modal-overlay';
                confirmModal.innerHTML = '<div class="dt-modal"><div class="dt-modal-header"><span class="dt-modal-title"></span><button type="button" class="dt-modal-close">&times;</button></div><div class="dt-modal-body"><p class="dt-confirm-message"></p></div><div class="dt-modal-footer"><button type="button" class="dt-btn-cancel">Cancel</button><button type="button" class="dt-btn-submit dt-btn-danger">Confirm</button></div></div>';
                document.body.appendChild(confirmModal);
                confirmModal.querySelector('.dt-modal-close').onclick = function(){ confirmModal.classList.remove('show'); };
                confirmModal.querySelector('.dt-btn-cancel').onclick = function(){ confirmModal.classList.remove('show'); };
                confirmModal.onclick = function(e){ if(e.target === confirmModal) confirmModal.classList.remove('show'); };
            }
            confirmModal.querySelector('.dt-modal-title').textContent = title;
            confirmModal.querySelector('.dt-confirm-message').textContent = message;
            var cb = confirmModal.querySelector('.dt-btn-submit');
            cb.onclick = function(){ confirmModal.classList.remove('show'); onConfirm(); };
            confirmModal.classList.add('show');
        }

        // Toast (stacking)
        function showToast(message, type){
            var offset = 20 + (toastCount * 60);
            var toast = document.createElement('div');
            toast.style.cssText = 'position:fixed;bottom:' + offset + 'px;right:20px;padding:12px 18px;border-radius:8px;color:#fff;font-size:13px;font-weight:500;z-index:10000;animation:dtFadeIn 0.2s;box-shadow:0 4px 12px rgba(0,0,0,0.15);max-width:340px;';
            toast.style.background = type === 'error' ? '#e53e3e' : type === 'warning' ? '#dd6b20' : '#38a169';
            toast.textContent = message;
            document.body.appendChild(toast);
            toastCount++;
            setTimeout(function(){ toast.style.opacity = '0'; toast.style.transition = 'opacity 0.3s'; setTimeout(function(){ toast.remove(); toastCount = Math.max(0, toastCount - 1); }, 300); }, 3000);
        }

        /* =====================================================================
           v3.3/v3.5 — EXPORT MODAL  (CSV + XLSX only)
           ===================================================================== */
        var exportModal = null;
        function getExportInfoHtml(){
            var hasSelection = state.selected.length > 0;
            var infoClass = 'dt-export-modal-info';
            var infoText = '';
            if(hasSelection){
                infoClass += ' has-selection';
                infoText = '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>';
                infoText += '<strong>' + state.selected.length + ' record' + (state.selected.length > 1 ? 's' : '') + ' selected</strong> — only selected rows will be exported.';
            } else {
                var parts = [];
                var f = state.filters;
                if(f.from_date || f.to_date){ var from = f.from_date ? formatDateLabel(f.from_date) : '...'; var to = f.to_date ? formatDateLabel(f.to_date) : 'now'; parts.push(from + ' \u2013 ' + to); }
                var skip = ['from_date','to_date','page','per_page','search','sort','dir'];
                Object.keys(f).forEach(function(k){ if(skip.indexOf(k) !== -1 || !f[k]) return; var label = k.replace(/_id$/, '').replace(/_/g, ' '); label = label.charAt(0).toUpperCase() + label.slice(1); var val = String(f[k]).replace(/_/g, ' '); parts.push(label + ': <strong>' + val + '</strong>'); });
                if(state.search){ parts.push('Search: <strong>"' + state.search + '"</strong>'); }
                if(parts.length > 0){
                    infoClass += ' has-filters';
                    infoText = '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>';
                    infoText += 'Exporting filtered data: ' + parts.join(' &bull; ');
                } else {
                    infoText = '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6M12 9v6"/></svg>';
                    infoText += 'Exporting <strong>all ' + state.total + ' record' + (state.total !== 1 ? 's' : '') + '</strong>';
                }
            }
            return '<div class="' + infoClass + '">' + infoText + '</div>';
        }

        function showExportModal(){
            if(!permissions.canExport){ showToast('No permission to export', 'error'); return; }
            if(!exportModal){
                exportModal = document.createElement('div');
                exportModal.className = 'dt-modal-overlay';
                exportModal.innerHTML =
                    '<div class="dt-modal">' +
                        '<div class="dt-modal-header"><span class="dt-modal-title">\uD83D\uDCE4 Export Data</span><button type="button" class="dt-modal-close">&times;</button></div>' +
                        '<div class="dt-modal-body">' +
                            '<div class="dt-export-info-slot"></div>' +
                            '<div class="dt-export-formats">' +
                                '<button type="button" class="dt-export-format-btn" data-format="csv">' +
                                    '<div class="dt-export-format-icon csv">\uD83D\uDCC4</div>' +
                                    '<div><div class="dt-export-format-label">CSV</div><div class="dt-export-format-desc">Comma-separated — all rows, client-side</div></div>' +
                                    '<span class="dt-export-format-ext">csv</span>' +
                                '</button>' +
                                '<button type="button" class="dt-export-format-btn" data-format="xlsx">' +
                                    '<div class="dt-export-format-icon xlsx">\uD83D\uDCCA</div>' +
                                    '<div><div class="dt-export-format-label">Excel</div><div class="dt-export-format-desc">XLSX spreadsheet — all rows, client-side</div></div>' +
                                    '<span class="dt-export-format-ext">xlsx</span>' +
                                '</button>' +

                            '</div>' +
                        '</div>' +
                        '<div class="dt-modal-footer"><button type="button" class="dt-btn-cancel">Cancel</button></div>' +
                    '</div>';
                document.body.appendChild(exportModal);
                exportModal.querySelectorAll('.dt-export-format-btn').forEach(function(btn){
                    btn.onclick = function(){
                        var format = this.dataset.format;
                        exportModal.classList.remove('show');
                        doExport(format, state.selected.length > 0);
                    };
                });
                exportModal.querySelector('.dt-modal-close').onclick = function(){ exportModal.classList.remove('show'); };
                exportModal.querySelector('.dt-btn-cancel').onclick = function(){ exportModal.classList.remove('show'); };
                exportModal.onclick = function(e){ if(e.target === exportModal) exportModal.classList.remove('show'); };
            }
            exportModal.querySelector('.dt-export-info-slot').innerHTML = getExportInfoHtml();
            exportModal.classList.add('show');
        }

        // =====================================================================
        // v3.4 — IMPORT MODAL (loading overlay + JSON parse fix)
        // =====================================================================
        var importModal = null;
        var selectedFile = null;

        function formatBytes(bytes){
            if(bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
            if(bytes >= 1024)    return (bytes / 1024).toFixed(0) + ' KB';
            return bytes + ' B';
        }

        /**
         * Safe JSON parse helper — v3.4 fix.
         * Checks Content-Type BEFORE calling .json() to avoid
         * "Unexpected token '<'" when server returns HTML error page.
         */
        function safeJson(response){
            var ct = response.headers.get('content-type') || '';
            if(!ct.includes('application/json')){
                return response.text().then(function(body){
                    var titleMatch = body.match(/<title>([^<]{1,120})<\/title>/i);
                    var hint = titleMatch ? titleMatch[1].trim() : ('HTTP ' + response.status);
                    if(response.status === 413){ throw new Error('File too large — server rejected the upload (413). Please split into smaller batches.'); }
                    if(response.status === 504 || response.status === 502){ throw new Error('Server timed out (504). The file is too large for one request. Please split into batches of 1,000 rows.'); }
                    if(response.status === 500 && body.toLowerCase().includes('memory')){ throw new Error('Server ran out of memory. Upgrade PHP memory_limit or split the file into smaller batches.'); }
                    throw new Error('Server returned an error page instead of JSON (' + hint + '). Check the Laravel log for details.');
                });
            }
            return response.json();
        }

        function showImportModal(){
            if(!permissions.canImport){ showToast('No permission to import', 'error'); return; }
            if(!importModal){
                importModal = document.createElement('div');
                importModal.className = 'dt-modal-overlay';
                importModal.innerHTML =
                    '<div class="dt-modal">' +
                        '<div class="dt-modal-header">' +
                            '<span class="dt-modal-title">\uD83D\uDCE5 Import Data</span>' +
                            '<button type="button" class="dt-modal-close">&times;</button>' +
                        '</div>' +
                        '<div class="dt-modal-body">' +
                            '<div class="dt-import-loading">' +
                                '<div class="dt-import-spinner"></div>' +
                                '<div>' +
                                    '<p class="dt-import-loading-title">Processing<span class="dt-dots"></span></p>' +
                                    '<p class="dt-import-loading-sub">Please wait while we validate and import your data.<br>Do not close this window.</p>' +
                                '</div>' +
                                '<div class="dt-import-loading-meta">' +
                                    '<span class="dt-loading-file-name">\uD83D\uDCC4</span>' +
                                    '<span class="dt-loading-file-size"></span>' +
                                '</div>' +
                            '</div>' +
                            '<div class="dt-import-body-content">' +
                                '<div class="dt-file-drop">' +
                                    '<div class="dt-file-drop-icon">\uD83D\uDCC1</div>' +
                                    '<div class="dt-file-drop-text">Drop Excel/CSV file here<br>or <strong>click to browse</strong></div>' +
                                    '<input type="file" class="dt-file-input" accept=".xlsx,.xls,.csv">' +
                                '</div>' +
                                '<div class="dt-file-name"></div>' +
                                '<a href="' + route + '?template=1" class="dt-template-link">\uD83D\uDCC4 Download Import Template</a>' +
                                '<div class="dt-dry-run-toggle"><input type="checkbox" id="dryRun_' + tableId + '"><label for="dryRun_' + tableId + '">Preview only (dry run)</label></div>' +
                                '<div class="dt-import-results"></div>' +
                            '</div>' +
                        '</div>' +
                        '<div class="dt-modal-footer">' +
                            '<button type="button" class="dt-btn-cancel">Cancel</button>' +
                            '<button type="button" class="dt-btn-submit" disabled>Import</button>' +
                        '</div>' +
                    '</div>';

                document.body.appendChild(importModal);

                var dropZone    = importModal.querySelector('.dt-file-drop');
                var fileInput   = importModal.querySelector('.dt-file-input');
                var fileName    = importModal.querySelector('.dt-file-name');
                var submitBtn   = importModal.querySelector('.dt-btn-submit');
                var results     = importModal.querySelector('.dt-import-results');
                var dryRunCb    = importModal.querySelector('#dryRun_' + tableId);
                var loadingDiv  = importModal.querySelector('.dt-import-loading');
                var bodyContent = importModal.querySelector('.dt-import-body-content');
                var loadingName = importModal.querySelector('.dt-loading-file-name');
                var loadingSize = importModal.querySelector('.dt-loading-file-size');
                var cancelBtn   = importModal.querySelector('.dt-btn-cancel');

                function showLoading(file, isDry){
                    loadingName.textContent = '\uD83D\uDCC4 ' + file.name;
                    loadingSize.textContent = formatBytes(file.size);
                    var titleEl = loadingDiv.querySelector('.dt-import-loading-title');
                    titleEl.innerHTML = (isDry ? 'Previewing' : 'Importing') + '<span class="dt-dots"></span>';
                    loadingDiv.classList.add('show');
                    bodyContent.classList.add('dt-loading-hide');
                    submitBtn.disabled = true;
                    cancelBtn.disabled = true;
                }
                function hideLoading(){
                    loadingDiv.classList.remove('show');
                    bodyContent.classList.remove('dt-loading-hide');
                    cancelBtn.disabled = false;
                }

                dropZone.onclick = function(){ fileInput.click(); };
                dropZone.ondragover = function(e){ e.preventDefault(); this.classList.add('dragover'); };
                dropZone.ondragleave = function(){ this.classList.remove('dragover'); };
                dropZone.ondrop = function(e){ e.preventDefault(); this.classList.remove('dragover'); if(e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]); };
                fileInput.onchange = function(){ if(this.files.length) handleFile(this.files[0]); };

                function handleFile(file){
                    var ext = file.name.split('.').pop().toLowerCase();
                    if(['xlsx','xls','csv'].indexOf(ext) === -1){ showToast('Please select an Excel or CSV file', 'error'); return; }
                    selectedFile = file;
                    fileName.innerHTML = '\u2705 ' + file.name + ' <span style="color:var(--text-muted,#6b7280);font-size:12px;">(' + formatBytes(file.size) + ')</span>';
                    fileName.classList.add('show');
                    submitBtn.disabled = false;
                    results.classList.remove('show');
                }

                submitBtn.onclick = function(){
                    if(!selectedFile) return;
                    var isDry = dryRunCb.checked;
                    showLoading(selectedFile, isDry);
                    var formData = new FormData();
                    formData.append('file', selectedFile);
                    if(isDry) formData.append('dry_run', '1');
                    var csrf = document.querySelector('meta[name="csrf-token"]');
                    fetch(route, {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': csrf ? csrf.content : '' },
                        body: formData
                    })
                    .then(function(r){ return safeJson(r); })
                    .then(function(json){
                        hideLoading();
                        submitBtn.textContent = 'Import';
                        if(json.success){
                            results.className = 'dt-import-results show ' + (json.dry_run ? 'warning' : 'success');
                            var html = (json.dry_run ? '\uD83D\uDD0D ' : '\u2705 ') + json.message;
                            if(json.results){
                                var r = json.results;
                                html += '<div class="dt-import-counts">';
                                if(r.created_count > 0) html += '<span class="dt-import-count-badge created">' + r.created_count + ' created</span>';
                                if(r.updated_count > 0) html += '<span class="dt-import-count-badge updated">' + r.updated_count + ' updated</span>';
                                if(r.skipped > 0)       html += '<span class="dt-import-count-badge skipped">' + r.skipped + ' skipped</span>';
                                if(r.failed > 0)        html += '<span class="dt-import-count-badge failed">' + r.failed + ' failed</span>';
                                html += '</div>';
                            }
                            if(json.results && json.results.warnings && json.results.warnings.length){
                                html += '<div class="dt-import-warnings">' + json.results.warnings.map(function(w){ return '<div>\u26A0\uFE0F ' + w + '</div>'; }).join('') + '</div>';
                            }
                            if(json.results && json.results.errors && json.results.errors.length){
                                html += '<div class="dt-import-errors">' + json.results.errors.map(function(e){ return '<div>\u26A0\uFE0F ' + e + '</div>'; }).join('') + '</div>';
                            }
                            if(json.error_report_url){
                                html += '<a href="' + json.error_report_url + '" class="dt-error-report-link" target="_blank">\uD83D\uDCE5 Download Error Report</a>';
                            }
                            results.innerHTML = html;
                            if(!json.dry_run){
                                load();
                                setTimeout(function(){ importModal.classList.remove('show'); resetModal(); }, 2500);
                            } else {
                                submitBtn.disabled = false;
                            }
                        } else {
                            submitBtn.disabled = false;
                            results.className = 'dt-import-results show error';
                            var errHtml = '\u274C ' + json.message;
                            if(json.results && json.results.errors){ errHtml += '<div class="dt-import-errors">' + json.results.errors.map(function(e){ return '<div>' + e + '</div>'; }).join('') + '</div>'; }
                            if(json.error_report_url){ errHtml += '<a href="' + json.error_report_url + '" class="dt-error-report-link" target="_blank">\uD83D\uDCE5 Download Error Report</a>'; }
                            results.innerHTML = errHtml;
                        }
                    })
                    .catch(function(e){
                        hideLoading();
                        submitBtn.textContent = 'Import';
                        submitBtn.disabled = false;
                        results.className = 'dt-import-results show error';
                        results.innerHTML = '\u274C ' + (e.message || 'Unexpected error. Check the server log.');
                    });
                };

                function resetModal(){
                    selectedFile = null;
                    fileInput.value = '';
                    fileName.classList.remove('show');
                    submitBtn.disabled = true;
                    submitBtn.textContent = 'Import';
                    results.classList.remove('show');
                    dryRunCb.checked = false;
                    hideLoading();
                }

                importModal.querySelector('.dt-modal-close').onclick = function(){ importModal.classList.remove('show'); resetModal(); };
                cancelBtn.onclick = function(){ importModal.classList.remove('show'); resetModal(); };
                importModal.onclick = function(e){ if(e.target === importModal){ importModal.classList.remove('show'); resetModal(); } };
            }
            importModal.classList.add('show');
        }
        // =====================================================================

        // Init
        if(hasCheckbox) loadBulkActions();
        load();

        // Public API
        window.dtInstance[tableId] = {
            reload: load,
            goToPage: function(p){ state.page = parseInt(p); load(); },
            setFilter: function(c, v){ state.filters[c] = v; state.page = 1; load(); },
            removeFilter: function(c){ delete state.filters[c]; state.page = 1; load(); },
            getSelected: function(){ return state.selected; },
            clearSelection: function(){ state.selected = []; updateCheckboxes(); updateBulkUI(); },
            exportTo: function(f){ doExport(f, false); },
            exportSelected: function(f){ doExport(f, true); },
            getPermissions: function(){ return permissions; },
            getState: function(){ return Object.assign({}, state); },
            getSummary: function(){ return state.summary; },
            setSearch: function(v){ state.search = v; if(searchInput) searchInput.value = v; state.page = 1; load(); },
            setTrashed: function(v){ state.trashed = v || ''; state.page = 1; load(); },
            getTrashCount: function(){ return state.trashCount; },
            toggleColumn: function(idx, visible){ if(visible) state.hiddenCols = state.hiddenCols.filter(function(i){ return i !== idx; }); else if(state.hiddenCols.indexOf(idx) === -1) state.hiddenCols.push(idx); applyColumnVisibility(); },
            showExport: showExportModal
        };
        table.dtReload = load;
        table.dtSetFilter = function(c, v){ state.filters[c] = v; state.page = 1; load(); };
    }

    // ── Global helpers ────────────────────────────────────────────────────────
    window.dtPage = function(tableId, page){ var i = window.dtInstance[tableId]; if(i) i.goToPage(page); };

    window.dtDelete = function(url, tableId){
        if(!confirm('Are you sure you want to delete this item?')) return;
        var csrf = document.querySelector('meta[name="csrf-token"]');
        fetch(url, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrf ? csrf.content : '', 'Accept': 'application/json' } })
        .then(function(r){ return r.json(); })
        .then(function(json){ if(json.success !== false) window.dtInstance[tableId].reload(); else alert(json.message || 'Delete failed'); })
        .catch(function(){ alert('Delete failed'); });
    };

    window.dtRestore = function(dataRoute, id, tableId){
        if(!confirm('Restore this record?')) return;
        var bulkRoute = dataRoute.replace('/data', '/bulk-action');
        var csrf = document.querySelector('meta[name="csrf-token"]');
        fetch(bulkRoute, { method: 'POST', headers: { 'X-CSRF-TOKEN': csrf ? csrf.content : '', 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'restore', ids: [id] }) })
        .then(function(r){ return r.json(); })
        .then(function(json){ if(json.success !== false){ window.dtInstance[tableId].reload(); } else { alert(json.message || 'Restore failed'); } })
        .catch(function(){ alert('Restore failed'); });
    };

    window.dtToggleStatus = function(btn) {
        var id = btn.dataset.id, col = btn.dataset.col, toggleRoute = btn.dataset.route;
        if (!toggleRoute) return;
        btn.classList.add('loading');
        var csrf = document.querySelector('meta[name="csrf-token"]');
        fetch(toggleRoute, { method: 'POST', headers: { 'X-CSRF-TOKEN': csrf ? csrf.content : '', 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ id: id, column: col }) })
        .then(function(r) { return r.json(); })
        .then(function(json) { btn.classList.remove('loading'); if (json.success !== false) { btn.classList.toggle('on'); var label = btn.nextElementSibling; if (label) label.textContent = btn.classList.contains('on') ? 'Active' : 'Inactive'; } })
        .catch(function() { btn.classList.remove('loading'); });
    };

    // ── dt-toast (standalone utility — used by external callers) ─────────────
    window.dtToast = function(message, type) {
        var div = document.createElement('div');
        div.style.cssText =
            'position:fixed;bottom:20px;right:20px;z-index:10001;' +
            'padding:12px 18px;border-radius:8px;color:#fff;font-size:13px;font-weight:500;' +
            'background:' + (type === 'error' ? '#e53e3e' : type === 'warning' ? '#dd6b20' : '#38a169') + ';' +
            'box-shadow:0 4px 12px rgba(0,0,0,.15);' +
            'animation:dt-toast-in .25s ease;' +
            'max-width:340px;line-height:1.4;';
        div.textContent = message;
        if (!document.getElementById('dt-toast-style')) {
            var style = document.createElement('style');
            style.id = 'dt-toast-style';
            style.textContent = '@keyframes dt-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}';
            document.head.appendChild(style);
        }
        document.body.appendChild(div);
        setTimeout(function(){ div.style.transition = 'opacity .3s'; }, 2200);
        setTimeout(function(){ div.style.opacity = '0'; }, 2500);
        setTimeout(function(){ div.remove(); }, 2800);
    };

})();
</script>
@endonce