/* ==========================================================================
   就労選択支援 記録アプリ 共通スタイル（全フェーズで使い回す土台）
   --------------------------------------------------------------------------
   【流用元について】
   グループホーム記録アプリ（GH版）の public/css/style.css をそのまま
   コピーしたもの（GH側のファイルは無変更。UI規約は設計書v2の方針どおり
   そのまま流用してよいため、クラス名・変数名は変更していない）。
   フェーズが進むにつれて、GH版と同じクラス名（.card・.btn・.form-group等）を
   このアプリの各画面でも使い回す。
   ※ただし、GH版フェーズ15「家族・関係機関との情報共有ポータル」専用のスタイル
   （.family-*・.chat-bubble-*・.chat-form・.share-setting-*・.share-toggle-*）は、
   設計書v2で「家族ポータルは見送り（運用後に再判断）」と明確に決まっており、
   本アプリのどの画面からも参照される見込みがないため、reviewer指摘（フェーズ1）
   を受けて削除している。

   方針：
   ・50〜60代のスタッフが格安タブレットでも迷わず使えるよう、
     「文字は大きく」「ボタンは大きく」「色ははっきり」を徹底する。
   ・重い装飾やアニメーションは使わない（動作を軽くするため）。
   ・数値はCSS変数（デザイントークン）にまとめ、後のフェーズで
     使い回せるようにする。
   ========================================================================== */

:root {
  /* ---- 文字サイズ ---- */
  --font-size-base: 18px;      /* 本文の最小サイズ（読みやすさ確保） */
  --font-size-lead: 20px;      /* 案内文など、少し強調したい文章 */
  --font-size-title: 40px;     /* ページの大見出し */
  --font-size-heading: 24px;   /* セクション見出し */
  --font-size-button: 20px;    /* ボタン内の文字 */
  --font-size-small: 14px;     /* フッターなど補足の小さい文字 */

  /* ---- ボタン・タップ領域 ---- */
  --button-min-height: 56px;   /* タブレットで指でも押しやすい高さ（44px以上を確保） */
  --button-radius: 8px;

  /* ---- 余白 ---- */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;

  /* ---- 色（高コントラスト・見やすさ優先） ---- */
  --color-background: #f5f7f9;   /* ページ全体の背景（白系） */
  --color-surface: #ffffff;      /* カードなど部品の背景 */
  --color-text: #1a1a1a;         /* 本文の文字色（濃色） */
  --color-text-muted: #555555;   /* 補足文字色 */
  --color-accent: #1565c0;       /* アクセント色（青：ボタンや強調に使用） */
  --color-accent-dark: #0d47a1;  /* アクセント色（押した時などの濃い版） */
  --color-success-bg: #e6f4ea;   /* 「保存しました」の背景（薄い緑） */
  --color-success-text: #1b5e20; /* 「保存しました」の文字（濃い緑） */
  --color-info-bg: #e8f0fe;      /* お知らせ表示の背景（薄い青） */
  --color-info-text: #0d3c78;    /* お知らせ表示の文字 */
  --color-border: #d9dee3;       /* 枠線の色 */

  /* ---- その他 ---- */
  --card-radius: 12px;
  --transition-speed: 0.15s;     /* アニメーションは使わず、簡単な色変化のみ */
}

/* ---- 全体のリセット・基本設定 ---- */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ==========================================================================
   共通部品
   ========================================================================== */

/* ---- カード：情報をまとめて囲む白い箱 ---- */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--spacing-lg);
}

/* ---- 大きなボタン（今後の入力画面などで共通利用） ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-min-height);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-button);
  font-weight: bold;
  color: #ffffff;
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-speed);
}

.btn:hover,
.btn:focus {
  background-color: var(--color-accent-dark);
}

/* キーボード操作（Tabキーでの移動）でフォーカスが当たった際に、
   枠線をはっきり表示して「今どこを選んでいるか」が分かるようにする。
   マウス操作でのクリック時には出さず、キーボード利用時のみ表示する。 */
.btn:focus-visible,
.btn-secondary:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* 押せない状態のボタンであることが見た目でも分かるようにする共通スタイル
   （使い勝手レビュー第1回・項目7a：記録が無い日の印刷ボタン無効化など） */
.btn:disabled,
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 横幅いっぱいに広げたいボタン（フォームの送信ボタンなど） */
.btn-block {
  width: 100%;
}

/* 補助的なボタン（キャンセルなど、控えめにしたい操作用） */
.btn-secondary {
  background-color: #ffffff;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-info-bg);
}

/* 注意を促す操作用ボタン（無効化など、慎重な操作向け） */
.btn-danger {
  background-color: #ffffff;
  color: #b71c1c;
  border: 2px solid #b71c1c;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #fdecea;
}

/* ---- 保存完了メッセージ（大きく表示して安心させる） ---- */
.message-success {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--card-radius);
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: var(--font-size-heading);
  font-weight: bold;
  text-align: center;
}

/* ---- お知らせ・案内メッセージ（準備中の表示などに使用） ---- */
.message-info {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--card-radius);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
  font-size: var(--font-size-lead);
  text-align: center;
}

/* ==========================================================================
   トップ画面（フェーズ0）専用スタイル
   ========================================================================== */

.top-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.top-card {
  max-width: 640px;
  width: 100%;
  text-align: center;
}

.app-title {
  font-size: var(--font-size-title);
  margin: 0 0 var(--spacing-md) 0;
  color: var(--color-accent-dark);
}

/* ---- 就労選択支援アプリ：フェーズ1で追加。見出し内の単語区切り ----
   日本語（CJK）の文章は、通常はほぼどの文字の間でも折り返せてしまうため、
   狭い画面幅で見出しが表示される際に「記録ア/プリ」のような不自然な
   位置で改行されることがある。意味のまとまり（フレーズ）ごとに
   white-space: nowrap を指定することで、フレーズの内部では折り返さず、
   フレーズとフレーズの間（空白の位置）でだけ折り返せるようにする
   （使い勝手レビュー指摘対応）。 */
.nowrap-phrase {
  white-space: nowrap;
}

.lead-text {
  font-size: var(--font-size-lead);
  color: var(--color-text);
  margin: 0;
}

.site-footer {
  text-align: center;
  padding: var(--spacing-sm);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ==========================================================================
   ログイン画面（フェーズ1）専用スタイル
   ========================================================================== */

.login-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.login-card {
  max-width: 480px;
  width: 100%;
  text-align: center;
}

/* ---- 入力フォーム共通部品（ログイン・スタッフ管理で使い回す） ---- */
.form-group {
  text-align: left;
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  font-size: var(--font-size-lead);
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
}

.form-hint {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-top: 4px;
}

.form-input,
.form-select {
  width: 100%;
  min-height: var(--button-min-height);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-button);
  border: 2px solid var(--color-border);
  border-radius: var(--button-radius);
  background-color: #ffffff;
  color: var(--color-text);
  font-family: inherit;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-row {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.form-row .form-input {
  flex: 1;
}

/* ---- エラーメッセージ（大きく赤系で表示） ---- */
.message-error {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--card-radius);
  background-color: #fdecea;
  color: #b71c1c;
  font-size: var(--font-size-heading);
  font-weight: bold;
  text-align: center;
}

/* ==========================================================================
   ログイン後の共通レイアウト（サイドメニュー＋メイン領域）
   ========================================================================== */

.app-layout {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* ---- 左側サイドメニュー：常時表示・大きな文字で押しやすく ----
   【使い勝手フィードバック第2弾：不具合修正】
   html/bodyには`height: 100%`が指定されているため（このファイル冒頭を参照）、
   ページ全体の高さは実質ビューポートの高さ（100vh）に固定される。メニュー項目が
   増えて.side-menuの中身がビューポートの高さを超えると、はみ出した部分は
   ボックスの外側（背景色のない領域）に描画されてしまい、白い背景に白文字が
   重なって読めなくなっていた（PCで発生していた表示崩れの原因）。
   そこで.side-menu自体を「ビューポート丈で固定し、はみ出した分はメニューの
   内側だけでスクロールする」箱にする。position: stickyにより、本文
   （.main-content）が長くページ全体がスクロールしても、メニューは常に画面内に
   留まり続ける（よくあるサイドバーの挙動）。 ---- */
.side-menu {
  width: 260px;
  flex-shrink: 0;
  background-color: var(--color-accent-dark);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  /* スクロールバーを細くし、圧迫感を減らす（Firefox向け） */
  scrollbar-width: thin;
}

/* Windows PCで主に使われるChrome/Edge（WebKit系）向けにも、同様に細い
   スクロールバーにする（Firefox向けのscrollbar-widthとは別指定が必要なため）。 */
.side-menu::-webkit-scrollbar {
  width: 6px;
}
.side-menu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 4px;
}

.side-menu-header {
  font-size: var(--font-size-heading);
  font-weight: bold;
  text-align: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.side-menu-list {
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) 0;
}

/* ---- サイドメニューのグループ見出し（「毎日の記録」など。使い勝手レビュー第1回・項目6） ----
   小さめ・薄色にして、リンク本体より目立たないようにする */
.side-menu-group-heading {
  margin: var(--spacing-sm) 0 0 0;
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-small);
  font-weight: bold;
  color: rgba(255, 255, 255, 0.55);
}

.side-menu-list:first-of-type,
.side-menu-group-heading:first-of-type {
  margin-top: 0;
}

.side-menu-link {
  display: flex;
  align-items: center;
  min-height: var(--button-min-height);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-lead);
  color: #ffffff;
  text-decoration: none;
  transition: background-color var(--transition-speed);
}

/* ---- メニューアイコン（絵文字）専用のフォント指定 ----
   PCの環境（Windowsのバージョン・インストール済みフォント等）によっては、
   絵文字の直後にラベル文字（日本語）が続くと、ブラウザがその文字列全体を
   1つのフォントで描画しようとして、絵文字まで白黒・文字化け（豆腐）表示に
   なってしまうことがある（色ムラ・表示崩れの原因）。
   そこで絵文字部分だけ<span class="menu-icon">で囲み、確実にカラー絵文字を
   持つフォントを指定することで、ラベル文字のフォントに引っ張られず
   常にカラーで表示されるようにする。 */
.menu-icon {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  display: inline-block;
  width: 1.6em;
  text-align: center;
}

.side-menu-link:hover,
.side-menu-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  outline: none;
}

.side-menu-link.is-active {
  background-color: var(--color-accent);
  font-weight: bold;
}

/* ---- 就労選択支援アプリ：フェーズ1で追加。「準備中」メニュー項目 ----
   今後のフェーズで実装予定の画面を、押せない状態の一覧としてサイドメニューに
   表示するためのスタイル（設計書v2フェーズ1指示）。<button>要素にも
   .side-menu-linkの見た目をそのまま適用できるよう、ボタンの既定の枠線・
   背景・フォントをリセットしている。 */
.side-menu-link.is-disabled {
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: not-allowed;
  opacity: 0.55;
}

.side-menu-link.is-disabled:hover,
.side-menu-link.is-disabled:focus-visible {
  background-color: transparent;
}

.coming-soon-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}

