/* Prevent search bar from moving when status changes */
#searchStatus {
  min-width: 180px;
  display: inline-block;
}
.tree-mount{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 520px;
  background: #fff;
}

.tree-tooltip{
  position: absolute;
  z-index: 20;
  pointer-events: none;
  background: rgba(17,24,39,.95);
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  max-width: 420px;
  white-space: pre-line;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 80ms linear, transform 80ms linear;
}

/* D3 styles */
.link { fill: none; stroke: rgba(0,0,0,.18); stroke-width: 2px; }
.node { cursor: pointer; }
.node rect.node-box { stroke-width: 2px; rx: 3px; ry: 3px; }
.node text { font-size: 12px; dominant-baseline: middle; pointer-events: none; }
.node text.sciname { font-style: italic; }
.node.has-children-collapsed rect.node-box { stroke-dasharray: 4 3; }

.cb-box { fill: #fff; stroke: rgba(0,0,0,.35); stroke-width: 1.5px; rx: 2px; ry: 2px; }
.cb-tick { fill: none; stroke: rgba(0,0,0,.8); stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; }
.cb-hit { fill: transparent; }

.jump-box { fill: rgba(13,110,253,.10); stroke: rgba(13,110,253,.45); stroke-width: 1.5px; rx: 3px; ry: 3px; }
.jump-text { font-size: 11px; fill: rgba(13,110,253,.95); pointer-events: none; }

/* Sampling targets highlight */
.node.sampling-target rect.node-box {
  stroke: #198754 !important;
  stroke-width: 2.5px !important;
  fill: rgba(25, 135, 84, 0.1) !important;
}
.node.sampling-target .cb-box {
  stroke: #198754;
  fill: rgba(25, 135, 84, 0.15);
}

/* Clade path (muted ancestors) */
.node.clade-path {
  opacity: 0.5;
}
.node.clade-path rect.node-box {
  stroke-dasharray: 3 2;
}

/* Active sampling root */
.node.clade-root rect.node-box {
  stroke: #198754 !important;
  stroke-width: 3px !important;
  stroke-dasharray: none !important;
  fill: rgba(25, 135, 84, 0.08) !important;
}

/* Fullscreen button */
.tree-fs-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  border: 0;
  background: transparent;
  padding: 6px;
  color: #111827;
  line-height: 1;
  border-radius: 10px;
}
.tree-fs-btn:hover {
  background: rgba(17, 24, 39, 0.06);
}
.tree-fs-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.tree-fs-btn i {
  font-size: 18px;
}

/* Fullscreen mode */
#treeMount:fullscreen,
#treeMount:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
}

/* Help icons */
.help-icon {
  font-size: 0.75em;
  position: relative;
  top: -0.35em;
  cursor: help;
}
.popover-help {
  font-size: 0.75rem;
  max-width: 240px;
}

