/* Separator attached to the top of each control section (except nav bar) */
.ctrl-section::before {
  content: "";
  display: block;
  border-top: 1px solid var(--sep-color);
  margin: var(--sep-margin);
}

/* Search results */
#search-results {
  background: #141726 !important;
}

/* Unified font sizes across graph controls */
#search-input,
#search-input:focus,
#search-input:active,
#search-input:focus-visible { font-size: 11px !important; }

#search-input::placeholder { font-size: 11px !important; }

.search-result-item { font-size: 11px !important; }

#my-multi-dropdown .dash-dropdown-trigger,
#my-multi-dropdown [class*="singleValue"],
#my-multi-dropdown [class*="placeholder"],
#my-multi-dropdown span { font-size: 11px !important; }

.contcb-title { font-size: 10px !important; }
.contcb-txt   { font-size: 10px !important; }

/* G infobox: tighter spacing between metric rows */
#info-essential p, #info-location p, #info-molecular-function p,
#info-biological-process p, #info-top-cell p {
  margin: 0 0 2px 0;
  line-height: 1.3;
}

/* Multi-panel: override Bootstrap .popover constraints; enable container queries */
#multi-panel {
  display: flex;
  overflow: hidden;
  container-type: inline-size;
  container-name: multi-panel;
  background-color: #141726 !important;
  max-width: none !important;
  max-height: none !important;
  position: fixed !important;
}

/* Right-side panels: lift Bootstrap's popover max-width cap */
#info-box, #help-popover, #function-drawer {
  max-width: none !important;
}

#help-popover { width: 360px !important; }

/* Function drawer */
#function-drawer {
  background-color: #141726 !important;
}

/* Function/Rationale button: pressed state */
#btn-open-function.fn-active {
  background: #343743 !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Panel collapsed: shrink to tab-buttons-only strip */
#multi-panel.collapsed {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  resize: none !important;
}
#multi-panel.collapsed #btn-close-multi-panel,
#multi-panel.collapsed #panel-resize-handle,
#multi-panel.collapsed #panel-pane-umap,
#multi-panel.collapsed #panel-pane-info,
#multi-panel.collapsed #panel-pane-orientation {
  display: none !important;
}

/* ── Tab-bar icon colour + active indicator ─────────────────────────────── */
#panel-tab-bar button {
  opacity: 1 !important;    /* let the img filter control brightness */
}
#panel-tab-bar button img {
  filter: brightness(0) invert(1);   /* normalise to white */
  opacity: 0.40;
  transition: opacity 0.15s;
  display: block;
  width: 1.7vw !important;
  height: 1.7vw !important;
}
#panel-tab-bar button:hover img { opacity: 0.70; }
#panel-tab-bar button.active img  { opacity: 1; }

/* Collapsed panel: all tab icons inactive */
#multi-panel.collapsed #panel-tab-bar button img,
#multi-panel.collapsed #panel-tab-bar button.active img { opacity: 0.40 !important; }

/* ── Scrollbars: single colour token — change --sb-thumb to restyle all ─── */
:root {
  /* ── Scuba theme tokens — change these two when switching dbc theme ── */
  --scuba-text:  var(--bs-body-color, #dee2e6); /* primary text; auto-tracks Bootstrap */
  --scuba-muted: #999;                           /* controls, labels, body text */
  --hover-bg:    #272a42;                        /* uniform hover background (rgba(255,255,255,0.10) over #141726) */
  --ctrl-width:  clamp(150px, 13vw, 220px);      /* control-stack width — used by Python/JS via var(--ctrl-width) */
  /* ── Other tokens ─────────────────────────────────────────────────── */
  --sb-thumb:  rgba(255, 255, 255, 0.40);
  --sep-color: rgba(255, 255, 255, 0.50);
  --sep-margin: 4px 12.5% 10px;
}

#search-results,
.dash-dropdown-content,
#function-drawer-body,
#info-scroll-content,
#table-container {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}

#search-results::-webkit-scrollbar,
.dash-dropdown-content::-webkit-scrollbar,
#function-drawer-body::-webkit-scrollbar,
#info-scroll-content::-webkit-scrollbar,
#table-container::-webkit-scrollbar         { width: 4px; height: 4px; }

#search-results::-webkit-scrollbar-track,
.dash-dropdown-content::-webkit-scrollbar-track,
#function-drawer-body::-webkit-scrollbar-track,
#info-scroll-content::-webkit-scrollbar-track,
#table-container::-webkit-scrollbar-track  { background: transparent; }

#search-results::-webkit-scrollbar-thumb,
.dash-dropdown-content::-webkit-scrollbar-thumb,
#function-drawer-body::-webkit-scrollbar-thumb,
#info-scroll-content::-webkit-scrollbar-thumb,
#table-container::-webkit-scrollbar-thumb  { background: var(--sb-thumb); border-radius: 2px; }

/* ── Table grouped sub-header row ───────────────────────────────────────── */
/* Sticks just below the group-label row (~34 px tall) */
#table-global thead tr:nth-child(2) th,
#table-module thead tr:nth-child(2) th,
#table-landing thead tr:nth-child(2) th {
  position: sticky;
  top: 30px;
  background-color: #171725;
}

