/* ================================================================
   谏鼓 · KKLP-QA-04 顾客反馈控制系统 —— 共用样式

   设计取向：克制、可读、能打印。
   为什么不追求视觉花哨：使用者是质量部、生产部的一线人员，
   他们在这个系统里做的是「填记录、看时限」，不是浏览产品页。
   信息密度和可读性 > 视觉冲击。

   另外：质量记录常需打印归档（体系审核要看纸质件），
   所以底部有 @media print 规则，保证打出来是干净的。
   ================================================================ */

:root {
  --c-primary: #1a5fb4;
  --c-primary-dark: #14477f;
  --c-bg: #f5f6f8;
  --c-card: #fff;
  --c-border: #e3e6ea;
  --c-text: #1f2328;
  --c-text-dim: #6a737d;
  --c-ok: #1a7f37;
  --c-warn: #bf8700;
  --c-danger: #cf222e;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.06);

  /* 触控最小尺寸。44px 不是随手写的数字，是 Apple HIG 与
     Material Design 共同给出的手指可靠命中下限。
     桌面端鼠标像素级精准，用不着这么大；只在窄屏生效。 */
  --tap: 44px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: var(--c-text);
  background: var(--c-bg);

  /* iOS 横屏时会自作主张放大字号，导致布局错乱。关掉。 */
  -webkit-text-size-adjust: 100%;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 56px;
  background: var(--c-primary); color: #fff;
  box-shadow: var(--shadow);
}
.topbar .brand { font-size: 16px; font-weight: 600; letter-spacing: .5px; }
.topbar .doc-no { font-size: 12px; opacity: .75; }
.topbar .spacer { flex: 1; }
.topbar a { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: var(--radius); }
.topbar a:hover, .topbar a.active { background: rgba(255,255,255,.15); }
.topbar .user { font-size: 13px; opacity: .9; }

/* 🚨 mock 模式警示条：不能让人在生产环境忘了切认证方式 */
.mock-banner {
  background: #fff4e5; color: #8a5300; border-bottom: 1px solid #ffd8a8;
  padding: 6px 20px; font-size: 12.5px;
}

.wrap { max-width: 1200px; margin: 20px auto; padding: 0 16px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card > h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.card > h2 .sub { font-weight: 400; color: var(--c-text-dim); font-size: 12.5px; margin-left: 8px; }

/* ---------- 统计卡 ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 14px 16px;
}
.stat .n { font-size: 26px; font-weight: 600; line-height: 1.2; }
.stat .t { font-size: 12.5px; color: var(--c-text-dim); margin-top: 2px; }
.stat.danger .n { color: var(--c-danger); }
.stat.warn   .n { color: var(--c-warn); }
.stat.ok     .n { color: var(--c-ok); }

/* ---------- 表格 ---------- */

/* 表格外层滚动容器。
   为什么必须有：台账 9 列在 375px 手机上宽度远超屏幕，
   没有这个容器时溢出的是 body —— 整个页面横向拖动，
   顶栏和导航一起跑偏，用户以为页面坏了。
   套一层只让表格自己滚，页面其余部分纹丝不动。

   -webkit-overflow-scrolling 让 iOS 里的滚动带惯性，
   否则手指一松就停，翻 9 列要划好几次。 */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: top; }