/* ── Sampling filter clean UI ──────────────────────────────── */
.sam-scope-box,
.sam-target-box {
  border: 1px solid #e6e7e9;
  border-radius: .5rem;
  padding: .5rem;
  background: #fafbfc;
}
.sam-badge-scope {
  font-size: .7rem;
  font-weight: 600;
  color: #198754;
  background: rgba(25, 135, 84, .1);
  border-radius: .25rem;
  padding: 2px 6px;
}
.sam-scope-indicator {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .55rem;
  border: 1px solid #e6e7e9;
  border-radius: .5rem;
  background: #fafbfc;
}
.sam-summary-line {
  padding: .35rem 0;
  border-top: 1px solid #f0f1f3;
}
.btn-green {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
}
.btn-green:hover {
  background-color: #157347;
  border-color: #146c43;
  color: #fff;
}
.text-green { color: #198754 !important; }
.btn-outline-azure {
  border-color: #4299e1;
  color: #4299e1;
}
.btn-outline-azure:hover {
  background-color: #4299e1;
  color: #fff;
}
.btn-azure {
  background-color: #4299e1;
  border-color: #4299e1;
  color: #fff;
}
.btn-azure:hover {
  background-color: #3182ce;
  border-color: #3182ce;
  color: #fff;
}
.text-azure { color: #4299e1 !important; }

/* Scope info blocking overlay (shown only on cache miss) */
.scope-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.scope-info-overlay.is-visible {
  display: flex;
}
.scope-info-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 253, 0.72);
}
.scope-info-overlay-card {
  position: relative;
  z-index: 1;
  min-width: 280px;
  max-width: min(92vw, 380px);
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(13, 110, 253, 0.18);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 45px rgba(17,24,39,.14);
  text-align: center;
  animation: scopeOverlayPop .16s ease-out;
}
.scope-info-overlay-spinner-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
.scope-info-overlay-icon {
  font-size: .95rem;
  color: #2b6cb0;
  animation: scopeOverlayPulse 1.15s ease-in-out infinite;
}
.scope-info-overlay-title {
  font-size: .86rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
}
.scope-info-overlay-subtitle {
  margin-top: 2px;
  font-size: .74rem;
  color: #6b7280;
}
body.scope-info-blocked {
  cursor: wait !important;
}

@keyframes scopeOverlayPop {
  from { opacity: 0; transform: translateY(3px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scopeOverlayPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scope-info-overlay-card,
  .scope-info-overlay-icon {
    animation: none !important;
  }
}

/* Ruta hacia el clado: muted text */
g.node.clade-path text {
  opacity: 0.75;
}
g.node.clade-path rect.node-box {
  stroke-dasharray: 3 3;
}

/* Clado raíz activo: verde (g.node selector) */
g.node.clade-root rect.node-box {
  stroke: #198754 !important;
  stroke-width: 2 !important;
}

/* Ruta sin interacción */
g.node.clade-path {
  cursor: default;
}

/* Cascade navigation */
#cascadeNavContainer {
  flex-wrap: wrap;
}
#cascadeSelects {
  max-width: 100%;
}
#cascadeSelects .badge {
  font-weight: 500;
  font-size: 0.75rem;
}
#cascadeSelects .badge:hover {
  opacity: 0.85;
}
#cascadeSelects select {
  font-size: 0.8rem;
}

/* ===== Navbar responsive styles ===== */

/* Brand logo: responsive sizing */
.navbar-brand img {
  height: 50px;
  max-width: 260px;
  object-fit: contain;
  transition: height .2s ease, max-width .2s ease;
}
@media (max-width: 1199.98px) {
  .navbar-brand img {
    height: 44px;
    max-width: 240px;
  }
}
@media (max-width: 991.98px) {
  .navbar-brand img {
    height: 36px;
    max-width: 200px;
  }
}
@media (max-width: 575.98px) {
  .navbar-brand img {
    height: 30px;
    max-width: 170px;
  }
}

/* Search input: adaptive width */
.navbar-search-input {
  width: 140px;
  min-width: 100px;
  transition: width .2s ease;
}
.navbar-search-input:focus {
  width: 180px;
}

/* Tree controls wrapper */
.navbar-tree-controls {
  flex-wrap: wrap;
}

/* Collapsed mobile menu (<992px) */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    background: #fff;
    padding: 12px 16px;
    margin: 8px -4px 0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    border: 1px solid rgba(0,0,0,.08);
    position: relative;
    z-index: 50;
  }
  .navbar .navbar-nav {
    gap: 2px;
  }
  .navbar .navbar-nav .nav-link {
    padding: 8px 12px;
    border-radius: 6px;
  }
  .navbar .navbar-nav .nav-link:hover {
    background: rgba(32,107,196,.06);
  }
  .navbar .nav-item.dropdown {
    padding: 8px 0 4px;
    border-top: 1px solid rgba(0,0,0,.08);
    margin-top: 4px;
  }
  .navbar .nav-item.dropdown .dropdown-menu {
    position: static !important;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,.08);
    margin-top: 8px;
  }
  .navbar-tree-controls {
    width: 100%;
    padding: 10px 0 4px;
    border-top: 1px solid rgba(0,0,0,.08);
    margin-top: 8px;
  }
  .navbar-search-input {
    width: 100%;
    max-width: 200px;
  }
}

