/* design.css — レイヤーが共有する唯一のスタイルシート（正: DESIGN.md）
 *
 * 読み込み順は必ず: vendor/bootstrap/bootstrap.min.css → このファイル。
 * このファイルは「Bootstrap の上に載る層のテーマとコンポーネント」だけを持ちます。
 * room の <style> には、その room だけの調整だけを書いてください。
 * ここにある色やコンポーネントを room 側で作り直してはいけません。
 */

/* 全 app 共通 — 層が持つのは「アクセント」と「言語要件」だけ。
   面・文字・罫線・角・影はデザインシステム（Bootstrap / AdminLTE）に任せる。 */
:root {
  /* アクセント＝その画面の主要機能のボタン（打刻・保存・ログイン）・当たり・選択ずみ・印。
     赤は使わない（急かさない）。会社ごとに --kiosk-accent / -rgb / -text の3つを差し替えられる
     （admin-settings。DESIGN.md）。 */
  --kiosk-accent: #2d7a4f;
  --kiosk-accent-rgb: 45, 122, 79;      /* rgba() で混ぜるため（Bootstrap の -rgb と同じ慣習） */
  --kiosk-accent-text: #ffffff;         /* アクセントの上の文字。読みやすい方（白／#1c1917）を会社ごとに決める */

  /* アクセントの派生（hover / active）。アクセントに黒を混ぜるのでテーマに依らない。 */
  --kiosk-accent-hover: #266843;   /* shade 15% */
  --kiosk-accent-active: #24623f;  /* shade 20% */

  /* アクセントを「文字」に使うときの色（リンク・枠のボタンの文字・もどる・印）。
     下地が明るいときはアクセントそのまま。admin・employee のダークでは、下地が暗いので
     コントラストを保つために明るくする（下の @supports で app 別に上書きする）。
     塗り（ボタンの背景）は白文字が乗るので、ブランドのアクセントのままにする。 */
  --kiosk-accent-ink: var(--kiosk-accent);
  --kiosk-accent-ink-hover: var(--kiosk-accent-hover);

  /* 勤務表の記録の記号（docs/20）。赤は「急かさない」ため通常は使わないが、
     8時間超 と 記録なし（要対応＝締めのブロッカー）の2つだけは、意味を持つ色として使う（決定 2026-10-27）。
     非営業日（休日）の日付も赤で示す（カレンダーの慣習。記録なしの赤◆とは別の色。決定 2026-10-28）。 */
  --mx-over: #d97706;     /* 8時間超（残業） */
  --mx-none: #b10e1c;     /* 記録なし（要対応。締めのブロッカー） */
  --mx-holiday: #c62828;  /* 非営業日（休日）の日付。カレンダーの赤 */

  /* 印（ハンコ）の朱色。赤は「急かさない」ため通常は使わないが、押印の慣習として
     「修正済」の印だけは朱色にする（決定 2026-11-04。急かすための赤ではない）。 */
  --kiosk-stamp: #b3261e;

  /* 文字は Bootstrap のスケール。日本語フォントだけ層で指定する。 */
  --bs-body-font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    system-ui, -apple-system, sans-serif;

  /* アクセントを Bootstrap のトークンへ写す（青は使わない）。
     text-primary / border-primary などのユーティリティはここを経由して緑になる。
     ボタン・チェック・フォーカスは Bootstrap が色を直書きしているので、下の「色の使い方」で個別に写す。 */
  --bs-focus-ring-width: 2px;
  --bs-focus-ring-color: rgba(var(--kiosk-accent-rgb), 0.35);
  --bs-link-color: var(--kiosk-accent);
  --bs-link-color-rgb: var(--kiosk-accent-rgb);
  --bs-link-hover-color: var(--kiosk-accent-hover);
  --bs-link-hover-color-rgb: var(--kiosk-accent-rgb);
  --bs-primary: var(--kiosk-accent);
  --bs-primary-rgb: var(--kiosk-accent-rgb);
}
@supports (color: color-mix(in srgb, red, red)) {
  :root {
    --kiosk-accent-hover: color-mix(in srgb, var(--kiosk-accent) 85%, #000);
    --kiosk-accent-active: color-mix(in srgb, var(--kiosk-accent) 80%, #000);
  }
}

/* 面・文字・罫線・角は app で分ける（DESIGN.md「レイアウト（app 別）」）。
   var() の入れ子は「宣言した要素」で解決されるので、ここ（<body> の data-app）で定義する。 */

/* kiosk（共有タブレット）— 固定の明るい配色のまま（dark にしない）。見た目は変えない。 */
[data-app="kiosk"] {
  color-scheme: light;
  --bs-body-bg: #ffffff;
  --bs-body-color: #1c1917;
  --bs-body-color-rgb: 28, 25, 23;
  --bs-secondary-color: #78716c;
  --bs-secondary-rgb: 120, 113, 108;
  --bs-light-rgb: 245, 245, 244;
  --bs-border-color: #e7e5e4;
  --bs-border-radius: 14px;
  --bs-border-radius-lg: 14px;
  --bs-border-radius-sm: 10px;
  --bs-body-line-height: 1.6;

  --kiosk-bg: #ffffff;
  --kiosk-surface: #ffffff;
  --kiosk-fg: #1c1917;
  --kiosk-muted: #78716c;
  --kiosk-border: #e7e5e4;
  --kiosk-quiet: #f5f5f4;
  --kiosk-accent-subtle: #e6efea;  /* tint 12%（既定アクセントの静的値） */
  --bs-primary-bg-subtle: var(--kiosk-accent-subtle);
  --bs-primary-border-subtle: var(--kiosk-accent-subtle);
  --bs-primary-text-emphasis: var(--kiosk-accent-active);
}
@supports (color: color-mix(in srgb, red, red)) {
  [data-app="kiosk"] {
    --kiosk-accent-subtle: color-mix(in srgb, var(--kiosk-accent) 12%, #fff);
  }
}

/* admin・employee — AdminLTE / Bootstrap のテーマ（light / dark）に従う。
   面・文字・罫線・角・影は AdminLTE 既定。層はアクセントだけを写す。 */
[data-app="admin"],
[data-app="employee"] {
  --kiosk-bg: var(--bs-body-bg);
  --kiosk-surface: var(--bs-body-bg);
  --kiosk-fg: var(--bs-body-color);
  --kiosk-muted: var(--bs-secondary-color);
  --kiosk-border: var(--bs-border-color);
  --kiosk-quiet: var(--bs-secondary-bg);
  --kiosk-accent-subtle: #e6efea;  /* color-mix が無い環境のフォールバック */
  --bs-primary-bg-subtle: var(--kiosk-accent-subtle);
  --bs-primary-border-subtle: var(--kiosk-accent-subtle);
  --bs-primary-text-emphasis: var(--kiosk-accent-active);
}
@supports (color: color-mix(in srgb, red, red)) {
  [data-app="admin"],
  [data-app="employee"] {
    /* 淡い面は「アクセント × 今の下地」。light では淡緑、dark では暗い緑になる。 */
    --kiosk-accent-subtle: color-mix(in srgb, var(--kiosk-accent) 12%, var(--bs-body-bg));
  }
  /* ダークは下地が暗いので、アクセントを「文字」に使うところは明るくする
     （Bootstrap の dark がリンクを明るくするのと同じ）。塗り（ボタン）は白文字が乗るので、
     ブランドのアクセントのままにする。 */
  [data-bs-theme="dark"] [data-app="admin"],
  [data-bs-theme="dark"] [data-app="employee"] {
    --bs-link-color: color-mix(in srgb, var(--kiosk-accent) 70%, #fff);
    --bs-link-hover-color: color-mix(in srgb, var(--kiosk-accent) 55%, #fff);
    --bs-primary-text-emphasis: color-mix(in srgb, var(--kiosk-accent) 62%, #fff);
    --kiosk-accent-ink: color-mix(in srgb, var(--kiosk-accent) 70%, #fff);
    --kiosk-accent-ink-hover: color-mix(in srgb, var(--kiosk-accent) 55%, #fff);
    /* 印の朱色も、暗い下地では明るくする（コントラストを保つ）。 */
    --kiosk-stamp: color-mix(in srgb, #b3261e 55%, #fff);
  }
}

/* ---- 色の使い方（正: DESIGN.md「色」）------------------------------------
   黒＝本文・見出し・時刻。アクセント＝その画面の主要機能のボタン・当たり・選択ずみ・副次操作・印。
   面と罫線は無彩色のまま。赤は使わない（急かさない）。ただし印（ハンコ）の朱色だけは例外
   （押印の慣習。`--kiosk-stamp`）。色だけで意味を伝えない。
   ここは、Bootstrap が色（primary #0d6efd / #86b7fe / dark #212529）を直書きしていて、
   層のトークンでは届かない部品をアクセントへ写す場所。 */

/* その画面の主要機能のボタン＝アクセントの塗り。
   層では Bootstrap の `.btn-primary` を主操作として使う（登録する・設定を保存・ログイン・CSV・もう一度）。
   AdminLTE / Bootstrap は `.btn-primary` に青（#0d6efd）を直書きしていて `--bs-primary` では
   変わらないので、ここでアクセントへ写す。打刻（`.btn-punch`）も同じ扱い。 */
.btn-primary {
  --bs-btn-color: var(--kiosk-accent-text);
  --bs-btn-bg: var(--kiosk-accent);
  --bs-btn-border-color: var(--kiosk-accent);
  --bs-btn-hover-color: var(--kiosk-accent-text);
  --bs-btn-hover-bg: var(--kiosk-accent-hover);
  --bs-btn-hover-border-color: var(--kiosk-accent-hover);
  --bs-btn-active-color: var(--kiosk-accent-text);
  --bs-btn-active-bg: var(--kiosk-accent-active);
  --bs-btn-active-border-color: var(--kiosk-accent-active);
  --bs-btn-focus-shadow-rgb: var(--kiosk-accent-rgb);
}

/* カードの色（`.card-primary` など）— AdminLTE は青（#0d6efd）を直書きしているので写す。
   フォームのカード（`card-primary card-outline`）の上辺がアクセントになる。 */
.card-primary {
  --lte-card-variant-bg: var(--kiosk-accent);
  --lte-card-variant-bg-rgb: var(--kiosk-accent-rgb);
  --lte-card-variant-color: var(--kiosk-accent-text);
}

/* リンクの当たり（hover / キーボードのフォーカス）— 少し濃くする（ダークでは明るく）。
   .link-secondary / .text-reset / .nav-link は層の淡い扱いを保つ。
   .btn（<a> に付けたボタン。打刻・タイル・テンキー）は Bootstrap が色を持つので触らない
   （触ると背景と同化して文字が消える）。 */
a:not(.btn):not(.link-secondary):not(.text-reset):not(.nav-link):hover,
a:not(.btn):not(.link-secondary):not(.text-reset):not(.nav-link):focus-visible {
  color: var(--bs-link-hover-color);
}

/* 副次操作（＋追加・再発行など）＝アクセントの枠（主操作の塗りと対にする）。
   `.btn-outline-primary` は AdminLTE / Bootstrap が青を直書きしているので写す。
   `.btn-outline-secondary` は kiosk-done が使う（キオスクはこの回で変更しない）ため残す。 */
.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: var(--kiosk-accent-ink);
  --bs-btn-border-color: var(--kiosk-accent-ink);
  --bs-btn-hover-color: var(--kiosk-accent-text);
  --bs-btn-hover-bg: var(--kiosk-accent-hover);
  --bs-btn-hover-border-color: var(--kiosk-accent-hover);
  --bs-btn-active-color: var(--kiosk-accent-text);
  --bs-btn-active-bg: var(--kiosk-accent-active);
  --bs-btn-active-border-color: var(--kiosk-accent-active);
  --bs-btn-disabled-color: var(--kiosk-accent-ink);
  --bs-btn-disabled-border-color: var(--kiosk-accent-ink);
  --bs-btn-focus-shadow-rgb: var(--kiosk-accent-rgb);
}

/* 選択ずみ（チェック・ラジオ）と入力の当たり（フォーカス）＝アクセント。
   Bootstrap はこの2つだけ青を直書きしている（`--bs-primary` を経由しない）。 */
.form-check-input:checked {
  background-color: var(--kiosk-accent);
  border-color: var(--kiosk-accent);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--kiosk-accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--kiosk-accent-rgb), 0.25);
}

/* ページネーション（変更履歴・自分の記録の変更）— 当たりはアクセント。
   Bootstrap は `--bs-pagination-active-bg` を青で直書きしているので、アクセントへ写す。 */
.pagination {
  --bs-pagination-color: var(--kiosk-accent-ink);
  --bs-pagination-hover-color: var(--kiosk-accent-text);
  --bs-pagination-hover-bg: var(--kiosk-accent-hover);
  --bs-pagination-hover-border-color: var(--kiosk-accent-hover);
  --bs-pagination-focus-color: var(--kiosk-accent-text);
  --bs-pagination-focus-bg: var(--kiosk-accent-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--kiosk-accent-rgb), 0.25);
  --bs-pagination-active-color: var(--kiosk-accent-text);
  --bs-pagination-active-bg: var(--kiosk-accent);
  --bs-pagination-active-border-color: var(--kiosk-accent);
}

/* 設定の左レール（list-group + nav-pills）— 選択ずみはアクセント。
   Bootstrap は `.list-group` の active 背景を青（#0d6efd）で直書きしているので写す。 */
.list-group {
  --bs-list-group-active-color: var(--kiosk-accent-text);
  --bs-list-group-active-bg: var(--kiosk-accent);
  --bs-list-group-active-border-color: var(--kiosk-accent);
}

/* 面（カード・記録の枠）— 下地と同じ白。罫線と余白で区別する */
.bg-surface {
  background-color: var(--kiosk-surface) !important;
}

/* 画面の枠（キオスク）— 共有タブレット横向きなので、1画面を 1024×640（16:10）に固定する。
   端末やウィンドウの高さに追従させない（min-vh-100 の代わりに使う）。
   あふれは出さない: 1画面に収まらない中身は、比率ではなく中身を直す合図。 */
:root {
  --kiosk-canvas-w: 1024px;
  --kiosk-canvas-h: 640px;
}
.kiosk-canvas {
  width: 100%;
  max-width: var(--kiosk-canvas-w);
  height: var(--kiosk-canvas-h);
  min-height: var(--kiosk-canvas-h);
  overflow: hidden;
  position: relative;   /* 画面の中に重ねるもの（オーバーレイ）の基準にする */
}

/* 日付と時刻（キオスク）— 全画面で同じ位置（下のフッター）に出す。急かさないので淡い。 */
.kiosk-clock {
  text-align: end;
  white-space: nowrap;
}
.kiosk-clock .kiosk-clock-date {
  display: block;
  font-size: 1rem;
  color: var(--kiosk-muted);
}
.kiosk-clock .kiosk-clock-time {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* もどる — 1つ前の画面へ戻るリンク（導線なのでアクセント）。下線なし。指で押せる高さ（44px 以上）。 */
.kiosk-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.5rem;
  font-size: 1.25rem;
  color: var(--kiosk-accent);
  text-decoration: none;
}
.kiosk-back:hover {
  color: var(--kiosk-accent-hover);
}

/* キオスクの補助リンク — 左カラムなどに小さく置く（例: 暗証番号がわからなくなった人は？）。
   押すところなので 44px 以上。アクセントの下線でリンクだと分かるようにする。 */
.kiosk-hint {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  color: var(--kiosk-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kiosk-hint:hover {
  color: var(--kiosk-accent-hover);
}

/* 打刻ボタン — 全幅・最低高 200px。**その画面の機能**なのでアクセント。
   出勤／退勤は上のトグル（`.punch-choice`）で示すので、このボタンは「打刻する」の1つ。
   （`.btn-punch-in` / `.btn-punch-out` は旧来の別名。単体でも同じアクセント。`docs/16` (b)）。 */
.btn-punch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  font-size: 2.5rem;
  font-weight: 700;
}
.btn-punch .btn-punch-sub {
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.75;
}
.btn-punch,
.btn-punch-in,
.btn-punch-out {
  --bs-btn-color: var(--kiosk-accent-text);
  --bs-btn-bg: var(--kiosk-accent);
  --bs-btn-border-color: var(--kiosk-accent);
  --bs-btn-hover-color: var(--kiosk-accent-text);
  --bs-btn-hover-bg: var(--kiosk-accent-hover);
  --bs-btn-hover-border-color: var(--kiosk-accent-hover);
  --bs-btn-active-color: var(--kiosk-accent-text);
  --bs-btn-active-bg: var(--kiosk-accent-active);
  --bs-btn-active-border-color: var(--kiosk-accent-active);
  --bs-btn-focus-shadow-rgb: var(--kiosk-accent-rgb);
}

/* 打刻のトグル — 出勤／退勤のどちらを打刻するかを選ぶ。
   既定（きょうの記録から予測した方）が当たり。押すと選び直せる。
   主操作は下の「打刻する」（塗り）なので、ここは塗らず**当たり＝アクセントの枠＋太字＋淡い面**にする
   （同時にアクセントの塗りを2つ作らない＝主操作を1つに保つ）。docs/13 §3.3・docs/16 (b)。 */
.punch-choice {
  display: flex;
  gap: 0.75rem;
}
.punch-choice-item {
  --bs-btn-color: var(--kiosk-muted);
  --bs-btn-bg: var(--kiosk-surface);
  --bs-btn-border-color: var(--kiosk-border);
  --bs-btn-hover-color: var(--kiosk-fg);
  --bs-btn-hover-bg: var(--kiosk-quiet);
  --bs-btn-hover-border-color: var(--kiosk-border);
  --bs-btn-active-color: var(--kiosk-fg);
  --bs-btn-active-bg: var(--kiosk-quiet);
  --bs-btn-active-border-color: var(--kiosk-border);
  --bs-btn-focus-shadow-rgb: var(--kiosk-accent-rgb);
  flex: 1 1 0;
  min-height: 88px;
  font-size: 1.5rem;
  font-weight: 600;
}
.punch-choice-item.is-active {
  --bs-btn-color: var(--kiosk-accent);
  --bs-btn-bg: var(--kiosk-accent-subtle);
  --bs-btn-border-color: var(--kiosk-accent);
  --bs-btn-hover-color: var(--kiosk-accent);
  --bs-btn-hover-bg: var(--kiosk-accent-subtle);
  --bs-btn-hover-border-color: var(--kiosk-accent);
  --bs-btn-active-color: var(--kiosk-accent);
  --bs-btn-active-bg: var(--kiosk-accent-subtle);
  --bs-btn-active-border-color: var(--kiosk-accent);
  border-width: 2px;
  font-weight: 700;
}

/* 名前タイル — グリッドのセル。最低高 88px。
   並びは**よみ（あかさたな）順で固定**（使った人で並べ替えない＝毎日同じ位置。決定 2026-10-26）。
   だから「最近使った人」の印（`.is-recent` / `.kiosk-dot`）は持たない（docs/14）。 */
.tile {
  --bs-btn-color: var(--kiosk-fg);
  --bs-btn-bg: var(--kiosk-surface);
  --bs-btn-border-color: var(--kiosk-border);
  --bs-btn-hover-color: var(--kiosk-fg);
  --bs-btn-hover-bg: var(--kiosk-quiet);
  --bs-btn-hover-border-color: var(--kiosk-border);
  --bs-btn-active-color: var(--kiosk-fg);
  --bs-btn-active-bg: var(--kiosk-quiet);
  --bs-btn-active-border-color: var(--kiosk-border);
  --bs-btn-focus-shadow-rgb: 28, 25, 23;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 88px;
  font-size: 1.25rem;
  font-weight: 600;
}

/* テンキー — 3列。各キー最低 96px。削除と OK は色で区別する（OK は主操作＝アクセント）。 */
.btn-key {
  --bs-btn-color: var(--kiosk-fg);
  --bs-btn-bg: var(--kiosk-surface);
  --bs-btn-border-color: var(--kiosk-border);
  --bs-btn-hover-color: var(--kiosk-fg);
  --bs-btn-hover-bg: var(--kiosk-quiet);
  --bs-btn-hover-border-color: var(--kiosk-border);
  --bs-btn-active-color: var(--kiosk-fg);
  --bs-btn-active-bg: var(--kiosk-quiet);
  --bs-btn-active-border-color: var(--kiosk-border);
  --bs-btn-focus-shadow-rgb: 28, 25, 23;
  /* キーの中身は縦中央に揃える（数字・⌫ を揃える）。 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.btn-key-del {
  --bs-btn-color: var(--kiosk-muted);
  --bs-btn-bg: var(--kiosk-quiet);
  --bs-btn-hover-color: var(--kiosk-muted);
  --bs-btn-hover-bg: var(--kiosk-border);
  --bs-btn-hover-border-color: var(--kiosk-border);
  --bs-btn-active-color: var(--kiosk-muted);
  --bs-btn-active-bg: var(--kiosk-border);
  font-size: 2rem;
}

/* PIN のドット — 入れた桁のぶんだけ塗る */
.kiosk-pin-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--kiosk-border);
  background: var(--kiosk-surface);
}
.kiosk-pin-dot.is-filled {
  background: var(--kiosk-accent);
  border-color: var(--kiosk-accent);
}

/* 完了の印 */
.kiosk-check {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--kiosk-accent);
  color: var(--kiosk-accent-text);
  display: grid;
  place-items: center;
}
.kiosk-check svg {
  width: 48px;
  height: 48px;
  display: block;
}

/* 押した手応え（打刻ボタン・タイル・キーで共通） */
.btn-punch:active,
.tile:active,
.btn-key:active {
  transform: translateY(2px);
}

/* ---- レイアウト（app 別） ----------------------------------------------
   DESIGN.md「レイアウト（app 別）」を実装する。
   kiosk は .kiosk-canvas（1024×640 固定）。admin は ヘッダー＋左サイドバー＋本文、
   employee は ヘッダー＋本文で組む。 */

/* ヘッダー — AdminLTE 既定の 1px 罫線に任せる（サイドバーの border-end と揃える）。
   admin・employee とも AdminLTE の navbar（.app-header）を使う。中身は room 側で組む
   （admin はページ名・テーマ・全画面・アカウントメニュー、employee は会社名・テーマ・
   全画面・アカウントメニュー。employee はサイドバーを持たない）。 */

/* コンテンツヘッダー（admin）— AdminLTE の app-content-header。本文（最大1100px）と
   左右を揃えるため、横の余白だけ外す（縦の余白は AdminLTE のまま）。 */
.app-content-header {
  padding-left: 0;
  padding-right: 0;
}

/* ヘッダーの操作（テーマ・全画面）— AdminLTE の nav-link にアイコンを載せる。
   アイコンはインライン SVG（アイコンフォントは使わない）。 */
.app-header .nav-link > svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* テーマの選択（ドロップダウン）— 選ばれている項目をアクセントで示す。
   AdminLTE の ColorMode が active / aria-pressed を切り替える。 */
.app-header .dropdown-menu .dropdown-item.active,
.app-header .dropdown-menu .dropdown-item:active {
  background-color: var(--kiosk-accent-subtle);
  color: var(--kiosk-accent-ink);
}
.app-header .dropdown-menu .dropdown-item[aria-pressed="true"]::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
}

/* アカウントメニュー（admin）— アバターはヘッダーのトリガー（.user-image）だけに置く。
   メニューの user-header は名前と役割だけなので、AdminLTE の最小高（175px）を外す。 */
.app-header .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  min-height: 0;
}

/* 管理の共通ナビは左サイドバー（AdminLTE の .app-sidebar。上書きは layer.css）。 */

/* もどる（admin・employee）— 小さめ。キオスクの .kiosk-back とは別（あちらは大きく）。 */
.app-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  color: var(--kiosk-accent-ink);
  text-decoration: none;
}
.app-back:hover {
  color: var(--kiosk-accent-ink-hover);
}

/* キオスクのタブ（名前の絞り込み）— タップのみ。検索は置かない（キーボードを出さない）。
   タブは等幅で並べ、指1本の高さ 44px 以上。色だけで選を表さず、太字＋塗りも添える。 */
.kiosk-tab {
  --bs-btn-color: var(--kiosk-muted);
  --bs-btn-bg: var(--kiosk-surface);
  --bs-btn-border-color: var(--kiosk-border);
  --bs-btn-hover-color: var(--kiosk-fg);
  --bs-btn-hover-bg: var(--kiosk-quiet);
  --bs-btn-hover-border-color: var(--kiosk-border);
  --bs-btn-active-color: var(--kiosk-fg);
  --bs-btn-active-bg: var(--kiosk-quiet);
  --bs-btn-active-border-color: var(--kiosk-border);
  --bs-btn-focus-shadow-rgb: 28, 25, 23;
  flex: 1 1 0;
  min-height: 52px;
  padding-inline: 0.25rem;
  font-weight: 600;
}
.kiosk-tab.is-active {
  --bs-btn-color: var(--kiosk-accent-text);
  --bs-btn-bg: var(--kiosk-accent);
  --bs-btn-border-color: var(--kiosk-accent);
  --bs-btn-hover-color: var(--kiosk-accent-text);
  --bs-btn-hover-bg: var(--kiosk-accent-hover);
  --bs-btn-hover-border-color: var(--kiosk-accent-hover);
  --bs-btn-active-color: var(--kiosk-accent-text);
  --bs-btn-active-bg: var(--kiosk-accent-active);
  --bs-btn-active-border-color: var(--kiosk-accent-active);
}

/* ---- 従業員（自分のスマホ）---------------------------------------
   DESIGN.md「レイアウト（app 別）」を実装する。基本は見るだけ・シンプル。
   文字は小さくしない（見えにくい人がいる）。本文は 17px を基準にする。 */

/* 本文の枠 — 文字の基準を少し上げる（`.small` は 14.9px 相当になる）。 */
.sp-shell {
  font-size: 1.0625rem;
}

/* 時刻 — 読み違えないように桁を揃える（本文と同じ書体・太さ。等幅にも太字にもしない）。 */
.sp-time {
  font-variant-numeric: tabular-nums;
}

/* 修正された日（従業員）— 一覧では印を押さず、時刻の色で示す（朱色。`--kiosk-stamp`）。
   印（`.sp-stamp`）は詳細（`employee-detail`）でだけ使う。
   `.table` を付けるのは、Bootstrap のセルの色（`.table > * > *`）より強くするため。 */
.table .sp-corrected {
  color: var(--kiosk-stamp);
}

/* 修正済のスタンプ（従業員）— 会社が直したところ。印鑑のように少し傾ける。
   点滅はしない（急かさない）。出すときは、下の .fade-in に任せる（視界に入ったら そっと出す）。
   撮影（静止画）は、傾いたスタンプがそのまま写る。色は朱色（`--kiosk-stamp`。押印の慣習）。 */
.sp-stamp {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border: 2px solid var(--kiosk-stamp);
  border-radius: 6px;
  color: var(--kiosk-stamp);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transform: rotate(-6deg);
}

/* 見ていない変更の印（従業員）— 小さな点だけ。件数は出さない（貯まる感を作らない）。 */
.sp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kiosk-accent-ink);
  flex: none;
}

