/* =========================================================================
   Time Pixel 共通スタイル（デザイントークン）
   CLAUDE.md ユーザビリティ要件を「数値」で固定する。最終調整は実機で行う前提。
   起点の数値目安（高齢スタッフ想定）:
     - 本文フォント   : 18px（最小16px）
     - 主要ボタン高さ : 64px（最小56px）
     - タップ領域     : 56px四方（最小44px）
     - コントラスト   : 本文 4.5:1 以上、主要ボタン文字 4.5:1 以上
   ========================================================================= */
:root {
  /* フォント */
  --font-base: 18px;          /* 本文（最小16px） */
  --font-lg:   24px;          /* 見出し小 */
  --font-xl:   32px;          /* 見出し */
  --font-xxl:  48px;          /* 打刻系の主表示・キーパッド数字 */
  --font-huge: 64px;          /* 完了画面の名前・時刻など */

  /* 寸法 */
  --btn-min-h: 64px;          /* 主要ボタン高さ（最小56px） */
  --tap-min:   56px;          /* タップ領域 最小（最小44px） */
  --radius:    14px;
  --gap:       16px;
  --maxw:      720px;         /* スマホ/タブレット読みやすい最大幅 */

  /* 配色（テキスト併記前提。色だけに意味を持たせない） */
  --c-bg:       #f4f6f8;
  --c-surface:  #ffffff;
  --c-text:     #14213d;      /* 本文（対背景 高コントラスト） */
  --c-muted:    #5b6577;
  --c-primary:  #1d4ed8;      /* 主要操作 */
  --c-primary-ink: #ffffff;
  --c-success:  #15803d;      /* 出勤・成功（緑） */
  --c-warning:  #b45309;      /* 注意（橙） */
  --c-danger:   #b91c1c;      /* 退勤・エラー（赤/オレンジ系） */
  --c-border:   #cdd5e0;
  --c-focus:    #f59e0b;      /* フォーカスリング（明確に） */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: var(--font-base);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-text-size-adjust: 100%;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: var(--gap); }
.app-footer { text-align: center; color: var(--c-muted); font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; padding: 16px 0 24px; }
.page-header { text-align: center; padding: var(--gap) 0; }
.page-header h1 { font-size: var(--font-xl); margin: 0; }
.page-header .sub { color: var(--c-muted); font-size: var(--font-base); }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: calc(var(--gap) * 1.25);
  margin-bottom: var(--gap);
}

