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

   SCOPE. The root is .gmr-row. The rules whose SUBJECT is the root stay BARE
   (.gmr-row, .gmr-row:hover, .gmr-row.gmr-inactive, and .gmr-row inside the
   900px media query), because wrapped as :where(.gmr-row) .gmr-row they would
   never match. The descendant rules are :where(.gmr-row)-scoped.

   .gmr-action is written as the compound .px-btn.gmr-action at (0,2,0). The
   dependency's .px-btn declares `white-space: nowrap` and is appended to
   <head> after this link, so a (0,1,0) rule would tie and lose, and the
   "Use dm+d data" label would stop wrapping onto two lines.

   COUPLING: .gmr-row's grid columns must stay identical to .gm-columns' in
   gtin_mappings_html.css, and the two 900px media queries must stay in step.
   They are the header and the rows of one table.

   .gmr-conflict-copy's `display: none` is this form's own rule, which the
   designer loads, so the canvas hides it too. */

.gmr-row {
  display: grid; grid-template-columns: 170px minmax(280px, 1.5fr) minmax(210px, 1fr) 150px;
  gap: 16px; align-items: center; padding: 15px 16px;
  border-bottom: 1px solid var(--px-border); background: var(--px-bg-card);
}
/* COMPONENT-RESET TWIN. theme.css declares `.px-anvil-reset .anvil-component
   { padding: 0 !important; border: none !important }` at (0,2,0). This root sits
   under the shell root .gm-page.px-anvil-reset and IS the component node, so IF
   the runtime stamps anvil-component on it the reset kills the padding and the
   separator line. The twin below is (0,3,0), heavier than the reset whatever the
   head-link order, and re-states the same two values, so it is a no-op if the
   class never lands. The bare rule above stays for the designer canvas, which has
   no .px-anvil-reset ancestor. No media query overrides this row's padding or
   border. */
.px-anvil-reset .gmr-row.px-anvil-reset {
  padding: 15px 16px !important;
  border-bottom: 1px solid var(--px-border) !important;
}
.gmr-row:hover { background: var(--px-bg-elevated); }
.gmr-row.gmr-inactive { opacity: 0.68; }
:where(.gmr-row) .gmr-gtin { color: var(--px-text-primary); font: 700 0.82rem var(--px-mono); letter-spacing: 0.04em; }
:where(.gmr-row) .gmr-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
:where(.gmr-row) .gmr-badge {
  padding: 2px 7px; border-radius: 999px; font: 700 0.6rem var(--px-mono);
  text-transform: uppercase; letter-spacing: 0.05em;
}
:where(.gmr-row) .gmr-active { color: var(--px-success); background: rgba(5,150,105,0.12); }
:where(.gmr-row) .gmr-inactive-badge { color: var(--px-text-muted); background: var(--px-bg-deep); }
:where(.gmr-row) .gmr-conflict { color: var(--px-danger); background: rgba(220,38,38,0.12); }
:where(.gmr-row) .gmr-product { color: var(--px-text-primary); font-size: 0.86rem; font-weight: 700; line-height: 1.35; }
:where(.gmr-row) .gmr-meta { color: var(--px-text-muted); font: 0.68rem var(--px-mono); line-height: 1.55; }
:where(.gmr-row) .gmr-conflict-copy {
  display: none; margin-top: 7px; color: var(--px-danger); font-size: 0.72rem; line-height: 1.4;
}
:where(.gmr-row) .gmr-audit {
  color: var(--px-text-secondary); font-size: 0.75rem;
  line-height: 1.5; white-space: pre-line;
}
:where(.gmr-row) .gmr-action-wrap { display: flex; justify-content: flex-end; }
:where(.gmr-row) .px-btn.gmr-action { white-space: normal; text-align: center; }
@media (max-width: 900px) {
  .gmr-row { grid-template-columns: 1fr; gap: 10px; }
  :where(.gmr-row) .gmr-action-wrap { justify-content: flex-start; }
}