/* ONDAX_MOBILE_UX_FIX_20260705
   Escopo: somente telas pequenas. Mantém desktop intacto e transforma tabelas críticas em cards. */

@media (max-width: 768px) {
  .app-header {
    z-index: 1000 !important;
    overflow: visible !important;
  }

  .app-header .app-header-line {
    display: none !important;
  }

  .app-subnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 12px 10px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #dde6f0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .app-subnav::-webkit-scrollbar {
    display: none !important;
  }

  .app-subnav-link {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 8px 11px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    border: 1px solid transparent !important;
  }

  .app-subnav-link.active {
    background: #dff0ea !important;
    border-color: #a7d8c8 !important;
    color: #075f58 !important;
  }

  .page,
  .pedidos-container,
  .compras-page {
    padding: 14px 12px 28px !important;
  }
}

@media (max-width: 768px) {
  .pedidos-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .pedidos-container .pedidos-header,
  .pedidos-container .pedidos-topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .pedidos-container .pedidos-inline-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #dbe4f0 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
  }

  .pedidos-container .pedidos-inline-controls .global-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  .pedidos-container .pedidos-inline-controls .filter-select,
  .pedidos-container .pedidos-inline-controls .refresh-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  .pedidos-container .pedidos-inline-controls .refresh-button {
    min-height: 42px !important;
    border-radius: 12px !important;
  }

  .pedidos-container .sales-indicators {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .pedidos-container .sales-indicator {
    min-height: 68px !important;
    border-radius: 16px !important;
  }

  .pedidos-container .logistics-summary {
    margin: 0 !important;
    gap: 6px 10px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
  }

  .pedidos-container .pedidos-table-container {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .pedidos-container .pedidos-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .pedidos-container .pedidos-table colgroup,
  .pedidos-container .pedidos-table thead {
    display: none !important;
  }

  .pedidos-container .pedidos-table tbody {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .pedidos-container .pedidos-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid #dbe4f0 !important;
    border-left: 4px solid #0f766e !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    overflow: visible !important;
  }

  .pedidos-container .pedidos-table td {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed #e5edf5 !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .pedidos-container .pedidos-table td:last-child {
    border-bottom: 0 !important;
  }

  .pedidos-container .pedidos-table td::before {
    content: attr(data-label) !important;
    flex: 0 0 92px !important;
    max-width: 92px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .pedidos-container .pedidos-table td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .pedidos-container .pedidos-table .product-cell,
  .pedidos-container .pedidos-table td[data-label="Produto"],
  .pedidos-container .pedidos-table td[data-label="Tracking"] {
    align-items: flex-start !important;
  }

  .pedidos-container .pedidos-table .product-cell .product-name,
  .pedidos-container .pedidos-table td[data-label="Produto"] .product-name {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
  }

  .pedidos-container .pedidos-pagination {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .pedidos-container .pagination-info {
    order: -1 !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  .compras-page .pedidos-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 12px 0 4px !important;
  }

  .compras-page .pedidos-header h1 {
    font-size: 24px !important;
  }

  .compras-page .page-subtitle {
    display: none !important;
  }

  .compras-page .flow-header-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: min(100%, 260px) !important;
    margin: 0 auto !important;
  }

  .compras-page .flow-header-actions .refresh-button {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 12px !important;
  }

  .compras-page .pedidos-table-container {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .compras-page .pedidos-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .compras-page .pedidos-table colgroup,
  .compras-page .pedidos-table thead {
    display: none !important;
  }

  .compras-page .pedidos-table tbody {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .compras-page .pedidos-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid #dbe4f0 !important;
    border-left: 4px solid #7c3aed !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    overflow: visible !important;
  }

  .compras-page .pedidos-table td {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed #e5edf5 !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .compras-page .pedidos-table td:last-child {
    border-bottom: 0 !important;
  }

  .compras-page .pedidos-table td::before {
    content: attr(data-label) !important;
    flex: 0 0 96px !important;
    max-width: 96px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .compras-page .pedidos-table td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .compras-page .flow-input-shell,
  .compras-page .faturar-nf-cell,
  .compras-page .marketplace-cell,
  .compras-page .flow-product-wrap,
  .compras-page .actions,
  .compras-page .flow-actions-menu {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .compras-page .product-cell .flow-product-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .compras-page .product-name,
  .compras-page .product-name-copy {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    text-align: left !important;
  }

  .compras-page .flow-edit-cell {
    min-width: 0 !important;
  }

  .compras-page .flow-input,
  .compras-page .flow-input-shell input,
  .compras-page .flow-input-shell select,
  .compras-page .flow-input-shell textarea {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  .compras-page .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .compras-page .actions .button,
  .compras-page .flow-actions-menu summary {
    width: 100% !important;
    max-width: none !important;
    min-height: 40px !important;
  }

  .compras-page .pedidos-pagination {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .compras-page .pagination-info {
    order: -1 !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  .compras-page[class*="flow-stage-"] .pedidos-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .compras-page[class*="flow-stage-"] .pedidos-table thead tr,
  .compras-page[class*="flow-stage-"] .pedidos-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
  }

  .compras-page[class*="flow-stage-"] .pedidos-table tbody tr {
    margin: 0 !important;
    border: 1px solid #dbe4f0 !important;
    border-left: 4px solid #7c3aed !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    overflow: visible !important;
  }

  .compras-page[class*="flow-stage-"] .pedidos-table th,
  .compras-page[class*="flow-stage-"] .pedidos-table td {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  .compras-page[class*="flow-stage-"] .pedidos-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 106px !important;
    margin: 0 0 14px !important;
    padding: 12px 0 4px !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .compras-page[class*="flow-stage-"] .pedidos-header > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .compras-page[class*="flow-stage-"] .flow-header-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: min(100%, 260px) !important;
    height: auto !important;
    margin: 0 auto !important;
    position: static !important;
  }

  .compras-page.flow-stage-compras .pedidos-header {
    position: relative !important;
    z-index: 3 !important;
    min-height: 150px !important;
    margin-bottom: 16px !important;
    overflow: visible !important;
  }

  .compras-page.flow-stage-compras .flow-header-actions {
    position: relative !important;
    z-index: 4 !important;
    margin-bottom: 6px !important;
  }

  .compras-page.flow-stage-compras .pedidos-table-container {
    clear: both !important;
    margin-top: 10px !important;
  }

  .compras-page.flow-stage-faturar .pedidos-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    grid-template-columns: none !important;
  }

  .compras-page.flow-stage-faturar .pedidos-table tbody tr > td:nth-child(n) {
    display: flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    order: initial !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0 !important;
  }

  .compras-page.flow-stage-faturar .pedidos-table td::before {
    flex: 0 0 104px !important;
    max-width: 104px !important;
  }

  .compras-page.flow-stage-faturar .flow-order-cell {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
  }

  .compras-page.flow-stage-faturar .flow-order-cell::before {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
  }

  .compras-page.flow-stage-faturar .flow-order-cell strong,
  .compras-page.flow-stage-faturar .flow-order-cell small {
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .compras-page.flow-stage-faturar .flow-order-cell strong {
    grid-row: 1 !important;
  }

  .compras-page.flow-stage-faturar .flow-order-cell small {
    grid-row: 2 !important;
    justify-self: start !important;
  }

  .compras-page[class*="flow-stage-"] .pedidos-table tbody tr > td.flow-order-cell:nth-child(n) {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    min-height: 52px !important;
  }

  .compras-page[class*="flow-stage-"] .pedidos-table tbody tr > td.flow-order-cell:nth-child(n)::before {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
  }

  .compras-page[class*="flow-stage-"] .pedidos-table tbody tr > td.flow-order-cell:nth-child(n) strong,
  .compras-page[class*="flow-stage-"] .pedidos-table tbody tr > td.flow-order-cell:nth-child(n) small {
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .compras-page[class*="flow-stage-"] .pedidos-table tbody tr > td.flow-order-cell:nth-child(n) strong {
    grid-row: 1 !important;
  }

  .compras-page[class*="flow-stage-"] .pedidos-table tbody tr > td.flow-order-cell:nth-child(n) small {
    grid-row: 2 !important;
    justify-self: start !important;
  }

  .compras-page.flow-stage-faturar .flow-product-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .compras-page.flow-stage-faturar .product-name {
    max-height: none !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  .compras-page.flow-stage-faturar .faturar-nf-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .compras-page.flow-stage-faturar .faturar-nf-cell > * {
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: 100% !important;
  }

  .compras-page.flow-stage-faturar .faturar-nf-cell > .faturar-nf-fields:nth-of-type(n),
  .compras-page.flow-stage-faturar .faturar-nf-cell > a:nth-of-type(n),
  .compras-page.flow-stage-faturar .faturar-nf-cell > small:nth-of-type(n),
  .compras-page.flow-stage-faturar .faturar-nf-cell > button:nth-of-type(n) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .compras-page.flow-stage-faturar .faturar-nf-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .compras-page.flow-stage-faturar .flow-actions-menu {
    width: 100% !important;
  }

  .compras-page.flow-stage-faturar .flow-actions-menu-list {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}