/* Dark Mode CSS for PVT Prediction App */

:root {
  /* Dark mode color variables - matching Vue.js app */
  --dark-mode-bg: #111827;
  --dark-mode-bg-1: #111827;
  --dark-mode-bg-2: #1F2937;
  --dark-mode-card-bg: #071E2B;
  --dark-mode-card-bg-2: #1E2835;
  --dark-mode-card-bg-3: #404853;
  --dark-mode-card-bg-4: #374151;
  --dark-mode-card-bg-5: #555D6B;
  --dark-mode-card-bg-6: #343A47;
  --dark-mode-text: #ffffff;
  --dark-mode-text-2: #878D97;
  --dark-mode-text-3: #000000;
  --dark-mode-border: #374151;
  --dark-mode-border-2: #2C404B;
  --dark-mode-border-3: #414955;
  --dark-mode-border-4: #5D646E;
  --dark-mode-hover: #062D42;
  --dark-mode-active: #2298D5;
  --dark-mode-active-2: #145B80;
  --dark-mode-table-header: #0E3D55;
  --dark-mode-table-border-header: #377493;
  --dark-mode-table-border-header-2: #325A6E;
  --dark-mode-table-border: #353B47;
  --dark-mode-tab-bg: #292F3D;
  --dark-mode-tab-border: #535863;
  --dark-mode-tab-active: #18587A;
  --dark-mode-btn-active: #1B7AAA;
  --dark-mode-label: #70747D;
  --dark-mode-btn: #A7D6EE;
  --dark-mode-logout: #EF4444;
  --dark-mode-delete: #342C38;
  --dark-mode-grid-line: #30363d;
}

.dark-mode {
  --pvt-shimmer-surface: var(--dark-mode-card-bg);
  --pvt-shimmer-body-1: #1a2733;
  --pvt-shimmer-body-2: #243444;
  --pvt-shimmer-header-1: #152430;
  --pvt-shimmer-header-2: #1e2f3d;
}

/* Smooth light/dark theme transitions */
@media (prefers-reduced-motion: no-preference) {
  html,
  body,
  #app-root,
  #app-root .container-fluid,
  #app-root .container,
  #app-root .card,
  #app-root .card-header,
  #app-root .card-body,
  #app-root .header-section,
  #app-root .nav-tabs,
  #app-root .nav-tabs-container,
  #app-root .oil-container,
  #app-root .home-panel,
  #app-root .page-content-panel,
  #app-root .manage-model-list-panel,
  #app-root .config-progress-section,
  #app-root .progress-section-card,
  #app-root .form-control,
  #app-root .form-select,
  #app-root .Select-control,
  #app-root .modal-content,
  #app-root .modal-header,
  #app-root .modal-body,
  #app-root .modal-footer,
  #app-root .alert,
  #app-root .btn,
  #app-root .home-experiment-running-panel,
  #app-root div,
  #app-root section,
  #app-root label,
  #app-root span,
  #app-root p,
  #app-root h1,
  #app-root h2,
  #app-root h3,
  #app-root h4,
  #app-root h5,
  #app-root h6,
  #app-root li,
  #app-root td,
  #app-root th {
    transition:
      background-color 0.35s ease,
      color 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease !important;
  }

  ::-webkit-scrollbar-thumb {
    transition: background-color 0.35s ease !important;
  }

  .js-plotly-plot {
    transition: opacity 0.25s ease !important;
  }

  html.pvt-theme-switching .js-plotly-plot {
    opacity: 0.92;
  }
}

