/* =========================================
   Pandas Dataframe 表格美化 - 适配 Fluid 主题
   ========================================= */

/* 表格容器：设置滚动条 */
.dataframe {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #eee; /* 浅色模式下的外边框 */
    font-size: 0.9rem; /* 字体稍微调小一点 */
}

/* 单元格通用样式 */
.dataframe th, 
.dataframe td {
    padding: 8px 12px;
    line-height: 1.5;
    border: 1px solid #ddd; /* 单元格边框 */
    vertical-align: middle;
}

/* 表头和索引列样式 */
.dataframe th {
    font-weight: bold;
    background-color: #f5f7fa; /* 浅灰背景 */
    color: #333;
    white-space: nowrap; /* 表头不换行 */
}

/* 普通数据单元格 */
.dataframe td {
    color: #555;
    background-color: #fff;
}

/* 隔行变色 (Zebra Striping)  */
.dataframe tbody tr:nth-child(even) td,
.dataframe tbody tr:nth-child(even) th {
    background-color: #fbfbfb;
}

/* 鼠标悬停高亮效果 */
.dataframe tbody tr:hover td,
.dataframe tbody tr:hover th {
    background-color: #f0f8ff; /* 悬停时的淡蓝色 */
    transition: background-color 0.2s;
}

/* =========================================
   深色模式适配 (Dark Mode)
   Fluid 使用 data-user-color-scheme 属性控制
   ========================================= */

[data-user-color-scheme="dark"] .dataframe {
    border-color: #444;
}

[data-user-color-scheme="dark"] .dataframe th {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #444;
}

[data-user-color-scheme="dark"] .dataframe td {
    background-color: #252525;
    color: #ccc;
    border-color: #444;
}

/* 深色模式下的隔行变色 */
[data-user-color-scheme="dark"] .dataframe tbody tr:nth-child(even) td,
[data-user-color-scheme="dark"] .dataframe tbody tr:nth-child(even) th {
    background-color: #2a2a2a;
}

/* 深色模式下的悬停高亮 */
[data-user-color-scheme="dark"] .dataframe tbody tr:hover td,
[data-user-color-scheme="dark"] .dataframe tbody tr:hover th {
    background-color: #383838;
}