/* WebUi-only: map Bootstrap 5.3 + DataTables to TSC tokens (requires data-tsc-theme on html). */

html[data-tsc-theme] {
  --bs-body-font-family: var(--tsc-font-sans, system-ui, Avenir, Helvetica, Arial, sans-serif);
  --bs-font-sans-serif: var(--tsc-font-sans, system-ui, Avenir, Helvetica, Arial, sans-serif);
  --bs-body-bg: var(--tsc-content-bg);
  --bs-body-color: var(--tsc-text);
  --bs-emphasis-color: var(--tsc-text);
  --bs-secondary-color: var(--tsc-text-muted);
  --bs-tertiary-color: var(--tsc-text-muted);
  --bs-border-color: var(--tsc-border);
  --bs-border-color-translucent: color-mix(in srgb, var(--tsc-border) 55%, transparent);
  --bs-card-bg: var(--tsc-card-bg);
  --bs-card-color: var(--tsc-text);
  --bs-card-border-color: var(--tsc-border);
  --bs-card-cap-bg: var(--tsc-sidebar-bg);
  --bs-card-cap-color: var(--tsc-text);
  --bs-form-control-bg: var(--tsc-input-bg);
  --bs-form-control-color: var(--tsc-text);
  --bs-form-control-border-color: var(--tsc-border);
  --bs-form-select-bg: var(--tsc-input-bg);
  --bs-form-select-color: var(--tsc-text);
  --bs-form-select-border-color: var(--tsc-border);
  --bs-secondary-bg: var(--tsc-sidebar-bg);
  --bs-tertiary-bg: var(--tsc-content-bg);
  --bs-light: var(--tsc-sidebar-bg);
  --bs-light-rgb: 241, 245, 249;
  --bs-dark-rgb: 15, 23, 42;
  --bs-table-bg: var(--tsc-card-bg);
  --bs-table-color: var(--tsc-text);
  --bs-table-border-color: var(--tsc-border);
  --bs-table-striped-bg: color-mix(in srgb, var(--tsc-border-subtle) 45%, var(--tsc-card-bg));
  --bs-table-striped-color: var(--tsc-text);
  --bs-table-hover-bg: var(--tsc-header-btn-hover-bg);
  --bs-table-hover-color: var(--tsc-text);
  --bs-table-active-bg: var(--tsc-header-btn-hover-bg);
  --bs-table-active-color: var(--tsc-text);
  --bs-nav-tabs-border-color: var(--tsc-border);
  --bs-nav-tabs-link-hover-border-color: var(--tsc-border-subtle);
  --bs-nav-tabs-link-active-color: var(--tsc-text);
  --bs-nav-tabs-link-active-bg: var(--tsc-card-bg);
  --bs-nav-tabs-link-active-border-color: var(--tsc-border) var(--tsc-border) var(--tsc-card-bg);
  --bs-nav-link-color: var(--tsc-text-muted);
  --bs-nav-link-hover-color: var(--tsc-text);
  --bs-dropdown-bg: var(--tsc-menu-bg);
  --bs-dropdown-color: var(--tsc-text);
  --bs-dropdown-border-color: var(--tsc-menu-border);
  --bs-dropdown-link-color: var(--tsc-text);
  --bs-dropdown-link-hover-color: var(--tsc-text);
  --bs-dropdown-link-hover-bg: var(--tsc-header-btn-hover-bg);
  --bs-dropdown-link-active-bg: var(--tsc-header-btn-hover-bg);
  --bs-dropdown-link-active-color: var(--tsc-text);
  --bs-modal-bg: var(--tsc-card-bg);
  --bs-modal-color: var(--tsc-text);
  --bs-modal-border-color: var(--tsc-border);
  --bs-list-group-bg: var(--tsc-card-bg);
  --bs-list-group-color: var(--tsc-text);
  --bs-list-group-border-color: var(--tsc-border);
  --bs-list-group-action-hover-bg: var(--tsc-header-btn-hover-bg);
  --bs-list-group-action-hover-color: var(--tsc-text);
  --bs-list-group-action-active-bg: var(--tsc-header-btn-hover-bg);
  --bs-list-group-action-active-color: var(--tsc-text);
  --bs-primary: var(--tsc-primary);
  --bs-primary-rgb: 5, 150, 105;
  --bs-link-color: var(--tsc-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--tsc-primary) 85%, white);
  --dt-html-background: var(--tsc-card-bg);
  --dt-row-selected: 5, 150, 105;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 241, 245, 249;
  --dt-row-stripe: 15, 23, 42;
  --dt-row-hover: 15, 23, 42;
  --dt-column-ordering: 15, 23, 42;
  /* Match simcreate-docsv2 / Tailwind rounded-xl + rounded-2xl on boxes */
  --bs-border-radius: var(--tsc-radius-lg);
  --bs-border-radius-sm: var(--tsc-radius);
  --bs-border-radius-lg: var(--tsc-radius-lg);
  --bs-border-radius-xl: var(--tsc-radius-lg);
  --bs-border-radius-xxl: 1.5rem;
  --bs-border-radius-pill: 9999px;
  --bs-card-border-radius: var(--tsc-radius-lg);
  --bs-card-inner-border-radius: calc(var(--tsc-radius-lg) - 1px);
  --bs-modal-border-radius: var(--tsc-radius-lg);
  --bs-dropdown-border-radius: var(--tsc-radius-lg);
  --bs-btn-border-radius: var(--tsc-radius-lg);
  --bs-btn-border-radius-sm: var(--tsc-radius-lg);
  --bs-btn-border-radius-lg: var(--tsc-radius-lg);
  --bs-btn-disabled-opacity: 0.5;
  --bs-alert-border-radius: var(--tsc-radius-lg);
  --bs-nav-tabs-border-radius: var(--tsc-radius-lg);
}

