/* ============================================================
   VISUALIZATIONS — All algorithm-specific render areas
   Sorting bars, canvas container, Binary Search cells,
   Fibonacci DP cells, Knapsack DP table
   ============================================================ */

/* ── Shared Visualization Area ── */
.viz-area {
  flex:     1;
  overflow: hidden;
  position: relative;   /* containing block for all absolute children */
}

/* Subtle dot-grid background texture */
.viz-area::before {
  content:  '';
  position: absolute;
  inset:    0;
  background-image:
    linear-gradient(var(--bg-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-2) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.4;
  pointer-events: none;
}

/* ── Empty state placeholder ── */
.viz-placeholder {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:      12px;
  color:    var(--text-muted);
  font-size: 12px;
  text-align: center;
  position: absolute;
  inset:    0;
  z-index:  1;
}

.viz-placeholder .big-icon { font-size: 48px; margin-bottom: 8px; }

/* ============================================================
   ALL VIZ PANELS — absolute fill, JS controls display
   ============================================================ */

/* Sorting bars */
#sort-container {
  position:        absolute;
  inset:           0;
  z-index:         1;
  display:         none;   /* JS sets display:flex when active */
  align-items:     flex-end;
  justify-content: center;
  gap:             2px;
  padding:         16px 16px 40px;
}

.sort-bar {
  flex:          1;
  max-width:     40px;
  min-width:     4px;
  border-radius: 3px 3px 0 0;
  transition:    height 0.08s ease;
  background:    var(--accent-blue);
  position:      relative;
}
.sort-bar::after {
  content:   attr(data-val);
  position:  absolute;
  bottom:    -20px;
  left:      50%;
  transform: translateX(-50%);
  font-size: 9px;
  color:     var(--text-muted);
  white-space: nowrap;
}
.sort-bar.comparing { background: var(--accent-yellow); box-shadow: 0 0 12px rgba(210,153,34,.5); }
.sort-bar.swapping  { background: var(--accent-orange); box-shadow: 0 0 12px rgba(247,129,102,.5); }
.sort-bar.sorted    { background: var(--accent-green);  box-shadow: 0 0 8px  rgba(63,185,80,.3); }
.sort-bar.pivot     { background: var(--accent-purple); box-shadow: 0 0 12px rgba(188,140,255,.5); }
.sort-bar.current   { background: var(--accent-cyan);   box-shadow: var(--glow-cyan); }

/* Canvas (graph / tree / phylo / clustering) */
#canvas-container {
  position: absolute;
  inset:    16px;
  z-index:  1;
  display:  none;   /* JS sets display:block when active */
}

/* When tree interactive mode: shrink canvas bottom to make room for ctrl bar */
#canvas-container.has-tree-ctrl { bottom: 80px; }

#viz-canvas {
  display:       block;
  width:         100%;
  height:        100%;
  border-radius: var(--radius);
  border:        1px solid var(--border);
  background:    var(--bg-1);
}

/* k-Means: crosshair cursor to hint that clicking adds points */
body.kmeans-active #viz-canvas { cursor: crosshair; }

/* DOM content: alignment / BS / Fib / Knapsack / MSA */
#other-container {
  position:       absolute;
  inset:          0;
  z-index:        1;
  display:        none;         /* JS sets display:flex when active */
  flex-direction: column;
  overflow:       hidden;       /* child wrappers manage their own scroll */
  padding:        16px;
  box-sizing:     border-box;
}

/* Tree interactive controls strip — always at the bottom, never overlaps canvas */
#tree-ctrl-bar {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  height:      64px;
  z-index:     2;              /* above canvas */
  display:     none;           /* JS sets display:flex when active */
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
  padding:     0 16px;
  background:  var(--bg-1);
  border-top:  1px solid var(--border);
}

/* ── Inner scroll wrapper for DOM-content viz (BS / Fib / Knapsack) ── */
.other-scroll-wrap {
  flex:           1 1 0;
  min-height:     0;
  width:          100%;
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            12px;
}
.bs-array {
  display:         flex;
  gap:             4px;
  flex-wrap:       wrap;
  justify-content: center;
}

.bs-cell {
  width:           44px;
  height:          44px;
  border:          2px solid var(--border);
  border-radius:   var(--radius);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  font-size:       14px;
  transition:      all 0.2s;
  background:      var(--bg-2);
  position:        relative;
}

