/* Sub-Tabs Bar — shared pill-style segment control
 * Used by kitchen modules, settings, and any future sub-module navigation.
 * Height: --sub-tabs-height (default from tokens.css); override per context.
 */

.sub-tabs-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  height: var(--sub-tabs-height);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}

.sub-tabs-bar::-webkit-scrollbar {
  display: none;
}

.sub-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  height: var(--target-base);
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.sub-tab:active {
  transform: scale(0.96);
  transition-duration: 0.06s;
}

.sub-tab--active {
  background-color: color-mix(in srgb, var(--active-module-accent, var(--color-accent)) 14%, transparent);
  color: var(--active-module-accent, var(--color-accent));
}

.sub-tab__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sub-tab__label {
  line-height: 1;
}

/* Vertical divider between tab groups */
.sub-tabs-separator {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  flex-shrink: 0;
  margin: 0 var(--space-1);
}