@import url('./design-tokens.css');

/* style.css —— 三清单工作台（零框架、零外部依赖；CSP default-src 'self'）
 *
 * 设计口径（施工单 v1.3 §1）：这是**内部后台** ⇒ 中性 UI 配色，红色只做强调。
 * 红色只出现在：①主 CTA（保存）②受阻/逾期 徽标与文字 ③顶栏当前页 ④行内「填报」文字按钮
 *              ⑤「待我填报 N」计数徽标 ⑥焦点态与表单错误。
 * 其余一律中性：清单切换用 tab（当前页红下划线，非红字堆叠）、筛选器中性、
 *              导出/投屏/取消 = 灰字文字按钮。
 * 文件**不改名、不拆分**（43 上已验收「匿名 /assets/style.css → 200」）；token 定义全在 design-tokens.css，
 * 本文件禁止出现硬编码 HEX（唯一豁免 = design-tokens.css，见 §7-2）。
 */

/* ============================== 基础 ============================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--unicom-bg-2);
  color: var(--unicom-ink);
  font-family: var(--unicom-font-zh);
  font-size: var(--fs-body);
  line-height: var(--unicom-leading-relaxed);
  -webkit-font-smoothing: antialiased;
}
/* 超链接也用中性色（本单 §1 的可数判据里没有「链接」这一类红；
 * 红只留给：保存主 CTA / 受阻·逾期 / 当前页 / 行内「填报」/「待我填报 N」/ 焦点与错误） */
a { color: var(--unicom-ink-2); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--unicom-ink); }
h1, h2, h3 {
  margin: 0 0 var(--unicom-space-2);
  line-height: var(--unicom-leading-snug);
  font-weight: var(--unicom-weight-bold);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
code {
  background: var(--unicom-bg-2);
  border: 1px solid var(--unicom-line);
  border-radius: var(--unicom-radius-sm);
  padding: 0 var(--unicom-space-1);
  font-size: var(--fs-caption);
}
/* 图标与文字并排时的基线对齐 */
.ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.ico-wrap { display: inline-flex; align-items: center; }
.h-ico { display: inline-flex; align-items: center; margin-right: var(--unicom-space-2); color: var(--unicom-ink); }

/* ============================== 顶栏 ============================== */
#nav {
  position: sticky; top: 0; z-index: var(--unicom-z-sticky);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--unicom-space-6);
  min-height: 64px; padding: 0 var(--unicom-space-6);
  background: var(--unicom-bg);
  border-bottom: 1px solid var(--unicom-line);
}
#nav .brand { font-size: var(--unicom-text-h3); font-weight: var(--unicom-weight-bold); letter-spacing: 1px; }
#nav .navlinks { display: flex; flex-wrap: wrap; gap: var(--unicom-space-1); }
/* 可点区 ≥44px（本体 44px 高；顶栏 64px 由 flex 居中） */
#nav .navlink {
  position: relative; display: inline-flex; align-items: center; gap: var(--unicom-space-2);
  height: 44px; padding: 0 var(--unicom-space-3);
  color: var(--unicom-ink-2); font-size: var(--fs-body);
}
#nav .navlink:hover { color: var(--unicom-ink); text-decoration: none; }
#nav .navlink.active { color: var(--unicom-red); font-weight: var(--unicom-weight-semibold); }
#nav .navlink.active::after {
  content: ""; position: absolute; left: var(--unicom-space-2); right: var(--unicom-space-2);
  bottom: 0; height: 2px; background: var(--unicom-red);
}
#nav .who {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--unicom-space-1);
  color: var(--unicom-ink-2); font-size: var(--fs-caption);
}
.tag {
  display: inline-block; border-radius: var(--unicom-radius-full);
  padding: 0 var(--unicom-space-2); background: var(--unicom-bg-2);
  color: var(--unicom-ink-2); font-size: var(--fs-caption); line-height: var(--unicom-leading-snug);
}
.tag-mine {
  display: inline-block; margin-right: var(--unicom-space-2);
  border-radius: var(--unicom-radius-sm); padding: 0 var(--unicom-space-1);
  background: var(--unicom-bg-2); color: var(--unicom-ink-2);
  font-size: var(--fs-caption); white-space: nowrap;
}

