/* ============================================================
   食事提供数管理システム 画面スタイル（要件 5.2 共通UI要件）

   配色  : 主色 #2563eb / 警告 #dc2626 / 注意 #ea580c / 正常 #16a34a
   文字  : 基準15px以上、食数の数値は22px以上（厨房での視認性確保）
   応答  : 700px以下で1カラム

   ■ 設計方針
   業務画面なので、装飾より「数字と状態の読み取りやすさ」を優先する。
   罫線で升目を作る代わりに、余白と背景の差で情報のまとまりを示す。
   数字は等幅数字（tabular-nums）で桁を揃え、縦に並べたときにずれないようにする。
   ============================================================ */

:root {
  /* 要件 5.2 で定められた色 */
  --blue: #2563eb;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --purple: #7c3aed;

  /* 上記から派生させた濃淡 */
  --blue-strong: #1d4ed8;
  --blue-mid: #3452e6;    /* 主色と藍のあいだ。段差を感じさせないための中継色 */
  --indigo: #4f46e5;      /* 主色の隣接色。グラデーションの終端に使う */
  --blue-light: #eff6ff;
  --blue-ring: rgba(37, 99, 235, .18);

  /* 無彩色 */
  --text: #0f172a;
  --text-soft: #475569;
  --gray: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --surface: #ffffff;
  --surface-sub: #f8fafc;
  --bg: #f1f5f9;

  /* 角丸と影 */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* iOS Safari は接頭辞つきでないと効かず、横向きにしたときに
     文字が勝手に拡大されて表がずれる */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 数字は桁を揃える。食数を縦に並べて読むため */
input, select, textarea, table, .big-num, .restore-diff { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 画面上部の固定領域（ヘッダー＋タブ） ---------- */
.app-top {
  position: sticky;
  top: 0;
  z-index: 30;   /* トースト(99)・ローディング(50)より下、本文より上 */
  box-shadow: 0 1px 0 var(--border), 0 6px 20px -12px rgba(15, 23, 42, .35);
}

/* ---------- ヘッダー ---------- */
header {
  /* 主色(#2563eb)から隣接色の藍(#4f46e5)へ、狭い色幅で斜めに流す。
     色幅を狭く取ることで濃淡の落差を抑え、帯として落ち着いて見せる。
     上に白のごく淡い光を重ねて、平坦な塗りに見えないようにする。
     どの位置でも白文字のコントラスト比は4.5:1（WCAG AA）を上回る色域に収める。 */
  background:
    radial-gradient(900px 220px at 14% -55%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(102deg, var(--blue) 0%, var(--blue-mid) 46%, var(--indigo) 100%);
  color: #fff;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
header h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
header .date-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
header input[type=date] {
  font-size: 15px;
  padding: 7px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .96);
  color: var(--text);
  font-weight: 600;
}
header button {
  font-size: 14px;
  font-weight: 600;
  padding: 7px 13px;
  border: none;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s ease;
}
header button:hover { background: rgba(255, 255, 255, .3); }
header button:active { background: rgba(255, 255, 255, .38); }
header :focus-visible { outline-color: #fff; }

.user-chip { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.user-chip .role {
  background: rgba(255, 255, 255, .18);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
}

/* ---------- タブ ---------- */
nav.tabs {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }
.app-top nav.tabs { background: var(--surface); }

/* ---------- ハンバーガー（狭い画面のみ） ---------- */
.menu-toggle { display: none; }
.menu-backdrop { display: none; }

nav.tabs button {
  flex: 1;
  min-width: 120px;
  padding: 13px 10px 11px;
  font-size: 15px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--gray);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
nav.tabs button:hover { color: var(--text-soft); background: var(--surface-sub); }
nav.tabs button.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: transparent;
}

/* ---------- レイアウト ---------- */
main { padding: 22px 18px 40px; max-width: 1120px; margin: 0 auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
  /* 固定ヘッダーの下に隠れないようにする */
  scroll-margin-top: 140px;
}
.card h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  margin-bottom: 14px;
  color: var(--text);
}
.card h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 8px;
  color: var(--gray);
}
.count-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.flex-between {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.table-scroll { overflow-x: auto; }

/* ---------- 表 ----------
   升目状の罫線をやめ、行の区切りだけを残す。
   数字の視認性を上げつつ、視線が横に流れやすくなる。 */
table { border-collapse: collapse; width: 100%; }

th, td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 11px 12px;
  text-align: center;
}
th {
  background: var(--surface-sub);
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-strong);
}
tr:first-child th:first-child { border-top-left-radius: var(--r-md); }
tr:first-child th:last-child { border-top-right-radius: var(--r-md); }
tbody tr:last-child td, tr:last-child td { border-bottom: none; }

td.name-cell, th.name-cell { text-align: left; }

/* 行のホバーで視線を保持しやすくする（一覧を横に読むため） */
tr:hover td { background: var(--surface-sub); }
tr.total-row:hover td, tr:first-child:hover th { background: inherit; }

.big-num {
  font-size: 24px;      /* 要件 5.2 は22px以上 */
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}

/* 合計行は色の主張を抑えつつ、上罫線と太字で確実に区別する */
.total-row td {
  background: var(--blue-light);
  font-weight: 700;
  border-top: 2px solid var(--blue);
  border-bottom: none;
}
.alert-nyuin td { background: #fef2f2; }
.alert-nyuin:hover td { background: #fee2e2; }

.stopped { color: var(--red); font-weight: 700; }
.served { color: var(--green); font-weight: 600; }

/* ---------- ボタン ---------- */
.btn {
  padding: 9px 18px;
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--blue-strong); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }

.btn-gray {
  background: var(--surface);
  color: var(--text-soft);
  border-color: var(--border-strong);
}
.btn-gray:hover:not(:disabled) { background: var(--surface-sub); border-color: var(--gray); }

/* 取り返しがつかない操作（退去・削除・取消・復元）。
   主要な操作より控えめに置きたいので塗りつぶしにはせず、
   文字とアイコンを赤にして危険であることを示す。 */
.btn-danger-soft {
  background: var(--surface);
  color: var(--red);
  border-color: #fecaca;
}
.btn-danger-soft:hover:not(:disabled) { background: #fef2f2; border-color: var(--red); }

.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--r-sm); }

/* 一覧の操作列は、文字数の違いで幅がばらつくと不揃いに見えるため最低幅を揃える */
.action-cell .btn-sm { min-width: 84px; }

/* ---------- フォーム ---------- */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label {
  font-size: 12px;
  color: var(--gray);
  font-weight: 700;
  letter-spacing: .02em;
}

input, select, textarea {
  padding: 9px 11px;
  font-size: 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover:not(:disabled), select:hover, textarea:hover { border-color: var(--gray); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-ring);
}
textarea { width: 100%; line-height: 1.6; }

.meal-checks { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.meal-checks label {
  font-size: 15px; color: var(--text); display: flex; align-items: center;
  gap: 6px; cursor: pointer; font-weight: 600;
}
/* チェックボックス・ラジオだけを対象にする。
   ここを input 全体に当てると、同じ枠内のテキスト入力まで18pxに潰れる。 */
.meal-checks input[type=checkbox],
.meal-checks input[type=radio] {
  width: 18px; height: 18px; flex: 0 0 auto;
  accent-color: var(--blue);
}

/* 区分マスタの編集行（名称入力＋有効チェック＋削除） */
.master-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.master-row input[type=text] { flex: 1 1 auto; min-width: 0; }
.master-row label {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.master-row label input[type=checkbox] {
  width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--blue);
}
.master-row .btn { flex: 0 0 auto; }

/* ---------- アイコン（SVGスプライト） ---------- */
.sprite { display: none; }

.icon {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;          /* 文字色を継承する（タブの選択色・ヘッダーの白） */
  vertical-align: -0.16em;
  flex: 0 0 auto;
  pointer-events: none;        /* ボタン内のクリック判定を邪魔しない */
}
h1 .icon { width: 1.15em; height: 1.15em; }
nav.tabs .icon { margin-right: 0; }

/* 用途別の色（要件 5.2 の配色）。
   塗りつぶしのボタン（btn-primary / btn-danger）の上では
   コントラストを確保するため白のままとし、色はボタン自体で表す。 */
.icon-primary { color: var(--blue); }    /* 参照・印刷 */
.icon-success { color: var(--green); }   /* 追加・取り込み */
.icon-warn    { color: var(--orange); }  /* 注意・編集中 */
.icon-danger  { color: var(--red); }     /* 退去・取消・削除 */

/* ボタンの中のアイコンは必ず文字と同じ色にする。
   文字が灰色でアイコンだけ赤（緑）だと色が2つ混ざり、塗り忘れのように見える。
   意味の違いはアイコンの色ではなく、ボタンの種類（.btn-danger-soft など）で表す。 */
.btn .icon { color: currentColor; }

/* 検索欄のアイコンは背景として置く（placeholder にSVGを入れられないため） */
.search-input {
  padding-left: 34px;
  background-repeat: no-repeat;
  background-position: 11px center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2'%3E%3Ccircle cx='10.6' cy='10.6' r='6.4'/%3E%3Cpath d='m15.4 15.4 5.2 5.2' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- タグ・注記 ----------

   以前は淡い下地に濃い文字を載せていた。文字と下地の対比自体は足りていたが、
   下地（#eff6ff など）が行の白とほとんど変わらず、タグそのものが浮き上がらないため
   「見えにくい」状態だった。塗りつぶして白文字にし、遠目でも状態が分かるようにする。

   色は白文字とのコントラスト比 4.5 以上（WCAG AA）を満たすものだけを使う。
   要件 5.2 の色をそのまま使うと橙3.56・緑3.30で不足するため、一段濃い色を採る。 */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
  color: #fff;
  letter-spacing: .01em;
}
.tag-kesshoku { background: #c2410c; }   /* 欠食       5.18 */
.tag-nyuin    { background: #b91c1c; }   /* 入院・停止中 6.47 */
.tag-teiki    { background: #6d28d9; }   /* 定期       7.10 */
.tag-gray     { background: #64748b; }   /* 停止       4.76 */

/* 在所・有効といった「通常の状態」。
   例外（入院・停止）と同じ強さで出すと、注意すべき行が埋もれてしまう。
   読みやすさは保ちつつ、色みは主張しない緑にする。 */
.tag-form     { background: #15803d; }   /* 在所・有効  5.02 */

/* 状態ではなく種類を表すもの（自動バックアップ・更新操作など）。
   緑は「正常な状態」だけに使いたいので、種類の区別には青を当てる。 */
.tag-blue     { background: var(--blue-strong); }  /* 6.16 */

.muted { color: var(--gray); font-size: 13px; }
.hidden { display: none !important; }
.print-only { display: none; }   /* 宛名・印刷日時・フッターは印刷時のみ */

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--surface-sub);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

#editBanner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: var(--r-md);
  padding: 11px 14px;
  margin-bottom: 14px;
  font-weight: 600;
  color: #78350f;
}

/* ---------- システム構成図 ----------
   図の実体は公開ディレクトリの外にあり、api/system/diagram から画像として読み込む。
   配色はSVG側に埋め込んであるため、ここでは配置だけを指定する。 */
.sysmap-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 20px 0 6px;
}
/* 広い画面では横長の図。器いっぱいに広げて等倍で見せる。 */
.sysmap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sysmap {
  display: block;
  /* 器いっぱいに広げる。図は実寸を器の幅に合わせて作ってあるため、
     ここで縮めると文字がその分だけ小さくなって読めなくなる。 */
  width: 100%;
  height: auto;
  /* 読み込み前でも枠が潰れないように場所を確保する */
  aspect-ratio: 1040 / 1108;
  background: var(--surface-sub);
  border-radius: var(--r-md);
}

/* 縦長版（app.js が印を付ける）。
   画面幅ではなく「いま読み込んでいる図」で判断する。幅で判断すると、
   切り替えがずれたときに横長の図が縦長の枠に押し込められて文字が潰れる。
   器が広いときに引き伸ばすと文字だけ大きい間延びした図になるため上限を置く。 */
.sysmap.sysmap-narrow {
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 360 / 1517;
}

/* ---------- システム画面のログ表 ----------
   数百件をそのまま並べると画面が数万pxになり、下のカードに辿り着けない。
   表の中だけをスクロールさせ、見出し行は上に貼り付けておく。 */
.log-scroll { max-height: 420px; overflow-y: auto; }
.log-scroll th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
@media (max-width: 700px) {
  /* カード表示では見出し行を使わないため、高さの制限だけ残す */
  .log-scroll { max-height: 60vh; }
}

/* ---------- システム画面の集計タイル ---------- */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.summary-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 10px;
  text-align: center;
  background: var(--surface-sub);
}
/* 0件でない項目は目を引くようにする（見落とすと攻撃に気づけない） */
.summary-item.has-value {
  border-color: #fecaca;
  background: #fef2f2;
}
.summary-num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.summary-item.has-value .summary-num { color: var(--red); }
.summary-label { font-size: 12px; font-weight: 600; color: var(--gray); margin-top: 2px; }

/* ---------- トースト（画面中央） ----------
   以前は下端に出していたが、操作しているのは画面の中ほどであることが多く、
   視線から遠い下端では見落とされた。目の行き先に出す。

   pointer-events: none のままにしてあるので、表示中でも下の操作は妨げない。 */
#toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.94);
  background: #0f172a; color: #fff;
  padding: 18px 30px; border-radius: var(--r-lg);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
  pointer-events: none; z-index: 99;
  /* left:50% だけだと、使える幅が「左端から画面右端まで」＝画面の半分に
     制限され、短い文言でも途中で折り返してしまう。
     max-content を指定して、収まる限りは1行で出す。 */
  width: max-content;
  max-width: min(88vw, 420px); text-align: center;
  font-weight: 700; font-size: 16px; line-height: 1.5;
  box-shadow: var(--shadow-lg);
}
#toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#toast.error { background: var(--red); }

/* ---------- ダイアログ ---------- */
dialog {
  border: none;
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  width: 430px;
  color: var(--text);
}
dialog::backdrop {
  background: rgba(15, 23, 42, .5);
  -webkit-backdrop-filter: blur(2px);   /* Safari は接頭辞が要る */
  backdrop-filter: blur(2px);
}
dialog h2 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- 復元の確認ダイアログ ---------- */
#restoreDialog { width: 470px; }
#restoreDialog h2 { color: var(--red); }

.restore-when {
  background: var(--blue-light);
  border: 1px solid #bfdbfe;
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 16px;
  color: var(--blue-strong);
}

.restore-diff {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.restore-diff th { font-size: 12px; }
.restore-diff td { font-size: 15px; font-weight: 700; padding: 9px 12px; }
.restore-diff td:last-child { color: var(--blue); }
.restore-diff tr:hover td { background: inherit; }

.restore-warn {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.75;
  color: #7f1d1d;
}
.restore-warn p + p { margin-top: 8px; }

.restore-agree {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 0;
}
.restore-agree input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--red); }

/* ---------- ログイン画面 ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background:
    radial-gradient(1000px 500px at 50% -10%, #dbeafe 0%, transparent 60%),
    var(--bg);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  width: 100%;
  max-width: 390px;
  box-shadow: var(--shadow-md);
}
.login-card h1 {
  font-size: 20px; color: var(--text); margin-bottom: 6px;
  display: flex; align-items: center; gap: 9px;
}
.login-card h1 .icon { color: var(--blue); }
.login-card .form-group { margin-bottom: 16px; }
.login-card input { width: 100%; font-size: 16px; padding: 11px 12px; }
.login-card .btn { width: 100%; padding: 13px; font-size: 16px; margin-top: 4px; }
.login-error {
  background: #fef2f2; color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  padding: 11px 13px; margin-bottom: 16px; font-weight: 600; font-size: 14px;
}

/* ---------- オフライン表示のお知らせ帯（要件 9.2） ---------- */
.offline-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 5px solid var(--orange);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #78350f;
  font-size: 14px;
  line-height: 1.6;
}
.offline-banner b { color: #9a3412; }

/* ---------- 読み込み中 ---------- */
#loading {
  position: fixed; inset: 0; background: rgba(241, 245, 249, .72);
  -webkit-backdrop-filter: blur(2px);   /* Safari は接頭辞が要る */
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--gray); z-index: 50;
}

