/* RideM8 – full-screen layout for tablets, laptops and desktops.
   Phones are unchanged. Wider screens get the whole window: menu down the left, wider maps,
   pop-ups in the middle of the screen, and text kept at a comfortable reading width. */

/* Tablets (600–899 px): use the full width */
@media (min-width: 600px) {
  .app { max-width: none; box-shadow: none; }
  html, body { background: var(--bg); }
  main { padding: 18px 24px; }
  main.full { padding: 0; }
  #routeMap { height: 260px; }
  #famMap { height: 340px; }
}

/* Laptops & desktops (900 px and wider): sidebar menu */
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 230px 1fr; grid-template-rows: auto 1fr; }
  header { grid-column: 1 / -1; padding: 14px 24px; }
  header h1 { font-size: 19px; }

  /* bottom bar → left sidebar */
  nav { grid-column: 1; grid-row: 2; flex-direction: column; justify-content: flex-start; gap: 4px;
        border-top: none; border-right: 1px solid #e8e4ee; padding: 14px 10px; overflow-y: auto; }
  nav a { flex: none; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
          font-size: 14.5px; text-align: left; }
  nav a b { display: inline-flex; font-size: 20px; }
  nav a:hover { background: #f4f2f7; }
  nav a.on { background: var(--gl); }
  nav a i { position: static; margin-left: auto; }

  main { grid-column: 2; grid-row: 2; padding: 26px 32px; }
  main.full { padding: 0; }
  /* logged out (no menu): use the whole width */
  .app:has(#nav:empty) { grid-template-columns: 1fr; }
  .app:has(#nav:empty) main { grid-column: 1; }

  /* keep cards and forms at a readable width, centred */
  main:not(.full) > * { max-width: 860px; margin-left: auto; margin-right: auto; }
  main:not(.full) > .chat { max-width: 860px; }

  /* bigger maps */
  #map { height: 520px; }
  #famMap { height: 440px; }
  #routeMap { height: 320px; }
  .planner.embed { height: 460px; }

  /* Find screen: search box top-left, results panel floating on the right */
  .pl-overlay { right: auto; width: 440px; top: 18px; left: 18px; }
  .pl-sheet { left: auto; right: 18px; bottom: 18px; top: 18px; width: 420px; max-height: none;
              border-radius: 20px; box-shadow: 0 6px 24px rgba(30,10,60,.18); }
  .pl-sheet .grab { display: none; }
  .planner.full .pl-locate { bottom: 22px; right: 456px; }

  /* pop-ups in the middle of the screen instead of sliding up from the bottom */
  .modal { align-items: center; justify-content: center; }
  .sheet { max-width: 560px; border-radius: 22px; max-height: 86%; padding: 24px; }
  #ppMap, #pvMap { height: 300px; }

  .toast { top: 78px; }
  .btn:not(.sm) { max-width: 860px; }
  .kidbtns { grid-template-columns: repeat(3, 1fr); }
}

/* Very wide screens: a little more room */
@media (min-width: 1400px) {
  .app { grid-template-columns: 260px 1fr; }
  main:not(.full) > * { max-width: 980px; }
  .pl-overlay { width: 480px; }
  .pl-sheet { width: 460px; }
  .planner.full .pl-locate { right: 496px; }
}