/* ---- メイン領域 ---- */
.main-content {
  flex: 1;
  padding: var(--spacing-lg);
  min-width: 0; /* テーブルなどが幅を超えてもレイアウトが崩れないように */
}

/* 幅が狭いタブレット（縦向きなど）では、サイドメニューを上部の横並びに切り替える */
@media (max-width: 720px) {
  .app-layout {
    flex-direction: column;
  }
  .side-menu {
    width: 100%;
    /* 横並びモードでは、メニューが画面上部に収まる高さしか使わないため、
       PC向けの「画面丈固定＋内側スクロール」の指定は不要（元の通常配置に戻す） */
    position: static;
    height: auto;
    overflow-y: visible;
  }
  .side-menu-list {
    display: flex;
    flex-wrap: wrap;
  }
  .side-menu-link {
    min-height: 48px;
  }
}

/* ==========================================================================
   ホーム画面（フェーズ1）専用スタイル
   ========================================================================== */

.home-greeting {
  font-size: var(--font-size-title);
  color: var(--color-accent-dark);
  margin: 0 0 var(--spacing-xs) 0;
}

.home-date {
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-md) 0;
}

.home-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ==========================================================================
   スタッフ管理画面（フェーズ1）専用スタイル
   ========================================================================== */

.page-heading {
  font-size: var(--font-size-title);
  color: var(--color-accent-dark);
  margin: 0 0 var(--spacing-md) 0;
}

.section-heading {
  font-size: var(--font-size-heading);
  margin: 0 0 var(--spacing-sm) 0;
}

/* 一覧テーブル：横スクロールできるようにして、崩れを防ぐ */
.table-wrap {
  overflow-x: auto;
}

.staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.staff-table th,
.staff-table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}

.staff-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* 有効／無効の状態バッジ */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
}

.status-active {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-inactive {
  background-color: #fdecea;
  color: #b71c1c;
}

/* 雇用形態バッジ（非常勤）用の落ち着いた青系。エラー色（.status-inactive）と
   紛らわしくならないよう別クラスにする（フェーズ16追加：勤務形態一覧表）。 */
.status-badge-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* 各行の操作ボタン群 */
.action-buttons {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.btn-small {
  min-height: 44px;
  padding: 4px var(--spacing-sm);
  font-size: var(--font-size-base);
}

/* 画面切り替え（一覧／新規登録／編集）用のセクション。
   「1画面1作業」を守るため、JavaScript側で表示するセクションを1つに絞る */
.screen-section {
  display: none;
}

.screen-section.is-visible {
  display: block;
}

/* 新規登録・パスワード再発行時に表示する「必ず控えてください」ボックス */
.credential-box {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--card-radius);
  background-color: var(--color-success-bg);
  border: 2px solid var(--color-success-text);
  text-align: center;
}

.credential-box .credential-value {
  font-size: var(--font-size-heading);
  font-weight: bold;
  color: var(--color-success-text);
  margin: var(--spacing-xs) 0;
  word-break: break-all;
}

.credential-box .credential-warning {
  font-size: var(--font-size-base);
  color: #b71c1c;
  font-weight: bold;
  margin-top: var(--spacing-sm);
}

/* ==========================================================================
   利用者管理画面（フェーズ2）専用スタイル
   ========================================================================== */

/* ---- 拠点絞り込みボタン群（「すべて」「GH-A」「GH-B」など） ---- */
.site-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.site-filter-button {
  min-height: var(--button-min-height);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-button);
  font-weight: bold;
  color: var(--color-accent);
  background-color: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
}

.site-filter-button:hover,
.site-filter-button:focus-visible {
  background-color: var(--color-info-bg);
  outline: none;
}

/* 選択中の拠点ボタン：色を反転させてひと目で分かるようにする */
.site-filter-button.is-active {
  background-color: var(--color-accent);
  color: #ffffff;
}

/* ---- 「退居済みも表示」チェック行（大きめのチェックボックス） ---- */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-lead);
  margin-bottom: var(--spacing-md);
}

.checkbox-row input[type="checkbox"] {
  width: 28px;
  height: 28px;
  cursor: pointer;
}

/* ---- 利用者カード一覧 ---- */
.resident-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* カード全体をボタン化し、タップで編集/詳細表示へ移動できるようにする */
.resident-card {
  display: block;
  width: 100%;
  text-align: left;
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  font-size: var(--font-size-base);
  transition: border-color var(--transition-speed), background-color var(--transition-speed);
}

.resident-card:hover,
.resident-card:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-info-bg);
  outline: none;
}

.resident-card-name {
  font-size: var(--font-size-heading);
  font-weight: bold;
  margin: 0 0 4px 0;
}

.resident-card-furigana {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-weight: normal;
}

.resident-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* 退居済みの利用者に付ける小さな注意バッジ */
.status-tag-inactive {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: #fdecea;
  color: #b71c1c;
  margin-left: var(--spacing-xs);
}

/* 体験利用者に付ける小さな黄色バッジ（体験利用支援加算の対象。目立たせるため
   警告色に近い黄系にする。.compliance-status-badge.is-soonと同じ配色） */
.status-tag-trial {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: #fff8e1;
  color: #8d6e00;
  margin-left: var(--spacing-xs);
}

/* ---- 登録・編集フォームのグループ分け（fieldset） ---- */
.form-fieldset {
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--spacing-md);
  margin: 0 0 var(--spacing-md) 0;
}

.form-legend {
  font-size: var(--font-size-heading);
  font-weight: bold;
  color: var(--color-accent-dark);
  padding: 0 var(--spacing-xs);
}

.form-textarea {
  width: 100%;
  min-height: 88px;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-button);
  border: 2px solid var(--color-border);
  border-radius: var(--button-radius);
  background-color: #ffffff;
  color: var(--color-text);
  font-family: inherit;
  resize: vertical;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ---- 読み取り専用の詳細表示（一般職員向け） ---- */
.detail-group {
  margin-bottom: var(--spacing-md);
}

.detail-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.detail-label {
  flex: 0 0 180px;
  font-weight: bold;
  color: var(--color-text-muted);
}

.detail-value {
  flex: 1;
  min-width: 200px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   支援記録画面（フェーズ3）専用スタイル
   ========================================================================== */

/* ---- 記録画面の見出し行（利用者名＋戻るボタン） ---- */
.record-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.record-resident-name {
  font-size: var(--font-size-title);
  color: var(--color-accent-dark);
  margin: 0;
}

/* ---- 日付ナビゲーション行 ---- */
.date-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.date-nav-input {
  max-width: 200px;
}

/* ---- 日付・月・週ナビゲーションのボタン（前の日／次の日／今日へ／前月／次月／
   前週／次週など）の大型化（使い勝手レビュー第1回・項目5）。
   これらのボタンは.btn-secondaryのみを付けており、.btnや.btn-smallを
   併用していないため、これまで最小サイズの指定がなく押しにくかった。
   影響範囲を.date-nav-row / .calendar-nav-row の中のボタンに限定し、
   他画面の.btn-secondary単体（戻る・キャンセル等）の見た目は変えない。 ---- */
.date-nav-row .btn-secondary,
.calendar-nav-row .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 18px;
  font-weight: bold;
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-speed);
}

/* ---- バイタル入力グリッド ---- */
.vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-md);
}

.vitals-item .form-label {
  font-size: var(--font-size-base);
}

.vital-warning {
  display: block;
  color: #b71c1c;
  font-weight: bold;
  margin-top: 4px;
}

/* ---- 選択式グリッド（食事・服薬・排泄・入浴・睡眠・気分） ---- */
.choice-field {
  margin-bottom: var(--spacing-md);
}

.choice-field-label {
  font-size: var(--font-size-lead);
  font-weight: bold;
  margin: 0 0 var(--spacing-xs) 0;
}

.select-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.select-button {
  min-height: var(--button-min-height);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-button);
  font-weight: bold;
  color: var(--color-accent);
  background-color: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
}

.select-button:hover,
.select-button:focus-visible {
  background-color: var(--color-info-bg);
}

/* キーボード操作時にどのボタンを選んでいるか分かるよう、はっきりした枠線を出す */
.select-button:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* 選択中のボタン：色を反転させて濃色にし、ひと目で分かるようにする */
.select-button.is-selected {
  background-color: var(--color-accent);
  color: #ffffff;
}

/* ---- 特大の保存ボタン（支援記録の主操作） ---- */
.btn-save-large {
  min-height: 72px;
  font-size: 24px;
  margin-top: var(--spacing-md);
}

/* ---- 未保存の変更があるときの保存ボタン強調表示
   （使い勝手レビュー第1回・項目2：押し忘れ防止。オレンジ系で「まだ保存していません」を目立たせる） ---- */
.btn-save-large.btn-unsaved {
  background-color: #e65100;
}

.btn-save-large.btn-unsaved:hover,
.btn-save-large.btn-unsaved:focus {
  background-color: #bf360c;
}

/* ---- 記録明細の追記フォーム ---- */
.entry-form-box {
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--spacing-md);
}

.entry-form-heading {
  font-size: var(--font-size-heading);
  margin: 0 0 var(--spacing-sm) 0;
}

.entry-form-row {
  flex-wrap: wrap;
  align-items: flex-start;
}

.entry-time-group,
.entry-shift-group {
  flex: 1;
  min-width: 200px;
}

/* ---- シフト区分の大きなトグルボタン ---- */
.shift-toggle {
  display: flex;
  gap: var(--spacing-sm);
}

.shift-toggle-button {
  flex: 1;
  min-height: var(--button-min-height);
  font-size: var(--font-size-button);
  font-weight: bold;
  color: var(--color-accent);
  background-color: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
}

.shift-toggle-button:hover,
.shift-toggle-button:focus-visible {
  background-color: var(--color-info-bg);
}

/* キーボード操作時にどのボタンを選んでいるか分かるよう、はっきりした枠線を出す */
.shift-toggle-button:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.shift-toggle-button.is-selected {
  background-color: var(--color-accent);
  color: #ffffff;
}

/* ---- 追記フォームの定型文ボタン ---- */
.quick-phrase-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.quick-phrase-button {
  min-height: 44px;
  padding: 4px var(--spacing-sm);
  font-size: var(--font-size-small);
  color: var(--color-info-text);
  background-color: var(--color-info-bg);
  border: 2px solid var(--color-info-text);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
}

.quick-phrase-button:hover,
.quick-phrase-button:focus-visible {
  background-color: #ffffff;
  outline: none;
}

/* ---- 記録明細の時系列リスト ---- */
.entry-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-sm) 0;
}

.entry-item:last-child {
  border-bottom: none;
}

.entry-item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.entry-time {
  font-size: var(--font-size-lead);
  font-weight: bold;
}

.shift-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
}

