/* アプリ共通のシェル。色・フォントは必ず 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; }

/* ============================================================
   ここから原価管理の固有部分

   方針: 面で塗らない。予算・実績・発注残という3つの量の関係を、
   1本のバーと右寄せの数字で出す。色は「超過」と「赤字」だけに使う。
   ============================================================ */

/* --- 画面の出自の注記 ----------------------------------------- */
.origin {
  margin: 0 0 var(--mv-space-3); font-size: 11.5px; color: var(--mv-muted);
}
.origin b { color: var(--mv-ink); font-weight: 700; }

/* --- 件数の帯 ------------------------------------------------- */
.kpis { display: flex; gap: var(--mv-space-3); flex-wrap: wrap; margin-bottom: var(--mv-space-4); }
.kpi {
  flex: 1 1 150px; 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: 24px; line-height: 1.25; font-weight: 600;
}
.kpi span { font-size: 11.5px; color: var(--mv-muted); font-weight: 600; display: block; }
.kpi__sub { margin-top: 2px; font-weight: 400 !important; }
.kpi--error b { color: var(--mv-red); }
.kpi--warn  b { color: #7A5B00; }
.kpi--ok    b { color: var(--mv-green); }
.kpi--money b { font-size: 19px; }

/* --- 予実バー（signature element） ----------------------------
   実績（青）＋ 発注残（薄い青）を積み、実行予算の位置に縦線を立てる。
   線を越えた分だけ赤くなる。「あとどれだけ使えるか」が線までの距離。 */
.pbar {
  position: relative; display: flex; height: 13px; min-width: 130px; width: 100%;
  background: var(--mv-paper-2); border: 1px solid var(--mv-rule-soft);
  border-radius: 3px; overflow: hidden;
}
.pbar i { display: block; height: 100%; }
.pbar__act  { background: var(--mv-blue); }
.pbar__over { background: var(--mv-red); }
.pbar__rem  { background: #9BC0DE; }
/* 実行予算の位置。ここが越えてはいけない線 */
.pbar__mark {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--mv-ink); transform: translateX(-1px);
}
.pbar.is-over  { border-color: color-mix(in srgb, var(--mv-red) 45%, transparent); }
.pbar.is-tight { border-color: color-mix(in srgb, var(--mv-yellow) 60%, 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; }
.barkey .k-act  { background: var(--mv-blue); }
.barkey .k-rem  { background: #9BC0DE; }
.barkey .k-over { background: var(--mv-red); }
.barkey .k-mark { background: var(--mv-ink); width: 2px; height: 12px; border-radius: 0; }

/* --- 一覧 ------------------------------------------------------ */
.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); margin-bottom: var(--mv-space-4);
}
.list-scroll .mv-table { width: 100%; }
.mv-table td { height: 32px; }
.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 tfoot td, .mv-table tr.sumrow td {
  background: var(--mv-paper-2); font-weight: 700;
  border-top: 1px solid var(--mv-rule); position: sticky; bottom: 0;
}

/* 赤字・薄利。ここだけ色を使う */
.neg  { color: var(--mv-red); font-weight: 700; }
.thin { color: #7A5B00; font-weight: 700; }

/* --- 階層のある表（実行予算・工事台帳） -----------------------
   費目→工種→種別→品名 の段差はインデントと文字の太さだけで出す。
   行ごとに背景を塗ると、超過の着色が読めなくなる。 */
.lv1 > td:first-child { font-weight: 700; padding-left: 8px; }
.lv2 > td:first-child { padding-left: 26px; }
.lv3 > td:first-child { padding-left: 44px; color: var(--mv-muted); }
.lv4 > td:first-child { padding-left: 62px; color: var(--mv-muted); font-size: 12px; }
tr.lv1 td { background: var(--mv-paper-2); }
tr.grp-el td { background: var(--mv-blue-tint); font-weight: 700; }
.twist {
  display: inline-block; width: 14px; color: var(--mv-muted); cursor: pointer;
  font-family: var(--mv-font-num); font-size: 10px; user-select: none;
}
tr.is-collapsed { display: none; }

/* --- 見出しつきの区切り -------------------------------------- */
.secthead {
  display: flex; align-items: baseline; gap: var(--mv-space-3); flex-wrap: wrap;
  margin: 0 0 var(--mv-space-3);
}
.secthead h3 { margin: 0; }
.secthead .muted { margin: 0; }

/* --- 2段組（左に一覧・右に詳細） ----------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--mv-space-4); align-items: start;
}
.split__side { position: sticky; top: 72px; max-height: calc(100vh - 92px); overflow-y: auto; padding-right: 2px; }
.split__side .card:last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
  .split__side { position: static; max-height: none; overflow: visible; }
}

/* --- 定義リスト（工事の基本情報・支払の内訳） ---------------- */
.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: 104px 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; flex-wrap: wrap; }
.field .val { font-weight: 600; }
.field .sub { font-size: 11px; color: var(--mv-muted); }
.field .val.num { font-family: var(--mv-font-num); font-variant-numeric: tabular-nums; }
.field.is-bad { background: var(--mv-red-bg); }
.field.is-bad .val { color: var(--mv-red); }
.field input.mv-input, .field select.mv-select { min-height: 32px; 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; margin: 0; }

/* --- 帳票の見立て（注文書・支払通知書・請求書） -------------- */
.paper {
  background: #fff; border: 1px solid var(--mv-rule); border-radius: 2px;
  box-shadow: var(--mv-shadow); padding: 28px 32px; font-size: 12.5px; line-height: 1.7;
}
.paper h2 {
  text-align: center; font-size: 19px; letter-spacing: .4em; margin: 0 0 20px;
  padding-bottom: 8px; border-bottom: 2px solid var(--mv-ink); text-indent: .4em;
}
.paper table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 14px; }
.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: 92px 1fr; gap: 2px 10px; margin: 0 0 12px; font-size: 12px; }
.paper dt { color: #444; }
.paper dd { margin: 0; }
.paper__total {
  margin: 14px 0 18px; 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: 21px; }

/* --- 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;
}

/* --- 入口のタイル -------------------------------------------- */
.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; }
.tile .from { font-size: 10.5px; color: var(--mv-muted); display: block; margin-top: 6px;
              font-family: var(--mv-font-num); }

