/* ============================================================
   健康管理システム — 管理者画面だけの見た目
   色・余白・文字は app.css のトークンだけを使う。
============================================================ */
.cols{ display:grid; grid-template-columns:minmax(0,1fr); gap: var(--gap); align-items:start; }
@media (min-width:1120px){
  .cols{ grid-template-columns:minmax(0,1fr) 340px; gap: var(--gap); }
}
.col-main > .blk + .blk, .col-side > .blk + .blk,
.col-side > .blk + details.blk, .col-side > details.blk + .note-foot{ margin-top: var(--gap); }

/* 数字の並び（.stats/.stat の置き換え。ボックスをやめ、罫で仕切る） */
.figs{ display:flex; flex-wrap:wrap; gap: var(--s4) 0; }
.fig{ flex:1 1 150px; min-width:0; padding:0 var(--s5); border-left:1px solid var(--rule); }
.fig:first-child{ padding-left:0; border-left:0; }
.fig .k{ font-size: var(--t-xs); font-weight:600; letter-spacing: var(--ls-label); color: var(--ink-3); }
.fig .v{
  font-size: var(--t-num); line-height: var(--lh-num); font-weight:600;
  letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; color: var(--ink);
}
.fig .v small{ font-size: var(--t-sm); font-weight:600; color: var(--ink-3); margin-left:2px; }
.col-side .figs{ flex-direction:column; }
.col-side .fig{ flex:none; padding:0; border-left:0; }

/* 表 */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; font-size: var(--t-sm); }
th,td{
  padding: var(--s3) var(--s2); text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--rule); font-variant-numeric: tabular-nums;
}
th{
  font-size: var(--t-xs); font-weight:700; letter-spacing: var(--ls-label);
  color: var(--ink-3); border-bottom-color: var(--rule-2);
}
th:first-child, td:first-child{ text-align:left; }
th:last-child,  td:last-child { text-align:center; }
tbody tr{ transition: background .1s ease; }
tbody tr:hover, tbody tr:focus-within{ background: var(--sunken); }
td .nm{ font-size: var(--t-md); font-weight:600; }
td .st{ display:block; font-size: var(--t-xs); color: var(--ink-3); font-weight:400; }
td.q{ color: var(--ink-3); }                 /* まだ測っていない = 「—」を静かに置く */
@media (max-width:1119px){ table{ min-width:720px; } }
/* ★ 1120px以上では横スクロールを消します。
   実測：左の欄は 776px しか無いのに、表は 851px 欲しがっていました（10列・折り返しなし）。
   縦の余白だけ広げ、横の詰めは据え置きます。ここを var(--s3) にすると 80px 溢れます。 */
@media (min-width:1120px){ th,td{ padding: var(--s4) var(--s2); } }

/* 配信スイッチ */
.sw2{ position:relative; display:inline-flex; align-items:center; width:44px; min-height: var(--tap); }
.sw2 input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.sw2 span{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:44px; height:26px; border-radius: var(--r-pill);
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: background .12s ease;
}
.sw2 span::before{
  content:""; position:absolute; left:3px; top:3px; width:20px; height:20px;
  background: var(--paper); border-radius:50%; box-shadow:0 0 0 1px var(--rule-2);
  transition: transform .12s ease;
}
.sw2 input:checked + span{ background: var(--action); box-shadow:none; }
.sw2 input:checked + span::before{ transform: translateX(18px); box-shadow:none; }
.sw2 input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

/* 配信の設定 */
.opts{ display:flex; flex-direction:column; gap:2px; margin-top: var(--s4); }
.opts label{
  display:flex; align-items:center; gap: var(--s2); margin:0;
  min-height: var(--tap); font-size: var(--t-md); color: var(--ink);
  letter-spacing: var(--ls-ja);
}
.opts input[type=checkbox]{ width:auto; min-height:auto; }
table.rules{ width:100%; font-size: var(--t-md); min-width:0; }
table.rules td{ text-align:left; white-space:normal; padding: var(--s3) var(--s2); }
table.rules td:first-child{ width:44%; }
table.rules label{ display:flex; align-items:center; gap: var(--s2); margin:0;
  min-height: var(--tap); font-size: var(--t-md); color: var(--ink); }
table.rules input[type=checkbox]{ width:auto; min-height:auto; }
table.rules input.num{ width:96px; display:inline-block; }
#sendResult{ margin-top: var(--s3); }
#sendResult .line{ font-size: var(--t-xs); color: var(--ink-3);
  font-family: ui-monospace, Consolas, monospace; }

/* ============================================================
   スタッフの全記録・画像（管理者だけ）
============================================================ */
/* 名前をボタンにして、記録一覧を開けるようにする */
.nmbtn {
  font: inherit; font-size: var(--t-md); font-weight: 600;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); text-align: left;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--rule-2); min-height: auto;
}
.nmbtn:hover { text-decoration-color: var(--accent); }

dialog.detail {
  width: min(760px, calc(100vw - var(--s5)));
  max-height: calc(100dvh - var(--s6));
}
dialog.detail .body { padding: var(--s5); }
#dtRange { margin: var(--s2) 0 var(--s4); }

