/**
 * 左侧栏折叠（sns-left 收成图标条）
 *
 * 只作用于 dashboard 布局的 sns 三栏页（左栏 = 个人卡片 + 工作台菜单）。
 * 收起后左栏变成 64px 图标条，右侧 .sns-center 是 flex:1，会自动吃掉多出来的宽度。
 *
 * ── 为什么 CSS 类打在 body 上，而不是直接改 .sns-left 的宽度 ──
 * 因为 .sns-left 的 flex-basis/max-width 写在 lightmoon.css 里（260px），
 * 那边是主题文件，本资产优先级相同、加载顺序靠后，能覆盖但属于"抢"。
 * 打成 body 上的状态类后，本文件里的选择器特异性更高，意图也更清楚：
 * 「页面处于折叠态」而不是「这个元素宽度是多少」。
 *
 * ── 768px 断点下折叠自动失效 ──
 * 那个断点里 .sns-layout 已经是纵向堆叠、侧栏占满宽度，
 * 再"折成 64px 图标条"会把每个入口压成一条看不清的窄柱，
 * 所以直接整体隐藏折叠相关样式。
 */

body.sns-left-collapsed .sns-layout .sns-left {
  flex: 0 0 64px;
  max-width: 64px;
  padding-left: 4px;
  padding-right: 4px;
}

/* 隐藏文字只留图标：quick-links 的 a 是 flex（图标20px + 文字），
   直接把文字节点隐藏不现实（没有包一层 span），改为让 flex 只保留首个 glyphicon，
   并给 a 加 justify-content:center。字数不同的菜��靠 title 提示区分。 */
body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links li a {
  justify-content: center;
  gap: 0;
  padding: 12px 0;
}

/* 隐藏菜单文字，只留图标。
   dashboard.php 直接输出了 <span class="sns-link-text">…</span> 包住文字，
   折叠后把它藏掉即可（下面几条 span/b/font 规则是给非 dashboard 布局的
   老页面兜底 —— 那些页面的菜单文字是裸文本节点，没有这层 span）。 */
body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links .sns-link-text,
body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links li a > span:not(.sns-link-count),
body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links li a > b,
body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links li a > font {
  display: none !important;
}

/* 图标本身放大居中，折叠后 20px 太小 */
body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links li a .glyphicon {
  font-size: 1.25rem;
  width: auto;
}

/* 计数徽标：折叠后没地方放，改为在图标右上角挂一个小圆点 */
body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links .sns-link-count {
  display: none !important;
}

/* ── 个人卡片折叠：只留头像 ── */
body.sns-left-collapsed .sns-layout .sns-left .sns-user-cover,
body.sns-left-collapsed .sns-layout .sns-left .sns-user-name,
body.sns-left-collapsed .sns-layout .sns-left .sns-user-bio,
body.sns-left-collapsed .sns-layout .sns-left .sns-user-stats {
  display: none !important;
}

body.sns-left-collapsed .sns-layout .sns-left .sns-user-card {
  margin-bottom: 10px;
}

body.sns-left-collapsed .sns-layout .sns-left .sns-user-card .sns-user-avatar {
  margin-top: 0;
  padding: 12px 0;
}

body.sns-left-collapsed .sns-layout .sns-left .sns-user-card .sns-user-avatar img {
  width: 40px;
  height: 40px;
  border-width: 2px;
}

/* ── 侧栏卡片头折叠后只剩图标化的标题 ── */
body.sns-left-collapsed .sns-layout .sns-left .sns-sidebar-header {
  padding: 12px 8px;
  justify-content: center;
  font-size: 0;
}

body.sns-left-collapsed .sns-layout .sns-left .sns-sidebar-header::before {
  content: "≡";
  font-size: 1.1rem;
  color: var(--yk-text-secondary);
}

body.sns-left-collapsed .sns-layout .sns-left .sns-sidebar-header > * {
  display: none !important;
}

body.sns-left-collapsed .sns-layout .sns-left .sns-sidebar-body {
  padding: 8px 10px 12px;
}

/* ── 折叠开关按钮 ── */
.sns-left-toggle {
  background: transparent;
  border: 1px solid var(--yk-border);
  color: var(--yk-text-muted);
  width: 26px;
  height: 26px;
  border-radius: var(--yk-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.85rem;
  transition: var(--yk-transition);
  flex: 0 0 auto;
}

.sns-left-toggle:hover {
  color: var(--yk-primary);
  border-color: var(--yk-primary);
  background: var(--yk-primary-light);
}

/* 折叠态时按钮跟着侧栏一起变窄，居中即可 */
body.sns-left-collapsed .sns-layout .sns-left .sns-left-toggle {
  margin: 0 auto 10px;
}

/* 收起时 glyphicon-chevron-left 要翻成向右（表示"点我展开"） */
body.sns-left-collapsed .sns-left-toggle .glyphicon {
  transform: rotate(180deg);
}

/* 折叠态下侧栏底部留白，避免菜单项贴到视口边缘 */
body.sns-left-collapsed .sns-layout .sns-left {
  padding-bottom: 8px;
}

/* ── 窄屏（纵向堆叠）下折叠无意义，整体关闭 ── */
@media (max-width: 768px) {
  .sns-left-toggle {
    display: none !important;
  }

  /* 不用 all:revert（老浏览器支持差，且会连带重置 display 值），
     逐条写回展开态的样子。 */
  body.sns-left-collapsed .sns-layout .sns-left {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    position: static;
    max-height: none;
    padding: initial;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-user-cover {
    display: block !important;
    height: 100px;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-user-name,
  body.sns-left-collapsed .sns-layout .sns-left .sns-user-bio,
  body.sns-left-collapsed .sns-layout .sns-left .sns-user-stats,
  body.sns-left-collapsed .sns-layout .sns-left .sns-sidebar-header > * {
    display: revert !important;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-user-card {
    margin-bottom: 16px;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-user-card .sns-user-avatar {
    margin-top: -40px;
    padding: 0;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-user-card .sns-user-avatar img {
    width: 72px;
    height: 72px;
    border-width: 4px;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-sidebar-header {
    padding: 16px 20px 12px;
    justify-content: space-between;
    font-size: 0.93rem;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-sidebar-header::before {
    content: none;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-sidebar-body {
    padding: 12px 20px 16px;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links li a {
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 0;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links li a .glyphicon {
    font-size: 1rem;
    width: 20px;
  }

  body.sns-left-collapsed .sns-layout .sns-left .sns-quick-links .sns-link-count {
    display: inline-block !important;
  }
}