/* アプリ共通のシェル。色・フォントは必ず tokens.css 由来 */

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);
}
/* 実ロゴ。180x60 の素材を縮小方向で使う。地色が白なので切り抜き不要 */
.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 { 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); }
.status {
  margin-left: auto; font-size: 12px; color: var(--mv-blue); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- 月次グリッド -------------------------------------------- */
.grid-scroll {
  overflow: auto; max-height: calc(100vh - 210px);
  border-top: 1px solid var(--mv-rule-soft); background: var(--mv-surface);
}
.mv-table .dow { display: block; font-size: 9px; font-weight: 400; color: var(--mv-muted); margin-top: 1px; }
.mv-table th.col-holiday { background: #EDF1F5; }
.mv-table .col-pos {
  position: sticky; left: 108px; z-index: 2; background: var(--mv-surface);
  font-size: 10.5px; color: var(--mv-muted); min-width: 92px; max-width: 92px;
  overflow: hidden; text-overflow: ellipsis;   /* 長い役職名は途中で切らず … で省く */
}
thead .col-pos, thead .mv-sticky-col { z-index: 4; background: var(--mv-paper-2); }
.mv-table .mv-sticky-col {
  min-width: 108px; max-width: 108px; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.mv-table .agg { background: var(--mv-paper-2); font-weight: 700; }
.mv-table td.is-cursor { outline: 2px solid var(--mv-blue); outline-offset: -2px; }
.cell-input {
  width: 56px; border: 0; padding: 0 2px; font-size: 12px; text-align: right;
  background: var(--mv-blue-tint); color: var(--mv-ink); font-family: var(--mv-font-num);
}
.cell-input:focus { outline: none; }

/* --- 汎用 ---------------------------------------------------- */
.page { max-width: 1080px; margin: 0 auto; padding: var(--mv-space-5); }
.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; }