/* ============================================================
   DocumentBox 共通CSS (common.css)
   各テンプレにインライン重複していた「完全一致の自己完結ブロック」のみを集約。
   読み込み順: common.css → ページ内インライン<style> の順（インラインが後＝優先）。
   ============================================================ */

/* ----- モバイル基本ブロック -----
   由来: customers / index / kyuka / login / products / requote / ringi / updates / yakushoku
   （上記9テンプレでバイト完全一致。home と field-doc 4本はコメント差/レイアウト差のためインライン残置） */
@media (max-width:640px){
  input,select,textarea{font-size:16px}
  input,select,button{min-height:44px}
  textarea{min-height:96px}
  html,body{overflow-x:clip}
  /* iOS Safari は input[type=date] が固有幅を持ち width:100% を無視して枠が
     親からはみ出す。見た目をリセットして枠内に収める（タップでのピッカー表示は維持）。 */
  input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0}
}

/* ----- select を input と同じ箱に揃える（横並び時の高さズレ防止・全書類で統一）-----
   各テンプレの input,select{background:var(--field)} が shorthand で背景を上書きするため、
   自前の▼が消えないよう body select で詳細度を上げて適用する。 */
body select{
  -webkit-appearance:none;appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7785' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;
}

/* ----- 数量の自前ドロップダウン（開いたとき約5件ぶんの高さでスクロール）----- */
.qtydd{position:relative;display:block}
.qtydd-btn{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;
  background:var(--field);border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font:inherit;color:var(--ink);cursor:pointer;min-height:44px;line-height:1.6}
.qtydd-btn:hover{border-color:var(--primary)}
.qtydd-btn .qcaret{color:var(--muted);font-size:10px}
.qtydd-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--card);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);
  max-height:188px;overflow:auto;overscroll-behavior:contain;display:none}  /* 約5件でスクロール */
.qtydd.open .qtydd-list{display:block}
.qtydd-opt{padding:9px 12px;cursor:pointer;text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.qtydd-opt:hover,.qtydd-opt:active{background:var(--primary-soft)}
.qtydd-opt.sel{background:var(--primary-soft);color:var(--primary-d);font-weight:700}

/* ----- コンボ（候補入力）関連 -----
   由来: shuuri / haiki / setchi / taiou（4テンプレでバイト完全一致）
   .combo / .combo-list / .combo-item と、コンボ用の @media(pointer:coarse)（.kbd-btn 含む） */
.combo{position:relative}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--card);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);max-height:240px;overflow:auto;
  overscroll-behavior:contain;display:none}   /* contain: 端まで送っても背後のページを動かさない */
.combo-list.open{display:block}
.combo-item{padding:9px 11px;cursor:pointer;font-size:13px}
.combo-item:active,.combo-item.active{background:var(--primary-soft)}
@media (pointer:coarse){
  .combo input{padding-right:44px}
  .kbd-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:3;
    height:30px;min-height:0;border:none;background:var(--primary-soft);color:var(--primary-d);
    border-radius:6px;font-size:15px;line-height:1;padding:0 8px;cursor:pointer}
}

/* ----- メール共有ボタン（Web Share API・対応端末のみ表示） -----
   生成ファイルを添付した新規メール（OS共有シート）を開く。宛先・件名・本文は付けない。
   .out.share は2クラス指定なので各テンプレの button.out（インライン）より優先される。 */
button.out.share{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--card);color:var(--ok);border:1px solid #bfe0d0;font-weight:700}
button.out.share:hover{background:#eef8f2}
button.out.share:disabled{opacity:.6;cursor:default}

/* ----- 宛先コピーボタン（固定宛先をクリップボードへ。稟議書・役職本のみ使用） -----
   ボタン内に宛先アドレスを表示し、右端にコピーアイコンを置く。 */
button.out.copyto{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--card);color:var(--primary-d);border:1px solid var(--line);font-weight:700}
button.out.copyto:hover{background:var(--primary-soft)}
button.out.copyto .addr{font-weight:600;font-size:13px;line-height:1.3;word-break:break-all}
button.out.copyto .ico{flex:none;font-size:15px;line-height:1}

