/* ===== so_outstanding_table_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Every rule here comes
   from the form's old <style> block, in its
   original order, with nothing added, removed or re-ordered apart from the two
   specificity fixes below.

   FIVE RULES ARE NOT HERE. .so-order-id, .so-filter-row th, its dark twin, the
   .so-filter-row input/select pair and the placeholder rule are byte-identical
   in all three Specials Ordering table leaves, so they live once in
   theme/assets/specials_ordering/specials_ordering.css.
   That asset and its head link must be in place for this leaf to look right.

   SCOPE. The root class is .so-outstanding-root, new here: this form's root
   carried only .px-table-wrapper .px-anvil-reset, a shared pair, and scoping on
   .px-table-wrapper would reach every table on the page. There is no root rule:
   the wrapper is not styled here. Every rule below is
   :where(.so-outstanding-root)-scoped, which adds no specificity and so cannot
   change which rule wins among these.

   NO DESIGNER GATE. Nothing in this file hides
   anything, so the canvas shows the same skeleton before and after. */

/* .px-input doubled: the dependency's .px-input is (0,1,0) with width: 100%
   and is injected into <head> at runtime, i.e. after this link. In a body
   <style> these widths won on document order; from a head link they would lose
   the tie and every entry box would stretch to the column. */
:where(.so-outstanding-root) .px-input.so-price-input {
  width: 120px;
}

:where(.so-outstanding-root) .px-input.so-invoice-input,
:where(.so-outstanding-root) .px-input.so-batch-input,
:where(.so-outstanding-root) .px-input.so-pack-input {
  width: 110px;
}

:where(.so-outstanding-root) .so-price-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

:where(.so-outstanding-root) .so-save-btn {
  background: var(--so-success);
  color: #fff;
}

/* .px-btn doubled: dep .px-btn:disabled is (0,2,0) with opacity: 0.5 and
   cursor: not-allowed, the same two properties and the same specificity as
   this rule. Without the extra class the disabled Save button would fade to
   0.5 instead of 0.6. */
:where(.so-outstanding-root) .px-btn.so-save-btn:disabled {
  background: var(--px-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

:where(.so-outstanding-root) .so-save-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--so-success) 85%, black);
}

:where(.so-outstanding-root) .so-cancel-btn {
  background: var(--so-danger);
  color: #fff;
}

:where(.so-outstanding-root) .so-cancel-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--so-danger) 85%, black);
}

:where(.so-outstanding-root) .so-loading {
  text-align: center;
  padding: 28px;
  color: var(--accent);
  font-weight: 600;
}

:where(.so-outstanding-root) .so-awaiting {
  color: var(--px-text-muted);
  font-style: italic;
}

:where(.so-outstanding-root) .so-supplier-select {
  padding: 6px 8px;
  border: 1px solid var(--px-border);
  border-radius: 6px;
  font-size: 0.8rem;
  font-family: 'DM Sans', sans-serif;
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  min-width: 120px;
}