/* ============================================================
 * LncACTdb 4.0 — Functional Enrichment tool (page-specific)
 * Loaded after tools/lncact-tools.css. Mirrors the Expression/Network standard.
 * ============================================================ */

/* ---- maps: 1 or 2 side-by-side in a grid ---- */
.la-fn-maps{display:grid;grid-template-columns:1fr;gap:16px;}
.la-fn-maps.dual{grid-template-columns:repeat(2,1fr);}
.la-fn-map{border:1px solid var(--la-line);border-radius:12px;overflow:hidden;background:#fff;}
.la-fn-map__t{font:700 12px var(--la-font);color:var(--la-ink);padding:9px 12px;
  border-bottom:1px solid var(--la-line-2);border-left:3px solid var(--la-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.la-fn-map__c{height:360px;}

/* ---- distribution chart ---- */
#fnDist{height:320px;}

/* ---- dual-pick (reuses expression.css pattern) ---- */
.la-dualpick{display:grid;grid-template-columns:128px 1fr;gap:8px;}
.la-dualpick .ts-control{min-height:26px;}

/* coloured type-select tinted by current category */
.la-dualpick__type[data-cat] .ts-control{font-weight:700;border-width:1.5px;}
.la-dualpick__type[data-cat="0"] .ts-control{color:var(--la-primary-d);background:var(--la-bg-tint);border-color:var(--la-line);}
.la-dualpick__type[data-cat="T"] .ts-control{color:#0e7490;background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.45);}
.la-dualpick__type[data-cat="s"] .ts-control{color:#6d28d9;background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.45);}
.la-dualpick__type[data-cat="C"] .ts-control{color:#b45309;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.5);}
.la-dualpick__type[data-cat="O"] .ts-control{color:#047857;background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.45);}

/* coloured dropdown option rows for the type select */
.la-typopt{font-weight:600;padding:2px 0;}
.la-typopt--dsT{color:#0e7490;} .la-typopt--dss{color:#6d28d9;}
.la-typopt--dsC{color:#b45309;} .la-typopt--dsO{color:#047857;}
.la-typitem{font-weight:700;}

/* dataset value dropdown — wider floating panel + rich rows */
.la-dualpick__val--ds .ts-dropdown{width:420px;}
.la-dualpick__val--ds .ts-dropdown .option{align-items:flex-start;}

/* ---- embedding toggle (UMAP/tSNE) in the map header ---- */
.la-dt-embtog button{font:600 12px var(--la-font);color:var(--la-muted);background:var(--la-bg-soft);
  border:1px solid var(--la-line);border-radius:8px;padding:5px 12px;cursor:pointer;margin-left:6px;transition:.15s;}
.la-dt-embtog button.on{background:var(--la-primary);color:#fff;border-color:var(--la-primary);}

/* point-size slider (same as expression) */
.la-symslider{display:inline-flex;align-items:center;gap:8px;color:var(--la-muted);
  background:var(--la-bg-soft);border:1px solid var(--la-line);border-radius:10px;padding:6px 12px;}
.la-symslider i{color:var(--la-primary);opacity:.75;font-size:11px;}
.la-symslider input[type=range]{width:92px;accent-color:var(--la-primary);cursor:pointer;}

/* ---- DataTable clickable first-column link ---- */
.la-fn-link{color:var(--la-primary);font-weight:600;text-decoration:none;transition:.15s;}
.la-fn-link:hover{color:var(--la-primary-d);text-decoration:underline;}

/* function type & pathway selects — full-width (not inside dual-pick grid) */
#fnType,#fnType2,#fnVal,#fnVal2{width:100%;}

/* PATHWAY One / Two: type + value 上下成组 */
.la-fn-p2{display:flex;flex-direction:column;gap:8px;}
.la-fn-p2 > *{min-width:0;}

/* 统一各框控件高度（dataset 双拼框保持自己的紧凑高度）。
   若 tom-select 主题渲染更高/更矮，改这一个 40px 即可。 */
.la-fn-p2 .ts-control{min-height:40px;align-items:center;}

/* ============================================================
 * 让 Pathway One / Two 的四个框都像 dataset 一样明显是下拉框：
 * 右侧箭头 + hover 提示 + 单行省略（点击后光标不换行、长名截断）。
 * dataset 双拼框由 tools.css 处理，作用域互不重叠。
 * ============================================================ */
.la-fn-p2 .ts-wrapper.single{position:relative;}

/* ① 右下角箭头（与 dataset 完全一致） */
.la-fn-p2 .ts-wrapper.single::after{
  content:"";position:absolute;top:50%;right:12px;width:6px;height:6px;
  border-left:2px solid var(--la-muted);border-bottom:2px solid var(--la-muted);
  transform:translateY(-65%) rotate(-45deg);
  transition:transform .2s ease,border-color .2s ease;z-index:3;pointer-events:none;}
.la-fn-p2 .ts-wrapper.single.dropdown-active::after{
  transform:translateY(-35%) rotate(135deg);border-color:var(--la-primary);}
.la-fn-p2 .ts-wrapper.single:hover::after{border-color:var(--la-primary);}

/* ③④ 可点击手感 + 单行不换行 + 长通路名省略号（给箭头留 28px 安全位） */
.la-fn-p2 .ts-control{cursor:pointer;flex-wrap:nowrap;overflow:hidden;padding-right:28px;
  transition:background-color .15s ease,border-color .15s ease;}
.la-fn-p2 .ts-control:hover{background-color:var(--la-bg-tint);border-color:rgba(67,56,202,.4);}
.la-fn-p2 .ts-control > .item{flex:0 1 auto;min-width:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ② 可清空的 Pathway One & Two：× 放右侧（在箭头左边一点），仅 .la-fn-clr 上生效 */
.la-fn-clr.has-items .ts-control{padding-right:48px;}
.la-fn-clr:not(.has-items) .clear-button{display:none;}
.la-fn-clr .clear-button{position:absolute;top:50%;right:30px !important;transform:translateY(-50%);
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:var(--la-muted);font-size:17px;line-height:1;opacity:.55;z-index:4;}
.la-fn-clr .clear-button:hover{opacity:1;color:var(--la-ink);}

/* aside z-index for dropdown overlaps */
.la-tool-aside{z-index:20;}

/* ---- score-distribution row: boxplot (left) + fn×fn2 correlation (right) ---- */
.la-fn-distrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;}
.la-fn-distrow.single{grid-template-columns:1fr;}
.la-fn-corr{display:flex;flex-direction:column;border-left:1px solid var(--la-line-2);padding-left:18px;}
.la-fn-corr__c{flex:1;height:320px;min-width:0;}
.la-fn-corr__hd{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px;min-height:24px;}
.la-fn-corr-pair{font:600 11px var(--la-mono);color:var(--la-ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;}
.la-fn-r{font:800 13.5px var(--la-font-display);letter-spacing:-.01em;}
.la-fn-r--pos{color:#047857;} .la-fn-r--neg{color:#b91c1c;} .la-fn-r--na{color:var(--la-muted);}
.la-fn-pv{font:600 11px var(--la-mono);color:var(--la-muted);}

/* method toggle — segmented (deliberately different from expression's pill) */
.la-fn-methodtog{display:inline-flex;border:1px solid var(--la-line);border-radius:8px;overflow:hidden;}
.la-fn-methodtog button{border:0;background:var(--la-bg-soft);cursor:pointer;
  font:600 12px var(--la-font);color:var(--la-muted);padding:5px 12px;transition:.15s;}
.la-fn-methodtog button+button{border-left:1px solid var(--la-line);}
.la-fn-methodtog button:hover{color:var(--la-primary-d);}
.la-fn-methodtog button.on{background:var(--la-primary);color:#fff;}

@media(max-width:1100px){
  .la-fn-maps.dual{grid-template-columns:1fr;}
  .la-fn-map__c{height:280px;}
  #fnDist{height:260px;}
  .la-fn-distrow{grid-template-columns:1fr;}
  .la-fn-corr{border-left:0;border-top:1px solid var(--la-line-2);padding-left:0;padding-top:14px;}
}

.la-fn-p2 .ts-wrapper.single  .ts-dropdown {
	    width: 500px;
	
}

.la-fn-map__titleA{
  text-align:center;
  font-weight:700;
  font-size:14px;
border-bottom: 2px solid;
  line-height:1.2;
  color:#4338ca
}
.la-fn-map__titleB{
  text-align:center;
  font-weight:700;
  font-size:14px;
border-bottom: 2px solid;
  line-height:1.2;
  color:#0e7490;
}