.shift-badge-day {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.shift-badge-night {
  background-color: #ede7f6;
  color: #4527a0;
}

.entry-staff-name {
  color: var(--color-text-muted);
}

/* 「(修正済み ○月○日 ○:○○)」の小さな注記（改ざんでないことの可視化） */
.entry-edited-note {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.entry-content {
  white-space: pre-wrap;
  word-break: break-word;
  margin: var(--spacing-xs) 0 0 0;
}

/* ---- 記録カレンダー ---- */
.calendar-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.calendar-month-label {
  font-size: var(--font-size-heading);
  font-weight: bold;
  min-width: 160px;
  text-align: center;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
}

.calendar-table th,
.calendar-table td {
  border: 1px solid var(--color-border);
  text-align: center;
  padding: var(--spacing-xs);
}

.calendar-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.calendar-cell-empty {
  background-color: var(--color-background);
}

.calendar-day-button {
  width: 100%;
  min-height: 56px;
  font-size: var(--font-size-button);
  background-color: #ffffff;
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
}

.calendar-day-button:hover,
.calendar-day-button:focus-visible {
  background-color: var(--color-info-bg);
  outline: none;
}

.calendar-record-mark {
  display: block;
  color: var(--color-accent);
  font-size: var(--font-size-heading);
  line-height: 1;
}

/* ==========================================================================
   夜間巡回記録画面（フェーズ4）専用スタイル
   ========================================================================== */

/* ---- 巡回時刻ごとの見出し（「23:00 の巡回」など） ---- */
.patrol-time-group {
  margin-bottom: var(--spacing-md);
}

.patrol-time-group:last-child {
  margin-bottom: 0;
}

.patrol-time-heading {
  font-size: var(--font-size-heading);
  color: var(--color-accent-dark);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--spacing-xs);
  margin: 0 0 var(--spacing-sm) 0;
}

/* ---- 巡回記録の1件分の表示（利用者ごと） ---- */
.patrol-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-sm) 0;
}

.patrol-item:last-child {
  border-bottom: none;
}

.patrol-item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.patrol-item-name {
  font-size: var(--font-size-lead);
  font-weight: bold;
}

/* ---- 状況バッジ（就寝中／起きている／不穏 など） ---- */
.patrol-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
}

/* 落ち着いている状態は控えめな色にする */
.patrol-status-sleep {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.patrol-status-awake {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.patrol-status-out {
  background-color: #ede7f6;
  color: #4527a0;
}

.patrol-status-other {
  background-color: #f1f1f1;
  color: var(--color-text-muted);
}

/* 「不穏」「体調不良」など、注意が必要な状態ははっきり目立たせる */
.patrol-status-alert {
  background-color: #fdecea;
  color: #b71c1c;
}

/* ---- 一括記録フォーム：利用者ごとの入力行 ---- */
.patrol-form-row {
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.patrol-form-row:last-child {
  margin-bottom: 0;
}

.patrol-form-row-name {
  font-size: var(--font-size-lead);
  font-weight: bold;
  margin: 0 0 var(--spacing-xs) 0;
}

/* 補足入力欄：本文の状況ボタンより控えめな小さめサイズにする */
.patrol-note-input {
  margin-top: var(--spacing-xs);
  min-height: 44px;
  font-size: var(--font-size-base);
}

/* ==========================================================================
   業務日誌画面（フェーズ5）専用スタイル
   ========================================================================== */

/* ---- ステップ1：拠点選択の大きなボタン（2つ・タブレットで押しやすい特大サイズ） ---- */
.site-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.site-select-button {
  min-height: 96px;
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--card-radius);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-speed);
}

.site-select-button:hover,
.site-select-button:focus-visible {
  background-color: var(--color-accent-dark);
}

.site-select-button:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* 利用者数入力：他の項目と並んだ時に幅を取りすぎないようにする */
.resident-count-input {
  max-width: 200px;
}

/* 連絡事項・申し送り欄は他の欄より大きめにして書きやすくする */
.diary-notes-textarea {
  min-height: 160px;
}

/* ---- 過去の日誌一覧（直近30日分の日付リスト） ---- */
.diary-date-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.diary-date-item {
  display: block;
  width: 100%;
  text-align: left;
  min-height: var(--button-min-height);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-button);
  border: 2px solid var(--color-border);
  border-radius: var(--button-radius);
  font-family: inherit;
}

/* 日誌が書かれている日：タップできるボタンにし、緑系ではっきり見せる */
button.diary-date-item.has-diary {
  background-color: #ffffff;
  color: var(--color-success-text);
  border-color: var(--color-success-text);
  font-weight: bold;
  cursor: pointer;
}

button.diary-date-item.has-diary:hover,
button.diary-date-item.has-diary:focus-visible {
  background-color: var(--color-success-bg);
  outline: none;
}

button.diary-date-item.has-diary:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* 日誌が未記入の日：タップできない控えめな表示（記入漏れがひと目で分かる） */
.diary-date-item.no-diary {
  background-color: var(--color-background);
  color: var(--color-text-muted);
}

/* ==========================================================================
   ヒヤリハット・事故報告画面（フェーズ6）専用スタイル
   ========================================================================== */

/* ---- 種別の特大トグル（事故／ヒヤリハット。登録・修正フォームで使用） ---- */
.incident-kind-toggle {
  display: flex;
  gap: var(--spacing-sm);
}

.incident-kind-toggle-button {
  flex: 1;
  min-height: 80px;
  font-size: 22px;
  font-weight: bold;
  color: var(--color-accent);
  background-color: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.incident-kind-toggle-button:hover,
.incident-kind-toggle-button:focus-visible {
  background-color: var(--color-info-bg);
}

.incident-kind-toggle-button:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* 選択中：種別ごとに色を変えて一目で分かるようにする（事故＝赤系／ヒヤリハット＝黄系） */
.incident-kind-toggle-button.is-selected[data-kind="事故"] {
  background-color: #b71c1c;
  border-color: #b71c1c;
  color: #ffffff;
}

.incident-kind-toggle-button.is-selected[data-kind="ヒヤリハット"] {
  background-color: #f9a825;
  border-color: #f9a825;
  color: #1a1a1a;
}

/* 修正時は種別を変更できないため、押せない見た目にする（不変項目・UI側の防御） */
.incident-kind-toggle-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- 種別バッジ（一覧・詳細表示。事故＝赤系／ヒヤリハット＝黄系） ---- */
.incident-kind-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
}

.incident-kind-badge-accident {
  background-color: #fdecea;
  color: #b71c1c;
}

.incident-kind-badge-hiyari {
  background-color: #fff8e1;
  color: #8d6e00;
}

/* ---- 未記入バッジ（原因分析・再発防止策の書き漏れを目立たせる。監査対応） ---- */
.missing-badge {
  display: inline-block;
  padding: 2px 10px;
  border: 2px solid #b71c1c;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  color: #b71c1c;
  background-color: #ffffff;
}

/* ---- 一覧カード ---- */
.incident-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.incident-card {
  display: block;
  width: 100%;
  text-align: left;
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  font-size: var(--font-size-base);
  transition: border-color var(--transition-speed), background-color var(--transition-speed);
}

.incident-card:hover,
.incident-card:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-info-bg);
  outline: none;
}

.incident-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 4px;
}

.incident-card-date {
  font-size: var(--font-size-lead);
  font-weight: bold;
}

.incident-card-situation {
  margin: var(--spacing-xs) 0;
  color: var(--color-text);
  word-break: break-word;
}

.incident-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* ==========================================================================
   個別支援計画画面（フェーズ7）専用スタイル
   ========================================================================== */

/* ---- 日付の前後関係の注意表示（保存は妨げない警告。原案バッジと同系色の黄色） ---- */
.message-warning {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--card-radius);
  background-color: #fff8e1;
  color: #8d6e00;
  font-size: var(--font-size-base);
  font-weight: bold;
}

/* ---- 計画の同意状況バッジ（計画がありません＝グレー／原案＝黄／同意済み＝緑） ---- */
.plan-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.plan-status-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 24px;
  font-weight: bold;
  font-size: var(--font-size-heading);
}

/* 一覧カードの中で使う、控えめな小サイズ版 */
.plan-status-badge.is-small {
  padding: 4px 12px;
  font-size: var(--font-size-small);
  border-radius: 20px;
}

.plan-status-none {
  background-color: #f1f1f1;
  color: var(--color-text-muted);
}

.plan-status-draft {
  background-color: #fff8e1;
  color: #8d6e00;
}

.plan-status-agreed {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

/* モニタリングが前回実施から6か月以上たっている場合の注意表示 */
.plan-monitoring-warning {
  color: #b71c1c;
  font-weight: bold;
  margin: var(--spacing-xs) 0 0 0;
}

/* ---- 4つのタブ風大ボタン（アセスメント／支援計画／担当者会議／モニタリング） ---- */
.plan-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.plan-tab-button {
  flex: 1;
  min-width: 160px;
  min-height: 72px;
  font-size: var(--font-size-button);
  font-weight: bold;
  color: var(--color-accent);
  background-color: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.plan-tab-button:hover,
.plan-tab-button:focus-visible {
  background-color: var(--color-info-bg);
}

.plan-tab-button:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.plan-tab-button.is-selected {
  background-color: var(--color-accent);
  color: #ffffff;
}

/* ---- 記録一覧カード（アセスメント・支援計画・会議・モニタリング共通） ---- */
.plan-record-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.plan-record-card {
  display: block;
  width: 100%;
  text-align: left;
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  font-size: var(--font-size-base);
  transition: border-color var(--transition-speed), background-color var(--transition-speed);
}

.plan-record-card:hover,
.plan-record-card:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-info-bg);
  outline: none;
}

.plan-record-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 4px;
}

.plan-record-card-date {
  font-size: var(--font-size-lead);
  font-weight: bold;
}

.plan-record-card-summary {
  margin: var(--spacing-xs) 0;
  color: var(--color-text);
  word-break: break-word;
}

.plan-record-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* ==========================================================================
   汎用ユーティリティ（インラインstyle属性を使わずに済ませるための小さな部品）
   ========================================================================== */

/* 要素を非表示にする（JavaScriptでの表示/非表示切り替えに使用）。
   !importantを付けて、印刷用の.print-only-block（@media print時にdisplay:blockと
   なる）など他の表示ルールとCSSのソース順（記述順）が前後しても、
   必ずis-hiddenが優先されるようにする（plans.htmlの印刷ヘッダー・署名欄の
   出し分けのように、is-hiddenとprint-only-blockを併用する箇所があるため）。 */
.is-hidden {
  display: none !important;
}

/* 要素の上に標準の余白を追加する */
.mt-md {
  margin-top: var(--spacing-md);
}

/* 要素の下に小さめの余白を追加する（監査対策パック第1弾：注意書きボックスの直後に見出しを詰めすぎないため） */
.mb-sm {
  margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   サービス提供実績記録票画面（フェーズ8）専用スタイル
   ========================================================================== */

/* ---- 実績表本体（月の全日を1行ずつ並べる。行数が多いため他の一覧より
   コンパクトにする。タブレットの横幅でも収まるよう .table-wrap で
   横スクロールに対応する） ---- */
.service-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
  min-width: 720px; /* 5列ぶんの最低幅。狭い画面では table-wrap が横スクロールにする */
}

