/* おさき農場オンラインシステム 共通テーマ
   ─────────────────────────────────────────────
   配色は「ユメジム」（../tosayama_jimu/webapp/static/theme.css）の考え方をそのまま引き継ぐ。
   コンセプト：温かみ・農・親しみ・統一感
     背景＝クリーム／主役＝セージグリーン／アクセント＝オレンジ／文字＝温かいこげ茶

   ★色を変えたいときは、この :root の値だけを変える（画面ごとに色を書かない）。
     テンプレートに色を直書きすると、片方だけ直されて画面ごとに色が食い違う
     （CLAUDE.md §4-1「単一の情報源」）。

   ★文字（font-family・大きさ）とボタンの見た目は**ユメジムの実物に合わせてある**
     （ユーザー指示・2026-08-08）。ユメジムのボタンは**べた塗り**で、
     グラデーションを使っているのはヘッダーの「GO」だけ。ここでも使わない。

   ★この画面はスマホ（鶏舎で片手・手袋のまま）で使う。
     **文字の大きさはユメジムどおり**にしたが、押す場所（ボタンの高さ・幅）は
     ユメジムの全幅ボタン（padding:16px・1.12rem）に合わせて大きいまま。小さく詰めないこと。
*/
:root{
  /* ── ユメジムから引き継ぐ色 ── */
  --cream:#faf4ec;        /* ページ背景：温かいクリーム */
  --green:#9cbf94;        /* セージグリーン：補助・枠の強調 */
  --green-deep:#6b9d63;   /* 濃い緑：見出し・主要ボタン */
  --action:#4ba36d;       /* 主要ボタン・アクティブ：優しく目立つ若葉の緑 */
  --action-deep:#3c8b58;  /* その押下・ホバー */
  --orange:#e69150;       /* オレンジ：アクセント・お知らせ */
  --orange-deep:#d97d2e;
  --terracotta:#c0563f;   /* 注意の赤茶 */
  --beige:#ece4d8;        /* ベージュ：パネル・フッター */
  --beige-line:#ddd0bf;   /* やわらかい罫線 */
  --ink-main:#4a4138;     /* 文字：温かいダークブラウン */
  --ink-soft:#8a7e70;     /* 補助文字 */
  --card:#ffffff;
  /* 上の帯（.topbar）の地色。
     ★スマホのブラウザの上端の色（theme-color）にも同じ値を使う。
       ここが帯と違うと、ホーム画面から開いたときに**帯の上だけ別の色の線**が出る。
       → main.py の /manifest.webmanifest がこの値を読む。直書きしない。 */
  --topbar:#ffffff;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 2px 12px rgba(120,95,60,.10);
  --font:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;

  /* 入力例（placeholder）の色。**本文よりはっきり薄く**する。
     【なぜ・とさやまで現場から指摘】ブラウザ既定の入力例は濃く、
     「すでに入力された値」に見えてしまい、空欄のまま保存されたつもりで進む。
     ★補助文字（--ink-soft）を流用しないこと＝補助文字は読ませる文字なので濃い。
     ★薄さの下限は入力欄の地色＝**白**との対比で見る（背景のクリームではない）。 */
  --placeholder:#d2c9be;

  /* ── 旧テーマからの別名（テンプレートの style="…var(--line)…" 等が
        いまも参照している。消すと罫線が消えるので残す）── */
  --line:var(--beige-line);
  --ink:var(--ink-main);
  --sub:var(--ink-soft);
  --bg:var(--cream);
  --accent:var(--green-deep);
  --warn:var(--terracotta);
  --ok:#2f5d28;
}

*{ box-sizing:border-box; }
/* 文字はユメジムと同じ（ヒラギノ角ゴ ProN → 游ゴシック → メイリオ）。
   大きさもユメジムに合わせて既定の 16px。行間だけは日本語が詰まって見えないよう
   1.7 を明示する（ユメジムは画面ごとに 1.6〜1.8 を指定している）。 */
body{
  margin:0; background:var(--cream); color:var(--ink-main);
  font-family:var(--font); font-size:16px; line-height:1.7;
  -webkit-text-size-adjust:100%;
}

