/* Mobile UX — Estoque + Financeiro/Movimentações. CSS puro, sem runtime JS. */
@media (max-width: 640px) {
  /* ───────────────── ESTOQUE ───────────────── */
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"]) {
    padding-inline: 12px !important;
  }

  .page-container:has(.module-tabs[aria-label="Navegação do estoque"]) .module-tabs {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 3px;
  }

  .page-container:has(.module-tabs[aria-label="Navegação do estoque"]) .module-tab {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    white-space: nowrap !important;
  }

  /* Cabeçalho de Produtos: título/contagem juntos e filtro em linha própria. */
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"])
    > div:last-child > div:first-child {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 4px 10px !important;
    align-items: center !important;
    margin-bottom: 12px !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"])
    > div:last-child > div:first-child > div[style*="flex: 1"] {
    display: none !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"])
    > div:last-child > div:first-child > select {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 46px !important;
  }

  /* Produtos / Insumos / Substratos viram cards no celular. */
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper table,
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper thead {
    display: none !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper tbody tr.table-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px 12px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    background: var(--bg-card, #fff) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper tbody tr.table-row > td {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 13px !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper tbody tr.table-row > td::before {
    flex: 0 0 auto;
    color: var(--text-secondary, #6b7280);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
  }

  /* Nome/material é a manchete do card. */
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"])
    .table-wrapper tbody tr.table-row > td:nth-child(1),
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(2)[aria-selected="true"])
    .table-wrapper tbody tr.table-row > td:nth-child(1) {
    display: none !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"])
    .table-wrapper tbody tr.table-row > td:nth-child(2),
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(2)[aria-selected="true"])
    .table-wrapper tbody tr.table-row > td:nth-child(2),
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(3)[aria-selected="true"])
    .table-wrapper tbody tr.table-row > td:nth-child(1) {
    grid-column: 1 / -1 !important;
    display: block !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    color: var(--text-primary, #111827) !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper tbody tr.table-row > td:nth-child(2)::before,
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(3)[aria-selected="true"])
    .table-wrapper tbody tr.table-row > td:nth-child(1)::before {
    display: none !important;
  }

  /* Labels — Produtos */
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"]) .table-wrapper td:nth-child(3)::before { content: "Tipo"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"]) .table-wrapper td:nth-child(4)::before { content: "Unidade"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"]) .table-wrapper td:nth-child(5)::before { content: "Atual"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"]) .table-wrapper td:nth-child(6)::before { content: "Mín."; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"]) .table-wrapper td:nth-child(7)::before { content: "Preço"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(1)[aria-selected="true"]) .table-wrapper td:nth-child(8)::before { content: "Status"; }

  /* Labels — Insumos */
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(2)[aria-selected="true"]) .table-wrapper td:nth-child(3)::before { content: "Tipo"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(2)[aria-selected="true"]) .table-wrapper td:nth-child(4)::before { content: "Unidade"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(2)[aria-selected="true"]) .table-wrapper td:nth-child(5)::before { content: "Atual"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(2)[aria-selected="true"]) .table-wrapper td:nth-child(6)::before { content: "Mín."; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(2)[aria-selected="true"]) .table-wrapper td:nth-child(7)::before { content: "Custo"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(2)[aria-selected="true"]) .table-wrapper td:nth-child(8)::before { content: "Status"; }

  /* Labels — Substratos */
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(3)[aria-selected="true"]) .table-wrapper td:nth-child(2)::before { content: "Cor"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(3)[aria-selected="true"]) .table-wrapper td:nth-child(3)::before { content: "Tamanho"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(3)[aria-selected="true"]) .table-wrapper td:nth-child(4)::before { content: "Estoque"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(3)[aria-selected="true"]) .table-wrapper td:nth-child(5)::before { content: "Mín."; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(3)[aria-selected="true"]) .table-wrapper td:nth-child(6)::before { content: "Custo"; }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(3)[aria-selected="true"]) .table-wrapper td:nth-child(7)::before { content: "Status"; }

  /* Empty state continua normal. */
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper tbody tr:not(.table-row) {
    display: block !important;
    width: 100% !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação do estoque"] .module-tab:nth-child(-n+3)[aria-selected="true"])
    .table-wrapper .table-empty {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ───────── FINANCEIRO > MOVIMENTAÇÕES ───────── */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:first-child,
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:last-child > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Busca ocupa uma linha; período + atualizar + filtro ficam abaixo. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:first-child > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px 48px !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
    margin-bottom: 12px !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:first-child > div:first-child > :nth-child(1) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:first-child > div:first-child > :nth-child(2) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:first-child > div:first-child > :nth-child(3) {
    grid-column: 2 !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 46px !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:first-child > div:first-child > :nth-child(4) {
    grid-column: 3 !important;
    width: 48px !important;
    min-width: 48px !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:first-child > div:first-child > :nth-child(4) > button {
    width: 48px !important;
    min-width: 48px !important;
    height: 46px !important;
    justify-content: center !important;
  }

  /* Linha de movimentação: reserva menos espaço fixo para badge/valor. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:first-child > div:nth-child(2) > div > div > div:not(:first-child) {
    max-width: 100% !important;
  }

  /* Painel lateral vira seção inferior full-width. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:last-child > div > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    > div:last-child > div:last-child > div > div:first-child button {
    min-height: 44px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    background: var(--bg-hover, #f9fafb) !important;
  }

  /* Popup de filtro nunca ultrapassa a viewport. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"] .module-tab:nth-child(4)[aria-selected="true"])
    div[style*="width: 260px"][style*="position: absolute"] {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 180px !important;
    width: auto !important;
    max-height: calc(100dvh - 200px) !important;
    overflow-y: auto !important;
  }
}