/* ── Info-pane: fit inside panel + word-wrap on all text lines ───────────── */
#panel-pane-info #info-box {
  width: 100%;
  max-width: 100%;
  max-height: none;
  box-sizing: border-box;
}
#panel-pane-info #info-box .info-head,
#panel-pane-info #info-gene-description,
#panel-pane-info #info-essential,
#panel-pane-info #info-location,
#panel-pane-info #info-molecular-function,
#panel-pane-info #info-biological-process,
#panel-pane-info #info-top-cell,
#panel-pane-info #info-expr-metrics {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* ── Info-action buttons: equal width, pinned to bottom ─────────────────── */
#info-box .info-actions {
  flex-shrink: 0 !important;
  padding-top: 8px !important;
  padding-right: 28px !important;
}
#info-box .info-actions button,
#hpa-link, #ot-link {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  justify-content: center !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
#hpa-link, #ot-link { padding: 4px 7px !important; }

/* ── Info-pane font scaling via container queries ───────────────────────── */
@container multi-panel (max-width: 300px) {
  #info-gene-symbol       { font-size: 13px !important; }
  #info-gene-synonym      { font-size: 11px !important; }
  #info-gene-description  { font-size: 11px !important; }
  #info-essential, #info-location, #info-molecular-function,
  #info-biological-process, #info-top-cell { font-size: 10px !important; }
  #info-expr-metrics      { font-size:  9px !important; }
  /* Function button */
  #info-box .info-actions button {
    font-size:  9px !important;
    padding:    3px 8px !important;
    max-width: 53px !important;
  }
  /* Link buttons — use IDs to beat style.css specificity */
  #hpa-link, #ot-link {
    font-size:  9px !important;
    padding:    2px 7px !important;
  }
  #hpa-link img, #ot-link img {
    width:  6px !important;
    height: 6px !important;
  }
}

@container multi-panel (max-width: 240px) {
  #info-gene-symbol       { font-size: 12px !important; }
  #info-gene-synonym      { font-size: 10px !important; }
  #info-gene-description  { font-size: 10px !important; }
  #info-essential, #info-location, #info-molecular-function,
  #info-biological-process, #info-top-cell { font-size:  9px !important; }
  #info-expr-metrics      { font-size:  8px !important; }
  #info-box .info-actions button {
    font-size:  8px !important;
    padding:    2px 6px !important;
    max-width: 38px !important;
  }
  #hpa-link, #ot-link {
    font-size:  8px !important;
    padding:    1px 5px !important;
    white-space: normal !important;
  }
  #hpa-link img, #ot-link img {
    width:  5px !important;
    height: 5px !important;
  }
}

/* ── Segmented radio button groups ──────────────────────────────────────── */
.seg-radio {
  display: flex;
  flex-direction: row;
}

/* dbc.RadioItems: hide the native radio input via btn-check */
.seg-radio .form-check {
  padding: 0;
  margin: 0;
  display: flex;
}
.seg-radio .btn-check {
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
}

/* Shared pill style */
.seg-radio-btn {
  cursor: pointer;
  padding: 3px 10px;
  font-size: 12px;
  color: #999;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-left: none;
  white-space: nowrap;
  user-select: none;
  line-height: 1.4;
  margin: 0;
  transition: background 0.15s, color 0.15s;
}

/* First/last border-radius for plain html.Button pills */
.seg-radio-btn--first {
  border-left: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 4px 0 0 4px !important;
}
.seg-radio-btn--last {
  border-radius: 0 4px 4px 0 !important;
}

/* dbc.RadioItems: first/last border-radius via :first-child/:last-child */
.seg-radio .form-check:first-child .seg-radio-btn {
  border-left: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px 0 0 4px;
}
.seg-radio .form-check:last-child .seg-radio-btn {
  border-radius: 0 4px 4px 0;
}

/* Active state: works for both plain buttons (.seg-btn-active) and dbc.RadioItems (:has) */
.seg-radio-btn.seg-btn-active,
.seg-radio .form-check:has(.form-check-input:checked) .seg-radio-btn {
  color: #eee !important;
  background: #343743 !important;
}
.seg-radio .seg-radio-btn:hover {
  color: var(--scuba-text);
  background: var(--hover-bg);
}

