/* pack_deliveries.css - the section's shared sheet: the shell's own chrome plus
 * the rules that style its children's DOM.
 *
 * SCOPING. Every descendant rule here already led with
 * `.pack-deliveries-root` in the template's <style> block and keeps it as a REAL
 * class. Wrapping it in :where() would replace a class with a zero-weight
 * pseudo-class and drop each rule by one class, which is the guide's
 * `.pe-filters .px-input` warning. The three root rules and the two
 * [data-theme='dark'] restatements are byte-identical for the same reason: the
 * dark attribute sits on <html>, an ancestor of this root, so a scope in front of
 * it would never match. Net specificity change across this asset: zero.
 *
 * THE ROOT RULE STAYS BARE so it outranks the scoped reset, and the custom
 * properties must land on the element the [data-mode] rules and the dependency's
 * `.px-btn-primary { background: var(--accent) }` read them from. It also
 * carries `position: relative` and `flex: 1 0 auto`.
 *
 * ONE ORDER FIX. A head <link> loads BEFORE theme/assets/theme.css and before
 * the dependency's runtime document.head.appendChild, so this file loses any
 * tie on specificity. The audit found exactly one live tie:
 * `.pdLayout-new-container-btn` against theme.css `.px-btn.px-btn-touch`,
 * both (0,2,0), both declaring min-height and padding. It carries a second class
 * below. Every other subject here is a pdLayout-* or pack-deliveries-* name no
 * other file declares, and the rules that reach a shared `.px-btn-mode` /
 * `.px-btn` name keep the root class and so stay at (0,3,0) or heavier.
 *
 * THE CHILD RULES STAY HERE. `.pdLayout-card*`, `.pdLayout-open-card*`,
 * `.pdLayout-card-row`, `.pdLayout-stale`, `.pdLayout-flash` and
 * `.pdLayout-bag-row.pdLayout-flash` target markup that lives in
 * pd_open_card_html and pd_selected_card_html, which are always inside this root
 * at runtime. That is where they are today and where they stay; the cost is the
 * guide's expected one, those two leaves being drag-only on the designer canvas.
 *
 * NO DESIGNER GATE and no live class. Nothing here is hidden by a
 * rule only JavaScript undoes: `.pdLayout-polling-paused` was already hidden by
 * this same CSS with an `.is-active` reveal one class heavier, and every
 * `.pdLayout-is-hidden` target is hidden by an inline style= on the designer
 * canvas too.
 *
 * The three @keyframes keep their names: all three are already section-prefixed,
 * and every animation: declaration that names them travels with them.
 */

/* The section's one hide class, shared by four of its five forms and declared
 * bare - no :where(), no root ancestor - because pd_detail_html and
 * pd_history_html are shown through px_form_alert, which moves their DOM out of
 * .pack-deliveries-root. A form whose hide target meets a
 * competing `display` declares a heavier compound in its own sheet; this is the
 * base. */
.pdLayout-is-hidden { display: none; }

