/* ==== Culminans.Shift: シフト管理の画面スタイル（全画面に読み込む） ====
   フォームグリッド・カードはシェルの app.css（alt-form-grid / alt-span2 / alt-card / alt-card-title）を使う。
   **クラス名は shift- で始める**＝モジュールの CSS は登録順にまとめて読み込まれるので、
   ほかのモジュールと同じ名前を使うとどちらが勝つかが順番まかせになる（§7 の落とし穴）。 */

.shift-readonly { padding: 4px 0; min-height: 1.6em; }
.shift-input-num { max-width: 120px; }
.shift-input-code { max-width: 160px; }
.shift-input-date { max-width: 180px; }
.shift-input-time { max-width: 140px; }
.shift-color-input { width: 48px; height: 30px; padding: 0; border: 1px solid var(--alt-border); border-radius: 4px; background: none; }

.shift-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.8rem; line-height: 1.5;
  white-space: nowrap;
}
.shift-badge.sm { padding: 0 6px; font-size: 0.72rem; }
/* スキルのタグを並べる（従業員の一覧とシフト表の簡易ビュー）。**隙間は CSS で持つ**＝Razor の
   `<text> </text>` は空白だけだと出力されず、タグがくっついて読めない（2026-09-07 に実測）。 */
.shift-skill-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* 勤務区分のプルダウンの選択肢（タグ ＋ 名前）。タグと文字の縦位置を揃えるだけ。 */
.shift-pattern-option { display: inline-flex; align-items: center; gap: 6px; }

/* 勤務区分の絞り込み（DxTagBox）。**幅の下限が要る**＝選んだタグが 1 つも無いと入力欄が中身の幅まで
   潰れ、「すべての勤務区分」の文字が「す…」になる（DxComboBox と違い、入力欄の幅が中身で決まる）。 */
.shift-pattern-filter { min-width: 240px; max-width: 360px; }

/* 「自分のシフト」のメモ。**押す的は列の幅いっぱい**＝スマホではこの列に 2〜3 文字ぶんしか残らず、
   小さいボタンだと押しにくい。書いたメモは折り返して読めるようにする（開かないと読めないと、書いたことを忘れる）。 */
.shift-note-btn { width: 100%; min-width: 6em; }
/* ボタンの下の頭出し。**1 行に収める**＝行の高さを揃えたいので、はみ出したぶんは点で示す
   （全文は title と、開いた窓で読める）。 */
