/* =========================================================
   Pixzell Responsive Core
   Shared by every UI page in incentive-products.
   ========================================================= */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body { min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }
canvas { max-width: 100% !important; }

/* Main content must follow the sidebar at every desktop width. */
#content.content,
#content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#content > *, .dashboard-wrapper, .container, .container-fluid { min-width: 0; }

/* Shared page headers and action areas */
.app-page-header {
  min-width: 0;
}
.app-page-header > * { min-width: 0; }
.app-page-header .d-flex,
.app-toolbar,
.card-header .d-flex,
.modal-footer {
  flex-wrap: wrap;
}
.app-page-title {
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.app-page-subtitle { overflow-wrap: anywhere; }

/* Inputs / Select2 */
.form-control, .form-select, .input-group, .select2-container {
  max-width: 100%;
}
.select2-container { min-width: 0 !important; }
.select2-container .select2-selection__rendered {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tables: every table may scroll horizontally instead of widening the page. */
.responsive-table-wrap,
.table-responsive,
.dt-container .dt-layout-table,
.dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.responsive-table-wrap > table,
.table-responsive > table { margin-bottom: 0; }
table { max-width: 100%; }
table th, table td { vertical-align: middle; }

/* DataTables controls */
.dt-container .dt-layout-row {
  gap: 8px;
  flex-wrap: wrap;
}
.dt-container .dt-layout-cell { min-width: 0; }
.dt-container .dt-search input,
.dt-container .dt-length select { max-width: 100%; }

/* Cards, charts, progress and list content */
.card, .app-card, .summary-card, .table-card,
.chart-wrapper, .leaderboard-card, .activity-card {
  min-width: 0;
  max-width: 100%;
}
.progress { max-width: 100%; }
.activity-row, .activity-headline, .activity-summary { min-width: 0; }

/* Modals must never escape the viewport. */
.modal-dialog {
  max-width: min(var(--bs-modal-width, 500px), calc(100vw - 24px));
  margin-left: auto;
  margin-right: auto;
}
.modal-content { max-height: calc(100vh - 24px); }
.modal-body { overflow-y: auto; }
.swal2-popup { max-width: calc(100vw - 24px) !important; }

/* Desktop / notebook */
@media (min-width: 992px) {
  #content.content,
  #content {
    margin-left: var(--sidebar-current-width, 250px) !important;
    width: calc(100% - var(--sidebar-current-width, 250px)) !important;
    max-width: calc(100% - var(--sidebar-current-width, 250px)) !important;
  }
}

/* Tablet and mobile: sidebar becomes off-canvas. */
@media (max-width: 991.98px) {
  body { padding: 0 !important; }

  #content.content,
  #content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
  }

  #sidebar {
    width: min(290px, 86vw) !important;
    max-width: 86vw !important;
    transform: translateX(-105%);
    transition: transform .25s ease !important;
    box-shadow: 8px 0 28px rgba(0,0,0,.22);
  }
  #sidebar.sidebar-mobile-open { transform: translateX(0); }
  #sidebar.sidebar-collapsed { width: min(290px, 86vw) !important; }
  #sidebar.sidebar-collapsed .link-text { display: inline !important; }
  #sidebar.sidebar-collapsed #sidebarTitle {
    opacity: 1 !important;
    width: auto !important;
    pointer-events: auto !important;
  }
  #sidebar.sidebar-collapsed #sidebarToggle {
    position: static !important;
    left: auto !important;
  }
  #sidebar.sidebar-collapsed .sidebar-main-back {
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    border-left-width: 4px !important;
  }

  .pixzell-mobile-menu-btn {
    position: fixed;
    left: 12px;
    bottom: 14px;
    z-index: 1255;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1f1f1f;
    color: #ff4d4f;
    box-shadow: 0 7px 22px rgba(0,0,0,.25);
    font-size: 1.25rem;
  }
  .pixzell-mobile-menu-btn:active { transform: scale(.96); }
  .pixzell-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1095;
    background: rgba(0,0,0,.38);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .pixzell-sidebar-backdrop.show { opacity: 1; visibility: visible; }

  .app-page-header {
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  .app-page-header > .d-flex:last-child {
    width: 100%;
    gap: 8px !important;
  }
  .app-page-header > .d-flex:last-child > .btn,
  .app-page-header > .d-flex:last-child > a.btn {
    flex: 1 1 160px;
  }

  .app-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
  }
  .app-toolbar > * { min-width: 0; }

  /* Let Bootstrap grids breathe on tablet. */
  .row { --bs-gutter-x: 1rem; }

  /* Inline fixed widths from legacy pages must not overflow tablet. */
  #content input[style*="width:"],
  #content select[style*="width:"],
  #content .form-control[style*="max-width:"],
  #content .form-select[style*="max-width:"] {
    max-width: 100% !important;
  }

  .tp-progress { min-width: 120px !important; }
}

