/* =========================================================
   QR Shop – Comprehensive Responsive Fixes
   Focus: iPad (portrait + landscape), tablets, laptops
   Goal: No button overlap, no horizontal scroll, clean layout
   ========================================================= */

/* ----- Global ----- */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* ----- HEADER – Core fix for tablet / small laptop ----- */
header {
  max-width: 100vw !important;
  overflow: hidden !important;
}
header > div {
  max-width: 100% !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

/* Force the main header row to stay horizontal and not overflow */
header .flex.items-center.justify-between {
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  gap: 0.5rem !important;
}

/* Logo */
header .flex.items-center.justify-between > button:first-child {
  flex-shrink: 0 !important;
  min-width: auto !important;
}
header .flex.items-center.justify-between > button:first-child span {
  font-size: 1rem !important;
}

/* Desktop nav */
header nav {
  display: none; /* default hidden, shown by media */
}

/* Show nav only when there is enough space, and make it compact */
@media (min-width: 900px) {
  header nav {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  header nav button {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.3rem !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* On true large screens, give more breathing room */
@media (min-width: 1200px) {
  header .flex.items-center.justify-between {
    gap: 1.5rem !important;
  }
  header nav {
    gap: 1rem !important;
  }
  header nav button {
    font-size: 0.875rem !important;
    padding: 0.25rem 0.5rem !important;
  }
}

/* Login button area */
header .hidden.md\:flex,
header div[class*="md:flex"] {
  flex-shrink: 0 !important;
}
header .hidden.md\:flex button,
header div[class*="md:flex"] button {
  font-size: 0.75rem !important;
  padding: 0.4rem 0.7rem !important;
  white-space: nowrap !important;
}

/* Mobile menu button stays available below the new breakpoint */
@media (max-width: 899px) {
  header nav {
    display: none !important;
  }
  header .hidden.md\:flex {
    display: none !important;
  }
  header .flex.md\:hidden {
    display: flex !important;
  }
}

/* ----- Landscape tablets (common problem area) ----- */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) {
  header .flex.items-center.justify-between {
    gap: 0.35rem !important;
    height: 3.2rem !important;
  }
  header nav button {
    font-size: 0.65rem !important;
    padding-inline: 0.2rem !important;
  }
  header .hidden.md\:flex button {
    font-size: 0.65rem !important;
    padding: 0.3rem 0.5rem !important;
  }
}

/* ----- Status / Tab buttons (demo card + other grids) ----- */
.grid.grid-cols-4 {
  max-width: 100% !important;
  gap: 0.25rem !important;
}
.grid.grid-cols-4 > * {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.7rem !important;
  padding-inline: 0.15rem !important;
}

/* ----- General button safety ----- */
button, a.button, [role="button"], a[class*="bg-blue"], a[class*="bg-"] {
  max-width: 100%;
  min-width: 0;
}

/* Prevent cards and main content from causing overflow */
main, section, .max-w-7xl, .max-w-5xl, .max-w-4xl {
  max-width: 100% !important;
  overflow-x: hidden;
}

/* ----- Login modal / page specific safety ----- */
/* Make sure any modal or form buttons don't overlap */
[class*="modal"] button,
[class*="dialog"] button,
form button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Stack form actions nicely on medium screens */
@media (max-width: 640px) {
  form .flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ----- Floating WhatsApp ----- */
a[href*="wa.me"] {
  z-index: 70 !important;
  bottom: 1.25rem !important;
  left: 1.25rem !important;
}

/* ----- Audit log / tables – prevent horizontal mess ----- */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
@media (max-width: 1024px) {
  table {
    font-size: 0.75rem;
  }
  th, td {
    padding: 0.4rem 0.5rem !important;
    white-space: nowrap;
  }
}

/* ----- Extra protection against any remaining overflow ----- */
body > div, #root, #root > div {
  max-width: 100vw;
  overflow-x: hidden;
}