/* ============================================================
   レスポンシブ（要件 5.2：700px以下で1カラム／タブレット対応）

   すべて `screen` に限定する。印刷は print.css の表レイアウトを使うため、
   ここの指定が印刷結果に影響してはならない。
   ============================================================ */

/* ---------- タブレット（横向き〜縦向き） ---------- */
@media screen and (max-width: 900px) {
  main { padding: 16px 14px 32px; }
  nav.tabs button { font-size: 14px; min-width: 100px; padding: 12px 6px 10px; }
  .card { padding: 16px; }
  .count-grid { gap: 16px; }
  th, td { padding: 10px 8px; }
}

/* ---------- 700px以下：1カラム＋一覧表をカード表示に ---------- */
@media screen and (max-width: 700px) {
  .count-grid { grid-template-columns: 1fr; }
  main { padding: 12px 10px 28px; }
  .card { padding: 14px; border-radius: 12px; scroll-margin-top: 160px; }

  /* ヘッダー：日付ナビを1行使い、操作しやすい大きさにする */
  header { padding: 10px 12px; gap: 8px; }
  header h1 { font-size: 16px; flex: 1 1 auto; }
  header .date-nav { margin-left: 0; order: 3; width: 100%; justify-content: space-between; gap: 5px; }
  header .date-nav input[type=date] { flex: 1 1 auto; min-width: 0; font-size: 15px; padding: 7px 6px; }
  header button { padding: 8px 11px; white-space: nowrap; }  /* 「前／日」と折り返させない */
  .user-chip { font-size: 13px; }

  /* タブ：横スクロールさせず、5つを収める */
  /* タブが6つあるため、狭い画面では文字を詰めて収める */
  /* ---------- 狭い画面のメニュー ----------
     6つのタブを横に並べると1つ40px弱になり、指では狙えない。
     ヘッダのボタンに畳み、開いた先で1行ずつ大きく並べる。 */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 9px 14px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--r-md);
    cursor: pointer;
  }
  .menu-toggle .icon { width: 20px; height: 20px; }
  .menu-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .30); }

  /* 開くまでは畳んでおく */
  nav.tabs {
    display: none;
    flex-direction: column;
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--border);
  }
  nav.tabs.open { display: flex; }

  nav.tabs button {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    min-height: 54px;          /* 指で確実に押せる高さ */
    padding: 0 20px;
    gap: 14px;
    font-size: 17px;
    letter-spacing: 0;
    border-bottom: none;
    border-left: 4px solid transparent;
  }
  nav.tabs button .icon { display: block; width: 22px; height: 22px; }
  nav.tabs button.active {
    border-bottom: none;
    border-left-color: var(--blue);
    background: var(--blue-light);
  }

  /* メニューの外を押しても閉じられるようにする */
  .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .28);
    z-index: 29;               /* .app-top(30) より下、本文より上 */
  }
  .menu-backdrop[hidden] { display: none; }

  /* フォームは縦積み。
     チェックボックス・ラジオは対象外にする（幅100%にすると、
     ラベル文字が1文字ずつ折り返されて崩れるため） */
  .form-group { width: 100%; }
  .form-group input:not([type=checkbox]):not([type=radio]),
  .form-group select,
  .form-group textarea { width: 100%; }

  /* チェックボックス群は縮ませず、ラベルを折り返さない */
  .meal-checks { gap: 14px 16px; }
  .meal-checks label { flex: 0 0 auto; white-space: nowrap; }
  .form-row { gap: 12px; }
  .flex-between > input[type=text] { width: 100%; }

  /* 食数表は表のまま。数値は22px以上を維持し、余白だけ詰める（要件 5.2） */
  #stapleTable th, #stapleTable td,
  #sideTable th, #sideTable td { padding: 9px 4px; }

  /* ダイアログ */
  dialog { width: auto; margin: 0 10px; padding: 20px; }
  .dialog-actions .btn { flex: 1 1 auto; }
}