/* Separator line before marked dropdown options (set via data-sep-before attribute in JS) */
.dash-dropdown-option[data-sep-before] {
  position: relative;
}
.dash-dropdown-option[data-sep-before]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12.5%;
  width: 75%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

/* ── Title-bar chip dropdowns (dbc.DropdownMenu) ────────────────────────── */
#graph-title { align-items: stretch; top: 15px !important; }
.title-chip-dd { pointer-events: auto; z-index: 5000; margin: 0 !important; padding: 0 !important; display: flex; align-items: stretch; }

/*
 * Override Bootstrap 5 btn CSS custom properties at higher specificity
 * (.title-chip-dd .btn = 0,2,0 beats .btn-link = 0,1,0).
 * This is more reliable than !important for properties driven by CSS vars.
 */
.title-chip-dd .btn {
  --bs-btn-color:              var(--scuba-muted);
  --bs-btn-bg:                 #141726;
  --bs-btn-border-color:       rgba(255,255,255,0.15);
  --bs-btn-hover-color:        var(--scuba-text);
  --bs-btn-hover-bg:           var(--hover-bg);
  --bs-btn-hover-border-color: rgba(255,255,255,0.15);
  --bs-btn-active-color:       var(--scuba-text);
  --bs-btn-active-bg:          #343743;
  --bs-btn-active-border-color:rgba(255,255,255,0.15);
  --bs-btn-focus-box-shadow:   none;
  --bs-btn-disabled-color:     var(--scuba-muted);
  /* structural props still need !important for non-var Bootstrap rules */
  margin:       0 !important;
  width:        100% !important;
  border-color:        rgba(255,255,255,0.15) !important;
  border-right-width:  2px !important;
  border-left:         none !important;
  border-radius: 0 !important;
  font-size:    15px !important;
  font-weight:  400 !important;
  padding:      4px 10px !important;
  box-shadow:   none !important;
  text-align:   left !important;
  line-height:  1.4 !important;
  outline:      none !important;
  text-decoration: none !important;
  display:               flex !important;
  align-items:           center !important;
  gap:                   6px !important;
}
#title-celltype .btn {
  border-left:   1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px 0 0 4px !important;
}
#title-readout .btn { border-radius: 0 4px 4px 0 !important; }

/* Collapse wrapper so the tag is a direct flex child of #graph-title */
#graph-title-module { display: contents; }

/* Module tag: static (non-interactive) chip that joins the group in G-mode */
.title-chip-tag {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  color: var(--scuba-muted);
  background: #141726;
  border: 1px solid rgba(255,255,255,0.15);
  border-left: none;
  border-radius: 0 4px 4px 0;
  font-size: 15px;
  font-weight: 400;
  padding: 4px 10px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* Static cell-type chip in G-mode — first position, rounded left */
#title-ct-static {
  border-left:   1px solid rgba(255,255,255,0.15);
  border-radius: 4px 0 0 4px;
}

/* Push caret to right edge on all chips */
.title-chip-dd .btn::after { margin-left: auto; }

/* Two-line chip label: category header above value — applies everywhere */
.chip-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  min-width: 0;
  flex: 1;
  line-height: 1.2;
}
.chip-cat {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--scuba-muted);
  opacity: 0.6;
  white-space: nowrap;
  line-height: 1.2;
}
.chip-val {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
}

/* When the module tag is present, readout is no longer the last chip */
#graph-title:has(#graph-title-module > *) #title-readout .btn {
  border-radius: 0 !important;
}

/* Options panel */
.title-chip-dd .dropdown-menu {
  background-color: #141726 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  min-width: 0 !important;
  width: max-content !important;
  padding: 2px 0 !important;
  box-shadow: none !important;
  z-index: 200000 !important;
}

/* Menu items */
.title-chip-dd .dropdown-item {
  --bs-dropdown-link-color:        var(--scuba-muted);
  --bs-dropdown-link-hover-color:  var(--scuba-text);
  --bs-dropdown-link-hover-bg:     var(--hover-bg);
  --bs-dropdown-link-active-color: var(--scuba-text);
  --bs-dropdown-link-active-bg:    #343743;
  font-size:   12px !important;
  font-weight: 400 !important;
  padding:     3px 10px !important;
}

.title-chip-dd .dropdown-item.active {
  color:       var(--scuba-text) !important;
  background:  #343743 !important;
  font-weight: 500 !important;
}

/* Divider */
.title-chip-dd .dropdown-divider {
  border-color: rgba(255,255,255,0.15) !important;
  margin: 4px 12.5% !important;
}

/* Vertical variant (landing page — uses dbc.RadioItems) */
.seg-radio-v {
  flex-direction: column;
}
.seg-radio-v .form-check {
  width: 100%;
}
.seg-radio-v .seg-radio-btn {
  width: 100%;
  border-left: 1px solid rgba(255,255,255,0.2);
  border-top: none;
  text-align: left;
}
.seg-radio-v .form-check:first-child .seg-radio-btn {
  border-top: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px 4px 0 0;
}
.seg-radio-v .form-check:last-child .seg-radio-btn {
  border-radius: 0 0 4px 4px;
}

