/* ========================================
   modal.css
   モーダル全般（車両登録、詳細、売却確認、ワークフロー）
   ======================================== */

/* 共通オーバーレイ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:none;align-items:center;justify-content:center}
.overlay.open{display:flex}

.modal{background:var(--bg2);border:1px solid var(--border);border-radius:16px;width:520px;max-width:96vw;max-height:90vh;overflow-y:auto}
.modal-wide{width:660px}

.mhdr{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:1}
.mhdr-title{font-size:15px;font-weight:600}
.mclose{background:none;border:none;color:var(--text2);font-size:20px;cursor:pointer;line-height:1}
.mbody{padding:20px}
.mfooter{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:var(--bg2)}

/* フォーム */
.fg{margin-bottom:13px}
.fg label{display:block;font-size:11px;color:var(--text2);margin-bottom:5px;font-weight:600}
.fg input,.fg select,.fg textarea{width:100%;padding:8px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:13px;outline:none;font-family:inherit}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue)}
.fg select option{background:var(--bg3)}
.fg textarea{min-height:56px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* 販売情報ブロック（売約スイッチ・日付） */
.sell-block{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:13px 14px;margin-bottom:8px}
.sell-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fg input:disabled,.fg select:disabled{opacity:.38;cursor:not-allowed;background:var(--bg4)}
.fsec{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:12px 0 8px;border-top:1px solid var(--border);margin-top:4px}

/* 写真ドロップ */
.photo-drop{border:1.5px dashed var(--border);border-radius:var(--r);padding:18px;text-align:center;cursor:pointer;font-size:12px;color:var(--text3)}
.photo-drop:hover{border-color:var(--blue);color:var(--blue)}

/* ボタン */
.btn-cancel{padding:8px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text2);font-size:13px;cursor:pointer}
.btn-save{padding:8px 20px;background:var(--green);border:none;border-radius:var(--r);color:#fff;font-size:13px;font-weight:600;cursor:pointer}

/* 車両詳細モーダル */
.detail-photo{width:100%;height:150px;background:var(--bg3);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:52px;overflow:hidden;margin-bottom:16px;position:relative}
.detail-photo img{width:100%;height:100%;object-fit:cover}
.detail-photo-edit{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:11px;padding:4px 9px;border-radius:6px;cursor:pointer}

/* タスク項目（詳細モーダル内） */
.task-items{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.task-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.task-item-row{display:flex;align-items:center;gap:11px;padding:12px 14px}
.task-chk{width:30px;height:30px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
/* v1.0.27: 状態色の統一基準  未着手=グレー（既定） / 途中=オレンジ / 完了=緑 */
.task-chk.partial{background:var(--orange);border-color:var(--orange)}
.task-chk.done{background:var(--green);border-color:var(--green)}
.task-item-name{flex:1;font-size:14px;font-weight:600}
.task-item-sub{font-size:11px;color:var(--text3);margin-top:2px}
.task-item-pct{font-size:13px;font-weight:700;color:var(--text2);margin-right:4px}
.task-open-btn{font-size:12px;color:var(--blue);background:rgba(55,138,221,.12);border:1px solid rgba(55,138,221,.25);border-radius:6px;padding:5px 11px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.task-open-btn:hover{background:rgba(55,138,221,.22)}

/* 全体進捗 */
.detail-overall{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:13px;margin-bottom:4px}
.detail-overall-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:7px}
.detail-overall-bar{height:8px;background:var(--bg4);border-radius:4px;overflow:hidden}
.detail-overall-fill{height:100%;background:var(--orange);border-radius:4px;transition:.4s}

/* ワークフロー画面 */
#wf-page{display:none;position:fixed;inset:0;background:var(--bg);z-index:200;flex-direction:column}
#wf-page.open{display:flex}
.wf-topbar{height:var(--topbar);background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0}
.wf-back{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text2);font-size:13px;padding:6px 12px;border-radius:var(--r);border:1px solid var(--border)}
.wf-back:hover{color:var(--text)}
.wf-vehicle{background:var(--bg2);border-bottom:1px solid var(--border);padding:11px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.wf-thumb{width:54px;height:42px;border-radius:7px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;flex-shrink:0}
.wf-thumb img{width:100%;height:100%;object-fit:cover}
.wf-pb-track{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;margin-top:6px}
.wf-pb-fill{height:100%;background:var(--orange);border-radius:3px;transition:.4s}
.wf-body{flex:1;overflow-y:auto;padding:14px}
.wf-sec-lbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:12px 0 6px}
.wf-step{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.wf-step-row{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer}
.wf-step-row:hover{background:rgba(255,255,255,.02)}
.wf-chk{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.2s}
.wf-chk.done{background:var(--orange);border-color:var(--orange)}
.wf-step-name{flex:1;font-size:13px}
.wf-step-name.done{color:var(--text3);text-decoration:line-through}
.wf-step-sub{font-size:11px;color:var(--text3);margin-right:6px}
.wf-chev{color:var(--text3);font-size:15px;transition:transform .2s}
.wf-chev.open{transform:rotate(90deg)}
.wf-det{display:none;background:var(--bg3);border-top:1px solid var(--border);padding:13px 14px}
.wf-det.open{display:block}
.wf-det p{font-size:12px;color:var(--text2);line-height:1.7;margin-bottom:9px}
.wf-det ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.wf-det ul li{font-size:12px;color:var(--text2);display:flex;gap:7px}
.wf-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:5px}
.wf-cbtn{padding:7px 14px;border:1px solid var(--orange);background:none;color:var(--orange);border-radius:var(--r);font-size:12px;cursor:pointer}
.wf-cbtn.done{background:rgba(245,158,11,.12);color:#fcd34d;border-color:#fcd34d}
.wf-footer{padding:13px 16px;background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0;display:flex;justify-content:flex-end}
.wf-done-btn{padding:11px 26px;background:var(--green);border:none;border-radius:var(--r);color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.wf-done-btn:disabled{opacity:.4;cursor:not-allowed}

/* 売却確認 */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;display:none;align-items:center;justify-content:center}
.confirm-overlay.open{display:flex}
.confirm-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:30px;width:370px;max-width:94vw;text-align:center}
.confirm-icon{font-size:38px;margin-bottom:12px}
.confirm-title{font-size:17px;font-weight:700;margin-bottom:8px}
.confirm-sub{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:20px}
.confirm-date-row{margin:0 0 18px;text-align:left}
.confirm-date-row label{display:block;font-size:11px;color:var(--text2);margin-bottom:5px;font-weight:600}
.confirm-date-row input{width:100%;padding:8px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:13px;outline:none}
.confirm-btns{display:flex;gap:10px;justify-content:center;margin-top:8px}

/* ========================================
   売約スイッチ（車両モーダル内）
   ======================================== */
.sell-switch{
  width:46px;height:26px;background:var(--bg4);border:1px solid var(--border);
  border-radius:13px;cursor:pointer;position:relative;transition:.2s;flex-shrink:0
}
.sell-switch-knob{
  position:absolute;width:20px;height:20px;background:var(--text2);
  border-radius:50%;top:2px;left:2px;transition:.2s
}
.sell-switch.on{background:rgba(29,185,122,.3);border-color:var(--green)}
.sell-switch.on .sell-switch-knob{background:var(--green);left:22px}

/* ========================================
   フォーム要素（モーダル内 input/textarea/select）
   ======================================== */
.fsec{
  font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;
  letter-spacing:.5px;border-top:1px solid var(--border);padding-top:14px;margin:14px 0 10px
}
.frow{display:flex;gap:10px;margin-bottom:10px}
.frow > .fg{flex:1}
.fg{margin-bottom:10px}
.fg label{display:block;font-size:11px;color:var(--text2);margin-bottom:5px;font-weight:600}
.fg input[type="text"],
.fg input[type="number"],
.fg input[type="date"],
.fg input[type="file"],
.fg select,
.fg textarea{
  width:100%;padding:8px 10px;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);font-size:13px;outline:none;font-family:inherit
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue)}
.fg input:disabled{opacity:.5;cursor:not-allowed}

