/* ═══════════════════════════════════════════════════════════════════
   assets/css/bottom-nav.css
   One shared mobile bottom-navigation pattern, used identically by the
   public site, the admin panel, and the masjid portal. Previously each
   surface had its own version: the public site had a proper fixed bar,
   the admin panel had one too but it was missing several of its own
   pages, and the portal had no fixed bar at all — just the desktop
   sidebar turned sideways at the TOP of the page. This consolidates
   all three into one component so "restructure" doesn't mean three
   separate things to keep in sync going forward.

   Usage: <nav class="app-bottom-nav"> containing <a> children, each
   optionally holding <span class="bn-icon">…</span><span class="bn-label">…</span>.
   Give the current page's link class="active".

   Exactly 6 items are visible per screen width (each is 1/6 of the bar);
   anything beyond that scrolls horizontally with snap-to-item paging,
   and the active item is auto-scrolled into a visible position on load
   by assets/js/bottom-nav.js — so on a page with many sections (e.g.
   the admin panel's 14 pages) the user always lands seeing where they
   currently are, with neighbours visible on both sides as a cue that
   there's more to scroll to.
   ═══════════════════════════════════════════════════════════════════ */

.app-bottom-nav { display: none; }

@media (max-width: 768px) {
  .app-bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: var(--bn-bg, rgba(255,255,255,.98));
    border-top: 1px solid var(--bn-border, rgba(5,150,105,.16));
    box-shadow: 0 -6px 20px rgba(15,46,36,.08);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-bottom-nav::-webkit-scrollbar { display: none; }

  .app-bottom-nav a {
    flex: 0 0 16.6667%;           /* exactly 6 items fill one screen width */
    scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 4px 11px;
    text-decoration: none; color: var(--bn-muted, #4d6b60);
    border-top: 2px solid transparent;
    min-width: 0; -webkit-tap-highlight-color: transparent;
  }
  .app-bottom-nav a .bn-icon { display: inline-flex; width: 1.3rem; height: 1.3rem; transition: transform .2s; }
  .app-bottom-nav a .bn-label {
    font-size: .58rem; font-weight: 500; letter-spacing: .2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .app-bottom-nav a.active { color: var(--bn-accent, #059669); border-top-color: var(--bn-accent, #059669); }
  .app-bottom-nav a:active .bn-icon { transform: scale(.88); }

  /* Body padding so the fixed bar never covers page content — surfaces
     opt in with class="has-bottom-nav" on <body>. */
  body.has-bottom-nav { padding-bottom: 66px; }
}

@media (min-width: 769px) {
  .app-bottom-nav { display: none !important; }
}
