/* ═══════════════════════════════════════════════════════════════
   datatable-global.css  (v3)
   ───────────────────────────────────────────────────────────────
   Globally-shared DataTable styles. Loaded in ui-head.blade.php
   so every page that uses DataTables gets consistent styling for:
     • Footer (clp-dt-footer) — info + pagination bar
     • Length-change dropdown
     • Pagination buttons
     • Sort icons (Font Awesome)
     • Processing / loader overlay
     • Fallback info bar (.dt-global-info-bar)
   ═══════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. DataTable wrapper background
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Remove default hub.css margins on the <table> element */
table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.dataTables_wrapper {
    position: relative !important;
}

.table>:not(caption)>*>* {
    border-bottom-width: 0px !important;
}

.table thead th {
    color: #111827;
    font-weight: 600;
    text-transform: capitalize;
    /* font-size: 14px;
    letter-spacing: 0.5px;
    padding: 15px 20px; */
    font-size: clamp(13px, 1vw, 14px);
    letter-spacing: clamp(0.3px, 0.05vw, 0.5px);
    padding: clamp(10px, 1.5vw, 15px) clamp(14px, 2vw, 20px);
    background: #e7e9ed;
    vertical-align: middle;
    border-bottom: 2px solid #f5f6f8 !important;
}



#listViewContainer {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}





.table tbody tr:only-child td:first-child {
    border-radius: 15px 0px 0px 15px !important;
}

.table tbody tr:only-child td:last-child {
    border-radius: 0px 15px 15px 0px !important;
}



.table tbody tr td {
    border-bottom: 2px solid #f5f6f8 !important;
}

.table tbody tr:last-child td {
    border-bottom: 0 none !important;
}





.table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.table tbody tr:hover {
    background-color: var(--color-bg-secondary);
}

