/* アプリ共通のシェル。色・フォントは必ず tokens.css 由来。
   勤怠管理システムと同じ骨格を使う。同じ人が両方を行き来するため、
   アプリバー・ナビ・カードの見え方は1ピクセルも変えない。 */

body { margin: 0; background: var(--mv-paper-2); }

/* --- アプリバー（白ベース。青は文字と罫線のアクセント） -------- */
.app-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--mv-space-3); flex-wrap: wrap;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.6) blur(8px);
  color: var(--mv-ink); padding: 10px var(--mv-space-5);
  border-bottom: 1px solid var(--mv-rule-soft);
  box-shadow: var(--mv-shadow-bar);
}
.app-logo {
  height: 30px; width: auto; flex: none; display: block;
  padding-right: var(--mv-space-3); border-right: 1px solid var(--mv-rule-soft);
}
.app-bar strong {
  font-family: var(--mv-font-head); font-size: 15px; color: var(--mv-ink); letter-spacing: .01em;
}
.app-bar__sub { font-size: 12px; color: var(--mv-muted); }

.app-nav {
  margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap;
  background: var(--mv-paper-2); padding: 3px; border-radius: var(--mv-radius);
  border: 1px solid var(--mv-rule-soft);
}
.app-nav a {
  color: var(--mv-muted); text-decoration: none; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: var(--mv-radius-sm); white-space: nowrap;
  transition: background var(--mv-dur) var(--mv-ease), color var(--mv-dur) var(--mv-ease);
}
.app-nav a:hover { background: var(--mv-surface); color: var(--mv-ink); }
.app-nav a[aria-current="page"] {
  background: var(--mv-surface); color: var(--mv-blue); box-shadow: var(--mv-shadow-sm);
}
@media (max-width: 760px) {
  .app-bar { padding: 8px var(--mv-space-3); }
  .app-logo { height: 24px; padding-right: var(--mv-space-2); }
  .app-bar__sub { display: none; }
  .app-nav { width: 100%; margin-left: 0; overflow-x: auto; }
}

/* --- ツールバー ---------------------------------------------- */
.toolbar {
  padding: var(--mv-space-3) var(--mv-space-5);
  background: var(--mv-surface); border-bottom: 1px solid var(--mv-rule-soft);
}
.toolbar .row { display: flex; gap: var(--mv-space-3); align-items: center; flex-wrap: wrap; }
.toolbar .mv-select, .toolbar .mv-input { width: auto; min-height: 36px; font-size: 13px; }
.mv-label { font-size: 12px; color: var(--mv-muted); font-weight: 600; }
.hint { font-size: 12px; color: var(--mv-muted); }
kbd {
  font-family: var(--mv-font-num); font-size: 10.5px; border: 1px solid var(--mv-rule-soft);
  border-bottom-width: 2px; border-radius: 3px; padding: 2px 5px;
  background: var(--mv-paper-2); color: var(--mv-muted);
}
.legend { font-size: 11.5px; color: var(--mv-muted); display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 12px; height: 12px; border: 1px solid var(--mv-rule); border-radius: 3px; display: inline-block; }
.sw--none { background: var(--mv-surface); }
.sw--att  { background: var(--mv-yellow-bg); border-color: var(--mv-yellow); }
.sw--vio  { background: var(--mv-red-bg); border-color: var(--mv-red); }
.sw--ok   { background: var(--mv-green-bg); border-color: var(--mv-green); }
.status {
  margin-left: auto; font-size: 12px; color: var(--mv-blue); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- 汎用 ---------------------------------------------------- */
.page { max-width: 1080px; margin: 0 auto; padding: var(--mv-space-5); }
.page--wide { max-width: 1320px; }
.card {
  background: var(--mv-surface); border: 1px solid var(--mv-rule-soft);
  border-radius: var(--mv-radius); padding: var(--mv-space-5);
  margin-bottom: var(--mv-space-4); box-shadow: var(--mv-shadow-sm);
}
.card h3 { margin: 0 0 var(--mv-space-3); font-size: 14px; }
.muted { color: var(--mv-muted); font-size: 12px; }
.right { margin-left: auto; }

/* --- ログイン状態バッジ -------------------------------------- */
.who-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  background: var(--mv-paper-2); border: 1px solid var(--mv-rule-soft);
  border-radius: 999px; padding: 4px 6px 4px 11px;
}
.who-badge b { font-size: 12.5px; }
.who-badge > span { color: var(--mv-muted); font-size: 11px; }
.who-badge a {
  color: var(--mv-blue); text-decoration: none; font-size: 11px; font-weight: 700;
  background: var(--mv-surface); border: 1px solid var(--mv-rule-soft);
  border-radius: 999px; padding: 3px 9px;
}
.who-badge a:hover { background: var(--mv-blue-tint); }

