/* OPTION_ALGO_ICON_NAV_V2 - UI only. No strategy or DB changes. */
:root{
  --oa-nav-bg:rgba(7,16,26,.80);
  --oa-nav-border:#223449;
  --oa-nav-text:#dce8f2;
  --oa-nav-shadow:0 12px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  --oa-nav-tip-bg:#07101a;
  --oa-nav-tip-text:#edf3f7;
  --oa-nav-green:#00f08a;
  --oa-nav-blue:#2f86ff;
  --oa-nav-purple:#a855f7;
  --oa-nav-orange:#ff9f1c;
  --oa-nav-cyan:#22d3ee;
  --oa-nav-red:#ff4d5a;
}
body.light,body.global-light,body.theme-light,body[data-theme="light"]{
  --oa-nav-bg:rgba(255,255,255,.88);
  --oa-nav-border:#d7e2ef;
  --oa-nav-text:#102033;
  --oa-nav-shadow:0 10px 24px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.82);
  --oa-nav-tip-bg:#ffffff;
  --oa-nav-tip-text:#101828;
}
.oa-icon-nav{position:fixed;top:12px;right:72px;z-index:10050;display:flex;align-items:center;gap:8px;padding:4px;border:1px solid var(--oa-nav-border);border-radius:14px;background:var(--oa-nav-bg);box-shadow:var(--oa-nav-shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.oa-nav-btn{position:relative;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--oa-nav-border);border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.05));color:var(--oa-nav-text);text-decoration:none!important;font-size:17px;line-height:1;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease}
.oa-nav-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
body.light .oa-nav-btn:hover,body.global-light .oa-nav-btn:hover,body.theme-light .oa-nav-btn:hover,body[data-theme="light"] .oa-nav-btn:hover{background:rgba(47,134,255,.055)}
.oa-nav-btn::after{content:attr(data-label);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);opacity:0;pointer-events:none;white-space:nowrap;background:var(--oa-nav-tip-bg);color:var(--oa-nav-tip-text);border:1px solid currentColor;border-radius:10px;padding:7px 10px;font-size:12px;font-weight:900;box-shadow:var(--oa-nav-shadow);transition:opacity .12s ease,transform .12s ease}.oa-nav-btn::before{content:"";position:absolute;top:calc(100% + 5px);left:50%;width:9px;height:9px;transform:translateX(-50%) rotate(45deg);opacity:0;background:var(--oa-nav-tip-bg);border-left:1px solid currentColor;border-top:1px solid currentColor;transition:opacity .12s ease}.oa-nav-btn:hover::after,.oa-nav-btn:hover::before{opacity:1}
.oa-charts{color:var(--oa-nav-green)}.oa-trades{color:var(--oa-nav-blue)}.oa-review{color:var(--oa-nav-purple)}.oa-strategy{color:var(--oa-nav-orange)}.oa-wallet{color:#facc15}.oa-theme{color:#94a3b8}.oa-settings{color:var(--oa-nav-cyan)}.oa-logout{color:var(--oa-nav-red)}
.oa-nav-btn.active{border-color:currentColor;box-shadow:0 0 15px color-mix(in srgb,currentColor 24%,transparent),inset 0 1px 0 rgba(255,255,255,.1);background:color-mix(in srgb,currentColor 12%,transparent)}
/* Hide old duplicated textual nav only; keep page action buttons such as + New Strategy, Refresh, Download CSV. */
body.oa-icon-nav-enabled .top-nav-links{display:none!important}
body.oa-icon-nav-enabled header.topbar nav.nav{display:none!important}
body.oa-icon-nav-enabled .settings-header nav{display:none!important}
body.oa-icon-nav-enabled .strategy-builder-header nav a{display:none!important}
body.oa-icon-nav-enabled .strategy-builder-header nav{margin-right:410px}
body.oa-icon-nav-enabled .topbar{padding-right:410px}
body.oa-icon-nav-enabled .strategy-builder-header{padding-right:410px}
body.oa-icon-nav-enabled .settings-header{padding-right:410px}
/* Chart page is narrower because of the right indicator pane, so use a tighter nav. */
body.oa-page-chart .oa-icon-nav{top:11px;right:58px;gap:6px;padding:3px;border-radius:13px}
body.oa-page-chart .oa-nav-btn{width:33px;height:33px;border-radius:10px;font-size:15px}
body.oa-page-chart .oa-nav-btn::after{font-size:12px;padding:6px 9px}
html.postmortem-frame-v100 .oa-icon-nav{display:none!important}


/* OPTION_ALGO_ICON_NAV_MOBILE_DOCK_V3_START
   Mobile uses a compact bottom dock. It must not expand into a large empty panel. */
@media(max-width:980px){
  .oa-icon-nav{right:10px;top:10px;gap:6px;max-width:calc(100vw - 20px)}
  .oa-nav-btn{width:34px;height:34px;font-size:16px;flex:0 0 auto}
  body.oa-icon-nav-enabled .topbar,
  body.oa-icon-nav-enabled .strategy-builder-header,
  body.oa-icon-nav-enabled .settings-header{padding-right:280px}
}
@media(max-width:720px){
  .oa-icon-nav{
    position:fixed!important;
    top:auto!important;
    right:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 18px)!important;
    height:auto!important;
    max-height:56px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:6px 8px!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
  }
  .oa-icon-nav::-webkit-scrollbar{display:none}
  .oa-icon-nav{scrollbar-width:none}
  .oa-nav-btn{width:39px!important;height:39px!important;border-radius:13px!important;font-size:18px!important;flex:0 0 auto!important}
  .oa-nav-btn::after,.oa-nav-btn::before{display:none!important}
  body.oa-icon-nav-enabled .topbar,
  body.oa-icon-nav-enabled .strategy-builder-header,
  body.oa-icon-nav-enabled .settings-header{padding-right:18px!important}
  body.oa-page-chart{padding-bottom:66px!important}
}
/* OPTION_ALGO_ICON_NAV_MOBILE_DOCK_V3_END */

/* ICON_NAV_MOBILE_DOCK_17JUN */
@media(max-width:720px){
  .oa-icon-nav{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:10px!important;
    transform:translateX(-50%)!important;
    width:auto!important;
    max-width:calc(100vw - 18px)!important;
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    padding:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .oa-nav-btn{width:38px!important;height:38px!important;min-width:38px!important;flex:0 0 38px!important;border-radius:12px!important;font-size:17px!important;padding:0!important;margin:0!important;}
  .oa-nav-btn::after,.oa-nav-btn::before{display:none!important;}
  body.oa-icon-nav-enabled .topbar,
  body.oa-icon-nav-enabled .strategy-builder-header,
  body.oa-icon-nav-enabled .settings-header{padding-right:14px!important;padding-bottom:10px!important;}
  body.oa-icon-nav-enabled{padding-bottom:64px!important;}
}