/* ===================================================================
 * page-home.css —— 门户首页专属排版
 * -------------------------------------------------------------------
 * 承载《卫未数智 · 前端 UI 统一化规范 V2.0》§2.1 首页系统条、
 * §2.2 大模块容器、§8 移动端抽屉。
 *
 * ⚠ 视觉观感与门户首页既有版本完全一致（配色 / 字号 / 间距 / 圆角
 *   一律取既有实测值），仅把散落的字面值收敛为 tokens.css 令牌。
 *   所有选择器以 .sysbar / .empower / .drawer 等首页专属类名为前缀。
 * =================================================================== */

/* ===================================================================
 * §2.1 首页顶部系统条
 * 结构：[🏠 主页]  …（品牌绝对居中）…  [身份区] [☰]
 * =================================================================== */
.sysbar {
  background: var(--c-brand-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-14);
  position: relative;
  z-index: var(--z-sticky);
}
.sysbar .in {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: nowrap;
  /* V3：与子页顶栏同 1880 轨道，左右边缘对齐 */
  width: 100%; max-width: var(--shell); margin: 0 auto;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding: var(--sp-2) var(--gutter);
  position: relative;
}

/* 品牌：绝对居中，不参与 flex 流，避免与左右元素互相挤压 */
.sysbar .brandmark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;                 /* 防止遮挡左右元素点击 */
  display: inline-flex; align-items: center;
  white-space: nowrap; color: var(--c-card);
}
.sysbar .brandmark .bm-name {
  font-size: var(--fs-16); font-weight: 700; letter-spacing: 2px; line-height: var(--lh-tight);
}

/* 主页徽标 + 登录 / 用户管理入口：共用一套半透明胶囊 */
.sysbar .lb,
.sysbar .who a {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-14); font-weight: 700; color: var(--c-card);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  padding: var(--sp-1) 14px; min-height: 34px;
  border-radius: var(--r-pill);
  letter-spacing: .3px; line-height: var(--lh-tight);
  flex: none; white-space: nowrap;
  transition: background var(--dur-fast);
}
.sysbar .lb { gap: var(--sp-1); }
.sysbar .who a:hover { background: rgba(255, 255, 255, .28); color: var(--c-card); }

/* who 区域：完全由 JS 动态填充 */
.sysbar .who {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-14); flex-wrap: nowrap; min-width: 0;
}

/* 汉堡按钮：系统条最右，仅移动端显示 */
.drawer-toggle {
  display: none;
  width: var(--ctl-md); height: var(--ctl-md); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--c-card); font-size: var(--fs-21); line-height: 1;
  align-items: center; justify-content: center;
  flex: none; padding: 0; margin-left: var(--sp-2);
  transition: background .15s;
}
.drawer-toggle:hover { background: rgba(255, 255, 255, .24); }
.drawer-toggle:active { background: rgba(255, 255, 255, .32); }

/* ===================================================================
 * 主区
 * =================================================================== */
main { padding-top: var(--sp-8); padding-bottom: var(--sp-6); }

/* ===================================================================
 * §2.2 大模块容器
 * =================================================================== */
.empower {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-7);
}
.empower:last-of-type { margin: 0; }

.emp-head {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-ink) 100%);
  color: var(--c-card); padding: var(--sp-6) 28px;
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.emp-head .ht { min-width: 0; }
.emp-head h2 { font-size: var(--fs-28); font-weight: 700; letter-spacing: 2px; line-height: var(--lh-title); }
.emp-head .slogan {
  margin-left: auto; font-size: var(--fs-14); font-weight: 600; letter-spacing: 1px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  padding: var(--sp-2) 18px; border-radius: var(--r-pill);
  color: var(--c-card); white-space: nowrap; line-height: var(--lh-tight);
}
.emp-body { padding: var(--sp-6); }
.emp-body .card { padding: 22px var(--sp-5); }

