/* ==========================================================================
   shell.css  |  「6」v7.0 App Shell 布局层（P0）
   --------------------------------------------------------------------------
   消费 design-tokens.css（必须先于本文件引入）。本文件零硬编码 hex，
   全部 var(--*) 引用；唯一例外 #fff/#000（本文件不使用）。
   结构：topbar 48px(fixed) + sidebar 220px/折叠56px(fixed) + main + tabbar(<768)
   z-index 八级：base 0 / sticky 100 / sidebar 200 / topbar 300 /
                dropdown 400 / drawer 500 / modal 600 / toast 700
   ========================================================================== */

/* ---- 全局骨架 ---- */
.shell { min-height: 100vh; }
.shell .topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  display: flex; align-items: center; gap: var(--space-3);
  justify-content: flex-start;            /* 覆盖 style.css .topbar 的 space-between */
  padding: 0 var(--space-4);
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);            /* 功能目的：sticky 顶栏滚动穿透 */
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-topbar);
}
.shell-body { padding-top: var(--topbar-height); }
.shell-content { padding-left: var(--sidebar-width); min-height: calc(100vh - var(--topbar-height)); display: flex; flex-direction: column; }
body[data-sidebar="collapsed"] .shell-content { padding-left: var(--sidebar-width-collapsed); }
.shell-main { flex: 1; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: var(--space-6) var(--gutter-desktop) var(--space-10); }

/* 汉堡按钮：仅 <1024 显示（桌面由侧栏底部折叠钮承担） */
.mobile-only { display: none !important; }
@media (max-width: 1023px) { .mobile-only { display: inline-flex !important; } }

/* ---- 跳转链接（键盘首个可聚焦元素）---- */
.skip-link {
  position: fixed; top: var(--space-2); left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-standard);
  z-index: var(--z-toast);
}
.skip-link:focus-visible { transform: none; }

/* ---- 顶栏：品牌 / 面包屑 / 搜索 / 主题 / 头像 ---- */
.shell .brand {
  display: inline-flex; align-items: center;
  font-size: var(--text-md); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-body); color: var(--fg);
  text-decoration: none; flex-shrink: 0;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease-standard);
}
.shell .brand:hover { color: var(--accent-text); text-decoration: none; }
.crumb {
  display: flex; align-items: center; gap: var(--space-1);
  min-width: 0; font-size: var(--text-sm); color: var(--muted);
}
.crumb a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.crumb a:hover { color: var(--fg); text-decoration: none; }
.crumb .crumb-current { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.crumb-sep svg { width: 16px; height: 16px; }
.topbar-spacer { flex: 1; }

/* 顶栏搜索框（点击打开命令面板，320px）*/
.topbar-search {
  display: inline-flex; align-items: center; gap: var(--space-2);
  width: 320px; height: 32px; padding: 0 var(--space-2) 0 var(--space-3);
  background: var(--surface-sunken); color: var(--meta);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--text-sm); cursor: pointer; text-align: left;
  transition: border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.topbar-search:hover { border-color: var(--muted); color: var(--muted); }
.topbar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-search-ph { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar-search .kbd { flex-shrink: 0; }

/* 主题切换 + 头像 + 顶栏图标按钮（32px 视觉，移动端 44px 触控）*/
.shell .btn-icon { flex-shrink: 0; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* 头像菜单 */
.avatar-menu { position: relative; }
.avatar-btn { border-radius: var(--radius-pill); }
.avatar-btn svg { color: var(--fg-2); }
.avatar-btn:hover svg { color: var(--fg); }
.menu-dropdown {
  position: absolute; top: calc(100% + var(--space-2)); right: 0;
  min-width: 200px; padding: var(--space-1);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-raised);
  z-index: var(--z-dropdown);
}
.menu-dropdown[hidden] { display: none; }
.menu-head { padding: var(--space-2) var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-1); }
.menu-head .menu-user { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-head .menu-meta { font-size: var(--text-2xs); color: var(--meta); margin-top: 2px; }
.menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--fg-2); text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.menu-item svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.menu-item:hover { background: var(--surface-warm); color: var(--fg); text-decoration: none; }
.menu-item:hover svg { color: var(--fg-2); }
.menu-item-danger:hover { color: var(--danger-text); }
.menu-item-danger:hover svg { color: var(--danger-text); }

/* ---- 侧栏（220px，折叠 56px）---- */
.shell .sidebar {
  position: fixed; top: var(--topbar-height); bottom: 0; left: 0;
  width: var(--sidebar-width);
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  z-index: var(--z-sidebar);
  transition: width var(--duration-base) var(--ease-standard),
              transform var(--duration-slower) var(--ease-standard);
}
body[data-sidebar="collapsed"] .shell .sidebar { width: var(--sidebar-width-collapsed); }
.sidebar-nav { flex: 1; padding: var(--space-3) var(--space-2); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 36px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--fg-2); text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.nav-item svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; transition: color var(--duration-base) var(--ease-standard); }
.nav-item:hover { background: var(--surface-warm); color: var(--fg); text-decoration: none; }
.nav-item:hover svg { color: var(--fg-2); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--weight-medium); }
.nav-item.is-active svg { color: var(--accent-text); }
.nav-item.is-active::before {   /* 仅此一处允许 2px 左侧强调：导航选中语义 */
  content: ""; position: absolute; left: 0; top: var(--space-1); bottom: var(--space-1);
  width: 2px; border-radius: var(--radius-pill); background: var(--accent);
}
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-section { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-soft); }
.sidebar-foot { padding: var(--space-2); border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; }

