/* list toolbar
   The sticky toolbar every filterable list gets.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

/* ---------------- sticky list toolbar ---------------- */

/* Every list that can be filtered gets the same bar, in the same place, doing
   the same thing — the audit trail proved the pattern, so it shouldn't be a
   one-off. Controls stay with you as the list scrolls under them. */
.list-bar {
  position: sticky;
  /* Where the chrome above this ends. Zero in the back office, where the
     chrome is a sidebar; the shop sets it to its own sticky header's height.
     A VARIABLE and not an override, because this file loads at 17 and the
     shop's at 07 — the number prefix IS the cascade, so an override there
     loses to this rule no matter how it is written. */
  top: var(--sticky-top, 0);
  z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 10px 0 12px;
  margin-bottom: 4px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
}
/* The page title scrolls away; the controls don't. */
.page-head:has(+ .list-bar), .page-head:has(+ * + * + .list-bar) { padding-bottom: 4px; }

.list-bar .filter-tabs { margin: 0; }
.list-bar .head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

@media (max-width: 720px) {
  .list-bar { gap: 10px; padding: 8px 0 10px; }
  .list-bar .head-actions { width: 100%; }
}

/* Lifecycle on one side, stations on the other: they answer different
   questions and shouldn't read as one list. */
.tab-divider {
  display: inline-block; width: 1px; height: 16px;
  background: var(--line-2); margin: 0 4px; vertical-align: middle;
}

/* A filter the tabs cannot show, said out loud above the list. A list narrowed
   to one customer used to look exactly like the whole list. */
.filter-chip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 7px 12px;
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 13px; color: var(--ink-2);
}
.filter-chip a { font-size: 12.5px; }