/* ============================================================
   GIGAnalyser — App shell layout (sidebar + main content)
   ------------------------------------------------------------
   Loaded by every protected page AFTER /css/theme.css (and after
   /css/app.css when present):

     <link rel="stylesheet" href="/css/layout.css?v=2" />

   Fixes the classic "content overlaps the sidebar" bug:

   1. The sidebar is pinned `position: fixed` at every breakpoint
      (overrides Tailwind's `fixed lg:static`) so it can never
      scroll away from the window or get mixed with main content.
   2. Main content is offset with `margin-left: 16rem` on desktop
      so it always renders beside the sidebar, never underneath it.
   3. Full-screen modals / lightboxes are lifted to z-index 1000
      so they cover the sidebar as well as the main content.

   Selectors use the page ids (#sidebar, #sidebar-overlay and the
   `main` that follows the sidebar) because id specificity beats the
   Tailwind utility classes in the markup (e.g. `lg:static`, `z-50`,
   `w-64`). Keep the sidebar width here in sync with the `w-64`
   (16rem) used on the aside element in every page.
   ============================================================ */

/* ---------- 1. Sidebar: fixed, full-height, above main content ---------- */
#sidebar {
  position: fixed !important; /* beats `lg:static` on desktop */
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 16rem !important;    /* w-64 */
  height: 100vh !important;
  z-index: 100 !important;    /* above header (z-30) and main content */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 2. Main content: always offset beside the sidebar ---------- */
#sidebar + main {
  position: relative;
  z-index: 1;                /* content stays BELOW the sidebar */
  box-sizing: border-box;
  margin-left: 16rem;        /* same as sidebar width */
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;        /* nothing bleeds out horizontally */
}

/* Global horizontal-overflow guard: nobody should ever see a horizontal
   scrollbar or a left edge that gets clipped by overflowing content. */
body {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- 3. Mobile (drawer): sidebar hidden off-canvas ---------- */
/* Under `lg`, the sidebar is translated off the left edge and the main
   content takes the full width. Opening the drawer slides the sidebar
   over the content (its transform + z-index already handle this). */
@media (max-width: 1023.98px) {
  #sidebar {
    width: 16rem !important; /* keep the drawer width on touch too */
  }
  #sidebar + main {
    margin-left: 0;
  }
}

/* ---------- 4. Mobile drawer overlay ----------
   Covers the header + main content while the drawer is open, but
   stays BELOW the drawer itself (z-index 100). */
#sidebar-overlay {
  z-index: 90;
}

/* ---------- 5. Full-screen modals / lightboxes ----------
   Raised above the sidebar (100) so the whole viewport — sidebar
   included — is dimmed and covered. */
#locked-modal,
#onboarding-modal,
#wizardModal,
#keyword-modal,
#delete-conversation-modal,
#new-conversation-modal,
#detail-modal,
#lightbox {
  z-index: 1000 !important;
}