/* 協力会社 打診・発注アプリの見た目 */
:root{
  --ink:#1d2733; --muted:#6b7785; --canvas:#f1f4f8; --card:#fff; --line:#e3e8ef;
  --brand:#17a673; --brand-dk:#0e7f58;
  /* まとまりごとの色（入力画面・詳細・一覧で同じ色を使う） */
  --c-to:#2f6fdb;    --t-to:#eaf1fd;
  --c-date:#d98200;  --t-date:#fff3de;
  --c-haifu:#17a673; --t-haifu:#e2f5ec;
  --c-note:#d6455d;  --t-note:#fdeaed;
  --c-memo:#667487;  --t-memo:#edf0f4;
  /* 状態の色 */
  --st-open:#2f6fdb; --st-conditional:#d98200; --st-order_wait:#0f94a8; --st-ordered:#7a5af0;
  --st-done:#17a673; --st-declined:#8a94a3; --st-passed:#8a94a3; --st-expired:#d6455d; --st-order_expired:#d6455d;
}
*{box-sizing:border-box}
body{font-family:"Meiryo","Yu Gothic UI","Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  margin:0;background:var(--canvas);color:var(--ink);line-height:1.6}
button,input,select,textarea{font-family:inherit}

/* 上の帯 */
header{background:var(--ink);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:4px solid var(--brand)}
header h1{font-size:17px;margin:0;font-weight:700;letter-spacing:.03em}
header button{background:transparent;color:#fff;border:1px solid #ffffff55;border-radius:6px;padding:5px 12px;cursor:pointer}
header button:hover{background:#ffffff1f}
main{max-width:960px;margin:20px auto;padding:0 14px}

/* タブ */
nav{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:0}
nav button{padding:10px 18px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;
  border-bottom:3px solid transparent;margin-bottom:-2px}
nav button:hover{color:var(--ink)}
nav button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--brand)}

/* 白いカード */
.card{background:var(--card);padding:22px;border-radius:0 0 10px 10px;box-shadow:0 1px 3px #1d273314;overflow-x:auto}
.card h2{margin:0 0 12px;font-size:21px}
.login{max-width:360px;margin:48px auto;border-radius:10px;border-top:4px solid var(--brand)}

/* 表（一覧） */
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{padding:10px 8px;text-align:left;font-size:14px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:13px;background:#f8fafc}
tr.off td{color:#9aa3af}
tr.click{cursor:pointer}
tr.click:hover{background:#f6faf8}
tr.click td:first-child{border-left:5px solid var(--line)}
tr.row-open td:first-child{border-left-color:var(--st-open)}
tr.row-conditional td:first-child{border-left-color:var(--st-conditional)}
tr.row-order_wait td:first-child{border-left-color:var(--st-order_wait)}
tr.row-ordered td:first-child{border-left-color:var(--st-ordered)}
tr.row-done td:first-child{border-left-color:var(--st-done)}
tr.row-expired td:first-child,tr.row-order_expired td:first-child{border-left-color:var(--st-expired)}
tr.row-declined td:first-child,tr.row-passed td:first-child{border-left-color:var(--st-declined)}

/* 状態のラベル */
.badge{display:inline-block;padding:2px 11px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:var(--st-declined);white-space:nowrap}
.st-open{background:var(--st-open)}
.st-conditional{background:var(--st-conditional)}
.st-order_wait{background:var(--st-order_wait)}
.st-ordered{background:var(--st-ordered)}
.st-done{background:var(--st-done)}
.st-declined,.st-passed{background:var(--st-declined)}
.st-expired,.st-order_expired{background:var(--st-expired)}
.muted{color:#8b95a3;font-size:12px}

/* 詳細の見出しと進み具合 */
.dhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.dhead h2{margin:0}
.stepper{display:flex;margin:18px 0 22px}
.step{flex:1;text-align:center;position:relative;font-size:12.5px;color:#98a2b0}
.step::before{content:'';position:absolute;top:13px;left:-50%;width:100%;height:3px;background:var(--line)}
.step:first-child::before{display:none}
.step .dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;
  border:3px solid var(--line);margin:0 auto 4px;position:relative;z-index:1;font-size:13px;font-weight:700;color:#fff}
.step.done{color:var(--ink)}
.step.done .dot{background:var(--brand);border-color:var(--brand)}
.step.done::before,.step.cur::before,.step.late::before,.step.stop::before{background:var(--brand)}
.step.cur,.step.late,.step.stop{color:var(--ink);font-weight:700}
.step.cur .dot{border-color:var(--cur,var(--st-open));box-shadow:0 0 0 4px #2f6fdb22}
.step.late .dot{background:var(--st-expired);border-color:var(--st-expired)}
.step.stop .dot{background:var(--st-declined);border-color:var(--st-declined)}
.s-open{--cur:var(--st-open)} .s-conditional{--cur:var(--st-conditional)}
.s-order_wait{--cur:var(--st-order_wait)} .s-ordered{--cur:var(--st-ordered)}
.stepper.s-conditional .step.cur .dot{box-shadow:0 0 0 4px #d9820026}
.stepper.s-order_wait .step.cur .dot{box-shadow:0 0 0 4px #0f94a826}
.stepper.s-ordered .step.cur .dot{box-shadow:0 0 0 4px #7a5af026}
.subhead{margin:26px 0 10px;font-size:16px;padding-bottom:6px;border-bottom:2px solid var(--line)}

/* 色つきのまとまり（詳細） */
.groups{display:grid;gap:12px;margin-top:10px}
.grp{border-radius:10px;background:var(--t,#fff);border:1px solid var(--bd,var(--line));border-left:6px solid var(--c,var(--line));padding:12px 16px}
.grp h4{margin:0 0 6px;font-size:14px;color:var(--c)}
.grp dl{margin:0}
.kv{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:5px 0;border-top:1px solid #ffffffaa;font-size:14.5px}
.kv dt{color:#5b6674;font-size:13px;padding-top:1px}
.kv dd{margin:0;word-break:break-word}
.grp a{color:var(--c);font-weight:600}
.g-to{--c:var(--c-to);--t:var(--t-to);--bd:#cfdcf7}
.g-date{--c:var(--c-date);--t:var(--t-date);--bd:#f3dcae}
.g-haifu{--c:var(--c-haifu);--t:var(--t-haifu);--bd:#bfe6d4}
.g-note{--c:var(--c-note);--t:var(--t-note);--bd:#f5c9d1}
.g-memo{--c:var(--c-memo);--t:var(--t-memo);--bd:#d6dce4}

/* 回答・承認のお知らせ枠 */
.answer{background:#fff8e6;border:1px solid #f0d78c;border-left:6px solid var(--st-conditional);border-radius:10px;padding:12px 16px;margin:12px 0}
.answer.ok{background:#e9f8f1;border-color:#bfe6d4;border-left-color:var(--st-done)}
.hist{font-size:12.5px;color:#5b6674;padding:3px 0;border-bottom:1px dashed var(--line)}
.actions{margin:14px 0;padding:14px 16px;background:#f8fafc;border:1px solid var(--line);border-radius:10px}
.actions button{margin-right:8px}

/* 入力フォーム */
label{display:block;margin-top:12px;font-size:13px;color:#4b5563;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:8px 10px;font-size:15px;border:1px solid #c9d1dc;border-radius:7px;background:#fff;color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select{height:40px}
label>input:not([type=radio]):not([type=checkbox]),label>select,label>textarea{display:block;margin-top:4px}
label>select{min-width:200px;max-width:100%}
textarea{min-height:76px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid #2f6fdb55;outline-offset:1px;border-color:var(--c-to)}
input[type=checkbox],input[type=radio]{width:auto;height:auto;margin:0 5px 0 0;vertical-align:-2px;accent-color:var(--brand)}
.row2{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.row2>label{flex:1 1 220px}
.opts label,.opts.col label{display:inline-block;margin:4px 14px 4px 0;font-size:14px;color:var(--ink);font-weight:400}
.opts.col label{display:block}
.hint{background:#eaf1fd;border-radius:8px;padding:8px 12px;font-size:13.5px;color:#26457d}
.fixed{flex:1 1 220px;margin-top:12px}
.fixed .muted{display:block;font-size:13px;font-weight:600;color:#4b5563}
.fixed b{display:block;margin-top:4px;padding:8px 0;font-size:16px}

/* 入力画面のまとまり（詳細と同じ色） */
.sec{border-radius:10px;background:var(--t);border:1px solid var(--bd);border-left:6px solid var(--c);padding:6px 16px 16px;margin-top:14px}
.sec h3{margin:10px 0 0;font-size:14.5px;color:var(--c)}
.sec-to{--c:var(--c-to);--t:var(--t-to);--bd:#cfdcf7}
.sec-date{--c:var(--c-date);--t:var(--t-date);--bd:#f3dcae}
.sec-haifu{--c:var(--c-haifu);--t:var(--t-haifu);--bd:#bfe6d4}
.sec-note{--c:var(--c-note);--t:var(--t-note);--bd:#f5c9d1}
.sec-memo{--c:var(--c-memo);--t:var(--t-memo);--bd:#d6dce4}
.formbtns{margin-top:18px}

/* ボタン */
button.main{background:var(--brand);color:#fff;border:0;padding:10px 22px;border-radius:8px;cursor:pointer;font-size:15px;font-weight:700;margin-top:12px}
button.main:hover{background:var(--brand-dk)}
button.main:disabled{opacity:.5;cursor:default}
button.sub{background:#fff;border:1px solid #b9c2cf;padding:6px 14px;border-radius:7px;cursor:pointer;color:var(--ink)}
button.sub:hover{background:#f3f6fa}
button.warn{background:#fff;border:1px solid var(--st-expired);color:var(--st-expired);padding:9px 20px;border-radius:8px;cursor:pointer;margin-top:12px;font-weight:700}
button.warn:hover{background:#fdeaed}
.formbtns button.sub{margin-left:8px;padding:9px 18px}

/* 下に出るお知らせ */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:8px;
  box-shadow:0 4px 14px #0003;z-index:10;max-width:90vw}
#toast.err{background:var(--st-expired)}

/* スマホ */
@media (max-width:620px){
  main{padding:0 10px}
  .card{padding:14px}
  .kv{grid-template-columns:1fr;gap:0}
  .stepper .step{font-size:11px}
  header h1{font-size:15px}
  nav button{padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ファイルのドラッグ&ドロップ枠 */
.dz{margin-top:6px;padding:20px 14px;text-align:center;border:2px dashed #aab4c2;border-radius:10px;background:#fff;cursor:pointer;color:var(--ink)}
.dz:hover,.dz:focus-visible{border-color:var(--c-to);background:#f5f9ff}
.dz.over{border-color:var(--brand);background:#e9f8f1;border-style:solid}
.dz-big{font-weight:700;font-size:15px;margin-bottom:2px}
.fitem{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:14px}
.fitem button{padding:3px 10px}
/* 標準で付く注意事項 */
.std{margin-top:12px;padding:8px 12px;background:#fff;border:1px solid #f5c9d1;border-radius:8px;font-size:14px;color:var(--c-note)}

/* メール設定 */
.bigchk{display:block;margin-top:14px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:15px;color:var(--ink)}
.irow{align-items:flex-end;padding:8px 0;border-bottom:1px dashed #bfe6d4}
.irow .chk{flex:1 1 220px;font-weight:400;color:var(--ink)}
.irow button{margin-bottom:2px}

/* 処理中の表示 */
#busy{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#1d273399}
#busy[hidden]{display:none}
.busy-box{background:#fff;border-radius:12px;padding:26px 34px;text-align:center;box-shadow:0 8px 30px #0004;max-width:min(92vw,420px)}
.busy-box p{margin:12px 0 0;font-size:15px;font-weight:700;color:var(--ink)}
.spin{width:42px;height:42px;margin:0 auto;border:5px solid #dfe5ec;border-top-color:var(--brand);border-radius:50%;animation:kdspin .9s linear infinite}
@keyframes kdspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:kdspin 2.4s linear infinite!important}}