/*===== GENERAL CHANGES =====*/

/* Smoooth scrolling looks nicer */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #1d1c1f;
}

/*===== TYPOGRAPHY =====*/

/* Highlight text in white for documentation */
em {
  color: white;
  font-style: normal;
}

/* Unvisited link */
a:link {
  color: #1fafc8;
  font-style: italic;
}

/* Visited link */
a:visited {
  color: #1fafc8;
  font-style: italic;
}

/* Hover link */
a:hover {
  color: #1fafc8;
  font-style: italic;
  text-decoration: underline;
}

/* Title in white for documentation and main page */
h1 {
  color: white;
  text-align: center;
}

/* Subtitles in blue */
h2,
h3 {
  color: #1fafc8;
}

/* Text and lists in dimmed white  */
p,
li {
  color: rgb(221, 221, 221);
  text-align: justify;
  font-size: larger;
}


/*===== APP SIDEBAR =====*/

/* Side bar fixed to the left of the page */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6rem;
  /* padding: 2rem 1.5rem 1rem 1rem; */
  background-color: #1d3d5c;
  z-index: 1030;
}


/* Change color of selected pills */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: #1fafc8;
}

/* Change color of hovered/focused pills */
.nav-link:hover {
  color: #1fafc8;
}

.nav-link:focus {
  color: #dee2e6;
}

/* Adjust main logo position */
/* .sidebar-header .nav-link {
  padding-left: 0.1rem;
} */

/* Adjust other this is position */
/* #sidebar-page-3 {
  padding-right: 1.2rem;
} */

/* Container for the sidebar footbar. Keep bar at the lowest position. */
.sidebar-bottom {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  position: fixed;
  bottom: 0;
  padding-left: 0rem;
}

/* Fix hover/active underline highlight for sidebar icons */
.sidebar .nav-link::after {
  content: "";
  display: none;
}

.sidebar .nav-link:hover::after,
.sidebar .nav-link.active::after {
  background: transparent;
  width: 0;
}

/* Remove any previous border or box-shadow on nav-link hover/active */
.sidebar .nav-link,
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  border: none !important;
  box-shadow: none !important;
}

.sidebar-header .icon-brain {
  font-size: 3rem !important;
}

/*===== SUPER-TABS =====*/

/* Super-tab styles */
.super-tab {
  position: relative;
}

.super-tab>.nav-link {
  position: relative;
  z-index: 1028;
}

/* Expanded hover area to create bridge to submenu */
.super-tab::before {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  height: 100%;
  width: 26px;
  background-color: transparent;
  z-index: 1025;
}

/* Submenu positioning */
.sub-menu {
  position: absolute;
  left: 6rem;
  top: -0.75rem;
  /* Move it up slightly to overlap with hover area */
  background-color: #1d3d5c;
  width: 14rem;
  border-radius: 0 0.25rem 0.25rem 0;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.2s, opacity 0.2s ease-in;
  z-index: 1030;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* Make submenu border overlap with tunnel for continuous hover */
.sub-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  height: 100%;
  width: 20px;
  background-color: transparent;
  z-index: 1025;
}

/* Show submenu on hover */
.super-tab:hover .sub-menu,
.sub-menu:hover {
  transition-delay: 0s;
  visibility: visible;
  opacity: 1;
}

/* Style for sub-menu headers */
.sub-menu-header {
  background-color: rgba(31, 175, 200, 0.2);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(31, 175, 200, 0.3);
}

.sub-menu-header h6 {
  color: #1fafc8;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.sub-menu .nav-link {
  padding: 0.7rem 1rem;
  display: block;
  color: #dee2e6;
  white-space: nowrap;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color 0.2s, border-left-color 0.2s;
}

.sub-menu .nav-link:hover {
  background-color: rgba(31, 175, 200, 0.1);
  border-left-color: rgba(31, 175, 200, 0.5);
}

.sub-menu .nav-link.active {
  background-color: #1fafc8;
  color: #fff;
  border-left-color: #dee2e6;
}

/* Indicate super-tabs with dropdown */
.super-tab>.nav-link::after {
  content: "";
  /* Remove the arrow indicator */
}