/* Phone */
@media (max-width: 575.98px) {
  #content.content,
  #content { padding: 10px !important; }

  .dashboard-wrapper { padding: 0 !important; }
  .app-page-title { font-size: 1.3rem !important; }
  .app-page-subtitle { font-size: .82rem; }
  .app-page-header { padding-left: 0; padding-right: 0; }

  .app-card, .summary-card, .table-card { border-radius: 11px !important; }
  .app-card { padding-left: 12px; padding-right: 12px; }
  .summary-card { padding: 13px !important; }
  .summary-card .value, .app-stat-value { font-size: 1.35rem !important; }

  /* Buttons remain tappable but compact. */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 32px; }
  .app-page-header > .d-flex:last-child > .btn,
  .app-page-header > .d-flex:last-child > a.btn { flex: 1 1 calc(50% - 4px); }

  /* Filters/forms stack naturally. */
  .app-toolbar > .form-control,
  .app-toolbar > .form-select,
  .app-toolbar > .select2,
  .app-toolbar > .select2-container,
  #content input[style*="width:"],
  #content select[style*="width:"],
  #content input[style*="max-width:"],
  #content select[style*="max-width:"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tables stay readable: scroll rather than squeeze every column. */
  .responsive-table-wrap table,
  .table-responsive table,
  .dt-container table { min-width: 680px; }
  .responsive-table-wrap table.table-compact-mobile { min-width: 560px; }
  table th, table td { padding: 7px 8px !important; font-size: .82rem; }

  .dt-container .dt-layout-row { display: flex !important; flex-direction: column; align-items: stretch !important; }
  .dt-container .dt-layout-cell { width: 100%; }
  .dt-container .dt-search { display: flex; align-items: center; gap: 6px; }
  .dt-container .dt-search input { flex: 1 1 auto; min-width: 0; }

  .modal-dialog { max-width: calc(100vw - 16px); margin: 8px auto; }
  .modal-content { max-height: calc(100vh - 16px); }

  /* Report target blocks */
  .tp-progress { min-width: 145px !important; }
  .tp-name-detail, .tp-mix-breakdown { max-width: none !important; }

  /* Activity table becomes cards/rows, existing dashboard CSS already hides heading. */
  .activity-card { padding: 9px 10px !important; }
  .activity-time { white-space: normal !important; }

  /* Charts */
  .chart-wrapper, .leaderboard-chart-wrap { width: 100% !important; max-width: 100% !important; }
  .chart-wrapper canvas, .leaderboard-chart-wrap canvas { max-width: 100% !important; }
}

