/* --- Defaults --------------------------------------------------------------- */
:root {
  /* Color palette */
  --navy: #222e50;
  --blue: #5470b1;
  --mint: #8ac19a;
  --sage: #a2c7b7;
  --cream: #ecedde;
  --yellow: #f5f678;
  --mauve: #be9eab;
  --pink: #f67eaf;
  --magenta: #d83474;
  --coral: #d74c49;
  --crimson: #c11a34;

  --shadow-sm: 0 1px 3px rgba(34, 46, 80, .08);
  --shadow-md: 0 4px 12px rgba(34, 46, 80, .10);
  --shadow-lg: 0 8px 24px rgba(34, 46, 80, .12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --transition: 0.2s ease-in-out;

  /* Font styling */
  --bs-body-font-family: "Oriya Sangam MN", sans-serif;
}

body {
  color: var(--navy);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--navy);
  font-weight: 600;
}

h1 {
  font-size: 1.85rem;
  margin-bottom: 0.75rem;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

h4 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

p {
  margin-bottom: 0.75rem;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--magenta);
}

/* --- Navbar --------------------------------------------------------------- */
.navbar {
  background: linear-gradient(90deg, white, var(--blue)) !important;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: visible !important;
  z-index: 1000;
}

.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, white, var(--blue));
  clip-path: polygon(0% 0%, 99% 0%, 100% 100%, 0% 100%);
  z-index: -1;
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--navy) !important;
  transition: color var(--transition);
  font-size: 16px;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--magenta) !important;
  font-weight: 900 !important;
  transition: color var(--transition), font-weight var(--transition);
}

.navbar .nav-link.active {
  color: var(--magenta) !important;
  font-weight: 900 !important;
}

/* Camel logo with animation */
#navbar-logo-container {
  height: 75px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#navbar-logo-container svg {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Right navbar logos */
#navbar-right-logos {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 8px;
}

.navbar-right-logo {
  height: 40px;
  width: auto;
  display: block;
}

.navbar-right-logo-container {
  box-shadow:
    0 25px 60px rgba(34, 46, 80, 0.25),
    0 10px 20px rgba(34, 46, 80, 0.12);
  background-color: white;
  padding: 5px;
  padding-right: 20px;
  clip-path: polygon(1% 0%, 90% 0%, 95% 100%, 1% 100%);
}

.navbar-right-logo-container:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: transform var(--transition);
}

.navbar-right-text {
  font-size: 0.8rem;
  line-height: 1.3;
  margin-bottom: 15px;
  margin-top: 0px;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: bolder;
  letter-spacing: 0.15rem;
}

.navbar-right-text:hover {
  color: white;
  transition: color var(--transition), background-color var(--transition);
  background-color: var(--blue);
  padding: 1px 10px;
  clip-path: polygon(0% 0%, 99% 0%, 100% 100%, 1% 100%);
}


/* --- Navbar dropdown menus ------------------------------------------------ */
.navbar .dropdown-menu {
  background-color: var(--blue);
  border-radius: 0px;
  box-shadow: var(--shadow-lg);
}

.navbar .dropdown-item {
  color: white !important;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
  transition: background-color var(--transition), color var(--transition);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--magenta);
  color: white !important;
}

.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
  background-color: var(--magenta);
  color: var(--navy) !important;
}

.navbar .dropdown-divider {
  border-color: rgba(255, 255, 255, .12);
}

/* --- Cards (bslib::card) -------------------------------------------------- */
.card,
.bslib-card {
  border: none !important;
  box-shadow: none !important;
}

.card .card-header,
.bslib-card .card-header {
  background-color: var(--blue);
  font-weight: 500;
  color: white !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-left: 15px;
  clip-path: polygon(1% 0%, 90% 0%, 95% 100%, 1% 100%);
  border: none !important;
}

.card .card-body,
.bslib-card .card-body {
  border: none !important;
  padding: 1rem;
  overflow: visible !important;
}

.card .card-footer,
.bslib-card .card-footer {
  background-color: rgba(34, 46, 80, .02);
  border-top: 1px solid rgba(34, 46, 80, .06);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
}

/* --- Value boxes (home page) --------------------------------------------- */
.bslib-value-box,
.value-box {
  background: var(--blue) !important;
  color: white !important;
  border: none !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  transition: transform var(--transition), box-shadow var(--transition);
  clip-path: polygon(1.5% 0%, 90% 0%, 95% 100%, 5% 100%);
}

.bslib-value-box:hover,
.value-box:hover {
  transform: translateX(-50px) scale(1.2);
}