th { background: #fafbfc; font-weight: 600; color: var(--c-text-dim); font-size: 12.5px; white-space: nowrap; }
tbody tr:hover { background: #f8fafd; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11.5px; line-height: 18px; white-space: nowrap;
}
.badge.gray   { background: #eef0f2; color: #57606a; }
.badge.blue   { background: #ddf4ff; color: #0969da; }
.badge.green  { background: #dafbe1; color: var(--c-ok); }
.badge.yellow { background: #fff8c5; color: var(--c-warn); }
.badge.red    { background: #ffebe9; color: var(--c-danger); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--c-border);
  background: #fff; color: var(--c-text); border-radius: var(--radius);
  cursor: pointer; font-size: 13.5px; text-decoration: none; line-height: 20px;
}
.btn:hover { background: #f3f4f6; }
.btn.primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn.primary:hover { background: var(--c-primary-dark); }
.btn.danger { color: var(--c-danger); border-color: #ffc1bc; }
.btn.sm { padding: 3px 9px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 表单 ---------- */
.form-row { margin-bottom: 14px; }
.form-row > label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; }
.form-row > label .req { color: var(--c-danger); margin-left: 2px; }
.form-row > label .hint { font-weight: 400; color: var(--c-text-dim); font-size: 12px; margin-left: 6px; }
input[type=text], input[type=date], input[type=datetime-local], input[type=number],
select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--c-border);
  border-radius: var(--radius); font: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(26,95,180,.12);
}
textarea { resize: vertical; min-height: 72px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }

/* ---------- 提示 ---------- */
.alert { padding: 10px 12px; border-radius: var(--radius); margin-bottom: 14px; font-size: 13.5px; }
.alert.info    { background: #ddf4ff; color: #0a4a7a; }
.alert.warn    { background: #fff8c5; color: #7a5c00; }
.alert.error   { background: #ffebe9; color: #a40e26; white-space: pre-line; }
.alert.success { background: #dafbe1; color: #12662b; }

.empty { text-align: center; padding: 36px 12px; color: var(--c-text-dim); font-size: 13.5px; }
.muted { color: var(--c-text-dim); }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; }

/* ---------- 打印：体系审核要纸质件 ---------- */
@media print {
  .topbar, .mock-banner, .btn, .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #999; page-break-inside: avoid; }

  /* 打印时表格必须完整铺开，不能是个滚动窗口 ——
     否则打出来只有屏幕上可见的那几列，归档件缺数据。 */
  .tbl-wrap { overflow: visible !important; }
}

/* ================================================================
   响应式：手机与电脑同一套页面，两端都要完整可用

   ## 为什么按屏幕宽度而不按角色发不同界面

   老吴 2026-08-10 明确：「设备分工基本是这样，但保不齐某个角色
   换另外的设备」。

   若按角色下发布局（销售给手机版、质量部给桌面版），李质量哪天
   在家用手机批一张单，拿到的就是专为 1440px 设计的界面 —— 直接
   不能用。按宽度适配则与「他是谁」无关，谁在什么设备上打开就渲染
   适配那个屏幕的布局。

   因此：服务端不做任何 UA / 设备判断，不看角色，纯 CSS 断点。

   ## 断点取值

   768px  —— 平板竖屏与手机的分界。以下走单列 + 卡片。
   1024px —— 平板横屏。表格保留但收紧留白。

   ## 铁律

   每个角色的每个功能，两端都必须完整可用。不允许出现
   「这个操作只有电脑能做」。质量部 S2/S4 的长文本表单在手机上
   体验确实不如电脑，但「难受」和「做不到」是两回事 ——
   手机上必须能提交，配合已有的表单暂存（form_draft）实现
   「手机写一半存草稿，回电脑接着写」。
   ================================================================ */

@media (max-width: 1024px) {
  /* 平板横屏：内容区留白收一点，把宽度让给数据本身 */
  .wrap { padding: 0 12px; margin: 14px auto; }
  th, td { padding: 8px; }
}

@media (max-width: 768px) {

  /* ---------- 顶栏：可横向滚动，不换行不挤压 ---------- */
  /* 顶栏有品牌 + 文件号 + 3 个导航 + 用户名，375px 放不下。
     换行会让顶栏变两三行高，吃掉宝贵的首屏；
     压缩字号则谁都看不清。让它横向滚是唯一不牺牲信息的做法。 */
  .topbar {
    height: auto; min-height: 52px;
    padding: 0 12px; gap: 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .topbar::-webkit-scrollbar { display: none; }   /* 滚动条占高度，藏掉 */
  .topbar .brand { font-size: 15px; }

  /* 文件号在手机上不显示：KKLP-QA-04 · A/1 是给外审看的，
     日常操作不需要，而它占掉近 1/3 顶栏宽度。
     桌面端照旧显示，合规信息一点不少。 */
  .topbar .doc-no { display: none; }

  .topbar .spacer { display: none; }             /* 滚动布局下弹簧没意义 */
  .topbar a {
    padding: 8px 10px;
    min-height: 38px; display: inline-flex; align-items: center;
  }
  .topbar .user { font-size: 12.5px; }

  .mock-banner { padding: 6px 12px; font-size: 12px; }

  /* ---------- 容器与卡片 ---------- */
  .wrap { padding: 0 10px; margin: 12px auto; }
  .card { padding: 12px; margin-bottom: 12px; }

  /* ---------- 统计卡：两列 ---------- */
  /* 原 minmax(140px,1fr) 在 375px 下只放得下 2 个，但剩余空间
     会把它们拉得很宽很空。显式两列，数字大而好按。 */
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px; }
  .stat .n { font-size: 22px; }

  /* ---------- 表单：单列 + 防 iOS 自动放大 ---------- */
  .grid2, .grid3 { grid-template-columns: 1fr; }

  /* 🔑 font-size 必须 ≥16px。
     iOS Safari 在聚焦 font-size < 16px 的输入框时会自动放大整个
     页面，且失焦后不会恢复 —— 用户填到第三个字段时页面已经歪了，
     只能手动双指缩回去。这是 iOS 上最常见的表单体验事故。
     16px 是关掉这个行为的唯一办法（不能用 user-scalable=no，
     那会连带禁掉用户主动缩放，是无障碍倒退）。 */
  input[type=text], input[type=date], input[type=datetime-local],
  input[type=number], input[type=password], select, textarea {
    font-size: 16px;
    padding: 10px 11px;
    min-height: var(--tap);
  }
  textarea { min-height: 110px; }   /* 手机上写分析报告，给足可视行数 */

  .form-row { margin-bottom: 16px; }
  .form-row > label { font-size: 13.5px; margin-bottom: 6px; }

  /* ---------- 按钮：够手指按 ---------- */
  .btn {
    min-height: var(--tap);
    padding: 10px 16px;
    font-size: 14.5px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* .btn.sm 在手机上不再缩小 —— 台账每行的「查看」按钮用的是 sm，
     若真按 3px padding 渲染，手指基本点不中，会误触到相邻行。 */
  .btn.sm { min-height: 38px; padding: 8px 12px; font-size: 13.5px; }

  /* 勾选框放大：受理判据决定单子受不受理，点错后果重 */
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .cn-chk { padding: 6px 0; font-size: 14px; }
  .cn-chk input[type=checkbox] { width: 20px; height: 20px; margin-top: 1px; }

  /* ---------- 表格 → 卡片 ---------- */
  /* 9 列表格在手机上无论怎么压都不可读，所以窄屏改成一行一卡。

     实现方式：给 table 加 .tbl-card 类，由各页面在 <td> 上写
     data-label="列名"，此处用 ::before 把列名渲染成行内标签。
     纯 CSS 切换，Vue 逻辑与数据渲染一行不改，桌面端完全不受影响。

     为什么不做成「隐藏次要列」：投诉单号、客户、环节、时限四项
     没有一项能省 —— 少了单号认不出是哪张，少了时限不知道急不急。
     卡片式能把全部字段都带上，只是换个排法。 */
  table.tbl-card, table.tbl-card tbody, table.tbl-card tr, table.tbl-card td {
    display: block; width: 100%;
  }
  table.tbl-card thead { display: none; }        /* 表头由每格的 data-label 承担 */

  table.tbl-card tr {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  table.tbl-card tr:hover { background: var(--c-card); }  /* 卡片模式下 hover 变色反而像点错了 */

  table.tbl-card td {
    border: none;
    padding: 5px 0;
    display: flex; align-items: baseline; gap: 10px;
    font-size: 14px;
  }
  table.tbl-card td + td { border-top: 1px dashed #f0f2f4; }

  /* 列名标签：固定宽度左对齐，多行卡片之间视觉对齐 */
  table.tbl-card td::before {
    content: attr(data-label);
    flex: 0 0 82px;
    color: var(--c-text-dim);
    font-size: 12.5px;
    line-height: 1.5;
  }
  /* 没写 data-label 的格子不显示标签占位，避免留一条空白 */
  table.tbl-card td:not([data-label])::before { content: none; flex: none; }

  /* 标题格（一般是投诉单号）：整行加粗独占，当卡片抬头 */
  table.tbl-card td.cell-title {
    font-weight: 600; font-size: 15px;
    display: block; padding-bottom: 8px;
  }
  table.tbl-card td.cell-title::before { content: none; }

  /* 操作格：按钮横排铺开，够按 */
  table.tbl-card td.cell-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-top: 10px; margin-top: 4px;
    border-top: 1px solid var(--c-border);
  }
  table.tbl-card td.cell-actions::before { content: none; flex: none; }
  table.tbl-card td.cell-actions .btn { flex: 1 1 auto; }

  /* ---------- 其它 ---------- */
  .alert { font-size: 13.5px; padding: 10px; }
  .empty { padding: 28px 10px; }

  /* iPhone 底部小黑条会盖住页面最后一点内容 */
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* 超窄屏（iPhone SE 375px 及以下）再收一档 */
@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }   /* 两列会让 26px 的数字换行 */
  table.tbl-card td::before { flex: 0 0 72px; }
}

/* ================================================================
   S1 客户抱怨上报表单（complaint-new.html）专用
   class 前缀 cn- 是为了和并行开发的其他页面隔离，避免同名覆盖。
   ================================================================ */

/* 判据区做视觉圈定：4.2 判据决定单子受不受理，是整张表单里
   后果最重的一块，不能和普通字段长得一样让人扫过去。 */
.cn-crit {
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-primary);
  border-radius: var(--radius); background: #fbfcfe;
  padding: 12px 14px; margin-bottom: 14px;
}
.cn-crit-h { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.cn-crit-item + .cn-crit-item { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-border); }

/* 勾选项整行可点：现场用手机填单时，只能点中 13px 的小方块很折磨 */
.cn-chk { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 13.5px; line-height: 1.55; }
.cn-chk input[type=checkbox] { width: 16px; height: 16px; margin: 2px 0 0; flex: none; cursor: pointer; }
.cn-chk-danger { color: var(--c-danger); font-weight: 500; }

/* 判据b 的附属输入（发生次数）缩进，表示它依附于上面那条勾选 */
.cn-sub { margin: 8px 0 0 24px; }
.cn-sub > label { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 500; }

/* 非销售职责的判据：灰底只读，明确「这不该你填」 */
.cn-crit-qa { background: #f6f8fa; border-radius: var(--radius); padding: 8px 10px; font-size: 13px; color: var(--c-text-dim); }
.cn-crit-qa .badge { margin-right: 6px; }

/* 附件列表 */
.cn-files { list-style: none; margin: 8px 0 0; padding: 0; }
.cn-files li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #f1f3f5; }
.cn-files li:last-child { border-bottom: none; }

/* 未受理结果面板：用红边框，因为这是「你以为提交成功了但其实没受理」的场景，
   视觉上必须和成功区分开，否则用户扫一眼就走了。 */
.cn-reject { border-left: 3px solid var(--c-danger); }

/* 注：原此处有一条 @media (max-width:720px) 只做了 .grid2/.grid3 单列，
   现已并入上面统一的 768px 断点（连同触控尺寸、iOS 放大、表格卡片化
   一起处理）。断点值从 720 改为 768 是为了覆盖 iPad 竖屏（768px）。
   保留这段注释，免得后人以为响应式规则丢了又加回一处重复断点。 */