/* Very small phones */
@media (max-width: 390px) {
  #content.content, #content { padding: 8px !important; }
  .app-page-title { font-size: 1.2rem !important; }
  .app-page-header > .d-flex:last-child > .btn,
  .app-page-header > .d-flex:last-child > a.btn { flex-basis: 100%; }
  .summary-card .title, .app-stat-label { font-size: .78rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar, #content, .pixzell-sidebar-backdrop { transition: none !important; }
}

/* Extra page-level responsive rules for the existing Pixzell screens */
@media (max-width: 767.98px) {
  /* Dashboard date/month controls: stop absolute controls from overlapping. */
  .summary-zone > .position-relative {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
    padding-top: 0 !important;
  }
  .summary-zone > .position-relative > .position-absolute {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  .summary-zone > .position-relative > .position-absolute .d-flex,
  .summary-zone > .position-relative > .position-absolute.d-flex {
    justify-content: center;
    flex-wrap: wrap;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .summary-zone #dashboardDate { width: min(190px, 100%) !important; max-width: 100% !important; }
  .summary-zone #dashboardDateText { font-size: 1.25rem !important; }

  /* Report/settings tabs: keep one readable row and allow swipe. */
  #content .nav-tabs,
  #content .nav-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #content .nav-tabs .nav-item,
  #content .nav-pills .nav-item { flex: 0 0 auto; }
  #content .nav-tabs .nav-link,
  #content .nav-pills .nav-link { white-space: nowrap; }

  /* Long button rows should wrap, not leave the viewport. */
  #content .d-flex.gap-2,
  #content .d-flex.gap-3 { flex-wrap: wrap; }

  /* Month/date filters often have inline max-width; make them usable on phones. */
  #content input[type="month"].form-control,
  #content input[type="date"].form-control {
    max-width: 100% !important;
  }

  /* Group target/product names are intentionally allowed to wrap. */
  #content td, #content th { overflow-wrap: anywhere; }
}

/* =========================================================
   Readability guardrails — do not squeeze money or leaderboard tables
   ========================================================= */
/* Monetary / KPI values are atomic numbers: never split them into two lines. */
.summary-card .value,
.app-stat-value,
#todayIncentive,
#saleToday,
#salePerDayLeft,
#monthIncentive,
#saleMonth,
#target100,
#inc100 {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  font-variant-numeric: tabular-nums;
}

/* Leaderboards must scroll rather than squeeze columns/text. */
#tableTopToday,
#tableTopMonth {
  table-layout: auto !important;
  width: 100% !important;
}
#tableTopToday th,
#tableTopToday td,
#tableTopMonth th,
#tableTopMonth td {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
#tableTopToday { min-width: 360px !important; }
#tableTopMonth { min-width: 700px !important; }
#todayTableCol .table-responsive,
#monthTableCol .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   Notebook responsive tuning (992–1399px)
   Split into smaller ranges so the layout grows progressively.
   ========================================================= */

/* 992–1099: compact notebook / tablet landscape.
   Stack Daily and Monthly sections and stack leaderboards to keep values readable. */
@media (min-width: 992px) and (max-width: 1099.98px) {
  .summary-zone > .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .summary-zone > .col-md-6 > .row > .expand {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .leaderboard-row > .leaderboard-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .leaderboard-body { min-height: 275px !important; }
  #todayTableCol, #monthTableCol {
    flex: 0 0 58.333333% !important;
    max-width: 58.333333% !important;
    width: 58.333333% !important;
  }
  #todayChartCol, #monthChartCol {
    flex: 0 0 41.666667% !important;
    max-width: 41.666667% !important;
    width: 41.666667% !important;
  }
  .leaderboard-chart-wrap canvas,
  #todayChartCol #pieChartToday,
  #monthChartCol #pieChartMonth {
    width: 225px !important;
    height: 225px !important;
    max-width: 225px !important;
    max-height: 225px !important;
  }
}

/* 1100–1199: keep Daily/Monthly side-by-side, but stack the two leaderboards.
   This avoids squeezing the monthly bonus table. */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .summary-zone > .col-md-6 > .row > .expand {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .summary-card .value, .app-stat-value {
    font-size: clamp(1.18rem, 1.7vw, 1.5rem) !important;
  }
  .leaderboard-row > .leaderboard-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .leaderboard-body { min-height: 285px !important; }
  #todayTableCol, #monthTableCol {
    flex: 0 0 58.333333% !important;
    max-width: 58.333333% !important;
    width: 58.333333% !important;
  }
  #todayChartCol, #monthChartCol {
    flex: 0 0 41.666667% !important;
    max-width: 41.666667% !important;
    width: 41.666667% !important;
  }
}

/* 1200–1399: there is enough room for the dynamic desktop layout.
   Do NOT force leaderboard widths here; dashboard.php decides 50/50, 5/7 or 4/8
   from the number of visible monthly columns after every date change. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .summary-zone > .col-md-6 > .row > .expand {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .summary-card { padding-left: 14px !important; padding-right: 14px !important; }
  .summary-card .title, .app-stat-label { font-size: .78rem !important; }
  .summary-card .value, .app-stat-value {
    font-size: clamp(1.08rem, 1.55vw, 1.42rem) !important;
  }
  .leaderboard-body { min-height: 285px !important; }
  #tableTopToday { min-width: 0 !important; }
  #tableTopMonth { min-width: 0 !important; }
  #todayTableCol .table-responsive,
  #monthTableCol .table-responsive { overflow-x: visible !important; }
  #tableTopToday th, #tableTopToday td,
  #tableTopMonth th, #tableTopMonth td {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: clamp(.70rem, .72vw, .82rem) !important;
  }
  .leaderboard-chart-wrap canvas,
  #todayChartCol #pieChartToday,
  #monthChartCol #pieChartMonth {
    width: min(225px, 100%) !important;
    height: min(225px, 100%) !important;
    max-width: 225px !important;
    max-height: 225px !important;
  }
}

/* Tablet: Daily and Monthly each use full width; two inner cards may sit side by side. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .summary-zone > .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .summary-zone > .col-md-6 > .row > .expand {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .summary-card .value,
  .app-stat-value {
    font-size: 1.28rem !important;
  }
  .leaderboard-row > .leaderboard-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #todayTableCol,
  #monthTableCol,
  #todayChartCol,
  #monthChartCol {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Phones: one summary card per row; monetary figures stay on one line. */
