/* ==========================================================
   BitumenShop mobile overflow + responsive tables hotfix
   Scope: public site + admin panel
   Version: 1.0.0
   ========================================================== */

/* Never let a wide child resize the whole mobile viewport. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

/* Grid/flex children containing tables must be allowed to shrink. */
.admin-main,
.admin-main > *,
.panel,
.card,
.admin-card,
.table-panel,
.table-card,
.dashboard-grid,
.dashboard-card,
.form,
.form-grid,
.catalog-grid,
.ai-admin-grid,
.page-editor-form,
.catalog-pro-layout,
.container,
.rp-detail-grid,
.rp-source-content,
.rp-card-content,
.p3-content-grid,
.p4-article-layout,
.p4-page-grid,
.p4-rich-article,
.p4-page-content {
  min-width: 0;
  max-width: 100%;
}

/* ---------- Admin tables ---------- */
.table-wrap,
.admin-card.table-wrap,
.invoice-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}

.table-wrap > table,
.table-card .table-wrap > table,
.table-panel .table-wrap > table,
.admin-card.table-wrap > table,
.invoice-table-wrap > table {
  width: 100%;
  max-width: none;
}

/* Keep columns readable; the wrapper scrolls instead of breaking the page. */
.admin-table,
.table-card table,
.invoice-table,
.system-page .table-wrap table {
  min-width: 720px;
}

.admin-table th,
.table-card th,
.invoice-table th,
.table-wrap th {
  white-space: nowrap;
}

.admin-table td,
.table-card td,
.invoice-table td,
.table-wrap td {
  overflow-wrap: anywhere;
  word-break: normal;
}

.invoice-table-wrap {
  margin: 16px 0;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
}

.invoice-table-wrap .invoice-table {
  margin: 0;
}

/* ---------- Public/reference/specification tables ---------- */
.rp-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}

.rp-table {
  width: 100%;
  max-width: none;
  min-width: 620px;
}

.rp-table th {
  white-space: nowrap;
}

.rp-table td {
  overflow-wrap: anywhere;
}

/* Generic content tables not wrapped by older page content. */
.rp-source-content > table,
.p3-richtext > table,
.p4-rich-article > table,
.p4-page-content > table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.rp-source-content > table tbody,
.rp-source-content > table thead,
.rp-source-content > table tfoot,
.p3-richtext > table tbody,
.p3-richtext > table thead,
.p3-richtext > table tfoot,
.p4-rich-article > table tbody,
.p4-rich-article > table thead,
.p4-rich-article > table tfoot,
.p4-page-content > table tbody,
.p4-page-content > table thead,
.p4-page-content > table tfoot {
  min-width: 620px;
}

pre,
code {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .admin-main {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  .table-card,
  .table-panel,
  .admin-card.table-wrap,
  .invoice-sheet {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .invoice-sheet {
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  .admin-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .table-panel > h2 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .table-wrap,
  .invoice-table-wrap,
  .rp-table-wrap {
    position: relative;
  }

  /* Compact cells on phones without making the text microscopic. */
  .admin-table th,
  .admin-table td,
  .table-card th,
  .table-card td,
  .invoice-table th,
  .invoice-table td {
    padding: 11px 12px;
    font-size: 12px;
  }

  .rp-table th,
  .rp-table td {
    padding: 10px 11px;
    font-size: 12px;
  }

  .actions {
    min-width: 118px;
  }

  .invoice-summary {
    min-width: 0;
  }

  .invoice-summary > table {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .admin-table,
  .table-card table,
  .invoice-table {
    min-width: 650px;
  }

  .rp-table {
    min-width: 580px;
  }

  .admin-main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Print must remain full-width and must not become a scroll box. */
@media print {
  html,
  body {
    overflow: visible !important;
  }

  .invoice-table-wrap,
  .table-wrap {
    overflow: visible !important;
  }

  .invoice-table {
    min-width: 0 !important;
    width: 100% !important;
  }
}