/*
 * さくら事務所 報告書DX — 本部コンソール（beta/hq.html）専用CSS
 * フェーズ2: sakura-hq.html のUIを移植。
 * 共有トークン・共通コンポーネント（.app/.side/.top/.bj/.placeholder 等）は
 * assets/tokens.css を参照（このファイルでは重複定義しない）。
 */

/* ===================== ビュー切替 ===================== */
.view{display:none}
.view.on{display:block}

/* ===================== 汎用ボタン ===================== */
.btn{border-radius:11px;font-weight:700;font-size:13px;padding:10px 18px;display:inline-flex;align-items:center;gap:7px;transition:opacity .15s;border:0;font-family:inherit;cursor:pointer}
.btn:hover{opacity:.88}
.btn-pri{background:var(--brand);color:#fff}
.btn-sec{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-coral{background:var(--coral);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ===================== ステータスバッジ ===================== */
.st{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 11px;font-size:11.5px;font-weight:700;white-space:nowrap}
.st .d{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.st-wait{background:#FBEAE5;color:var(--coral)}
.st-doing{background:#EAF0F7;color:var(--blue)}
.st-back{background:#F8EEDC;color:var(--amber)}
.st-ready{background:#E3F0EC;color:var(--brand-deep)}
.st-done{background:#E6F0ED;color:var(--brand)}
.st-draft{background:#EFEDE6;color:var(--sub)}

/* ===================== キュー：統計カード ===================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.stat .lb{font-size:11.5px;color:var(--sub);font-weight:700;letter-spacing:.04em;display:flex;align-items:center;gap:7px}
.stat .vl{font-family:var(--font-num);font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.stat .vl small{font-size:14px;font-weight:700;color:var(--sub);margin-left:2px}
.stat .nt{font-size:11px;color:var(--sub);margin-top:2px}
.stat.warn .vl{color:var(--coral)}
@media(max-width:900px){ .stats{grid-template-columns:1fr 1fr} }

/* ===================== 見出し / テーブル ===================== */
.sec-t{font-family:var(--font-serif);font-size:16px;font-weight:700;letter-spacing:.05em;margin:26px 0 12px;display:flex;align-items:center;gap:9px}
.sec-t:first-child{margin-top:0}
.sec-t .ln{flex:1;height:1px;background:var(--line)}
.mut{color:var(--sub)}
.tblwrap{border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.tblwrap table{width:100%;border-collapse:collapse;background:var(--card)}
th{font-size:11px;letter-spacing:.08em;color:var(--sub);font-weight:700;text-align:left;padding:11px 16px;background:#FBFAF6;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid #EFECE2;vertical-align:middle;font-size:13px}
tr:last-child td{border-bottom:none}
tr.q-row{cursor:pointer;transition:background .12s}
tr.q-row:hover{background:#FBFAF4}
tr.q-row.is-draft{cursor:default}
tr.q-row.is-draft:hover{background:transparent}
.case-nm{font-weight:700;font-size:13.5px}
.case-ad{font-size:11.5px;color:var(--sub)}
.knote{display:flex;gap:10px;background:#F0F4EC;border:1px solid #DDE6D6;border-radius:14px;padding:13px 17px;font-size:12px;color:#3C5248;margin:18px 0;align-items:flex-start}

/* ===================== 詳細：ヘッダー ===================== */
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:14px;background:none;border:0;cursor:pointer;font-family:inherit}
.backlink:hover{color:var(--ink)}
.case-head{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 24px;display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.case-head .ttl{font-family:var(--font-serif);font-size:20px;font-weight:700;letter-spacing:.03em}
.case-head .meta{font-size:12px;color:var(--sub);margin-top:4px;display:flex;gap:14px;flex-wrap:wrap}
.case-head .meta b{color:var(--ink)}
.case-head .right{margin-left:auto;text-align:right}
.prog{margin-top:10px;min-width:220px}
.prog .pl{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--sub)}
.prog .pl b{color:var(--brand)}
.pbar{height:7px;border-radius:99px;background:#EDEAE0;overflow:hidden;margin-top:5px}
.pbar i{display:block;height:100%;border-radius:99px;background:var(--brand);width:0%;transition:width .3s}
.fchips{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.fc{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;border-radius:7px;padding:3px 9px;background:#F1EFE7;color:var(--sub)}

/* ===================== 詳細：指摘一覧 ===================== */
.flist{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.frow{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;gap:16px;transition:border-color .15s;flex-wrap:wrap}
.frow.ok{border-color:#BFD9D1;background:#FBFDFC}
.frow.back{border-color:#F0C9BE;background:#FFFBF9}
.thumb{width:86px;height:64px;border-radius:10px;flex:none}
.thumb svg{width:100%;height:100%;display:block;border-radius:10px}
.fbody{flex:1;min-width:220px}
.fhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fhead .no{font-family:var(--font-num);font-size:11px;font-weight:800;color:var(--sub)}
.fhead .nm{font-weight:700;font-size:14px}
.floc{font-size:11.5px;color:var(--sub);margin-top:3px}
.fcmt{font-size:12.5px;color:#44524E;margin-top:7px;max-width:640px;line-height:1.8}
.fna{font-size:11.5px;color:var(--amber);margin-top:6px;background:var(--amber-soft);border-radius:8px;padding:6px 10px;display:inline-block}
.facts{display:flex;flex-direction:column;gap:7px;justify-content:center;flex:none;margin-left:auto}
.fbtn{border:1.5px solid var(--line);border-radius:10px;padding:7px 14px;font-size:12px;font-weight:700;background:#fff;display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;font-family:inherit}
.fbtn.ap.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.fbtn.bk.sel{background:var(--coral);border-color:var(--coral);color:#fff}
.fixbox{margin-top:10px;display:none;width:100%}
.fixbox.on{display:block}
.fixbox textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:12.5px;resize:vertical;min-height:54px;background:#FFFDF8}
.fixbox textarea:focus{outline:none;border-color:var(--coral)}
.fixbox .fx-note{font-size:10.5px;color:var(--sub);margin-top:4px}
.more-note{text-align:center;font-size:12px;color:var(--sub);padding:14px;border:1.5px dashed var(--line);border-radius:14px;margin-top:12px}

/* ===================== 詳細：アクションバー ===================== */
.actionbar{position:fixed;bottom:0;left:230px;right:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:14px 34px;display:none;align-items:center;gap:14px;z-index:30;backdrop-filter:blur(6px);flex-wrap:wrap}
.actionbar.on{display:flex}
.actionbar .sum{font-size:12.5px;font-weight:700;color:var(--sub)}
.actionbar .sum b{color:var(--ink)}
.actionbar .sp{flex:1}
@media(max-width:900px){ .actionbar{left:0} }

/* ===================== モーダル：確定版発行 ===================== */
.modal-bg{position:fixed;inset:0;background:rgba(20,32,29,.45);display:none;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(3px)}
.modal-bg.on{display:flex}
.modal{background:#fff;border-radius:22px;width:430px;max-width:92vw;padding:30px 32px}
.modal .mt{font-family:var(--font-serif);font-size:17px;font-weight:700;letter-spacing:.03em}
.modal .ms{font-size:12px;color:var(--sub);margin-top:4px}
.msteps{margin:20px 0 6px;display:flex;flex-direction:column;gap:13px}
.mstep{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:700;color:var(--sub);transition:color .2s}
.mstep .mi{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;transition:all .2s}
.mstep .mi svg{opacity:0}
.mstep.doing{color:var(--ink)}
.mstep.doing .mi{border-color:var(--brand)}
.mstep.done{color:var(--ink)}
.mstep.done .mi{background:var(--brand);border-color:var(--brand)}
.mstep.done .mi svg{opacity:1}
.modal .mact{display:flex;gap:10px;margin-top:22px}
.modal .mact .btn{flex:1;justify-content:center}