.pack-deliveries-root {
  padding: 16px;
  /* width: 100% because this element is the flex item inside main's content mount (display: flex; flex-direction:
     column), so horizontal is the CROSS axis, and a flex item is stretched to
     it only when the cross size computes to auto AND neither cross-axis margin
     is auto (css-flexbox-1 §8.3). `margin: 0 auto` below opts out of that
     stretch, so without a definite width the root would fall back to
     fit-content - narrower than the 1400px cap on every wide monitor, dropping
     the open-card grid from four columns to two. align-self: stretch is inert
     for the same spec reason. With a definite 100% the cap and the auto margins
     centre the root at up to 1400px. box-sizing: border-box is global,
     so the 16px padding stays inside the box. */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  color: var(--px-text-primary);
  font-family: var(--px-font, system-ui, -apple-system, sans-serif);
  /* Neutral default — no mode picked. Tints (pills, card hover,
     scanner-mode-toggle active state) read as muted slate until
     the user clicks a mode tab, at which point the [data-mode]
     rules below flip --accent to the picked mode's palette.
     The form is responsible for defining --accent / --accent-hover /
     --accent-subtle — they have no global defaults. */
  /* Mode-color palette — referenced by the [data-mode] accent flip
     AND by mode-aware card chrome (border, mode badge). Define once
     so a future palette tweak hits one site. */
  --pd-acute: #22c55e;
  --pd-acute-hover: #16a34a;
  --pd-monthly: #fbbf24;
  --pd-monthly-hover: #f59e0b;
  --accent: #94a3b8;
  --accent-hover: #64748b;
  --accent-subtle: rgba(148, 163, 184, 0.12);
  /* This element is the flex item inside main's content mount. No overflow,
     no height, no min-height and no position: fixed, any of which stops the
     content port scrolling or changes its size. */
  position: relative;
  flex: 1 0 auto;
}
.pack-deliveries-root[data-mode='monthly'] {
  --accent: var(--pd-monthly);
  --accent-hover: var(--pd-monthly-hover);
  --accent-subtle: rgba(251, 191, 36, 0.12);
}
.pack-deliveries-root[data-mode='acute'] {
  --accent: var(--pd-acute);
  --accent-hover: var(--pd-acute-hover);
  --accent-subtle: rgba(34, 197, 94, 0.12);
}
.pack-deliveries-root .pdLayout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.pack-deliveries-root .pdLayout-mode-tabs {
  display: flex;
  gap: 8px;
}
.pack-deliveries-root .pdLayout-mode-tabs .px-btn-mode {
  min-width: 165px;
  padding: 14px 20px;
  justify-content: center;
  text-align: center;
  /* Inactive buttons fade back so the picked mode reads as the
     primary action. Border stays solid (not transparent) so the
     button's footprint stays the same width regardless of state. */
  opacity: 0.45;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
}
[data-theme='dark'] .pack-deliveries-root .pdLayout-mode-tabs .px-btn-mode {
  opacity: 0.55;
  border-color: rgba(255, 255, 255, 0.12);
}
.pack-deliveries-root .pdLayout-mode-tabs .px-btn-mode.is-active {
  opacity: 1;
  /* Stronger border + ring on the chosen mode so it visually
     outranks its sibling in both themes. accent token already
     flips with data-mode (acute/monthly), so the ring colour
     tracks the picked mode. */
  border-color: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 3px var(--accent-subtle), 0 1px 2px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
[data-theme='dark'] .pack-deliveries-root .pdLayout-mode-tabs .px-btn-mode.is-active {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px var(--accent-subtle), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pack-deliveries-root .pdLayout-toolbar { display: flex; gap: 8px; align-items: center; }
.pack-deliveries-root .pdLayout-scanner-mode-toggle {
  display: inline-flex;
  gap: 4px;
}
.pack-deliveries-root .pdLayout-scanner-mode-toggle .px-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}
.pack-deliveries-root .pdLayout-scan-area {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  padding: 16px;
  /* Capped width 720px; auto margins keep the scan area
     horizontally centred under a wider header. */
  margin: 0 auto 12px;
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pack-deliveries-root .pdLayout-reprint-last-seal-btn {
  align-self: center;
  width: auto;
  max-width: 100%;
  justify-content: center;
  border-color: var(--px-border-strong);
}
.pack-deliveries-root .pdLayout-scan-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}
.pack-deliveries-root .pdLayout-scan-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 480px;
}
.pack-deliveries-root .pdLayout-new-container-btn.px-btn-touch {
  flex: 0 0 auto;
  align-self: center;
  justify-content: center;
  border-color: var(--px-border-strong);
  white-space: nowrap;
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.pack-deliveries-root .pdLayout-polling-paused {
  display: none;
  background: rgba(245, 158, 11, 0.12);
  color: var(--px-warning);
  border: 1px solid var(--px-warning);
  padding: 8px 12px;
  border-radius: var(--px-radius-sm);
  margin-bottom: 8px;
}
.pack-deliveries-root .pdLayout-polling-paused.is-active { display: block; }
.pack-deliveries-root .pdLayout-section { margin-top: 18px; }
.pack-deliveries-root .pdLayout-section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  padding-left: 10px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pack-deliveries-root .pdLayout-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
}
.pack-deliveries-root .pdLayout-selected-panel {
  background: var(--px-bg-card);
  border: 2px solid var(--accent);
  border-radius: var(--px-radius);
  padding: 12px;
  margin-bottom: 12px;
}
.pack-deliveries-root .pdLayout-open-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pack-deliveries-root .pdLayout-card {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  padding: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pack-deliveries-root .pdLayout-card:hover { border-color: var(--accent); }
/* Per-card mode tint — independent of the active tab so a monthly
   card on the acute tab still reads as monthly. Stale and flash
   rules below override these via declaration order. */
.pack-deliveries-root .pdLayout-open-card.is-acute { border-color: var(--pd-acute); }
.pack-deliveries-root .pdLayout-open-card.is-acute:hover { border-color: var(--pd-acute-hover); }
.pack-deliveries-root .pdLayout-open-card.is-monthly { border-color: var(--pd-monthly); }
.pack-deliveries-root .pdLayout-open-card.is-monthly:hover { border-color: var(--pd-monthly-hover); }
.pack-deliveries-root .pdLayout-open-card.is-fridge { border-left: 5px solid #3b82f6; }
.pack-deliveries-root .pdLayout-open-card { cursor: pointer; }
.pack-deliveries-root .pdLayout-card.pdLayout-stale { border-color: var(--px-warning); }
.pack-deliveries-root .pdLayout-card-mode-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #1a1a1a;
}
.pack-deliveries-root .pdLayout-card-mode-badge.is-acute   { background: var(--pd-acute);   color: #fff; }
.pack-deliveries-root .pdLayout-card-mode-badge.is-monthly { background: var(--pd-monthly); color: #1a1a1a; }
.pack-deliveries-root .pdLayout-card-stale-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--px-warning);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.pack-deliveries-root .pdLayout-card.pdLayout-flash {
  animation: pdLayoutCardFlash 600ms ease-out;
}
@keyframes pdLayoutCardFlash {
  0% { background: rgba(16, 185, 129, 0.18); }
  100% { background: var(--px-bg-card); }
}
.pack-deliveries-root .pdLayout-card-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 2px 0;
}
.pack-deliveries-root .pdLayout-bag-row.pdLayout-flash {
  animation: pdLayoutCardFlash 600ms ease-out;
}
.pack-deliveries-root .pdLayout-error-flash {
  animation: pdLayoutErrorFlash 600ms ease-out;
}
@keyframes pdLayoutErrorFlash {
  0% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4); }
  100% { box-shadow: none; }
}
.pack-deliveries-root .pdLayout-empty-state { color: var(--px-text-muted); }
/* Subtle inline scan indicator — process_pack_scan fires on every bag
   scan, so it MUST NOT use the full-screen px-loading overlay (would
   flicker the whole panel per scan). */