.bslib-value-box .value-box-title,
.value-box .value-box-title {
  color: white !important;
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bslib-value-box .value-box-value,
.value-box .value-box-value {
  color: white !important;
  font-weight: 700;
  font-size: 1.85rem;
}

.bslib-value-box.novel-species .value-box-value,
.value-box.novel-species .value-box-value {
  font-size: 1rem !important;
  line-height: 1.3;
}


/* --- Reactable tables ----------------------------------------------------- */
.reactable {
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 0.88rem;
  padding: 5px;
  box-shadow:
    0 25px 60px rgba(34, 46, 80, 0.25),
    0 10px 20px rgba(34, 46, 80, 0.12),
    inset 0 0 40px rgba(255, 255, 255, 0.6);
}

/* Table header */
.rt-thead {
  background-color: var(--blue) !important;
}

.rt-th {
  background-color: var(--blue) !important;
  color: white !important;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.65rem 0.75rem !important;
  border-bottom: 2px solid white !important;
}

.rt-th .rt-sort-header {
  color: white !important;
}

/* Alternating rows */
.rt-tr-group:nth-child(even) .rt-td {
  background-color: white;
}

.rt-tr-group:nth-child(odd) .rt-td {
  background-color: white;
}

/* Row hover */
/*
  Important: reactable "details" content renders another reactable inside a
  details row. A broad selector like `.rt-tr-group:hover .rt-td` will also
  match nested table cells, turning the whole nested table pink.

  Fix: only color the *direct* cells of the hovered row, and skip the details
  row entirely.
*/
.rt-tr-group:hover>.rt-tr:not(.-details)>.rt-td {
  background-color: var(--pink) !important;
}

/* If you render a nested reactable inside a details panel, give it a class
   (e.g. `className = "reactable-details"`) and use a calmer hover there. */
.reactable.reactable-details .rt-tr-group:hover>.rt-tr>.rt-td {
  background-color: var(--cream) !important;
}

/* Container styling for the details table */
.reactable-details-wrapper {
  margin: 40px 80px;
  padding: 10px 20px;
  border: 2px solid var(--pink);
  border-radius: 0px;
}

/* Custom details expander icon for main reactables */
/* Targets markup like:
   <button class="rt-expander-button" aria-expanded="false">
     <span class="rt-expander"></span>
   </button>
*/
.reactable-main .rt-expander-button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  cursor: pointer !important;
}

.reactable-main .rt-expander {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Remove default glyphs/icons from reactable styles */
.reactable-main .rt-expander::before,
.reactable-main .rt-expander::after,
.reactable-main .rt-expander-button::before,
.reactable-main .rt-expander-button::after {
  content: none !important;
}

/* Draw custom icon on the span */
.reactable-main .rt-expander {
  background: url("polygon5.png") no-repeat center / contain !important;
  transform: rotate(0deg);
  transition: transform var(--transition);
}

/* Rotate when details are open (state is on button) */
.reactable-main .rt-expander-button[aria-expanded="true"] .rt-expander,
.reactable-main .rt-expander-button.-open .rt-expander {
  transform: rotate(90deg);
}

/* Keep text/content vertically centered with details expander icon */
.reactable-main .rt-tr:not(.-details)>.rt-td {
  display: flex;
  align-items: center;
}

.reactable-main .rt-tr:not(.-details)>.rt-td>.rt-td-inner {
  width: 100%;
}

.reactable-main .rt-tr:not(.-details)>.rt-td.-details {
  justify-content: center;
}

/* Cell padding */
.rt-td {
  padding: 0.55rem 0.75rem !important;
  border-bottom: 1px solid var(--cream);
  vertical-align: middle;
}

/* Table pagination / footer */
.rt-pagination {
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
}

.rt-pagination input {
  border: none;
  border-radius: 0px;
  padding: 0.25rem 0.4rem;
  background-color: var(--blue);
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
  color: white;
  box-shadow: none;
}

/* Reactable page-size dropdown */
.rt-pagination .rt-page-size-select,
.rt-pagination .rt-page-size-select select,
.rt-pagination select {
  border: none !important;
  border-radius: 0 !important;
  font-weight: bold !important;
  color: white !important;
  background-color: var(--blue) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 1.8rem !important;
  padding-left: 1.8rem !important;
  background-image: url("polygon5.png") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.45rem center !important;
  background-size: 13px 13px !important;
}

.rt-pagination .rt-page-size-select select option,
.rt-pagination select option {
  background-color: var(--blue) !important;
  color: white !important;
}

.rt-page-button {
  border-radius: 0px;
  transition: background-color var(--transition);
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}

.rt-page-button:hover {
  background-color: var(--pink);
}

.rt-page-button[aria-current="page"] {
  background-color: var(--blue);
  color: white;
}

/* Search and filter box */
.rt-search {
  border: 1px solid var(--pink);
  border-radius: 0px;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}

.rt-filter {
  border-radius: 0px;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}

.rt-search:focus {
  border-color: var(--pink);
  outline: none;
  box-shadow: var(--shadow-md);
}

/* --- Plotly containers ---------------------------------------------------- */
/* Remove any background from the plots */
.js-plotly-plot .main-svg {
  background: transparent !important;
}

/* Remove any background from the plots */
.js-plotly-plot .main-svg .bglayer .bg,
.js-plotly-plot .main-svg .cartesianlayer .bg,
.js-plotly-plot .main-svg .polarlayer .bg,
.js-plotly-plot .main-svg .ternarylayer .bg,
.js-plotly-plot .main-svg .geolayer .bg {
  fill: none !important;
}

/* Plotly modebar: subtle until hover */
.modebar-container {
  opacity: 0.4;
  transition: opacity var(--transition);
}

.js-plotly-plot:hover .modebar-container {
  opacity: 1;
}

/* --- Buttons ------------------------------------------------------------- */
.btn-primary {
  background-color: var(--blue);
  color: white;
  border: none;
  border-radius: 0px;
  box-shadow: none;
  transition: background-color var(--transition);
  clip-path: polygon(1.5% 0%, 90% 0%, 95% 100%, 5% 100%);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--navy);
}

