/* ============================================================
   励人国际教育 · PC 六角色统一顶部导航条（topbar.js 配套样式）
   - fixed 视口顶部，高度 56px，白底 + 1px 底边 + 浅阴影
   - 左缘默认贴 0；若页面存在 168px 左侧栏，topbar.js 会把 left 设为该宽度（与侧栏水平不重叠）
   - z-index: 1200（低于大狮兄浮窗 1600）
   - 手机端 ≤768px 不渲染（topbar.js 不挂载；此处再兜底隐藏）
   说明：颜色统一引用品牌绿 --brand-green（#16A34A / hover #15803D）。
   ============================================================ */
#wb-topbar {
  /* 深绿毛玻璃体系变量（仅作用于顶栏子树，不影响页面其它组件） */
  --tb-bg: #ffffff;                  /* 不透明白：侧栏绿底上延藏入顶栏之下时，顶栏整条保持纯白（zoe 2026-10-09 指示） */
  --tb-blur: 14px;
  --tb-border: rgba(14,106,62,0.08);
  --brand-green: #0e6a3e;            /* 统一到侧栏深绿 */
  --green-deep: #0b4d2d;
  --green-glow: rgba(46,168,106,0.25);
  --line-green: rgba(14,106,62,0.15);
  --ph-color: #9db5a6;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--tb-bg);
  -webkit-backdrop-filter: blur(var(--tb-blur));
  backdrop-filter: blur(var(--tb-blur));
  border-bottom: 1px solid var(--tb-border);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 18px;
  z-index: 1200;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1f2328;
  box-sizing: border-box;
}
/* 顶栏三块(logo/搜索/右侧)间距：flex gap 兼容兜底——Safari<14.1 不支持 flex gap，改用相邻兄弟 margin，避免老浏览器顶栏元素挤在一起；现代浏览器视觉不变 */
.wb-tb-logo + .wb-tb-search { margin-left: 16px; }

