/* ═══════════════════════════════════════════════════════════════════════
   雷士经营助手 · UI Kit  v1.0  (2026-11-06)
   ─────────────────────────────────────────────────────────────────────
   唯一视觉源。四个页面（index / admin / patrol / login）都引这一份，
   页面内不再各自定义按钮样式。

   层级规则（改之前先看这条）：
     L1 主操作  .u-btn--primary    一屏 / 一个面板 至多 1 个
     L2 次操作  .u-btn--secondary  描边
     L3 弱操作  .u-btn--ghost      无边框，用于表格行内、工具区
     L4 危险    .u-btn--danger     红描边；停用/删除/拒绝
     导航       .u-nav-item        + .is-active
     分段控件   .u-seg             周报/日报、甘特图/列表
     图标       .u-icon-btn

   兼容层：旧的 .btn / .btn.gr / .btn.sm / .btn.danger / .btn-primary
   全部映射到新体系，老 HTML 不改也不会走样。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Token ────────────────────────────────────────────────────────── */
:root{
  /* 品牌 */
  --nvc-brand:#008755;
  --nvc-brand-hover:#006b43;
  --nvc-brand-press:#005736;
  --nvc-brand-tint:#f2faf6;
  --nvc-brand-light:#e8f5ef;
  --nvc-brand-line:#d6ece1;

  /* 文字 */
  --nvc-text:#1a2028;
  --nvc-text-2:#6b7a74;
  --nvc-text-3:#9aa8a3;

  /* 面 / 线 */
  --nvc-bg:#ffffff;
  --nvc-bg-2:#f6f9f7;
  --nvc-surface:#ffffff;
  --nvc-surface-2:#fbfdfc;
  --nvc-border:#e5ece8;
  --nvc-border-strong:#d3ded8;

  /* 状态 */
  --nvc-danger:#c0392b;
  --nvc-danger-hover:#a5301f;
  --nvc-danger-tint:#fdf2f2;
  --nvc-danger-line:#f0d5d5;
  --nvc-warn:#b7791f;
  --nvc-warn-tint:#fdf6e8;
  --nvc-info:#2b6cb0;
  --nvc-info-tint:#ebf4fc;
  --nvc-neutral-tint:#f2f5f4;
  --nvc-purple:#6b46c1;
  --nvc-purple-tint:#f3effc;

  /* 圆角 */
  --nvc-r-xs:5px;
  --nvc-r-sm:6px;
  --nvc-r:8px;
  --nvc-r-lg:10px;
  --nvc-r-pill:999px;

  /* 字号 */
  --nvc-fs-xs:11.5px;
  --nvc-fs-sm:12.5px;
  --nvc-fs:13.5px;
  --nvc-fs-md:14.5px;
  --nvc-fs-lg:16px;

  /* 控件高度（三档，全站只有这三种） */
  --nvc-h-sm:26px;
  --nvc-h:32px;
  --nvc-h-lg:38px;

  /* 阴影 / 焦点 */
  --nvc-shadow-1:0 1px 2px rgba(22,33,28,.05);
  --nvc-shadow-2:0 2px 8px rgba(0,135,85,.10);
  --nvc-ring:0 0 0 3px rgba(0,135,85,.16);
  --nvc-ease:.15s cubic-bezier(.2,.6,.3,1);
}

/* ── 2. 按钮基座 ─────────────────────────────────────────────────────── */
.u-btn,
.btn{                                   /* .btn = 兼容旧写法 */
  --_h:var(--nvc-h);
  --_px:14px;
  --_fs:var(--nvc-fs);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:var(--_h);
  padding:0 var(--_px);
  border:1px solid transparent;
  border-radius:var(--nvc-r);
  background:var(--nvc-brand);
  color:#fff;
  font-family:inherit;
  font-size:var(--_fs);
  font-weight:600;
  line-height:1;
  letter-spacing:.1px;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  transition:background var(--nvc-ease),border-color var(--nvc-ease),
             color var(--nvc-ease),box-shadow var(--nvc-ease),transform .08s;
  -webkit-tap-highlight-color:transparent;
}

/* 指针按下统一给一点点下沉，让"点到了"有反馈 */
.u-btn:active:not(:disabled):not([disabled]),
.btn:active:not(:disabled):not([disabled]){ transform:translateY(.5px); }

