/* ===== Common DataTables theme + buttons styling (used across pages) ===== */

/* Table header icons (legacy th-icon class used in older list pages) */
.th-icon {
    font-size: 0.95em;
    margin-right: 2px;
    opacity: 0.85;
    color: var(--crms-primary, #6c5ffc);
}

.dt-theme {
    --dt-bg: #fff;
    --dt-text: #1F2020;
    --dt-border: #E8E8E8;
    --dt-header-bg: var(--crms-primary, #0d6efd);
    --dt-header-text: #fff;
    --dt-hover-bg: rgba(var(--crms-primary-rgb, 13, 110, 253), 0.05);
    --dt-stripe-bg: rgba(0, 0, 0, 0.02);
    --dt-input-bg: #fff;
    --dt-input-border: #CED4DA;
    --dt-input-text: #1F2020;
    --dt-pagination-bg: #fff;
    --dt-pagination-border: #E8E8E8;
    --dt-pagination-text: #1F2020;
    --dt-pagination-hover-bg: #F7F8F9;
    --dt-pagination-active-bg: var(--crms-primary, #0d6efd);
    --dt-pagination-active-text: #fff;
    --dt-child-bg: #F7F8F9;
    --dt-child-th-bg: #E9ECEF;
    --dt-button-text: #fff;
    --dt-info-text: #707070;
}

/* ===== Dark Mode Theme Overrides ===== */
[data-bs-theme="dark"] .dt-theme {
    --dt-bg: #1C1C3A;
    --dt-text: #E0E0E5;
    --dt-border: #2A2A4A;
    --dt-header-bg: var(--crms-primary, #6da8fd);
    --dt-header-text: #fff;
    --dt-hover-bg: rgba(var(--crms-primary-rgb, 109, 168, 253), 0.1);
    --dt-stripe-bg: rgba(255, 255, 255, 0.02);
    --dt-input-bg: #23234A;
    --dt-input-border: #3A3A5C;
    --dt-input-text: #E0E0E5;
    --dt-pagination-bg: #23234A;
    --dt-pagination-border: #3A3A5C;
    --dt-pagination-text: #E0E0E5;
    --dt-pagination-hover-bg: #2A2A5A;
    --dt-child-bg: #23234A;
    --dt-child-th-bg: #2A2A5A;
    --dt-info-text: #A0A0B0;
}

[data-bs-theme="dark"] .dt-theme .dataTables_wrapper .dataTables_length select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A0A0B0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ===== Core DataTables Styles ===== */
.dt-theme table.dataTable {
    background: var(--dt-bg);
    color: var(--dt-text);
    border-color: var(--dt-border) !important;
}

.dt-theme table.dataTable thead th {
    background: var(--dt-header-bg);
    color: #ffffff !important;
    border-bottom-color: var(--dt-border) !important;
    font-weight: 600;
}

/* ===== Sort icon (triangles) colors ===== */
.dt-theme table.dataTable thead th.sorting,
.dt-theme table.dataTable thead th.sorting_asc,
.dt-theme table.dataTable thead th.sorting_desc {
    color: #ffffff !important;
}

.dt-theme table.dataTable thead th.sorting::before,
.dt-theme table.dataTable thead th.sorting::after,
.dt-theme table.dataTable thead th.sorting_asc::before,
.dt-theme table.dataTable thead th.sorting_asc::after,
.dt-theme table.dataTable thead th.sorting_desc::before,
.dt-theme table.dataTable thead th.sorting_desc::after {
    border-color: #ffffff !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
    color: #ffffff !important;
}

.dt-theme table.dataTable thead th.sorting_asc::before {
    border-color: #ffffff !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

.dt-theme table.dataTable thead th.sorting_desc::after {
    border-color: #ffffff !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

/* ===== Body cells/borders ===== */
.dt-theme table.dataTable tbody td {
    border-color: var(--dt-border) !important;
}

.dt-theme table.dataTable tbody tr {
    background: var(--dt-bg);
}

.dt-theme table.dataTable tbody tr:hover {
    background: var(--dt-hover-bg) !important;
}

.dt-theme table.dataTable tbody tr.even {
    background: var(--dt-stripe-bg);
}

.dt-theme table.dataTable tbody tr.even:hover {
    background: var(--dt-hover-bg) !important;
}

/* ===== Wrapper controls: search/length/input/select ===== */
.dt-theme .dataTables_wrapper .dataTables_filter input {
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    color: var(--dt-input-text);
    border-radius: 6px;
    padding: 6px 12px;
    outline: none;
    transition: border-color 0.2s;
}

.dt-theme .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--crms-primary, #0d6efd);
    box-shadow: 0 0 0 2px rgba(var(--crms-primary-rgb, 13, 110, 253), 0.15);
}

.dt-theme .dataTables_wrapper .dataTables_filter label {
    color: var(--dt-text);
}

.dt-theme .dataTables_wrapper .dataTables_length label {
    color: var(--dt-text);
}

.dt-theme .dataTables_wrapper .dataTables_length select {
    background: var(--dt-input-bg);
    border: 1px solid var(--dt-input-border);
    color: var(--dt-input-text);
    border-radius: 6px;
    padding: 4px 28px 4px 8px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    -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' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.dt-theme .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--crms-primary, #0d6efd);
    box-shadow: 0 0 0 2px rgba(var(--crms-primary-rgb, 13, 110, 253), 0.15);
}

.dt-theme .dataTables_wrapper .dataTables_info {
    color: var(--dt-info-text);
    padding: 8px 0;
}

/* ===== Pagination ===== */
.dt-theme .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 2px;
}

.dt-theme .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 4px 10px;
    background: var(--dt-pagination-bg);
    border: 1px solid var(--dt-pagination-border);
    color: var(--dt-pagination-text) !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    margin: 0 1px !important;
    text-decoration: none !important;
}

.dt-theme .dataTables_paginate .paginate_button:hover {
    background: var(--dt-pagination-hover-bg) !important;
    border-color: var(--dt-pagination-border) !important;
    color: var(--dt-pagination-text) !important;
}

.dt-theme .dataTables_paginate .paginate_button.current {
    background: var(--dt-pagination-active-bg) !important;
    border-color: var(--dt-pagination-active-bg) !important;
    color: var(--dt-pagination-active-text) !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(var(--crms-primary-rgb, 13, 110, 253), 0.3);
}

.dt-theme .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: default !important;
    pointer-events: none;
}

.dt-theme .dataTables_paginate .paginate_button i {
    font-size: 16px;
    line-height: 1;
}

/* ===== Buttons (Export / ColVis) ===== */
.dt-theme .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dt-theme .dt-buttons .dt-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 6px !important;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--crms-primary, #0d6efd);
    color: #fff;
    margin: 0 !important;
}

.dt-theme .dt-buttons .dt-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--crms-primary-rgb, 13, 110, 253), 0.3);
}

