/* ================================================================
   ZORPIDO GLOBAL MOBILE OVERRIDES
   Loaded LAST after style.css + responsive.css
   Purpose:
     - Eliminate horizontal scrollbars app-wide
     - Prevent grid/flex children from forcing overflow
     - Responsive tables / modals / forms / toasts
     - Touch-friendly 44px targets (all pointer types)
     - Responsive modals, footers, badges
   MUST NOT alter branding, colors, typography, or section-specific
   component design beyond layout safety.
   ================================================================ */

/* ── Ultimate overflow safety net ───────────────────────────── */
html,
body {
  overflow-x: clip !important;
  width: 100%;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

/* Prevent grid/flex children from blowing out the viewport */
*,
*::before,
*::after {
  min-width: 0;
  min-height: 0;
}

/* Re-allow min-width where a scroll container needs it */
.table-responsive,
.table-responsive > table,
.category-tabs,
.thumbnail-navigation,
.scroll-x,
.overflow-x-auto {
  min-width: 0;
}

/* ── Fluid images / media safety (idempotent) ───────────────── */
img,
video,
picture,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Charts must never force horizontal scroll */
canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* ── Prevent long unbroken strings from overflowing ─────────── */
main,
section,
article,
aside,
.container,
.container-fluid,
.card,
.modal-body,
.form-control,
h1, h2, h3, h4, h5, h6,
p,
span,
a,
td,
th,
label,
small {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* ── Responsive headings (fluid, but preserve brand hierarchy) */
h1, .h1 { font-size: clamp(1.75rem, 4.5vw, 3.25rem); }
h2, .h2 { font-size: clamp(1.5rem, 3.75vw, 2.75rem); }
h3, .h3 { font-size: clamp(1.25rem, 3vw, 2.25rem); }
h4, .h4 { font-size: clamp(1.1rem, 2.5vw, 1.75rem); }
h5, .h5 { font-size: clamp(1rem, 2vw, 1.35rem); }
h6, .h6 { font-size: clamp(0.9rem, 1.6vw, 1.1rem); }

/* ── Forms: never overflow, prevent iOS zoom on focus ──────── */
input,
select,
textarea,
.form-control,
.form-select {
  max-width: 100%;
  font-size: max(16px, 1rem);
}

input[type="number"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%;
}

/* But preserve inline-block / width:auto elements like search */
select.form-select-sm,
input.form-control-sm,
input[style*="width: 110px"],
select[style*="width: auto"] {
  width: auto;
}

/* ── Touch targets: 44px for everything interactive ────────── */
@media (pointer: coarse), (hover: none) {
  button,
  .btn,
  a.btn,
  .nav-link,
  .dropdown-item,
  .sidebar-link,
  .category-tab,
  .method-btn,
  .quantity-btn,
  .remove-item-btn,
  .action-btn,
  .control-arrow,
  .thumbnail-item,
  .nav-btn,
  .page-link,
  .form-check-input,
  [type="submit"],
  [type="button"],
  [role="button"],
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── Modals: always centered, scrollable, no clipping ──────── */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 1.25rem auto;
    max-width: calc(100vw - 2rem);
    width: auto;
  }

  .modal-content {
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
  }

  .modal-header,
  .modal-footer {
    flex-shrink: 0;
  }
}

/* Stack footer buttons on mobile */
@media (max-width: 575.98px) {
  .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .modal-footer > .btn,
  .modal-footer > .btn-group {
    width: 100%;
    margin: 0 !important;
  }

  .modal-footer > .btn + .btn {
    margin-left: 0 !important;
  }
}

/* ── Tables: never force page-level horizontal scroll ──────── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.table-responsive > table {
  min-width: 0;
}

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

/* Stack-friendly tables on very small screens (data tables) */
@media (max-width: 575.98px) {
  .table-responsive table.table,
  .table-responsive-auto table.table {
    min-width: 560px;
  }
}

/* ── Dropdowns: never render outside the viewport ──────────── */
.dropdown-menu {
  max-width: min(92vw, 100%);
}

.dropdown-menu[data-bs-popper] {
  max-width: calc(100vw - 2rem);
}

/* On mobile, clamp dropdown menus inside containers */
@media (max-width: 575.98px) {
  .dropdown-menu {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 2rem);
  }
}

/* ── Toasts: responsive, safe-area aware ───────────────────── */
.zorpido-toast-container,
.notif-container {
  position: fixed;
  z-index: 3000;
}

@media (max-width: 575.98px) {
  .zorpido-toast-container,
  .notif-container {
    left: 10px;
    right: 10px;
    bottom: max(14px, env(safe-area-inset-bottom, 0));
    top: auto;
    max-width: none;
    min-width: 0;
    width: auto;
    transform: none;
    align-items: stretch;
  }

  .zorpido-toast,
  .notif-item {
    max-width: 100%;
    width: 100%;
    min-width: 0;
  }
}

/* ── Responsive utility classes (Bootstrap-compatible) ─────── */
@media (max-width: 575.98px) {
  .stack-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .stack-mobile > * {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .d-flex.stack-mobile {
    display: flex !important;
  }

  .full-width-mobile {
    width: 100% !important;
    max-width: 100% !important;
  }

  .text-center-mobile {
    text-align: center !important;
  }

  .hide-mobile {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .hide-tablet {
    display: none !important;
  }

  .text-center-tablet {
    text-align: center !important;
  }
}

/* ── Wait: keep dropdown positioning sane in right-aligned menus */
.dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
}

/* ── Magic-number killer: replace hardcoded wide containers ─── */
.w-100 {
  width: 100% !important;
}

/* Normalize Bootstrap gutters for tiny screens */
@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: clamp(0.75rem, 4vw, 1rem);
    padding-right: clamp(0.75rem, 4vw, 1rem);
  }

  .row {
    --bs-gutter-x: clamp(0.5rem, 2.5vw, 1rem);
  }
}

/* ── Cards: equal height within grid, no overflow ──────────── */
.card,
.stats-card,
.financial-card,
.menu-item-card,
.stat-card,
.reward-card,
.glass-card {
  min-height: 0;
}

.row > [class*="col-"] {
  min-width: 0;
}

/* Equal-height card columns */
.row-eq-height {
  display: flex;
  flex-wrap: wrap;
}

.row-eq-height > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.row-eq-height > [class*="col-"] > .card,
.row-eq-height > [class*="col-"] > .card > .card-body {
  width: 100%;
  height: 100%;
}

/* ── Focus visibility (accessibility) ──────────────────────── */
:focus-visible {
  outline: 2px solid var(--nb-red, #D92B2B);
  outline-offset: 2px;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print: clean, no horizontal scroll, hide nav/sidebar ──── */
@media print {
  #futuristic-navbar,
  .pos-sidebar,
  #nb-overlay,
  .sidebar-overlay,
  .floating-elements,
  .floating-quotes,
  .gallery-decorations,
  .z-dot-pattern,
  .z-arch,
  .toast-container,
  .zorpido-toast-container,
  .notif-container {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  main,
  .pos-main {
    padding-top: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  .pos-shell {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}