/* ==========================================================================
   グループホーム記録アプリ 共通スタイル（全フェーズで使い回す土台）
   --------------------------------------------------------------------------
   方針：
   ・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;
}

/* 横幅いっぱいに広げたいボタン（フォームの送信ボタンなど） */
.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);
}

.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;
}

/* ---- 左側サイドメニュー：常時表示・大きな文字で押しやすく ---- */
.side-menu {
  width: 260px;
  flex-shrink: 0;
  background-color: var(--color-accent-dark);
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.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;
}

.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);
}

.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;
}

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

/* 幅が狭いタブレット（縦向きなど）では、サイドメニューを上部の横並びに切り替える */
@media (max-width: 720px) {
  .app-layout {
    flex-direction: column;
  }
  .side-menu {
    width: 100%;
  }
  .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;
}

/* 各行の操作ボタン群 */
.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);
}

/* ---- 登録・編集フォームのグループ分け（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;
}

/* ---- バイタル入力グリッド ---- */
.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);
}

/* ---- 記録明細の追記フォーム ---- */
.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での表示/非表示切り替えに使用） */
.is-hidden {
  display: none;
}

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