/* Shared by the three Specials Ordering table leaves. Each leaf's own asset
   holds only what is that leaf's alone. Scoped on the three private root
   classes, so nothing here reaches another screen's table. Inert until a leaf
   converts and its root grows the class. */
:where(.so-outstanding-root, .so-endorse-root, .so-history-root) .so-order-id {
  word-break: break-all;
  font-size: 0.75rem;
  font-family: monospace;
  max-width: 130px;
}

/* .px-table doubled deliberately: theme.css .px-table th is (0,1,1) with
   padding + background: inherit, and thead is a gradient. In a body <style>
   this rule won on document order; from a head link it would lose the tie and
   the filter row would paint with the header gradient. */
:where(.so-outstanding-root, .so-endorse-root, .so-history-root) .px-table .so-filter-row th {
  padding: 4px 6px;
  background: var(--px-bg-surface, #f9fafb);
}

/* [data-theme="dark"] is on <html>, an ancestor of the root, so the scope goes
   in the middle, never in front. That also keeps this rule one class heavier
   than the light one, as it is today. */
[data-theme="dark"] :where(.so-outstanding-root, .so-endorse-root, .so-history-root) .px-table .so-filter-row th {
  background: var(--px-bg-elevated, #1e293b);
}

:where(.so-outstanding-root, .so-endorse-root, .so-history-root) .so-filter-row input,
:where(.so-outstanding-root, .so-endorse-root, .so-history-root) .so-filter-row select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--px-border);
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'DM Sans', sans-serif;
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  box-sizing: border-box;
}

:where(.so-outstanding-root, .so-endorse-root, .so-history-root) .so-filter-row input::placeholder {
  color: var(--px-text-muted);
  opacity: 0.7;
}