/* あい作センシング改 — 画面の共通スタイル
   ・色と字はGAUSSEAの他ページに合わせている
   ・幅の狭い端末でも縦のまま使えるようにする（あい作は「横表示にしてください」と出るだけ） */

:root{
  --ink:#1c2b33; --sub:#5a6e78; --bg:#f5f7f8; --card:#fff;
  --accent:#1e7f5c; --accent-soft:#e7f3ee;
  --line:#e1e7ea; --bad:#b4552d; --warn:#b58a2d; --ok:#1e7f5c;
  --grid:#eef2f4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}

/* ------------------------------- 上のバー ------------------------------- */
.bar{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:#fff; border-bottom:1px solid var(--line);
  padding:10px 20px; position:sticky; top:0; z-index:20;
}
.brand a{font-weight:700; font-size:16px; letter-spacing:.04em; color:var(--ink); text-decoration:none}
.brand span{color:var(--accent); margin-left:2px}
.bar nav{display:flex; gap:4px; flex:1}
.bar nav a{
  font-size:13.5px; text-decoration:none; color:var(--sub);
  padding:5px 12px; border-radius:7px;
}
.bar nav a:hover{background:var(--grid)}
.bar nav a.on{background:var(--accent-soft); color:var(--accent); font-weight:700}
.who{font-size:12.5px; color:var(--sub); display:flex; align-items:center; gap:12px}
.who .out{font-size:12.5px}

.demo-note{
  background:#fff8e8; border-bottom:1px solid #f0e2c0; color:#7a5c1e;
  font-size:12.5px; padding:7px 20px;
}

main{padding:20px; max-width:1500px; margin:0 auto}

/* -------------------------------- 見出し -------------------------------- */
h1{font-size:19px; font-weight:700; margin-bottom:4px}
h2{font-size:15px; font-weight:700; margin:22px 0 10px}
.lead{color:var(--sub); font-size:13px; margin-bottom:16px}

/* -------------------------------- カード -------------------------------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.cards{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 18px; min-width:130px; flex:1 1 130px;
}
.stat .k{font-size:12.5px; color:var(--sub)}
.stat .v{font-size:26px; font-weight:700; line-height:1.3}
.stat.bad .v{color:var(--bad)}
.stat.ok .v{color:var(--ok)}

/* -------------------------------- 表 -------------------------------- */
.tablewrap{background:#fff; border:1px solid var(--line); border-radius:12px; overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{background:#fafbfc; font-size:12.5px; color:var(--sub); font-weight:700}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafcfb}
td.num{text-align:right; font-variant-numeric:tabular-nums}
.sn{font-size:11.5px; color:var(--sub); font-variant-numeric:tabular-nums}

/* デバイス名の変更（行の中で直せるようにする） */
button.editname{
  font-size:11px; padding:1px 8px; border-radius:999px; color:var(--sub);
  margin-left:6px; vertical-align:1px;
}
.renamebox{display:none; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap}
.renamebox input[type=text]{width:min(240px,60vw)}
.renamebox button{font-size:12px; padding:5px 11px}

/* -------------------------------- 印 -------------------------------- */
.pill{
  display:inline-block; font-size:11.5px; font-weight:700; line-height:1.6;
  padding:1px 9px; border-radius:999px; border:1px solid transparent;
}
.pill.ok{background:var(--accent-soft); color:var(--accent)}
.pill.warn{background:#fdf5e5; color:var(--warn)}
.pill.bad{background:#fbf0ea; color:var(--bad)}
.pill.none{background:var(--grid); color:var(--sub)}

/* -------------------------------- 操作 -------------------------------- */
.toolbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:14px;
}
.toolbar .grp{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.toolbar .sep{flex:1}
.lbl{font-size:12px; color:var(--sub); margin-right:2px}

button,.btn{
  font-family:inherit; font-size:13px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:6px 13px;
  cursor:pointer; text-decoration:none; display:inline-block; line-height:1.7;
}
button:hover,.btn:hover{background:var(--grid)}
button.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700}
button:disabled{opacity:.5; cursor:not-allowed}

input[type=text],input[type=password],input[type=date],input[type=number],select{
  font-family:inherit; font-size:13px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:6px 10px;
}
input:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,127,92,.10)}

/* 項目・ポートの選択（押すだけで切り替わる） */
.chip{
  font-size:12.5px; border:1px solid var(--line); background:#fff; color:var(--sub);
  border-radius:999px; padding:4px 13px; cursor:pointer;
}
.chip.on{background:var(--accent-soft); border-color:#bcdccd; color:var(--accent); font-weight:700}

/* -------------------------------- グラフ -------------------------------- */
.plot{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 6px 4px; margin-bottom:12px}
.plot h3{font-size:13.5px; font-weight:700; padding:0 10px 2px; display:flex; gap:8px; align-items:baseline}
.plot h3 .u{font-size:11.5px; color:var(--sub); font-weight:400}
.legend-note{font-size:11.5px; color:var(--sub); padding:2px 10px 8px; display:flex; gap:16px; flex-wrap:wrap}
.legend-note i{display:inline-block; width:22px; height:9px; vertical-align:-1px; margin-right:5px; border-radius:2px}
.legend-note .g{background:repeating-linear-gradient(45deg,#f0d9cf,#f0d9cf 3px,#fbf0ea 3px,#fbf0ea 6px)}
.legend-note .b{background:#dbe6ec}

.empty{color:var(--sub); font-size:13px; padding:24px; text-align:center}
.err{background:#fbf0ea; border:1px solid #eddbd1; color:var(--bad); border-radius:9px; padding:10px 14px; font-size:13px; margin-bottom:14px}
.okmsg{background:var(--accent-soft); border:1px solid #bcdccd; color:var(--accent); border-radius:9px; padding:10px 14px; font-size:13px; margin-bottom:14px}

.u-legend{font-size:12px !important}
.u-legend .u-marker{width:12px; height:12px}

/* -------------------------------- 閾値 -------------------------------- */
.thr td{white-space:normal}
.thr input[type=number],.thr input[type=text]{width:110px; text-align:right; font-variant-numeric:tabular-nums}
.thr .unit{font-size:12px; color:var(--sub); margin-left:6px}
.hint{font-size:12px; color:var(--sub); margin-top:4px}

/* ------------------------------ 狭い画面 ------------------------------ */
@media (max-width:720px){
  main{padding:12px}
  .bar{padding:8px 12px; gap:10px}
  .who{display:none}
  th,td{padding:9px 10px}
  .stat{padding:10px 14px; min-width:104px}
  .stat .v{font-size:21px}
  /* 一覧は横スクロールでなく、行をカードにして縦に積む */
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block; width:100%}
  table.stack tr{border-bottom:1px solid var(--line); padding:10px 12px}
  table.stack tr:last-child{border-bottom:0}
  table.stack td{border:0; padding:2px 0; white-space:normal}
  table.stack td::before{content:attr(data-l) "："; color:var(--sub); font-size:12px}
  table.stack td.head::before{content:""}
  table.stack td.head{font-weight:700; font-size:15px; padding-bottom:4px}
  table.stack td.num{text-align:left}
}

/* --- 「重ねる」のデバイスチップ（2026-08-20） --------------------------------
   圃場名を主に見せ、機器名を小さく添える。同じ圃場に2台あるときの
   取り違えを防ぐため、機器名は隠さず必ず出す。 */
.chip.dev { line-height: 1.15; text-align: left; }
.chip.dev .sub { display: block; font-size: 11px; opacity: .65; }
.lead .btn { margin-right: 10px; }
.lead .sub { font-size: 12px; color: var(--sub, #5a6e78); }

/* 端末は生きているのにプローブだけ死んでいる、の注記（2026-08-20） */
.probemiss { margin-top: 4px; font-size: 11px; color: var(--bad, #b4552d); line-height: 1.3; }
.stat.warn .v { color: var(--bad, #b4552d); }

/* ======== 閾値画面（2026-08-20 に作り直し） ========================
   数値を打つ前に「実測の分布」と「その値だと何回鳴るか」が見える作りにした。
   表をやめて項目ごとのカードにし、昼夜は既定でまとめている。 */
.rules { display: flex; flex-direction: column; gap: 8px; }
.rules .rule { font-size: 13px; line-height: 1.6; }
.rules .sub { color: var(--sub, #5a6e78); }
.warntext { color: var(--bad, #b4552d); font-weight: 600; }

.sub2 { font-size: 12px; font-weight: 400; color: var(--sub, #5a6e78); margin-left: 8px; }

.thcard { border: 1px solid var(--line, #e3e9ec); border-radius: 10px; padding: 14px 16px;
          margin: 12px 0; background: #fff; }
.thhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
          flex-wrap: wrap; }
.thtitle { font-weight: 700; font-size: 15px; }
.thtitle .unit { font-weight: 400; color: var(--sub, #5a6e78); margin-left: 4px; font-size: 12px; }
.splitbox { font-size: 12px; color: var(--sub, #5a6e78); white-space: nowrap; }

.dist { display: flex; align-items: center; gap: 14px; margin: 10px 0 12px; flex-wrap: wrap; }
.spark { width: 320px; height: 44px; background: #fafbfc; border-radius: 4px;
         border: 1px solid var(--line, #e3e9ec); flex: 0 0 auto; }
.spark .bar     { fill: #c7d6dd; }
.spark .outzone { fill: rgba(180, 85, 45, 0.10); }
.spark .mark    { stroke: var(--bad, #b4552d); stroke-width: 1.5; }
.quant { font-size: 12px; color: var(--sub, #5a6e78); line-height: 1.7; }
.quant .q { display: inline-block; margin-right: 10px; }

.throw { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.throw[hidden] { display: none; }
.throw .rlbl { display: inline-block; min-width: 2.6em; font-size: 12px; color: var(--sub, #5a6e78); }
.throw label { font-size: 13px; }
.throw input { width: 90px; }

/* ★「何回鳴るか」。0 と 多すぎ を色で分ける（どちらも設定として失敗なので） */
.hits { font-size: 12px; }
.hits.busy { color: var(--sub, #5a6e78); }
.hits.zero { color: var(--sub, #5a6e78); }
.hits.few  { color: var(--accent, #1e7f5c); font-weight: 600; }
.hits.many { color: var(--bad, #b4552d); font-weight: 600; }

.quick { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.qb { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line, #e3e9ec);
      border-radius: 999px; background: #fff; cursor: pointer; }
.qb:hover { border-color: var(--accent, #1e7f5c); color: var(--accent, #1e7f5c); }
.qb.clear:hover { border-color: var(--bad, #b4552d); color: var(--bad, #b4552d); }

.savebar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line, #e3e9ec);
           padding: 12px 0; margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.rowdist { font-size: 11px; color: var(--sub, #5a6e78); }
.quick .qlbl { font-size: 12px; color: var(--sub, #5a6e78); }
.quick .target { width: 56px; }
.qb[disabled] { opacity: .55; cursor: default; }

/* ======== 段つきの閾値（2026-08-20 の2回目の作り直し） ================
   「上限1つ・下限1つ」をやめ、段を何段でも足せるようにした。
   段には見出しと対処の仕方が付き、それが通知の本文になる。 */
.sparkwrap { flex: 0 0 auto; }
.sparkcap  { font-size: 11px; color: var(--sub, #5a6e78); margin-bottom: 3px; }
.spark     { height: 56px; }
.spark.dragging { cursor: ew-resize; }
.spark .grab { stroke: transparent; stroke-width: 12; cursor: ew-resize; }
.sparkaxis { display: flex; justify-content: space-between; width: 320px;
             font-size: 10px; color: var(--sub, #5a6e78); margin-top: 2px; }
.sparkhint { font-size: 11px; color: var(--sub, #5a6e78); margin-top: 4px; }

.pgroup { margin-top: 10px; }
.pgroup[hidden] { display: none; }
.plabel { font-size: 12px; font-weight: 700; color: var(--sub, #5a6e78); margin: 6px 0 2px; }

.dirblock { border-left: 3px solid var(--line, #e3e9ec); padding: 4px 0 4px 10px; margin: 8px 0; }
.dirhead  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.dirhead .dname { font-weight: 700; }
.fitbox { color: var(--sub, #5a6e78); }
.fitbox .target { width: 52px; }

.steprow { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.steprow .stepno { font-size: 11px; color: var(--sub, #5a6e78); min-width: 3.4em; }
.steprow .val { width: 84px; }
.steprow .ttl { width: 230px; }
.steprow .adv { width: 260px; min-height: 30px; font: inherit; font-size: 12px;
                padding: 5px 7px; border: 1px solid var(--line, #e3e9ec); border-radius: 6px;
                resize: vertical; }
.steprow .ntf { font-size: 11px; color: var(--sub, #5a6e78); white-space: nowrap; }
.steprow .del { border: none; background: none; color: var(--sub, #5a6e78);
                font-size: 16px; cursor: pointer; line-height: 1; padding: 0 4px; }
.steprow .del:hover { color: var(--bad, #b4552d); }

.preset { margin-top: 10px; }
.preset .sub { font-size: 11px; }

/* 段を他の圃場へ配る（C・2026-08-20） */
.share .todevs { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 10px 0; font-size: 13px; }
.share .sharebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.share .sharebar input[type=text] { width: 280px; }
.share .sep2 { flex: 0 0 100%; height: 0; }
.tpls { margin-top: 14px; border-top: 1px solid var(--line, #e3e9ec); padding-top: 10px; }
.tplrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.tplname { font-weight: 700; font-size: 13px; }
.steprow .mode { font-size: 12px; }
.steprow .vunit { font-size: 11px; color: var(--sub, #5a6e78); min-width: 5.5em; }

/* 毎日起きるはずのこと（E・2026-08-20） */
.expect { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line, #e3e9ec); }
.exhead { font-size: 13px; font-weight: 700; }
.exhead .sub { font-weight: 400; font-size: 11px; margin-left: 8px; }
.exrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; font-size: 13px; }
.exrow .ttl { width: 300px; }
.exrow .adv { width: 320px; }
.exhits { font-size: 12px; margin-top: 4px; }
.exhits.busy, .exhits.zero { color: var(--sub, #5a6e78); }
.exhits.few  { color: var(--accent, #1e7f5c); font-weight: 600; }
.exhits.many { color: var(--bad, #b4552d); font-weight: 600; }

/* 定時のお知らせ（2026-08-20） */
.remadd { margin-top: 14px; border-top: 1px solid var(--line, #e3e9ec); padding-top: 12px; }
.remadd .grp { margin: 8px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.remadd input[type=text] { width: 340px; }
.remadd input[name=at] { width: 70px; }
.remadd textarea { width: 360px; font: inherit; font-size: 13px; padding: 6px 8px;
                   border: 1px solid var(--line, #e3e9ec); border-radius: 6px; }
.remadd .days label { margin-right: 6px; font-size: 13px; }

/* 値を入れて通知を試す（2026-08-20） */
.firebar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.firebar label { font-size: 13px; }
.fireres { margin-top: 14px; }
.preview { border: 1px solid var(--line, #e3e9ec); border-radius: 8px; margin: 12px 0; overflow: hidden; }
.pvhead { background: #fafbfc; border-bottom: 1px solid var(--line, #e3e9ec);
          padding: 6px 10px; font-size: 11px; color: var(--sub, #5a6e78); }
.pvsubj { padding: 8px 10px; font-weight: 700; font-size: 13px; }
.pvbody { margin: 0; padding: 10px; background: #fbfcfd; border-top: 1px solid var(--line, #e3e9ec);
          font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }

/* 見る期間の切り替え（2026-08-20） */
.winbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.winbar .lbl { font-size: 12px; color: var(--sub, #5a6e78); margin-right: 4px; }
.winbar .qb.on { background: var(--accent-soft, #e7f3ee); border-color: #bcdccd; color: var(--accent, #1e7f5c); font-weight: 700; }  /* button.on の緑地に緑字で消えていた（2026-09-09） */
.winnote { font-size: 11px; color: var(--sub, #5a6e78); margin-left: 6px; }

/* ============ 作付け・品目（2026-08-25） ============ */

/* 入力欄を横に並べる。狭い画面では素直に折り返す */
.frow{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px}
.frow > label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--sub)}
.frow > label > input,.frow > label > select{font-size:14px; padding:6px 8px;
  border:1px solid var(--line); border-radius:8px; background:var(--card); color:inherit}
.frow > label.radio{flex-direction:row; align-items:center; gap:6px; font-size:14px; color:inherit}

/* 出どころを切り替えたときに出し入れする箱 */
.subbox{border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:8px; padding:12px 14px; margin:8px 0 14px}
.subbox select[size]{font-size:13.5px}

/* 「未検証」＝出典が入っていない数字。★使えるが、そうと分かるようにする */
.warnchip{display:inline-block; font-size:11.5px; font-weight:700; padding:1px 7px;
  border-radius:999px; background:#fdf0e6; border:1px solid #efc9a8; color:#a85a22}

/* 過ぎてしまって送られない予定の行 */
tr.dim td{opacity:.5}

/* 数字の単位（積算温度の「℃・日」など） */
.stat .u{font-size:13px; font-weight:400; color:var(--sub); margin-left:3px}

/* 補助のボタン。既存の .btn を薄くしたもの */
.btn.ghost{background:transparent; color:var(--sub); border:1px solid var(--line); font-weight:400}
.btn.ghost:hover{background:var(--card); color:inherit}

/* 地図（map.js・2026-08-25） */
.gmap-btn{font-size:11.5px; padding:3px 8px; border-radius:6px; cursor:pointer;
  background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.25); color:#222; line-height:1.6}
.gmap-btn:hover{background:#fff}
.gmap-btn.on{background:var(--accent,#1e7f5c); border-color:var(--accent,#1e7f5c); color:#fff; font-weight:700}
.gmap img{max-width:none}

/* 表の中でその場編集できる値（2026-08-25） */
.edit{cursor:pointer; border-bottom:1px dashed var(--line); padding:1px 3px; border-radius:4px}
.edit:hover{background:var(--accent-soft,#eaf4ef); border-bottom-color:var(--accent,#1e7f5c)}
.edit.num{font-variant-numeric:tabular-nums}
.inlineIn{width:7em; font-size:13.5px; padding:3px 6px; border:1px solid var(--accent,#1e7f5c);
  border-radius:6px; background:var(--card); color:inherit}

/* 地図の操作バー（2026-08-25） */
.mapbar{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:10px 0 8px}
.mapbar .tabBtn.on{background:var(--accent,#1e7f5c); border-color:var(--accent,#1e7f5c); color:#fff; font-weight:700}
.panel{margin-top:14px}

/* ---- ログイン（2026-08-31）--------------------------------------------
   この製品自身のログイン画面。サイト共通のログインとは別物。 */
/* ---- ログイン（2026-09-09 カード型に作り直し。屋号は出さない） ---- */
body.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.login { width:100%; max-width:400px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:40px 36px; }
.login .brand { text-align:center; margin-bottom:26px; }
.login .brand h1 { font-size:22px; letter-spacing:.06em; font-weight:700; margin:0; }
.login .brand h1 span { color:var(--accent); }
.login .brand .wave { display:block; margin:12px auto 0; }
.login .brand .tag { margin-top:10px; color:var(--sub); font-size:12px; letter-spacing:.12em; }
.login label { display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.login input[type=text], .login input[type=password] { width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:9px; padding:11px 14px; margin-bottom:18px; }
.login input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,127,92,.09); }
.login button { width:100%; background:var(--accent); color:#fff; font-family:inherit; font-weight:700; font-size:15px;
  border:0; border-radius:9px; padding:13px; letter-spacing:.1em; cursor:pointer; }
.login button:hover { opacity:.88; }
.login .err { background:#fbf3ef; border:1px solid #eddbd1; color:var(--bad); border-radius:9px; padding:11px 14px; font-size:13px; margin:0 0 20px; }
.login .note { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:var(--sub); font-size:11.5px; text-align:center; }
.who .org { margin-right:.6rem; opacity:.75; }
.who .me { color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; }
.who .me:hover { opacity:.8; }
table.tbl { border-collapse:collapse; margin:0 0 1.2rem; }
table.tbl th { text-align:left; padding:.35rem 1.2rem .35rem 0; font-weight:normal; color:var(--muted,#667); white-space:nowrap; }
table.tbl td { padding:.35rem 0; }

/* パスワードの入力（account.php・2026-09-09） */
.pwform label { display:block; margin:0 0 14px; font-size:12.5px; font-weight:700; }
.pwform label input { display:block; margin-top:6px; width:min(320px, 100%); }