/* ===========================================================================
   gi_network.css — D3 force-directed GI network panel.

   Ported from
   ~/gi/tb_ess_library/paper/analyses/prob_gi/gi_joint_bundle/assets/css/gi_network.css
   with two changes for embedding in the gene page:

   1. The upstream file styles `html, body { height:100%; overflow:hidden }`
      globally — safe there because it renders standalone or in an iframe, but
      it would kill the gene page's scroll. Those rules are REMOVED; .gi-net
      sizes to its parent, and the parent sets the height.

   2. Node roles are interaction classes, not the pair network's
      unique-a / unique-b / shared. With a single query gene every neighbour
      would come out "shared"; see data/gi/network.py.

   IMPORTANT — color sync contract:
   The role colors below MUST stay in sync with the COLORS dict in
   data/gi/network.py. D3 sets SVG circle fills at runtime from that dict
   (shipped in the payload as config.roleColors); this CSS paints the static
   legend chips. Updating one without the other desyncs legend from nodes.

   Canonical hex values:
     query        #DC143C  (crimson)  — the gene whose page this is
     aggravating  #4a8263  (green)    — matches GI_EDGE_CMAP color_min
     alleviating  #a855b6  (purple)   — matches GI_EDGE_CMAP color_max
     discordant   #F59E0B  (amber/gold) - lab convention
     degree2      #9CA3AF  (gray)
     correlated   #3B82F6  (blue)     — correlation view only
   =========================================================================== */

:root {
  --gi-net-query:       #DC143C;
  --gi-net-aggravating: #4a8263;
  --gi-net-alleviating: #a855b6;
  --gi-net-discordant:  #F59E0B;
  --gi-net-degree2:     #9CA3AF;
  --gi-net-correlated:  #3B82F6;
}

/* ── Root container ──────────────────────────────────────────────────────── */
/* Fills its parent. The embedding page sets the height (see
   gene_detail_gi.html), which is why the upstream html/body rules are gone. */
.gi-net {
  width: 100%;
  height: 100%;
  display: flex;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Left panel (legend + controls) ──────────────────────────────────────── */
.gi-net__panel {
  flex: 0 0 260px;
  padding: 16px;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.7;
}
.gi-net__panel-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

/* ── Right viz area (SVG container) ──────────────────────────────────────── */
.gi-net__viz-wrap {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
}
.gi-net__viz {
  display: block;
}

/* ── Legend chips ────────────────────────────────────────────────────────── */
.gi-net__legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.gi-net__legend-dot--query       { background: var(--gi-net-query); }
.gi-net__legend-dot--aggravating { background: var(--gi-net-aggravating); }
.gi-net__legend-dot--alleviating { background: var(--gi-net-alleviating); }
.gi-net__legend-dot--discordant  { background: var(--gi-net-discordant); }
.gi-net__legend-dot--degree2     { background: var(--gi-net-degree2); }
.gi-net__legend-dot--correlated  { background: var(--gi-net-correlated); }

/* ── GI ↔ Correlation toggle ─────────────────────────────────────────────── */
.gi-net__toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.gi-net__toggle-label           { font-weight: 600; color: #374151; }
.gi-net__toggle-label--inactive { font-weight: 400; color: #9ca3af; }
.gi-net__switch-track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
}
.gi-net__switch-track--active { background: #3b82f6; }
.gi-net__switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ── Controls (sliders, checkboxes) ──────────────────────────────────────── */
.gi-net__controls {
  font-size: 12px;
  margin-bottom: 8px;
}
.gi-net__controls--hidden { display: none; }
.gi-net__controls input[type="range"] {
  width: 120px;
  accent-color: #3b82f6;
}
.gi-net__slider-val {
  font-weight: 600;
  min-width: 28px;
}
.gi-net__controls-section {
  margin-top: 16px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}
.gi-net__controls-label {
  color: #6b7280;
  margin-bottom: 4px;
}
.gi-net__controls-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gi-net__slider {
  width: 120px;
  accent-color: #3b82f6;
}

/* ── Stats line ──────────────────────────────────────────────────────────── */
.gi-net__stats {
  margin-top: 10px;
  color: #9ca3af;
  font-size: 12px;
}
/* Truncation notice — a pruned view must never read as a complete one. */
.gi-net__pruned {
  margin-top: 4px;
  color: #b45309;
  font-size: 11px;
  line-height: 1.4;
}

/* ── SVG: nodes, edges, labels ───────────────────────────────────────────── */
.gi-net__node {
  /* fill set via D3 per-node from config.roleColors */
  stroke: #fff;
  stroke-width: 1.5;
}
.gi-net__edge {
  /* stroke set via D3 per-edge from GI_EDGE_CMAP / CORR_EDGE_CMAP */
  stroke-opacity: 0.6;
}
.gi-net__label {
  font-family: -apple-system, sans-serif;
  font-size: 11px;
  pointer-events: none;
  user-select: none;
}

/* ── Edge legend ─────────────────────────────────────────────────────────── */
.gi-net__edge-legend-wrap {
  margin-top: 10px;
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
  min-height: 120px;
}
.gi-net__legend-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}
.gi-net__cmap-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gi-net__cmap-bar {
  width: 90px;
  height: 10px;
  border-radius: 4px;
}
.gi-net__cmap-bound {
  font-size: 11px;
  color: #6b7280;
}
/* Gradient endpoints mirror GI_EDGE_CMAP / CORR_EDGE_CMAP in network.py. */
.gi-net__cmap-bar--gi   { background: linear-gradient(90deg, #4a8263, #fff 50%, #a855b6); }
.gi-net__cmap-bar--corr { background: linear-gradient(90deg, #0026ff, #fff 50%, #f50000); }

.gi-net__edge-key {
  margin-top: 6px;
}
.gi-net__edge-solid {
  display: inline-block;
  width: 20px;
  height: 3px;
  background: #888;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 1px;
}
.gi-net__edge-dashed {
  display: inline-block;
  width: 20px;
  height: 0;
  border-top: 2px dashed #888;
  margin-right: 8px;
  vertical-align: middle;
}

/* ── Hide-inter checkbox ─────────────────────────────────────────────────── */
.gi-net__hide-inter-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-top: 8px;
}
.gi-net__hide-inter-text {
  color: #6b7280;
}

/* ── Hint text ───────────────────────────────────────────────────────────── */
.gi-net__hint {
  margin-top: 16px;
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.5;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
.gi-net__tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  z-index: 10;
  pointer-events: none;
  white-space: pre;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  display: none;
}

/* ── Loading / empty states (lazy fetch) ─────────────────────────────────── */
.gi-net-status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6b7280;
  font-size: 13px;
}

/* ── Narrow screens: stack the panel above the canvas ────────────────────── */
@media (max-width: 720px) {
  .gi-net { flex-direction: column; }
  .gi-net__panel {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    max-height: 40%;
  }
}