/* ===== 卡片网格 ===== */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap:0 10px;margin-bottom:10px;
}

/* ===== 设备卡片 ===== */
.device-card {
background: #fff;
border-radius: 16px;
padding:16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid #edf0f5;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
margin-bottom:10px;
}

/* 卡片头部：ID + 状态 */
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f2f5;
}

.card-id {
font-weight: 600;
font-size: 16px;
color: #1d2129;
font-family: 'SF Mono', 'Consolas', monospace;
}

.card-id i {
color: #86909c;
font-size: 14px;
margin-right: 4px;
}

.status-tag {
padding: 2px 14px;
border-radius: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
}

.status-tag .dot-sm {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
}

.status-tag.online {
background: #e8f5e9;
color: #00b42a;
}
.status-tag.online .dot-sm {
background: #00b42a;
}

.status-tag.offline {
background: #f0f2f5;
color: #86909c;
}
.status-tag.offline .dot-sm {
background: #86909c;
}

.status-tag.alarm {
background: #fff3e8;
color: #f77234;
}
.status-tag.alarm .dot-sm {
background: #f77234;
}

/* 卡片主体：信息行 */
.card-body {
flex: 1;
margin-bottom:6px;
}

.info-row {
display: flex;
align-items: center;
padding: 5px 0;
color: #4e5a6a;
gap: 6px;
}

.info-row .label {
color: #86909c;
width: 72px;
flex-shrink: 0;
font-weight: 400;
}

.info-row .value {
color: #1d2129;
font-weight: 500;
font-family: 'SF Mono', 'Consolas', monospace;
word-break: break-all;
}

.info-row .value i {
color: #2d7cf6;
margin-right: 4px;
}

/* ===== 操作按钮区域 ===== */
.card-actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding-top: 12px;
border-top: 1px solid #f0f2f5;
}

.card-actions .btn {
justify-content: center;
padding: 2px 4px;
border-radius: 6px;
font-weight: 500;
border: 1px solid transparent;
background: #f7f8fa;
color: #4e5a6a;
transition: all 0.2s;
min-width: 0;
}

.card-actions .btn i {
}

.card-actions .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* 各按钮专属颜色 (hover) */
.card-actions .btn-view:hover {
background: #e8eeff;
color: #2d7cf6;
border-color: #b3c9ff;
}

.card-actions .btn-control:hover {
background: #e6f7ed;
color: #00b42a;
border-color: #8dd9a8;
}

.card-actions .btn-locate:hover {
background: #fff3e8;
color: #f77234;
border-color: #fccfaf;
}

.card-actions .btn-track:hover {
background: #f0e8ff;
color: #722ed1;
border-color: #c9b3f0;
}

.card-actions .btn-alarm:hover {
background: #ffeded;
color: #f53f3f;
border-color: #f5b3b3;
}

.card-actions .btn-associate:hover {
background: #e6f7ff;
color: #1890ff;
border-color: #91d0ff;
}

.card-actions .btn-edit:hover {
background: #fff7e6;
color: #fa8c16;
border-color: #fad49a;
}

.card-actions .btn-delete:hover {
background: #ffeded;
color: #f53f3f;
border-color: #f5b3b3;
}