/* ========================================
   車両詳細モーダル：上部の在庫日数ボックス＋金額
   ======================================== */
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.detail-head-left{flex-shrink:0}
.detail-head-right{flex:1;text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end;justify-content:center;min-height:60px}
.detail-price{font-size:24px;font-weight:800;color:var(--green);line-height:1.1}
.detail-deldate{font-size:11px;color:var(--text2)}

.detail-days-box{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:10px 14px;min-width:110px;text-align:left;display:flex;flex-direction:column;gap:2px
}
.detail-days-box.dg{background:rgba(29,185,122,.12);border-color:rgba(29,185,122,.35);color:var(--green)}
.detail-days-box.dw{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:var(--orange)}
.detail-days-box.dr{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#fca5a5}
.detail-days-box.db{background:rgba(55,138,221,.15);border-color:rgba(55,138,221,.4);color:#93c5fd}
.detail-days-num{font-size:28px;font-weight:800;line-height:1;letter-spacing:-.5px}
.detail-days-unit{font-size:14px;font-weight:700;margin-left:2px}
.detail-days-label{font-size:11px;color:var(--text2);font-weight:600}
.detail-days-box.db .detail-days-label,
.detail-days-box.dg .detail-days-label,
.detail-days-box.dw .detail-days-label,
.detail-days-box.dr .detail-days-label{color:inherit;opacity:.8}
.detail-days-sub{font-size:11px;font-weight:600;margin-top:2px;color:var(--text2)}
.detail-days-sub.warn{color:#fca5a5}

/* ========================================
   コアメモ表示（編集ボタン上の枠）
   ======================================== */
.core-memo{
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);
  border-radius:var(--r);padding:10px 12px;margin-bottom:10px;cursor:pointer;
  transition:.15s
}
.core-memo:hover{background:rgba(245,158,11,.13)}
.core-memo-label{font-size:11px;font-weight:700;color:var(--orange);margin-bottom:4px}
.core-memo-text{
  font-size:13px;color:var(--text);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden
}
.core-memo[data-expanded="1"] .core-memo-text{
  -webkit-line-clamp:unset;display:block;overflow:visible
}
.core-memo.core-memo-empty{cursor:default;background:rgba(255,255,255,.02);border-color:var(--border)}
.core-memo.core-memo-empty:hover{background:rgba(255,255,255,.03)}
.core-memo-placeholder{color:var(--text3);font-style:italic}

/* ========================================
   作業メモ（タスク下、タップで編集）
   ======================================== */
.work-memo{
  margin-top:14px;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);padding:11px 13px
}
.work-memo-label{font-size:11px;font-weight:700;color:var(--text3);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.work-memo-hint{font-size:10px;color:var(--text3);font-weight:500}
.work-memo-view{
  font-size:13px;color:var(--text);line-height:1.6;
  min-height:54px;cursor:text;padding:6px 4px;border-radius:5px;
  transition:.15s;white-space:pre-wrap;word-break:break-word
}
.work-memo-view:hover{background:rgba(255,255,255,.03)}
.work-memo-placeholder{color:var(--text3);font-style:italic}
.work-memo-input{
  width:100%;padding:9px 11px;background:var(--bg4);border:1px solid var(--blue);
  border-radius:var(--r);color:var(--text);font-size:13px;outline:none;
  font-family:inherit;line-height:1.55;resize:vertical;min-height:80px
}
.work-memo-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

/* v1.0.35: 期限超過バッジ（詳細モーダルのタスク行） */
.task-overdue-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  margin-right: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}


/* v1.0.36: タスク行の列を固定幅で揃える */
/* 列構成: [chk] [info(flex:1)] [badge(可変)] [pct(56px右寄)] [open(72px or 空)] */
.task-item-row {
  align-items: center;
}
.task-item-info {
  flex: 1;
  min-width: 0;
}
.task-item-info .task-item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-item-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}
.task-item-badge:empty {
  margin-left: 0;
}
.task-item-pct {
  width: 52px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 0;
}
.task-item-open {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}
.task-item-open .task-open-btn {
  width: 100%;
  text-align: center;
}

