/* /sakura/partials/common.css
 * ------------------------------------------------------------
 * URANUS 共通CSS
 * ------------------------------------------------------------
 * 【今回の共通レイアウト前提】
 * - header は上固定
 * - main は header の下に通常フローでぶら下げる
 * - footer はページ最下部に付く
 * - body全体を縦スクロール
 * - Android系での下見切れ切り分け用に、
 *   旧3枚額縁構造は一旦やめる
 *
 * 【今回の追加方針】
 * - report.css でうまくいっていた
 *   「上スクロール / 下固定操作帯」の考え方を
 *   common.css 側に共通部品として逆輸入する
 * - これにより、巡視・排泄・服薬などでも
 *   日報と同じような
 *   「上に表、下に操作帯」の構造を使いやすくする
 */

/* ============================================================
   共通変数
============================================================ */
:root{
  --room-width: 30px;
  --name-width: 70px;
  --other-min-width: 80px;

  --slot-30: 30px;
  --slot-40: 40px;
  --slot-50: 50px;
  --slot-60: 60px;

  --table-text: #163a70;
  --table-bg: #ffffff;

  --header-height: 50px;
  --footer-core-height: 15px;
  --footer-safe-bottom: 0px;
  --footer-height: calc(var(--footer-core-height) + var(--footer-safe-bottom));
  --site-side-gap: 8px;

  /* 桜テーマ パレット */
  --page-bg:#f3eadf;
  --page-bg-2:#efe0d4;
  --panel:#fffaf2;
  --sakura:#e6aebc;
  --sakura-deep:#c98598;
  --ivory:#fff7e8;
  --wood:#6f4634;
  --wood-deep:#3f2920;
  --wood-soft:#8b5e49;
  --leaf:#6f7d61;
  --line:#cfb5a4;
  --line-soft:#e2cfc1;
  --text:#2c211c;
  --muted:#715b50;
  --hover:#f8ebe8;
  --shadow:0 12px 26px rgba(63,41,32,.18);
  --radius:5px;

  --frame-line:#2f1e17;
  --frame-grad:linear-gradient(90deg, var(--wood-deep), var(--wood) 58%, var(--wood-soft));
  --frame-text:#fff7e8;
  --current-glow:var(--sakura-deep);

  /* ----------------------------------------------------------
   スマホ高さ対策用の共通変数
  ---------------------------------------------------------- */
  --app-vh: 100vh;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, [contenteditable="true"]):focus{
  background:#f8fffd !important;
  border-color:#94d2bd !important;
  outline:2px solid rgba(15,118,110,.2);
  outline-offset:0;
}

