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


/* ============================================================
   ここから安全書類・期限管理の固有部分

   方針: 面で塗らない。日付は「切れているか」だけが意味を持つので、
   色は期限切れ・30日以内・60日以内の3段にしか使わない。
   有効なものは無着色。全部に色を付けると、色が意味を失う。
   ============================================================ */

/* --- 画面の出自の注記 ----------------------------------------- */
.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.is-on { border-color: var(--mv-blue); box-shadow: 0 0 0 2px var(--mv-blue-tint); }
button.kpi { text-align: left; cursor: pointer; font: inherit; }

/* --- 残日数ゲージ（signature の小さいほう） --------------------
   ±180日の窓。中央の縦線が基準日。左に伸びていれば超過、右なら残り。
   数字だけだと、頭の中で引き算しないと危なさが分からない。 */
.gauge {
  position: relative; display: inline-flex; align-items: center;
  width: 126px; height: 16px; flex: none;
  background: var(--mv-paper-2); border: 1px solid var(--mv-rule-soft);
  border-radius: 3px; overflow: hidden; vertical-align: middle;
}
.gauge__fill { position: absolute; top: 0; bottom: 0; display: block; background: var(--mv-blue-mid); }
.gauge__now {
  position: absolute; top: -1px; bottom: -1px; left: 50%; width: 1.5px;
  background: var(--mv-ink); transform: translateX(-.75px);
}
.gauge em {
  position: relative; z-index: 1; width: 100%; text-align: center;
  font-family: var(--mv-font-num); font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-style: normal; font-weight: 600; color: #3D4C59;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.gauge.is-expired { border-color: color-mix(in srgb, var(--mv-red) 45%, transparent); }
/* 文字は濃い赤のまま読ませたいので、塗りは薄くする（赤地に赤字は読めない） */
.gauge.is-expired .gauge__fill { background: color-mix(in srgb, var(--mv-red) 32%, #fff); }
.gauge.is-expired em { color: var(--mv-red); font-weight: 700; }
.gauge.is-d30 { border-color: color-mix(in srgb, var(--mv-red) 30%, transparent); }
.gauge.is-d30 .gauge__fill { background: color-mix(in srgb, var(--mv-red) 22%, #fff); }
.gauge.is-d60 .gauge__fill { background: color-mix(in srgb, var(--mv-yellow) 45%, #fff); }
.gauge.is-ok  .gauge__fill { background: #9BC0DE; }
.gauge--none {
  background: repeating-linear-gradient(45deg, var(--mv-paper-2) 0 5px, var(--mv-surface) 5px 10px);
  justify-content: center;
}
.gauge--none span { font-size: 10px; color: var(--mv-muted); font-weight: 700; }

/* --- 工期タイムライン（signature element） ---------------------
   横軸は暦。工期を帯で置き、期限を目盛りとして立てる。
   工期の終わりより手前に立った目盛りが、その現場で必ず切れるもの。 */
.mv-timeline { display: block; width: 100%; height: auto; }
.mv-timeline .tick { stroke: var(--mv-rule-soft); stroke-width: 1; }
.mv-timeline .tick--year { stroke: var(--mv-rule); }
.mv-timeline--compact { height: 34px; }
.mv-timeline--axis { height: 30px; }
.mv-timeline .mo {
  font-family: var(--mv-font-num); font-size: 9px; fill: var(--mv-muted); text-anchor: middle;
}
.mv-timeline .term { fill: var(--mv-blue-tint); stroke: var(--mv-blue-mid); stroke-width: 1; }
.mv-timeline .term--unknown {
  fill: none; stroke: var(--mv-rule); stroke-dasharray: 4 4;
}
.mv-timeline .term-lbl {
  font-family: var(--mv-font-num); font-size: 9.5px; fill: var(--mv-muted);
}
.mv-timeline .term-lbl--end { text-anchor: end; }
.mv-timeline .now { stroke: var(--mv-ink); stroke-width: 1.5; }
.mv-timeline .now-lbl {
  font-family: var(--mv-font-num); font-size: 9.5px; fill: var(--mv-ink);
  text-anchor: middle; font-weight: 600;
}
.mv-timeline .pin { stroke-width: 2; stroke-linecap: round; }
.mv-timeline .pin--expired { stroke: var(--mv-red); }
.mv-timeline .pin--in      { stroke: #C87A16; }
.mv-timeline .pin--out     { stroke: var(--mv-rule); }

.tlkey { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mv-muted); }
.tlkey i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.tlkey .k-term { background: var(--mv-blue-tint); border: 1px solid var(--mv-blue-mid); }
.tlkey .k-now  { background: var(--mv-ink); width: 2px; height: 13px; border-radius: 0; }
.tlkey .k-exp  { background: var(--mv-red); width: 2px; height: 13px; border-radius: 0; }
.tlkey .k-in   { background: #C87A16; width: 2px; height: 13px; border-radius: 0; }
.tlkey .k-out  { background: var(--mv-rule); width: 2px; height: 13px; 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: 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: 300px; overflow: hidden; text-overflow: ellipsis; }
.mv-table td.wrap { white-space: normal; line-height: 1.4; padding-top: 5px; padding-bottom: 5px; }

/* --- 出自の印 --------------------------------------------------
   どのシートから来た値かを小さく添える。これが無いと
   「この日付はどこの数字か」を聞かれたときに答えられない。 */
.src {
  display: inline-block; font-size: 10.5px; color: var(--mv-muted);
  border: 1px solid var(--mv-rule-soft); border-radius: 3px; padding: 1px 5px;
  background: var(--mv-paper-2); white-space: nowrap;
}
.src--conflict { color: var(--mv-red); border-color: color-mix(in srgb, var(--mv-red) 35%, transparent);
                 background: var(--mv-red-bg); font-weight: 700; cursor: help; }
.src--new { color: var(--mv-green); border-color: color-mix(in srgb, var(--mv-green) 35%, transparent);
            background: var(--mv-green-bg); font-weight: 700; }

.chip {
  display: inline-block; font-size: 11px; color: var(--mv-blue); text-decoration: none;
  border: 1px solid var(--mv-rule-soft); border-radius: 999px; padding: 1px 8px;
  background: var(--mv-surface); white-space: nowrap;
}
.chip:hover { background: var(--mv-blue-tint); border-color: var(--mv-blue); }
.chip--muted { color: var(--mv-muted); }

/* --- 2段組（左に一覧・右に詳細） ------------------------------ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; 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: 108px 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 .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-missing dd { color: var(--mv-muted); font-style: italic; }
.field input.mv-input, .field select.mv-select { min-height: 32px; font-size: 13px; padding: 0 8px; }

/* --- 見出しつきの区切り --------------------------------------- */
.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; }

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

/* --- 帳票の見立て ---------------------------------------------- */
.paper {
  background: #fff; border: 1px solid var(--mv-rule); border-radius: 2px;
  box-shadow: var(--mv-shadow); padding: 26px 30px; font-size: 12px; line-height: 1.65;
}
.paper h2 {
  text-align: center; font-size: 17px; letter-spacing: .35em; margin: 0 0 18px;
  padding-bottom: 8px; border-bottom: 2px solid var(--mv-ink); text-indent: .35em;
}
.paper table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 12px; }
.paper th, .paper td { border: 1px solid var(--mv-rule); padding: 4px 7px; vertical-align: top; }
.paper th { background: var(--mv-paper-2); font-weight: 700; font-size: 10.5px; white-space: nowrap; width: 1%; }
.paper .miss { color: var(--mv-red); font-weight: 700; }
.paperwrap { overflow-x: auto; }

/* --- 入口のタイル ---------------------------------------------- */
.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); }
.tile .cnt { float: right; font-family: var(--mv-font-num); font-size: 18px; font-weight: 600; }
.tile .cnt--error { color: var(--mv-red); }

/* --- トースト --------------------------------------------------- */
.toastwrap {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: grid; gap: 8px; max-width: 380px;
}
.toastwrap .mv-toast { transition: opacity .3s; font-size: 12.5px; }

/* --- メールの下書き --------------------------------------------- */
.mail {
  font-family: var(--mv-font-body); font-size: 12.5px; line-height: 1.75; white-space: pre-wrap;
  background: var(--mv-paper-2); border: 1px solid var(--mv-rule-soft);
  border-radius: var(--mv-radius-sm); padding: 12px 14px; color: #23303C;
  max-height: 420px; overflow-y: auto;
}

/* --- 検索 --------------------------------------------------------- */
.search { position: relative; flex: 1 1 260px; max-width: 380px; }
.search .mv-input { width: 100%; min-height: 36px; font-size: 13px; padding-left: 30px; }
.search::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px;
  transform: translateY(-50%); pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%235A6B7A' stroke-width='1.6'/%3E%3Cpath d='M11 11l4 4' stroke='%235A6B7A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- 資格のタグ --------------------------------------------------- */
.quals { display: flex; flex-wrap: wrap; gap: 3px; }
.qual {
  font-size: 10.5px; border: 1px solid var(--mv-rule-soft); border-radius: 3px;
  padding: 1px 5px; background: var(--mv-paper-2); color: #3D4C59; white-space: nowrap;
}
.qual--key { border-color: var(--mv-blue-mid); color: var(--mv-blue); background: var(--mv-blue-tint); font-weight: 700; }

/* --- 施工体制のツリー ---------------------------------------------
   元請→一次→二次 の段差はインデントと縦線だけで出す。
   段ごとに背景を塗ると、期限切れの着色が読めなくなる。 */
.tree { list-style: none; margin: 0; padding: 0; }
.tree li { position: relative; padding: 8px 0 8px 22px; border-left: 2px solid var(--mv-rule-soft); margin-left: 8px; }
.tree li:first-child { border-left-color: transparent; margin-left: 0; padding-left: 0; }
.tree li::before {
  content: ""; position: absolute; left: -2px; top: 20px; width: 14px; height: 2px; background: var(--mv-rule-soft);
}
.tree li:first-child::before { display: none; }
.tree .tier { font-size: 10.5px; color: var(--mv-muted); font-weight: 700; letter-spacing: .04em; }
.tree .co { font-size: 14px; font-weight: 700; }
.tree .meta { font-size: 11.5px; color: var(--mv-muted); }

/* --- ナビが詰まったら横スクロール ----------------------------- */
@media (min-width: 761px) {
  .app-nav { flex: 0 1 auto; min-width: 0; max-width: 54vw;
             flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .app-bar > #whoami { flex: none; }
}