/* ═══════════════════════════════════════════════════════════════
 * PRD-203 · CRM 应用外壳组件（桌面左树 + 移动底部 Tab），真实页面直挂、零 iframe。
 * 取代 crm.html 套壳：各业务页就是真页面真 URL，本文件只画壳、挪位、高亮。
 * 作用域全部挂在 html.crm-chrome 上——没引组件的页面（门户/改密/ERP 域）零影响。
 * PRD-138 契约延续：gtop 纯白无毛玻璃、logo 26px 自然宽、退出按钮描边化。
 * ═══════════════════════════════════════════════════════════════ */
:root {
  --crm:#c25e00; --crm2:#ff6b22; --crm-soft:rgba(255,159,10,.14); --crm-line:rgba(255,159,10,.38);
  --crm-top-h:52px; --crm-side-w:224px;
}

/* 老顶栏退役（松哥 0924：左树/Tab 才是正宫导航）；?embed=1 嵌入态走原有 html.embed 隐藏，壳组件不注入 */
html.crm-chrome .topbar { display:none !important; }
html.crm-chrome body { padding-top:var(--crm-top-h); }

/* ── 顶部细条：品牌 + 域切换 + 用户区 ── */
.gtop { position:fixed; top:0; left:0; right:0; z-index:300; height:var(--crm-top-h);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  background:#fff; border-bottom:1px solid rgba(0,0,0,.07); }
.gtop .gbrand { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; text-decoration:none; }
.gtop .gbrand .logo { height:26px; width:auto; object-fit:contain; }
.domain-pills { display:flex; gap:6px; margin-left:4px; }
.domain-pills .pill { font-size:11.5px; font-weight:600; padding:4px 13px; border-radius:999px; color:#48484c; cursor:pointer; border:1px solid transparent; text-decoration:none; white-space:nowrap; flex:none; }
.domain-pills .pill.on { background:var(--crm-soft); color:var(--crm); border-color:var(--crm-line); }
.domain-pills .pill:not(.on):hover { background:rgba(0,0,0,.05); }
.gspacer { flex:1; }
.guser { display:flex; align-items:center; gap:9px; font-size:12px; color:#86868b; }
.guser button { padding:4px 11px; border-radius:999px; border:1px solid rgba(0,0,0,.16); background:transparent; font-size:12px; cursor:pointer; color:#48484c; }

/* ── 桌面左树（≥900px）── */
.crm-side { display:none; }
.nav-cap { font-size:9.5px; font-weight:700; letter-spacing:1.5px; color:#86868b; padding:6px 12px 4px; }
.snav { display:flex; flex-direction:column; gap:3px; }
.sitem { display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:10px; font-size:13px; font-weight:500; color:#48484c; text-decoration:none; transition:background .18s cubic-bezier(.25,.1,.25,1); }
.sitem:hover { background:rgba(0,0,0,.045); }
.sitem.active { background:#fff; color:#1d1d1f; font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.08), inset 3px 0 0 var(--crm2); }
.sitem .nmark { width:25px; height:25px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; background:rgba(0,0,0,.05); color:#48484c; }
.sitem.active .nmark { background:var(--crm-soft); color:var(--crm); }
.sitem .txt { min-width:0; }
.side-foot { margin-top:auto; border-top:1px solid rgba(0,0,0,.06); padding-top:8px; }
.sitem.mini { padding:7px 11px; font-size:12px; }

/* ── 移动底部 Tab（<900px）：PRD-145 深色悬浮条原样迁来 ── */
.crm-tabs { display:none; position:fixed; left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); z-index:300; height:64px;
  background:#14161c; border-radius:20px; padding:6px 8px; box-shadow:0 10px 28px rgba(10,12,18,.38), 0 2px 6px rgba(10,12,18,.22); }
.crm-tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5px; font-size:9.5px; color:rgba(255,255,255,.55); cursor:pointer; border-radius:14px; text-decoration:none; transition:background .18s,color .18s; }
.crm-tab .ic { width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:rgba(255,255,255,.07); color:rgba(255,255,255,.55); transition:background .18s,color .18s; }
.crm-tab.on { color:#fff; font-weight:700; background:rgba(255,255,255,.08); }
.crm-tab.on .ic { background:var(--crm2); color:#fff; }

/* ── 更多抽屉（管理·移动）── */
.crm-sheet-mask { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:400; display:none; align-items:flex-end; }
.crm-sheet-mask.show { display:flex; }
.crm-sheet { width:100%; background:#fff; border-radius:22px 22px 0 0; padding:16px 16px calc(26px + env(safe-area-inset-bottom)); }
.crm-sheet h4 { font-size:13px; color:#86868b; margin:0 0 12px; font-weight:600; }
.crm-sheet .sitems { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.sitem2 { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:10.5px; color:#48484c; text-decoration:none; }
.sitem2 .ic { width:44px; height:44px; border-radius:14px; background:#f5f5f7; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:#48484c; }

/* ── 断点切换 ── */
@media (min-width:900px) {
  html.crm-chrome body { padding-left:var(--crm-side-w); }
  html.crm-chrome .crm-side { display:flex; position:fixed; top:var(--crm-top-h); bottom:0; left:0; width:var(--crm-side-w);
    flex-direction:column; background:rgba(255,255,255,.82); border-right:1px solid rgba(0,0,0,.06); padding:12px 10px 10px; overflow-y:auto; z-index:290; }
  html.crm-chrome .crm-tabs { display:none !important; }
}
@media (max-width:899.9px) {
  html.crm-chrome .crm-tabs { display:flex; }
  html.crm-chrome body { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* 访客提示条别让底部 Tab 压住 */
html.crm-chrome #guestBanner { bottom:calc(84px + env(safe-area-inset-bottom)) !important; }

/* 窄屏顶栏收纳（PRD-203 验收实测 390px 溢出 406>390）：胶囊缩字号、用户名省略号 */
@media (max-width:640px) {
  html.crm-chrome .gtop { padding:0 10px; gap:8px }
  html.crm-chrome .domain-pills { gap:4px; margin-left:0; overflow-x:auto; scrollbar-width:none; min-width:0 }
  html.crm-chrome .domain-pills::-webkit-scrollbar { display:none }
  html.crm-chrome .domain-pills .pill { padding:3px 9px; font-size:10.5px }
  html.crm-chrome .guser { gap:6px; min-width:0 }
  html.crm-chrome .guser span { max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
}