/* dc_historical_breakdown_html — the Dispatch Breakdown popup's own rules,
 * kept here because the Anvil server strips a template's <style> block. Rules
 * are scoped by their selector preludes, and classes stand in for two inline
 * style= attributes a template cannot carry.
 *
 * ROOT. The form root is the .dchb-container div itself, so its rule stays
 * BARE and byte-identical: no flex/position added, no min-height dropped.
 *
 * TWO SCOPES, AND THE SECOND IS NOT THE ROOT. pxShowOverlay PORTALS
 * #dchb-undo-overlay into #px-modal-portal on open and pxHideOverlay brings it
 * back 300ms after close, so the overlay leaves .dchb-container exactly while
 * it is visible. Every rule for something inside it is therefore scoped
 * :where(#dchb-undo-overlay); a rule scoped on the form root would stop
 * matching the moment the modal opened. The card rules, which never move, are
 * scoped :where(.dchb-container). :where() contributes zero specificity, so
 * every rule keeps exactly the weight its bare selector had.
 *
 * HEAD-LINK ORDER. This asset is a head <link>. It loads AFTER
 * theme/assets/theme.css (runner2.html carries the theme-css placeholder
 * before the head-html one), so .dchb-table th / td still beat .px-table
 * th / td on order as they do today — and the dependency declares no .px-table
 * at all. It loads BEFORE the dependency's runtime theme injection, which is
 * why the two rules replacing inline style= carry a real second class instead
 * of relying on order: .px-modal-title { color: var(--px-text-primary) } is
 * injected at (0,1,0) after every head link and would otherwise take the red
 * back off the title, and .px-modal-header is given the same treatment so a
 * background added there later cannot silently win either.
 *
 * NO DESIGNER GATE, and there is nothing to gate. Nothing here
 * is hidden until JavaScript runs: #dchb-loading-overlay ships with the active
 * class in the markup and the dependency's .px-loading-overlay rule is what
 * shows it, so the canvas shows what first paint shows.
 *
 * @keyframes dchbRowReveal already carries this form's stem and is left as it
 * is. No url(), no @font-face, no html rule, no :root block, and no
 * .themed-scrollbar rule — the class stays on
 * #dchb-table-container for the dependency's own scrollbar look.
 */

.dchb-container {
  --accent: #fbbf24; --accent-text: #422006;
  --accent-hover: #f59e0b;
  --accent-subtle: rgba(251,191,36,0.12);
  --px-loading-accent: #fbbf24;
  font-family: var(--px-font);
  color: var(--px-text-primary);
  background: var(--px-bg-card);
  position: relative;
  min-height: 400px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
}

:where(.dchb-container) .dchb-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}

/* ===== Table Card ===== */
:where(.dchb-container) .dchb-table-card {
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

:where(.dchb-container) .dchb-table-scroll {
  flex: 1;
  overflow-y: auto;
}

:where(.dchb-container) .dchb-table th {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #422006;
  padding: 10px 8px;
  font-family: var(--px-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

:where(.dchb-container) .dchb-table th input {
  width: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(66, 32, 6, 0.3);
  border-radius: 4px;
  font-size: 11px;
  background: rgba(255,255,255,0.9);
  color: #422006;
}

:where(.dchb-container) .dchb-table th input::placeholder {
  color: rgba(66, 32, 6, 0.5);
}

:where(.dchb-container) .dchb-table th input:focus {
  outline: none;
  border-color: #422006;
  background: white;
}

:where(.dchb-container) .dchb-table td {
  padding: 8px;
  font-size: 12px;
  color: var(--px-text-secondary);
  vertical-align: top;
}

:where(.dchb-container) .dchb-table tbody tr {
  animation: dchbRowReveal 0.3s ease both;
}

@keyframes dchbRowReveal {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

:where(.dchb-container) .dchb-no-results {
  text-align: center;
  padding: 32px 16px;
  color: var(--px-text-muted);
  font-size: 14px;
  font-family: var(--px-mono);
}

:where(.dchb-container) .dchb-clear-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 8px;
}

/* ===== The undo modal, which pxShowOverlay portals out of the form root ===== */

/* The undo modal's red header tint, on the .px-modal-header that also
   carries .dchb-undo-header in form_template.html. A second class, not a scope alone: the dependency's
   .px-modal-header is injected after every head link. */
:where(#dchb-undo-overlay) .px-modal-header.dchb-undo-header {
  background: rgba(239,68,68,0.08);
}

/* The undo modal's red title, on the .px-modal-title that also carries
   .dchb-undo-title in form_template.html. The
   dependency declares .px-modal-title { color: var(--px-text-primary) } at
   (0,1,0) and injects it after this file, so the compound at (0,2,0) is what
   keeps the title red. */
:where(#dchb-undo-overlay) .px-modal-title.dchb-undo-title {
  color: #ef4444;
}

:where(#dchb-undo-overlay) .dchb-modal-section {
  margin-bottom: 16px;
}

:where(#dchb-undo-overlay) .dchb-modal-section:last-child {
  margin-bottom: 0;
}

:where(#dchb-undo-overlay) .dchb-modal-label {
  font-weight: 600;
  color: var(--px-text-primary);
  margin-bottom: 8px;
  display: block;
}

:where(#dchb-undo-overlay) .dchb-dispatch-info {
  background: var(--px-bg-elevated);
  padding: 12px;
  border-radius: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--px-text-muted);
}

:where(#dchb-undo-overlay) .dchb-warning-box {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  padding: 12px;
  color: #ef4444;
  font-weight: 600;
  font-size: 12px;
}

:where(#dchb-undo-overlay) .dchb-info-box {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  padding: 12px;
  color: #3b82f6;
  font-weight: 600;
  font-size: 12px;
}

:where(#dchb-undo-overlay) .dchb-bag-card {
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
}

:where(#dchb-undo-overlay) .dchb-bag-card:last-child {
  margin-bottom: 0;
}

:where(#dchb-undo-overlay) .dchb-bag-header {
  font-weight: 600;
  color: var(--px-text-primary);
  margin-bottom: 6px;
  font-size: 13px;
}

:where(#dchb-undo-overlay) .dchb-bag-dispatch {
  font-size: 11px;
  font-style: italic;
  color: var(--px-text-muted);
  margin-bottom: 6px;
}

:where(#dchb-undo-overlay) .dchb-bag-item {
  font-size: 12px;
  color: var(--px-text-secondary);
  padding-left: 12px;
}

:where(#dchb-undo-overlay) .dchb-bag-notes {
  font-size: 11px;
  color: var(--px-text-muted);
  margin-top: 6px;
}

:where(#dchb-undo-overlay) .dchb-summary {
  font-weight: 600;
  color: var(--px-text-primary);
  font-size: 13px;
  padding-top: 8px;
  border-top: 1px solid var(--px-border);
}