/* ==========================================================
   連絡帳 共通スタイル

   方針：ボタンの並びと色はMM家事にそろえる（濃紺の帯、左にホーム、
   その右に機能タブ）。中身の並びは FileMaker版 form_iPad_ホーム のまま。
   ステイタスの色は条件付き書式の値をそのまま使うので、CSSではなく
   lib/constants.py に置いてある（表の中に直接書き込まれる）。
   iPadで指操作するため、タップ領域は大きく取る。

   style.css はアプリごとに別ファイル。MM家事と共通で直したいときは
   両方に同じ修正を入れる。
   ========================================================== */

:root {
  --bar:      #1b3a5c;   /* ヘッダー */
  --bar-dark: #12263c;   /* ホームボタン */
  --accent:   #2f7d8e;   /* 主要な操作 */
  --teal:     #4e9aa8;
  --slate:    #4a6076;
  --danger:   #c0392b;

  --ink:   #1f1f1f;
  --ink2:  #444;
  --muted: #777;
  --line:  #a8bcd0;      /* 枠線・入力欄のふち */
  --line2: #d5dde4;
  --bg:    #eef1f4;
  --panel: #ffffff;

  --row-h: 34px;
}

* { box-sizing: border-box; }

/* hidden を付けたら必ず隠れるようにする。
   .modal のように display を指定した要素は、これが無いと hidden が効かない。 */
[hidden] { display: none !important; }

/* 読み込み中の目隠し。画面ができるまでのあいだ出す。 */
.loading {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(244, 246, 248, .92); color: #33414f;
  font-size: 16px; font-weight: bold;
}
.loading .spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid #c3ced8; border-top-color: #1f6f8b;
  animation: loadspin .8s linear infinite;
}
@keyframes loadspin { to { transform: rotate(360deg); } }

/* アイコンは線画の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: 15px; line-height: 1.55;
  background: var(--bg); color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

/* ---------- 上のボタン列 ---------- */
/* ホーム画面から起動すると画面がステータスバーの下まで広がる（viewport-fit=cover）。
   env()の分だけバーを厚くして、時刻や電池表示と重ならないようにする。 */
.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bar); color: #fff;
  padding-right: calc(12px + env(safe-area-inset-right));
  padding-left: env(safe-area-inset-left);
  padding-top: env(safe-area-inset-top);
  min-height: calc(52px + env(safe-area-inset-top));
  position: sticky; top: 0; z-index: 50;
}
.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; white-space: nowrap; }
.topbar .today .label { font-size: 12px; opacity: .85; margin-right: 5px; }
/* 誰で入っているかの札。進捗を変えた記録に残る名前と同じもの。 */
.topbar .role {
  background: #3f6f86; font-size: 12px; font-weight: bold;
  padding: 3px 9px; border-radius: 4px; white-space: nowrap;
}
/* 更新。アイコンだけの丸ボタン。 */
.topbar .reload {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .14);
}
.topbar .reload:active { background: rgba(255, 255, 255, .3); }

.topbar .spacer { flex: 1; }
.topbar .screen {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: bold; white-space: nowrap; opacity: .95;
}

/* 機能タブ。FileMaker版の 受付／一覧／管理／終了 と同じ並び。
   文字数が違っても幅は揃える。隙間は空けず、罫線どうしを突き合わせる。 */