/* ============================================================
   ページ土台
============================================================ */
html,
body{
  width:100%;
  min-height:100%;
  background:
    linear-gradient(135deg, var(--page-bg) 0%, var(--page-bg-2) 52%, #f8f0e8 100%);
  background-attachment:fixed;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  color:var(--text);
  position:relative;
  z-index:0;
}

body{
  margin:0;
  min-height:100vh;
  display:block;
  overflow-x:hidden;
  overflow-y:auto;
  padding:0;
  padding-bottom:var(--footer-height);
}

/* page-split があるページは body スクロールを無効化 */
body:has(.page-split){
  overflow:hidden;
  padding-bottom:0;
}

/* ============================================================
   main 共通
============================================================ */
main.page-main{
  position:relative;
  z-index:2;
  width:100%;
  max-width:none;
  min-width:0;
  min-height:0;
  height:auto;
  margin:0 auto;
  padding-top:var(--header-height);
  box-sizing:border-box;
  overflow:visible;
}

/* page-split ページ：header〜footer 間を占有 */
main.page-main:has(.page-split){
  position:fixed;
  top:var(--header-height);
  left:0;
  right:0;
  bottom:var(--footer-height);
  height:auto;
  padding-top:0;
  overflow:hidden;
}

/* ============================================================
   page-shell / 共通土台
============================================================ */
.page-shell{
  min-height:auto;
  height:auto;
  min-width:0;
  padding:6px 8px 30px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.page-shell:has(.page-split){
  height:100%;
  overflow:hidden;
}

.pagepath,
.page-breadcrumb{
  font-size:13px;
  margin:2px 0 0;
  color:#111;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
  line-height:1.4;
  flex:0 0 auto;
}

.pagepath a,
.page-breadcrumb a{
  color:#111;
  text-decoration:none;
  font-weight:700;
}

.pagepath a:hover,
.page-breadcrumb a:hover{
  opacity:.85;
  text-decoration:none;
}

.pagepath-current,
.page-breadcrumb-current{
  font-weight:700;
  color:#111;
}

/* ----------------------------------------------------------
   【今回の整理】
   旧 white card 外枠は一旦やめる。
   ただし base.js 側が page-card を生成しているので、
   要素自体は残しつつ見た目だけ透明化する。
---------------------------------------------------------- */
.page-card{
  flex:0 0 auto;
  min-height:0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  color:#111;
  overflow:visible;
}

.page-card:has(.page-split){
  flex:1 1 auto;
  min-height:0;
}

.page-card .table-wrap{
  flex:0 0 auto;
  min-height:0;
  height:auto;
}

/* ============================================================
   【新規追加】
   上スクロール / 下固定操作帯 用の共通レイアウト
   ------------------------------------------------------------
   report.css でうまくいっていた構造を共通部品化する。
   各ページは次の構造で使う想定。
     .page-split
       ├ .page-scroll
       └ .page-bottom-bar
============================================================ */
.page-split{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  height:auto;
  gap:6px;
  min-width:0;
}

.page-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

.page-bottom-bar{
  flex:0 0 auto;
  min-width:0;
}

/* ----------------------------------------------------------
   【新規追加】
   下固定操作帯の共通見た目
   各ページでボタン群や入力欄を置きやすくするための
   共通の土台スタイル。
---------------------------------------------------------- */
.bottom-bar-card{
  border:1px solid var(--line);
  background:var(--panel);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ============================================================
   固定列幅
   ------------------------------------------------------------
   col-room / col-name 自体に sticky を内包する。
   これにより、各ページで sticky / sticky2 を毎回
   付けなくても固定列が効きやすくなる。
============================================================ */
.col-room{
  width:var(--room-width);
  min-width:var(--room-width);
  max-width:var(--room-width);
  text-align:center;
  position:sticky;
  left:0;
  z-index:5;
  background:var(--table-bg);
  color:var(--table-text);
}

.col-name{
  width:var(--name-width);
  min-width:var(--name-width);
  max-width:var(--name-width);
  position:sticky;
  left:var(--room-width);
  z-index:5;
  background:var(--table-bg);
  color:var(--table-text);
}

/* ============================================================
   slot 幅共通
============================================================ */
.col-slot{
  text-align:center;
  border-right:1px solid #111;
}

tr.absent-row td.col-slot{
  color:#d6d6d6 !important;
}

.col-slot30{
  width:var(--slot-30);
  min-width:var(--slot-30);
  max-width:var(--slot-30);
}

.col-slot40{
  width:var(--slot-40);
  min-width:var(--slot-40);
  max-width:var(--slot-40);
}

.col-slot50{
  width:var(--slot-50);
  min-width:var(--slot-50);
  max-width:var(--slot-50);
}

.col-slot60{
  width:var(--slot-60);
  min-width:var(--slot-60);
  max-width:var(--slot-60);
}

/* ============================================================
   その他列
============================================================ */
.col-other{
  min-width:var(--other-min-width);
  width:auto;
  max-width:none;
  text-align:left;
}

/* ============================================================
   テーブル基本
============================================================ */
.table-wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:0;
  height:auto;
  background:#000;
  border-top:1px solid #111;
  border-bottom:1px solid #111;
  border-left:none;
  border-right:none;
  border-radius:0;
  overflow:visible;
  overscroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
}

table{
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
  font-size:12px;
  background:var(--table-bg);
  color:var(--table-text);
}

th,
td{
  border:1px solid #111;
  padding:3px 3px;
  color:var(--table-text);
  background:var(--table-bg);
}

/* ============================================================
   タイトル行
   ------------------------------------------------------------
   1行目固定の共通土台
   まずは scroll box 内で top:0 固定とする。
============================================================ */
thead th{
  position:sticky;
  top:0;
  z-index:6;
  background:#f0ded1;
  color:#4d3328;
  border:1px solid #111;
  border-bottom:1px solid #111;
  box-shadow:none;
  background-clip:padding-box;
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  padding:4px 3px;
}

/* ============================================================
   sticky 固定列
   ------------------------------------------------------------
   旧 sticky / sticky2 / sticky3 も互換で残す
============================================================ */
th.sticky,
td.sticky{
  position:sticky;
  left:0;
}

th.sticky2,
td.sticky2{
  position:sticky;
  left:var(--room-width);
}

th.sticky3,
td.sticky3{
  position:sticky;
  left:calc(var(--room-width) + var(--name-width));
}

td.sticky,
td.sticky2,
td.sticky3,
td.col-room,
td.col-name{
  z-index:5;
  background:var(--table-bg);
  color:var(--table-text);
}

th.sticky,
th.sticky2,
th.sticky3,
thead th.col-room,
thead th.col-name{
  z-index:7;
  background:#f0ded1;
  color:#4d3328;
  background-clip:padding-box;
}

/* ============================================================
   不在系行
============================================================ */
tr.absent-row td{
  background:#d6d6d6 !important;
}

tr.absent-row td.col-slot{
  color:#d6d6d6 !important;
}

tr.absent-row td.sticky,
tr.absent-row td.sticky2,
tr.absent-row td.sticky3,
tr.absent-row td.col-room,
tr.absent-row td.col-name{
  color:#111 !important;
}

tr.absent-row td.col-other{
  color:#111 !important;
}

/* ============================================================
   共通セル保存状態
============================================================ */
td.cell-pending,
th.cell-pending,
.cell-pending{
  background:#fff1f2 !important;
}

td.cell-saving,
th.cell-saving,
.cell-saving{
  background:#ffd9e8 !important;
}

td.cell-error,
th.cell-error,
.cell-error{
  background:#fee2e2 !important;
}

/* ============================================================
   昼帯マーク
============================================================ */
tr.lunch-mark-row td[data-slot="昼前"],
tr.lunch-mark-row td[data-slot="昼後"],
tr.lunch-mark-row td[data-slot="主食昼"],
tr.lunch-mark-row td[data-slot="副食昼"],
tr.lunch-mark-row td[data-slot="水分昼"]{
  background:#e9e9e9 !important;
}

/* ============================================================
   header
============================================================ */
#site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-height);
  z-index:20;
  width:100%;
  min-width:0;
  background:transparent;
  border-bottom:1px solid var(--frame-line);
}

#site-header .header{
  width:100%;
  height:100%;
  min-width:0;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  background:transparent;
  font-size:12px;
  line-height:1;
  overflow:visible;
}