/* ============================== 版心 ============================== */
/* 内容最大宽 1200px + 左右安全边距 24px（1248 = 1200 + 2×24，border-box） */
main { max-width: 1248px; margin: 0 auto; padding: var(--unicom-space-6) var(--unicom-space-6) var(--unicom-space-12); }
section {
  background: var(--unicom-bg);
  border: 1px solid var(--unicom-line);
  border-radius: var(--unicom-radius-md);
  padding: var(--unicom-space-6);
  margin-bottom: var(--unicom-space-6);
}
.site-footer {
  max-width: 1248px; margin: 0 auto;
  padding: 0 var(--unicom-space-6) var(--unicom-space-8);
  color: var(--unicom-ink-2); font-size: var(--fs-caption);
}

/* 说明文字一律 --unicom-ink-2（8.45:1）；--unicom-ink-3 白底仅 3.36，不得用于文字 */
.muted { color: var(--unicom-ink-2); font-size: var(--fs-caption); }
.text-red { color: var(--unicom-red); }
.num { font-family: var(--unicom-font-num); font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--unicom-space-2); }
.spread {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--unicom-space-3);
}
.hidden { display: none !important; }

/* ============================== 按钮 ============================== */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--unicom-space-1);
  height: 36px; padding: 0 var(--unicom-space-4);
  border: 1px solid var(--unicom-line); border-radius: var(--unicom-radius-sm);
  background: var(--unicom-bg); color: var(--unicom-ink);
  font-family: inherit; font-size: var(--unicom-text-body-sm); font-weight: var(--unicom-weight-medium);
  line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--unicom-transition-fast), border-color var(--unicom-transition-fast);
}
button:hover, .btn:hover { background: var(--unicom-bg-2); text-decoration: none; }
button.primary, .btn.primary { background: var(--unicom-red); border-color: var(--unicom-red); color: var(--unicom-bg); }
button.primary:hover, .btn.primary:hover { background: var(--unicom-red-dark); border-color: var(--unicom-red-dark); }
/* 行内文字按钮 = 红字无底无描边（台账「填报」用这个） */
button.text, .btn-text {
  background: transparent; border-color: transparent; color: var(--unicom-red);
  padding: 0 var(--unicom-space-2);
}
button.text:hover, .btn-text:hover { background: var(--unicom-red-soft); }
/* 灰字文字按钮 = 导出 / 投屏 / 取消 */
button.quiet, .btn-quiet {
  background: transparent; border-color: transparent; color: var(--unicom-ink-2);
  padding: 0 var(--unicom-space-2);
}
button.quiet:hover, .btn-quiet:hover { background: var(--unicom-bg-2); color: var(--unicom-ink); }
button:disabled, .btn:disabled {
  background: var(--unicom-bg-2); border-color: var(--unicom-line);
  color: var(--unicom-ink-4); cursor: not-allowed;
}

/* ============================== 表单 ============================== */
input, select, textarea {
  height: 36px; padding: 0 var(--unicom-space-3);
  border: 1px solid var(--unicom-line); border-radius: var(--unicom-radius-sm);
  background: var(--unicom-bg); color: var(--unicom-ink);
  font-family: inherit; font-size: var(--unicom-text-body-sm); max-width: 100%;
}
/* focus = 1.5px 红描边（1px 边框 + inset 0.5px 补足 1.5px；不用发光阴影）；
 * 全局 *:focus-visible 的 2px 红 outline 来自 design-tokens.css，保留不覆盖。 */
input:focus, select:focus, textarea:focus {
  border-color: var(--unicom-red);
  box-shadow: inset 0 0 0 0.5px var(--unicom-red);
}
input[type="checkbox"] { height: auto; width: auto; }
textarea { min-height: 72px; width: 100%; padding: var(--unicom-space-2) var(--unicom-space-3); }
label { font-size: var(--fs-caption); color: var(--unicom-ink-2); }
.field { display: flex; flex-direction: column; gap: var(--unicom-space-1); }
.form-error { color: var(--unicom-red); font-size: var(--fs-caption); margin: var(--unicom-space-2) 0 0; min-height: var(--unicom-space-4); }
/* 错误态：红描边 + 下方红字 */
.is-error { border-color: var(--unicom-red); }
.alert-box {
  border: 1px solid var(--unicom-red-100); background: var(--unicom-red-soft);
  border-radius: var(--unicom-radius-md);
  padding: var(--unicom-space-4) var(--unicom-space-6); margin-bottom: var(--unicom-space-6);
}
.alert-box strong { font-weight: var(--unicom-weight-semibold); }