.btn-outline-primary {
  color: var(--navy);
  border-color: var(--navy);
  border-radius: 0px;
}

.btn-outline-primary:hover {
  background-color: var(--navy);
  color: #fff;
}

/* --- Form controls ------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: 0px;
  border: 2px solid var(--navy);
  transition: border-color var(--transition);
  padding: 0px 0px 0px 6px;
  margin-left: -2px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pink);
}

/* --- Slider (shiny::sliderInput / ionRangeSlider) ------------------------ */
.irs--shiny .irs-line,
.irs--shiny .irs-bar,
.irs--shiny .irs-bar-edge,
.irs--shiny .irs-min,
.irs--shiny .irs-max {
  background: var(--blue) !important;
  border-radius: 0 !important;
  color: white !important;
}

.irs--shiny .irs-min,
.irs--shiny .irs-max,
.irs--shiny .irs-from,
.irs--shiny .irs-to {
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}


.irs--shiny .irs-line {
  opacity: 0.25;
  height: 10px;
}

.irs.irs--shiny .irs-bar {
  top: 26px;
  height: 10px;
  border: none;
}

.irs--shiny .irs-single,
.irs--shiny .irs-from,
.irs--shiny .irs-to {
  background: var(--blue) !important;
  color: white !important;
  border-radius: 0 !important;
}

.irs--shiny .irs-single:before,
.irs--shiny .irs-from:before,
.irs--shiny .irs-to:before {
  border-top-color: var(--blue) !important;
}

.irs--shiny .irs-handle {
  border: none !important;
  box-shadow: none !important;
  background: url("polygon5.png") no-repeat center / contain !important;
}

.irs--shiny .irs-handle>i {
  background: none !important;
}

/* --- Selectize (shinyWidgets) -------------------------------------------- */
.selectize-input {
  border-radius: 0px !important;
  border: 1px solid var(--pink) !important;
  box-shadow: none !important;
  color: var(--navy) !important;
}

.selectize-dropdown {
  border-radius: 0px !important;
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  z-index: 2000 !important;
}

.selectize-dropdown .option.selected {
  background-color: var(--blue);
  color: white;
}

.selectize-dropdown .option.active {
  background-color: var(--pink);
  color: white;
}

.selectize-dropdown .option.selected.active {
  background-color: var(--navy);
  color: white;
}

/* Replace Selectize's default caret with your PNG. */
.selectize-control.single .selectize-input:after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 0.6rem !important;
  width: 16px !important;
  height: 16px !important;
  background: url("polygon5.png") no-repeat center / contain !important;
  transform: translateY(-50%) rotate(90deg) !important;

  /* neutralize the built-in triangle styling */
  border: 0 !important;
  margin-top: 0 !important;
}

/* --- Per-widget Selectize overrides -------------------------------------- */
/* Use wrapper classes like this to override a single input without changing
   the global Selectize styles above. */
.species-per-select .selectize-input {
  border-radius: 0px !important;
  border: none !important;
  color: var(--navy) !important;
}

/* dropdown panel height (only this input) */
.vf-count-per-dropdown .selectize-dropdown-content {
  max-height: 260px !important;
}

.gene-search-input .selectize-dropdown .create {
  background-color: white;
  color: var(--navy);
}

.gene-search-input .selectize-input {
  min-height: 44px;
  padding: 6px 8px;
}

.gene-search-input .selectize-control.multi .selectize-input>div {
  border-radius: 0 !important;
  background-color: var(--blue) !important;
  color: white !important;
  clip-path: polygon(1.5% 0%, 90% 0%, 95% 100%, 5% 100%);
  padding: 3px 12px !important;
  border: 1px solid transparent;
}

