/* 誤薬防止システム 施設PC側スタイル。
   iOSアプリ（スマホ版）の意匠に合わせたテーマ。
   角丸16px・枠線=色30%・Capsuleバッジは iOS 実装から抽出した正。

   ★配色の正本は docs/配色と合図の設計_2026-07-28.md。
     - 赤は「渡してはいけない（別人・該当なし）」専用。ほかで赤を使わない
       （毎日赤を浴びると人は赤を無視するようになり、本当の赤が効かなくなる）
     - 色だけで意味を伝えない。必ず 形・アイコン・文字のどれかを伴わせる
     - 白文字を載せる塗りは濃い方を使う（iOS既定色は明るすぎて白文字が読めない） */
:root {
  /* iOS システムカラー（スマホ版と同一）。
     ★ここは「生の色」。意味（渡してよい/だめ・注意・お知らせ）を表すときは
       下の「意味トークン」（--ng/--warn/--ok/--info/--special）を使うこと。
       生トークンはタイルの枠線など、意味を持たない装飾にだけ使う。 */
  --green:  #34C759;
  --blue:   #007AFF;
  --mint:   #00C7BE;
  --indigo: #5856D6;
  --orange: #FF9500;
  --teal:   #30B0C7;
  --red:    #FF3B30;
  --gray:   #8E8E93;
  /* 30%=枠線・10%=背景（古いPCブラウザ向けに color-mix を使わず rgba 直書き） */
  --green-30:  rgba(52,199,89,.3);   --green-10:  rgba(52,199,89,.1);
  --blue-30:   rgba(0,122,255,.3);   --blue-10:   rgba(0,122,255,.1);
  --mint-30:   rgba(0,199,190,.3);   --mint-10:   rgba(0,199,190,.1);
  --indigo-30: rgba(88,86,214,.3);   --indigo-10: rgba(88,86,214,.1);
  --orange-30: rgba(255,149,0,.3);   --orange-10: rgba(255,149,0,.1);
  --teal-30:   rgba(48,176,199,.3);  --teal-10:   rgba(48,176,199,.1);
  --red-30:    rgba(255,59,48,.3);   --red-10:    rgba(255,59,48,.1);
  --gray-30:   rgba(142,142,147,.3); --gray-10:   rgba(142,142,147,.1);
  /* 面・文字（iOS のグルーピング背景風） */
  --bg: #F2F2F7;
  --card: #ffffff;
  --ink: #1C1C1E;
  /* ★2026-09-10 UIレビュー: #8E8E93 は白地で 3.3:1 しかなく、WCAG AA（4.5:1）に届かない。
     老眼の職員が使う画面なので #6C6C70（約5.2:1）へ濃くした。大きさは変えていない。
     ★これは印刷用に 409 行で既にやっていた手当てを、画面にも広げたもの。 */
  --muted: #6C6C70;
  /* 入力ラベル用。本文と同じ濃さに近づける（#3A3A3C は白地で約11:1） */
  --label-ink: #3A3A3C;
  --border: #E5E5EA;
  --brand: var(--blue);

  /* ───────── 意味トークン（★設計書「色の使い分け」の表がそのまま入っている） ─────────
     ★なぜ iOS 既定色（--red/--orange/--green）をそのまま使わないのか:
       この3色は明るすぎて、白文字を載せると読めない。
         #34C759 に白文字 = 2.2:1 / #FF9500 に白文字 = 2.2:1（WCAG AA は 4.5:1）
       実施・拒否・別人などのカプセルは白文字なので、必ず下の濃い方を使うこと。
     ★色を変えるときは必ず設計書を読むこと。特に赤を増やさない。 */
  --ng:      #D70015;  /* 止まれ＝渡してはいけない（別人・該当なし）。★これ以外に赤を使わない。白文字 5.4:1 */
  --warn:    #B25000;  /* 注意＝確かめてから進む（日付違い・時間帯違い・保留・拒否・未渡し）。白文字 5.2:1 */
  --ok:      #248A3D;  /* よい＝照合OK・実施済み。白文字 4.4:1 */
  --info:    #0040DD;  /* お知らせ（申し送り・連絡事項）。★赤にしない。白文字 7.6:1 */
  --special: #8944AB;  /* 特記（同姓同名・お渡し）。★赤にしない。白文字 6.0:1 */
  /* 12%塗り（設計書「薄い背景に載せる場合は同じ色の12%塗り＋濃い文字」）と 30%枠線 */
  --ng-12:      rgba(215,0,21,.12);    --ng-30:      rgba(215,0,21,.3);
  --warn-12:    rgba(178,80,0,.12);    --warn-30:    rgba(178,80,0,.3);
  --ok-12:      rgba(36,138,61,.12);   --ok-30:      rgba(36,138,61,.3);
  --info-12:    rgba(0,64,221,.12);    --info-30:    rgba(0,64,221,.3);
  --special-12: rgba(137,68,171,.12);  --special-30: rgba(137,68,171,.3);

  /* 役職の色（設計書「管理者=藍 ★赤にしない」「介護職=青緑 ★緑（＝よい）と分ける」）。
     役職は“渡してよいかの合図”ではないので、塗りつぶし＋白文字にはしない
     （＝合図と見分けがつくようにする。青緑 #00A3A3 は白文字 3.1:1 で読めない事情もある）。 */
  --role-admin: #5856D6;  /* 藍。★もとは赤だった＝設計書が明確に禁じている */
  --role-nurse: #007AFF;  /* 青 */
  --role-care:  #00A3A3;  /* 青緑。★「よい」の緑と分けるため緑にしない */
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 15px; line-height: 1.6;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.icon { vertical-align: -0.2em; }

/* iOS 風の共通ヘッダー（左=メニューへ戻る / 中央=画面タイトル / 右=ログイン者） */
.appbar {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); padding: 10px 16px;
}
.appbar-back {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--blue); font-size: 15px; font-weight: 600;
}
.appbar-back:hover { text-decoration: none; opacity: .75; }
.appbar-title {
  font-weight: 700; font-size: 16px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw;
}
.appbar-user {
  justify-self: end; display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.appbar-user .logout {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--blue); font-weight: 600;
}