.pack-deliveries-root .pdLayout-scan-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--px-text-muted);
}
.pack-deliveries-root .pdLayout-scan-status-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--px-border, #ccc);
  border-top-color: var(--accent, #2563eb);
  border-radius: 50%;
  animation: pdLayoutScanSpin 600ms linear infinite;
}
@keyframes pdLayoutScanSpin { to { transform: rotate(360deg); } }

/* HIDE-STATE OVERRIDES for the shell's own four hide targets.
   The bare `.pdLayout-is-hidden` above is (0,1,0) and the inline
   `style="display:none;"` it replaces beat everything, so each target that meets
   a competing `display` needs the override to win on specificity rather than on
   order (the guide's "give the new one a second class").

   The two buttons - #pdLayout-reprint-last-seal-btn and
   #pdLayout-new-container-btn - meet the dependency's `.px-btn { display:
   inline-flex }` at (0,1,0), injected with document.head.appendChild at startup
   and so after every head <link>. One rule covers both, and it restates for this
   root what the selected panel already declares for its own.

   The scan status meets this file's own `.pack-deliveries-root
   .pdLayout-scan-status { display: flex }` at (0,2,0).

   #pdLayout-camera-mount needs no override: nothing else gives that div a
   `display`. */
.pack-deliveries-root .px-btn.pdLayout-is-hidden { display: none; }
.pack-deliveries-root .pdLayout-scan-status.pdLayout-is-hidden { display: none; }