/* ========== 顶部工具栏 ========== */
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}

.toolbar-title {
font-size: 18px;
font-weight: 600;
color: #303133;
}

.toolbar-title small {
font-weight: 400;
color: #909399;
margin-left: 8px;
}

.view-switch {
display: flex;
gap: 6px;
background: #fff;
padding: 4px;
border-radius: 6px;
border: 1px solid #ebeef5;
}

.view-switch span {
padding: 4px 14px;
color: #606266;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
user-select: none;
}

.view-switch span:hover { background: #f5f7fa; }

.view-switch span.active {
background: #409eff;
color: #fff;
}

/* ========== 列表容器：一行多列 ========== */
.bom-order-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 16px;
}

/* ========== 单个订单卡片 ========== */
.bom-order-card {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.25s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}

.bom-order-card:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}

/* ========== 卡片头部 ========== */
.bom-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: linear-gradient(135deg, #f7f9fc 0%, #eef2f8 100%);
border-bottom: 1px solid #ebeef5;
}

.bom-card-title {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}

.bom-order-no {
font-weight: 600;
color: #303133;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.bom-order-type {
color: #409eff;
background: #ecf5ff;
padding: 1px 6px;
border-radius: 3px;
white-space: nowrap;
}

/* ========== 卡片主体：一行多列 ========== */
.bom-card-body {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 16px;
padding: 14px 16px;
flex: 1;
}

.bom-field {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.bom-field-label {
color: #909399;
}

.bom-field-value {
color: #303133;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.bom-field-value.price {
color: #f56c6c;
font-weight: 600;
}

.bom-field-value.remark {
white-space: normal;
line-height: 1.5;
color: #606266;
}

/* 占满整行 */
.bom-field-full { grid-column: 1 / -1; }

/* ========== 状态徽章 ========== */
.badge {
display: inline-block;
padding: 2px 8px;
line-height: 18px;
border-radius: 10px;
white-space: nowrap;
}

.badge-normal { background: #f4f4f5; color: #909399; border: 1px solid #e9e9eb; }
.badge-blue   { background: #ecf5ff; color: #409eff; border: 1px solid #d9ecff; }
.badge-green  { background: #f0f9eb; color: #67c23a; border: 1px solid #e1f3d8; }
.badge-orange { background: #fdf6ec; color: #e6a23c; border: 1px solid #faecd8; }
.badge-red    { background: #fef0f0; color: #f56c6c; border: 1px solid #fde2e2; }
.badge-cyan   { background: #e6fffb; color: #13c2c2; border: 1px solid #b5f5ec; }
.badge-purple { background: #f9f0ff; color: #9254de; border: 1px solid #efdbff; }

/* ========== 卡片底部操作 ========== */
.bom-card-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 10px 16px;
border-top: 1px solid #ebeef5;
background: #fafbfc;
}

.bom-btn {
display: inline-block;
padding: 4px 12px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
border: 1px solid transparent;
user-select: none;
}

.bom-btn-view { color: #409eff; border-color: #b3d8ff; background: #ecf5ff; }
.bom-btn-view:hover { background: #409eff; color: #fff; }

.bom-btn-edit { color: #e6a23c; border-color: #f5dab1; background: #fdf6ec; }
.bom-btn-edit:hover { background: #e6a23c; color: #fff; }

.bom-btn-del { color: #f56c6c; border-color: #fbc4c4; background: #fef0f0; }
.bom-btn-del:hover { background: #f56c6c; color: #fff; }

/* ========== 空状态 ========== */
.empty {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: #909399;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
body { padding: 12px; }
.bom-order-list { grid-template-columns: 1fr; gap: 12px; }
.bom-card-body { grid-template-columns: repeat(2, 1fr); }
.toolbar-title { font-size: 16px; }
}

@media (max-width: 420px) {
.bom-card-body { grid-template-columns: 1fr; }
}