/* Shell -Sub-nav widgets (.shell-subnav-* family)
 *
 * In-page navigation patterns. Live INSIDE any shell (typically
 * under shell-topbar in shell-app, or under shell-focused-topbar
 * in shell-focused).
 *
 *   .shell-subnav-tabs   Segmented status tabs with optional
 *                        counts. Mutually-exclusive views of the
 *                        same data (e.g. KDS pending/in-prep/ready).
 *
 *   .shell-subnav-chips  Horizontal scrolling chip rail. Jumps
 *                        between sibling pages or non-exclusive
 *                        filters (e.g. POS audit reports).
 *
 * Spec: docs/strategy/design-system/32-shell-system.md §4
 * Wireframe: wireframes/shell_mobile/_atlas.html §6
 *
 * Mobile-first. All values via tokens.css. Items inside chip rails
 * reuse the .chip component (11-chip.css) -this file only owns
 * the container layout, not chip atoms.
 */

/* ────────────────────────────────────────────────────────────────
   Subnav tabs -segmented strip with counts
   ──────────────────────────────────────────────────────────────── */
.shell-subnav-tabs {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.shell-subnav-tabs::-webkit-scrollbar {
  display: none;
}

.shell-subnav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-3);
  font-family: var(--font);
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.shell-subnav-tab:hover {
  color: var(--text);
}

.shell-subnav-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
}

/* Count chip inside a tab (e.g. "Pending 7"). */
.shell-subnav-tab-count {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: var(--font-size-nano);
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

.shell-subnav-tab.is-active .shell-subnav-tab-count {
  background: var(--primary-light);
  color: var(--primary);
}

/* Equal-width modifier -when tabs should fill the row (no scroll). */
.shell-subnav-tabs.is-equal .shell-subnav-tab {
  flex: 1;
  justify-content: center;
}

/* ────────────────────────────────────────────────────────────────
   Subnav chips -horizontal scrolling chip rail
   ──────────────────────────────────────────────────────────────── */
/*
 * Container only. Items inside use the existing .chip component
 * (and .chip.primary for the active variant). Do not redeclare
 * chip visuals here.
 */
.shell-subnav-chips {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.shell-subnav-chips::-webkit-scrollbar {
  display: none;
}

.shell-subnav-chips > .chip {
  white-space: nowrap;
  flex-shrink: 0;
}