.container { max-width: 1080px; margin: 24px auto; padding: 0 16px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px; }

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 20px 0 10px; }

/* ダッシュボード上段（施設名・日付） */
.page-head { margin: 4px 0 14px; }
.page-head .facility { font-size: 24px; font-weight: 800; }
.page-head .date { color: var(--muted); font-size: 14px; }

/* カード（角丸16・白面） */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px; margin-bottom: 16px;
}

/* 帯メッセージ。★色だけに頼らないよう、左端に4pxの太い縦線（＝形の手がかり）を付ける。
   文字色にも意味トークンを使う（--red #FF3B30 の文字は白地で 3.6:1 しかなく、老眼だと読めない）。 */
.flash { padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; border-left: 4px solid currentColor; }
.flash-ok    { background: var(--ok-12);   color: var(--ok); }
/* ★flash-error は「操作が失敗した」用。渡す/渡さないの合図ではないが、
   取り返しのつく画面上の失敗として赤系を残す。日常的に出るお知らせ・注意には使わないこと。 */
.flash-error { background: var(--ng-12);   color: var(--ng); }
/* ★注意（端末の未同期・保持期限超過など）。設計書「赤は渡してはいけない専用」なので
   もとの flash-error（赤）からこちらへ移した。 */
.flash-warn  { background: var(--warn-12); color: var(--warn); }
/* ★お知らせ（申し送り・連絡事項）＝青。設計書の「お知らせ ★赤にしない」。 */
.flash-info  { background: var(--info-12); color: var(--info); }

