/* ==== Culminans.Sales: 販売管理の画面スタイル（全画面に読み込む） ==== */

/* フォームの2列グリッド（ダイアログ・伝票ヘッダ） */
/* フォームグリッド・カードはモジュール共通（シェルの app.css: alt-form-grid / alt-span2 / alt-card / alt-card-title）。 */

/* 設定・伝票ヘッダのカード */
.sales-readonly { padding: 4px 0; min-height: 1.6em; }

/* 明細表 */
/* 表は必ず器（.sales-lines-scroll）に入れる＝列の中身がそれ以上縮まない幅（折り返さない金額・
   「標準税率（10%）」など）の合計が本文の幅を超えると、器の無い表はページごと横へ広げる
   （375px の見積の詳細で 414px。2026-09-17 実測）。
   **入力欄のある列は、見出しの <th> に最小幅も持たせる**（Razor 側。幅を決めている列は幅と同じ値）。
   入力欄は中身の幅を持たないので、器に入れただけでは列が幾らでも縮み、商品のコンボが 375px で 7px、
   768px でも 16px まで潰れて入力できない（<th> の width だけでは床にならない）。床を列ごとに置くので、
   表の最小幅は列の合計から決まり、表全体の幅を別に足し直す数字を持たなくてよい。
   広い画面では列がもともと床以上の幅なので、見た目は変わらない。 */
