/* =============================================================
   LAYOUT — 骨架、三栏网格、Topbar、响应式断点
   顺序：1. 页面骨架  2. Topbar  3. 三栏网格  4. 各列  5. 响应式
   ============================================================= */

/* ─── 1. 页面骨架 ───────────────────────────────────────────── */

/*
  app-shell 是页面唯一滚动容器。
  topbar 用 fixed 浮层脱离文档流，app-shell 保持自然块级流即可。
*/
.app-shell {
  min-height: 100vh;
  padding: 0 20px;
}

/* ─── 2. Topbar ─────────────────────────────────────────────── */

/*
  fixed 浮层，白色半透明 + 毛玻璃模糊，z-index 10 确保压住所有内容。
  内容区向上滚动时会穿入 topbar 毛玻璃区域，形成视差感。
*/
.topbar {
  height: var(--topbar-height);   /* 68px，来自 --topbar-height token */
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* 品牌区：Logo + 星球切换标签 */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-logo {
  display: block;
  flex-shrink: 0;
}

/*
  星球切换标签：背景图片承载渐变胶囊底色，CSS 不重绘渐变以防色差。
  宽高严格对齐切图尺寸（83×26px）。
*/
.brand-planet-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  width: 83px;
  height: 26px;
  background: url('../slices/planet-tag-new.png') no-repeat center / contain;
  padding: 0 6px;
}

.brand-tag-text {
  font-size: 14px;
  font-family: PingFangSC-Semibold, "PingFang SC", sans-serif;
  font-weight: 600;
  color: rgba(210, 128, 87, 1);
  white-space: nowrap;
  flex: 1;
}

.brand-tag-arrow {
  flex-shrink: 0;
}

/* 搜索框：固定宽 600px，居中占据 topbar 中部 */
.search {
  width: 600px;
  flex-shrink: 0;
  background: rgba(250, 250, 250, 1);
  border: 1px solid rgba(15, 20, 25, 0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  height: 40px;
  cursor: text;
}

.search-icon {
  flex-shrink: 0;
  display: block;
}

.search input {
  border: 0;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 14px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  color: rgba(153, 153, 153, 1);
  min-width: 0;
}

.search input::placeholder {
  color: rgba(153, 153, 153, 1);
}

/* 右侧操作区：通知铃铛 + 用户头像 + 下拉箭头 */
.top-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-shrink: 0;
}

.topbar-bell {
  display: block;
  flex-shrink: 0;
  cursor: pointer;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 1);
  object-fit: cover;
  flex-shrink: 0;
}

.topbar-user-arrow {
  display: block;
  flex-shrink: 0;
}

/* ─── 3. 三栏网格 ───────────────────────────────────────────── */

/*
  margin-top = --sticky-offset（topbar 高度 68px + 间距 16px = 84px），
  确保三栏顶部与 topbar 底部保持 16px 间距，与设计稿对齐。
  grid-template-columns 的 transition 驱动侧边栏折叠的列宽动画。
*/
.layout {
  margin-top: var(--sticky-offset);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
  padding-bottom: 24px;
  transition: grid-template-columns 0.3s ease;
}

/*
  折叠态列宽：96px = 8px(item margin-left) + 12px(avatar margin-left)
              + 56px(avatar 宽) + 20px(右侧留白)
*/
.layout.layout--sidebar-collapsed {
  grid-template-columns: 96px minmax(0, 1fr) 340px;
}

/* 通用面板：白色半透明背景 + 毛玻璃 + 投影 */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

/* ─── 4. 各列 ───────────────────────────────────────────────── */

/*
  左侧边栏：padding 全部由子元素 margin 精确控制，不设容器 padding-top，
  与主内容区和右侧栏共享同一 grid 行起点，视觉对齐。
  sticky 固定在 topbar 下方，内部独立滚动（overscroll-behavior 防止冒泡）。
*/
.sidebar {
  padding: 0 0 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: sticky;
  top: var(--sticky-offset);
  max-height: calc(100vh - var(--topbar-height) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 右侧栏：与侧边栏相同的 sticky 策略 */
.rightbar {
  padding: 0 0 20px;
  position: sticky;
  top: var(--sticky-offset);
  max-height: calc(100vh - var(--topbar-height) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 主内容区：纵向网格排列卡片，随页面自然滚动（不 sticky） */
.main {
  display: grid;
  gap: 16px;
  padding-bottom: 16px;
}

/* ─── 5. 响应式断点 ─────────────────────────────────────────── */

/*
  1380px：右侧栏宽度不足，移至底部全宽展示；侧边栏缩窄至 260px。
  解除 sticky 避免两侧边栏在文档流中重叠。
*/
@media (max-width: 1380px) {
  .layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  /* 折叠态在此断点维持 96px，确保动画逻辑一致 */
  .layout.layout--sidebar-collapsed {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .sidebar,
  .rightbar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  /* 右侧栏移至最后一行，撑满全宽 */
  .rightbar {
    grid-column: 1 / -1;
  }

  /*
    sidebar 宽度从 320px 缩至 260px，子元素固定像素宽（group-toggle 280px、
    planet-item 304px）会撑破容器。
    改用 align-items: stretch 使子元素自动填满容器宽度，再由具体规则修正外边距。
  */
  .sidebar {
    align-items: stretch;
  }

  .sidebar .planet-item {
    width: auto;
    margin-right: 8px;
  }

  /*
    ⚠️ <button> 的 width: auto 在块级 flex 子项中有浏览器兼容问题，
    显式用 calc(100% - 左右 margin 之和) 确保可靠。
    40px = margin-left(20px) + margin-right(20px)
  */
  .sidebar .group-toggle {
    width: calc(100% - 40px);
    margin-right: 20px;
    transition: none;
  }
  .sidebar .group-toggle img {
    transition: none;
  }
}

/* 980px：窗口过窄，topbar 换行，布局降为单列 */
@media (max-width: 980px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 16px;
  }

  /* 搜索框换行后独占一行（order: 3 使其排在 brand 和 top-actions 之后） */
  .search {
    order: 3;
    width: 100%;
    max-width: none;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .rightbar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* 680px：极小屏，快捷看板改为单列 */
@media (max-width: 680px) {
  .app-shell {
    padding: 12px;
  }

  .quick-grid {
    grid-template-columns: 1fr;
  }
}