html[data-tsc-theme="light"] {
  color-scheme: light;
}

html[data-tsc-theme="dark"] {
  color-scheme: dark;
  --bs-light-rgb: 30, 41, 59;
  --bs-link-hover-color: color-mix(in srgb, var(--tsc-primary) 85%, #f1f5f9);
  --dt-row-stripe: 241, 245, 249;
  --dt-row-hover: 241, 245, 249;
  --dt-column-ordering: 241, 245, 249;
}

html[data-tsc-theme] body {
  background-color: var(--tsc-content-bg);
  color: var(--tsc-text);
  font-family: inherit;
}

html[data-tsc-theme] .card,
html[data-tsc-theme] .card.shadow-sm {
  background-color: var(--tsc-card-bg);
  color: var(--tsc-text);
  border: 1px solid var(--tsc-border);
  border-color: var(--tsc-border);
  border-radius: var(--tsc-radius-lg);
  box-shadow: var(--tsc-shadow-card);
  overflow: hidden;
}

html[data-tsc-theme] .card > .card-header:first-child {
  border-radius: var(--tsc-radius-lg) var(--tsc-radius-lg) 0 0;
}

html[data-tsc-theme] .card > .card-footer:last-child {
  border-radius: 0 0 var(--tsc-radius-lg) var(--tsc-radius-lg);
}

html[data-tsc-theme] .border.rounded,
html[data-tsc-theme] .rounded,
html[data-tsc-theme] .rounded-3 {
  border-radius: var(--tsc-radius-lg) !important;
}

html[data-tsc-theme] .btn {
  border-radius: var(--tsc-radius-lg);
}

/* Save / primary actions — simcreate-docsv2: bg-emerald-600 + disabled:opacity-50 (radius matches cards) */
html[data-tsc-theme] .btn:disabled,
html[data-tsc-theme] .btn.disabled,
html[data-tsc-theme] fieldset:disabled .btn {
  filter: none;
  box-shadow: none;
  pointer-events: none;
}

html[data-tsc-theme] .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: var(--tsc-radius-lg);
  --bs-btn-bg: #059669;
  --bs-btn-border-color: #059669;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #047857;
  --bs-btn-hover-border-color: #047857;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #047857;
  --bs-btn-active-border-color: #047857;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 5, 150, 105;
  --bs-btn-disabled-bg: #059669;
  --bs-btn-disabled-border-color: #059669;
  --bs-btn-disabled-color: #fff;
}

html[data-tsc-theme] .btn-primary.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--tsc-radius-lg);
}

/* Optional: AI / assistant saves (simcreate-docsv2 bg-blue-600) */
html[data-tsc-theme] .btn-primary.btn-primary--blue {
  --bs-btn-bg: #2563eb;
  --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1d4ed8;
  --bs-btn-active-border-color: #1d4ed8;
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  --bs-btn-disabled-bg: #2563eb;
  --bs-btn-disabled-border-color: #2563eb;
}