@media (max-width: 767.98px) {
  .summary-zone > .col-md-6,
  .summary-zone > .col-md-6 > .row > .expand {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .summary-card .value,
  .app-stat-value {
    font-size: clamp(1.15rem, 5.5vw, 1.35rem) !important;
  }
  #tableTopToday { min-width: 390px !important; }
  #tableTopMonth { min-width: 720px !important; }
}


/* =========================================================
   Contained pages: keep comfortable left/right breathing room
   for reports / payout / health / timeline / settings pages.
   ========================================================= */
#content.page-contained {
  padding-left: clamp(24px, 2.2vw, 38px) !important;
  padding-right: clamp(24px, 2.2vw, 38px) !important;
}
#content.page-contained > .app-page-header,
#content.page-contained > .app-toolbar,
#content.page-contained > .app-card,
#content.page-contained > .card,
#content.page-contained > .nav,
#content.page-contained > .tab-content,
#content.page-contained > .row {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 1600px) {
  #content.page-contained {
    padding-left: 42px !important;
    padding-right: 42px !important;
  }
}
@media (max-width: 991.98px) {
  #content.page-contained {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 575.98px) {
  #content.page-contained {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* =========================================================
   Adaptive contained widths
   Only compact pages are narrowed. Wide data/report pages keep
   the full available width so tables are never squeezed.
   ========================================================= */
@media (min-width: 1200px) {
  #content.page-contained.page-contained-compact > .app-page-header,
  #content.page-contained.page-contained-compact > .app-toolbar,
  #content.page-contained.page-contained-compact > .app-card,
  #content.page-contained.page-contained-compact > .card,
  #content.page-contained.page-contained-compact > .nav,
  #content.page-contained.page-contained-compact > .tab-content,
  #content.page-contained.page-contained-compact > .row {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }

  #content.page-contained.page-contained-medium > .app-page-header,
  #content.page-contained.page-contained-medium > .app-toolbar,
  #content.page-contained.page-contained-medium > .app-card,
  #content.page-contained.page-contained-medium > .card,
  #content.page-contained.page-contained-medium > .nav,
  #content.page-contained.page-contained-medium > .tab-content,
  #content.page-contained.page-contained-medium > .row {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1600px) {
  #content.page-contained.page-contained-compact > .app-page-header,
  #content.page-contained.page-contained-compact > .app-toolbar,
  #content.page-contained.page-contained-compact > .app-card,
  #content.page-contained.page-contained-compact > .card,
  #content.page-contained.page-contained-compact > .nav,
  #content.page-contained.page-contained-compact > .tab-content,
  #content.page-contained.page-contained-compact > .row { max-width: 1280px; }

  #content.page-contained.page-contained-medium > .app-page-header,
  #content.page-contained.page-contained-medium > .app-toolbar,
  #content.page-contained.page-contained-medium > .app-card,
  #content.page-contained.page-contained-medium > .card,
  #content.page-contained.page-contained-medium > .nav,
  #content.page-contained.page-contained-medium > .tab-content,
  #content.page-contained.page-contained-medium > .row { max-width: 1500px; }
}


/* =========================================================
   Page-specific balance: Health Center + Activity Timeline
   Keep these pages visually contained without squeezing data.
   ========================================================= */
@media (min-width: 1200px) {
  #content.page-data-health > .app-page-header,
  #content.page-data-health > .app-toolbar,
  #content.page-data-health > .app-card,
  #content.page-data-health > .card,
  #content.page-data-health > .row {
    width: min(100%, 1140px);
    max-width: 1140px !important;
    margin-left: auto;
    margin-right: auto;
  }

  #content.page-activity-log > .app-page-header,
  #content.page-activity-log > .app-toolbar,
  #content.page-activity-log > .app-card,
  #content.page-activity-log > .card,
  #content.page-activity-log > .row {
    width: min(100%, 1240px);
    max-width: 1240px !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Health cards remain three balanced columns rather than becoming too wide. */
  #content.page-data-health > .row > .col-xl-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  /* Activity filters: keep controls readable but not stretched across the screen. */
  #content.page-activity-log .app-toolbar .form-control,
  #content.page-activity-log .app-toolbar .form-select {
    min-height: 38px;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  #content.page-data-health > .app-page-header,
  #content.page-data-health > .app-toolbar,
  #content.page-data-health > .app-card,
  #content.page-data-health > .card,
  #content.page-data-health > .row,
  #content.page-activity-log > .app-page-header,
  #content.page-activity-log > .app-toolbar,
  #content.page-activity-log > .app-card,
  #content.page-activity-log > .card,
  #content.page-activity-log > .row {
    width: 100%;
    max-width: 100% !important;
  }
}