.u-btn:hover,
.btn:hover{ background:var(--nvc-brand-hover); color:#fff; }

.u-btn:focus-visible,
.btn:focus-visible{
  outline:none;
  box-shadow:var(--nvc-ring);
}

.u-btn:disabled,
.u-btn[disabled],
.btn:disabled,
.btn[disabled]{
  opacity:.4;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ── 3. 层级修饰符 ───────────────────────────────────────────────────── */

/* L1 主操作：实心品牌绿，一屏至多一个 */
.u-btn--primary,
.btn-primary{
  background:var(--nvc-brand);
  border-color:var(--nvc-brand);
  color:#fff;
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,135,85,.18);
}
.u-btn--primary:hover,
.btn-primary:hover{
  background:var(--nvc-brand-hover);
  border-color:var(--nvc-brand-hover);
}

/* L2 次操作：描边 */
.u-btn--secondary,
.btn.gr{
  background:var(--nvc-surface);
  border-color:var(--nvc-border-strong);
  color:var(--nvc-text-2);
  font-weight:500;
  box-shadow:none;
}
.u-btn--secondary:hover,
.btn.gr:hover{
  background:var(--nvc-brand-tint);
  border-color:var(--nvc-brand);
  color:var(--nvc-brand);
}

/* L3 弱操作：无边框，表格行内 / 工具区用 */
.u-btn--ghost{
  background:transparent;
  border-color:transparent;
  color:var(--nvc-text-2);
  font-weight:500;
  box-shadow:none;
}
.u-btn--ghost:hover{
  background:var(--nvc-brand-tint);
  border-color:transparent;
  color:var(--nvc-brand);
}

/* L4 危险：红描边 */
.u-btn--danger,
.btn.danger{
  background:var(--nvc-surface);
  border-color:var(--nvc-danger-line);
  color:var(--nvc-danger);
  font-weight:500;
  box-shadow:none;
}
.u-btn--danger:hover,
.btn.danger:hover{
  background:var(--nvc-danger-tint);
  border-color:var(--nvc-danger);
  color:var(--nvc-danger);
}

/* 危险 + 实心，仅用于"确认删除"这类真正的终局动作 */
.u-btn--danger-solid{
  background:var(--nvc-danger);
  border-color:var(--nvc-danger);
  color:#fff;
}
.u-btn--danger-solid:hover{
  background:var(--nvc-danger-hover);
  border-color:var(--nvc-danger-hover);
}

/* 文字链式动作，如「查看报告 →」 */
.u-btn--link{
  background:transparent;
  border-color:transparent;
  color:var(--nvc-brand);
  padding:0 2px;
  font-weight:500;
  box-shadow:none;
}
.u-btn--link:hover{
  background:transparent;
  color:var(--nvc-brand-hover);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ── 4. 尺寸 ─────────────────────────────────────────────────────────── */
.u-btn--sm,
.btn.sm{ --_h:var(--nvc-h-sm); --_px:10px; --_fs:var(--nvc-fs-sm); border-radius:var(--nvc-r-sm); }

.u-btn--lg{ --_h:var(--nvc-h-lg); --_px:18px; --_fs:var(--nvc-fs-md); }

/* 图标 + 文字时左右内距略收紧，视觉重量才平衡 */
.u-btn--icon-leading{ padding-left:11px; }

/* 纯图标按钮 */
.u-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:none;
  border-radius:var(--nvc-r);
  background:transparent;
  color:var(--nvc-text-3);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:background var(--nvc-ease),color var(--nvc-ease);
  flex-shrink:0;
}
.u-icon-btn:hover{ background:var(--nvc-brand-tint); color:var(--nvc-text-2); }
.u-icon-btn:focus-visible{ outline:none; box-shadow:var(--nvc-ring); }
.u-icon-btn--sm{ width:var(--nvc-h-sm); height:var(--nvc-h-sm); font-size:13px; }
.u-icon-btn--danger:hover{ background:var(--nvc-danger-tint); color:var(--nvc-danger); }

/* ── 5. 导航项 ───────────────────────────────────────────────────────── */
.u-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  height:40px;
  padding:0 12px;
  border:none;
  border-radius:var(--nvc-r);
  background:transparent;
  color:var(--nvc-text-2);
  font-family:inherit;
  font-size:var(--nvc-fs-md);
  font-weight:500;
  line-height:1.3;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--nvc-ease),color var(--nvc-ease);
  box-sizing:border-box;
  white-space:nowrap;
}
.u-nav-item:hover{ background:var(--nvc-brand-tint); color:var(--nvc-text); }
.u-nav-item:focus-visible{ outline:none; box-shadow:var(--nvc-ring); }
.u-nav-item.is-active{
  background:var(--nvc-brand-light);
  color:var(--nvc-brand);
  font-weight:600;
}
.u-nav-item .u-nav-ic{
  width:16px;
  flex-shrink:0;
  text-align:center;
  font-size:13px;
  opacity:.8;
}
.u-nav-item.is-active .u-nav-ic{ opacity:1; }

