/* ===== gtin_mapping_add_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.

   The form root is <div class="gma-form px-anvil-reset">. .gma-form stays a BARE rule: it is the
   root's own rule and it declares the three --accent tokens the whole subtree reads.
   [data-theme="dark"] .gma-form stays bare too - it already leads with an attribute selector on
   <html>, so wrapping the class in :where() would only weaken it. Everything else is scoped
   :where(.gma-form), which adds no specificity and so cannot change which rule wins.

   The --accent block is duplicated in gtin_mappings_html.css on .gm-page, deliberately: it is a
   ROOT rule of two different forms and each designer canvas has to resolve its own tokens.

   The pack results are plain elements gtin_mapping_add.mjs builds inside .gma-groups: a
   .gma-group per medicine, its .gma-pack-row packs and an optional .gma-show-all button. They are
   not Anvil components, so theme.css's .px-anvil-reset rules (which target .anvil-* classes
   only) never reach them and they need no reset twin.

   .gma-pack-select and .gma-show-all carry .px-btn classes from the dependency theme, which is
   injected into <head> at runtime AFTER this link. Neither declares `flex`, so the flex
   declaration below has no order tie to lose.

   No .themed-scrollbar rule: that class is the dependency's. .gma-selected and .gma-error are
   hidden by this form's own stylesheet, which the designer loads. */

.gma-form {
  --accent: #0f766e;
  --accent-hover: #115e59;
  --accent-subtle: rgba(15,118,110,0.12);
  display: flex; flex-direction: column; gap: 18px;
  color: var(--px-text-primary); font-family: var(--px-font);
}
[data-theme="dark"] .gma-form { --accent: #2dd4bf; --accent-hover: #14b8a6; --accent-subtle: rgba(45,212,191,0.14); }
:where(.gma-form) .gma-intro { color: var(--px-text-secondary); font-size: 0.86rem; line-height: 1.5; }
:where(.gma-form) .gma-grid { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.4fr); gap: 18px; }
:where(.gma-form) .gma-panel {
  border: 1px solid var(--px-border); border-radius: var(--px-radius);
  background: var(--px-bg-card); padding: 16px; display: flex;
  flex-direction: column; gap: 12px; min-width: 0;
}
:where(.gma-form) .gma-label {
  color: var(--px-text-muted); font: 700 0.67rem var(--px-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}
:where(.gma-form) .gma-input {
  width: 100%; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--px-border); border-radius: var(--px-radius-sm);
  background: var(--px-input-bg); color: var(--px-text-primary);
  font: 0.86rem var(--px-font); outline: none;
}
:where(.gma-form) .gma-input.gma-gtin { font-family: var(--px-mono); letter-spacing: 0.08em; }
:where(.gma-form) .gma-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
:where(.gma-form) .gma-input:read-only { opacity: 0.75; cursor: not-allowed; background: var(--px-bg-elevated); }
:where(.gma-form) .gma-help { color: var(--px-text-muted); font-size: 0.72rem; line-height: 1.45; }
:where(.gma-form) .gma-results {
  max-height: 420px; overflow-y: auto; border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm); background: var(--px-bg-card);
}
:where(.gma-form) .gma-result-state { padding: 14px; color: var(--px-text-muted); font: 0.72rem var(--px-mono); }
:where(.gma-form) .gma-group-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-top: 1px solid var(--px-border); border-bottom: 1px solid var(--px-border);
  background: var(--px-bg-elevated);
}
:where(.gma-form) .gma-group-name { color: var(--px-text-primary); font-weight: 700; font-size: 0.84rem; line-height: 1.35; }
:where(.gma-form) .gma-group-count { flex: 0 0 auto; color: var(--px-text-muted); font: 0.68rem var(--px-mono); }
:where(.gma-form) .gma-pack-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 12px; border-bottom: 1px solid var(--px-border);
  background: var(--px-bg-card); cursor: pointer;
}
:where(.gma-form) .gma-pack-row:hover, :where(.gma-form) .gma-pack-row.gma-pack-selected { background: var(--accent-subtle); }
:where(.gma-form) .gma-pack-main { min-width: 0; }
:where(.gma-form) .gma-pack-name { color: var(--px-text-primary); font-size: 0.84rem; line-height: 1.35; }
:where(.gma-form) .gma-pack-brand { margin-top: 2px; color: var(--px-text-secondary); font-size: 0.76rem; line-height: 1.35; }
:where(.gma-form) .gma-pack-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
:where(.gma-form) .gma-pack-id { color: var(--px-text-muted); font: 0.68rem var(--px-mono); }
:where(.gma-form) .gma-pack-badge {
  padding: 1px 7px; border-radius: 999px; font: 700 0.6rem var(--px-mono);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--px-danger); background: rgba(220,38,38,0.12);
}
:where(.gma-form) .gma-pack-select { flex: 0 0 auto; }
:where(.gma-form) .gma-show-all { margin: 8px 12px; }
:where(.gma-form) .gma-selected {
  display: none; padding: 12px; border: 1px solid var(--accent);
  border-radius: var(--px-radius-sm); background: var(--accent-subtle);
}
:where(.gma-form) .gma-selected-name { font-weight: 700; font-size: 0.86rem; line-height: 1.4; }
:where(.gma-form) .gma-selected-id { margin-top: 4px; color: var(--px-text-muted); font: 0.7rem var(--px-mono); }
:where(.gma-form) .gma-error {
  display: none; padding: 10px 12px; border-radius: var(--px-radius-sm);
  background: rgba(220,38,38,0.1); color: var(--px-danger); font-size: 0.8rem;
}
:where(.gma-form) .gma-footer { display: flex; justify-content: flex-end; }
@media (max-width: 760px) { :where(.gma-form) .gma-grid { grid-template-columns: 1fr; } }