/* =========================================================
   Desktop leaderboard fit — dynamic ratio controlled by dashboard.js
   Do not force card/table/chart widths here: dashboard.php recalculates
   them after every date change according to the visible monthly columns.
   ========================================================= */
@media (min-width: 1400px) {
  #tableTopToday,
  #tableTopMonth {
    min-width: 0 !important;
    width: 100% !important;
  }

  #todayTableCol .table-responsive,
  #monthTableCol .table-responsive {
    overflow-x: visible !important;
  }

  #tableTopMonth th,
  #tableTopMonth td {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: clamp(.76rem, .72vw, .9rem) !important;
    white-space: nowrap !important;
  }
  #tableTopMonth th:first-child,
  #tableTopMonth td:first-child { padding-left: 9px !important; }
  #tableTopMonth th:last-child,
  #tableTopMonth td:last-child { padding-right: 9px !important; }

  #tableTopToday th,
  #tableTopToday td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #todayChartCol #pieChartToday,
  #monthChartCol #pieChartMonth,
  .leaderboard-chart-wrap canvas {
    width: min(250px, 100%) !important;
    height: min(250px, 100%) !important;
    max-width: 250px !important;
    max-height: 250px !important;
  }
}


/* ================= MOBILE SIDEBAR STACKING FIX =================
   Keep the dim backdrop behind the drawer at all times. */
@media (max-width: 991.98px) {
  /* Keep content out of its own stacking context. Bootstrap modals live inside
     #content on several legacy pages; a z-index here traps the modal underneath
     Bootstrap's body-level backdrop and leaves a dark, unclickable screen. */
  #content,
  #content.content {
    position: static !important;
    z-index: auto !important;
  }

  .pixzell-sidebar-backdrop {
    z-index: 3000 !important;
    pointer-events: none !important;
  }
  .pixzell-sidebar-backdrop.show {
    pointer-events: auto !important;
  }

  #sidebar {
    position: fixed !important;
    z-index: 3100 !important;
    pointer-events: auto !important;
    isolation: isolate;
    opacity: 1 !important;
    filter: none !important;
  }

  #sidebar,
  #sidebar * {
    pointer-events: auto;
  }

  .pixzell-mobile-menu-btn {
    z-index: 3200 !important;
  }

  /* Bootstrap tooltips are unnecessary in the expanded mobile drawer and
     can create an extra floating layer over menu items. */
  #sidebar .tooltip,
  .tooltip.bs-tooltip-end {
    pointer-events: none !important;
  }
}


/* =========================================================
   MOBILE MODAL LAYER FIX
   Legacy pages place Bootstrap modals inside #content. The shared JS reparents
   them to <body>; these z-index rules guarantee a single predictable layer
   order on phones: page < Bootstrap backdrop < modal.
   ========================================================= */