.sales-lines-scroll { overflow-x: auto; overscroll-behavior-x: none; }
.sales-lines { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
/* 内容がメモ型（中身に合わせて伸びる）なので、行の中の各欄は上端で揃える。 */
.sales-lines th, .sales-lines td { padding: 4px 6px; border-bottom: 1px solid var(--alt-border); text-align: left; vertical-align: top; }
.sales-lines th { color: var(--alt-text-sub); font-weight: 600; font-size: 0.85rem; }
.sales-num { text-align: right !important; white-space: nowrap; }
/* 右寄せの金額の列の直後の左寄せの列。間がセルの余白（6px×2）だけだと「¥100,000 2026/10/15 6:09」と
   1 続きに読める（消込の表。TEST1-623）。列の幅ではなく左の余白を 24px にし、前の列の右の余白 6px と合わせて 30px 空ける＝狭い画面で表が広がるのは余白ぶんだけ。
   数量の直後の単位の列には付けない（「10 個」が離れて読める）ので、隣接の規則ではなく列ごとの印にしている。 */
.sales-lines .sales-after-num { padding-left: 24px; white-space: nowrap; }
/* 1 明細＝2 段（上＝商品と数量ほか、下＝内容）。区切り線は下の段にだけ引き、左の細い線で
   2 段がひとつの明細だと分かるようにする（段だけ分けると、3 明細が 6 行に見える）。 */
.sales-lines tr.sales-line-main > td { border-bottom: 0; padding-bottom: 2px; border-top: 1px solid var(--alt-border); }
.sales-lines tr.sales-line-main > td:first-child { border-left: 2px solid var(--alt-border); }
.sales-lines tr.sales-line-sub > td { padding-top: 0; }
.sales-lines tr.sales-line-sub > td:first-child { border-left: 2px solid var(--alt-border); }
/* 下段（内容）の中身は、器の見える幅で折り返す。下段のセルは表の幅まで伸びるので、狭い画面で表が器より
   広くなると、内容の欄も表の幅（375px の編集中で 625px）まで広がり、長い内容は横に転がさないと読めなかった。
   上限は器の幅（100cqw。器をコンテナにするのは下段を持つ表だけ）から、左の操作列（編集中だけ。Razor が
   --sales-lines-command で渡す）とセルの左右の余白（上の th, td の 6px×2）を引いた値＝広い画面ではセルの中の
   幅と同じなので、見た目は変わらない。狭い画面では操作列がボタンの幅（並べ替えの 2 つぶん）まで縮むので、内容の右端は
   器の端より 10px ほど手前で止まる。右端の削除の列（TEST1-476）は下段が覆うので、引く必要は無い。 */
.sales-lines-scroll:has(.sales-line-sub-body) { container-type: inline-size; }
.sales-line-sub-body { max-width: calc(100cqw - var(--sales-lines-command, 0px) - 12px); }
/* 内容には改行が入りうるので、参照表示でも改行を残す（既定の HTML は改行を潰す）。 */
.sales-line-desc { white-space: pre-wrap; }

/* 合計欄 */
.sales-totals { margin: 0.8rem 0; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.sales-total { font-size: 1.15rem; font-weight: 700; }
/* 伝票編集のヘッダー：税制の欄の右に合計を並べる（TEST1-260）。セルは .alt-form-grid > div の縦積みを横並びに直す。
   金額は桁をそろえて右寄せ（tabular-nums）。狭い画面でも 1 列のセルの中で右に寄るだけで、はみ出さない。 */
.alt-form-grid > .sales-tax-cell { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sales-head-totals { display: grid; grid-template-columns: auto auto; gap: 0 12px; margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* 見出しの色と大きさは入力欄の見出し（app.css の .alt-form-grid label）にそろえる。 */
.sales-head-totals dt { color: var(--alt-text-sub); font-size: 0.85rem; align-self: center; }
.sales-head-totals dd { margin: 0; }
.sales-head-totals strong { color: var(--alt-text); }

/* 状態バッジ（意味色固定）。色はすべてシェルの札のトークン（app.css の --alt-status-*）＝ダークテーマで言い直される。
   形は .alt-status-pill と余白が違う（1px 8px）ので寄せていない＝寄せると一覧の札の幅が変わる。 */
.sales-status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; white-space: nowrap; }
.sales-status-draft { background: var(--alt-status-draft-bg); color: var(--alt-status-draft-text); }
.sales-status-pendingapproval { background: var(--alt-status-inprogress-bg); color: var(--alt-status-inprogress-text); }
.sales-status-rejected { background: var(--alt-status-rejected-bg); color: var(--alt-status-rejected-text); }
.sales-status-open { background: var(--alt-status-accepting-bg); color: var(--alt-status-accepting-text); }
.sales-status-ordered, .sales-status-recorded, .sales-status-invoiced { background: var(--alt-status-booked-bg); color: var(--alt-status-booked-text); }
/* 確定した事実（承認済・発行済・受け取った・入金済）は同じ緑。発注の「検収済」と仕入請求の「受領」は同じキー（列挙名 Received）になる。 */
.sales-status-approved, .sales-status-issued, .sales-status-received, .sales-status-paid { background: var(--alt-status-resolved-bg); color: var(--alt-status-resolved-text); }
.sales-status-partiallypaid { background: var(--alt-status-partial-bg); color: var(--alt-status-partial-text); }
.sales-status-cancelled { background: var(--alt-status-cancelled-bg); color: var(--alt-status-cancelled-text); }

/* 明細下のツール列（行追加・テンプレート挿入） */
.sales-line-tools { justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; }
.sales-template-pick { width: 260px; }

/* 見積の工数内訳（明細の下段に出す 工程 × 対象 の表）。工程は最大 10 列なので、
   明細の器とは別に横へ転がせる器に入れる（明細の表ごと広げると、ほかの明細の入力欄まで右へ逃げる）。 */
.sales-work-scroll { overflow-x: auto; overscroll-behavior-x: none; margin: 4px 0; }
.sales-work-table { border-collapse: collapse; font-size: 0.82rem; }
.sales-work-table th, .sales-work-table td { padding: 2px 6px; border-bottom: 1px solid var(--alt-border); vertical-align: top; }
.sales-work-table thead th { color: var(--alt-text-sub); font-weight: 600; white-space: nowrap; }
.sales-work-table tbody th { text-align: left; white-space: nowrap; color: var(--alt-text-sub); font-weight: 600; }
/* 入力欄は中身の幅を持たないので、列ごとに幅を決める（決めないと 10 列で潰れて打てない）。 */
.sales-work-input { width: 88px; }
.sales-work-base > th, .sales-work-base > td { background: var(--alt-bg-subtle); }
.sales-work-total > th, .sales-work-total > td { font-weight: 700; border-top: 1px solid var(--alt-border-strong); }
.sales-work-notes { margin-top: 4px; }
/* 内訳グループの見出し（区分と対象）。見出しと欄を横に並べ、対象が多いときは折り返す。 */
.sales-work-basis { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 0.82rem; }
.sales-work-basis-pick { width: 180px; }
.sales-work-target-pick { white-space: nowrap; }
/* 内訳グループが 2 つ以上ある明細は、グループごとに左の罫で区切る（どの表がどの見出しのものか読めるように）。 */
.sales-work-group-multi { border-left: 2px solid var(--alt-border-strong); padding-left: 8px; margin-top: 8px; }
.sales-work-group-title { font-weight: 600; }
/* 「チケットから追加」の候補。件数が多いマイルストーンでも窓が画面から溢れないように器の中で転がす。 */
.sales-work-issues { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

/* 販売設定: 帳票ロゴのプレビュー */
.sales-logo-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.sales-logo-preview img { max-height: 48px; max-width: 240px; }

/* 販売設定の「伝票の種類ごとの様式」。7 種類を 2 列に並べ、狭い画面では 1 列に落とす
   （種類名とコンボを横に並べたいが、縦積みにすると設定画面がその分だけ長くなる）。 */
.sales-style-kinds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 6px 16px;
}

.sales-style-kind {
    display: grid;
    grid-template-columns: 7em 1fr;
    align-items: center;
    gap: 8px;
}

/* 手当てが要る行の強調（在庫一覧の発注点割れ・補充提案の対象外）。
   DevExpress の行の背景に勝たせるため !important（CLAUDE.md §7）。 */
.sales-stock-low td { background-color: var(--alt-warning-bg) !important; }
/* 在庫カード（在庫一覧で商品の行を選択すると開く）。計算式の行は数字を追いやすいよう少し大きく出す。 */
.sales-stock-card { display: flex; flex-direction: column; gap: 8px; }
.sales-stock-formula { font-size: 1rem; font-weight: 600; margin: 0; }
.sales-stock-card-heading { font-size: 0.95rem; margin: 8px 0 0; }

/* 見積の明細で、利用可能な在庫を超えている行の在庫表示（数字だけだと気付けない）。 */
.sales-stock-short { color: var(--alt-danger); font-weight: 600; }
/* 関連チケットの「詳細の控え」（結んだ時点の証憑）。原文をそのまま出すので改行を活かし、
   長い本文で画面が流れないよう高さを抑えて中だけ送る。Markdown としては描かない（原文が証憑）。 */
.sales-issue-snapshot {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 14em;
    overflow-y: auto;
    margin: 2px 0 8px 1.5em;
    padding: 6px 10px;
    border-left: 3px solid var(--alt-border);
    background: var(--alt-bg-subtle);
    color: var(--alt-text-sub);
    font-size: .9em;
}

/* バーコードの読み取り欄。**素の input**（値が確定した 1 回だけ change が上がる＝1 スキャン 1 往復）。
   見た目だけ周りの DevExpress の入力欄に寄せる。 */
.sales-scan-input {
    padding: 4px 8px;
    border: 1px solid var(--alt-border);
    border-radius: 4px;
    background: var(--alt-bg-body);
    color: var(--alt-text-body);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.sales-scan-input:focus {
    outline: none;
    border-color: var(--alt-accent);
}

/* ツールバーの中だけ縦中央に置く（並ぶ向きが横なので、寄せ方はここでしか決められない）。
   ダイアログの中は縦並びの欄なので、幅いっぱいに伸ばして左揃えのままにする
   ＝align-self を素の指定に混ぜると、縦並びの側で入力欄が中央へ寄る。 */
.grid-toolbar .sales-scan-input { align-self: center; }

/* 未登録のコードを紐付けるときの「1 回の数量」。状態の選択欄（alt-status-select）を幅目当てで
   借りると、あちらを直した日に数量欄まで動く。 */
.grid-toolbar .sales-scan-qty { width: 120px; align-self: center; }

/* 読み取り欄とカメラのボタンを横に並べる（ScanInput）。ダイアログの中では欄が幅いっぱいなので折り返す。 */
.sales-scan { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dialog-form .sales-scan { display: flex; }
/* 読み取り欄の幅は枠（Core の ScanField＝alt-scan-field）に持たせる＝欄は枠いっぱい。ダイアログの中は伸ばす。 */
.sales-scan .alt-scan-field { width: 260px; }
.dialog-form .sales-scan .alt-scan-field { flex: 1 1 200px; width: auto; }

/* カメラの映像。幅いっぱい・4:3 に固定＝端末の解像度で高さが暴れて、ボタンが画面の外へ逃げない。
   object-fit: cover で映像の余白を作らない（余白があると「枠に入れて」の枠が分からない）。 */
.sales-camera-video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    object-fit: cover;
    border-radius: 4px;
}

/* 棚卸の読み取り（第3段）。読んだ結果はスマホで見るので少し大きく、いま足した行には印を付ける。 */
.sales-scan-result { font-size: 1.05rem; }
.sales-lines tr.sales-scan-hit > td { background: var(--alt-accent-soft); }

/* 取引先の担当者 1 名の枠（2026-09-21。枠にした理由は SalesCustomers.razor の注記が正）。
   中の並びはシェルの .alt-form-grid を借りるので、ここは枠と見出しの行だけを持つ。
   **Culminans.Workflow の .wf-field-item が同じ形**（1 レコード＝1 枠）＝モジュールの CSS は
   互いに参照できないので写しだが、3 つ目が出たらシェル（app.css）へ上げること。 */
.sales-contact-card {
    border: 1px solid var(--alt-border);
    border-radius: var(--alt-radius-md);
    padding: 8px 10px;
    margin-bottom: 8px;
}

/* 見出しの行は .wf-detail-head に重ねて当てる＝違うのはこの 2 つだけ
   （1 行に収まる見出しなので上揃えではなく中央、下の入力欄との間に余白）。 */
.sales-contact-head {
    align-items: center;
    margin-bottom: 6px;
}

@media (max-width: 720px) {
    .sales-contact-row { grid-template-columns: 1fr auto; }
}

/* 郵便番号の欄と「住所を引く」を横に並べる（欄が伸び、ボタンは中身の幅のまま）。
   min-width: 0 が無いと、flex の中の入力欄が縮まずダイアログから溢れる。 */
.sales-postal { display: flex; gap: 6px; align-items: center; }
.sales-postal > :first-child { flex: 1 1 auto; min-width: 0; }
/* ボタンは縮めない＝入力欄と並ぶと幅が足りず「住所を／引く」と 2 行に折り返す（実測）。 */
.sales-postal > :last-child { flex: 0 0 auto; white-space: nowrap; }

/* 住所検索の候補。
   **10 件分で高さを止めて、それ以上は中で送る**＝上限の 50 件がそのまま伸びると
   ポップアップが画面の外へ出て、閉じるボタンにも届かなくなる（「中央区」で 50 件＝1394px を実測）。
   高さは「行 × 10 ＋ 間 × 9」で、行の高さ（22px）は中身が 1 行のときの実測値。
   長い住所が折り返した行はその分だけ多く占めるので、見える件数は 10 件より少し減る。
   右の余白はスクロールバーが出たときに文字が隠れないぶん。 */
.sales-postal-picks {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(10 * 22px + 9 * 6px);
    overflow-y: auto;
}

/* 住所検索のポップアップ：検索欄とボタンを横に並べる（欄が伸び、ボタンは中身の幅のまま）。 */
.sales-postal-search { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.sales-postal-search > :first-child { flex: 1 1 auto; min-width: 0; }
.sales-postal-search > :last-child { flex: 0 0 auto; white-space: nowrap; }

/* 候補の郵便番号（住所と見分けが付くよう、等幅で少し細く）。 */
.sales-postal-code { font-variant-numeric: tabular-nums; color: var(--alt-text-sub); margin-right: 8px; }

/* 候補を上限で切ったときの断り（検索欄のすぐ下）。**赤で出す**＝続きがあることに気付かないまま
   「無い」と判断されるのを避ける。案内文（acct-hint）と並ぶので、色だけで見分ける。 */
.sales-postal-truncated { color: var(--alt-danger); margin: 0 0 4px; font-size: .9em; }

/* 仕入・売上分析のピボット（AnalyticsPivotView）。既定の高さ（400px）では数行しか見えないので、
   画面の高さから見出し・操作の行・案内文の分を引いた高さに広げる。DxPivotTable には Height の
   パラメータが無いので CSS で決める（渡すと黙って消える＝CLAUDE.md §7）。
   **vh は表示倍率で割る**（§7＝zoom の中では倍率の分だけ伸びてはみ出す）。低い画面でも潰れないよう下限を持たせる。 */
.dxbl-pivot-table.sales-analytics-pivot { height: max(360px, calc(100vh / var(--alt-vz, 1) - 350px)); }