/* ==========================================================
   ここが変わったでしょう 共通スタイル

   方針：FileMaker版の見た目を踏襲する。色数を絞り、白地と罫線を基本にする。
   色は「意味のあるところだけ」に使う（担当外＝ピンク／選択した評価＝赤）。
   iPadで指操作するため、タップ領域だけは大きく取る。
   ========================================================== */

:root {
  --bar:      #6b7b8c;   /* ヘッダー */
  --bar-dark: #1b3a5c;   /* ホームボタン */
  --accent:   #e8907a;   /* 主要な操作 */
  --teal:     #7fb3a4;   /* 通常の操作 */
  --slate:    #4a6076;   /* 補助的な操作 */

  --ink:    #1f1f1f;
  --ink2:   #444;
  --muted:  #777;
  --line:   #a8bcd0;     /* 表の罫線 */
  --line2:  #d5dde4;
  --bg:     #f2f4f6;
  --pink:   #f7d9d4;     /* 担当外の行 */
  --red:    #cc3322;     /* 選んだ評価・注記 */

  --row-h:  34px;        /* 表の行の高さ（基準はNo.21のABCの行） */
}

* { box-sizing: border-box; }

/* アイコンは線画のSVG。色は親の文字色を継承するので、色ボタンの上では白になる。 */
.icon { flex: none; vertical-align: -.18em; }

/* 游ゴシックは線が細く画面で読みにくいため、太めのフォントを優先する。 */
body {
  margin: 0;
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック",
               "Hiragino Kaku Gothic ProN", "Meiryo", "メイリオ",
               "Yu Gothic UI", sans-serif;
  font-size: 16px; line-height: 1.6;
  background: var(--bg); color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

/* ---------- ヘッダー ---------- */
/* ホーム画面から起動すると画面がステータスバーの下まで広がる（viewport-fit=cover）。
   env()の分だけバーを厚くして、時刻や電池表示とヘッダーが重ならないようにする。
   Safariでふつうに開いているときは env() が 0 になるので見た目は変わらない。 */
.topbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--bar); color: #fff;
  padding-right: calc(14px + env(safe-area-inset-right));
  padding-left: env(safe-area-inset-left);
  padding-top: env(safe-area-inset-top);
  /* box-sizing:border-box なので、min-heightにも安全領域の分を足しておく。 */
  min-height: calc(52px + env(safe-area-inset-top));
  position: sticky; top: 0; z-index: 50;
}
/* 画面名はFileMaker版と同じくバーの中央に置く。
   左右の要素の幅に影響されないよう、絶対配置で中央に固定する。 */
.topbar .screen {
  position: absolute; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}