.dt-day {
  border-top: 1px solid var(--rule); padding: var(--s4) 0;
}
.dt-day:first-of-type { border-top: 0; }
.dt-date { font-size: var(--t-sm); font-weight: 700; color: var(--ink); margin-bottom: var(--s3); }
.dt-body { display: grid; grid-template-columns: 160px 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 560px) { .dt-body { grid-template-columns: 1fr; } }

.dt-weight { display: flex; gap: var(--s3); align-items: flex-start; }
.dt-w { font-size: var(--t-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.dt-w small { font-size: var(--t-sm); color: var(--ink-3); font-weight: 600; }
.dt-w.q { color: var(--ink-3); font-weight: 400; }

.dt-meals { display: flex; flex-direction: column; gap: var(--s3); }
.dt-meal { display: flex; gap: var(--s3); align-items: flex-start; }
/* 焼肉など複数枚のときは、この中でだけ折り返します（本文の位置がずれないように） */
.dt-thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dt-mtxt { font-size: var(--t-sm); line-height: var(--lh-label); }
.dt-mtxt b { margin-right: var(--s1); }

/* 写真のサムネイル。四角で、押すと別タブで原寸 */
.dt-thumb {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--r1);
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
}
.dt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-thumb.none { box-shadow: inset 0 0 0 1px var(--rule); }

/* 体重の証拠動画（2026-09-07）。サムネの下に小さく出す控えめなリンク */
.dt-wshot { display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.dt-vlink {
  font-size: var(--t-xs); color: var(--accent, var(--ink-2)); text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.dt-vlink:hover { text-decoration: underline; }
/* 停止中のスタッフ（一覧の下の折りたたみ）。1行＝名前と「復帰」 */
.inactive-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.inactive-row:first-child { border-top: 0; }

/* 「▶ 動画」を押すと、その日のカードの下に出る再生欄 */
.dt-video { margin-top: var(--s3); }
.dt-video video { display: block; width: 100%; max-width: 480px; border-radius: var(--r1); background: #000; }

/* 削除は危険操作。赤い枠でまわりと分ける */
.danger-zone { margin-top: var(--s6); border-color: var(--danger); }
.danger-zone > summary { color: var(--danger); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:disabled { opacity: .45; }
@media (hover:hover){ .btn-danger:not(:disabled):hover { background: #7a2323; } }

/* 記録の無い日。詰めて薄く、並びを崩さない */
.dt-day.dt-empty { padding: var(--s2) 0; }
.dt-day.dt-empty .dt-date { margin-bottom: 0; font-weight: 400; color: var(--ink-3); display: inline; }
.dt-day.dt-empty .dt-body { display: inline; margin-left: var(--s3); }

/* ============================================================
   自動メール配信の設定（左の広い欄に移しました・2026-08-23）
   ------------------------------------------------------------
   意味のまとまりごとに3つに切り、各行は「左：何を／右：どれだけ」の2列。
   左列の幅を固定して、右列の数値欄と文が縦にそろうようにします。
============================================================ */
.mail-sec{ margin-top: var(--s6); padding-top: var(--s5); border-top:1px solid var(--rule); }
.mail-sec:first-of-type{ margin-top: var(--s4); padding-top:0; border-top:0; }
.mail-h{
  margin:0 0 var(--s3); font-size: var(--t-md); font-weight:700; color: var(--ink);
  letter-spacing: var(--ls-ja);
}

/* いつ・どこへ */
.mail-grid{ display:grid; grid-template-columns: 180px 1fr; gap: var(--s4); align-items:end; }
.mail-grid + .mail-grid{ margin-top: var(--s3); }
.mail-f label{ margin-top:0; }
.mail-f.wide{ grid-column: span 1; }
.mail-grid > .mail-f.wide:only-child{ grid-column: 1 / -1; }
.mail-opts{ margin-top: var(--s4); }
.mail-opts label .k{ margin-left: var(--s2); font-size: var(--t-xs); font-weight:400; }

/* 何を知らせるか／督促：1行＝「左：条件（チェック）｜右：しきい値」 */
.rule{
  display:grid; grid-template-columns: 280px 1fr; gap: var(--s4); align-items:center;
  min-height: var(--tap); padding: var(--s2) 0; border-top:1px solid var(--rule);
}
.rule:first-of-type{ border-top:0; }
.rule-on{
  display:flex; align-items:center; gap: var(--s2); margin:0; min-height: var(--tap);
  cursor:pointer;
  font-size: var(--t-md); font-weight:600; color: var(--ink); letter-spacing: var(--ls-ja);
  text-transform:none;
}
.rule-on input[type=checkbox]{ width:18px; height:18px; min-height:auto; margin:0; accent-color: var(--brand); }
.rule-val{ font-size: var(--t-md); color: var(--ink-2); display:flex; align-items:center; gap: var(--s2); flex-wrap:wrap; }
.rule-val.k{ color: var(--ink-3); font-size: var(--t-sm); }
.rule-val input.num{ width:104px; display:inline-block; text-align:right; }
.rule-val select{ width:auto; min-width:150px; display:inline-block; }

.mail-acts{ margin-top: var(--s5); }
.mail-acts .btn{ flex:0 0 auto; min-width:160px; }

/* 狭い画面では縦積み */
@media (max-width: 720px){
  .mail-grid{ grid-template-columns: 1fr; }
  .rule{ grid-template-columns: 1fr; gap: var(--s2); }
}