/* ============================================================================================ */
/* DARK THEME: TABLES                                                                            */
/* Base table colors come from the --app-table-* tokens (agency-platform.css). This covers      */
/* Bootstrap contextual variants, legacy BS3 row classes, DataTables chrome and jqTree.         */
/* ============================================================================================ */

/* BOOTSTRAP VARIANTS ------------------------------------------------------------------------- */
html[data-theme="dark"] .table-light {
    --bs-table-bg: var(--app-surface-2);
    --bs-table-striped-bg: var(--app-surface-3);
    --bs-table-active-bg: var(--app-surface-3);
    --bs-table-hover-bg: var(--app-surface-4);
    --bs-table-striped-color: var(--app-table-text);
    --bs-table-active-color: var(--app-table-text);
    --bs-table-hover-color: var(--app-table-text);
    border-color: var(--app-table-border);
    color: var(--app-table-text);
}
html[data-theme="dark"] .table-dark {
    --bs-table-bg: #0f1114;
    color: var(--app-table-text);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--app-table-hover-bg);
    color: var(--app-text-strong);
}

/* CONTEXTUAL ROWS & CELLS: BS5 (.table-*) and BS3 (tr.success etc.), tinted not pastel ------- */
html[data-theme="dark"] .table-success,
html[data-theme="dark"] table > tbody > tr.success > *,
html[data-theme="dark"] table > tbody > tr > .success {
    --bs-table-bg: rgba(25, 135, 84, 0.22);
    --bs-table-striped-bg: rgba(25, 135, 84, 0.28);
    background-color: rgba(25, 135, 84, 0.22);
    color: var(--app-table-text);
}
html[data-theme="dark"] .table-info,
html[data-theme="dark"] .table-primary.table-row,
html[data-theme="dark"] table > tbody > tr.info > *,
html[data-theme="dark"] table > tbody > tr > .info {
    --bs-table-bg: rgba(13, 110, 253, 0.20);
    --bs-table-striped-bg: rgba(13, 110, 253, 0.26);
    background-color: rgba(13, 110, 253, 0.20);
    color: var(--app-table-text);
}
html[data-theme="dark"] .table-warning,
html[data-theme="dark"] table > tbody > tr.warning > *,
html[data-theme="dark"] table > tbody > tr > .warning {
    --bs-table-bg: rgba(255, 193, 7, 0.18);
    --bs-table-striped-bg: rgba(255, 193, 7, 0.24);
    background-color: rgba(255, 193, 7, 0.18);
    color: var(--app-table-text);
}
html[data-theme="dark"] .table-danger,
html[data-theme="dark"] table > tbody > tr.danger > *,
html[data-theme="dark"] table > tbody > tr > .danger {
    --bs-table-bg: rgba(220, 53, 69, 0.22);
    --bs-table-striped-bg: rgba(220, 53, 69, 0.28);
    background-color: rgba(220, 53, 69, 0.22);
    color: var(--app-table-text);
}
html[data-theme="dark"] table > tbody > tr.active > *,
html[data-theme="dark"] .table-active {
    --bs-table-accent-bg: var(--app-surface-3);
    background-color: var(--app-surface-3);
}
html[data-theme="dark"] table.dataTable tbody > tr.selected,
html[data-theme="dark"] table.dataTable tbody > tr > .selected,
html[data-theme="dark"] table.dataTable tbody > tr.selected > * {
    background-color: var(--app-color-primary-opaque-4);
    color: var(--app-text-strong);
}