table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
th { background: #F7F7FA; font-size: 13px; color: var(--muted); }
tr:hover td { background: #FAFAFC; }

/* 見出しと中身を中央で揃える表（利用者マスター）。
   既定の左寄せだと、写真・部屋番号・在籍バッジのように幅が内容で決まるものが
   列ごとに違う位置から始まり、行全体が微妙にずれて見えるため。 */
.table-center th,
.table-center td { text-align: center; vertical-align: middle; }

/* ボタン（iOS 風。主=blue塗り / 副=灰面 / 危険=red塗り） */
.btn {
  display: inline-block; padding: 8px 16px; border-radius: 10px;
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; text-decoration: none; font-family: inherit;
}
.btn:hover { opacity: .85; text-decoration: none; }
.btn-sub { background: var(--gray-10); color: var(--ink); border: 1px solid var(--border); }
/* ★取り消せない削除（記録の削除・退去・利用者削除）だけの赤。
   設計書の「赤＝渡してはいけない」とは別系統だが、管理者しか開かない画面で
   毎日は目に入らないため、赤の総量は増えない。配薬の画面には絶対に置かないこと。
   --red(#FF3B30) だと白文字が 3.6:1 で読みにくいので --ng(#D70015) を使う。 */
.btn-danger { background: var(--ng); }
.btn-sm { padding: 4px 10px; font-size: 13px; }

/* ★2026-09-10 UIレビュー: 設定は縦に長く、保存ボタンがいちばん下にある。
   保存先を選んだだけで「設定できた」と誤解しやすかった。画面の下に貼り付く保存バーにし、
   触ったら「変更は未保存です」を出す。★印刷では消す（下の @media print で .savebar を隠す）。 */
.savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px -4px 0; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
.savebar .savebar-state { font-size: 14px; color: var(--muted); }
/* ★未保存は「注意」であって「停止」ではない。赤は使わない（赤は渡すな専用） */
.savebar.is-dirty .savebar-state { color: var(--warn); font-weight: 700; }

/* ★2026-09-10 UIレビュー: 13px・#8E8E93 は、本文（15px）より小さく薄かった。
   「どの欄に何を入れるか」を探す文字なので、本文と同じ大きさ・濃い色にする。
   ★16px にはしない。本文 15px より大きいラベルは見出しに見え、上下関係が逆転する。
   （iOS Safari の自動拡大を避ける 16px 下限は**入力欄**の話で、ラベルには当たらない） */
label { display: block; font-size: 15px; color: var(--label-ink); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); background: #fff;
  border-radius: 10px; font-size: 15px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue-30); }

/* ───────── スマホでの入力（★iPhoneから登録する運用。社長決定 2026-08-15）
   ・入力欄を16px未満にすると iOS Safari が勝手に拡大する（戻すのに毎回ピンチ操作が
     要る）。狭い画面では必ず16pxにする
   ・指で押す的は44px角が目安（Apple のヒューマンインターフェイスガイドライン） */
@media (max-width: 700px) {
  input[type=text], input[type=password], input[type=date], input[type=time],
  input[type=number], input[type=file], select, textarea { font-size: 16px; }
  .btn { min-height: 40px; padding: 9px 14px; }
  .btn-sm { min-height: 36px; padding: 7px 12px; font-size: 14px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px;
                                            vertical-align: -4px; }
}
/* 横に広い表はそれ自体を横スクロールさせる（ページごと横に伸ばさない） */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 180px; }
.inline { display: inline; }

/* TOP メニュータイル（スマホ HomeView 準拠。正方形寄り・アイコン大＋タイトル） */
.tile-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin: 16px 0;
}
@media (min-width: 900px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 130px; padding: 26px 12px;
  background: var(--card); border: 1px solid var(--gray-30); border-radius: 16px;
  color: var(--ink); font-size: 16px; font-weight: 700; text-decoration: none;
}
.tile:hover { text-decoration: none; }
.tile-green  { border-color: var(--green-30); }  .tile-green:hover  { background: var(--green-10); }
.tile-blue   { border-color: var(--blue-30); }   .tile-blue:hover   { background: var(--blue-10); }
.tile-mint   { border-color: var(--mint-30); }   .tile-mint:hover   { background: var(--mint-10); }
.tile-indigo { border-color: var(--indigo-30); } .tile-indigo:hover { background: var(--indigo-10); }
.tile-orange { border-color: var(--orange-30); } .tile-orange:hover { background: var(--orange-10); }
.tile-teal   { border-color: var(--teal-30); }   .tile-teal:hover   { background: var(--teal-10); }
/* ★ヒヤリハット用。もとは tile-red（赤枠＋赤アイコン）だったが、メニューは毎日開く画面で、
   そこに赤があると「赤＝渡してはいけない」が薄れる（設計書「赤の総量を増やさない」）。
   ヒヤリハット＝特記すべき出来事として、特記の紫 --special に移した。 */
.tile-special { border-color: var(--special-30); } .tile-special:hover { background: var(--special-12); }
.tile-red    { border-color: var(--red-30); }    .tile-red:hover    { background: var(--red-10); }
.tile-gray   { border-color: var(--gray-30); }   .tile-gray:hover   { background: var(--gray-10); }
/* 小さめタイル（管理メニュー行。横並び・低め） */
.tile-grid-sub { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .tile-grid-sub { grid-template-columns: repeat(5, 1fr); }
}
.tile-sm {
  flex-direction: row; justify-content: center; gap: 8px;
  min-height: 0; padding: 12px 10px; font-size: 14px;
}