.dt-theme .dt-buttons .dt-button.buttons-copy:hover {
    background: #fff;
    color: #0d6efd !important;
    border-color: #0d6efd;
}

.dt-theme .dt-buttons .dt-button.buttons-excel:hover {
    background: #fff;
    color: #198754 !important;
    border-color: #198754;
}

.dt-theme .dt-buttons .dt-button.buttons-csv:hover {
    background: #fff;
    color: #6f42c1 !important;
    border-color: #6f42c1;
}

.dt-theme .dt-buttons .dt-button.buttons-pdf:hover {
    background: #fff;
    color: #dc3545 !important;
    border-color: #dc3545;
}

.dt-theme .dt-buttons .dt-button.buttons-colvis:hover {
    background: #fff;
    color: #fd7e14 !important;
    border-color: #fd7e14;
}

.dt-theme .dt-buttons .dt-button:active {
    transform: translateY(0);
}

.dt-theme .dt-buttons .dt-button.buttons-copy {
    background: #0d6efd;
}

.dt-theme .dt-buttons .dt-button.buttons-excel {
    background: #198754;
}

.dt-theme .dt-buttons .dt-button.buttons-csv {
    background: #6f42c1;
}

.dt-theme .dt-buttons .dt-button.buttons-pdf {
    background: #dc3545;
}

.dt-theme .dt-buttons .dt-button.buttons-colvis {
    background: #fd7e14;
}

/* ===== Column visibility dropdown ===== */
.dt-theme .dt-button-collection {
    background: var(--dt-bg);
    border: 1px solid var(--dt-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
}

.dt-theme .dt-button-collection .dt-button {
    background: transparent !important;
    color: var(--dt-text) !important;
    border: none !important;
    padding: 6px 20px;
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0 !important;
}

.dt-theme .dt-button-collection .dt-button:hover {
    background: var(--dt-hover-bg) !important;
    color: var(--dt-text) !important;
}

.dt-theme .dt-button-collection .dt-button.active {
    background: var(--dt-header-bg) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* ===== Common overflow for wide tables ===== */
.dt-theme .dataTables_wrapper {
    width: 100%;
    overflow-x: auto !important;
}

.dt-theme .dataTables_scroll {
    width: 100% !important;
    overflow-x: auto !important;
}

.dt-theme table.dataTable {
    width: 100% !important;
    table-layout: auto;
}

/* ===== Child row ===== */
.dt-theme .child-details {
    padding: 15px;
    background: var(--dt-child-bg);
    border-radius: 8px;
    border: 1px solid var(--dt-border);
}

.dt-theme .child-details table {
    margin-bottom: 0;
}

.dt-theme .child-details table th {
    width: 30%;
    background: var(--dt-child-th-bg);
    color: var(--dt-text);
    border-color: var(--dt-border) !important;
    font-weight: 600;
}

.dt-theme .child-details table td {
    border-color: var(--dt-border) !important;
    color: var(--dt-text);
}

.dt-theme .child-details img {
    border: 2px solid var(--dt-border) !important;
}

/* ===== S.No column with expand button ===== */
.dt-theme table.dataTable tbody td.dt-sno-col {
    text-align: center;
    vertical-align: middle;
    min-width: 60px;
}

/* ===== Expand cell UI ===== */
.dt-theme .dt-expand-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 20px;
    transition: background 0.2s;
    user-select: none;
}

.dt-theme .dt-expand-cell:hover {
    background: var(--dt-hover-bg);
}

.dt-theme .dt-expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--crms-primary, #0d6efd);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: all 0.2s;
}

.dt-theme .dt-expand-icon.expanded {
    background: var(--crms-primary, #0d6efd);
    transform: rotate(0deg);
}

.dt-theme .dt-sno {
    font-weight: 500;
    min-width: 18px;
    text-align: center;
    color: var(--dt-text);
}

.dt-theme thead th:first-child .dt-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--crms-primary, #0d6efd);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
    cursor: default;
}

/* ===== Spacing: Export Buttons to Table Header ===== */
.dt-theme .dt-top {
    margin-bottom: 12px;
}

/* ===== Dark mode overrides for expand ===== */
[data-bs-theme="dark"] .dt-theme .dt-expand-icon {
    background: var(--crms-primary, #6da8fd);
}

[data-bs-theme="dark"] .dt-theme thead th:first-child .dt-expand-btn {
    background: var(--crms-primary, #6da8fd);
}