/* 視界に入ったら そっと出す（変更の一覧など）— 動きはここ1か所に集める。
   調整は、下の4つの変数だけで済むようにする（時間・動く量・件ごとのずらし・曲線）。
   使い方: 要素に .fade-in を付け、視界に入ったら .is-in を足す（見た目は design.css、きっかけは room の JS）。
   JS が無いとき・prefers-reduced-motion・撮影/印刷・大きさの変更では、動かさず すぐ出す。 */
:root {
  --fade-in-duration: 320ms;
  --fade-in-easing: ease-out;
  --fade-in-shift: 8px;
  --fade-in-stagger: 60ms;
}
.fade-in { opacity: 1; transform: none; }
.js .fade-in {
  opacity: 0;
  transform: translateY(var(--fade-in-shift));
  transition: opacity var(--fade-in-duration) var(--fade-in-easing) var(--fade-in-delay, 0ms),
              transform var(--fade-in-duration) var(--fade-in-easing) var(--fade-in-delay, 0ms);
}
.js .fade-in.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .fade-in { opacity: 1; transform: none; transition: none; }
}
.settled .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- 2カラム（キオスク・横長）-------------------------------------------
   左＝情報（会社名・氏名・きょうの打刻）、右＝操作（時刻・タブ・名前・キー・ボタン）。
   自分の記録の QR は右カラムのいちばん下（kiosk-done）— 読むのは操作の続き＝次の一歩。
   横長（1024×640）なので、縦1列にせず左右に使う（左右の余白を作らない）。 */