#site-header .header-top{
  min-width:0;
  flex:0 0 auto;
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  gap:6px 10px;
  padding:3px var(--site-side-gap);
  color:var(--ivory);
  background:linear-gradient(90deg, var(--wood-deep), var(--wood) 58%, var(--wood-soft));
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg, var(--sakura-deep), var(--ivory), var(--leaf), var(--sakura-deep)) 1;
}

#site-header .header-bottom{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:0;
  padding:0 var(--site-side-gap);
  background:#efe0d4;
  overflow:visible;
  white-space:nowrap;
}

#site-header #date{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}

#site-header .dateBar{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

#site-header .dateArrow{
  appearance:none;
  -webkit-appearance:none;
  min-height:20px;
  padding:1px 6px;
  color:var(--ivory);
  background:linear-gradient(180deg, #75503e, #55372b);
  border:1px solid #3f2920;
  border-radius:2px;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  line-height:1;
}

#site-header .dateArrow:hover{
  background:linear-gradient(180deg, #815945, #5f3b2d);
}

#site-header .dateDisplay{
  min-width:80px;
  padding:2px 6px;
  color:#4d3328;
  background:#fffaf2;
  border:1px solid var(--line-soft);
  border-radius:2px;
  font-size:12px;
  font-weight:700;
  text-align:center;
  cursor:pointer;
  user-select:none;
  line-height:1.3;
}

#site-header .dateReload{
  color:#f0d8cc;
  font-size:10px;
  cursor:pointer;
  user-select:none;
}

#site-header .loginBox{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  white-space:nowrap;
  margin-left:auto;
}

#site-header #loginInfo{
  color:var(--ivory);
  font-size:11px;
  opacity:.95;
}

#site-header .logoutBtn{
  appearance:none;
  -webkit-appearance:none;
  min-height:20px;
  padding:1px 7px;
  color:var(--ivory);
  background:linear-gradient(180deg, #75503e, #55372b);
  border:1px solid #3f2920;
  border-radius:2px;
  font-size:10px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}

#site-header .logoutBtn:hover{
  background:linear-gradient(180deg, #815945, #5f3b2d);
}

#site-header .nav{
  display:inline-flex;
  align-items:center;
  gap:0;
  line-height:1;
  white-space:nowrap;
  overflow:visible;
}

#site-header .btn{
  display:inline-block;
  padding:0 4px;
  margin:0;
  color:var(--wood-deep);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}

#site-header .btn:visited{
  color:var(--wood-deep);
}

#site-header .btn:hover{
  color:var(--sakura-deep);
  text-decoration:none;
}

#site-header .btn.current{
  color:var(--sakura-deep) !important;
  text-shadow:none;
}

#site-header .btn.beta{
  opacity:.72;
}

#site-header .report-nav-menu{
  position:relative;
  display:inline-flex;
  align-items:center;
  align-self:stretch;
}

#site-header .report-nav-trigger{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  font-family:inherit;
  cursor:pointer;
}

#site-header .report-nav-caret{
  display:inline-block;
  margin-left:3px;
  font-size:8px;
  transition:transform .18s ease;
}

#site-header .report-nav-menu.is-open .report-nav-caret{
  transform:rotate(180deg);
}