.service-table th,
.service-table td {
  border: 1px solid var(--color-border);
  padding: 6px var(--spacing-xs);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.service-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* 各行の先頭（日付セル）は <th scope="row"> にしているが、見た目は
   これまでどおり普通のセルに見えるよう、列見出しの色を打ち消す
   （スクリーンリーダーには「この行の見出し＝日付」として伝わる）。 */
.service-table th[scope="row"] {
  background-color: transparent;
  color: inherit;
  font-weight: normal;
}

/* 土曜・日曜の色分け（設計書どおり：土＝青、日＝赤） */
.service-weekday-sat {
  color: var(--color-accent);
  font-weight: bold;
}

.service-weekday-sun {
  color: #b71c1c;
  font-weight: bold;
}

.service-cell-center {
  text-align: center;
}

/* ---- 状況の変更ボタン（宿泊あり／入院／外泊／日中のみ／提供なし） ---- */
.service-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.service-status-button {
  min-height: 36px;
  padding: 2px 8px;
  font-size: var(--font-size-small);
  font-weight: bold;
  color: var(--color-accent);
  background-color: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.service-status-button:hover,
.service-status-button:focus-visible {
  background-color: var(--color-info-bg);
}

.service-status-button:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.service-status-button.is-selected {
  background-color: var(--color-accent);
  color: #ffffff;
}

.service-status-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 閲覧のみのスタッフ向けの状況バッジ表示 */
.service-status-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* ---- 夜間支援トグルボタン ---- */
.service-night-toggle {
  min-height: 36px;
  min-width: 64px;
  padding: 2px 8px;
  font-size: var(--font-size-small);
  font-weight: bold;
  color: var(--color-text-muted);
  background-color: #ffffff;
  border: 2px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
}

.service-night-toggle:hover,
.service-night-toggle:focus-visible {
  background-color: var(--color-info-bg);
}

.service-night-toggle:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.service-night-toggle.is-on {
  background-color: #ede7f6;
  color: #4527a0;
  border-color: #4527a0;
}

.service-night-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- 備考の小さな入力欄 ---- */
.service-note-input {
  width: 100%;
  min-width: 140px;
  min-height: 36px;
  padding: 2px var(--spacing-xs);
  font-size: var(--font-size-small);
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background-color: #ffffff;
  color: var(--color-text);
  font-family: inherit;
}

.service-note-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ---- 日数集計（4〜5項目を並べる大きな数字表示） ---- */
.service-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-md);
}

.service-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  background-color: var(--color-background);
}

.service-summary-label {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.service-summary-value {
  font-size: var(--font-size-title);
  font-weight: bold;
  color: var(--color-accent-dark);
}

/* ---- 保存完了の小さな一時トースト表示（画面右下に短く出す） ---- */
.save-toast {
  position: fixed;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-success-text);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: bold;
  border-radius: var(--button-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

/* ==========================================================================
   点検・帳票画面／ホーム画面の「確認が必要なこと」共通スタイル（フェーズ9）
   ========================================================================== */

/* ---- 期限アラート・日付整合チェックなどの注意カード ---- */
.alert-card {
  text-align: left;
}

.alert-card-ok {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-text);
}

.alert-card-ok .lead-text {
  color: var(--color-success-text);
  font-weight: bold;
  text-align: center;
  margin: 0;
}

.alert-card-warning {
  background-color: #fff8e1;
  border-color: #8d6e00;
}

/* ---- お知らせ系の情報カード（青。警告ではなく「今後の予定」等の案内に使う） ----
   追加機能第1弾：通院・受診管理の「次回受診予定（7日以内）」で使用。 */
.alert-card-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-text);
}

.alert-card-info .lead-text {
  color: var(--color-info-text);
  font-weight: bold;
  text-align: center;
  margin: 0;
}

.alert-card-loading {
  background-color: var(--color-background);
}

.alert-card-item {
  margin: var(--spacing-xs) 0;
}

/* ---- お知らせ系の項目（青文字。黄色の警告カードの中でも情報系だけ色分けする） ----
   追加機能第1弾：通院・受診管理の「今後7日以内の受診予定」で使用。 */
.alert-card-item-info {
  color: var(--color-info-text);
}

/* ---- 期限切れ／期限が近いことを示す小さなバッジ ---- */
.alert-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  margin-right: var(--spacing-xs);
}

.alert-badge-expired {
  background-color: #fdecea;
  color: #b71c1c;
}

.alert-badge-soon {
  background-color: #fff8e1;
  color: #8d6e00;
}

/* ---- お知らせ系のバッジ（青。追加機能第1弾：通院・受診管理の受診予定案内で使用） ---- */
.alert-badge-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* ---- 名前・警告の一覧 ---- */
.alert-list {
  list-style: none;
  margin: var(--spacing-sm) 0 0 0;
  padding: 0;
}

.alert-list-item {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.alert-list-item:last-child {
  border-bottom: none;
}

.alert-note-small {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.alert-resident-block {
  margin-bottom: var(--spacing-md);
}

.alert-resident-block:last-child {
  margin-bottom: 0;
}

.alert-resident-name {
  font-size: var(--font-size-lead);
  font-weight: bold;
  margin: 0 0 4px 0;
}

/* ---- 記録漏れチェックのマトリクス表（直近30日×利用者） ---- */
.missing-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
  min-width: 900px; /* 30日分の列を確保。狭い画面では table-wrap が横スクロールにする */
}

.missing-matrix-table th,
.missing-matrix-table td {
  border: 1px solid var(--color-border);
  padding: 4px 6px;
  text-align: center;
  white-space: nowrap;
}

.missing-matrix-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.missing-matrix-table th:first-child,
.missing-matrix-table td:first-child {
  text-align: left;
}

.missing-cell-ok {
  color: var(--color-success-text);
  font-weight: bold;
}

/* 昨日以前で記録が無い日：赤系の背景＋「未」の文字ではっきり分かるようにする
   （監査対応。色だけに頼らないよう文字も併用する＝色覚特性への配慮） */
.missing-cell-alert {
  background-color: #fdecea;
  color: #b71c1c;
  font-weight: bold;
}

.missing-cell-total {
  font-weight: bold;
}

/* ---- 印刷帳票の明細テーブル（支援記録の印刷など、複数ページで使い回す汎用テーブル） ---- */
.print-entry-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-sm);
}

.print-entry-table th,
.print-entry-table td {
  border: 1px solid var(--color-border);
  padding: 4px 6px;
  text-align: left;
  font-size: var(--font-size-small);
  white-space: pre-wrap;
  word-break: break-word;
}

.print-entry-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* ---- 印刷専用ヘッダー（画面上は非表示。@media printでのみ表示する） ---- */
.print-header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.print-org-name {
  font-size: var(--font-size-base);
  margin: 0;
}

.print-title {
  font-size: 22px;
  margin: 4px 0;
}

.print-meta {
  font-size: var(--font-size-base);
  margin: 0;
}

/* 印刷時だけ表示する要素（画面では隠す）。
   ブロック要素用（.print-only-block）とインライン要素用（.print-only-inline）で
   表示形式を分け、印刷時のレイアウト崩れを防ぐ。
   ※利用者確認欄では、閲覧のみのスタッフに対しては画面側で
   .print-only-blockクラスを外す（JavaScript側で切り替える）ことで、
   「入力欄の代わりに見せるプレーンな文字表示」を画面でも常時表示させている。 */
.print-only-block,
.print-only-inline {
  display: none;
}

/* 利用者確認欄のプレーンな文字表示（入力欄の代わりに見せる場合の見た目） */
.print-plain-value {
  font-size: var(--font-size-lead);
  padding: var(--spacing-xs) 0;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- 印刷帳票の署名記入欄（実際にペンで書き込める空欄。印刷した紙が
   そのまま署名台紙になる。画面上のconfirmation_date等とは別に、
   紙の上で本人・家族が直接記入するための欄） ---- */
.print-signature-box {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid #000000;
}

.print-signature-line {
  font-size: 13pt;
  line-height: 2.2;
  margin: 0;
  letter-spacing: 1px;
}

/* ==========================================================================
   設定画面（フェーズ10：項目カスタマイズ）専用スタイル
   ========================================================================== */

/* ---- コア（基本）選択肢バッジ：🔒 削除・無効化・改名ができないことを示す ---- */
.core-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: #f1f1f1;
  color: var(--color-text-muted);
}

/* 追加項目の入力タイプを示す小さなバッジ（文字／数値／選択式／日付） */
.type-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* ---- 選択肢・追加項目の管理一覧（1行ずつ表示） ---- */
.choice-admin-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.choice-admin-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
}

.choice-admin-item-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.choice-admin-label {
  font-size: var(--font-size-lead);
  font-weight: bold;
}

.choice-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* ==========================================================================
   写真・画像記録画面（フェーズ11）専用スタイル
   ========================================================================== */

/* ---- サムネイル一覧：横スクロールできる帯状の並び ---- */
.photo-thumb-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-sm);
  overflow-x: auto;
  padding-bottom: var(--spacing-xs);
}

.photo-thumb-button {
  flex: 0 0 auto;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-xs);
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
}

.photo-thumb-button:hover,
.photo-thumb-button:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-info-bg);
  outline: none;
}

.photo-thumb-button:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.photo-thumb-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  background-color: var(--color-background);
}

.photo-thumb-meta {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.4;
}

/* ---- 写真の拡大表示モーダル ---- */
.photo-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  z-index: 200;
}

.photo-modal-box {
  background-color: var(--color-surface);
  border-radius: var(--card-radius);
  padding: var(--spacing-md);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
}

.photo-modal-image {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 6px;
  margin-top: var(--spacing-sm);
}

.photo-modal-meta {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin: var(--spacing-sm) 0;
}

/* ==========================================================================
   音声入力（フェーズ12：AI音声入力・話すだけ入力）
   --------------------------------------------------------------------------
   ・マイクボタンは各textareaの直下に小さめに配置する（本文入力の主役は
     あくまで手入力・textareaのため、ボタンは控えめな見た目にする）。
   ・録音中は色を変えてはっきり分かるようにするが、点滅などの派手な
     アニメーションは使わず、色の変化にとどめる（格安タブレットへの
     負荷軽減、誤操作防止のため）。
   ========================================================================== */
.voice-input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  flex-wrap: wrap;
}

.voice-input-button {
  min-height: 44px;
  padding: 4px var(--spacing-sm);
  font-size: var(--font-size-small);
  transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}

/* 録音中は赤系の見た目に切り替えて、話しかけている最中だとひと目で分かるようにする */
.voice-input-button.is-recording {
  background-color: #fdecea;
  color: #b71c1c;
  border-color: #b71c1c;
}

