/* ===== dc_monthly_card_html (HTML form, scoped) =====
   The monthly bagged-data card the dispatch board builds per home, on the
   interactive board and on the view-only dashboard board.

   Loaded eagerly from anvil.yaml native_deps.head_html. Every rule here comes
   from the form's old <style> block; nothing is added and nothing is dropped
   except the one new .dcm-hidden rule at the end, which replaces the six
   markup style="display:none;" attributes the format bans.

   SCOPE. Every rule whose SUBJECT is a descendant is :where(.dcm-card), which
   adds zero specificity and so cannot change which rule wins. Every rule that
   already names .dcm-card stays BARE: the root IS .dcm-card, so
   :where(.dcm-card) .dcm-card.dcm-selected ... would need a second card inside
   the card and would never match (guide, the .pe-cycle.is-empty case). The
   root rule itself is bare and byte-identical -- this app does NOT apply the
   guide's screen-root rule, and a card is not a screen.

   [data-theme="dark"] sits on <html>, an ancestor of the root, so the scope
   goes AFTER it; where the dark rule's subject is the root itself it stays
   bare, for the same reason.

   ORDER AUDIT. Every class here is private to this form and the
   form declares no rule for the `px-anvil-reset` its root also carries, so
   no theme.css or runtime-injected dependency rule ties with it on order. The
   outside rules NAMING these classes are the shell's own
   dashboard uncap (dispatch_confirmation_html.css, with !important, (0,4,0) -- see
   below) and `.dc-dashboard-section .dcm-button-row` at (0,2,0), both against
   these (0,1,0), so the shell wins on specificity whatever the document order.
   One more rule reaches the root by POSITION: the root IS the card block, not
   a wrapper around it, so on the interactive board it takes the slot's
   direct-child place, and theme.css
   `.px-anvil-reset .px-flow-container>*` (0,2,0, `max-width: none !important`)
   lands on the card.
   The 360px clamp is re-asserted below at (0,3,0) for that, and the shell's
   dashboard uncap is bumped to (0,4,0) to stay above the re-assertion. No
   @keyframes in this form, so the per-form keyframe prefix rule has no work.

   No designer gate: the six hides are the .dcm-hidden state class in this
   head-linked asset. The designer canvas loads this asset, so the canvas shows
   what first paint shows. */

.dcm-card {
  /* Delivery colour trios (bg + fg), one source per theme; the badge
     and button rules below reference these. Dark overrides live in the
     [data-theme="dark"] .dcm-card block. */
  --dcm-green-bg: #E8F5E9;
  --dcm-green-fg: #2E7D32;
  --dcm-amber-bg: #FFF3E0;
  --dcm-amber-fg: #E65100;
  --dcm-red-bg: #FFEBEE;
  --dcm-red-fg: #C62828;
  font-family: var(--px-font);
  background: var(--px-bg-card);
  border-radius: 10px;
  box-shadow: var(--px-shadow);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  min-width: 300px;
  max-width: 360px;
}

/* theme.css `.px-anvil-reset .px-flow-container>*` carries
   `max-width: none !important` at (0,2,0). Before conversion it landed on the
   Anvil wrapper the card sat in; converted, the card root itself holds the
   slot's direct-child place, so the (0,1,0) clamp above is defeated. Re-assert
   at (0,3,0) by doubling the two classes the root carries -- position-free, so
   it still holds once the shell converts and an <anvil-dropzone> takes that
   place back. The dashboard board uncaps it again at (0,4,0) in the shell's
   own CSS. */
.px-anvil-reset .dcm-card.px-anvil-reset {
  max-width: 360px !important;
}

.dcm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.dcm-card.dcm-selected {
  box-shadow: 0 0 0 4px #1976D2, 0 6px 20px rgba(25,118,210,0.4);
  transform: translateY(-2px);
}

.dcm-card.dcm-selected:hover {
  box-shadow: 0 0 0 4px #1976D2, 0 6px 20px rgba(25,118,210,0.4);
}

/* Home not released for delivery today (not active or deferred): not
   bulk-selectable. Signals the block before the click-time toast. */
.dcm-card.dcm-not-selectable {
  cursor: not-allowed;
  opacity: 0.72;
}

