/* Planner Mode Content Tabs - Segmented Control */

.planner-tabs {
  display: flex;
  gap: 2px;
  background: var(--page-bg);
  border-radius: var(--radius);
  padding: 0.125rem;
  margin-bottom: var(--sp-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border: 1px solid var(--border-subtle);
}

.planner-tabs::-webkit-scrollbar {
  display: none;
}

.planner-tab {
  padding: var(--sp-1) 0.625rem;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  border: none;
  border-radius: 0.125rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-base);
}

.planner-tab:hover {
  color: var(--text-main);
  background: var(--border-subtle);
}

.planner-tab.active {
  background: var(--surface-card);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* Hide tab bar in AI mode */
main.ai-mode .planner-tabs {
  display: none;
}

/* Dark mode */
[data-theme="dark"] .planner-tabs {
  background: var(--surface-card);
}

[data-theme="dark"] .planner-tab.active {
  background: var(--page-bg);
}

/* Responsive */
@media (max-width: 768px) {
  .planner-tabs {
    margin-bottom: var(--sp-4);
  }

  .planner-tab {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-xs);
  }
}