/* 有奖发票抽奖 · 单日配置计划表样式
 测算页(index.html)与核验对照页(duizhao.html)共用：表格本体、可填的输入框、
 自绘上下箭头、提示弹窗、预算体检那一行。改这里两页一起变，不会各走各的。
 两页各自的页面外壳（页头、卡片、登录、台账等）仍写在各自文件里。

 本文件由 index.html 的 <style> 原样抽出，样式未改。 */

/* ---------- 表格（比照原表：宋体、黑色细边框、无底色、全部居中） ---------- */
.sheet-title{
  margin:2px 0 12px;text-align:center;
  font-family:"SimHei","黑体","Microsoft YaHei",sans-serif;
  font-size:17px;font-weight:700;color:#000;letter-spacing:1px;
}
/* 这张表的自然宽度约 1420px，窄屏上本来会拖出一条左右滚动条。
   放不下就逐档收紧：先减内边距，再降字号（fitTable 挑档）。收字号比整体缩放清楚——
   缩放是把字连点阵一起压扁，10.4px 这种非整数字号会发虚；降字号仍按整像素渲染。
   收到最紧一档还是放不下（大概 800px 以下）才动用等比缩放兜底。 */
.tablewrap{
  overflow:auto;background:#fff;
  --fs:13px;--pv:8px;--ph:5px;--head:158px;--brk:120px;--bfs:11px;--sub:10px;
  /* --rp 是数字两侧留的空，右边那份要装得下箭头（宽 2×--sp，再离边 2px），
     不然收紧之后箭头会压在数字上 */
  --sp:4px;--rp:10px;
}
.tablewrap.c1{--fs:12.5px;--pv:6px;--ph:3px;--head:134px;--brk:104px;--bfs:10.5px;--sub:9.5px}
.tablewrap.c2{--fs:12px;--pv:5px;--ph:2px;--head:118px;--brk:100px;--bfs:10px;--sub:9px;--sp:3px;--rp:8px}
.tablewrap.c3{--fs:11px;--pv:4px;--ph:1px;--head:96px;--brk:74px;--bfs:9.5px;--sub:8.5px;--sp:3px;--rp:8px}
.tablewrap.c4{--fs:10px;--pv:3px;--ph:1px;--head:84px;--brk:64px;--bfs:9px;--sub:8px;--sp:3px;--rp:8px}
.tablewrap table{font-size:var(--fs)}
.tablewrap th,.tablewrap td{padding:var(--pv) var(--ph)}
.tablewrap td.rowhead,.tablewrap th.rowhead{width:var(--head)}
.tablewrap td.brkhead{font-size:var(--bfs);min-width:var(--brk)}
.tablewrap td[data-share] .sub{font-size:var(--sub)}
.tablewrap input.qty{font-size:var(--fs);padding:0 var(--rp)}
.tablewrap .ratebox{padding:0 var(--rp)}
.tablewrap .ratebox input.qty{padding:0}
.tablewrap td.numcell .spin b{border-left-width:var(--sp);border-right-width:var(--sp)}
/* 缩放只改画出来的大小，布局里那点宽度还在，用 clip 断掉滚动容器，
   免得点右边那几个输入框时浏览器把「看不见的溢出」滚出来 */
