/* 中台外框 v4（2026-10-20 TK 导航改版）：在 v3（macOS 式浅灰侧栏）上改——
   电脑 ≥1181：完整侧栏，按用途分组，可收起成图标（html.nav-mini，console-nav.v4.js 记住）；
   768–1180：窄侧栏（图标 + 两字）；≤767：顶部只留 logo 和头像，底部 4 个常用 + 「全部」弹出菜单。 */

:root {
  --console-sidebar-width: 212px;
  --console-page-bg: #f2f3f1;
  --nav-bg: #e9ebe7;
  --nav-ink: #1d1f1c;
  --nav-ink-2: #3d423b;
  --nav-muted: #80867d;
  --nav-line: #dcdfd9;
  --nav-hover: rgba(29, 31, 28, 0.05);
  --nav-active: #ffffff;
  --nav-pri: #2f3d2b;
  --nav-bad: #c0392b;
  --nav-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

body:has(.console-nav-shell),
body.has-console-nav-shell {
  min-height: 100dvh;
  padding-left: var(--console-sidebar-width);
  background: var(--console-page-bg);
}

/* ── 侧栏 ── */
.console-nav-shell {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: var(--console-sidebar-width);
  height: 100dvh;
  padding: 18px 10px 12px;
  border-right: 1px solid var(--nav-line);
  background: var(--nav-bg);
  color: var(--nav-ink);
  font: 14px/1.4 var(--nav-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.console-nav-main { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; }
.console-nav-top { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; }
.console-nav-brand { display: flex; align-items: center; gap: 8px; color: var(--nav-ink); text-decoration: none; min-width: 0; }
.console-nav-brand img { display: block; width: 100px; height: auto; }
.console-nav-brand span { color: var(--nav-muted); font-size: 13px; font-weight: 500; }
.console-nav-shell button.console-nav-collapse, .console-nav-shell button.console-nav-phone-me {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; flex: none;
}
.console-nav-shell button.console-nav-collapse { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; color: var(--nav-muted); }
.console-nav-shell button.console-nav-collapse:hover { background: var(--nav-hover); color: var(--nav-ink); }
.console-nav-shell button.console-nav-collapse:focus-visible, .console-nav-shell button.console-nav-phone-me:focus-visible { outline: 2px solid #3a7f4f; outline-offset: 2px; }
.console-nav-collapse .console-nav-icon { stroke: currentColor; }
.console-nav-phone-me { display: none !important; }

.console-nav-links {
  display: flex; flex-direction: column; gap: 1px; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none;
}
.console-nav-links::-webkit-scrollbar { display: none; }
.console-nav-group { font-size: 11px; font-weight: 600; color: var(--nav-muted); letter-spacing: .5px; padding: 12px 10px 4px; }
.console-nav-links a {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px;
  border-radius: 8px; color: var(--nav-ink-2); font-size: 14px; font-weight: 400; text-decoration: none; white-space: nowrap;
}
.console-nav-links a:hover { background: var(--nav-hover); color: var(--nav-ink); }
.console-nav-links a:focus-visible, .console-nav-account a:focus-visible { outline: 2px solid #3a7f4f; outline-offset: -2px; }
.console-nav-links a.active { background: var(--nav-active); color: var(--nav-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }

.console-nav-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--nav-muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.console-nav-links a:hover .console-nav-icon { stroke: var(--nav-ink-2); }
.console-nav-links a.active .console-nav-icon { stroke: var(--nav-pri); }
.console-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.console-nav-short { display: none; }
.console-nav-shell b {
  flex: none; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--nav-bad); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1.4; text-align: center;
}
.console-nav-links a .console-nav-ext { font-size: 11px; color: var(--nav-muted); }

/* 账号区：头像（我的）+ 人员 / 用户 / 日志 / 退出 */
.console-nav-account { display: flex; align-items: center; gap: 4px; padding: 10px 0 0; border-top: 1px solid var(--nav-line); }
.console-nav-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px; color: var(--nav-ink); text-decoration: none; }
a.console-nav-me:hover { background: var(--nav-hover); }
a.console-nav-me.active { background: var(--nav-active); }
.console-nav-av { width: 30px; height: 30px; border-radius: 50%; background: var(--nav-pri); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.console-nav-who { min-width: 0; display: flex; flex-direction: column; }
.console-nav-who b { all: unset; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-nav-who small { font-size: 11px; color: var(--nav-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-nav-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.console-nav-tool { position: relative; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--nav-muted); }
.console-nav-tool:hover, .console-nav-tool.active { background: var(--nav-hover); }
.console-nav-tool.active .console-nav-icon { stroke: var(--nav-pri); }
.console-nav-tool b { position: absolute; top: -3px; right: -3px; min-width: 15px; padding: 0 4px; font-size: 9.5px; }
.console-nav-logout { margin: 0; flex: none; }
.console-nav-shell .console-nav-logout button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--nav-muted);
}
.console-nav-shell .console-nav-logout button:hover { background: var(--nav-hover); }
.console-nav-shell .console-nav-logout button:hover .console-nav-icon { stroke: var(--nav-bad); }
.console-nav-shell .console-nav-logout button:focus-visible { outline: 2px solid #3a7f4f; outline-offset: -2px; }
.console-nav-logout-label { display: none; }

.console-nav-tabs, .console-nav-sheet, .console-nav-scrim { display: none; }

/* ── 窄侧栏（平板、小笔记本）：图标 + 两字；收起按钮不出 ── */
@media (min-width: 768px) and (max-width: 1180px) {
  :root { --console-sidebar-width: 76px; }
  .console-nav-shell { padding: 14px 8px 10px; }
  .console-nav-top { flex-direction: column; padding: 0; gap: 8px; }
  .console-nav-brand { justify-content: center; }
  .console-nav-brand img { width: 52px; }
  .console-nav-brand span, .console-nav-label, .console-nav-links a .console-nav-ext, .console-nav-who { display: none; }
  .console-nav-group { height: 1px; padding: 0; margin: 6px 10px; background: var(--nav-line); font-size: 0; overflow: hidden; }
  .console-nav-links { gap: 3px; }
  .console-nav-links a { flex-direction: column; justify-content: center; gap: 3px; min-height: 50px; padding: 6px 2px; }
  .console-nav-short { display: block; font-size: 11px; line-height: 1.2; }
  .console-nav-links a b { position: absolute; top: 3px; right: 6px; min-width: 16px; padding: 0 4px; font-size: 10px; }
  .console-nav-account { flex-direction: column; gap: 4px; padding-top: 8px; }
  .console-nav-me { flex: none; padding: 4px; justify-content: center; }
  .console-nav-tools { flex-direction: column; }
  .console-nav-shell button.console-nav-collapse { display: none !important; }
}

/* ── 电脑上手动收起（html.nav-mini）── */
@media (min-width: 1181px) {
  html.nav-mini { --console-sidebar-width: 76px; }
  html.nav-mini .console-nav-shell { padding: 14px 8px 10px; }
  html.nav-mini .console-nav-top { flex-direction: column; padding: 0; gap: 8px; }
  html.nav-mini .console-nav-brand { justify-content: center; }
  html.nav-mini .console-nav-brand img { width: 52px; }
  html.nav-mini .console-nav-brand span, html.nav-mini .console-nav-label, html.nav-mini .console-nav-links a .console-nav-ext, html.nav-mini .console-nav-who { display: none; }
  html.nav-mini .console-nav-group { height: 1px; padding: 0; margin: 6px 10px; background: var(--nav-line); font-size: 0; overflow: hidden; }
  html.nav-mini .console-nav-links { gap: 3px; }
  html.nav-mini .console-nav-links a { flex-direction: column; justify-content: center; gap: 3px; min-height: 50px; padding: 6px 2px; }
  html.nav-mini .console-nav-short { display: block; font-size: 11px; line-height: 1.2; }
  html.nav-mini .console-nav-links a b { position: absolute; top: 3px; right: 6px; min-width: 16px; padding: 0 4px; font-size: 10px; }
  html.nav-mini .console-nav-account { flex-direction: column; gap: 4px; padding-top: 8px; }
  html.nav-mini .console-nav-me { flex: none; padding: 4px; justify-content: center; }
  html.nav-mini .console-nav-tools { flex-direction: column; }
}

/* ── 手机：顶部 logo + 头像，底部常用 + 全部 ── */
@media (max-width: 767px) {
  :root { --console-sidebar-width: 0px; --console-mobile-nav-height: calc(52px + env(safe-area-inset-top, 0px)); --console-tabs-height: calc(60px + env(safe-area-inset-bottom, 0px)); }
  body:has(.console-nav-shell),
  body.has-console-nav-shell { padding-left: 0; padding-top: var(--console-mobile-nav-height); }
  body:has(.console-nav-tabs) { padding-bottom: var(--console-tabs-height); }
  body.has-nav-tabs { padding-bottom: var(--console-tabs-height); } /* 老内核不认 :has()，console-nav.v4.js 打的类 */
  /* 老内核不认 inset 简写，补上四边 */
  .console-nav-shell { top: 0; left: 0; right: 0; bottom: auto; }
  .console-nav-scrim:not([hidden]) { top: 0; left: 0; right: 0; bottom: 0; }
  .console-nav-shell {
    inset: 0 0 auto 0; z-index: 50; width: 100%; height: auto; display: block; /* 50：页面自己的抽屉 / 弹窗（60–1000）要盖得住导航（2026-10-20 素材上传抽屉被顶栏挡住） */
    padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px; border-right: 0; border-bottom: 1px solid var(--nav-line);
    background: #f2f3f1; overflow: visible; /* 不用 backdrop-filter：它会让底栏、菜单这些 fixed 子元素跟着顶栏走 */
  }
  .console-nav-main { display: block; }
  .console-nav-top { padding: 0; min-height: 36px; }
  .console-nav-brand img { width: 88px; }
  .console-nav-links, .console-nav-account { display: none; }
  .console-nav-shell button.console-nav-collapse { display: none !important; }
  .console-nav-shell button.console-nav-phone-me { display: grid !important; margin-left: auto; border-radius: 50%; }
  .console-nav-phone-me .console-nav-av { width: 32px; height: 32px; }

  .console-nav-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--nav-line); padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .console-nav-tabs a, .console-nav-shell .console-nav-tabs button {
    all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font: 11px/1.2 var(--nav-sans); color: var(--nav-muted); text-decoration: none; padding: 2px 0;
  }
  .console-nav-tabs .console-nav-icon { width: 23px; height: 23px; stroke: currentColor; }
  .console-nav-tabs .active { color: var(--nav-pri); font-weight: 600; }
  .console-nav-tabs b { position: absolute; top: -3px; left: calc(50% + 5px); min-width: 16px; padding: 0 4px; font-size: 10px; }
  .console-nav-tabs a:focus-visible, .console-nav-shell .console-nav-tabs button:focus-visible { outline: 2px solid #3a7f4f; outline-offset: -2px; border-radius: 8px; }

  .console-nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1300; background: rgba(20, 24, 18, .38); }
  .console-nav-sheet:not([hidden]) {
    display: flex; flex-direction: column; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1301;
    max-height: 86dvh; overflow-y: auto; background: #fff; border-radius: 22px 22px 0 0;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
    animation: console-nav-up .2s ease-out;
  }
  @keyframes console-nav-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
  .console-nav-grip { width: 38px; height: 4px; border-radius: 2px; background: #c4c8c0; align-self: center; margin-bottom: 4px; }
  .console-nav-sgroup { font-size: 11px; font-weight: 600; color: var(--nav-muted); margin-top: 6px; }
  .console-nav-sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .console-nav-sgrid a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0; border-radius: 12px; color: var(--nav-ink-2); text-decoration: none; font-size: 12px; }
  .console-nav-sgrid a.active { background: #f2f3f1; font-weight: 600; color: var(--nav-ink); }
  .console-nav-tile { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; }
  .console-nav-tile .console-nav-icon { width: 21px; height: 21px; stroke: currentColor; }
  .console-nav-sgrid b { position: absolute; top: 2px; right: calc(50% - 30px); min-width: 16px; padding: 0 4px; font-size: 10px; }
  .console-nav-smine { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--nav-line); margin-top: 8px; padding-top: 12px; }
  .console-nav-smine .console-nav-me { padding: 0; }
  .console-nav-smine .console-nav-who b { font-size: 14px; }
  .console-nav-shell .console-nav-smine .console-nav-logout button { width: auto; padding: 6px 12px; gap: 6px; display: flex; color: var(--nav-bad); font-size: 14px; }
  .console-nav-smine .console-nav-logout .console-nav-icon { stroke: var(--nav-bad); }
  .console-nav-smine .console-nav-logout-label { display: inline; }

  /* 新规范页面里停在顶部的二级标签，要停在导航栏下面 */
  .hk-ds .ds-subtabs, .lx .lx-subw { top: var(--console-mobile-nav-height); }
}

/* 压过全局 styles.css 的深色按钮（body:has(.console-nav-shell) button[type=…]） */
.console-nav-shell .console-nav-logout button[type="submit"],
.console-nav-shell .console-nav-tabs button[type="button"],
.console-nav-shell .console-nav-top button[type="button"] { background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; color: var(--nav-muted) !important; }
.console-nav-shell .console-nav-tabs button[type="button"].active { color: var(--nav-pri) !important; }
.console-nav-shell .console-nav-smine .console-nav-logout button[type="submit"] { color: var(--nav-bad) !important; background: #fbeae7 !important; border-radius: 10px; }

/* ===== 老板块的手机兜底（从 console-nav.css 原样搬来，老板块迁完后删） =====
   老板块的手机规则挂在 body:has(.console-nav-shell) 上，老浏览器不支持 :has() 时会乱，这里用 JS 加的类兜底。
   图片规则排除了新规范页面（.hk-ds、.lx），否则会把卡片封面的高度改掉。 */
@media (max-width: 767px) {
  body.has-console-nav-shell .workspace,
  body.has-console-nav-shell .dashboard-workspace,
  body.has-console-nav-shell .ops-workspace,
  body.has-console-nav-shell .distribution-workspace,
  body.has-console-nav-shell .distribution-profile-workspace,
  body.has-console-nav-shell .crm-workspace,
  body.has-console-nav-shell .product-ops-workspace,
  body.has-console-nav-shell .seed-notes-workspace,
  body.has-console-nav-shell .users-workspace,
  body.has-console-nav-shell .mvp-workbench,
  body.has-console-nav-shell .task-desk-shell,
  body.has-console-nav-shell .personnel-workspace,
  body.has-console-nav-shell .library-workspace {
    width: min(100%, calc(100% - 20px)) !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
  }
  body.has-console-nav-shell .task-desk-page-head,
  body.has-console-nav-shell .dashboard-command-grid,
  body.has-console-nav-shell .dashboard-channel-sales,
  body.has-console-nav-shell .library-shell,
  body.has-console-nav-shell .library-heading,
  body.has-console-nav-shell .blogger-heading,
  body.has-console-nav-shell .ops-heading,
  body.has-console-nav-shell .distribution-heading,
  body.has-console-nav-shell .crm-heading,
  body.has-console-nav-shell .product-ops-heading,
  body.has-console-nav-shell .tpv2-hero,
  body.has-console-nav-shell .tpv2-toolbar,
  body.has-console-nav-shell .tpv2-metrics,
  body.has-console-nav-shell .tpv2-grid,
  body.has-console-nav-shell .tpv2-detail-grid,
  body.has-console-nav-shell .tpv2-edit-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.has-console-nav-shell .tpv2-metrics,
  body.has-console-nav-shell .tpv2-progress-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.has-console-nav-shell img:not(.hk-ds img):not(.lx img) {
    max-width: 100%;
    height: auto;
  }
  body.has-console-nav-shell table:not(.hk-ds table):not(.lx table) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  body.has-console-nav-shell pre,
  body.has-console-nav-shell code {
    white-space: pre-wrap;
    word-break: break-word;
  }
}