/* ============================== 状态徽标（6 对配色） ============================== */
.badge {
  display: inline-flex; align-items: center;
  border: 1px solid transparent; border-radius: var(--unicom-radius-full);
  padding: 0 var(--unicom-space-2);
  font-size: var(--fs-caption); font-weight: var(--unicom-weight-medium);
  line-height: var(--unicom-leading-snug); white-space: nowrap;
}
.c-green  { color: var(--badge-green-fg);  background: var(--badge-green-bg); }
.c-yellow { color: var(--badge-yellow-fg); background: var(--badge-yellow-bg); }
.c-red    { color: var(--badge-red-fg);    background: var(--badge-red-bg); }
.c-orange { color: var(--badge-orange-fg); background: var(--badge-orange-bg); }
.c-gray   { color: var(--badge-gray-fg);   background: var(--badge-gray-bg); }
.c-white  { color: var(--badge-white-fg);  background: var(--badge-white-bg); border-color: var(--unicom-line); }
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: var(--unicom-space-1); vertical-align: middle;
}
.d-green  { background: var(--unicom-success); }
.d-yellow { background: var(--unicom-yellow); }
.d-red    { background: var(--badge-red-fg); }
.d-orange { background: var(--unicom-warning); }
.d-gray   { background: var(--badge-gray-fg); }
.d-white  { background: var(--unicom-bg); border: 1px solid var(--unicom-line); }

/* ============================== KPI ============================== */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--unicom-space-3); }
.kpi {
  background: var(--unicom-bg); border: 1px solid var(--unicom-line);
  border-radius: var(--unicom-radius-md); padding: var(--unicom-space-3) var(--unicom-space-4);
}
.kpi .n { font-family: var(--unicom-font-num); font-size: 28px; font-weight: var(--unicom-weight-bold); line-height: var(--unicom-leading-tight); }
.kpi .k { margin-top: var(--unicom-space-1); color: var(--unicom-ink-2); font-size: var(--fs-caption); }
.kpi.warn .n { color: var(--unicom-red); }

/* ============================== 卡片 ============================== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--unicom-space-4); }
.card {
  background: var(--unicom-bg); border: 1px solid var(--unicom-line);
  border-radius: var(--unicom-radius-md); padding: var(--unicom-space-4);
}
.card h3 { font-size: var(--unicom-text-h3); margin-bottom: var(--unicom-space-1); }
.card .meta { margin-bottom: var(--unicom-space-2); color: var(--unicom-ink-2); font-size: var(--fs-caption); }
.card .form { display: grid; gap: var(--unicom-space-3); }
.card .details > summary, details.more > summary {
  cursor: pointer; color: var(--unicom-ink-2); font-size: var(--fs-caption);
}

/* ============================== 表格 ============================== */
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; background: var(--unicom-bg); font-size: var(--unicom-text-body-sm); }
.tbl th, .tbl td {
  padding: var(--unicom-space-2) var(--unicom-space-3);
  border-bottom: 1px solid var(--unicom-line);
  text-align: left; vertical-align: top;
}
.tbl th {
  background: var(--unicom-bg-2); color: var(--unicom-ink-2);
  font-size: var(--fs-caption); font-weight: var(--unicom-weight-medium); white-space: nowrap;
}
.tbl th[data-k] { cursor: pointer; }
.tbl tbody tr:hover > td { background: var(--unicom-bg-2); }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--unicom-font-num); font-variant-numeric: tabular-nums; }
.tbl td.act { white-space: nowrap; }
/* 「我名下」：最左 4px 中国红竖条（§5.3） */
.tbl tr.is-mine > td:first-child { box-shadow: inset 4px 0 0 var(--unicom-red); }

/* 留痕时间线：左竖线 + 圆点 */
.timeline {
  margin: var(--unicom-space-2) 0 0 var(--unicom-space-2);
  padding-left: var(--unicom-space-4);
  border-left: 2px solid var(--unicom-line);
  font-size: var(--fs-caption);
}
.timeline div { position: relative; margin-bottom: var(--unicom-space-2); color: var(--unicom-ink-2); }
.timeline div::before {
  content: ""; position: absolute; left: calc(-1 * var(--unicom-space-4) - 5px); top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--unicom-line);
}
.hist-row > td { background: var(--unicom-bg-2); }

