/* ================================
   Seya·IQ Tenant Mobile Patch v2
   ================================ */

html, body {
  max-width: 100vw;
  overflow-x: hidden; /* iPhone side-drag */
}

* { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

pre, code { max-width: 100%; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; max-width: 100%; }

/* ================================
   Mobile layout fixes
   ================================ */
@media (max-width: 1024px) {

  /* Kill desktop sidebar offsets (common patterns) */
  .ml-56, .ml-60, .ml-64, .ml-72 { margin-left: 0 !important; }
  .pl-56, .pl-60, .pl-64, .pl-72 { padding-left: 0 !important; }

  /* Reduce padding so screens fit */
  .p-8 { padding: 1rem !important; }
  .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl {
    max-width: 100% !important;
  }

  /* ===== Force grids to stack on mobile =====
     Catches:
     - grid-cols-2/3/4
     - md:grid-cols-2/3/4
     - lg:grid-cols-2/3/4
  */
  [class*="grid-cols-2"],
  [class*="grid-cols-3"],
  [class*="grid-cols-4"],
  [class*="md:grid-cols-2"],
  [class*="md:grid-cols-3"],
  [class*="md:grid-cols-4"],
  [class*="lg:grid-cols-2"],
  [class*="lg:grid-cols-3"],
  [class*="lg:grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }

  /* Make gaps tighter so cards don’t feel “lost” */
  .grid { gap: 0.75rem !important; }

  /* ===== Sidebar off-canvas (your exact sidebar wrapper) =====
     <div class="fixed left-0 top-0 h-screen w-60 ...">
  */
  div.fixed.left-0.top-0.h-screen.w-60 {
    transform: translateX(-110%);
    transition: transform .22s ease;
    will-change: transform;
    z-index: 60;
  }

  body.sidebar-open div.fixed.left-0.top-0.h-screen.w-60 {
    transform: translateX(0);
  }

  /* Backdrop */
  .tenant-backdrop { display: none; }
  body.sidebar-open .tenant-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 50;
  }

  /* A floating “menu” button if you add it (next step) */
  .tenant-mobile-menu-btn{
    position: fixed;
    left: 14px;
    top: 14px;
    z-index: 70;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.12);
    box-shadow: 0 10px 30px rgba(2,6,23,.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: rgba(15,23,42,.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* When sidebar is open, don't let the hamburger cover the logo */
body.sidebar-open .tenant-mobile-menu-btn{
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1024px) {
  /* If sidebar is open, hide ANY mobile menu button */
  body.sidebar-open .tenant-mobile-menu-btn,
  body.sidebar-open button.tenant-mobile-menu-btn,
  body.sidebar-open [class*="tenant-mobile-menu-btn"] {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Also ensure the sidebar is always above */
  body.sidebar-open div.fixed.left-0.top-0.h-screen.w-60 {
    z-index: 9999 !important;
  }

  /* Ensure backdrop is above page content */
  body.sidebar-open .tenant-backdrop {
    z-index: 9998 !important;
  }
}

@media (max-width: 1024px) {
  /* Push the hamburger slightly down so it never overlaps the brand */
  .tenant-mobile-menu-btn{
    top: 18px !important;
    left: 18px !important;
  }

  /* Add safe space at the top of tenant pages so the title never sits under the button */
  body{
    padding-top: 10px;
  }

  /* If sidebar is open, hide the hamburger */
  body.sidebar-open .tenant-mobile-menu-btn{
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}

@media (max-width: 1024px) {
  /* Space for the floating hamburger */
  .tenant-page,
  .tenant-main,
  main,
  .ml-56,
  .ml-60,
  .ml-64,
  .ml-72 {
    padding-top: 64px !important;
  }
}