/* 認識中のプレビュー・エラー・非対応案内などの状態表示 */
.voice-status {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ==========================================================================
   健康・服薬画面（フェーズ13：健康・バイタルの見える化＆服薬管理強化）
   --------------------------------------------------------------------------
   ・グラフの色は青（系列1）と橙（系列2＝血圧の拡張期のみ）の2色に限定し、
     文字（軸ラベル・読み取り表示・値ラベル）は系列色を使わず通常の文字色にする
     （色覚特性への配慮。設計方針で承認済みの配色ルール）。
   ・服薬カレンダーは色だけに頼らず、必ず記号（✓／×／△／－）も併記する。
   ========================================================================== */

/* ---- 全利用者の服薬アラートカード（ステップ1の上部） ---- */
.health-medication-alert-list {
  list-style: none;
  margin: var(--spacing-sm) 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.health-medication-alert-item {
  min-height: var(--button-min-height);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-button);
  font-weight: bold;
  color: #b71c1c;
  background-color: #fdecea;
  border: 2px solid #b71c1c;
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
}

.health-medication-alert-item:hover,
.health-medication-alert-item:focus-visible {
  background-color: #f9d6d2;
  outline: none;
}

/* ---- タブA・タブBの期間ボタン／表示切り替えボタンの行 ---- */
.health-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

/* ---- バイタル推移グラフのカード ---- */
.health-chart-card {
  margin-bottom: var(--spacing-md);
}

.health-chart-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.health-chart-header .section-heading {
  margin: 0;
}

/* ---- 凡例（血圧チャートのみ表示。色マーカー＋ラベル） ---- */
.health-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.health-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-small);
  color: var(--color-text);
}

.health-chart-legend-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

.health-chart-legend-swatch.is-series1 {
  background-color: #1565c0;
}

.health-chart-legend-swatch.is-series2 {
  background-color: #b45309;
}

/* ---- グラフ本体（SVG）。viewBoxで仮想座標を指定しているため、
   width:100%で実際の画面幅にレスポンシブに拡大縮小される ---- */
.health-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation; /* タップ操作の反応を良くする（ダブルタップ拡大の遅延を防ぐ） */
}

.health-chart-svg .health-chart-grid-line {
  stroke: #e0e0e0;
  stroke-width: 1;
}

.health-chart-svg .health-chart-axis-text {
  fill: var(--color-text-muted);
  font-size: 13px;
}

/* 基準範囲外の値ラベル：系列色ではなく、通常の文字色をはっきりめにして目立たせる */
.health-chart-svg .health-chart-value-label {
  fill: var(--color-text);
  font-size: 13px;
  font-weight: bold;
}

.health-chart-svg .health-chart-date-label {
  fill: var(--color-text-muted);
  font-size: 12px;
}

/* データ点（タップ用の透明な当たり判定）：指でも押しやすいよう実際の見た目より広めにする */
.health-chart-svg .health-chart-hit-area {
  fill: transparent;
  cursor: pointer;
}

/* ---- データ点をタップした際の「読み取り表示」（ツールチップの代わり。文字を大きく） ---- */
.health-chart-read {
  margin: var(--spacing-xs) 0 0 0;
  font-size: var(--font-size-lead);
  font-weight: bold;
  color: var(--color-accent-dark);
  min-height: 1.6em;
}

.health-chart-read.is-placeholder {
  font-weight: normal;
  color: var(--color-text-muted);
}

.health-chart-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--spacing-md) 0;
}

/* ---- 「表で見る」テーブル表示（バイタル推移） ---- */
.health-vital-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
  min-width: 640px;
}

.health-vital-table th,
.health-vital-table td {
  border: 1px solid var(--color-border);
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}

.health-vital-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.health-vital-table th:first-child,
.health-vital-table td:first-child {
  text-align: left;
}

/* 基準範囲外の値は色だけに頼らず「⚠」の文字も併記する（.health-chart-value-labelと同じ考え方） */
.health-vital-table .is-out-of-range {
  color: #b71c1c;
  font-weight: bold;
}

/* ---- 服薬カレンダー（直近30日を日付順に並べたグリッド） ---- */
.health-medication-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--spacing-xs);
}

.health-medication-cell {
  border-radius: var(--button-radius);
  padding: var(--spacing-xs);
  text-align: center;
  border: 1px solid var(--color-border);
  background-color: var(--color-background);
}

.health-medication-date {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: 0 0 2px 0;
}

.health-medication-mark {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.3;
  margin: 0;
}

.health-medication-label {
  font-size: 12px;
  margin: 0;
}

/* 実施：緑＋✓ */
.health-medication-cell.is-done {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-text);
}
.health-medication-cell.is-done .health-medication-mark,
.health-medication-cell.is-done .health-medication-label {
  color: var(--color-success-text);
}

/* 未実施：赤＋×＋「未」の文字 */
.health-medication-cell.is-missed {
  background-color: #fdecea;
  border-color: #b71c1c;
}
.health-medication-cell.is-missed .health-medication-mark,
.health-medication-cell.is-missed .health-medication-label {
  color: #b71c1c;
}

/* 拒否：黄＋△ */
.health-medication-cell.is-refused {
  background-color: #fff8e1;
  border-color: #8d6e00;
}
.health-medication-cell.is-refused .health-medication-mark,
.health-medication-cell.is-refused .health-medication-label {
  color: #8d6e00;
}

/* 該当なし：グレー＋－ */
.health-medication-cell.is-na {
  background-color: #eeeeee;
  border-color: var(--color-border);
}
.health-medication-cell.is-na .health-medication-mark,
.health-medication-cell.is-na .health-medication-label {
  color: var(--color-text-muted);
}

/* 記録なし：空白グレー（記号は出さない） */
.health-medication-cell.is-empty {
  background-color: #f5f5f5;
  border-color: var(--color-border);
}
.health-medication-cell.is-empty .health-medication-label {
  color: #999999;
}

/* ---- 「未実施・未記録の日」リスト（直近7日。赤系で列挙） ---- */
.health-missed-list {
  list-style: none;
  margin: var(--spacing-sm) 0 0 0;
  padding: 0;
}

.health-missed-item {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
  color: #b71c1c;
  font-weight: bold;
}

.health-missed-item:last-child {
  border-bottom: none;
}

/* ==========================================================================
   預り金・金銭管理台帳画面（フェーズ14）専用スタイル
   ========================================================================== */

/* ---- 残高サマリ（繰越／当月入金計／当月出金計／現在残高を大きく並べる） ---- */
.money-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-sm);
}

.money-summary-item {
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--spacing-sm);
  text-align: center;
  background-color: var(--color-background);
}

.money-summary-label {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.money-summary-value {
  display: block;
  font-size: 22px;
  font-weight: bold;
  color: var(--color-text);
}

/* 「現在残高」だけは一番大きく・目立つ色で表示する（設計書「残高サマリ（大きく）」の要件） */
.money-summary-item.is-current-balance {
  background-color: var(--color-info-bg);
  border-color: var(--color-accent);
}

.money-summary-item.is-current-balance .money-summary-value {
  font-size: 36px;
  color: var(--color-accent-dark);
}

/* ---- 「＋入金を記録」「－出金を記録」の特大ボタン2つ ---- */
.money-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.money-action-buttons .btn {
  flex: 1;
  min-width: 220px;
}

/* 入金ボタン：緑系（お金が増える操作） */
.btn-income {
  background-color: #1b5e20;
}
.btn-income:hover,
.btn-income:focus {
  background-color: #0f3d13;
}

/* 出金ボタン：赤系（お金が減る操作） */
.btn-expense {
  background-color: #b71c1c;
}
.btn-expense:hover,
.btn-expense:focus {
  background-color: #7f1414;
}

/* ---- 台帳テーブル ---- */
.money-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
  min-width: 900px; /* 狭い画面では.table-wrapの横スクロールに任せる */
}

.money-table th,
.money-table td {
  border: 1px solid var(--color-border);
  padding: 6px var(--spacing-xs);
  text-align: left;
  vertical-align: middle;
}

.money-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.money-table .money-cell-amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.money-table .money-cell-income {
  color: #1b5e20;
  font-weight: bold;
}

.money-table .money-cell-expense {
  color: #b71c1c;
  font-weight: bold;
}

/* 取消（逆仕訳）済みの行：全体を少し薄くして、通常の記録と見分けやすくする */
.money-row-reversed {
  color: var(--color-text-muted);
  background-color: #fafafa;
}

/* 「取消済み」バッジ */
.money-reversed-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: #f1f1f1;
  color: var(--color-text-muted);
}

/* 「未確認」バッジ（赤系で目立たせる） */
.money-unchecked-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: #fdecea;
  color: #b71c1c;
}

/* 「✓確認者名」バッジ（緑系） */
.money-checked-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

/* 「✓確認する」「取消」の台帳内小ボタン */
.money-check-button,
.money-cancel-button {
  min-height: 40px;
  padding: 2px var(--spacing-sm);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

/* ---- 入出金の登録フォーム ---- */
.money-amount-input {
  font-size: 28px;
  font-weight: bold;
  text-align: right;
}

/* ==========================================================================
   印刷レイアウト（@media print）
   ----------------------------------------------------------------------------
   ・サイドメニューやボタン類など、紙に不要な操作部品はすべて隠す（.no-print）。
   ・事業所名・利用者名・年月・実績表・日数集計・利用者確認欄だけを
     A4縦にきれいに出す。
   ========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  body {
    font-size: 11pt;
    background-color: #ffffff;
  }

  .no-print {
    display: none !important;
  }

  .print-only-block {
    display: block;
  }

  .print-only-inline {
    display: inline;
  }

  .app-layout {
    display: block;
  }

  .main-content {
    padding: 0;
  }

  .card {
    border: none;
    padding: 0;
    margin-bottom: 8pt;
  }

  /* 実績表は31行あるため、画面用の横スクロール(overflow-x)や
     最低幅(min-width)をそのまま印刷すると、A4の紙幅から
     備考列・右側の罫線がはみ出して見切れてしまう。
     印刷時は横スクロールをやめて、表を紙の幅にきちんと収める。 */
  .table-wrap {
    overflow: visible;
  }

  .service-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .service-table,
  .service-table th,
  .service-table td {
    border: 1px solid #000000;
    font-size: 9pt;
    padding: 3pt 4pt;
    white-space: normal;
    word-break: break-word;
  }

  .service-table th {
    background-color: #eeeeee !important;
    color: #000000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 日付セル（th scope="row"）は列見出しと違い、地色を付けない普通の見た目にする */
  .service-table th[scope="row"] {
    background-color: #ffffff !important;
    color: #000000;
    font-weight: normal;
  }

  .service-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8pt;
  }

  .service-summary-item {
    border: 1px solid #000000;
    background-color: #ffffff;
  }

  .service-summary-value {
    color: #000000;
    font-size: 16pt;
  }

  /* ---- 支援記録・業務日誌・ヒヤリハット・個別支援計画の印刷（フェーズ9）共通調整 ---- */
  .print-entry-table,
  .print-entry-table th,
  .print-entry-table td {
    border: 1px solid #000000;
    font-size: 9pt;
  }

  .print-entry-table th {
    background-color: #eeeeee !important;
    color: #000000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ---- 預り金台帳の印刷（フェーズ14）調整：画面の横スクロール前提の
     min-width・タブレット向けの装飾を解除し、A4の紙幅にきちんと収める ---- */
  .money-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .money-table,
  .money-table th,
  .money-table td {
    border: 1px solid #000000;
    font-size: 9pt;
    padding: 3pt 4pt;
    white-space: normal;
    word-break: break-word;
  }

  .money-table th {
    background-color: #eeeeee !important;
    color: #000000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .money-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8pt;
  }

  .money-summary-item {
    border: 1px solid #000000;
    background-color: #ffffff;
  }

  .money-summary-value,
  .money-summary-item.is-current-balance .money-summary-value {
    color: #000000;
    font-size: 14pt;
  }

  /* 「✓確認する」「取消」の操作ボタンは紙の上では意味を持たないため、印刷時は隠す
     （バッジ表示「未確認」「✓氏名」「取消済み」はそのまま残す） */
  .money-check-button,
  .money-cancel-button {
    display: none;
  }

  /* ---- 事業所欄（印刷した紙に手書きで確認印・署名を残すための空欄） ---- */
  .print-org-box {
    margin-top: 8pt;
    padding-top: 6pt;
    border-top: 1px solid #000000;
    font-size: 10pt;
  }
}

/* ==========================================================================
   勤怠・シフト管理画面（フェーズ16）専用スタイル
   --------------------------------------------------------------------------
   ・3つのタブ（打刻／シフト表／勤務実績）は.plan-tab-list・.plan-tab-buttonを
     そのまま使い回す（フェーズ7・9で導入済みのタブ部品）。
   ========================================================================== */

/* ---- 打刻タブ：現在の日付・時刻の大きな表示 ---- */
.kintai-clock-card {
  text-align: center;
}

.kintai-clock-date {
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
  margin: 0;
}

.kintai-clock-time {
  font-size: 56px;
  font-weight: bold;
  color: var(--color-accent-dark);
  margin: var(--spacing-xs) 0 0 0;
  font-variant-numeric: tabular-nums;
}

/* ---- 出勤・退勤の特大ボタン2つを並べる ---- */
.kintai-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.kintai-action-buttons .btn {
  flex: 1;
  min-width: 220px;
  min-height: 96px;
  font-size: 26px;
}

/* 出勤ボタン：朝らしい暖色系 */
.btn-clock-in {
  background-color: #ef6c00;
}
.btn-clock-in:hover,
.btn-clock-in:focus {
  background-color: #b74d00;
}

/* 退勤ボタン：夜らしい落ち着いた色系 */
.btn-clock-out {
  background-color: #4527a0;
}
.btn-clock-out:hover,
.btn-clock-out:focus {
  background-color: #311b70;
}

/* 打刻済み・押せない状態のボタン共通の見た目 */
.kintai-action-buttons .btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.kintai-clock-status {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-lead);
  font-weight: bold;
  color: var(--color-success-text);
  min-height: 1.6em;
}

