body { margin: 0; font: 16px/1.6 "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; background: #edf0ea; color: #19231c; }
.top { background: #1d5a3a; padding: 14px 16px; }
.top a { color: #fff; font-size: 20px; font-weight: bold; text-decoration: none; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 8px 0 16px; }
.card { background: #fff; border: 1px solid #d3dacf; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.sub { color: #58665c; font-size: 15px; }
.empty { color: #58665c; padding: 24px 0; }
.error { background: #fbe9e7; border-left: 5px solid #b53a2d; padding: 10px 14px; border-radius: 8px; }
form label { display: block; margin-bottom: 14px; font-weight: bold; font-size: 14px; color: #58665c; }
form input, form textarea { display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin-top: 4px; padding: 10px 12px; font: inherit; border: 1.5px solid #d3dacf; border-radius: 10px; }
.btn { display: block; width: 100%; box-sizing: border-box; min-height: 54px; line-height: 54px; text-align: center; border: 0; border-radius: 10px; background: #f0c53d; color: #19231c; font-size: 18px; font-weight: bold; font-family: inherit; text-decoration: none; cursor: pointer; margin-top: 8px; padding: 0; }

/* 一覧のカードをリンクにしたとき：下線や青文字を消し、押せることがわかるよう右に「›」を出す */
.card-link { display: block; position: relative; padding-right: 40px; color: inherit; text-decoration: none; }
.card-link::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; color: #58665c; }
.card-link:active { background: #f5f8f2; }

/* 詳細ページ */
h2 { font-size: 17px; margin: 0 0 10px; color: #1d5a3a; }
.info { margin: 0; }
.info dt { font-size: 14px; color: #58665c; }
.info dd { margin: 0 0 10px; font-size: 17px; }
.info a { color: #1d5a3a; font-weight: bold; }
.row { padding: 10px 0; border-top: 1px solid #e6eae3; }
.row:first-of-type { border-top: 0; padding-top: 0; }
.tag { display: inline-block; margin-left: 6px; padding: 0 8px; font-size: 13px; background: #e3efe6; color: #1d5a3a; border-radius: 999px; }
.btn-sub { background: #fff; border: 1.5px solid #d3dacf; }
.lead { margin: -10px 0 12px; }

/* 詳細ページのカード見出し：右に「編集」ボタン（指で押しやすいよう高さ44px以上） */
.sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sec-head h2 { margin: 0; }
.edit { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 18px; border: 1.5px solid #1d5a3a; border-radius: 10px; color: #1d5a3a; font-weight: bold; text-decoration: none; }

/* 編集ページ */
form textarea { resize: vertical; line-height: 1.5; }
/* 選択式：ラジオボタン本体は隠し、隣の文字（span）を大きなボタンに見せる。
   :checked＋span で「選ばれているもの」だけ色を変える */
.choices { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choices legend { padding: 0; margin-bottom: 4px; font-weight: bold; font-size: 14px; color: #58665c; }
.choices label { margin: 0; flex: 1 1 80px; }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; }  /* form input の幅100%を打ち消す（横スクロール防止） */
.choices span { display: block; min-height: 52px; line-height: 48px; text-align: center; border: 2px solid #d3dacf; border-radius: 10px; background: #fff; color: #19231c; font-size: 16px; }
.choices input:checked + span { border-color: #1d5a3a; background: #1d5a3a; color: #fff; }
.choices input:focus-visible + span { outline: 3px solid #f0c53d; outline-offset: 2px; }

/* 作付・出荷：品目ごとの「編集」「削除」ボタン */
.row-actions { display: flex; gap: 8px; margin-top: 8px; }
.edit.danger { border-color: #b53a2d; color: #b53a2d; }
/* 削除の確認画面 */
.big { font-size: 20px; }
.btn-danger { background: #b53a2d; color: #fff; }

/* 案内（エラーではないお知らせ） */
.notice { background: #e4ebe0; border-left: 5px solid #1d5a3a; padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; }
.notice a { color: #1d5a3a; font-weight: bold; display: inline-block; min-height: 44px; line-height: 44px; }

/* 一覧カード：未完了の約束の件数、予定日を過ぎた次回訪問 */
.badge { display: inline-block; margin-left: 6px; padding: 0 10px; border-radius: 999px; background: #f0c53d; color: #19231c; font-size: 13px; font-weight: bold; }
.late { color: #b53a2d; font-weight: bold; font-size: 15px; }

/* 詳細ページ：次回訪問予定 */
.next { background: #e4ebe0; border-radius: 14px; padding: 12px 16px; margin: 12px 0; }
.next strong { font-size: 20px; margin: 0 8px; }
.next.overdue { background: #fbe9e7; color: #b53a2d; }
.next.overdue .sub { color: #b53a2d; }

/* 生産者の声：左に線を引いて、自分のメモ（ひとこと）と区別する */
.voice { padding-left: 12px; border-left: 4px solid #d3dacf; color: #58665c; margin: 4px 0; }

/* 約束：左にチェックボタン（指で押しやすいよう44px）、右に約束の文 */
.promise { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0; }
.chk { flex: none; width: 44px; height: 44px; border: 2px solid #58665c; border-radius: 10px; background: #fff; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0; }
.chk.on { background: #2e7d46; border-color: #2e7d46; }
.promise .done { text-decoration: line-through; color: #58665c; }
.promise div { padding-top: 9px; }

/* 訪問の入力：「詳しく記録する」の折りたたみ */
details.more { margin: 0 0 14px; }
details.more summary { min-height: 48px; line-height: 48px; font-weight: bold; color: #1d5a3a; cursor: pointer; }

/* hidden 属性の付いたものは必ず隠す（form input の display:block が hidden に勝ってしまうため） */
[hidden] { display: none !important; }

/* 訪問の入力：写真 */
.photos { border: 0; margin: 0 0 14px; padding: 0; }
.photos legend { padding: 0; margin-bottom: 4px; font-weight: bold; font-size: 14px; color: #58665c; }
.photo-buttons { display: flex; gap: 8px; }
.photo-buttons .btn { flex: 1; margin-top: 0; font-size: 16px; position: relative; }
/* JavaScriptが動いているときだけ、選択欄そのものを隠してボタン（label）だけを見せる。
   label を押すと、中の選択欄が押されたのと同じになる */
.photos.js .photo-buttons input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; }
.photos:not(.js) .photo-buttons { flex-direction: column; }
.photos:not(.js) .photo-buttons .btn { line-height: 1.4; padding: 10px; height: auto; }
.photo-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.photo-preview div { position: relative; }
.photo-preview img { display: block; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }
.photo-preview button { position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; background: #19231c; color: #fff; font-size: 16px; line-height: 1; padding: 0; cursor: pointer; }
.photo-count { margin: 6px 0 0; }

/* 詳細ページ：小さい写真の並び */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.thumbs img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 8px; background: #e4ebe0; }

/* 写真を大きく見るページ・削除の確認 */
.photo-large { display: block; width: 100%; height: auto; border-radius: 10px; background: #e4ebe0; }
.photo-confirm { display: block; width: 160px; height: 160px; object-fit: cover; border-radius: 8px; margin-top: 8px; }
.danger-text { color: #b53a2d; border-color: #b53a2d; }

/* ヘッダー：ログイン中の人の名前とログアウトのボタン */
.top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.logout { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; font-size: 14px; }
.logout span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout button { min-height: 40px; padding: 0 12px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 8px; background: transparent; color: #fff; font: inherit; cursor: pointer; }

/* ヘッダーの「パスワード変更」リンク */
.logout a { color: #fff; font-size: 13px; font-weight: normal; white-space: nowrap; min-height: 40px; line-height: 40px; }
/* 狭い画面（スマホ）では名前を隠して、リンクとボタンを優先する */
@media (max-width: 380px) { .logout span { display: none; } }

/* 完了のお知らせ */
.done-message { background: #e3efe6; border-left: 5px solid #2e7d46; padding: 10px 14px; border-radius: 8px; }

/* 作付けを始める：圃場のチェックリスト（1行ずつ、指で押しやすい高さ） */
.checklist { border: 0; margin: 0 0 14px; padding: 0; }
.checklist legend { padding: 0; margin-bottom: 4px; font-weight: bold; font-size: 14px; color: #58665c; }
.checklist label { display: flex; gap: 12px; align-items: center; min-height: 56px; margin: 0; padding: 6px 4px; border-bottom: 1px solid #e6eae3; color: #19231c; font-weight: normal; font-size: 16px; }
.checklist label > span { display: flex; flex-direction: column; }
/* チェックボックス：form input の「幅100%」を打ち消して、押しやすい大きさにする */
.checklist input[type="checkbox"], .checklist input[type="radio"], .check-line input[type="checkbox"] { display: inline-block; flex: none; width: 26px; height: 26px; min-height: 0; margin: 0; }
.checklist .now { color: #9a6b00; }
.check-line { display: flex; gap: 10px; align-items: center; min-height: 48px; margin: 8px 0 0; color: #19231c; font-size: 16px; }

/* 詳細ページ：作付け中の品目の一覧（1行ずつ押せる。右に「›」） */
.item-link { display: flex; flex-direction: column; position: relative; padding: 10px 36px 10px 0; border-top: 1px solid #e6eae3; color: inherit; text-decoration: none; }
.item-link:first-of-type { border-top: 0; }
.item-link::after { content: "›"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 28px; color: #58665c; }
.item-link:active { background: #f5f8f2; }
.item-link .tag { align-self: flex-start; margin: 2px 0; }
.tag.warn { background: #fdf0c8; color: #7a5600; }

/* 品目のページ：作付け1件分の行（左にチェック、右に中身） */
.crop-line { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid #e6eae3; }
.crop-line:first-of-type { border-top: 0; }
.crop-check { flex: none; margin: 0; padding-top: 2px; }
.crop-check input { display: block; width: 28px; height: 28px; min-height: 0; margin: 0; }
.crop-body { flex: 1; min-width: 0; }
.plot-name { color: #1d5a3a; font-weight: bold; }
.days { color: #1d5a3a; }
.row-actions .visit-btn { flex: 1; margin-top: 0; min-height: 48px; line-height: 48px; font-size: 17px; }
.row-actions form { margin: 0; }
/* ボタン（button）にも「編集」と同じ見た目を使えるように */
button.edit { background: #fff; font: inherit; font-weight: bold; cursor: pointer; }

/* 圃場の一覧：検索欄とボタンを横に並べる */
.search { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.search input[type="search"] { flex: 1; margin-top: 0; }
.search .btn { width: auto; flex: none; margin-top: 0; padding: 0 18px; min-height: 48px; line-height: 48px; }
/* 圃場の一覧の1行：圃場のページへのリンク（左）と「地図」（右）を横に並べる */
.plot-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid #e6eae3; }
.plot-row:first-of-type { border-top: 0; }
.plot-row .item-link { flex: 1; min-width: 0; border-top: 0; }
.map-link { flex: none; min-height: 44px; line-height: 44px; padding: 0 12px; border: 1.5px solid #1d5a3a; border-radius: 10px; color: #1d5a3a; font-weight: bold; text-decoration: none; }
/* 一覧の休止の行は薄く出す */
.plot-row.rest { color: #58665c; background: #f4f5f2; }
/* 訪問記録の圃場名 */
.plot-label { display: inline-block; margin-left: 6px; font-weight: bold; color: #1d5a3a; }

/* 訪問の入力：どこの何の記録か（いちばん上） */
.visit-target { background: #fff; border: 2px solid #1d5a3a; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.hint { margin: -8px 0 14px; }
.end-crop { margin: 0 0 8px; padding: 8px 12px; background: #fdf0c8; border-radius: 10px; }
/* 品目のページ：記録後の「同じ品目の次の圃場へ」（いちばん押すボタンなので大きく） */
.next-btn { margin-top: 10px; }

/* 圃場のページ：地図のボタン（2つ並べる）と場所・行き方 */
.map-btns { display: flex; gap: 8px; }
.map-btns .btn { flex: 1; margin-top: 0; }
.access-head { margin: 12px 0 4px; }
.access-note { margin: 0; }

/* 圃場のまとめて登録：確認画面の分け方（登録するものは緑の線、登録しないものは黄色の線） */
.bulk-group { border-left: 5px solid #d3dacf; }
.bulk-new { border-left-color: #2e7d46; }
.bulk-skip { border-left-color: #f0c53d; }
.bulk-list { margin: 0; padding-left: 0; list-style: none; }
.bulk-list li { padding: 6px 0; border-top: 1px solid #e6eae3; overflow-wrap: anywhere; }
.bulk-list li:first-child { border-top: 0; }

/* 圃場の編集：「現在地を入れる」ボタンと結果（.notice・.error の見た目を使い、間隔だけ整える） */
.geo-tools { margin: -6px 0 14px; }
.geo-tools .btn:disabled { opacity: .6; cursor: default; }
.geo-note { margin: 4px 0 0; }
.geo-result { margin: 8px 0 0; }
/* 誤差が大きいときの「この位置で入れる」「もう一度測る」（横に2つ並べる） */
.geo-actions { display: flex; gap: 8px; }
.geo-actions .btn { flex: 1; font-size: 16px; }

/* 訪問の記録：「いまの時刻を入れる」ボタンと案内（「現在地を入れる」と同じ間隔にそろえる） */
.time-tools { margin: -6px 0 14px; }
.time-note { margin: 4px 0 0; }

/* 業務日報（daily.php） */
.print-only { display: none; }
/* 前の日・今日・次の日：横に並べ、指で押しやすい高さ（.edit の見た目を使う） */
.daily-nav { display: flex; gap: 8px; margin-bottom: 10px; }
.daily-nav .edit { flex: 1; text-align: center; padding: 0 8px; }
/* 日付・担当者・表示：スマホでは縦に、広い画面では横に並べる */
.daily-form { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: flex-end; }
.daily-form label { flex: 1 1 150px; }
.daily-form select { display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin-top: 4px; padding: 10px 12px; font: inherit; border: 1.5px solid #d3dacf; border-radius: 10px; background: #fff; color: #19231c; }
.daily-form .btn { flex: 1 1 100%; margin: 0 0 14px; }
/* 見出し：「業務日報」の下に日付と担当者 */
.daily-title span { display: block; font-size: 17px; font-weight: normal; margin-top: 2px; }
/* 1日のまとめ：数字を大きく、4つを横に並べる */
.daily-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 4px; }
.daily-summary div { background: #fff; border: 1px solid #d3dacf; border-radius: 10px; padding: 6px 4px; text-align: center; font-size: 13px; color: #58665c; }
.daily-summary strong { display: block; font-size: 22px; color: #19231c; }
.daily > .btn[data-print] { margin-bottom: 12px; }
/* 生産者のまとまり：名前（生産者のページへのリンク）と件数 */
.daily-producer h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.daily-producer h2 a { color: #1d5a3a; }
.daily-producer h2 .sub { flex: none; font-weight: normal; }
/* 訪問1件分 */
.daily-visit { padding: 10px 0; border-top: 1px solid #e6eae3; }
.daily-visit:first-of-type { border-top: 0; padding-top: 0; }
.daily-visit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.daily-visit-head .plot-label, .daily-visit-head .tag { margin-left: 0; }
.daily-time { font-size: 18px; min-width: 3em; }
.daily-time.unknown { font-size: 14px; color: #9a6b00; }
.daily-marks { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; }
/* 文の項目：ラベル（左）と中身（右）。狭い画面でもラベルの幅は 6em に固定する */
.daily-texts { display: grid; grid-template-columns: 6em 1fr; gap: 4px 8px; margin: 6px 0 0; }
.daily-texts dt { font-size: 13px; color: #58665c; padding-top: 2px; }
.daily-texts dd { margin: 0; overflow-wrap: anywhere; }
.daily-texts .tag { margin-left: 4px; }
.daily-thumbs img { width: 72px; height: 72px; }
.daily-printed { text-align: right; font-size: 9pt; color: #58665c; }

/* 印刷（ブラウザの印刷・PDFに保存）。紙に要らないもの（ヘッダー・ボタン・選ぶ欄・案内）は出さない */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .top, .no-print { display: none !important; }
  .print-only { display: block; }
  main { max-width: none; margin: 0; padding: 0; }
  a { color: inherit !important; text-decoration: none; }
  h1.daily-title { font-size: 16pt; margin: 0 0 4mm; }
  .daily-title span { font-size: 11pt; }
  .daily-summary { gap: 2mm; margin-bottom: 4mm; }
  .daily-summary div { border-color: #999; padding: 1mm; font-size: 9pt; color: #000; }
  .daily-summary strong { font-size: 14pt; color: #000; }
  .card { border: 1px solid #999; border-radius: 0; padding: 3mm 4mm; margin-bottom: 4mm; }
  .daily-producer h2 { font-size: 12pt; color: #000; break-after: avoid; }
  .daily-producer h2 a { color: #000 !important; }
  /* 訪問1件の途中ではページを切らない */
  .daily-visit { break-inside: avoid; padding: 2mm 0; border-top-color: #ccc; }
  .daily-time { font-size: 11pt; }
  .daily-time.unknown { font-size: 9pt; color: #000; }
  .sub, .daily-texts dt { color: #333; font-size: 9pt; }
  .tag, .tag.warn { background: none; border: 1px solid #999; color: #000; }
  .plot-label { color: #000; }
  .daily-thumbs { gap: 2mm; }
  .daily-thumbs img { width: 28mm; height: 28mm; border-radius: 0; }
}

/* 日報へのリンク */
/* 生産者一覧の「今日の業務日報」 */
.daily-btn { margin: -6px 0 14px; }
/* 訪問記録の日付（押すとその日の日報）。押せることが分かるよう緑の下線、指で押しやすいよう上下に余白 */
.day-link { display: inline-block; padding: 4px 0; color: #1d5a3a; text-decoration: underline; text-underline-offset: 3px; }
/* 画面右上：「日報」が増えたので、狭い画面で入りきらないときは2行目に折り返す（横にはみ出さないように） */
.top { flex-wrap: wrap; }
@media (max-width: 380px) { .logout { gap: 6px; } }