/* Layout module.
   Reserved for sidebar, main container, responsive grid and panel layout.
   Kept minimal in v90-refactor to avoid visual regressions. */

/* ── Mobile hamburger button ── */
.jit-hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1100;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: var(--menu-bg, #1d1b17);
  color: var(--menu-text, white);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* ── Mobile overlay (darkens the content when sidebar is open) ── */
.jit-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
}

.jit-mobile-overlay.is-visible {
  display: block;
}

/* ── Mobile breakpoint ── */
@media (max-width: 768px) {
  /* Show hamburger in all layout modes on mobile */
  .jit-hamburger {
    display: flex;
  }

  /* ── Top layout mobile: hamburger on the right ── */
  body[data-layout="top"] .jit-hamburger {
    /* spec (0,2,1) — no competing rule in later files */
    left: auto;
    right: 12px;
  }

  /* ── Top layout mobile: sidebar → right-side drawer ── */
  /* html prefix → spec (0,2,2) > theme_v2.css (0,2,1); wins by specificity alone */
  html body[data-layout="top"] .sidebar {
    inset: 0 0 0 auto;
    width: 280px;
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.24s cubic-bezier(.4,0,.2,1);
    z-index: 1000;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px 0;
  }
  html body[data-layout="top"] .sidebar.is-mobile-open {
    transform: translateX(0);
  }
  /* spec (0,3,1) > theme_v2 body[data-layout="top"] .sidebar-header (0,2,1) */
  body[data-layout="top"] .sidebar .sidebar-header {
    display: none;
  }
  /* spec (0,2,2) > theme_v2 .sidebar nav (0,2,0) for the display property */
  body[data-layout="top"] .sidebar nav {
    display: none;
  }
  /* spec (0,3,2) > (0,2,2) */
  body[data-layout="top"] .sidebar.is-mobile-open nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    width: 100%;
  }
  /* spec (0,3,3) */
  body[data-layout="top"] .sidebar.is-mobile-open nav a {
    justify-content: flex-start;
    width: 100%;
    border-radius: 8px;
    padding: 10px 14px;
  }
  /* Sidebar is now a right-side drawer (not the fixed top bar) → remove its top margin.
     html prefix: spec (0,2,2) beats theme_v2 body[data-layout="top"] .main (0,2,1).
     Topbar is in-flow (position:static) and appears before .main, providing top spacing. */
  html body[data-layout="top"] .main {
    margin-top: 0;
    padding-top: 24px;
  }

  /* specificity (0,2,1) beats theme_v2.css .sidebar (0,1,0) for same properties */
  body:not([data-layout="top"]) .sidebar {
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(.4,0,.2,1), width 0.22s cubic-bezier(.4,0,.2,1);
    z-index: 1000;
    width: 270px;
    position: fixed;
  }

  body:not([data-layout="top"]) .sidebar.is-mobile-open {
    transform: translateX(0);
  }

  /* Collapsed sidebar still opens fully on mobile */
  /* spec (0,3,1) > theme_v2 .sidebar.is-collapsed (0,2,0) */
  body:not([data-layout="top"]) .sidebar.is-collapsed.is-mobile-open {
    width: 270px;
    padding-left: 22px;
    padding-right: 22px;
  }
  /* spec (0,3,1) > theme_v2 .sidebar.is-collapsed .brand { display:none } (0,3,0) */
  body:not([data-layout="top"]) .sidebar.is-collapsed.is-mobile-open .brand {
    display: flex;
  }
  /* spec (0,4,1) > (0,3,0) */
  body:not([data-layout="top"]) .sidebar.is-collapsed.is-mobile-open .nav-label {
    opacity: 1;
    max-width: 200px;
    pointer-events: auto;
    margin: initial;
  }
  /* spec (0,4,2) > theme_v2 .sidebar.is-collapsed nav .lang-switch { display:none } (0,3,1) */
  body:not([data-layout="top"]) .sidebar.is-collapsed.is-mobile-open nav .lang-switch {
    display: flex;
  }
  /* spec (0,5,2) */
  body:not([data-layout="top"]) .sidebar.is-collapsed.is-mobile-open nav a {
    justify-content: flex-start;
    padding-left: 11px;
    padding-right: 11px;
    gap: 10px;
  }

  /* Main takes full width.
     html prefix: spec (0,1,1) beats legacy_overrides .main (0,1,0) which loads later. */
  html .main {
    margin-left: 0;
    padding: 16px;
    padding-top: 64px;
  }

  /* Bug 1 fix: topbar in top-layout mobile is in document flow, left-aligned.
     html prefix + doubled class → spec (0,3,2) > theme_v2 (0,2,1); no !important needed.
     Overrides: base position:fixed (0,1,0); theme_v2 @media(720px) justify-content:flex-end (0,2,1);
     and the desktop body[data-layout="top"] .jit-topbar rule for the 721–768 px gap. */
  html body[data-layout="top"] .jit-topbar.jit-topbar {
    position: static;
    justify-content: flex-start;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Analytics IP table: full-width scroll on mobile */
  .analytics-table-wrap-v380 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Settings grid: single column on mobile.
     html prefix: spec (0,1,1) beats theme_v2 .settings-v3-grid (0,1,0) which loads later. */
  html .settings-v3-grid {
    grid-template-columns: 1fr;
  }

  /* Order form top block: stack on mobile.
     html prefix: spec (0,1,1) beats legacy_overrides .order-form-top-v71 (0,1,0). */
  html .order-form-top-v71 {
    grid-template-columns: 1fr;
  }

  /* Order image: constrain on mobile.
     html prefix: spec (0,1,2) beats legacy_overrides .technical-image-order-card-v71 img (0,1,1). */
  html .technical-image-order-card-v71 img,
  html .technical-image-order-card-v70 img {
    height: auto;
    max-height: 200px;
    width: 100%;
  }

  /* Product preview in order form.
     html prefix: spec (0,1,1) beats legacy_overrides .product-preview-v71 (0,1,0). */
  html .product-preview-v71 {
    grid-template-columns: 72px minmax(0,1fr);
  }

  /* Panel padding reduction.
     html prefix: spec (0,1,1) beats legacy_overrides .panel (0,1,0) which loads later. */
  html .panel {
    padding: 16px;
    border-radius: 12px;
  }

  /* Flash messages */
  .flash-wrap {
    margin: 0 0 12px;
  }
}