/* --- 権限が無いときの案内 ------------------------------------ */
.denied { max-width: 560px; margin: 60px auto; text-align: center; }
.denied h2 { font-size: 17px; margin: 0 0 8px; }
.denied p { color: var(--mv-muted); font-size: 13px; margin: 0 0 18px; }

/* ============================================================
   ここから外注費請求書処理の固有部分
   ============================================================ */

/* --- 件数の帯（受信トレイの頭） -------------------------------
   月末に集中する、という実態が数字で見えるようにする。 */
.kpis { display: flex; gap: var(--mv-space-3); flex-wrap: wrap; margin-bottom: var(--mv-space-4); }
.kpi {
  flex: 1 1 140px; background: var(--mv-surface); border: 1px solid var(--mv-rule-soft);
  border-radius: var(--mv-radius); padding: var(--mv-space-3) var(--mv-space-4);
  box-shadow: var(--mv-shadow-sm);
}
.kpi b {
  display: block; font-family: var(--mv-font-num); font-variant-numeric: tabular-nums;
  font-size: 26px; line-height: 1.2; font-weight: 600;
}
.kpi span { font-size: 11.5px; color: var(--mv-muted); font-weight: 600; }
.kpi--error b { color: var(--mv-red); }
.kpi--warn  b { color: #7A5B00; }
.kpi--ok    b { color: var(--mv-green); }
.kpi--money b { font-size: 20px; }
.kpi a { color: var(--mv-blue); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.kpi a:hover { text-decoration: underline; }

/* --- 一覧 ------------------------------------------------------ */
.list-scroll {
  overflow: auto; background: var(--mv-surface);
  border: 1px solid var(--mv-rule-soft); border-radius: var(--mv-radius);
  box-shadow: var(--mv-shadow-sm);
}
.list-scroll .mv-table { width: 100%; }
.mv-table td { height: 34px; }
.mv-table tbody tr.is-clickable { cursor: pointer; }
.mv-table .col-narrow { width: 1%; }
.rowstate--error td { background: var(--mv-red-bg); }
.rowstate--warn  td { background: var(--mv-yellow-bg); }
.rowstate--done  td { color: var(--mv-muted); }
.mv-table td.doc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* --- 処理ライン（signature element） --------------------------
   受信から支払通知までを1本の直列回路として描く。
   勤怠の承認回路と同じ語彙。どこで止まっているかを1枚で見せる。 */
.mv-circuit { display: block; width: 100%; max-width: 860px; }
.mv-circuit .wire       { stroke: var(--mv-rule); stroke-width: 2; fill: none; }
.mv-circuit .wire--live { stroke: var(--mv-green); stroke-width: 3; }
.mv-circuit .node       { fill: var(--mv-surface); stroke: var(--mv-rule); stroke-width: 2; }
.mv-circuit .node--live { stroke: var(--mv-green); }
.mv-circuit .node--wait { stroke: var(--mv-yellow); }
.mv-circuit .label      { font-family: var(--mv-font-head); font-size: 11px; fill: var(--mv-ink); text-anchor: middle; }
.mv-circuit .sublabel   { font-family: var(--mv-font-num); font-size: 9px; fill: var(--mv-muted); text-anchor: middle; }
.mv-circuit .lamp       { fill: var(--mv-rule); }
.mv-circuit .lamp--live { fill: var(--mv-green); }
.mv-circuit .lamp--wait { fill: var(--mv-yellow); }
.mv-circuit .flow {
  stroke: var(--mv-green); stroke-width: 3; fill: none;
  stroke-dasharray: 10 380; stroke-dashoffset: 390;
  animation: mv-energize 1.8s linear infinite;
}
@keyframes mv-energize { to { stroke-dashoffset: -10; } }
@media (prefers-reduced-motion: reduce) {
  .mv-circuit .flow { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: .55; }
}

/* --- 確認ストリーム -------------------------------------------
   左に原本、右に読み取り結果と照合。目線は左右だけ。上下に探させない。 */
.stream {
  display: grid; grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--mv-space-4); align-items: start;
  padding: var(--mv-space-4) var(--mv-space-5);
  max-width: 1440px; margin: 0 auto;
}
/* 右側は自分でスクロールする。ここを sticky にしただけだと、
   中身が画面より高いときに下の「処理」ボタンへ永久に辿り着けない。 */
.stream__side {
  position: sticky; top: 76px;
  max-height: calc(100vh - 92px); overflow-y: auto;
  padding-right: 2px;   /* スクロールバーがカードの影に被らないように */
}
.stream__side .card:last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
  .stream { grid-template-columns: 1fr; }
  .stream__side { position: static; max-height: none; overflow: visible; }
}

