/* ==========================================================================
   侧栏两列布局（功能区 / 当前栏目）· 两套皮肤共用

   背景：extra.css 把左列固定 126px、右列 flex:1 并给右列加了一块
   rgba(0,0,0,.12) 的底板。深色皮肤下看不出问题，亮色皮肤下那块底就变成
   一块空灰方块，两列看起来一大一小。

   这里的做法：两列等宽、同款盒子、去掉列底板，箭头与圆点改成绝对定位
   （不再挤占文字宽度）。只定义几何与结构，颜色由各皮肤主题负责。

   放在 extra.css 之后加载，同优先级靠后覆盖，因此不需要 !important。
   ========================================================================== */

.sidebar { padding-left: 10px; padding-right: 10px; }

/* 两列等宽、同高 */
.sidebar .sidebar-nav { gap: 8px; }
.sidebar .nav-primary,
.sidebar .nav-secondary {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  align-self: stretch;
  gap: 4px;
  padding: 26px 2px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sidebar .nav-primary::before,
.sidebar .nav-secondary::before {
  top: 6px;
  left: 9px;
  color: inherit;
  opacity: .6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* 两列按钮同一个盒子 */
.sidebar .nav-primary button,
.sidebar .nav-secondary button {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 左列箭头 / 右列圆点改绝对定位，不再把标题挤成省略号 */
.sidebar .nav-primary button { padding-right: 16px; }
.sidebar .nav-primary button::after {
  position: absolute;
  right: 6px;
  top: 50%;
  float: none;
  margin: 0;
  line-height: 1;
  transform: translateY(-50%);
}
.sidebar .nav-secondary button { padding-left: 16px; }
.sidebar .nav-secondary button::before { left: 6px; }

@media (max-width: 1200px) {
  .sidebar .nav-primary,
  .sidebar .nav-secondary { padding: 24px 2px 8px; }
}

/* ==========================================================================
   左下角底部区（皮肤切换 + 视角 + 用户）· 统一排版

   原来的问题：
     1. .sidebar-foot 里有个 position:absolute 的装饰「小人」伪元素，和真头像
        叠在一起；
     2. 视角下拉、头像、姓名三样东西塞在同一个 2 列网格里各占一格，换行乱掉；
     3. 皮肤切换条比下面那块窄几个像素，两块对不齐。

   这里统一成：一块窄条（皮肤）+ 一块身份卡（视角一行、头像与姓名一行），
   两块同宽同圆角，垂直贴在侧栏底部。颜色交给各皮肤主题。
   ========================================================================== */
.skin-switch,
.sidebar-foot {
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
}

/* 去掉装饰小人，真头像已经表达身份，两个圆并排只会显得乱 */
.sidebar-foot::before { content: none; }

.sidebar-foot {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px 10px;
  align-items: center;
  margin: 8px 0 0;
  padding: 10px;
}

/* 第一行：视角 + 下拉，整行铺满 */
#sidebar-role-preview {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#sidebar-role-preview > span {
  padding-left: 0;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
#sidebar-role-preview select {
  width: 100%;
  min-width: 0;
  height: 28px;
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  background-color: #3a1020 !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #f0d6b0 50%),
    linear-gradient(135deg, #f0d6b0 50%, transparent 50%) !important;
  background-position:
    calc(100% - 13px) 11px,
    calc(100% - 9px) 11px !important;
  background-size: 4px 4px, 4px 4px !important;
  background-repeat: no-repeat !important;
  color: #ffe6c2 !important;
  border: 1px solid rgba(255, 215, 140, .22) !important;
  padding-right: 22px;
}
#sidebar-role-preview select option {
  background: #2b0914;
  color: #ffe6c2;
}
#role-preview-banner {
  position: relative;
  top: auto;
  margin: 8px 0 12px;
}

/* 第二行：头像 + 姓名 / 身份 */
.sidebar-user-avatar {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
}
.sidebar-user-meta {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: 1px;
  min-width: 0;
}
.sidebar-user-meta b { font-size: 13px; line-height: 1.25; }
.sidebar-user-meta small { font-size: 11px; line-height: 1.25; }

@media (max-width: 900px) {
  .skin-switch, .sidebar-foot { border-radius: 12px; }
}