.kiosk-aside {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-right: 1px solid var(--kiosk-border);
  overflow: hidden;
}
.kiosk-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}
/* 会社名（ブランド）— キオスクの左カラム上と、管理・従業員のヘッダー。
   値は会社設定（`admin-settings`）。PoC はテキストだけ（細長い画像ロゴは後半に差し替える。決定 2026-10-28）。 */
.kiosk-brand {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

/* キオスクの見出し — 立って 50〜80cm から読む。下限 2rem（docs/16）。 */
.kiosk-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
}
/* 現在の状態のチップ（勤務中／退勤ずみ）— 氏名の下に常に見せる。色だけで示さない。 */
.kiosk-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--kiosk-border);
  border-radius: 999px;
  font-size: 1rem;
  color: var(--kiosk-muted);
}
.kiosk-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kiosk-muted);
}
.kiosk-status.is-working {
  color: var(--kiosk-accent-active);
  border-color: var(--kiosk-accent);
}
.kiosk-status.is-working::before {
  background: var(--kiosk-accent);
}

/* 待機（キオスクの最初の画面）の時刻 — キオスクの主役は「時間」と「操作」。
   待機画面では時刻をさらに大きくする。 */
.kiosk-clock-hero .kiosk-clock-time {
  font-size: 3rem;
}

