img, .img-fluid {
  max-width: 100%;
  height: auto;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
  body.app main.container-fluid {
    max-width: 100%;
    padding: 1rem;
  }
}

@media (max-width: 992px) {
  body:not(.app) {
    overflow: auto;
    height: auto;
  }
  .pdv-topbar {
    grid-template-columns: 1fr;
    height: auto;
    padding: 8px 12px;
  }
  .pdv-stage {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .pdv-main {
    height: auto;
    order: 1;
  }
  .pdv-sidebar {
    order: 2;
  }
  .entrada-grid {
    grid-template-columns: 1fr 1fr;
  }
  .campo-codigo {
    grid-column: 1 / -1;
  }
  .cupom-area.table-responsive {
    max-height: 50vh;
  }
}

@media (max-width: 576px) {
  .entrada-grid {
    grid-template-columns: 1fr;
  }
  .produto-atual-top {
    font-size: 1rem;
  }
  .total-pagar .total-value {
    font-size: 1.6rem;
  }
  .cupom-area.table-responsive {
    max-height: 40vh;
  }
  .pdv-footerbar {
    grid-template-columns: 1fr;
    gap: 6px;
    height: auto;
    padding: 6px 8px;
  }
}

/* Fix overflow hidden in themed cards to allow horizontal scroll for tables */
body.app .card .table-responsive {
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Helper: force wider tables so all columns appear with horizontal scroll */
.table-wide {
  min-width: 1100px;
}
.table-wide th,
.table-wide td {
  white-space: nowrap;
}

/* Make wide tables size to their content so overflow can occur */
.table-responsive > .table-wide {
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;
  display: inline-table;
}

/* Always show horizontal scroll on small screens and avoid parent clipping */
@media (max-width: 768px) {
  body.app .card { overflow: visible !important; }
  body.app .card .table-responsive {
    overflow-x: scroll !important;
    padding-bottom: 8px;
    touch-action: pan-x;
  }
  /* ensure any table-responsive shows a horizontal scrollbar */
  .table-responsive { overflow-x: scroll !important; }
  /* force wide table width to trigger horizontal overflow */
  .table-responsive > .table-wide {
    min-width: 1400px !important;
    width: 1400px !important;
  }
  /* avoid card body clipping the scrollbar */
  body.app .card .card-body { overflow: visible !important; }
  /* reasonable column widths */
  .table-wide th, .table-wide td { min-width: 120px; }
  .table-wide th:nth-child(1), .table-wide td:nth-child(1) { min-width: 160px; }
  .table-wide th:nth-child(2), .table-wide td:nth-child(2) { min-width: 220px; }
  /* visible thin scrollbar */
  body.app .card .table-responsive { scrollbar-width: thin; }
  body.app .card .table-responsive::-webkit-scrollbar { height: 8px; }
  body.app .card .table-responsive::-webkit-scrollbar-track { background: #eef2f7; border-radius: 4px; }
  body.app .card .table-responsive::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
}