/* 二级导航：只在左侧多缩进一档 */
.u-nav-item--sub{ padding-left:30px; font-size:var(--nvc-fs); height:36px; }

/* ── 6. 分段控件 ─────────────────────────────────────────────────────── */
.u-seg{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  background:var(--nvc-brand-tint);
  border:1px solid var(--nvc-border);
  border-radius:var(--nvc-r);
}
.u-seg__btn{
  height:var(--nvc-h-sm);
  padding:0 14px;
  border:none;
  border-radius:var(--nvc-r-sm);
  background:transparent;
  color:var(--nvc-text-2);
  font-family:inherit;
  font-size:var(--nvc-fs-sm);
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--nvc-ease),color var(--nvc-ease),box-shadow var(--nvc-ease);
}
.u-seg__btn:hover{ color:var(--nvc-brand); }
.u-seg__btn:focus-visible{ outline:none; box-shadow:var(--nvc-ring); }
.u-seg__btn.is-active{
  background:var(--nvc-brand);
  color:#fff;
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,135,85,.22);
}

/* ── 7. 徽标 / 标签 ──────────────────────────────────────────────────── */
.u-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:17px;
  height:17px;
  padding:0 5px;
  margin-left:auto;
  border-radius:var(--nvc-r-pill);
  background:var(--nvc-danger);
  color:#fff;
  font-size:10.5px;
  font-weight:600;
  line-height:1;
}

/* ── 8. 分组标题 ─────────────────────────────────────────────────────── */
.u-nav-group{
  padding:14px 12px 5px;
  font-size:var(--nvc-fs-xs);
  font-weight:500;
  color:var(--nvc-text-3);
  letter-spacing:.4px;
}

/* ── 9. 输入控件对齐（按钮与选择器同一高度体系）─────────────────────── */
.u-input,
.u-select{
  height:var(--nvc-h);
  padding:0 11px;
  border:1px solid var(--nvc-border-strong);
  border-radius:var(--nvc-r);
  background:var(--nvc-surface);
  color:var(--nvc-text);
  font-family:inherit;
  font-size:var(--nvc-fs);
  line-height:1;
  box-sizing:border-box;
  transition:border-color var(--nvc-ease),box-shadow var(--nvc-ease);
}
.u-input:focus,
.u-select:focus{
  outline:none;
  border-color:var(--nvc-brand);
  box-shadow:var(--nvc-ring);
}
.u-select{
  padding-right:28px;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236b7a74' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  cursor:pointer;
}

/* ── 10. 工具条：把一排操作按钮收成统一节奏 ─────────────────────────── */
.u-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.u-toolbar__spacer{ flex:1; }
.u-toolbar__meta{
  font-size:var(--nvc-fs-sm);
  color:var(--nvc-text-3);
  white-space:nowrap;
}

/* ── 11. 弹窗底部：取消在左、确认在右 ───────────────────────────────── */
.u-modal-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

/* ── 12. 行内操作组：表格里多个动作排整齐，间距统一 ─────────────────── */
.u-row-actions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
}

/* ── 13. 窄屏兜底 ───────────────────────────────────────────────────── */
@media (max-width:640px){
  .u-btn,.btn{ --_px:12px; }
  .u-seg__btn{ padding:0 10px; }
}

/* ── 14. 状态标签：全站唯一语义映射 ──────────────────────────────────────
   背景：重构前 `.tag-pending / .tag-progress / .tag-done` 在 index.html 里
   被渲染了 10 处却**一次都没定义**，于是「需处理 / 需关注 / 正常」三档
   在页面上全是同一种绿 —— 巡检报告最关键的「这条要不要处理」信号直接丢掉。
   这里把语义钉死：红=该动手，黄=盯着，绿=没问题。

   用法：<span class="u-tag u-tag--risk">需处理</span>
   兼容：旧 class `tag tag-pending` 等也在这里补齐，避免页面各自定义。
   ───────────────────────────────────────────────────────────────────── */