.bs-cell.left       { border-color: var(--accent-green); }
.bs-cell.right      { border-color: var(--accent-orange); }
.bs-cell.mid        { background: var(--accent-cyan);  color: #000; box-shadow: var(--glow-cyan); }
.bs-cell.found      { background: var(--accent-green); color: #000; box-shadow: var(--glow-green); }
.bs-cell.eliminated { opacity: 0.25; }

/* ============================================================
   FIBONACCI DP
   ============================================================ */
.fib-cells {
  display:         flex;
  gap:             3px;
  flex-wrap:       wrap;
  justify-content: center;
}

.fib-cell {
  min-width:     40px;
  padding:       6px 8px;
  border:        2px solid var(--border);
  border-radius: var(--radius);
  text-align:    center;
  font-size:     12px;
  transition:    all 0.2s;
  background:    var(--bg-2);
}

.fib-cell.active   { background: var(--accent-cyan);  color: #000; border-color: var(--accent-cyan);  box-shadow: var(--glow-cyan); }
.fib-cell.computed { background: var(--bg-3);          border-color: var(--accent-green); color: var(--accent-green); }

.fib-label { font-size: 10px; color: var(--text-muted); }
.fib-value { font-weight: 700; font-size: 14px; }

/* ============================================================
   0/1 KNAPSACK DP TABLE
   ============================================================ */
.knapsack-table-wrap {
  overflow:   auto;
  max-height: 60%;
}

.dp-table {
  border-collapse: collapse;
  font-size:       11px;
}

.dp-table th,
.dp-table td {
  border:     1px solid var(--border);
  padding:    4px 8px;
  text-align: center;
  min-width:  36px;
}

.dp-table th             { background: var(--bg-3); color: var(--text-secondary); font-weight: 700; }
.dp-table td             { background: var(--bg-2); }
.dp-table td.active-cell   { background: var(--accent-cyan);  color: #000; font-weight: 700; }
.dp-table td.computed-cell { background: rgba(63, 185, 80, 0.15); color: var(--accent-green); }

/* ============================================================
   USE CASE CHIPS
   ============================================================ */
.use-cases { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.use-case-chip {
  font-size:     10px;
  padding:       2px 8px;
  border-radius: 12px;
  background:    var(--bg-3);
  border:        1px solid var(--border);
  color:         var(--text-secondary);
}

/* ============================================================
   SEQUENCE ALIGNMENT
   ============================================================ */
.align-wrap {
  flex:           1 1 0;
  min-height:     0;
  width:          100%;         /* fill container horizontally */
  display:        flex;
  flex-direction: column;
  gap:            8px;
  overflow:       hidden;
}

.align-title {
  font-size:     13px;
  font-weight:   700;
  color:         var(--accent-cyan);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.align-subtitle {
  font-size: 11px;
  color:     var(--text-muted);
}

.align-table-wrap {
  /* Fill the space left inside .align-wrap after title+subtitle rows.
     flex:1 + min-height:0 is the correct pattern for a scrollable flex child. */
  flex:       1 1 0;
  min-height: 0;
  overflow:   auto;
}

.align-matrix {
  border-collapse: collapse;
  font-size:       14px;
  font-family:     var(--font-mono);
}

.align-matrix.compact { font-size: 11px; }

.align-matrix th,
.align-matrix td {
  border:     1px solid var(--border);
  padding:    7px 12px;
  text-align: center;
  min-width:  44px;
  transition: background 0.15s, color 0.15s;
}

.align-matrix th           { background: var(--bg-3); color: var(--text-secondary); font-weight: 700; }
.align-matrix th.seq-header { background: var(--bg-4); color: var(--accent-blue); }

/* Cell states */
.dp-cell           { background: var(--bg-2); color: var(--text-secondary); }
.dp-cell.dp-border { background: var(--bg-3); color: var(--accent-blue); font-weight: 600; }
.dp-cell.dp-filled { background: rgba(88,166,255,0.08); color: var(--text-primary); }
.dp-cell.dp-active { background: var(--accent-cyan); color: #000; font-weight: 700; box-shadow: var(--glow-cyan); }
.dp-cell.dp-active-match { background: var(--accent-green); color: #000; font-weight: 700; box-shadow: var(--glow-green); }
.dp-cell.dp-path   { background: rgba(188,140,255,0.35); color: #fff; font-weight: 700; border-color: var(--accent-purple); }
.dp-cell.dp-max    { background: var(--accent-orange); color: #000; font-weight: 700; }

/* Affine gap layout */
.affine-grids {
  display:     flex;
  gap:         8px;
  overflow-x:  auto;
}

.affine-col {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  padding:        6px;
  transition:     border-color 0.2s;
}

.affine-col.affine-active { border-color: var(--accent-cyan); box-shadow: 0 0 8px rgba(57,208,216,0.2); }

.affine-label {
  font-size:   11px;
  font-weight: 700;
  text-align:  center;
  padding:     2px;
}
.affine-label-m  { color: var(--accent-green); }
.affine-label-ix { color: var(--accent-blue); }
.affine-label-iy { color: var(--accent-orange); }

.affine-table-wrap { overflow: auto; }

/* Alignment result */
.align-result-area {
  flex:       0 0 auto;
  overflow-y: auto;
}

.align-result {
  background:    var(--bg-3);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       12px;
}

.align-result-title {
  font-size:   12px;
  font-weight: 700;
  color:       var(--accent-green);
  margin-bottom: 4px;
}

.align-stats {
  font-size:     11px;
  color:         var(--text-muted);
  margin-bottom: 8px;
}

.align-seqs {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  font-family:    var(--font-mono);
  font-size:      13px;
}

.align-seq-row {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.seq-label {
  width:      36px;
  font-size:  10px;
  color:      var(--text-muted);
  flex-shrink: 0;
}

.seq-bases, .seq-match {
  display:   flex;
  flex-wrap: wrap;
  gap:       1px;
  letter-spacing: 1px;
}

.seq-match { color: var(--text-muted); font-size: 13px; white-space: pre; }

.aln-base {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          20px;
  border-radius:   3px;
  font-weight:     700;
  font-size:       12px;
}

.aln-match    { background: rgba(63,185,80,0.25);   color: var(--accent-green);  border: 1px solid rgba(63,185,80,0.4); }
.aln-mismatch { background: rgba(247,129,102,0.2);  color: var(--accent-orange); border: 1px solid rgba(247,129,102,0.3); }
.aln-gap      { background: rgba(139,148,158,0.15); color: var(--text-muted);    border: 1px solid var(--border); }

.align-legend {
  margin-top: 8px;
  font-size:  10px;
  color:      var(--text-muted);
}

/* MSA */
.msa-phase {
  font-size:   11px;
  font-weight: 700;
  color:       var(--accent-yellow);
  padding:     4px 8px;
  background:  rgba(210,153,34,0.1);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent-yellow);
}

.msa-tree { display: flex; flex-direction: column; gap: 4px; }
.msa-tree-edge {
  font-size:     11px;
  color:         var(--text-secondary);
  padding:       2px 4px;
  font-family:   var(--font-mono);
}
.msa-tree-edge.msa-edge-active {
  color:          var(--accent-cyan);
  background:     rgba(57,208,216,0.1);
  border-radius:  3px;
}

/* ============================================================
   DATABASE SEARCH — BLAST / FASTA
   ============================================================ */
.db-search-wrap {
  width:          100%;
  height:         100%;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  overflow-y:     auto;
  padding:        4px;
}

.db-query-bar {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}

.db-section-title {
  font-size:   11px;
  font-weight: 700;
  color:       var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.db-word-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}

.db-word {
  font-size:     11px;
  font-family:   var(--font-mono);
  padding:       2px 6px;
  background:    rgba(88,166,255,0.15);
  border:        1px solid rgba(88,166,255,0.3);
  border-radius: 3px;
  color:         var(--accent-blue);
}

.db-seq-row {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  padding:     4px 0;
  border-bottom: 1px solid var(--border);
}

.db-seq-label {
  width:       60px;
  flex-shrink: 0;
  font-size:   10px;
  color:       var(--text-muted);
  font-family: var(--font-mono);
}

.db-seq-bases {
  display:   flex;
  gap:       2px;
  flex-wrap: wrap;
}

.db-base {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          20px;
  border-radius:   3px;
  font-size:       11px;
  font-weight:     700;
  font-family:     var(--font-mono);
  background:      var(--bg-3);
  color:           var(--text-secondary);
  border:          1px solid transparent;
  transition:      all 0.15s;
}

.db-base.seed-hit  { background: rgba(57,208,216,0.25); color: var(--accent-cyan);   border-color: var(--accent-cyan); }
.db-base.extended  { background: rgba(188,140,255,0.25); color: var(--accent-purple); border-color: var(--accent-purple); }
.db-base.query-hit { background: rgba(63,185,80,0.25);  color: var(--accent-green);  border-color: var(--accent-green); }

.db-hsp-list { display: flex; flex-direction: column; gap: 6px; }

.db-hsp {
  background:    var(--bg-3);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       8px;
  font-size:     11px;
}

.db-hsp.best-hsp { border-color: var(--accent-green); background: rgba(63,185,80,0.08); }

.db-hsp-score { font-weight: 700; color: var(--accent-green); }
.db-hsp-evalue { color: var(--accent-yellow); margin-left: 8px; }

/* ============================================================
   RED-BLACK TREE CONTROLS
   ============================================================ */
.rb-controls {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
  padding:     8px 16px;
  background:  var(--bg-3);
  border-bottom: 1px solid var(--border);
}

.rb-legend {
  display:     flex;
  gap:         12px;
  font-size:   10px;
  color:       var(--text-muted);
  margin-left: auto;
}

.rb-dot {
  display:       inline-block;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  margin-right:  3px;
  vertical-align: middle;
}

.rb-dot.red   { background: #e5534b; box-shadow: 0 0 6px rgba(229,83,75,0.5); }
.rb-dot.black { background: #3c4149; border: 1px solid #666; }