/* 入力例は、入力済みの文字とはっきり見分けがつく薄さにする（理由は :root のコメント）。
   ★全画面に効かせるため、ここ1か所で指定する。濃く戻さないこと。 */
input::placeholder, textarea::placeholder{ color:var(--placeholder); opacity:1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color:var(--placeholder); }
input::-moz-placeholder, textarea::-moz-placeholder{ color:var(--placeholder); opacity:1; }

/* ===== 上部の帯（ヘッダー） =====
   ユメジムと同じく**白地**にして、システム名をこげ茶で読ませる。
   クリームの背景とは、やわらかい罫線＋うすい影で分ける（濃い帯で塗りつぶさない）。
   ★スクロールしても残す（sticky）＝どの位置からでもホームへ戻れる（出口を失わせない）。 */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--topbar); color:var(--ink-main);
  padding:.7rem 1rem;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  border-bottom:1px solid var(--beige-line);
  box-shadow:0 1px 8px rgba(120,95,60,.06);
}
.topbar .brand{
  margin-right:auto; min-width:0;
  display:inline-flex; flex-direction:column; line-height:1.18;
  text-decoration:none; color:var(--ink-main);
}
.topbar a.brand:hover{ opacity:.82; }
/* システム名は正式名をそのまま出す（勝手に略さない・CLAUDE.md §0）。
   スマホの狭い幅では折り返す＝切り捨てない。 */