/* Dark mode class */
.dark-mode {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

/* Body dark mode (class is on body directly from parent-dark-mode.js) */
body.dark-mode {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .container-fluid,
.dark-mode .container {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

/* Header background in dark mode */
.dark-mode .header-section {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

/* PCA Components Header Dark Mode */
.dark-mode .pca-components-header {
  color: #878D97 !important;
}

.dark-mode .header-dropdown-segmented-container, .dark-mode .result-view-mode-container{
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .Select-control {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .Select--multi .Select-value
{
  background-color: var(--dark-mode-active-2) !important;
  border-color: var(--dark-mode-active-2) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select--multi .Select-value-icon
{
  background-color: var(--dark-mode-active-2) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .has-value.Select--single>.Select-control .Select-value .Select-value-label, .dark-mode .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label
{
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-menu-outer {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .Select-menu {
  background-color: var(--dark-mode-table-border) !important;
}

.dark-mode .Select-option {
  background-color: var(--dark-mode-table-border) !important;
  color: var(--dark-mode-text) !important;
  border-bottom: 1px solid var(--dark-mode-border-3) !important;
}

.dark-mode .Select-option:hover {
  background-color: var(--dark-mode-hover) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-option.is-selected {
  background-color: var(--dark-mode-active) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-option.is-focused {
  background-color: var(--dark-mode-hover) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-placeholder {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .Select-value-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-arrow {
  border-color: var(--dark-mode-text) transparent transparent !important;
  filter: brightness(0) invert(1);
}

.dark-mode .Select-arrow-zone:hover > .Select-arrow {
  border-color: var(--dark-mode-text) transparent transparent !important;
}

.dark-mode .Select-clear {
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-clear:hover {
  color: var(--dark-mode-text) !important;
}

.dark-mode .header-dropdown-separator {
  background-color: var(--dark-mode-border-3) !important;
}

.dark-mode .header-dropdown-segmented-container .Select-arrow {
  background-image: url('down-arrow-dark.svg') !important;
}

/* Fluid Analysis Card Dark Mode */
.dark-mode .fluid-analysis-card {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .fluid-analysis-icon {
  color: var(--dark-mode-text) !important;
}

.dark-mode .fluid-analysis-icon-container img {
  filter: brightness(0) invert(1);
}

.dark-mode .fluid-analysis-title {
  color: var(--dark-mode-text) !important;
}

.dark-mode .fluid-analysis-value {
  color: var(--dark-mode-text) !important;
  background-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .fluid-analysis-label {
  color: var(--dark-mode-text) !important;
}

/* Tab Styling Dark Mode */
.dark-mode .nav-tabs {
    background-color: var(--dark-mode-card-bg-4) !important;
    border-color: #313A49 !important;
}

.dark-mode .nav-tabs .nav-link {
    color: var(--dark-mode-text) !important;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
}

.dark-mode .nav-tabs .nav-link:hover {
    color: var(--dark-mode-text) !important;
    background-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .nav-tabs .nav-link.active {
    color: var(--dark-mode-text) !important;
    background-color: #071E2B !important;
}

.dark-mode .nav-tabs-container {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: #313A49 !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .nav-tabs-container .nav-link:hover {
  color: var(--dark-mode-text) !important;
  background-color: var(--dark-mode-card-bg-5) !important;
}


/* Form elements dark mode */
.dark-mode .form-control,
.dark-mode .form-select {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
  border: 1px solid var(--dark-mode-card-bg-5) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
  background-color: var(--dark-mode-bg-2) !important;
  border: 1px solid var(--dark-mode-card-bg-5) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .form-control::placeholder {
  color: var(--dark-mode-label) !important;
}

/* Button dark mode styling */
.dark-mode .btn-primary {
  background-color: var(--dark-mode-btn) !important;
  color: var(--dark-mode-text-3) !important;
}

.dark-mode .btn-secondary {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .btn-secondary:hover {
  background-color: var(--dark-mode-border-3) !important;
  border-color: var(--dark-mode-border-3) !important;
}

.dark-mode .btn-warning {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: var(--dark-mode-text-3) !important;
}

.dark-mode .btn-danger {
  background-color: var(--dark-mode-logout) !important;
  border-color: var(--dark-mode-logout) !important;
  color: var(--dark-mode-text) !important;
}

/* Alert dark mode styling */
.dark-mode .alert {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .alert-info {
  background-color: var(--dark-mode-table-header) !important;
  border-color: var(--dark-mode-active) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .alert-success {
  background-color: rgba(40, 167, 69, 0.2) !important;
  border-color: #28a745 !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .alert-warning {
  background-color: rgba(255, 193, 7, 0.2) !important;
  border-color: #ffc107 !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .alert-danger {
  background-color: rgba(220, 53, 69, 0.2) !important;
  border-color: #dc3545 !important;
  color: var(--dark-mode-text) !important;
}

/* Modal dark mode styling */
.dark-mode .modal-content {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .modal-header {
  background-color: var(--dark-mode-table-header) !important;
  border-bottom-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .modal-body {
  background-color: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .modal-footer {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-top-color: var(--dark-mode-border) !important;
}

/* Text elements dark mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode div {
  color: var(--dark-mode-text) !important;
}

.dark-mode .text-muted {
  color: var(--dark-mode-text-2) !important;
}

/* Progress bar dark mode */
.dark-mode .progress {
  background-color: var(--dark-mode-bg) !important;
}

.dark-mode .progress-bar {
  background-color: var(--dark-mode-active) !important;
}

/* Plotly charts dark mode styling */
/* Target all SVG text elements within Plotly plots */
.dark-mode .js-plotly-plot svg text,
.dark-mode .js-plotly-plot .svg-container svg text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .xaxis .axis-title,
.dark-mode .js-plotly-plot .plotly .yaxis .axis-title,
.dark-mode .js-plotly-plot .plotly .zaxis .axis-title,
.dark-mode .js-plotly-plot .plotly .xaxis2 .axis-title,
.dark-mode .js-plotly-plot .plotly .yaxis2 .axis-title,
.dark-mode .js-plotly-plot .plotly .xaxis3 .axis-title,
.dark-mode .js-plotly-plot .plotly .yaxis3 .axis-title {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .xaxis .tick text,
.dark-mode .js-plotly-plot .plotly .yaxis .tick text,
.dark-mode .js-plotly-plot .plotly .zaxis .tick text,
.dark-mode .js-plotly-plot .plotly .xaxis2 .tick text,
.dark-mode .js-plotly-plot .plotly .yaxis2 .tick text,
.dark-mode .js-plotly-plot .plotly .xaxis3 .tick text,
.dark-mode .js-plotly-plot .plotly .yaxis3 .tick text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Plotly title text */
.dark-mode .js-plotly-plot .plotly .gtitle text,
.dark-mode .js-plotly-plot .plotly .xtitle,
.dark-mode .js-plotly-plot .plotly .ytitle,
.dark-mode .js-plotly-plot .plotly .ztitle {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Plotly annotation text */
.dark-mode .js-plotly-plot .plotly .annotation-text,
.dark-mode .js-plotly-plot .plotly .annotation text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Plotly annotation background and border for dark mode */
.dark-mode .js-plotly-plot .plotly .annotation {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-text) !important;
}

/* Target the rect element that Plotly creates for annotation backgrounds */
.dark-mode .js-plotly-plot .plotly .annotation rect,
.dark-mode .js-plotly-plot .plotly .annotation > rect,
.dark-mode .js-plotly-plot svg .annotation rect {
  fill: var(--dark-mode-text) !important;
  stroke: var(--dark-mode-text) !important;
  stroke-width: 1 !important;
}

/* Override inline styles on annotation rects */
.dark-mode .js-plotly-plot .plotly .annotation rect[style*="fill"],
.dark-mode .js-plotly-plot .plotly .annotation rect[fill] {
  fill: var(--dark-mode-card-bg-4) !important;
}

/* Override any inline styles or default blue colors on SVG text */
.dark-mode .js-plotly-plot svg text[fill],
.dark-mode .js-plotly-plot svg text[style*="fill"],
.dark-mode .js-plotly-plot .svg-container svg text[fill],
.dark-mode .js-plotly-plot .svg-container svg text[style*="fill"] {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Target text elements in all Plotly containers */
.dark-mode .js-plotly-plot text,
.dark-mode .plotly text,
.dark-mode [class*="plotly"] text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .xaxis line,
.dark-mode .js-plotly-plot .plotly .yaxis line,
.dark-mode .js-plotly-plot .plotly .zaxis line {
  stroke: var(--dark-mode-border) !important;
}

.dark-mode .js-plotly-plot .plotly .xgrid line,
.dark-mode .js-plotly-plot .plotly .ygrid line,
.dark-mode .js-plotly-plot .plotly .zgrid line,
.dark-mode .plotly .xgrid line,
.dark-mode .plotly .ygrid line,
.dark-mode .plotly .zgrid line,
.dark-mode .js-plotly-plot .plotly .grid line,
.dark-mode .plotly .grid line,
.dark-mode .js-plotly-plot .plotly .cartesianlayer .gridlayer .xgrid line,
.dark-mode .js-plotly-plot .plotly .cartesianlayer .gridlayer .ygrid line,
.dark-mode .plotly .cartesianlayer .gridlayer .xgrid line,
.dark-mode .plotly .cartesianlayer .gridlayer .ygrid line,
.dark-mode .js-plotly-plot .plotly .xgrid line[style*="stroke"],
.dark-mode .js-plotly-plot .plotly .ygrid line[style*="stroke"],
.dark-mode .plotly .xgrid line[style*="stroke"],
.dark-mode .plotly .ygrid line[style*="stroke"] {
  stroke: var(--dark-mode-grid-line) !important;
  opacity: 1 !important;
  stroke-width: 1px !important;
}

.dark-mode .js-plotly-plot .plotly .legend .traces .legendtext {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .legend .bg {
  fill: var(--dark-mode-card-bg-4) !important;
  opacity: 0.9 !important;
}

.dark-mode .js-plotly-plot .plotly .hoverlabel {
  background-color: var(--dark-mode-card-bg-3) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .hoverlabel .hovertext {
  color: var(--dark-mode-text) !important;
}

/* Scrollbar dark mode */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--dark-mode-border-4) !important;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dark-mode-border-3) !important;
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-mode-border-2) !important;
}

/* Nav dark mode */
.dark-mode .nav-link {
  color: var(--dark-mode-text) !important;
}

.dark-mode .nav-link:hover {
  color: var(--dark-mode-active) !important;
}

.dark-mode .nav-link.active {
  color: var(--dark-mode-active) !important;
  background-color: var(--dark-mode-table-header) !important;
}

/* Accordion dark mode */
.dark-mode .accordion {
  background-color: var(--dark-mode-bg) !important;
}

.dark-mode .accordion-item {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .accordion-button {
  background-color: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .accordion-button:not(.collapsed) {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .accordion-body {
  background-color: var(--dark-mode-card-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

/* Spinner/Loading dark mode */
.dark-mode .spinner-border,
.dark-mode .spinner-grow {
  color: var(--dark-mode-active) !important;
}

/* Card dark mode styling - matching EDA project */
.dark-mode .card, .dark-mode .oil-container {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .card-header {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .card-title,
.dark-mode .card-title h1,
.dark-mode .card-title h2,
.dark-mode .card-title h3,
.dark-mode .card-title h4,
.dark-mode .card-title h5,
.dark-mode .card-title h6 {
  color: var(--dark-mode-text) !important;
}

.dark-mode .card-body {
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .modebar-btn   {
  background-color: var(--dark-mode-table-header) !important;
}

.dark-mode .js-plotly-plot .plotly .modebar-btn:hover {
  background-color: var(--dark-mode-table-header) !important;
}

.dark-mode .js-plotly-plot .plotly .modebar-btn.active {
  background-color: var(--dark-mode-table-header) !important;
}

.dark-mode .js-plotly-plot .plotly .modebar-btn:hover path {
  fill: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .modebar-btn.active path {
  fill: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .modebar-btn:hover path {
  fill: #ffffff !important;
}

/* ============================================
   Configuration Page Layout Dark Mode
   ============================================ */

/* Configuration main container */
.dark-mode .config-page-root .container-fluid,
.dark-mode .config-page-root .config-main-container {
  background-color: transparent !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-main-container {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-main-content {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-main-content-card {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-main-content-card-header h5 {
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-main-content-card-body {
  background-color: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-text) !important;
}

/* Configuration top bar */
.dark-mode .config-page-root {
  background-color: var(--dark-mode-bg-1) !important;
}

.dark-mode .config-page-header,
.dark-mode .config-top {
  background-color: var(--dark-mode-bg-2) !important;
  border-bottom-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark-mode .config-metadata-section,
.dark-mode .config-metadata-split {
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .config-main-row {
  background-color: transparent !important;
}

.dark-mode .config-content-wrap,
.dark-mode .config-right-column,
.dark-mode .config-two-column-layout {
  background-color: transparent !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-panel {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
  box-shadow: none !important;
}

/* Assembler Configuration */
.dark-mode .config-assembler-area {
  border-bottom-color: var(--dark-mode-border) !important;
}

.dark-mode .config-assembler-sections {
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-assembler-sections .config-subsection-title {
  color: var(--dark-mode-text) !important;
  border-bottom-color: var(--dark-mode-border) !important;
}

.dark-mode .config-assembler-sections .config-grid-label {
  color: var(--dark-mode-label) !important;
}

.dark-mode .config-assembler-sections .config-grid-field input.form-control {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-assembler-sections .config-grid-field input.form-control::placeholder {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .config-assembler-sections .assembler-config-dropdown .Select-control,
.dark-mode .config-assembler-sections .assembler-config-dropdown .dash-dropdown-trigger {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-assembler-sections .assembler-config-dropdown .Select-value-label,
.dark-mode .config-assembler-sections .assembler-config-dropdown .Select-placeholder,
.dark-mode .config-assembler-sections .assembler-config-dropdown .dash-dropdown-value-count,
.dark-mode .config-assembler-sections .assembler-config-dropdown .dash-dropdown-trigger-icon {
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-grid-label,
.dark-mode .config-subsection-title {
  color: var(--dark-mode-text-muted) !important;
}

.dark-mode .config-subsection-title,
.dark-mode .config-subsection-header {
  border-bottom-color: var(--dark-mode-border) !important;
}

.dark-mode .config-metadata-label {
  color: var(--dark-mode-text-muted) !important;
}

.dark-mode .config-metadata-input {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-metadata-dropdown .Select-control {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-metadata-dropdown .Select-value-label,
.dark-mode .config-metadata-dropdown .Select-placeholder {
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-inline-label {
  color: var(--dark-mode-text-muted) !important;
}

.dark-mode .config-lump-checkbox,
.dark-mode .config-lump-checkbox .form-check-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .back-to-result-btn {
  color: #7EC8E3 !important;
  background-color: rgba(14, 61, 85, 0.45) !important;
  border: 2px solid #4A9BB8 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

.dark-mode .back-to-result-btn-text {
  color: inherit !important;
}

.dark-mode .back-to-result-btn-icon {
  filter: brightness(0) saturate(100%) invert(78%) sepia(18%) saturate(647%) hue-rotate(152deg) brightness(95%) contrast(92%);
}

.dark-mode .config-experiment-name-input {
  border: none !important;
  border-radius: 0px !important;
  border-bottom: 1px dashed var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-experiment-name-input:focus {
  border: none !important;
  border-radius: 0px !important;
  border-bottom: 1px dashed var(--dark-mode-border) !important;
  box-shadow: none !important;
  outline: none !important;
}

.dark-mode .back-to-result-btn:hover {
  background-color: #0E3D55 !important;
  border-color: #7EC8E3 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

.dark-mode .back-to-result-btn:hover .back-to-result-btn-icon {
  filter: brightness(0) invert(1) !important;
}

.dark-mode .run-complete-experiment-btn {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .run-complete-experiment-btn:hover {
  background-color: var(--dark-mode-active-2) !important;
  color: var(--dark-mode-text) !important;
}

/* Progress section */
.dark-mode .config-progress-section {
  background-color: transparent !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .progress-section-card {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .progress-section-label-left,
.dark-mode .progress-section-label-right,
.dark-mode .progress-section-headline-text {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .progress-section-pct {
  color: var(--dark-mode-text) !important;
}

.dark-mode .progress-section-detail {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .config-progress-text {
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-status-text {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .config-note-text {
  color: var(--dark-mode-text-2) !important;
}

/* ============================================
   Sidebar Dark Mode
   ============================================ */

/* Sidebar area */
.dark-mode .config-sidebar-area {
  background-color: var(--dark-mode-bg) !important;
  color: var(--dark-mode-text) !important;
}

/* Template buttons */
.dark-mode .config-template-btn {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-template-btn:hover {
  background-color: var(--dark-mode-border-3) !important;
  border-color: var(--dark-mode-border-3) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-template-btn.active,
.dark-mode .config-template-btn.btn-primary {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-active) !important;
}

/* Runner accordion */


.dark-mode .config-runner-accordion .accordion-item {
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .config-runner-accordion .accordion-body {
  color: var(--dark-mode-text) !important;
}

/* Current selection and status text */
.dark-mode .config-current-selection-text {
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-template-status {
  color: var(--dark-mode-text-2) !important;
}

/* Parameter headers and labels */
.dark-mode .config-param-header {
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-param-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .form-label {
  color: var(--dark-mode-text-2) !important;
}

/* Parameter header container (lump scheme preview) */
.dark-mode .config-param-header-container {
  background-color: var(--dark-mode-card-bg) !important;
  border-radius: 8px !important;
  border: 1px solid var(--dark-mode-card-bg-5) !important;

}

.dark-mode .config-param-header-container h6 {
  color: var(--dark-mode-text) !important;
   background-color: var(--dark-mode-card-bg) !important;
}

.dark-mode .config-param-header-container table th {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
  border-color: #325A6E !important;
}

.dark-mode .config-param-header-container table td {
  background-color: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-text) !important;
  border-color: #353B47 !important;
}

.dark-mode .config-param-header-container table tbody tr:nth-child(even) td {
  background-color: var(--dark-mode-bg-2) !important;
}

.dark-mode .config-param-header-container table tbody tr:nth-child(odd) td {
  background-color: var(--dark-mode-bg) !important;
}

.dark-mode .config-param-header-container table tr:nth-child(even) td {
  background-color: var(--dark-mode-bg-2) !important;
}

.dark-mode .config-param-header-container table tr:nth-child(odd) td {
  background-color: var(--dark-mode-bg) !important;
} 


.dark-mode .table-bordered {
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .config-param-value-container {
  background-color: var(--dark-mode-table-border) !important;
  color: var(--dark-mode-text) !important;
}

/* Common selector (radio buttons) */
.dark-mode .common-selector {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .common-selector .form-check {
  border-right-color: var(--dark-mode-border) !important;
}

.dark-mode .common-selector .form-check-label {
  background-color: var(--dark-mode-bg) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .common-selector .form-check-label:hover {
  background-color: var(--dark-mode-border-3) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .common-selector .form-check-input:checked + .form-check-label,
.dark-mode .common-selector [type="radio"]:checked ~ label,
.dark-mode .common-selector label[data-checked="true"],
.dark-mode .common-selector .radio-checked {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
  font-weight: 500 !important;
}

.dark-mode .common-radio-label {
  color: var(--dark-mode-text) !important;
}

/* Analysis type dropdown */
.dark-mode .config-analysis-type-dropdown .Select-control {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-analysis-type-dropdown .Select-value-label {
  color: var(--dark-mode-text) !important;
}

/* Individual oils input */
.dark-mode .config-individual-oils-div .form-control {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

/* Accordion item */
.dark-mode .config-accordion-item {
  color: var(--dark-mode-text) !important;
}

/* Dropdown font */
.dark-mode .config-dropdown-font .Select-control {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-dropdown-font .Select-value-label {
  color: var(--dark-mode-text) !important;
}

/* h6 elements in configuration */
.dark-mode h6 {
  color: var(--dark-mode-text) !important;
}

.dark-mode #individual_oil_filter_container {
  background-color: var(--dark-mode-card-bg-4) !important;
  border: none !important;
  color: var(--dark-mode-text) !important;
  padding: 4px;
}

.dark-mode .config-individual-oils-wrapper {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .js-plotly-plot .plotly .svg-container .gtitle
{
  fill: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-card-bg-4) !important;
}    

.dark-mode .assembler-config-dropdown,
.dark-mode #individual_oil_id_filter ,  .dark-mode #columns_to_remove{
  background-color: var(--dark-mode-bg-2) !important;
  border-color: transparent !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode #hybrid_weighting_mode, .dark-mode #config_database_dropdown
{
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .dash-dropdown-action-button
{
  color: var(--dark-mode-text);
}

.dark-mode .assembler-config-dropdown .dash-dropdown-trigger,
.dark-mode #columns_to_remove .dash-dropdown-trigger {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .assembler-config-dropdown .Select-control {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .assembler-config-dropdown .Select-value-label,
.dark-mode .assembler-config-dropdown .Select-placeholder {
  color: var(--dark-mode-text) !important;
}

.dark-mode .dash-options-list-option-text span {
  color: #000000 !important;
}

.dark-mode .dash-dropdown-clear,
.dark-mode .dash-dropdown-value-count, 
.dark-mode .dash-dropdown-trigger-icon{
  color: var(--dark-mode-text) !important;
}

.dark-mode .dash-dropdown-trigger
{
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .manage-model-container {
  background-color: transparent !important;
}

.dark-mode .manage-model-inline-empty,
.dark-mode .manage-template-container {
  background-color: var(--dark-mode-bg-1) !important;
}

.dark-mode .manage-template-page {
  background-color: transparent !important;
}

.dark-mode .manage-template-top {
  background-color: var(--dark-mode-bg-2) !important;
  border-bottom: 1px solid var(--dark-mode-border) !important;
}

.dark-mode .manage-template-page-title {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-card {
  background-color: var(--dark-mode-card-bg-4) !important;
  border: 1px solid var(--dark-mode-card-bg-5) !important;
}

.dark-mode .manage-template-templates-panel,
.dark-mode .manage-template-upload-panel,
.dark-mode .manage-template-add-panel {
  background-color: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-panel-hint,
.dark-mode .manage-template-list-empty,
.dark-mode .manage-template-upload-filename,
.dark-mode .manage-template-selected-file {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .manage-template-field-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-upload-dropzone {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-upload-dropzone:hover {
  border-color: var(--dark-mode-active) !important;
  background-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .manage-template-upload-dropzone-title {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-upload-link {
  color: var(--dark-mode-btn) !important;
}

.dark-mode .add-template-property-group {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .add-template-cce-panel .add-template-property-group {
  background-color: transparent !important;
}

.dark-mode .add-template-property-group-title,
.dark-mode .add-template-property-subtitle {
  color: var(--dark-mode-text-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .add-template-cce-full-wrap {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .manage-template-tabs .nav-link {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-tabs .nav-link:hover {
  background-color: var(--dark-mode-card-bg-5) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-tabs .nav-link.active {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-list-table {
  background-color: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-list-table thead {
  background-color: var(--dark-mode-table-header) !important;
}

.dark-mode .manage-template-list-th {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
  border-bottom: 1px solid var(--dark-mode-table-border-header) !important;
}

.dark-mode .manage-template-list-table tbody tr:nth-child(odd) .manage-template-list-td-name,
.dark-mode .manage-template-list-table tbody tr:nth-child(odd) .manage-template-list-td-folder,
.dark-mode .manage-template-list-table tbody tr:nth-child(odd) .manage-template-list-td-file,
.dark-mode .manage-template-list-table tbody tr:nth-child(odd) .manage-template-list-td-status,
.dark-mode .manage-template-list-table tbody tr:nth-child(odd) .manage-template-list-td-created,
.dark-mode .manage-template-list-table tbody tr:nth-child(odd) .manage-template-list-td-actions {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-bottom: 1px solid var(--dark-mode-table-border) !important;
}

.dark-mode .manage-template-list-table tbody tr:nth-child(even) .manage-template-list-td-name,
.dark-mode .manage-template-list-table tbody tr:nth-child(even) .manage-template-list-td-folder,
.dark-mode .manage-template-list-table tbody tr:nth-child(even) .manage-template-list-td-file,
.dark-mode .manage-template-list-table tbody tr:nth-child(even) .manage-template-list-td-status,
.dark-mode .manage-template-list-table tbody tr:nth-child(even) .manage-template-list-td-created,
.dark-mode .manage-template-list-table tbody tr:nth-child(even) .manage-template-list-td-actions {
  background-color: var(--dark-mode-bg-2) !important;
  border-bottom: 1px solid var(--dark-mode-table-border) !important;
}

.dark-mode .manage-template-list-td-name {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-list-td-folder,
.dark-mode .manage-template-list-td-file,
.dark-mode .manage-template-list-td-created {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .manage-template-download-input-btn {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-download-output-btn {
  background-color: var(--dark-mode-table-header) !important;
  border: 1px solid var(--dark-mode-active) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-list-error {
  color: #f87171 !important;
}

.dark-mode .add-template-step-header {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .add-template-step-item {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .add-template-step-item-active {
  background-color: var(--dark-mode-active) !important;
  color: #fff !important;
}

.dark-mode .add-template-step-item-complete {
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-required-asterisk {
  color: #f87171 !important;
}

.dark-mode .add-template-composition-wrap,
.dark-mode .add-template-cce-full-table th,
.dark-mode .add-template-cce-full-table td {
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .add-template-total-zi-row {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .add-template-field-input {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-header {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .manage-model-header-row-secondary {
  border-top-color: var(--dark-mode-border) !important;
}

.dark-mode .manage-model-toolbar-label {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .manage-model-view-panel-header {
  border-bottom-color: var(--dark-mode-border) !important;
}

.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-expanded .manage-model-list-td-name,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-expanded .manage-model-list-td-database,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-expanded .manage-model-list-td-experiment-name,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-expanded .manage-model-list-td-actions {
  background-color: rgba(34, 152, 213, 0.15) !important;
}

.dark-mode .manage-model-list-td-database {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-database-heading {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-page-title {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-top,
.dark-mode .manage-model-view-toolbar {
  background-color: var(--dark-mode-bg-2) !important;
  border: 1px solid var(--dark-mode-border) !important;
}

.dark-mode .manage-model-models-card,
.dark-mode .manage-model-view-card {
  background-color: var(--dark-mode-card-bg-4) !important;
  border: 1px solid var(--dark-mode-card-bg-5) !important;
}

.dark-mode .manage-model-models-card .config-main-content-card-header {
  background-color: var(--dark-mode-table-header) !important;
  border-bottom: 1px solid var(--dark-mode-table-border-header) !important;
}

.dark-mode .manage-model-models-card .config-main-content-card-header h5 {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-models-card .config-main-content-card-body,
.dark-mode .manage-model-list-content,
.dark-mode .manage-model-view-card-body {
  background-color: var(--dark-mode-card-bg-4) !important;
}

.dark-mode .config-assembler-sections .assembler-config-dropdown .dash-dropdown-trigger
{
  border: 1px solid var(--dark-mode-border) !important;
}

.dark-mode .manage-model-rerun-settings {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .manage-model-rerun-settings-title,
.dark-mode .manage-model-version-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-rerun-settings-hint {
  color: var(--dark-mode-text-muted, #9ca3af) !important;
}

.dark-mode .manage-model-list-table {
  background-color: transparent !important;
  color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-table-border) !important;
}

.dark-mode .manage-model-list-table thead {
  background-color: var(--dark-mode-table-header) !important;
}

.dark-mode .manage-model-list-th {
  color: var(--dark-mode-text) !important;
  background-color: var(--dark-mode-table-header) !important;
  border-color: var(--dark-mode-table-border-header) !important;
  border-bottom: 1px solid var(--dark-mode-table-border-header) !important;
}

.dark-mode .manage-model-list-table tbody tr:nth-child(odd) .manage-model-list-td-name,
.dark-mode .manage-model-list-table tbody tr:nth-child(odd) .manage-model-list-td-database,
.dark-mode .manage-model-list-table tbody tr:nth-child(odd) .manage-model-list-td-experiment-name,
.dark-mode .manage-model-list-table tbody tr:nth-child(odd) .manage-model-list-td-last-run,
.dark-mode .manage-model-list-table tbody tr:nth-child(odd) .manage-model-list-td-actions {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-table-border) !important;
}

.dark-mode .manage-model-list-table tbody tr:nth-child(even) .manage-model-list-td-name,
.dark-mode .manage-model-list-table tbody tr:nth-child(even) .manage-model-list-td-database,
.dark-mode .manage-model-list-table tbody tr:nth-child(even) .manage-model-list-td-experiment-name,
.dark-mode .manage-model-list-table tbody tr:nth-child(even) .manage-model-list-td-last-run,
.dark-mode .manage-model-list-table tbody tr:nth-child(even) .manage-model-list-td-actions {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-table-border) !important;
}

.dark-mode .manage-model-list-td-name {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-list-td-experiment-name {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .manage-model-list-td-last-run {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-list-version-text {
  color: #7EC8E3 !important;
}

.dark-mode .manage-model-list-last-run-empty {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .manage-model-list-td-actions {
  background-color: inherit !important;
}

.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-last-run .manage-model-list-td-name,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-last-run .manage-model-list-td-experiment-name,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-last-run .manage-model-list-td-last-run,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-last-run .manage-model-list-td-actions {
  background-color: rgba(14, 61, 85, 0.28) !important;
  border-color: var(--dark-mode-table-border) !important;
}

.dark-mode .manage-model-last-run-badge {
  color: #7EC8E3 !important;
  background-color: rgba(14, 61, 85, 0.55) !important;
  border-color: #4A9BB8 !important;
}

.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-selected .manage-model-list-td-name,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-selected .manage-model-list-td-database,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-selected .manage-model-list-td-experiment-name,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-selected .manage-model-list-td-last-run,
.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-selected .manage-model-list-td-actions {
  background-color: var(--dark-mode-card-bg-2) !important;
}

.dark-mode .manage-model-list-table tbody tr.manage-model-list-row-selected .manage-model-list-td-name {
  color: var(--dark-mode-text) !important;
  font-weight: 600 !important;
}

.dark-mode .manage-model-version-help {
  background-color: rgba(14, 61, 85, 0.35) !important;
  border-color: #4A9BB8 !important;
}

.dark-mode .manage-model-version-help-text {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-param-td-value,
.dark-mode .manage-model-param-td-label {
  color: var(--dark-mode-text) !important;
}


.dark-mode .manage-model-param-th {
  color: var(--dark-mode-text-2) !important;
  background-color: var(--dark-mode-table-header) !important;
  border-bottom-color: var(--dark-mode-table-border-header) !important;
}

.dark-mode .manage-model-param-td-label,
.dark-mode .manage-model-param-td-value {
  border-bottom-color: var(--dark-mode-table-border) !important;
}

.dark-mode .page-chrome-back-btn
{
  color: var(--dark-mode-text) !important;
}

.dark-mode .page-chrome-back-btn:hover {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-view-btn {
  color: var(--dark-mode-btn) !important;
  border-color: var(--dark-mode-btn) !important;
  background-color: transparent !important;
}

.dark-mode .manage-model-view-btn:hover {
  background-color: var(--dark-mode-hover) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-edit-btn {
  background-color: var(--dark-mode-table-header) !important;
  border-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-run-btn {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-delete-btn {
  color: #f87171 !important;
  border-color: #f87171 !important;
  background-color: transparent !important;
}

.dark-mode .manage-model-delete-btn:hover,
.dark-mode .manage-model-delete-btn:focus {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

.dark-mode .save-build-config-alert {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.dark-mode .config-template-locked-label {
  background-color: var(--dark-mode-bg) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

/* Home page */
.dark-mode .home-top-toolbar {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .home-toolbar-row-secondary {
  border-top-color: var(--dark-mode-border) !important;
}

.dark-mode .home-toolbar-label,
.dark-mode .home-inline-label {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .home-toolbar-divider {
  background-color: var(--dark-mode-border) !important;
}

.dark-mode .home-toolbar-model-db.header-dropdown-segmented-container {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .home-toolbar-model-db .header-dropdown-separator {
  background-color: var(--dark-mode-border) !important;
}

.dark-mode .home-panel {
  background-color: var(--dark-mode-card-bg-2) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .home-performance-plot-controls-row
{
  border-color: var(--dark-mode-card-bg-5) !important;
}

.dark-mode .home-panel-title {
  color: var(--dark-mode-text) !important;
}

.dark-mode .home-panel-header-row,
.dark-mode .home-performance-header-row {
  border-bottom-color: var(--dark-mode-border) !important;
}

.dark-mode .home-summary-plots-toggle.result-view-mode-container {
  background-color: transparent !important;
  border: none !important;
}

.dark-mode .manage-model-inline-empty {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .home-page-container {
  background-color: var(--dark-mode-bg-1) !important;
}

.dark-mode .home-empty-state-text,
.dark-mode .home-pvt-plots-display .text-muted,
.dark-mode .home-model-performance-plots .text-muted {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .home-page-container .home-model-dropdown .Select-control,
.dark-mode .home-page-container .home-database-dropdown .Select-control {
  background-color: transparent !important;
  border: none !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .home-page-container .home-model-dropdown .Select-value-label,
.dark-mode .home-page-container .home-database-dropdown .Select-value-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .home-page-container #result_history_plot_tabs .nav-link {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .home-page-container #result_history_plot_tabs .nav-link.active {
  background-color: var(--dark-mode-tab-active) !important;
  color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-tab-border) !important;
}

.dark-mode .home-page-container #result_history_plot_tabs {
  background-color: var(--dark-mode-tab-bg) !important;
  border-color: var(--dark-mode-tab-border) !important;
}

.dark-mode .home-page-container .pvt-plot-card,
.dark-mode .home-page-container .card {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .home-page-container .card-header {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .home-ai-params-btn.run-complete-experiment-btn {
  background-color: var(--dark-mode-table-header) !important;
  border-color: var(--dark-mode-table-border-header) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .home-ai-params-btn.run-complete-experiment-btn:hover {
  background-color: var(--dark-mode-btn-active) !important;
}

.dark-mode .page-chrome-action-btn {
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .page-chrome-action-btn:hover {
  background-color: var(--dark-mode-card-bg-5) !important;
  color: var(--dark-mode-text) !important;
}

/* View All Predicted Results — dark mode */
.dark-mode .home-page-container .home-performance-plot-tabs .nav-tabs {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .home-page-container .home-performance-plot-tabs .nav-link {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .home-page-container .home-performance-plot-tabs .nav-link.active {
  background-color: #0E3D55 !important;
  color: #fff !important;
}

.dark-mode .home-chart-selector.common-selector {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .home-chart-selector.common-selector .form-check-label {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .home-chart-selector.common-selector .form-check-input:checked + .form-check-label {
  background-color: #0E3D55 !important;
  color: #fff !important;
}

.dark-mode .model-list-shimmer-cell {
  opacity: 1;
}

.dark-mode .model-list-shimmer,
.dark-mode .manage-model-list-shimmer-active,
.dark-mode .manage-model-list-content,
.dark-mode .manage-template-predicted-results-shimmer,
.dark-mode .manage-template-predicted-results-content,
.dark-mode .manage-model-list-loading-wrap,
.dark-mode .manage-template-predicted-results-loading-wrap,
.dark-mode .manage-model-list-loading-wrap ._dash-loading-callback,
.dark-mode .manage-template-predicted-results-loading-wrap ._dash-loading-callback {
  background-color: var(--pvt-shimmer-surface) !important;
}

.dark-mode .shimmer-placeholder,
.dark-mode .model-list-shimmer-cell {
  background: linear-gradient(
    90deg,
    var(--pvt-shimmer-body-1) 8%,
    var(--pvt-shimmer-body-2) 18%,
    var(--pvt-shimmer-body-1) 33%
  ) !important;
  background-size: 200% 100%;
}

.dark-mode .card-header.shimmer-placeholder,
.dark-mode .mt-prediction-shimmer-header {
  background: linear-gradient(
    90deg,
    var(--pvt-shimmer-header-1) 8%,
    var(--pvt-shimmer-header-2) 18%,
    var(--pvt-shimmer-header-1) 33%
  ) !important;
  background-size: 200% 100%;
}

.dark-mode .mt-prediction-shimmer-card {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .mt-viz-performance-panel .panel-empty-state,
.dark-mode .mt-viz-performance-panel .mt-prediction-empty,
.dark-mode .home-pvt-plots-display .panel-empty-state,
.dark-mode .home-pvt-plots-display .mt-prediction-empty {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .panel-empty-state,
.dark-mode .predicted-results-empty {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .predicted-results-table-scroll {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .predicted-results-table {
  color: var(--dark-mode-text) !important;
}

.dark-mode .predicted-results-th {
  background-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .predicted-results-table tbody td {
  background-color: var(--dark-mode-card-bg) !important;
  color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .predicted-results-table tbody tr:hover td {
  background-color: var(--dark-mode-table-row-hover) !important;
}

.dark-mode .predicted-region-chip {
  color: var(--dark-mode-text) !important;
}

.dark-mode .predicted-results-legend {
  color: var(--dark-mode-text-muted) !important;
}

.dark-mode .predicted-results-download-btn {
  background-color: var(--dark-mode-table-header) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .predicted-results-delete-btn {
  background-color: transparent !important;
  border-color: #c62828 !important;
  color: #ef9a9a !important;
}

.dark-mode .predicted-results-sample-link {
  color: #7ec8e3 !important;
}

.dark-mode .predicted-results-sample-link:hover,
.dark-mode .predicted-results-sample-link:focus {
  color: #a8dcef !important;
}

.dark-mode .page-chrome {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .page-chrome.header-section {
  background-color: var(--dark-mode-card-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .page-chrome-app-nav-row,
.dark-mode .page-chrome-template-row {
  background-color: var(--dark-mode-card-bg-2) !important;
  border-bottom-color: var(--dark-mode-border) !important;
}

.dark-mode .home-no-experiments, .dark-mode .home-empty-state-card{
  background-color: var(--dark-mode-card-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
}
.dark-mode .home-no-experiments .panel-empty-state-text, .dark-mode .home-empty-state-text{
  background-color: var(--dark-mode-card-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text-2) !important;
}
.dark-mode .home-no-experiments .panel-empty-state-title, .dark-mode .home-empty-state-title{
  background-color: var(--dark-mode-card-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .home-experiment-running-card {
  background-color: var(--dark-mode-card-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .home-experiment-running-title {
  color: var(--dark-mode-text) !important;
}

.dark-mode .home-experiment-running-detail {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .home-experiment-running-hint {
  color: var(--dark-mode-text-muted, #9aa0a6) !important;
}


.dark-mode .predicted-status-completed{
  background-color: #86efac !important;
  border-color: var(--dark-mode-success-border) !important;
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .predicted-status-failed{
  background-color: #fca5a5 !important;
  border-color: var(--dark-mode-danger-border) !important;
  color: var(--dark-mode-text) !important;
}
.dark-mode .predicted-status-running{
  background-color: #fcd34d !important;
  border-color: var(--dark-mode-warning-border) !important;
  color: var(--dark-mode-text) !important;
}
.dark-mode .predicted-status-pending{   
  background-color: #ffffff !important;
  border-color: var(--dark-mode-border) !important;
  color: #000000 !important;
}

.dark-mode .page-chrome-template-row .manage-template-tabs .nav-link {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .page-chrome-template-row .manage-template-tabs .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .page-chrome-template-row .manage-template-tabs .nav-link.active {
  background-color: #0E3D55 !important;
  color: #fff !important;
  border-color: #0E3D55 !important;
}

.dark-mode .page-chrome-toolbar-row {
  background-color: transparent !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .page-chrome-toolbar-divider {
  background-color: var(--dark-mode-border) !important;
}

.dark-mode .page-empty-state,
.dark-mode .page-content-panel {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .page-empty-state-title {
  color: var(--dark-mode-text) !important;
}

.dark-mode .page-empty-state-text {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .page-empty-state-compact {
  background-color: transparent !important;
  border: none !important;
}

.dark-mode .config-panel-assembler {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .page-chrome-nav-wrap {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .app-page-nav.common-selector.app-nav-compact {
  background-color: var(--dark-mode-bg-2, #1a1f2e) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .app-page-nav.common-selector .form-check-label {
  color: var(--dark-mode-text-muted, #98a2b3) !important;
  background-color: transparent !important;
}

.dark-mode .app-page-nav.common-selector .form-check-label:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .app-page-nav.common-selector .form-check-input:checked + .form-check-label,
.dark-mode .app-page-nav.common-selector label[data-checked="true"] {
  background-color: #0E3D55 !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.dark-mode .app-page-nav.common-selector .form-check {
  border-right: none !important;
}

.dark-mode .manage-model-inline-col-builder {
  background-color: rgba(46, 125, 50, 0.2) !important;
}

.dark-mode .manage-model-inline-col-lump {
  background-color: rgba(251, 192, 45, 0.15) !important;
}

.dark-mode .manage-model-inline-col-runner {
  background-color: rgba(25, 118, 210, 0.15) !important;
}

.dark-mode .manage-model-inline-col-label,
.dark-mode .manage-model-inline-field-label {
  color: var(--dark-mode-text-muted) !important;
}

.dark-mode .manage-model-inline-field {
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-model-list-row-detail td {
  background-color: var(--dark-mode-background) !important;
}

/* Global toast — dark mode */
.dark-mode .app-toast-item .alert {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .app-toast-item .alert-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  color: #86efac !important;
}

.dark-mode .app-toast-item .alert-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}

.dark-mode .app-toast-item .alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fcd34d !important;
}

.dark-mode .app-toast-item .alert-info {
  background-color: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #93c5fd !important;
}

/* Config shimmer — dark mode */
.dark-mode .config-shimmer-line {
  background: linear-gradient(
    90deg,
    var(--pvt-shimmer-body-1) 8%,
    var(--pvt-shimmer-body-2) 18%,
    var(--pvt-shimmer-body-1) 33%
  ) !important;
}

.dark-mode .config-grid-field input.form-control,
.dark-mode .config-grid-field .Select-control {
  background-color: var(--dark-mode-input-bg, #1f2937) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-lump-inline-row .config-lump-checkbox .form-check-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-lump-inline-row .config-lump-checkbox .form-check-input {
  background-color: var(--dark-mode-input-bg, #1f2937);
  border-color: var(--dark-mode-border);
}

.dark-mode .config-runner-area .config-param-col input.form-control,
.dark-mode .config-runner-area .config-param-col .Select-control {
  background-color: var(--dark-mode-input-bg, #1f2937) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .config-runner-area .config-individual-oils-wrapper {
  background-color: var(--dark-mode-input-bg, #1f2937) !important;
  border-color: var(--dark-mode-border) !important;
}

/* Result history / home layout */
.dark-mode .result-history-container,
.dark-mode .home-main-section,
.dark-mode .home-top-toolbar {
  background-color: transparent !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .home-pvt-plots-display .text-muted,
.dark-mode .home-model-performance-plots .text-muted {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .home-chart-selector.common-selector,
.dark-mode .home-compact-selector.common-selector {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .home-chart-selector.common-selector .form-check-label,
.dark-mode .home-compact-selector.common-selector .form-check-label {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .home-chart-selector.common-selector .form-check-input:checked + .form-check-label,
.dark-mode .home-compact-selector.common-selector .form-check-input:checked + .form-check-label,
.dark-mode .home-chart-selector.common-selector label[data-checked="true"],
.dark-mode .home-compact-selector.common-selector label[data-checked="true"] {
  background-color: var(--dark-mode-tab-active) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .home-chart-selector.common-selector .form-check-label:hover,
.dark-mode .home-compact-selector.common-selector .form-check-label:hover {
  background-color: var(--dark-mode-hover) !important;
  color: var(--dark-mode-text) !important;
}

/* Main page input upload chrome */
.dark-mode .main-upload-input-title,
.dark-mode .main-upload-drop-title,
.dark-mode .main-upload-drop-hint {
  color: var(--dark-mode-text) !important;
}

.dark-mode .main-upload-input-box-wrap {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .main-upload-input-box-wrap--selected {
  border-color: var(--dark-mode-active) !important;
  background-color: rgba(34, 152, 213, 0.12) !important;
}

.dark-mode .main-upload-input-box-wrap--uploaded {
  border-color: #34d399 !important;
  background-color: rgba(52, 211, 153, 0.1) !important;
}

.dark-mode .main-upload-uploaded-badge {
  background-color: rgba(52, 211, 153, 0.2) !important;
  color: #86efac !important;
}

.dark-mode .main-upload-selected-badge {
  background-color: rgba(34, 152, 213, 0.2) !important;
  color: #93c5fd !important;
}

.dark-mode .main-upload-nav-drop-link {
  color: var(--dark-mode-active) !important;
}

.dark-mode .main-upload-excel-preview {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .main-upload-excel-preview:hover {
  background-color: var(--dark-mode-card-bg-5) !important;
  border-color: var(--dark-mode-active) !important;
}

.dark-mode .main-upload-excel-hint {
  color: var(--dark-mode-active) !important;
}

.dark-mode .main-upload-excel-name {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .main-upload-field-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .main-upload-nav-model-config,
.dark-mode .main-upload-nav-model-body {
  background-color: transparent !important;
}

.dark-mode .main-upload-nav-model-config,
.dark-mode .main-upload-nav-model-row .home-inline-label,
.dark-mode .main-upload-nav-model-row .config-grid-label {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .main-upload-nav-model-row .Select-control,
.dark-mode .main-upload-nav-model-row .form-control {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .manage-template-upload-alert .alert {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

/* Manage Template visualization */
.dark-mode .mt-viz-toolbar,
.dark-mode .mt-viz-toolbar-primary,
.dark-mode .manage-template-model-config-section {
  background-color: transparent !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .mt-viz-two-column .home-col-left,
.dark-mode .mt-viz-two-column .home-col-right,
.dark-mode .mt-viz-performance-panel,
.dark-mode .manage-template-visualization-panel {
  background-color: transparent !important;
}

.dark-mode .mt-prediction-plot-tabs .nav-tabs {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .mt-prediction-plot-tabs .nav-link {
  color: var(--dark-mode-text-2) !important;
}

.dark-mode .mt-prediction-plot-tabs .nav-link:hover {
  background-color: var(--dark-mode-hover) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .mt-prediction-plot-tabs .nav-link.active {
  background-color: var(--dark-mode-tab-active) !important;
  color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-tab-active) !important;
}

.dark-mode .predicted-region-trust {
  background-color: rgba(52, 211, 153, 0.2) !important;
  color: #86efac !important;
}

.dark-mode .predicted-region-sparse {
  background-color: rgba(251, 191, 36, 0.2) !important;
  color: #fcd34d !important;
}

.dark-mode .predicted-region-none {
  background-color: rgba(248, 113, 113, 0.2) !important;
  color: #fca5a5 !important;
}

.dark-mode .predicted-region-unknown {
  background-color: var(--dark-mode-card-bg-5) !important;
  color: var(--dark-mode-text-2) !important;
}

/* Portaled modals and dropdowns (body.dark-mode) */
body.dark-mode .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.65) !important;
}

body.dark-mode .pvt-app-modal .modal-content,
body.dark-mode .predicted-results-run-modal .modal-content {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

body.dark-mode .pvt-app-modal .modal-header,
body.dark-mode .predicted-results-run-modal .modal-header {
  background-color: var(--dark-mode-table-header) !important;
  border-bottom-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

body.dark-mode .pvt-app-modal .modal-body,
body.dark-mode .predicted-results-run-modal .modal-body,
body.dark-mode .pvt-app-modal .modal-footer,
body.dark-mode .predicted-results-run-modal .modal-footer {
  background-color: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-text) !important;
}

body.dark-mode .Select-menu-outer,
body.dark-mode .dash-dropdown-content {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
}

body.dark-mode .Select-option {
  background-color: var(--dark-mode-table-border) !important;
  color: var(--dark-mode-text) !important;
}

body.dark-mode .Select-option.is-focused,
body.dark-mode .Select-option:hover {
  background-color: var(--dark-mode-hover) !important;
  color: var(--dark-mode-text) !important;
}