/* Compact emerald actions — Get Chat API Key, Add *, Import */
html[data-tsc-theme] .btn-success,
html[data-tsc-theme] .tsc-btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: var(--tsc-radius-lg);
  --bs-btn-bg: #059669;
  --bs-btn-border-color: #059669;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #047857;
  --bs-btn-hover-border-color: #047857;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #047857;
  --bs-btn-active-border-color: #047857;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 5, 150, 105;
  --bs-btn-disabled-bg: #059669;
  --bs-btn-disabled-border-color: #059669;
  --bs-btn-disabled-color: #fff;
}

html[data-tsc-theme] .btn-success.btn-sm,
html[data-tsc-theme] .tsc-btn-action.btn-sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  border-radius: var(--tsc-radius-lg);
}

/* Secondary / cancel — slate outline (simcreate-docsv2 header-adjacent controls) */
html[data-tsc-theme] .btn-secondary,
html[data-tsc-theme] .btn-outline-secondary,
html[data-tsc-theme] .btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: var(--tsc-radius-lg);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--tsc-header-border, #64748b);
  --bs-btn-color: var(--tsc-text);
  --bs-btn-hover-bg: var(--tsc-header-btn-hover-bg);
  --bs-btn-hover-border-color: var(--tsc-header-border, #64748b);
  --bs-btn-hover-color: var(--tsc-text);
  --bs-btn-active-bg: var(--tsc-header-btn-hover-bg);
  --bs-btn-active-border-color: var(--tsc-header-border, #64748b);
  --bs-btn-active-color: var(--tsc-text);
  --bs-btn-focus-shadow-rgb: 100, 116, 139;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--tsc-header-border, #64748b);
  --bs-btn-disabled-color: var(--tsc-text);
}

html[data-tsc-theme] .btn-outline-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: var(--tsc-radius-lg);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--tsc-header-border, #64748b);
  --bs-btn-color: var(--tsc-text);
  --bs-btn-hover-bg: var(--tsc-header-btn-hover-bg);
  --bs-btn-hover-border-color: var(--tsc-header-border, #64748b);
  --bs-btn-hover-color: var(--tsc-text);
  --bs-btn-active-bg: var(--tsc-card-bg);
  --bs-btn-active-border-color: var(--tsc-border);
  --bs-btn-active-color: var(--tsc-text);
  --bs-btn-focus-shadow-rgb: 100, 116, 139;
}

html[data-tsc-theme] .btn-outline-primary.active {
  --bs-btn-bg: var(--tsc-card-bg);
  --bs-btn-border-color: var(--tsc-border);
  --bs-btn-color: var(--tsc-text);
}

html[data-tsc-theme] .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: 500;
  border-radius: var(--tsc-radius-lg);
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-disabled-bg: #dc2626;
  --bs-btn-disabled-border-color: #dc2626;
  --bs-btn-disabled-color: #fff;
}

html[data-tsc-theme] .btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: 500;
  border-radius: var(--tsc-radius-lg);
  --bs-btn-bg: #d97706;
  --bs-btn-border-color: #d97706;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #b45309;
  --bs-btn-hover-border-color: #b45309;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #b45309;
  --bs-btn-active-border-color: #b45309;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 217, 119, 6;
  --bs-btn-disabled-bg: #d97706;
  --bs-btn-disabled-border-color: #d97706;
  --bs-btn-disabled-color: #fff;
}

html[data-tsc-theme] .btn-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: 500;
  border-radius: var(--tsc-radius-lg);
  --bs-btn-bg: #0284c7;
  --bs-btn-border-color: #0284c7;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #0369a1;
  --bs-btn-hover-border-color: #0369a1;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #0369a1;
  --bs-btn-active-border-color: #0369a1;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 2, 132, 199;
  --bs-btn-disabled-bg: #0284c7;
  --bs-btn-disabled-border-color: #0284c7;
  --bs-btn-disabled-color: #fff;
}

html[data-tsc-theme] .btn-lg {
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  border-radius: var(--tsc-radius-lg);
}

html[data-tsc-theme] .btn-sm {
  font-size: 0.875rem;
  border-radius: var(--tsc-radius-lg);
}

html[data-tsc-theme] .btn-danger,
html[data-tsc-theme] .btn-warning,
html[data-tsc-theme] .btn-info,
html[data-tsc-theme] .btn-secondary,
html[data-tsc-theme] .btn-outline-primary,
html[data-tsc-theme] .btn-outline-secondary {
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
  --bs-btn-disabled-color: var(--bs-btn-color);
}

html[data-tsc-theme] .form-control,
html[data-tsc-theme] .form-select,
html[data-tsc-theme] .input-group-text {
  border-radius: var(--tsc-radius-lg);
}

html[data-tsc-theme] .alert {
  border-radius: var(--tsc-radius-lg);
}

