@charset "UTF-8";

/* ツヅリバ 共通スタイル
   前提: 夜勤スタッフがスマホで片手操作する。タップ領域は最低44px。
   配色の方針: 黒は使わない。文字色も濃い緑グレーにして、紙のようにやわらかく見せる。
   福祉の現場に置いても硬く見えないよう、クリーム地 + 葉の緑 + 杏色でまとめる。 */

:root {
  /* 面 —— 温かいクリーム */
  --paper:      #FDFBF6;
  --surface:    #FFFFFF;
  --surface-2:  #F5F0E7;
  --line:       #E7E0D3;
  --line-soft:  #F1ECE3;

  /* 文字 —— 黒ではなく、深い緑グレー */
  --ink:        #3E4A44;
  --ink-2:      #66726B;
  --ink-3:      #98A29B;

  /* アクセント —— やわらかい葉の緑 */
  --accent:     #5F9E7D;
  --accent-ink: #427A5E;
  --accent-bg:  #E6F1EA;

  /* 状態色 —— どれも彩度を落として穏やかに */
  --ok:         #4F8E6D;
  --ok-bg:      #E6F1EA;
  --warn:       #B57A3C;
  --warn-bg:    #FAEEDF;
  --alert:      #C0736F;
  --alert-bg:   #FAE9E8;
  --info:       #5E8FB0;
  --info-bg:    #E7F0F6;

  --radius:     12px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(62,74,68,.05), 0 2px 10px rgba(62,74,68,.04);

  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
          "Yu Gothic UI", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); }

/* ---------- ヘッダー ---------- */
.hd {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.hd-logo {
  font-weight: 700; font-size: 17px; letter-spacing: .05em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.hd-logo span { color: var(--accent); }
.hd-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.hd-nav a {
  padding: 7px 11px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-2); text-decoration: none;
}
.hd-nav a:hover { background: var(--surface-2); color: var(--ink); }
.hd-nav a.on { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.hd-user { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.hd-nav a.hd-logout { font-size: 12px; color: var(--ink-3); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 18px 16px 64px; }

/* ---------- 見出し ---------- */
.page-head {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.page-head h1 {
  margin: 0; font-size: 21px; font-weight: 700;
  letter-spacing: .01em; text-wrap: balance;
}
.page-sub { font-size: 13px; color: var(--ink-3); }

.crumb { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.crumb a { color: var(--ink-3); }

/* ---------- ツールバー ---------- */
.bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bar label { font-size: 12px; color: var(--ink-3); }

select, input[type="text"], input[type="date"], input[type="time"],
input[type="number"], input[type="email"], input[type="password"],
input[type="tel"], textarea {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 11px; min-height: 42px;
}
textarea { min-height: 84px; line-height: 1.75; resize: vertical; width: 100%; }
select:focus-visible, input:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 9px 16px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--surface-2); }
.btn-primary {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-lg { min-height: 50px; font-size: 15px; padding: 12px 22px; }
.btn-sm { min-height: 34px; padding: 5px 13px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 入居者カード ---------- */
.cards {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* 未記録は左に色帯 = 色だけに頼らず形でも状態がわかる */
.card.todo { border-left: 4px solid var(--warn); }
.card.done { border-left: 4px solid var(--ok); }

.card-top { display: flex; align-items: flex-start; gap: 10px; }
.card-name {
  font-size: 17px; font-weight: 700; line-height: 1.35;
  text-decoration: none; color: var(--ink);
}
.card-name:hover { color: var(--accent-ink); }
.card-meta { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.card-actions { display: flex; gap: 8px; margin-top: auto; }
.card-actions .btn { flex: 1; }

.summary {
  font-size: 13px; color: var(--ink-2);
  padding: 8px 10px; background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.summary b { color: var(--ink); font-weight: 600; }

/* ---------- バッジ ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge-ok    { background: var(--ok-bg);    color: var(--ok); }
.badge-warn  { background: var(--warn-bg);  color: var(--warn); }
.badge-alert { background: var(--alert-bg); color: var(--alert); }
.badge-info  { background: var(--info-bg);  color: var(--info); }
.badge-mute  { background: var(--surface-2);color: var(--ink-3); }

/* ---------- 記録フォーム ---------- */
.form-card {
  padding: 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.form-card > h2 {
  margin: 0 0 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase;
}
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}

/* セグメント選択（在居/入院/帰宅…）—— 大きく押しやすく */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg label {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 8px 6px;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; text-align: center;
}
.seg label:hover { background: var(--surface-2); }
.seg input:checked + label {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* トグル */
.toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.toggle { display: block; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle span {
  display: flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 8px 13px;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
}
.toggle span::before {
  content: ""; flex: none; width: 20px; height: 20px;
  border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface);
}
.toggle input:checked + span {
  color: var(--accent-ink); background: var(--accent-bg); border-color: var(--accent);
}
.toggle input:checked + span::before {
  background: var(--accent) no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  border-color: var(--accent);
}
.toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 体調プリセット */
.presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.preset {
  min-height: 38px; padding: 7px 14px;
  font: inherit; font-size: 14px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer;
}
.preset:hover { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent); }

/* 保存バー */
.savebar {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.savebar .btn { flex: 1; }

/* ---------- 一覧テーブル ---------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td { padding: 10px 12px; text-align: left; white-space: nowrap; }
table.t thead th {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-3); background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
table.t tbody tr + tr td { border-top: 1px solid var(--line-soft); }
table.t td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t td.date { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---------- 通知 ---------- */
.note {
  padding: 11px 15px; margin-bottom: 14px;
  border-radius: var(--radius); font-size: 14px;
}
.note-ok   { background: var(--ok-bg);   color: var(--ok); }
.note-warn { background: var(--warn-bg); color: var(--warn); }
.note-err  { background: var(--alert-bg);color: var(--alert); }

.empty {
  padding: 40px 20px; text-align: center;
  color: var(--ink-3); font-size: 14px;
}

@media (max-width: 640px) {
  .wrap { padding: 14px 12px 92px; }
  .page-head h1 { font-size: 19px; }
  .cards { grid-template-columns: 1fr; }

  /* ナビは折り返さず横スクロール。ユーザー名はスマホでは隠す */
  .hd { gap: 10px; padding: 9px 12px; }
  .hd-logo { font-size: 16px; }
  .hd-nav {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .hd-nav::-webkit-scrollbar { display: none; }
  .hd-nav a { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  .hd-user { display: none; }

  /* 記録画面の保存バーを画面下へ固定 */
  .savebar.sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    box-shadow: 0 -2px 12px rgba(62,74,68,.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}