/* ============================================================
   プリミティブ。tokens.css を前提とする。

   方針: Excel のメンタルモデルは捨てない。ただし「罫線1本だけの平面」から
   一段引き上げ、余白・段差・状態変化で操作対象を分かるようにする。
   装飾は増やさない。増やすのは情報の階層と手触り。
   ============================================================ */

.mv-root {
  font-family: var(--mv-font-body);
  font-weight: var(--mv-body-weight);
  color: var(--mv-ink);
  background: var(--mv-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--mv-font-head);
  font-weight: var(--mv-head-weight);
  letter-spacing: .01em;
  text-wrap: balance;
}

/* --- Button ------------------------------------------------- */
.mv-btn {
  font-family: var(--mv-font-body); font-size: 14px; font-weight: 600;
  min-height: var(--mv-tap-min); padding: 0 var(--mv-space-5);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--mv-blue); border-radius: var(--mv-radius-sm);
  background: var(--mv-blue); color: #fff; cursor: pointer;
  box-shadow: var(--mv-shadow-sm);
  transition: background var(--mv-dur) var(--mv-ease),
              border-color var(--mv-dur) var(--mv-ease),
              box-shadow var(--mv-dur) var(--mv-ease),
              transform var(--mv-dur) var(--mv-ease);
}
.mv-btn:hover { background: var(--mv-blue-dark); border-color: var(--mv-blue-dark);
                box-shadow: var(--mv-shadow); }
.mv-btn:active { transform: translateY(1px); box-shadow: none; }

.mv-btn--secondary { background: var(--mv-surface); color: var(--mv-blue); border-color: var(--mv-rule); }
.mv-btn--secondary:hover { background: var(--mv-blue-tint); border-color: var(--mv-blue); }
.mv-btn--danger { background: var(--mv-red); border-color: var(--mv-red); }
.mv-btn--danger:hover { background: #A81217; border-color: #A81217; }
.mv-btn--ghost { background: transparent; color: var(--mv-muted); border-color: transparent; box-shadow: none; }
.mv-btn--ghost:hover { background: var(--mv-paper-2); color: var(--mv-ink); }
.mv-btn--sm { min-height: 34px; font-size: 13px; padding: 0 var(--mv-space-3); }
.mv-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.mv-btn:disabled:hover { background: var(--mv-blue); border-color: var(--mv-blue); transform: none; }

/* --- Input / TimeInput / Select ------------------------------ */
.mv-input, .mv-select {
  font-family: var(--mv-font-body); font-size: 16px; /* iOS のズーム抑止に 16px 以上 */
  min-height: var(--mv-tap-min); padding: 0 var(--mv-space-3);
  border: 1px solid var(--mv-rule); border-radius: var(--mv-radius-sm);
  background: var(--mv-surface); color: var(--mv-ink); width: 100%;
  transition: border-color var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease);
}
.mv-input:hover, .mv-select:hover { border-color: var(--mv-blue-mid); }
.mv-input:focus, .mv-select:focus {
  outline: none; border-color: var(--mv-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mv-blue) 18%, transparent);
}
.mv-input::placeholder { color: #9AA9B6; }
.mv-select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235A6B7A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
/* 時刻は必ず等幅。桁が揃わないと異常を目で拾えない */
.mv-timeinput {
  font-family: var(--mv-font-num); font-weight: var(--mv-num-weight);
  font-variant-numeric: tabular-nums; text-align: center; letter-spacing: .02em;
}
.mv-field { display: block; }
.mv-field > .mv-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--mv-muted);
  margin-bottom: var(--mv-space-1); letter-spacing: .02em;
}

/* --- Card ---------------------------------------------------- */
.mv-card {
  background: var(--mv-surface); border: 1px solid var(--mv-rule-soft);
  border-radius: var(--mv-radius); box-shadow: var(--mv-shadow-sm);
}

/* --- Table（Excel に似せる） ---------------------------------
   ヘッダは内容に合わせて伸びること。固定高にすると2行の見出しが
   枠線に食い込む。行だけ Excel 相当の高さを保つ。 */
