/* Monfer 2.0 - Fase 2: camada visual isolada da consulta de Produtos. */
#pageProdutos #produtosTableWrapper {
  min-height: 220px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

#pageProdutos #produtosTableWrapper .data-table {
  min-width: 1180px;
}

#pageProdutos :is(input, select, button):focus-visible {
  outline: 2px solid var(--m2-pilot-accent);
  outline-offset: 2px;
}

.wm-body:has(#produtoDadosGrid) .modal-header {
  align-items: flex-start;
  gap: 12px;
}

.wm-body:has(#produtoDadosGrid) .modal-header > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wm-body:has(#produtoDadosGrid) .prod-tabs {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.wm-body:has(#produtoDadosGrid) .prod-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
}

.wm-body:has(#produtoDadosGrid) .prod-tab:focus-visible {
  outline: 2px solid var(--m2-pilot-accent);
  outline-offset: -2px;
}

#prodMassaDialog {
  width: min(720px, 100%);
}

#prodMassaDialog .prod-massa-help {
  color: var(--text-muted);
  font-size: 13px;
}

#prodMassaDialog .prod-massa-row {
  display: grid;
  grid-template-columns: 28px 140px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

#prodMassaDialog .prod-massa-row > label {
  font-weight: 700;
  cursor: pointer;
}

#prodMassaDialog .prod-massa-field {
  opacity: .45;
  pointer-events: none;
}

#prodMassaDialog .prod-massa-field :is(input, select, textarea) {
  width: 100%;
}

#prodMassaDialog .prod-massa-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 760px) {
  #pageProdutos > .page-header { align-items: stretch; flex-direction: column; }
  #pageProdutos > .page-header .actions { display: grid; grid-template-columns: 1fr 1fr; }
  #pageProdutos > .data-card > .data-card-header { align-items: stretch; flex-direction: column; }
  #pageProdutos .search-bar { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #pageProdutos .search-bar > * { width: 100% !important; min-width: 0; }
  #pageProdutos :is(#prodBusca, #btnSyncCadastros) { grid-column: 1 / -1; }
  .wm-body:has(#produtoDadosGrid) .modal-header { flex-direction: column; }
  .wm-body:has(#produtoDadosGrid) .modal-header > div { justify-content: flex-start; width: 100%; }
  .wm-body:has(#produtoDadosGrid) .modal-body { padding-inline: 10px; }
  .wm-body:has(#produtoDadosGrid) .detail-grid-danfe { grid-template-columns: 1fr 1fr; }
  #prodMassaDialog .prod-massa-row { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
  #prodMassaDialog .prod-massa-field { grid-column: 2; width: 100%; }
}

@media (max-width: 480px) {
  .wm-body:has(#produtoDadosGrid) .detail-grid-danfe { grid-template-columns: 1fr; }
  .wm-body:has(#produtoDadosGrid) #prodImagensGaleria .btn { margin-block: 3px; }
  #prodMassaDialog .prod-massa-actions { display: grid; grid-template-columns: 1fr; }
  #prodMassaDialog .prod-massa-actions .btn-primary { grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #pageProdutos * { transition: none !important; }
}