.super-tab:hover>.nav-link::after {
  color: #1fafc8;
}

/* Add a subtle background highlight to indicate super-tabs */
.super-tab>.nav-link {
  position: relative;
}

.super-tab>.nav-link::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background-color: rgba(31, 175, 200, 0.3);
  border-radius: 2px 0 0 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.super-tab:hover>.nav-link::before {
  opacity: 1;
}

/* Active super-tab styling */
.super-tab>.nav-link.active::before {
  opacity: 1;
  background-color: #dee2e6;
  width: 5px;
  height: 70%;
}

/*===== APP MAIN CONTENT =====*/

/* Main content takes full page with a margin for sidebar */
#content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  padding-left: 6rem;
  height: 100%;
  overflow: hidden;
}

/* Prevent graphs from exceeding page height */
.dash-graph {
  max-height: 100vh;
}

/* Fix white border on all cards */
.card {
  background-color: transparent;
}

/* To fix the aspect ratio of the image graphs, images are initally a multiple 420*300 */
.fixed-aspect-ratio {
  position: relative;
  width: 100%;
  padding-bottom: min(72%,
      100vh);
  /* when max-height = 100vh is reached, need to block stretching*/
  float: left;
  height: 0;
}

/* Used to wrap dcc.Loading component with transparent background */
.loading-wrapper>div {
  visibility: visible !important;
}

/*===== MANTINE CORRECTIONS =====*/

/* Dimmer text */
.mantine-Text-root {
  color: #ced4da;
}

/* Button label remain readable even when disabled */
.mantine-Button-label {
  color: #ced4da;
}

/*===== COLORED DROPDOWNS =====*/

/* Create three color-themed dropdowns for page 3 */
#page-3-dropdown-red .Select-value {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-3-dropdown-red>div>div {
  background-color: #2b2e33;
}

#page-3-dropdown-red .Select-control {
  border-color: rgba(223, 80, 52, 0.8);
}

#page-3-dropdown-red .Select-menu-outer {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-3-dropdown-green .Select-value {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-3-dropdown-green>div>div {
  background-color: #2b2e33;
}

#page-3-dropdown-green .Select-control {
  border-color: rgba(95, 169, 112, 0.8);
}

#page-3-dropdown-green .Select-menu-outer {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-3-dropdown-blue .Select-value {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-3-dropdown-blue>div>div {
  background-color: #2b2e33;
}

#page-3-dropdown-blue .Select-control {
  border-color: rgba(58, 139, 182, 0.8);
}

#page-3-dropdown-blue .Select-menu-outer {
  background-color: #1a1b1e;
  color: #ced4da;
}


/* Create three color-themed dropdowns for page 5 */
#page-5-dropdown-red .Select-value {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-5-dropdown-red>div>div {
  background-color: #2b2e33;
}

#page-5-dropdown-red .Select-control {
  border-color: rgba(223, 80, 52, 0.8);
}

#page-5-dropdown-red .Select-menu-outer {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-5-dropdown-green .Select-value {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-5-dropdown-green>div>div {
  background-color: #2b2e33;
}

#page-5-dropdown-green .Select-control {
  border-color: rgba(95, 169, 112, 0.8);
}

#page-5-dropdown-green .Select-menu-outer {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-5-dropdown-blue .Select-value {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-5-dropdown-blue>div>div {
  background-color: #2b2e33;
}

#page-5-dropdown-blue .Select-control {
  border-color: rgba(58, 139, 182, 0.8);
}

#page-5-dropdown-blue .Select-menu-outer {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-5-dropdown-lipid .Select-value {
  background-color: #1a1b1e;
  color: #ced4da;
}

#page-5-dropdown-lipid>div>div {
  background-color: #2b2e33;
}

#page-5-dropdown-lipid .Select-control {
  border-color: rgba(246, 246, 246, 0.8);
}

#page-5-dropdown-lipid .Select-menu-outer {
  background-color: #1a1b1e;
  color: #ced4da;
}