/* ----- マスタの絞り込み欄（顧客/商品/ユーザー）-----
   スマホでは欄を画面上部に固定し、入力中も検索結果がキーボードで隠れないようにする。 */
.searchbar{margin-bottom:14px}
@media (max-width:640px){
  .searchbar{position:sticky;top:0;z-index:6;background:var(--card);
    margin:0 -18px 12px;padding:10px 18px;border-bottom:1px solid var(--line)}
  .searchbar .search{max-width:none;width:100%}
  /* 絞り込み欄フォーカス中は下方向の余白を確保し、欄を画面上部までスクロールできるようにする
     （結果がキーボードの上に出るようにするため） */
  body.searching{padding-bottom:100vh}
}

/* ----- 出力ファイル名の表示位置を全書類で統一（出力ボタンの上） -----
   .acts は全書類で flex(column) のため order で先頭へ。一部テンプレはモバイル時のみ
   同等の指定があったが、ここで全画面サイズ・全書類に揃える。 */
.acts .fname{order:-1}


:root{color-scheme:light}


/* ============================================================
   iOSネイティブ再設計（スマホ全面刷新）
   設計書: docs/superpowers/specs/ の mobile-ios-redesign-design.md
   - トークンはここの :root が新デザインの正。未移行ページは自前の
     インライン :root（後読み）で上書きされるため影響を受けない。
   - 部品クラスは ds- プレフィックスで既存クラスと衝突しない。
   - 移行済みページはインライン :root とダーク初期適用スクリプトを持たない。
   ============================================================ */
:root{
  --bg:#F2F2F7; --card:#FFFFFF; --field:#F2F3F5;
  --ink:#0B0F14; --muted:#6D7683; --line:#E5E7EB;
  /* 旧名 --primary 系は attachCombo/qtydd 等の既存部品が参照するため
     アクセント（フォレストグリーン）へマップして残す */
  --accent:#1E7E45; --accent-d:#17643A; --accent-soft:#E8F3EC;
  --primary:#1E7E45; --primary-d:#17643A; --primary-soft:#E8F3EC;
  --ok:#1E7E45; --warn:#B9770E; --err:#C0392B; --stamp:#C0392B;
  --radius-card:14px; --radius-btn:12px; --radius:12px;
  /* 影はカードには使わない。浮遊要素（候補リスト等）専用 */
  --shadow:0 8px 24px rgba(15,23,32,.14);
}

/* オーバースクロール抑制: iOSの端バウンドを抑え、Android Chromeの
   プルリフレッシュ（引っ張って更新）を無効化する（入力途中の誤リロード事故防止）。
   代わりに各ページのヘッダー右端に更新ボタン(.ds-nav-reload)を置く。 */
html, body{ overscroll-behavior-y:none; }

/* ページ骨格: スマホ基準をPCでも中央寄せで表示 */
.ds-wrap{ max-width:640px; margin:0 auto; padding:0 16px calc(28px + env(safe-area-inset-bottom)); }
/* PC: データ表を持つページ（.ds-wide 付与ページのみ）はワイド表示。
   min-width 指定のためスマホ・タブレット縦（〜899px）は一切変わらない。 */
@media (min-width:900px){
  .ds-wrap.ds-wide{ max-width:1080px; }
}
.ds-body{ background:var(--bg); color:var(--ink); margin:0;
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; }

/* ----- ナビバー（sticky・すりガラス。旧 .bar は名称衝突事故があるため不使用）----- */
.ds-nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:4px;
  min-height:48px; padding:4px 8px calc(4px + 0px);
  background:rgba(242,242,247,.86); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(0,0,0,.08); }
.ds-nav-back{ display:flex; align-items:center; gap:2px; color:var(--accent); text-decoration:none;
  font-size:15px; min-height:44px; padding:0 8px; border-radius:8px; }