/* 原本（PDF の見立て）。紙に見えることが大事。枠を付けて影を落とす */
.paper {
  background: #fff; border: 1px solid var(--mv-rule); border-radius: 2px;
  box-shadow: var(--mv-shadow); padding: 30px 34px; font-size: 12.5px; line-height: 1.7;
  min-height: 640px;
}
.paper h2 {
  text-align: center; font-size: 20px; letter-spacing: .5em; margin: 0 0 22px;
  padding-bottom: 8px; border-bottom: 2px solid var(--mv-ink); text-indent: .5em;
}
.paper__head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.paper__to { flex: 1; }
.paper__to b { font-size: 15px; border-bottom: 1px solid var(--mv-ink); padding-bottom: 2px; }
.paper__from { font-size: 11.5px; text-align: left; min-width: 240px; }
.paper__from b { font-size: 13px; }
.paper__total {
  margin: 16px 0 20px; padding: 10px 14px; border: 1px solid var(--mv-ink);
  display: flex; align-items: baseline; gap: 14px;
}
.paper__total span { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.paper__total b {
  font-family: var(--mv-font-num); font-variant-numeric: tabular-nums;
  font-size: 22px; letter-spacing: .02em;
}
.paper table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 16px; }
.paper th, .paper td { border: 1px solid var(--mv-rule); padding: 5px 8px; }
.paper th { background: var(--mv-paper-2); font-weight: 700; font-size: 11px; }
.paper td.n { text-align: right; font-family: var(--mv-font-num); font-variant-numeric: tabular-nums; }
.paper dl { display: grid; grid-template-columns: 88px 1fr; gap: 2px 10px; margin: 0 0 14px; font-size: 12px; }
.paper dt { color: #444; }
.paper dd { margin: 0; }
.paper__note { font-size: 11.5px; border: 1px solid var(--mv-rule); padding: 8px 10px; }

/* 読み取り箇所のハイライト。右の項目に触れると原本の該当箇所が光る */
.hl { background: transparent; border-radius: 2px; padding: 0 2px; transition: background var(--mv-dur) var(--mv-ease); }
.hl.is-lit { background: #FFE9A8; box-shadow: 0 0 0 2px #FFE9A8; }
.hl.is-bad { background: var(--mv-red-bg); box-shadow: 0 0 0 2px var(--mv-red-bg); }

/* 抽出項目 */
.fields { display: grid; gap: 1px; background: var(--mv-rule-soft); border: 1px solid var(--mv-rule-soft);
          border-radius: var(--mv-radius); overflow: hidden; }
.field { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center;
         background: var(--mv-surface); padding: 7px 10px; font-size: 13px; }
.field > dt { font-size: 11.5px; color: var(--mv-muted); font-weight: 600; }
.field > dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.field .val { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field .val.num { font-family: var(--mv-font-num); font-variant-numeric: tabular-nums; }
.field .sub { font-size: 11px; color: var(--mv-muted); }
.field.is-bad { background: var(--mv-red-bg); }
.field.is-bad .val { color: var(--mv-red); }
.field.is-fixed { background: var(--mv-blue-tint); }
.field input.mv-input, .field select.mv-select { min-height: 30px; font-size: 13px; padding: 0 8px; }

/* 照合結果 */
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mv-space-2); }
.finding {
  border: 1px solid var(--mv-rule-soft); border-left: 4px solid var(--mv-rule);
  border-radius: var(--mv-radius-sm); padding: 9px 11px; background: var(--mv-surface);
}
.finding--error { border-left-color: var(--mv-red);    background: var(--mv-red-bg); }
.finding--warn  { border-left-color: var(--mv-yellow); background: var(--mv-yellow-bg); }
.finding--info  { border-left-color: var(--mv-blue-mid); }
.finding b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.finding p { margin: 0; font-size: 11.5px; color: #3D4C59; white-space: pre-line;
             font-variant-numeric: tabular-nums; }
.finding .fix { display: block; margin-top: 4px; font-size: 11.5px; color: var(--mv-muted); }
.finding__code {
  float: right; font-family: var(--mv-font-num); font-size: 10px; color: var(--mv-muted);
  border: 1px solid var(--mv-rule-soft); border-radius: 3px; padding: 1px 4px; background: var(--mv-surface);
}
.findings--none { font-size: 12.5px; color: var(--mv-green); font-weight: 700; }

/* 進捗（何件目か）。リズムを作るために常に見えている */
.streambar {
  display: flex; align-items: center; gap: var(--mv-space-3); flex-wrap: wrap;
  padding: var(--mv-space-3) var(--mv-space-5);
  background: var(--mv-surface); border-bottom: 1px solid var(--mv-rule-soft);
  position: sticky; top: 51px; z-index: 20;
}
.progress { flex: 1; min-width: 160px; height: 6px; background: var(--mv-paper-2);
            border: 1px solid var(--mv-rule-soft); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--mv-blue); transition: width .2s var(--mv-ease); }