.dcm-card.dcm-not-selectable:hover {
  transform: none;
  box-shadow: var(--px-shadow);
}

:where(.dcm-card) .dcm-card-border {
  padding-left: 20px;
}

:where(.dcm-card) .dcm-card-content {
  background: var(--px-bg-card);
  padding: 12px 14px;
  text-align: center;
}

.dcm-card.dcm-selected .dcm-card-content {
  background: #1976D2;
}

:where(.dcm-card) .dcm-card-title {
  margin: 0 0 10px 0;
  font-size: 19px;
  font-weight: 600;
}

:where(.dcm-card) .dcm-progress-section {
  margin-top: 8px;
}

:where(.dcm-card) .dcm-progress-label {
  font-size: 12px;
  color: var(--px-text-secondary);
  margin-bottom: 2px;
}

.dcm-card.dcm-selected .dcm-progress-label {
  color: #B3E5FC;
}

:where(.dcm-card) .dcm-progress-bar {
  margin: 4px 0;
}

:where(.dcm-card) .dcm-bar-track {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: #E0E0E0;
}

:where(.dcm-card) .dcm-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: white;
  transition: width 0.3s ease;
  overflow: hidden;
  white-space: nowrap;
}

:where(.dcm-card) .dcm-bar-dispatched {
  background: #4CAF50;
}

:where(.dcm-card) .dcm-bar-ready {
  background: #FFA726;
}

:where(.dcm-card) .dcm-progress-legend {
  font-size: 11px;
  color: var(--px-text-secondary);
}

.dcm-card.dcm-selected .dcm-progress-legend {
  color: #E1F5FE;
}

:where(.dcm-card) .dcm-details-section {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--px-border);
  font-size: 12px;
}

.dcm-card.dcm-selected .dcm-details-section {
  border-top-color: #0D47A1;
  color: white;
}

.dcm-card.dcm-selected .dcm-card-title {
  color: white !important;
}

.dcm-card.dcm-selected .dcm-deadline {
  color: white !important;
}

.dcm-card.dcm-selected .dcm-bar-track {
  background: rgba(255,255,255,0.25);
}

:where(.dcm-card) .dcm-details-row {
  margin-bottom: 2px;
}

:where(.dcm-card) .dcm-oldest-bag {
  margin-top: 4px;
}

:where(.dcm-card) .dcm-deadline {
  margin-top: 2px;
  font-weight: bold;
}

:where(.dcm-card) .dcm-start-date {
  font-size: 11px;
  color: var(--px-text-muted);
  margin-top: 2px;
}

.dcm-card.dcm-selected .dcm-start-date {
  color: #B3E5FC;
}

:where(.dcm-card) .dcm-previous-cycle {
  display: inline-block;
  background-color: #FFE0B2;
  color: #E65100;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  margin-top: 4px;
}

.dcm-card.dcm-selected .dcm-previous-cycle {
  background-color: #FFB74D;
  color: white;
}

:where(.dcm-card) .dcm-button-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--px-border);
}

.dcm-card.dcm-selected .dcm-button-row {
  border-top-color: #0D47A1;
}

.dcm-card.dcm-selected .dcm-btn-details {
  background: rgba(255,255,255,0.9);
  color: #1565C0;
}

.dcm-card.dcm-selected .dcm-btn-partial {
  background: rgba(255,255,255,0.9);
  color: #e65100;
}

:where(.dcm-card) .dcm-btn {
  flex: 1;
  padding: 6px 14px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(.dcm-card) .dcm-btn-details {
  background: #e3f2fd;
  color: #1976D2;
}

:where(.dcm-card) .dcm-btn-details:hover {
  background: #bbdefb;
}

:where(.dcm-card) .dcm-btn-partial {
  background: #fff3e0;
  color: #e65100;
}

:where(.dcm-card) .dcm-btn-partial:hover {
  background: #ffe0b2;
}

:where(.dcm-card) .dcm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.dcm-card) .dcm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 0 0 8px 0;
}

:where(.dcm-card) .dcm-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

:where(.dcm-card) .dcm-badge-delivery {
  background: var(--dcm-green-bg);
  color: var(--dcm-green-fg);
}