/* ───────── Capsule バッジ（丸pill・白文字・太字小） ─────────
   ★設計書「意味の一貫性」に合わせた対応表。ここが唯一の正。
     状態: 実施=よい / 拒否・保留=注意 / お渡し=特記 / お渡し休み=中立
     照合: 一致=よい / 別人=止まれ / 日付違い・時間帯違い=注意
     お渡しの種別（デイ・外出・外泊）: 分類なので合図の色を使わない
     役職: 管理者=藍 / 看護師=青 / 介護職=青緑 / その他=灰（★赤・緑を使わない）
   ★カプセルの中身は必ず日本語ラベルにすること（色が分からなくても読める＝設計書の決まり2）。 */
.badge, .capsule {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1.6; white-space: nowrap;
}

/* 意味を持つカプセル。★意味のある表示では必ずこの5つ＋neutralを使う（生の色クラスを使わない） */
.capsule-stop    { background: var(--ng); }       /* 止まれ＝渡してはいけない（別人・該当なし） */
.capsule-caution { background: var(--warn); }     /* 注意＝確かめてから進む */
.capsule-ok      { background: var(--ok); }       /* よい＝照合OK・実施済み */
.capsule-info    { background: var(--info); }     /* お知らせ */
.capsule-special { background: var(--special); }  /* 特記（同姓同名・お渡し） */
.capsule-neutral { background: var(--gray); }     /* 中立（休み・不明など） */

/* ★三重の合図（色・形・アイコン）のうち「形」。日本語が読めない職員・赤緑の色覚特性でも、
   ✕/！/✓ の3つの記号だけで見分けられるようにする。iOS 側のアイコン
   （xmark.octagon / exclamationmark.triangle / checkmark.circle）と同じ体系。 */
.capsule-stop::before    { content: "✕ "; font-weight: 900; }
.capsule-caution::before { content: "！ "; font-weight: 900; }
.capsule-ok::before      { content: "✓ "; font-weight: 900; }
.badge-ng::before        { content: "✕ "; font-weight: 900; }
.badge-warn::before      { content: "！ "; font-weight: 900; }
.badge-ok::before        { content: "✓ "; font-weight: 900; }

/* 薄い版（12%塗り＋濃い文字）。合図ではない「分類」に使い、合図より弱く見せる。
   例: お渡しの種別（デイ・外出）。設計書「薄い背景に載せる場合は同じ色の12%塗り＋濃い文字」。 */
.capsule-special-soft {
  background: var(--special-12); color: var(--special); border: 1px solid var(--special-30);
}

/* 役職バッジ。★設計書で 管理者=藍・介護職=青緑 と決まっている（管理者の赤、介護職の緑は禁止）。
   合図（実施・別人など）と取り違えないよう、塗りつぶしではなく薄塗り＋枠線＋黒文字にする。 */
