/* NGI V16.1.3 — Mobile navigation redesign
   Goal: compact center-based navigation instead of a long accordion. */

/* Desktop keeps the full operational accordion. The mobile hub is progressive enhancement. */
.mobile-nav-shell{display:none}

@media(max-width:900px){
  /* Drawer geometry and overlay */
  #appSidebar{
    width:min(86vw,340px)!important;
    background:#0a3549!important;
    box-shadow:-14px 0 42px rgba(2,22,34,.28)!important;
  }
  .nav-overlay{background:rgba(4,22,32,.42)!important;backdrop-filter:blur(3px)!important}

  /* Clean compact brand — no version clutter on mobile */
  #appSidebar .brand{
    min-height:72px!important;padding:11px 12px!important;gap:10px!important;
    background:#0a3549;border-bottom:1px solid rgba(255,255,255,.08)!important
  }
  #appSidebar .brand img{width:46px!important;height:46px!important;filter:none!important;border-radius:10px;background:#fff;padding:3px}
  #appSidebar .brand b{font-size:20px!important;color:#a8dc55!important}
  #appSidebar .brand small{font-size:8.5px!important;margin-top:4px!important;color:#d5e3e8!important}
  #appSidebar .brand em{display:none!important}
  #appSidebar .brand>button{
    margin-right:auto!important;width:38px!important;height:38px!important;border-radius:11px!important;
    background:rgba(255,255,255,.08)!important;font-size:24px!important;line-height:1
  }
  #appSidebar>nav{padding:0!important;overflow:hidden!important;flex:1;display:flex;min-height:0}
  #appSidebar .privacy{
    margin:8px 12px 12px!important;padding:9px 11px!important;border-radius:12px!important;
    font-size:8px!important;background:rgba(255,255,255,.045)!important
  }

  /* Hide legacy accordion only after JS builds the mobile navigation. */
  #appSidebar.nav-mobile-ready>nav>.nav-primary,
  #appSidebar.nav-mobile-ready>nav>.navgroup{display:none!important}
  #appSidebar.nav-mobile-ready .mobile-nav-shell{display:flex;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}

  .mnav-screen{
    display:none;position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;
    padding:12px 12px 18px;scrollbar-width:none
  }
  .mnav-screen::-webkit-scrollbar{display:none}
  .mnav-screen.is-active{display:block}

  /* Quick routes */
  .mnav-quick{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:14px
  }
  .mnav-quick a{
    min-height:58px;padding:8px 4px;border-radius:13px;text-decoration:none;color:#dceaf0;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.065);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px
  }
  .mnav-quick a span{font-size:17px;line-height:1;color:#9fd553}
  .mnav-quick a b{font-size:8px;font-weight:700;white-space:nowrap}
  .mnav-quick a.active{background:rgba(111,188,86,.17);border-color:rgba(168,220,85,.18);color:#fff}

  /* Main center cards */
  .mnav-title{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:2px 2px 10px}
  .mnav-title div{min-width:0}
  .mnav-title small{display:block;color:#80a6b5;font-size:7px;letter-spacing:.8px;margin-bottom:3px}
  .mnav-title b{display:block;color:#fff;font-size:15px}
  .mnav-title>span{font-size:8px;color:#86a8b5;white-space:nowrap}
  .mnav-centers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mnav-center{
    appearance:none;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.045);color:#fff;
    min-height:104px;border-radius:16px;padding:12px;text-align:right;cursor:pointer;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:9px
  }
  .mnav-center:active{transform:scale(.985)}
  .mnav-center.is-current{border-color:rgba(167,220,85,.32);background:linear-gradient(145deg,rgba(47,135,101,.22),rgba(255,255,255,.045))}
  .mnav-center .mnav-icon{
    width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
    color:#a8dc55;background:rgba(168,220,85,.09);border:1px solid rgba(168,220,85,.10)
  }
  .mnav-center .mnav-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mnav-center strong{display:block;font-size:11px;line-height:1.45;font-weight:750}
  .mnav-center small{display:block;color:#8fb0bd;font-size:7.5px;margin-top:3px}
  .mnav-center .mnav-arrow{align-self:flex-end;color:#789ca9;font-size:15px;line-height:1}

  /* Secondary system/account entry */
  .mnav-secondary{margin-top:11px;display:grid;gap:7px}
  .mnav-secondary button{
    width:100%;min-height:48px;border:1px solid rgba(255,255,255,.07);border-radius:13px;
    background:rgba(255,255,255,.035);color:#dbe9ee;padding:9px 11px;display:flex;align-items:center;gap:10px;text-align:right
  }
  .mnav-secondary button .mnav-icon{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.05);display:grid;place-items:center;color:#9bb8c3}
  .mnav-secondary button .mnav-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mnav-secondary button b{font-size:10px}.mnav-secondary button i{margin-right:auto;font-style:normal;color:#7899a6}

  /* Sub-screen */
  .mnav-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.075)}
  .mnav-back{
    width:36px;height:36px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.055);
    color:#fff;font-size:18px;display:grid;place-items:center;padding:0;flex:0 0 auto
  }
  .mnav-panel-head .mnav-icon{width:34px;height:34px;border-radius:10px;background:rgba(168,220,85,.09);display:grid;place-items:center;color:#a8dc55;flex:0 0 auto}
  .mnav-panel-head .mnav-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mnav-panel-head>div{min-width:0}.mnav-panel-head b{display:block;color:#fff;font-size:13px}.mnav-panel-head small{display:block;color:#82a7b5;font-size:7.5px;margin-top:3px}
  .mnav-panel-links{display:grid;gap:6px}
  .mnav-panel-links .navitem{
    min-height:50px!important;margin:0!important;padding:8px 11px!important;border-radius:12px!important;
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);color:#dbe9ee!important;
    gap:8px!important;transform:none!important
  }
  .mnav-panel-links .navitem:hover{background:rgba(255,255,255,.06)!important}
  .mnav-panel-links .navitem.active{background:rgba(73,157,104,.17)!important;border-color:rgba(168,220,85,.18)!important;box-shadow:inset -3px 0 #a8dc55!important;color:#fff!important}
  .mnav-panel-links .navitem>span{display:none!important}
  .mnav-panel-links .navitem>b{font-size:10px!important;font-weight:650!important;white-space:normal!important;line-height:1.45;flex:1}
  .mnav-panel-links .navitem>small{font-size:7px!important;color:#7f9eaa!important;margin-right:auto}
  .mnav-panel-links .navitem:after{content:'‹';font-size:18px;line-height:1;color:#6f929f;margin-right:auto}

  /* Less visual noise in the page header when drawer is open. */
  .nav-open .workspace>header{filter:saturate(.8)}
}

@media(max-width:380px){
  #appSidebar{width:min(88vw,326px)!important}
  .mnav-screen{padding:10px 10px 16px}
  .mnav-centers{gap:7px}.mnav-center{min-height:98px;padding:10px;border-radius:14px}
  .mnav-center strong{font-size:10px}.mnav-quick{gap:5px}.mnav-quick a{min-height:54px}
}