/* スマホ表示（デザイン「Signtop スマホUI設計」準拠）: sp-projects */

/* ===== 入力フォームの部品（PCでも同じ見た目で使う） ===== */
/* radio / checkbox を見た目だけセグメント・ピルにする。入力自体は残してキーボード操作も可能 */
.fx-opt { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.fx-opt > input, .fx-chip > input, .fx-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.fx-opt:has(input:focus-visible) > span, .fx-chip:has(input:focus-visible), .fx-switch:has(input:focus-visible) .fx-knob { outline: 2px solid var(--primary); outline-offset: 2px; }

/* セグメント */
.fx-seg { display: flex; background: var(--sp-track); border-radius: 10px; padding: 3px; gap: 2px; max-width: 420px; }
.fx-seg .fx-opt { flex: 1 1 0; min-width: 0; }
.fx-seg .fx-opt > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; padding: 0 8px; border-radius: 8px; font-size: 13px; color: var(--sub); white-space: nowrap; }
.fx-seg .fx-opt:has(input:checked) > span { background: #fff; color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.fx-seg-kind .fx-opt:has(input:checked) > span { color: var(--primary); }
.fx-seg-kind .fx-opt[data-v="night_site"]:has(input:checked) > span { color: var(--night); }
.fx-seg-status .fx-opt[data-v="completed"]:has(input:checked) > span { color: var(--ok); }
.fx-seg-status .fx-opt[data-v="cancelled"]:has(input:checked) > span { color: var(--danger); }

/* ピル（予定の種類：単一選択 / 社員・車両：複数選択） */
.fx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-pills .fx-opt > span { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; white-space: nowrap; }
.fx-kinds .fx-opt:has(input:checked) > span { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); font-weight: 700; }
.fx-kinds .fx-opt:has(input:checked) > span::before { content: "✓"; }
.fx-kinds .fx-opt[data-v="night_site"]:has(input:checked) > span { border-color: var(--night); background: var(--night-weak); color: var(--night); }
.fx-toggles .fx-opt > span { border-width: 1px; border-radius: 999px; padding: 0 14px; }
.fx-toggles .fx-opt:has(input:checked) > span { background: var(--sp-dark); border-color: var(--sp-dark); color: #fff; font-weight: 600; }

/* 工程の選択チップ */
.fx-picker .picker-head { flex-wrap: wrap; }
.fx-pick-title { font-size: 13px; font-weight: 600; }
.fx-pick-n { color: var(--primary); }
.fx-picker .picker-list { gap: 8px; align-items: center; }
.fx-picker .picker-groupbox { gap: 8px; padding: 6px 10px 6px 8px; }
.fx-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; cursor: pointer; }
.fx-chip:hover { border-color: #B8C4D2; }
.fx-chip:has(input:checked) { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); font-weight: 700; }
.fx-chip:has(input:checked) > span::before { content: "✓ "; }
.fx-picker .check.new { min-height: 36px; padding: 0 4px 0 12px; border: 1.5px dashed var(--primary); border-radius: 10px; background: var(--primary-weak); color: var(--primary); font-weight: 700; }

/* 施工予定のトグル */
.fx-switch { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; font-weight: 600; position: relative; }
.fx-switch > span:first-child { flex: 0 1 auto; }
.fx-knob { position: relative; flex: 0 0 auto; width: 50px; height: 30px; border-radius: 15px; background: #CBD5E1; transition: background .15s; }
.fx-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); transition: transform .15s; }
.fx-switch:has(input:checked) .fx-knob { background: var(--primary); }
.fx-switch:has(input:checked) .fx-knob::after { transform: translateX(20px); }
.fx-sched [data-sched] { display: grid; gap: 12px; }
.fx-sched [data-sched][hidden] { display: none; }

