/* ======================================================================
 *  条码批量生成（barcode-batch-gen.css）
 *  设计：calc 双栏母版（左设置 / 右结果），cyan 主色
 *  批量网格 / 卡片视觉语言与 qrcode-design 批量区统一；深色模式适配
 * ====================================================================== */

/* ===== 即时预览框 ===== */
.bb-preview {
    margin-top: 4px;
    border: 1px solid var(--c-border, #eef1f6);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    overflow: hidden;
}
.bb-preview canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== 右侧提示条 ===== */
.bb-msg {
    display: none;
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
}
.bb-msg.is-ok {
    display: block;
    color: #047857;
    background: rgba(5, 150, 105, 0.10);
    border: 1px solid rgba(5, 150, 105, 0.30);
}
.bb-msg.is-err {
    display: block;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.30);
}

/* ===== 结果操作行 ===== */
.bb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.bb-actions[hidden] { display: none !important; }

/* ===== 批量结果网格 ===== */
.bb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}
.bb-grid:empty { display: none; }

.bb-item {
    background: var(--c-bg-card, #fff);
    border: 1px solid var(--c-border, #eef1f6);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.bb-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(16, 24, 40, 0.12));
}
.bb-item.is-bad {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.04);
}
.bb-item.is-bad:hover { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.14); }

.bb-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.bb-item-idx {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: #0e7490;
    background: rgba(8, 145, 178, 0.12);
    padding: 2px 8px;
    border-radius: 999px;
}
.bb-item.is-bad .bb-item-idx {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}
.bb-item-val {
    font-size: 12px;
    color: var(--c-text-sub, #4b5563);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Consolas", "JetBrains Mono", "Courier New", monospace;
}

.bb-item-canvas {
    border: 1px solid var(--c-border, #eef1f6);
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bb-item-canvas canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.bb-item-actions {
    display: flex;
    justify-content: flex-end;
}
.bb-mini {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 9px;
    border: 1px solid var(--c-border, #e5e7eb);
    background: var(--c-bg-soft, #f8fafc);
    color: #0e7490;
    cursor: pointer;
    transition: all 0.2s;
}
.bb-mini:hover {
    background: rgba(8, 145, 178, 0.10);
    border-color: #0891b2;
}

.bb-item-err {
    font-size: 12px;
    line-height: 1.6;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    word-break: break-all;
}

/* ===== 空状态 ===== */
.bb-empty-hint {
    font-size: 13px;
    color: var(--c-text-muted, #9ca3af);
    text-align: center;
    padding: 48px 16px;
}

/* ===== 深色模式 ===== */
[data-theme="dark"] .bb-preview,
[data-theme="dark"] .bb-item-canvas {
    background: #fff;   /* 条码必须白底，深色模式也保持 */
}
[data-theme="dark"] .bb-item { background: var(--c-surface-soft, rgba(255, 255, 255, 0.03)); }
[data-theme="dark"] .bb-item.is-bad { background: rgba(239, 68, 68, 0.10); }
[data-theme="dark"] .bb-mini { background: transparent; }

/* ===== 响应式 ===== */
@media (max-width: 520px) {
    .bb-grid { grid-template-columns: 1fr; }
}