/* ==========================================================================
   Shared Mobile Navigation for HighAlphaTrading
   ========================================================================== */

/* Public pages (login / register / forgot-password / landing) */
.mobile-bottom-nav{display:none}
@media(max-width:800px){
  .register-page,.forgot-page{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .legal-page,.site-shell,.public-strategies-page{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .mobile-bottom-nav{position:fixed;z-index:30;right:0;bottom:0;left:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:center;padding:7px 7px calc(7px + env(safe-area-inset-bottom));border:1px solid #e1e7ed;border-bottom:0;border-radius:0!important;background:#fff;box-shadow:0 -8px 22px rgba(15,23,42,.1)}
  .mobile-bottom-nav.nav-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mobile-bottom-nav.nav-dark,
  .site-shell .mobile-bottom-nav,
  .legal-page .mobile-bottom-nav,
  .public-strategies-page .mobile-bottom-nav{background:#080a0f!important;border:1px solid rgba(255,255,255,.12)!important;border-bottom:0!important;box-shadow:0 -10px 30px rgba(0,0,0,.85)!important}
  .mobile-bottom-nav.nav-dark a,
  .site-shell .mobile-bottom-nav a,
  .legal-page .mobile-bottom-nav a,
  .public-strategies-page .mobile-bottom-nav a{color:#8c9ba8!important}
  .mobile-bottom-nav.nav-dark a:hover,
  .site-shell .mobile-bottom-nav a:hover,
  .legal-page .mobile-bottom-nav a:hover,
  .public-strategies-page .mobile-bottom-nav a:hover{color:#fff!important}
  .mobile-bottom-nav.nav-dark a.is-active,
  .site-shell .mobile-bottom-nav a.is-active,
  .legal-page .mobile-bottom-nav a.is-active,
  .public-strategies-page .mobile-bottom-nav a.is-active{color:#008AFE!important}
  .mobile-bottom-nav.nav-dark a.is-active svg,
  .site-shell .mobile-bottom-nav a.is-active svg,
  .legal-page .mobile-bottom-nav a.is-active svg,
  .public-strategies-page .mobile-bottom-nav a.is-active svg{stroke:#008AFE!important}
  .mobile-bottom-nav.nav-dark a:first-child.is-active svg,
  .site-shell .mobile-bottom-nav a:first-child.is-active svg,
  .legal-page .mobile-bottom-nav a:first-child.is-active svg,
  .public-strategies-page .mobile-bottom-nav a:first-child.is-active svg{fill:#008AFE!important}
  .mobile-bottom-nav a{display:flex;min-width:0;min-height:50px;align-items:center;justify-content:center;gap:5px;flex-direction:column;color:#7b8490;font-family:var(--serif);font-size:10px;letter-spacing:.03em;line-height:1;text-align:center;text-decoration:none;transition:color .2s ease,background .2s ease,transform .2s ease}
  .mobile-bottom-nav a:hover{color:#52606d}
  .mobile-bottom-nav a.is-active{color:#008AFE}
  .mobile-bottom-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-bottom-nav a:first-child svg{fill:currentColor;stroke:currentColor;stroke-width:1.2}
  .mobile-bottom-nav span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ==========================================================================
   Modern Edge-to-Edge Mobile Navigation for HighAlphaTrading
   Anchored directly at bottom 0, 100% width, sharp bottom/sides,
   smooth top-border, radial-notch for FAB, and active dot indicator.
   ========================================================================== */
.nav-wrap{display:none}

@media(max-width:900px){
  /* Ensure page content is never covered by the bottom nav */
  body.dashboard-page{
    padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;
  }
  .dashboard-content{
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important;
  }

  .nav-wrap{
    --nav-bar-bg:#ffffff;
    --nav-border:#e3eaf0;
    --nav-icon:#8c97a4;
    --nav-text:#596573;
    --nav-active:#008AFE;
    --nav-shadow:rgba(16,37,51,.12);

    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:100vw!important;
    margin:0!important;
    /* El propio wrap pinta fondo/borde/sombra y reserva el safe-area.
       Altura automatica = 64px (.nav) + safe-area. Sin height fija ni
       cadenas de height:100% que colapsan en algunos moviles. */
    padding:0 0 env(safe-area-inset-bottom,0px) 0!important;
    height:auto!important;
    min-height:64px!important;
    display:block!important;
    background:var(--nav-bar-bg)!important;
    border-top:1px solid var(--nav-border);
    border-radius:0!important;
    box-shadow:0 -4px 20px var(--nav-shadow);
    z-index:999!important;
    pointer-events:auto!important;
    -webkit-tap-highlight-color:transparent;
    box-sizing:border-box!important;
    overflow:visible!important;
    transform:none!important;
  }

  html.theme-dark .nav-wrap{
    --nav-bar-bg:#1c1e22;
    --nav-border:rgba(255,255,255,.08);
    --nav-icon:#737c87;
    --nav-text:#9ca3af;
    --nav-active:#008AFE;
    --nav-shadow:rgba(0,0,0,.60);
  }

  .nav-wrap .nav{
    position:relative;
    width:100%!important;
    max-width:100%!important;
    height:64px;
    margin:0;
    padding:0;
    box-sizing:border-box;
    overflow:visible;
  }

  /* Capa del notch: mismo color que el wrap, recorta la curva del FAB.
     El fondo real vive en .nav-wrap, asi el safe-area siempre queda pintado. */
  .nav-wrap .bar{
    display:block!important;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:64px;
    background:var(--nav-bar-bg);
    border:0;
    border-radius:0!important;
    box-shadow:none;
    -webkit-mask:radial-gradient(circle 35px at 50% 0px,transparent 34px,#000 35px);
            mask:radial-gradient(circle 35px at 50% 0px,transparent 34px,#000 35px);
    box-sizing:border-box;
    pointer-events:none;
  }

  .nav-wrap .items{
    position:relative;
    height:64px;
    width:100%;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    box-sizing:border-box;
    margin:0;
    padding:0;
  }

  .nav-wrap .item{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:3px;
    height:100%;
    padding:6px 0 8px;
    color:var(--nav-icon);
    font-family:inherit;
    font-size:10.5px;
    font-weight:700;
    line-height:1.15;
    text-decoration:none;
    background:none;
    border:0;
    cursor:pointer;
    min-width:0;
    box-sizing:border-box;
    transition:color .18s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .nav-wrap .item span:not(.fab){
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    letter-spacing:-.01em;
  }

  .nav-wrap .item svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .18s ease,stroke .18s ease;
    flex-shrink:0;
  }

  /* Active dot indicator on the bottom edge */
  .nav-wrap .item::after{
    content:"";
    position:absolute;
    bottom:3px;
    left:50%;
    width:4px;
    height:4px;
    margin-left:-2px;
    border-radius:50%;
    background:var(--nav-active);
    transform:scale(0);
    transition:transform .2s ease;
  }

  .nav-wrap .item.active{
    color:var(--nav-active);
  }

  .nav-wrap .item.active::after{
    transform:scale(1);
  }

  .nav-wrap .item:hover{
    color:var(--nav-active);
  }

  .nav-wrap .item:active svg{
    transform:scale(.92);
  }

  /* Center Floating FAB (Trading Bots) */
  .nav-wrap .item.center{
    z-index:3;
    justify-content:flex-end;
    padding-bottom:7px;
  }

  .nav-wrap .item.center .fab{
    position:absolute;
    top:-22px;
    left:50%;
    transform:translateX(-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--nav-active);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 4px var(--nav-bar-bg),0 6px 18px rgba(0,138,254,.45);
    transition:transform .18s ease,box-shadow .18s ease;
  }

  .nav-wrap .item.center .fab svg{
    stroke:#fff;
    width:23px;
    height:23px;
    fill:none;
    stroke-width:1.8;
  }

  .nav-wrap .item.center:active .fab{
    transform:translateX(-50%) scale(.93);
    box-shadow:0 0 0 4px var(--nav-bar-bg),0 3px 10px rgba(0,138,254,.35);
  }

  .nav-wrap .item.center.active .fab{
    box-shadow:0 0 0 4px var(--nav-bar-bg),0 0 18px rgba(0,180,255,.65),0 6px 20px rgba(0,138,254,.50);
  }

  .nav-wrap .item.center::after{
    bottom:3px;
  }
}

@media(max-width:380px){
  .nav-wrap .item{
    font-size:9.5px;
    padding:6px 0 7px;
  }
  .nav-wrap .item svg{
    width:20px;
    height:20px;
  }
  .nav-wrap .item.center .fab{
    width:46px;
    height:46px;
    top:-20px;
  }
  .nav-wrap .item.center .fab svg{
    width:21px;
    height:21px;
  }
}