.capsule-role { background: #fff; color: var(--ink); border: 1px solid var(--border); }
.capsule-role-admin { background: rgba(88,86,214,.12);  border-color: var(--role-admin); }
.capsule-role-nurse { background: rgba(0,122,255,.12);  border-color: var(--role-nurse); }
.capsule-role-care  { background: rgba(0,163,163,.12);  border-color: var(--role-care); }
.capsule-role-other { background: var(--gray-10);       border-color: var(--gray-30); }

/* 生の色クラス（装飾用。★意味のある表示には使わない）。
   白文字が読めない明るい3色は、残っている参照が事故にならないよう濃い方へ差し替え済み。 */
.capsule-green  { background: var(--ok); }    /* 旧: --green #34C759（白文字 2.2:1） */
.capsule-orange { background: var(--warn); }  /* 旧: --orange #FF9500（白文字 2.2:1） */
.capsule-red    { background: var(--ng); }    /* 旧: --red #FF3B30（白文字 3.6:1） */
.capsule-blue   { background: var(--blue); }
.capsule-mint   { background: var(--mint); }
.capsule-indigo { background: var(--indigo); }
.capsule-teal   { background: var(--teal); }
.capsule-gray   { background: var(--gray); }
/* 旧クラス名の互換（既存テンプレの badge-* をそのまま意味トークンに接続） */
.badge-ok { background: var(--ok); }
.badge-ng { background: var(--ng); }
.badge-warn { background: var(--warn); }
.badge-info { background: var(--info); }
.badge-muted { background: var(--gray); }

/* 集計タイル（数字大＋ラベル・背景=色10%） */
.stats { display: flex; gap: 14px; flex-wrap: wrap; }
.stat, .stat-tile {
  flex: 1; min-width: 150px; background: var(--gray-10);
  border-radius: 16px; padding: 16px; text-align: center;
}
.stat .num, .stat-tile .num { font-size: 30px; font-weight: bold; }
.stat .lbl, .stat-tile .lbl { font-size: 13px; color: var(--muted); }
/* 意味を持つ集計タイル（★数字だけでなく .lbl の日本語ラベルが必ず付いていること）。
   文字色にも意味トークンを使う。--green/--orange は 30px 太字でも 2.2:1 しかなく、
   薄暗い居室や老眼では数字が読めないため（設計書「文字は読める濃さで」）。 */
.stat-ok     { background: var(--ok-12); }     .stat-ok .num     { color: var(--ok); }
.stat-warn   { background: var(--warn-12); }   .stat-warn .num   { color: var(--warn); }
.stat-ng     { background: var(--ng-12); }     .stat-ng .num     { color: var(--ng); }
.stat-info   { background: var(--info-12); }   .stat-info .num   { color: var(--info); }
/* 装飾用（意味なし） */
.stat-blue   { background: var(--blue-10); }   .stat-blue .num   { color: var(--blue); }
.stat-mint   { background: var(--mint-10); }   .stat-mint .num   { color: var(--mint); }
.stat-indigo { background: var(--indigo-10); } .stat-indigo .num { color: var(--indigo); }
.stat-teal   { background: var(--teal-10); }   .stat-teal .num   { color: var(--teal); }
/* 旧クラス名の互換（意味トークンへ接続。新しく書くときは .stat-ok/.stat-warn/.stat-ng を使う） */
.stat-green  { background: var(--ok-12); }     .stat-green .num  { color: var(--ok); }
.stat-orange { background: var(--warn-12); }   .stat-orange .num { color: var(--warn); }
.stat-red    { background: var(--ng-12); }     .stat-red .num    { color: var(--ng); }
.stat.warn { background: var(--warn-12); } .stat.warn .num { color: var(--warn); }
.stat.ng { background: var(--ng-12); } .stat.ng .num { color: var(--ng); }

/* セグメントタブ風リンク（期間切替など） */
.seg { display: inline-flex; background: #E3E3E8; border-radius: 10px; padding: 2px; }
.seg a, .seg span {
  padding: 5px 14px; border-radius: 8px; font-size: 13px;
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.seg a:hover { text-decoration: none; }
.seg .on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }

/* 展開リスト（本日の記録・服薬記録。<details>/<summary> による JS 無し開閉。
   スマホ版 RecordGroupRows の行意匠: 折りたたみ時は1行、＋/−は CSS で切替） */
.disclose-list { padding: 6px 20px; }
details.disclose { border-bottom: 1px solid var(--border); }
details.disclose:last-child { border-bottom: none; }
details.disclose summary {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px; cursor: pointer; list-style: none;
}
details.disclose summary::-webkit-details-marker { display: none; }
details.disclose summary::after {
  content: "＋"; color: var(--muted); font-size: 17px; font-weight: 600; line-height: 1;
}
details.disclose[open] summary::after { content: "−"; }
.disclose .room { min-width: 44px; color: var(--blue); font-weight: 700; }
.disclose .who { font-weight: 700; }
.disclose .cnt { margin-left: auto; color: var(--muted); font-size: 12px; }
/* 展開明細（1件=時点/人＋時刻＋状態、薬品名・用法、スタッフ・照合、警告） */
.rec-line { border-top: 1px dashed var(--border); padding: 7px 4px 8px 20px; font-size: 13px; }
.rec-main { display: flex; align-items: center; gap: 10px; }
.rec-leading { min-width: 84px; font-weight: 600; }
.rec-time { color: var(--muted); font-size: 12px; }
.rec-spacer { flex: 1; }
.rec-drug { color: var(--muted); font-size: 12px; margin-top: 2px; }
/* 頓服の用法＝お知らせ（--info）。旧 --blue(#007AFF) は白地で 4.0:1 と AA 未満だった */
.rec-usage { color: var(--info); font-weight: 600; margin-right: 6px; }
.rec-sub { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin-top: 2px; }
/* ★12px の細い文字に --orange(#FF9500) は 2.2:1 で読めなかった。注意色 --warn(5.2:1) に変更。
   どちらも「QR未使用」「⚠」の文字が付いているので、色が見えなくても意味は残る。 */
.rec-qr { color: var(--warn); font-weight: 600; }
.rec-packets { color: var(--muted); font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 0 .5em; }
.rec-warning { color: var(--warn); font-size: 12px; margin-top: 2px; }

.photo-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; }
.photo-large { max-width: 220px; border-radius: 16px; border: 1px solid var(--border); }
.muted { color: var(--muted); }
/* 入力欄のすぐ下に置く補足。★食札・食事情報の画面では「なぜそう入れるのか」を
   その場で読ませたいので、本文より小さく・でも読める大きさにする。
   （meal_cards.html が以前から使っていたが定義が無く、素の<p>になっていた） */
.hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 6px 0 0; }
/* 大きなチェックボックス。★見落とすと事故になる項目（食前薬など）に使う。
   ふつうの大きさだと入力画面で埋もれるが、食札では最も強調している項目なので
   入力側でも同じ重みにする。指でも押しやすい（施設PCはタッチ操作のこともある） */