/* --- 業務の流れ（回路） --------------------------------------
   受注から回収までを1本の直列回路として描く。勤怠・請求書処理と同じ語彙。 */
.mv-circuit { display: block; width: 100%; max-width: 980px; }
.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 .node--bad  { stroke: var(--mv-red); }
.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 420; stroke-dashoffset: 430;
  animation: mv-energize 2s 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; }
}

/* --- 帯グラフ（要素別の構成比） ------------------------------ */
.stack { display: flex; height: 18px; border-radius: 3px; overflow: hidden;
         border: 1px solid var(--mv-rule-soft); background: var(--mv-paper-2); }
.stack i { display: block; height: 100%; }
.stack .e1 { background: var(--mv-blue); }
.stack .e2 { background: var(--mv-blue-mid); }
.stack .e3 { background: #9BC0DE; }
.stack .e4 { background: #CBDDEB; }
.stackkey { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mv-muted); }
.stackkey i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* 予算が無い工事のバー。比較できないことを文字で言う */
.pbar--none {
  background: repeating-linear-gradient(45deg, var(--mv-paper-2) 0 6px, var(--mv-surface) 6px 12px);
  align-items: center; justify-content: center; height: 13px;
}
.pbar--none span { font-size: 10px; color: var(--mv-muted); font-weight: 700; line-height: 1; }

/* 右側の狭い欄に置く表は自分で横スクロールする。
   親を広げると本文の表が押し出されるため。 */
.tblwrap { overflow-x: auto; }
.tblwrap .mv-table { width: 100%; min-width: 360px; }

/* 工事名・件名など長い文字列の列。折り返さず切る（行高が崩れると異常値を目で拾えない） */
.mv-table td.doc { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

/* 画面数が多いので、ナビが詰まったら横スクロールさせる。
   折り返すと誰でログインしているかのバッジが2行目に落ちる。 */
@media (min-width: 761px) {
  /* 折り返さずに1行で収め、入りきらない分は横スクロール。
     折り返すとアプリバーが2段になり、下の表の位置が画面ごとに変わる。 */
  .app-nav { flex: 0 1 auto; min-width: 0; max-width: 52vw;
             flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .app-bar > #whoami { flex: none; }
}