/* ============================================================================
   1013f · 桌面端「左侧类目栏」—— **1013f6 起已并入正式版**（index / leader / boss 三端加载）
   —— 1013f5 · 收起态尺寸统一：品牌 28×28 → 38×38（圆角 11），类目高亮块 48×38 → 38×38，
        退出块 34×34 → 38×38 ⇒ 三块**同尺寸同圆角同中轴（34px）**，消除「一大一小」的观感；
        收起态顺带隐藏类目区滚动条（6px 会把方块挤偏 3px）。
   —— 🔴 线上 style.css / app.js / *.js 逻辑一个字节不动：风险面只有「多加载一个 css + 一个 js」。
   —— 全部规则挂在 body.rd 下，且只在 ≥980px 生效；窄屏自动回退成原来的顶部标签条。
   —— 🔴 ⇄ 一键切换新旧版＝常驻入口：新版态挂侧栏品牌行（hover 出现），旧版态搬进顶栏（常显），
        见文件末 `body.rd.rd-off #topbar #rdToggle`。
   —— 侧栏结构由 sidebar.js 组装：
        #rdSide(fixed)
          ├ .rd-brand   品牌
          ├ #tabs       类目（原来的元素被搬进来，onclick/计数/红点全部沿用）
          └ .rd-user    身份 + 退出
   ============================================================================ */

