/* ===== bc_item_card_html (HTML form) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.

   SCOPING. Every rule is scoped :where(.bc-item-card), which adds zero
   specificity and so cannot change which rule wins. Three families are
   deliberately left bare, each because wrapping them would break the match or
   lose a class:

   1. The root rule itself, and every rule whose SUBJECT is the root
      (.bc-item-card.bc-selected, the four .bc-item-card.bc-type-* backgrounds,
      their dark-mode twins and the selected-type override). Wrapped as
      :where(.bc-item-card) .bc-item-card.bc-selected they would ask for a card
      inside a card and never match.
   2. The .bc-selected descendant rules. bc-selected is written by setSelected()
      in bc_item_card.mjs onto the card root and nowhere else in the app (grep:
      this form is its only user), so .bc-selected .bc-item-drug is already
      card-scoped. Wrapping it would both fail to match and drop it from (0,2,0)
      to (0,1,0), where [data-theme="dark"] .bc-item-drug above it would start
      winning and a selected card in dark mode would lose its drug colour.
   3. The three .bci-owing-* rules. Those elements are built in Python in
      handle_owing_click and handed to px_form_alert_dom, which mounts them in
      the dependency's modal overlay - outside this form's root entirely. They
      are global.

   This form is NOT a screen. It is a block child of the shell's items mount, so
   the root rule gets no position: relative, no flex: 1 0 auto and no
   min-height.

   ORDER AUDIT (a head link loses specificity ties on document order). Two
   audits: the app-wide px-anvil-reset !important rules the
   card root now sits directly under, written up above the twin rules at the top
   of the root block, and px-btn-touch-sm below.

   The one shared name this asset touches is px-btn-touch-sm,
   declared in theme/assets/theme.css at (0,1,0). The card's own base rule
   .bc-type-btn, .bc-action-btn is also (0,1,0) and overlaps it on font-size,
   padding, min-height and border-radius - a tie a head link would lose on
   order. It does not matter: the compound rule at the
   bottom of this file, .bc-type-btn.px-btn-touch-sm, already sets all four to
   the theme's own values at (0,2,0) and wins outright either way. theme.css's
   min-width: 64px is not contested by this form. */


.bc-item-card {
  flex: 1 1 700px;
  max-width: 750px;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  overflow: hidden;
  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;
}

.bc-item-card.bc-selected {
  background: #000;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 4px 16px rgba(59, 130, 246, 0.25);
}

/* THE RESET CAN REACH THE ROOT. theme.css has
     .px-anvil-reset .anvil-component { padding:0 !important; margin:0 !important;
                                        max-width:100% !important; border:none !important }
     .px-anvil-reset [anvil-slot]>* { width:100% !important; max-width:100% !important }
   and the card is the form's own mounted root under the shell's
   .bc-dashboard.px-anvil-reset. .anvil-component reaches it if the runtime
   stamps that class on an adopted HTML-form root, which is not established
   anywhere in either repo. Without a twin the card would lose its 1px border and its
   750px cap and stretch to the mount's full width.

   The two twins below re-state the only declarations either reset rule can
   reach, at (0,3,0) and (0,4,0) - one class more than the reset - so they win
   whatever the head-link order turns out to be, and are exact no-op restatements
   where the reset does not reach. padding and margin need no twin: the root
   declares neither. width needs none either: the root declares no width. The
   bare rules above
   stay the values' one home for the designer canvas, which loads this form with
   no .px-anvil-reset ancestor. Shape copied from
   theme/assets/auto_pmring/apm_search_bar_html.css. */
.px-anvil-reset .bc-item-card.px-anvil-reset {
  max-width: 750px !important;
  border: 1px solid var(--px-border) !important;
}

.px-anvil-reset .bc-item-card.px-anvil-reset.bc-selected {
  border-color: var(--accent) !important;
}