/* ---- シフト表グリッド ---- */
.shift-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
  min-width: 760px; /* 「氏名」＋7日分の列を確保。狭い画面では.table-wrapの横スクロールに任せる */
}

.shift-table th,
.shift-table td {
  border: 1px solid var(--color-border);
  padding: 6px var(--spacing-xs);
  text-align: center;
  vertical-align: middle;
}

.shift-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.shift-table th:first-child,
.shift-table td:first-child {
  text-align: left;
  white-space: nowrap;
}

/* 土曜・日曜の色分け（他の画面と統一：土＝青、日＝赤） */
.shift-table .shift-weekday-sat {
  color: var(--color-accent);
}
.shift-table .shift-weekday-sun {
  color: #b71c1c;
}

/* シフト種別バッジ（閲覧時・管理者のセル選択ボタンの両方で使う共通の見た目） */
.shift-badge-cell {
  display: inline-block;
  min-width: 56px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
  border: none;
  font-family: inherit;
  cursor: default;
}

/* 管理者がタップして選ぶセル：ボタンとして押せる見た目にする */
button.shift-badge-cell {
  cursor: pointer;
}
button.shift-badge-cell:hover,
button.shift-badge-cell:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 1px;
}

/* シフト区分ごとの色（日勤＝青／夜勤＝紫／早番・遅番＝緑系／休み＝グレー） */
.shift-badge-cell.is-day {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}
.shift-badge-cell.is-night {
  background-color: #ede7f6;
  color: #4527a0;
}
.shift-badge-cell.is-early,
.shift-badge-cell.is-late {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}
.shift-badge-cell.is-off {
  background-color: #f1f1f1;
  color: var(--color-text-muted);
}
/* 未定（まだシフトが決まっていない日）：枠線だけの控えめな表示 */
.shift-badge-cell.is-none {
  background-color: #ffffff;
  color: var(--color-text-muted);
  border: 2px dashed var(--color-border);
}

/* ---- 管理者用：シフト種別を選ぶポップアップ的な選択パネル ---- */
.shift-picker-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  z-index: 200;
}

.shift-picker-box {
  background-color: var(--color-surface);
  border-radius: var(--card-radius);
  padding: var(--spacing-md);
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.shift-picker-heading {
  font-size: var(--font-size-heading);
  margin: 0 0 var(--spacing-sm) 0;
}

.shift-picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.shift-picker-button {
  min-height: var(--button-min-height);
  font-size: var(--font-size-button);
  font-weight: bold;
  border-radius: var(--button-radius);
  border: 2px solid var(--color-border);
  background-color: #ffffff;
  cursor: pointer;
  font-family: inherit;
}

.shift-picker-button:hover,
.shift-picker-button:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-info-bg);
}

/* ---- 勤務実績タブ：一覧テーブル・月合計 ---- */
.kintai-records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.kintai-records-table th,
.kintai-records-table td {
  border: 1px solid var(--color-border);
  padding: 6px var(--spacing-sm);
  text-align: center;
}

.kintai-records-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.kintai-records-table td:nth-child(2) {
  text-align: left;
}

.kintai-total-hours {
  text-align: center;
  margin-top: var(--spacing-md);
}

.kintai-total-hours-value {
  font-size: 36px;
  font-weight: bold;
  color: var(--color-accent-dark);
}

/* 管理者用：スタッフ別合計の一覧 */
.kintai-staff-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.kintai-staff-summary-table th,
.kintai-staff-summary-table td {
  border: 1px solid var(--color-border);
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: left;
}

.kintai-staff-summary-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.kintai-staff-summary-table td:last-child,
.kintai-staff-summary-table th:last-child {
  text-align: right;
}

/* 管理者による打刻修正の小さな時刻入力欄 */
.kintai-fix-time-input {
  min-height: 40px;
  padding: 2px var(--spacing-xs);
  font-size: var(--font-size-small);
  border: 2px solid var(--color-border);
  border-radius: 6px;
  font-family: inherit;
}