/* ============================== 台账：tab / 筛选 / 就地填报 ============================== */
.tabs {
  display: flex; gap: var(--unicom-space-6); flex-wrap: wrap;
  border-bottom: 1px solid var(--unicom-line); margin-bottom: var(--unicom-space-4);
}
.tab {
  position: relative; display: inline-flex; align-items: center; height: 44px;
  color: var(--unicom-ink-2); font-size: var(--fs-body);
}
.tab:hover { color: var(--unicom-ink); text-decoration: none; }
.tab.active { color: var(--unicom-ink); font-weight: var(--unicom-weight-semibold); }
.tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--unicom-red);
}
.filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--unicom-space-3); }
.filter-item { display: flex; flex-direction: column; gap: var(--unicom-space-1); min-width: 132px; }
.check-item {
  display: inline-flex; align-items: center; gap: var(--unicom-space-1);
  height: 36px; color: var(--unicom-ink-2); font-size: var(--unicom-text-body-sm); white-space: nowrap;
}
/* 「待我填报 N」计数徽标（红） */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 var(--unicom-space-2);
  border-radius: var(--unicom-radius-full);
  background: var(--unicom-red-soft); color: var(--unicom-red);
  font-family: var(--unicom-font-num); font-size: var(--fs-caption); font-weight: var(--unicom-weight-bold);
}
.count-wrap { display: inline-flex; align-items: center; gap: var(--unicom-space-1); height: 36px; color: var(--unicom-ink-2); font-size: var(--unicom-text-body-sm); }

/* 编辑行（就地填报） */
.edit-row > td { background: var(--unicom-bg-2); padding: var(--unicom-space-4); }
.edit-form { display: grid; gap: var(--unicom-space-3); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--unicom-space-3); align-items: start; }
.edit-meta { color: var(--unicom-ink-2); font-size: var(--fs-caption); }
.edit-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--unicom-space-2); }

/* ============================== 领导总览：置顶条 / 看板 ============================== */
.feed-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--unicom-space-2);
  padding: var(--unicom-space-2) 0;
  border-bottom: 1px solid var(--unicom-line);
}
.feed-row:last-child { border-bottom: 0; }
.group-title {
  margin: var(--unicom-space-3) 0 var(--unicom-space-1);
  color: var(--unicom-ink-2); font-size: var(--fs-caption); font-weight: var(--unicom-weight-medium);
}
.board-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--unicom-space-4); }
.pre-box {
  margin: 0; padding: var(--unicom-space-3);
  background: var(--unicom-bg-2); border: 1px solid var(--unicom-line);
  border-radius: var(--unicom-radius-sm); overflow: auto; white-space: pre-wrap;
  font-size: var(--unicom-text-body-sm);
}
.section-note { margin: var(--unicom-space-2) 0 0; }

/* ============================== 管理页 ============================== */
.in-xs { width: 88px; }
.in-sm { width: 120px; }
.in-md { width: 160px; }
.in-lg { width: 200px; }
.in-xl { width: 240px; }
/* 「待指派」行高亮（§4 admin 页要点：补责任人后该部门同事即可自行填报） */
.tbl tr.row-attn > td { background: var(--badge-orange-bg); }

/* ============================== toast / 空态 ============================== */
.toast {
  position: fixed; left: 50%; bottom: var(--unicom-space-6); transform: translateX(-50%);
  padding: var(--unicom-space-3) var(--unicom-space-6);
  background: var(--unicom-ink); color: var(--unicom-bg);
  border-radius: var(--unicom-radius-sm); font-size: var(--unicom-text-body-sm);
  z-index: var(--unicom-z-toast);
}
.empty { padding: var(--unicom-space-3) 0; color: var(--unicom-ink-2); font-size: var(--unicom-text-body-sm); }