/* ボタン（タップしやすい大寸法） */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-min-h);
  min-width: var(--tap-min);
  padding: 0 24px;
  font-size: var(--font-lg);
  font-weight: 700;
  border: none; border-radius: var(--radius);
  cursor: pointer;
  width: 100%;
}
.btn-primary { background: var(--c-primary); color: var(--c-primary-ink); }
.btn-success { background: var(--c-success); color: #fff; }
.btn-danger  { background: var(--c-danger);  color: #fff; }
.btn-ghost   { background: #eef2f7; color: var(--c-text); border: 2px solid var(--c-border); }
.btn:active { transform: translateY(1px); }
:focus-visible { outline: 4px solid var(--c-focus); outline-offset: 2px; }

/* ステータスバナー：成功=緑 / 注意=橙 / エラー=赤。色＋アイコン＋次の行動文を必ず併記 */
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; border-radius: var(--radius);
  font-size: var(--font-lg); border: 2px solid;
}
.banner .icon { font-size: var(--font-xl); line-height: 1; }
.banner .next { display: block; font-size: var(--font-base); font-weight: 700; margin-top: 6px; }
.banner-success { background: #e7f6ec; border-color: var(--c-success); color: #0f5132; }
.banner-warning { background: #fdf1e3; border-color: var(--c-warning); color: #7a3e00; }
.banner-danger  { background: #fdecec; border-color: var(--c-danger);  color: #7a1414; }

/* テンキー（画面内・OS依存IME不要） */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.keypad button {
  min-width: 0; min-height: 84px; font-size: var(--font-xl); font-weight: 700;
  border-radius: var(--radius); border: 2px solid var(--c-border);
  background: #fff; color: var(--c-text); cursor: pointer; padding: 4px;
}
.keypad button.key-action { background: #eef2f7; font-size: var(--font-base); line-height: 1.2; }
.code-display {
  text-align: center; font-size: var(--font-huge); letter-spacing: 0.2em;
  font-weight: 800; padding: 12px; min-height: 84px;
  border: 3px dashed var(--c-border); border-radius: var(--radius); background: #fff;
}

/* QR表示 */
.qr-stage { text-align: center; }
.qr-box {
  width: 320px; height: 320px; max-width: 80vw; max-height: 80vw;
  margin: 0 auto; background: #fff; border: 3px solid var(--c-text); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.qr-box canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.qr-meta { color: var(--c-muted); margin-top: 12px; font-size: var(--font-base); }
.big-instruction { font-size: var(--font-xl); font-weight: 800; margin: 8px 0; }

.muted { color: var(--c-muted); }
.center { text-align: center; }
.mt { margin-top: var(--gap); }
.row-gap > * + * { margin-top: var(--gap); }

/* 端末（据置タブレット）向けに字を一段大きく */
.device-screen { --font-base: 20px; }
.device-screen .big-instruction { font-size: var(--font-xxl); }

/* 管理ナビ */
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap); }
.admin-nav a {
  padding: 10px 16px; min-height: var(--tap-min); display: inline-flex; align-items: center;
  border-radius: 999px; background: #fff; border: 2px solid var(--c-border);
  color: var(--c-text); text-decoration: none; font-weight: 700; font-size: var(--font-base);
}
.admin-nav a.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* 週グリッド（管理・PC中心） */
.palette { display: flex; flex-wrap: wrap; gap: 12px; }
/* 多人数対応：縦横スクロール＋曜日ヘッダ/従業員名の固定 */
.grid-scroll { max-height: 70vh; overflow: auto; }
.grid-scroll .shift-grid thead th { position: sticky; top: 0; z-index: 3; }
.grid-scroll .shift-grid th.emp { position: sticky; left: 0; z-index: 2; }
.grid-scroll .shift-grid thead th:first-child { z-index: 4; left: 0; }
.pal {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: var(--tap-min); padding: 10px 16px; font-size: var(--font-base);
  background: #fff; border: 2px solid var(--c-border); border-radius: var(--radius); cursor: pointer;
}
.pal.on { outline: 4px solid var(--c-focus); border-color: var(--c-focus); }
.pal-clear { border-style: dashed; color: var(--c-muted); }

.shift-grid { border-collapse: collapse; width: 100%; }
.shift-grid th, .shift-grid td { border: 1px solid var(--c-border); padding: 4px; text-align: center; }
.shift-grid thead th { background: #eef2f7; font-size: var(--font-base); }
.shift-grid th.sat { color: #1d4ed8; }
.shift-grid th.sun { color: var(--c-danger); }
.shift-grid th.emp { background: #f8fafc; text-align: left; white-space: nowrap; font-size: var(--font-base); }
.shift-grid .cell {
  width: 100%; min-height: 64px; min-width: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px solid var(--c-border); border-radius: 10px; background: #fff; cursor: pointer;
}
.shift-grid .cell:hover { border-color: var(--c-primary); }
.cell-empty { font-size: var(--font-xl); color: #c2cad6; }
.cell-off { font-size: var(--font-lg); font-weight: 800; color: var(--c-muted); }
.cell-name { font-size: var(--font-base); font-weight: 700; }
.cell-time { font-size: 14px; color: var(--c-muted); }

/* 日次確認 */
.summary-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  font-size: var(--font-base); font-weight: 700; border: 2px solid; }
.badge strong { font-size: var(--font-lg); }
.badge.b-red { background: #fdecec; border-color: var(--c-danger); color: #7a1414; }
.badge.b-orange { background: #fdf1e3; border-color: var(--c-warning); color: #7a3e00; }
.badge.b-yellow { background: #fef9e7; border-color: #b59500; color: #6b5800; }
.badge.b-gray { background: #eef2f7; border-color: var(--c-border); color: var(--c-muted); }
.badge.b-zero { opacity: .45; }

.review-row { border-left: 10px solid var(--c-border); }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-name { font-size: var(--font-lg); font-weight: 800; }
.state-pill { padding: 6px 14px; border-radius: 999px; font-size: var(--font-base); font-weight: 800; border: 2px solid; }
.state-pill.banner-danger { background: #fdecec; border-color: var(--c-danger); color: #7a1414; }
.state-pill.banner-warning { background: #fdf1e3; border-color: var(--c-warning); color: #7a3e00; }
.state-pill.banner-success { background: #e7f6ec; border-color: var(--c-success); color: #0f5132; }
.state-pill.pill-gray { background: #eef2f7; border-color: var(--c-border); color: var(--c-muted); }
.review-body { margin-top: 8px; font-size: var(--font-base); color: var(--c-text); display: grid; gap: 2px; }
.review-diff { color: var(--c-warning); font-weight: 800; }
.review-row.is-normal { opacity: .7; border-left-color: #e2e8f0; }
.review-row.is-normal .review-name { font-weight: 600; }