/*
 * A Star Teaching - mobile performance
 * Location: public_html/assets/mobile-perf.css
 *
 * Addresses PDF item 14 ("the mobile website feels jittery during
 * navigation"). Every rule here is scoped to touch devices or to narrow
 * screens, so the desktop layout is deliberately left untouched.
 *
 * Measured causes this fixes:
 *   1. 83 backdrop-blur surfaces. Backdrop blur forces the compositor to
 *      re-blur what is behind the element on every frame; on phone GPUs
 *      that is the single most expensive effect in use here, and it is
 *      what makes scrolling stutter behind sticky bars and modals.
 *   2. The portals wrap everything in `h-screen overflow-hidden` with an
 *      inner overflow-y-auto column. On iOS that kills momentum scrolling
 *      and 100vh is taller than the visible area while the URL bar is
 *      showing, so the page visibly jumps as the bar hides and shows.
 *   3. hover:-translate-y lifts fire on tap on touch devices, repainting
 *      cards during a scroll.
 *   4. Images have no width/height, so text reflows as each one arrives.
 */

/* ------------------------------------------------------------------ */
/* 1. Drop backdrop blur on touch devices                              */
/* ------------------------------------------------------------------ */
/* The surfaces keep their translucent background, so they still read as
   overlays - only the per-frame blur work is removed. */
@media (hover: none) and (pointer: coarse) {
  [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Modal scrims were relying on blur for separation; deepen them a little
     so content behind stays clearly out of focus without the blur. */
  .fixed.inset-0[class*="bg-astar-dark/"] {
    background-color: rgba(58, 21, 96, 0.82) !important;
  }
}

/* ------------------------------------------------------------------ */
/* 2. Give the portals real, native scrolling on phones                */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Release the locked full-height shell so the document itself scrolls.
     That restores momentum scrolling and lets the browser collapse its
     own URL bar instead of fighting an inner scroller. */
  body.h-screen,
  body > .flex.h-screen {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  /* The inner column no longer needs to scroll by itself. */
  main.overflow-y-auto {
    overflow-y: visible !important;
    overscroll-behavior: auto;
  }

  /* Anything that genuinely must scroll on its own (the sidebar drawer,
     long dropdown panels) keeps momentum and stops scroll chaining, so a
     flick inside a panel never drags the page behind it. */
  aside nav,
  #notifPanel > div,
  [class*="max-h-"][class*="overflow-y-auto"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ---------------------------------------------------------------- */
  /* The sidebar drawer                                                 */
  /* ---------------------------------------------------------------- */
  /* Three reported faults came from this one element:
     - Admin menu opened as a BLANK panel on a phone.
     - Mentor and Student menus opened but could not be scrolled, so
       options below the fold were unreachable.

     Cause: the drawer is `h-screen` and its <nav> is `flex-1
     overflow-y-auto`. A flex child can only scroll when its parent has a
     RESOLVED height. Releasing the page shell above (height:auto) left
     that height unresolved on mobile, so the nav had nothing to size
     against - it collapsed to nothing (blank admin panel) or grew past
     the screen with no scroller (mentor/student).

     Fixing it needs all three of: a real height on the drawer, an
     explicit min-height:0 on the flex child so it is allowed to shrink
     below its content, and the scroller declared on the nav itself. */
  aside#adminSidebar,
  aside#portalSidebar {
    /* !important throughout: the shell-release rule above uses
       `overflow: visible !important`, and Tailwind's own h-screen /
       overflow utilities sit in the same cascade. Without it the drawer
       kept overflow:visible and max-height:none, so the nav never became
       a scroller and the logout block below it was pushed off-screen. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;    /* the NAV scrolls, not the drawer */
  }

  /* Browsers without dvh support (older iOS) still need a usable height. */
  @supports not (height: 100dvh) {
    aside#adminSidebar,
    aside#portalSidebar {
      height: 100vh !important;
      max-height: 100vh !important;
    }
  }

  /* The scrolling list of links. min-height:0 is what actually lets a
     flex child scroll instead of stretching to fit its content. */
  aside#adminSidebar nav,
  aside#portalSidebar nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* The header and the logout footer must keep their natural size, or the
     nav takes their space and the logout button disappears. */
  aside#adminSidebar > *:not(nav),
  aside#portalSidebar > *:not(nav) {
    flex: 0 0 auto !important;
  }

  /* While the drawer is open the page behind must not take the touch. */
  #sidebarBackdrop:not(.hidden) {
    touch-action: none;
  }
}

/* ------------------------------------------------------------------ */
/* 3. Stop hover lifts firing on tap                                   */
/* ------------------------------------------------------------------ */
@media (hover: none) {
  .hover\:-translate-y-0\.5:hover,
  .hover\:-translate-y-1:hover,
  [class*="hover:-translate-y"]:hover {
    transform: none !important;
  }
  /* Keep a fast, cheap press state so buttons still feel responsive. */
  a:active, button:active {
    opacity: 0.75;
    transition: opacity 90ms ease-out;
  }
}

/* ------------------------------------------------------------------ */
/* 4. Reduce layout shift and paint cost while scrolling               */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Images without intrinsic dimensions reflow the text around them as
     they load. Reserving the box removes that jump. */
  img:not([width]):not([height]) {
    height: auto;
    max-width: 100%;
  }

  /* Long lists paint far less while scrolling when rows can be skipped
     until they are near the viewport. */
  tbody tr,
  .space-y-3 > div,
  .space-y-2 > div {
    content-visibility: auto;
    contain-intrinsic-size: auto 64px;
  }

  /* Transitions on colour/shadow are cheap; transitions on "all" force the
     browser to watch every property, including layout ones. */
  .transition-all {
    transition-property: opacity, background-color, border-color, color, box-shadow;
  }
}

/* ------------------------------------------------------------------ */
/* 5. Respect a user's reduced-motion setting                          */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}