.counter { font-family: var(--mv-font-num); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; }
.counter em { font-style: normal; color: var(--mv-muted); font-weight: 400; }

/* 送信プレビュー（返信メール・支払通知） */
.mail {
  border: 1px solid var(--mv-rule-soft); border-radius: var(--mv-radius);
  background: var(--mv-paper-2); font-size: 12.5px; overflow: hidden;
}
.mail__head { padding: 8px 12px; background: var(--mv-surface); border-bottom: 1px solid var(--mv-rule-soft); }
.mail__head div { display: grid; grid-template-columns: 46px 1fr; gap: 8px; }
.mail__head span { color: var(--mv-muted); font-size: 11.5px; }
.mail__body { padding: 12px; white-space: pre-wrap; line-height: 1.75; font-size: 12px; }

/* CSV プレビュー */
.csv {
  font-family: var(--mv-font-num); font-size: 11px; line-height: 1.7; white-space: pre;
  overflow-x: auto; background: var(--mv-paper-2); border: 1px solid var(--mv-rule-soft);
  border-radius: var(--mv-radius-sm); padding: 10px 12px; color: #3D4C59;
}

/* 工事台帳の積み上げバー */
.bar { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: var(--mv-paper-2);
       border: 1px solid var(--mv-rule-soft); min-width: 120px; }
.bar i { display: block; height: 100%; }
.bar .b-out { background: var(--mv-blue); }
.bar .b-mat { background: var(--mv-blue-mid); }
.bar .b-lab { background: #9BC0DE; }
.bar .b-rest { background: transparent; }
.barkey { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mv-muted); }
.barkey i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* 入口のタイル（勤怠と同じ） */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--mv-space-3); }
.tile {
  display: block; text-decoration: none; color: inherit; background: var(--mv-surface);
  border: 1px solid var(--mv-rule-soft); border-radius: var(--mv-radius);
  padding: var(--mv-space-4); box-shadow: var(--mv-shadow-sm);
  transition: border-color var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease),
              transform var(--mv-dur) var(--mv-ease);
}
.tile:hover { border-color: var(--mv-blue); box-shadow: var(--mv-shadow); transform: translateY(-1px); }
.tile b { font-family: var(--mv-font-head); font-size: 15px; display: block; margin-bottom: 4px; }
.tile > span { font-size: 12px; color: var(--mv-muted); }
.tile .who { font-size: 11px; color: var(--mv-blue); font-weight: 700; margin-bottom: 6px; display: block; }

/* --- スキャン原本のビューア（確認画面） -----------------------
   実ファイルの添付は、清書した請求書ではなく原本のページを出す。
   1通のPDFに複数の伝票が入るので、いま何件目のどのページを見ているのかを
   常に画面の上に出しておく。ここを見失うと別の工事の紙を見たまま承認してしまう。 */
