/* 中台外框 v3（2026-09-23，按《中台设计规范》v3：方案 A「原生」+ 苹方）
   取代 console-nav.css（那份叠了五代样式：米色、深色驾驶舱、浅色驾驶舱彩色图标……，全部作废）。
   参照 macOS 侧边栏：浅灰侧栏、单色图标、选中项白底；乌木绿只用在选中项的图标上。
   三种宽度：≥1181 完整侧栏；768–1180 窄侧栏（图标 + 两字）；≤767 顶部横向导航。 */

:root {
  --console-sidebar-width: 208px;
  --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: 20px 12px 16px;
  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: 20px;
  min-height: 0;
}

.console-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  color: var(--nav-ink);
  text-decoration: none;
}
.console-nav-brand img { display: block; width: 104px; height: auto; }
.console-nav-brand span { color: var(--nav-muted); font-size: 13px; font-weight: 500; }

.console-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.console-nav-links::-webkit-scrollbar { display: none; }

.console-nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  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 { outline: 2px solid #3a7f4f; outline-offset: -2px; }
.console-nav-links a.active {
  background: var(--nav-active);
  color: var(--nav-ink);
  font-weight: 600;
}

.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-links 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;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--nav-line);
  color: var(--nav-muted);
  font-size: 12px;
}
.console-nav-account span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-nav-account form { margin: 0; flex: none; }
.console-nav-account button {
  min-height: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--nav-ink-2);
  font: 13px var(--nav-sans);
  cursor: pointer;
  box-shadow: none;
}
.console-nav-account button:hover { background: var(--nav-hover); color: var(--nav-ink); }

/* ── 窄侧栏（平板、小笔记本）：图标 + 两字 ── */
@media (min-width: 768px) and (max-width: 1180px) {
  :root { --console-sidebar-width: 76px; }
  .console-nav-shell { padding: 16px 8px 12px; }
  .console-nav-brand { justify-content: center; padding: 0; }
  .console-nav-brand img { width: 52px; }
  .console-nav-brand span, .console-nav-label, .console-nav-account span, .console-nav-links a .console-nav-ext { display: none; }
  .console-nav-links { gap: 4px; }
  .console-nav-links a {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 2px;
  }
  .console-nav-short { display: block; font-size: 11px; line-height: 1.2; }
  .console-nav-links b { position: absolute; top: 3px; right: 6px; min-width: 16px; padding: 0 4px; font-size: 10px; }
  .console-nav-account { justify-content: center; padding: 10px 0 0; }
  .console-nav-account button { font-size: 12px; }
}

/* ── 手机：顶部横向导航 ── */
@media (max-width: 767px) {
  :root { --console-sidebar-width: 0px; --console-mobile-nav-height: calc(96px + env(safe-area-inset-top, 0px)); }
  body:has(.console-nav-shell),
  body.has-console-nav-shell {
    padding-left: 0;
    padding-top: var(--console-mobile-nav-height);
  }
  .console-nav-shell {
    inset: 0 0 auto 0;
    z-index: 1200;
    width: 100%;
    height: auto;
    display: block;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 0 8px;
    border-right: 0;
    border-bottom: 1px solid var(--nav-line);
    background: rgba(242, 243, 241, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    overflow: visible;
  }
  .console-nav-main { display: block; }
  .console-nav-brand { padding: 0 16px; min-height: 30px; max-width: calc(100% - 80px); }
  .console-nav-brand img { width: 88px; }
  .console-nav-links {
    flex-direction: row;
    gap: 2px;
    margin-top: 8px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
  .console-nav-links a {
    flex: none;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 14px;
  }
  .console-nav-links a.active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
  .console-nav-icon { width: 16px; height: 16px; }
  .console-nav-label, .console-nav-account span, .console-nav-links a .console-nav-ext { display: none; }
  .console-nav-short { display: inline; }
  .console-nav-links b { min-width: 16px; padding: 0 5px; font-size: 10px; }
  .console-nav-account {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 12px;
    height: 30px;
    padding: 0;
    border-top: 0;
  }
  .console-nav-account button { font-size: 14px; color: var(--nav-pri); font-weight: 500; }

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

/* ===== 老板块的手机兜底（从 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;
  }
}