.modal {
  z-index: 5000 !important;
}
.modal-backdrop {
  z-index: 4990 !important;
}
@media (max-width: 991.98px) {
  body.modal-open .pixzell-sidebar-backdrop {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.modal-open .pixzell-mobile-menu-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.modal-open #sidebar:not(.sidebar-mobile-open) {
    pointer-events: none !important;
  }
  .modal-dialog {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 8px auto !important;
  }
  .modal-content {
    max-height: calc(100dvh - 16px) !important;
    overflow: hidden;
  }
  .modal-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   MOBILE MODAL SCROLL FIX (fix78)
   Keep the page behind the modal frozen and make the modal body the
   dedicated vertical scroll surface on touch devices.
   ========================================================= */
@media (max-width: 991.98px) {
  html.pixzell-modal-mobile-lock,
  body.pixzell-modal-mobile-lock {
    overscroll-behavior: none !important;
  }

  body.pixzell-modal-mobile-lock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    touch-action: none;
  }

  .modal.show {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: none;
  }

  .modal.show .modal-dialog {
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .modal.show .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: none;
  }

  .modal.show .modal-header,
  .modal.show .modal-footer {
    flex: 0 0 auto !important;
  }

  .modal.show .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  /* Bootstrap's .modal-dialog-scrollable has its own height calculation.
     Neutralize it so the rules above remain the single scroll model. */
  .modal-dialog-scrollable .modal-content {
    max-height: 100% !important;
  }
  .modal-dialog-scrollable .modal-body {
    overflow-y: auto !important;
  }
}


/* =========================================================
   TOUCH SCROLL OWNERSHIP (fix82)
   When a mobile modal or navigation drawer is open, the document behind it
   stays frozen and the visible overlay owns vertical touch scrolling.
   ========================================================= */
@media (max-width: 991.98px) {
  html.pixzell-sidebar-mobile-lock,
  body.pixzell-sidebar-mobile-lock,
  html.pixzell-modal-mobile-lock,
  body.pixzell-modal-mobile-lock {
    overscroll-behavior: none !important;
  }

  body.pixzell-sidebar-mobile-lock,
  body.pixzell-modal-mobile-lock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    touch-action: none !important;
  }

  #sidebar.sidebar-mobile-open {
    overscroll-behavior: contain !important;
    touch-action: none !important;
  }

  #sidebar.sidebar-mobile-open .sidebar-menu-list {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  .modal.show .modal-body,
  .modal.show .select2-results__options,
  .modal.show .table-responsive,
  .modal.show .responsive-table-wrap {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
}


/* =========================================================
   MOBILE NAV CLOSE POSITION (fix83)
   The same floating button opens the drawer from the lower-left. Once the
   drawer is open it becomes the close button and moves to the drawer's
   upper-right corner, away from Refresh / Back to main system.
   ========================================================= */
@media (max-width: 991.98px) {
  body.pixzell-mobile-sidebar-open .pixzell-mobile-menu-btn {
    top: max(10px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    left: calc(min(290px, 86vw) - 52px) !important;
    right: auto !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #333 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
  }
}


/* =========================================================
   STRICT OVERLAY SCROLL OWNERSHIP (fix84)
   IMPORTANT: never put touch-action:none on a fixed BODY or on the overlay
   ancestor itself. touch-action is intersected through ancestors and that can
   disable the modal/nav scroll surface on iOS/iPadOS. The page is frozen with
   position:fixed + overflow:hidden; JavaScript blocks gestures outside the
   active overlay, while these child surfaces retain native touch scrolling.
   ========================================================= */
@media (max-width: 991.98px) {
  body.pixzell-sidebar-mobile-lock,
  body.pixzell-modal-mobile-lock {
    touch-action: auto !important;
  }

  #sidebar.sidebar-mobile-open,
  .modal.show,
  .modal.show .modal-dialog,
  .modal.show .modal-content {
    touch-action: auto !important;
  }

  #sidebar.sidebar-mobile-open .sidebar-menu-list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  .modal.show .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  .modal.show .table-responsive,
  .modal.show .responsive-table-wrap,
  .modal.show .select2-results__options,
  .modal.show .dropdown-menu {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Backdrops are gesture sinks; they must never forward a pan to the page. */
  .pixzell-sidebar-backdrop.show,
  .modal-backdrop.show {
    touch-action: none !important;
  }
}

/* =========================================================
   CONTENT-SIZED MODALS (fix86)
   Keep short modals only as tall as their content. The modal body becomes a
   scroll surface only when the content would exceed the available viewport.
   ========================================================= */
.modal-dialog {
  height: auto !important;
  min-height: 0 !important;
}
.modal-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.modal-header,
.modal-footer {
  flex: 0 0 auto !important;
}
.modal-body {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Bootstrap's scrollable dialog normally reserves nearly the full viewport.
   Neutralize that behavior: only long content should grow to the max-height. */
.modal-dialog-scrollable {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.modal-dialog-scrollable .modal-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 24px) !important;
}
.modal-dialog-scrollable .modal-body {
  flex: 0 1 auto !important;
}

@supports (height: 100dvh) {
  .modal-content,
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100dvh - 24px) !important;
  }
}

