/* ============================================================
 * 回数券機能 (admin)
 * 対象画面: ユーザ管理画面 (一覧改修 + チケット調整モーダル)
 * モック: docs/mockups/admin/01-user-list.html / 02-ticket-adjust-modal.html
 * ============================================================ */

/* ============== Flash メッセージ (PRG リダイレクト後の通知) ============== */
.ticket-flash {
    padding: 10px 14px;
    margin: 0 0 12px 0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}
.ticket-flash.success {
    background: #e6f4ea;
    color: #1e7e34;
    border-left: 4px solid #28a745;
}
.ticket-flash.error {
    background: #fdecea;
    color: #b02a37;
    border-left: 4px solid #dc4e41;
}

/* ============== ユーザ管理一覧: チケット行 ============== */
/* 既存 .worksList li は worksData(float left) + btnCnt(float right) の float レイアウト。
 * チケット行を「行下端の全幅」に出すため clear: both で float 解除＋ width:100% で全幅確保 */
.user-row-ticket {
    clear: both;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
/* ticket-actions 内のボタンは詳細ボタン (.worksList li .btnCnt .button = height:40px / line-height:38px / font-size:17px / font-weight:bold) と「幅以外」を統一。
 * 幅は文字列が収まるよう auto + padding。 */
.user-row-ticket .ticket-actions .button {
    width: auto;
    max-width: none;
    height: 40px;
    line-height: 38px;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 0 16px;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: top;
}
/* 一覧のチケット調整ボタンの青を、既存 .button ベース (#232e8a＝モックの履歴ボタン寄りの濃紺) からモックの調整ボタン色へ。
 * モック _mock.css の .button.blue { background:#3c4ccc; hover:#4d5fdb } と一致させる。
 * .button はadmin全体共通クラスのため、チケット行内だけにスコープを絞って上書き（履歴ボタン・モーダルの実行ボタンには影響させない）。 */
.user-row-ticket .ticket-actions .button.blue {
    background-color: #3c4ccc;
}
.user-row-ticket .ticket-actions .button.blue:hover {
    background-color: #4d5fdb;
}
/* 詳細ボタンは .btnCnt (width:200px) 内で width:46% (≒92px) + margin 1.5% ずつで text-align:center 中央配置 →
 * その右端は .btnCnt 右端から 51px (中央寄せ余白) + 3px (ボタンの右マージン) = 54px 内側。
 * チケット調整ボタンの右端をそれに合わせるため、ticket-actions に padding-right: 54px を入れる。 */
.user-row-ticket .ticket-actions {
    padding-right: 54px;
}
.user-row-ticket .balance-text {
    font-size: 14px;
    color: #2f3f4e;
    font-weight: 500;
}
.user-row-ticket .balance-text strong {
    font-size: 19px;
    color: #d97706;
    margin: 0 4px;
}
.user-row-ticket .ticket-icon {
    font-size: 16px;
    margin-right: 4px;
}
.user-row-ticket .ticket-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============== モーダル内部 (チケット調整) ============== */
.modal_content.ticket-modal {
    max-width: 520px;
    width: 95%;
}
.modal_content .modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #2f3f4e;
    border-bottom: 2px solid #2f3f4e;
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.modal_content .modal-section {
    margin-bottom: 8px;
}
/* 既存 admin .label (style.css:259) はラジオ風ボタン用に border 等が定義されているため、独自クラス field-label を使用 */
.modal_content .modal-section .field-label {
    font-size: 12px;
    color: #6b7c8a;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
    /* 既存 .label の border / width / height / line-height 等を打ち消し（念のため） */
    border: none;
    width: auto;
    height: auto;
    line-height: 1.4;
    text-align: left;
    cursor: default;
    margin: 0 0 6px 0;
}
.modal_content .modal-section .value {
    font-size: 15px;
    color: #2f3f4e;
}
.modal_content .modal-section .value strong {
    font-size: 20px;
    color: #d97706;
    margin: 0 4px;
}

/* 対象お客様 + 現在残枚数の横並び */
.modal-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    align-items: baseline;
    background: #f7f8fa;
    border-radius: 4px;
    padding: 6px 12px;
    margin-bottom: 8px;
}
.modal-meta-row .modal-section {
    margin-bottom: 0;
}

