/* 通用样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: flex-start; /* 将内容从顶部对齐 */
}

.container {
    display: flex;
    width: 100%;
}

/* 侧边栏样式 */
/* 侧边栏样式 */
.sidebar {
    width: 150px;
    background-color: #f4f4f4; /* 与登录界面背景一致 */
    color: #333;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: flex-start;
    border-radius: 10px; /* 侧边栏整体圆角 */
    margin-top: 20px; /* 顶部留出空位 */
}

/* 按钮样式 */
.sidebar button {
    background-color: #3498db; /* 蓝色按钮 */
    color: white;
    border: none;
    padding: 15px 20px; /* 增加按钮的内边距 */
    margin: 10px 0; /* 默认间隔 */
    font-size: 16px; /* 增大字体 */
    text-align: center; /* 文本居中 */
    border-radius: 8px; /* 按钮圆角 */
    width: 100%; /* 按钮宽度占满 */
    cursor: pointer;
    transition: all 0s ease; /* 增加过渡效果 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 调整“合同管理”、“用户管理”、“客户管理”按钮间距 */
.sidebar button:nth-child(3),
.sidebar button:nth-child(4),
.sidebar button:nth-child(5) {
    margin-top: 20px; /* 增加间隔 */
}

/* 按钮悬停效果 */
.sidebar button:hover {
    background-color: #2980b9; /* 鼠标悬停时按钮变深蓝 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影加深 */
}

/* 按钮点击效果 */
.sidebar button:active {
    background-color: #1c6ea4; /* 点击时按钮颜色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 点击时阴影变浅 */
}

/* 标题和描述 */
.sidebar h2 {
    color: #333;
    font-size: 18px;
    margin-bottom: 20px; /* 标题间距 */
    text-align: center; /* 居中标题 */
}


.content {
    flex-grow: 1;
    padding: 0px;
    overflow-y: auto;
}

h2 {
    margin-bottom: 20px;
}

form {
    margin-bottom: 20px;
}

input {
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    padding: 5px 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #2980b9;
}

/* 基础表格样式 */
.table-container {
    margin: 20px;
    padding: 20px;
    background-color: #f4f4f4; /* 表格背景色与菜单统一 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    overflow-x: auto; /* 允许水平滚动 */
}

/* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 15px;
}

table thead {
    background-color: #3498db; /* 表头背景色 */
    color: #fff; /* 表头文字颜色 */
}

table th,
table td {
    padding: 2px 2px;
    text-align: left;
    border: 1px solid #ddd; /* 表格边框 */
}

table tbody tr {
    background-color: #fff; /* 默认行背景色 */
}

table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* 偶数行背景色 */
}

table tbody tr:hover {
    background-color: #eaf6ff; /* 悬停行高亮背景色 */
}

/* 按钮样式 */
.action-buttons {
    display: flex;
    gap: 10px; /* 按钮之间间距 */
}

.action-buttons button {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.action-buttons button:hover {
    background-color: #2980b9; /* 悬停效果 */
}

/* 分页样式 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.pagination button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pagination button:hover {
    background-color: #2980b9;
}

/* 登录页面专用样式 */
.login-container {
    text-align: center;
    padding: 20px;
    width: 300px;
    background-color: #f4f4f4;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

   h2 {
            text-align: center;
            font-size: 24px;
            color: #333;

            padding: 10px;
            border-radius: 8px;

            position: relative;
        }
        h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 2px;
            background: linear-gradient(to right, transparent, #007BFF, transparent);
        }

.form-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

label {
    font-size: 14px;
    width: 80px; /* 标签宽度 */
    text-align: left;
}

input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 150px;
}

button {
    padding: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    width: auto;  /* 按钮宽度根据内容自动调整 */
    cursor: pointer;
}

button:hover {
    background-color: #2980b9;
}


/* 表单行样式 */
.form-parts-update {
    display: flex;
    margin-bottom: 15px;
    align-items: center;  /* 保证label和input在同一水平线上 */
}

/* label 样式 */
.form-parts-update label {
    width: 70px;  /* 固定宽度 50px */
    margin-right: 10px;  /* label 和 input 之间的间距 */
    text-align: left;
    font-size: 14px;
}

/* input 样式 */
.form-parts-update input {
    width: auto;  /* 宽度自动 */
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    flex-grow: 1; /* 让 input 占满剩余空间 */
}

 /* 红色字体的警告样式 */
        .alert-danger {

            color: #ff0a21;

            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
            font-family: Arial, sans-serif;
        }