/* ============================================================
   一覧表のカード表示（820px以下）

   1カラム化（要件 5.2）は700pxだが、8列ある一覧表は iPad の縦向き
   （768px）でも氏名が数行に折り返してしまい読めない。
   表としての限界はレイアウトの折り返し点より手前に来るため、
   一覧だけ別のブレークポイントで切り替える。
   ============================================================ */
@media screen and (max-width: 820px) {
  /* ------------------------------------------------------------
     一覧表をカード表示に切り替える。
     横スクロールは厨房や現場での閲覧に向かないため、
     1件を1枚のカードとして縦に積む。見出しは各セルの
     data-label 属性から表示する（app.js が付与）。
     ------------------------------------------------------------ */
  table.stacked { border: none; }
  table.stacked .table-scroll,
  .table-scroll:has(table.stacked) { overflow-x: visible; }

  table.stacked tr:first-child { display: none; }  /* 見出し行 */

  table.stacked tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  table.stacked tr:hover td { background: transparent; }
  table.stacked tr.alert-nyuin { background: #fef2f2; border-color: #fecaca; }

  table.stacked td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 9px 0;
    text-align: right;
  }
  table.stacked td:last-child { border-bottom: none; }

  table.stacked td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--gray);
    font-size: 12px;
    letter-spacing: .02em;
    text-align: left;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* 内容が空のセルは行ごと隠す（備考なし・操作なしの場合） */
  table.stacked td:empty { display: none; }

  /* 氏名は見出しとして目立たせる */
  table.stacked td.primary-cell {
    font-size: 17px;
    font-weight: 700;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 10px;
  }

  /* 期間は文字数が多いため、見出しの下に折り返す */
  table.stacked td.period-cell {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
  }

  /* 朝・昼・夕は3つ横並びにして1行に収める */
  table.stacked td.meal-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 32%;
    text-align: center;
    border-bottom: none;
    padding: 10px 0 2px;
  }
  table.stacked td.meal-cell::before { text-align: center; }

  /* 操作ボタンは押しやすい大きさにする */
  table.stacked td.action-cell {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
  }
  table.stacked td.action-cell::before { content: none; }
  table.stacked td.action-cell .btn-sm { padding: 9px 16px; font-size: 14px; }

}

/* ---------- 小型スマートフォン ---------- */
@media screen and (max-width: 400px) {
  header h1 { font-size: 15px; }
  .menu-toggle { padding: 9px 12px; font-size: 14px; }
  .card { padding: 12px 11px; }
  .card h2 { font-size: 15px; }
  #stapleTable th, #sideTable th { font-size: 11px; }
  #stapleTable th, #stapleTable td,
  #sideTable th, #sideTable td { padding: 8px 2px; }
  .big-num { font-size: 22px; }   /* 要件 5.2 の下限は維持する */
}