/* style.css — 最小限の共通スタイル。設計書§1.2「素PHP + 最小JS」方針に合わせフレームワーク不使用。 */

:root {
  --color-bg: #f5f6f8;
  --color-fg: #1f2937;
  --color-border: #d1d5db;
  --color-primary: #2563eb;
  --color-primary-fg: #ffffff;
  --color-error: #b91c1c;
  --color-error-bg: #fee2e2;
  --color-success: #15803d;
  --color-success-bg: #dcfce7;
  --color-muted: #6b7280;
  font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  line-height: 1.6;
}

a { color: var(--color-primary); }

.app-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.app-header__brand { font-weight: bold; }

.app-nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; align-items: center; }
.app-nav a { padding: 6px 10px; border-radius: 4px; text-decoration: none; color: var(--color-fg); }
.app-nav a.is-active, .app-nav a:hover { background: var(--color-primary); color: var(--color-primary-fg); }

/* ナビのグループ(details/summary)。JS不要で開閉でき、スマホでもタップで動く。 */
.nav-group { position: relative; }
.nav-group > summary {
  list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 4px;
  white-space: nowrap; user-select: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: " ▾"; color: var(--color-muted); }
.nav-group > summary:hover { background: var(--color-primary); color: var(--color-primary-fg); }
.nav-group.is-active > summary { background: var(--color-primary); color: var(--color-primary-fg); }
.nav-group[open] > summary { background: var(--color-primary); color: var(--color-primary-fg); }
.nav-group__menu {
  position: absolute; z-index: 30; top: 100%; left: 0; min-width: 180px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--color-bg, #fff); border: 1px solid var(--color-border, #ccc);
  border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.nav-group__menu a { white-space: nowrap; }

/* 画面が狭いときは重ねず、その場で展開する(ヘッダの外へはみ出さないため) */
@media (max-width: 700px) {
  .nav-group__menu { position: static; box-shadow: none; border: none; padding: 4px 0 4px 12px; }
}

.app-header__user { display: flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: 0.9em; }

.app-main { max-width: 1100px; margin: 0 auto; padding: 20px; }

.app-footer { text-align: center; color: var(--color-muted); font-size: 0.85em; padding: 20px; }

.card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.muted { color: var(--color-muted); }

/* 取込結果は複数行で返す(§E-19/§E-102/§E-104)。改行を保たないと1行に潰れて読めない */
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px;
         white-space: pre-wrap; word-break: break-word; }
