/* =====================================================
   研发新品开发进度程序 - 全局样式
   字体：微软雅黑；基础字号：14px；自适应手机端
   ===================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background: #f5f6f8;
  line-height: 1.6;
}
a { color: #2f6fed; text-decoration: none; }
a:hover { color: #1f4fb3; }

/* ---------- 顶部导航 ---------- */
.topnav { background: #1e4e9c; box-shadow: 0 2px 6px rgba(0,0,0,.12); position: relative; z-index: 100; }
.nav-inner {
  max-width: 92%; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 12px; min-height: 52px;
}
.brand { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.brand:hover { color: #cfe0ff; }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; }
.nav-links a { color: #dde7fb; padding: 6px 2px; white-space: nowrap; }
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; font-weight: 700; border-bottom: 2px solid #ffd166; }
.nav-user { color: #ffd166; white-space: nowrap; font-size: 13px; }

/* ---------- 布局 ---------- */
.container { max-width: 92%; margin: 0 auto; padding: 16px 16px 30px; }
.page-title { font-size: 16px; font-weight: 700; margin: 6px 0 14px; }
.sub-title { font-size: 14px; font-weight: 600; margin: 4px 0 10px; }
.footer { text-align: center; color: #9aa0a6; font-size: 12px; padding: 6px 16px 26px; }
.mt10 { margin-top: 10px; }
.mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; }
.mb12 { margin-bottom: 12px; }

/* ---------- 卡片 ---------- */
.card { background: #fff; border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.card h3 { margin: 0 0 10px; font-size: 15px; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
.list th { background: #f0f3f8; font-weight: 600; text-align: left; padding: 10px 12px; white-space: nowrap; border-bottom: 2px solid #e2e6ee; }
.list td { padding: 10px 12px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.list tbody tr:hover td { background: #f7fafd; }
.list .empty { text-align: center; color: #9aa0a6; padding: 28px 12px; }
.list .ops { white-space: nowrap; }
.list .ops a, .list .ops button { margin-right: 6px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block; padding: 6px 14px; font-size: 13px; line-height: 1.4;
  border: 1px solid #cfd6e0; background: #fff; border-radius: 4px;
  cursor: pointer; color: #333; font-family: inherit; text-align: center;
}
.btn:hover { border-color: #2f6fed; color: #2f6fed; text-decoration: none; }
.btn-primary { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.btn-primary:hover { background: #1f5bd8; border-color: #1f5bd8; color: #fff; }
.btn-success { background: #2e9e44; border-color: #2e9e44; color: #fff; }
.btn-success:hover { background: #25873a; border-color: #25873a; color: #fff; }
.btn-danger { background: #d93025; border-color: #d93025; color: #fff; }
.btn-danger:hover { background: #b9241a; border-color: #b9241a; color: #fff; }
.btn-warn { background: #f5a623; border-color: #f5a623; color: #fff; }
.btn-warn:hover { background: #de9210; border-color: #de9210; color: #fff; }
.btn-sm { padding: 3px 10px; font-size: 12px; }
.btn-lg { padding: 8px 22px; font-size: 14px; }

/* ---------- 表单 ---------- */
label.field-label { display: block; font-weight: 600; margin: 12px 0 4px; }
label.field-label .req { color: #d93025; margin-left: 2px; }
.field-tip { font-size: 12px; color: #9aa0a6; margin-top: 2px; }
.input, textarea.input, select.input {
  width: 100%; padding: 8px 10px; font-size: 14px;
  border: 1px solid #d0d6e0; border-radius: 4px;
  font-family: inherit; background: #fff; color: #333;
}
.input:focus, textarea.input:focus, select.input:focus { border-color: #2f6fed; outline: none; box-shadow: 0 0 0 2px rgba(47,111,237,.12); }
textarea.input { resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* 进度更改：结果进度密码区（v1.5） */
.result-stage-pwd { background: #fdf6f6; border: 1px dashed #f0c6c2; border-radius: 4px; padding: 2px 10px 8px; margin-top: 8px; }
.result-stage-pwd label.field-label { margin-top: 8px; }
.unit-suffix { position: relative; }
.unit-suffix .input { padding-right: 70px; }
.unit-suffix .unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #888; font-size: 13px; pointer-events: none; }

/* ---------- 徽标 ---------- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-A { background: #fdecea; color: #c62828; }
.badge-B { background: #fff4e0; color: #e67e22; }
.badge-C { background: #e8f3fd; color: #1565c0; }
.badge-pending { background: #fff8e1; color: #b8860b; }
.badge-rejected { background: #eeeeee; color: #757575; }
.badge-terminated { background: #fdecea; color: #c62828; }
/* 时效标识（v1.6.5，替代原 NEW 标记）：按项目最新回复/进度时间分三档着色
   1D = 24 小时内（红色）；3D = 72 小时内（黄色）；7D = 168 小时内（蓝色） */
.badge-1d { background: #e53935; color: #fff; }
.badge-3d { background: #f5a623; color: #fff; }
.badge-7d { background: #1565c0; color: #fff; }

/* ---------- 提示条 ---------- */
.alert { padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; font-size: 13px; }
.alert-success { background: #e7f6ea; color: #1c7a2f; border: 1px solid #b9e4c3; }
.alert-error { background: #fdecea; color: #c62828; border: 1px solid #f3b8b4; }
.alert-info { background: #e8f3fd; color: #1565c0; border: 1px solid #bcd9f5; }

/* ---------- 筛选条 ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.filter-bar .filter-label { color: #666; font-size: 13px; }
.filter-link { padding: 5px 16px; border-radius: 16px; background: #fff; border: 1px solid #d0d6e0; font-size: 13px; color: #444; }
.filter-link:hover { border-color: #2f6fed; color: #2f6fed; }
.filter-link.active { background: #2f6fed; color: #fff; border-color: #2f6fed; }
.filter-select { padding: 5px 10px; border: 1px solid #d0d6e0; border-radius: 16px; font-size: 13px; font-family: inherit; background: #fff; }

/* 已审核列表：分类+进度+搜索 组合筛选卡片 */
.filter-card { background: #fff; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.filter-card .filter-bar { margin-bottom: 0; }
.filter-card .mb8 { margin-bottom: 8px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; border-top: 1px dashed #e6e9f0; padding-top: 12px; margin-top: 6px; }
.filter-stages { flex: 1 1 480px; margin-bottom: 0; }
.chip {
  display: inline-block; padding: 4px 12px; border-radius: 14px;
  background: #f2f4f7; border: 1px solid #e2e6ee; font-size: 13px; color: #555; white-space: nowrap;
}
a.chip:hover { border-color: #2f6fed; color: #2f6fed; }
.chip.active { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.search-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 1 auto; }
.search-box .input { width: 200px; padding: 6px 10px; }
.search-tip { color: #888; font-size: 13px; margin: 0 0 10px; }

/* 已审核列表：项目分类与搜索同一行（分类选项少，宽度富余时搜索框靠右） */
.filter-class-row { flex-wrap: wrap; }
.filter-class-row .search-box { margin-left: auto; justify-content: flex-end; }
/* 移动端下拉筛选默认隐藏（v1.3.1，仅 ≤768px 手机显示） */
.filter-drop-mobile { display: none; }

@media (max-width: 768px) {
  /* 移动端布局固定四行：第一行"项目分类"，第二行"搜索前缀下拉条+搜索文本框+搜索按钮"（三元素强制一行不换行） */
  .filter-class-row .search-box { margin-left: 0; justify-content: flex-start; width: 100%; flex-wrap: nowrap; }
  .filter-class-row .search-box .input { flex: 1 1 auto; min-width: 0; width: auto; }
  .filter-class-row .search-box select { flex: 0 0 auto; }
  .filter-class-row .search-box .btn { flex: 0 0 auto; white-space: nowrap; }
  /* 移动端：第三行"进度查看：+下拉条"、第四行"项目应用：+下拉条"（各占一行） */
  .filter-stages,
  .filter-apps { display: none; }
  .filter-drop-mobile { display: block; margin-top: 6px; }
  .filter-drop-mobile .fdrop-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .filter-drop-mobile .fdrop-row .filter-label { flex: 0 0 auto; margin: 0; }
  .filter-drop-mobile select {
    flex: 1 1 auto; min-width: 0; max-width: 100%; padding: 7px 8px; border: 1px solid #d0d6e0; border-radius: 6px;
    background: #fff; font-size: 14px; color: #333;
  }
}

/* 更改项目分类（v1.3.2：detail.php 产品进度与项目详情之间，单行紧凑，仅总经理/研发主管可见） */
.class-change-card { padding: 10px 16px; }
.class-change-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.class-change-form .input { width: 150px; padding: 6px 10px; }
.class-change-form select.input { width: 160px; }
.class-change-form .cls-current { color: #555; font-size: 13px; white-space: nowrap; }
.class-change-form .cls-tip { color: #99a; font-size: 12px; }
@media (max-width: 768px) {
  .class-change-form .input,
  .class-change-form select.input { flex: 1 1 120px; width: auto; min-width: 0; }
  .class-change-form .cls-tip { flex: 1 1 100%; }
}

/* 更改项目负责人（v1.5.2：与分类更改同卡片，方案b——只读输入框点击弹出会员搜索框选择） */
.leader-change-form { margin-top: 8px; border-top: 1px dashed #e2e6ee; padding-top: 8px; }
.leader-pick-input { cursor: pointer; background: #f7f9fc; }
.leader-current { color: #2f6fed; font-weight: 700; }
/* 会员搜索弹窗结果列表 */
.leader-search-result { margin-top: 10px; max-height: 300px; overflow: auto; }
.leader-search-list { display: flex; flex-direction: column; gap: 6px; }
.leader-search-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 12px; border: 1px solid #e2e6ee; border-radius: 6px;
  color: #333; text-decoration: none; font-size: 14px; background: #fff;
}
.leader-search-item:hover { border-color: #2f6fed; background: #f0f5ff; }
.leader-search-item .ls-name { font-weight: 700; }
.leader-search-item .ls-info { color: #888; font-size: 12px; white-space: nowrap; }
.leader-search-empty { color: #d93025; font-size: 13px; padding: 12px 0; }

/* 项目配比（v1.5.2：上半部记录表格；下半部填写区——标题行 + 输入行，
   输入行宽度 基材15% / 离型膜15% / 胶水配比50% / 备注20%，行尾"＋"加行） */
.formula-table th, .formula-table td { white-space: normal; word-break: break-word; }
.formula-form { margin-top: 14px; border-top: 1px dashed #e2e6ee; padding-top: 12px; }
.formula-head {
  display: flex; gap: 8px; margin-bottom: 6px; color: #666; font-size: 13px; font-weight: 600;
}
.formula-head span:nth-child(1) { flex: 0 1 15%; min-width: 0; }
.formula-head span:nth-child(2) { flex: 0 1 15%; min-width: 0; }
.formula-head span:nth-child(3) { flex: 0 1 50%; min-width: 0; }
.formula-head span:nth-child(4) { flex: 0 1 20%; min-width: 0; }
.formula-head span:nth-child(5) { flex: 0 0 34px; }
.formula-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.formula-row .input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; }
.formula-row .input:nth-child(1) { flex-basis: 15%; }
.formula-row .input:nth-child(2) { flex-basis: 15%; }
.formula-row .input:nth-child(3) { flex-basis: 50%; }
.formula-row .input:nth-child(4) { flex-basis: 20%; }
.formula-add {
  flex: 0 0 34px; width: 34px; height: 34px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #2f6fed; border-radius: 6px; color: #2f6fed;
  font-size: 20px; line-height: 1; text-decoration: none; background: #f0f5ff;
}
.formula-add:hover { background: #2f6fed; color: #fff; }
@media (max-width: 768px) {
  .formula-head span:nth-child(1), .formula-row .input:nth-child(1) { flex-basis: 22%; }
  .formula-head span:nth-child(2), .formula-row .input:nth-child(2) { flex-basis: 22%; }
  .formula-head span:nth-child(3), .formula-row .input:nth-child(3) { flex-basis: 40%; }
  .formula-head span:nth-child(4), .formula-row .input:nth-child(4) { flex-basis: 24%; }
}

/* ---------- 进度条 ---------- */
.progress-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; padding: 4px 0 2px; }
.pstep {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; padding: 4px 12px; border-radius: 14px;
  background: #f0f2f5; color: #9aa0a6;
}
.pstep .dot { width: 8px; height: 8px; border-radius: 50%; background: #c3c8cf; display: inline-block; }
.pstep.done { background: #e7f6ea; color: #2e9e44; }
.pstep.done .dot { background: #2e9e44; }
/* 当前进度阶段：实心绿色（v1.2 修复之前当前格无样式、绿色条比实际进度少一档的问题） */
.pstep.current { background: #2e9e44; color: #fff; font-weight: 700; }
.pstep.current .dot { background: #fff; }
.pstep.ng { background: #fdecea; color: #d93025; }
.pstep.ng .dot { background: #d93025; }
.pstep.ok { background: #e7f6ea; color: #1c7a2f; font-weight: 700; }
.pstep.ok .dot { background: #1c7a2f; }
/* 结果进度：加粗显示，颜色由管理员在“进度选项管理”中指定（黑/红/黄/绿，v1.3）；
   左侧竖色线表示进度就此中断，其后工序不再渲染（v1.3 原位标红中断） */
.pstep.result { font-weight: 700; border-left: 3px solid currentColor; }
.pstep.result-black { background: #eef0f3; color: #333; }
.pstep.result-black .dot { background: #333; }
.pstep.result-red { background: #fdecea; color: #d93025; }
.pstep.result-red .dot { background: #d93025; }
.pstep.result-yellow { background: #fff4e0; color: #b26a00; }
.pstep.result-yellow .dot { background: #b26a00; }
.pstep.result-green { background: #e7f6ea; color: #1c7a2f; }
.pstep.result-green .dot { background: #1c7a2f; }
.pbar-remark { font-size: 13px; color: #666; margin-top: 8px; }
.pbar-current { font-size: 13px; margin-top: 8px; color: #333; }
.pbar-current b { color: #2e9e44; }

/* ---------- 详情 ---------- */
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table td { padding: 8px 12px; border-bottom: 1px solid #eef1f5; vertical-align: top; word-break: break-word; }
.detail-table tr:last-child td { border-bottom: none; }
.detail-table td.label { width: 118px; color: #666; font-weight: 600; background: #fafbfd; white-space: nowrap; }
.attach-list { margin: 0; padding: 0; list-style: none; }
.attach-list li { padding: 3px 0; }
.attach-list .a-size { color: #9aa0a6; font-size: 12px; margin-left: 6px; }

/* ---------- 进度详情 / 回帖 ---------- */
.post-list { margin-top: 6px; }
.post-item { border-left: 3px solid #2f6fed; background: #fafbfd; padding: 10px 14px; margin-bottom: 10px; border-radius: 4px; }
.post-item.terminate { border-left-color: #d93025; }
.post-meta { font-size: 12px; color: #888; margin-bottom: 4px; }
.post-meta .post-author { font-weight: 600; color: #333; margin-right: 8px; }
.post-stage { display: inline-block; background: #e7f6ea; color: #2e9e44; font-size: 12px; padding: 1px 8px; border-radius: 8px; margin-left: 6px; }
.post-content { margin-top: 4px; word-break: break-word; }
.post-content img { max-width: 100%; border-radius: 4px; }

/* ---------- 富文本编辑器 ---------- */
.editor-toolbar {
  border: 1px solid #d0d6e0; border-bottom: none; border-radius: 4px 4px 0 0;
  background: #f7f8fa; padding: 6px; display: flex; flex-wrap: wrap; gap: 3px; align-items: center;
}
.editor-toolbar button {
  min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent;
  background: transparent; border-radius: 3px; cursor: pointer; font-size: 13px; color: #333; font-family: inherit;
}
.editor-toolbar button:hover { background: #e8ebf1; }
.editor-toolbar select {
  height: 28px; border: 1px solid #d0d6e0; border-radius: 3px; font-size: 12px; background: #fff; font-family: inherit;
}
.editor-toolbar input[type=color] {
  width: 30px; height: 26px; border: 1px solid #d0d6e0; padding: 1px 2px; background: #fff; border-radius: 3px; cursor: pointer;
}
.editor-area {
  border: 1px solid #d0d6e0; border-radius: 0 0 4px 4px; min-height: 150px;
  padding: 10px; background: #fff; font-size: 14px; line-height: 1.7; overflow-y: auto;
}
.editor-area:focus { outline: none; border-color: #2f6fed; }
.editor-area img { max-width: 100%; }
.editor-area:empty::before { content: attr(data-placeholder); color: #b6bcc6; pointer-events: none; }
.toolbar-space { flex: 1; }
/* 全屏编辑器 */
.editor-wrap.fullscreen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: #f5f6f8; display: flex; flex-direction: column; padding: 10px 14px 14px;
}
.editor-wrap.fullscreen .editor-toolbar { border-radius: 6px 6px 0 0; }
.editor-wrap.fullscreen .editor-area { flex: 1; min-height: 0; border-radius: 0 0 6px 6px; }
/* 富文本备注显示区（详情页） */
.rich-note img { max-width: 100%; border-radius: 4px; }
.rich-note p { margin: 6px 0; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45);
  z-index: 999; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  background: #fff; border-radius: 8px; width: 94%; max-width: 440px;
  padding: 18px 20px; box-shadow: 0 12px 32px rgba(0,0,0,.2); max-height: 82vh; overflow: auto;
}
/* 附件在线预览弹窗（v1.3：全屏大尺寸，宽 1500px、高度满屏；关闭依赖弹窗底部的“取消/关闭”按钮） */
.modal-box.modal-lg { max-width: 1500px; width: 98%; max-height: 96vh; padding: 14px 20px 12px; }
.modal-box.modal-lg .modal-body { overflow: visible; }
.preview-frame {
  width: 100%; height: calc(96vh - 150px); min-height: 480px; border: 1px solid #e2e6ee; border-radius: 4px;
  background: #fff; display: block; margin-top: 8px;
}
.preview-img { max-width: 100%; max-height: 88vh; border-radius: 4px; }
.modal-body h3 { margin: 0 0 8px; font-size: 15px; }
.modal-msg { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-body .tip { color: #666; font-size: 13px; margin: 6px 0; }
.radio-line { display: block; padding: 7px 10px; margin: 6px 0; border: 1px solid #e2e6ee; border-radius: 4px; cursor: pointer; font-size: 14px; }
.radio-line:hover { border-color: #2f6fed; }
.radio-line .cls-desc { color: #888; font-size: 12px; margin-left: 8px; }
/* 申请页“项目应用”多选（v1.3） */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 8px; }
.ck-line { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 14px; color: #333; }
.ck-line input { width: 16px; height: 16px; cursor: pointer; }

/* ---------- 分页 ---------- */
.pagination { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.page {
  display: inline-block; min-width: 30px; padding: 4px 9px; text-align: center;
  background: #fff; border: 1px solid #d0d6e0; border-radius: 4px; font-size: 13px; color: #333;
}
a.page:hover { border-color: #2f6fed; color: #2f6fed; }
.page.current { background: #2f6fed; color: #fff; border-color: #2f6fed; }

/* ---------- 登录/密码页 ---------- */
.auth-box { max-width: 400px; margin: 30px auto; }
.auth-title { text-align: center; margin-bottom: 16px; font-size: 17px; font-weight: 700; }

/* ---------- 会员管理 ---------- */
.role-select { min-width: 130px; }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  /* v1.2：移动端按屏幕宽度显示，不再套用 92% 的窄宽度 */
  .nav-inner { max-width: 100%; flex-direction: column; align-items: stretch; padding: 8px 12px; gap: 6px; }
  .nav-links { justify-content: flex-start; gap: 2px 12px; }
  .container { max-width: 100%; padding: 10px 10px 24px; }
  .card { padding: 12px 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .detail-table td.label { width: 88px; }
  .btn { padding: 6px 12px; }
  .page-title { font-size: 15px; }
  .list th, .list td { padding: 8px 8px; font-size: 13px; }
  .modal-box { max-width: 94%; }
}