#site-header .report-noren-menu{
  position:absolute;
  top:calc(100% + 3px);
  left:0;
  z-index:50;
  min-width:116px;
  padding:4px;
  display:grid;
  gap:2px;
  background:linear-gradient(180deg, #fffaf2, #f6e8dc);
  border:1px solid var(--line-soft);
  border-top:3px solid var(--wood);
  border-radius:0 0 5px 5px;
  box-shadow:0 8px 16px rgba(67,42,31,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-7px) scaleY(.72);
  transform-origin:top center;
  transition:opacity .16s ease, transform .18s ease, visibility 0s linear .18s;
}

#site-header .report-nav-menu.is-open .report-noren-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scaleY(1);
  transition-delay:0s;
}

#site-header .report-noren-link{
  display:block;
  padding:7px 12px;
  color:var(--wood-deep);
  background:rgba(255,255,255,.56);
  border-bottom:1px solid rgba(139,94,60,.18);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-align:left;
  text-decoration:none;
  white-space:nowrap;
}

#site-header .report-noren-link:last-child{
  border-bottom:0;
}

#site-header .report-noren-link:hover,
#site-header .report-noren-link.current{
  color:var(--sakura-deep);
  background:#fff;
}

#site-header .nav .btn + .btn::before{
  content:"│";
  color:var(--line);
  display:inline-block;
  margin:0 1px;
  font-weight:400;
  font-size:11px;
}

#site-header .nav .report-nav-menu + .btn::before{
  content:"│";
  color:var(--line);
  display:inline-block;
  margin:0 1px;
  font-weight:400;
  font-size:11px;
}

#site-header #count.status{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  padding-left:8px;
  border-left:1px solid var(--line);
  margin-left:6px;
}

/* ============================================================
   save / status
============================================================ */
#site-header #save{
  display:none !important;
}

#site-header .status{
  display:none !important;
}

/* ============================================================
   footer
============================================================ */
#site-footer{
  width:100%;
  height:var(--footer-height);
  margin:0;
  overflow:hidden;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:20;
  background:var(--frame-grad);
  border-top:1px solid var(--frame-line);
  color:var(--ivory);
}

#site-footer .footer-inner{
  width:100%;
  height:var(--footer-core-height);
  padding:0 var(--site-side-gap);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}

#site-footer .footer-simple{
  justify-content:center;
}

#site-footer .footer-facility{
  font-size:9px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
  color:var(--ivory);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}

/* ============================================================
   mobile  (max-width: 720px)
   ------------------------------------------------------------
   【2モード設計】デスクトップと同じ :has(.page-split) 判定を踏襲する。

   ■ page-split あり（食事・排泄・服薬・巡視・日報・バイタル等）
       html/body を 100dvh に固定し、
       main.page-main:has(.page-split){ position:fixed } の
       fixed レイアウトをモバイルでもそのまま活かす。
       テーブルスクロールは .page-scroll が担当。

   ■ page-split なし（プロフィール・設定・アップロード等）
       body を縦スクロール、高さ自動伸縮。

   ※ デスクトップの :has(.page-split) ルール群は specificity が高い
     (例: main.page-main:has(.page-split) = 0,2,1 >
          @media 内 main.page-main = 0,1,1) ため、
     @media ブロック内の汎用ルールより常に優先されモバイルでも有効。
     ここでは汎用ルール（page-split なし）と、
     html 要素の高さ固定（デスクトップ側で未定義）のみを追加する。
============================================================ */
@media (max-width:720px){

  /* --- ベース --- */
  body{
    font-size:10px;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
  }

  html{
    min-height:100dvh;
  }

  table{
    font-size:10px;
  }

  /* --- page-split ページ: html/body を 100dvh に固定 --- */
  /* body:has(.page-split){ overflow:hidden } はデスクトップルール(0,2,0)
     が既に有効。ここでは height と html 側を補完する。            */
  html:has(.page-split){
    height:100dvh;
    overflow:hidden;
  }

  body:has(.page-split){
    height:100dvh;
    padding-bottom:0;
  }

  /* --- main: page-split なし (自動高さ・スクロール) --- */
  main.page-main{
    width:100%;
    min-height:0;
    height:auto;
    overflow:visible;
    touch-action:pan-x pan-y pinch-zoom;
  }
  /* ※ main.page-main:has(.page-split){ position:fixed; top/bottom }
       はデスクトップルール(0,2,1)がそのままモバイルでも有効。    */

  /* --- page-shell: page-split なし --- */
  .page-shell{
    height:auto;
    padding:4px 6px 30px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:6px;
    overflow:visible;
  }

  /* --- page-shell: page-split あり (モバイル用 padding 補正のみ) --- */
  /* height:100% / overflow:hidden はデスクトップルール(0,2,0)が有効。 */
  .page-shell:has(.page-split){
    padding:4px 6px 2px;
  }

  /* --- page-card: page-split なし --- */
  .page-card{
    flex:0 0 auto;
    min-height:0;
    height:auto;
    padding:0;
    border-radius:0;
    overflow:visible;
  }
  /* ※ .page-card:has(.page-split){ flex:1 1 auto; min-height:0 }
       はデスクトップルール(0,2,0)がそのまま有効。               */

  /* --- page-scroll: タッチ操作強化 --- */
  .page-scroll{
    touch-action:pan-x pan-y pinch-zoom;
  }

  /* --- table-wrap: page-split なし (高さ自動) --- */
  .page-card .table-wrap,
  .table-wrap{
    flex:0 0 auto;
    min-height:0;
    height:auto;
    max-height:none;
    overflow:visible;
    overscroll-behavior:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y pinch-zoom;
  }

  /* --- header --- */
  #site-header .header{
    width:100%;
    padding:0;
    font-size:10px;
  }

  #site-header .header-top{
    padding:2px 4px;
    gap:4px 8px;
  }

  #site-header .header-bottom{
    padding:0 4px;
  }

  #site-header .btn{
    font-size:10px;
    padding:0 3px;
  }

  #site-header .dateArrow,
  #site-header .logoutBtn{
    font-size:10px;
    padding:1px 4px;
  }

  #site-header .dateDisplay{
    font-size:10px;
    min-width:64px;
    padding:1px 4px;
  }

  /* --- footer --- */
  #site-footer{
    width:100%;
    min-height:var(--footer-height);
    height:var(--footer-height);
  }

  #site-footer .footer-inner{
    width:100%;
    padding:0 4px;
  }

  #site-footer .footer-facility{
    font-size:9px;
  }
}