/* #react-select-2--value-item, #react-select-3--value-item, #react-select-4--value-item, #react-select-5--value-item {
  color:antiquewhite;
} */

.has-value.Select--single>.Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label {
  color: antiquewhite;
}




/* Better color when Hovering over the dropdown selection menu */
.VirtualizedSelectFocusedOption {
  background-color: rgba(80, 189, 218, 0.5);
}

.is-focused:not(.is-open)>.Select-control {
  border-color: transparent !important;
  box-shadow: none !important;
}


/*===== NICER TOASTS =====*/

/* Adapt toast color to dark theme */
.toast-header {
  border-bottom: 0px;
  color: #ced4da;
  background-color: #2b2e33;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* margin: 1rem; */
}

/* Better centering */
div.toast-header>strong {
  margin-left: 3rem;
  margin-right: 3rem;
}


/*===== DRAWERS =====*/

/* Fix white border on page 2 for spectra */
.offcanvas-end {
  border-left-color: transparent;
}

/* Invisible backdrop for drawer */
body>div.fade.offcanvas-backdrop.show {
  opacity: 0;
}

/* Remove drawer header */
#page-2-drawer-high-res-spectra>div.offcanvas-header {
  display: none;
}

/* Same */
#page-2-drawer-low-res-spectra>div.offcanvas-header {
  display: none;
}

/* Same */
#page-4-drawer-region-selection>div.offcanvas-header {
  display: none;
}

/* Remove drawer background */
#page-2-drawer-high-res-spectra {
  background-color: transparent;
  height: 400px;
}

/* Same */
#page-2-drawer-low-res-spectra {
  background-color: transparent;
  height: 400px;
}

/*===== SMALL FIXES =====*/

/* Decrease vertical asymetry of the tabs  */
#page-1-card-tabs {
  padding-bottom: 0;
}


/* Fix bug slider above clustergram */
#page-4-slider-percentile {
  z-index: 10;
}

/*===== REACT GRID =====*/

/* Improve react grid look */
div.item-top {
  transform: translate(0, 10px);
}

div.item-top {
  visibility: hidden;
}

div.item {
  background: #1d1c1f;
  /* box-shadow: 0px 10px 6px -1px rgb(30 44 57 / 15%); */
}

div.item:focus,
div.item:active,
div.item.active,
div.item:focus:active {
  background-image: none;
  outline: none;
  /* -webkit-box-shadow: none; */
  /* box-shadow: 0px 10px 6px -1px rgb(30 44 57 / 15%); */
}

/*===== APP STARTUP =====*/

/* Initial spinner */

._dash-loading {
  margin: auto;
  color: transparent;
  width: 2rem;
  height: 2rem;
  text-align: center;
}

._dash-loading::after {
  font-size: 60px;
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  color: #000;
  border-radius: 50%;
  margin: 72px auto;
  vertical-align: text-bottom;
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  margin-top: 2rem;
}

@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
      -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
      -0.297em -0.775em 0 -0.477em;
  }

  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
      -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
      -0.749em -0.34em 0 -0.477em;
  }

  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
      -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
      -0.82em -0.09em 0 -0.477em;
  }

  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
      -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
      -0.297em -0.775em 0 -0.477em;
  }

  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
      -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
      -0.749em -0.34em 0 -0.477em;
  }

  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
      -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
      -0.82em -0.09em 0 -0.477em;
  }

  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Hide tooltips when hovering over super-tabs (since submenu will show) */
.super-tab:hover .tooltip,
.super-tab:focus-within .tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Also hide the tooltip when the actual submenu is being displayed */
div.sub-menu:hover+.tooltip,
div.sub-menu:focus-within+.tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Hide default bootstrap tooltips when showing submenu */
body .tooltip {
  pointer-events: none;
}

/* Super-tab hover states */
.super-tab:hover .tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* When submenu is open, prevent default tooltip behavior */
.super-tab:hover .sub-menu~.tooltip,
.super-tab:focus-within .sub-menu~.tooltip {
  display: none !important;
}