.shift-note-preview {
  margin-top: 2px; font-size: 0.78rem; color: var(--alt-text-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shift-note-preview.is-empty { color: var(--alt-text-muted); }
.shift-note-input { width: 100%; }

/* ==== シフト表（従業員 × 日付の格子） ====
   素の table で描く＝マスは「区分のタグ 1 つ」で、グリッドに要る並べ替えや幅の保存より
   横にスクロールしても氏名の列が残ることのほうが要る。 */
.shift-roster-wrap { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--alt-border); border-radius: 6px; }
.shift-roster { border-collapse: separate; border-spacing: 0; font-size: 0.85rem; min-width: 100%; }
.shift-roster th, .shift-roster td {
  border-right: 1px solid var(--alt-bg-muted); border-bottom: 1px solid var(--alt-bg-muted);
  padding: 2px 4px; text-align: center; white-space: nowrap; vertical-align: middle;
}
.shift-roster thead th { position: sticky; top: 0; z-index: 3; background: var(--alt-bg-subtle); font-weight: 600; font-size: 0.78rem; }
.shift-roster th.shift-name, .shift-roster td.shift-name {
  position: sticky; left: 0; z-index: 2; text-align: left; background: var(--alt-surface);
  min-width: 160px; border-right: 1px solid var(--alt-border);
}
.shift-roster thead th.shift-name { z-index: 4; background: var(--alt-bg-subtle); }
.shift-roster td.shift-name .meta { display: block; font-size: 0.72rem; }
/* 週の頭は左の線を濃く（週の境が読めるように）。 */
.shift-roster th.week, .shift-roster td.week { border-left: 2px solid var(--alt-border-strong); }
/* 休業日・出られない曜日は薄く塗る（色だけに頼らず見出しに名前も出す）。 */
.shift-roster th.holiday { color: var(--alt-danger); }
.shift-roster td.off { background: var(--alt-bg-muted); }
.shift-roster td.unavailable { background: rgba(220, 90, 80, 0.12); }
.shift-roster td.preferred { background: rgba(80, 160, 90, 0.12); }
.shift-roster td.today { background-color: rgba(77, 124, 199, 0.10); }
/* 今日の列の見出し。**貼り付く見出しは透けさせない**＝半透明を敷くと、上の
   .shift-roster thead th の不透明な地色を上書きしてしまい、下を流れる本文の数字が
   日付に重なって見える（2026-09-07 実測）。色は地色に重ねて不透明のまま濃くする。 */
.shift-roster th.today { background-image: linear-gradient(rgba(77, 124, 199, 0.10), rgba(77, 124, 199, 0.10)); }
/* マスは押せる（編集できる人だけ。見た目で分かるように）。 */
.shift-roster td.cell { cursor: pointer; min-width: 56px; }
.shift-roster td.cell:hover { outline: 2px solid var(--alt-primary, #4d7cc7); outline-offset: -2px; }
.shift-roster td.cell.readonly { cursor: default; }
.shift-roster td.cell.readonly:hover { outline: none; }
/* 状態の印（タグの上に小さく）。欠員は赤枠で目立たせる。 */
.shift-cell-vacant .shift-badge { outline: 2px solid var(--alt-danger); outline-offset: 1px; }
.shift-cell-planned .shift-badge { opacity: 0.75; border: 1px dashed rgba(0, 0, 0, 0.35); }
/* 予定のタグには右上に印を出す（2026-09-07・TEST1-79）。点線の枠だけでは確定と見分けられない
   ＝区分の色が濃いと枠が背景に沈み、薄いと枠そのものが見えない。
   **箱の形を持つのは状態のクラスではなく .shift-cell-badge**＝状態のクラスに padding を持たせると、
   プランの確定で予定が一斉に確定へ動いた瞬間にマスの幅が縮んで盤面が横にずれる
   （この表は table-layout: auto なので中身の幅がそのまま列の幅になる）。
   印の地は区分の色から独立させる（不透明な地＋枠）＝タグの色は人が自由に選ぶので、透かすと読めなくなる。
   **印は 1 文字**＝場所は padding-right で外に空けており、印がタグへ食い込む幅（印の幅 − 12px）が
   `.shift-badge.sm` の左右の余白（6px）を超えると区分のコードの末尾が隠れる
   （実測 2026-09-07: `予` 16.8px＝食い込み 4.8px／`P` 13.8px＝食い込み 1.8px。
   直す前は `MIDNIGHT` が `MIDNIGH` に見えていた）。**Roster_PlannedMark を 2 文字にすると破れる**
   ＝長いコードの列だけ末尾が欠け、例外もログも出ない。
   inline-block は印の `top` の起点を行のストラットではなくタグの箱にするため（外すと 0.5px 下がる）。 */
.shift-cell-badge { position: relative; display: inline-block; padding-right: 12px; }
.shift-cell-planned-mark {
  position: absolute; top: -2px; right: 0; font-size: 0.55rem; line-height: 1; padding: 1px 3px;
  border: 1px solid var(--alt-border-strong); border-radius: 6px;
  background: var(--alt-surface); color: var(--alt-text-sub);
}
.shift-cell-covered .shift-badge, .shift-cell-cancelled .shift-badge { opacity: 0.4; text-decoration: line-through; }
.shift-cell-absent .shift-badge { opacity: 0.6; border: 1px solid var(--alt-danger); }
/* マスの中の小さい添え字は 2 つ＝下の印（.shift-cell-mark）と、タグの横の時間帯（.shift-cell-time。
   2026-09-07・TEST1-82。「時間帯を出す」を立てているあいだだけ）。**大きさと色は一緒に決める**
   ＝片方だけ直すと、同じマスの中で横と下の文字が食い違う。折り返しは .shift-roster td の
   nowrap を継ぐ（どちらもこの表の中でしか使わないので、あちらに任せてよい）。 */
.shift-cell-mark, .shift-cell-time { font-size: 0.65rem; color: var(--alt-text-sub); }
.shift-cell-mark { display: block; line-height: 1.1; }
.shift-cell-time { margin-left: 4px; }

/* 時刻を上書きしたマスは太字にする＝「時間帯を出す」を立てているあいだは全マスに時刻が並ぶので、
   例外（区分の時間帯と違うマス）が埋もれる。立てていないときはそもそも上書きのマスにしか出ない。 */
.shift-cell-time.is-override { font-weight: 600; color: var(--alt-text-strong); }

/* 充足の行（必要人数 vs 埋まっている人数）。段階は容量との比で色を決める。 */
.shift-roster tr.coverage td { font-size: 0.75rem; }
.shift-roster tr.coverage td.shift-name { font-weight: 600; }
.shift-cov-ok { background: var(--alt-success-bg, rgba(80, 160, 90, 0.15)); }
.shift-cov-short { background: var(--alt-danger-bg, rgba(220, 90, 80, 0.18)); font-weight: 600; }
.shift-cov-over { background: var(--alt-warning-bg, rgba(230, 170, 60, 0.18)); }
.shift-cov-none { color: var(--alt-text-muted); }

/* ==== 当日の表（スマホでも読める縦の一覧） ==== */
.shift-today-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.shift-today-dept { margin-bottom: 14px; }
.shift-today-dept h2 { font-size: 1rem; margin: 8px 0 4px; }
.shift-today-pattern { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--alt-bg-muted); }
.shift-today-pattern .label { min-width: 140px; font-weight: 600; }
.shift-today-person { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--alt-bg-subtle); }
.shift-today-person.vacant { background: rgba(220, 90, 80, 0.15); border: 1px solid var(--alt-danger); }
.shift-today-person.planned { border: 1px dashed var(--alt-border-strong); }
.shift-today-person.me { outline: 2px solid var(--alt-primary, #4d7cc7); }
.shift-today-cov { font-size: 0.78rem; color: var(--alt-text-sub); }
.shift-today-cov.short { color: var(--alt-danger); font-weight: 600; }

/* ==== 自分のシフト ==== */
/* スマホでは 6 列が入りきらないので、**枠の中で横に転がす**（シフト表と同じ作法）。
   min-width を置かないと列が均等に潰れ、メモの欄が 2〜3 文字ぶん（実測 30px）になって押せない。 */
.shift-my-wrap { overflow-x: auto; }
.shift-my { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9rem; }
.shift-my th, .shift-my td { padding: 6px 8px; border-bottom: 1px solid var(--alt-border); text-align: left; vertical-align: middle; }
.shift-my tr.off td { color: var(--alt-text-muted); }
.shift-my tr.today td { background-color: rgba(77, 124, 199, 0.10); }

/* ==== 代替候補・警告 ==== */
.shift-candidates { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.shift-candidates th, .shift-candidates td { padding: 4px 6px; border-bottom: 1px solid var(--alt-border); text-align: left; vertical-align: top; }
/* 改行を活かす（理由や警告は 1 行 1 件で組み立てて渡ってくる）。割り当てのダイアログと
   「自分のシフト」も同じ札を使うので、ここから外さないこと。 */
.shift-warnings { white-space: pre-wrap; font-size: 0.85rem; }
/* 長い文言は 30 行ぶんの枠に収める（叩き台の結果は埋まらなかった枠を全部並べるので数百行になる）。
   枠の中は転がせて、ボタンで枠ごと外せる。行数は ShiftRoster.NoticeLines と揃えること。 */
.shift-notice-body { white-space: pre-wrap; }
.shift-notice-body.is-clipped { max-height: calc(30 * 1.5em); overflow: auto; }
/* 文の中に置くボタン（見た目はリンク・実体はボタン）。**土台は app.css の .linklike**（背景・枠・font）で、
   ここが足すのは詰めと色と下線だけ。宣言を 2 つに分けると片方だけ色や下線が動いて見た目が食い違う。
   **色はテーマの変数から取る**＝ここに書いてあった --alt-primary はどこにも定義がなく、
   フォールバックの固定色が常に効いていた（テーマを変えても追従しない。2026-09-07 に気付いた）。 */
.shift-notice-toggle, .shift-name-link {
  padding: 0; text-align: left; color: var(--alt-brand); text-decoration: underline;
}
.shift-notice-toggle {
  margin-top: 6px;
  /* 親の pre-wrap を継がない＝Razor が札の中に入れる改行と字下げがそのまま出てしまう。 */
  white-space: normal;
}
/* 時間の見方の氏名は縦並びの flex の子なので、伸ばさない（押せる範囲を氏名の幅に留める）。 */
.shift-name-link { align-self: flex-start; }
.shift-reasons { font-size: 0.78rem; color: var(--alt-text-sub); }

/* タイムライン（Production と同じ見た目） */
.shift-timeline { list-style: none; padding: 0; margin: 0; }
.shift-timeline li { padding: 6px 0; border-bottom: 1px solid var(--alt-bg-muted); font-size: 0.88rem; }
.shift-timeline .who { color: var(--alt-text-sub); font-size: 0.78rem; margin-right: 6px; }
.shift-timeline .change { display: block; }

.shift-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.shift-inline-form > div { display: flex; flex-direction: column; }
.shift-inline-form label { font-size: 0.78rem; color: var(--alt-text-sub); }
.shift-actual-form { align-items: center; gap: 4px; margin: 2px 0; }
.shift-overtime { color: var(--alt-danger); font-weight: 600; }

/* ==== 時間軸（日 × 24 時間の帯）。位置は ShiftRoster.razor の定数（HourWidth）で決め、CSS は寸法を持たない。 ==== */
.shift-hours-wrap { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--alt-border); border-radius: 6px; background: var(--alt-surface); }
.shift-hours-canvas { position: relative; min-width: 100%; }
.shift-hours-row { display: flex; height: 40px; border-bottom: 1px solid var(--alt-bg-muted); }
.shift-hours-row.shift-hours-head { position: sticky; top: 0; z-index: 5; height: 34px; background: var(--alt-bg-subtle); border-bottom: 1px solid var(--alt-border); }
.shift-hours-name {
  position: sticky; left: 0; z-index: 4; width: 160px; min-width: 160px; max-width: 160px;
  display: flex; flex-direction: column; justify-content: center; padding: 0 8px; font-size: 0.85rem;
  background: var(--alt-surface); border-right: 1px solid var(--alt-border); overflow: hidden; white-space: nowrap;
}
.shift-hours-name .meta { font-size: 0.72rem; }
.shift-hours-head .shift-hours-name { background: var(--alt-bg-subtle); }
.shift-hours-tl { position: relative; flex: none; width: var(--shift-hours-width); }
.shift-hours-tl.editable { cursor: pointer; }
.shift-hours-day {
  position: absolute; top: 0; height: 18px; line-height: 18px; padding-left: 4px; font-size: 0.78rem; font-weight: 600;
  border-left: 2px solid var(--alt-border-strong); box-sizing: border-box; overflow: hidden; white-space: nowrap;
}
.shift-hours-day.holiday { color: var(--alt-danger); }
.shift-hours-day.today { background: rgba(77, 124, 199, 0.15); }
.shift-hours-tick { position: absolute; top: 18px; height: 16px; font-size: 0.65rem; color: var(--alt-text-muted); border-left: 1px dashed var(--alt-bg-muted); padding-left: 2px; }
.shift-hours-off { position: absolute; top: 0; bottom: 0; background: var(--alt-bg-muted); opacity: 0.6; pointer-events: none; }
.shift-hours-bar {
  position: absolute; box-sizing: border-box; border-radius: 3px; font-size: 0.7rem; line-height: 16px; padding: 0 4px;
  overflow: hidden; white-space: nowrap; cursor: pointer;
}
.shift-hours-bar.planned { top: 4px; height: 16px; }
.shift-hours-bar.planned.shift-cell-planned { opacity: 0.7; border: 1px dashed rgba(0, 0, 0, 0.4); }
.shift-hours-bar.planned.shift-cell-vacant { outline: 2px solid var(--alt-danger); }
.shift-hours-bar.actual { top: 24px; height: 10px; background: rgba(80, 120, 160, 0.55); }
.shift-hours-bar.overtime { top: 24px; height: 10px; background: var(--alt-danger); pointer-events: none; }

/* 代替の仮登録（本人の承認待ち）＝点線の枠と「仮」の見た目。 */
.shift-cell-tentative .shift-badge { outline: 2px dotted var(--alt-warning-border, #d9a441); outline-offset: 1px; }
.shift-hours-bar.planned.shift-cell-tentative { outline: 2px dotted var(--alt-warning-border, #d9a441); opacity: 0.85; }
.shift-tentative-actions { display: inline-flex; gap: 6px; margin-left: 6px; }

/* ==== 出勤・退勤（ダッシュボードの先頭とシフトサマリーの先頭）。大きく・間隔を広く＝スマホで指で押す。 ==== */
.shift-clock { margin: 4px 0 16px; padding: 12px; border: 1px solid var(--alt-border); border-radius: 8px; background: var(--alt-surface); }
.shift-clock-buttons { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.shift-clock-btn {
  min-width: 160px; min-height: 64px; padding: 12px 28px; font-size: 1.25rem; font-weight: 700; border-radius: 12px;
  border: 2px solid transparent; cursor: pointer; color: #fff;
}
.shift-clock-btn.in { background: #2f8f5b; }
.shift-clock-btn.out { background: #c9573d; }
.shift-clock-btn:disabled { opacity: 0.6; cursor: default; }
.shift-clock-btn:hover:not(:disabled) { filter: brightness(1.08); }
.shift-clock-state { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 10px; font-size: 0.95rem; }
.shift-clock-warn {
  margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-weight: 600;
  background: var(--alt-warning-bg, rgba(230, 170, 60, 0.18)); border: 1px solid var(--alt-warning-border, #d9a441);
}

/* ==== シフト表の右クリックのメニュー（セット・取り消し・詳細）。押した位置に固定で出し、外を押すと閉じる。 ==== */
.shift-context-backdrop { position: fixed; inset: 0; z-index: 50; }
.shift-context {
  position: fixed; z-index: 51; min-width: 240px; max-height: 70vh; overflow: auto; padding: 6px;
  background: var(--alt-surface); border: 1px solid var(--alt-border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.shift-context-title { font-weight: 600; padding: 4px 8px 6px; border-bottom: 1px solid var(--alt-bg-muted); margin-bottom: 4px; }
.shift-context-label { font-size: 0.72rem; color: var(--alt-text-sub); padding: 6px 8px 2px; }
.shift-context-item {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.shift-context-item:hover:not(:disabled) { background: var(--alt-bg-subtle); }
.shift-context-item.danger { color: var(--alt-danger); }
.shift-context-item:disabled { opacity: 0.5; cursor: default; }
.shift-context-sep { border-top: 1px solid var(--alt-bg-muted); margin: 4px 0; }

/* ==== 勤怠管理表 ==== */
.shift-sheet-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.shift-sheet-status { background: var(--alt-bg-subtle); }
.shift-sheet { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.shift-sheet th, .shift-sheet td { padding: 3px 6px; border-bottom: 1px solid var(--alt-bg-muted); text-align: left; white-space: nowrap; }
.shift-sheet th { color: var(--alt-text-sub); font-weight: 600; font-size: 0.78rem; }
.shift-sheet tr.holiday td:first-child { color: var(--alt-danger); }
.shift-sheet tr.empty td { color: var(--alt-text-muted); }
.shift-sheet td.overtime { color: var(--alt-danger); font-weight: 600; }
.shift-sheet tfoot td { border-top: 2px solid var(--alt-border-strong); }

/* ==== マスタのひな型（Shared/ShiftTemplatePicker） ==== */
.shift-template-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.shift-template-list li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.shift-template-list li:hover { background: var(--alt-bg-subtle); }
/* 登録済みは薄く出す（消さない＝何が同梱されているかは見えていたほうがよい）。 */
.shift-template-list li.is-taken { opacity: 0.55; }

/* ==== シフト-プラン（シフト表の下書き。TEST1-59） ==== */
.shift-plan-bar { padding: 6px 8px; border-radius: 8px; background: var(--alt-bg-subtle); }
/* 体裁は勤怠管理表の状態バッジ（.shift-sheet-status）と同じ。地の色だけ違う。 */
.shift-sheet-status, .shift-plan-state { font-weight: 600; padding: 2px 10px; border-radius: 6px; }
.shift-plan-state { background: var(--alt-warning-bg, rgba(230, 170, 60, 0.18)); }
.shift-sheet-status.approved, .shift-plan-state.is-confirmed { background: var(--alt-success-bg, rgba(80, 160, 90, 0.2)); }
/* プランを開いているときの正式なシフト表の行＝文脈として見せるが触らせない（薄く・破線で囲う）。 */
.shift-cell-foreign { opacity: 0.45; }
.shift-cell-foreign .shift-badge { border: 1px dashed currentColor; }

/* ==== 打刻端末（/shift/kiosk）。サイドバーの無い専用レイアウトの中身。
       文字は遠くから読む前提で大きく、押す・触る場所は入力欄 1 つだけ。 ==== */
.shift-kiosk-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.shift-kiosk { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(720px, 100%); text-align: center; }
.shift-kiosk-clock { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.shift-kiosk-clock .time { font-size: clamp(3.5rem, 14vw, 6rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.shift-kiosk-clock .date { font-size: clamp(1rem, 3vw, 1.4rem); color: var(--alt-text-sub); }
.shift-kiosk-form { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.shift-kiosk-form label { font-size: clamp(1.1rem, 3.5vw, 1.6rem); font-weight: 600; }
/* 伏せ字なので中身は読めない。幅を持たせるのは「入っている」ことが見えるようにするため。 */
.shift-kiosk-input { width: min(420px, 90%); padding: 12px 16px; font-size: 1.4rem; text-align: center; letter-spacing: 0.3em; border: 2px solid var(--alt-border-strong); border-radius: 10px; background: var(--alt-bg-subtle); }
.shift-kiosk-input:focus { outline: 3px solid var(--alt-accent); outline-offset: 2px; }
.shift-kiosk-result { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 16px; border-radius: 12px; }
.shift-kiosk-result.ok { background: var(--alt-success-bg, rgba(80, 160, 90, 0.2)); }
.shift-kiosk-result.ng { background: var(--alt-warning-bg, rgba(230, 170, 60, 0.18)); }
.shift-kiosk-result .name { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 700; }
.shift-kiosk-result .kind { font-size: clamp(1.2rem, 4vw, 1.8rem); font-weight: 600; }
.shift-kiosk-result .message { font-size: clamp(0.95rem, 2.5vw, 1.15rem); }
.shift-kiosk-device { color: var(--alt-text-muted); font-size: 0.9rem; }
.shift-kiosk-fatal { max-width: 640px; margin: 0 auto; padding: 24px; text-align: center; }

/* 打刻端末の NFC（Android の内蔵リーダー）。許可がまだのときのボタンと、その下の案内。
   **打刻の入力欄とは別の塊にする**＝この画面はフォーカスが入力欄から離れないことを守っており、
   フォーカスを取る部品を同じ枠に入れない（ShiftKiosk.razor の doc が正）。 */
.shift-kiosk-nfc-setup { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shift-kiosk-nfc { padding: 10px 20px; font-size: 1.05rem; font-weight: 600; border-radius: 8px; border: 2px solid var(--alt-accent); background: var(--alt-bg-subtle); color: var(--alt-accent); cursor: pointer; }
.shift-kiosk-nfc:hover { background: var(--alt-accent-soft); }