/* Container for the scrollable table */
.top-table-container {
    width: 100%;
    overflow-x: auto;
    min-width: 100%;
    scrollbar-color: #C5D7EA #E7EBF0;
    border-radius: 6px; /* 为容器添加圆角，使表格整体看起来有圆角效果 */
    position: relative;
    margin-bottom: 20px;
    /* 添加一层与竞品风格类似的柔和外边框 */
    border: 1px solid rgb(233, 240, 248);
}

.top-table {
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    min-width: 100%;
    border-style: hidden; /* 隐藏表格自身边框，由容器处理 */
}

/* 使用 table-layout: fixed; 让所有列宽度均匀分布 */
.top-table.table-layout-fixed {
    table-layout: fixed;
    width: 100%;
}

.top-table .section-header {
    text-align: center !important;
    background-color: #e6f2ff !important;  /* 浅蓝色背景 */
    font-weight: bold !important;
    color: #0068b6 !important;  /* 深蓝色文字 */
    padding: 10px !important;
}

.top-table th,
.top-table td {
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    text-align: left;
    text-wrap: auto;
    border-bottom: 1px solid rgb(233, 240, 248); /* #E9F0F8, 统一的行分隔线 */
    border-right: 1px solid rgb(221, 221, 221);   /* This creates the vertical lines */
    width:auto;

    vertical-align: middle; /* 垂直对齐 */
}

.top-table th,td,th>p,td>p,th>ul>li,td>ul>li {
    font-size: var(--font-size-table) !important;
}

/* remove border from the last column to avoid double border*/
.top-table th:last-child,
.top-table td:last-child {
    border-right: none;
}

/* 最后一行的单元格移除底部边框，避免与容器边框重叠 */
.top-table tr:last-child th,
.top-table tr:last-child td {
    border-bottom: none;
}

/* 禁止第一行内容换行 */
.top-table th.no-wrap,
.top-table th.no-wrap span {
    white-space: nowrap;
}

/* --- STICKY & STYLING LOGIC (REFINED) --- */

/* 所有表格的第一列（无论是 th 还是 td）都必须固定且置顶 */
.top-table th:first-child,
.top-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 50; /* 基础层级：高于普通单元格(0)，保证普通文字滑过时被遮挡 */
    border-right: 1px solid rgb(221, 221, 221); /* 必须设置背景色，防止内容透出 */
}

/* 右侧阴影线 */
.top-table th:first-child::after,
.top-table td:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    height: 100%;
    width: 1px;
    background-color: rgb(221, 221, 221);
    z-index: 6;
}

/* --- THEAD 处理 (针对 SoC Selection 表格) --- */

/* 第一行表头 (Header Row)：固定在顶部 */
.top-table thead tr:first-child th {
    position: sticky;
    top: 0;
    background-color: rgb(215, 232, 250);
    color: #0068b6;
    font-weight: bold;
    z-index: 20; /* 极高层级，保证纵向滚动时盖住 tbody */
    border-bottom: 1px solid rgb(221, 221, 221);
}

/* 左上角第一个单元格 (交叉点) */
.top-table thead tr:first-child th:first-child {
    z-index: 50; /* 最高层级，任何滚动都不能盖住它 */
}

/* Filter Row (第二行) 的第一个单元格 */
/* 确保它有不透明背景，防止第一行数据划过时透出来 */
.top-table thead tr.filter-row th:first-child {
    background-color: rgb(247, 250, 253); /* 使用浅灰色/浅蓝色填充 */
    z-index: 5;
}
/* 确保 filter-row 其他单元格也有背景 */
.top-table thead tr.filter-row th {
    background-color: rgb(247, 250, 253);
}

/* --- ZEBRA-STRIPING & BACKGROUNDS --- */

/* 偶数行 (Even Rows) */
.top-table tbody tr:nth-child(even) {
    background-color: rgb(247, 250, 253);
}
/* 偶数行首列 - 强制设置背景色，防止透明 */
.top-table tbody tr:nth-child(even) td:first-child,
.top-table tbody tr:nth-child(even) th:first-child {
    background-color: rgb(247, 250, 253);
    z-index: 5;
}

/* 奇数行 (Odd Rows) */
.top-table tbody tr:nth-child(odd) {
    background-color: white;
}
/* 奇数行首列 - 强制设置白色背景，防止透明 */
.top-table tbody tr:nth-child(odd) td:first-child,
.top-table tbody tr:nth-child(odd) th:first-child {
    background-color: white;
    z-index: 5;
}

