/* cathi-layout v14 ── 论坛布局层（纯布局，不含样式）
   参考骨架：知乎 / X(Twitter) / Facebook / 百度贴吧

   ┌─ 职责边界（改这个文件前先读）───────────────────────────────────────┐
   │ 本层只负责【布局】：栏位、版心、宽度、间距、排列顺序、响应式。            │
   │ 本层不负责【样式】：颜色、圆角、阴影、字号、字体、动效 —— 全部由主题决定。 │
   │ 确需视觉表达时（如分组线、悬停底色），只引用 Flarum 核心语义变量          │
   │ （--sidenav-color / --discussion-list-item-bg-hover / --control-bg-darken-5），│
   │ 这样切主题时视觉随之改变，布局层不会架空主题。                           │
   └──────────────────────────────────────────────────────────────────┘

   结构（桌面 >=992px）：
     左：分类导航（垂直条目、吸顶、可滚动）   ← 贴吧吧列表 / 知乎侧导航
     中：讨论流（700px 阅读宽度）              ← 知乎 694 / X 600 / FB 680
     右：信息栏（复用 fof/widgets 区块，吸顶） ← 知乎右卡片 / X 趋势栏

   版心（按页面结构给宽度，整块居中）：
     首页 1240 ｜ 无右栏页 930 ｜ 讨论页 1040

   移动端 Flarum 是另一套原生 UI，不介入。 */

:root {
  --layout-max: 1240px;
  --layout-narrow: 930px;
  --layout-disc: 1040px;
  --layout-left: 180px;
  --layout-right: 290px;
  --layout-disc-right: 260px;
  --layout-read: 730px;
  --layout-gap: 20px;
  --layout-top: 60px;              /* 顶栏 52 + 8 */
}

