/* SHIROE Workforce - モバイルファースト共通スタイル */
/* 改良R10: 見た目の洗練(トークン刷新)。方針は docs/DESIGN.md 参照。
   わかりやすさ・情報密度・コントラスト・タップ領域(44px)は落とさないことが絶対条件。 */
:root {
  --ink: #182230;      /* 本文 */
  --muted: #5b6672;    /* 補助テキスト(旧#66707dよりコントラスト改善) */
  --paper: #eef1f4;    /* ページ背景 */
  --card: #ffffff;
  --line: #d8dee5;
  --line-strong: #c3cbd4;

  --indigo: #1f3d63;        /* 主要操作・ブランド(万年筆インクの藍) */
  --indigo-deep: #142a47;   /* hover/active */
  --indigo-soft: #e6ecf4;   /* ティント背景(アクティブなナビ等) */

  --seal: #a3362a;          /* 危険・要対応(朱肉寄りの赤) */
  --seal-soft: #f6e3e0;
  --ok: #1f7a4c;            /* 個人事業主/承認系の緑 */
  --ok-soft: #e1f2e7;
  --warn: #8a5c07;          /* 警告(琥珀) */
  --warn-soft: #faecd0;

  --employee: var(--indigo);  /* 従業員 = 藍 */
  --contractor: var(--ok);    /* 個人事業主 = 緑 */

  /* 後方互換(旧トークン名を直接参照するマークアップ・スクリプトに備える) */
  --primary: var(--indigo);
  --primary-dark: var(--indigo-deep);
  --text: var(--ink);
  --bg: var(--paper);
  --danger: var(--seal);

  --radius-sm: 4px;   /* 入力・表・マス目・チップ */
  --radius-md: 8px;   /* ボタン・タブ */
  --radius-lg: 12px;  /* カード・ダイアログ */
  --radius: var(--radius-lg); /* 後方互換エイリアス */

  --shadow-1: 0 1px 2px rgba(20, 30, 45, .06), 0 1px 1px rgba(20, 30, 45, .04);
  --shadow-2: 0 8px 28px rgba(15, 25, 40, .16);

  --font-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 見出しは明朝体で統一。証書・請求書に明朝を使う商習慣に沿った差別化で、
   本文・数値のゴシックとの対比だけで階層をつくる(装飾フォントの追加なし)。 */
h1, h2, h3 {
  font-family: var(--font-mincho);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
}

/* キーボード操作の可視化(WCAG)。クリック操作の見た目は変えない。 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

header.appbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
header.appbar h1 { font-size: 1rem; margin: 0; }
header.appbar .who { font-size: 0.8rem; color: var(--muted); }

main { max-width: 860px; margin: 0 auto; padding: 1rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1rem;
}
.card h2 { font-size: 1rem; margin: 0 0 0.75rem; }

.notice {
  border-left: 4px solid var(--contractor);
  background: var(--ok-soft);
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.15rem; }
input, select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  margin-bottom: 0.75rem;
  background: #fff;
  color: var(--ink);
}
textarea { min-height: 4rem; resize: vertical; }

button {
  font-size: 1rem;
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--indigo);
  color: #fff;
  cursor: pointer;
}
button:hover { background: var(--indigo-deep); }
button.secondary { background: #e4e8ee; color: var(--ink); }
button.secondary:hover { background: #d5dbe4; }
/* ボタンの見た目をしたリンク(ヘッダのパスワード変更など)。高さをボタンと揃える */
a.btnlike {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.65rem 1.1rem; border-radius: var(--radius-md);
  background: #e4e8ee; color: var(--ink); text-decoration: none;
  font-size: 1rem; white-space: nowrap;
}
a.btnlike:hover { background: #d5dbe4; }
button.big { width: 100%; padding: 1rem; font-size: 1.15rem; }
button.green { background: var(--contractor); }
button.green:hover { background: #145c38; }
button.outline-danger {
  background: transparent; color: var(--seal); border: 1px solid var(--seal);
}
button.outline-danger:hover { background: var(--seal-soft); }
button:disabled { opacity: 0.5; cursor: default; }

/* 取り消せない操作のボタン2段階確認(ui.js confirmAction)。
   window.confirm の代替。武装中は危険色にして「押すと実行される」ことを見せる */
button.confirm-armed { background: var(--seal); }
button.confirm-armed:hover { background: #7f2a20; }
button.confirm-cancel { margin-left: 0.35rem; }

.row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 130px; }

/* R23: スマホ幅で表の見出しが1文字ずつ縦に折り返る事故の修正(領収書の一覧で発生・オーナー指摘)。
   原因: table{width:100%} のもとでは、列は container 幅に収まるまで潰せる。日本語は
   単語の区切り(スペース)が無く、既定では文字と文字の間ならどこでも折り返せてしまうため、
   「取引日付」のような短い見出しでも1文字幅(min-content)まで潰されてしまい、
   .table-wrap の overflow-x:auto が仕事をする前に文字が縦積みになっていた。
   (payroll.html の table.wide-payroll に R18 で入れた width:max-content の考え方と同じ:
   「潰せる最小幅」を文字の折り返し任せにせず、内容の自然な幅を下限にする。)
   直し方: table の min-width を max-content(=一切折り返さなかった場合の幅)にする。
   これで table{width:100%} は「入るなら100%、入らないなら内容の幅」になり、
   入らない場合だけ .table-wrap が横スクロールに倒れる(潰れて読めない→横に流れる、の一点だけ変わる)。
   th はさらに明示的に nowrap にして見出しだけは常に1行を保証する(要素数が少なく、
   見出しの折り返しが起きると一覧そのものが読みにくくなるため)。
   .table-wrap を使う画面全部(17画面)に効く共通修正で、画面ごとの個別対応はしていない。 */
table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600;
}
.badge.pending  { background: var(--warn-soft); color: var(--warn); }
.badge.approved, .badge.accepted, .badge.received { background: var(--ok-soft); color: var(--ok); }
.badge.rejected { background: var(--seal-soft); color: var(--seal); }
.badge.withdrawn, .badge.declined { background: #eceff3; color: var(--muted); }
/* R6: 電子サインの状態バッジ */
.badge.sent { background: var(--warn-soft); color: var(--warn); }
.badge.viewed { background: var(--indigo-soft); color: var(--indigo); }
.badge.signed { background: var(--ok-soft); color: var(--ok); }
.badge.expired, .badge.revoked { background: var(--seal-soft); color: var(--seal); }

/* R7: 収集項目ピッカー(署名依頼で相手に入力してもらう項目のチェックリスト) */
.field-picker { margin-bottom: .75rem; }
.field-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .87rem;
}
.field-row label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: inherit; color: var(--ink); }
.field-row input[type="checkbox"] { width: auto; margin: 0; }
.field-row.fixed { color: var(--muted); }
.field-row.fixed small { color: var(--muted); font-size: .75rem; }
.field-row .f-req { font-size: .78rem; color: var(--muted); flex: 0 0 auto; }
.field-row.custom { gap: .5rem; }
.field-row.custom .f-custom-label { flex: 1; margin: 0; padding: .35rem .5rem; font-size: .87rem; }
.field-row.custom .remove-custom-field { flex: 0 0 auto; padding: .3rem .6rem; font-size: .78rem; }
.field-picker .add-custom-field { margin-top: .5rem; font-size: .85rem; padding: .4rem .8rem; }

/* R7: 署名ウィザード(sign.html) */
.wizard-steps { display: flex; gap: .3rem; margin-bottom: .9rem; font-size: .74rem; color: var(--muted); flex-wrap: wrap; }
.wizard-steps .step { flex: 1; text-align: center; padding: .4rem .2rem; border-bottom: 3px solid var(--line); min-width: 60px; }
.wizard-steps .step.active { color: var(--indigo); border-color: var(--indigo); font-weight: 700; }
.wizard-steps .step.done { color: var(--ok); border-color: var(--ok); }
.confirm-table td { padding: .35rem .5rem; }
.confirm-table td.k { color: var(--muted); width: 40%; white-space: nowrap; }
.sig-method-tabs { display: flex; gap: .4rem; margin-bottom: .6rem; }
.sig-method-tabs button { flex: 1; background: #e4e8ee; color: var(--ink); font-size: .88rem; padding: .55rem; }
.sig-method-tabs button.active { background: var(--indigo); color: #fff; }

.msg { font-size: 0.9rem; margin: 0.5rem 0; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--seal); }

/* タブ(管理画面の画面内切替。ページ移動のナビ(.navlinks)とは役割を分け、
   こちらは常に塗りのセグメントコントロールにして「同じ画面の中の切替」だと分かるようにする) */
.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs button {
  background: #e4e8ee; color: var(--ink); font-size: 0.9rem; padding: 0.5rem 0.9rem;
  border-radius: var(--radius-md);
}
.tabs button.active { background: var(--indigo); color: #fff; }

/* カレンダー */
.cal-nav { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.cal-nav h3 { margin: 0; font-size: 1.05rem; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar .dow { text-align: center; font-size: 0.75rem; color: var(--muted); padding: 0.25rem 0; }
.calendar .day {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 72px;
  padding: 0.2rem 0.3rem;
  font-size: 0.72rem;
}
.calendar .day .num { font-weight: 600; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.calendar .day.blank { background: transparent; border: none; }
.chip {
  display: block;
  border-radius: 4px;
  padding: 0 0.3rem;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.chip.employee { background: var(--employee); }
.chip.contractor { background: var(--contractor); }
.legend { display: flex; gap: 1rem; font-size: 0.8rem; margin: 0.5rem 0; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  max-width: 420px;
  width: calc(100% - 2rem);
  box-shadow: var(--shadow-2);
}
dialog::backdrop { background: rgba(15, 22, 33, .45); }
dialog h3 { margin-top: 0; font-size: 1rem; }
dialog .dlg-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }

.login-wrap { max-width: 380px; margin: 8vh auto 0; padding: 1rem; }
.login-wrap .brand { text-align: center; margin-bottom: 1.5rem; }
.login-wrap .brand h1 { font-size: 1.5rem; margin: 0.5rem 0 0; letter-spacing: .06em; }
.login-wrap .brand p { color: var(--muted); font-size: 0.85rem; margin: .3rem 0 0; }

/* デモアカウント一覧: 本番のログインボタン(.big, 藍色ベタ塗り)と強さを分ける。
   同じ濃い青が縦に4つ並んで「どれが本番の操作か分からない」状態だったのを解消する。 */
#demoCard p { color: var(--muted); font-size: .82rem; margin: 0 0 .5rem; font-weight: 600; }
.demo-account {
  display: block; width: 100%; text-align: left;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .78rem; line-height: 1.5;
  padding: .55rem .7rem; min-height: 44px;
}
.demo-account:hover { border-color: var(--indigo); background: var(--indigo-soft); }

@media (min-width: 600px) {
  .calendar .day { min-height: 96px; font-size: 0.78rem; }
}

/* ==== P1追加: ナビ・ダッシュボード・印刷 ==== */
/* R10: ページ間移動のナビは「帳簿の見出しタブ」— 静かな下線インジケータ方式に変更。
   実行ボタン(青いベタ塗り)と視覚的な強さを分離し、14項目が並んでも騒がしくならない。 */
.navlinks {
  display: flex; gap: 0.15rem; flex-wrap: wrap; margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.navlinks a {
  color: var(--muted); text-decoration: none;
  font-size: 0.85rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.navlinks a:hover { background: var(--indigo-soft); color: var(--indigo); }
.navlinks a.active {
  background: var(--indigo-soft); color: var(--indigo); font-weight: 700;
  border-bottom-color: var(--indigo);
}

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0.8rem 1rem; text-decoration: none; color: var(--ink); display: block;
}
.stat:hover { border-color: var(--indigo); box-shadow: var(--shadow-1); }
.stat .num { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 0.8rem; color: var(--muted); }
.stat.alert .num { color: var(--seal); }

.module-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.module-links a {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1rem; text-decoration: none; color: var(--ink); font-weight: 600;
}
.module-links a:hover { border-color: var(--indigo); color: var(--indigo); box-shadow: var(--shadow-1); }
.module-links a small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; margin-top: 0.2rem; }

.items-editor .item-row { display: grid; grid-template-columns: 3fr 1fr 1.5fr 1fr auto; gap: 0.4rem; margin-bottom: 0.4rem; }
.items-editor .item-row input, .items-editor .item-row select { margin-bottom: 0; }

.print-sheet {
  background: #fff; max-width: 720px; margin: 1rem auto; padding: 2.5rem;
  border: 1px solid var(--line); white-space: pre-wrap; line-height: 1.9; font-size: 0.95rem;
}
.print-sheet h1 { font-size: 1.4rem; }
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .print-sheet { border: none; margin: 0; padding: 0; max-width: none; }
}

/* ==== R2追加: マトリクス・個人ページ ==== */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: .72rem; }
table.matrix th, table.matrix td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; }
table.matrix thead th { background: #eef1f5; color: var(--muted); font-weight: 600; padding: .3rem .1rem; text-align: center; min-width: 30px; }
table.matrix thead th.sat { color: #1b537f; }
table.matrix thead th.sun { color: var(--seal); }
table.matrix th.who { position: sticky; left: 0; z-index: 2; background: var(--card); text-align: left; padding: .35rem .6rem; min-width: 130px; color: var(--ink); font-weight: 600; }
table.matrix thead th.who { background: #eef1f5; z-index: 3; }
table.matrix td { height: 34px; text-align: center; vertical-align: middle; }
table.matrix td.off { background: #fafbfc; }
table.matrix .cell { display: block; font-size: .62rem; line-height: 1.15; padding: 2px 1px; border-radius: 3px; }
table.matrix .cell.approved { background: var(--indigo-soft); color: var(--indigo); }
table.matrix .cell.pending { background: var(--warn-soft); color: var(--warn); }
table.matrix td .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); margin-top: 1px; }
table.matrix th.who a { color: var(--indigo); text-decoration: none; }
table.matrix th.who a:hover { text-decoration: underline; }

.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin-bottom: .75rem; }
.kpi .box { background: #f7f9fb; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .7rem; }
.kpi .box .v { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .box .k { font-size: .75rem; color: var(--muted); }
.kpi .box.warn .v { color: var(--seal); }

.inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) auto; gap: .4rem; align-items: end; }
.inline-form input, .inline-form select { margin-bottom: 0; }

/* ==== R4: 共通ヘッダ / ナビ / バッジ / トースト / 空状態 ==== */
header.appbar { flex-wrap: wrap; row-gap: .35rem; }
.appbar-main { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.appbar-side { display: flex; align-items: center; gap: .5rem; }
.appbar .brand {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  color: var(--ink); font-size: .92rem; font-weight: 700; white-space: nowrap;
  font-family: var(--font-mincho); letter-spacing: .03em;
}
.appbar .brand:hover { color: var(--indigo); }
.appbar h1 {
  font-size: .95rem; margin: 0; padding-left: .6rem; border-left: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--muted);
}
.appbar .who { display: inline-flex; flex-direction: column; line-height: 1.15; text-align: right; }
.appbar .who small { font-size: .68rem; color: var(--muted); }

.navlinks a { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--seal); color: #fff; font-size: .68rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* R10バグ修正: [hidden] と同じ詳細度の .nav-badge{display:inline-flex} が勝ってしまい、
   件数0やNaNのバッジまで常時表示されていた(勤怠・稼働タブで実際に「NaN」が出ていた)。
   属性セレクタを重ねて確実に隠す。 */
.nav-badge[hidden] { display: none; }
.navlinks a.active .nav-badge { background: #fff; color: var(--seal); }

.toast-host {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: .4rem; z-index: 1000;
  width: min(520px, calc(100vw - 24px)); pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff; border-radius: var(--radius-sm); padding: .7rem .9rem;
  font-size: .9rem; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast.ok { background: #145c38; }
.toast.err { background: #832820; }

.empty { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem .5rem; text-align: center; }
.empty strong { font-size: .92rem; color: var(--ink); font-weight: 600; }
.empty span { font-size: .82rem; color: var(--muted); }
.empty-action {
  align-self: center; margin-top: .4rem; font-size: .85rem; text-decoration: none;
  background: var(--indigo); color: #fff; padding: .45rem .9rem; border-radius: var(--radius-md);
  min-height: 44px; display: inline-flex; align-items: center;
}
.empty-action:hover { background: var(--indigo-deep); }
tr.empty-row td { border-bottom: none; }

/* 打刻カード */
.punch-card { text-align: center; padding: .5rem 0 0; }
.punch-state { font-size: 1.55rem; font-weight: 700; margin: .1rem 0 .15rem; }
.punch-state.working { color: var(--ok); }
.punch-state.done { color: var(--muted); }
.punch-detail { font-size: .92rem; color: var(--muted); margin-bottom: .9rem; font-variant-numeric: tabular-nums; }
button.punch {
  width: 100%; min-height: 88px; font-size: 1.45rem; font-weight: 700; border-radius: 14px;
  letter-spacing: .08em;
}
button.punch.out { background: var(--muted); }
button.punch.out:hover { background: #4f5966; }
button.punch:disabled { background: #cfd6dd; color: #7c8794; }
.punch-sub { display: flex; justify-content: center; gap: 1rem; margin-top: .6rem; font-size: .8rem; }
.punch-sub button { background: none; color: var(--indigo); padding: .35rem .2rem; min-height: 44px; }
.punch-sub button:hover { background: none; text-decoration: underline; }

/* タップターゲット(WCAG/Material/デジタル庁 の 44px 目安) */
.pick-cal button.day-btn { min-height: 44px; }
.tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.tabs button { white-space: nowrap; min-height: 44px; }
.tabs .tab-badge {
  display: inline-block; margin-left: .3rem; background: var(--seal); color: #fff;
  border-radius: 999px; font-size: .68rem; padding: 0 .35rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* R10バグ修正: nav-badge と同じ [hidden] 上書き問題が画面内タブのバッジにもあった
   (admin.html のシフト承認/打刻の修正・漏れ等が常に「0」表示になっていた)。同様に修正。 */
.tab-badge[hidden] { display: none; }
.tabs button.active .tab-badge { background: #fff; color: var(--seal); }

label .req { color: var(--seal); font-size: .78rem; margin-left: .2rem; }

details.section { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .6rem; }
details.section > summary {
  cursor: pointer; font-size: 1rem; font-weight: 600; padding: .6rem 0; list-style: none;
  display: flex; align-items: center; gap: .4rem; min-height: 44px;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: '▸'; color: var(--muted); }
details.section[open] > summary::before { content: '▾'; }

.bulk-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--indigo-soft); border: 1px solid #cbd8e9; border-radius: var(--radius-sm);
  padding: .5rem .7rem; margin-bottom: .6rem; font-size: .88rem;
}
.bulk-bar button { min-height: 44px; }
td.pick, th.pick { width: 34px; text-align: center; }
td.pick input, th.pick input { width: 18px; height: 18px; margin: 0; }

@media (max-width: 480px) {
  .appbar h1 { font-size: .9rem; }
  .appbar .brand span { display: none; }
  main { padding: .75rem; }
}

/* ==== R5: 月次勤怠ボード ==== */
.board-head { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.board-nav { display: flex; align-items: center; gap: .4rem; }
.board-nav input[type=month] { margin: 0; width: 150px; }
.board-nav button { min-width: 44px; min-height: 44px; font-size: 1.1rem; line-height: 1; padding: 0 .6rem; }
.board-title { font-size: 1.05rem; font-weight: 700; margin-left: .3rem; font-variant-numeric: tabular-nums; }
.board-tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-left: auto; font-size: .85rem; }
.board-tools label { font-size: .8rem; color: var(--muted); }

.board-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.board-kpi .box { background: #f7f9fb; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .6rem; }
.board-kpi .box .v { font-size: 1.25rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.board-kpi .box .k { font-size: .72rem; color: var(--muted); }
.board-kpi .box.warn .v { color: var(--seal); }

.board-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
table.board { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .85rem; }
table.board th, table.board td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.board thead th { background: #eef1f5; color: var(--muted); font-size: .75rem; font-weight: 600; text-align: right; }
table.board thead th.who, table.board tfoot th.who { text-align: left; }
table.board th.who {
  position: sticky; left: 0; z-index: 2; background: var(--card);
  text-align: left; min-width: 118px; font-weight: 600;
}
table.board thead th.who { background: #eef1f5; z-index: 3; }
table.board tfoot th.who { background: #f2f5f8; }
table.board th.who a { color: var(--indigo); text-decoration: none; }
table.board tbody tr { cursor: pointer; }
table.board tbody tr:hover td, table.board tbody tr:hover th.who { background: var(--indigo-soft); }
table.board tbody tr:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
table.board td.num, table.board th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.board td.num small { color: var(--muted); font-size: .72rem; margin-left: 1px; }
table.board td.num .zero { color: #b6bec7; }
table.board tfoot td, table.board tfoot th { background: #f2f5f8; font-weight: 600; }

.ot-wrap { display: flex; align-items: center; gap: .45rem; min-width: 150px; }
.ot-bar { flex: 1; height: 9px; background: #e9edf2; border-radius: 999px; overflow: hidden; }
.ot-bar span { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.ot-bar.some span { background: #b98300; }
.ot-bar.over span { background: var(--seal); }
.ot-num { font-variant-numeric: tabular-nums; font-size: .82rem; min-width: 48px; text-align: right; }
.ot-num.some { color: var(--warn); }
.ot-num.over { color: var(--seal); font-weight: 700; }
.ot-num.none { color: #b6bec7; }

table.board td.days, table.board th.days { padding: .3rem .45rem; }
table.board th.days .dh {
  display: inline-block; width: 11px; margin-right: 1px; text-align: center;
  font-size: .55rem; color: var(--muted);
}
table.board th.days .dh.sun { color: var(--seal); }
table.board th.days .dh.sat { color: #1b537f; }
i.cell {
  display: inline-block; width: 11px; height: 14px; margin-right: 1px; border-radius: 2px;
  background: #edf0f3; vertical-align: middle;
}
i.cell.work.l1 { background: #bcd6f7; }
i.cell.work.l2 { background: #8bb8ef; }
i.cell.work.l3 { background: #4a8fe0; }
i.cell.work.l4 { background: var(--indigo); }
i.cell.leave { background: #b7e3c6; }
/* 欠勤(他エージェントが機能実装済み。新パレットの警告色に合わせて再配色のみ行った。
   確定=琥珀のベタ塗り/判定中=薄い琥珀+破線で「未確定」を区別) */
i.cell.absence { background: var(--warn); }
i.cell.absence_pending { background: var(--warn-soft); border: 1px dashed var(--warn); }
i.cell.incomplete { background: #e8695f; }
i.cell.no_punch { background: #f3b0aa; }
i.cell.planned { background: #fff; border: 1px dashed #c2ccd6; }
i.cell.none { background: #f2f4f6; }

.board-legend {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  font-size: .75rem; color: var(--ink); margin-top: .5rem;
}
.board-legend i.cell { margin-right: .25rem; }

/* R11: 出勤表示/照合表示の切替タブ(sig-method-tabsと同じ見た目のミニ版) */
.mode-tabs { display: flex; gap: .25rem; }
.mode-tabs button {
  background: #e4e8ee; color: var(--ink); font-size: .82rem; padding: .4rem .7rem; min-height: 34px;
  border-radius: var(--radius-md);
}
.mode-tabs button.active { background: var(--indigo); color: #fff; }

/* R11: 照合表示のマス目。同じ行・列の並びのまま、ズレの分を数字で直接表示する
   (色だけに意味を持たせない設計方針どおり、文字そのものが情報を持つ)。
   数字が入る分だけ通常セルより横に広いが、行・列の構造自体は変えていない。 */
table.board.mode-check td.days { white-space: normal; }
i.cell.diffcell {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 24px; height: 15px; padding: 0 3px; margin: 0 1px 1px 0;
  border-radius: 3px; font-size: .56rem; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1; white-space: nowrap; vertical-align: middle;
}
i.cell.diffcell.diff-late,
i.cell.diffcell.diff-early,
i.cell.diffcell.diff-late_early { background: var(--seal-soft); color: var(--seal); }
i.cell.diffcell.diff-unscheduled,
i.cell.diffcell.diff-shift_no_punch { background: var(--warn-soft); color: var(--warn); }
i.cell.diffcell.diff-ok { background: transparent; color: #b6bec7; font-weight: 400; }
i.cell.diffcell.diff-acked { background: #eceff3; color: var(--muted); text-decoration: line-through; }
i.cell.diffcell.diff-none { background: transparent; }

th.num.flagged, td.num.flagged { border-left: 1px solid var(--line); }

@media (max-width: 700px) {
  .board-tools { margin-left: 0; }
  .board-head { gap: .5rem; }
}

/* R5追加: ボードの金額列 */
table.board td.money, table.board th.money { min-width: 84px; }
table.board td.money.plus { color: var(--ok); }
table.board td.money.minus { color: var(--seal); }
table.board thead th.money { border-left: 1px solid #dfe5ea; }
table.board td.money:first-of-type { border-left: 1px solid #eef1f4; }
.board-note {
  font-size: .76rem; color: var(--muted); margin: .5rem 0 0;
  background: #f7f9fb; border-left: 3px solid var(--line); padding: .5rem .7rem; border-radius: 0 6px 6px 0;
}

/* R5: 取引先別の交通費ブロック */
.client-block { border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: .85rem; overflow: hidden; }
.client-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  background: var(--indigo-soft); padding: .55rem .8rem; border-bottom: 1px solid var(--line);
}
.client-head small { color: var(--muted); margin-left: .35rem; }
.client-total { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.client-total strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.client-block .table-wrap { border: none; }
table.board td.site, table.board th.site { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
table.board td.site small { color: var(--muted); font-size: .72rem; }