/* ===== nms_filters_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. The form's rules live here because
   Anvil's server strips a rule block out of an HTML template.

   RF-AD-042: no private .nms-filters-bar, .nms-filter-label or .nms-filter-input copies.
   The bar, its labels and its boxes use the shared .px-filter-bar, .px-filter-label and
   .px-input rules, so a change to the app's filter bars only has to be made in one place.
   Those rules live in two places, and it matters which: .px-filter-bar and .px-filter-label are
   declared by this app in theme/assets/theme.css, while .px-input is declared by the shared PX theme
   every app loads at start-up (px_theme in the shared dependency), so the text boxes are painted
   once, estate-wide.
   The .nms-filters-bar name stays on the bar element: it is the form root the module is handed and
   the name this file scopes on.
   The two rules below state this bar's own layout on top of the shared bar: it lines its groups
   up along the bottom and carries no bottom margin, and the boxes keep their 140px minimum width.
   The boxes themselves follow the shared theme, including their size and their focus ring.
   The ring takes this screen's
   colour: the shared rule falls back to a different colour only when --accent is missing, and
   .nms-shell always sets --accent (#0d9488) and --accent-rgb (13, 148, 136).
   .px-filter-group is deliberately NOT adopted — it puts the label beside the box, whereas this bar
   stacks the label above it.

   TWO SPECIFICITY DECISIONS, both forced by this file being a head link:

   1. The bar rule is written .px-filter-bar.nms-filters-bar, not .nms-filters-bar. theme.css declares
      .px-filter-bar { align-items: center; margin-bottom: 1.5rem } at the same (0,1,0). A tie on
      specificity is decided by document order, and this file is a head link, which loses that tie to
      theme.css. The element already carries both classes, so the
      doubled selector buys the point back on specificity instead of on order. Same in the narrow
      media query, for the same reason. Miss it and the groups re-centre and a 1.5rem bottom margin
      comes back, with nothing failing.
   2. .nms-filters-bar .px-input keeps its bare (0,2,0) and is NOT wrapped in :where(). .px-input
      ships from the dependency's runtime ensure_theme_injected(), i.e. a style element that sorts
      after every head link, so this rule can only beat it on specificity. :where() would drop it to
      (0,1,0) and the boxes would lose their 140px floor.

   Every other rule is scoped :where(.nms-filters-bar), which adds no specificity and so cannot change
   which rule wins. The root rule stays a bare class pair so it outranks the scoped descendants. */

.px-filter-bar.nms-filters-bar {
  align-items: flex-end;
  margin-bottom: 0;
}

.nms-filters-bar .px-input {
  min-width: 140px;
}

:where(.nms-filters-bar) .nms-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

:where(.nms-filters-bar) .nms-view-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
}

:where(.nms-filters-bar) .nms-view-btn {
  font-family: var(--px-font);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: calc(var(--px-radius-sm) - 2px);
  cursor: pointer;
  background: transparent;
  color: var(--px-text-muted);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

:where(.nms-filters-bar) .nms-view-btn.active {
  background: var(--px-bg-card);
  color: color-mix(in srgb, var(--accent, #0d9488) 70%, var(--px-text-primary));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

:where(.nms-filters-bar) .nms-view-btn:hover:not(.active) {
  color: var(--px-text-primary);
}

:where(.nms-filters-bar) .nms-view-btn:focus-visible {
  outline: 2px solid var(--accent, #0d9488);
  outline-offset: 1px;
}

:where(.nms-filters-bar) .nms-filter-sep {
  width: 1px;
  height: 36px;
  background: var(--px-border);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .px-filter-bar.nms-filters-bar {
    flex-direction: column;
    align-items: stretch;
  }
  :where(.nms-filters-bar) .nms-filter-sep {
    display: none;
  }
}