/* 0 ── 列表项原有负外边距在窄栏里会溢出，归零（各断点都安全） */
html body .DiscussionListItem {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 992px) {

  /* 1 ── 版心
        注意 apple / tdesign 等主题会在 `.App-content .container` 上压
        `max-width: var(--content-max) !important`（class 权重高于单类选择器），
        这里用同等以上特异性覆盖回来，保证任何主题下版心一致。 */
  html body .container,
  html body .App-content .container,
  html body .App-content .Page-container.container {
    width: min(var(--layout-max), 94vw) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 无右栏的页面（标签页 / 搜索页等）收窄，避免右侧大片空白 */
  html body .Page-container.container:not(:has(.FofWidgets-sideNavAlt)) {
    width: min(var(--layout-narrow), 94vw) !important;
  }
  /* 讨论页：正文 730 + 工具 260 + 间距，正好一整块居中 */
  html body .DiscussionPage .Page-container.container {
    width: min(var(--layout-disc), 94vw) !important;
  }

  /* 2 ── 三栏骨架 */
  html body .Page-container.container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: var(--layout-gap) !important;
    padding-top: 8px;
  }

  /* 3 ── 左栏：垂直导航，吸顶，超长可滚
        背景不写 —— 由主题决定，布局层不插手足栏表面。 */
  html body .Page-sidebar {
    flex: 0 1 var(--layout-left) !important;
    width: var(--layout-left) !important;
    min-width: 158px;
    order: 0;
    position: sticky;
    top: var(--layout-top);
    max-height: calc(100vh - var(--layout-top) - 12px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    scrollbar-width: thin;
  }
  html body .Page-sidebar nav,
  html body .Page-sidebar nav > ul,
  html body .Page-sidebar li.item-nav,
  html body .Page-sidebar .Dropdown {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body .Page-sidebar nav > ul {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  html body .Page-sidebar nav > ul > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3a 开始讨论：全宽主按钮（形态交给主题，这里只定尺寸与对齐） */
  html body .Page-sidebar li.item-newDiscussion {
    margin-bottom: 10px !important;
  }
  html body .Page-sidebar li.item-newDiscussion .Button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3b 分组下拉：本体按钮不显示，菜单常驻展开为垂直列表（纯结构改动） */
  html body .Page-sidebar .Dropdown-toggle {
    display: none !important;
  }
  html body .Page-sidebar .Dropdown-menu {
    position: static !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body .Page-sidebar .Dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3c 导航条目：图标 + 文字在同一行对齐（只定尺寸/对齐/截断）
        颜色与悬停底色一律用核心语义变量，值由主题给。 */
  html body .Page-sidebar .Dropdown-menu > li > a,
  html body .Page-sidebar .Dropdown-menu > li > button {
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: 100% !important;
    height: 34px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--border-radius, 8px) !important;
    background: transparent !important;
    box-sizing: border-box !important;
    color: var(--sidenav-color, inherit);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body .Page-sidebar .Dropdown-menu > li > a > .icon,
  html body .Page-sidebar .Dropdown-menu > li > button > .icon {
    flex: 0 0 16px;
    width: 16px;
    margin: 0 !important;
    text-align: center;
  }
  html body .Page-sidebar .Dropdown-menu > li > a > .Button-label,
  html body .Page-sidebar .Dropdown-menu > li > a > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body .Page-sidebar .Dropdown-menu > li > a:hover,
  html body .Page-sidebar .Dropdown-menu > li > button:hover {
    background: var(--discussion-list-item-bg-hover) !important;
  }
  html body .Page-sidebar .Dropdown-menu > li.active > a,
  html body .Page-sidebar .Dropdown-menu > li.active > button {
    color: var(--sidenav-color-active, var(--primary-color)) !important;
  }

  /* 3d 分组间隔：功能导航与分类之间留出呼吸（用核心的派生底色画线，随主题变） */
  html body .Page-sidebar .Dropdown-separator {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 11px 0 !important;
    border: 0 !important;
    background: var(--control-bg-darken-5, var(--control-bg)) !important;
    opacity: 1 !important;
  }

  /* 4 ── 中列：固定阅读宽度 */
  html body .Page-content {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: var(--layout-read) !important;
    order: 1;
  }
  html body .IndexPage-toolbar {
    margin-bottom: 10px !important;
  }

  /* 5 ── 右栏：复用 fof/widgets 侧栏区块，吸顶
        只认 sideNavAlt（正文右侧栏）；顶部的 topWidgetSection
        带同一个类但属于页面头部的公告位，绝不能一起收窄。 */
  html body .FofWidgets-sideNavAlt {
    flex: 0 1 var(--layout-right) !important;
    width: var(--layout-right) !important;
    min-width: 240px;
    order: 2;
    position: sticky;
    top: var(--layout-top);
    max-height: calc(100vh - var(--layout-top) - 12px);
    overflow-y: auto;
    padding: 0 !important;
    margin: 0 !important;
    scrollbar-width: thin;
  }
  /* 5a 右栏卡片：内层内容不再套第二层卡片（取消装饰，让外层卡片的表面透出来） */
  html body .FofWidgets-sideNavAlt .FofWidgets-Widget-content {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .FofWidgets-sideNavAlt .FofWidgets-Widget-title {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  /* 6 ── 讨论页：正文在左、工具在右 */
  html body .DiscussionPage .Page-sidebar {
    flex: 0 1 var(--layout-disc-right) !important;
    width: var(--layout-disc-right) !important;
    min-width: 220px;
    order: 2;
    padding: 0 !important;
    border: 0 !important;
  }
  html body .DiscussionPage .Page-content {
    order: 1;
    flex: 1 1 0 !important;
    max-width: var(--layout-read) !important;
  }
  html body .DiscussionPage .Page-sidebar nav > ul {
    display: block !important;
  }
  html body .DiscussionPage .Page-sidebar nav > ul > li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }
  html body .DiscussionPage .Page-sidebar nav > ul > li:last-child {
    margin-bottom: 0 !important;
  }

  /* 7 ── 列表项：信息重排（只管排列，密度与表面交给主题）
        顺序改为 标题 → 摘要(2 行) → 标签 · 作者 · 时间
        摘要独占整行、限 2 行，元信息统一沉到底部一行。

        ⚠️ 这里绝不能写内边距 / 条目间距 / 圆角 / 阴影 —— 那是【形态】，
        归主题的 --pad-list / --gap-list / --card-shadow / --card-border 管。
        曾经写过 padding:12px 16px !important，结果 14 套主题的内边距全被压成同一个值。 */
  html body .DiscussionListItem-content {
    padding: 0 56px 0 0 !important;
  }
  html body .DiscussionListItem-info {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 8px;
    row-gap: 4px;
    margin-top: 2px !important;
  }
  html body .DiscussionListItem-info > li {
    margin: 0 !important;
    padding: 0 !important;
    order: 3;
  }
  html body .DiscussionListItem-info > li.item-excerpt {
    order: 2;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html body .DiscussionListItem-info > li.item-terminalPost {
    order: 3;
  }

  /* 8 ── 顶部 Hero 的留白与字号由主题的 --pad-hero / 字阶决定，这里不介入 */
}

/* 9 ── 中等宽度：把右栏收掉，保证正文宽度 */
@media (min-width: 992px) and (max-width: 1180px) {
  html body .FofWidgets-sideNavAlt {
    display: none !important;
  }
}