/* ============================================================
 * LncACTdb 4.0 — Single-cell Cluster Map tool (page-specific)
 * Loaded after tools/lncact-tools.css.
 * ============================================================ */

/* chart height — tall for a full embedding view */
#scChart { height: 700px; }

/* cell-count chip in the title */
.la-sc-cells {
  font: 600 12px var(--la-mono);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
  color: var(--la-primary-d);
  background: var(--la-bg-tint);
  border: 1px solid var(--la-line);
}

/* ---- select styling (40px height, arrow chevron, hover) ---- */
#scDataset + .ts-wrapper .ts-control,
#scCellType + .ts-wrapper .ts-control,
#scColorBy + .ts-wrapper .ts-control {
  min-height: 34px;
  padding: 8px 32px 8px 14px;
  font-size: 13.5px;
  border-radius: 10px;
  border: 1px solid var(--la-line);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#scDataset + .ts-wrapper .ts-control:hover,
#scCellType + .ts-wrapper .ts-control:hover,
#scColorBy + .ts-wrapper .ts-control:hover {
  background-color: var(--la-bg-tint, rgba(67, 56, 202, 0.04));
  border-color: rgba(67, 56, 202, 0.4);
}

/* chevron arrow for all 3 selects */
#scDataset + .ts-wrapper.single::after,
#scCellType + .ts-wrapper.single::after,
#scColorBy + .ts-wrapper.single::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  border-left: 2px solid var(--la-muted, #94a3b8);
  border-bottom: 2px solid var(--la-muted, #94a3b8);
  border-right: none;
  border-top: none;
  background: none;
  transform: translateY(-65%) rotate(-45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
  z-index: 3;
  pointer-events: none;
}

#scDataset + .ts-wrapper.single.dropdown-active::after,
#scCellType + .ts-wrapper.single.dropdown-active::after,
#scColorBy + .ts-wrapper.single.dropdown-active::after {
  transform: translateY(-35%) rotate(135deg);
  border-color: var(--la-primary);
}

/* dataset value dropdown — wider floating panel */
#scDataset + .ts-wrapper .ts-dropdown { width: 420px; }

/* no-wrap + ellipsis on selected item (standard: all selects) */
#scDataset + .ts-wrapper.single .ts-control,
#scCellType + .ts-wrapper.single .ts-control,
#scColorBy + .ts-wrapper.single .ts-control{flex-wrap:nowrap;overflow:hidden;padding-right:28px;}
#scDataset + .ts-wrapper.single .ts-control > .item,
#scCellType + .ts-wrapper.single .ts-control > .item,
#scColorBy + .ts-wrapper.single .ts-control > .item{
  flex:0 1 auto;min-width:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* resolution sub-select (shows/hides dynamically) */
.la-sc-reswrap select{width:100%;min-height:36px;border:1px solid var(--la-line);border-radius:8px;
  padding:8px 12px;font:500 13px var(--la-font);color:var(--la-ink-2);cursor:pointer;
  transition:border-color .15s;}
.la-sc-reswrap select:hover{border-color:rgba(67,56,202,.4);}

/* Display Settings checkboxes */
.la-sc-display{margin-top:14px;padding-top:14px;border-top:1px dashed var(--la-line);}
.la-sc-checks{display:grid;grid-auto-flow: column;gap:8px 12px;margin-top:8px;}
.la-sc-checks label{display:inline-flex;align-items:center;gap:6px;font:500 12.5px var(--la-font);
  color:var(--la-ink-2);cursor:pointer;}
.la-sc-checks input[type=checkbox]{accent-color:var(--la-primary);width:15px;height:15px;cursor:pointer;}

/* ---- embedding toggle (reuse expression pattern) ---- */
.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 (reuse expression pattern) ---- */
.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;
}

/* aside z-index to keep dropdown over chart */
.la-tool-aside {  z-index: 49; }
.la-tool-main { position: relative; z-index: 1; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  #scChart { height: 500px; }
  #scDataset + .ts-wrapper .ts-dropdown { width: 100%; }
}