html[data-tsc-theme] .modal-content {
  background-color: var(--tsc-card-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-border);
  border-radius: var(--tsc-radius-lg);
}

html[data-tsc-theme] .list-group-item {
  background-color: var(--tsc-card-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-border);
}

html[data-tsc-theme] .card-header,
html[data-tsc-theme] .card-header.bg-light {
  background-color: var(--tsc-sidebar-bg) !important;
  color: var(--tsc-text);
  border-color: var(--tsc-border);
}

/* Card / panel titles + section headings: icon + label spacing */
html[data-tsc-theme] .card-title,
html[data-tsc-theme] .card-header > h5,
html[data-tsc-theme] .card-header > h6,
html[data-tsc-theme] .card h5:has(.tsc-icon),
html[data-tsc-theme] .card h6:has(.tsc-icon),
html[data-tsc-theme] h2:has(.tsc-icon),
html[data-tsc-theme] .tsc-shell-panel__header .card-title,
html[data-tsc-theme] .tsc-shell-panel__header h1,
html[data-tsc-theme] .tsc-shell-panel__header h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

html[data-tsc-theme] .card-title .tsc-icon,
html[data-tsc-theme] .card-header .tsc-icon,
html[data-tsc-theme] .card h5 .tsc-icon,
html[data-tsc-theme] .card h6 .tsc-icon,
html[data-tsc-theme] h2 .tsc-icon,
html[data-tsc-theme] .tsc-shell-panel__header .tsc-icon {
  margin-inline-end: 0 !important;
}

html[data-tsc-theme] .card-body {
  background-color: var(--tsc-card-bg);
  color: var(--tsc-text);
}

html[data-tsc-theme] .form-control,
html[data-tsc-theme] .form-select,
html[data-tsc-theme] .form-control:disabled,
html[data-tsc-theme] .form-select:disabled {
  background-color: var(--tsc-input-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-border);
}

html[data-tsc-theme] .form-control::placeholder {
  color: var(--tsc-field-placeholder);
}

html[data-tsc-theme] .form-control:focus,
html[data-tsc-theme] .form-select:focus {
  background-color: var(--tsc-input-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--tsc-primary) 25%, transparent);
}

html[data-tsc-theme] .form-label,
html[data-tsc-theme] .form-text {
  color: var(--tsc-text-muted);
}

html[data-tsc-theme] .table {
  --bs-table-bg: var(--tsc-card-bg);
  --bs-table-color: var(--tsc-text);
  --bs-table-border-color: var(--tsc-border);
  --bs-table-striped-bg: color-mix(in srgb, var(--tsc-border-subtle) 45%, var(--tsc-card-bg));
  --bs-table-hover-bg: var(--tsc-header-btn-hover-bg);
}

/* Bootstrap table variants pin light palette on thead; remap to TSC tokens. */
html[data-tsc-theme] .table-light,
html[data-tsc-theme] thead.table-light,
html[data-tsc-theme] .table > thead.table-light {
  --bs-table-color: var(--tsc-text);
  --bs-table-bg: var(--tsc-sidebar-bg);
  --bs-table-border-color: var(--tsc-border);
  --bs-table-striped-bg: color-mix(in srgb, var(--tsc-border-subtle) 45%, var(--tsc-sidebar-bg));
  --bs-table-striped-color: var(--tsc-text);
  --bs-table-hover-bg: var(--tsc-header-btn-hover-bg);
  --bs-table-hover-color: var(--tsc-text);
  --bs-table-active-bg: var(--tsc-header-btn-hover-bg);
  --bs-table-active-color: var(--tsc-text);
}

html[data-tsc-theme] .table > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
  color: var(--bs-table-color);
  border-color: var(--tsc-border);
}

html[data-tsc-theme] .nav-tabs .nav-link {
  color: var(--tsc-text-muted);
}

html[data-tsc-theme] .nav-tabs .nav-link:hover,
html[data-tsc-theme] .nav-tabs .nav-link:focus {
  color: var(--tsc-text);
  border-color: var(--tsc-border-subtle);
}

html[data-tsc-theme] .nav-tabs .nav-link.active {
  color: var(--tsc-text);
  background-color: var(--tsc-card-bg);
  border-color: var(--tsc-border) var(--tsc-border) var(--tsc-card-bg);
}

html[data-tsc-theme] .dropdown-menu {
  background-color: var(--tsc-menu-bg);
  border-color: var(--tsc-menu-border);
  color: var(--tsc-text);
  border-radius: var(--tsc-radius-lg);
}

