/* ============================================================
   应用外壳：顶部导航 / 面包屑 / 左侧菜单 / 内容区
   视觉规格对齐兄弟项目「月度考核」（同一 DSC 平台外壳）
   ============================================================ */
.app{display:flex;flex-direction:column;height:100vh}

/* ---------- 顶部导航（56px，横向品牌蓝渐变） ---------- */
.topbar{
  height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;
  padding:0 var(--s4);
  background:var(--nav-grad);
  color:#fff;z-index:60;
}
.topbar__left{display:flex;align-items:center;gap:var(--s4);min-width:0;height:100%}
.topbar__right{display:flex;align-items:center;gap:var(--s4);margin-left:auto;flex:0 0 auto}

/* Logo：200×30 半透明白底块，文字居中（兄弟项目规格） */
.brand{
  width:200px;height:30px;border-radius:var(--r2);background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.brand__badge{display:none}
.brand__text{font-size:var(--fs-body);font-weight:500;color:#fff;white-space:nowrap}

/* 顶部菜单：48px 高、顶部圆角、选中白色下划线 3px（兄弟项目规格） */
.modnav{display:flex;align-items:center;height:100%;gap:0;flex:1 1 auto;min-width:0;overflow:hidden}
.modnav__item{
  height:48px;padding:0 var(--s4);display:flex;align-items:center;
  color:rgba(255,255,255,.8);font-size:var(--fs-body);cursor:pointer;white-space:nowrap;
  border-radius:var(--r2) var(--r2) 0 0;transition:background .15s,color .15s;
}
.modnav__item:hover{color:#fff;background:var(--nav-hover)}
.modnav__item.is-active{color:#fff;background:var(--nav-active);box-shadow:inset 0 -3px 0 0 #fff;font-weight:500}

/* 顶栏右侧控件：统一 32px 高、白 30% 底、4px 圆角胶囊 */
.iconbtn{
  height:32px;padding:0 var(--s3);display:flex;align-items:center;gap:var(--s2);
  border:0;border-radius:var(--r2);background:rgba(255,255,255,.3);
  color:rgba(255,255,255,.9);font-size:var(--fs-body);cursor:pointer;white-space:nowrap;
}
.iconbtn:hover{background:rgba(255,255,255,.15);color:#fff}
.iconbtn__badge{font-size:var(--fs-body);color:inherit;line-height:1}

.roleswitch{
  height:32px;padding:0 var(--s3);display:flex;align-items:center;gap:var(--s2);
  background:rgba(255,255,255,.3);border-radius:var(--r2);
}
.roleswitch__label{font-size:var(--fs-sm);color:rgba(255,255,255,.85);white-space:nowrap}
.roleswitch__select{
  height:22px;padding:0 var(--s1);border:0;border-radius:var(--r2);
  background:rgba(255,255,255,.92);color:var(--t1);font-size:var(--fs-sm);
  cursor:pointer;outline:none;max-width:200px;
}
.roleswitch__select option{color:var(--t1);background:#fff}

.userbox{
  height:32px;padding:0 var(--s2);display:flex;align-items:center;gap:var(--s2);
  border:0;border-radius:var(--r2);background:transparent;color:#fff;font-size:var(--fs-body);
  cursor:pointer;white-space:nowrap;
}
.userbox:hover{background:rgba(255,255,255,.15)}
.userbox__avatar{
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--nav-active);
  font-size:var(--fs-sm);font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}

/* ---------- 面包屑（与顶部舐樐渐变，白字） ---------- */
.crumbbar{
  height:var(--crumb-h);flex:0 0 auto;display:flex;align-items:center;
  padding:0 var(--s5);background:var(--nav-grad);color:rgba(255,255,255,.85);
}
.crumb{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-body);min-width:0}
.crumb a{color:rgba(255,255,255,.9)}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb__sep{color:rgba(255,255,255,.6)}
.crumb__cur{color:#fff;font-weight:500}

/* ---------- 主体：左侧菜单 + 内容区 ---------- */
.body{flex:1 1 auto;display:flex;min-height:0}

.sidebar{
  width:var(--sidebar-w);flex:0 0 auto;background:#fff;border-right:1px solid var(--border-strong);
  display:flex;flex-direction:column;transition:width .18s ease;overflow:hidden;
}
.app.is-collapsed .sidebar{width:var(--sidebar-w-min)}
.sidenav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:var(--s2) 0}

/* 分组头：42px，可展开收起，激活浅蓝底品牌蓝字（兄弟项格） */
.navgroup{
  height:42px;margin:2px var(--s2);padding:0 var(--s4);display:flex;align-items:center;gap:var(--s3);
  border-radius:var(--r3);border-top:1px solid var(--border);
  color:var(--t2);font-size:var(--fs-body);cursor:pointer;transition:all .15s;
}
.navgroup:hover{background:var(--bg-hover);color:var(--primary)}
.navgroup.is-open{background:var(--bg-hover);color:var(--primary);font-weight:500}
.navgroup__caret{margin-left:auto;color:var(--t3);transition:transform .15s;display:flex}
.navgroup__caret.is-open{transform:rotate(180deg)}
.navsub{display:none;padding:0 0 var(--s2)}
.navsub.is-open{display:block}

/* 菜单项：42px、左右 8px 外边距、6px 圆角；选中渐变胶囊白字 */
.navitem{
  height:42px;margin:2px var(--s2);padding:0 var(--s4);display:flex;align-items:center;gap:var(--s3);
  border-radius:var(--r3);color:var(--t2);font-size:var(--fs-body);cursor:pointer;
  white-space:nowrap;position:relative;transition:all .15s;
}
.navitem:hover{background:var(--bg-hover);color:var(--primary)}
.navitem.is-active{
  background:linear-gradient(90deg,#1890FF 0%,#45ADFF 100%);color:#fff;font-weight:500;
}
.navitem__icon{width:16px;height:16px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.navitem__text{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.navitem--child{height:40px;padding-left:36px}
.navitem__badge{
  margin-left:auto;flex:0 0 auto;height:18px;padding:0 6px;display:inline-flex;align-items:center;
  border-radius:9px;font-size:var(--fs-sm);line-height:1;
  background:var(--brand-light);color:#096DD9;border:1px solid #91D5FF;
}
.navitem.is-active .navitem__badge{background:rgba(255,255,255,.25);color:#fff;border-color:rgba(255,255,255,.55)}
.navitem__lock{margin-left:auto;display:flex;color:currentColor;opacity:.6}

.sidebar__foot{flex:0 0 auto;border-top:1px solid var(--border);padding:0}
.side-toggle{
  height:36px;margin:var(--s2);width:calc(100% - 16px);border:0;border-radius:var(--r3);background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:all .15s;
}
.side-toggle:hover{color:var(--primary);background:var(--bg-hover)}

/* 折叠态：隐藏文字/徽标/箤，菜单项居中仅留图标（保留可导航性） */
.app.is-collapsed .navitem__text,
.app.is-collapsed .navitem__badge,
.app.is-collapsed .navgroup__caret,
.app.is-collapsed .navitem__lock{display:none}
.app.is-collapsed .navitem,
.app.is-collapsed .navgroup{justify-content:center;padding:0;margin:2px 4px}
.app.is-collapsed .navitem--child{padding-left:0}

.main{flex:1 1 auto;min-width:0;overflow-y:auto;padding:var(--s4) var(--s5) var(--s2)}
.pagefoot{margin-top:var(--s4);padding:var(--s3) 0;border-top:1px dashed var(--border);
  font-size:var(--fs-sm);color:var(--t3);line-height:1.7}

/* （注释已按上下文恢复） */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
.navitem:focus-visible,.modnav__item:focus-visible,.crumb a:focus-visible{
  outline:2px solid #FFD666;outline-offset:2px;border-radius:var(--r2);
}
.main :focus-visible{outline:2px solid var(--primary);outline-offset:2px}