/* pd_detail_html - the container-detail modal, lifted from its template's
 * <style> block.
 *
 * SCOPING. `.pdLayout-detail-modal` IS the form root, and
 * `.pack-deliveries-detail-root` sits beside it on the same element. A rule
 * whose subject is the root keeps its bare class - wrapped in `:where()` it
 * would name an ancestor this element does not have and would never match.
 * Every descendant rule gains `:where(.pack-deliveries-detail-root) `, which
 * adds zero specificity, so no rule changes which declaration wins.
 *
 * This form's DOM is MOVED into the JS modal portal by px_form_alert, out of
 * `.pack-deliveries-root`, so every rule it needs is here rather than in the
 * section's shared sheet. That is also why the hide class below is this form's
 * own `.pdd-is-hidden` and not the shared `.pdLayout-is-hidden`.
 *
 * No designer gate: every hide is the `.pdd-is-hidden` state class in this
 * head-linked asset. The designer canvas loads this asset, so the canvas shows
 * what first paint shows.
 */

.pdLayout-detail-modal {
  padding: 12px; min-width: 720px; max-width: 1000px;
  border-top: 4px solid var(--px-border); border-radius: var(--px-radius-sm);
  --accent: #475569;
  --accent-hover: #334155;
  --accent-subtle: rgba(71, 85, 105, 0.12);
  --accent-text: #ffffff;
}
.pdLayout-detail-modal.is-acute {
  border-top-color: var(--px-mode-acute);
  --accent: var(--px-mode-acute-strong);
  --accent-hover: var(--px-mode-acute-strong-hover);
  --accent-subtle: var(--px-mode-acute-subtle);
}
.pdLayout-detail-modal.is-monthly {
  border-top-color: var(--px-mode-monthly);
  --accent: var(--px-mode-monthly-strong);
  --accent-hover: var(--px-mode-monthly-strong-hover);
  --accent-subtle: var(--px-mode-monthly-subtle);
}
.pdLayout-detail-modal.is-acute #pdd-title { color: var(--px-mode-acute-strong); }
.pdLayout-detail-modal.is-monthly #pdd-title { color: var(--px-mode-monthly-strong); }
:where(.pack-deliveries-detail-root) .pdLayout-detail-banner {
  background: rgba(245, 158, 11, 0.12);
  color: var(--px-warning);
  padding: 8px 12px;
  border-radius: var(--px-radius-sm);
  margin-bottom: 12px;
  font-size: 13px;
}
:where(.pack-deliveries-detail-root) .pdLayout-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 12px;
}
:where(.pack-deliveries-detail-root) .pdLayout-detail-meta div { font-size: 13px; }
:where(.pack-deliveries-detail-root) .pdLayout-detail-bags-section { margin-bottom: 12px; }
:where(.pack-deliveries-detail-root) .pdLayout-detail-bags-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
:where(.pack-deliveries-detail-root) .pdLayout-detail-bags-header h4 { margin: 0; }
:where(.pack-deliveries-detail-root) .pdLayout-detail-bags-header .pdd-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--px-text-muted);
  cursor: pointer;
}
:where(.pack-deliveries-detail-root) .pdLayout-detail-bags-header .pdd-hint {
  font-size: 12px;
  color: var(--px-text-muted);
  margin-left: auto;
}
:where(.pack-deliveries-detail-root) .pdLayout-detail-bags {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
}
:where(.pack-deliveries-detail-root) .pdLayout-detail-bag-row {
  display: grid;
  grid-template-columns: 24px 80px 1fr 80px 90px;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--px-border-subtle);
  align-items: center;
  font-size: 13px;
}
:where(.pack-deliveries-detail-root) .pdLayout-detail-bag-row:hover { background: var(--px-surface-subtle, rgba(0,0,0,0.03)); }
:where(.pack-deliveries-detail-root) .pdd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:where(.pack-deliveries-detail-root) .pdLayout-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
:where(.pack-deliveries-detail-root) .pdLayout-detail-actions #pdd-extract-btn { min-width: 200px; }
:where(.pack-deliveries-detail-root) .pdLayout-detail-timeline {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  padding: 8px;
}
:where(.pack-deliveries-detail-root) .pdLayout-detail-event {
  font-size: 12px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--px-border-subtle);
}

/* The timeline heading's inline `style="margin-bottom:6px;"`. */
:where(.pack-deliveries-detail-root) .pdLayout-detail-timeline-heading { margin-bottom: 6px; }

/* The three inline `style="display:none;"` hides, as a class this form owns.
 renderDetail toggles the CLASS, never `element.style`: an
   inline write and a class rule are different layers, and mixing them is how a
   re-show silently fails. */
.pdd-is-hidden { display: none; }
/* The select-all label is the one element whose own rule declares a `display`,
   at (0,2,0), which the bare hide above cannot beat - where the inline style it
   replaces beat everything. Doubled rather than left to file order, per the
   guide's "give the new one a second class". */
.pdLayout-detail-bags-header .pdd-select-all-label.pdd-is-hidden { display: none; }