/* =============================================================================
   ui.css —— 视觉与自适应升级层
   -----------------------------------------------------------------------------
   为什么单独一层，而不改 app.css：
     app.css 是本系统最早的一层皮肤，里面全是"现场可用性"的硬规则
     （44px 触控区、16px 输入框防 iOS 放大、.ph 用 padding-top 撑正方形……），
     那些是踩过坑的，不该动。这里只做三件事：
       1) 换一套更整齐的设计令牌（圆角／阴影／间距／层级）；
       2) 把原来写死的 640px 单列，改成随屏幕走的响应式栅格；
       3) 补齐桌面端的悬停、聚焦、粘性筛选条这些原来没有的状态。
   引入位置必须在 app.css 和页面内联 <style> 之后，否则压不住页面里的写死值。

   断点口径（跟人有关，不是跟设备有关）：
     < 560px   手机        普查员现场用，一列到底，控件铺满宽度
     560–899   平板／折叠屏 督导在现场用，两列控件，卡片单列
     >= 900px  桌面        后台／质检用，页面加宽、卡片分栏、表格不再横向滚
   ============================================================================= */

:root{
  /* —— 主色：沿用原蓝，只把深浅两级拉开，避免整页一片同色 —— */
  --pri:#2b6cb0;
  --pri-d:#1f4e86;
  --pri-l:#ebf2fa;
  --pri-grad:linear-gradient(135deg,#2f74ba 0%,#1f4e86 100%);

  /* —— 中性色 —— */
  --ink:#1a202c;
  --ink-2:#2d3748;
  --mut:#6b7280;
  --bd:#e3e8ef;
  --bd-d:#cbd5e0;
  --bg-app:#eef2f7;
  --bg-soft:#f7f9fc;

  /* —— 圆角／阴影：一档一用，不再各处随意写 px —— */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --sh-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --sh-2:0 2px 6px rgba(16,24,40,.07),0 14px 28px -16px rgba(16,24,40,.22);
  --sh-in:inset 0 1px 2px rgba(16,24,40,.06);

  /* —— 版式尺寸：三个宽度，由 .wrap / .wrap.wide 取用 —— */
  --w-phone:720px;    /* 现场填报：再宽字就拉散了，眼睛反而累 */
  --w-mid:1000px;     /* 首页、质检 */
  --w-wide:1280px;    /* 管理员后台：表格多，要地方 */
}

/* ============================ 基础重置加强 ============================ */
/* app.css 的 width:100% 只覆盖了 text/number/textarea/select，
   漏了 password —— 登录页的密码框一直是半截宽，这里补上 */
input[type=password]{width:100%;padding:9px 11px;border:1px solid var(--bd);
  border-radius:10px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg-app);
  background-image:radial-gradient(1200px 600px at 50% -10%,#f7fafd 0%,rgba(247,250,253,0) 60%);
  color:var(--ink);
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* 键盘可达性：鼠标点不显示描边，Tab 走才显示 */
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px}
::selection{background:#cfe3f7}

/* ============================ 页面容器 ============================ */
.wrap{
  max-width:var(--w-phone);
  margin:0 auto;
  padding:0 0 28px;
  background:transparent;
  min-height:100vh;
}
.wrap.wide{max-width:var(--w-wide)}
.wrap.mid{max-width:var(--w-mid)}

/* 桌面/平板：卡片外边距从"贴边 10px"改成 16~18px，视觉上才有呼吸感 */
@media (min-width:560px){
  .wrap{padding:0 14px 32px;max-width:calc(var(--w-phone) + 28px)}
  .wrap.wide{max-width:calc(var(--w-wide) + 28px)}
  .wrap.mid{max-width:calc(var(--w-mid) + 28px)}
}

/* ============================ 顶栏 ============================ */
.nav{
  background:var(--pri-grad);
  padding-top:calc(10px + env(safe-area-inset-top));
  padding-bottom:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 18px -10px rgba(16,24,40,.6);
}
.nav h1{
  font-size:15.5px;
  letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 返回／首页这类次要动作，做成半透明药丸，比纯文字更好点 */
.nav a,.nav .back{
  border-radius:999px;
  transition:background .16s ease;
  white-space:nowrap;
}
.nav a:hover,.nav .back:hover{background:rgba(255,255,255,.14)}
.nav a:active,.nav .back:active{background:rgba(255,255,255,.24)}

/* ============================ 卡片 ============================ */
.card{
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  border:1px solid rgba(226,232,240,.9);
  margin:12px 10px;
  transition:box-shadow .18s ease,transform .18s ease;
}
.card>h2{
  font-size:14px;
  padding:12px 14px;
  background:linear-gradient(#fff,#fbfcfe);
  border-bottom:1px solid var(--bd);
  border-radius:var(--r-md) var(--r-md) 0 0;
  gap:8px;
}
.card>h2 .r{font-size:12px;background:var(--bg-soft);padding:2px 8px;border-radius:999px}
.card .body{padding:14px}
/* 桌面端才给悬停抬升：手机上 hover 会"粘住"，反而显得卡 */
@media (hover:hover) and (min-width:900px){
  .card:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
}

/* 卡片并排：首页在宽屏下两列摆放，避免中间一大片空白 */
.grid2{display:grid;grid-template-columns:1fr}
.grid2>.nav,.grid2>.full{grid-column:1 / -1}
@media (min-width:900px){
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;padding-top:4px}
  .grid2>.card{margin:0}
}

/* ============================ 按钮 ============================ */
.btn{
  border-radius:10px;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .06s ease;
  box-shadow:0 1px 1px rgba(16,24,40,.04);
}
.btn:hover{border-color:var(--bd-d);background:var(--bg-soft)}
.btn.pri:hover{background:#2f74ba;border-color:#2f74ba;box-shadow:0 4px 12px -4px rgba(43,108,176,.65)}
.btn.gh:hover{background:var(--pri-l)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn:disabled:hover{transform:none;box-shadow:none;background:#fff;border-color:var(--bd)}
.btn.pri:disabled,.btn.pri:disabled:hover{background:var(--pri);border-color:var(--pri)}

/* ============================ 表单控件 ============================ */
input[type=text],input[type=number],input[type=password],textarea,select{
  border-radius:10px;
  border-color:var(--bd);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  background:#fff;
}
input[type=text]:hover,input[type=number]:hover,input[type=password]:hover,textarea:hover,select:hover{
  border-color:var(--bd-d);
}
input[type=text]:focus,input[type=number]:focus,input[type=password]:focus,textarea:focus,select:focus{
  border-color:var(--pri);
  box-shadow:0 0 0 3px rgba(43,108,176,.14);
}
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:28px;
}
.opt{border-radius:10px;transition:background .12s ease,border-color .12s ease,color .12s ease}
.opt:hover{border-color:var(--bd-d);background:var(--bg-soft)}
.opt.on,.opt.on:hover{background:var(--pri);border-color:var(--pri);color:#fff}

/* ============================ 筛选条 ============================ */
.filters{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:11px 14px;
  background:#fbfcfe;
  border-bottom:1px solid var(--bd);
  border-radius:var(--r-md) var(--r-md) 0 0;
}
/* 页面内联样式把宽度限死在 170px，屏幕上明明有地方却挤成一排小方块 —— 放开 */
.filters select,.filters input[type=text]{
  max-width:none;
  flex:1 1 150px;
  min-width:0;
}
/* 桌面端：筛选条与列表头同色衔接，视觉上跟卡片融为一体。
   （想做吸顶，但 .card 是 overflow:hidden 的圆角裁切容器，sticky 不生效，
    这里不写假规则 —— 以后若放开 overflow 再补。） */
@media (min-width:900px){
  .filters{box-shadow:inset 0 -1px 0 var(--bd)}
}
/* 手机端：每个控件独占一行，手指不用瞄准 */
@media (max-width:559px){
  .filters select,.filters input[type=text],.filters .btn{flex:1 1 100%;max-width:none}
}

/* ============================ 统计块 ============================ */
.stats{
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:8px;
  padding:14px;
}
.st{
  border-radius:10px;
  background:linear-gradient(#f9fbfd,#f4f7fb);
  border:1px solid rgba(226,232,240,.9);
  padding:10px 6px;
}
.st .v{font-size:19px;letter-spacing:-.3px}
.st .l{font-size:11.5px}
/* 手机上 4 块统计自动换行会剩 1 个孤块，固定 2×2 更齐整 */
@media (max-width:559px){
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ============================ 列表项 ============================ */
.li{
  border-bottom:1px solid #eff3f8;
  transition:background .14s ease,padding-left .14s ease;
}
.li:hover{background:var(--bg-soft)}
@media (hover:hover) and (min-width:900px){
  .li:hover{padding-left:16px;background:#f8fbff}
}
.li .t1{font-size:14.5px}
.pbar{border-radius:999px;height:4px}
.pbar i{background-image:linear-gradient(90deg,#4a9bea,#2f855a);background-size:auto}

/* ============================ 表格 ============================ */
/* 统一"能横滚就给个暗示"的容器：右侧渐隐 + 底部细阴影，
   让人一眼看出右边还有列，而不是以为表就到这儿了 */
.scrollx{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
/* 只在"确实会横滚"的窄屏给渐隐提示：
   宽屏上表是铺满的，还画两条阴影边会像没擦干净的脏边。 */
@media (max-width:899px){
  .scrollx{
    background:
      linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)),
      linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%,rgba(16,24,40,.13),transparent),
      radial-gradient(farthest-side at 100% 50%,rgba(16,24,40,.13),transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:36px 100%,36px 100%,12px 100%,12px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}
table.wtab,table.tab{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:13px;
}
table.wtab th,table.tab th{
  position:sticky;top:0;z-index:2;
  background:#f7f9fc;
  color:var(--mut);
  font-weight:600;
  border-bottom:1px solid var(--bd);
  white-space:nowrap;
}
table.wtab td,table.tab td{border-bottom:1px solid #f0f3f8}
table.wtab tbody tr:hover td,table.tab tbody tr:hover td{background:#f9fbfe}
table.wtab tbody tr:last-child td,table.tab tbody tr:last-child td{border-bottom:none}
/* 数字列等宽对齐：一眼能上下比大小 */
table.wtab td,table.wtab th{font-variant-numeric:tabular-nums}

/* ============================ 提示块 ============================ */
.tip2{
  border-radius:10px;
  line-height:1.7;
  border:1px solid transparent;
}
.warn{border-color:#fbe3c0}
.err{border-color:#fbd5d5}
.ok{border-color:#c9eed6}
.badge{font-weight:600;letter-spacing:.2px}
.empty{padding:40px 16px}

/* ============================ 图片查看器 ============================ */
.pv-nav{backdrop-filter:blur(4px)}
#pvMask{animation:fadeIn .16s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ============================ 登录页 ============================ */
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:
    radial-gradient(900px 480px at 15% 0%,#e8f1fb 0%,rgba(232,241,251,0) 62%),
    radial-gradient(760px 420px at 92% 100%,#e9f6f0 0%,rgba(233,246,240,0) 60%),
    var(--bg-app);
}
.login-page .loginbox{
  width:100%;
  max-width:392px;
  margin:0;
  padding:0;
}
.login-page .lg{margin-bottom:20px}
.login-page .lg .mark{
  width:52px;height:52px;border-radius:14px;
  margin:0 auto 12px;
  background:var(--pri-grad);
  color:#fff;font-size:24px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -8px rgba(31,78,134,.7);
}
.login-page .lg b{font-size:20px;letter-spacing:.5px;color:#1a365d}
.login-page .lg span{display:block;margin-top:4px;font-size:12.5px;color:var(--mut);letter-spacing:.3px}
.login-page .card{
  margin:0;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  border:none;
}
.login-page .card .body{padding:20px 18px}
.login-page .card .body>.fld:last-of-type{margin-bottom:16px}
.login-page .tip2{margin-top:14px;background:#f7f9fc;font-size:12.5px}
.login-page .btn.big{border-radius:10px;letter-spacing:2px}

/* ============================ 质检页 ============================ */
/* 桌面端照片从 3 列变 4 列：质检核表示数，图越大越不容易看错 */
@media (min-width:900px){
  .pgrid{grid-template-columns:repeat(4,1fr);gap:8px}
  .qrow .a2{font-size:12.5px}
}
/* 手机端：勾选框与列表项挤在一行时，标题会被压成两行，给个换行兜底 */
@media (max-width:559px){
  .qrow{flex-wrap:wrap;row-gap:6px}
  .qrow .ad{flex:1 1 calc(100% - 40px)}
  .bbar input[type=text]{flex:1 1 100%;width:auto}
}

/* ============================ 管理页 ============================ */
/* 人员台账在窄屏是横滚的，宽屏应该一屏放下 —— 这里只是把最小宽度取消 */
@media (min-width:900px){
  table.wtab{min-width:0}
  .ubar{padding:10px 14px}
}
@media (max-width:559px){
  .ubar{gap:6px}
  .ubar .ph{min-width:0}
  textarea.batch{min-height:96px}
  /* 批量建号的三列在手机上并排会挤成 60px 宽，改成上下堆叠 */
  #eScope,#eBuilding{max-width:none}
}

/* ============================ 动效与无障碍 ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .card:hover,.li:hover{transform:none}
}
/* 打印：去掉底色和阴影，卷宗／台账直接打出来也干净 */
@media print{
  body{background:#fff}
  .nav,.filters,.pgbar,.bbar,#toast{display:none !important}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .wrap{max-width:none;padding:0}
}