.patient-filter .shiny-input-container {
  margin-bottom: 0;
}

/* --- Tabs (bslib navset) ------------------------------------------------- */
.nav-tabs .nav-link {
  color: var(--navy);
  font-weight: 500;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--transition), background-color var(--transition);
}

.nav-tabs .nav-link:hover {
  color: var(--blue);
  background-color: rgba(84, 112, 177, .06);
}

.nav-tabs .nav-link.active {
  color: var(--navy);
  font-weight: 600;
  border-bottom-color: var(--navy);
}

.nav-pills .nav-link.active {
  background-color: var(--navy);
  color: #fff;
}

/* --- Loading / busy indicators ------------------------------------------- */
.shiny-busy-notification,
.shiny-notification {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Recalculating overlay - subtle pulse */
.recalculating {
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

/* Waiter overlay refinements */
.waiter-overlay {
  backdrop-filter: blur(4px);
}

/* Skeleton / placeholder pulse */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.placeholder-loading {
  background: linear-gradient(90deg, #f0f0e6 25%, #e2e3d4 50%, #f0f0e6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes logoPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }

  100% {
    transform: translate(-50%, -50%) scale(0.9);
  }
}

.plot-loader-wrap {
  position: relative;
}

.plot-loader-wrap .html-widget-output {
  position: relative;
}

.plot-loader-wrap.plot-loader-wrap-dynamic .html-widget-output.recalculating {
  min-height: 260px;
}

.plot-loader-wrap.plot-loader-wrap-table .html-widget-output.recalculating {
  min-height: 320px;
}

.plot-loader-wrap.plot-loader-wrap-table .html-widget-output.recalculating::after {
  width: 84px;
  height: 84px;
}

.plot-loader-wrap .html-widget-output.recalculating::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  background: url("logo.svg") no-repeat center / contain;
  animation: logoPulse 1.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

/* Spinner color override */
.spinner-border {
  color: var(--navy) !important;
}

/* Progress bar */
.progress-bar {
  background-color: var(--mint);
}

/* --- Custom scrollbars ---------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--blue) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--blue);
  border-radius: 0px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--blue);
}

/* --- Badges / tags -------------------------------------------------------- */
.badge {
  font-weight: 500;
  font-size: 0.78rem;
  padding: 0.3em 0.6em;
  border-radius: var(--radius-sm);
}

.badge.bg-primary {
  background-color: var(--navy) !important;
}

.badge.bg-success {
  background-color: var(--mint) !important;
  color: var(--navy) !important;
}

.badge.bg-info {
  background-color: var(--blue) !important;
}

.badge.bg-warning {
  background-color: var(--yellow) !important;
  color: var(--navy) !important;
  border-radius: 0px !important;
  clip-path: polygon(0% 0%, 99% 0%, 100% 100%, 1% 100%);
}

.badge.bg-danger {
  background-color: var(--coral) !important;
}

/* --- Tooltips ------------------------------------------------------------- */
.tooltip-inner {
  background-color: var(--navy);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
}

.tooltip .tooltip-arrow::before {
  border-top-color: var(--navy);
}

/* --- Well panels / shiny panels ------------------------------------------ */
.well {
  background-color: #fff;
  border: 1px solid rgba(34, 46, 80, .08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* --- Responsive adjustments ---------------------------------------------- */
@media (max-width: 991.98px) {
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .bslib-value-box .value-box-value,
  .value-box .value-box-value {
    font-size: 1.5rem;
  }

  .card .card-body,
  .bslib-card .card-body {
    padding: 0.75rem;
  }

  .sidebar {
    padding: 0.75rem;
  }
}

@media (max-width: 767.98px) {
  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.15rem;
  }

  .bslib-value-box .value-box-value,
  .value-box .value-box-value {
    font-size: 1.25rem;
  }

  .rt-th {
    font-size: 0.75rem;
    padding: 0.5rem 0.5rem !important;
  }

  .rt-td {
    font-size: 0.82rem;
    padding: 0.4rem 0.5rem !important;
  }

  .navbar .dropdown-menu {
    background-color: var(--navy);
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: 0.92rem;
  }

  .card .card-body,
  .bslib-card .card-body {
    padding: 0.6rem;
  }
}

/* --- Utility classes ----------------------------------------------------- */
.text-navy {
  color: var(--navy) !important;
}

.text-blue {
  color: var(--blue) !important;
}

.text-mint {
  color: var(--mint) !important;
}

.text-coral {
  color: var(--coral) !important;
}

.text-magenta {
  color: var(--magenta) !important;
}

.bg-navy {
  background-color: var(--navy) !important;
}

.bg-cream {
  background-color: var(--cream) !important;
}

.bg-mint {
  background-color: var(--mint) !important;
}

.bg-sage {
  background-color: var(--sage) !important;
}

.border-navy {
  border-color: var(--navy) !important;
}

.border-blue {
  border-color: var(--blue) !important;
}

.border-mint {
  border-color: var(--mint) !important;
}

/* --- App login and logo ----------------------------------------------------- */
#caml-waiter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(4px, 1.2vh, 14px);
  width: 100vw;
  height: 100dvh;
  padding: clamp(4px, 1.2vh, 14px) 10px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(to top, #a2c7b7ff -100%, #e5e8f1 130%);
}

/* Development login modal */
.modal-backdrop:has(+ .modal .caml-login-modal),
.modal:has(.caml-login-modal) {
  background: linear-gradient(to top, #a2c7b7ff -100%, #e5e8f1 130%);
}

.modal-content:has(.caml-login-modal) {
  background: white;
  border: none;
  box-shadow: var(--shadow-md);
  border-radius: 0;
}

.modal-body:has(.caml-login-modal) {
  padding: 1.2rem;
}

.caml-login-modal {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.caml-login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 0.8rem;
}

.caml-login-logo svg {
  width: 72px;
  height: auto;
  display: block;
}

.caml-login-modal .form-control {
  border-radius: 0;
}

.caml-login-modal .btn-primary {
  background-color: var(--blue);
  border-color: var(--blue);
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  text-transform: uppercase;
  border-radius: 0px;
}

.caml-login-modal .btn-primary:hover,
.caml-login-modal .btn-primary:focus,
.caml-login-modal .btn-primary:active {
  transform: scale(1.2);
}

.caml-waiter-row {
  width: 100%;
  display: flex;
  align-items: center;
}

.caml-waiter-header {
  justify-content: flex-end;
  margin-bottom: clamp(2px, 1.2vh, 24px);
}

.caml-waiter-footer {
  justify-content: flex-start;
  margin-top: clamp(2px, 1.2vh, 24px);
}

.caml-waiter-header .caml-divider-svg-hf,
.caml-waiter-footer .caml-divider-svg-hf {
  width: 55%;
  opacity: 0.5;
}

#logo-container {
  width: min(420px, 65vw, 40vh);
  max-width: 80vw;
  aspect-ratio: 1 / 1;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 1.2vh, 16px);
}

#logo-container path {
  opacity: 0;
  transform-origin: center;
}

#welcome-title {
  margin: 0;
  line-height: 1.05;
  font-size: clamp(1.05rem, 3.8vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}

#welcome-sub {
  margin: 2px 0 8px 0;
  line-height: 1.2;
  font-size: clamp(0.72rem, 1.9vw, 1rem);
  color: var(--navy);
}

#enter-app {
  border: none;
  background: var(--blue);
  color: white;
  height: clamp(40px, 6.2vh, 64px);
  width: clamp(130px, 34vw, 190px);
  border-radius: 0px;
  font-size: clamp(0.8rem, 2.1vw, 1.05rem);
  font-weight: 650;
  cursor: pointer;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  box-shadow: none;
  transition: transform var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#enter-app:hover {
  transform: scale(1.2);
}

