/* ===== dc_undo_selection_html (HTML form, scoped) =====
   The I-002 split-undo selection dialog, opened by px_form_alert from
   dispatch_confirmation_html/dc_historical_html/__init__.py.

   Loaded eagerly from anvil.yaml native_deps.head_html. Every rule here comes
   from the form's old <style> block; one rule is added (.dcUndoSel-hidden, the
   class that replaces the warning banner's inline style="display:none;"), two
   !important flags are added on the root rule (D10, below) and nothing is
   dropped.

   SCOPE. Every rule is :where(.dcUndoSel-root), which adds zero specificity and
   so cannot change which rule wins. The root rule stays BARE and keeps every
   declaration it had, two of them now marked !important (see THE ROOT IS THE
   ONE REAL COLLISION below): this app does NOT apply the guide's screen-root
   rule, and this form is a dialog body rather than a screen in
   any case. Its three --accent custom properties are what give the dialog's
   px-btn-primary / px-btn-tonal buttons their amber look, so they stay on the
   root element the dependency's .px-btn-* rules read them from.

   ORDER AUDIT. A head link loses an order tie to the theme the dependency injects at
   startup, so every rule below was checked for a same-element collision:

     .dcUndoSel-section-actions button   (0,1,1) beats .px-btn (0,1,0) on
       specificity, not order. .px-btn-text is
       declared nowhere in either repo - it is an inert marker class on those
       four buttons and is kept so the markup is unchanged.
     every other rule names only a .dcUndoSel-* class, and no element in this
       template carries both a .dcUndoSel-* class and a px-* class except the
       four buttons above.

   THE ROOT IS THE ONE REAL COLLISION, and it is why padding and max-width
   below carry !important. theme.css declares
   `.px-anvil-reset .anvil-component { padding: 0 !important; margin: 0
   !important; max-width: 100% !important; border: none !important }` and
   theme.css adds `.px-anvil-reset .anvil-container { width: 100%
   !important; max-width: 100% !important }`. px_form_alert appends
   get_dom_node(form) straight into `.px-modal-body.px-anvil-reset`
   (px-shared-dependencies-anvil/client_code/px_theme/_px_shared_js.py,
   2612), so that reset is always an ancestor of this dialog, and this call
   site passes large=True (dc_historical_html/__init__.py), so the sheet
   around it is 93vw.
     BEFORE conversion the reset landed on the Anvil wrapper
   (.anvil-html-templated-panel and .anvil-component on one element,
   theme.css), which declared neither property, so it was inert and
   .dcUndoSel-root kept its 16px padding and 760px cap from the inner div.
     AFTER conversion the wrapper is gone and .dcUndoSel-root IS the component
   node (guide: an HTML form's root is its outer block itself). Whether the
   v3 runtime tags an adopted root with `anvil-component` / `anvil-container`
   is NOT determinable from source and is OPEN app-wide. If it does tag it, two
   !important declarations beat this bare (0,1,0) root rule and the dialog
   opens edge-to-edge at 93vw with no padding, silently.
     !important here is the fix for the tagged case,
   and it is geometry-neutral in the untagged case: nothing else in either repo
   declares padding or max-width on .dcUndoSel-root, so the computed values are
   16px and 760px either way. margin
   and border are not declared on this root at all, so the reset's other two
   declarations take nothing away, and the width: 100% of the second block is
   what a block-level flex container already computes under a 760px cap.

   NO DESIGNER GATE. The one hidden block is the warning banner, hidden by the
   .dcUndoSel-hidden state class in this head-linked asset. The designer canvas
   loads this asset, so the canvas shows what first paint shows (guide step 4).
   There is no live class anywhere in this section to gate on.

   No @keyframes, no url(), no @font-face, no html rule and no :root block.
   .themed-scrollbar is not on this form and is not declared here. */

.dcUndoSel-root {
  --accent: #fbbf24;
  --accent-hover: #f59e0b;
  --accent-subtle: rgba(251,191,36,0.12);
  font-family: var(--px-font);
  color: var(--px-text-primary);
  background: var(--px-bg-card);
  padding: 16px !important;
  min-width: 560px;
  max-width: 760px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
:where(.dcUndoSel-root) .dcUndoSel-intro {
  font-size: 13px;
  color: var(--px-text-secondary);
}
:where(.dcUndoSel-root) .dcUndoSel-section {
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: 8px;
  overflow: hidden;
}
:where(.dcUndoSel-root) .dcUndoSel-section-title {
  font-weight: 600;
  padding: 10px 12px;
  background: var(--accent-subtle);
  border-bottom: 1px solid var(--px-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
:where(.dcUndoSel-root) .dcUndoSel-section-title .dcUndoSel-section-actions {
  display: flex;
  gap: 8px;
}
:where(.dcUndoSel-root) .dcUndoSel-section-actions button {
  font-size: 11px;
  padding: 2px 8px;
}
:where(.dcUndoSel-root) .dcUndoSel-list {
  max-height: 220px;
  overflow-y: auto;
}
:where(.dcUndoSel-root) .dcUndoSel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--px-border-subtle);
  font-size: 13px;
}
:where(.dcUndoSel-root) .dcUndoSel-row:last-child { border-bottom: none; }
:where(.dcUndoSel-root) .dcUndoSel-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
}
:where(.dcUndoSel-root) .dcUndoSel-row input[type=checkbox] {
  width: 16px; height: 16px; flex: 0 0 auto;
}
:where(.dcUndoSel-root) .dcUndoSel-row .dcUndoSel-row-id {
  font-family: var(--px-mono);
  color: var(--px-text-muted);
  min-width: 70px;
}
:where(.dcUndoSel-root) .dcUndoSel-row .dcUndoSel-row-meta {
  font-size: 11px;
  color: var(--px-text-muted);
}
:where(.dcUndoSel-root) .dcUndoSel-empty {
  padding: 14px 12px;
  color: var(--px-text-muted);
  font-size: 12px;
  font-style: italic;
}
:where(.dcUndoSel-root) .dcUndoSel-summary {
  font-size: 12px;
  color: var(--px-text-secondary);
  padding: 0 4px;
}
:where(.dcUndoSel-root) .dcUndoSel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
:where(.dcUndoSel-root) .dcUndoSel-warning {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
}

/* The warning banner's old inline style="display:none;". It is the only
   declaration this asset adds. .dcUndoSel-warning declares no display of its
   own, so there is no tie to break and no compound spelling is needed; the
   rule is last in the file regardless. */
:where(.dcUndoSel-root) .dcUndoSel-hidden {
  display: none;
}