.scan {
  background: var(--mv-surface); border: 1px solid var(--mv-rule-soft);
  border-radius: var(--mv-radius); box-shadow: var(--mv-shadow-sm); overflow: hidden;
}
.scan__file {
  padding: 12px 16px; border-bottom: 1px solid var(--mv-rule-soft); background: var(--mv-paper-2);
  display: grid; gap: 3px;
}
.scan__file b { font-size: 13px; font-family: var(--mv-font-head); }
.scan__file span { font-size: 11.5px; color: var(--mv-muted); }
.scan__split {
  color: var(--mv-blue) !important; font-weight: 600;
  border-top: 1px dashed var(--mv-rule-soft); margin-top: 4px; padding-top: 5px;
}
.scan__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px 18px; margin: 0; padding: 12px 16px; font-size: 12.5px;
  border-bottom: 1px solid var(--mv-rule-soft);
}
.scan__meta > div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.scan__meta dt { color: var(--mv-muted); font-size: 11.5px; flex: none; width: 66px; }
.scan__meta dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan__meta b { font-family: var(--mv-font-num); font-variant-numeric: tabular-nums; font-size: 14px; }

/* ページ送り。原本のどの紙かを縮小画像で選ぶ。番号だけでは当たらない */
.scan__strip {
  display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto;
  background: var(--mv-paper-2); border-bottom: 1px solid var(--mv-rule-soft);
}
.scan__thumb {
  flex: none; border: 1px solid var(--mv-rule); border-radius: var(--mv-radius-sm);
  background: #fff; padding: 3px; cursor: pointer; display: grid; gap: 2px; justify-items: center;
  transition: border-color var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease);
}
.scan__thumb img { display: block; width: 92px; height: auto; }
.scan__thumb span {
  font-size: 10px; color: var(--mv-muted); font-family: var(--mv-font-num); line-height: 1.3;
}
.scan__thumb em { font-style: normal; display: block; color: var(--mv-ink); }
.scan__thumb:hover { border-color: var(--mv-blue-mid); }
.scan__thumb.is-on { border-color: var(--mv-blue); box-shadow: 0 0 0 2px var(--mv-blue-tint); }
.scan__img { display: block; width: 100%; height: auto; background: #fff; }
.scan__cap {
  margin: 0; padding: 8px 16px; font-size: 11px; color: var(--mv-muted);
  border-top: 1px solid var(--mv-rule-soft); font-variant-numeric: tabular-nums;
}

/* 抽出した明細。223行を1画面に並べるので行高は詰める */
.scan__table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.scan__table th, .scan__table td {
  border-bottom: 1px solid var(--mv-rule-soft); padding: 3px 10px; text-align: left;
}
.scan__table thead th {
  position: sticky; top: 0; background: var(--mv-paper-2); font-size: 10.5px;
  color: var(--mv-muted); letter-spacing: .04em; z-index: 1;
}
.scan__table td.n, .scan__table th:not(:first-child) {
  text-align: right; font-family: var(--mv-font-num); font-variant-numeric: tabular-nums;
}
.scan__table tbody tr:hover td { background: var(--mv-blue-tint); }
.scan__table tr.is-minus td { color: var(--mv-red); }   /* 出精値引 */
.scan__table tfoot td {
  font-weight: 700; background: var(--mv-paper-2); border-top: 1px solid var(--mv-rule);
  text-align: right;
}

/* 読み切れなかった書類。取り繕わずに、原本を見てくださいと言う */
.scan__unread {
  margin: 0; padding: 14px 16px; background: var(--mv-yellow-bg);
  border-top: 1px solid var(--mv-yellow); font-size: 12.5px;
}
.scan__unread b { color: #7A5B00; }
.scan__unread p { margin: 4px 0 0; color: #7A5B00; line-height: 1.7; }

/* 添付の見出し行（受信トレイ）。束で届いたことを並びで見せる */
.mv-table tr.attgroup td {
  background: var(--mv-blue-tint); border-bottom: 1px solid var(--mv-blue-mid);
  padding: 7px 10px; white-space: normal;
}
.mv-table tr.attgroup b { font-size: 12px; font-family: var(--mv-font-head); }
.mv-table tr.attgroup span { font-size: 11px; color: var(--mv-muted); margin-left: 10px; }
.mv-table tr.is-inatt td:first-child { box-shadow: inset 3px 0 0 var(--mv-blue-mid); }
.pagetag { font-size: 10.5px; color: var(--mv-muted); }