/* ══════════════════════════════════════════════════════════════════
   注文管理 スマホ版 — スタイル

   配色は Windows 版（order_form.py / order_list.py の BG_DARK 系）に
   合わせてある。工場と事務で同じ画面を見ながら電話することがあるため、
   「同じ色・同じ言葉」で通じるようにしている。

   進行状態の色は js/config.js の STATUS_COLORS が持ち、
   要素に直接当てる（ここには書かない）。両方に散らすと必ず食い違う。
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:        #1e1e1e;
  --bg-mid:    #292929;
  --bg-light:  #333333;
  --bg-head:   #282828;
  --line:      #555555;
  --line-soft: #3a3a3a;
  --fg:        #ffffff;
  --fg-dim:    #aaaaaa;
  --accent:    #FFA930;
  --cyan:      #00f2ff;
  --red:       #ff6a6a;
  --green:     #9fe89f;
  --blue:      #9fc6f0;
  --tap:       44px;          /* 指で押せる最小の高さ */
  --nav-h:     60px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg); color:var(--fg);
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",sans-serif;
  font-size:16px; overscroll-behavior-y:none;
}
button,select,input,textarea{ font-family:inherit; color:inherit; font-size:inherit; }
.hidden{ display:none !important; }
.spacer{ flex:1; }

/* ── 共通ボタン ───────────────────────────────────────────────── */
.btn{
  min-height:var(--tap); padding:0 14px;
  background:var(--bg-light); border:1px solid var(--line); color:var(--fg);
  cursor:pointer; border-radius:4px;
}
.btn:active{ background:var(--accent); color:#222; }
.btn.primary{ background:var(--accent); color:#222; border-color:var(--accent); font-weight:600; }
.btn.ghost{ background:transparent; }
.btn.danger{ background:#4a1a1a; color:#ffaaaa; border-color:#7a3a3a; }
.btn.ok{ background:#1c3a1c; color:var(--green); border-color:#3a7a3a; }
.btn.sm{ min-height:34px; padding:0 10px; font-size:14px; }
.btn:disabled{ opacity:.45; }

/* ══════════════════════════════════════════════════════════════
   ログイン
   ══════════════════════════════════════════════════════════════ */
#login{
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:24px 16px;
}
#login h1{ font-size:28px; font-weight:600; margin:0; letter-spacing:.08em; }
#login .card{
  width:100%; max-width:380px; background:var(--bg-mid);
  border:1px solid var(--line); border-radius:6px; padding:22px 18px;
  display:flex; flex-direction:column; gap:14px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:14px; color:var(--fg-dim); }
.field input,.field select,.field textarea{
  min-height:var(--tap);
  background:var(--bg-light); border:1px solid var(--line); color:var(--fg);
  padding:8px 10px; border-radius:4px; width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent);
}
#login .field input{ height:52px; font-size:22px; text-align:center; letter-spacing:.2em; }
/* 失敗の理由は複数行になることがある（準備未了・設定ミスの案内）。
   改行をそのまま出したいので pre-line。 */
.msg{
  min-height:20px; font-size:14px; color:var(--red); text-align:center;
  white-space:pre-line; line-height:1.6;
}
#login .hint{ font-size:12px; color:var(--fg-dim); text-align:center; line-height:1.6; }

/* ══════════════════════════════════════════════════════════════
   アプリ枠
   ══════════════════════════════════════════════════════════════ */
#app{ min-height:100dvh; display:flex; flex-direction:column; }

header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top,0px));
  background:var(--bg-mid); border-bottom:1px solid var(--line);
}
header .title{ font-size:18px; font-weight:600; color:var(--accent); }
header .who{ font-size:13px; color:var(--fg-dim); max-width:9em;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

main{
  flex:1; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:10px 12px calc(var(--nav-h) + var(--safe-b) + 16px);
}

nav#tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; background:var(--bg-mid); border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
}
nav#tabs button{
  flex:1; height:var(--nav-h); background:transparent; border:none; color:var(--fg-dim);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer;
}
nav#tabs button i{ font-style:normal; font-size:19px; line-height:1; }
nav#tabs button span{ font-size:11px; }
nav#tabs button[aria-selected="true"]{ color:var(--accent); }

