/* assets/css/ua_sidebar3.css - NOC UI v2 sidebar */
:root{
  --sb3-w: 238px;
  --sb3-bg1: color-mix(in srgb,var(--ua-theme-sidebar,#08383c) 96%,white 4%);
  --sb3-bg2: color-mix(in srgb,var(--ua-theme-sidebar,#041f26) 88%,black 12%);
  --sb3-panel: color-mix(in srgb,var(--ua-theme-sidebar-item,#0c4a4c) 76%,transparent);
  --sb3-border: var(--ua-ds-line,var(--ua-border,rgba(153,246,228,.24)));
  --sb3-text: var(--ua-ds-title,var(--ua-text,#effffc));
  --sb3-text-soft: color-mix(in srgb,var(--ua-text,#effffc) 68%,transparent);
  --sb3-accent: var(--ua-accent,#5eead4);
  --sb3-cyan: var(--ua-accent-2,#67e8f9);
}
.ua-sb3{
  position:fixed; top:0; bottom:0; inset-inline-start:0; width:var(--sb3-w); z-index:999;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--sb3-accent) 14%,transparent), transparent 24%),
    linear-gradient(180deg, var(--sb3-bg1), var(--sb3-bg2));
  border-inline-end:1px solid var(--sb3-border);
  box-shadow:0 24px 64px rgba(4,12,30,.42);
  backdrop-filter: blur(16px);
}
html[dir="ltr"] .ua-sb3{inset-inline-start:auto; inset-inline-end:0; border-inline-end:0; border-inline-start:1px solid var(--sb3-border);}
.ua-sb3::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, color-mix(in srgb,var(--sb3-accent) 10%,transparent), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 34%);
}
.ua-sb3-head{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 10px 10px; border-bottom:1px solid rgba(255,255,255,.08);}
.ua-sb3-brand-head{
  min-height:142px;
  overflow:hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--sb3-accent) 10%,transparent), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
}
.ua-sb3-brand-wrap{
  position:relative;
  width:100%;
  min-height:120px;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(153,246,228,.16);
  background:rgba(3,26,32,.22);
}
.ua-sb3-brand-wrap::before{
  content:none;
}
.ua-sb3-brand-wrap::after{
  content:"";
  position:absolute;
  left:30px;
  right:30px;
  top:50%;
  height:2px;
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(153,246,228,.54), rgba(255,255,255,.18), rgba(153,246,228,.54), transparent);
  box-shadow:0 0 16px rgba(94,234,212,.24);
  opacity:.36;
  transform:translateY(-50%);
  animation:uaSb3ContainedShine 5.2s ease-in-out infinite;
}
.ua-sb3-brand-logo{
  display:block;
  width:min(222px,100%);
  max-height:138px;
  object-fit:contain;
  object-position:center;
  image-rendering:auto;
  transform:translateZ(0);
  filter:
    drop-shadow(0 0 7px rgba(94,234,212,.30))
    drop-shadow(0 10px 18px rgba(0,0,0,.28));
  animation:uaSb3LogoBreath 4.1s ease-in-out infinite;
}
@keyframes uaSb3ContainedShine{
  0%,100%{opacity:.28; transform:translateY(-50%) scaleX(.72);}
  50%{opacity:.72; transform:translateY(-50%) scaleX(1);}
}
@keyframes uaSb3LogoBreath{
  0%,100%{filter:drop-shadow(0 0 5px rgba(94,234,212,.22)) drop-shadow(0 10px 18px rgba(0,0,0,.28));}
  50%{filter:drop-shadow(0 0 10px rgba(153,246,228,.36)) drop-shadow(0 12px 22px rgba(0,0,0,.30));}
}
@media (prefers-reduced-motion: reduce){.ua-sb3-brand-wrap::after,.ua-sb3-brand-logo{animation:none;}}
/* Legacy avatar selectors kept for pages/cached fragments that may still reference them */
.ua-sb3-avatar{width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,#dce7ff,#9db8ef); color:#17243b; font-weight:900; font-size:34px; box-shadow:0 12px 30px rgba(0,0,0,.24);}
.ua-sb3-meta{text-align:center;}
.ua-sb3-name{font-size:18px; font-weight:900; color:var(--sb3-text);}
.ua-sb3-sub{font-size:12px; font-weight:800; color:var(--sb3-text-soft);}
.ua-sb3-nav{
  position:relative;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-auto-flow:row;
  grid-auto-rows:minmax(39px,1fr);
  align-content:stretch;
  gap:2px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:8px 10px 16px;
  scrollbar-width:thin;
  scrollbar-color:rgba(94,234,212,.44) transparent;
}
.ua-sb3-nav::-webkit-scrollbar{width:6px;}
.ua-sb3-nav::-webkit-scrollbar-track{background:transparent;}
.ua-sb3-nav::-webkit-scrollbar-thumb{background:rgba(94,234,212,.44); border-radius:20px;}
.ua-sb3-item{
  width:100%; display:grid; grid-template-columns:18px 1fr 28px; align-items:center; gap:9px;
  align-self:center;
  height:100%;
  max-height:56px;
  min-height:39px;
  padding:9px 10px; margin:0; border-radius:10px;
  border:1px solid transparent !important; background:transparent !important;
  color:var(--sb3-text); font-weight:900; cursor:pointer; transition:.18s ease;
  box-shadow:none !important;
}
.ua-sb3-item:hover,.ua-sb3-item.is-active,.ua-sb3-item.is-open{transform:none; border-color:color-mix(in srgb,var(--sb3-accent) 28%,transparent) !important; background:var(--sb3-panel) !important; box-shadow:inset 3px 0 0 var(--sb3-accent) !important;}
html[dir="ltr"] .ua-sb3-item:hover,html[dir="ltr"] .ua-sb3-item.is-active,html[dir="ltr"] .ua-sb3-item.is-open{box-shadow:inset -3px 0 0 var(--sb3-accent);}
.ua-sb3-caret{order:0; font-size:14px; color:rgba(255,255,255,.72);} html[dir="ltr"] .ua-sb3-caret{transform:scaleX(-1);}
.ua-sb3-t{order:1; text-align:start; font-size:13px; line-height:1.35;}
.ua-sb3-ic{order:2; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:color-mix(in srgb,var(--ua-theme-input,#03232a) 70%,transparent) !important; border:1px solid color-mix(in srgb,var(--sb3-accent) 16%,transparent) !important;}
.ua-sb3-ic img{width:16px; height:16px; filter:brightness(0) invert(1) opacity(.88);}
.ua-sb3-ic i{font-size:13px; color:rgba(238,244,255,.88); line-height:1;}
.ua-sb3-flyout-host{
  position:fixed; z-index:100001; min-width:260px; max-width:360px; max-height:calc(100vh - 20px); overflow:auto;
  border-radius:16px; background:linear-gradient(180deg,color-mix(in srgb,var(--ua-theme-menu,#084043) 92%,transparent),color-mix(in srgb,var(--ua-theme-menu,#04222a) 78%,black 12%)); border:1px solid color-mix(in srgb,var(--sb3-accent) 26%,transparent); box-shadow:0 20px 46px rgba(4,12,30,.46);
}
.ua-sb3-fly{padding:10px;} .ua-sb3-fly-head{padding:4px 8px 12px; font-weight:900; color:#fff; font-size:14px;}
.ua-sb3-fly-body{display:grid; gap:8px;}
.ua-sb3-link{display:flex; align-items:center; gap:0; min-height:40px; padding:9px 12px; border-radius:9px; color:#eef4ff; text-decoration:none; background:transparent !important; border:1px solid transparent !important; font-weight:800;}
.ua-sb3-link:hover,.ua-sb3-link.is-active{background:rgba(20,103,101,.30) !important; border-color:rgba(153,246,228,.16) !important; color:#fff;}
.ua-sb3-link .ua-sb3-ic{width:24px; height:24px; border-radius:7px;}
.ua-sb3-link .ua-sb3-ic img{width:12px; height:12px;}
.ua-sb3-link .ua-sb3-ic i{font-size:12px;}
.ua-sb3-fly--billing_finance{min-width:0;}
.ua-sb3-fly--billing_finance .ua-sb3-fly-head{
  border-bottom:1px solid rgba(153,246,228,.18);
  margin-bottom:8px;
  color:#ccfbf1;
}
.ua-sb3-fly--billing_finance .ua-sb3-link{
  min-height:46px;
  border-color:rgba(153,246,228,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.018));
}
.ua-sb3-fly--billing_finance .ua-sb3-link .ua-sb3-ic{
  color:#ccfbf1;
  background:rgba(20,103,101,.22);
  border-color:rgba(153,246,228,.18);
}
.ua-sb3-fly--billing_finance .ua-sb3-link.is-active{
  background:linear-gradient(180deg, rgba(20,103,101,.36), rgba(94,234,212,.12));
  border-color:rgba(153,246,228,.34);
}
.ua-sb3-foot{
  position:relative;
  padding:5px 10px !important;
  min-height:0 !important;
  line-height:1.2 !important;
  border-top:1px solid rgba(153,246,228,.14) !important;
  color:var(--sb3-text-soft);
  font-size:11px;
}
@media (max-width:992px){
  .ua-sb3{transform:translateX(110%); transition:transform .2s ease; width:min(var(--sb3-w), 88vw);} 
  html[dir="ltr"] .ua-sb3{transform:translateX(-110%);} 
  body.ua-mobile-sb-open .ua-sb3{transform:translateX(0);} 
}

.ua-sb3-brand-head{
  min-height:130px !important;
  padding-bottom:0 !important;
}

.ua-sb3-brand-wrap{
  min-height:112px !important;
  margin-bottom:0 !important;
}

.ua-sb3-nav{
  padding-top:0 !important;
  margin-top:0 !important;
}

.ua-sb3-brand-wrap{
  transform:none !important;
}


/* Sidebar vertical layout contract:
   the navigation owns all remaining height, distributes its rows evenly when
   space is available, and becomes scrollable only when the viewport is short. */
.ua-sb3-nav{
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-auto-flow:row !important;
  grid-auto-rows:minmax(39px,1fr) !important;
  align-content:stretch !important;
  gap:2px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  scrollbar-width:thin !important;
  scrollbar-color:color-mix(in srgb,var(--sb3-accent) 42%,transparent) transparent !important;
  padding:8px 9px 6px !important;
  margin:0 !important;
}
.ua-sb3-nav::-webkit-scrollbar{
  width:6px !important;
  height:6px !important;
}
.ua-sb3-nav::-webkit-scrollbar-track{background:transparent !important;}
.ua-sb3-nav::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--sb3-accent) 42%,transparent) !important;
  border-radius:20px !important;
}
.ua-sb3-item{
  align-self:center !important;
  height:100% !important;
  max-height:56px !important;
  min-height:39px !important;
  padding:6px 9px !important;
  margin:0 !important;
  grid-template-columns:15px 1fr 26px !important;
  gap:7px !important;
}
.ua-sb3-ic{
  width:26px !important;
  height:26px !important;
  border-radius:8px !important;
}
.ua-sb3-ic i{font-size:12px !important;}
.ua-sb3-ic img{width:14px !important;height:14px !important;}
.ua-sb3-t{font-size:12.5px !important;line-height:1.28 !important;}

/* Sidebar brand treatment. */
.ua-sb3-brand-head{
  min-height:126px !important;
  padding-top:9px !important;
  padding-bottom:4px !important;
  border-bottom-color:rgba(255,255,255,.055) !important;
}
.ua-sb3-brand-wrap{
  min-height:108px !important;
  border-color:transparent !important;
  border-width:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.ua-sb3-brand-wrap::after{display:none !important;}
.ua-sb3-brand-logo{
  max-height:132px !important;
  filter:none !important;
  animation:none !important;
}
.ua-sb3-foot{
  margin:0 !important;
  padding:5px 10px 6px !important;
  border-top-color:rgba(153,246,228,.10) !important;
}

/* 2026-05-26 template-aligned menu palette. */
body.ua-design-v2.ua-authed .ua-sb3{
  background:
    radial-gradient(circle at 82% 0%,color-mix(in srgb,var(--ua-accent) 9%,transparent),transparent 42%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--ua-theme-sidebar) 96%,white 4%),
      color-mix(in srgb,var(--ua-theme-sidebar) 88%,black 12%)
    ) !important;
  border-color:var(--ua-ds-line,var(--ua-border)) !important;
  box-shadow:0 22px 54px rgba(0,0,0,.32) !important;
}
body.ua-design-v2.ua-authed .ua-sb3-brand-head{
  border-bottom-color:color-mix(in srgb,var(--ua-border) 62%,transparent) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ua-theme-surface-2) 34%,transparent),transparent) !important;
}
body.ua-design-v2.ua-authed .ua-sb3-item{
  color:var(--ua-sidebar-text,var(--ua-ds-title,var(--ua-text))) !important;
  border-color:transparent !important;
  background:transparent !important;
}
body.ua-design-v2.ua-authed .ua-sb3-item:hover,
body.ua-design-v2.ua-authed .ua-sb3-item.is-active,
body.ua-design-v2.ua-authed .ua-sb3-item.is-open{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--ua-theme-sidebar-item) 88%,var(--ua-accent) 12%),
      color-mix(in srgb,var(--ua-theme-sidebar-item) 90%,black 10%)
    ) !important;
  border-color:color-mix(in srgb,var(--ua-accent) 34%,var(--ua-border) 66%) !important;
  color:var(--ua-sidebar-text,var(--ua-ds-title,var(--ua-text))) !important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--ua-accent) 82%,var(--ua-accent-2) 18%) !important;
}
html[dir="ltr"] body.ua-design-v2.ua-authed .ua-sb3-item:hover,
html[dir="ltr"] body.ua-design-v2.ua-authed .ua-sb3-item.is-active,
html[dir="ltr"] body.ua-design-v2.ua-authed .ua-sb3-item.is-open{
  box-shadow:inset -3px 0 0 color-mix(in srgb,var(--ua-accent) 82%,var(--ua-accent-2) 18%) !important;
}
body.ua-design-v2.ua-authed .ua-sb3-ic{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--ua-theme-sidebar-item) 86%,var(--ua-accent) 14%),
      color-mix(in srgb,var(--ua-theme-sidebar-item) 90%,black 10%)
    ) !important;
  border-color:color-mix(in srgb,var(--ua-border) 72%,var(--ua-accent) 28%) !important;
  color:var(--ua-sidebar-text,var(--ua-ds-title,var(--ua-text))) !important;
}
body.ua-design-v2.ua-authed .ua-sb3-ic img{
  filter:brightness(0) invert(1) opacity(.86) !important;
}
body.ua-design-v2.ua-authed .ua-sb3-caret,
body.ua-design-v2.ua-authed .ua-sb3-foot{
  color:color-mix(in srgb,var(--ua-sidebar-text,var(--ua-text)) 72%,transparent) !important;
}
body.ua-design-v2.ua-authed .ua-sb3-flyout-host{
  background:
    radial-gradient(circle at 88% 0%,color-mix(in srgb,var(--ua-accent) 8%,transparent),transparent 42%),
    linear-gradient(180deg,color-mix(in srgb,var(--ua-theme-menu) 90%,var(--ua-theme-surface) 10%),color-mix(in srgb,var(--ua-theme-surface) 82%,black 10%)) !important;
  border-color:var(--ua-ds-line,var(--ua-border)) !important;
}
body.ua-design-v2.ua-authed .ua-sb3-link:hover,
body.ua-design-v2.ua-authed .ua-sb3-link.is-active{
  background:color-mix(in srgb,var(--ua-theme-surface-2) 82%,var(--ua-accent) 12%) !important;
  border-color:color-mix(in srgb,var(--ua-accent) 28%,var(--ua-border) 72%) !important;
}