.ds-nav-back:active{ opacity:.55; }
.ds-nav-title{ position:absolute; left:50%; transform:translateX(-50%);
  font-size:16px; font-weight:600; max-width:56%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-nav-act{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.ds-nav-act a, .ds-nav-act button{ color:var(--accent); background:none; border:none; font:inherit;
  font-size:15px; min-height:44px; padding:0 10px; cursor:pointer; text-decoration:none;
  display:flex; align-items:center; border-radius:8px; }
.ds-nav-act a:active, .ds-nav-act button:active{ opacity:.55; }
/* ヘッダー右端の更新ボタン（プルリフレッシュ無効化の代替。アイコンのみ・44pxタップ領域） */
.ds-nav-reload{ width:44px; min-width:44px; justify-content:center; padding:0 !important; }
/* スマホ幅ではナビ内バッジ（管理者のみ・全社共有等）を隠し、中央タイトルとの重なりを防ぐ
   （権限はサーバ側で強制されておりバッジは補足表示のみ） */
@media (max-width:520px){ .ds-nav .ds-badge{ display:none; } }

/* ----- 大見出し（ラージタイトル）----- */
.ds-lt{ padding:14px 4px 10px; }
.ds-lt h1{ margin:0; font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.ds-lt p{ margin:2px 0 0; font-size:13px; color:var(--muted); }

/* ----- insetグループリスト ----- */
.ds-grp{ margin:0 0 20px; }
.ds-grp-label{ display:block; margin:0 6px 6px; font-size:13px; font-weight:600; color:var(--muted); }
.ds-inset{ background:var(--card); border-radius:var(--radius-card); overflow:hidden; }
.ds-row{ display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 14px;
  position:relative; color:inherit; text-decoration:none; font-size:15.5px;
  width:100%; box-sizing:border-box; background:none; border:none; font-family:inherit; text-align:left; cursor:pointer; }
.ds-row + .ds-row::before{ content:""; position:absolute; top:0; left:55px; right:0; height:1px; background:var(--line); }
.ds-inset.plain .ds-row + .ds-row::before{ left:14px; }
.ds-row:active{ background:#E9EAEE; }
.ds-row .t{ flex:1; min-width:0; }
.ds-row .sub{ display:block; font-size:12px; color:var(--muted); }
.ds-tile{ width:29px; height:29px; border-radius:7px; display:grid; place-items:center; flex:none; color:#fff; }
.ds-tile svg{ display:block; }
.ds-chev{ color:#C7CBD1; flex:none; }

/* ----- ボタン ----- */
.ds-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:48px; padding:0 20px; border-radius:var(--radius-btn); border:none;
  font:inherit; font-size:16px; font-weight:700; cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, opacity .15s ease; }
.ds-btn:active{ transform:scale(.97); }
.ds-btn:disabled{ opacity:.45; cursor:default; transform:none; }
.ds-btn-primary{ background:var(--accent); color:#fff; }
.ds-btn-primary:active{ background:var(--accent-d); }
.ds-btn-secondary{ background:#E9E9EF; color:var(--ink); }
.ds-btn-tinted{ background:var(--accent-soft); color:var(--accent-d); }
.ds-btn-danger{ background:#FBEEEC; color:var(--err); }

/* ----- iOSライクなトグルスイッチ（checkboxを流用）----- */
.ds-switch{ appearance:none; -webkit-appearance:none; margin:0; flex:0 0 auto;
  width:44px; height:26px; min-height:26px; box-sizing:border-box; border-radius:99px;
  background:#C7CBD1; position:relative; cursor:pointer; transition:background-color .2s ease; }
.ds-switch::after{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .2s ease; }
.ds-switch:checked{ background:var(--accent); }
.ds-switch:checked::after{ transform:translateX(18px); }

/* ----- 下部固定CTA（safe-area対応）----- */
.ds-cta{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; gap:10px;
  /* PCでも本文と同じ640px列に収まるよう、左右paddingで中央寄せ */
  padding:10px max(16px, calc((100% - 608px) / 2)) calc(10px + env(safe-area-inset-bottom));
  background:rgba(242,242,247,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid rgba(0,0,0,.08); }
.ds-cta .ds-btn{ flex:1; }
.ds-cta-pad{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); } /* CTAと本文の重なり回避 */

/* ----- セグメント切替（2〜4択のラジオ代替）----- */
.ds-seg{ display:flex; background:#E9E9EF; border-radius:9px; padding:2px; }
.ds-seg label{ flex:1; position:relative; }
.ds-seg input{ position:absolute; opacity:0; pointer-events:none; min-height:0; }
.ds-seg span{ display:flex; align-items:center; justify-content:center; min-height:36px;
  border-radius:7px; font-size:14px; color:var(--ink); cursor:pointer; transition:background-color .15s ease; }
.ds-seg input:checked + span{ background:#fff; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.ds-seg input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:1px; }

/* ----- フォーム ----- */
.ds-card{ background:var(--card); border-radius:var(--radius-card); padding:14px 14px 16px; margin:0 0 14px; }
.ds-card h2, .ds-card .ds-sec-title{ margin:0 0 10px; font-size:13px; font-weight:700; color:var(--muted); }
.ds-fl{ display:block; margin:12px 0 5px; font-size:12.5px; font-weight:600; color:var(--muted); }
.ds-fl:first-of-type{ margin-top:0; }
.ds-field input, .ds-field select, .ds-field textarea{
  width:100%; box-sizing:border-box; min-height:46px; padding:10px 12px;
  background:var(--field); border:1px solid transparent; border-radius:10px;
  font:inherit; font-size:16px; color:var(--ink); }
.ds-field textarea{ min-height:96px; resize:vertical; }
.ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus{
  outline:none; border-color:var(--accent); background:#fff; }
.ds-field input[readonly]{ color:var(--muted); }
.ds-duo{ display:flex; gap:10px; }
.ds-duo > *{ flex:1; min-width:0; }

/* ラベル左・値右の行型（短い項目用。insetリスト内で使う） */
.ds-frow{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:48px; padding:8px 14px; position:relative; font-size:15px; }
.ds-frow + .ds-frow::before{ content:""; position:absolute; top:0; left:14px; right:0; height:1px; background:var(--line); }
.ds-frow > .v{ color:var(--muted); display:flex; align-items:center; gap:6px; min-width:0; }
.ds-frow > .v.set{ color:var(--accent); font-weight:600; }

/* ----- 検索バー（iOS風）----- */
.ds-search{ display:flex; align-items:center; gap:8px; min-height:40px; padding:0 12px;
  background:#E4E4E9; border-radius:10px; }
.ds-search svg{ color:var(--muted); flex:none; }
.ds-search input{ flex:1; min-height:38px; border:none; background:none; font:inherit; font-size:16px; color:var(--ink); padding:0; }
.ds-search input:focus{ outline:none; }

/* ----- バッジ・チップ・空状態 ----- */
.ds-badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--accent-soft); color:var(--accent-d); }
.ds-badge.warn{ background:#FBF3E4; color:#8a5a0b; }
.ds-badge.err{ background:#FBEEEC; color:var(--err); }
.ds-empty{ text-align:center; color:var(--muted); font-size:13.5px; padding:32px 16px; }

/* 数値表示（予算・金額）は桁を揃える */
.ds-num{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .ds-btn, .ds-seg span{ transition:none; }
  .ds-btn:active{ transform:none; }
}

/* 右下の「戻る」ボタン。iOS でホーム画面から起動したときだけ JS が生成する
   （Android は端末の戻るがあるので出さない。判定は common.js の isIOSStandalone）。
   生成された時点で表示してよいので、ここでメディアクエリによる出し分けはしない。 */
.ds-fab-back{
  position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:60; display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; padding:0; border-radius:24px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border:1px solid rgba(0,0,0,.10); box-shadow:0 3px 14px rgba(0,0,0,.20);
  color:var(--accent); cursor:pointer;
}
.ds-fab-back:active{ opacity:.55; }