#enter-app:active {
  transform: scale(1.2);
}

@media (max-height: 900px) {
  .caml-divider-svg-hf {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

@media (max-height: 740px) {
  #caml-waiter {
    justify-content: flex-start;
    gap: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #logo-container {
    width: min(300px, 55vw, 32vh);
    padding: 4px;
  }

  #welcome-title {
    font-size: clamp(0.95rem, 3.2vw, 1.4rem);
    letter-spacing: 0.05em;
  }

  #welcome-sub {
    margin: 0 0 4px 0;
    font-size: clamp(0.68rem, 1.6vw, 0.85rem);
  }

  #enter-app {
    height: clamp(34px, 5.4vh, 48px);
    width: clamp(116px, 30vw, 160px);
    font-size: clamp(0.72rem, 1.7vw, 0.9rem);
  }

  .caml-waiter-header,
  .caml-waiter-footer {
    margin-top: 0;
    margin-bottom: 0;
  }

  .caml-waiter-header .caml-divider-svg-hf,
  .caml-waiter-footer .caml-divider-svg-hf {
    width: 48%;
  }
}

/* --- Phylotree ----------------------------------------------------- */
@keyframes phyloPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.phylo-pulse {
  animation: phyloPulse 1000ms ease-in-out 1;
}

svg .isolates-highlight {
  stroke: var(--blue) !important;
  stroke-width: 4px !important;
  fill: var(--blue) !important;
  transition: stroke 0.18s ease, stroke-width 0.18s ease, fill 0.18s ease !important;
}

