/* 制作派工样式
 * 依赖 style.css 里的 CSS 变量（--brand / --line / --txt 等）
 */

/* ---------- 我的活 ---------- */
.myjobs{margin-bottom:16px;border:1px solid var(--brand-line,#d9e4ff);background:var(--brand-soft,#f4f8ff);
  border-radius:12px;padding:14px 16px}
.myjobs-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.myjobs-head b{font-size:14px}
.myjobs-head .muted{font-size:12.5px;color:var(--txt-3,#8a94a6)}
.myjobs-list{display:flex;flex-direction:column;gap:8px}
.myjob{display:flex;align-items:center;gap:12px;background:var(--card,#fff);border-radius:9px;
  padding:10px 12px;border:1px solid var(--line,#e6e9ef);min-width:0}
.myjob.is-overdue{border-color:var(--danger-line,#f3c9c9);background:var(--danger-soft,#fff6f6)}
.myjob-main{flex:1;min-width:0}
.myjob-title{font-weight:700;font-size:13.5px;overflow-wrap:anywhere}
.myjob-meta{font-size:12.5px;color:var(--txt-3,#8a94a6);margin-top:3px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.myjob-act{display:flex;gap:6px;flex-shrink:0;align-items:center}

/* ---------- 工具条 ---------- */
.pj-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.pj-toolbar .input{flex:1;min-width:180px;max-width:320px}
.pj-counts{font-size:12.5px;color:var(--txt-3,#8a94a6)}

/* ---------- 卡片栅格 ---------- */
/* minmax(0,1fr) 才不会被长标题撑破视口；卡片本身也要 min-width:0 */
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:12px;min-width:0}
@media (max-width:640px){ .pj-grid{grid-template-columns:minmax(0,1fr)} }

.pj-card{background:var(--card,#fff);border:1px solid var(--line,#e6e9ef);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0;
  overflow-wrap:anywhere;transition:border-color .15s,box-shadow .15s}
.pj-card:hover{border-color:var(--brand-line,#c9d8ff);box-shadow:0 2px 10px rgba(60,90,160,.07)}
.pj-card-top{display:flex;gap:6px;flex-wrap:wrap}
.pj-title{margin:0;font-size:15px;line-height:1.35;font-weight:700}
.pj-sub{font-size:12.5px;color:var(--txt-3,#8a94a6)}

.pj-bar{height:6px;border-radius:4px;background:var(--line-2,#eef1f6);overflow:hidden;margin-top:2px}
.pj-bar i{display:block;height:100%;background:var(--brand,#3b6ef0);border-radius:4px;transition:width .3s}

.pj-stats{display:flex;gap:12px;font-size:12.5px;color:var(--txt-3,#8a94a6);flex-wrap:wrap}
.pj-stats b{color:var(--txt,#20262e)}
.pj-card-foot{margin-top:auto;padding-top:6px;display:flex;gap:6px}

/* ---------- 详情 ---------- */
.pj-detail{margin-top:18px;background:var(--card,#fff);border:1px solid var(--line,#e6e9ef);
  border-radius:14px;padding:18px 20px 22px;min-width:0}
.pj-detail-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding-bottom:12px;border-bottom:1px solid var(--line-2,#eef1f6);flex-wrap:wrap}
.pj-detail-head h2{margin:0 0 4px;font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.pj-detail-act{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.pj-note{margin-top:12px;padding:10px 12px;background:var(--bg-2,#f7f9fc);border-radius:8px;
  font-size:13px;color:var(--txt-2,#4a5361);overflow-wrap:anywhere}

.pj-overall{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));
  gap:10px;margin:14px 0}
.pj-overall-num{background:var(--bg-2,#f7f9fc);border-radius:10px;padding:12px 14px;text-align:center;min-width:0}
.pj-overall-num b{display:block;font-size:19px;line-height:1.2;color:var(--txt,#20262e)}
.pj-overall-num span{font-size:12px;color:var(--txt-3,#8a94a6)}

/* ---------- 环节覆盖 ---------- */
.pj-stages{display:flex;flex-direction:column;gap:8px;margin:14px 0;padding:12px 14px;
  background:var(--bg-2,#f7f9fc);border-radius:10px}
.stage-row{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;min-width:0}
.stage-name{font-size:13px;font-weight:600}
.stage-bar{height:7px;border-radius:4px;background:var(--line,#e6e9ef);overflow:hidden;min-width:0}
.stage-bar i{display:block;height:100%;background:var(--ok,#22a06b);border-radius:4px}
.stage-num{font-size:12px;color:var(--txt-3,#8a94a6);white-space:nowrap}
.stage-miss{grid-column:2 / -1;font-size:12px;color:var(--danger,#d64545)}
.stage-miss.ok{color:var(--ok,#22a06b)}
@media (max-width:560px){
  .stage-row{grid-template-columns:48px 1fr}
  .stage-num{grid-column:1 / -1;text-align:right}
}

/* ---------- 派工表单 ---------- */
.pj-assign-form{margin:16px 0;padding:14px 16px;border:1px dashed var(--brand-line,#c9d8ff);
  border-radius:12px;background:var(--brand-soft,#f4f8ff)}
.pj-form-title{font-size:13.5px;font-weight:700;margin-bottom:10px}
.pj-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}
.pj-form-grid label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;
  color:var(--txt-3,#8a94a6);min-width:0}
.pj-form-grid .input{width:100%;min-width:0}
.pj-form-foot{display:flex;gap:10px;margin-top:10px;align-items:center;flex-wrap:wrap}
.pj-form-foot .input{flex:1;min-width:160px}

/* ---------- 分工表格 ---------- */
.pj-rows{margin-top:16px}
.pj-rows-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.pj-rows-head .muted{font-size:12.5px;color:var(--txt-3,#8a94a6)}
/* 表格外层必须可横向滚动，否则窄屏会把整页撑宽 */
.pj-table-wrap{overflow-x:auto;border:1px solid var(--line,#e6e9ef);border-radius:10px}
.pj-table{width:100%;border-collapse:collapse;font-size:13px;min-width:600px}
.pj-table th{text-align:left;padding:9px 12px;background:var(--bg-2,#f7f9fc);
  font-weight:600;font-size:12.5px;color:var(--txt-3,#8a94a6);white-space:nowrap}
.pj-table td{padding:9px 12px;border-top:1px solid var(--line-2,#eef1f6);vertical-align:top}
.pj-table tr.is-overdue td{background:var(--danger-soft,#fff6f6)}
.cell-sub{font-size:12px;color:var(--txt-3,#8a94a6);margin-top:2px}
.cell-act{white-space:nowrap;text-align:right}
.cell-act .btn{margin-left:4px}

/* ---------- 设置行 ---------- */
.pj-settings{display:flex;gap:12px;align-items:flex-end;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line-2,#eef1f6);flex-wrap:wrap}
.pj-settings label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;
  color:var(--txt-3,#8a94a6)}
.pj-settings .input{width:130px}

/* 通用小标签 */
.tag.mine{background:var(--brand-soft,#eef4ff);color:var(--brand,#3b6ef0)}
.tag.danger{background:var(--danger-soft,#fff0f0);color:var(--danger,#d64545)}
.tag.warn{background:var(--warn-soft,#fff7e6);color:var(--warn,#b7791f)}
.tag.ok{background:var(--ok-soft,#eefaf3);color:var(--ok,#22a06b)}
.tag.brand{background:var(--brand-soft,#eef4ff);color:var(--brand,#3b6ef0)}
.danger-text{color:var(--danger,#d64545)}
.btn.ghost.sm.danger{color:var(--danger,#d64545)}