.flash--error { background: var(--color-error-bg); color: var(--color-error); }
.flash--success { background: var(--color-success-bg); color: var(--color-success); }
.flash--info { background: #dbeafe; color: #1e40af; }

.link-button {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: underline;
}

.inline-form { display: inline; }

.sub-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sub-nav a { padding: 4px 10px; border-radius: 4px; text-decoration: none; background: #eef1f5; color: var(--color-fg); font-size: 0.9em; }
.sub-nav a.is-active { background: var(--color-primary); color: var(--color-primary-fg); }

.badge-error { color: var(--color-error); font-weight: bold; }
.badge-ok { color: var(--color-success); font-weight: bold; }

/* row-warning: 差額あり等、行単位で注意を促したい表(設計書§E-21 billing/payments.php等)で使用 */
tr.row-warning { background: var(--color-error-bg); }

table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid var(--color-border); padding: 6px 10px; text-align: left; }
th { background: #f0f1f3; }

form label { display: block; margin-bottom: 12px; }
input, select, textarea, button {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
button[type="submit"], button.primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border: none;
  cursor: pointer;
  padding: 8px 16px;
}

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-box {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 32px;
  width: 320px;
}
.login-box input { width: 100%; margin-top: 4px; }
.login-box button { width: 100%; margin-top: 8px; }

/* report-card — my/shifts.php(ヘルパー本人のスマホ実績報告)向け。設計書§E-1機能2。
   375px幅で崩れないよう、大きなタップ領域・全幅の入力欄にする。 */
.report-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 14px; margin-bottom: 14px; background: #fff; }
.report-card__header { font-weight: bold; margin-bottom: 4px; }
.report-card__meta { color: var(--color-muted); font-size: 0.9em; margin-bottom: 10px; }
.report-card label { display: block; margin-bottom: 10px; font-size: 0.95em; }
.report-card input[type="time"],
.report-card input[type="number"],
.report-card textarea {
  width: 100%;
  font-size: 1.05em;
  padding: 10px;
  margin-top: 4px;
  min-height: 44px;
  box-sizing: border-box;
}
.report-card textarea { min-height: 70px; }
.report-card button[type="submit"] {
  width: 100%;
  padding: 14px;
  font-size: 1.05em;
  min-height: 48px;
}
.status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.85em; }
.status-pill--plan { background: #e5e7eb; color: var(--color-fg); }
.status-pill--reported { background: #dbeafe; color: #1e40af; }
.status-pill--done { background: var(--color-success-bg); color: var(--color-success); }
.status-pill--cancelled { background: var(--color-error-bg); color: var(--color-error); }

@media (max-width: 480px) {
  .app-main { padding: 10px; }
  table { font-size: 0.9em; }
}

/* ═══════════════════════════════════════════════════════════════
   E-11: 介助記録チェックリスト(実績報告のレ点化)。設計書§E-11.2。
   ═══════════════════════════════════════════════════════════════ */

/* 【介助指示】(shifts.renraku_note)。本家の赤字表示に相当するピンク枠。 */
.kaijo-notice {
  background: #fdf2f8;
  border: 1px solid #f9a8d4;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.kaijo-notice__label { font-weight: bold; color: #9d174d; margin-bottom: 4px; }
.kaijo-notice__body { color: #831843; white-space: pre-wrap; }

.kaijo-checklist {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #fafafa;
}
.kaijo-checklist__title { font-weight: bold; margin-bottom: 8px; }

.kaijo-category { margin-bottom: 10px; }
.kaijo-category__label { font-weight: bold; color: var(--color-primary); font-size: 0.9em; margin-bottom: 4px; }

/* スマホで押しやすいよう、ラベル全体をタップ領域にする(設計書§E-11.2)。 */
.kaijo-item-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 6px;
  margin-bottom: 0;
  min-height: 44px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.kaijo-item-row:last-child { border-bottom: none; }
.kaijo-item-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
}
/* §E-71: チェックの部分だけをタップ領域にする。
   数値の欄まで label の中に入れると、金額を打とうとしてチェックが外れる。 */
.kaijo-item-row__check {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 40%;
  cursor: pointer;
}

/* §E-71: 数値の欄は**最初から出しておく**。
   以前はチェックを付けるまで隠れており、血圧を入れるのに
   チェック→欄が出る→打つ、と2手かかっていた。 */
.kaijo-value {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kaijo-item-row .kaijo-value-input {
  width: 96px;
  padding: 6px 8px;
  min-height: 40px;      /* 指で押せる高さ */
  font-size: 1.05em;
  text-align: right;
}
.kaijo-value__sep { color: var(--color-muted); font-weight: bold; }
.kaijo-value__unit { color: var(--color-muted); font-size: 0.92em; }
/* 打ち間違いの見張り。**止めない**ので、色は赤ではなく注意の色にする
   (本当に血圧が200の日にこそ記録が要る。赤で止められたと思わせない) */
.kaijo-value__warn {
  flex: 1 1 100%;
  margin-top: 2px;
  padding: 4px 8px;
  border-left: 3px solid #d97706;
  background: #fffbeb;
  color: #7c2d12;
  font-size: 0.85em;
}

/* §E-73: プレビューはJSが動いているときだけ出す。
   動いていないと文が更新されず、「チェックが反映されていない」と読めてしまう
   (実際には保存される)。 */
.kaijo-preview { display: none; }
.kaijo-report-on .kaijo-preview { display: block; }
.kaijo-preview {
  margin-top: 10px;
  padding: 8px 10px;
  background: #eef1f5;
  border-radius: 6px;
  font-size: 0.9em;
  white-space: pre-wrap;
  word-break: break-word;
}

.kaijo-history { margin-top: 12px; font-size: 0.9em; }
.kaijo-history__item { padding: 8px 0; border-top: 1px solid #eee; }
.kaijo-history__meta { color: var(--color-muted); font-size: 0.85em; margin-bottom: 2px; }
/* §E-61: 日付だけでは、読む人が今日から引き算しない。「◯日前」を並べて出す。 */
.kaijo-history__age { color: #475569; font-weight: bold; }
/* 介助の報告か、事務連絡(備考)かを見分けられるようにする。
   まぜて出していたため、事務連絡が介助の報告として読まれていた。 */
.kaijo-history__kind {
  display: inline-block; margin-left: 4px; padding: 0 6px;
  border-radius: 3px; background: #f1f5f9; color: #475569; font-size: 0.92em;
}

.attention-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-error-bg);
  color: var(--color-error);
  font-weight: bold;
}
.attention-toggle--on { background: var(--color-error); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   shifts/board.php — シフトボード(ガントチャート)。設計書§E-3。
   ═══════════════════════════════════════════════════════════════ */

.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin: 0 3px 0 10px;
}

.board-wrap { overflow-x: auto; }

/* ★min-width は max-content にすること(0にしてはいけない)。
   §フェーズ6で board-wrap を「左右の日付ドロップ欄と並ぶflexの子」に変えた。
   flexの子は既定で縮むので、0だと .board が使える幅まで縮み、
   ***罫線と時間帯の色分けだけが途中で終わり、棒(絶対位置)はその先まで描かれる***
   という壊れ方をした（事業主の指摘「枠がないね」）。
   max-content にすると、行の中身(名前140px + 時間軸)の幅を保ち、
   board-wrap の overflow-x が正しく横スクロールになる。 */
.board { display: flex; flex-direction: column; min-width: max-content; }

.board-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
}
.board-row--header { border-bottom: 2px solid var(--color-fg); font-weight: bold; }
.board-row--unassigned .board-row__name { color: var(--color-error); font-weight: bold; }

.board-row__name {
  flex: 0 0 140px;
  width: 140px;
  padding: 8px 10px;
  background: #fff;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* §E-63.2: 時間を読み取りやすくする。事業主の指摘「時間もちょっと分かりづらい」。
   以前は1時間ごとの細い線が1本あるだけで、棒がどの時間帯なのかを目で追えなかった。
   ・1時間ごとの線を濃くする(72px = 60分 × 1.2px/分)
   ・30分ごとに薄い線を足す(「◯時半」が読める)
   ・1時間おきに帯の色を変える(遠くの行でも縦位置がずれない) */
.board-row__timeline {
  position: relative;
  min-height: 46px;
  /* ★縮ませない。この要素は width:NNNpx を画面側(board.php)で指定しているが、
     flexの子は既定で縮むため、指定した幅が守られず途中で切れる(上の .board の注意書き参照)。 */
  flex: 0 0 auto;
  background-image:
    repeating-linear-gradient(to right,
      rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 72px),
    repeating-linear-gradient(to right,
      transparent 0, transparent 36px, rgba(0, 0, 0, 0.05) 36px, rgba(0, 0, 0, 0.05) 37px, transparent 37px, transparent 72px),
    repeating-linear-gradient(to right,
      rgba(37, 99, 235, 0.035) 0, rgba(37, 99, 235, 0.035) 72px, transparent 72px, transparent 144px);
}

/* 時刻の見出しは、横スクロールしても上に残す */
.board-row--header { position: sticky; top: 0; z-index: 3; background: #fff; }
.board-row--header .board-row__timeline { min-height: 26px; background-image: none; }

.board-hour {
  position: absolute;
  top: 2px;
  font-size: 0.82em;
  font-weight: bold;
  color: #334155;
  white-space: nowrap;
  padding-left: 3px;
  border-left: 2px solid #94a3b8;
  line-height: 1.4;
}

/* 今の時刻。今日を見ているときだけ出す(board.php 側で出し分け) */
.board-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dc2626;
  z-index: 1;
  pointer-events: none;
}
.board-now::after {
  content: "今";
  position: absolute;
  top: -2px;
  left: -9px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68em;
  padding: 0 3px;
  border-radius: 3px;
}

.board-bar {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.8em;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.board-bar--nolink { cursor: default; }
.board-bar__label { pointer-events: none; }

.board-bar--plan, .legend-swatch.board-bar--plan { background: #2563eb; }        /* 青系 */
.board-bar--reported, .legend-swatch.board-bar--reported { background: #d97706; } /* 黄系(視認性のため濃色) */
.board-bar--done, .legend-swatch.board-bar--done { background: #15803d; }        /* 緑系 */
.board-bar--office, .legend-swatch.board-bar--office { background: #6b7280; }    /* グレー(事務所) */
.board-bar--unassigned, .legend-swatch.board-bar--unassigned { background: #b91c1c; } /* 赤(未定) */
.board-bar--unassigned-exempt, .legend-swatch.board-bar--unassigned-exempt { background: #9ca3af; } /* 未定だがチェック免除利用者は非強調 */

/* 768px未満: 横スクロールのタイムラインをやめ、縦に時間順で並ぶカード表示に切替(設計書§E-3)。 */
@media (max-width: 767px) {
  /* ★カード表示では横スクロールしないので、max-content を打ち消す。
     打ち消さないと、画面より横に広い板が出来てしまう。 */
  .board { min-width: 0; }
  .board-row { display: block; border-bottom: 2px solid var(--color-border); padding-bottom: 4px; margin-bottom: 4px; }
  .board-row--header { display: none; } /* 時間軸の目盛りヘッダはカード表示では不要 */
  .board-row__name { position: static; width: auto; border-right: none; font-weight: bold; }
  .board-row__timeline {
    position: static;
    flex: 0 1 auto;
    width: auto !important;
    min-height: 0;
    background-image: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
  }
  .board-bar {
    position: static;
    display: block;
    width: 100% !important;
    left: auto !important;
    top: auto; bottom: auto;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.95em;
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════════
   shifts/users_patterns.php — 週間パターン ビジュアルエディタ。設計書§E-3。
   ═══════════════════════════════════════════════════════════════ */

.pattern-board-wrap { overflow-x: auto; }

.pattern-board {
  display: flex;
  min-width: 640px;
}

.pattern-board__hourcol {
  flex: 0 0 52px;
  position: relative;
}
.pattern-board__hourcol-header { height: 28px; }
.pattern-board__hour-label {
  position: absolute;
  font-size: 0.78em;
  color: var(--color-muted);
  transform: translateY(-50%);
}

.pattern-board__daycol {
  flex: 1 1 0;
  min-width: 90px;
  position: relative;
  border-left: 1px solid var(--color-border);
  background-image: repeating-linear-gradient(to bottom, #f0f1f3 0, #f0f1f3 1px, transparent 1px, transparent 60px);
}
.pattern-board__daycol-header {
  height: 28px;
  text-align: center;
  font-weight: bold;
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-fg);
  background: #f0f1f3;
}

.pattern-block {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 5px;
  padding: 3px 5px;
  font-size: 0.78em;
  color: #fff;
  background: #2563eb;
  cursor: grab;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  user-select: none;
  touch-action: none;
}
.pattern-block:active { cursor: grabbing; }
.pattern-block.is-dragging { opacity: 0.6; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.pattern-block.is-inactive { opacity: 0.4; }
.pattern-block__title { font-weight: bold; white-space: nowrap; }
.pattern-block__time, .pattern-block__helper { white-space: nowrap; opacity: 0.9; }
.pattern-block__delete {
  position: absolute;
  top: 1px;
  right: 3px;
  background: rgba(0,0,0,0.25);
  border: none;
  color: #fff;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}
.pattern-block__resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  cursor: ns-resize;
  background: rgba(0, 0, 0, 0.18);
}
.pattern-block__resize-handle:hover { background: rgba(0, 0, 0, 0.35); }

.pattern-board__hint { font-size: 0.85em; color: var(--color-muted); }

@media (max-width: 767px) {
  .pattern-board-editor { display: none; } /* スマホは閲覧のみ(ドラッグ編集はPC前提)。既存フォームCRUDのみ操作可 */
  .pattern-board-mobile-note { display: block; }
}
@media (min-width: 768px) {
  .pattern-board-mobile-note { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   E-16b: 利用者本人アカウント(my/schedule.php)の月カレンダー。
   ═══════════════════════════════════════════════════════════════ */

.sched-nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.sched-nav label { margin-bottom: 0; }
.sched-calendar-wrap { overflow-x: auto; }
.sched-calendar { table-layout: fixed; min-width: 560px; }
.sched-calendar th { text-align: center; background: #f0f1f3; }
.sched-day { vertical-align: top; height: 70px; padding: 4px; font-size: 0.82em; }
.sched-day--empty { background: #fafafa; }
.sched-day__num { font-weight: bold; margin-bottom: 2px; }
.sched-day__item { background: #eef2ff; border-radius: 4px; padding: 2px 4px; margin-bottom: 2px; line-height: 1.3; }
.sched-day__time { font-weight: bold; }
.sched-day__service { color: var(--color-muted); }
/* 担当ヘルパー名。家族はカレンダーだけを見るため「誰が来るか」を日セルに出す(my/schedule.php) */
.sched-day__helper { color: var(--color-muted); }

@media (max-width: 480px) {
  .sched-calendar { min-width: 480px; font-size: 0.75em; }
  .sched-day { height: 56px; padding: 2px; }
}

/* ═══════════════════════════════════════════════════════════════
   E-18: 利用者別 連絡ノート(トークルーム)。設計書§E-18.2。
   LINEグループ運用の置き換えのため、スマホでの見やすさ・タップしやすさを最優先する。
   ═══════════════════════════════════════════════════════════════ */

.chat-room-list { display: flex; flex-direction: column; gap: 2px; }
.chat-room-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  min-height: 44px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-fg);
}
.chat-room-row--unread { background: #eef2ff; border-color: #c7d2fe; }
.chat-room-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.chat-room-row__name { font-weight: bold; display: flex; align-items: center; gap: 6px; }
.chat-room-row__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-error); flex: 0 0 auto; display: inline-block; }
.chat-room-row__excerpt {
  color: var(--color-muted);
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-room-row__time { color: var(--color-muted); font-size: 0.82em; white-space: nowrap; flex: 0 0 auto; }

.chat-load-more { text-align: center; }

.chat-timeline { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.chat-date-sep { text-align: center; margin: 12px 0 6px; }
.chat-date-sep span {
  display: inline-block;
  background: #e5e7eb;
  color: var(--color-muted);
  font-size: 0.8em;
  padding: 2px 12px;
  border-radius: 999px;
}
.chat-post {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.chat-post__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.chat-post__name { font-weight: bold; }
.chat-post__time { color: var(--color-muted); font-size: 0.82em; }
.chat-post__badge {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.75em;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: bold;
}
.chat-post__body { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
/* 1画面に節が多く縦移動が長い画面のタブ(assets/app.js の data-tabs)。
   JSが動かなければタブ帯が出ず、全節が縦に並ぶだけ(機能は失わない)。 */
.tabbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: 2px solid var(--color-border, #d8dade); }
.tabbar__btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 1em;
  font-weight: bold;
  color: var(--color-muted);
  cursor: pointer;
  min-height: 44px;   /* スマホで指で押せる大きさ */
}
.tabbar__btn--on { color: var(--color-primary); border-bottom-color: var(--color-primary); }
/* 件数の多い一覧は画面内でスクロールさせる(ページ全体が伸びると目的の場所へ戻れなくなる) */
.table-scroll { max-height: 60vh; overflow: auto; }
.table-scroll thead th { position: sticky; top: 0; background: #f0f1f3; z-index: 1; }

/* §E-28 署名のお願い。ご高齢のご家族がスマホで押すため、指で押しやすい大きさにする */
.chat-post__sign { margin-top: 8px; }
.chat-post__sign-button {
  display: inline-block;
  background: var(--color-primary, #2563eb);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 6px;
  min-height: 44px;
  line-height: 24px;
}
.chat-post__sign-done { color: #166534; font-weight: bold; }
.chat-post__attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chat-attachment--image img { display: block; max-width: 220px; max-height: 220px; width: auto; height: auto; border-radius: 6px; }
.chat-attachment--video { display: block; max-width: 280px; max-height: 280px; }
.chat-attachment--file {
  display: inline-block;
  padding: 8px 12px;
  background: #f0f1f3;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-fg);
  font-size: 0.9em;
}
.chat-post__delete { margin-top: 6px; }
.chat-post__delete button { font-size: 0.82em; color: var(--color-error); }

.chat-post-form { position: sticky; bottom: 0; }
.chat-post-form textarea { width: 100%; min-height: 70px; font-size: 1em; }
.chat-post-form input[type="file"] { width: 100%; }
.chat-post-form__staff-only { display: flex; align-items: center; gap: 6px; font-size: 0.95em; }
.chat-post-form button[type="submit"] { width: 100%; padding: 12px; font-size: 1.05em; min-height: 48px; }

@media (max-width: 480px) {
  .chat-attachment--image img,
  .chat-attachment--video { max-width: 100%; }
}

/* §E-18.7 音声入力ボタン(app.jsがdata-voice-inputのtextarea直後に挿入) */
.voice-input-btn {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 8px 14px;
  border: 1px solid #2b6cb0;
  border-radius: 999px;
  background: #fff;
  color: #2b6cb0;
  font-size: 14px;
  cursor: pointer;
}
.voice-input-btn--active {
  background: #c53030;
  border-color: #c53030;
  color: #fff;
  animation: voice-pulse 1.2s infinite;
}
@keyframes voice-pulse {
  50% { opacity: 0.6; }
}
.chat-voice-note { font-size: 12px; margin: 2px 0 8px; }

/* §E-33 業務の健康診断。重大さを色で分ける。全部を赤くすると誰も見なくなる */
.health-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:0.82em; font-weight:bold; margin-right:6px; }
.health-badge--danger { background:#fee2e2; color:#991b1b; }
.health-badge--warn   { background:#fef3c7; color:#92400e; }
.health-badge--info   { background:#e0e7ff; color:#3730a3; }
.health-item { border-left: 5px solid transparent; }
.health-item--danger { border-left-color:#dc2626; }
.health-item--warn   { border-left-color:#f59e0b; }
.health-item--info   { border-left-color:#6366f1; }
.health-item h2 { font-size: 1.05em; }
.health-item ul { margin: 6px 0 0; padding-left: 20px; }

/* §E-60: 指摘の1行から、そのシフトへ直接飛べるようにする。
   事業主はスマホで健康診断を見る。羅列された行を読んで、
   別の画面で目当てのシフトを探し直すのは実際には行われない。
   指先で押せる大きさ(44px相当)を確保する。 */
.health-item li { margin-bottom: 4px; line-height: 1.6; }
.health-fix-link {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 7px 12px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  color: #3730a3;
  font-size: 0.88em;
  text-decoration: none;
  white-space: nowrap;
}
.health-fix-link:hover { background: #e0e7ff; }

@media (max-width: 600px) {
  /* スマホでは箇条書きの点で幅を取られる。行を広く使う */
  .health-item ul { padding-left: 0; list-style: none; }
  .health-item li { padding: 8px 0; border-bottom: 1px solid #eee; }
  .health-fix-link { display: block; margin: 6px 0 0; text-align: center; }
}

/* §E-60: 例外の操作を、いちばん下にたたんで置く。
   ふだん使う操作と同じ見た目・同じ場所にあると、
   中身を見ないまま押されてしまう。閉じた状態で置き、
   開かないと押せないようにするのが目的。 */
.bulk-exception {
  margin-top: 20px;
  padding: 10px 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
}
.bulk-exception > summary {
  cursor: pointer;
  color: #64748b;
  font-size: 0.92em;
}
.bulk-exception[open] > summary { margin-bottom: 8px; font-weight: bold; }
.bulk-exception p { font-size: 0.9em; line-height: 1.7; }

/* §E-62: 「申請承認」は人が待っているもの。たたんだメニューの中に隠さない。
   待ちが1件でもあるときだけ目立たせる。0件のときは普通のリンクと同じ見た目にする
   (常に目立たせていると、そのうち見なくなる)。 */
.app-nav a.nav-waiting {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #9f1239;
  font-weight: bold;
}
.nav-badge {
  display: inline-block;
  margin-left: 5px;
  min-width: 1.5em;
  padding: 0 5px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.78em;
  line-height: 1.5;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   §E-63: シフトボードのドラッグ移動
   ═══════════════════════════════════════════════════════════════ */

/* 掴めるものは、掴めると分かる形にする */
.board-bar[draggable="true"] { cursor: grab; }
.board-bar[draggable="true"]:active { cursor: grabbing; }
.board-bar--dragging { opacity: .35; }

/* ドラッグ中は「落とせる行」を先に見せる。
   落としてから断られるより、落とす前に分かるほうがよい。 */
body.board-dragging .board-row--drop { outline: 1px dashed #93c5fd; outline-offset: -2px; }
body.board-dragging .board-row--drop .board-row__name { background: #f8fafc; }

/* いま狙っている行。行全体をはっきり変える。
   §E-63.1 事業主の指摘「どのあたりにドラッグしたかが分かりづらい」 */
.board-row--dragover { background: #dbeafe; outline: 3px solid #2563eb; outline-offset: -3px; }
.board-row--dragover .board-row__name {
  background: #2563eb; color: #fff; font-weight: bold;
}

/* カーソルに付いてくる案内。横に長いボードでは、
   行の色だけ変えても視線の先が遠くて気づけない。指の先に文字を出す。 */
.board-drop-ghost {
  position: fixed;
  z-index: 100;
  display: none;
  padding: 6px 12px;
  border-radius: 6px;
  background: #1d4ed8;
  color: #fff;
  font-size: 0.92em;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.board-drop-ghost--ng { background: #6b7280; }

/* §E-63.3: 移すと時間が重なる行。落とす前に「ここへは落とせない」と分かるようにする。
   事業主の指示「シフトボードで動かした際、重なるのはNG」。
   表示上の重なり(2人介助・同行)はそのまま並べて出す。禁じるのは
   **1人のヘルパーが同時刻に2か所へ行く**ことだけ。 */
.board-row--dragover-ng {
  background: #fee2e2;
  outline: 3px solid #dc2626;
  outline-offset: -3px;
}
.board-row--dragover-ng .board-row__name {
  background: #dc2626; color: #fff; font-weight: bold;
}

/* ───────────────────────────────────────────────────────────
   §E-70: 介助内容の並べ替え(settings/kaijo_items.php)
   事業主の要望「介助内容は、順番を入れ替えられるように、
   マウスのドラッグアンドドロップで入れ替えるようにできませんか？」
   ─────────────────────────────────────────────────────────── */

/* ドラッグ中にカーソルのそばへ出す札。§E-63.1で「どこへ落とすか分かりづらい」と
   言われたため、行の色だけに頼らず、指の先で読めるところに出す。
   .board-drop-ghost と同じ見た目を使い回す。 */
.drag-ghost {
  position: fixed;
  z-index: 100;
  display: none;
  padding: 6px 12px;
  border-radius: 6px;
  background: #1d4ed8;
  color: #fff;
  font-size: 0.92em;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.drag-ghost--ng { background: #6b7280; }

/* 保存されていないことを、画面の上に貼り付けて言い続ける。
   並べ替えただけで保存した気になると、戻したときに元へ戻る。 */
.kaijo-sort-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 2px solid #d97706;
  border-radius: 6px;
  background: #fef3c7;
  color: #7c2d12;
}

.kaijo-sort-table { width: 100%; }
.kaijo-sort-table tbody tr { background: #fff; }

.kaijo-sort__handle {
  white-space: nowrap;
  vertical-align: middle;
}
.kaijo-sort__grip {
  color: var(--color-muted);
  font-size: 1.2em;
  letter-spacing: -1px;
}
/* JSが動いているときだけ「掴める」と見せる。動いていないのに掴める形に
   見えると、掴もうとして動かず、壊れていると思われる。
   掴めるのは左端の取っ手だけ(行ごと掴めると、編集フォームの文字を選べなくなる)。 */
.kaijo-sort-on .kaijo-sort__handle { cursor: grab; }
.kaijo-sort-on .kaijo-sort__handle:active { cursor: grabbing; }
.kaijo-sort__grip { display: none; }
.kaijo-sort-on .kaijo-sort__grip { display: inline; }
/* 掴み方の案内も、JSが動いているときだけ出す。
   動いていないのに「掴んでください」と書いてあると、できないことを促すことになる
   (JSが無いときは <noscript> が数値での並べ替えを案内する)。 */
.kaijo-sort-help { display: none; }
.kaijo-sort-on .kaijo-sort-help { display: block; }

.kaijo-sort__pos {
  display: inline-block;
  min-width: 2.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}
.kaijo-sort__moves { display: none; margin-left: 6px; }
.kaijo-sort-on .kaijo-sort__moves { display: inline-flex; gap: 2px; }
/* 指で押せる大きさにする。スマホではこちらが本命 */
.kaijo-sort__moves button {
  min-width: 40px;
  min-height: 36px;
  padding: 0;
  line-height: 1;
}
.kaijo-sort__moves button[disabled] { opacity: 0.3; }

.kaijo-sort__row--dragging { opacity: 0.4; }
/* 落ちる位置に線を引く */
.kaijo-sort__row--over-top td { box-shadow: inset 0 3px 0 0 #1d4ed8; }
.kaijo-sort__row--over-bottom td { box-shadow: inset 0 -3px 0 0 #1d4ed8; }
/* 動いた行を一瞬光らせる。▲▼で押したときに何が動いたかを分かるように */
.kaijo-sort__row--moved td { animation: kaijo-sort-flash 0.7s ease-out; }
@keyframes kaijo-sort-flash {
  from { background: #bfdbfe; }
  to { background: transparent; }
}

/* §E-75: 老計第10号。基本サービスだけにレ点が付いたときの一言。
   ★止めない。書き漏らしに気づいてもらうためのものなので、
   赤(エラー)ではなく注意の色にする。 */
.kaijo-prep-warn {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 4px solid #d97706;
  background: #fffbeb;
  color: #7c2d12;
  font-size: 0.9em;
}

/* §E-75: 区分が老計第10号のどこに当たるかの一覧(設定画面) */
.rokei10-legend { margin: 8px 0 12px; }
.rokei10-legend dt { font-weight: bold; margin-top: 8px; }
.rokei10-legend dd { margin: 2px 0 0 1em; color: var(--color-muted); }

/* 確認ダイアログ(§E-108)。window.confirm()が使えない環境があるので画面の中に出す */
dialog.app-confirm {
  border: none; border-radius: 10px; padding: 0; max-width: 32em; width: calc(100% - 32px);
  box-shadow: 0 12px 32px rgba(0,0,0,.28); color: inherit; background: #fff;
}
dialog.app-confirm::backdrop { background: rgba(0,0,0,.45); }
.app-confirm__body {
  padding: 20px 22px 8px; white-space: pre-wrap; word-break: break-word; line-height: 1.7;
}
.app-confirm__actions {
  display: flex; justify-content: flex-end; gap: 12px; align-items: center;
  padding: 12px 22px 20px;
}
.app-confirm__actions .primary { min-width: 6em; }

/* ═══════════════════════════════════════════════════════════════
   §フェーズ6(actual-date-split): ボードの時刻ドラッグ・日付ドラッグ・コピー。
   ═══════════════════════════════════════════════════════════════ */

/* 日別ビューの左右にある「前日/翌日」ドロップゾーン。基本は控えめに、
   ドラッグ中だけ目立たせる(常に目立つと邪魔なだけで、ドラッグ以外では使わないため)。 */
.board-date-drop {
  flex: 0 0 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8em;
  color: var(--color-muted);
  background: #f8fafc;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  margin: 0 6px;
  padding: 6px;
  line-height: 1.5;
}
body.board-dragging .board-date-drop { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff; }
.board-date-drop--dragover { background: #dbeafe; outline: 3px solid #2563eb; outline-offset: -3px; color: #1d4ed8; font-weight: bold; }
.board-date-drop--dragover-ng { background: #fee2e2; outline: 3px solid #dc2626; outline-offset: -3px; color: #991b1b; font-weight: bold; }

/* いま操作した行を目立たせる(§E-108)。押した行まで戻ったとき、どれを触ったか分かるように */
tr.row-just-done > td { background: #fef9c3; }
tr.row-just-done > td:first-child { box-shadow: inset 4px 0 0 #eab308; }
/* 行に飛んだとき、ヘッダの下に隠れないよう少し余白を取る */
tbody tr[id^="claim-"] { scroll-margin-top: 80px; }