/* Navbar in modalità chiara */


/* Sfondo e testo principali */
.dark-mode .sw-dropdown-content,
.dark-mode .sw-dropdown-in,
.dark-mode .dropdown-menu,
.dark-mode .bttn-warning,
.dark-mode .bttn-primary,
.dark-mode .sweet-alert,
.dark-mode .swal2-popup,
.dark-mode .swal2-html-container,
.dark-mode .dataTables_scroll,
.dark-mode .well,
.dark-mode .modal-content {
  background-color: #343A40 !important;
  color: #ffffff !important;
}

.dark-mode .swal2-title#swal2-title,
#swal2-html-container,
.dark-mode .sweet-alert h2,
.dark-mode .sweet-alert p {
  color: #ffffff !important;
}

/* SweetAlert Success Icon Fix */
.dark-mode .sweet-alert .sa-icon.sa-success .sa-success-ring {
  border: 4px solid #5cb85c !important;
  background-color: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

.dark-mode .sweet-alert .sa-icon.sa-success,
.dark-mode .sweet-alert .sa-fix,
.dark-mode .sweet-alert .sa-placeholder {
  background-color: transparent !important;
}

.dark-mode .sweet-alert .sa-line,
.dark-mode .sweet-alert .sa-tip,
.dark-mode .sweet-alert .sa-long {
  background-color: #5cb85c !important;
}

.dark-mode .sweet-alert .sa-icon.sa-success.animate {
  animation: none !important;
}

.dark-mode .sweet-alert .sa-icon.sa-success.animate::before,
.dark-mode .sweet-alert .sa-icon.sa-success.animate::after {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Bottone OK SweetAlert */
.dark-mode .sweet-alert .confirm {
  background-color: #3A9BDC !important;
  color: #ffffff !important;
}

.dark-mode .sweet-alert .confirm:hover {
  background-color: #2f81bb !important;
}

/* Output testuali (pre) */
.dark-mode pre.shiny-text-output {
  background-color: #272c30 !important;
  color: #ffffff !important;
  border: 1px solid #444 !important;
  padding: 10px;
  font-family: monospace;
}

/* Bottone dropdown */
.dark-mode .btn.dropdown-toggle.btn-default {
  background-color: #2c2f34 !important;
  border-color: #444 !important;
  color: #ffffff !important;
}

/* Selectize: selezione attiva */
.dark-mode .selectize-input {
  background-color: #2c2f34 !important;
  color: #ffffff !important;
  border: 1px solid #555 !important;
  min-height: 38px;
}

/* Item selezionati */
.dark-mode .selectize-input .item,
.dark-mode .selectize-input.items .item {
  background-color: #444 !important;
  color: #ffffff !important;
  border: 1px solid #666 !important;
  border-radius: 4px;
  padding: 2px 6px;
  margin: 3px 2px;
}

/* Rimuovi item (×) */
.dark-mode .selectize-input .item .remove,
.dark-mode .selectize-input.items .item .remove {
  color: #ffffff !important;
  opacity: 0.8;
  margin-left: 6px;
}

.dark-mode .selectize-input .item .remove:hover,
.dark-mode .selectize-input.items .item .remove:hover {
  color: #ff5c5c !important;
  opacity: 1;
}

.dark-mode .bttn-material-circle.bttn-danger {
  background: #ff5964;
    color: #fff;
}

/* Dropdown Selectize */
.dark-mode .selectize-dropdown {
  background-color: #2c2f34 !important;
  color: #ffffff !important;
  border: 1px solid #444 !important;
}

.dark-mode .selectize-dropdown .option {
  background-color: #2c2f34 !important;
  color: #ffffff !important;
}

.dark-mode .selectize-dropdown .option:hover,
.dark-mode .selectize-dropdown .option.active {
  background-color: #444 !important;
  color: #ffffff !important;
}

.dark-mode .selectize-dropdown .option.disabled {
  background-color: #2c2f34 !important;
  color: #888888 !important;
  opacity: 0.6 !important;
}

.dark-mode .selectize-dropdown .optgroup-header {
  background-color: #2c2f34 !important;
  color: #bbbbbb !important;
  font-weight: bold;
  padding: 6px 10px;
}
.dark-mode .content-wrapper {
    background-color: #454d55;
    color: black;
}

/* Scrollbar (solo per WebKit) */
.dark-mode .selectize-dropdown-content::-webkit-scrollbar {
  width: 8px;
}

.dark-mode .selectize-dropdown-content::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 4px;
}

/* DataTables */
.dark-mode .dataTable,
.dark-mode .dataTables_wrapper {
  background-color: #343A40  !important;
  color: #ffffff !important;
}

.dark-mode .dataTables_wrapper .dataTables_info,
.dark-mode .dataTables_wrapper .dataTables_paginate,
.dark-mode .dataTables_wrapper .dataTables_filter label,
.dark-mode .dataTables_wrapper .dataTables_length label {
  color: #ffffff !important;
}

.dark-mode table.dataTable td,
.dark-mode table.dataTable th {
  color: #ffffff !important;
  background-color: #343A40 !important;
}

.dark-mode .nav-pills .nav-link {
    color: #28a745;
}


@media (max-width: 768px) {
  body.dark-mode #multi_deuterated_solvents-sec .nav-link {
    background-color: #343A40 !important; /* colore per dark mode */
    border-color: #555 !important;
  }
}
@media (max-width: 768px) {
  body.dark-mode #multi_solvents-sec .nav-link {
    background-color: #343A40 !important; /* colore per dark mode */
    border-color: #555 !important
  }
}

