/* CRITICAL FIX: .mobile-sidebar-overlay must ALWAYS be position:fixed,
   not just below the 1024px breakpoint. Previously position:fixed was
   declared INSIDE the @media (max-width:1024px) block below — on any
   screen WIDER than 1024px, this element had no position rule at all
   and fell back to the CSS default (position:static), making it
   participate as a normal grid item inside .app-shell's grid. That
   pushed .main-content into the wrong grid column (the one reserved
   for .sidebar), breaking the ENTIRE page layout on desktop-width
   screens specifically (mobile/narrow screens worked fine, since the
   media query DID apply there and correctly set position:fixed).
   position:fixed now applies unconditionally; only `display`
   (none vs block) remains responsive within the media query below. */
.mobile-sidebar-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 199;
}

/* ============================================================
   mobile.css — App-wide mobile responsiveness

   BUG-046 FIX: Reduced !important usage from 18 to only where truly
   needed (overriding inline styles / very high specificity from
   other files). Most rules now rely on normal cascade + being loaded
   last in base.html, which already gives them priority.

   BUG-047 FIX: .p-grid rule removed — it targeted a class that was
   never defined anywhere in the codebase (dead CSS). If a grid
   utility is needed, use .insights-grid or add a properly defined
   .p-grid class to base.css first.
   ============================================================ */

@media (max-width: 1024px) {
  .mobile-menu-btn {
    display: inline-flex !important;  /* needed: overrides inline style="display:none" in topnav.html */
  }
  .mobile-sidebar-overlay {
    background: rgba(0,0,0,.4);
  }
  .mobile-sidebar-overlay.show {
    display: block;
  }
  /* BUG-246 FIX: show the mobile close button inside sidebar-bottom on small screens */
  .mobile-close-btn {
    display: flex !important;
  }
}

@media (max-width: 640px) {
  /* Safety net for the topnav-right/globalUserBadge fix further down
     this file: even after tightening .topnav-right's own footprint, a
     few px of residual overflow can differ slightly per-page (measured:
     /teacher fits cleanly, /dashboard's slightly different content
     still left ~2px), which without this was compounding into a real,
     draggable ~35px page-level horizontal scroll on /dashboard. This is
     a page-content-agnostic backstop: it doesn't fix any specific
     element's sizing, it just guarantees the PAGE itself never scrolls
     sideways site-wide, regardless of small per-page differences. */
  html, body {
    overflow-x: hidden;
  }

  /* Touch-target sizing — BUG-264 FIX: raised from 40px to 44px to
     meet Apple HIG / Google Material minimum touch target guideline */
  button, .btn, .btn-icon, .btn-sm, .btn-lg,
  input[type="button"], input[type="submit"] {
    min-height: 44px;
  }
  .btn-icon {
    min-width: 44px;
  }
  input, select, textarea {
    font-size: 16px !important; /* needed: prevents iOS Safari auto-zoom on focus */
  }

  /* Global user badge */
  #globalUserBadge {
    top: 8px;
    right: 8px;
    padding: 4px 6px 4px 10px;
    font-size: 11px;
    max-width: calc(100vw - 16px);
  }
  #globalUserBadge span {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Fullscreen modals */
  #sketchModal > div {
    width: 96vw;
    height: 90vh;
    border-radius: 12px;
  }
  #drawModal .dm-toolbar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
  }

  /* Login/signup card */
  .login-card {
    padding: 24px 20px;
  }
  .role-tabs, .mode-toggle {
    font-size: 13px;
  }

  /* BUG-047 FIX: removed dead .p-grid rule.
     .insights-grid is the only real grid class used here. */
  .insights-grid {
    grid-template-columns: 1fr;
  }

  /* Tables that would otherwise overflow */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Long headings/titles */
  h1, .login-title { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  /* BUG-263 FIX: Quick-chips bar (teacher page) — allow horizontal
     scroll instead of wrapping to multiple lines that push the
     textarea off-screen on narrow phones. */
  .quick-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quick-chips::-webkit-scrollbar { display: none; }
  .quick-chips .chip {
    flex-shrink: 0;
  }
}

@media (max-width: 400px) {
  /* Extra-small phones */
  .login-wrap { padding: 8px; }
  .login-card { padding: 18px 14px; }
}

/* SITE-WIDE FIX: .topnav-right structurally overflows the viewport at
   narrow phone widths (measured at 375px: .topnav-right right edge
   lands at 411px, 36px past the viewport). Its 4 items (theme toggle/
   voice/notification/user-menu) don't fit next to the brand + mobile
   menu button. Rather than removing any icon (preserving all 4 pieces
   of functionality), the .user-menu's text label (name + class, ~100px)
   is hidden at this width — the avatar stays fully visible and
   clickable, so opening the dropdown (Dashboard/Logout) still works
   exactly as before, just without the redundant text. */
@media (max-width: 480px) {
  .topnav-right {
    gap: var(--sp-2);
  }
  .user-menu-info {
    display: none;
  }
}
/* At the very narrowest supported phones (~320-360px), hiding the
   user-menu text alone (above) isn't quite enough — .topnav-right still
   landed ~38px past the viewport edge in testing. Reclaiming space from
   .topnav's own horizontal padding and the icon cluster's inter-item
   gap (neither removes/shrinks any icon or tap target — .topnav-btn's
   own 36x36 size, already below the 44px guideline used elsewhere on
   this site for its own established reasons, is untouched) closes the
   rest of the gap without touching the brand logo or any icon. */
@media (max-width: 360px) {
  .topnav {
    padding: 0 var(--sp-1);
  }
  .topnav-brand {
    gap: var(--sp-1);
  }
  .topnav-right {
    gap: 2px;
  }
}