/* ====== CSR Panel Mobile Fix — targets actual compiled bundle classes ======
 * Root cause: JS bundle compiled from OLD Layout.jsx (no md: responsive classes)
 * Sidebar class in DOM: "w-60 fixed h-full z-20 flex flex-col" (always flex)
 * Main class in DOM:    "flex-1 ml-60 min-h-screen" (always 240px margin)
 * Fix: target these specific classes directly
 */

/* ── Mobile: viewport < 768px ── */
@media (max-width: 767px),
       screen and (max-device-width: 767px) {

  /* Hide desktop sidebar (old bundle: always flex, no hidden class) */
  aside.w-60.fixed { display: none !important; }

  /* Remove sidebar left margin from main content */
  .ml-60 { margin-left: 0 !important; }

  /* Prevent horizontal overflow */
  body { overflow-x: hidden; }
}

/* ── JS-detected mobile (screen.width < 768 — real device pixels) ── */
html[data-mobile="1"] aside.w-60.fixed { display: none !important; }
html[data-mobile="1"] .ml-60           { margin-left: 0 !important; }
html[data-mobile="1"] body             { overflow-x: hidden; }

/* ── Desktop: keep sidebar visible ── */
@media (min-width: 768px) {
  aside.w-60.fixed { display: flex !important; }
}