/* v1.0.41: 自動完了タスクのチェックボックスは操作不可なカーソル */
.task-chk.auto {
  cursor: default;
}

/* ============================================================
   v1.0.43: 車両モーダル ヘッダー風写真プレビュー（SNS風）
   ============================================================ */
.photo-hero-wrap {
  position: relative;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.photo-hero {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.photo-hero.has-photo {
  background: var(--bg);
}
.photo-hero .hero-empty {
  text-align: center;
  font-size: 32px;
  color: var(--text3);
  line-height: 1.3;
}
.photo-hero .hero-empty span {
  display: inline-block;
  font-size: 11px;
  margin-top: 4px;
}
.photo-hero-actions {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.photo-hero-btn {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.photo-hero-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.photo-hero-btn.ghost {
  background: rgba(0, 0, 0, 0.35);
  font-weight: 400;
}


/* ============================================================
   v1.0.43: 車両モーダル ヘッダー風写真プレビュー（SNS風）
   ============================================================ */
.photo-hero-wrap {
  position: relative;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.photo-hero {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.photo-hero.has-photo {
  background: var(--bg);
}
.photo-hero .hero-empty {
  text-align: center;
  font-size: 32px;
  color: var(--text3);
  line-height: 1.3;
}
.photo-hero .hero-empty span {
  display: inline-block;
  font-size: 11px;
  margin-top: 4px;
}
.photo-hero-actions {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.photo-hero-btn {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.photo-hero-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.photo-hero-btn.ghost {
  background: rgba(0, 0, 0, 0.35);
  font-weight: 400;
}