/* ZEAM_DASHBOARD_SHELL_V31 */
:root{
  --zs31-bg:#020914;
  --zs31-panel:#061525;
  --zs31-panel2:#09233c;
  --zs31-line:rgba(40,231,255,.20);
  --zs31-line2:rgba(255,217,130,.20);
  --zs31-cyan:#28e7ff;
  --zs31-blue:#147dff;
  --zs31-gold:#ffd982;
  --zs31-green:#50ffc8;
  --zs31-red:#ff7898;
  --zs31-text:#f4fbff;
  --zs31-muted:#93aabd;
  --zs31-sidebar:318px;
  --zs31-sidebar-mini:92px;
  --zs31-gap:24px;
  --zs31-radius:28px;
}

html{
  background:var(--zs31-bg)!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable;
}

body{
  background:
    radial-gradient(circle at 82% 8%,rgba(40,231,255,.11),transparent 31%),
    radial-gradient(circle at 8% 92%,rgba(255,132,55,.08),transparent 32%),
    linear-gradient(135deg,#020914,#031526 60%,#020914)!important;
  color:var(--zs31-text)!important;
  overflow-x:hidden!important;
  min-height:100svh;
  padding-bottom:0!important;
}

/* kill old menu conflicts */
.zs8-sidebar,
aside.zs8-sidebar,
.sidebar,
.app-sidebar{
  display:none!important;
}

.zs31-topbar{
  display:none;
}

.zs31-backdrop{
  display:none;
}

.zs31-sidebar{
  position:fixed;
  inset-block:18px;
  inset-inline-end:18px;
  width:var(--zs31-sidebar);
  height:calc(100svh - 36px);
  z-index:80;
  border:1px solid var(--zs31-line);
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 0%,rgba(40,231,255,.17),transparent 34%),
    linear-gradient(180deg,rgba(9,32,52,.96),rgba(1,8,17,.985));
  box-shadow:0 0 54px rgba(0,180,255,.14), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  contain:layout paint;
}

.zs31-brand{
  flex:0 0 auto;
  margin:14px;
  padding:18px;
  min-height:182px;
  border:1px solid rgba(40,231,255,.15);
  border-radius:28px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.06),transparent 28%,rgba(40,231,255,.04)),
    linear-gradient(145deg,rgba(16,45,68,.74),rgba(1,10,19,.72));
  display:grid;
  place-items:center;
  text-align:center;
}

.zs31-brand img{
  width:86px;
  height:86px;
  object-fit:cover;
  border-radius:24px;
  background:#020914;
  box-shadow:0 0 34px rgba(40,231,255,.28);
  margin-bottom:12px;
}

.zs31-brand-title{
  display:block;
  font-size:21px;
  font-weight:1000;
  color:#fff;
  line-height:1.2;
}

.zs31-brand-sub{
  display:block;
  color:var(--zs31-muted);
  font-size:12px;
  margin-top:7px;
}

.zs31-status-row{
  display:flex;
  gap:8px;
  margin-top:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.zs31-chip{
  border:1px solid rgba(40,231,255,.18);
  background:rgba(1,10,19,.62);
  color:#c8f8ff;
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:900;
}

.zs31-nav{
  flex:1 1 auto;
  overflow:auto;
  padding:2px 14px 124px;
  scrollbar-width:thin;
  scrollbar-color:rgba(40,231,255,.32) transparent;
}

.zs31-group{
  margin:16px 0 18px;
}

.zs31-group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:rgba(178,203,223,.70);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.3px;
  padding:0 8px 8px;
}

.zs31-group-title span:last-child{
  color:rgba(255,217,130,.65);
  font-size:10px;
}