/* ============================== 登录 / 口令页 ============================== */
.center-wrap {
  max-width: 420px;
  /* 上下留白收窄：600px 高的视口下，8vh 会把页脚版权行挤到折线以下（实测） */
  margin: 4vh auto 3vh;
  padding: 0 var(--unicom-space-4);
}
/* 登录/口令页的页脚在 .center-wrap 内：取消整页级 max-width，紧跟卡片 */
.center-wrap .site-footer { max-width: none; margin-top: var(--unicom-space-4); padding: 0; }
.namelist {
  max-height: 46vh; overflow: auto;   /* 保留 46vh：优先让 8 个人名一屏看全（名单是功能，页脚是装饰） */
  border: 1px solid var(--unicom-line); border-radius: var(--unicom-radius-md);
  background: var(--unicom-bg);
}
.namelist button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  height: 44px; padding: 0 var(--unicom-space-4);
  border: 0; border-bottom: 1px solid var(--unicom-line); border-radius: 0;
  background: transparent; text-align: left; font-size: var(--unicom-text-body);
}
.namelist button:last-child { border-bottom: 0; }
/* 选中态用中国红（设计规范：红用于 CTA / 链接 / **选中态**）——
   登录页全灰会失去联通品牌感，且"可点"也不够明显；这是规范内的合法用红，
   与"红只做状态强调"不冲突（同属强调类），面积很小。 */
.namelist button { border-left: 3px solid transparent; transition: background-color .12s; }
.namelist button:hover { background: var(--unicom-red-soft); border-left-color: var(--unicom-red); }
.namelist button:active { background: var(--unicom-red-100); }
.namelist button:focus-visible { outline: 2px solid var(--unicom-red); outline-offset: -2px; }
.namelist .dept { color: var(--unicom-ink-2); font-size: var(--fs-caption); }

/* ============================== 投屏 / 打印视图（?print=1） ============================== */
body.print { background: var(--unicom-bg); font-size: var(--unicom-text-body-lg); }
body.print #nav, body.print .no-print { display: none !important; }
body.print main { max-width: none; padding: var(--unicom-space-2); }
body.print section { break-inside: avoid; }
body.print .kpi .n { font-size: var(--unicom-text-display); }

@media print {
  #nav, .no-print { display: none !important; }
  body { background: var(--unicom-bg); }
  section { break-inside: avoid; }
}

/* ============================== 响应式（≤767px 移动栅格） ============================== */
@media (max-width: 767px) {
  main { padding: var(--unicom-space-4) var(--unicom-space-4) var(--unicom-space-8); }
  section { padding: var(--unicom-space-4); margin-bottom: var(--unicom-space-4); }
  #nav { min-height: 56px; padding: var(--unicom-space-1) var(--unicom-space-4); gap: var(--unicom-space-2); }
  #nav .navlinks { overflow-x: auto; }
  #nav .navlink, .tab { height: 44px; }
  #nav .who { margin-left: 0; }
  button, .btn, input, select, .check-item, .count-wrap { height: 44px; }
  .site-footer { padding: 0 var(--unicom-space-4) var(--unicom-space-8); }

  /* 表格转卡片（验收 §8-9：390 宽下 table 宽 ≤ 视口） */
  /* 先给所有表格一个块级安全形态（内部可横向滚动），再对 .rt 做完整卡片化 */
  .tbl { display: block; width: 100%; overflow-x: auto; }
  .tbl.rt { display: block; width: 100%; }
  .tbl.rt thead { display: none; }
  .tbl.rt tbody, .tbl.rt tr, .tbl.rt td { display: block; width: 100%; }
  .tbl.rt tbody tr {
    border: 1px solid var(--unicom-line); border-radius: var(--unicom-radius-md);
    background: var(--unicom-bg); padding: var(--unicom-space-2) var(--unicom-space-3);
    margin-bottom: var(--unicom-space-3);
  }
  .tbl.rt tbody tr > td { border-bottom: 0; padding: var(--unicom-space-1) 0; display: flex; gap: var(--unicom-space-2); }
  .tbl.rt tbody tr > td::before {
    content: attr(data-label); flex: 0 0 84px;
    color: var(--unicom-ink-2); font-size: var(--fs-caption);
  }
  .tbl.rt tr.is-mine { box-shadow: inset 4px 0 0 var(--unicom-red); }
  .tbl.rt tr.is-mine > td:first-child { box-shadow: none; }
  .tbl.rt td.act::before, .tbl.rt .edit-row td::before, .tbl.rt .hist-row td::before { content: none; }
  .tbl.rt tr.edit-row > td, .tbl.rt tr.hist-row > td { background: var(--unicom-bg-2); padding: var(--unicom-space-3); display: block; }
  .tbl.rt tr.edit-row { border-color: var(--unicom-line); }
  .form-grid { grid-template-columns: 1fr; }
}