:where(.dcm-card) .dcm-badge-deferred {
  background: var(--dcm-amber-bg);
  color: var(--dcm-amber-fg);
}

:where(.dcm-card) .dcm-badge-week1 {
  background: var(--dcm-red-bg);
  color: var(--dcm-red-fg);
}

.dcm-card.dcm-selected .dcm-badge-delivery,
.dcm-card.dcm-selected .dcm-badge-deferred,
.dcm-card.dcm-selected .dcm-badge-week1 {
  background: rgba(255,255,255,0.9);
  color: #1565C0;
}

:where(.dcm-card) .dcm-delivery-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--px-border);
}

.dcm-card.dcm-selected .dcm-delivery-row {
  border-top-color: #0D47A1;
}

:where(.dcm-card) .dcm-delivery-buttons {
  display: flex;
  gap: 8px;
}

:where(.dcm-card) .dcm-btn-activate {
  background: var(--dcm-green-bg);
  color: var(--dcm-green-fg);
}

:where(.dcm-card) .dcm-btn-activate:hover:not(:disabled) {
  background: #C8E6C9;
}

:where(.dcm-card) .dcm-btn-deactivate {
  background: var(--dcm-red-bg);
  color: var(--dcm-red-fg);
}

:where(.dcm-card) .dcm-btn-deactivate:hover {
  background: #FFCDD2;
}

:where(.dcm-card) .dcm-btn-defer {
  background: var(--dcm-amber-bg);
  color: var(--dcm-amber-fg);
}

:where(.dcm-card) .dcm-btn-defer:hover {
  background: #FFE0B2;
}

:where(.dcm-card) .dcm-delivery-reason {
  margin-top: 6px;
  font-size: 11px;
  color: #C62828;
  text-align: center;
}

.dcm-card.dcm-selected .dcm-delivery-reason {
  color: #FFCDD2;
}

[data-theme="dark"] :where(.dcm-card) .dcm-delivery-row {
  border-top-color: var(--px-border);
}

[data-theme="dark"] .dcm-card {
  --dcm-green-bg: rgba(76,175,80,0.2);
  --dcm-green-fg: #a5d6a7;
  --dcm-amber-bg: rgba(230,81,0,0.2);
  --dcm-amber-fg: #ffcc80;
  --dcm-red-bg: rgba(198,40,40,0.2);
  --dcm-red-fg: #ef9a9a;
  background: var(--px-bg-card);
}

[data-theme="dark"] :where(.dcm-card) .dcm-card-content {
  background: var(--px-bg-card);
}

[data-theme="dark"] .dcm-card.dcm-selected .dcm-card-content {
  background: #1565c0;
}

[data-theme="dark"] :where(.dcm-card) .dcm-card-title {
  color: var(--px-text-primary);
}

[data-theme="dark"] :where(.dcm-card) .dcm-progress-label,
[data-theme="dark"] :where(.dcm-card) .dcm-progress-legend,
[data-theme="dark"] :where(.dcm-card) .dcm-details-section {
  color: var(--px-text-secondary);
}

[data-theme="dark"] :where(.dcm-card) .dcm-details-section {
  border-top-color: var(--px-border);
}

[data-theme="dark"] :where(.dcm-card) .dcm-button-row {
  border-top-color: var(--px-border);
}

[data-theme="dark"] :where(.dcm-card) .dcm-btn-details {
  background: rgba(33, 150, 243, 0.2);
  color: #90caf9;
}

[data-theme="dark"] :where(.dcm-card) .dcm-btn-partial {
  background: rgba(230, 81, 0, 0.2);
  color: #ffab91;
}

[data-theme="dark"] :where(.dcm-card) .dcm-bar-track {
  background: #424242;
}

/* The six markup style="display:none;" attributes the format bans, as one
   class. Written with .dcm-card as a REAL ancestor, (0,2,0), rather than
   :where(.dcm-card) at (0,1,0): .dcm-badges declares display:flex and
   .dcm-previous-cycle display:inline-block at that same (0,1,0), so a scoped
   hide would be decided by file order, which is the tie the guide says to
   settle with specificity instead.

   dcm.mjs toggles this class to show and hide all six elements, so one
   mechanism covers them and the base rule owns the display value. */
.dcm-card .dcm-hidden {
  display: none;
}