/* Yammbo Store — mobile/responsive overrides
 * Loaded outside the Vite bundle from resources/views/app.blade.php.
 * Conservative: only fixes specific layout issues, never blocks scroll
 * the user might legitimately need (tables, code blocks, wide cards).
 */

/* --- CRITICAL: kill phantom sidebar padding on mobile -----------------
 * Below md (768px) the shadcn Sidebar hides its fixed panel (md:flex on
 * the wrapper), but SidebarInset still carries pl-[var(--sidebar-width)]
 * because those classes lack a md: prefix in ui/sidebar.tsx. Result: 256px
 * of empty space on the left of every dashboard page on phones.
 * The compiled bundle can't be edited without a Vite rebuild, so we
 * neutralise it here. */
@media (max-width: 767px) {
  main[data-slot="sidebar-inset"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 1023px) {
  /* --- Settings page: stacked layout ---------------------------------- */
  /* The /settings sidebar nav stacks above content on mobile (md:flex-row
   * means below md it's flex-col). Remove the sticky + full-viewport-scroll
   * treatment that only makes sense in a side-by-side desktop layout. */
  .sticky.top-20 {
    position: static !important;
    top: auto !important;
  }
  /* Cap the settings nav scroll-area so it doesn't reserve a tall column */
  div[class*="md:w-64"] [data-slot="scroll-area"],
  div[class*="md:w-64"] .h-\[calc\(100vh-5rem\)\] {
    height: auto !important;
    max-height: 50vh !important;
  }

  /* --- App sidebar (Sheet drawer on mobile) --------------------------- */
  /* The shadcn Sidebar component switches to a Sheet drawer below the
   * lg breakpoint. Make sure it sits above all dialogs and is wide
   * enough to be usable. */
  [data-mobile="true"][data-sidebar="sidebar"] {
    width: 85vw !important;
    max-width: 320px !important;
  }
  /* Hit target for the sidebar trigger (hamburger). */
  button[data-sidebar="trigger"] {
    min-width: 40px;
    min-height: 40px;
  }

  /* --- Header breadcrumbs ---------------------------------------------- */
  /* Long breadcrumb chains shouldn't force horizontal scroll; let them wrap. */
  nav[aria-label="breadcrumb"] ol,
  [data-slot="breadcrumb-list"] {
    flex-wrap: wrap;
  }

  /* --- Store switcher in header --------------------------------------- */
  /* Keep the trigger from eating the whole header width on narrow screens. */
  header button[aria-haspopup="menu"],
  header button[data-state] {
    max-width: 55vw;
  }

  /* --- Page padding tweak --------------------------------------------- */
  /* Header gets a touch more breathing room without crushing content. */
  header.px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* --- Touch device: kill sticky :hover after tap --------------------- */
@media (hover: none) and (pointer: coarse) {
  *:hover {
    transition: none !important;
  }
}