@media (max-width: 768px) {
  #multi_solvents-sec .nav-link.active,
  body.dark-mode #multi_solvents-sec .nav-link.active {
    background-color: #28a745 !important; /* verde */
    color: #fff !important;               /* testo bianco */
  }
}
@media (max-width: 768px) {
  #multi_deuterated_solvents-sec .nav-link.active,
  body.dark-mode #multi_deuterated_solvents-sec .nav-link.active {
    background-color: #28a745 !important; /* verde */
    color: #fff !important;               /* testo bianco */
  }
}

.dropdown-item.active, .dropdown-item:active {
    text-decoration: none;
    background-color: #28a745;
}

.dark-mode .dropdown-item.active, .dark-mode .dropdown-item:active {
    text-decoration: none;
    background-color: #28a745;
}

/* 0) Setta le variabili DataTables al verde (scope: tabella) */
table.dataTable {
  --dt-row-hover: 40,167,69;            /* hover */
  --dt-row-selected: 40,167,69;         /* selected */
  --dt-row-selected-text: 255,255,255;  /* testo su selected */
}

/* Dark mode: stesse variabili */
body.dark-mode table.dataTable {
  --dt-row-hover: 40,167,69;
  --dt-row-selected: 40,167,69;
  --dt-row-selected-text: 255,255,255;
}

/* 1) HOVER (riga non selezionata) → verde soft */
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(40,167,69,0.2) !important;
  color: inherit !important;
  transition: none !important;
}
body.dark-mode table.dataTable.hover > tbody > tr:hover > *,
body.dark-mode table.dataTable.display > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(40,167,69,0.2) !important;
  color: inherit !important;
  transition: none !important;
}

/* 2) SELECTED (sempre verde pieno) */
table.dataTable tbody tr.selected > *,
table.dataTable.stripe > tbody > tr.selected.odd > *,
table.dataTable.display > tbody > tr.selected.odd > *,
table.dataTable.stripe > tbody > tr.selected.even > *,
table.dataTable.display > tbody > tr.selected.even > * {
  box-shadow: inset 0 0 0 9999px #28a745 !important;
  color: #fff !important;
  transition: none !important;
}
body.dark-mode table.dataTable tbody tr.selected > *,
body.dark-mode table.dataTable.stripe > tbody > tr.selected.odd > *,
body.dark-mode table.dataTable.display > tbody > tr.selected.odd > *,
body.dark-mode table.dataTable.stripe > tbody > tr.selected.even > *,
body.dark-mode table.dataTable.display > tbody > tr.selected.even > * {
  box-shadow: inset 0 0 0 9999px #28a745 !important;
  color: #fff !important;
  transition: none !important;
}

/* 3) SELECTED + HOVER (qui compariva il blu) → resta verde pieno */
table.dataTable.hover > tbody > tr.selected:hover > *,
table.dataTable.display > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px #28a745 !important;
  color: #fff !important;
  transition: none !important;
}
body.dark-mode table.dataTable.hover > tbody > tr.selected:hover > *,
body.dark-mode table.dataTable.display > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px #28a745 !important;
  color: #fff !important;
  transition: none !important;
}



.dark-mode .dataTables_wrapper input[type=search],
.dark-mode .dataTables_wrapper select {
  background-color: #262B2F !important;
  color: #ffffff !important;
  border: 1px solid #262B2F !important;
}

.dark-mode .dataTables_wrapper .paginate_button {
  color: #ffffff !important;
}

.dark-mode .dataTables_wrapper .paginate_button.current {
  background-color: #444 !important;
  border: 1px solid #666 !important;
}
/* === noUiSlider compatibile con tema dark (skin-midnight) === */

.dark-mode .noUi-target {
  background: #2c2f34 !important; /* sfondo slider */
  border: 1px solid #444 !important;
  border-radius: 4px !important;
}

.dark-mode .noUi-connect {
  background: #5cb85c !important; /* colore barra attiva */
}

.dark-mode .noUi-background {
  background: #555 !important; /* barra inattiva */
}

.dark-mode .noUi-handle {
  background: #3a3f45 !important;
  border: 1px solid #666 !important;
  box-shadow: none !important;
  cursor: pointer;
}

.dark-mode .noUi-handle:hover {
  background: #5cb85c !important;
  border-color: #5cb85c !important;
}

/* Testo ai lati dello slider */
.dark-mode .noUi-target + span,
.dark-mode .noUi-target + span + span {
  color: #ffffff !important;
  font-weight: bold;
}

/* Forza lo sfondo e bordo del contenitore esterno */
.dark-mode div[style*="z-index: 25"] {
  background-color: #2c2f34 !important;
  border: 1px solid #444 !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* Bonus: stile coerente anche per slider e maniglie (già incluso prima) */
.dark-mode .noUi-target {
  background: #2c2f34 !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
}