/*
 * design/themes/base-shell.css —— 外壳层结构基线（可引用样式层）
 *
 * 分工：本文件只写「壳」的共用骨架与通用件——顶栏 / 面包屑 / 用户区 / 弹层 /
 * 遮罩 / 底部 sheet / 抽屉遮罩 / 菜单通用件 / 底部 tab 条（机制）；
 * 五套导航范式（侧边导航 / rail / 顶部导航 / 设置分组侧栏 / 深色 Sider）的
 * 结构与皮肤在 <name>-shell.css，由 body[data-shell="<name>"] 切换。
 *
 * 变量契约：<name>-shell.css 在 body[data-shell="<name>"] 上定义
 *   --sh-top-bg --sh-top-line --sh-line --sh-ink --sh-ink-2 --sh-muted --sh-weak
 *   --sh-side-bg --sh-side-text --sh-side-hover --sh-side-active-bg --sh-side-active-text
 *   --sh-side-muted --sh-side-icon --sh-sheet-bg
 *   --sh-tabbar-bg --sh-tab-active（用底部 tab 的范式）
 *   --sh-danger（角标/徽标的警示红，五套共用缺省值即可，不随主题 accent 变）
 * 以及独立使用外壳层时所需的 --accent / --accent-ink / --focus-ring。
 * 本文件不出现具体主题色（一律走变量 + 灰阶/缺省兜底）。
 *
 * z 序：topbar 40 < 遮罩 35/49 < 抽屉 36 < sheet 50 < pop 55；
 * 表单层弹窗 600+ / 下拉 1200（base-form.css）压在壳层之上。
 */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ================================================================== *
 * 骨架（五范式共用）
 * ================================================================== */
.shell { min-height: 100vh; }

.sh-side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 36;
  width: 256px; /* 范式可覆盖（ant 240px；≤1023 各范式自行收编） */
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 12px 14px;
}

