/* ============================================
   型面数据页 data_view.php 专属样式
   数据卡片 / 图片上传 / 内联编辑 / 搜索
   ============================================ */

/* ===== 数据卡片 ===== */
.card-list { display: flex; flex-direction: column; gap: 10px; }
.d-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 95px 75px 105px 105px 120px 100px 100px 80px;
    align-items: start; gap: 6px;
    transition: box-shadow .15s, border-color .15s;
}
.d-card > * { min-width: 0; overflow: hidden; }
.d-card > *:first-child { overflow: visible; }
.d-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.07);
    border-color: #ccc;
}
.d-card .field-label {
    font-size: 10.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}
.d-card .field-val { font-size: 15px; font-weight: 600; color: var(--dark); }
.d-card .field-val.type-val { color: var(--accent); font-weight: 500; }
.d-card .field-val.compat-val {
    font-size: 12.5px; font-weight: 400; line-height: 1.5;
    color: var(--text); cursor: pointer;
    padding: 2px 4px; margin: -2px -4px; border-radius: 3px;
    transition: background .15s;
}
.d-card .field-val.compat-val:hover { background: #f0f4ff; }

/* editable columns */
.edit-col { min-width: 0; }

/* ===== 内联编辑器 ===== */
.edit-hint { font-size: 11px; color: var(--accent); cursor: help; opacity: .6; }
.edit-hint:hover { opacity: 1; }
.compat-editor { display: flex; flex-direction: column; gap: 8px; }
.edit-textarea {
    width: 100%;
    border: 1.5px solid var(--accent); border-radius: 3px;
    padding: 8px 10px;
    font-size: 13px; line-height: 1.55; font-family: inherit;
    color: var(--text); resize: vertical; min-height: 60px;
    outline: none; background: #fff;
}
.edit-textarea:focus { box-shadow: 0 0 0 2px rgba(185,28,42,.15); }
.edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
.edit-btn {
    padding: 5px 16px; border: 1px solid;
    font-size: 12.5px; cursor: pointer; font-family: inherit;
    border-radius: 3px; font-weight: 500; transition: all .15s;
}
.save-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.save-btn:hover { background: #9c1f2b; }
.cancel-btn { background: transparent; color: var(--muted); border-color: var(--border); }
.cancel-btn:hover { border-color: var(--muted); color: var(--text); }

/* ===== 图片上传区 ===== */
.img-area {
    width: 100%; max-width: 130px; height: 70px;
    border: 1.5px dashed var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden;
    transition: border-color .15s, background .15s;
    position: relative;
}
.img-col { min-width: 0; }
.img-area:hover { border-color: var(--accent); background: #fafafa; }
.img-area img { max-width: 100%; max-height: 80px; object-fit: contain; }
.img-area .upload-hint {
    font-size: 11.5px; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.img-area.has-img .upload-hint { display: none; }
.img-area .img-actions {
    position: absolute; top: 4px; right: 4px;
    display: none; gap: 4px;
}
.img-area:hover .img-actions { display: flex; }
.img-action-btn {
    width: 24px; height: 24px;
    background: rgba(0,0,0,.55); color: #fff; border: none;
    cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}
.img-action-btn.del-btn:hover { background: var(--accent); }

/* ===== 适配型号搜索栏 ===== */
.search-bar-wrap { margin-bottom: 16px; }
.search-bar {
    display: flex; align-items: center; gap: 8px;
    background: var(--card);
    border: 2px solid var(--border);
    padding: 8px 14px;
    max-width: 460px;
    transition: border-color .2s;
}
.search-bar:focus-within { border-color: var(--accent); }
.search-icon { flex-shrink: 0; }
.search-bar input {
    flex: 1; border: none; outline: none;
    font-size: 14.5px; color: var(--text); font-family: inherit;
    background: transparent; min-width: 0;
}
.search-bar input::placeholder { color: #b0bac9; }
.search-clear-btn {
    background: none; border: 1px solid var(--border);
    width: 26px; height: 26px; line-height: 24px;
    text-align: center; cursor: pointer;
    font-size: 16px; color: var(--muted); border-radius: 3px; flex-shrink: 0;
}
.search-clear-btn:hover { border-color: var(--accent); color: var(--accent); }
.search-result-info { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.search-result-info.no-result { color: #dc2626; }

/* ===== data_view 响应式 ===== */
@media (max-width: 1300px) {
    .d-card { grid-template-columns: 95px 75px 105px 105px 120px 1fr 1fr 1fr; gap: 6px; padding: 10px 14px; }
}
@media (max-width: 1100px) {
    .d-card { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; padding: 10px 14px; }
    .d-card .img-area { max-width: none; height: 70px; }
    .d-card > [class*="-col"]:nth-child(n+5) { grid-column: span 4; }
}
@media (max-width: 900px) {
    .d-card { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .d-card > [class*="-col"]:nth-child(n+5) { grid-column: span 3; }
}
@media (max-width: 650px) {
    .d-card { grid-template-columns: 1fr 1fr; gap: 6px; }
    .d-card > [class*="-col"]:nth-child(n+5) { grid-column: span 2; }
}
@media (max-width: 520px) {
    .d-card { grid-template-columns: 1fr; gap: 8px; }
    .d-card .compat-col { grid-column: span 1; }
    .topbar { padding: 0 14px; }
    .logo-text h1 { font-size: 15px; letter-spacing: 1px; }
}