/* 折叠态：隐藏文字，hover 出浮层 */
body[data-sidebar="collapsed"] .nav-label { display: none; }
body[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: var(--space-2); }
body[data-sidebar="collapsed"] .sidebar-foot { justify-content: center; }
.nav-flyout {
  position: absolute; left: calc(100% + var(--space-2)); top: 50%; transform: translateY(-50%);
  padding: var(--space-1) var(--space-3);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised); font-size: var(--text-sm); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
  z-index: var(--z-dropdown);
}
body[data-sidebar="collapsed"] .nav-item:hover .nav-flyout,
body[data-sidebar="collapsed"] .nav-item:focus-visible .nav-flyout { opacity: 1; }

/* 未登录：侧栏收敛为登录/注册 */
.sidebar-auth { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-2); }
.sidebar-auth .btn { width: 100%; justify-content: center; }

/* ---- 抽屉遮罩（<1024 侧栏抽屉化）---- */
.drawer-overlay {
  position: fixed; inset: var(--topbar-height) 0 0 0;
  background: var(--overlay); opacity: 0; pointer-events: none;
  transition: opacity var(--duration-slower) var(--ease-standard);
  z-index: var(--z-drawer);
}
body.sidebar-open .drawer-overlay { opacity: 1; pointer-events: auto; }

/* ---- 移动端底部 TabBar（<768，2-5 项）---- */
.tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--tabbar-height);
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  z-index: var(--z-topbar);
}
.tabbar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10px; color: var(--muted); text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.tabbar-item svg { width: 20px; height: 20px; }
.tabbar-item:hover { color: var(--fg-2); text-decoration: none; }
.tabbar-item.is-active { color: var(--accent-text); }

/* ---- 公告条（保留既有功能，套新 Token；位于 .shell-body 内首行，无需避让顶栏）---- */
.shell .announce {
  background: var(--warn-soft); color: var(--warn-text);
  text-align: center; padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); border-bottom: 1px solid var(--border);
}

/* ---- 页脚 ---- */
.shell .footer {
  border-top: 1px solid var(--border-soft);
  text-align: center; color: var(--meta); font-size: var(--text-xs);
  padding: var(--space-5) var(--space-4);
}

/* ==========================================================================
   响应式：>=1280 全展开 | 1024-1279 默认折叠(JS 判定写入 data-sidebar)
             <1024 抽屉 | <768 TabBar
   折叠态统一由 body[data-sidebar="collapsed"] 表达（JS 依据 localStorage
   与视口写入；JS 未执行时默认展开，属可接受降级）
   ========================================================================== */
@media (max-width: 1023px) {
  .shell-content { padding-left: 0; }
  .shell .sidebar {
    width: var(--sidebar-width); transform: translateX(-100%);
    z-index: calc(var(--z-drawer) + 1);
    box-shadow: var(--shadow-modal);
  }
  body[data-sidebar="collapsed"] .shell .sidebar { width: var(--sidebar-width); }
  body.sidebar-open .shell .sidebar { transform: none; }
  .nav-flyout { display: none; }
}
@media (max-width: 767px) {
  .shell-main { padding: var(--space-4) var(--gutter-phone) var(--space-8); }
  .shell-content { padding-bottom: var(--tabbar-height); }
  .tabbar { display: flex; }
  .topbar-search { width: auto; }
  .topbar-search-ph, .topbar-search .kbd { display: none; }
  .shell .btn-icon { width: var(--touch-target); height: var(--touch-target); }
  .crumb { display: none; }
  .shell .brand { margin-right: auto; }
}
@media (max-width: 480px) {
  .topbar-search { display: none; }
}