.ua-mobile-menu-button{
  display:none;
}

@media (max-width:992px){
  .ua-mobile-menu-button{
    position:fixed;
    inset-block-start:10px;
    inset-inline-start:10px;
    z-index:59;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:8px 13px;
    border:1px solid color-mix(in srgb,var(--ua-accent,#21b8c7) 55%,transparent);
    border-radius:12px;
    background:color-mix(in srgb,var(--ua-theme-surface,#0b1726) 92%,transparent);
    color:var(--ua-text,#f4f7fb);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
    font:800 13px/1.2 inherit;
  }

  .ua-mobile-menu-button i{
    font-size:16px;
  }

  body.ua-mobile-sb-open .ua-mobile-menu-button{
    opacity:0;
    pointer-events:none;
  }

  body.ua-mobile-sb-open .ua-sb-backdrop{
    display:block;
  }

  /* Keep the menu control in its own row instead of covering dashboard
     statistics, and restore scrolling for short phone viewports. */
  body.ua-authed:not(.ua-frame-context) .ua-main{
    padding-top:56px !important;
    box-sizing:border-box !important;
  }

  .ua-sb3-nav{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
  }

  .ua-sb3-flyout-host{
    width:min(360px, calc(100vw - 20px)) !important;
    min-width:0 !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;
    scrollbar-width:thin;
  }
}

@media (max-width:480px), (max-height:700px){
  .ua-sb3-brand-head{
    min-height:92px !important;
    padding-top:6px !important;
  }

  .ua-sb3-brand-wrap{
    min-height:78px !important;
  }

  .ua-sb3-brand-logo{
    max-height:88px !important;
  }

  .ua-sb3-nav{
    padding:6px 8px !important;
    grid-auto-rows:minmax(40px,1fr) !important;
  }

  .ua-sb3-item{
    height:100% !important;
    max-height:52px !important;
    min-height:40px !important;
    padding:6px 8px !important;
  }

  .ua-sb3-fly{
    padding:8px !important;
  }

  .ua-sb3-link{
    min-height:44px !important;
    padding:8px !important;
  }
}
