/* ============================================================
   sidebar.css - 侧边栏组件
   
   用途: 文章/FAQ等页面的侧边栏
   依赖: core/tokens.css
   ============================================================ */

.pb-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pb-sidebar__section {
  padding: var(--space-5);
  background-color: var(--color-bg);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.pb-sidebar__title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  border-bottom: var(--space-px) solid var(--color-border);
}

.pb-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pb-sidebar__list--ordered {
  counter-reset: sidebar-rank;
}

.pb-sidebar__item a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-150) var(--easing-in-out),
              color var(--duration-150) var(--easing-in-out);
}

.pb-sidebar__item a:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-primary);
}

/* 排名徽章 */
.pb-sidebar__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-6);
  height: var(--space-6);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.pb-sidebar__item:nth-child(1) .pb-sidebar__rank {
  color: var(--color-text-inverse);
  background-color: var(--color-danger);
}

.pb-sidebar__item:nth-child(2) .pb-sidebar__rank {
  color: var(--color-text-inverse);
  background-color: var(--color-warning);
}

.pb-sidebar__item:nth-child(3) .pb-sidebar__rank {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

.pb-sidebar__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-sidebar__date {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.pb-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 帮助区块（CTA样式） */
.pb-sidebar__section--help {
  background: var(--color-gradient-primary);
  border-color: transparent;
}

.pb-sidebar__section--help .pb-sidebar__title {
  color: var(--color-text-inverse);
  border-bottom-color: var(--color-white-20);
}

.pb-sidebar__help-text {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--overlay-white-85);
}

.pb-sidebar__section--help .pb-btn {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}

.pb-sidebar__section--help .pb-btn:hover {
  background-color: var(--color-white-90);
}

/* 专题模块 */
.pb-sidebar__section--topics .pb-sidebar__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pb-sidebar__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pb-sidebar__topic-item {
  margin: 0;
}

.pb-sidebar__topic-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.pb-sidebar__topic-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-lighter);
}

.pb-sidebar__topic-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
}

.pb-sidebar__topic-more:hover {
  text-decoration: underline;
}