.tabs { display: flex; gap: 0; align-self: stretch; }
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: 92px; padding: 0; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: bold; white-space: nowrap;
  border-left: 1px solid rgba(255,255,255,.18);
}
.tab:last-child { border-right: 1px solid rgba(255,255,255,.18); }
.tab.on  { background: var(--accent); }
.tab.end { background: #8a3b30; }

main { padding: 12px calc(14px + env(safe-area-inset-right))
              calc(60px + env(safe-area-inset-bottom))
              calc(14px + env(safe-area-inset-left)); }

/* ポータルの画面（ホーム）は、表が画面の残り全部を使う。
   下に余白があるとその分だけ行が減るので、ここだけ詰める。 */
.fit main { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  background: #f4f6f8; color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: bold;
  padding: 8px 16px; min-height: 40px; text-decoration: none; white-space: nowrap;
}
.btn:active     { transform: translateY(1px); }
.btn.primary    { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.teal       { background: var(--teal);   border-color: var(--teal);   color: #fff; }
.btn.slate      { background: var(--slate);  border-color: var(--slate);  color: #fff; }
.btn.danger     { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.small      { font-size: 13px; padding: 5px 11px; min-height: 32px; }
.btn.on         { box-shadow: inset 0 0 0 2px #1f2933; }

/* 画面の中のボタン列。上の帯には入れず、内容の頭に置く。 */
.pagebtns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* ---------- 絞り込みの箱 ---------- */
.filter {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; margin-bottom: 8px;
}
.filter .row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: flex-end; }
.filter label { display: flex; flex-direction: column; gap: 1px;
                font-size: 11.5px; color: var(--muted); }
.filter input, .filter select { min-height: 34px; }
.filter .btn { min-height: 34px; padding: 6px 14px; }
.filter .grow { flex: 1; min-width: 200px; }

/* 数字の欄の▲▼は使わないので消す（幅を取るだけなので）。 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

input[type=text], input[type=date], input[type=time], input[type=number],
input[type=search], input[type=password], select, textarea {
  font-family: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px;
  background: #fff; width: 100%;
}
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9fc2e8; outline-offset: -1px; }

/* 一覧の絞り込み。担当者と受注経路をボタンで選ぶ。
   FileMaker版 form_iPad_一覧 の並びを写している。 */
.listfilter { padding: 8px 10px; }
.listfilter .frow {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0;
}
.listfilter .frow + .frow { margin-top: 7px; padding-top: 7px;
                            border-top: 1px solid var(--line2); }
.listfilter .flabel {
  /* 「検索条件」のように長い見出しでも折り返さない。
     幅を決め打ちにすると2行になるので、44pxを下限にして伸ばす。 */
  flex: none; min-width: 44px; white-space: nowrap;
  font-size: 12px; color: var(--muted); font-weight: bold;
}
.listfilter .fbtns { display: flex; flex-wrap: wrap; gap: 4px; }
/* 期間は「開始日 [枠] 〜 終了日 [枠] リセット」を1行に並べる。
   .filter label の縦並びを打ち消すため flex-direction を書き直す。 */
.listfilter label { display: flex; flex-direction: row; align-items: center; gap: 5px;
                    font-size: 12px; color: var(--muted); }
.listfilter .tilde { color: var(--muted); }
.listfilter input.tp-ecal-input { width: 128px; min-height: 32px; padding: 4px 7px;
                                  font-size: 13px; text-align: center; }

/* 選ぶボタン。押してあるものは濃く塗る。 */
.pick {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; min-height: 32px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 5px; background: #f4f6f8;
  color: var(--ink); font-size: 13px; font-weight: bold;
  text-decoration: none; white-space: nowrap;
}
.pick:active { transform: translateY(1px); }
.pick.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 受注経路のボタンは担当者と役割が違うので、少し色を変えておく。 */
.pick.route { background: #e7eef4; border-color: #9db6cb; }
.pick.gap { margin-left: 18px; }
.pick.route.on { background: var(--slate); border-color: var(--slate); color: #fff; }

/* ---------- 表 ---------- */
.tablewrap { overflow-x: auto; background: var(--panel);
             border: 1px solid var(--line); border-radius: 6px; }

/* ポータル。FileMaker版の18行のスクロール領域にあたる。
   高さを画面の残りに合わせ、中身だけが縦に動く。iPadのSafariは 100vh が
   実際に見えている高さより大きいので、JavaScriptで測った値を --portal-h に入れる。
   その前でも形が崩れないよう、dvh を使った目安をここに書いておく。 */
.portal {
  height: var(--portal-h, calc(100dvh - 210px));
  min-height: 220px; overflow: auto;
}
.portal table.grid thead th { position: sticky; top: 0; z-index: 2; }

table.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
table.grid th {
  background: #dde4ea; color: #33414f; font-weight: bold; font-size: 12.5px;
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
  white-space: nowrap; position: sticky; top: 0;
}
table.grid td { padding: 5px 8px; border-bottom: 1px solid var(--line2);
                height: var(--row-h); vertical-align: middle; }
table.grid tbody tr:hover { background: #f2f7fc; }
table.grid td.num, table.grid th.right { text-align: right; }
table.grid td.num { font-variant-numeric: tabular-nums; }
table.grid td.mid, table.grid th.mid { text-align: center; padding: 2px 2px; }
table.grid td.no a { color: var(--accent); font-weight: bold; text-decoration: none; }
.nowrap { white-space: nowrap; }
.ellip  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 受付の一覧。横1023pxの画面に14列すべてが入るよう、文字も余白も詰める。
   幅は _rows.html の colgroup で決めているので、はみ出す文字は「…」で切る
   （マウスを乗せる・長押しすると全部出る）。 */
/* これを下回ると、幅を決めていない住所の列がつぶれて消えてしまう。
   狭いとき（iPadの縦向きなど）は、つぶさずに横スクロールさせる。 */
table.grid.rows { table-layout: fixed; font-size: 12px; min-width: 900px; }
table.grid.rows th { font-size: 11px; padding: 5px 4px; }
/* 行の高さは31px（下の罫線1pxを含む）。1画面に入る件数と読みやすさの兼ね合い。
   中に置くアイコンとステイタスの札も、この高さに収まるようにする。 */
table.grid.rows td {
  padding: 3px 4px; height: 30px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 行が低くなったぶんアイコンも小さいので、押す場所はセルいっぱいに広げる。
   指で狙いやすくするため。 */
/* inline-flex のままだと行に文字の「足」のぶんの空きができるので flex にする。 */
table.grid.rows .iconbtn { display: flex; width: 100%; height: 24px;
                           border-radius: 3px; }
table.grid.rows td.no { font-weight: bold; font-variant-numeric: tabular-nums; }

/* 表の中の丸いアイコンボタン（備考・詳細） */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--slate); text-decoration: none;
}
.iconbtn:hover  { background: #dce6f0; }
.iconbtn:active { background: #c6d6e6; }

/* ステイタスの札。地の色と文字の色は行ごとに style 属性で入る。 */
.status {
  display: inline-block; width: 100%; text-align: center;
  border-radius: 3px; padding: 0 3px; font-size: 11px; font-weight: bold;
  line-height: 1.45; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis;
}

.empty { padding: 30px; text-align: center; color: var(--muted); }
.total { margin: 8px 0 0; text-align: right; font-size: 13px; color: var(--ink2); }
.total b { font-size: 18px; color: var(--ink); }

/* ---------- モーダル（備考） ---------- */
/* ブラウザ標準のダイアログは画面の一番上に出て見た目が揃わないので、
   画面の中に同じ作りで出す。MM家事の確認ダイアログと同じ考え方。 */
.modal-back {
  position: fixed; inset: 0; background: rgba(20, 30, 40, .45); z-index: 90;
}
.modal {
  position: fixed; z-index: 91;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 40px)); max-height: 76vh;
  display: flex; flex-direction: column;
  background: var(--panel); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 16px; background: #dde4ea;
  border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0;
  font-weight: bold; font-size: 15px;
}
.modal-head span { flex: 1; }
/* 確認のダイアログ。 */
.modal.ask { width: min(420px, calc(100vw - 40px)); padding: 20px 22px 16px; }
/* 「保存できません」のような見出し。 */
.ask-title { margin: 0 0 8px; font-size: 15px; font-weight: bold; color: #8a2b21; }
.ask-msg { margin: 0 0 16px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.ask-btns { display: flex; justify-content: flex-end; gap: 10px; }
.ask-btns .btn { min-width: 108px; }

/* 備考は改行と全角スペースで整えて書かれているので、そのまま出す。 */
.modal-body {
  margin: 0; padding: 14px 16px; overflow: auto;
  font-family: inherit; font-size: 14px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- 入力フォーム ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 16px; margin-bottom: 12px;
}
.panel > h2 {
  margin: -14px -16px 12px; padding: 8px 16px;
  background: #dde4ea; border-bottom: 1px solid var(--line);
  border-radius: 5px 5px 0 0; font-size: 15px;
  display: flex; align-items: center; gap: 10px;
}
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
          gap: 10px 14px; }
.fields label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px;
                color: var(--muted); }
.fields label.wide { grid-column: 1 / -1; }
.fields label b { color: var(--ink); font-size: 13.5px; }
.req::after { content: " ※"; color: var(--danger); }

/* ---------- 顧客の登録・修正 ---------- */
/* FileMaker版 form_iPad_顧客登録 と同じ並び。1行ずつ横に置く。 */
/* 見出しは欄の左に置いて、1行にまとめる（お名前［枠］注文者◎フリガナ［枠］）。 */
.cust .crow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.cust .crow + .crow { margin-top: 6px; }
.cust label { display: flex; flex-direction: row; align-items: center; gap: 5px;
              font-size: 12.5px; color: var(--muted); }
.cust label b { flex: none; color: var(--ink); font-size: 13px; white-space: nowrap; }
.cust label input, .cust label select { flex: 1; min-width: 0; }
.cust .grow { flex: 1; min-width: 210px; }
.cust .w-code { width: 176px; }
.cust .w-kind { width: 166px; }
.cust .w-zip  { width: 168px; }
.cust .w-pref { width: 152px; }
.cust .w-tel  { width: 208px; }
.cust .w-token { width: 240px; }
.cust input, .cust select { min-height: 36px; }
.cust .btn.foot { min-height: 36px; padding: 5px 10px; }
/* 行の途中に置く見出し（住所）。 */
.cust .crow-label { flex: none; color: var(--ink); font-size: 13px; white-space: nowrap; }

/* 地図はアイコンだけ。空いた分は市町村以下の枠が広がる。 */
.cust .btn.foot.iconly { padding: 0; width: 40px; }

/* 連絡先1・連絡先2・メールアドレスは、枠の幅がそろうようにする。
   見出しの幅も同じにしないと枠がずれるので、そこも決め打ちにする。 */
.cust .crow.tels label { flex: 1 1 0; min-width: 220px; }
.cust .crow.tels label b { width: 58px; }
/* 確定・受付へ戻るは真ん中に置く。 */
.formbtns.center { justify-content: center; }
/* 打っている最中の行。確定するまでは仮の行だと分かるように色を変える。 */
table.grid.rows tr.typing td { background: #fff6da; font-weight: bold; }
/* 注文者のラジオ。上の行と下の行のどちらかを選ぶ。 */
.cust .orderer { display: flex; flex-direction: row; align-items: center; gap: 5px;
                 flex: none; font-size: 12.5px; color: var(--muted); }
.cust .orderer b { color: var(--ink); font-size: 13px; white-space: nowrap; }
.cust .orderer b.blank { visibility: hidden; }
.cust .radio { flex: none; gap: 0; min-height: 36px; width: 42px;
               justify-content: center; color: var(--ink);
               border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.cust .radio input { min-height: 0; width: 18px; height: 18px; margin: 0; }
/* 上下2段の欄（カテゴリ中項目／小項目、商品名／カナ）。 */
.cust .stack { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cust .stack input.sub { min-height: 28px; font-size: 12px; color: var(--muted); }
/* 下のポータル。入力欄のぶん場所を取るので、高さは控えめにする。 */
.cust-portal { --portal-h: 244px; }



.errors { background: #fde9e7; border: 1px solid #e8b4ae; border-radius: 6px;
          padding: 10px 14px; margin-bottom: 12px; color: #8a2b21; }
.errors ul { margin: 4px 0 0; padding-left: 20px; }
.notice { background: #fdf3d8; border: 1px solid #e2c67a; border-radius: 6px;
          padding: 9px 14px; margin: 0 0 12px;
          display: flex; align-items: center; gap: 8px; }

.formbtns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
/* 画面の説明書き。 */
.meta { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0 0 10px; }
.meta code { background: #eef1f3; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
/* 取り込みの記録。等幅で、そのまま読めるように出す。 */
.fmlog { margin-top: 12px; padding: 10px 12px; background: #f4f6f8;
         border: 1px solid var(--line); border-radius: 6px;
         font-family: "MS Gothic", monospace; font-size: 12.5px; line-height: 1.6;
         white-space: pre-wrap; max-height: 260px; overflow: auto; }
ul.meta { margin: 0; padding-left: 20px; }
.panel .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* マスタの「消す」はゴミ箱だけ。 */
.btn.small.iconly { padding: 0; width: 34px; min-height: 30px; }
/* 幅を決めたマスタの表は、指定した幅のとおりに出す。
   画面が狭いときは列を潰さず、枠の中で横にスクロールさせる
   （潰すと見出しが3行になったり、値が折り返したりするため）。 */
.master-portal table.grid.edit { table-layout: fixed; min-width: 958px; }

/* 行の多いマスタのポータル。顧客登録の下のポータルと同じ高さ。 */
.master-portal { --portal-h: 244px; }
/* 上下2段の欄を一覧に出すとき。上と下を別の行にして重ねない。 */
table.grid.rows td .line { display: block; overflow: hidden;
                           text-overflow: ellipsis; white-space: nowrap; }
table.grid.rows td em.line { font-style: normal; font-size: 11px; color: var(--muted); }
/* 一覧の見出しも、
 のところで改行して出す（カテゴリ中項目／小項目など）。 */
.master-portal table.grid.rows th { white-space: pre-line; vertical-align: bottom;
                                    font-size: 11.5px; }
/* ポータルと保存ボタンの間を少し空ける。 */
.master-portal + .formbtns { margin-top: 10px; align-items: center; }
/* 件数はポータルの右下。 */
.formbtns .count { margin-left: auto; font-size: 13px; color: var(--muted); }
/* 見出しの 
 をそこで改行して出す（お返し金…など）。
   欄が多いので、マスタの見出しは少し小さめにする。 */
/* 見出しは2段になる列があるので、上下の余白を詰めて高さを抑える。
   1段の見出しは上にそろえる（下にそろえると、上に1行ぶんの空きができるため）。 */
table.grid.edit th { white-space: pre-line; vertical-align: top; font-size: 11.5px;
                     padding: 5px 4px 2px; line-height: 1.25; }
/* ChatworkのIDは横文字で長いので、そこだけさらに小さくして1行に収める。 */
table.grid.edit th.h-chatwork_account_id,
table.grid.edit th.h-chatwork_room_id { font-size: 10px; }
/* お返し金まわりは列が狭いので、2行で収まるように小さくする。 */
table.grid.edit th.h-has_reward,
table.grid.edit th.h-reward_rate,
table.grid.edit th.h-reward_cap { font-size: 10.5px; }
/* 押して並べ替えられる見出し。 */
table.grid.edit th a { color: inherit; text-decoration: none;
                       border-bottom: 1px dotted #7d8b98; }
table.grid.edit th a:hover { color: #0b5b78; }
table.grid.edit th.sorted { background: #cfdae3; }
/* 何番目かを出すだけの欄。 */
table.edit td.rownum { text-align: center; color: var(--muted); font-size: 13px; }
/* チェックの欄は真ん中にそろえる。 */
table.edit td.mid { text-align: center; }
/* お返し金の率・上限値は真ん中にそろえる。 */
table.edit td.c-reward_rate input,
table.edit td.c-reward_cap input { text-align: center; }
/* 姓と名を1つの欄にまとめて置く。 */
/* 姓と名は詰めて並べる。 */
table.edit .pair { display: flex; gap: 2px; }
table.edit .pair input { min-width: 0; flex: 1; padding-left: 4px; padding-right: 2px; }
/* 上下2段の欄（中項目／小項目、商品名／カナ）。下段は小さめ。 */
table.edit .stack { display: flex; flex-direction: column; gap: 2px; }
table.edit .stack input.sub { min-height: 24px; font-size: 11px; color: var(--muted); }
/* 選ぶ欄（担当部門）は矢印のぶん狭いので、文字を一段小さくする。 */
table.edit select { font-size: 12px; padding-left: 4px; padding-right: 2px; }
/* ロック中のマスタ。直せないことが見て分かるようにする。 */
.lockmsg { font-size: 12.5px; color: var(--muted); }
#lockbtn span { display: inline-flex; align-items: center; gap: 6px; }
.pagebtns .spacer { flex: 1; }
/* ロック中は枠を消して、文字だけに見せる（管理画面のマスタは全部この形）。
   ロックを外すと枠が戻って直せるようになる。 */
form.locked table.edit input[type=text],
form.locked table.edit input[type=number],
form.locked table.edit input[type=date],
form.locked table.edit select {
  border-color: transparent; background: transparent; color: var(--ink);
  padding-left: 2px; padding-right: 2px;
  -webkit-appearance: none; appearance: none;
}
form.locked table.edit input::placeholder { color: transparent; }
/* 触れない・選べないようにする（文字だけの表として見せるため）。 */
form.locked table.edit input,
form.locked table.edit select {
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
/* チェックは印が要るので、そのまま出す（薄くするだけ）。 */
form.locked table.edit input[type=checkbox] { opacity: .8; }
form.locked .btn:disabled { opacity: .4; }
form.locked tr.new { opacity: .5; }

/* ---------- Chatwork送信テスト ---------- */
/* FileMaker版のテスト画面と同じ見た目。左に濃い色の見出し、右に入力欄。 */
.cwtest { border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
          background: var(--panel); }
.cwrow { display: flex; align-items: stretch; border-bottom: 1px solid #fff; }
.cwrow:last-child { border-bottom: none; }
.cwlabel { flex: none; width: 200px; display: flex; align-items: center;
           justify-content: center; background: #0b5b78; color: #fff;
           font-weight: bold; font-size: 14px; padding: 10px; }
.cwbody { flex: 1; display: flex; align-items: center; gap: 10px;
          background: #dde7e9; padding: 8px 10px; min-width: 0; }
.cwbody input[type=text] { background: #fff; }
/* 高さは180px。rows より CSS を優先させるため height を指定する。 */
.cwbody textarea { height: 180px; min-height: 180px; resize: vertical; background: #fff; }
.cwrow.tall .cwlabel { align-items: center; }
.cwnote { flex: none; font-size: 12.5px; color: #33414f; }
.cwtest .w-room { max-width: 300px; }
.cwfoot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cwfoot .spacer { flex: 1; }
/* 送信はアイコンを左に置いた横長のボタン。押し間違えないよう右端に離して置く。 */
.btn.send { gap: 8px; min-width: 132px; min-height: 46px; padding: 8px 20px;
            font-size: 18px; background: #7fc4ae; border-color: #7fc4ae; color: #fff; }
.btn.send:hover { background: #6fb9a1; }

/* ---------- 受付の入力画面 ---------- */
/* 電話を受けながら押すので、1画面に収めて上下に動かさなくてよいようにする。
   左に受付の基本と選ぶボタン、右にお客様と経路と備考。 */
.rcp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.rcp-col { display: flex; flex-direction: column; gap: 8px; }
.rcp .panel { padding: 8px 10px; margin: 0; }
.rcp .panel > h2 { margin: -8px -10px 7px; padding: 4px 10px; font-size: 12.5px; }

/* 1行に並べる欄。grow を付けたものが余った幅をもらう。 */
.rcp-line { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 6px; }
.rcp-line:last-child { margin-bottom: 0; }
.rcp-line > label { display: flex; flex-direction: column; gap: 1px;
                    font-size: 11.5px; color: var(--muted); }
.rcp-line > label b { color: var(--ink); font-size: 12px; }
.rcp-line .grow, .rcp-line > label.grow { flex: 1; min-width: 0; }
.rcp-line input, .rcp-line select { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.rcp-line .btn { min-height: 32px; padding: 4px 12px; }
.w-no     { width: 84px; }
.w-date   { width: 118px; }
.w-time   { width: 90px; }
.w-zip    { width: 92px; }
.w-market { width: 84px; }

/* 選ぶボタンの並び。指で押すので詰めすぎない。 */
.picks { display: flex; flex-wrap: wrap; gap: 4px; }
.rcp .picks .pick { min-width: 56px; min-height: 30px; padding: 2px 8px; font-size: 12.5px; }
/* 折り返さずに横1行へ収める（受注経路）。幅は等分にする。 */
.rcp .picks.oneline { flex-wrap: nowrap; }
.rcp .picks.oneline .pick { flex: 1; min-width: 0; padding: 2px 4px; }

.rcp-note { min-height: 74px; font-size: 13px; }
/* 全クリアを左、保存するを右に、同じ大きさで置く。 */
.rcp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rcp-foot .btn.wide { flex: 1; min-height: 46px; font-size: 16px; }

/* 狭い画面では1列にして、上から順に出す。 */
@media (max-width: 900px) {
  .rcp { grid-template-columns: 1fr; }
}

/* パネルの見出しにタブを載せる（お客様の 検索／お客様情報）。 */
.panel > h2.tabhead { display: flex; align-items: center; gap: 12px; }
.tabs2 { display: flex; gap: 0; margin-left: auto; }
.tab2 {
  border: 1px solid var(--line); background: #f4f6f8; color: var(--ink2);
  font: inherit; font-size: 12px; font-weight: bold; cursor: pointer;
  padding: 3px 12px; min-height: 26px;
}
.tab2:first-child { border-radius: 4px 0 0 4px; }
.tab2:last-child  { border-radius: 0 4px 4px 0; border-left: none; }
.tab2.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tabpane[hidden] { display: none; }
.tabnote { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* TELのテンキー。FileMaker版の受付画面にあった数字ボタンと同じで、
   出し入れせずに画面へ置いておく。 */
.telarea { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.telpad { display: grid; grid-template-columns: repeat(3, 58px); gap: 5px; flex: none; }
.telpad .btn { min-height: 38px; padding: 0; font-size: 17px; }
.telpad .btn[data-del], .telpad .btn[data-back] { font-size: 13px; }
.telside { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.telside .btn.tall { min-height: 48px; font-size: 16px; }

/* 検索条件の見出し（顧客検索結果の画面） */
.listfilter .cond { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.listfilter .cond b { color: var(--ink); }
.listfilter .spacer { flex: 1; }
.w-tel { width: 132px; }

/* ---------- 顧客検索 ---------- */
.cust-hits { border: 1px solid var(--line); border-radius: 5px; max-height: 190px;
             overflow-y: auto; margin-bottom: 6px; display: none; background: #fff; }
.cust-hits.open { display: block; }
.cust-hit { padding: 5px 9px; border-bottom: 1px solid var(--line2); cursor: pointer; }
.cust-hit:hover { background: #eef5fc; }
.cust-hit b { font-size: 15px; }
.cust-hit span { color: var(--muted); font-size: 12.5px; margin-left: 8px; }

/* ---------- 詳細（進捗入力） ---------- */
/* FileMaker版 form_iPad_進捗入力 と同じ見た目。
   ステータスの流れ／モニター／基本情報／顧客情報 の4つを縦に並べ、
   iPadの1画面（748px）に収まる高さにしている。 */
.prog { display: flex; flex-direction: column; gap: 10px; }
.pbox { background: #e9e9e9; border-radius: 8px; padding: 8px 10px; }
.phead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.phead .ptitle { font-size: 15px; font-weight: bold; color: #55606b;
                 white-space: nowrap; }
.phead .spacer { flex: 1; }
.pbox .status { flex: none; width: auto; font-size: 13px; padding: 3px 16px;
               border-radius: 3px; }

/* 流れ。担当者 › 連絡 › 予定納品 … と横に並べる。 */
.chain { display: flex; align-items: stretch; gap: 3px; flex-wrap: nowrap; }
.chain .arrow { display: flex; align-items: center; color: #4a7ba8; flex: none; }
.chain .spacer { flex: 1; }
.chain .who {
  flex: none; display: flex; align-items: center; justify-content: center;
  flex: 0 1 100px; min-width: 74px; padding: 6px 8px; border-radius: 5px;
  background: #7b1113; color: #fff; font-size: 19px; font-weight: bold;
  white-space: nowrap;
}

/* 日付ひとつぶん。上に見出し、下にカレンダーの枠。 */
.step { flex: none; width: 104px; }
.step .steplabel {
  height: 26px; display: flex; align-items: center; justify-content: center;
  background: #7f8c96; color: #fff; font-size: 13px; font-weight: bold;
  border-radius: 4px 4px 0 0;
}
.step.on .steplabel { background: #8e1c1c; }
.step input.tp-ecal-input {
  width: 100%; min-height: 30px; padding: 3px 20px 3px 3px;
  font-size: 11.5px; text-align: center; border-radius: 0 0 4px 4px;
  background-position: right 4px center !important;
}

/* 発注伝票と出庫処理をまとめた「工事中」。 */
/* 「工事中」は幅を決めず、余った場所を吸う。
   画面が狭いときはここが縮むので、流れが1行に収まる。 */
.phase { flex: 1 1 auto; min-width: 64px; display: flex; align-items: center;
         justify-content: center; background: #a6a6a6; border-radius: 5px;
         padding: 4px; }
.phase .phasetitle { color: #fff; font-size: 15px; font-weight: bold;
                     text-align: center; }

/* 完了ボタン。 */
.btn.done { flex: 0 0 auto; background: #9aa4ad; border-color: #9aa4ad; color: #fff;
            min-height: 36px; padding: 6px 14px; align-self: center; }
.btn.done.on { background: #3d6285; border-color: #3d6285; }

/* モニターの帯。左に縦書きの見出しを置く。 */
.pbox.mon { display: flex; align-items: center; gap: 8px; }
.pbox.mon .side { flex: none; width: 14px; font-size: 11px; font-weight: bold;
                  color: #55606b; line-height: 1.05; word-break: break-all; }
.pbox.mon .chain { flex: 1; }
.yn { flex: none; display: flex; flex-direction: column; gap: 3px; width: 96px; }
.yn .btn { min-height: 26px; font-size: 12px; padding: 2px 6px;
           background: #7f8c96; border-color: #7f8c96; color: #fff; }
.yn .btn.on { background: #8e1c1c; border-color: #8e1c1c; }

/* 基本情報・顧客情報。見出しの帯＋値の枠を横に並べる。 */
.pbox.info .cells { display: flex; align-items: stretch; gap: 3px; flex-wrap: nowrap; }
.pbox.info .cells + .cells { margin-top: 6px; }
.pbox.info .cell { flex: none; width: 84px; }
.pbox.info .cell.grow { flex: 1; min-width: 120px; }
.pbox.info .cell b {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px; background: #1e7f9c; color: #fff;
  font-size: 13px; border-radius: 4px 4px 0 0;
}
.pbox.info .cell span {
  display: block; min-height: 30px; padding: 5px 6px; background: #fff;
  border-radius: 0 0 4px 4px; font-size: 14px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pbox.info .cell.w-no span { font-weight: bold; }
/* 名前の下に小さく出す組織員コード。 */
.pbox.info .cell span em { display: block; margin-top: -2px; font-style: normal;
                           font-size: 10.5px; color: #b06a00; line-height: 1.1; }
.pbox.info .arrow { display: flex; align-items: center; color: #4a7ba8; }
.cust-info .cell b { background: #3aa9a2; }
.cust-info .cell.w-name { width: 170px; }
.cust-info .cell.w-tel { width: 132px; }
.cust-info .cell.w-note { width: 270px; }
.cust-info .cell span { text-align: left; }
.cust-info .maplink { display: inline-flex; color: #fff; }

/* 「自動計算」の囲み。紹介者からお礼金までが自動で決まることを示す。
   線の左右は上向きに立ち上げて、上の欄につながって見えるようにする。 */
.autocalc { position: relative; height: 20px; margin-top: 2px; }
.autocalc .bracket { position: absolute; top: 2px; height: 9px;
                     border: 1px solid #4a7ba8; border-top: none; }
.autocalc .bracket i { position: absolute; left: 50%; bottom: -8px;
                       transform: translateX(-50%); background: #e9e9e9;
                       padding: 0 8px; font-size: 11px; font-style: normal;
                       color: #4a7ba8; white-space: nowrap; }

/* 変えた記録。ふだんは畳んでおく。 */
.hist { margin-top: 8px; font-size: 12.5px; color: var(--ink2); }
.hist summary { cursor: pointer; color: var(--muted); }
.hist ul { margin: 6px 0 0; padding-left: 20px; max-height: 180px; overflow: auto; }
.hist li { margin-bottom: 2px; }

/* ---------- 管理 ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 12px; }
.card { display: block; background: var(--panel); border: 1px solid var(--line);
        border-radius: 6px; padding: 20px 16px; text-decoration: none;
        color: var(--ink); font-size: 17px; font-weight: bold; text-align: center; }
.card:active { background: #eef5fc; }
/* アイコンは文字の上に置く。管理画面のボタンをFileMaker版と同じ大きさに見せる。 */
.card .icon { display: block; margin: 0 auto 8px; color: var(--accent); }
.card small { display: block; font-weight: normal; font-size: 12.5px;
              color: var(--muted); margin-top: 4px; }

/* 行を少し低くして、ポータルに決めた行数がそのまま入るようにする。
   文字は少し小さめ。欄が縮めるように最低幅も下げてある（店名を広く取るため）。 */
table.edit input[type=text], table.edit input[type=number],
table.edit input[type=date], table.edit select { min-width: 0; padding: 3px 6px;
                                                 min-height: 30px; font-size: 13px; }
table.edit td { padding: 2px 3px; }
table.edit tr.new { background: #f5faff; }

/* ---------- 狭い画面 ---------- */
/* 幅の広い表が中心の画面（顧客・管理）は、スマホでは扱いにくいのでタブを出さない。
   MM家事の一覧・管理と同じ考え方。URLを直に開けば見られる。 */
@media (max-width: 700px) {
  .wide-only { display: none; }
  .topbar { gap: 8px; }
  .topbar .today { font-size: 15px; }
  .topbar .today .label { display: none; }
  .tab { width: 74px; font-size: 13px; }
  .tabs { order: 9; width: 100%; }
  .tab, .tab:last-child { border-left: none; border-right: none;
                          border-top: 1px solid rgba(255,255,255,.18); flex: 1; }
  .tab { min-height: 46px; }
}

/* ---------- ログイン（MM家事と同じ見た目） ---------- */
.loginpage {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--bar); margin: 0;
}
.loginbox {
  background: #fff; border-radius: 10px; padding: 28px 30px;
  width: min(360px, 90vw);
}
.loginbox h1 { font-size: 19px; margin: 0 0 18px; color: var(--bar); text-align: left; }
.loginbox input[type=password],
.loginbox input[type=text] { width: 100%; }
.loginbox label { display: block; font-size: 13px; color: var(--muted); }
.loginbox label + label { margin-top: 12px; }
.loginbox .btn { width: 100%; margin-top: 16px; }
.loginbox .error {
  margin: 0 0 12px; padding: 8px 11px; border-radius: 8px;
  background: #f7dcd8; color: #8a2b1e; font-size: 14px;
}

.panel > h2 .btn { margin-left: auto; font-weight: normal; }
/* 取り込みの結果。見出しの横に赤字で出す。 */
.panel > h2 .done { color: var(--danger); font-size: 14px; }

/* ---- パスワードの設定（初回ログイン、MM家事と同じ見た目） ---- */
.loginbox.wide { width: min(430px, 92vw); }
.loginbox .pwlead {
  margin: 0 0 12px; padding: 10px 12px; font-size: 14px; line-height: 1.6;
  background: #fdecea; color: var(--danger); border-radius: 8px;
}
.loginbox .pwwho { margin: 0 0 14px; font-size: 14px; }
.loginbox .pwrules {
  margin: 12px 0 0; padding: 9px 11px; font-size: 12.5px; line-height: 1.6;
  background: #eef2f5; border-radius: 8px;
}
.loginbox .pwback { margin: 14px 0 0; text-align: center; font-size: 14px; }