/* ============================================================
   COMPONENTS — Reusable UI elements
   Buttons, Controls Bar, Stats Bar, Legend, Graph Input Bar,
   Sidebar Algorithm Buttons, Theme Toggle, Speed Slider
   ============================================================ */

/* ── Algo buttons (sidebar) ── */
.algo-btn {
  display:     flex;
  align-items: center;
  gap:         8px;
  width:       100%;
  padding:     7px 16px;
  background:  none;
  border:      none;
  color:       var(--text-secondary);
  font-family: var(--font-mono);
  font-size:   12px;
  cursor:      pointer;
  transition:  all var(--transition);
  text-align:  left;
}

.algo-btn:hover {
  background: var(--bg-2);
  color:      var(--text-primary);
}

.algo-btn.active {
  background:   rgba(57, 208, 216, 0.1);
  color:        var(--accent-cyan);
  border-right: 2px solid var(--accent-cyan);
}

/* Complexity tag inside algo-btn */
.algo-btn .tag {
  font-size:      9px;
  padding:        1px 5px;
  border-radius:  3px;
  background:     var(--bg-3);
  color:          var(--text-muted);
  font-weight:    700;
  letter-spacing: 0.5px;
  margin-left:    auto;
  white-space:    nowrap;
}

.algo-btn.active .tag {
  background: rgba(57, 208, 216, 0.2);
  color:      var(--accent-cyan);
}

/* ── Generic Button ── */
.btn {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  padding:     6px 12px;
  border-radius: var(--radius);
  border:      1px solid var(--border);
  background:  var(--bg-2);
  color:       var(--text-secondary);
  font-family: var(--font-mono);
  font-size:   11px;
  cursor:      pointer;
  transition:  all var(--transition);
  font-weight: 400;
}

.btn:hover {
  background:   var(--bg-3);
  color:        var(--text-primary);
  border-color: var(--text-muted);
}

.btn:disabled { opacity: 0.4; cursor: default; }

/* Variants */
.btn-primary {
  background:   var(--accent-cyan);
  color:        #000;
  border-color: var(--accent-cyan);
  font-weight:  700;
}
.btn-primary:hover { filter: brightness(1.1); color: #000; }

.btn-danger {
  background:   var(--accent-orange);
  color:        #000;
  border-color: var(--accent-orange);
  font-weight:  700;
}
.btn-danger:hover { filter: brightness(1.1); }

.btn-icon { padding: 6px 8px; font-size: 14px; }

/* ── Theme Toggle ── */
.theme-toggle {
  background:    var(--bg-2);
  border:        1px solid var(--border);
  border-radius: 20px;
  padding:       4px 8px;
  cursor:        pointer;
  font-size:     14px;
  color:         var(--text-secondary);
  transition:    all var(--transition);
}

.theme-toggle:hover {
  color:        var(--text-primary);
  border-color: var(--text-muted);
}

/* ── Controls Bar ── */
.controls-bar {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     10px 16px;
  background:  var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap:   wrap;
}

.controls-bar .algo-title {
  font-family:    var(--font-display);
  font-size:      22px;
  letter-spacing: 1px;
  color:          var(--text-primary);
}

.controls-bar .complexity-badge {
  font-size:     11px;
  padding:       2px 8px;
  border-radius: 20px;
  background:    var(--bg-3);
  color:         var(--text-secondary);
  border:        1px solid var(--border);
}

.controls-right {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-left: auto;
}

/* ── Speed Slider ── */
.speed-control {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   11px;
  color:       var(--text-muted);
}

.speed-control input[type="range"] {
  -webkit-appearance: none;
  width:         80px;
  height:        4px;
  background:    var(--bg-3);
  border-radius: 2px;
  outline:       none;
}

.speed-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--accent-cyan);
  cursor:        pointer;
}

/* ── Stats Bar ── */
.stats-bar {
  display:     flex;
  gap:         16px;
  padding:     6px 16px;
  background:  var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.stat-item {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   11px;
}

.stat-label { color: var(--text-muted); }
.stat-value { color: var(--accent-cyan); font-weight: 700; }

/* ── Legend Bar ── */
.legend {
  display:     flex;
  gap:         12px;
  flex-wrap:   wrap;
  padding:     6px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.legend-item {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   10px;
  color:       var(--text-muted);
}

.legend-dot {
  width:         10px;
  height:        10px;
  border-radius: 2px;
}

/* ── Current Step Display ── */
.current-step-display {
  padding:     10px 16px;
  background:  rgba(57, 208, 216, 0.08);
  border-top:  1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size:   11px;
  color:       var(--accent-cyan);
  min-height:  36px;
  flex-shrink: 0;
}

/* ── Graph Input Bar ── */
.graph-input-bar {
  display:     flex;
  gap:         8px;
  padding:     8px 16px;
  background:  var(--bg-1);
  border-bottom: 1px solid var(--border);
  align-items: center;
  flex-shrink: 0;
  flex-wrap:   wrap;
}

.node-select {
  padding:       4px 8px;
  background:    var(--bg-2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text-primary);
  font-family:   var(--font-mono);
  font-size:     12px;
  outline:       none;
}