/* ═══════════════════════════════════════════════════════════════════════
   tab.css — Tab component (extends core.css .tabs)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Vertical tabs (for query builder side panels) ── */
.tabs-vertical {
  display: flex;
  gap: 0;
}
.tabs-vertical .tabs-list {
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  min-width: 140px;
  border-right: 1px solid var(--border);
}
.tabs-vertical .tab {
  border-radius: 0;
  padding: 10px 16px;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.tabs-vertical .tab:last-child { border-bottom: none; }
.tabs-vertical .tab.is-active {
  background: var(--bg-2);
  border: none;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  font-weight: 600;
}
.tabs-vertical .tab-panels { flex: 1; }

/* ── Tab panel animation ── */
.tab-panel {
  display: none;
  animation: tab-enter 250ms ease-out;
}
.tab-panel.is-active { display: block; }
@keyframes tab-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}