svg .species-highlight {
  paint-order: stroke !important;
  stroke: white !important;
  stroke-width: 1px !important;
  fill: var(--blue) !important;
  font-weight: 900 !important;
  font-size-adjust: 0.7 !important;
  transition:
    fill 0.4s ease,
    font-weight 0.4s ease,
    font-size-adjust 0.4s ease,
    stroke 0.4s ease,
    stroke-width 0.4s ease !important;
}

svg .novel-species-highlight,
svg .novel-species-highlight tspan {
  paint-order: stroke !important;
  stroke: white !important;
  fill: var(--pink) !important;
  stroke-width: 5px !important;
  font-weight: 900 !important;
  font-size-adjust: 1.3 !important;
  transition: font-weight 0.4s ease, font-size-adjust 0.4s ease !important;
}

svg .tissues-highlight path,
svg .tissues-highlight circle,
svg .tissues-highlight rect,
svg .tissues-highlight line,
svg .tissues-highlight polyline,
svg .tissues-highlight polygon {
  fill: var(--tissues-color) !important;
  transition: fill 0.4s ease !important;
}

svg .phyla-highlight {
  stroke: var(--phyla-color) !important;
  stroke-width: 5px !important;
  fill: var(--phyla-color) !important;
  transition: fill 0.4s ease, stroke 0.4s ease, stroke-width 0.4s ease !important;
}

.phylo-wrapper {
  border-radius: 12px;
  padding: 18px;
  width: 825px;
  box-shadow:
    0 25px 60px rgba(34, 46, 80, 0.25),
    0 10px 20px rgba(34, 46, 80, 0.12),
    inset 0 0 40px rgba(255, 255, 255, 0.6);
  background: radial-gradient(circle at 45% 45%, rgb(255, 255, 255), rgba(230, 234, 244, 0.26));
}

.tissue-hover-legend {
  position: static;
  display: block;
  width: 100%;
  max-width: 825px;
  box-sizing: border-box;
  min-height: 168px;
  margin-top: 12px;
  padding: 10px 12px;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  pointer-events: none;
}

.tissue-hover-legend.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tissue-hover-legend-title {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tissue-hover-legend-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 8px;
}

.tissue-hover-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
}

.tissue-hover-legend-swatch {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}

.tissue-hover-legend-label {
  color: var(--navy);
  font-size: 0.95rem;
  white-space: nowrap;
}

/* --- Page divider ----------------------------------------------------------- */

.simple-divider {
  border: 0;
  height: 4px;
  background: linear-gradient(90deg, white, var(--blue), white);
  margin: 0;
  opacity: 1;
}

.caml-divider-svg {
  width: 100%;
  display: block;
  object-fit: fill;
  margin-top: 100px;
  margin-bottom: 100px;
  opacity: 0.3;
}

.caml-divider-svg-modal {
  width: 60%;
  display: block;
  object-fit: fill;
  margin-top: 20px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.7;
}

.caml-divider-svg:hover {
  transform: scale(1.1);
  opacity: 1;
  transition: opacity var(--transition), transform var(--transition);
}

.caml-divider-svg-hf {
  width: 100%;
  display: block;
  object-fit: fill;
  margin-top: 50px;
  margin-bottom: 50px;
}

.footer-divider-interactive {
  position: relative;
  overflow: visible;
  cursor: pointer;
  margin-top: 150px !important;
}

.footer-divider-interactive:hover {
  margin-bottom: 200px !important;
}

.footer-divider-interactive svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.footer-divider-interactive .divider-segment {
  transition: transform var(--transition);
}

.footer-divider-interactive .divider-overlay {
  pointer-events: none;
}

.footer-divider-interactive .divider-guide-line {
  stroke: black;
  stroke-width: 0.22;
  opacity: 0;
}

.footer-divider-interactive .divider-guide-label {
  fill: var(--navy);
  font-size: 1.3px;
  font-weight: 400;
  letter-spacing: 0.03em;
  paint-order: stroke;
  stroke: white;
  stroke-width: 0.2px;
  opacity: 0;
}

.footer-divider-interactive .divider-hover-header {
  fill: var(--navy);
  font-size: 2.4px;
  font-weight: 700;
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: white;
  stroke-width: 0.24px;
  pointer-events: none;
  opacity: 0;
  text-transform: uppercase;
}

.caml-divider-svg-top {
  width: 94%;
  display: block;
  object-fit: fill;
  margin-top: 5px;
  margin-bottom: 10px;
  transform: scale(-1, 1);
  opacity: 0.5;
}

.author-credit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 10px;
}

.author-credit:hover {
  transform: scale(1.05);
  transition: transform var(--transition);
}

/* Expand rows on hovering for buttons forwarding to VFDB and NCBI */
/* One-line preview, expand to full list on hover/focus */
.link-row-reveal {
  display: flex;
  flex-wrap: nowrap;
  /* force single visible row initially */
  gap: 0.5rem;
  overflow: hidden;
  max-height: 3rem;
  /* approx one Bootstrap btn-md row */
  position: relative;
  transition: max-height 160ms ease;
}