/* 无 thead 表格 (Part Number) 的首行处理 */
/* 这类表格第一行在 tbody 中，且是 th，必须给予最高优先级，覆盖上面的奇数行白色背景 */
.top-table tbody tr:first-child th {
    background-color: rgb(215, 232, 250) !important; /* 强制蓝色背景 */
    color: #0068b6 !important;
    font-weight: bold;
}

/* Part Number 表的首行首列 (Sticky Corner) */
.top-table tbody tr:first-child th:first-child {
    background-color: rgb(215, 232, 250) !important; /* 确保不透明 */
    z-index: 10; /* 高于其他数据行首列，防止被覆盖 */
}

.highlighted-column {
    background-color: #f0f0f0 !important; /* 可以根据需要调整颜色 */
}

/************ 表格列筛选功能 ************/
.filter-options {
    position: static; /* 改为静态定位 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: normal;
}

.filter-options label {
    display: flex;
    align-items: center;
    margin-top: 2px;
    font-size: var(--font-size-table);
    white-space: nowrap;
}

.filter-options input[type="checkbox"] {
    margin: 0;
    margin-right: 5px;
}

/* 隐藏不符合筛选条件的行 */
.top-table tbody tr.hidden {
    display: none;
}

/* 隐藏不符合筛选条件的列 */
.top-table th.hidden-col,
.top-table td.hidden-col {
    display: none !important;
}

/* 为带有 fixed-width 类的列设置固定宽度 */
.top-table th.fixed-width,
.top-table td.fixed-width {
    width: 12em; /* 根据需要调整宽度 */
    min-width: 12em;
    max-width: 12em;
}

/* 为需要 sticky 的第二列添加样式 */
.top-table td.-col2,
.top-table th.sticky-col2 {
    position: sticky;
    left: 11.67em; /* 调整这个值以匹配第一列的宽度 */
    z-index: 10; /* 略低于第一列，确保第一列始终在最上层 */
    background-color: inherit;
}
/************ 表格列筛选功能 ************/

/************ header span 用于hover显示注释 ************/
.top-table th span[data-tooltip],
.top-table td span[data-tooltip] {
    position: relative;
    cursor: help;
}

.top-table th span[data-tooltip]::after,
.top-table td span[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;

    /* 外观设置 */
    padding: 1em 1em;
    background-color: var(--color-tooltip-bg);
    color: var(--color-tooltip-text);
    font-size: calc(var(--font-size-table)*0.8);
    white-space: pre-wrap; /* 允许文字换行 */
    border-radius: 4px;
    max-width: 22em;
    min-width: 18em;
    z-index: 9999; /* 确保在最上层 */
    pointer-events: none; /* 防止鼠标遮挡 */
    text-align: center; /* 文本左对齐 */

    /* 初始状态：隐藏 */
    opacity: 0;
    visibility: hidden;
    margin-bottom: 8px; /* 距离 Chip 的间距 */
    transition: opacity 0.2s, visibility 0.2s, margin-bottom 0.2s;
}

.top-table th span[data-tooltip]::after {
    /* 定位：显示在下方 */
    top: 2.5em;
    left: 50%;
    transform: translateX(-50%);
}

.top-table td span[data-tooltip]::after {
    /* 定位：显示在右上方 */
    bottom: -100%;
    left: 23em;
    transform: translateX(-50%);
}

.top-table th span[data-tooltip]:hover::after,
.top-table td span[data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
}

.top-table th span:hover,
.top-table td span:hover {
    color: #FF6D65;
}

.top-table td {
    position: relative; /* 确保tooltip可以相对于td定位 */
    overflow: visible; /* 允许tooltip溢出td */
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--font-size-table);
    height: var(--font-size-table);
    border-radius: 50%;
    background-color: #0068B6;
    color: #ffffff;
    font-size: 0.8em;
    font-weight: bold;
    cursor: help;
    vertical-align: middle;
    margin-left: 0.2em;
  }
/************ header span 用于hover显示注释 ************/

/* 移动端强制fix的首列和其它可滚动列各占50%view window */
@media (max-width: 1200px) {
    .top-table td:first-child,
    .top-table th:first-child {
        /* TEXT WRAPPING */
        white-space: normal !important;

        /* Prevent Chinese text from breaking mid-word. */
        word-break: keep-all;

        /* Prevent first column from being too thin */
        min-width: 30vw;
        max-width: 50vw;

        /* Visual alignment */
        vertical-align: middle;
        word-break: keep-all;
    }

    /* Keep other columns neat */
    .top-table td:not(:first-child),
    .top-table th:not(:first-child) {
        max-width: 70vw;
        white-space: normal !important;
        vertical-align: middle;
        word-break: keep-all;
    }

    /* Cancel line break by html */
    .top-table td:not(:first-child) br,
    .top-table th:not(:first-child) br {
        display: none;
    }
}