/* bc-result-card.css — barcodes/ と mcp copy/ で共有するカードUIスタイル
   - barcodes/: <link rel="stylesheet" href="ui/bc-result-card.css"> で読み込む
   - mcp copy/: build_zip.py が ZIP に同梱し、barcode.py が _VIEW_HTML に展開する
   :root CSS変数（--rl-*）はここに含めない（環境依存）
   Bootstrap Icons (<i class="bi bi-*">) は barcodes/ でのみ表示される
   mcp copy/ では CSP 制約でアイコンフォントが読み込めず非表示（テキストのみ表示）
*/

/* ========================================
   生成結果カードグリッド
======================================== */
.bc-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: .85rem;
    padding-bottom: .5rem;
}
.bc-result-card {
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    box-shadow: var(--rl-shadow);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    transition: box-shadow .15s;
    min-width: 0;
}
.bc-result-card:hover { box-shadow: var(--rl-shadow-hover); }
/* SVG をカード幅に追従させる（inline style 上書き） */
.bc-result-card svg,
.bc-result-card img { width: 100% !important; height: auto !important; display: block; }
.bc-card-num { font-size: .7rem; color: var(--rl-text-sub); align-self: flex-start; }
.bc-card-format {
    font-size: .68rem;
    background: var(--rl-primary-light);
    color: var(--rl-primary-dark);
    border-radius: 4px;
    padding: 1px 7px;
    font-weight: 600;
}
.bc-card-value { font-size: .7rem; color: var(--rl-text-sub); font-family: monospace; word-break: break-all; text-align: center; }
.bc-card-memo  { font-size: .72rem; color: var(--rl-text); text-align: center; }
/* ダウンロード要素: barcodes/ は <a download>（text-decoration:none）、mcp copy/ は <button>（text-decoration:underline でリンク風に） */
/* mcp copy/ では button.bc-card-download { text-decoration:underline } を上書きする */
.bc-card-download { font-size: .72rem; color: var(--rl-primary); text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.bc-card-download:hover { color: var(--rl-primary-dark); }
/* メモラベル「メモ：」部分 */
.bc-card-meta-label { color: var(--rl-text-sub); font-size: .68rem; }
/* 寸法表示行 H: W: M: */
.bc-card-params {
    font-size: .7rem;
    color: var(--rl-text-sub);
    font-family: monospace;
    text-align: center;
    letter-spacing: .02em;
}
/* フラグ行（枠線・数字）— H:W:M: と同じスタイル */
.bc-card-flags { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.bc-flag-on,
.bc-flag-off {
    font-size: .7rem;
    color: var(--rl-text-sub);
    font-family: monospace;
    white-space: nowrap;
    letter-spacing: .02em;
}
/* 失敗カード */
.bc-result-card.bc-card-error { border-color: #f5c6cb; background: #fff5f5; }
.bc-card-error-msg { font-size: .75rem; color: #dc3545; text-align: center; }

/* --- バーコード拡大モーダル（barcodes/ と mcp copy/ 共通）--- */
.bc-result-card:not(.bc-card-error) { cursor: pointer; }
#bcModal {
    display: none; position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.55); align-items: center; justify-content: center;
}
#bcModal.bc-modal-open { display: flex; }
.bc-modal-dialog {
    background: #fff; border-radius: 10px; max-width: 520px; width: 92%;
    box-shadow: 0 8px 32px rgba(0,0,0,.25); overflow: hidden;
}
.bc-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-bottom: 1px solid var(--rl-border);
    font-size: .8rem; font-weight: 700; color: var(--rl-text);
}
.bc-modal-close {
    background: none; border: none; cursor: pointer; font-size: 1.1rem;
    color: var(--rl-text-sub); line-height: 1; padding: 2px 6px;
}
.bc-modal-close:hover { color: var(--rl-text); }
.bc-modal-body { padding: 12px; text-align: center; }
#bcModalImage { max-width: 100%; height: auto; display: block; margin: 0 auto; }
#bcModalMeta { margin-top: 8px; font-size: .78rem; color: var(--rl-text-sub); }

/* ========================================
   モバイル対応（〜575px）- 生成結果カードのみ
======================================== */
@media (max-width: 575px) {

    /* ---- 生成結果カード: 1列・横幅いっぱいに表示 ---- */
    .bc-result-grid {
        grid-template-columns: 1fr;
    }
    .bc-result-card {
        width: 100%;
        min-width: 0;
        max-width: none;
        flex-direction: column;
        align-items: flex-start;
    }
    .bc-result-card .bc-card-num,
    .bc-result-card .bc-card-format,
    .bc-result-card .bc-card-value,
    .bc-result-card .bc-card-memo,
    .bc-result-card .bc-card-download { text-align: left; }
    /* SVGを情報の後（下）に移動 */
    .bc-result-card svg,
    .bc-result-card img { order: 1; }
    .bc-result-card .bc-card-num     { order: -4; }
    .bc-result-card .bc-card-format  { order: -3; }
    .bc-result-card .bc-card-value   { order: -2; }
    .bc-result-card .bc-card-memo    { order: -1; }
    .bc-result-card .bc-card-params  { order: 0; text-align: left; }
    .bc-result-card .bc-card-flags   { order: 0; justify-content: flex-start; gap: .5rem; }
    .bc-result-card .bc-card-download { order: 2; }
}