/* Dark Mode CSS for PVT Prediction App */

:root {
  /* Dark mode color variables - matching Vue.js app */
  --dark-mode-bg: #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 class */
.dark-mode {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

/* Body and main container dark mode */
.dark-mode body {
  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{
  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;
}

/* 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 {
  stroke: var(--dark-mode-border-3) !important;
  opacity: 0.3 !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 {
  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 {
  background-color: var(--dark-mode-card-bg-4) !important;
  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-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-top {
  background-color: var(--dark-mode-bg-2) !important;
  border-bottom-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .back-to-result-btn {
  color: var(--dark-mode-text) !important;
  background-color: var(--dark-mode-bg-2) !important;
}


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

.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: var(--dark-mode-border-3) !important;
  border-color: var(--dark-mode-border-3) !important;
  color: var(--dark-mode-text) !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: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-text) !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 {
  background-color: var(--dark-mode-bg) !important;
}

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

.dark-mode .config-runner-accordion .accordion-body {
  background-color: var(--dark-mode-bg) !important;
  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 {
  background-color: var(--dark-mode-card-bg-4) !important;
  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;
}