/* ---- 印刷（勤務形態一覧表風：氏名×日別の出退勤＋合計） ---- */
@media print {
  .kintai-print-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .kintai-print-table,
  .kintai-print-table th,
  .kintai-print-table td {
    border: 1px solid #000000;
    font-size: 8pt;
    padding: 2pt 3pt;
    white-space: normal;
    word-break: break-word;
  }

  .kintai-print-table th {
    background-color: #eeeeee !important;
    color: #000000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---- 勤務形態一覧表タブ（フェーズ16追加・管理者専用）：画面表示用 ---- */
.kinmu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
  min-width: 1200px; /* 職種・区分・氏名＋日別31列＋週計・合計等。狭い画面では.table-wrapの横スクロールに任せる */
}

.kinmu-table th,
.kinmu-table td {
  border: 1px solid var(--color-border);
  padding: 4px 6px;
  text-align: center;
}

.kinmu-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.kinmu-table td:nth-child(3) {
  text-align: left;
  white-space: nowrap;
}

/* 氏名セル専用クラス（金田さん依頼：予定+実績2段モードでは、rowspanにより
   2行目の:nth-child(3)が氏名セルと一致しなくなるため、クラス指定でも
   同じ見た目を保証する） */
.kinmu-name-cell {
  text-align: left;
  white-space: nowrap;
}

/* 週の小計セル・月合計セルは、目が行きやすいよう薄く色を付ける */
.kinmu-subtotal-cell {
  background-color: var(--color-success-bg);
  font-weight: bold;
}

.kinmu-total-cell {
  background-color: var(--color-info-bg);
  font-weight: bold;
}

/* 最下部：職種別の常勤換算合計行 */
.kinmu-role-total-row td {
  background-color: #fff3e0;
  font-weight: bold;
  text-align: right;
}

/* ---- 予定+実績（2段）モード専用：予定行・実績行の区別 ---- */
.kinmu-kubun-cell {
  font-weight: bold;
}

/* 実績行（2行目）を薄い網掛けにし、予定行とペアであることを分かりやすくする */
.kinmu-actual-row td {
  background-color: #fafafa;
}

/* 職員が変わる境目（予定行の先頭）に少し濃い罫線を入れ、2行1組の区切りを見やすくする */
.kinmu-plan-row td {
  border-top: 2px solid var(--color-accent);
}

/* ---- 勤務形態一覧表タブ：印刷（A4横で標準様式風に。@pageのlandscape指定は
   印刷ボタン押下時にJavaScriptが一時的に差し込むため、ここでは表の見た目だけ整える） ---- */
@media print {
  .kinmu-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .kinmu-table,
  .kinmu-table th,
  .kinmu-table td {
    border: 1px solid #000000;
    font-size: 7pt;
    padding: 1pt 2pt;
    white-space: normal;
    word-break: break-word;
  }

  .kinmu-table th {
    background-color: #eeeeee !important;
    color: #000000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .kinmu-role-total-row td {
    background-color: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 予定+実績（2段）モード：印刷でも予定行・実績行の区切りが分かるようにする
     （@media print側の共通border指定が上書きしてしまうため、ここで明示し直す） */
  .kinmu-plan-row td {
    border-top: 2px solid #000000 !important;
  }

  .kinmu-actual-row td {
    background-color: #fafafa !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   加算・基準画面（フェーズ17：加算の算定支援＋人員配置基準チェック）専用スタイル
   ========================================================================== */

/* ---- 常時表示する「本画面は参考値です」の注記 ---- */
.kasan-disclaimer {
  background-color: #fff8e1;
  border: 2px solid #8d6e00;
  color: #6b5300;
  font-weight: bold;
  text-align: center;
}

/* ---- 人員配置基準チェック：計算式・実績の説明文 ---- */
.kasan-formula-text {
  font-size: var(--font-size-lead);
  margin: var(--spacing-xs) 0;
}

.kasan-actual-text {
  font-size: var(--font-size-lead);
  font-weight: bold;
  margin: var(--spacing-xs) 0;
}

/* ---- 判定バッジ（充足=緑／不足=赤） ---- */
.kasan-judge-row {
  margin-top: var(--spacing-sm);
}

.kasan-judge-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 24px;
  font-weight: bold;
  font-size: var(--font-size-heading);
}

.kasan-judge-ok {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.kasan-judge-shortage {
  background-color: #fdecea;
  color: #b71c1c;
}

/* ---- 利用者の障害支援区分ごとの内訳表 ---- */
.kasan-breakdown-table {
  width: 100%;
  border-collapse: collapse;
}

.kasan-breakdown-table th,
.kasan-breakdown-table td {
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.kasan-breakdown-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin-top: var(--spacing-xs);
}

/* ---- 夜間支援の根拠集計：月合計サマリー ---- */
.kasan-night-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.kasan-night-summary-item {
  text-align: center;
}

.kasan-night-summary-value {
  font-size: var(--font-size-title);
  font-weight: bold;
  color: var(--color-accent);
  margin: 0;
}

/* ---- 夜間支援の根拠集計：突合表（日ごとに判定で色分け） ---- */
.kasan-match-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px; /* 狭い画面では.table-wrapの横スクロールに任せる */
}

.kasan-match-table th,
.kasan-match-table td {
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.kasan-match-row-ok {
  background-color: var(--color-success-bg);
}

.kasan-match-row-missing {
  background-color: #fdecea;
}

.kasan-match-row-shift-missing {
  background-color: #fff8e1;
}

.kasan-match-judge-text {
  font-weight: bold;
  white-space: nowrap;
}

/* ---- 主要加算チェックリスト ---- */
.kasan-checklist-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.kasan-checklist-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  justify-content: space-between;
}

/* ---- チェックリストの状態バッジ（算定=緑／非算定=グレー／検討中=黄） ---- */
.kasan-status-badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.kasan-status-badge.is-agreed {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.kasan-status-badge.is-none {
  background-color: #f1f1f1;
  color: var(--color-text-muted);
}

.kasan-status-badge.is-pending {
  background-color: #fff8e1;
  color: #8d6e00;
}

/* ---- チェックリストの状態選択ボタン（選択中は状態ごとの色に反転する） ---- */
.kasan-status-option[data-status="算定"].is-selected {
  background-color: var(--color-success-text);
  border-color: var(--color-success-text);
  color: #ffffff;
}

.kasan-status-option[data-status="非算定"].is-selected {
  background-color: var(--color-text-muted);
  border-color: var(--color-text-muted);
  color: #ffffff;
}

.kasan-status-option[data-status="検討中"].is-selected {
  background-color: #8d6e00;
  border-color: #8d6e00;
  color: #ffffff;
}

.kasan-checklist-note {
  white-space: pre-wrap;
  color: var(--color-text-muted);
}

/* ---- チェックリストの行ごとの保存結果メッセージ（大きな全体メッセージより控えめに） ---- */
.kasan-row-message {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--card-radius);
  font-weight: bold;
  text-align: center;
}

.kasan-row-message.is-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.kasan-row-message.is-error {
  background-color: #fdecea;
  color: #b71c1c;
}

@media (max-width: 640px) {
  .kasan-night-summary-list {
    justify-content: space-around;
    gap: var(--spacing-sm);
  }
}

/* ==========================================================================
   請求データ画面（フェーズ18：国保連請求データ連携・請求用実績集計CSV）専用スタイル
   ========================================================================== */

/* ---- 常時表示する「請求ソフトへの取込・転記用」の注記 ---- */
.seikyu-disclaimer {
  background-color: #fff8e1;
  border: 2px solid #8d6e00;
  color: #6b5300;
  font-weight: bold;
  text-align: center;
}

/* ---- 請求用集計表 ---- */
.seikyu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
  min-width: 1000px; /* 12列ぶんの最低幅。狭い画面では table-wrap が横スクロールにする */
}

.seikyu-table th,
.seikyu-table td {
  border: 1px solid var(--color-border);
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}

.seikyu-table thead th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.seikyu-table th[scope="row"] {
  text-align: left;
  white-space: normal;
}

/* 合計行（tfoot）は目が行きやすいよう薄く色を付ける */
.seikyu-total-row td,
.seikyu-total-row th {
  background-color: var(--color-success-bg);
  font-weight: bold;
}

/* 本入居／体験利用の区分別小計行（体験利用者対応。合計行とは違う色にして
   見分けやすくする） */
.seikyu-subtotal-row td,
.seikyu-subtotal-row th {
  background-color: var(--color-info-bg);
  font-weight: bold;
}

/* 「退居済み」バッジ（警告ではなく情報表示のため、青系の控えめな色にする） */
.seikyu-badge-inactive {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* 「作成済み」の文字色（バッジではなく控えめな緑文字にする） */
.seikyu-status-done {
  color: var(--color-success-text);
  font-weight: bold;
}

/* ---- 印刷（A4横：列数が多いため横向きにする。@pageのlandscape指定は
   印刷ボタン押下時にJavaScriptが一時的に差し込むため、ここでは表の見た目だけ整える） ---- */
@media print {
  .seikyu-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .seikyu-table,
  .seikyu-table th,
  .seikyu-table td {
    border: 1px solid #000000;
    font-size: 8pt;
    padding: 3pt 4pt;
    white-space: normal;
    word-break: break-word;
  }

  .seikyu-table thead th {
    background-color: #eeeeee !important;
    color: #000000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .seikyu-total-row td,
  .seikyu-total-row th {
    background-color: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   実費・食費画面（フェーズ19：実費・食費の集計と請求）専用スタイル
   ========================================================================== */

/* ---- 常時表示する「請求対象の食事」運用ルールの注記 ---- */
.jippi-disclaimer {
  background-color: var(--color-info-bg);
  border: 2px solid var(--color-accent-dark);
  color: var(--color-info-text);
  font-weight: bold;
}

/* ---- 退居日未登録・退居後の月・在籍日数0などの安全弁の警告（赤字・目立たせる） ---- */
.jippi-residency-warning {
  text-align: left;
  font-size: var(--font-size-lead);
}

.jippi-residency-warning p {
  margin: 0;
}

.jippi-residency-warning p + p {
  margin-top: var(--spacing-xs);
}

/* ---- 調整額の入力欄の下に出す即時バリデーションメッセージ ---- */
.jippi-invoice-inline-error {
  display: block;
  color: #b71c1c;
  font-size: var(--font-size-small);
  font-weight: bold;
  margin-top: 4px;
}

/* ---- 料金設定フォーム（家賃・光熱水費・朝昼夕の単価などを並べる） ---- */
.jippi-fee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-sm);
}

/* ---- 食数集計（朝・昼・夕の請求対象食数を大きな数字で表示） ---- */
.jippi-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-md);
}

.jippi-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius);
  background-color: var(--color-background);
}

.jippi-summary-label {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.jippi-summary-value {
  font-size: var(--font-size-title);
  font-weight: bold;
  color: var(--color-accent-dark);
}

/* ---- 日別内訳の折りたたみ表示（計算根拠。ネイティブのdetails/summaryを使用） ---- */
.jippi-details {
  margin-top: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.jippi-details-summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--color-accent-dark);
  padding: var(--spacing-xs) 0;
}

.jippi-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-small);
}

.jippi-detail-table th,
.jippi-detail-table td {
  border: 1px solid var(--color-border);
  padding: 4px 8px;
  text-align: center;
}

.jippi-detail-table th {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* 請求対象の食事（色だけに頼らないよう「◯対象」の文字も併用する） */
.jippi-meal-billable {
  color: var(--color-success-text);
  font-weight: bold;
}

/* 請求対象外の食事（拒否・該当なし・未記録） */
.jippi-meal-not-billable {
  color: var(--color-text-muted);
}

/* ---- 請求書プレビュー・確定済み請求書の内訳表 ---- */
.jippi-invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-sm);
}

.jippi-invoice-table th,
.jippi-invoice-table td {
  border: 1px solid var(--color-border);
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: left;
  vertical-align: middle;
}

.jippi-invoice-table th[scope="row"] {
  background-color: var(--color-background);
  white-space: nowrap;
}

.jippi-invoice-table td.jippi-invoice-amount-cell {
  text-align: right;
  white-space: nowrap;
  font-weight: bold;
}

.jippi-invoice-note {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-weight: normal;
}

/* 食費合計・調整額など、内訳の中でも目を引かせたい行 */
.jippi-invoice-subtotal-row td,
.jippi-invoice-subtotal-row th {
  background-color: var(--color-info-bg);
}

/* 合計行（tfoot）は特に大きく・目立たせる */
.jippi-invoice-total-row th,
.jippi-invoice-total-row td {
  background-color: var(--color-success-bg);
  font-size: var(--font-size-heading);
  font-weight: bold;
}

.jippi-invoice-total-row td.jippi-invoice-amount-cell {
  color: var(--color-success-text);
}

/* 確定済み請求書の操作ボタン（再計算して上書き／印刷）を並べる行 */
.jippi-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.jippi-action-buttons .btn,
.jippi-action-buttons .btn-secondary {
  flex: 1;
  min-width: 220px;
}

/* 調整額の入力欄（テーブルのセル内に収まる小さめの入力） */
.jippi-invoice-input {
  width: 100%;
  padding: 6px 8px;
  font-size: var(--font-size-base);
  border: 2px solid var(--color-border);
  border-radius: var(--button-radius);
  font-family: inherit;
}

.jippi-invoice-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ---- 確定状態のバッジ ---- */
.jippi-status-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: var(--font-size-base);
  font-weight: bold;
}