.mv-table { border-collapse: separate; border-spacing: 0; background: var(--mv-surface); font-size: 13px; }
.mv-table th, .mv-table td {
  border-right: 1px solid var(--mv-rule-soft);
  border-bottom: 1px solid var(--mv-rule-soft);
  padding: 0 8px; white-space: nowrap; vertical-align: middle;
}
.mv-table td { height: var(--mv-row-h); }
.mv-table thead th {
  background: var(--mv-paper-2); font-family: var(--mv-font-head);
  font-weight: 700; font-size: 11px; color: var(--mv-muted);
  letter-spacing: .04em; text-align: left;
  padding-top: 7px; padding-bottom: 7px;   /* 高さは内容で決まる */
  height: auto; line-height: 1.35;
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--mv-rule);
}
.mv-table td.mv-num { font-family: var(--mv-font-num); font-variant-numeric: tabular-nums; text-align: right; }
.mv-table tbody tr { transition: background var(--mv-dur) var(--mv-ease); }
.mv-table tbody tr:hover td { background: var(--mv-blue-tint); }
/* 行=社員 / 列=日 の左端は固定 */
.mv-table .mv-sticky-col { position: sticky; left: 0; background: var(--mv-surface); z-index: 2; }
/* 異常値のみ着色。正常は無着色 */
.mv-cell--attention { background: var(--mv-yellow-bg); color: #7A5B00; font-weight: 700; }
.mv-cell--violation { background: var(--mv-red-bg); color: var(--mv-red); font-weight: 700; }
.mv-cell--ok { background: var(--mv-green-bg); color: var(--mv-green); }
.mv-table td:focus-visible { outline: var(--mv-focus); outline-offset: -2px; background: var(--mv-blue-tint); }

/* --- Badge ---------------------------------------------------
   色だけに頼らない。左の丸で状態を二重符号化する。 */
.mv-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; line-height: 1;
  padding: 5px var(--mv-space-2); border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.mv-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mv-badge--ok        { background: var(--mv-green-bg);  color: var(--mv-green); border-color: color-mix(in srgb, var(--mv-green) 35%, transparent); }
.mv-badge--attention { background: var(--mv-yellow-bg); color: #7A5B00;         border-color: color-mix(in srgb, var(--mv-yellow) 55%, transparent); }
.mv-badge--violation { background: var(--mv-red-bg);    color: var(--mv-red);   border-color: color-mix(in srgb, var(--mv-red) 35%, transparent); }
.mv-badge--neutral   { background: var(--mv-paper-2);   color: var(--mv-muted); border-color: var(--mv-rule-soft); }
.mv-badge--plain::before { display: none; }

/* --- Dialog / Toast ------------------------------------------ */
.mv-dialog {
  border: 1px solid var(--mv-rule-soft); border-radius: var(--mv-radius-lg);
  background: var(--mv-surface); padding: var(--mv-space-6); max-width: 520px;
  box-shadow: var(--mv-shadow-lg); color: var(--mv-ink);
}
.mv-dialog::backdrop { background: rgba(7, 21, 35, .38); backdrop-filter: blur(2px); }
.mv-toast {
  border: 1px solid var(--mv-rule-soft); border-left: 4px solid var(--mv-blue);
  background: var(--mv-surface);
  padding: var(--mv-space-3) var(--mv-space-4); border-radius: var(--mv-radius-sm);
  box-shadow: var(--mv-shadow);
}
.mv-toast--ok        { border-left-color: var(--mv-green); }
.mv-toast--violation { border-left-color: var(--mv-red); }

/* ============================================================
   ApprovalCircuit — signature element
   承認フローを「直列回路」として描く。
   未承認の承認者は開放接点、承認済は閉路。全員が承認されて回路が
   閉じたとき初めて「確定」が通電する。大胆さはここだけに使う。
   ============================================================ */

.mv-circuit { display: block; width: 100%; max-width: 720px; }
.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 .flow {
  stroke: var(--mv-green); stroke-width: 3; fill: none;
  stroke-dasharray: 10 320; stroke-dashoffset: 330;
  animation: mv-energize 1.6s linear infinite;
}
@keyframes mv-energize { to { stroke-dashoffset: -10; } }

/* prefers-reduced-motion では点灯のみ（流れは止める） */
@media (prefers-reduced-motion: reduce) {
  .mv-circuit .flow { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: .55; }
}