@media (min-width: 980px) {

  body.rd { background: #f7f8fb; }
  /* 侧栏只在登录后（rd-ready）才给内容让位，避免登录页被推右 */
  body.rd.rd-ready { padding-left: 68px; transition: padding-left .18s ease; }
  /* hover 展开时内容跟着右移（推挤，而不是盖住列表） */
  body.rd.rd-ready:has(#rdSide:hover) { padding-left: 248px; }

  /* ---------- 顶栏：桌面端整条隐藏（身份信息移入侧栏底部） ---------- */
  body.rd #topbar { display: none !important; }
  body.rd.rd-off #topbar { display: flex !important; }

  /* ---------- 侧栏容器 ---------- */
  body.rd #rdSide {
    position: fixed; left: 0; top: 0; bottom: 0;
    display: none; flex-direction: column;
    width: 68px; background: #fff;
    border-right: 1px solid var(--line);
    z-index: 35; overflow: hidden;   /* 🔴 必须低于 #modal(40) / #toast(50)，否则侧栏会盖住弹窗 */
    transition: width .18s ease, box-shadow .18s ease;
  }
  body.rd.rd-ready #rdSide { display: flex; }
  body.rd.rd-off #rdSide { display: none; }
  body.rd #rdSide:hover { width: 248px; box-shadow: 10px 0 34px rgba(3, 11, 89, .13); }

  /* 品牌
     🔴 1013f5 · 尺寸统一：品牌方块 38×38 / 圆角 11 —— 与下方类目方块、底部退出方块完全一致。
        旧版 28×28 时，收起态的品牌只有 28，而高亮的类目块是 48×38 ⇒ 视觉上「一大一小」。 */
  body.rd #rdSide .rd-brand {
    flex: 0 0 60px; display: flex; align-items: center; gap: 11px;
    padding: 0 42px 0 20px; border-bottom: 1px solid var(--line); overflow: hidden;
  }
  /* 收起态：左边距 = (68 - 38) / 2 = 15 ⇒ 品牌方块中线与类目方块中线都落在 34px（严格同轴） */
  body.rd #rdSide:not(:hover) .rd-brand { padding-left: 15px; }
  body.rd #rdSide .rd-brand .bd {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
    background: var(--ops); color: #ff900c;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 17px; letter-spacing: -.5px;
  }
  body.rd #rdSide .rd-brand .bt {
    font-weight: 800; color: var(--ops); font-size: 15px; white-space: nowrap;
    opacity: 0; width: 0; transition: opacity .14s ease;
  }
  body.rd #rdSide:hover .rd-brand .bt { opacity: 1; width: auto; }

  /* ---------- 类目区 ===== 原 #tabs ---------- */
  body.rd #tabs.rd-side {
    position: static; top: auto; z-index: auto;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 10px 14px; margin: 0;
    background: transparent; border: none;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: #dfe4ec transparent;
  }
  body.rd #tabs.rd-side::-webkit-scrollbar { width: 6px; }
  body.rd #tabs.rd-side::-webkit-scrollbar-thumb { background: #dfe4ec; border-radius: 3px; }
  body.rd #tabs.rd-side::-webkit-scrollbar-track { background: transparent; }
  /* 🔴 1013f5 · 收起态不显示滚动条：6px 滚动条会把方块整体左移 3px（破坏与品牌/退出块的同轴），
     且窄轨里多一条竖线本身就不干净。展开态恢复正常细滚动条，滚轮/触控板滚动不受影响。 */
  body.rd #rdSide:not(:hover) #tabs.rd-side { scrollbar-width: none; }
  body.rd #rdSide:not(:hover) #tabs.rd-side::-webkit-scrollbar { width: 0; }

  /* 一行类目 */
  body.rd #tabs.rd-side .tab {
    position: relative; flex: 0 0 auto; margin: 0;
    display: flex; align-items: center; gap: 12px;
    height: 38px; padding: 0 12px; border-radius: 10px;
    background: transparent; border: 1px solid transparent;
    color: #4a5670; font-size: 14px; font-weight: 500;
    white-space: nowrap; overflow: visible;
    transition: background .13s ease, color .13s ease, box-shadow .13s ease;
  }
  /* 收起态：图标水平居中；且类目块自身收成 38×38 方块（不再撑满 48 宽）
     ⇒ 高亮态与上下的品牌 / 退出方块**同宽同高同圆角**，整条竖轴一条线。 */
  body.rd #rdSide:not(:hover) #tabs.rd-side .tab {
    flex: 0 0 38px; align-self: center; width: 38px; height: 38px; border-radius: 11px;
    justify-content: center; gap: 0; padding: 0;
  }
  body.rd #tabs.rd-side .tab:hover { background: #f1f4f9; color: var(--ops); }
  body.rd #tabs.rd-side .tab.active {
    background: var(--ops); border-color: var(--ops); color: #fff;
    box-shadow: 0 4px 12px rgba(3, 11, 89, .22);
  }
  body.rd #tabs.rd-side .tab.sales.active {
    background: var(--sales); border-color: var(--sales);
    box-shadow: 0 4px 12px rgba(46, 125, 50, .22);
  }

  /* 图标 */
  body.rd #tabs.rd-side .tab .ico {
    flex: 0 0 22px; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
  }
  body.rd #tabs.rd-side .tab .ico svg {
    width: 20px; height: 20px;
    stroke: currentColor; fill: none;
    stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round;
  }

  /* 文字（收起态完全收起） */
  body.rd #tabs.rd-side .tab .lbl {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    opacity: 0; width: 0; overflow: hidden; transition: opacity .15s ease .03s;
  }
  body.rd #rdSide:hover #tabs.rd-side .tab .lbl { opacity: 1; width: auto; }

  /* 计数 / 未读红点 */
  body.rd #tabs.rd-side .tab .cnt { color: var(--mut); font-size: 12px; flex: 0 0 auto; }
  body.rd #tabs.rd-side .tab.active .cnt { color: rgba(255, 255, 255, .78); }
  body.rd #tabs.rd-side .tab .cnt.cnt-red { color: #e11d48; }
  body.rd #tabs.rd-side .tab.active .cnt.cnt-red { color: #ffd9e2; }
  body.rd #tabs.rd-side .tab .tab-dot { top: 3px; right: 10px; }
  /* 收起态：红点贴图标右上角（方块收成 38 后重心变了，坐标跟着改，避免飘到方块外） */
  body.rd #rdSide:not(:hover) #tabs.rd-side .tab .tab-dot { right: auto; left: 22px; top: 1px; }

  /* 分组标题 / 分隔线（收起态不占高） */
  body.rd #tabs.rd-side .rd-grp {
    flex: 0 0 auto; font-size: 11px; color: #9aa6bd; letter-spacing: .6px;
    padding: 0 12px; height: 0; margin: 0; opacity: 0; overflow: hidden;
    transition: height .16s ease, margin .16s ease, opacity .16s ease;
  }
  body.rd #rdSide:hover #tabs.rd-side .rd-grp { height: 15px; margin: 9px 0 3px; opacity: 1; }
  body.rd #tabs.rd-side .rd-sep {
    flex: 0 0 auto; height: 1px; background: var(--line); margin: 5px 10px;
  }

  /* ---------- 侧栏底部：身份 + 退出 ---------- */
  body.rd #rdSide .rd-user {
    flex: 0 0 64px; display: flex; align-items: center;
    padding: 0 16px; border-top: 1px solid var(--line); overflow: hidden;
  }
  body.rd #rdSide .rd-user .who { flex: 1 1 auto; min-width: 0; color: var(--txt); font-size: 13px; }
  body.rd #rdSide .rd-user .who #who {
    display: block; color: var(--txt); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  body.rd #rdSide .rd-user .who .link {
    color: var(--mut); margin: 6px 0 0; padding: 3px 9px; font-size: 12px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
  }
  /* 收起态：只留退出按钮（一个 38×38 方块 —— 与品牌 / 类目方块同尺寸同圆角） */
  body.rd #rdSide:not(:hover) .rd-user { justify-content: center; padding: 0; }
  /* 🔴 1013f5 · .who 是 flex:1 1 auto（会撑满整轨），必须自己居中，否则方块贴左、与上面几块不同轴 */
  body.rd #rdSide:not(:hover) .rd-user .who { display: flex; justify-content: center; }
  body.rd #rdSide:not(:hover) .rd-user .who #who { display: none; }
  body.rd #rdSide:not(:hover) .rd-user .who .link {
    margin: 0; width: 38px; height: 38px; padding: 0; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; font-size: 0;
  }
  body.rd #rdSide:not(:hover) .rd-user .who .link::after { content: '退'; font-size: 15px; }

  /* ---------- 内容区放宽 ---------- */
  body.rd main#app { max-width: 1180px; margin: 0 auto; padding: 20px 26px 48px; }
  body.rd #overview { max-width: 1180px; margin: 0 auto; padding: 20px 26px 0; }
  body.rd #overview .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.rd main#app.boss-wrap { max-width: 1180px; padding: 20px 26px 48px; }

  /* 🔴 1013f-fix2 · 吸附点补偿：批量条原本 `position:sticky; top:97px`（= 旧版顶栏 49 + 标签条 48）。
     新版这两条都不在了，卡片从更靠上开始 ⇒ 批量条的自然位置已低于 97px，
     sticky 一进页面就立刻生效并把它顶到 97px，**正好盖住下面的未跟进分档条 / 搜索框**（用户截图那个错位）。
     新版顶部没有任何固定条 ⇒ 吸附点归 0（滚到顶就吸在视口顶）；切回旧版(rd-off)时保持原 97px。 */
  body.rd:not(.rd-off) .batchbar { top: 0; }
  /* 同一原因：旧版有 97px 的固定占位，正文首屏不会被吸住；新版把首行间距补回来，避免标题紧贴视口顶。 */
  body.rd:not(.rd-off) .batchbar:first-child { margin-top: 12px; }

  /* ---------- 「我的总览」页 ⇄ 类目列表页 ---------- */
  body.rd.rd-oview #app { display: none !important; }        /* 总览页：藏列表 */
  body.rd.rd-list  #overview { display: none !important; }   /* 列表页：藏总览卡片区 */
  /* 总览页时，类目高亮腾给「我的总览」 */
  body.rd.rd-oview #tabs.rd-side .tab.active:not(.rd-ov) {
    background: transparent; border-color: transparent; color: #4a5670; box-shadow: none;
  }
  body.rd.rd-oview #tabs.rd-side .tab.rd-ov {
    background: var(--ops); border-color: var(--ops); color: #fff;
    box-shadow: 0 4px 12px rgba(3, 11, 89, .22);
  }

  /* 一键切换新旧版（1013f6 正式版常驻）：新版态挂在侧栏品牌行右侧，hover 才出现 */
  body.rd #rdSide .rd-toggle {
    position: absolute; top: 17px; right: 10px;
    width: 26px; height: 26px; padding: 0; box-sizing: border-box; border-radius: 8px;
    background: #f1f4f9; color: #6b7a99; border: 1px solid var(--line);
    display: none; align-items: center; justify-content: center;
    font: inherit; font-size: 13px; line-height: 1; cursor: pointer; z-index: 2;
  }
  body.rd #rdSide:hover .rd-toggle { display: flex; }

  /* 🔴 旧版态（rd-off）：⇄ 搬进顶栏**常显** —— `#rdSide` 此时 display:none，
     按钮若跟着侧栏一起消失，用户就再也切不回新版了。 */
  body.rd.rd-off #topbar { justify-content: flex-start; gap: 12px; }
  body.rd.rd-off #topbar .who { margin-left: auto; }
  body.rd.rd-off #topbar #rdToggle {
    position: static; width: auto; height: 28px; padding: 0 11px; border-radius: 14px;
    display: flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .42);
    color: #fff; font-size: 12.5px; font-weight: 600; z-index: auto;
  }
  body.rd.rd-off #topbar #rdToggle::after { content: '新版界面'; }
  body.rd.rd-off #topbar #rdToggle:hover { background: rgba(255, 255, 255, .28); border-color: #fff; }

  /* 回到旧版（rd-off）：还原顶部标签条 */
  body.rd.rd-off { padding-left: 0; }
  body.rd.rd-off #tabs.rd-side {
    position: sticky; top: 49px; z-index: 9;
    flex-direction: row; align-items: center; gap: 6px;
    padding: 8px 10px; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden;
  }
  body.rd.rd-off #tabs.rd-side .tab {
    height: auto; padding: 7px 14px; border-radius: 20px;
    background: var(--bg); border-color: var(--line); color: var(--mut); font-size: 13px;
  }
  body.rd.rd-off #tabs.rd-side .tab.active { background: var(--ops); border-color: var(--ops); color: #fff; }
  body.rd.rd-off #tabs.rd-side .tab .ico,
  body.rd.rd-off #tabs.rd-side .rd-grp,
  body.rd.rd-off #tabs.rd-side .rd-sep { display: none; }
  body.rd.rd-off #tabs.rd-side .tab .lbl { opacity: 1; width: auto; }
  body.rd.rd-off #tabs.rd-side .tab .tab-dot { top: -6px; right: -6px; left: auto; }
}