html[data-tsc-theme] .dropdown-item {
  color: var(--tsc-text);
}

html[data-tsc-theme] .dropdown-item:hover,
html[data-tsc-theme] .dropdown-item:focus {
  background-color: var(--tsc-header-btn-hover-bg);
  color: var(--tsc-text);
}

html[data-tsc-theme] .badge.bg-light {
  background-color: var(--tsc-sidebar-bg) !important;
  color: var(--tsc-text) !important;
  border-color: var(--tsc-border) !important;
}

html[data-tsc-theme] .text-muted {
  color: var(--tsc-text-muted) !important;
}

html[data-tsc-theme] .bg-white,
html[data-tsc-theme] .bg-light {
  background-color: var(--tsc-sidebar-bg) !important;
  color: var(--tsc-text);
}

html[data-tsc-theme] .text-dark {
  color: var(--tsc-text) !important;
}

html[data-tsc-theme] .border {
  border-color: var(--tsc-border) !important;
}

html[data-tsc-theme] .navbar-toggler {
  border-color: var(--tsc-border);
}

html[data-tsc-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) grayscale(100%);
}

html[data-tsc-theme] .input-group-text {
  background-color: var(--tsc-sidebar-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-border);
}

html[data-tsc-theme] .page-link {
  background-color: var(--tsc-card-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-border);
}

html[data-tsc-theme] .page-link:hover {
  background-color: var(--tsc-header-btn-hover-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-border);
}

html[data-tsc-theme] .page-item.active .page-link {
  background-color: var(--tsc-primary);
  border-color: var(--tsc-primary);
}

html[data-tsc-theme] .dataTables_wrapper .dataTables_length select,
html[data-tsc-theme] .dataTables_wrapper .dataTables_filter input,
html[data-tsc-theme] div.dt-container div.dt-length select,
html[data-tsc-theme] div.dt-container div.dt-search input {
  background-color: var(--tsc-input-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-border);
}

html[data-tsc-theme] .dataTables_wrapper .dataTables_info,
html[data-tsc-theme] .dataTables_wrapper .dataTables_length,
html[data-tsc-theme] .dataTables_wrapper .dataTables_filter,
html[data-tsc-theme] div.dt-container div.dt-info,
html[data-tsc-theme] div.dt-container div.dt-length,
html[data-tsc-theme] div.dt-container div.dt-length label,
html[data-tsc-theme] div.dt-container div.dt-search,
html[data-tsc-theme] div.dt-container div.dt-search label {
  color: var(--tsc-text-muted);
}

/* DataTables 2.x + Bootstrap 5: header band and sort affordances */
html[data-tsc-theme] table.table.dataTable > thead > tr > th,
html[data-tsc-theme] table.table.dataTable > thead > tr > td,
html[data-tsc-theme] table.dataTable > thead > tr > th,
html[data-tsc-theme] table.dataTable > thead > tr > td,
html[data-tsc-theme] div.dt-scroll-head table.dataTable > thead > tr > th,
html[data-tsc-theme] div.dt-scroll-head table.dataTable > thead > tr > td {
  background-color: var(--tsc-sidebar-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-border);
}

html[data-tsc-theme] table.table.dataTable > tbody > tr > th,
html[data-tsc-theme] table.table.dataTable > tbody > tr > td {
  background-color: var(--tsc-card-bg);
  color: var(--tsc-text);
  border-color: var(--tsc-border);
}

html[data-tsc-theme] table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
html[data-tsc-theme] table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after,
html[data-tsc-theme] table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
html[data-tsc-theme] table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after {
  color: rgba(var(--dt-column-ordering), 0.35);
}

html[data-tsc-theme] table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
html[data-tsc-theme] table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
html[data-tsc-theme] table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
html[data-tsc-theme] table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
  color: rgba(var(--dt-column-ordering), 0.8);
}

html[data-tsc-theme] table.dataTable thead > tr > th.dt-orderable-asc:hover,
html[data-tsc-theme] table.dataTable thead > tr > th.dt-orderable-desc:hover,
html[data-tsc-theme] table.dataTable thead > tr > td.dt-orderable-asc:hover,
html[data-tsc-theme] table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline: 2px solid color-mix(in srgb, var(--tsc-text) 8%, transparent);
}

html[data-tsc-theme] div.dt-container div.dt-processing {
  background-color: var(--tsc-card-bg);
  color: var(--tsc-text);
  border: 1px solid var(--tsc-border);
  border-radius: var(--tsc-radius-lg);
}