.jippi-status-confirmed {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.jippi-status-draft {
  background-color: #fff8e1;
  color: #8d6e00;
}

/* ---- 印刷（A4縦：請求書として整える） ---- */
@media print {
  .jippi-invoice-table {
    width: 100%;
  }

  .jippi-invoice-table,
  .jippi-invoice-table th,
  .jippi-invoice-table td {
    border: 1px solid #000000;
    font-size: 11pt;
    padding: 4pt 6pt;
  }

  .jippi-invoice-table th[scope="row"] {
    background-color: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .jippi-invoice-subtotal-row td,
  .jippi-invoice-subtotal-row th {
    background-color: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .jippi-invoice-total-row th,
  .jippi-invoice-total-row td {
    background-color: #eeeeee !important;
    color: #000000;
    font-size: 13pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 印刷紙面には「未確定」の下書きを出さない運用のため、万一の保険として
     調整額の入力欄も枠なしのプレーンな文字に近い見た目にしておく */
  .jippi-invoice-input {
    border: none;
    padding: 0;
    font-size: 11pt;
  }

  .jippi-status-badge {
    border: 1px solid #000000;
    background-color: #ffffff !important;
    color: #000000 !important;
  }
}

/* ==========================================================================
   監査対策パック第1弾：委員会・研修・訓練／身体拘束記録／苦情対応 専用スタイル
   ========================================================================== */

/* ---- 実施状況ダッシュボードの状態バッジ（✅期限内／🟡そろそろ／🔴期限超過・未実施） ---- */
.compliance-status-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.compliance-status-badge.is-ok {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.compliance-status-badge.is-soon {
  background-color: #fff8e1;
  color: #8d6e00;
}

.compliance-status-badge.is-overdue {
  background-color: #fdecea;
  color: #b71c1c;
}

/* ---- ダッシュボード表：横に長くなるため、他の一覧より少しコンパクトにする ---- */
.compliance-dashboard-table {
  min-width: 900px; /* 7列ぶんの最低幅。狭い画面では.table-wrapの横スクロールに任せる */
}

/* ---- 委員会・研修・訓練の記録一覧：種別バッジ（委員会／研修／訓練で色分けはせず、共通の落ち着いた色にする） ---- */
.compliance-kind-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* ---- 身体拘束記録：「緊急やむを得ない場合の最終手段」であることの注意喚起ボックス ---- */
.restraint-caution-box {
  background-color: #fdecea;
  border: 2px solid #b71c1c;
  border-radius: var(--card-radius);
  padding: var(--spacing-md);
}

.restraint-caution-text {
  color: #b71c1c;
  font-weight: bold;
  margin: 0;
}

/* ---- 汎用の大きめトグルボタン群（複数の選択肢から1つを選ぶ場面で使い回す。
        苦情対応の「受付方法」「状態」で使用。今後の画面でも再利用できるよう
        incident-kind-toggleとは別に、機能名に依存しない汎用クラスとして用意する） ---- */
.toggle-button-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.toggle-button {
  flex: 1;
  min-width: 120px;
  min-height: 64px;
  font-size: var(--font-size-button);
  font-weight: bold;
  color: var(--color-accent);
  background-color: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: var(--button-radius);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.toggle-button:hover,
.toggle-button:focus-visible {
  background-color: var(--color-info-bg);
}

.toggle-button:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.toggle-button.is-selected {
  background-color: var(--color-accent);
  color: #ffffff;
}

/* 苦情対応の状態トグル：対応中＝黄／解決済み＝緑で強調する（状態バッジと同系色に揃える） */
.toggle-button.is-selected[data-status="対応中"] {
  background-color: #f9a825;
  border-color: #f9a825;
  color: #1a1a1a;
}

.toggle-button.is-selected[data-status="解決済み"] {
  background-color: var(--color-success-text);
  border-color: var(--color-success-text);
  color: #ffffff;
}

/* ---- 苦情対応の状態バッジ（一覧・詳細表示。対応中＝黄／解決済み＝緑） ---- */
.complaint-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
}

.complaint-status-badge.is-open {
  background-color: #fff8e1;
  color: #8d6e00;
}

.complaint-status-badge.is-resolved {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

/* ---- 印刷（身体拘束記録票・苦情対応記録。A4縦） ---- */
@media print {
  .restraint-caution-box {
    display: none; /* 注意喚起は画面用の表示のため、記録票の印刷には出さない */
  }
}

/* ==========================================================================
   監査対策パック第3弾：記録突合レポート／監査モード（点検・帳票画面）
   ========================================================================== */

/* ---- 📦 監査モード：運営指導の準備チェックリストの行（見出し＋チェック＋リンク） ---- */
.audit-mode-checklist-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.audit-mode-checklist-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-lead);
  font-weight: bold;
  cursor: pointer;
}

.audit-mode-checklist-label input[type="checkbox"] {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ---- 📦 監査モード：一括CSV出力の対象チェックボックス一覧 ---- */
.audit-mode-export-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* ==========================================================================
   かんたん操作マニュアル画面（最終フェーズ）専用スタイル
   ========================================================================== */

/* ---- 「1日の流れ」の大きな番号付きステップ ---- */
.manual-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.manual-step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.manual-step-item:last-child {
  border-bottom: none;
}

/* 大きな丸数字（タブレットでも遠目で見て分かるサイズにする） */
.manual-step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
}

.manual-step-title {
  font-size: var(--font-size-lead);
  font-weight: bold;
  margin: 0 0 4px 0;
}

.manual-step-desc {
  margin: 0;
  color: var(--color-text);
}

/* ---- よくある質問 ---- */
.manual-faq-item {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.manual-faq-item:last-child {
  border-bottom: none;
}

.manual-faq-question {
  font-size: var(--font-size-lead);
  font-weight: bold;
  color: var(--color-accent-dark);
  margin: 0 0 4px 0;
}

.manual-faq-answer {
  margin: 0;
}

/* ---- 管理者向け：画面の一覧（折りたたみ。画面専用・印刷対象外） ---- */
.manual-admin-summary {
  font-size: var(--font-size-lead);
  font-weight: bold;
  cursor: pointer;
}

.manual-admin-list {
  margin: var(--spacing-sm) 0 0 0;
  padding-left: var(--spacing-md);
}

.manual-admin-list li {
  padding: 4px 0;
}

/* ---- 図解（インラインSVG）の共通ラッパー ----
   ・図1〜図4はすべて外部画像/CDNを使わず、HTML内に直接書いたSVG（インラインSVG）。
   ・viewBoxを使ってレスポンシブにし、幅いっぱい（100%）に自動で縮小拡大させる。 */
.manual-figure {
  margin: var(--spacing-sm) 0;
}

.manual-figure svg {
  width: 100%;
  height: auto;
  display: block;
}

.manual-figure-caption {
  margin: var(--spacing-xs) 0 0 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
}

@media print {
  /* 図の途中で改ページされて分断されないようにする */
  .manual-figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ---- 印刷（A4縦1枚に収める。「1日の流れ」「よくある質問」だけを出力し、
   管理者向けの画面一覧は.no-printで印刷対象から外す） ---- */
@media print {
  .manual-step-number {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   電子サイン機能・第1弾（金田さん承認）
   --------------------------------------------------------------------------
   ・public/js/sign-pad.js が動的に生成する、タブレット全画面の手書きサイン
     モーダル用のスタイル。
   ・public/plans.html（個別支援計画の原案説明・同意サイン）と
     public/residents.html（契約書類のサイン）の両方から共通して使う。
   ・取得済みサインのプレビュー表示（拡大表示モーダル）は、フェーズ11の
     写真プレビュー（.photo-modal-*）と同じ見た目のクラスを再利用する
     （各画面側でid違いの静的HTMLとして用意し、CSSクラスだけ共有する）。
   ========================================================================== */

/* ---- サインパッド：全画面モーダル ---- */
.sign-pad-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  /* 写真の拡大表示モーダル（.photo-modal-overlay・z-index:200）よりも
     必ず手前に表示する */
  z-index: 300;
}

.sign-pad-box {
  background-color: var(--color-surface);
  border-radius: var(--card-radius);
  padding: var(--spacing-md);
  width: 100%;
  height: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
}

.sign-pad-title {
  font-size: var(--font-size-heading);
  margin: 0 0 var(--spacing-xs) 0;
  text-align: center;
}

.sign-pad-hint {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 4px 0;
}

.sign-pad-canvas-wrap {
  flex: 1;
  min-height: 200px;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  margin: var(--spacing-sm) 0;
  overflow: hidden;
}

.sign-pad-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #ffffff;
  /* 指で書いている間に画面がスクロールしてしまうのを防ぐ */
  touch-action: none;
}

.sign-pad-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.sign-pad-button-row .btn,
.sign-pad-button-row .btn-secondary {
  flex: 1;
  min-width: 160px;
}

/* ---- サイン取得状況の表示・操作（利用者確認欄・契約書類チェック共通） ----
   ・未取得：「✍ サインをもらう」＝通常の.btn/.btn-blockをそのまま使う。
   ・取得済み：この専用クラスのボタン（タップでプレビューを開く）。 */
.signature-status-button {
  display: block;
  width: 100%;
  min-height: var(--button-min-height);
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-base);
  font-family: inherit;
  text-align: left;
  border-radius: var(--button-radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.signature-status-button.is-signed {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-text);
}

.signature-status-button:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.signature-request-button {
  margin-top: var(--spacing-xs);
}

/* ---- 一般職員向け「サイン済み」バッジ（画像は見えない。存在有無のみ表示） ---- */
.signature-done-badge {
  display: inline-block;
  margin-top: var(--spacing-xs);
  padding: 2px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: var(--font-size-small);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* ---- 電磁的同意の取り扱いに関する注記（小さな文字） ---- */
.signature-legal-note {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ---- 印刷時：署名欄に取得済みサイン画像を差し込む ---- */
.print-signature-image {
  max-height: 60px;
  vertical-align: middle;
}

@media print {
  .print-signature-image {
    max-height: 50pt;
  }
}

/* ==========================================================================
   追加機能第2弾：🆘 緊急時持ち出しカード（public/residents.html）
   --------------------------------------------------------------------------
   ・#emergency-card-print-area は .print-only-block（このファイルの前方で
     定義済み）のため、画面では常に非表示（display:none）。印刷時のみ
     表示されるので、ここで定義する .emergency-card-* の各スタイルは
     画面上には一切影響しない（.print-header等の他の印刷専用部品と同じ扱い）。
   ・利用者1人分＝.emergency-card 1つ。複数人を連続印刷する場合は
     page-break-afterで1人1ページに区切る。
   ・顔写真そのものの管理（アップロード・保存）は将来対応。ここでは
     手貼り用の空枠（60×45mm程度）だけを用意する。
   ========================================================================== */
#emergency-card-print-area {
  color: #000000;
}

.emergency-card {
  page-break-after: always;
  break-after: page;
}

.emergency-card:last-child {
  page-break-after: avoid;
  break-after: auto;
}

.emergency-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8pt;
  border-bottom: 2px solid #000000;
  padding-bottom: 6pt;
  margin-bottom: 8pt;
}

.emergency-card-issue-date {
  font-size: 10pt;
  margin: 0;
}

.emergency-card-title {
  font-size: 22pt;
  margin: 2pt 0;
}

.emergency-card-org {
  font-size: 11pt;
  margin: 0;
}

/* 写真貼付欄（空枠・60×45mm程度）：「※顔写真を貼ってください」の案内だけを表示する */
.emergency-card-photo-box {
  width: 60mm;
  height: 45mm;
  border: 1px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 9pt;
  padding: 4pt;
  flex-shrink: 0;
}

.emergency-card-name {
  font-size: 28pt;
  margin: 4pt 0 0 0;
}

.emergency-card-furigana {
  font-size: 11pt;
  color: #333333;
  margin: 0 0 8pt 0;
}

.emergency-card-trial-tag {
  font-size: 14pt;
  margin-left: 8pt;
}

.emergency-card-basic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4pt 12pt;
  font-size: 11pt;
  margin-bottom: 8pt;
}

.emergency-card-label {
  display: inline-block;
  font-weight: bold;
  margin-right: 6pt;
}

/* 医療情報・緊急連絡先ブロックは、枠で強調して見落としを防ぐ */
.emergency-card-medical-box,
.emergency-card-contact-box {
  border: 2px solid #000000;
  padding: 8pt 10pt;
  margin-bottom: 8pt;
  font-size: 11pt;
}

.emergency-card-medical-box h3,
.emergency-card-contact-box h3 {
  margin: 0 0 4pt 0;
  font-size: 13pt;
}

.emergency-card-medical-box > div,
.emergency-card-contact-box > div {
  margin-bottom: 4pt;
}

/* 直近の服薬変更（最大3件）：医療情報ブロックの中に、少し小さめの文字で添える */
.emergency-card-med-changes {
  margin: 4pt 0;
  padding-left: 8pt;
  border-left: 2px solid #000000;
}

.emergency-card-med-changes-title {
  font-size: 9pt;
  font-weight: bold;
  margin: 0 0 2pt 0;
}

.emergency-card-med-changes ul {
  margin: 0;
  padding-left: 16pt;
  font-size: 9pt;
}

.emergency-card-footer-note {
  font-size: 9pt;
  color: #333333;
  border-top: 1px solid #000000;
  padding-top: 4pt;
  margin-top: 8pt;
}