/* ===================================================================
 * 移动端抽屉（§8）
 * =================================================================== */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(15, 61, 36, .42);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) ease, visibility var(--dur) ease;
  z-index: calc(var(--z-drawer) - 10);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.drawer-mask.on { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(84vw, 320px);
  background: var(--c-card);
  box-shadow: 2px 0 28px rgba(0, 0, 0, .18);
  transform: translateX(-102%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
  z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px);
  padding: env(safe-area-inset-bottom, 0px);
}
.drawer.on { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) 18px;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-ink) 100%);
  color: var(--c-card);
}
.drawer-title {
  font-size: var(--fs-16); font-weight: 700; letter-spacing: 1.5px;
  display: flex; align-items: center; gap: var(--sp-2);
}
.drawer-title .logo { font-size: var(--fs-18); }
.drawer-close {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--c-card); font-size: var(--fs-21); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.drawer-close:hover { background: rgba(255, 255, 255, .24); }

.drawer-nav { flex: 1; overflow-y: auto; padding: var(--sp-2) 0; -webkit-overflow-scrolling: touch; }
.drawer-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  padding: 14px var(--sp-5); min-height: 52px;
  font-size: var(--fs-16); color: var(--c-text);
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.drawer-item .di-emoji { font-size: var(--fs-18); line-height: 1; flex: none; }
.drawer-item .di-name { flex: 1; line-height: var(--lh-tight); }
.drawer-item:hover { background: var(--c-gray-tint); }
.drawer-item.is-current {
  background: var(--c-brand-tint);
  color: var(--c-brand-dark);
  border-left-color: var(--c-brand);
  font-weight: 600;
}

/* ===================================================================
 * §7.1 响应式（断点只取 560 / 750 / 992 / 1280 / 1601 / 1921）
 * =================================================================== */
@media (max-width: 1280px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 992px) {
  .emp-head { padding: var(--sp-5) var(--sp-5); }
  .emp-head h2 { font-size: var(--fs-26); }
  .grid { gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 750px) {
  main { padding: var(--sp-6); }
  .grid { grid-template-columns: 1fr; }
  .empower { margin-bottom: var(--sp-6); }
  .emp-body { padding: var(--sp-4); }
  .emp-head { padding: var(--sp-5); }
  /* §7.4 ≤750 直接隐藏 slogan 胶囊，不缩字号、不换行堆叠 */
  .emp-head .slogan { display: none; }
  .card { padding: 22px var(--sp-5); }
}

@media (max-width: 560px) {
  .sysbar .in { gap: var(--sp-2); }
  .sysbar .brandmark .bm-name { font-size: var(--fs-14); letter-spacing: 1.5px; }
  .sysbar .lb, .sysbar .who a { padding: var(--sp-1) 10px; min-height: 32px; }

  /* 移动端 chip：只留头像，收紧 padding（防止与绝对居中的品牌相撞） */
  .sysbar .who .user-chip { padding: 2px; gap: 0; }
  .sysbar .who .user-chip .nm { display: none; }
  .sysbar .who .user-chip .av { width: 26px; height: 26px; font-size: 18px; }

  /* 窄屏身份区：「用户管理」收起文字只留图标，避免压住绝对居中的品牌 */
  .sysbar .who a .tx { display: none; }
  .sysbar .who a .ic { font-size: var(--fs-16); }

  /* 触控目标 ≥44px */
  .sub-links span { min-height: 44px; font-size: var(--fs-16); }
  .card-head .tag { padding: var(--sp-1) var(--sp-3); }

  .drawer-toggle { display: inline-flex; }

  /* §8.2 移动端视图互斥 —— 全站唯一的 !important 白名单例外 */
  /* SPEC-EXCEPT: 视图互斥 */
  .module-panel { display: none !important; }
  /* SPEC-EXCEPT: 视图互斥 */
  .module-panel.is-active { display: block !important; }
}

@media (max-width: 560px) {
  main { padding: var(--sp-5); }
  .card { padding: var(--sp-5) var(--sp-4); gap: var(--sp-3); }
  .emp-body { padding: var(--sp-3); }
  .emp-head { padding: 18px var(--sp-4); gap: var(--sp-3); }
  .emp-head h2 { font-size: var(--fs-18); letter-spacing: 1px; }
  .card-head { gap: var(--sp-2); }
  .ico { width: var(--ctl-lg); height: var(--ctl-lg); font-size: var(--fs-26); }
  .card-head .name { font-size: var(--fs-16); }
  .card-head .tag { font-size: var(--fs-14); padding: 5px var(--sp-3); }
  .sysbar .lb { padding: var(--sp-1) var(--sp-2); }
}