/*
 * 買取りモニタリング 一覧画面 専用スタイル（C7）
 *
 * 読み込みは templates/page-monitoring-targets.php 内の wp_enqueue_style のみ（他ページに影響させない）。
 * テーマ global.css が供給するトークンを優先し、未定義時のフォールバック値を併記する
 * （外観設定プラグインがトークンを上書きしていればブランド色に自動追従する）。
 * 濃紺のヘッダー地色だけは資料の画面イメージ由来の固定値をローカル変数の既定値に置く。
 */

.bb-cm-monitor {
    /* ローカルトークン（この画面の中だけで使う） */
    --bb-cm-header-bg: #1e2d3d;
    --bb-cm-header-text: #ffffff;
    --bb-cm-line: var(--bb-gray-300, #dee2e6);
    --bb-cm-line-soft: var(--bb-gray-200, #e9ecef);
    --bb-cm-muted: var(--bb-gray-500, #6c757d);
    --bb-cm-teal: var(--bb-info, #17788a);
    --bb-cm-ok: #0f766e;
    --bb-cm-warn: #c47f17;
    --bb-cm-warn-bg: #fdf8e7;
    --bb-cm-alert: var(--bb-danger, #c0392b);
    --bb-cm-alert-bg: #fdeceb;
    --bb-cm-card-bg: var(--bb-bg-container, #ffffff);
    --bb-cm-radius: var(--bb-radius-md, 0.5rem);
}

/* ---- 見出し ---- */
.bb-cm-hero {
    margin: 0 0 20px;
}

.bb-cm-hero-title {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bb-cm-header-bg);
}

.bb-cm-hero-lead {
    margin: 0;
    font-size: 0.9rem;
    color: var(--bb-cm-muted);
}

/* ---- 2カラム（左＝表・右＝機能カード） ---- */
.bb-cm-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.bb-cm-col-main {
    flex: 2 1 420px;
    min-width: 0;
}

.bb-cm-col-side {
    flex: 1 1 240px;
    min-width: 0;
}

/* ---- 表カード ---- */
.bb-cm-table-card {
    background: var(--bb-cm-card-bg);
    border: 1px solid var(--bb-cm-line);
    border-radius: var(--bb-cm-radius);
    overflow: hidden;
}

.bb-cm-table-scroll {
    overflow-x: auto;
}

.bb-cm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.bb-cm-table th {
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
    background: var(--bb-cm-header-bg);
    color: var(--bb-cm-header-text);
    font-weight: 600;
}

.bb-cm-table td {
    padding: 14px;
    border-bottom: 1px solid var(--bb-cm-line-soft);
    vertical-align: middle;
}

.bb-cm-table tbody tr:last-child td {
    border-bottom: none;
}

.bb-cm-table .bb-cm-name {
    font-weight: 600;
}

.bb-cm-table .bb-cm-num {
    white-space: nowrap;
}

/* ---- 行のハイライトと状態の色 ----
   2026-08-24是正: 表示は2段階（0=通常/2=強調）に統合したため、中間段階（1）用の宣言
   （.bb-cm-row-warn・.bb-cm-status-1）はPHP側からもう出力されない（未使用）。将来の
   切り戻しに備えて宣言自体は削除せず温存する。 */
.bb-cm-row-warn {
    background: var(--bb-cm-warn-bg);
}

.bb-cm-row-alert {
    background: var(--bb-cm-alert-bg);
}

.bb-cm-status {
    white-space: nowrap;
}

.bb-cm-status-0 {
    color: var(--bb-cm-ok);
}

.bb-cm-status-1 {
    color: var(--bb-cm-warn);
    font-weight: 600;
}

.bb-cm-status-2 {
    color: var(--bb-cm-alert);
    font-weight: 700;
}

/* ---- 照会ボタン（C8 未実装のため押せない状態で置く） ---- */
.bb-cm-inquiry {
    display: inline-block;
    padding: 5px 12px;
    border: none;
    border-radius: var(--bb-radius-sm, 0.25rem);
    font-size: 0.8rem;
    color: #ffffff;
    background: var(--bb-cm-teal);
}

.bb-cm-inquiry-2 {
    background: var(--bb-cm-alert);
}

.bb-cm-inquiry[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.bb-cm-prep {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--bb-cm-muted);
}

/* ---- 停止中（買取情報のアップロード遅延） ---- */
.bb-cm-paused-cell {
    color: var(--bb-cm-muted);
    font-size: 0.82rem;
}

/* ---- 機能説明カード（右） ---- */
.bb-cm-feature {
    background: var(--bb-cm-card-bg);
    border: 1px solid var(--bb-cm-line);
    border-left: 5px solid var(--bb-cm-teal);
    border-radius: var(--bb-cm-radius);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.bb-cm-feature:last-child {
    margin-bottom: 0;
}

.bb-cm-feature h3 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bb-cm-header-bg);
    border: none;
    padding: 0;
}

.bb-cm-feature p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--bb-cm-muted);
}

/* ---- しきい値設定・補助行 ---- */
.bb-cm-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
}

.bb-cm-period-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--bb-cm-muted);
}

