/* apm_chart_modal_html — the Auto PMRing "items received by date" chart dialog.
 *
 * SCOPED ON THE OVERLAY ID, NEVER ON A ROOT CLASS. pxShowOverlay moves
 * #apm-chart-overlay into #px-modal-portal on every open and pxHideOverlay
 * puts it back on a 300 ms timer, so a :where(.some-root-class) scope would
 * stop matching the moment the dialog opens. The id travels with the node.
 * :where() contributes zero specificity, so .apm-chart-empty and
 * .apm-chart-container stay at (0,1,0).
 *
 * Head-link order: nothing in either repo
 * declares .apm-chart-container or .apm-chart-empty, so neither has a tie to
 * lose by moving ahead of the runtime theme injection. The two .px-modal rules
 * are id-led at (1,1,0) and beat the dependency's own .px-modal from any
 * position.
 *
 * No designer gate. Nothing here is hidden until JavaScript runs, so there is
 * nothing for a gate to reveal. The canvas shows this form OPEN, because
 * .px-modal-overlay is injected from Python at runtime by the dependency and
 * the designer runs no Python.
 */

#apm-chart-overlay {
  --apm-chart-series: #0891b2;
}

[data-theme="dark"] #apm-chart-overlay {
  --apm-chart-series: #0891b2;
}

#apm-chart-overlay .px-modal {
  width: 90%;
  max-width: 800px;
}

:where(#apm-chart-overlay) .apm-chart-empty {
  padding: 40px;
  text-align: center;
  color: var(--px-text-muted);
  font-size: 14px;
  font-family: var(--px-font);
}

/* The chart is
   drawn at a literal height of 400, so this min-height is a floor rather than
   the box a percentage height resolves against; the zero-height dropzone trap
   does not apply here. */
:where(#apm-chart-overlay) .apm-chart-container {
  width: 100%;
  min-height: 400px;
}

@media (max-width: 600px) {
  #apm-chart-overlay .px-modal { width: 95%; }
  #apm-chart-overlay .px-modal-body { padding: 12px; }
}