.tablewrap.fit{overflow:hidden;overflow:clip}
.tablewrap.fit > table{transform-origin:top left}
table{
  border-collapse:collapse;width:100%;background:#fff;
  font-family:"SimSun","宋体",serif;font-size:13px;color:#000;
}
th,td{
  border:1px solid #000;padding:8px 5px;height:20px;
  text-align:center;vertical-align:middle;
  white-space:nowrap;font-weight:400;line-height:1.4;
}
thead th{background:#fff;color:#000;font-weight:400}
td.rowhead,th.rowhead{
  background:#fff;width:158px;white-space:normal;
}
td.rowhead .sub{display:block;white-space:nowrap}
/* 分区间三行的区间名：这一列本来只放「1000元以下」四个字，字号收一档才不至于碎成三行 */
td.brkhead{white-space:normal;font-size:11px;padding:6px 2px;line-height:1.4;min-width:120px}
td.red,input.qty.red{color:#ff0000}
/* 三段之和超过当日名额时，倒推出来的负数要显眼 */
td.shortnum{color:#b91c1c;font-weight:700;background:#fee2e2}
input.qty{
  width:100%;height:22px;text-align:center;
  border:1px solid transparent;border-radius:3px;padding:0 10px;
  background:transparent;color:inherit;
  font-family:inherit;font-size:13px;
  /* 原生上下箭头各家不一样：Chrome 悬停才冒出来、Firefox 常显，宽度也不同，
     还会把格子里的数字往左挤。一律关掉，换成下面自己画的一对小三角 */
  appearance:textfield;-moz-appearance:textfield;
}
input.qty:hover{border-color:#bbb}
input.qty:focus{border-color:var(--brand);background:#fff;outline:none;box-shadow:0 0 0 2px rgba(29,78,216,.16)}
input.qty.edited{background:#fff7d6}
/* 名额低于当前比例应有的个数 */
input.qty.short{color:#b91c1c;font-weight:700;background:#fee2e2}
input.qty::-webkit-outer-spin-button,
input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* 比例格是输入框，百分号单独跟在后面；数字和百分号作为一组居中，
   才能和上下几行的静态数字对齐。输入框的宽度由 fitRate 按当前数字量出来，
   不能让它撑满整格——撑满时数字只会靠右贴着百分号，「9.00%」这种短的就偏出去了 */
.ratebox{display:flex;align-items:center;justify-content:center;padding:0 10px}
.ratebox input.qty{flex:0 0 auto;text-align:right;padding:0}
.ratebox i{font-style:normal;flex:0 0 auto;padding-left:1px}
/* 自绘的上下箭头：常驻在格子右侧，落在输入框两侧预留的空白里，
   不占正文位置，所以数字仍然居中，各浏览器长得也一样 */
td.numcell{position:relative}
td.numcell .spin{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:3px;
  -webkit-user-select:none;user-select:none;
}
td.numcell .spin b{
  width:0;height:0;cursor:pointer;
  border-left:4px solid transparent;border-right:4px solid transparent;
}
td.numcell .spin b.up{border-bottom:5px solid #94a3b8}
td.numcell .spin b.dn{border-top:5px solid #94a3b8}
td.numcell .spin b.up:hover{border-bottom-color:var(--brand)}
td.numcell .spin b.dn:hover{border-top-color:var(--brand)}

/* ---------- 「已经同步给…」的绿勾 ----------
   两页各挂一个：测算页跟在「同步给江总」后面，对照页跟在「同步给值班」前面。
   挂不挂由各自页面的脚本判断；这里只管长相。左右间距交给外层容器的 gap。 */
.sent{
  display:inline-flex;align-items:center;gap:6px;
  color:#15803d;font-size:13.5px;font-weight:700;
}
.sent svg{
  width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.sent[hidden]{display:none}

/* ---------- 预览弹窗 ---------- */
/* 明细表横里三十八列、竖里一天一行，屏幕有多大就摆多大，不设上限，
   四边只留一条窄缝。提示弹窗也挂着 .modal，那个卡片才 400 宽，页边照旧（见下面的 .tip） */
.modal{
  position:fixed;inset:0;z-index:1500;
  display:none;align-items:center;justify-content:center;padding:8px;
  background:rgba(16,28,52,.55);
}
.modal.on{display:flex;animation:fadeIn .18s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  background:#fff;border-radius:14px;width:100%;max-height:100%;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(10,30,80,.34);
}
.modal-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--line);
}
.modal-head b{font-size:15px;color:var(--brand-dark)}
.modal-head small{font-size:12px;color:var(--muted)}
/* 左右内边距收窄，横里那三十八列能多占一点 */
.modal-body{overflow:auto;padding:12px 10px 14px}

/* ---------- 每日明细那张表 ---------- */
table.ledger{font-size:12px}
/* 三十八列摆在一屏里，左右各收 1px，整张表窄下来 76px，少一档左右滑 */
table.ledger th,table.ledger td{padding:5px 3px}
table.ledger tr.fresh td{background:#fff7d6;font-weight:700}
table.ledger tr.sum td{background:#f2f2f2}
table.ledger td.date{white-space:nowrap}
/* 上传的表里直接填过的中奖率，不是按名额算出来的 */
table.ledger td.ovr{color:#1d4ed8;font-weight:700}
/* 名额是专项安排来的那几档（见 ledger.js 里的 L_NOTE），缘由写在表底下；
   鼠标停上去也能看到，所以给个问号光标提示这格有话说 */
table.ledger td.note{color:#1d4ed8;font-weight:700;cursor:help}
/* 表底下那几行说明：靠左通排，不跟数据行抢眼 */
table.ledger tfoot td{
  border:none;text-align:left;padding:10px 2px 0;
  font-size:12.5px;color:#1d4ed8;font-weight:600;white-space:normal;
}
/* 「参考中奖名额」黄底、「参考中奖奖金」蓝底，跟商务局那份表一样，
   三大块一眼分得开；底色只上在表头，数据行照旧留白 */
table.ledger th.hq{background:#ffff00;color:#16233a}
table.ledger th.hm{background:#0070c0;color:#fff}

/* ---------- 提示弹窗 ---------- */
.tip{z-index:1600;background:rgba(16,28,52,.42);padding:24px}
.tip-box{
  background:#fff;border-radius:14px;width:min(400px,92vw);
  padding:26px 26px 20px;text-align:center;
  box-shadow:0 22px 60px rgba(10,30,80,.32);
  animation:tipIn .2s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes tipIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
/* 线性描边图标：白底蓝线，出现时描边动画依次画出圆环和标记 */
.tip-icon{width:56px;height:56px;margin:0 auto 16px}
.tip-icon svg{display:block;width:100%;height:100%}
.tip-icon .ring,.tip-icon .mark{
  fill:none;stroke:var(--brand);stroke-linecap:round;stroke-linejoin:round;
}
.tip-icon .ring{stroke-width:2}
.tip-icon .mark{stroke-width:2.6}
.tip-icon .bad{display:none}
.tip.bad .tip-icon .ok{display:none}
.tip.bad .tip-icon .bad{display:block}
.tip.bad .tip-icon .ring,.tip.bad .tip-icon .mark{stroke:#dc2626}
.tip.on .tip-icon .ring{
  stroke-dasharray:145;stroke-dashoffset:145;animation:draw .5s ease-out forwards;
}
.tip.on .tip-icon .mark{
  stroke-dasharray:34;stroke-dashoffset:34;animation:draw .3s .26s ease-out forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- 预算体检 ---------- */
.budget{
  margin-top:12px;padding:9px 12px;border-radius:9px;font-size:13px;line-height:1.6;
  background:#f0f5ff;border:1px solid #c7d9ff;color:var(--brand-dark);
}
.budget:empty{display:none}
.budget.bad{background:#fef2f2;border-color:#fecaca;color:#b91c1c;font-weight:700}
/* 红字后面那个「按照修改方案配置」（见 plan.js 的 runFixPlan）。
   跟着红字走，所以用红边白底，别用主色调的蓝——蓝按钮在一片红字里像是另一件事。
   inline-flex + vertical-align 是为了红字折行时它跟着最后一行走，不另起一行。 */
.fixbtn{
  display:inline-flex;align-items:center;vertical-align:middle;
  margin-left:2px;padding:0 11px;height:25px;
  font-size:12px;font-weight:700;line-height:1;white-space:nowrap;
  color:#b91c1c;background:#fff;border:1px solid #f0a9a9;border-radius:7px;cursor:pointer;
}
.fixbtn:hover{background:#fff5f5;border-color:#dc2626}
.fixbtn:active{background:#fee2e2}

/* 浮动区间那句批注跟在百分比后面，小一号、灰一点，不抢数字 */
td[data-share] .sub{display:block;font-size:10px;color:#94a3b8;white-space:nowrap;line-height:1.3}