.bb-cm-threshold-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

/* バックログ「買取モニタリングページのしきい値欄デザインを誠報社の依頼どおりに直す」2026-08-27是正:
   ラベルを入力欄の真上に積む縦積みレイアウトへ変更した。各行（div）はflex-direction
   をcolumnにしてラベル・入力欄を縦に積む。flex-direction: columnにするとalign-itemsの向きが
   水平方向（ラベルと入力欄の左右位置）の意味に変わるため、ラベルと入力欄の左端を揃える
   flex-startを明示指定する（center のままだと幅の違うラベルと入力欄が左右中央寄せになり、
   ラベルの左端が入力欄の左端からずれる）。ラベル+入力欄側は縦積みで背が高くなるため、外側の
   align-itemsをflex-endにしてボタンの底辺をそちらの下端に揃える（2026-08-24是正で採用していた
   「横並び・中央揃え」の説明は本変更で置き換え）。 */
.bb-cm-threshold-fields > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bb-cm-threshold-fields label {
    display: inline-block;
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* 入力欄と単位（「回」）を横並びにするラッパー。 */
.bb-cm-threshold-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bb-cm-threshold-unit {
    font-size: 0.85rem;
    color: var(--bb-cm-muted);
}

/* テーマ共通の .form-group input と同等の見た目を自己完結の値で再現する
   （テーマCSS自体は無改修・:root変数の読み取りのみ使用）。このファイル冒頭の方針どおり、
   未定義時のフォールバック値を併記する（枠線・角丸はこのファイル既存のローカルトークン
   --bb-cm-line / --bb-cm-radius を使う＝それ自体がフォールバック併記済みのため二重定義しない）。 */
.bb-cm-threshold-fields input[type="number"] {
    max-width: 7em;
    padding: var(--bb-space-3, 0.75rem) var(--bb-space-4, 1rem);
    border: 1px solid var(--bb-cm-line);
    border-radius: var(--bb-cm-radius);
    background: var(--bb-bg-tertiary, #f8f9fa);
    font-size: var(--bb-font-size-base, 1rem);
    transition: all 0.2s ease;
}

.bb-cm-threshold-fields input[type="number"]:focus {
    outline: none;
    border-color: var(--bb-accent-color, #ffed4a);
    box-shadow: 0 0 0 3px var(--bb-brand-focus-ring, rgba(255, 237, 74, 0.2));
    background: #fff;
}

.bb-cm-empty {
    padding: 20px 14px;
    margin: 0;
    color: var(--bb-cm-muted);
}

/* ---- 照会だけの表示の結果カード（求職者の単発買取回数チェック） ---- */
.bb-cm-lookup-count {
    margin: 0 0 6px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--bb-cm-header-bg);
}

/* ---- 「有料」バッジ（2026-07-28バックログ新設）----
   【2026-08-24是正・現在このページでは未使用】このバッジを出していた「過去の買取回数を照会する」
   カードは、買取モニタリング画面のカード整理と月額表示削除バックログでマイページ側
   （includes/frontend-mypage-card.php）へ移設された。マイページはこのCSSファイルを読み込まない
   ため、同じ見た目の定義を assets/css/mypage-card.css 側に複製している（変更時は両方直すこと）。
   この宣言自体は復路として温存する（このページに同種のバッジを戻す可能性への備え）。
   フォールバック色はテーマ global.css の現在の実値（--bb-sub-color: #282800）に合わせている
   （マイページ側実装に残る古いリテラル値 #1a1a00 はコピーしない）。表示は見た目のみで、
   既存の課金ゲート（bb_cm_billing_ok 等）とは非連動。 */
.bb-cm-badge-paid {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    vertical-align: middle;
    background: var(--bb-sub-color, #282800);
    color: #fff;
}

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

/* 誠報社の追加要望（2026-08-26・Discord）:「ファイルを選択」ボタンを大きくしてほしい。
   ::file-selector-button疑似要素は input[type="file"] のうち、ブラウザ標準のボタン部分だけを
   装飾できる。サイト共通ボタン .bb-ui-button.secondary（blackbank_theme/css/global.css
   295-337行目）と同じ値をこのファイル内で完結させるため直接指定する（テーマ側ファイルは無改修）。
   対象は新規登録フォーム内（#bb_cm_consent_file_new）。登録済み対象者一覧表内
   （.bb-cm-subjects-table）は隣接する差し替え/添付ボタンとの横並びが窮屈なため、
   このすぐ下に、別セレクタとして一段階小さいサイズのルールを用意する（同一要素への
   カスケード上書きではない・対象が異なる別々のinput要素）。ほぼ同一の宣言を
   conduct-import.css 側にも1組置いている（買取情報アップロード画面用・フォールバック併記の
   有無は各ファイルの方針が異なるためそのまま）。色・角丸・影の値は3箇所とも揃える。
   サイズはこのブロック（対象2）と conduct-import.css の対象1が共通、直後の対象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-monitor #bb_cm_consent_file_new::file-selector-button,
.bb-cm-monitor #bb_cm_csv_bulk::file-selector-button {
    padding: var(--bb-space-3, 0.75rem) var(--bb-space-8, 2rem);
    margin-right: var(--bb-space-3, 0.75rem);
    border: 2px solid var(--bb-sub-color, #282800);
    border-radius: var(--bb-radius-lg, 0.75rem);
    background: #fff;
    color: var(--bb-sub-color, #282800);
    font-family: var(--bb-font-family, 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: 1.6;
    font-weight: 700;
    font-size: var(--bb-font-size-sm, 0.875rem);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--bb-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

.bb-cm-monitor #bb_cm_consent_file_new::file-selector-button:hover,
.bb-cm-monitor #bb_cm_csv_bulk::file-selector-button:hover {
    background: var(--bb-accent-color, #ffed4a);
    color: var(--bb-sub-color, #282800);
    box-shadow: var(--bb-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}

/* 登録済み対象者一覧表内（表の1セルに収まる小さいスペース。隣接する「差し替え/添付」ボタン
   との横並びが崩れないよう、padding・font-sizeを一段階小さくする。border-radiusは隣接する
   .bb-ui-button.secondaryと揃えるため据え置く。上のブロック（対象2）とは対象要素が異なる
   別セレクタ＝この一覧表内でだけ意図的に小さいサイズにしている）。 */
.bb-cm-monitor .bb-cm-subjects-table input[type="file"]::file-selector-button {
    padding: var(--bb-space-2, 0.5rem) var(--bb-space-4, 1rem);
    margin-right: var(--bb-space-2, 0.5rem);
    border: 2px solid var(--bb-sub-color, #282800);
    border-radius: var(--bb-radius-lg, 0.75rem);
    background: #fff;
    color: var(--bb-sub-color, #282800);
    font-family: var(--bb-font-family, 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: 1.6;
    font-weight: 700;
    font-size: var(--bb-font-size-xs, 0.75rem);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--bb-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

.bb-cm-monitor .bb-cm-subjects-table input[type="file"]::file-selector-button:hover {
    background: var(--bb-accent-color, #ffed4a);
    color: var(--bb-sub-color, #282800);
    box-shadow: var(--bb-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}

@media (max-width: 782px) {
    .bb-cm-table th,
    .bb-cm-table td {
        padding: 10px;
    }
}

/* ---- 住所の都道府県→市区町村選択（対象者登録の住所入力を選択式にする・本バックログ新設） ----
   2つの select は .bb-cm-address-select の中、.form-group の子孫として置く。テーマ共通の
   .form-group select（global.css 398-412行目・子孫セレクタのため孫要素にも及ぶ）の見た目
   （幅100%・枠線・角丸・フォーカス時の強調色）をそのまま継承する。ここでの追加指定は、2つの
   selectを縦に並べる間隔と、補足文の見た目に留める（コードレビュ美2026-09-01指摘で「直下」
   という誤った表現を訂正）。 */
.bb-cm-address-select {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2, 0.5rem);
}

.bb-cm-address-help {
    margin: 0;
    font-size: 0.8rem;
    color: var(--bb-cm-muted, var(--bb-gray-500, #6c757d));
}

/* ---- CSVでまとめて登録（対象者登録にCSV一括登録機能を追加し一覧の表示順を変更する・
   本バックログ新設）: 対象者の新規登録カード内、CSVアップロード欄の囲み。 ---- */
.bb-cm-csv-bulk {
    margin: 0 0 var(--bb-space-6, 1.5rem);
    padding: var(--bb-space-4, 1rem);
    border: 1px solid var(--bb-cm-line);
    border-radius: var(--bb-cm-radius);
    background: var(--bb-bg-tertiary, #f8f9fa);
}

.bb-cm-csv-bulk h3 {
    margin: 0 0 var(--bb-space-2, 0.5rem);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bb-cm-header-bg);
}

.bb-cm-csv-bulk-form .form-group {
    margin-bottom: var(--bb-space-3, 0.75rem);
}

/* ---- CSVでまとめて登録：確認画面（下読み結果の表示・確定/やり直しのみ・DB未書込） ---- */
.bb-cm-csv-confirm {
    padding: var(--bb-space-4, 1rem);
    border: 1px solid var(--bb-cm-line);
    border-radius: var(--bb-cm-radius);
    background: var(--bb-cm-card-bg);
}

.bb-cm-csv-confirm-title {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bb-cm-header-bg);
}

.bb-cm-csv-detail {
    margin: var(--bb-space-3, 0.75rem) 0;
    padding: var(--bb-space-3, 0.75rem);
    border-left: 3px solid var(--bb-cm-line);
    background: var(--bb-bg-tertiary, #f8f9fa);
}

.bb-cm-csv-detail-title {
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--bb-cm-header-bg);
}

.bb-cm-csv-detail ul {
    margin: 0;
    padding-left: 1.2em;
    font-size: 0.85rem;
    color: var(--bb-cm-muted);
}

.bb-cm-csv-notes {
    margin: var(--bb-space-3, 0.75rem) 0;
    padding-left: 1.2em;
    font-size: 0.85rem;
    color: var(--bb-cm-muted);
}

/* 「データ○行目」が物理行番号ではない旨の注記（runレビュー指摘・実装方針Step1の明示要求）。 */
.bb-cm-csv-notes-inline {
    margin: 0 0 var(--bb-space-2, 0.5rem);
    font-size: 0.8rem;
    color: var(--bb-cm-muted);
}