/* ===== dc_acute_card_html (HTML form, scoped) =====
   The acute outstanding 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 .dca-hidden rule at the end, which replaces the three
   markup style="display:none;" attributes the format bans.

   SCOPE. Every rule whose SUBJECT is a descendant is :where(.dca-card), which
   adds zero specificity and so cannot change which rule wins. Every rule that
   already names .dca-card stays BARE: the root IS .dca-card, so
   :where(.dca-card) .dca-card 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. TWO
   outside rules reach this root, not one. The shell's own
   `.dc-dashboard-section .dca-card` (dispatch_confirmation_html.css, !important
   on its two width declarations) NAMES the class and outranks these (0,1,0) rules on
   specificity whatever the document order. The second 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 280px 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 three hides are the .dca-hidden state class in this
   head-linked asset. The designer canvas loads this asset, so the canvas shows
   what first paint shows. */

.dca-card {
  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: 200px;
  max-width: 280px;
}

/* 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 and a long
   home name stops wrapping. 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 .dca-card.px-anvil-reset {
  max-width: 280px !important;
}

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

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

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

:where(.dca-card) .dca-card-title {
  margin: 0 0 12px 0;
  color: var(--px-text-primary);
  font-size: 20px;
  font-weight: 600;
}

:where(.dca-card) .dca-bags-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--px-border);
}

:where(.dca-card) .dca-bags-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

:where(.dca-card) .dca-bags-label {
  color: var(--px-text-primary);
  font-size: 24px;
  font-weight: 600;
}

:where(.dca-card) .dca-bags-count {
  color: var(--px-text-primary);
  font-size: 24px;
  font-weight: bold;
  margin-left: 8px;
}

:where(.dca-card) .dca-bags-breakdown {
  margin-left: 15px;
  margin-top: 5px;
  font-size: 14px;
  color: var(--px-text-secondary);
}

:where(.dca-card) .dca-fridge {
  color: #2196F3;
  font-weight: bold;
}

:where(.dca-card) .dca-cd {
  color: #F44336;
  font-weight: bold;
}

:where(.dca-card) .dca-age-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

:where(.dca-card) .dca-age-alert {
  border: 2px solid #F44336;
  border-radius: 4px;
  padding: 8px;
  background-color: #FFEBEE;
}

:where(.dca-card) .dca-age-label {
  color: var(--px-text-primary);
  font-size: 14px;
  font-weight: 600;
}

:where(.dca-card) .dca-age-value {
  font-size: 14px;
  font-weight: bold;
}

:where(.dca-card) .dca-deferred-badge {
  display: inline-block;
  background: #f59e0b;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

/* Container counts - acute green palette */
:where(.dca-card) .dca-containers-section {
  margin-top: 8px;
  padding: 6px 8px;
  background: #E8F5E9;
  border-radius: 4px;
  font-size: 13px;
  color: #2E7D32;
  font-weight: 600;
}
:where(.dca-card) .dca-containers-cd { color: #F44336; font-weight: bold; }
[data-theme="dark"] :where(.dca-card) .dca-containers-section {
  background: #1b3a24;
  color: #A5D6A7;
}

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

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

[data-theme="dark"] :where(.dca-card) .dca-card-title,
[data-theme="dark"] :where(.dca-card) .dca-bags-label,
[data-theme="dark"] :where(.dca-card) .dca-bags-count {
  color: var(--px-text-primary);
}

[data-theme="dark"] :where(.dca-card) .dca-bags-breakdown,
[data-theme="dark"] :where(.dca-card) .dca-age-label {
  color: var(--px-text-secondary);
}

[data-theme="dark"] :where(.dca-card) .dca-bags-section {
  border-bottom-color: var(--px-border);
}

/* The three markup style="display:none;" attributes the format bans, as one
   class. Written with .dca-card as a REAL ancestor, (0,2,0), rather than
   :where(.dca-card) at (0,1,0): .dca-age-section, .dca-deferred-section and
   .dca-containers-section each already have a rule at that same (0,1,0), and
   although none of the three declares `display` today, a declaration added
   there later would be decided by file order -- the tie the guide says to
   settle with specificity instead.

   dca.mjs toggles this class to show and hide each section; the base rule
   owns the display value of a shown section. */
.dca-card .dca-hidden {
  display: none;
}