/* ===== na_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 .na-filters-bar / .na-filter-label / .na-filter-input copies. The bar
   and labels use the shared .px-filter-bar / .px-filter-label rules in theme/assets/theme.css.
   The inputs use .px-input, which is declared by the DEPENDENCY (px_theme/_px_theme_css.py) —
   theme/assets/theme.css does not spell .px-input at all, so do not look for it there. Corners
   follow --px-radius, the input font follows --px-font and the label font follows --px-mono. The
   narrow overrides below are local; the input's own sizing and focus ring are whatever the dep
   rule says.
   .px-filter-group is deliberately NOT adopted — it puts the label beside the input, whereas this
   bar stacks the label above it.

   THE SPECIFICITY DECISION THIS FILE TURNS ON, forced by this file being a head link. The
   dependency injects .px-input { font-size: 13px; ...; width: 100% } into <head> at
   RUNTIME (px_theme.py's ensure_theme_injected), i.e. after every static link in this document, so a
   rule here can only beat it on SPECIFICITY — document order is lost for good. Every selector that
   names #na-filters-bar therefore stays BARE:

     #na-filters-bar                 (1,0,0) beats theme.css's .px-filter-bar (0,1,0) on weight, so
                                     the bar's own layout does not depend on which sheet came last.
     #na-filters-bar .px-input       (1,1,0) beats the dependency's (0,1,0). Wrapping the id in
                                     :where() would drop this to (0,1,0), tie, and lose the tie on
                                     order — every box on the bar would drop from 0.85rem (13.6px)
                                     to 13px with nothing failing. Same call as
                                     theme/assets/nms/nms_filters_html.css.

   The bar rule is NOT written .px-filter-bar.na-filters-bar: .na-filters-bar may not be declared
   as a CSS selector (RF-AD-042). The id is both stronger and permitted.

   The rules that do not name the bar today get :where(#na-filters-bar) in front. :where() adds zero
   specificity, so each one keeps exactly the weight it has today, and it stops these very general
   private names reaching any other screen now that this sheet is app-wide. */

#na-filters-bar {
  align-items: flex-end;
  gap: 1rem;
  padding: 1.25rem;
  margin-bottom: 0;
}

#na-filters-bar .px-filter-label {
  font-size: 0.65rem;
}

#na-filters-bar .px-input {
  font-size: 0.85rem;
  width: 100%;
}

:where(#na-filters-bar) .na-filters-title {
  width: 100%;
  font-family: var(--px-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--px-text-primary);
  margin: 0 0 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:where(#na-filters-bar) .na-filters-title::before {
  content: '';
  width: 3px;
  height: 18px;
  background: var(--accent, #7c3aed);
  border-radius: 2px;
}

:where(#na-filters-bar) .na-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 140px;
}

:where(#na-filters-bar) .na-filter-group.na-date-group {
  min-width: 160px;
}

#na-filters-bar .px-input[type="number"] {
  width: 110px;
}

:where(#na-filters-bar) .na-filter-sep {
  width: 100%;
  height: 1px;
  background: var(--px-border);
  margin: 0.25rem 0;
}

:where(#na-filters-bar) .na-rates-label {
  width: 100%;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--px-text-muted);
}

:where(#na-filters-bar) .na-rates-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
}

/* The violet card and the slate input share a dark tone, so the edge carries 3:1 against the card. */
[data-theme="dark"] #na-filters-bar .px-input:not(:focus):not(:disabled) {
  border-color: rgba(var(--accent-rgb), 0.55);
}

@media (max-width: 768px) {
  #na-filters-bar {
    flex-direction: column;
    align-items: stretch;
  }
  #na-filters-bar .px-input[type="number"] {
    width: 100%;
  }
}