/*
 * design/themes/salesforce-shell.css —— Lightning 风格外壳范式
 * inspired by Salesforce Lightning（SLDS 2），非官方实现。
 * 范式：顶部 Lightning 全局导航（无左栏）——app launcher + app 名 + 导航项 +
 * 「更多」溢出 + 记录页签条；≤1023 导航项收起、底部 tab bar 接管。
 * 本文件可脱离表单层单独使用：accent / focus 令牌随 body[data-shell] 提供。
 */
body[data-shell="salesforce"] {
  --accent: #0176d3;
  --accent-ink: #ffffff;
  --focus-ring: rgba(1, 118, 211, .2);
  --sh-top-bg: #ffffff;
  --sh-top-line: #e5e5e5;
  --sh-line: #c9c9c9;
  --sh-ink: #181818; --sh-ink-2: #444; --sh-muted: #706e6e; --sh-weak: #c9c9c9;
  --sh-side-bg: #f3f2f2;
  --sh-side-muted: #706e6e;
  --sh-side-icon: #444;
  --sh-sheet-bg: #ffffff;
  --sh-tabbar-bg: #ffffff;
  --sh-tab-active: #0176d3;
}

/* ---------- 顶部全局导航 ---------- */
.sh-gn-wrap { position: sticky; top: 0; z-index: 40; }
body[data-shell="salesforce"] .sh-top--gn { border-bottom: 1px solid #e5e5e5; }
.sh-launcher {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; padding: 0; border: none; border-radius: 8px;
  background: transparent; color: #032d60; cursor: pointer;
}
.sh-launcher:hover { background: #f0f6ff; }
.sh-app-name { display: flex; flex-direction: column; line-height: 1.2; padding-right: 10px; border-right: 1px solid #e5e5e5; margin-right: 6px; }
.sh-app-name b { font-size: 14.5px; color: #032d60; }
.sh-app-name small { font-size: 10.5px; color: #706e6e; }
.sh-gn { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.sh-gn-item {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px;
  border: none; border-radius: 0; background: transparent;
  color: #181818; font: inherit; font-size: 13.5px; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
}
.sh-gn-item:hover { background: #f4f6fe; color: #0176d3; }
.sh-gn-item.is-active { color: #0176d3; font-weight: 600; box-shadow: inset 0 -3px 0 #0176d3; }
.sh-gn-item .sh-badge { position: static; }
.sh-gn .sh-ico { color: inherit; }
.sh-gn-caret { display: inline-flex; }

/* 记录页签条（record home）：当前记录的三视图页签 */
.sh-rectabs {
  display: flex; align-items: flex-end; gap: 2px;
  padding: 6px 20px 0;
  background: #fff; border-bottom: 1px solid #e5e5e5;
  position: sticky; top: 64px; z-index: 39;
}
.sh-rectab {
  height: 38px; padding: 0 14px;
  border: none; background: transparent;
  font: inherit; font-size: 13px; color: #444; cursor: pointer;
  box-shadow: inset 0 -3px 0 transparent;
  border-radius: 8px 8px 0 0;
}
.sh-rectab:hover { background: #f4f6fe; color: #0176d3; }
.sh-rectab.is-on { color: #0176d3; font-weight: 600; box-shadow: inset 0 -3px 0 #0176d3; }
body[data-shell="salesforce"] .sh-content { max-width: 1240px; }

/* ---------- ≤1023：顶部导航项收起，底部 tab 接管；记录页签条收成横滚条 ---------- */
@media (max-width: 1023px) {
  body[data-shell="salesforce"] .sh-gn { display: none; }
  body[data-shell="salesforce"] .sh-app-name { border-right: none; }
  body[data-shell="salesforce"] .sh-top { padding: 0 12px; }
  body[data-shell="salesforce"] .sh-body { padding-bottom: 76px; }
  body[data-shell="salesforce"] .sh-rectabs { top: 56px; padding: 4px 12px 0; overflow-x: auto; }
}