@media (max-width: 991.98px) {
  .modal.show .modal-dialog,
  .modal.show .modal-dialog.modal-dialog-scrollable {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 8px auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .modal.show .modal-content,
  .modal.show .modal-dialog-scrollable .modal-content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    overflow: hidden !important;
  }

  .modal.show .modal-body,
  .modal.show .modal-dialog-scrollable .modal-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }
}

/* =========================================================
   OVERLAY VIEWPORT SCROLL SURFACES (fix87)
   - Mobile/iPad navigation always exposes the full menu through one internal
     vertical scroller while footer actions stay reachable.
   - Content-sized modals stay compact, but any body that exceeds the viewport
     is guaranteed to become the vertical scroll surface.
   ========================================================= */
@media (max-width: 991.98px) {
  #sidebar,
  #sidebar.sidebar-mobile-open {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  @supports (height: 100dvh) {
    #sidebar,
    #sidebar.sidebar-mobile-open {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  #sidebar .sidebar-header {
    flex: 0 0 50px !important;
    min-height: 50px !important;
  }

  #sidebar .sidebar-menu-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: thin;
  }

  #sidebar .sidebar-menu-list > .nav-item {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  #sidebar .sidebar-main-back-wrap {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  /* Modal shell is content-sized up to the viewport. If it reaches that cap,
     the body is the flexible/shrinking area and therefore gets the scrollbar. */
  .modal.show {
    overflow: hidden !important;
  }

  .modal.show .modal-dialog,
  .modal.show .modal-dialog.modal-dialog-scrollable {
    max-height: calc(100vh - 16px) !important;
    overflow: hidden !important;
  }

  @supports (height: 100dvh) {
    .modal.show .modal-dialog,
    .modal.show .modal-dialog.modal-dialog-scrollable {
      max-height: calc(100dvh - 16px) !important;
    }
  }

  .modal.show .modal-content,
  .modal.show .modal-dialog-scrollable .modal-content {
    max-height: inherit !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .modal.show .modal-body,
  .modal.show .modal-dialog-scrollable .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  .modal.show .modal-header,
  .modal.show .modal-footer {
    flex: 0 0 auto !important;
  }
}


/* =========================================================
   MOBILE DRAWER CLICK LAYER GUARANTEE (fix88)
   Some legacy pages define their own #sidebar z-index after the shared CSS.
   Use a higher-specificity open-state rule so the active drawer always stays
   above its backdrop and remains clickable, while Bootstrap modals stay above
   the drawer when they own the screen.
   ========================================================= */
@media (max-width: 991.98px) {
  body #sidebar.sidebar-mobile-open {
    position: fixed !important;
    z-index: 4100 !important;
    pointer-events: auto !important;
  }

  body #sidebar.sidebar-mobile-open,
  body #sidebar.sidebar-mobile-open * {
    pointer-events: auto !important;
  }

  body .pixzell-sidebar-backdrop.show {
    z-index: 4000 !important;
    pointer-events: auto !important;
  }

  body.pixzell-mobile-sidebar-open .pixzell-mobile-menu-btn {
    z-index: 4200 !important;
    pointer-events: auto !important;
  }

  body.modal-open .pixzell-sidebar-backdrop,
  body.modal-open .pixzell-mobile-menu-btn {
    pointer-events: none !important;
  }
}


/* =========================================================
   FORM-WRAPPED MODAL SCROLL CHAIN (fix89)
   Several edit dialogs place FORM between .modal-content and .modal-body.
   Make that form a shrinking flex column so long bodies receive the viewport
   constraint and become the scroll surface instead of falling below screen.
   ========================================================= */
.modal-content > form {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: inherit !important;
  overflow: hidden !important;
}
.modal-content > form > .modal-header,
.modal-content > form > .modal-footer {
  flex: 0 0 auto !important;
}
.modal-content > form > .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

@media (max-width: 991.98px) {
  .modal.show .modal-content > form {
    width: 100% !important;
    min-height: 0 !important;
    max-height: inherit !important;
    overflow: hidden !important;
  }

  /* These two large edit dialogs must always preserve a usable internal
     scroll area on phones/iPad when their content exceeds the viewport. */
  #editIncProductModal.show .modal-content > form,
  #editProductIncModal.show .modal-content > form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  #editIncProductModal.show .modal-body,
  #editProductIncModal.show .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
}