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

#search-wrap .dash-input-element::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 .popover{display:none}; enable container queries */
#multi-panel {
  display: flex;
  overflow: hidden;
  container-type: inline-size;
  container-name: multi-panel;
}

/* 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.60;
  transition: opacity 0.15s;
  display: block;
  width: 18px !important;
  height: 18px !important;
}
#panel-tab-bar button:hover img { opacity: 0.87; }
#panel-tab-bar button.active img  { opacity: 1; }

/* ── Info-pane + table modal: thin dark scrollbar ───────────────────────── */
#info-scroll-content, #table-container { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
#info-scroll-content::-webkit-scrollbar, #table-container::-webkit-scrollbar             { width: 4px; }
#info-scroll-content::-webkit-scrollbar-track, #table-container::-webkit-scrollbar-track { background: transparent; }
#info-scroll-content::-webkit-scrollbar-thumb, #table-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }


/* ── 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;
  }
}

/* Cell-selector: floating cell-type name tooltip */
#ct-tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(0, 0, 20, 0.85);
  color: #ccc;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 12ch;
  word-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  z-index: 200;
  display: none;
}

/* Cell-type selection landing page */
#cell-selector-page {
  position: fixed;
  inset: 0;
  background: #000019;
  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; }