/* 基本样式 */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 更现代的字体 */
    line-height: 1.5; /* 稍微减小行高 */
    margin: 0;
    padding: 0;
    background-color: #f5f7fa; /* 更柔和的背景色 */
    color: #444; /* 更深一些的文字颜色 */
}

/*页面容器*/
.wrapper {
    max-width: 1400px; /* 更大的最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 15px; /* 两侧留白 */
}

/*头部*/
header,
footer {
    background-color: #2c3e50; /* 更深邃的深蓝色 */
    color: #fff;
    padding: 15px 0; /* 减少头部内边距 */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 头部阴影 */
}

header h1 {
    margin: 0;
    font-size: 2em; /* 更小的标题 */
    font-weight: 400;
}

header h1 i {
    margin-right: 0.4em;
}

/*导航*/
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    display: inline-block;
    margin: 0 10px; /* 减少间距 */
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: 8px 12px; /* 减少内边距 */
    display: inline-block;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: #34495e; /* 更深一些的悬停颜色 */
}

nav a i {
    margin-right: 0.2em; /* 减少图标和文字的间距 */
}

main {
    padding: 20px 0;
}

h2 {
    font-size: 1.8em; /* 更小的二级标题 */
    border-bottom: 2px solid #ddd;
    padding-bottom: 8px; /* 减少底边距 */
    margin-bottom: 20px; /* 减少标题和内容的间距 */
    color: #34495e;
}

/*表格样式*/
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
    background-color: white;
    border-radius: 5px; /* 更小的圆角 */
    overflow: hidden;
}

table,
th,
td {
    border: none;
}

th,
td {
    padding: 6px 10px; /* 减少内边距 */
    text-align: left;
    font-size: 0.9em; /* 更小的字体 */
}

th {
    background-color: #ecf0f1; /* 更浅的表头背景色 */
    color: #34495e;
    font-weight: 600;
}

tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* 更浅的隔行变色 */
}

tr:hover {
    cursor: pointer;
    background-color: #e6f0ff; /* 浅蓝色悬停 */
}

/* 调整复选框的样式 */
th input[type="checkbox"],
td input[type="checkbox"] {
    margin: 0; /* 移除默认外边距 */
    transform: scale(0.9); /* 稍微缩小复选框 */
}

/* 表单样式 */
form {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px; /* 减少内边距 */
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #555; /* 更深一些的标签颜色 */
}

input[type="text"],
input[type="password"],
input[type="datetime-local"],
textarea {
    width: 100%;
    padding: 8px; /* 减少内边距 */
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.9em;
}

textarea {
    resize: vertical;
}

button {
    background-color: #3498db; /* 更柔和的蓝色 */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

/*批量操作的按钮*/
form > button {
    margin-top: 1em;
    /*和表格拉开距离*/
}

button:hover {
    background-color: #2980b9; /* 更深一些的悬停颜色 */
}

/*操作按钮*/
td a {
    display: inline-block;
    margin-right: 0.5em;
    padding: 0.3em 0.6em;
    /* 减少内边距 */
    border-radius: 3px;
    /* 更小的圆角 */
    text-decoration: none;
    color: white;
    font-size: 0.8em;
    /* 更小的字体 */
}

td a:nth-child(1) {
    /*添加服务记录*/
    background-color: #27ae60;
}

td a:nth-child(1):hover {
    background-color: #219653;
}

td a:nth-child(2) {
    /*编辑*/
    background-color: #3498db;
}

td a:nth-child(2):hover {
    background-color: #2980b9;
}

td a:nth-child(3) {
    /*删除*/
    background-color: #e74c3c;
}

td a:nth-child(3):hover {
    background-color: #c0392b;
}

td a:nth-child(4) {
    /*存档*/
    background-color: #f39c12;
    color: #343a40;
    /* 存档按钮文字颜色 */
}

td a:nth-child(4):hover {
    background-color: #d68910;
}

td a:nth-child(5) {
    /*恢复*/
    background-color: #27ae60;
}

td a:nth-child(5):hover {
    background-color: #219653;
}

/* 链接样式 */
a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 颜色等级 (更柔和的配色) */
.red {
    background-color: #f2dede;
    /* 淡红色 */
}

.yellow {
    background-color: #faf2cc;
    /* 淡黄色 */
}

.green {
    background-color: #d9edf7;
    /* 淡蓝色 */
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* 搜索框样式 */
.search-form {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
    max-width: 400px;
    /* 设置最大宽度 */
    margin-bottom: 10px;
    /* 与表格的间距 */
}

.search-form label {
    margin-right: 10px;
    /* 标签和输入框的间距 */
    white-space: nowrap;
    /* 防止标签换行 */
}

.search-form input[type="text"] {
    flex: 1;
    /* 让输入框占据剩余空间 */
    padding: 6px 8px;
    /* 减少内边距 */
    margin-bottom: 0;
    /* 移除底边距 */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85em;
    /* 更小的字体 */
}

.search-form button {
    padding: 6px 10px;
    /* 减少内边距 */
    font-size: 0.85em;
    /* 更小的字体 */
}

/* 工具栏样式 */
.toolbar {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    margin-top: 10px; /* 与表格的间距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    nav li {
        display: block;
        margin: 10px 0;
    }

    th,
    td {
        padding: 6px 8px;
        font-size: 0.85em;
    }

    /*表单元素*/
    input[type="text"],
    input[type="password"],
    input[type="datetime-local"],
    textarea,
    button {
        font-size: 0.9em;
        /*移动端字体*/
    }

    .search-form {
        flex-direction: column;
        /* 小屏幕上垂直排列 */
        align-items: stretch;
        /* 让元素拉伸 */
    }

    .search-form label {
        margin-bottom: 5px;
        /* 标签和输入框的间距 */
    }

    .search-form input[type="text"] {
        width: auto;
        /*自动适应父容器*/
    }
}

/* 可点击复制的文本样式 */
.copyable {
    cursor: pointer;
    user-select: all;
    /* 允许文本选择 */
}


    /* 切换存档状态的按钮 */
    .archive-button {
        display: inline-block;
        padding: 6px 12px;
        background-color: #95a5a6; /* 灰色 */
        color: white;
        border: none;
        border-radius: 4px;
        text-decoration: none;
        font-size: 0.85em;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .archive-button:hover {
        background-color: #7f8c8d; /* 更深一些的灰色 */
    }