/* ===== gtin_mappings_html (HTML form, scoped) =====
   The GTIN Mappings screen, the section's shell. Loaded eagerly from
   anvil.yaml native_deps.head_html.

   SCOPE. The root is .gm-page. Two shapes name the root itself and stay bare,
   because a :where(.gm-page) wrapper in front of them would never match: the
   .gm-page root rule and [data-theme="dark"] .gm-page. Everything else is
   :where(.gm-page)-scoped, which adds zero specificity.

   THE ROOT HAS NO height: 100% AND NO overflow-y: auto. The root is the flex
   item inside main's scrolling content slot; either declaration would move the
   scrollbar off the layout onto the page. The root stays a block sized by its
   content. No flex: 1 0 auto either: with the root's background it would
   stretch that colour down the page when the content is short.
   position: relative anchors the #gm-loading overlay.

   .themed-scrollbar on the root is the dependency's class and is not declared
   here. The scrollbar the operator sees belongs to main's mount div.

   .gm-mapping-rows-mount carries no declarations and gets no rule.

   No component-reset twin is needed here: .gm-page has no .px-anvil-reset
   ancestor. The children's assets carry their own.

   ORDER. The one .px-* rule, .gm-actions .px-btn { width: 100% } in the 620px
   block, is (0,2,0) and the dependency's .px-btn declares no width, so there is
   no tie to lose.

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

   .gm-readonly-note and .gm-empty are hidden by this form's own stylesheet,
   which the designer loads, so the canvas hides them too. */

.gm-page {
  --accent: #0f766e;
  --accent-hover: #115e59;
  --accent-subtle: rgba(15,118,110,0.12);
  --px-loading-accent: #0f766e;
  background: var(--px-bg-deep);
  color: var(--px-text-primary);
  font-family: var(--px-font);
  position: relative;
}
[data-theme="dark"] .gm-page {
  --accent: #2dd4bf;
  --accent-hover: #14b8a6;
  --accent-subtle: rgba(45,212,191,0.14);
}
:where(.gm-page) .gm-content { padding: 24px 32px; display: flex; flex-direction: column; gap: 18px; }
:where(.gm-page) .gm-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
:where(.gm-page) .gm-title-row { display: flex; align-items: center; gap: 12px; }
:where(.gm-page) .gm-count {
  min-width: 28px; padding: 3px 10px; border-radius: 999px;
  background: var(--accent); color: #fff; text-align: center;
  font: 700 0.72rem var(--px-mono);
}
:where(.gm-page) .gm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
:where(.gm-page) .gm-toolbar {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--px-border); border-radius: var(--px-radius);
  background: var(--px-bg-card);
}
:where(.gm-page) .gm-search {
  flex: 1; min-width: 220px; padding: 10px 13px;
  border: 1px solid var(--px-border); border-radius: var(--px-radius-sm);
  background: var(--px-input-bg); color: var(--px-text-primary);
  font: 0.875rem var(--px-font); outline: none;
}
:where(.gm-page) .gm-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
:where(.gm-page) .gm-readonly-note {
  display: none; padding: 10px 12px; border-radius: var(--px-radius-sm);
  background: var(--px-bg-elevated); color: var(--px-text-muted);
  font: 0.72rem var(--px-mono);
}
:where(.gm-page) .gm-list-shell {
  border: 1px solid var(--px-border); border-radius: var(--px-radius);
  background: var(--px-bg-card); overflow: hidden;
}
:where(.gm-page) .gm-columns {
  display: grid; grid-template-columns: 170px minmax(280px, 1.5fr) minmax(210px, 1fr) 150px;
  gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--px-border);
  background: var(--px-bg-elevated); color: var(--px-text-muted);
  font: 700 0.65rem var(--px-mono); text-transform: uppercase; letter-spacing: 0.08em;
}
:where(.gm-page) .gm-empty {
  display: none; padding: 48px 20px; text-align: center;
  color: var(--px-text-muted); font: 0.8rem var(--px-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}
:where(.gm-page) .gm-empty.gm-visible { display: block; }
@media (max-width: 900px) {
  :where(.gm-page) .gm-content { padding: 16px; }
  :where(.gm-page) .gm-columns { display: none; }
}
@media (max-width: 620px) {
  :where(.gm-page) .gm-content { padding: 12px; }
  :where(.gm-page) .gm-header { flex-direction: column; }
  :where(.gm-page) .gm-actions, :where(.gm-page) .gm-actions .px-btn { width: 100%; }
  :where(.gm-page) .gm-toolbar { flex-direction: column; align-items: stretch; }
}