/* Large screens: tighten spacing */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-search-input {
    width: 120px;
  }
  .navbar-search-input:focus {
    width: 160px;
  }
}

/* XL+ screens: more room */
@media (min-width: 1200px) {
  .navbar-search-input {
    width: 160px;
  }
  .navbar-search-input:focus {
    width: 220px;
  }
}

/* Rank-based navigation */
#rankNavContainer {
  flex-wrap: nowrap;
  align-items: center;
}

/* Select2 in navbar adjustments */
#rankNavContainer .select2-container {
  display: inline-block;
  vertical-align: middle;
}
#rankNavContainer .select2-container--bootstrap-5 .select2-selection {
  min-height: 31px;
  font-size: 0.8125rem;
  border-color: #dadfe5;
}
#rankNavContainer .select2-container--bootstrap-5 .select2-selection--multiple {
  padding: 2px 4px;
}
#rankNavContainer .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  font-size: 0.7rem;
  padding: 0 5px;
  margin: 1px 2px 1px 0;
  background-color: #0d6efd;
  color: #fff;
  border: none;
}
#rankNavContainer .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  color: #fff;
  margin-right: 3px;
}
#rankNavContainer .select2-container--bootstrap-5 .select2-search--inline .select2-search__field {
  font-size: 0.8125rem;
  margin-top: 2px;
}
#rankNavContainer .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* Select2 dropdown */
.select2-container--bootstrap-5 .select2-dropdown {
  z-index: 1060;
  border-color: #dadfe5;
}
.select2-container--bootstrap-5 .select2-results__option {
  font-size: 0.8125rem;
  padding: 6px 10px;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: #0d6efd;
}