/* ── 画面上部の操作バー（月送り・検索など）──────────────────── */
.toolbar{
  display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap;
}
.toolbar .grow{ flex:1; min-width:0; }
.toolbar input[type="search"],.toolbar input[type="text"],.toolbar select{
  min-height:38px; background:var(--bg-light); border:1px solid var(--line);
  color:var(--fg); padding:6px 10px; border-radius:4px; width:100%;
}
.period{ font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── 見出し・状態表示 ───────────────────────────────────────── */
h2.sec{ font-size:15px; color:var(--accent); margin:18px 0 8px; font-weight:600; }
h2.sec:first-child{ margin-top:4px; }
.note{ color:var(--fg-dim); font-size:13px; line-height:1.6; }
.empty{ color:var(--fg-dim); text-align:center; padding:40px 12px; font-size:15px; }
.loading{ color:var(--fg-dim); text-align:center; padding:32px 12px; }
.error{ color:var(--red); padding:14px; border:1px solid #7a3a3a;
        background:#2a1a1a; border-radius:4px; font-size:14px; line-height:1.6; }

/* 進行状態のバッジ。背景/文字色は JS が STATUS_COLORS から当てる */
.badge{
  display:inline-block; padding:2px 8px; border-radius:3px;
  font-size:12px; white-space:nowrap; border:1px solid transparent;
}

/* ══════════════════════════════════════════════════════════════
   注文カード（一覧・タスク・カレンダー詳細で共用）
   ══════════════════════════════════════════════════════════════ */
.ocard{
  background:var(--bg-mid); border:1px solid var(--line);
  border-radius:6px; margin-bottom:10px; overflow:hidden;
}
.ocard > .head{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:var(--bg-head); border-bottom:1px solid var(--line-soft);
  cursor:pointer;
}
.ocard > .head .oid{ font-size:15px; color:var(--accent); font-variant-numeric:tabular-nums; }
.ocard > .head .co{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ocard > .head .chev{ color:var(--fg-dim); font-size:13px; }
.ocard .sub{ padding:2px 12px 8px; font-size:12px; color:var(--fg-dim);
             background:var(--bg-head); border-bottom:1px solid var(--line-soft); }

.irow{
  display:grid; grid-template-columns:52px 1fr auto;
  gap:8px; align-items:center; padding:9px 12px;
  border-bottom:1px solid var(--line-soft);
}
.irow:last-child{ border-bottom:none; }
.irow .due{ font-size:13px; color:var(--fg-dim); font-variant-numeric:tabular-nums; }
.irow .due.over{ color:var(--red); }
.irow .body{ min-width:0; }
.irow .cont{ font-size:14px; line-height:1.4; word-break:break-word; }
.irow .meta{ font-size:12px; color:var(--fg-dim); margin-top:2px; }
.irow .right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.irow.memo .cont{ color:var(--fg-dim); }
.irow.lease .cont{ color:var(--cyan); }

/* ══════════════════════════════════════════════════════════════
   納品カレンダー
   ══════════════════════════════════════════════════════════════ */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal .wd{ text-align:center; font-size:12px; color:var(--fg-dim); padding:4px 0; }
.cal .wd.sat{ color:#7fb0e0; }
.cal .wd.sun{ color:#e08080; }
.cal .day{
  min-height:64px; background:var(--bg-mid); border:1px solid var(--line-soft);
  border-radius:3px; padding:3px 3px 4px; cursor:pointer;
  display:flex; flex-direction:column; gap:2px; overflow:hidden;
}
.cal .day.blank{ background:transparent; border-color:transparent; cursor:default; }
.cal .day.sat{ background:#1a2a3a; }
.cal .day.sun,.cal .day.holiday{ background:#2a1a1a; }
.cal .day.today{ border-color:var(--accent); }
.cal .day .dnum{ font-size:12px; color:var(--fg-dim); font-variant-numeric:tabular-nums; }
.cal .day.today .dnum{ color:var(--accent); font-weight:600; }
.cal .day .chip{
  font-size:10px; line-height:1.3; padding:1px 3px; border-radius:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal .day .more{ font-size:10px; color:var(--fg-dim); }

/* ══════════════════════════════════════════════════════════════
   納品スケジュール（ガント）
   ══════════════════════════════════════════════════════════════ */
/* 横スクロールする格子。1行＝注文明細1件。
   日セルが背景（休日色・今日）を描き、バーは同じ格子の上に
   grid-column で重ねる。表組みだと罫線とバーの位置が合わない。 */
.gantt{ border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.gantt .scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.gantt .inner{ width:max-content; min-width:100%; }
/* grid-template-columns は行ごとに JS が直接当てる（日数で変わるため） */
.gantt .grow{ display:grid; align-items:stretch; }
.gantt .lbl{
  position:sticky; left:0; z-index:2; grid-column:1; grid-row:1;
  background:var(--bg-mid); border-right:1px solid var(--line);
  padding:4px 7px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  cursor:pointer;
}
.gantt .hrow .lbl{ background:var(--bg-head); cursor:default; }
.gantt .lbl .oid{ font-size:11px; color:var(--accent); font-variant-numeric:tabular-nums; }
.gantt .lbl .co,.gantt .lbl .ct{
  font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gantt .lbl .co{ color:var(--fg-dim); }
.gantt .lbl .ct{ font-size:12px; }

/* 横スクロール用に overflow-x を付けると縦も scroll コンテナになるため、
   日付ヘッダーは position:sticky にしても効かない。素直に先頭行に置く。 */
.gantt .hrow{ background:var(--bg-head); }
.gantt .hd{
  grid-row:1; font-size:10px; color:var(--fg-dim); text-align:center;
  border-left:1px solid var(--line-soft); padding:2px 0; line-height:1.25;
  background:var(--bg-head);
}
.gantt .hd b{ display:block; font-weight:normal; font-variant-numeric:tabular-nums; }
.gantt .cell{
  grid-row:1; min-height:36px;
  border-left:1px solid var(--line-soft); border-top:1px solid var(--line-soft);
}
.gantt .sat{ background:#1a2a3a; }
.gantt .sun,.gantt .holiday{ background:#2a1a1a; }
.gantt .today{ background:#2a2200; }
.gantt .hd.today{ color:var(--accent); }
.gantt .bar{
  grid-row:1; z-index:1; align-self:center; margin:0 1px;
  height:20px; border-radius:3px; display:flex; align-items:center;
  padding:0 4px; font-size:10px; overflow:hidden; white-space:nowrap;
  pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════
   タスク管理
   ══════════════════════════════════════════════════════════════ */
.prow{ margin-bottom:12px; }
.prow .name{
  font-size:14px; font-weight:600; padding:4px 8px; background:var(--bg-head);
  border:1px solid var(--line); border-radius:4px 4px 0 0;
  display:flex; align-items:center; gap:8px;
}
.prow .name .cnt{ font-size:12px; color:var(--fg-dim); font-weight:normal; }
.prow .cards{
  display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:6px; border:1px solid var(--line); border-top:none; border-radius:0 0 4px 4px;
  background:var(--bg-mid);
}
.prow .cards:empty::after{ content:"なし"; color:var(--fg-dim); font-size:13px; padding:6px; }
.tcard{
  flex:0 0 auto; width:132px; border:1px solid var(--line); border-radius:4px;
  padding:5px 7px; cursor:pointer; display:flex; flex-direction:column; gap:2px;
}
.tcard .d{ font-size:12px; font-variant-numeric:tabular-nums; }
.tcard .c{ font-size:11px; line-height:1.3; max-height:2.6em; overflow:hidden; }
.tcard .o{ font-size:10px; opacity:.8; font-variant-numeric:tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   注文書登録フォーム
   ══════════════════════════════════════════════════════════════ */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-grid .wide{ grid-column:1 / -1; }
.panel{
  background:var(--bg-mid); border:1px solid var(--line); border-radius:6px;
  padding:12px; margin-bottom:12px;
}
.panel > .ttl{
  font-size:14px; color:var(--accent); font-weight:600; margin:0 0 10px;
  display:flex; align-items:center; gap:8px;
}
.panel > .ttl .spacer{ flex:1; }

.row-card{
  background:var(--bg-light); border:1px solid var(--line-soft);
  border-radius:5px; padding:8px 10px; margin-bottom:8px;
  display:flex; align-items:flex-start; gap:8px;
}
.row-card .no{ font-size:12px; color:var(--fg-dim); min-width:2.2em;
               font-variant-numeric:tabular-nums; padding-top:3px; }
.row-card .main{ flex:1; min-width:0; cursor:pointer; }
.row-card .cont{ font-size:14px; line-height:1.4; word-break:break-word; }
.row-card .cont.blank{ color:var(--fg-dim); }
.row-card .meta{ font-size:12px; color:var(--fg-dim); margin-top:3px;
                 display:flex; flex-wrap:wrap; gap:8px; }
.row-card .del{ background:none; border:none; color:var(--red); font-size:18px;
                cursor:pointer; padding:2px 4px; line-height:1; }

.inline{ display:flex; gap:8px; align-items:center; }
.inline > *{ flex:1; min-width:0; }
.inline > .fix{ flex:0 0 auto; }

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  padding:7px 12px; border:1px solid var(--line); border-radius:16px;
  background:var(--bg-light); font-size:14px; cursor:pointer;
}
.chip[aria-pressed="true"]{ background:var(--accent); color:#222; border-color:var(--accent); }

.sticky-save{
  position:sticky; bottom:0; margin:0 -12px -12px;
  padding:10px 12px calc(10px + var(--safe-b));
  background:linear-gradient(to top, var(--bg) 70%, transparent);
  display:flex; gap:8px;
}
.sticky-save .btn{ flex:1; }

/* ══════════════════════════════════════════════════════════════
   モーダル（明細編集・選択）
   ══════════════════════════════════════════════════════════════ */
#sheet{
  position:fixed; inset:0; z-index:50; background:var(--bg);
  display:flex; flex-direction:column;
}
.sheet-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:var(--bg-mid); border-bottom:1px solid var(--line);
  font-size:16px; font-weight:600;
}
.sheet-body{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:12px; }
.sheet-foot{
  display:flex; gap:8px; padding:10px 12px calc(10px + var(--safe-b));
  background:var(--bg-mid); border-top:1px solid var(--line);
}
.sheet-foot .btn{ flex:1; }

/* 選択肢リスト（会社・現場・価格区分など） */
.pick{ list-style:none; margin:0; padding:0; }
.pick li{
  padding:12px 10px; border-bottom:1px solid var(--line-soft); cursor:pointer;
  display:flex; align-items:center; gap:10px;
}
.pick li:active{ background:var(--bg-light); }
.pick li .t{ flex:1; min-width:0; }
.pick li .t .s{ display:block; font-size:12px; color:var(--fg-dim); margin-top:2px; }
.pick li.legacy .t{ color:var(--fg-dim); }

/* ══════════════════════════════════════════════════════════════
   通知
   ══════════════════════════════════════════════════════════════ */
#toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--nav-h) + var(--safe-b) + 16px); z-index:60;
  max-width:88vw; padding:11px 16px; border-radius:20px;
  background:var(--bg-light); border:1px solid var(--line);
  font-size:14px; line-height:1.5; text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
#toast.err{ background:#3a1a1a; border-color:#7a3a3a; color:#ffcccc; }
#toast.ok{ background:#1c3a1c; border-color:#3a7a3a; color:var(--green); }

/* 横幅の広い端末（タブレット横持ちなど）では2段組にする */
@media (min-width:700px){
  main{ padding-left:20px; padding-right:20px; }
  .form-grid{ grid-template-columns:repeat(3,1fr); }
}