.table tbody td {
    /* padding: 15px 20px; */
    padding: clamp(10px, 1.5vw, 15px) clamp(14px, 2vw, 20px);
    color: var(--color-text-primary);
    vertical-align: middle;
    font-size: clamp(13px, 1vw, 15px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Global status badge — soft pill style (matches dashboard)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mc-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: clamp(4px, 0.8vw, 6px) clamp(8px, 1.5vw, 10px);
    font-size: clamp(12px, 0.9vw, 13px);
    font-weight: 500;
    white-space: nowrap;
}

.status-inactive,
.status-active {
    width: 65px;
    justify-content: center;
}

.mc-status-badge.success {
    background: #ECFDF5;
    color: #059669;
}

.mc-status-badge.warning {
    background: #FEF3C7;
    color: #D97706;
}

.mc-status-badge.info {
    background: #E0F2FE;
    color: #2563EB;
}

.mc-status-badge.primary {
    background: #EEF3FF;
    color: #2F5BFF;
}

.mc-status-badge.danger {
    background: #FEE2E2;
    color: #DC2626;
}

.mc-status-badge.neutral {
    background: #F3F4F6;
    color: #6B7280;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Global cell alignment
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Vertically center all body and header cells */
/* table.dataTable tbody td,
table.dataTable thead th {
    vertical-align: middle;
} */

/* ── Checkbox column (first column) alignment ────────────────────────────
   Header <th> carries pl-4 (24 px) on the cell + ml-1 (4 px) on the
   wrapper → visual checkbox lands at 28 px from the cell’s left edge.
   Body <td> defaults to Bootstrap’s 0.75 rem (12 px) cell padding,
   creating a 16 px gap. Fix: give first-column TDs the same 24 px
   cell-padding and add a 4 px wrapper margin to match exactly.
─────────────────────────────────────────────────────────────── */
/* table.dataTable tbody td:first-child {
    padding-left: 1.5rem !important;
     match header th pl-4 = 24 px
} */

table {
    border-collapse: separate !important;
    border-spacing: 0 0px !important;
}

/* table.dataTable tbody td:first-child .custom-control.custom-checkbox {
    margin-left: 0.25rem;
     match header wrapper ml-1 = 4 px
} */

.table-hover>tbody>tr:hover>* {
    --bs-table-bg-state: #FFF;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. Footer bar — clp-dt-footer (set by global dom default)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.clp-dt-footer {
    padding: 16px 20px;
    font-size: 0.825rem;
    color: #718096;
    font-weight: 400;
    background-color: #fff;
    border-radius: 0px 0px 15px 15px;
}

/* Left cluster: length-change select + info text */
.clp-dt-left {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}

/* ── "Showing" prefix injected via ::before on the label ── */
.clp-dt-left .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.825rem;
    font-weight: 400;
    color: #718096;
    white-space: nowrap;
}

.clp-dt-left .dataTables_length label::before {
    content: "Showing";
    font-size: 0.825rem;
    font-weight: 400;
    color: #718096;
}

/* Hide the trailing "entries" text DataTables appends to the label */
.clp-dt-left .dataTables_length label>span:last-child {
    display: none;
}

/* ── Length-change <select> ── */
.clp-dt-left .dataTables_length select {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 26px 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 64px;
}

.clp-dt-left .dataTables_length select:focus {
    border-color: var(--mc-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ── Info text: "of 100 entries" ── */
.clp-dt-left .dataTables_info,
.clp-dt-footer .dataTables_info,
div.dataTables_wrapper div.dataTables_info {
    font-size: 0.825rem;
    color: #718096;
    font-weight: 400;
    padding: 0;
    white-space: nowrap;
    padding-top: 0 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. Pagination — global premium style
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dataTables_paginate .pagination {
    gap: 8px;
}

.dataTables_paginate .pagination a {
    background-color: #FFF;
    width: clamp(26px, 2vw, 32px);
    height: clamp(26px, 2vw, 32px);
    color: #8c92a0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: clamp(13px, 1vw, 15px);
}

.dataTables_paginate .pagination .disabled {
    opacity: 0.5;
}

.dataTables_paginate .pagination .active a,
.dataTables_paginate .pagination a:hover {
    background: #dae8ff !important;
    color: #0d6efd;
    transform: translateY(-1px);
    border: 0 none;
}

.dataTables_paginate .pagination .page-link:focus {
    box-shadow: none !important;
}

/* Info text */
.clp-dt-footer .dataTables_info,
div.dataTables_wrapper div.dataTables_info {
    font-size: clamp(11px, 0.9vw, 13px);
    color: #718096;
    padding-top: 0;
}

/* ══ Pagination wrapper — flex row ══ */
.clp-dt-footer .dataTables_paginate,
.dataTables_paginate {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    padding-top: 0 !important;
    float: none !important;
}

/* ── Select2 for DataTables length menu ── */
.clp-select-wrap-sm {
    height: 36px !important;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.clp-select-wrap-sm .select2-container {
    height: 34px !important;
    width: auto !important;
    padding: 0 8px !important;
    min-width: 56px !important;
}

.clp-select-wrap-sm .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 6px !important;
}

table.collapsed tbody tr td:first-child {
    padding-left: 40px !important;
    width: 20px !important;
}

.table.collapsed thead th:first-child {
    padding-left: 40px !important;
    width: 20px !important;
}

.table.collapsed tr.child .dtr-details li {
    flex-direction: column;
    display: flex;
    gap: 5px;
    border: 0 none;
    width: calc(50% - 15px);
    padding: 0px;
}

table.collapsed tbody tr td.child {
    padding: 15px !important;
}

table.collapsed tbody tr td:first-child .table.collapsed tr.child .dtr-details {
    gap: 25px;
}


table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    left: 16px;
    border: 0 none;
    box-shadow: 0 0 0 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    bottom: 0px;
    margin: auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. Sort icons — Font Awesome arrows in column headers
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    opacity: 1 !important;
    color: var(--mc-primary, #6366f1);
}




/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. Processing / spinner overlay
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dataTables_processing {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: none !important;
    z-index: 1000 !important;
    display: none !important;
    /* Managed by .dt-processing-active class */
    align-items: center;
    justify-content: center;
}

.dataTables_processing.dt-processing-active {
    display: flex !important;
}

.datatable-loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.datatable-loader .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    color: #3b82f6 !important;
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. Fallback .dt-global-info-bar
      (shown on tables that override the global dom without info)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dt-global-info-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 11px 20px 13px;
    background: #ffffff;
    border-top: 1px solid #edf2f7;
    font-size: 0.8rem;
    font-weight: 400;
    color: #718096;
    line-height: 1;
    gap: 3px;
    width: 100%;
}

.dt-global-info-bar .dt-gi-num {
    font-weight: 600;
    color: #374151;
}

.dt-global-info-bar .dt-gi-sep {
    color: #cbd5e0;
    margin: 0 1px;
}

.dt-global-info-bar .dt-gi-filtered {
    color: #a0aec0;
    margin-left: 3px;
}

.dt-global-info-bar.dt-gi-hidden {
    display: none !important;
}

/* Hide Select2 dropdown on open until JS repositions it (prevents flicker) */
.clp-select2-dropdown-sm .select2-dropdown {
    opacity: 0;
}

.clp-select2-dropdown-sm.clp-select2-ready .select2-dropdown {
    opacity: 1;
}