/* ── Unified tooltip token ───────────────────────────────────────── */
/* All four tooltip surfaces share this visual style. JS toggles      */
/* display: none → block; individual rules below add layout overrides. */
#nav-tooltip,
#cy-tooltip,
#ct-tooltip,
#landing-tooltip {
  position: fixed;
  display: none;
  pointer-events: none;
  background: rgba(74, 70, 90, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  color: #c8ccd6;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  padding: 6px 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}

#nav-tooltip {
  z-index: 200000;
  max-width: 160px;
  white-space: normal;
}

#cy-tooltip {
  z-index: 200000;
  white-space: pre;
}

#ct-tooltip {
  z-index: 200;
  max-width: 12ch;
  white-space: normal;
  word-wrap: break-word;
}

#landing-tooltip {
  z-index: 9999;
  white-space: nowrap;
}

/* Cell-type selection landing page */
#cell-selector-page {
  position: fixed;
  inset: 0;
  background: #070b1a;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 90;
}

#cell-select-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #aaa;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}

#panel-resize-handle {
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  z-index: 20;
  cursor: nw-resize;
  background: url('/assets/icons/handle_icon.svg') no-repeat center center;
  background-size: contain;
  opacity: 0.6;
  transition: opacity 0.15s;
}
#panel-resize-handle:hover { opacity: 1; }

/* ── Control panel toggle button ────────────────────────────────────────── */
#btn-collapse-controls {
  background-color: #141726 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #999 !important;
}
#btn-collapse-controls:hover {
  background-color: var(--hover-bg) !important;
  color: var(--scuba-text) !important;
}

/* ── Offcanvas control panel ─────────────────────────────────────────────── */
#control-offcanvas {
  --bs-offcanvas-bg: #141726;
}

/* ── Unified control stack ───────────────────────────────────────────────── */
#control-stack {
  background-color: #141726;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #DDD;
  border-radius: 0;
  overflow: visible;
}

/* Nav-bar hover — defined here so var(--hover-bg) resolves in the same file */
#nav-bar .btn:hover { background-color: var(--hover-bg) !important; }

/* Strip glass/card styling from control-stack children */
#control-stack #nav-bar,
#control-stack #control-box,
#control-stack #search-wrap,
#control-stack #color-control-wrap,
#color-control-wrap #my-multi-dropdown,
#color-control-wrap .contcb-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#control-stack #nav-bar,
#control-stack #nav-bar button { pointer-events: auto !important; }
#control-stack #nav-bar        { overflow: visible; }
#control-stack #control-box    { display: flex; flex-direction: column; overflow: visible; }
#control-stack #search-wrap    { position: relative; }

/* Color control: keep z-index for dropdown */
#color-control-wrap {
  position: relative;
  z-index: 4001;
  overflow: visible;
}

/* Horizontal continuous colorbar */
.contcb-bar {
  height: 10px !important;
  width: auto !important;
  flex: 1 !important;
  border-radius: 5px !important;
  border: none !important;
  margin: 0 !important;
}

.contcb-card  { padding-left: 10px !important; padding-right: 10px !important; }
.contcb-title { text-align: left !important; margin: 0 !important; }
.contcb-txt   { white-space: nowrap !important; }

/* ── Multi-panel panes: transparent so glass panel shows through ─────────── */
#panel-pane-orientation,
#panel-pane-orientation #graph-mini,
#panel-pane-orientation #graph-mini canvas,
#panel-pane-info {
  background: transparent !important;
  background-color: transparent !important;
}
#panel-pane-umap #umap-canvas,
#panel-pane-umap #umap-placeholder {
  background: transparent !important;
}

/* ── Control panel legend sections (shared design) ───────────────────────── */
.ctrl-legend { padding: 6px 8px; }
.ctrl-legend-title {
  color: var(--scuba-muted);
  font-weight: 400;
  font-size: 11px;
  margin-bottom: 5px;
  white-space: nowrap;
}
.ctrl-legend-items {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ctrl-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ctrl-legend-label {
  font-size: 10px;
  color: var(--scuba-muted);
}

/* ── Panel tab buttons ───────────────────────────────────────────────────── */
.panel-tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.75;
  line-height: 0;
}

/* ── Info panel markdown sections ────────────────────────────────────────── */
.info-md { font-size: 12px; }

/* ── External link icon ──────────────────────────────────────────────────── */
.ext-link-icon {
  width: 8px;
  height: 8px;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.7;
  position: relative;
  top: -1px;
}