/* ============================================================
   主要ボックス
============================================================ */
.modal,
.card{
  position:relative;
  z-index:2;
}

/* ============================================================
   vital modal
============================================================ */
.vital-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.42);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:8px;
  z-index:9999;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.vital-modal{
  width:100%;
  max-width:340px;
  max-height:calc(100dvh - 16px);
  margin-top:4px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.vital-modal-header{
  padding:8px 10px;
  border-bottom:1px solid #d1d5db;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
}

.vital-modal-header-left{
  min-width:0;
  flex:1;
}

.vital-modal-title{
  font-weight:900;
  font-size:14px;
  line-height:1.15;
}

.vital-modal-sub{
  font-size:15px;
  color:#111827;
  font-weight:900;
  line-height:1.15;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vital-modal-userline{
  font-size:11px;
  color:#6b7280;
  font-weight:700;
  margin-top:2px;
}

.vital-modal-sub:empty,
.vital-modal-userline:empty{
  display:none;
}

.vital-modal-body{
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.vital-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.vital-field label{
  font-size:12px;
  color:#6b7280;
  font-weight:700;
}

#vitalResidentSelect{
  width:100%;
  min-width:0;
  height:38px;
  padding:6px 10px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  font-weight:900;
  font-size:16px;
  background:#fff;
}

#vitalResidentSelect:focus{
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
  border-color:#2563eb;
}

.vital-date-block{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}

.vital-date-view{
  font-weight:900;
  font-size:13px;
  color:#111827;
  opacity:.9;
  cursor:pointer;
  user-select:none;
  padding:1px 0;
}

.vital-date-edit{
  display:none;
  width:180px;
  height:38px;
  padding:6px 10px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  font-weight:900;
  font-size:16px;
  background:#fff;
}

.vital-line{
  display:flex;
  align-items:flex-start;
  gap:6px;
}

.vital-label{
  font-weight:900;
  opacity:.85;
  min-width:44px;
  padding-top:8px;
  font-size:13px;
}

.vital-time-wrap{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
}

.vital-time-adjust-btn{
  width:22px;
  min-width:22px;
  height:22px;
  padding:0;
  border:1px solid #d1d5db;
  border-radius:6px;
  background:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.vital-time-adjust-text{
  font-size:10px;
  color:#6b7280;
  font-weight:700;
  white-space:nowrap;
}

.vital-smallinp{
  width:76px;
  max-width:76px;
  height:38px;
  padding:6px 8px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  font-weight:900;
  font-size:16px;
  text-align:center;
  background:#fff;
}

.vital-temp-wrap{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.vital-temp{
  width:76px;
  max-width:76px;
  height:38px;
  padding:6px 8px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  font-weight:900;
  font-size:16px;
  text-align:center;
  background:#fff;
}

/* Androidの通常ブラウザだけ、下部システムナビゲーションを避ける。 */
@media (display-mode:browser) and (hover:none) and (pointer:coarse){
  @supports not (-webkit-touch-callout:none){
    :root{
      --footer-safe-bottom:max(20px, env(safe-area-max-inset-bottom, 0px));
    }
  }
}

.vital-temp::placeholder{
  color:rgba(15,23,42,.20);
  font-weight:300;
  opacity:1;
}

.vital-bp::placeholder,
#vitalPulse::placeholder,
#vitalSpo2::placeholder{
  color:rgba(15,23,42,.20);
  font-weight:300;
  opacity:1;
}

.vital-unit{
  font-weight:900;
  opacity:.85;
  padding-top:8px;
  font-size:13px;
}

.vital-bp-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  white-space:nowrap;
}

.vital-bp{
  width:48px;
  height:38px;
  padding:6px 6px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  font-weight:900;
  font-size:16px;
  text-align:center;
  background:#fff;
}

.vital-bp-dia{
  width:48px;
}

.vital-slash{
  font-weight:900;
  font-size:14px;
  opacity:.8;
  line-height:38px;
}

#vitalNote{
  width:100%;
  min-height:48px;
  padding:6px 8px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  font-weight:900;
  font-size:16px;
  line-height:1.35;
  background:#fff;
  resize:vertical;
}