/* ---- きょうの打刻（履歴）— キオスクの全画面で共通 -------------------------
   左カラムの左下に小さく**常に見せる**。その塊を押すと、オーバーレイで全件を開く。
   出勤／退勤のラベルは付けない（時刻で読む。正: docs/behavior/きょうの打刻を見る.md） */

/* 左下の一覧（押すところ。リンクの文字は置かない） */
.kiosk-history {
  display: block;
  margin-top: auto;      /* 左カラムの左下に寄せる（常に見える） */
  min-height: 44px;      /* 指で押せる高さ */
  padding-block: 0.75rem;
  color: var(--kiosk-muted);
  font-size: 0.875rem;   /* 補助の情報（「文字の下限」の例外。DESIGN.md） */
  line-height: 1.9;
  text-decoration: none;
}
.kiosk-history:hover {
  color: var(--kiosk-fg);
}
.kiosk-history-row {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}
/* 時刻の桁を揃える（等幅・右揃え）。全角スペースで調整しない。 */
.kiosk-history-time {
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: right;
}

/* オーバーレイ — 画面は変えず、上に重ねる。基準は .kiosk-canvas（position: relative） */
.kiosk-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(28, 25, 23, 0.35);
}

/* シート — 見出し（と もどる）を残し、一覧だけスクロールする */
.kiosk-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  padding: 0.75rem 1.5rem 1.25rem;
  background: var(--kiosk-surface);
  border: 1px solid var(--kiosk-border);
  border-radius: var(--bs-border-radius);
}
.kiosk-sheet .kiosk-history-list {
  min-height: 0;
  overflow: auto;
}
/* 一覧の1行。**1行＝1人**（その人の最後の打刻）。12名なら1画面に収まるようにつめて出す
   （`docs/behavior/きょうの打刻を見る.md`）。それ以上は一覧だけスクロールする。 */
.kiosk-history-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.15rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--kiosk-border);
}
.kiosk-history-item:last-child {
  border-bottom: 0;
}

/* 下のフッター（キオスク）— 見出しと時刻。表示だけ（操作を置かない）。
   操作は上（押しやすい側）に集める。 */
.kiosk-footer {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid var(--kiosk-border);
  padding: 0.4rem 1.5rem 0.6rem;
}