/* PSH Mobile Navigation — bottom nav + "More" sheet, shared across public
 * pages and both dashboards (dashboard-operator.html / dashboard-admin.html).
 * dashboard-player.html keeps its own existing off-canvas sidebar unchanged
 * (per-role bottom nav lives on the public pages for players, not inside
 * their dashboard) — see mobile-nav.js for the role→page mapping.
 *
 * Uses this project's existing 900px mobile/desktop breakpoint — the same
 * one shared.css's .nav-links and dashboard-shared.css's .sidebar already
 * use — rather than inventing a new one, so behavior stays consistent with
 * every other responsive component already in the codebase.
 *
 * Token names (--lime/--bg/--s1/--border/--muted/--fh/--fb/--radius) are
 * defined by both shared.css and dashboard-shared.css with the same names,
 * so this file works unmodified in either context; fallback values are
 * given for the one known gap (--text isn't defined in dashboard-shared.css,
 * which uses literal #fff instead).
 */

.psh-bottom-nav{display:none}
.psh-more-backdrop{display:none}
.psh-more-sheet{display:none}

@media (max-width:899px){
  /* ── BOTTOM NAV ─────────────────────────────────────────── */
  .psh-bottom-nav{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:var(--s1,#111);
    border-top:1px solid var(--border,rgba(255,255,255,.09));
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .psh-bn-item{
    flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;
    min-height:56px;padding:.4rem .2rem;
    background:none;border:none;cursor:pointer;
    color:var(--muted,rgba(255,255,255,.55));
    font-family:var(--fb,'Inter',sans-serif);
    font-size:.6rem;font-weight:600;letter-spacing:.01em;
    text-decoration:none;position:relative;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s ease;
  }
  .psh-bn-item:active{opacity:.7}
  .psh-bn-item.active{color:var(--lime,#A8FF00)}
  .psh-bn-item:focus-visible{outline:2px solid var(--lime,#A8FF00);outline-offset:-2px;border-radius:6px}
  .psh-bn-icon{display:flex;align-items:center;justify-content:center;height:20px}
  .psh-bn-badge{
    position:absolute;top:.15rem;right:calc(50% - 15px);
    width:8px;height:8px;border-radius:50%;
    background:var(--red,#ff4757);
    border:1.5px solid var(--s1,#111);
  }

  /* Bottom nav replaces the hamburger/sidebar-toggle as the mobile nav
     entry point on every page that opts in via [data-psh-nav] — desktop
     (>=900px) is completely untouched, the old triggers still work there
     if a page ever needs them (it won't; hamburgers are already display:none
     at desktop widths via their own existing rules). */
  body[data-psh-nav] .hamburger{display:none!important}
  body[data-psh-nav] .tb-hamburger{display:none!important}

  /* Dashboard topbar (Court Owner/Admin) declutter — the role badge
     ("SUPER ADMIN" etc.) duplicates what's already shown in the More
     sheet's own profile card and header (see the .psh-more-hdr-dash
     eyebrow/role badge), so it's redundant clutter on a screen already
     tight for space; and with the hamburger hidden above, the page
     title is no longer counterbalanced on the left, so centering it in
     the topbar (absolute within .topbar, which is already
     position:fixed and so already a containing block) reads better than
     leaving it left-aligned next to the logo. */
  body[data-psh-nav] .tb-role-badge{display:none}
  body[data-psh-nav] .tb-page-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap}

  /* Player pages only: surface the existing top-right account spot on
     mobile too, in the same header position it already occupies on
     desktop, instead of duplicating Profile as a bottom-nav tab.
     IMPORTANT: .nav-cta is the class on #navGuest itself (Log In/Sign Up),
     NOT a wrapper around both #navGuest and #navUser — auth.js's
     _renderNav() toggles each one's own inline display based on auth
     state (guest.style.display, user.style.display), and inline styles
     always beat a stylesheet rule unless that rule uses !important. An
     earlier version of this rule used !important, which meant the signed-
     out Log In/Sign Up markup stayed visible even after auth.js set
     display:none on it post-login — showing both the guest CTAs and the
     signed-in avatar at once. No !important here: this rule only needs to
     beat shared.css's un-conditional `.nav-cta{display:none}` (specificity
     alone is enough for that), and must yield to whatever auth.js decides
     once auth state resolves. */
  body[data-psh-nav="player"] .nav-cta{display:flex;margin-left:auto}
  body[data-psh-nav="player"] #navUser{margin-left:auto}

  /* Rally AI chat FAB collision: .chatbot-fab sits at bottom:1rem with
     z-index:600, which is both visually under the bottom nav bar (fixed
     at bottom:0, z-index:900) and behind it stacking-wise. Lift it clear
     of the reserved bottom-nav space on every page that opts into this
     nav, rather than duplicating a fix per page. */
  body[data-psh-nav] .chatbot-fab{
    bottom:calc(58px + env(safe-area-inset-bottom,0) + .75rem);
    z-index:910;
  }

  /* Reserve space so the fixed bottom nav never covers page content.
     Applied narrowly (body padding + the dashboards' own .main container)
     rather than blanket-padding every element. */
  body[data-psh-nav]{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}
  body[data-psh-nav] .main{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}

  /* ── MORE SHEET ───────────────────────────────────────────
     Fork of this project's existing off-canvas drawer pattern
     (dashboard-shared.css's #sidebar/#sbOverlay) — translateY instead of
     translateX, bottom-anchored instead of side-anchored. */
  .psh-more-backdrop{
    display:block;position:fixed;inset:0;z-index:950;
    background:rgba(0,0,0,.6);
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
  }
  .psh-more-backdrop.open{opacity:1;pointer-events:auto}

  .psh-more-sheet{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;bottom:0;z-index:960;
    max-height:min(80vh,640px);
    background:var(--s1,#111);
    border-top:1px solid var(--border,rgba(255,255,255,.09));
    border-radius:var(--radius-lg,14px) var(--radius-lg,14px) 0 0;
    transform:translateY(100%);
    transition:transform .24s cubic-bezier(.22,.9,.32,1);
    box-shadow:0 -20px 60px rgba(0,0,0,.5);
  }
  .psh-more-sheet.open{transform:translateY(0)}

  .psh-more-hdr{
    display:flex;align-items:center;justify-content:space-between;
    padding:.9rem 1.1rem;border-bottom:1px solid var(--border,rgba(255,255,255,.09));
    flex-shrink:0;
  }
  .psh-more-hdr-title{font-family:var(--fh,'Poppins',sans-serif);font-weight:800;font-size:.95rem;color:var(--text,#fff)}

  /* Dashboard variant (Court Owner / Admin / Super Admin) — a taller header
     with a role badge above the title, so opening More from inside a
     dashboard reads unmistakably as "this is my dashboard menu" and not
     the generic public-site sheet used on player pages. */
  .psh-more-hdr.psh-more-hdr-dash{padding:1.1rem 1.1rem .9rem}
  .psh-more-hdr-dash .psh-more-hdr-eyebrow{
    display:block;font-family:var(--fh,'Poppins',sans-serif);font-size:.6rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--lime,#A8FF00);margin-bottom:.2rem;
  }
  .psh-more-hdr-dash .psh-more-hdr-title{font-size:1.15rem}
  .psh-more-close{
    width:32px;height:32px;border-radius:50%;border:none;
    background:var(--s2,#191919);color:var(--muted,rgba(255,255,255,.55));
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .psh-more-close:focus-visible{outline:2px solid var(--lime,#A8FF00)}

  .psh-more-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 1.25rem}

  .psh-more-profile{
    display:flex;align-items:center;gap:.75rem;
    padding:1rem 1.1rem;margin:0 1.1rem 1rem;
    background:var(--s2,#191919);border:1px solid var(--border,rgba(255,255,255,.09));
    border-radius:var(--radius-lg,14px);
  }
  .psh-more-avatar{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;
    background:var(--lime,#A8FF00);color:#000;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--fh,'Poppins',sans-serif);font-weight:900;font-size:1.1rem;
  }
  .psh-more-avatar img{width:100%;height:100%;object-fit:cover}
  .psh-more-profile-name{font-family:var(--fh,'Poppins',sans-serif);font-weight:700;font-size:.88rem;color:var(--text,#fff)}
  .psh-more-profile-email{font-family:var(--fb,'Inter',sans-serif);font-size:.72rem;color:var(--muted,rgba(255,255,255,.55));word-break:break-all}
  .psh-more-profile-role{
    display:inline-block;margin-top:.25rem;font-family:var(--fh,'Poppins',sans-serif);
    font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--lime,#A8FF00);background:var(--lime-dim,rgba(168,255,0,.1));
    padding:.15rem .5rem;border-radius:99px;
  }

  .psh-more-section{padding:0 1.1rem;margin-bottom:1.1rem}
  .psh-more-section-title{
    font-family:var(--fh,'Poppins',sans-serif);font-size:.62rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted,rgba(255,255,255,.55));
    margin-bottom:.55rem;
  }

  .psh-more-item{
    display:flex;align-items:center;gap:.75rem;width:100%;
    padding:.65rem 0;background:none;border:none;text-align:left;cursor:pointer;
    color:var(--text,#fff);font-family:var(--fb,'Inter',sans-serif);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    min-height:44px;
  }
  .psh-more-item:focus-visible{outline:2px solid var(--lime,#A8FF00);border-radius:6px}
  .psh-more-item-icon{
    width:34px;height:34px;border-radius:9px;flex-shrink:0;
    background:var(--s2,#191919);display:flex;align-items:center;justify-content:center;
  }
  .psh-more-item-label{font-size:.85rem;font-weight:600;line-height:1.2}
  .psh-more-item-sub{font-size:.7rem;color:var(--muted,rgba(255,255,255,.55));margin-top:.1rem}

  /* "My Dashboard" entry — made larger/lime so it stands out from the
     rest of the More sheet as the primary destination, per user request. */
  .psh-more-item-icon-lg{width:42px;height:42px;background:var(--lime-dim,rgba(168,255,0,.1))}
  .psh-more-item-label-lg{font-size:1rem;font-weight:800}

  .psh-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
  .psh-more-grid .psh-more-item{
    flex-direction:column;text-align:center;gap:.4rem;padding:.75rem .3rem;
    background:var(--s2,#191919);border:1px solid var(--border,rgba(255,255,255,.09));
    border-radius:var(--radius,10px);
  }
  .psh-more-grid .psh-more-item-label{font-size:.68rem}

  .psh-more-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}

  .psh-more-signout{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    width:calc(100% - 2.2rem);margin:.5rem 1.1rem 0;padding:.8rem;
    background:var(--red-dim,rgba(255,71,87,.1));
    border:1px solid var(--red,#ff4757);border-radius:var(--radius,10px);
    color:var(--red,#ff4757);font-family:var(--fh,'Poppins',sans-serif);
    font-weight:700;font-size:.78rem;cursor:pointer;
    min-height:44px;
  }
}

/* Prevent background scroll while the sheet is open (class toggled on body by JS) */
body.psh-sheet-open{overflow:hidden}