/* Mobile nav icon alignment + layout fixes.
   Layered on top of custom.css / reviews.css to correct cross-context
   misalignments without editing the existing brand CSS.

   ROOT CAUSE (Reviews icon)
   -------------------------
   Every other side-nav icon (icon-leaderboard, icon-agents, icon-settings,
   icon-sales-analytics, plus the Font Awesome ones used by Performance /
   Market Insights / Logout) is a font glyph that scales with the inherited
   font-size: 20px set in custom.css :: .side-nav a i.

   .icon-reviews is the outlier: it's a CSS SVG mask sized to an explicit
   27 x 25 box with `position: relative; top: 5px` (set in reviews.css).
   That offset was tuned for the desktop vertical sidebar — but in the
   mobile bottom-nav, where every icon stacks as display: block, the 27x25
   box AND the 5px offset together push Reviews visibly out of line with
   its 20px-glyph siblings.

   FIX (Reviews icon)
   ------------------
   In the mobile-nav context only, normalise Reviews to roughly match the
   glyph size, kill the vertical offset, and centre it horizontally.
   Desktop sidebar styling is untouched.
*/
.mobile-nav .side-nav a i.icon-reviews {
  top: 0 !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 auto 5px !important;
  display: block !important;
}

/* -------------------- Mobile bottom-nav layout --------------------
   The legacy CSS uses inline-block items that wrap unevenly — with 8
   admin items, Settings + Logout end up alone on a tight second row.
   Switch to a 4-column grid so we always get a balanced 2 x 4 layout
   (or fewer rows for roles with fewer items), and bigger tap targets.
*/
@media (max-width: 768px) {
  .mobile-nav .side-nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 0;
    list-style: none;
    margin: 0;
    padding: 8px 4px;
  }
  .mobile-nav .side-nav li {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mobile-nav .side-nav li a {
    display: block;
    padding: 12px 6px !important;
    text-align: center;
    line-height: 1.2;
    border-radius: 8px;        /* gives the tap area a sense of "button" */
  }
}