/* ========================================================
   Diesel Pump Product Technical Data Table Style (Optimized)
   ======================================================== */

/* 1. 移动端自适应：外层包裹器的横向滚动条 */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 25px 0;
}

/* 2. 表格整体：设定基础宽度和外边框 */
table {
    width: 100%;
    border-collapse: collapse; /* 合并边框 */
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #333333;
    border: 1px solid #c8d2e0; /* 明确的整体外边框 */
    min-width: 800px; /* 确保在手机上不会被挤压，而是优雅地提供滚动 */
}

/* 3. 首行/表头样式：工业深蓝高亮，文字居中 */
th {
    background-color: #1a4a7c; /* 工业深蓝色 */
    color: #ffffff !important;   /* 文字纯白 */
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;         /* 居中对齐 */
    vertical-align: middle;
    border: 1px solid #c8d2e0;  /* 网格线 */
    font-size: 14px;
}

/* 4. 单元格通用样式：居中且边框清晰 */
td {
    padding: 10px 8px;
    border: 1px solid #c8d2e0!important; /* 内部清晰的浅灰色网格线 */
    vertical-align: middle;
    text-align: center;        /* 数据居中对齐 */
}

/* 5. 突出型号列（第一列） */
tbody tr td:first-child {
    font-weight: bold;
    background-color: #fafafa;
}

/* 6. 数据行交替背景 */
tbody tr:nth-child(odd) {
    background-color: #ffffff; /* 纯白背景 */
}

tbody tr:nth-child(even) {
    background-color: #f4f7fa; /* 淡淡的灰蓝色背景 */
}

/* 7. 鼠标悬停变色 */
tbody tr:hover {
    background-color: #e9eff5;
    transition: background-color 0.1s ease;
}