/* ========================================
   steps.css — 中タスク（v3.0.0 の土台・2026-09-07）
   ----------------------------------------
   🔴 色は必ず変数（--bg2 など）で書く。直書きしない。
      納車カレンダーが「暗いテーマで真っ白」になったのは、色を直書きしていたため。
   ======================================== */

/* ---------- 作業管理票の中タスク ---------- */
.ws-steps-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;margin:0 0 10px;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
}
.ws-steps-label{font-size:13px;font-weight:800;color:var(--text)}
.ws-steps-count{
  font-size:12px;font-weight:800;color:var(--text);
  background:var(--bg4);border-radius:999px;padding:2px 10px;
}
.ws-steps-hint{font-size:11.5px;color:var(--text3)}

.ws-steps{display:flex;flex-direction:column;gap:10px}

.ws-step{
  border:1px solid var(--border);border-radius:var(--r2);
  background:var(--bg2);overflow:hidden;transition:.15s;
}
.ws-step.now{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.ws-step.done{opacity:.86}
.ws-step.locked{opacity:.62}

.ws-step-head{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;cursor:pointer;user-select:none;
}
.ws-step.locked .ws-step-head{cursor:default}
.ws-step-head:hover{background:var(--bg3)}
.ws-step.locked .ws-step-head:hover{background:transparent}

.ws-step-mark{
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  border:2px solid var(--border2);color:var(--text3);background:var(--bg3);
}
.ws-step-mark.done{background:var(--green);border-color:var(--green);color:#fff}
.ws-step-mark.now{background:var(--accent);border-color:var(--accent)}
.ws-step-mark.locked{background:var(--bg4);border-color:var(--border2)}

.ws-step-num{
  font-size:11px;font-weight:800;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
.ws-step-icon{font-size:15px;line-height:1}
.ws-step-name{flex:1;font-size:14.5px;font-weight:700;color:var(--text)}
.ws-step.done .ws-step-name{color:var(--text2)}
.ws-step-count{
  font-size:12px;font-weight:800;color:var(--text2);
  background:var(--bg3);border-radius:999px;padding:2px 9px;
  font-variant-numeric:tabular-nums;
}
.ws-step.done .ws-step-count{background:transparent;color:var(--green)}
.ws-step-toggle{color:var(--text3);display:flex;align-items:center}

.ws-step-body{}
.ws-step[data-open="0"] .ws-step-body:empty{display:none}

.ws-step-locked-note{
  padding:10px 14px 13px;font-size:12.5px;color:var(--text3);
  display:flex;align-items:center;gap:7px;
}
.ws-step-manual{
  padding:12px 14px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.ws-step-manual-note{flex:1;min-width:200px;font-size:12.5px;color:var(--text2)}

/* ---------- 車両詳細：大タスクの行（高さは1pxも増やさない） ---------- */
/* 30px の丸を「分円」にする。出発は12時、区切りのすき間は5度。
   🔴 中に文字は入れない（丸は30px＝穴が22pxしかなく、数字は読めない）。 */
.task-chk.task-chk-ring{
  border:0;background:var(--bg4);position:relative;cursor:pointer;
}
.task-chk.task-chk-ring > i{
  position:absolute;inset:4px;border-radius:50%;background:var(--bg3);display:block;
}
.task-chk.done{cursor:pointer}

/* 名前の行に出す「─ 見積」。中タスク名はオレンジ、終わったら緑 */
.task-item-name .ti-sep{color:var(--text3);font-weight:400;margin:0 5px}
.task-item-name .ti-mid{color:var(--orange);font-weight:800}
.task-item-name .ti-mid.done{color:var(--green)}

/* ---------- カンバンのカード：いまどこ ---------- */
.cc-step{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;
  margin:4px 0 0;padding:3px 8px;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  font-size:11px;line-height:1.5;
}
.cc-step-task{color:var(--text3);font-weight:700;white-space:nowrap}
.cc-step-sep{color:var(--text3);opacity:.6}
.cc-step-name{
  flex:1;min-width:0;color:var(--orange);font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cc-step-count{
  color:var(--text2);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.car-card.compact .cc-step{padding:2px 7px;font-size:10.5px}

/* 看板のカードから中タスクを押す */
.cc-step-btn{cursor:pointer;transition:.12s}
.cc-step-btn:hover{background:var(--bg4);border-color:var(--border2)}
.cc-step-btn:active{transform:scale(.99)}
.cc-step-chk{
  flex:0 0 auto;color:var(--text3);font-weight:800;font-size:12px;line-height:1;
}
.cc-step-chk.manual{color:var(--accent);font-size:13px}
.cc-step-btn:hover .cc-step-chk{color:var(--accent)}

/* 作業管理票：いまの中タスクだけを出す */
.ws-steps-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.ws-flow-chip{
  font-size:11.5px;font-weight:700;color:var(--text3);
  background:var(--bg3);border:1px solid var(--border);border-radius:999px;padding:2px 10px;white-space:nowrap;
}
.ws-flow-chip.done{color:var(--green);border-color:var(--green);background:transparent}
.ws-flow-chip.now{color:var(--text);border-color:var(--orange);background:var(--bg4)}
.ws-steps-flow i{color:var(--text3);font-style:normal;font-size:12px}
.ws-step-head-plain{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  font-size:14.5px;font-weight:800;
}
.ws-step-head-plain .ws-step-name{flex:1}
.ws-step-alldone{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:38px 14px;color:var(--green);font-weight:800;
  background:var(--bg2);border:1px solid var(--green);border-radius:var(--r2);
}

/* ---------- 設定：中タスクの切り替え ---------- */
.tpl-stepmode{
  display:flex;align-items:flex-start;gap:14px;
  padding:13px 16px;margin:0 0 12px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);
}
.tpl-stepmode.on{border-color:var(--accent);background:var(--bg3)}
.tpl-stepmode-main{flex:1;min-width:0}
.tpl-stepmode-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:5px;
  display:flex;align-items:center;gap:7px}
.tpl-stepmode-desc{font-size:12.5px;line-height:1.75;color:var(--text2)}
.tpl-stepmode-sub{color:var(--text3);font-size:12px}
.tpl-stepmode-flow{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;
}
.tpl-stepmode-flow span{
  background:var(--bg4);border:1px solid var(--border);border-radius:999px;
  padding:2px 10px;font-size:11.5px;font-weight:700;color:var(--text);
}
.tpl-stepmode-flow i{color:var(--text3);font-style:normal;font-size:12px}
.tpl-stepmode-warn{margin-top:8px;font-size:12px;color:var(--orange);font-weight:700}
.tpl-stepmode-note{margin-top:8px;font-size:12px;color:var(--text3)}

@media (max-width: 700px){
  .tpl-stepmode{flex-direction:column;gap:10px}
}