/* ==========================================================================
   mz-responsive.css — loaded on every HTML page (injected by core/functions.php)
   1) no sideways scrolling on phones   2) panel / text overlap fixes
   3) back button styles
   ========================================================================== */

/* ---- 1. never scroll sideways ------------------------------------------ */
html { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { max-width: 100%; position: relative; }
@supports (overflow: clip) { body { overflow-x: clip; } }   /* clip keeps position:sticky working */
img, video, canvas, iframe, embed, object, svg { max-width: 100%; }
img, video { height: auto; }
pre, code, kbd, samp { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
td, th, p, h1, h2, h3, h4, h5, h6, li, label, a, span, .card, .alert { overflow-wrap: anywhere; }
input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
.main-content, .content-area, .card, .stat-card, .shop-wrapper > *, .admin-wrapper > * { min-width: 0; }
.mz-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mz-table-wrap > table { min-width: 100%; }

/* ---- 2. phones / small tablets ----------------------------------------- */
@media (max-width: 900px) {
  div, section, main, article, form, fieldset, nav, header, footer, ul, ol { max-width: 100%; }
  .main-content { min-width: 0 !important; width: 100% !important; }
  .content-area { padding-left: 12px !important; padding-right: 12px !important; }

  /* closed drawer must not extend the page (this was the sideways-scroll source) */
  html body .sidebar:not(.open) { visibility: hidden; transition: transform .28s ease, visibility 0s linear .3s !important; }
  html body .sidebar.open { visibility: visible; transition: transform .28s ease, visibility 0s !important; }

  /* top bar: items sit in one tidy row, title shrinks instead of overlapping */
  html body .topbar { display: flex; align-items: center; flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 10px !important; min-height: 56px; }
  html body .topbar > * { flex-shrink: 0; }
  html body .topbar .topbar-title { flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .topbar .topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-inline-start: auto; }
  html body .topbar .topbar-home { display: none; }               /* the back button replaces it on phones */
  html body .menu-toggle { margin: 0 !important; }

  /* grids with a fixed minimum column never exceed the screen */
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important; }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)) !important; }
  .dash-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
  .settle { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }
  .theme-pick { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important; }
  .in-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }
  .theme-2 .menu-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .card { padding: 16px !important; }
  .btn, button.btn { max-width: 100%; white-space: normal; }
  .modal, .modal-content, .popup, [class*="modal"] > div { max-width: 94vw; }
}
@media (max-width: 480px) {
  .ing-row { grid-template-columns: 1fr !important; }
  table th, table td { padding: 8px 8px !important; font-size: 12px !important; }
}

/* ---- 3. back button ----------------------------------------------------- */
.mz-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(212,175,55,.5); color: #f5d77a; text-decoration: none; font: 600 13px/1 inherit; font-family: inherit;
  background: linear-gradient(145deg, #2a2a2a, #141414); box-shadow: 0 3px 0 #0c0c0c, 0 6px 14px rgba(0,0,0,.35);
  -webkit-tap-highlight-color: transparent; flex-shrink: 0; transition: transform .1s, box-shadow .1s;
}
.mz-back:active { transform: translateY(2px); box-shadow: 0 1px 0 #0c0c0c; }
.mz-back svg { width: 20px; height: 20px; flex: none; }
html[dir="rtl"] .mz-back svg { transform: scaleX(-1); }
.mz-back-float { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); inset-inline-start: 10px; z-index: 2147483000; opacity: .94; }
.mz-back-float .mz-back-label { display: none; }
.topbar .mz-back { height: 40px; }
@media (max-width: 640px) { .topbar .mz-back .mz-back-label { display: none; } .topbar .mz-back { padding: 0; width: 40px; } }
@media print { .mz-back, .mz-back-float { display: none !important; } }