/* prevent button shrinking */
.link-row-reveal>.btn {
  flex: 0 0 auto;
}

/* Expand so all wrapped buttons are visible/clickable */
.link-row-reveal:hover {
  flex-wrap: wrap;
  max-height: 30rem;
  overflow-y: visible;
}

/* Optional fade hint at right edge when collapsed */
.link-row-reveal::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 3rem;
  width: 3rem;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.link-row-reveal:hover::after {
  display: none;
}

/* --- Esquisse ------------------------------------------------------------- */

#explore-esquisse-geomaes-geom_1 {
  width: 132px;
  margin-left: 0px !important;
  margin-top: -3px !important;
  height: 255px;
}

#explore-esquisse-geomaes-aes_1-ui_aesthetics {
  margin-left: 50px;
}

#explore-esquisse-geomaes-geom_1>button {
  background-color: transparent;
  border-radius: 0px;
  border: 2px solid var(--navy);
}

#explore-esquisse-geomaes-geom_1 .dropdown-menu.show {
  width: 320px !important;
}

#explore-esquisse-geomaes-geom_1 .dropdown-menu.show .drop-input-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center !important;
  white-space: normal;
  line-height: 1.2;
}

.esquisse-geom-aes-main {
  height: 250px;
  margin-bottom: 20px;
}

#explore-esquisse-geomaes-aes_1-dragvars-source-container {
  height: 200px !important;
  border: 2px solid var(--navy) !important;
  border-radius: 0px !important;
}

.box-dad {
  margin-top: 130px !important;
  border: 2px solid var(--navy) !important;
  border-radius: 0px !important;
}

.label-discrete {
  background: var(--coral) !important;
  border-radius: 0px !important;
  padding: 10px !important;
}

.label-id {
  background: var(--cream) !important;
  border-radius: 0px !important;
  padding: 10px !important;
  color: black !important;
}

.label-continuous {
  background: var(--blue) !important;
  border-radius: 0px !important;
  padding: 10px !important;
}

body .badge-dad {
  border-radius: 0px !important;
  margin: 5px !important;
}

#explore-esquisse-geomaes-aes_1-dragvars-source .dragula-block>.label-dragula>.label-esquisse.badge-dad {
  display: inline-flex;
  align-items: center;
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
  border-radius: 0 !important;
  overflow: hidden;
}

#explore-esquisse-geomaes-aes_1-dragvars-source {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
  align-content: flex-start;
  margin-right: 70px;
}

body #explore-esquisse-geomaes-aes_1-dragvars-target-6661636574 {
  margin-top: 0px !important;
  height: 255px !important;
}

#explore-esquisse-plooooooot-exports {
  border-radius: 0px !important;
  right: 0px !important;
  border: 2px solid var(--navy) !important;
}

.sw-dropdown {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.sw-show.sw-dropdown-content {
  box-shadow: none;
  border-radius: 0px !important;
  border: 2px solid var(--navy) !important;
  margin-bottom: 10px;
}

.btn-esquisse-controls {
  border: 2px solid var(--navy) !important;
}

.tippy-tooltip.light-theme {
  box-shadow: none !important;
  border: 2px solid var(--navy) !important;
  border-radius: 0px !important;
}

.tippy-arrow {
  display: none !important;
}

.rCSwtyrwf {
  --moveable-color: var(--pink) !important;
}

.btn-link {
  color: var(--navy) !important;
}

#explore-esquisse-plooooooot-export-png,
#explore-esquisse-plooooooot-export-pdf,
#explore-esquisse-plooooooot-export-svg,
#explore-esquisse-plooooooot-export-jpeg,
#explore-esquisse-plooooooot-export-bmp,
#explore-esquisse-plooooooot-export-eps,
#explore-esquisse-plooooooot-export-tiff {
  border-radius: 0px !important;
  border: 2px solid var(--navy) !important;
}

#explore-esquisse-plooooooot-export-png:active,
#explore-esquisse-plooooooot-export-pdf:active,
#explore-esquisse-plooooooot-export-svg:active,
#explore-esquisse-plooooooot-export-jpeg:active,
#explore-esquisse-plooooooot-export-bmp:active,
#explore-esquisse-plooooooot-export-eps:active,
#explore-esquisse-plooooooot-export-tiff:active {
  background-color: var(--blue) !important;
}

.input-group-text {
  border-radius: 0px !important;
  background-color: var(--cream) !important;
  border: 2px solid var(--navy) !important;
}

#explore-esquisse-plooooooot-export-update_preview {
  margin-bottom: -19px !important;
  border: 2px solid var(--navy) !important;
}