/* 日時範囲：開始・終了の行 */
.fx-range { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.fx-range > .field { padding: 10px; }
.fx-rrow { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--sp-track); flex-wrap: wrap; }
.fx-rlbl { flex: 0 0 auto; width: 4.2em; padding-top: 8px; font-size: 13px; color: var(--sub); white-space: nowrap; }
.fx-rlbl .req { margin-left: 2px; }
.fx-rcell { flex: 1 1 140px; min-width: 0; gap: 2px; }
.fx-rcell.fx-rtime { flex: 0 1 120px; }
.fx-rcell.fx-rdate { flex: 0 1 200px; }
.fx-rlbl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.fx-nextday { flex: 0 0 auto; font-size: 11px; line-height: 1.5; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: var(--night); background: var(--night-weak); }
.fx-nextday[hidden] { display: none; }
.fx-range > .hint { margin: 0; padding: 8px 12px; border-top: 1px solid var(--sp-track); background: #F8FAFC; }

/* 予定フォームの関連案件カード */
.fx-projcard { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.fx-projcard-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; font-size: 13px; }
.fx-projcard-st { font-size: 12px; font-weight: 600; color: var(--sub); }
.fx-projcard-st.ok { color: var(--ok); }
.fx-projcard-st.warn { color: var(--warn); }
.fx-projcard-st.danger { color: var(--danger); }
.fx-projcard-st.info { color: var(--primary); }
.fx-projcard a { flex: 0 0 auto; font-size: 13px; font-weight: 600; }

/* ===== 案件一覧・詳細（スマホ） ===== */
@media (max-width: 768px) {
  /* --- 05 案件一覧 --- */
  .pj-sp-top { display: grid; gap: 12px; margin: -16px -16px 0; padding: 4px 16px 12px; background: var(--panel); border-bottom: 1px solid var(--sp-line); }
  body:has(.pj-sp-top) .topbar { border-bottom: 0; }
  input.pj-search { width: 100%; height: 44px; border: 0; border-radius: 12px; background: var(--sp-track); padding: 0 14px; font: inherit; font-size: 16px; }
  input.pj-search:focus { outline: 2px solid var(--primary); outline-offset: 0; background: #fff; }
  .pj-sp-sub { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--sub); margin-bottom: -6px; }
  .pj-sp-sub .btn.small { height: 32px; font-size: 13px; }
  .pj-filters:not(.is-open) { display: none; }
  .pj-filters .pj-fl-q { display: none; }

  .pj-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .pj-card { display: grid; gap: 6px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--sp-line); border-radius: var(--sp-r); color: var(--text); text-decoration: none; }
  .pj-card:hover, .pj-card:active { text-decoration: none; background: #FCFDFE; }
  .pj-card-top { display: flex; align-items: flex-start; gap: 8px; }
  .pj-card-no { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
  .pj-card-tags { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .pj-card-tags .badge + .badge { margin-left: 0; }
  .pj-card-title { font-size: 16px; font-weight: 700; line-height: 1.4; word-break: break-word; }
  .pj-card-foot { display: flex; align-items: center; gap: 12px; }
  .pj-card-when { flex: 0 0 auto; min-width: 7.5em; font-size: 13px; color: #475569; }
  .pj-card-when.over { color: var(--danger); }
  .pj-card-num { flex: 0 0 auto; min-width: 2.4em; text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
  .pj-card .progress-unset { margin-left: auto; }
  .pj-bar { flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: 3px; background: var(--sp-track); overflow: hidden; display: block; }
  .pj-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--sub); }
  .pj-bar.danger > span { background: var(--danger); }
  .pj-bar.ok > span { background: var(--ok); }
  .pj-bar.warn > span { background: var(--warn); }
  .pj-bar.info > span { background: var(--primary); }
  .pj-bar.lg { height: 8px; border-radius: 4px; background: #fff; }

  /* --- 06 案件詳細 --- */
  body:has(.pj-sp) .topbar { border-bottom: 0; flex-wrap: nowrap; }
  body:has(.pj-sp) .topbar h1 { display: none; }
  body:has(.pj-sp) .back-link { flex: 1 1 auto; }
  /* 下部の固定ボタンを出すので、この画面では下部タブを隠す */
  body:has(.pj-dock) .tabbar { display: none; }
  body:has(.pj-dock) main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .pj-sp { display: grid; gap: 8px; }
  .pj-sp-head { display: grid; gap: 8px; margin: -16px -16px 8px; padding: 0 16px 18px; background: var(--panel); border-bottom: 1px solid var(--sp-line); }
  .pj-sp-no { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); }
  .pj-sp-title { font-size: 22px; font-weight: 700; line-height: 1.4; word-break: break-word; }
  .pj-sp-cust { justify-self: start; font-size: 14px; font-weight: 600; }
  .pj-prep { display: grid; gap: 10px; margin-top: 6px; padding: 14px; border-radius: var(--sp-r); background: var(--neutral-weak); --tc: var(--sub); }
  .pj-prep.danger { background: var(--danger-weak); --tc: var(--danger); }
  .pj-prep.ok { background: var(--ok-weak); --tc: var(--ok); }
  .pj-prep.warn { background: var(--warn-weak); --tc: var(--warn); }
  .pj-prep.info { background: var(--primary-weak); --tc: var(--primary); }
  .pj-prep-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .pj-prep-tags { font-size: 13px; color: var(--tc); line-height: 1.5; }
  .pj-prep-num { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .pj-prep-num small { font-size: 16px; color: var(--sub); }
  .pj-prep-base { font-size: 12px; color: #475569; }

  .pj-sp .sec-head { margin: 4px 4px 0; }
  .pj-sp .sec-head .add-link { font-size: 13px; }
  .pj-done-head h3 { color: #475569; }
  .pj-note { margin-left: auto; font-size: 12px; color: var(--sub); }
  .pj-procs { border-color: var(--line); }
  .pj-proc { display: flex; align-items: center; gap: 6px; padding-right: 4px; min-height: 60px; }
  .pj-proc-hit { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 4px 6px 16px; cursor: pointer; }
  .pj-proc-hit .bigcheck { width: 28px; height: 28px; border-radius: 8px; }
  .pj-proc-label { font-size: 16px; font-weight: 500; word-break: break-word; }
  .pj-proc.done, .pj-proc.done .pj-proc-hit { min-height: 50px; }
  .pj-proc.done .bigcheck { width: 24px; height: 24px; border-radius: 7px; }
  .pj-proc.done .pj-proc-label { font-size: 15px; font-weight: 400; color: var(--sub); }
  .pj-proc-date { flex: 0 0 auto; font-size: 11px; color: #94A3B8; }
  .pj-due { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 4px; color: var(--sub); background: var(--neutral-weak); white-space: nowrap; }
  .pj-due.warn { color: var(--warn); background: var(--warn-weak); }
  .pj-due.danger { color: var(--danger); background: var(--danger-weak); }
  .pj-memo { flex: 0 0 auto; font-size: 11px; color: var(--sub); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
  .pj-meta-btn { flex: 0 0 auto; width: 36px; height: 44px; border: 0; background: transparent; color: #94A3B8; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; border-radius: 8px; }
  .pj-meta-btn:active { background: var(--neutral-weak); }
  .pj-alldone { margin: 0; padding: 14px 16px; background: var(--ok-weak); color: var(--ok); border-radius: var(--sp-r); font-size: 13px; }

  .pj-detail-grid { gap: 12px; margin-top: 8px; }
  .pj-detail-grid .panel-head h3 { font-size: 15px; }
  .pj-ev-panel .ev-line { padding: 10px 2px; }

  .pj-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--sp-line); }
  .pj-dock .btn { flex: 1 1 0; height: 50px; border-radius: 12px; font-size: 15px; font-weight: 600; border-color: var(--line); }
  .pj-dock .pj-dock-main { background: var(--sp-dark); border-color: var(--sp-dark); color: #fff; }

  /* --- 07・08 入力フォーム（スマホ） --- */
  .fx-seg { max-width: none; }
  .fx-seg .fx-opt > span { height: 38px; font-size: 14px; }
  .fx-pills .fx-opt > span { height: 38px; font-size: 14px; }
  .fx-chip { min-height: 40px; font-size: 14px; }
  .fx-picker .picker-groupbox { display: contents; }
  .fx-picker .picker-group { display: none; }
  .fx-picker .picker-head .btn.link { height: 32px; padding: 0 4px; font-weight: 600; }
  fieldset.section.fx-sched { background: #fff; border-color: var(--line); border-radius: var(--sp-r); padding: 14px; }
  fieldset.section.fx-sched legend { display: none; }
  .fx-switch { justify-content: space-between; font-size: 15px; }
  .fx-range input[type=date], .fx-range input[type=time] { padding: 0 6px; font-weight: 600; }
  .fx-rlbl { width: 3.2em; }
  .fx-rlbl .req { display: none; }
  .fx-rcell.fx-rtime { flex: 0 0 104px; }
  .fx-rcell.fx-rdate { flex: 1 1 140px; }

  /* 予定の詳細 */
  .fx-evd-head { display: grid; gap: 6px; padding: 14px; margin-bottom: 8px; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r); }
  .fx-evd-time { font-size: 16px; }
  .dl.fx-evd { grid-template-columns: 1fr; gap: 0; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r); padding: 4px 14px; }
  .dl.fx-evd dt { padding-top: 10px; font-size: 12px; }
  .dl.fx-evd dd { padding: 2px 0 10px; border-bottom: 1px solid var(--sp-track); font-size: 15px; }
  .dl.fx-evd dd:last-child { border-bottom: 0; }
  /* 上の見出しに出した種類・日時・状態は省く */
  .dl.fx-evd > :is(dt, dd):is(:nth-of-type(1), :nth-of-type(3), :nth-of-type(4)) { display: none; }
}