/* Completely remove tooltips for elements with submenus */
.has-submenu+.tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Special styling for sub-menus with only one option - need to ensure consistent appearance */
.sub-menu:has(.nav-link:only-child) {
  min-height: 3.1rem;
  /* Set a minimum height */
  top: -0.25rem;
  /* Adjust vertical positioning */
}

/* Single-item submenu (without header) needs different padding and styling */
.sub-menu .nav-link:only-child {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  font-weight: 500;
  height: 100%;
  display: flex;
  align-items: center;
}

/*===== TUTORIAL =====*/

.dash-bootstrap .popover {
  border: 3px solid #1fafc8 !important;
  box-shadow: 0 0 15px #1fafc8 !important;
  border-radius: 4px !important;
  padding: 0 !important;
  background: #1d1c1f !important;
  color: #dee2e6 !important;
}

.dash-bootstrap .popover .popover-arrow,
.dash-bootstrap .popover .arrow {
  border-right-color: #1fafc8 !important;
  border-left-color: #1fafc8 !important;
  border-top-color: #1fafc8 !important;
  border-bottom-color: #1fafc8 !important;
  background: transparent !important;
}

.dash-bootstrap .popover .popover-header {
  border: none !important;
  border-radius: 4px 4px 0 0 !important;
  background: #1d1c1f !important;
  color: #dee2e6 !important;
}

.dash-bootstrap .popover .popover-body {
  border: none !important;
  border-radius: 0 0 4px 4px !important;
  background: #1d1c1f !important;
  color: #dee2e6 !important;
}

/* Color the popover arrow the same as the border for popovers */
.popover.bs-popover-end .popover-arrow::before,
.popover.bs-popover-end .popover-arrow::after {
  border-right-color: #1fafc8;
}

.popover.bs-popover-start .popover-arrow::before,
.popover.bs-popover-start .popover-arrow::after {
  border-left-color: #1fafc8;
}

.popover.bs-popover-top .popover-arrow::before,
.popover.bs-popover-top .popover-arrow::after {
  border-top-color: #1fafc8;
}

.popover.bs-popover-bottom .popover-arrow::before,
.popover.bs-popover-bottom .popover-arrow::after {
  border-bottom-color: #1fafc8;
}

/* For legacy Bootstrap 4 naming (if needed) */
.popover.bs-popover-right .arrow::before,
.popover.bs-popover-right .arrow::after {
  border-right-color: #1fafc8;
}

.popover.bs-popover-left .arrow::before,
.popover.bs-popover-left .arrow::after {
  border-left-color: #1fafc8;
}

.popover.bs-popover-top .arrow::before,
.popover.bs-popover-top .arrow::after {
  border-top-color: #1fafc8;
}

.popover.bs-popover-bottom .arrow::before,
.popover.bs-popover-bottom .arrow::after {
  border-bottom-color: #1fafc8;
}

/* Make all sidebar icons (except brain) larger and perfectly centered */
.sidebar .nav-link .icon-molecules,
.sidebar .nav-link .icon-programs,
.sidebar .nav-link .icon-analysis,
.sidebar .nav-link .icon-lipizones,
.sidebar .nav-link .icon-comparisons,
.sidebar .nav-link .icon-threed {
  font-size: 1.5rem !important;
  margin: 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Docs and copyright icons in sidebar-bottom */
.sidebar-bottom .icon-docs,
.sidebar-bottom .icon-cc {
  /* margin-left: 1.2rem !important; */
  position: relative;
  top: -0.6rem;
  margin: 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Remove underline and border-bottom from dropdown text and input fields */
.Select-value-label,
.Select-placeholder,
.Select-input>input,
.Select-control,
.Select-value,
.Select-menu-outer,
input,
select {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Remove cyan border from focused state */
.is-focused:not(.is-open)>.Select-control {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Remove any border or background from dropdown menu */
.Select-menu-outer {
  border: none !important;
  box-shadow: none !important;
  background: #1a1b1e !important;
}

/* Remove any horizontal rule or line in dropdowns */
.Select-menu-outer hr,
.Select-menu-outer .divider,
.Select-menu-outer .Select-option-divider {
  display: none !important;
  border: none !important;
  background: none !important;
  height: 0 !important;
}