/* ============================================================
 * AGC · 波普涂鸦主题
 * 路径：/public/css/theme.css
 * 职责：导航栏、侧边栏、页脚注脚的视觉主题
 * ============================================================ */

/* ── 1. 导航栏（左侧固定列） ── */
.nav {
  background: var(--color-black);
  color: var(--color-white);
  border: var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  padding: var(--space-md) 0;
  position: sticky;
  top: var(--gutter);
  height: fit-content;
  /*
   * 高度不给视口上限：内容完整展开，由页面整体滚动承载。
   * （旧实现用 max-height:calc(100vh - 2*gutter) + overflow-y:auto，
   *   会把内容拦腰截断并出现内部滚动条，窗口偏矮时尤其明显。
   *   sticky 仍在：主内容更高时导航栏会钉住跟随，内容更矮时随页面滚走。）
   */
}

/* LOGO */
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-md);
  border-bottom: 2px solid var(--color-yellow);
  text-decoration: none;
}

.nav__logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border: 2px solid var(--color-yellow);
  border-radius: var(--radius);
  background: var(--color-yellow);
}

.nav__logo-text {
  font-size: 20px;
  font-weight: 900;
  color: var(--color-yellow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 导航链接列表 */
.nav__links {
  flex: 1;
  padding: var(--space-md) 0;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
  border-left: 3px solid transparent;
}

.nav__link:hover,
.nav__link--active {
  background: var(--color-yellow);
  color: var(--color-black);
  border-left-color: var(--color-black);
  text-decoration: none;
}

.nav__link-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* 导航底部版权信息 */
.nav__footer {
  padding: var(--space-md);
  border-top: 2px solid #333;
  font-size: 12px;
  color: #999;
  line-height: 1.8;
}

.nav__footer a {
  color: var(--color-yellow);
  font-size: 12px;
}

.nav__footer a:hover {
  text-decoration: underline;
}

/* 页脚展示当前运行版本（由 layout.renderLayout 注入 version.VERSION_STRING） */
.nav__version {
  font-family: var(--font-mono);
  color: #666;
  letter-spacing: 0.05em;
}

/* ── 2. 移动端滑动面板（右侧滑入） ── */

/* 固定在左上角的汉堡按钮（桌面/平板隐藏）
   注意：按钮固定在左侧，与「从右侧滑出」的面板互不重叠 */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1100;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  background: var(--color-black);
  border: 2px solid var(--color-yellow);
  border-radius: var(--radius);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

/* 下滑隐藏（由 nav-collapse.js 切换）：向上移出自身高度，上划即复现 */
.mobile-menu-btn--hidden {
  transform: translateY(calc(-100% - 12px));
  opacity: 0;
  pointer-events: none;
}

.mobile-menu-btn__bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--color-yellow);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* 展开时汉堡 → × */
.mobile-panel--open .mobile-menu-btn .mobile-menu-btn__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.mobile-panel--open .mobile-menu-btn .mobile-menu-btn__bar:nth-child(2) {
  opacity: 0;
}
.mobile-panel--open .mobile-menu-btn .mobile-menu-btn__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* 遮罩层 */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/*
 * ═══════════════════════════════════════════
 * 移动端 (< 768px)
 *
 * 侧边栏 + 导航栏各自 position:fixed，均从**右侧**滑入，
 * 共享同一 transition 曲线实现同步滑动。
 * 黑框包裹，仅 4px 间隙。
 * ═══════════════════════════════════════════
 */
@media (max-width: 767px) {

  .mobile-menu-btn { display: flex; }
  .mobile-overlay  { display: block; }

  .mobile-panel--open .mobile-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /*
   * 共用滑动参数：固定定位 + 相同 transition
   * 桌面端 grid 列分配在移动端清除
   */
  .layout-sidebar,
  .layout-nav {
    position: fixed;
    right: 0;
    z-index: 1000;
    width: 260px;
    max-width: 80vw;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    grid-column: auto;
  }

  /* 展开 → 完全同步滑入 */
  .mobile-panel--open .layout-sidebar,
  .mobile-panel--open .layout-nav {
    transform: translateX(0);
  }

  /*
   * 侧边栏（上方）：白底黑框，适应内容高度
   */
  .layout-sidebar {
    top: 0;
    bottom: auto;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0;
  }

  .layout-sidebar .sidebar {
    border: 3px solid var(--color-black);
    border-radius: var(--radius);
    margin: 8px 8px 2px 8px;
    padding: var(--space-sm);
    background: var(--color-white);
    position: static;
    max-height: none;
  }

  /*
   * 导航栏（下方）：黑底黄字，填充剩余屏幕
   * sidebarmargin-bottom:2px + nav margin-top:2px = 4px 视觉间隙
   */
  .layout-nav {
    top: 50vh;
    bottom: 0;
    overflow-y: auto;
    padding: 0;
  }

  .layout-nav .nav {
    border: 3px solid var(--color-black);
    border-radius: var(--radius);
    margin: 2px 8px 8px 8px;
    padding: var(--space-sm);
    background: var(--color-black);
    color: var(--color-white);
    position: static;
    max-height: none;
  }

  /*
   * 为汉堡按钮预留一行空白：
   * 按钮 fixed 固定在左上角，若不预留会盖住页面标题（首页轮播同理）。
   * 这里只位移内容列，不参与滚动定位，故不影响 sticky / 跟随行为。
   */
  .layout-main {
    padding-top: var(--mobile-menu-offset);
  }

  /* 展开时禁止 body 滚动 */
  body.mobile-panel--open {
    overflow: hidden;
  }
}

/* ── 3. 侧边栏 ── */
.sidebar {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  position: sticky;
  top: var(--gutter);
  height: fit-content;
  /*
   * 同 .nav：不再用 100vh 上限压缩高度。
   * 侧边栏内容（用户卡 + 快捷操作 + 退出登录）在常见视口下可完整铺开，
   * 超高时随页面滚动，全部内容依然可达，不会出现内部滚动条。
   */
}

.sidebar__section {
  margin-bottom: var(--space-lg);
}

.sidebar__section:last-child {
  margin-bottom: 0;
}

.sidebar__title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  border-bottom: var(--border);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* 未登录：登录/注册按钮组 */
.sidebar__auth {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* 已登录：用户信息块 */
.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
}

.sidebar__avatar {
  width: 48px;
  height: 48px;
  border: var(--border);
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar__username {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
}

/* 公开 UID（用于与 ADMIN_UID 白名单核对） */
.sidebar__uid {
  font-family: var(--font-mono);
  font-size: 10px;
}

.sidebar__points {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
  cursor: pointer;
}

.sidebar__points:hover {
  color: var(--color-danger);
  text-decoration: underline;
}

/* 未登录侧的引导文案 */
.sidebar__note {
  line-height: 1.8;
}

/* 封禁态提示（banned 用户仍可浏览，但不可发布） */
.sidebar__banned {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-red);
  color: var(--color-white);
  border: var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
}

.sidebar__logout {
  display: inline-block;
  color: var(--color-muted);
}

/* 快捷操作按钮组 */
.sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* 我的作品列表 */
.sidebar__works {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__works-item {
  display: block;
  font-size: 13px;
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  border: 2px solid var(--color-black);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-black);
  text-decoration: none;
  transition: background 0.15s;
}

.sidebar__works-item:hover {
  background: var(--color-yellow);
}