/* Light mode type backgrounds - opaque pastels */
.bc-item-card.bc-type-tray { background: #e4ddef; }
.bc-item-card.bc-type-cd { background: #fbe0e0; }
.bc-item-card.bc-type-supplement { background: #c3f0e0; }
.bc-item-card.bc-type-fridge { background: #d7e7f4; }

/* Dark mode type backgrounds - dark tinted versions */
[data-theme="dark"] .bc-item-card.bc-type-tray { background: #3f3450; }
[data-theme="dark"] .bc-item-card.bc-type-cd { background: #4e333a; }
[data-theme="dark"] .bc-item-card.bc-type-supplement { background: #2d4a3e; }
[data-theme="dark"] .bc-item-card.bc-type-fridge { background: #314558; }

.bc-item-card.bc-selected.bc-type-tray,
.bc-item-card.bc-selected.bc-type-cd,
.bc-item-card.bc-selected.bc-type-supplement,
.bc-item-card.bc-selected.bc-type-fridge {
  background: #000;
}

.bc-item-card.bc-selected .bc-type-btn {
  color: #fff !important;
}

/* Dark mode type button backgrounds */
[data-theme="dark"] :where(.bc-item-card) .bc-type-btn.bc-btn-tray { background: #5c5078; }
[data-theme="dark"] :where(.bc-item-card) .bc-type-btn.bc-btn-cd { background: #6e4550; }
[data-theme="dark"] :where(.bc-item-card) .bc-type-btn.bc-btn-supplement { background: #355e4a; }
[data-theme="dark"] :where(.bc-item-card) .bc-type-btn.bc-btn-fridge { background: #3d5872; }

:where(.bc-item-card) .bc-item-content {
  display: flex;
  gap: 4px;
  padding: 8px;
}

:where(.bc-item-card) .bc-item-info {
  flex: 1;
  cursor: pointer;
  padding: 4px;
  min-width: 0;
}

:where(.bc-item-card) .bc-item-drug {
  font-size: 16px;
  font-weight: 600;
  color: #0D47A1;
  margin-bottom: 4px;
}

[data-theme="dark"] :where(.bc-item-card) .bc-item-drug {
  color: #90CAF9;
}

.bc-selected .bc-item-drug {
  color: #64B5F6;
}

:where(.bc-item-card) .bc-item-meta {
  font-size: 13px;
  color: var(--px-text-secondary);
  margin-bottom: 2px;
}

.bc-selected .bc-item-meta {
  color: #fff;
}

:where(.bc-item-card) .bc-item-dosage {
  font-size: 12px;
  color: var(--px-text-secondary);
}

.bc-selected .bc-item-dosage {
  color: #fff;
}

:where(.bc-item-card) .bc-item-dosage strong {
  font-weight: 600;
}

:where(.bc-item-card) .bc-item-token {
  font-size: 11px;
  color: var(--px-text-muted);
  margin-top: 2px;
}

.bc-selected .bc-item-token {
  color: #bbb;
}

:where(.bc-item-card) .bc-token-suffix {
  font-weight: 700;
}

:where(.bc-item-card) .bc-item-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

:where(.bc-item-card) .bc-tag-acute {
  background: #C8E6C9;
  color: #2E7D32;
}

:where(.bc-item-card) .bc-item-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 6px 1fr;
  grid-template-rows: auto auto;
  gap: 6px;
  min-width: 280px;
  align-content: center;
}

:where(.bc-item-card) .bc-item-buttons .bc-spacer {
  grid-row: 1 / -1;
  grid-column: 3;
}

:where(.bc-item-card) .bc-type-btn,
:where(.bc-item-card) .bc-action-btn {
  font-family: var(--px-font);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
}

:where(.bc-item-card) .bc-type-btn.bc-btn-tray {
  background: var(--bc-tray-pale);
  color: var(--px-text-primary);
}

:where(.bc-item-card) .bc-type-btn.bc-btn-tray.active {
  background: var(--bc-tray);
  border: 2px solid #000;
  color: #fff;
}

:where(.bc-item-card) .bc-type-btn.bc-btn-cd {
  background: var(--bc-cd-pale);
  color: var(--px-text-primary);
}

:where(.bc-item-card) .bc-type-btn.bc-btn-cd.active {
  background: var(--bc-cd);
  border: 2px solid #000;
  color: #fff;
}

:where(.bc-item-card) .bc-type-btn.bc-btn-supplement {
  background: var(--bc-supplement-pale);
  color: var(--px-text-primary);
}

:where(.bc-item-card) .bc-type-btn.bc-btn-supplement.active {
  background: var(--bc-supplement);
  border: 2px solid #000;
  color: #fff;
}

:where(.bc-item-card) .bc-type-btn.bc-btn-fridge {
  background: var(--bc-fridge-pale);
  color: var(--px-text-primary);
}

:where(.bc-item-card) .bc-type-btn.bc-btn-fridge.active {
  background: var(--bc-fridge);
  border: 2px solid #000;
  color: #fff;
}

:where(.bc-item-card) .bc-action-btn {
  border: none;
}

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

:where(.bc-item-card) .bc-btn-owing {
  background: var(--accent-subtle);
  color: var(--accent);
}

:where(.bc-item-card) .bc-btn-owing:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

:where(.bc-item-card) .bc-btn-delete {
  background: rgba(239, 68, 68, 0.1);
  color: var(--px-danger);
}

:where(.bc-item-card) .bc-btn-delete:hover:not(:disabled) {
  background: var(--px-danger);
  color: #fff;
}

/* The owing dialog's three rules. Built in Python and mounted in the
   dependency's modal overlay, outside this form's root: unscoped, as they are
   today. */
.bci-owing-label {
  margin-bottom: 8px;
  color: var(--px-text-primary);
  font-weight: 600;
}

.bci-owing-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--px-border);
  border-radius: 6px;
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  margin-bottom: 12px;
  box-sizing: border-box;
}

.bci-owing-select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--px-border);
  border-radius: 6px;
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  margin-bottom: 12px;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  :where(.bc-item-card) .bc-item-content {
    flex-direction: column;
  }
  :where(.bc-item-card) .bc-item-buttons {
    min-width: unset;
    padding: 0 8px 8px;
  }
}

/* Touch-size overrides - compound selector beats base .bc-type-btn specificity */
:where(.bc-item-card) .bc-type-btn.px-btn-touch-sm,
:where(.bc-item-card) .bc-action-btn.px-btn-touch-sm {
  padding: 16px 20px;
  min-height: 52px;
  border-radius: 9999px;
  font-size: 0.85rem;
}