/* DATATABLES CHROME -------------------------------------------------------------------------- */
html[data-theme="dark"] .dataTables_wrapper {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-theme="dark"] .dataTables_wrapper .DT-label,
html[data-theme="dark"] .table-footer,
html[data-theme="dark"] .table-header {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] .table-footer,
html[data-theme="dark"] .table-header,
html[data-theme="dark"] .table-caption {
    background-color: var(--app-surface-1);
    border-color: var(--app-border);
}
html[data-theme="dark"] [class*="dataTables_"] .dataTables_paginate ul.pagination li > a,
html[data-theme="dark"] .dataTables_paginate .paginate_button,
html[data-theme="dark"] .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .dataTables_paginate ul.pagination li.disabled > a,
html[data-theme="dark"] .dataTables_paginate ul.pagination li.disabled > a:hover {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .dataTables_paginate ul.pagination li.disabled > a,
html[data-theme="dark"] .dataTables_paginate .paginate_button.disabled {
    color: var(--app-text-faint) !important;
}
html[data-theme="dark"] [class*="dataTables_"] .dataTables_paginate ul.pagination li:not(.active, .disabled) > a:hover {
    background: var(--app-surface-3);
    color: var(--app-text-strong);
}
html[data-theme="dark"] [class*="dataTables_"] .dataTables_paginate ul.pagination li.active > a,
html[data-theme="dark"] .dataTables_paginate .paginate_button.current {
    background: var(--app-color-primary);
    border-color: var(--app-color-primary);
    color: var(--app-text-on-color) !important;
}
html[data-theme="dark"] .dataTables_processing,
html[data-theme="dark"] div.dataTables_processing {
    background: var(--app-surface-1);
    border-color: var(--app-border);
    color: var(--app-text);
    box-shadow: 0 0.25rem 0.75rem var(--app-shadow-color);
}
html[data-theme="dark"] .dataTables_empty,
html[data-theme="dark"] td.dataTables_empty {
    color: var(--app-text-muted);
}
html[data-theme="dark"] .dataTables_scrollHead,
html[data-theme="dark"] .dataTables_scrollBody,
html[data-theme="dark"] .dataTables_scrollFoot,
html[data-theme="dark"] .DTFC_LeftBodyLiner,
html[data-theme="dark"] .DTFC_RightBodyLiner,
html[data-theme="dark"] .DTFC_LeftHeadWrapper,
html[data-theme="dark"] .DTFC_RightHeadWrapper,
html[data-theme="dark"] .DTFC_Blocker {
    background-color: var(--app-table-bg);
    border-color: var(--app-table-border);
}
html[data-theme="dark"] table.fixedHeader-floating,
html[data-theme="dark"] table.fixedHeader-locked {
    background-color: var(--app-table-bg);
}
html[data-theme="dark"] table.dataTable.DTFC_Cloned tbody tr,
html[data-theme="dark"] div.DTFC_LeftBodyWrapper table,
html[data-theme="dark"] div.DTFC_RightBodyWrapper table {
    background-color: var(--app-table-bg);
}
html[data-theme="dark"] div.dt-button-collection {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}
html[data-theme="dark"] div.dt-button-collection a.dt-button,
html[data-theme="dark"] div.dt-button-collection button.dt-button {
    background: var(--app-surface-1);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] div.dt-button-collection a.dt-button.active,
html[data-theme="dark"] div.dt-button-collection button.dt-button.active {
    background: var(--app-color-primary-opaque-4);
}
html[data-theme="dark"] div.dt-button-background {
    background: rgba(0, 0, 0, 0.6);
}

/* EXPAND/COLLAPSE CONTROL IN DETAIL ROWS ----------------------------------------------------- */
html[data-theme="dark"] td.details-control::after,
html[data-theme="dark"] tr.shown td.details-control::after {
    background-color: var(--app-surface-3);
    box-shadow: inset 0px 0px 0px 1px var(--app-border-color-dark);
    color: var(--app-text);
}

/* JQTREE ------------------------------------------------------------------------------------- */
html[data-theme="dark"] ul.jqtree-tree,
html[data-theme="dark"] ul.jqtree-tree li > .jqtree-element {
    color: var(--app-text);
}
html[data-theme="dark"] ul.jqtree-tree li.jqtree-selected > .jqtree-element,
html[data-theme="dark"] ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
    background: var(--app-color-primary-opaque-4);
    text-shadow: none;
}
html[data-theme="dark"] ul.jqtree-tree .jqtree-toggler {
    color: var(--app-text-secondary);
}
