/* ==========================================================================
   Filter tabs — the product's segmented-control + count-badge pair, ported
   from apps/web (globals.css + components/UiPrimitives.tsx), where it is the
   sanctioned single-select page filter ("stage-tabs grammar"). One copy is
   linked by the shell and by every frame, so row filtering reads the same on
   every module's list screens.

   Tokens resolve from whichever family stylesheet the page loads; the
   fallbacks carry the self-contained frames (vrm / admin / pf), which define
   only part of the token set. The two theme-dependent literals are scoped
   here so those frames render both themes correctly too.
   ========================================================================== */

.segmented-control {
  --seg-active-bg: var(--active-bg, rgba(0,255,255,.14));
  --seg-active-text: var(--active-text, var(--cyan, #00ffff));
  display: inline-flex; align-items: stretch; gap: 2px; padding: 2px;
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: var(--button-radius, var(--radius-md, 8px));
  background: var(--panel-2, rgba(255,255,255,.055));
  max-width: 100%; overflow-x: auto;
}
[data-theme="light"] .segmented-control {
  --seg-active-bg: var(--active-bg, rgba(0,151,167,.10));
  --seg-active-text: var(--active-text, #007a8a);
}
.segmented-control > button {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; gap: var(--space-2, 8px); min-height: 40px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  margin: 0; border: 0;
  border-radius: calc(var(--button-radius, var(--radius-md, 8px)) - 2px);
  background: transparent; color: var(--ink-dim, rgba(238,241,251,.66));
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; box-shadow: none; cursor: pointer;
}
.segmented-control > button:hover { background: var(--seg-active-bg); color: var(--ink, inherit); filter: none; }
.segmented-control > button.active,
.segmented-control > button[aria-pressed="true"] { background: var(--seg-active-bg); color: var(--seg-active-text); }
.segmented-control > button:disabled { opacity: .4; cursor: default; background: transparent; }

.count-badge { display: inline-flex; align-items: center; gap: var(--space-1, 4px); white-space: nowrap; }
.count-badge-value {
  display: inline-flex; min-width: 20px; min-height: 20px; padding: 1px 6px;
  align-items: center; justify-content: center;
  border: 1px solid var(--chip-border, var(--line-2, rgba(255,255,255,.14)));
  border-radius: var(--radius-pill, 999px);
  background: var(--chip-bg, var(--panel-2, rgba(255,255,255,.055)));
  color: var(--chip-ink, var(--ink-mut, rgba(238,241,251,.45)));
  font-size: var(--type-caption, 10.5px); font-weight: var(--type-weight-bold, 700);
}
.segmented-control > button.active .count-badge-value,
.segmented-control > button[aria-pressed="true"] .count-badge-value { color: var(--seg-active-text); border-color: currentColor; }

/* A filter row above a table keeps the table's rhythm: the control sits flush
   left with a consistent gap to the grid below it. */
.segmented-control.filter-tabs { margin: 0 0 12px; }
@media print { .segmented-control.filter-tabs { display: none; } }