.topbar .brand-name{ font-weight:bold; font-size:1.12rem; color:var(--ink-main); }
.topbar .brand-sub{ font-size:.78rem; font-weight:600; color:#6f6052; }

/* ログイン中の人／ログアウト。ユメジムの丸いチップに合わせる。 */
.topbar .who{
  display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.85rem; color:var(--ink-soft);
}
.topbar .who .role{
  font-size:.72rem; font-weight:bold; color:#fff; background:var(--green-deep);
  border-radius:6px; padding:2px 8px;
}
.topbar .who a{
  color:var(--ink-main); background:var(--cream); border:1px solid var(--beige-line);
  border-radius:999px; padding:.4rem .9rem; font-size:.85rem; font-weight:bold;
  text-decoration:none; white-space:nowrap;
}
.topbar .who a:hover{ background:#fff; border-color:var(--green); }

/* ===== ジャンル別のバナー（パソコン）＝ユメジムの業務タブと同じ作り =====
   帯そのものは画面いっぱい（背景を端まで引く）。中身は本文と同じ幅・同じ左端にそろえる
   ＝タブの左端と、下のカードの左端が一直線になる。
   ★ジャンルどうしの間（28px）＞ ジャンル名とタブの間（9px）＞ タブどうしの間（8px）。
     この差だけで「どこまでが1つのジャンルか」が分かる（線や囲みは足さない）。
     ここの数字を近づけると、全部が1列のタブに見えてまとまりが消える。 */
.areabar{ background:var(--beige); border-bottom:1px solid var(--beige-line); }
.areabar-inner{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  max-width:820px; margin:0 auto; padding:7px 1rem;
}
.areadept{ display:flex; flex-direction:row; align-items:center; gap:9px; }
.areadept-name{
  font-size:.72rem; font-weight:bold; color:var(--green-deep);
  letter-spacing:.04em; white-space:nowrap;
}
.areadept-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.areabar .areatab{
  text-decoration:none; color:var(--ink-main); background:#fff;
  border:1.5px solid var(--beige-line); border-radius:999px;
  /* 上下6pxより詰めない＝指・マウスで押せる大きさ（およそ32px）を下回る */
  padding:6px 15px; font-size:.92rem; font-weight:bold; white-space:nowrap;
}
.areabar .areatab:hover{ border-color:var(--green); }
.areabar .areatab.active{ background:var(--green-deep); color:#fff; border-color:var(--green-deep); }

/* ===== ハンバーガー（スマホ）===== */
/* パソコンでは出さない（バナーがあるため）。スマホでだけ出す。 */
.hamburger{
  display:none; background:var(--cream); border:1px solid var(--beige-line);
  color:var(--ink-main); font-size:1.3rem; line-height:1; padding:6px 13px;
  border-radius:10px; cursor:pointer; margin-left:auto;
}
.menu{ display:none; }        /* パソコンでは使わない（バナー側に出る） */
.menu-sep{
  padding:11px 14px 4px; font-size:.76rem; font-weight:bold;
  color:var(--green-deep); letter-spacing:.02em;
}
.menu-item{
  display:block; text-decoration:none; color:var(--ink-main);
  padding:13px 14px; border-radius:8px; font-weight:bold;
  border-bottom:1px solid var(--beige);
}
.menu-item.active{ background:var(--action); color:#fff; }

main{ max-width:820px; margin:0 auto; padding:1rem 1rem 3rem; }

h1{ font-size:1.3rem; margin:1rem 0 .6rem; color:var(--ink-main); }
/* 見出しの左に緑の縦線（ユメジムの見出しはすべてこの形）。文字色はこげ茶のまま。 */
h2{
  font-size:1.05rem; margin:1.6rem 0 .5rem; color:var(--ink-main);
  border-left:5px solid var(--green); padding-left:10px; line-height:1.5;
}

/* ===== カード（ユメジムと同じ寸法：角丸16・内余白18・うすい影・ベージュの枠）===== */
.card{
  background:var(--card); border:1px solid var(--beige); border-radius:var(--radius);
  padding:18px; margin:0 0 16px; box-shadow:var(--shadow);
}
.card .card{ box-shadow:none; }     /* カードの中のカードは影を重ねない（にごる） */
.muted{ color:var(--ink-soft); font-size:.9rem; }

/* お知らせ（要対応）＝オレンジ。左の太い線で「用件がある」ことを示す。 */
.warn{
  background:#fff6ec; border-color:#f2ddc2; border-left:5px solid var(--orange);
}
.warn strong{ color:var(--orange-deep); }
/* 済み・正常＝緑 */
.ok{
  background:#eef6ea; border-color:#cfe3c4; border-left:5px solid var(--green-deep);
}
.ok strong{ color:#2f5d28; }

/* ===== ボタン（ユメジムの実物に合わせる）=====
   ユメジムの主役ボタン（取り込む・検索する など）＝
     枠線なし／角丸 10px（--radius-sm）／太字／白文字／**べた塗りの緑**（--action）、
     押したとき一段暗い緑（--action-deep）。影もグラデーションも付けない。
   控えめのボタン（.btn-small）＝白地＋ベージュ枠、ホバーでベージュ。
   ★グラデーションはユメジムでもヘッダーの GO だけ。ここで使うと別物の見た目になる。 */
.btn{
  display:inline-block; padding:.7rem 1.25rem; border-radius:var(--radius-sm);
  border:none; font-size:1rem; font-weight:bold; color:#fff; font-family:inherit;
  background:var(--action); text-decoration:none; cursor:pointer;
}
.btn:hover{ background:var(--action-deep); }
.btn:active{ background:var(--action-deep); }
.btn:disabled{ opacity:.5; cursor:default; }
/* 控えめのボタン（見るだけ・一覧へ）。ユメジムの .btn-small と同じ白地＋ベージュ枠。
   ただし文字はこげ茶（--ink）にする＝スマホで小さく見るので薄いと読めない。 */
.btn.sub{
  background:#fff; color:var(--ink-main); border:1px solid var(--beige-line);
}
.btn.sub:hover{ background:var(--beige); }
/* 全幅ボタン＝ユメジムの「取り込む／撮影して取り込む」と同じ寸法（16px・1.12rem）。 */
.btn.wide{
  display:block; width:100%; text-align:center; margin:.5rem 0;
  padding:16px; font-size:1.12rem;
}
/* 控えめのボタンを全幅にしたとき（一覧へ・もどる）は、主役より一段小さくする。
   ユメジムの「もう一度撮る」と同じ考え方＝主役の操作と見分けがつかなくなるのを防ぐ。 */
.btn.sub.wide{ padding:12px; font-size:1rem; }
/* 打刻（出勤・退勤）だけは、この一段大きい寸法にする。
   鶏舎で手袋のまま・画面を見ずに押すことがあるため、他のボタンと同じ大きさにしない。
   ★大きさをテンプレート側の style="" で書かないこと（画面ごとにばらつく）。 */
.btn.punch{ padding:1.4rem; font-size:1.4rem; }

/* ===== 入力欄 ===== */
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], textarea, select{
  width:100%; padding:.65rem .7rem; font-size:1rem; font-family:inherit;
  color:var(--ink-main); background:#fff;
  border:1.5px solid var(--beige-line); border-radius:var(--radius-sm);
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(129,178,154,.25);
}
textarea{ min-height:6rem; }
label{ display:block; margin:.7rem 0 .2rem; font-weight:bold; font-size:.95rem; }
pre{
  background:var(--beige); border:1px solid var(--beige-line); border-radius:var(--radius-sm);
  padding:.7rem .8rem; font-size:.9rem;
}

/* 作業完了報告のチェック一覧。1行ずつ薄い罫線で区切り、行のどこを押しても入る。
   ★チェック欄は指で押せる大きさ（1.4rem）を下回らせない（鶏舎で手袋のまま押す）。 */
.checkline{
  font-weight:normal; display:flex; align-items:center; gap:.6rem;
  padding:.45rem 0; border-bottom:1px solid var(--beige); cursor:pointer;
}
.checkline:last-of-type{ border-bottom:none; }
.checkline input[type=checkbox]{ width:1.4rem; height:1.4rem; flex:none; }
.card > h2:first-child{ margin-top:0; }

/* ===== 並び ===== */
.row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.day{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.day .d{ min-width:5.5rem; font-weight:bold; }
.sat{ color:#3d6a96; } .sun{ color:var(--terracotta); }
.pill{
  display:inline-block; padding:.15rem .7rem; border-radius:999px;
  background:var(--cream); border:1px solid var(--beige-line);
  font-size:.82rem; font-weight:bold; color:var(--ink-main);
}
/* 横に広い表は作らない方針（項目が5つを超える一覧はカード）。
   やむを得ない場合は必ず横スクロールできるようにする。 */
.scroll{ overflow-x:auto; }

/* ===== フッター ===== */
footer{ margin-top:2rem; }
.appfooter{
  margin-top:2rem; padding:1.1rem 1rem; text-align:center;
  background:var(--beige); border-top:1px solid var(--beige-line);
  color:var(--ink-soft); font-size:.82rem;
}

/* ===== スマホ（640px以下）：バナーをやめてハンバーガーにする ===== */
@media (max-width:640px){
  /* ★バナーは隠す。タブを横スクロールさせない
     （横に流れる帯は「右にまだある」ことに気づけない＝CLAUDE.md §4-7 と同じ理由）。 */
  .areabar{ display:none; }
  .hamburger{ display:block; }
  /* ★.topbar の position は sticky のまま（relative に上書きしない）。
     sticky も「位置を決められた要素」なので、下の .menu（absolute）は
     ヘッダーを基準に開く。relative に変えると、スクロールしたときに
     ヘッダーが上に残らなくなり、☰ を押しに戻れなくなる。 */
  /* 名前とログアウトは2行目に回す（1行目＝システム名＋☰） */
  .topbar .who{ order:5; flex-basis:100%; margin-top:.4rem; }
  .menu{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:90;
    background:#fff; border-bottom:1px solid var(--beige-line);
    box-shadow:var(--shadow); padding:6px;
    /* 項目が増えても画面内に収めて中でスクロールする
       （はみ出すと、下のジャンルが永久に押せなくなる） */
    max-height:calc(100vh - 96px);
    max-height:calc(100dvh - 96px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .menu.open{ display:block; }
}

@media (max-width:480px){
  .topbar{ padding:.6rem .8rem; }
  .topbar .brand-name{ font-size:1.02rem; }
  main{ padding:.8rem .8rem 2.5rem; }
}