/* =============================================
   BB Conduct Monitoring - 買取情報アップロード画面 スタイル
   本画面限定でエンキュー（templates/page-conduct-import.php）。
   全セレクタの最左はこのプラグイン専用クラス（.bb-cm-）で閉じる。
   実値リテラルは使わず、テーマ共通のデザイントークン（global.css）のみを参照する
   （mypage-card.css と同型・ローカル変数レイヤーは持たない）。
   例外: 白背景（#fff）のみ、mypage-card.cssの「白文字（#fff）のみリテラル許容」の例外に
   ならい、リテラルのまま使う（.bb-ui-button.secondaryのbackground-color: #fffと同じ直書き）。
   ============================================= */

/* 意味のまとまりごとの区切り（見出し＋説明文／CSVの列順説明とサンプル行／注意事項の箇条書き／
   テンプレートダウンロード／CSV入力イメージ画像／アップロードフォーム）。見出し→説明文の間は
   global.css の .bb-ui-card h2 が既に margin-bottom を持つため、この対象には含めない。
   バックログ「買取情報アップロード画面の説明文を短縮しCSV入力イメージ画像を挿入する」
   （2026-09-17）: 誠報社の「行間・余白を広げる」依頼を受け、1.5rem→2remへ1段階拡大。 */
.bb-cm-import-card .bb-cm-group-start {
    margin-top: var(--bb-space-8);
}

/* 注意事項の箇条書き内、項目同士の間隔（誠報社の依頼原文にあったがdraft/planで見落とし、
   2026-08-22にユーザー承認のうえ追加）。li + li にして最初の項目には効かせず、
   最後の項目の下にも余白を残さない設計にした（ul 側に上下の padding/border が無いため、
   全項目に margin-bottom を付ける書き方でも実際には次のまとまりの margin-top と相殺され
   見た目は変わらないが、li + li の方が「項目間だけに効く」という意図がコードから直接読み取れる）。
   バックログ「買取情報アップロード画面の説明文を短縮しCSV入力イメージ画像を挿入する」
   （2026-09-17）: 誠報社の「行間・余白を広げる」依頼を受け、0.5rem→0.75remへ1段階拡大。 */
.bb-cm-import-card ul li + li {
    margin-top: var(--bb-space-3);
}

/* CSV入力イメージ画像（バックログ「買取情報アップロード画面の説明文を短縮しCSV入力イメージ画像を
   挿入する」・2026-09-17新設）。.bb-cm-group-start と併用し、他ブロックと同じ上余白を自動で
   受け取る（display:blockはbb-cm-group-startのmargin-topを<img>〔既定inline〕へ確実に効かせる
   ために必要・両クラスのプロパティは重複しないため衝突なし）。max-width/height:autoでスマホ幅
   でも画面に収まる。 */
.bb-cm-import-card .bb-cm-csv-example {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 実機ブラウザテスト（2026-08-27）で発覚した副作用の是正: input本体の幅を広げずにボタン部分
   だけを大きくすると、ブラウザ既定の固定幅の中でボタンが占める割合が増え、残りの「選択され
   ていません」・選択後のファイル名を表示する領域が狭くなり、ブラウザ自身の省略表示（例:
   「選択さ...いません」）が働いてしまうことを実機で確認した。テーマの.form-group input[type="text"]
   等（global.css 398-412行目）と同じ考え方でinput自体をwidth:100%にし、親.form-groupの横幅
   いっぱいまで使えるようにして解消する（file型はテーマ側のこのセレクタリストに含まれていない
   ため、この1行をプラグイン側で個別に補う）。同じ幅指定は monitoring.css の対象2
   （#bb_cm_consent_file_new）にもあるが、対象3（登録済み対象者一覧表内）には意図的に
   入れていない（表内は隣接する差し替え/添付ボタンとの横並びフレックス行のため、幅いっぱいに
   広げると隣接ボタンが2段目へ折り返る。実機でも対象3は省略が発生していないため対応不要）。
   直後のボタン装飾（::file-selector-button）の説明コメントとあわせて読むこと。 */
.bb-cm-import-card #bb_cm_csv {
    width: 100%;
}