.u-tag{
  display:inline-flex;align-items:center;gap:4px;
  height:20px;padding:0 8px;
  border-radius:var(--nvc-r-pill);
  font-size:var(--nvc-fs-xs);font-weight:500;line-height:1;
  white-space:nowrap;
  background:var(--nvc-brand-light);color:var(--nvc-brand);
}

/* 严重度（巡检报告卡片） */
.u-tag--risk{ background:var(--nvc-danger-tint); color:var(--nvc-danger); font-weight:600; }
.u-tag--warn{ background:var(--nvc-warn-tint);   color:var(--nvc-warn); }
.u-tag--normal{ background:var(--nvc-brand-light); color:var(--nvc-brand); }

/* 任务 / 问题状态 */
.u-tag--pending{  background:var(--nvc-danger-tint); color:var(--nvc-danger); }
.u-tag--progress{ background:var(--nvc-warn-tint);   color:var(--nvc-warn); }
.u-tag--done{     background:var(--nvc-brand-light); color:var(--nvc-brand); }
.u-tag--idle{     background:var(--nvc-neutral-tint); color:var(--nvc-text-2); }

/* 优先级 */
.u-tag--p0{ background:var(--nvc-danger-tint); color:var(--nvc-danger); font-weight:600; }
.u-tag--p1{ background:var(--nvc-warn-tint);   color:var(--nvc-warn); }
.u-tag--p2{ background:var(--nvc-neutral-tint); color:var(--nvc-text-2); }

/* 其他语义色（保留旧 tag 简写体系） */
.u-tag--info{    background:var(--nvc-info-tint);   color:var(--nvc-info); }
.u-tag--purple{  background:var(--nvc-purple-tint); color:var(--nvc-purple); }

/* ── 兼容层：旧 class 名直接映射到同一套语义 ───────────────────────────── */
.tag-pending{  background:var(--nvc-danger-tint); color:var(--nvc-danger); }
.tag-progress{ background:var(--nvc-warn-tint);   color:var(--nvc-warn); }
.tag-done{     background:var(--nvc-brand-light); color:var(--nvc-brand); }
.tag-p0{       background:var(--nvc-danger-tint); color:var(--nvc-danger); font-weight:600; }
.tag-p1{       background:var(--nvc-warn-tint);   color:var(--nvc-warn); }
.tag-p2{       background:var(--nvc-neutral-tint); color:var(--nvc-text-2); }

/* ── 15. 问题台账卡片 ──────────────────────────────────────────────────
   背景：`.issue-card / .issue-hd / .issue-title / .issue-meta / .issue-body/
   .issue-actions` 在 index.html 里被渲染成整页卡片，但**一个都没有定义**，
   结果台账页是「无边框、无内距、无分隔」的一坨文字。
   ───────────────────────────────────────────────────────────────────── */
.issue-card{
  background:var(--nvc-surface);
  border:1px solid var(--nvc-border);
  border-left:3px solid var(--nvc-border-strong);
  border-radius:var(--nvc-r-lg);
  padding:15px 18px 13px;
  margin-bottom:12px;
  transition:border-color var(--nvc-ease),box-shadow var(--nvc-ease);
}
.issue-card:hover{ box-shadow:var(--nvc-shadow-1); }
.issue-card.overdue{ border-left-color:var(--nvc-danger); }

.issue-hd{
  display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
  margin-bottom:8px;
}
.issue-title{
  flex:1;min-width:200px;
  font-size:var(--nvc-fs-md);font-weight:600;line-height:1.5;
  color:var(--nvc-text);
}
.issue-meta{
  display:flex;gap:18px;flex-wrap:wrap;
  font-size:var(--nvc-fs-sm);color:var(--nvc-text-3);
  margin-bottom:8px;
}
.issue-body{
  font-size:var(--nvc-fs-sm);line-height:1.75;color:var(--nvc-text-2);
  padding:9px 12px;
  background:var(--nvc-brand-tint);
  border-radius:var(--nvc-r);
  margin-bottom:10px;
}
.issue-actions{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding-top:10px;
  border-top:1px solid var(--nvc-border);
}