/* 内容整体下沉 56px（顶栏齐顶 top:0，高 56px），避免被 fixed 顶栏遮挡 */
body.has-wb-topbar { padding-top: 56px; }
/* principal 自带 sticky header（top:0），下移到顶栏之下，避免钻到顶栏底下；:not(#wb-topbar) 排除顶栏自身防自拍 */
body.has-wb-topbar header:not(#wb-topbar) { top: 56px !important; }
/* 各页原有 fixed/sticky 且 top<56px 的元素，统一下移到顶栏之下（逐页排查结果，一个不漏） */
/* 侧栏深绿背景上延至视口最顶端、与顶栏衔接：绿底从页面顶部起（藏入顶栏之下），菜单内容下沉至顶栏之下、与右侧主区同高对齐 */
@media (min-width: 769px){
  body.has-wb-topbar .side { top: 0; padding-top: 56px; }
}
body.has-wb-topbar .toast { top: 70px; }           /* sales/principal 顶部居中 toast：下移到顶栏下方，不被遮挡 */
body.has-wb-topbar .sch-col .dh { top: 56px; }     /* sales 课表日列表头 sticky top:0：避免钻到顶栏底下 */

/* ---- logo 区 ---- */
.wb-tb-logo { display: flex; align-items: center; flex: none; }
.wb-tb-logo > * + * { margin-left: 9px; }
.wb-tb-logo img { height: 50px; width: auto; max-width: 220px; object-fit: contain; display: block; margin-top: 4px; } /* 横版品牌锁区：放大至 50px，白底免裁切，与 #fff 顶栏融为一体；zoe 2026-10-09 指示 logo 适量下移 */
.wb-tb-logo .txt { font-size: 15px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }

/* ---- 全局搜索 ---- */
.wb-tb-search { position: relative; flex: 0 1 240px; min-width: 150px; }
.wb-tb-search input {
  width: 100%; height: 34px; border: 1px solid var(--line-green, rgba(14,106,62,0.15)); border-radius: 999px;
  padding: 0 30px 0 34px; font-size: 13.5px; outline: none; background: #f8f9fb;
  transition: border-color .15s, background .15s, box-shadow .15s; box-sizing: border-box; color: #1f2328;
}
.wb-tb-search input::placeholder { color: var(--ph-color, #9db5a6); }
.wb-tb-search input:focus { border-color: var(--line-green, rgba(14,106,62,0.15)); background: #fff; box-shadow: 0 0 0 2px var(--green-glow, rgba(46,168,106,0.25)); }
.wb-tb-search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #9aa3ad; font-size: 14px; pointer-events: none; }
.wb-tb-search .ic svg { width: 15px; height: 15px; display: block; }
.wb-tb-search .clr { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #9aa3ad; cursor: pointer; font-size: 15px; display: none; line-height: 1; }
.wb-tb-search.has-text .clr { display: block; }
.wb-tb-results {
  position: absolute; top: 42px; left: 0; right: 0; background: #fff;
  border: 1px solid #eceef1; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
  overflow: hidden; z-index: 1300; max-height: 380px; overflow-y: auto; text-align: left;
}
.wb-tb-results .grp { font-size: 11px; color: #9aa3ad; padding: 7px 12px 3px; letter-spacing: .3px; }
.wb-tb-results .it { padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.wb-tb-results .it:hover { background: #f5f8f6; }
.wb-tb-results .it .n { font-size: 13.5px; font-weight: 600; }
.wb-tb-results .it .s { font-size: 12px; color: #9aa3ad; }
.wb-tb-results .empty { padding: 12px; font-size: 12.5px; color: #9aa3ad; text-align: center; }

/* ---- 右侧区 ---- */
.wb-tb-right { margin-left: auto; display: flex; align-items: center; }
.wb-tb-right > * { flex-shrink: 0; }   /* 下载/用户等按键在窄窗口保持原尺寸、不被压缩（仅可能溢出重叠） */
.wb-tb-right > * + * { margin-left: 16px; }
.wb-tb-dl { font-size: 13.5px; color: #fff; cursor: pointer; font-weight: 600; white-space: nowrap; background: var(--brand-green, #0e6a3e); padding: 8px 18px; border-radius: 999px; display: inline-flex; align-items: center; line-height: 1; }
.wb-tb-dl:hover { background: var(--green-deep, #0b4d2d); }

/* ---- 登录人 ---- */
.wb-tb-user { position: relative; display: flex; align-items: center; cursor: pointer; padding: 4px 6px; border-radius: 10px; }
/* 头像/姓名/箭头间距：避开绝对定位的 .wb-tb-menu(下拉)，仅对可见三项加 margin */
.wb-tb-user .av + .nm, .wb-tb-user .nm + .caret { margin-left: 8px; }
.wb-tb-user:hover { background: #f5f8f6; }
.wb-tb-user .av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-green, #0e6a3e); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(14,106,62,0.25); }
.wb-tb-user .av img { width: 100%; height: 100%; object-fit: cover; }
.wb-tb-user .nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; color: #1f3d2e; }
.wb-tb-user .caret { font-size: 10px; color: #9aa3ad; }
.wb-tb-menu { position: absolute; top: 46px; right: 0; background: #fff; border: 1px solid #eceef1; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); min-width: 150px; overflow: hidden; z-index: 1300; }
.wb-tb-menu .mi { padding: 10px 14px; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; }
.wb-tb-menu .mi:hover { background: #f5f8f6; }
.wb-tb-menu .sep { height: 1px; background: #f0f2f4; }

/* ---- 下载二维码浮层 ---- */
.wb-tb-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(15, 23, 42, .4); z-index: 1500; display: flex; align-items: center; justify-content: center; }
.wb-tb-modal { background: #fff; border-radius: 16px; width: 360px; width: min(360px, 92vw); padding: 24px; text-align: center; position: relative; }
.wb-tb-modal .x { position: absolute; top: 12px; right: 14px; cursor: pointer; color: #9aa3ad; font-size: 18px; line-height: 1; }
.wb-tb-modal h3 { margin: 0 0 4px; font-size: 17px; }
.wb-tb-modal .sub2 { font-size: 12.5px; color: #9aa3ad; margin-bottom: 4px; }
.wb-tb-modal .qr { width: 200px; height: 200px; margin: 14px auto 8px; border: 1px solid #eef0f3; border-radius: 12px; display: block; }
.wb-tb-modal .ver { font-size: 13px; color: var(--brand-green, #16A34A); font-weight: 600; margin-top: 4px; }
.wb-tb-modal .ver.err { color: #9aa3ad; font-weight: 400; }
.wb-tb-modal .dlbtn { display: inline-block; margin-top: 14px; background: var(--brand-green, #16A34A); color: #fff; border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 600; text-decoration: none; }
.wb-tb-modal .dlbtn:hover { background: #15803D; }

/* ---- 手机端不渲染（兜底） ---- */
@media (max-width: 768px) {
  #wb-topbar { display: none !important; }
  body.has-wb-topbar { padding-top: 0 !important; }
  body.has-wb-topbar header:not(#wb-topbar) { top: 0 !important; }
}