/* == css/app/workspace-hall.css · PC 端工作台 · 反馈大厅 ==
 *
 * 背景：大厅原为「营销页」时代的 .container.mvc-narrow + .t-card-list 卡片流，
 *       三段筛选（状态/类型/产品）各占一行 chips，纵向占用大、信息密度低。
 * 本文件用 ws- 前缀重建工作台形态，不改 page-hall.css —— 移动端仍依赖它。
 *
 * 布局：页面头（搜索 + 提交）→ 表格卡（状态 Tab / 类型 chips / 产品下拉）→ 五列表格
 * 判据：大厅是「公开浏览」场景，首要动作是筛选与检索，不是提交。
 * ========================================================================== */

/* ========== 页面头内的搜索表单 ========== */
/* 顶栏已有全局搜索入口，这里是大厅的精确检索：GET 提交，服务端直出，保留其它筛选 */
.ws-hall-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 0;
}
.ws-hall-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(160px, 22vw, 280px);
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #fafafa;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}
.ws-hall-search-box:focus-within {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.ws-hall-search-box svg { flex: none; color: var(--gray-3); }
.ws-hall-search-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  color: var(--black);
  padding: 0 6px;
}
.ws-hall-search-box input::placeholder { color: var(--gray-3); }
.ws-hall-search-box input::-webkit-search-cancel-button { cursor: pointer; }
/* 有搜索词时显示清除：直接把 input 清空并回到无 q 的当前筛选 */
.ws-hall-search-clear {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--fill);
  color: var(--gray-2);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.ws-hall-search-clear:hover { background: var(--border); color: var(--black); }
.ws-hall-search-clear svg { width: 10px; height: 10px; }

/* ========== 筛选行（类型 / 产品） ========== */
/* 状态已由 Tab 承担；此行只放次级维度，避免三行 chips 撑高首屏 */
.ws-hall-filters {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-light);
  background: #fff;
  flex-wrap: wrap;
  min-width: 0;
}
.ws-hall-fgroup {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* 维度名：11px 大写感弱化标签，作为分组锚点而非标题 */
.ws-hall-flabel {
  flex: none;
  font-size: 12px;
  color: var(--gray-3);
  white-space: nowrap;
}
/* chips：横向滚动，不换行挤压 */
.ws-hall-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
  padding: 1px 0;
}
.ws-hall-chips::-webkit-scrollbar { display: none; }
.ws-hall-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--gray-1);
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.ws-hall-chip:hover { background: var(--fill); color: var(--black); }
.ws-hall-chip.active { background: var(--blue-50); color: var(--blue); font-weight: 500; }
/* 二级分类：前缀圆点表示层级，从属高亮由 .active 承担 */
.ws-hall-chip.is-sub { color: var(--gray-2); padding-left: 8px; }
.ws-hall-chip.is-sub::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  margin-right: 5px;
  flex: none;
}

/* 产品下拉：产品树可能很深（顶级 + 二级），chips 会横向拉得很长，
   改用原生 select + optgroup 收纳，无 JS 也能用（配「筛选」提交按钮） */
.ws-hall-prod {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ws-hall-prod select {
  height: 28px;
  max-width: 220px;
  padding: 0 26px 0 9px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: #fff
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2371717A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6L8 10L12 6'/%3E%3C/svg%3E")
    no-repeat right 6px center;
  font-size: 12px;
  color: var(--gray-1);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}
.ws-hall-prod select:hover { border-color: var(--gray-3); }
.ws-hall-prod select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.ws-hall-prod .ws-btn-sm { flex: none; }
/* 隐藏提交按钮时不能让表单塌陷（保留可访问的隐藏提交路径） */
.ws-hall-prod button[type="submit"] { display: none; }

/* 清除全部筛选 */
.ws-hall-reset {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-2);
  text-decoration: none;
  white-space: nowrap;
}
.ws-hall-reset:hover { color: var(--blue); }
.ws-hall-reset svg { flex: none; }

/* ========== 表格列扩展 ========== */
/* 摘要列：两行截断（-webkit-line-clamp），行高可控 */
.ws-col-excerpt { width: 32%; }
/* 类型列：按最宽标签「BUG 修复」定宽。
   该标签 border-box 自然宽 72px（含 4px×10px padding），加 td 左右 padding 32px
   → 至少 104px。取 108px 留余量；84/100px 都会触发 max-width 裁剪或折行。 */
.ws-col-type    { width: 108px; }
/* 兜底：表格内标签一律不换行。
   .tag 是 inline-flex + white-space:normal，文案含空格时（如「BUG 修复」）
   会在窄列里折行，标签高度从 26px 跳到 44px，整行随之错位。
   max-width:100% + ellipsis 只在文案异常超长时兜底（正常文案列宽已给足，不应触发）。 */
.ws-table .tag {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wsh-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray-2);
  max-height: 38px;          /* 与 line-clamp 对齐，Firefox 下也限高 */
}
/* 提交者：昵称脱敏后仍需可读，锁宽省略 */
.ws-col-author { width: 116px; }
.ws-cell-author { font-size: 12px; color: var(--gray-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 进度条：大厅展示公开处理进度，条形比纯数字更直观 */
.ws-hall-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ws-hall-bar-track {
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--fill);
  overflow: hidden;
}
.ws-hall-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--blue);
}
.ws-hall-bar-fill.is-done { background: var(--green); }
.ws-hall-bar-num {
  flex: none;
  font-size: 11px;
  color: var(--gray-3);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* ========== 受限态（大厅关闭 / 需登录） ========== */
/* 替代原来的裸 .empty：给一张居中的说明卡，保持工作台卡片语言 */
.ws-hall-gate {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ws-hall-gate-card {
  max-width: 400px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 34px 30px;
}
.ws-hall-gate-ico {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border-radius: 10px;
  background: var(--fill);
  color: var(--gray-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-hall-gate-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 6px;
}
.ws-hall-gate-desc {
  font-size: 13px;
  color: var(--gray-3);
  line-height: 1.6;
}
.ws-hall-gate-act { margin-top: 18px; }

/* ========== 响应式：跟随工作台断点阶梯 ========== */
/* —— 1199px：搜索框收窄 —— */
@media (max-width: 1199px) {
  .ws-hall-search-box { width: clamp(140px, 18vw, 200px); }
  .ws-col-excerpt { width: 28%; }
}
/* —— 999px：摘要去退场，优先保住标题 / 状态 / 进度 —— */
@media (max-width: 999px) {
  .ws-col-excerpt { display: none; }
  /* 类型列宽度不下调：低于 104px 就会折行或裁掉「BUG 修复」 */
  .ws-col-type { width: 108px; }
}
/* —— 879px：搜索框移到筛选行右侧已无空间，改为独占一行 —— */
@media (max-width: 879px) {
  .ws-hall-search { flex: 1 1 100%; }
  .ws-hall-search-box { width: 100%; }
  .ws-col-author { display: none; }
}
/* —— 639px：类型列也退场，表格本体横向滚动 —— */
@media (max-width: 639px) {
  .ws-hall-filters { padding: 8px 12px; gap: 6px 12px; }
  .ws-hall-prod select { max-width: 150px; }
  .ws-col-type { display: none; }
}