/* ── Range Taxon dual slider (NCBI style) ──────────────────── */
.range-taxon-wrap {
  padding: 8px 0 0;
  overflow: hidden;
  box-sizing: border-box;
}
.range-taxon-container {
  position: relative;
  height: 28px;
  box-sizing: border-box;
}
/* Background track */
.range-taxon-track {
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  height: 4px;
  transform: translateY(-50%);
  background: #c8cfd6;
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}
/* Colored fill between handles */
.range-taxon-track .range-fill {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, #198754, #0d6efd);
  border-radius: 2px;
  transition: left .05s, width .05s;
}
.range-taxon-track .range-fill.joined {
  background: #6f42c1;
}
/* Dot layer */
.range-taxon-dots {
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  height: 0;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.range-taxon-dots .rt-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c8cfd6;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  top: 50%;
  transition: background .15s, transform .1s;
  pointer-events: all;
  cursor: pointer;
}
.range-taxon-dots .rt-dot:hover {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.range-taxon-dots .rt-dot.in-range {
  background: linear-gradient(135deg, #198754, #0d6efd);
}
.range-taxon-dots .rt-dot.is-start {
  background: #198754;
}
.range-taxon-dots .rt-dot.is-end {
  background: #0d6efd;
}
.range-taxon-dots .rt-dot.joined {
  background: #6f42c1;
}
.range-taxon-dots .rt-dot.disabled-rank {
  background: #e9ecef;
  cursor: not-allowed;
  pointer-events: none;
}
/* Range inputs (invisible thumb layer) */
.range-taxon-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  z-index: 3;
}
.range-taxon-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: background .15s;
}
/* Start = green, End = blue */
.range-taxon-start::-webkit-slider-thumb { background: #198754; }
.range-taxon-end::-webkit-slider-thumb   { background: #0d6efd; }
/* When joined both turn purple */
.range-taxon-start.joined::-webkit-slider-thumb { background: #6f42c1; }
.range-taxon-end.joined::-webkit-slider-thumb   { background: #6f42c1; }

.range-taxon-input::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: background .15s;
}
.range-taxon-start::-moz-range-thumb { background: #198754; }
.range-taxon-end::-moz-range-thumb   { background: #0d6efd; }
.range-taxon-start.joined::-moz-range-thumb { background: #6f42c1; }
.range-taxon-end.joined::-moz-range-thumb   { background: #6f42c1; }
.range-taxon-input:focus { outline: none; }
/* Tick labels below */
.range-taxon-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  margin-top: 6px;
}
.range-taxon-ticks span {
  font-size: 10px;
  font-weight: 500;
  color: #6c757d;
  text-align: center;
  flex: 1;
  cursor: default;
  transition: color .15s, font-weight .15s;
  user-select: none;
}
.range-taxon-ticks span.in-range {
  color: #0d6efd;
  font-weight: 700;
}
.range-taxon-ticks span.disabled-rank {
  color: #ced4da;
  font-weight: 400;
}

/* ═══════════════════════════════════════
   Advanced Search Modal
   ═══════════════════════════════════════ */
#advancedSearchModal .card-sm {
  transition: border-color .2s ease, box-shadow .2s ease;
}
#advancedSearchModal .card-sm:hover {
  border-color: rgba(32,107,196,.4) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
#asQueryPreview code {
  color: #206bc4;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* History list */
.as-history-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(101,109,119,.16);
  border-radius: .375rem;
  padding: .25rem;
}
.as-history-entry {
  padding: .5rem .625rem;
  border-radius: .25rem;
  transition: background .15s ease;
  cursor: default;
}
.as-history-entry:hover {
  background: rgba(32,107,196,.04);
}
.as-history-entry + .as-history-entry {
  border-top: 1px solid rgba(101,109,119,.1);
}
.as-history-num {
  font-weight: 700;
  font-size: .8125rem;
  color: #206bc4;
  min-width: 2.2em;
  text-align: center;
}
.as-history-query {
  font-size: .75rem;
  color: #495057;
  word-break: break-all;
  background: transparent;
}
.as-history-actions {
  display: none;
  gap: .25rem;
}
.as-history-entry:hover .as-history-actions {
  display: flex;
}
.as-dup-toast {
  animation: fadeSlideIn .3s ease;
}
#advancedSearchModal .select2-container {
  min-width: 100% !important;
}
#advancedSearchModal .select2-selection--multiple {
  min-height: 31px !important;
  border-color: #d9dbde !important;
}
/* Filter badge in navbar */
#activeFilterBadge {
  cursor: default;
  animation: fadeSlideIn .3s ease;
}
#activeFilterBadge .btn-close {
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(27%) sepia(90%) saturate(1600%) hue-rotate(206deg);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== Tree Floating Toolbar ===== */
.tree-toolbar {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}
.tree-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tree-toolbar-btn:hover {
  background: rgba(32, 107, 196, .12);
  color: #206bc4;
}
.tree-toolbar-btn:active {
  background: rgba(32, 107, 196, .22);
}
.tree-toolbar-sep {
  width: 20px;
  height: 1px;
  margin: 2px auto;
  background: rgba(0, 0, 0, .12);
}

/* Fullscreen: keep toolbar visible + adapt background */
:fullscreen .tree-toolbar,
:-webkit-full-screen .tree-toolbar {
  background: rgba(255, 255, 255, .96);
}

/* ===== Selection DataTable ===== */
#selTable_wrapper { margin: 0; }
#selTable_wrapper .dataTables_empty { text-align: left; padding-left: .5rem; }
#selTable_wrapper table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
#selTable_wrapper table.dataTable thead th { border-bottom-width: 1px; }

/* Per-column filter row */
.sel-col-filters th { padding: 4px 4px 6px !important; background: #f8f9fa; }
.sel-col-input {
  font-size: .75rem !important;
  padding: 2px 6px !important;
  height: 26px !important;
}
.sel-col-input::placeholder { color: #adb5bd; }