.zs31-link{
  min-height:60px;
  display:grid;
  grid-template-columns:44px 1fr;
  align-items:center;
  gap:11px;
  padding:8px 9px;
  margin:7px 0;
  text-decoration:none;
  color:var(--zs31-text);
  border:1px solid rgba(40,231,255,.12);
  border-radius:18px;
  background:rgba(1,10,19,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.zs31-link:hover,
.zs31-link.is-active{
  border-color:rgba(40,231,255,.58);
  background:linear-gradient(135deg,rgba(20,125,255,.32),rgba(1,10,19,.78));
  box-shadow:0 0 25px rgba(0,170,255,.15), inset 0 1px 0 rgba(255,255,255,.07);
}

.zs31-link.is-primary{
  border-color:rgba(255,217,130,.28);
  background:linear-gradient(135deg,rgba(255,217,130,.13),rgba(20,125,255,.14),rgba(1,10,19,.78));
}

.zs31-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  border:1px solid rgba(40,231,255,.18);
  background:rgba(9,36,56,.72);
  font-size:19px;
}

.zs31-link-title{
  display:block;
  color:white;
  font-size:14px;
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.zs31-link-desc{
  display:block;
  color:var(--zs31-muted);
  font-size:11px;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.zs31-footer{
  position:absolute;
  inset-inline:14px;
  bottom:14px;
  min-height:96px;
  border:1px solid rgba(40,231,255,.14);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(12,39,60,.88),rgba(1,9,18,.96));
  padding:12px;
}

.zs31-footer-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.zs31-footer a{
  min-height:38px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#dffaff;
  border:1px solid rgba(40,231,255,.16);
  background:rgba(1,10,19,.62);
  border-radius:14px;
  font-size:12px;
  font-weight:900;
}

/* Desktop main area */
.zs31-main,
body:not(.login-page) main.main-shell,
body:not(.login-page) .main-shell,
body:not(.login-page) .zs8-content{
  transition:none!important;
  animation:none!important;
}

@media (min-width:980px){
  body:not(.login-page) .zs31-main,
  body:not(.login-page) main.main-shell,
  body:not(.login-page) .main-shell,
  body:not(.login-page) .zs8-content{
    width:auto!important;
    max-width:calc(100vw - var(--zs31-sidebar) - 72px)!important;
    margin-inline-end:calc(var(--zs31-sidebar) + 42px)!important;
    margin-inline-start:32px!important;
    padding:28px 0 32px!important;
    min-height:100svh!important;
  }
}

/* Dashboard visual normalization */
body.zs31-dashboard .zs31-main > section,
body.zs31-dashboard main.main-shell > section,
body.zs31-dashboard .dashboard-card,
body.zs31-dashboard .glass-card,
body.zs31-dashboard .du-card,
body.zs31-dashboard .du-panel,
body.zs31-dashboard .za13-section{
  border-radius:var(--zs31-radius)!important;
  border:1px solid var(--zs31-line)!important;
  background:
    linear-gradient(120deg,rgba(255,255,255,.06),transparent 26%,rgba(40,231,255,.035)),
    linear-gradient(145deg,rgba(11,35,55,.70),rgba(1,8,17,.88))!important;
  box-shadow:0 0 34px rgba(0,170,255,.10), inset 0 1px 0 rgba(255,255,255,.045)!important;
  transform:none!important;
  animation:none!important;
}

body.zs31-dashboard h1,
body.zs31-dashboard h2,
body.zs31-dashboard h3{
  color:#fff!important;
  letter-spacing:-.3px;
}

body.zs31-dashboard .text-muted,
body.zs31-dashboard .muted,
body.zs31-dashboard p{
  color:var(--zs31-muted)!important;
}

body.zs31-dashboard .grid,
body.zs31-dashboard .dashboard-grid{
  align-items:stretch;
}

/* Mobile */
@media (max-width:979px){
  body{
    padding-top:74px!important;
  }

  .zs31-topbar{
    position:fixed;
    top:max(10px,env(safe-area-inset-top));
    left:12px;
    right:12px;
    height:58px;
    z-index:90;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid rgba(40,231,255,.18);
    border-radius:22px;
    background:rgba(1,10,19,.88);
    backdrop-filter:blur(14px);
    box-shadow:0 0 32px rgba(0,180,255,.13);
    padding:8px 10px;
  }

  .zs31-topbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .zs31-topbar-brand img{
    width:40px;
    height:40px;
    object-fit:cover;
    border-radius:14px;
    box-shadow:0 0 18px rgba(40,231,255,.25);
  }

  .zs31-topbar-brand b{
    display:block;
    font-size:14px;
    white-space:nowrap;
  }

  .zs31-topbar-brand span{
    display:block;
    color:var(--zs31-muted);
    font-size:10px;
    margin-top:2px;
  }

  .zs31-menu-btn{
    width:44px;
    height:44px;
    border:1px solid rgba(40,231,255,.22);
    border-radius:16px;
    background:linear-gradient(135deg,rgba(20,125,255,.22),rgba(1,10,19,.82));
    color:#fff;
    font-size:20px;
    font-weight:1000;
    display:grid;
    place-items:center;
    cursor:pointer;
  }

  .zs31-sidebar{
    inset-block:max(84px,calc(env(safe-area-inset-top) + 84px)) 12px;
    inset-inline-end:12px;
    width:min(342px,calc(100vw - 24px));
    height:auto;
    max-height:calc(100svh - 96px);
    transform:translateX(calc(100% + 28px));
    opacity:.001;
    pointer-events:none;
    border-radius:28px;
  }

  body.zs31-menu-open .zs31-sidebar{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }

  .zs31-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:70;
    background:rgba(0,0,0,.48);
    backdrop-filter:blur(8px);
    opacity:0;
    pointer-events:none;
  }

  body.zs31-menu-open .zs31-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .zs31-brand{
    display:none;
  }

  .zs31-nav{
    padding:14px 12px 112px;
  }

  .zs31-link{
    min-height:58px;
  }

  body:not(.login-page) .zs31-main,
  body:not(.login-page) main.main-shell,
  body:not(.login-page) .main-shell,
  body:not(.login-page) .zs8-content{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px!important;
    min-height:calc(100svh - 86px)!important;
  }

  .zs31-footer{
    inset-inline:12px;
    bottom:12px;
  }

  body.zs31-dashboard .zs31-main > section,
  body.zs31-dashboard main.main-shell > section,
  body.zs31-dashboard .dashboard-card,
  body.zs31-dashboard .glass-card,
  body.zs31-dashboard .du-card,
  body.zs31-dashboard .du-panel,
  body.zs31-dashboard .za13-section{
    border-radius:22px!important;
  }
}

/* PWA safe area */
@media (display-mode:standalone){
  body{
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
}