/* 操作ラジオ + 枚数を横並び (PC) */
.op-qty-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: end;
    margin-bottom: 8px;
}
.op-qty-row .modal-section {
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}
@media screen and (max-width: 480px) {
    .op-qty-row { flex-direction: column; align-items: stretch;}
}

/* ラジオ・入力フォーム */
.radio-group {
    display: flex;
    gap: 24px;
    margin-top: 4px;
}
.radio-group label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    /* 既存 admin .label / label の枠線・幅指定を打ち消し */
    border: none;
    width: auto;
    height: auto;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: transparent;
    color: inherit;
}
/* 既存スタイルを打ち消してラジオを正常表示：
 *   - style.css:257  input[type=radio] { display: none; }     → display 復活
 *   - style.css:67   input { appearance: none; }              → ネイティブのラジオ形状を復活
 */
.modal_content.ticket-modal .radio-group input[type="radio"] {
    display: inline-block !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    appearance: auto !important;
    margin-right: 6px;
    transform: scale(1.2);
    cursor: pointer;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
}
.input-text {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #d8dde3;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
/* detail はテキストエリア。等幅フォント化を避け本文と同じフォントに揃え、縦方向のみリサイズ可 */
textarea.input-text {
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 64px;
}
/* 残り文字数カウンター（理由欄の下・右寄せ・上限到達で赤） */
.char-counter {
    font-size: 12px;
    color: #6b7c8a;
    text-align: right;
    margin-top: 4px;
}
.char-counter.limit {
    color: #dc4e41;
    font-weight: bold;
}

/* 数量セレクター (-/+ ボタン付き) */
.qty-selector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.qty-selector button {
    width: 40px;
    height: 40px;
    border: 1px solid #2f3f4e;
    background: #fff;
    color: #2f3f4e;
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.qty-selector button:hover { background: #f0f2f5;}
.qty-selector input {
    width: 60px;
    height: 40px;
    text-align: center;
    font-size: 16px;
    border: 1px solid #d8dde3;
    border-radius: 4px;
    padding: 0 4px;
}
.qty-selector .unit {
    font-size: 14px;
    color: #6b7c8a;
}

/* 調整後の残枚数 (即時表示) */
.balance-change {
    background: linear-gradient(180deg, #fff8e1 0%, #fff3c4 100%);
    border: 1.5px solid #ffb300;
    border-radius: 6px;
    padding: 8px 14px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #6b5500;
}
.balance-change .num {
    font-size: 20px;
    font-weight: 700;
    color: #2f3f4e;
    margin: 0 2px;
}
.balance-change .arrow {
    color: #f57c00;
    font-size: 18px;
    font-weight: bold;
}
.balance-change .delta {
    font-size: 13px;
    color: #2e7d32;
    margin-left: 4px;
}
.balance-change.minus .delta { color: #dc4e41;}
.balance-change.warning {
    background: linear-gradient(180deg, #ffebee 0%, #ffcdd2 100%);
    border-color: #dc4e41;
}
.balance-change.warning .num.after { color: #dc4e41;}

/* 実行ボタン (赤/青/disabled) ※既存 .button.red / .button.blue がある前提
 * 回数券機能の範囲（一覧チケット行＋調整モーダル）に限定し、admin他ページの .button.disabled に影響させない */
.user-row-ticket .button.disabled,
.modal_content.ticket-modal .button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* モーダル内のボタン (実行する/キャンセル) はキャンセルと実行で同じ幅に統一 */
.modal_content.ticket-modal .button {
    font-size: 14px;
    height: 38px;
    line-height: 36px;
    min-height: auto;
    padding: 0 16px;
    width: auto;
    min-width: 140px;
    display: inline-block;
}
/* 残枚数不足時のみ実行ボタンを広げて「残枚数不足のため実行不可」を収める */
.modal_content.ticket-modal [data-exec-btn].disabled {
    min-width: 220px;
}

/* ============================================================
 * チケット履歴モーダル (#5)
 * ============================================================ */
.modal_content.ticket-history-modal {
    max-width: 820px;
    width: 95%;
    /* ②チラつき対策：既存 .modal_content { transition: 0.5s }（=all）が高さ変化までアニメーションするため、
     * 履歴モーダルでは transition を切る。開閉アニメは .modal_overlay 側が担うので見た目に影響なし。 */
    transition: none;
}

/* 検索条件バー */
.history-search {
    background: #f7f8fa;
    border: 1px solid #d8dde3;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: flex-end;
}
.history-search .field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.history-search .field .field-label {
    font-size: 11px;
    color: #6b7c8a;
    margin: 0;
}
.history-search .field input,
.history-search .field select {
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #d8dde3;
    border-radius: 4px;
    background: #fff;
    min-width: 130px;
}
.history-search .field .date-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.history-search .search-btn {
    padding: 6px 18px;
    background: #2f3f4e;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    min-height: 32px;
}
.history-search .search-btn:hover { background: #46596b;}

/* 履歴テーブル */
/* ②A: 高さを固定（max-heightでなくheight）。検索/ページ/ソートで件数が増減しても
 *     枠の高さが一定になり、モーダル全体が伸縮してチラつくのを防ぐ。中身は内部スクロール。 */
.history-table-wrap {
    height: 50vh;
    overflow-y: auto;
}
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.history-table th,
.history-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 5px 8px;
    text-align: left;
    vertical-align: middle;
}
.history-table th {
    background: #f0f2f5;
    color: #2f3f4e;
    font-weight: 500;
    font-size: 11px;
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.history-table th.sortable {
    cursor: pointer;
    user-select: none;
}
.history-table th.sortable:hover { background: #e2ebff;}
.history-table th.sortable .sort-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    color: #2f3f4e;
}
/* データ行のホバーハイライト（視認性向上）。読み込み中/0件/エラーのメッセージ行には付けない */
.history-table tbody tr:hover { background: #eaf0fe;}
.history-table tbody tr:hover .history-empty { background: transparent;}
.history-table td.amount {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}
.history-table td.amount.plus { color: #2e7d32;}
.history-table td.amount.minus { color: #dc4e41;}
.history-table td.action { white-space: nowrap;}
/* ①A: 操作タグを固定幅バッジ化。最長「キャンセル返却」(5文字)が収まる min-width＋中央揃えで
 *     全種別のタグ幅・右端を統一し、一覧の見栄えを整える。 */
.history-table .action-tag {
    display: inline-block;
    min-width: 96px;   /* 最長「キャンセル返却」(5文字)が収まる幅。全種別で統一 */
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
}
.action-tag.purchase { background: #1976d2;}
.action-tag.consume  { background: #6b7c8a;}
.action-tag.grant    { background: #2e7d32;}
.action-tag.revoke   { background: #c62828;}
.action-tag.refund   { background: #f57f17;}

/* 0件 / 読み込み中 / エラー */
.history-empty {
    text-align: center;
    color: #999;
    padding: 30px 0;
    font-size: 13px;
}
.history-empty.error { color: #c62828;}
/* ローディング行：スピナー＋テキストを大きめにして処理中を分かりやすく */
.history-empty.loading {
    font-size: 16px;
    color: #2f3f4e;
    padding: 40px 0;
}
/* ローディングスピナー（画像非依存・CSSのみ）。Ajax検索中の処理中フィードバック用 */
.history-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: -6px;
    border: 3px solid #d8dde3;
    border-top-color: #2f3f4e;
    border-radius: 50%;
    animation: history-spin 0.6s linear infinite;
}
@keyframes history-spin {
    to { transform: rotate(360deg); }
}

/* ページネーション */
.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    /* ②チラつき対策：ページ数や情報文が変わっても高さが動かないよう最低高さを確保 */
    min-height: 42px;
}
.pagination-info {
    font-size: 12px;
    color: #797979;
}
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.pagination a,
.pagination span {
    display: inline-block;
    min-width: 28px;
    padding: 5px 10px;
    border: 1px solid #d8dde3;
    border-radius: 3px;
    color: #2f3f4e;
    background: #fff;
    text-align: center;
    cursor: pointer;
}
.pagination a:hover { background: #f5f6f8;}
.pagination .current {
    background: #2f3f4e;
    color: #fff;
    border-color: #2f3f4e;
    font-weight: bold;
}
.pagination .disabled {
    color: #c0c4c8;
    cursor: not-allowed;
    background: #f7f8fa;
    pointer-events: none;
}

/* ============== スマホ調整 ============== */
@media screen and (max-width: 600px) {
    .user-row-ticket {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .user-row-ticket .ticket-actions {
        width: 100%;
        padding-right: 0;       /* PC用 54px をリセット */
        justify-content: center; /* スマホは中央配置 */
    }
    .user-row-ticket .ticket-actions .button {
        flex: none;              /* ボタン幅は文字列に任せて中央寄せ */
    }
    .modal_content.ticket-modal {
        max-width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }
    .modal-meta-row { flex-direction: column; gap: 4px;}

    /* 履歴モーダル：検索バー縦積み・テーブル横スクロール */
    .history-search { flex-direction: column; align-items: stretch; gap: 10px;}
    .history-search .field input,
    .history-search .field select { min-width: 0; width: 100%;}
    .history-search .search-btn { width: 100%;}
    .history-table-wrap { overflow-x: auto;}
    .history-table { min-width: 540px;}
}

/* ============== 残枚数 整合性チェック（一覧の検算表示＋修正ボタン） ============== */
/* 残枚数の直後に ✅(一致) / ⚠️不一致（履歴M枚）＋「残枚数を修正」ボタン(不一致時のみ) をインライン表示。
 * balance-text 内のインライン要素なので、スマホ縦(.user-row-ticket が縦積み)では balance-text 全幅内で
 * 自然に折り返す（残枚数 → ⚠️＋修正ボタン → 既存ボタン行 の順）。flex化せずテキスト整形を保つ。 */
.user-row-ticket .balance-text { line-height: 1.9; }
.user-row-ticket .balance-ok { color: #16a34a; font-size: 15px; margin-left: 4px; }
/* 不一致バッジ＋修正ボタンのまとまり。PCは残枚数の直後にインライン、スマホ縦は残枚数の直下に1段(下の@media) */
.user-row-ticket .balance-ng { display: inline; }
/* バッジは途中改行させない（"不一致（履歴 269 枚）"が "履歴269"/"枚)" に割れないように） */
.user-row-ticket .balance-mismatch { color: #dc2626; font-weight: 600; font-size: 13px; margin-left: 6px; white-space: nowrap; }
.user-row-ticket .balance-repair-form { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; }
/* 「残枚数を修正」＝不一致時のみ表示する小さめの赤ボタン（履歴/調整ボタンより小ぶり） */
.user-row-ticket .balance-text .button.red {
    width: auto; max-width: none; height: 30px; line-height: 28px;
    font-size: 13px; font-weight: bold; padding: 0 12px; margin: 0;
    display: inline-block; white-space: nowrap; box-sizing: border-box;
    background-color: #dc2626; color: #fff; border-radius: 4px; border: none; cursor: pointer;
}
.user-row-ticket .balance-text .button.red:hover { background-color: #b91c1c; color: #fff; }

/* スマホ縦：不一致時は「⚠️不一致（履歴M枚）＋[残枚数を修正]」を残枚数の“直下に1段”で表示
 * （残枚数行 → この行 → 既存[チケット履歴][チケット調整]行 の3段）。一致時の✅は残枚数行末尾のまま。 */
@media screen and (max-width: 600px) {
    .user-row-ticket .balance-ng { display: block; margin-top: 4px; }
    .user-row-ticket .balance-ng .balance-mismatch { margin-left: 0; }
}