.vital-smallinp:focus,
.vital-temp:focus,
.vital-bp:focus,
#vitalNote:focus,
.vital-date-edit:focus{
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
  border-color:#2563eb;
}

.vital-checks{
  display:flex;
  gap:8px 10px;
  align-items:center;
  flex-wrap:wrap;
  padding:1px 1px 0;
  font-weight:900;
  color:#111827;
}

.vital-bath-token{
    min-height:24px;
    border:1px solid #cbd5e1;
    border-radius:999px;
    background:#fff;
    color:#334155;
    padding:0 10px;
    font-size:12px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
  }

.vital-bath-token.is-active{
    background:#dbeafe;
    border-color:#93c5fd;
    color:#1d4ed8;
  }

.vital-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:2px;
  align-items:flex-end;
  flex-wrap:wrap;
}

#vitalModalClose,
#vitalModalSave{
  min-height:34px;
  padding:6px 10px;
  font-size:13px;
}

@media print{
  html,
  body{
    width:auto !important;
    height:auto !important;
    min-height:auto !important;
    overflow:visible !important;
    background:#fff !important;
    color:#111 !important;
  }

  body{
    display:block !important;
  }

  #site-header,
  #site-footer{
    display:none !important;
  }

  #site-frame,
  main.page-main,
  .page-shell,
  .page-card,
  .page-split,
  .page-scroll,
  .page-bottom-bar,
  .page-card .table-wrap,
  .table-wrap,
  .page-body,
  .page-content{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    position:static !important;
    inset:auto !important;
    transform:none !important;
    padding-top:0 !important;
  }

  table{
    width:100% !important;
    max-width:none !important;
  }

  thead{
    display:table-header-group;
  }

  tfoot{
    display:table-footer-group;
  }

  tr,
  td,
  th{
    page-break-inside:avoid;
    break-inside:avoid;
  }

  *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  @page{
    size:auto;
    margin:8mm;
  }
}

/* ============================================================
   共通UI部品（toolbar / btn2 / statusline / td.check 等）
   food / drug / body / patrol / vital の style ブロックを統合
============================================================ */
:root{ --focus:0 0 0 3px rgba(37,99,235,.18); }

