/* ===== sp_breakdown_tables_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what styles the
   designer canvas.

   Scoping, per the section's rule: the root rule is a bare class, every selector that already
   names this form's root or the shell's stays bare, and everything else is wrapped
   :where(.sp-breakdown), which adds zero specificity and so cannot change which rule wins.

   Three rules stay bare on purpose:

   .sp-breakdown is the root and must outrank the scoped rules under it.

   .sp-breakdown > * is (0,1,0) as written. Wrapped as :where(.sp-breakdown) > * it becomes a
   zero-specificity universal selector, which this app's CSS rules forbid outright, and the
   width floor under both profit tables would lose to anything at all.

   .sp-dashboard .sp-unlinked-supplier-row td already names the shell root and is (0,3,1),
   which is what beats theme.css's .px-table td { color: var(--px-text-primary) } at (0,1,1).
   Moving to a head link loses every tie decided by document order, so that margin matters.

   .sp-breakdown and .sp-breakdown-stack are two rules, here and in the 900px block, because
   the root rule is a bare class on its own line and the stack's is not.
   Same declarations on both, so edit the pair together.

   No designer gate: nothing in this form is hidden until JavaScript runs. Both tables and the
   possibly-missed list render as empty <tbody> mount points under real headers, which is what
   the canvas should show. No @keyframes, no url(), no @font-face. */

/* BOTH PROFIT TABLES TAKE THE FULL WIDTH OF THE PAGE, at every size.
   They carried nine and eight columns side by side in half a page
   each, which is a horizontal scrollbar inside a card on every
   desktop there is — the fault the owner reported. Stacked, each one
   has the whole content column to spend, and on a normal monitor
   every column fits with room to spare. The stack keeps the
   possibly-missed list under the supplier table, where it belongs. */
.sp-breakdown {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

:where(.sp-breakdown) .sp-breakdown-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sp-breakdown > * { width: 100%; min-width: 0; }
:where(.sp-breakdown) .sp-unlinked-supplier-row { background: var(--px-bg-elevated); }
.sp-dashboard .sp-unlinked-supplier-row td {
  color: var(--px-text-muted);
}

/* Every breakdown column stays visible. The shell turns each row into
   a card before the full-width table stops fitting. */
@media (max-width: 900px) {
  .sp-breakdown { gap: 1rem; }
  :where(.sp-breakdown) .sp-breakdown-stack { gap: 1rem; }
}