/* ═══════════════════════════════════════════════════════
   Toolbar
   ═══════════════════════════════════════════════════════ */
.toolbar {
  width: var(--toolbar-w);
  min-width: var(--toolbar-w);
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 2px;
  z-index: 60;
}

.tb-btn {
  width: 42px; height: 42px;
  border: none; background: none;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 1.1rem;
  transition: all var(--ease);
  position: relative;
}
.tb-btn:hover { background: var(--hover-subtle); color: var(--text); }
.tb-btn.active { background: var(--blue-dim); color: var(--blue); }
.tb-btn.active::after {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2.5px; height: 55%;
  background: var(--blue);
  border-radius: 0 2px 2px 0;
}

.tb-sep { width: 26px; height: 1px; background: var(--border); margin: 4px 0; }

.tb-btn svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tb-group[data-group="volProfile"] .tb-btn svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }

.tb-btn[data-tip]:hover::before {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: var(--toolbar-active); color: var(--text);
  font-size: .93rem; font-weight: 500;
  padding: 4px 10px; border-radius: var(--radius-sm);
  white-space: nowrap; z-index: 999;
  border: 1px solid var(--border);
  pointer-events: none;
}

/* ── Toolbar Groups (TradingView-style) ── */
.tb-group { position: relative; }

.tb-group-btn { position: relative; }

/* Small expand button at bottom-right of group */
.tb-group-expand {
  position: absolute;
  right: 1px; bottom: 1px;
  width: 14px; height: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  border-radius: 3px;
  transition: background .12s;
}
.tb-group-expand:hover { background: var(--hover-medium); }
.tb-group-expand svg {
  width: 6px; height: 4px;
  fill: currentColor;
  color: var(--text-muted);
  opacity: .6;
}
.tb-group-expand:hover svg { opacity: 1; color: var(--text); }

.tb-group-panel {
  display: none;
  position: absolute;
  left: calc(100% + 4px); top: -4px;
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  padding: 6px;
  min-width: 170px;
  z-index: 100;
  box-shadow: 0 4px 20px var(--overlay-shadow, rgba(0,0,0,.5));
  animation: ddFadeIn .12s ease;
}
.tb-group-panel.visible { display: block; }

.tb-group-title {
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 8px 6px;
}

.tb-group-panel .tb-btn {
  width: 100%;
  height: 34px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 8px;
  border-radius: 6px;
}
.tb-group-panel .tb-btn span {
  font-size: .88rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.tb-group-panel .tb-btn:hover span { color: var(--text-bright); }
.tb-group-panel .tb-btn.active span { color: var(--blue); }

/* Hide tooltip inside group panel (label already visible) */
.tb-group-panel .tb-btn[data-tip]:hover::before { display: none; }
/* Hide left active bar inside panels */
.tb-group-panel .tb-btn.active::after { display: none; }