.toolbar{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin:0; padding:6px 0 8px; flex:0 0 auto;
}
.toolbar .actions{ display:flex; align-items:center; gap:10px; }
.toolbar .filterbox{ display:flex; align-items:center; gap:8px; }
.toolbar .label{ font-size:12px; font-weight:400; color:#5f6368; white-space:nowrap; }
.toolbar .note{ font-size:12px; color:#666; }
.toolbar select{
  min-width:220px; padding:7px 9px; border:1px solid #111;
  border-radius:4px; background:#fff; font-size:13px; font-weight:700;
  outline:none; color:#111;
}
.toolbar select:focus{ box-shadow:var(--focus); border-color:#2563eb; }
.mode-buttons{ display:flex; align-items:center; gap:8px; }

.btn2{
  padding:7px 10px; border-radius:4px; font-size:13px; font-weight:800;
  cursor:pointer; border:1px solid #111; background:#fff; color:#111;
}
.btn2.primary{ background:#2563eb; color:#fff; border-color:#2563eb; }

.statusline{
  margin-left:auto; font-size:12px; color:#666;
  border:1px dashed #ccc; border-radius:4px;
  padding:4px 8px; white-space:nowrap; background:#fff;
}

.muted{ color:#666; }

.vhead{
  font-size:10px; line-height:1.1; text-align:center;
  white-space:normal; word-break:break-all; margin:0 auto;
}

.name-link{
  color:#111; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; font-weight:700;
}

td.check{
  cursor:pointer; font-weight:700; user-select:none;
  transition:transform .02s ease, background .15s ease;
}
td.check:active{ transform:scale(0.97); }
td.check.saving, td.saving{ background:#ffd7e6 !important; }
td.check.error,  td.error { background:#fee2e2 !important; }
td.na{ background:#fff; }

td.editable{
  cursor:pointer; user-select:none;
  transition:background .15s ease, transform .02s ease;
}
td.editable:active{ transform:scale(0.98); }
td.editing{ padding:3px; background:#eef4ff; }

.other-editor{
  width:100%; min-width:0; box-sizing:border-box;
  border:1px solid #cbd5e1; border-radius:6px;
  padding:4px 6px; font:inherit; background:#fff; color:#111;
}

.cell-editor{
  width:100%; min-width:56px; box-sizing:border-box;
  border:1px solid #111; border-radius:8px; padding:6px 8px;
  font-size:14px; outline:none; color:#111; background:#fff; text-align:center;
}

@media (hover:hover){
  td.check:hover{ background:#f3f6ff; }
  td.editable:hover{ background:#f3f4f6; }
}

@media (max-width:720px){
  .toolbar{ gap:6px; padding:4px 0 6px; }
  .toolbar .label,.toolbar select,.btn2,.statusline{ font-size:10px; }
  .toolbar select{ min-width:160px; padding:5px 6px; }
  .btn2{ padding:5px 7px; }
  .statusline{ margin-left:0; }
  .cell-editor{ font-size:12px; padding:5px 6px; }
}

/* ============================================================
   元に戻すボタン (#modeRestore) — patrol.html
============================================================ */
#modeRestore{
  padding:7px 10px; border-radius:4px; font-size:13px; font-weight:800;
  cursor:pointer; border:1px solid #111; background:#fff; color:#111;
}
#modeRestore.is-on{
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
  background:#f3f4f6; border-color:#9ca3af;
}
@media (max-width:720px){ #modeRestore{ font-size:10px; padding:5px 7px; } }

/* ============================================================
   巡視 (patrol.html)
============================================================ */
.patrol-table{ table-layout:auto; min-width:720px; }
@media (max-width:720px){ .patrol-table{ min-width:640px; } }

/* ============================================================
   服薬 (drug.html)
============================================================ */
.drug-page{ min-width:0; }
.drug-table{ width:max-content; min-width:100%; }
.drug-table th.col-slot{ height:20px; padding:4px 0; }
.drug-bottom-tools{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0;
}
.drug-bottom-tools label{
  font-weight:700; color:#374151; display:flex; align-items:center; gap:8px;
}
.drug-bottom-tools select{
  padding:7px 10px; border-radius:10px; border:1px solid #111;
  background:#fff; font-size:16px; color:#111;
}
.drug-bottom-tools .note{ font-size:13px; color:#666; }
.drug-bottom-tools .spacer{ flex:1 1 auto; min-width:12px; }
@media (max-width:720px){
  .drug-bottom-tools{ gap:8px; }
  .drug-bottom-tools label,
  .drug-bottom-tools select,
  .drug-bottom-tools .note,
  .drug-table{ font-size:10px; }
  .drug-bottom-tools select{ padding:5px 6px; border-radius:8px; }
  .drug-table th.col-slot{ height:58px; }
}

/* ============================================================
   食事 (food.html)
============================================================ */
.food-card{
  flex:1 1 auto; min-height:0; min-width:0;
  display:flex; flex-direction:column; gap:8px; overflow:hidden;
}
.food-table{ width:max-content; min-width:100%; background:#fff; }
.food-table th, .food-table td{ text-align:center; vertical-align:middle; }
.food-table td{ background:#fff; }
.double-left{ border-left:3px double #111 !important; }
.double-right{ border-right:3px double #111 !important; }
.food-table td{ height:20px; transition:background-color .12s ease; }
.food-table select{
  width:100%; border:none; background:transparent; outline:none;
  text-align:center; font-weight:700;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:0; font-size:inherit;
}
.food-table input.other{
  width:100%; border:1px solid #d1d5db; border-radius:8px;
  outline:none; padding:4px 6px; font-weight:700;
  background:#fff; font-size:inherit; box-sizing:border-box;
}
.food-table input.other:focus{
  border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.16);
}
.food-table .water-cell{ font-weight:700; cursor:pointer; user-select:none; }
.food-table .water-cell.is-empty{ color:#9ca3af; }
.food-table .water-cell.readonly{ cursor:default; }
.total{ font-weight:700; }
.note{ font-size:13px; color:#666; }
.nutri-wrap{
  display:flex; align-items:center; justify-content:center;
  gap:2px; white-space:nowrap;
}
.nutri-type{ font-weight:700; opacity:.75; min-width:1.2em; font-size:inherit; }
.nutri-wrap select{
  width:100%; border:none; background:transparent; outline:none;
  font-weight:700; text-align:center;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:0; font-size:inherit;
}
.nutri-disabled{ opacity:.35; pointer-events:none; user-select:none; }
.readonly-note{ color:#b91c1c; font-weight:700; }
.other-mirror{ display:none; }
tr.absent-row td.col-slot select{ color:#d6d6d6 !important; pointer-events:none; }
.water-modal-backdrop{
  position:fixed; inset:0; background:rgba(17,24,39,.28);
  display:none; align-items:center; justify-content:center;
  z-index:9999; padding:12px;
}
.water-modal-backdrop.open{ display:flex; }
.water-modal{
  width:min(280px,100%); background:#fff; border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.16); padding:10px;
  font-size:12px; color:#111;
}
.water-modal-title{ font-weight:700; margin:0 0 8px; font-size:inherit; }
.water-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:6px;
}
.water-choice{
  border:1px solid #d1d5db; background:#fff; border-radius:8px;
  padding:6px 0; font-weight:700; cursor:pointer; line-height:1.1; font-size:inherit;
}
.water-choice:hover{ background:#f9fafb; }
.water-subgrid{ display:flex; justify-content:center; gap:6px; margin-bottom:6px; }
.water-free-input{
  width:56px; min-width:56px; max-width:56px;
  padding:6px 4px; border:1px solid #d1d5db; border-radius:8px;
  font-weight:700; outline:none; text-align:center;
  font-size:inherit; box-sizing:border-box;
}
.water-mini-btn, .water-action-btn{
  border:1px solid #d1d5db; background:#fff; border-radius:8px;
  padding:6px 8px; font-weight:700; cursor:pointer; line-height:1.1; font-size:inherit;
}
.water-actions{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.water-note{ margin-top:6px; color:#6b7280; font-weight:700; text-align:center; font-size:inherit; }
@media (max-width:720px){
  .food-table{ font-size:10px; }
  .food-table th.col-slot{ height:58px; }
  .water-modal{ width:min(260px,100%); font-size:10px; }
  .water-free-input{ width:52px; min-width:52px; max-width:52px; }
}

/* ============================================================
   body-table 互換スタイル
============================================================ */
table.body-table{
  width:max-content; min-width:100%; table-layout:fixed;
  font-size:12px; background:#fff; color:#111;
}
table.body-table th, table.body-table td{ text-align:center; vertical-align:middle; }
table.body-table td{ background:#fff; color:#111; }
.body-table .col-name{
  min-width:calc(var(--name-width,70px) + 15px);
  width:calc(var(--name-width,70px) + 15px);
}
.month-hidden{ display:none; }
@media (max-width:720px){ table.body-table{ font-size:10px; } }

/* ============================================================
   バイタル (vital.html)
============================================================ */
table.log{
  width:100%; min-width:580px; table-layout:fixed;
  font-size:12px; background:#fff; color:#111;
}
table.log th, table.log td{ text-align:center; vertical-align:middle; }
table.log td{ background:#fff; color:#111; }
table.log td.left{ text-align:left; }
.col-vital-date  { width:70px;  min-width:70px;  max-width:70px;  }
.col-vital-time  { width:60px;  min-width:60px;  max-width:60px;  }
.col-vital-name  { width:90px;  min-width:90px;  max-width:90px;  text-align:left; }
.col-vital-temp  { width:60px;  min-width:60px;  max-width:60px;  }
.col-vital-bp    { width:70px;  min-width:70px;  max-width:70px;  }
.col-vital-pulse { width:60px;  min-width:60px;  max-width:60px;  }
.col-vital-spo2  { width:60px;  min-width:60px;  max-width:60px;  }
.col-vital-note  { min-width:80px; text-align:left; }
.vital-modal{ color:#111; }
.vital-modal .vital-label,
.vital-modal .vital-field > label,
.vital-modal .vital-time-adjust-text,
.vital-modal .vital-unit,
.vital-modal .vital-slash,
.vital-modal .vital-modal-sub,
.vital-modal .vital-modal-userline{ color:#111 !important; }
.vital-modal input,.vital-modal select,
.vital-modal textarea,.vital-modal button{ color:#111; }
@media (max-width:720px){ table.log{ font-size:10px; } }
.hospitalized-cell{
  background:#e0f2fe !important;
  color:#075985 !important;
  font-weight:700 !important;
  text-align:center !important;
  cursor:default !important;
}

.hospitalized-cell select,
.hospitalized-cell input{
  display:none !important;
}