.topbar .home {
  background: var(--bar-dark); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  align-self: stretch; width: 54px; flex: none;
}
.topbar .today { font-size: 17px; font-weight: bold; white-space: nowrap; }
.topbar .screen {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 16px; font-weight: bold; white-space: nowrap;
}
.topbar .today .label {
  font-size: 12px; font-weight: normal; opacity: .85; margin-right: 5px;
}
.topbar .screen { font-size: 15px; }
.topbar .spacer { flex: 1; }
.topbar .logout { color: #dbe4ec; font-size: 13px; text-decoration: none; white-space: nowrap; }

/* 下端はホームバー（横棒）に重なるので、その分を足す。 */
main {
  padding: 20px 18px calc(70px + env(safe-area-inset-bottom));
  padding-left: calc(18px + env(safe-area-inset-left));
  padding-right: calc(18px + env(safe-area-inset-right));
}
.wrap    { max-width: 800px;  margin: 0 auto; }
.wrap-lg { max-width: 1080px; margin: 0 auto; }

/* ---------- 見出し・シート情報 ---------- */
h1.page { font-size: 26px; font-weight: bold; margin: 0 0 6px; color: var(--ink); }
h1.page .sub { margin-left: 14px; }

/* 点検日・シートID・部署（FileMaker版と同じく素の文字で並べる） */
.sheetinfo {
  display: flex; flex-wrap: wrap; gap: 4px 28px;
  font-size: 14px; color: var(--ink2); margin: 0 0 14px;
}
.sheetinfo div { display: flex; gap: 6px; }
.sheetinfo dt { color: var(--muted); }
.sheetinfo dt::after { content: "："; }
.sheetinfo dd { margin: 0; font-weight: bold; }

.meta { color: var(--ink2); font-size: 14px; margin-bottom: 14px; }
.meta b { color: var(--ink); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: bold;
  padding: 13px 22px; min-height: 48px; text-decoration: none;
  background: var(--teal); color: #fff;
}
.btn:hover  { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); }
.btn.dark    { background: var(--slate); }
.btn.ghost   { background: #fff; color: var(--ink2); border: 1.5px solid var(--line); }
.btn.danger  { background: #b08a90; }
.btn.wide { width: 100%; }
.btn.big  { font-size: 19px; padding: 19px; min-height: 62px; }
.btn.sm   { font-size: 13px; padding: 7px 13px; min-height: 36px; }
.btn:disabled, .btn.disabled { background: #c3cbd3; cursor: not-allowed; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
/* 右端に寄せたいとき（点検シートの終了ボタン）。 */
.actions.end { justify-content: flex-end; }

/* ---------- 部署ボタン ---------- */
.dept-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 24px; }
.dept-grid a {
  min-width: 118px; min-height: 64px; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: #dde2e7; color: #445; border-radius: 5px;
  text-decoration: none; font-size: 18px;
}
.dept-grid a.on { background: #7fb6e0; color: #fff; font-weight: bold; }

/* ---------- カード・通知 ---------- */
.card {
  background: #fff; border: 1px solid var(--line2); border-radius: 6px;
  padding: 20px; margin-bottom: 16px;
}
.card h2 {
  margin: 0 0 14px; font-size: 16px; color: var(--ink);
  padding-bottom: 9px; border-bottom: 1px solid var(--line2);
}

.notice {
  background: #fdf8e3; border: 1px solid #e6d79a; border-radius: 6px;
  padding: 16px 18px; font-size: 17px; margin: 14px 0;
}
.notice .id { font-size: 28px; font-weight: bold; letter-spacing: 1.5px; margin-left: 12px; }
.error { background: #fdecea; color: #a3261e; border: 1px solid #e6b5ae; }
.ok    { background: #eaf3ec; color: #2b6b45; border: 1px solid #b3d3bd; }
.error, .ok { border-radius: 6px; padding: 12px 16px; margin: 12px 0; font-size: 15px; }

.tag { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 12px; }
.tag.done { background: #eaf3ec; color: #2b6b45; }
.tag.wip  { background: #faf0da; color: #7a5713; }
.tag.off  { background: #e8ebee; color: var(--muted); }

/* ---------- 表 ---------- */
.tablewrap { overflow-x: auto; }
table.grid {
  width: 100%; border-collapse: collapse; background: #fff;
  font-size: 13.5px; min-width: 700px;
}
table.grid th, table.grid td {
  border: 1px solid var(--line); padding: 3px 8px; text-align: left;
}
/* 見出しは固定しない。横スクロール（.tablewrapのoverflow-x）を有効にすると
   固定の基準が表の内部になり、見出しが下にずれて1行目を隠してしまうため。 */
table.grid thead th {
  background: #f0f3f6; color: var(--ink); font-weight: bold; font-size: 12px;
  white-space: nowrap;
}
table.grid td.num   { text-align: center; font-variant-numeric: tabular-nums; }
table.grid td.cat   { text-align: center; font-size: 12px; }
table.grid td.pt    { text-align: center; font-variant-numeric: tabular-nums; }
table.grid td.score {
  text-align: center; font-weight: bold; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
table.grid td.actions-cell { text-align: center; white-space: nowrap; }
table.grid td.actions-cell > * { margin: 2px; }
.grid .content { line-height: 1.3; }
/* 全部の行を同じ高さにそろえる（基準はNo.21のABCの行）。
   tableのheightは最小値として働くので、文字が入りきらないときは
   切れずに行が伸びる。 */
table.grid tbody td { height: var(--row-h); }
.grid .no { font-weight: bold; }

/* 行の状態：色は「担当外＝ピンク」だけ。自分の担当は白いまま。 */
.grid tr.off td { background: var(--pink); }
.grid tr.auto td { background: #eef4ee; }
.grid tr.auto .content .autonote { color: #2b6b45; font-size: 12px; margin-left: 8px; }

.total-row td { background: #eceff2; font-weight: bold; font-size: 17px; }

/* ---------- 評価ボタン ---------- */
/* 「table.grid td」の指定（text-align:left）に負けないよう、同じ強さで書く。
   短く .evalcell と書くと左寄せのままになる。 */
table.grid td.evalcell { text-align: center; white-space: nowrap; padding: 2px; }
/* ボタンの大きさが行の高さを決める。○✕とABCを同じ28pxにして、
   No.21（ABCの行）と他の行で高さが変わらないようにしている。
   Appleの推奨（44px）は下回るが、1画面に入る行数を優先した判断。 */
.eval {
  border: none; background: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; margin: 0 1px; padding: 0;
  font-size: 19px; line-height: 1; color: #b9c0c7;
  font-family: inherit; font-weight: bold;
  /* ○や✕の字はベースラインに合わせて置かれるため、そのままだと丸の中で
     下寄りになる。flexで縦横とも中央に置き直す。 */
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
}
/* ホバーの色はマウスのある端末だけ。iPadはタップしたあともホバー状態が残るため、
   選んだ○が灰色のままになってしまう（✕は写真ウインドウが開いてホバーが外れる）。 */
@media (hover: hover) and (pointer: fine) {
  .eval:hover:not(:disabled) { background: #eef1f4; color: #8a939c; }
}
.eval:active:not(:disabled) { transform: scale(.93); }
/* A・B・Cの3つで、○✕の2つと同じくらいの幅に収める。高さは.evalと同じ。 */
.eval.abc { font-size: 15px; margin: 0; }
/* ○(U+25CB)はフォントの字形の都合で✕(U+2715)より線が細く見えるため、
   輪郭を足して太さをそろえる。太すぎる／細すぎる場合はこの値だけ調整する。 */
.eval[data-value="○"] { -webkit-text-stroke: 0.8px currentColor; }
/* 選んだ評価の赤は、ホバーより必ず優先する。 */
.eval.on, .eval.on:hover { color: var(--red); }
.eval:disabled { cursor: default; color: #c8ced4; }
tr.off .eval { color: #cbb2ae; }
tr.off .eval.on { color: var(--red); }
/* 中央寄せは .eval にまとめたので、span用の個別指定は不要。 */

/* ---------- 採点状況 ---------- */
.progress {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink2); margin-bottom: 10px;
}
.progress b { font-size: 17px; color: var(--ink); }
.progress .hint { margin-left: auto; font-weight: bold; }

/* ---------- 点検者の切り替え ---------- */
.seatbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.seatbar a {
  padding: 10px 18px; border-radius: 5px; text-decoration: none;
  background: #dde2e7; color: #445; font-size: 15px;
}
.seatbar a.on { background: var(--slate); color: #fff; font-weight: bold; }
.seatbar a .done { color: #2b6b45; font-weight: bold; }
.seatbar a .yet  { color: var(--muted); font-size: 13px; }
.seatbar a.on .done, .seatbar a.on .yet { color: #cfe3d7; }

/* ---------- 注記・宿題 ---------- */
.notes { color: var(--red); font-size: 12.5px; line-height: 1.75; margin-top: 14px; }
.homework {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 16px; margin-top: 16px;
}
.homework h3 { margin: 0 0 8px; font-size: 16px; }
.homework .note { color: var(--red); font-size: 13px; margin-bottom: 8px; }

/* ---------- 入力フォーム ---------- */
.formrow { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.formrow label, main label { font-size: 13px; color: var(--muted); }
input[type="text"], input[type="number"], input[type="password"], select, textarea {
  display: block; margin-top: 5px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 5px; padding: 11px 13px;
  background: #fff; min-height: 46px;
}
textarea { width: 100%; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: #5a92c0; outline: none; }
label.check { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; font-size: 14px; }
label.check input { width: 22px; height: 22px; margin: 0; min-height: 0; }

/* ---------- 評価写真 ---------- */
td.score.photo-open { cursor: pointer; }
.camera {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; color: #36699a; font-weight: normal; margin-top: 1px;
}

.modal-back {
  position: fixed; inset: 0; background: rgba(40,50,60,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100;
}
.modal-back[hidden] { display: none; }
.modal {
  background: #fff; border-radius: 8px; padding: 22px;
  width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
}
.modal h3 { margin: 0 0 6px; font-size: 19px; text-align: center; }
.modal-sub { color: var(--ink2); font-size: 14px; margin: 0 0 12px; text-align: center; }
.photo-list {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 6px;
  min-height: 170px; padding: 14px; background: #fafbfc;
}
.photo-list .empty { color: var(--muted); font-size: 14px; margin: auto; }
.photo-list .photo { width: 152px; text-align: center; }
.photo-list .photo img {
  width: 100%; height: 130px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--line);
}
.photo-list .del {
  margin-top: 5px; border: none; background: none; cursor: pointer;
  color: var(--red); font-size: 13px; font-family: inherit;
}
.modal-foot {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px;
}
.modal-foot .sheetid { color: var(--muted); font-size: 15px; font-weight: bold; }
#photo-add { cursor: pointer; }

/* ---------- 画面が狭いとき ---------- */
/* 中央の画面名が日付やログアウトと重なる幅では、画面名を隠す */
@media (max-width: 860px) {
  .topbar .screen { display: none; }
}
@media (max-width: 700px) {
  main {
    padding: 14px 10px calc(60px + env(safe-area-inset-bottom));
    padding-left: calc(10px + env(safe-area-inset-left));
    padding-right: calc(10px + env(safe-area-inset-right));
  }
  h1.page { font-size: 21px; }
  .topbar .today .label { display: none; }
}

/* ---------- 印刷 ---------- */
@media print {
  .topbar, .actions, .progress, .seatbar, .modal-back { display: none !important; }
  body { background: #fff; font-size: 12px; }
  main { padding: 0; }
  .tablewrap { overflow: visible; }
  table.grid { min-width: 0; font-size: 11px; }
  .grid tr.off td, .grid tr.auto td { background: #fff !important; }
  .eval { width: auto; height: auto; font-size: 13px; }
  .eval:not(.on) { color: #ccc; }
}


/* ==========================================================
   「ここが変わったでしょう」で使う分
   ========================================================== */

/* ---------- 検索の並び ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px;
}
.filters input[type="search"] {
  flex: 1; min-width: 220px; margin-top: 0;
  font-family: inherit; font-size: 16px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 5px; padding: 11px 13px;
  background: #fff; min-height: 46px;
}
.filters select { margin-top: 0; }

/* ---------- 一覧のサムネイル ---------- */
table.grid td.thumbcell { padding: 3px !important; }
.thumb {
  width: 100px; height: 62px; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--line); vertical-align: middle;
}
/* 写真が入るぶん、この画面の行は高さの指定を外す。 */
table.grid tbody td { height: auto; }

/* ---------- 入力項目 ---------- */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 13px; color: var(--muted); }
.field input[type="text"], .field input[type="date"],
.field input[type="password"], .field select, .field textarea {
  width: 100%;
}
.field input[type="date"] {
  display: block; margin-top: 5px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 5px; padding: 11px 13px;
  background: #fff; min-height: 46px;
}
.field small { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.field-row .field { flex: 1; min-width: 200px; }

/* ---------- ビフォー・アフターを横に並べる ---------- */
.photorow { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.photobox {
  flex: 1; min-width: 280px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px;
}
.photobox h2 { margin: 0 0 10px; font-size: 16px; }
.photobox .photo-list { margin-bottom: 12px; }

/* ---------- 評価 ---------- */
.ratingguide {
  background: #f7f9fb; border: 1px solid var(--line2); border-radius: 5px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.9; margin-bottom: 16px;
}
.ratingguide b { color: var(--red); margin-right: 4px; }
.ratingpick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ratingbtn {
  border: 1.5px solid var(--line); border-radius: 6px; background: #fff;
  padding: 12px 20px; cursor: pointer; font-size: 14px; color: var(--ink2);
  display: flex; align-items: center; gap: 6px;
}
.ratingbtn input { position: absolute; opacity: 0; width: 0; height: 0; }
.ratingbtn b { font-size: 20px; }
/* 選択中は赤く。ラジオボタンの状態をそのまま見た目にするので、
   押した瞬間に切り替わる。 */
.ratingbtn:has(input:checked) {
  border-color: var(--red); color: var(--red); background: #fdf5f4;
}

/* ---------- 写真を大きく見るウインドウ ---------- */
.photo-list .photo img.photo-open { cursor: zoom-in; }

.photoview {
  flex-direction: column; gap: 14px;
  background: rgba(20, 26, 32, .88);
  /* iPadでステータスバーやホームバーに重ならないようにする */
  padding: calc(16px + env(safe-area-inset-top)) 16px
           calc(16px + env(safe-area-inset-bottom));
}
.photoview img {
  max-width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  background: #fff;
}
.photoview-close {
  align-self: flex-end; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff;
}
.photoview-close:hover { background: rgba(255,255,255,.28); }
.photoview-hint { margin: 0; color: #d6dde4; font-size: 13px; }