/* 默认和悬停时都不要下划线 */
.navbar a {
    text-decoration: none !important;
    color: #6c757d;  /* 深灰色 */
    padding: 12px 15px;  /* 增加垂直间距 */
    display: inline-block;
    transition: background 0.3s ease, color 0.3s ease;
    height: 40px;  /* 统一按钮高度 */
    line-height: 40px;  /* 保证垂直居中 */
    text-align: center;  /* 让文本居中对齐 */
    flex-grow: 1;  /* 让每个导航项平分宽度 */
}

/* 鼠标悬停时变色 */
.navbar a:hover {
    background-color: #e9ecef;  /* 浅灰色 */
    color: #4b6e81;  /* 低饱和度的蓝色 */
}

/* 当前激活导航项高亮 */
.navbar a.active {
    color: #5a6369 !important;  /* 更浅的灰色 */
    font-weight: bold;
    background-color: #f2f4f7;  /* 非常浅的灰色背景 */
    border: none;  /* 去掉边框 */
    padding: 12px 15px;
    height: 40px;  /* 高度保持一致 */
    line-height: 40px;  /* 保证垂直居中 */
}

/* 默认导航栏样式 */
.navbar {
    background-color: #f8f9fa;  /* 淡灰色 */
    padding: 0;  /* 取消上下内边距 */
    border: 1px solid #e1e4e8;  /* 较轻的灰色边框 */
    border-radius: 0px;  /* 取消圆角，设置为直角 */
    margin: 10px;
    display: flex;
    align-items: center;  /* 使按钮垂直居中 */
    font-family: Arial, sans-serif;
    font-weight: normal;  /* 更简洁的字体样式 */
    font-size: 18px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* 让导航项之间连在一起 */
.navbar a {
    display: inline-block;
    vertical-align: middle;
    /* border-right: 1px solid #e1e4e8;  给每个按钮加上右边框连接它们 */
}

.navbar a:last-child {
    border-right: none;  /* 最后的按钮去掉右边框 */
}



/* 只对 'clinical_input_table-card' 中的 Tabulator 表格生效 */
/* 只针对 'tabulator' 组件设置样式 */
#tabulator {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* 表头样式 */
#tabulator th {
    background-color: #f4f4f4;
    color: #555;
    padding: 12px;
    font-weight: bold;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

/* 单元格样式 */
#tabulator td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

/* 交替行背景颜色 */
#tabulator tr:nth-child(even) {
    background-color: #f9f9f9;
}

#tabulator tr:nth-child(odd) {
    background-color: #ffffff;
}

/* 悬停效果 */
#tabulator tr:hover {
    background-color: #f1f1f1;
}

/* 编辑框的样式 */
#tabulator .tabulator-editable input {
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 5px;
}

/* 移除表格周围的灰色阴影 */
#tabulator {
    box-shadow: none !important;  /* 确保没有阴影 */
    border: none !important;      /* 确保没有边框 */
    background-color: #ffffff;   /* 设置背景为白色 */
}

/* 确保 Tabulator 容器没有额外的边距或内边距 */
#svm-graph-container {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent;  /* 确保背景透明 */
}

/* Apply font size of 20px to all <p> elements on the document page */
#document-page p {
    font-size: 18px;
}