/* 窄屏：侧栏整体不出现（回退成顶部标签条）；⇄ 在窄屏无意义（没有两套版式）⇒ 一并隐藏 */
@media (max-width: 979.98px) {
  #rdSide { display: none !important; }
  #rdToggle { display: none !important; }

  /* 🔴🔴 1013f7 · 手机端严重错位修复（用户截图：标签条变成一排上百像素的黑块）
     —— 根因：sidebar.js 给每个类目注入了 `<span class="ico"><svg viewBox="0 0 24 24">`、
        「我的总览」入口和分组标题，但**这些注入物的样式全部锁在上面的 ≥980px 媒体查询里**。
        窄屏（手机）不匹配那段 CSS ⇒ `.ico` 退化成无样式 span、里面的 svg 没有 width/height/
        stroke/fill 任何约束，按 SVG 默认尺寸渲染成实心黑块，把标签条从 ~33px 撑到 106px，
        整条类目横向溢出、只剩半截文字（「客户」「上」）。而 `_redesign` 的旧结论「窄屏自动回退
        成原来的顶部标签条」只在**没注入**时才成立 —— 注入是无条件跑的，漏了这道闸。
     ⇒ 窄屏一律不显示这些「桌面侧栏专用」的注入物；`.lbl` 不用管（窄屏无样式＝inline，
        文字照常显示，与 app.js 原生胶囊标签条一致）。 */
  #tabs .ico { display: none !important; }
  #tabs .rd-grp, #tabs .rd-sep, #tabs .tab.rd-ov { display: none !important; }
}