.sh-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.sh-top {
  position: sticky; top: 0; z-index: 40;
  height: 64px; flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: var(--sh-top-bg, #fff);
  border-bottom: 1px solid var(--sh-top-line, #e5e5e5);
}

.sh-toggle {
  display: none; /* 桌面档隐藏；≤1023 抽屉壳（fluent / ant）由主题分支打开 */
  align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--sh-line, #d9d9d9); border-radius: 8px;
  background: var(--sh-top-bg, #fff); color: var(--sh-ink, #222);
  cursor: pointer;
}
.sh-toggle:focus-visible, .sh-iconbtn:focus-visible, .sh-user:focus-visible,
.sh-ia-btn:focus-visible, .sh-item:focus-visible, .sh-tab:focus-visible,
.sh-rail-item:focus-visible, .sh-gn-item:focus-visible, .sh-rectab:focus-visible,
.sh-ant-sub:focus-visible, .sh-app-tile:focus-visible, .sh-pop-row:focus-visible,
.sh-pop-foot:focus-visible, .sh-sheet-launcher:focus-visible, .sh-sider-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(22, 119, 255, .25));
}

/* 面包屑：三段 → ≤1023 降为「图标 + 末两段」→ ≤500 只留图标 + 当前段 */
.sh-crumb { min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sh-muted, #777); white-space: nowrap; overflow: hidden; }
.sh-crumb-home { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.sh-crumb-home-t { color: var(--sh-ink, #222); font-weight: 600; }
.sh-crumb-sep { color: var(--sh-weak, #bbb); padding: 0 2px; }
.sh-crumb-cur { color: var(--sh-ink, #222); font-weight: 600; }

.sh-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; flex: none; }

.sh-iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex: none;
  border: 1px solid var(--sh-line, #d9d9d9); border-radius: 8px;
  background: var(--sh-top-bg, #fff); color: var(--sh-ink-2, #555);
  cursor: pointer;
}
.sh-iconbtn .sh-dot {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; font-size: 10px; font-weight: 700;
  background: var(--sh-danger, #d13438); color: #fff; font-style: normal;
}

.sh-user {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 10px;
  border: 1px solid var(--sh-line, #d9d9d9); border-radius: 8px;
  background: var(--sh-top-bg, #fff); color: var(--sh-ink, #222);
  cursor: pointer; max-width: 220px;
}
.sh-user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; }
.sh-user-name { font-size: 13px; font-weight: 600; }
.sh-user-role { font-size: 11px; color: var(--sh-muted, #888); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent, #1677ff); color: #fff;
  font-size: 12px; font-weight: 700;
}
.sh-avatar--lg { width: 34px; height: 34px; font-size: 15px; }

/* IA 分段切换（一套壳两套菜单的总开关） */
.sh-ia {
  display: inline-flex; padding: 2px; gap: 2px;
  border: 1px solid var(--sh-line, #d9d9d9); border-radius: 8px;
  background: var(--sh-top-bg, #fff);
}
.sh-ia-btn {
  height: 30px; padding: 0 12px; border: none; border-radius: 6px;
  background: transparent; color: var(--sh-ink-2, #555);
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.sh-ia-btn.is-on { background: var(--accent, #1677ff); color: #fff; font-weight: 600; }
.sh-ia-short { display: none; }

/* 品牌区（侧栏范式用；深色侧栏由主题覆盖） */
.sh-brand { display: flex; align-items: center; gap: 10px; }
.sh-brand-mark {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #1677ff); color: #fff; font-weight: 700; font-size: 16px;
}
.sh-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sh-brand-text strong { font-size: 13.5px; }
.sh-brand-text small { font-size: 11px; color: var(--sh-side-muted, #8a8a8a); }

/* 弹层 pop（铃铛 / 用户 / launcher / 顶栏溢出） */
.sh-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 55;
  width: 320px; max-width: min(92vw, 360px);
  max-height: min(70vh, 520px); overflow-y: auto;
  background: #fff; color: #242424;
  border: 1px solid #e0e0e0; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  padding: 10px;
  font-size: 13px;
}
.sh-pop--overflow { width: 224px; right: auto; left: 0; padding: 6px; }
/* launcher 弹层锚在左上角九宫格钮上：right:0 会把 320px 面板推出屏外，改向右展开 */
.sh-pop--launcher { left: 0; right: auto; }
.sh-pop-head { margin: 2px 4px 8px; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.sh-pop-count { font-size: 11px; font-weight: 600; color: #888; }
.sh-notice { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; }
.sh-notice:hover { background: #f6f6f6; }
.sh-notice b { font-size: 12.5px; }
.sh-notice small { color: #666; font-size: 12px; }
.sh-notice-time { color: #999 !important; font-size: 11px !important; }
.sh-pop-foot { width: 100%; margin-top: 6px; height: 32px; border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; color: #444; font: inherit; font-size: 12.5px; cursor: pointer; }
.sh-pop-foot:hover { background: #f6f6f6; }
.sh-pop-me { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid #eee; margin-bottom: 6px; }
.sh-pop-me-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sh-pop-me-meta b { font-size: 13.5px; }
.sh-pop-me-meta small { color: #777; font-size: 12px; }
.sh-pop-cap { margin: 6px 4px 4px; font-size: 11px; letter-spacing: .06em; color: #999; }
.sh-pop-row { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px; border: none; border-radius: 7px; background: transparent; font: inherit; font-size: 13px; color: #333; cursor: pointer; text-align: left; }
.sh-pop-row:hover { background: #f6f6f6; }
.sh-pop-row.is-current { background: color-mix(in srgb, var(--accent, #1677ff) 12%, #fff); color: var(--accent, #1677ff); }
.sh-pop-row small { color: #888; font-size: 11.5px; text-align: right; }
.sh-app-tiles { display: grid; gap: 8px; }
.sh-app-tile { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e3e3e3; border-radius: 9px; background: #fff; cursor: pointer; font: inherit; text-align: left; }
.sh-app-tile:hover { border-color: var(--accent, #0176d3); }
.sh-app-tile.is-current { border-color: var(--accent, #0176d3); box-shadow: 0 0 0 1px var(--accent, #0176d3) inset; }
.sh-app-glyph { flex: none; width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent, #0176d3); color: #fff; font-weight: 700; font-size: 15px; }
.sh-app-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sh-app-meta b { font-size: 13px; }
.sh-app-meta small { color: #777; font-size: 11.5px; }
.sh-app-cur { margin-left: auto; flex: none; font-size: 11px; color: var(--accent, #0176d3); font-weight: 700; }
.sh-applauncher-note { margin: 8px 4px 2px; font-size: 12px; color: #777; }

/* 抽屉遮罩（侧栏抽屉范式）与面板 scrim（更多面板） */
.sh-overlay { position: fixed; inset: 64px 0 0 0; z-index: 35; background: rgba(0, 0, 0, .32); border: none; padding: 0; }
.sh-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(0, 0, 0, .4); border: none; padding: 0; }

/* 更多面板（底部 sheet 为默认形态；桌面形态随范式覆盖） */
.sh-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-height: 74vh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 18px 18px 0 0;
  background: var(--sh-sheet-bg, #fff); color: var(--sh-ink, #222);
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
}
.sh-sheet-head { position: sticky; top: -8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px 10px; background: var(--sh-sheet-bg, #fff); font-size: 15px; }
.sh-sheet-group { display: grid; gap: 2px; margin: 0 0 10px; }
/* sheet 底部「切换工作台」按钮基线（原演示内核中无基础样式，themes 层补齐，见 README 已知问题） */
.sh-sheet-launcher { width: 100%; margin-top: 4px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; color: #444; font: inherit; font-size: 12.5px; cursor: pointer; }
.sh-sheet-launcher:hover { background: #f6f6f6; }

/* 内容区 */
.sh-body { flex: 1 1 auto; min-width: 0; }
.sh-content { max-width: 1080px; margin: 0 auto; padding: 20px 20px 64px; }

/* ================================================================== *
 * 菜单通用件（分组标题 / 菜单项 / 角标）——外观变量随范式覆盖
 * ================================================================== */
.sh-group { margin: 0 0 10px; }
.sh-group-t { margin: 8px 8px 5px; font-size: 11px; font-weight: 600; letter-spacing: .07em; color: var(--sh-side-muted, #8a8a8a); }
.sh-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 0;
  border-radius: 7px;
  color: var(--sh-side-text, #333); text-decoration: none;
  font-size: 13px; line-height: 1.35;
  position: relative;
}
.sh-item:hover { background: var(--sh-side-hover, rgba(0, 0, 0, .05)); }
.sh-item.is-active { background: var(--sh-side-active-bg, rgba(0, 0, 0, .07)); color: var(--sh-side-active-text, #111); font-weight: 600; }
.sh-item-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 图标默认继承所在控件的颜色；只有侧栏/深色容器里的图标才吃 --sh-side-icon
   （否则浅色侧栏变量会漏到白底顶栏上，铃铛/面包屑/关闭钮全部隐形）。
   侧栏容器即 .sh-side 本体（导航树直接挂在里面），rail / ant SubMenu 按钮同理。 */
.sh-ico { display: inline-flex; flex: none; color: inherit; }
.sh-side .sh-ico, .sh-rail .sh-ico, .sh-ant-sub .sh-ico { color: var(--sh-side-icon, currentColor); }
.sh-badge {
  flex: none; min-width: 18px; height: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; font-size: 10.5px; font-weight: 700;
  background: var(--sh-danger, #d13438); color: #fff;
}

/* ================================================================== *
 * 底部 tab bar（机制层：桌面档隐藏，≤1023 接管移动导航；
 * 配色变量 --sh-tabbar-bg / --sh-tab-active 由用它的范式提供）
 * rail（navigation rail）仅 material 范式使用，结构在 material-shell.css；
 * 顶栏全局导航（.sh-gn）仅 salesforce 范式使用，结构在 salesforce-shell.css。
 * ================================================================== */
.sh-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
  display: none; /* 桌面档隐藏 */
  height: calc(64px + env(safe-area-inset-bottom));
  padding: 6px 4px env(safe-area-inset-bottom);
  gap: 2px;
  background: var(--sh-tabbar-bg, #fff);
  border-top: 1px solid var(--sh-top-line, #e5e5e5);
}
.sh-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; background: transparent; border-radius: 10px;
  color: var(--sh-ink-2, #555); font: inherit; font-size: 11.5px; cursor: pointer;
  padding: 4px 2px;
}
.sh-tab .sh-ico { padding: 3px 16px; border-radius: 99px; }
.sh-tab-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-tab.is-active { color: var(--sh-tab-active, var(--accent, #1677ff)); font-weight: 600; }
.sh-tab--more { flex: 0 0 64px; }

/* 侧栏底部注记框（fluent / apple 等浅色侧栏用；深色侧栏主题另行覆盖） */
.sh-side-note { margin-top: auto; padding: 12px; border: 1px solid var(--sh-top-line, #e5e5e5); border-radius: 8px; }
.sh-side-note span { display: block; font-size: 10px; letter-spacing: .1em; color: var(--sh-side-muted, #8a8a8a); }
.sh-side-note p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--sh-side-muted, #8a8a8a); }

/* ================================================================== *
 * 响应式基线：≤1023 移动档（各范式的收编动作在 <name>-shell.css）
 * ================================================================== */
@media (max-width: 1023px) {
  .sh-tabbar { display: flex; }
  .sh-content { padding: 16px 12px 64px; }
  .sh-user { max-width: none; }
  .sh-crumb { flex: 1; }
}

/* 面包屑两段退化 */
@media (max-width: 1023px) {
  .sh-crumb-home-t { display: none; }
}
@media (max-width: 500px) {
  .sh-crumb-seg { display: none; }
  .sh-crumb-sep { display: none; } /* 只留「图标 + 当前页」，分隔符一并退场 */
  .sh-ia-full { display: none; }
  .sh-ia-short { display: inline; }
  .sh-ia-btn { padding: 0 9px; }
  .sh-user-meta { display: none; }
  .sh-user { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-side, .sh-sheet, .sh-sider-trigger svg, .sh-ant-caret { transition: none !important; }
}