/* 誠報社の追加要望（2026-08-26・Discord）:「ファイルを選択」ボタンを大きくしてほしい。
   ::file-selector-button疑似要素は input[type="file"] のうち、ブラウザ標準のボタン部分
   （直後のテキスト「選択されていません」は対象外・ブラウザ標準のまま）だけを装飾できる。
   サイト共通ボタン .bb-ui-button.secondary（blackbank_theme/css/global.css 295-337行目）
   と同じ値をこのファイル内で完結させるため直接指定する（テーマ側ファイルは無改修）。
   このファイル冒頭の方針（実値リテラルを使わずトークンのみ参照・フォールバック併記なし）
   に合わせ、ここも var() にフォールバックを付けていない（#fff は上記の例外に該当・リテラル）。
   ほぼ同一の宣言を monitoring.css 側にも2組置いている（対象者登録画面用・フォールバック併記の
   有無は各ファイルの方針が異なるためそのまま）。サイズは対象1(ここ)・対象2(monitoring.css の
   新規登録フォーム内)が共通、対象3(monitoring.css の登録済み対象者一覧表内)のみ表の窮屈な
   スペースに合わせて意図的に一段階小さい（3箇所を機械的に同値へ揃えないこと）。色・角丸・
   影の値はこの3箇所とも揃える。
   ::file-selector-button はUAスタイルシートの独立要素として扱われ、フォント・行送りを input から
   継承しない（MDN既定）。かつこのテーマは input 等のフォームコントロールに書体を与える宣言を
   持たない（font-family/line-height の指定は global.css の body のみ）ため、font: inherit を
   使ってもフォームコントロール標準のUA書体を引き継ぐだけでテーマの書体には揃わない。そのため
   font-family・line-height をここで明示的に指定する（テーマ共通ボタンと同じくbody由来の値）。
   display:flex 系の指定は付けない（付けるとボタンの合成ベースラインがボックス下端になり、
   隣接する「選択されていません」テキストが沈んで見える崩れが起きるため）。中身はUA生成の
   テキスト1つだけで、そもそも上下中央寄せは padding だけで足りる。
   hover に .bb-ui-button 側の transform: translateY(-2px)（浮き上がり）は入れていない
   （ファイル選択欄の中で浮かせると不自然なため意図的に省略）。 */

.bb-cm-import-card #bb_cm_csv::file-selector-button {
    padding: var(--bb-space-3) var(--bb-space-8);
    margin-right: var(--bb-space-3);
    border: 2px solid var(--bb-sub-color);
    border-radius: var(--bb-radius-lg);
    background: #fff;
    color: var(--bb-sub-color);
    font-family: var(--bb-font-family);
    line-height: 1.6;
    font-weight: 700;
    font-size: var(--bb-font-size-sm);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--bb-shadow-sm);
}

.bb-cm-import-card #bb_cm_csv::file-selector-button:hover {
    background: var(--bb-accent-color);
    color: var(--bb-sub-color);
    box-shadow: var(--bb-shadow-md);
}

/* 読み取れなかった行の行番号と理由（アップロード結果カード内・バックログ「買取情報アップロードで
   読み取れなかった行の行番号と理由を結果画面に表示する」）。
   テーマの注意枠の余白は1クラスの .bb-ui-alert（global.css）だけが持ち、.bb-ui-alert.warning は
   余白を持たないため、すべて2クラス以上のセレクタで書いて読み込み順に関係なくこのファイルを勝たせる。
   横並びのグリッドは使わず縦に積む（長い理由の文言で列幅が崩れるのを避ける・スマートフォン用の
   追加指定も不要）。一覧は注意枠の外に通常の文字色で出す（注意枠は文字色を一括指定するため、
   中に一覧を入れると全文が注意色になる）。余白の初期値はテーマの全要素リセット（global.css の * で
   margin/padding を 0）に任せ、ここでは段落・項目の間だけを空ける。 */
.bb-cm-import-result .bb-cm-import-unreadable {
    margin-top: var(--bb-space-6);
    margin-bottom: var(--bb-space-4);
}

.bb-cm-import-result .bb-cm-import-unreadable p + p {
    margin-top: var(--bb-space-2);
}

.bb-cm-import-result .bb-cm-import-reasons {
    list-style: none;
}

.bb-cm-import-result .bb-cm-import-reasons li + li {
    margin-top: var(--bb-space-3);
}

.bb-cm-import-result .bb-cm-import-reason {
    display: block;
    font-weight: 700;
}

.bb-cm-import-result .bb-cm-import-lines {
    display: block;
    overflow-wrap: anywhere;
}

.bb-cm-import-result .bb-cm-import-hint,
.bb-cm-import-result .bb-cm-import-notes {
    display: block;
    font-size: var(--bb-font-size-sm);
    color: var(--bb-gray-700);
}

.bb-cm-import-result .bb-cm-import-notes {
    margin-top: var(--bb-space-4);
}