/* ==== 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 { 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; }
/* 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); }
/* 内容には改行が入りうるので、参照表示でも改行を残す（既定の 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; }

/* 状態バッジ（意味色固定） */
.sales-status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; white-space: nowrap; }
.sales-status-draft { background: #f3f4f6; color: #374151; }
.sales-status-pendingapproval { background: #dbeafe; color: #1d4ed8; }
.sales-status-approved { background: #dcfce7; color: #15803d; }
.sales-status-rejected { background: #fee2e2; color: #b91c1c; }
.sales-status-open { background: #e0f2fe; color: #0369a1; }
.sales-status-ordered, .sales-status-recorded, .sales-status-invoiced { background: #ede9fe; color: #6d28d9; }
.sales-status-issued { background: #dcfce7; color: #15803d; }
/* 発注の「検収済」と仕入請求の「受領」は同じキー（列挙名 Received）になる。どちらも「受け取った」確定した事実なので発行済と同じ色。 */
.sales-status-received { background: #dcfce7; color: #15803d; }
.sales-status-partiallypaid { background: #fef3c7; color: #b45309; }
.sales-status-paid { background: #dcfce7; color: #15803d; }
.sales-status-cancelled { background: #f3f4f6; color: #6b7280; }

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

/* 販売設定: 帳票ロゴのプレビュー */
.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-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 {
    width: 260px;
    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; }
.dialog-form .sales-scan-input { width: 100%; }

/* 未登録のコードを紐付けるときの「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; }
.dialog-form .sales-scan .sales-scan-input { 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); }