.big-check {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer;
  padding: 10px 16px; border: 2px solid var(--border); border-radius: 12px;
}
.big-check input[type=checkbox] { width: 26px; height: 26px; margin: 0; cursor: pointer; }
/* 入っているときだけ枠と文字を「注意」の色にする。★赤は使わない（渡してはいけない専用） */
.big-check:has(input:checked) { border-color: var(--warn); color: var(--warn); }
/* 食事情報の画面に出す食札プレビュー。中身は本番と同じPDFをそのまま表示する */
.diet-preview iframe {
  width: 100%; height: 360px; border: 1px solid var(--border);
  border-radius: 10px; background: #f6f7f8;
}
.right { text-align: right; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }

/* ログイン */
.login-wrap { max-width: 360px; margin: 60px auto; }

/* ───────── 印刷（設計書「4. 印刷しても消えない」） ─────────
   食札ラベル等が base.html を継承しても、ヘッダー等を刷り込まない。 */
@media print {
  body { background: #fff; }
  .appbar, .foot, .flash, .savebar { display: none !important; }

  /* ★これが無いと、ブラウザが既定で背景の塗りを落とすため、
     実施／拒否／別人などの「塗り＋白文字」カプセルがまるごと消え、
     状態欄が空白の記録票が施設内に出回っていた。
     print-color-adjust: exact で塗りをそのまま刷る（-webkit- と旧 color-adjust も併記）。 */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;          /* 旧仕様名。古い Chrome/Edge 向け */
    print-color-adjust: exact !important;
  }

  /* ★二重の保険。印刷ダイアログで「背景のグラフィック」を切られると exact でも塗りが出ない。
     そこで印刷時は「塗り＋白文字」をやめ、「白地＋濃い文字＋枠線」のチップにする。
     こうすれば背景が刷られなくても、白黒プリンタでも、日本語ラベルが必ず残る。
     色は意味トークンのままなので、カラー印刷なら意味の色も残る。 */
  .badge, .capsule {
    background: #fff !important;
    border: 1.5px solid currentColor !important;
    padding: 1px 7px;
  }
  .capsule-stop, .badge-ng, .capsule-red         { color: var(--ng) !important; }
  .capsule-caution, .badge-warn, .capsule-orange { color: var(--warn) !important; }
  .capsule-ok, .badge-ok, .capsule-green         { color: var(--ok) !important; }
  .capsule-info, .badge-info                     { color: var(--info) !important; }
  .capsule-special, .capsule-special-soft        { color: var(--special) !important; }
  /* 中立・役職は黒に寄せる（--gray #8E8E93 は白地で 3.3:1 と薄く、印刷でさらに飛ぶ） */
  .capsule-neutral, .capsule-gray, .badge-muted,
  .capsule-role, .capsule-blue, .capsule-mint,
  .capsule-indigo, .capsule-teal                 { color: #3A3A3C !important; }

  /* ★色が分からなくても・日本語が読めなくても意味が残るよう、印刷時だけ英語1語を添える
     （設計書「三重の合図」の STOP / CHECK / OK。外国人職員が最初に覚える3語）。
     画面では表が横に伸びるので付けず、紙のときだけ出す。 */
  .capsule-stop::after,    .badge-ng::after   { content: " STOP"; font-size: 10px; }
  .capsule-caution::after, .badge-warn::after { content: " CHECK"; font-size: 10px; }
  .capsule-ok::after,      .badge-ok::after   { content: " OK"; font-size: 10px; }

  /* 集計タイルの薄塗りが飛んでも、数字とラベルの区切りが分かるように枠線を足す */
  .stat, .stat-tile { border: 1px solid #C7C7CC; }
  /* 表の罫線も薄すぎると飛ぶ */
  th, td { border-bottom: 1px solid #C7C7CC; }
}