#explore-esquisse-controls-labs-labs_title,
#explore-esquisse-controls-labs-labs_subtitle,
#explore-esquisse-controls-labs-labs_caption,
#explore-esquisse-controls-labs-labs_x,
#explore-esquisse-controls-labs-labs_y {
  height: 47px !important;
}


#explore-esquisse-controls-labs-labs_title_options,
#explore-esquisse-controls-labs-labs_subtitle_options,
#explore-esquisse-controls-labs-labs_caption_options,
#explore-esquisse-controls-labs-labs_x_options,
#explore-esquisse-controls-labs-labs_y_options {
  border-radius: 0px !important;
}

#explore-esquisse-controls-labs-labs_title_options:active,
#explore-esquisse-controls-labs-labs_subtitle_options:active,
#explore-esquisse-controls-labs-labs_caption_options:active,
#explore-esquisse-controls-labs-labs_x_options:active,
#explore-esquisse-controls-labs-labs_y_options:active {
  background-color: var(--navy) !important;
}

#explore-esquisse-controls-labs-labs_title_options-template,
#explore-esquisse-controls-labs-labs_subtitle_options-template,
#explore-esquisse-controls-labs-labs_caption_options-template,
#explore-esquisse-controls-labs-labs_x_options-template,
#explore-esquisse-controls-labs-labs_y_options-template {
  width: 370px !important;
  margin-left: 10px !important;
}

.pretty .state label:before {
  border-color: var(--cream) !important
}

.pretty input:checked~.state.p-primary label:after {
  background-color: var(--blue) !important;
}

#tippy-2,
#tippy-3,
#tippy-4,
#tippy-5,
#tippy-6 {
  margin-left: 20px !important;
}

.pretty.p-switch.p-fill input:checked~.state.p-primary:before {
  background-color: var(--blue) !important;
}

.pretty.p-switch input:checked~.state.p-primary:before {
  border-color: var(--blue) !important;
}

#sw-content-explore-esquisse-controls-controls-axes {
  width: 440px !important;
}

.vscomp-toggle-button {
  border: 2px solid var(--navy) !important;
  height: auto !important;
  max-height: 120px !important;
  overflow-y: auto !important;
  align-items: flex-start !important;
  padding-top: 3px !important;
  padding-bottom: 0px !important;
}

body .vscomp-toggle-button {
  padding: 0px;
  margin-right: 2px;
}

.vscomp-toggle-button .vscomp-value {
  white-space: normal !important;
  line-height: 1.2 !important;
}

.vscomp-wrapper .checkbox-icon::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 0.6rem !important;
  width: 16px !important;
  height: 16px !important;
  background: url("polygon5.png") no-repeat center / contain !important;
  transform: translateY(-50%) rotate(90deg) !important;
  border: 0 !important;
  margin-top: 0 !important;
}

.vscomp-options-container {
  border: 2px solid var(--navy) !important;
  border-radius: 0px !important;
}

.vscomp-option.selected {
  background-color: var(--pink) !important;
}

.vscomp-option:hover,
.vscomp-option.focused {
  background-color: var(--blue) !important;
  color: white !important;
}

.pretty.p-default:not(.p-fill) input:checked~.state.p-primary-o label:after {
  background-color: var(--blue) !important;
}

.btn-check:checked+.btn {
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
}

#sw-content-explore-esquisse-controls-controls-filters {
  right: 100px !important;
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
  background-color: var(--blue) !important;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
  border: none !important;
  border-radius: 0px !important;
  color: white !important;
}

.vscomp-clear-icon::before,
.vscomp-clear-icon::after {
  background-color: white !important;
}

.vscomp-clear-icon:hover {
  background-color: var(--pink) !important;
}

.ggplot-output-container {
  padding-top: 40px;
}

/* Login styling */

.modal-backdrop:has(+ .modal .caml-login-modal),
.modal:has(.caml-login-modal) {
  background: linear-gradient(to top, #a2c7b7ff -100%, #e5e8f1 130%);
}

.modal-content:has(.caml-login-modal) {
  background: white;
  border: none;
  box-shadow: var(--shadow-md);
  border-radius: 0;
}

.modal-body:has(.caml-login-modal) {
  padding: 1.2rem;
}

.caml-login-modal {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.caml-login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 0.8rem;
}

.caml-login-logo svg {
  width: 72px;
  height: auto;
  display: block;
}

.caml-login-modal .form-control {
  border-radius: 0;
}

.caml-login-modal .btn-primary {
  background-color: var(--blue);
  border-color: var(--blue);
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  text-transform: uppercase;
  border-radius: 0px;
}

.caml-login-modal .btn-primary:hover,
.caml-login-modal .btn-primary:focus,
.caml-login-modal .btn-primary:active {
  transform: scale(1.2);
}