/* static/css/base.css */

/* ========== CSS 变量定义 ========== */
:root {
    --primary-color: #3498db;      /* 主色调 - 蓝色 */
    --secondary-color: #2c3e50;    /* 次要色调 - 深蓝色 */
    --accent-color: #e74c3c;       /* 强调色 - 红色，用于重要操作 */
    --light-color: #ecf0f1;        /* 浅色背景 */
    --dark-color: #34495e;         /* 深色背景 */
    --success-color: #2ecc71;      /* 成功色 - 绿色 */
    --warning-color: #f39c12;      /* 警告色 - 橙色 */
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    --transition: all 0.3s ease;   /* 过渡动画效果 */
}

/* ========== 全局重置和基础样式 ========== */
* {
    margin: 0;                     /* 清除所有元素的外边距 */
    padding: 0;                    /* 清除所有元素的内边距 */
    box-sizing: border-box;        /* 盒模型设置为边框盒，便于布局计算 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置全局字体 */
}

/* ========== 页面主体样式 ========== */
body {
    background-color: #f5f7fa;     /* 页面背景色 */
    color: #333;                   /* 默认文字颜色 */
    line-height: 1.6;              /* 行高，提高可读性 */
    min-height: 100vh;             /* 最小高度为视口高度 */
    display: flex;                 /* 使用弹性布局 */
    flex-direction: column;        /* 垂直方向排列 */
}

/* ========== 页面容器样式 ========== */
.page-container {
    max-width: 1600px;             /* 最大宽度限制 */
    margin: 0 auto;                /* 水平居中 */
    width: 100%;                   /* 宽度100%自适应 */
    padding: 0 30px;               /* 左右内边距 */
    flex: 1;                       /* 弹性填充剩余空间 */
}

/* ========== 顶部导航栏样式 ========== */
.header {
    background: linear-gradient(135deg, var(--secondary-color), var(--dark-color)); /* 渐变背景 */
    color: white;                  /* 文字颜色为白色 */
    padding: 8px 0;                /* 上下内边距 */
    box-shadow: var(--shadow);     /* 添加阴影效果 */
    margin-bottom: 20px;           /* 底部外边距 */
    position: sticky;              /* 粘性定位 */
    top: 0;                        /* 距离顶部0 */
    z-index: 1000;                 /* 高层级，确保在最上层 */
}

/* 头部内容布局 */
.header-content {
    display: flex;                 /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center;           /* 垂直居中 */
    height: 60px;                  /* 固定高度 */
}

/* Logo 区域样式 */
.logo {
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 12px;                     /* 子元素间距 */
}

.logo img {
    height: 40px;                  /* Logo 图片高度 */
}

/* 主导航菜单样式 */
.main-nav {
    display: flex;                 /* 弹性布局 */
    gap: 8px;                      /* 导航按钮间距 */
}

/* 导航按钮样式 */
.nav-btn {
    color: white;                  /* 文字颜色 */
    text-decoration: none;         /* 去除下划线 */
    padding: 10px 24px;            /* 内边距 */
    border-radius: 6px;            /* 圆角 */
    transition: var(--transition); /* 过渡效果 */
    font-weight: 500;              /* 字体粗细 */
    font-size: 0.95rem;            /* 字体大小 */
    border: 1px solid transparent; /* 透明边框 */
    background: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 8px;                      /* 图标和文字间距 */
    min-width: 80px;               /* 最小宽度 */
    justify-content: center;       /* 水平居中 */
}

/* 导航按钮悬停效果 */
.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2); /* 背景变亮 */
    border-color: rgba(255, 255, 255, 0.3); /* 边框颜色 */
    transform: translateY(-2px);   /* 向上移动效果 */
}

/* 激活状态导航按钮 */
.nav-btn.active {
    background: var(--primary-color); /* 主色调背景 */
    border-color: var(--primary-color); /* 主色调边框 */
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3); /* 阴影效果 */
}

/* ========== 用户信息区域样式 ========== */
.user-info {
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 15px;                     /* 元素间距 */
}

.user-info span {
    font-weight: 500;              /* 字体粗细 */
    font-size: 0.9rem;             /* 字体大小 */
    white-space: nowrap;           /* 不换行 */
}

/* 退出按钮样式 */
.logout-btn {
    background: linear-gradient(135deg, var(--accent-color), #c0392b); /* 红色渐变背景 */
    color: white;                  /* 文字颜色 */
    border: none;                  /* 无边框 */
    padding: 10px 24px;            /* 内边距 */
    border-radius: 6px;            /* 圆角 */
    cursor: pointer;               /* 手型光标 */
    transition: var(--transition); /* 过渡效果 */
    font-weight: 500;              /* 字体粗细 */
    font-size: 0.9rem;             /* 字体大小 */
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2); /* 阴影效果 */
    display: flex;                 /* 弹性布局 */
    align-items: center;           /* 垂直居中 */
    gap: 8px;                      /* 图标和文字间距 */
    min-width: 80px;               /* 最小宽度 */
    justify-content: center;       /* 水平居中 */
}

/* 退出按钮悬停效果 */
.logout-btn:hover {
    background: linear-gradient(135deg, #c0392b, #a93226); /* 深红色渐变 */
    transform: translateY(-2px);   /* 向上移动效果 */
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3); /* 增强阴影 */
}

/* ========== 主要内容布局样式 ========== */
.main-layout {
    display: flex;                 /* 弹性布局 */
    gap: 25px;                     /* 侧边栏和内容区域间距 */
    margin-bottom: 30px;           /* 底部外边距 */
    min-height: 600px;             /* 最小高度 */
}

/* 侧边栏容器 */
.sidebar-container {
    width: var(--sidebar-width, 280px);
    flex-shrink: 0;
    transition: width var(--sidebar-transition, 0.35s ease);
    position: relative;
}

/* 折叠状态 */
.sidebar-container.collapsed {
    width: var(--sidebar-collapsed-width, 60px);
}

.sidebar-container.collapsed .sidebar {
    width: var(--sidebar-collapsed-width, 60px);
}

/* 侧边栏折叠时内容区域自动扩展 */
.sidebar-container.collapsed ~ .content-area {
    flex: 1;
}

/* ========== 内容区域样式 ========== */
.content-area {
    flex: 1;                       /* 填充剩余空间 */
    background-color: white;       /* 白色背景 */
    border-radius: 8px;            /* 圆角 */
    box-shadow: var(--shadow);     /* 阴影效果 */
    padding: 30px;                 /* 内边距 */
    min-height: 500px;             /* 最小高度 */
}

/* 主要内容包装器 */
.main-content {
    width: 100%;                   /* 宽度100% */
    max-width: none;               /* 无最大宽度限制 */
}

/* ========== 表格样式优化 ========== */
.content-area table {
    width: 100% !important;        /* 表格宽度100% */
    max-width: 100% !important;    /* 最大宽度100% */
    margin: 20px 0;                /* 上下外边距 */
    border-collapse: collapse;     /* 边框合并 */
    line-height: 1.4;              /* 减少行高，紧凑显示 */
}

/* 表格单元格通用样式 */
.content-area table th,
.content-area table td {
    padding: 10px 12px;            /* 减少内边距，更紧凑 */
    text-align: left;              /* 默认左对齐 */
    border-bottom: 1px solid #e0e0e0; /* 底部边框 */
    vertical-align: middle;        /* 内容垂直居中 */
}

/* 表头特殊样式 - 居中显示且加粗 */
.content-area table th {
    background-color: #f8f9fa;     /* 浅灰色背景 */
    font-weight: 700;              /* 加粗字体 */
    color: var(--secondary-color); /* 次要色调 */
    font-size: 0.95rem;            /* 字体大小 */
    text-align: center;            /* 表头文字居中显示 */
}

/* 表格数据单元格 */
.content-area table td {
    font-size: 0.9rem;             /* 稍小字体 */
    text-align: left;              /* 数据单元格默认左对齐 */
    font-weight: 400;              /* 正常字体粗细 */
}

/* ========== 表格对齐辅助类 ========== */
/* 单元格居中 */
.content-area table td.text-center,
.content-area table th.text-center {
    text-align: center;            /* 文字居中 */
}

/* 单元格右对齐 */
.content-area table td.text-right,
.content-area table th.text-right {
    text-align: right;             /* 文字右对齐 */
}

/* 单元格左对齐 */
.content-area table td.text-left,
.content-area table th.text-left {
    text-align: left;              /* 文字左对齐 */
}

/* 数字列自动右对齐（可选） */
.content-area table td.number-cell {
    text-align: right;             /* 数字右对齐 */
    font-family: 'Courier New', monospace; /* 等宽字体，便于数字对齐 */
}

/* 操作列自动居中 */
.content-area table td.actions-cell {
    text-align: center;            /* 操作列居中 */
}

/* 表格行悬停效果 */
.content-area table tr:hover {
    background-color: #c5d5ea !important;
    box-shadow: inset 5px 0 0 #e67e22;
}

/* 表格容器 - 用于响应式 */
.table-container {
    width: 100%;                   /* 宽度100% */
    overflow-x: auto;              /* 水平滚动 */
    margin: 20px 0;                /* 上下外边距 */
    border-radius: 6px;            /* 圆角 */
    border: 1px solid #e0e0e0;     /* 边框 */
}

/* ========== 表格内链接样式优化 ========== */
.table-link {
    display: inline-block;         /* 行内块显示 */
    color: var(--primary-color);   /* 主色调 */
    text-decoration: none;         /* 无下划线 */
    padding: 4px 8px;              /* 内边距 */
    margin: 0 3px;                 /* 左右外边距 */
    border-radius: 3px;            /* 小圆角 */
    transition: var(--transition); /* 过渡效果 */
    font-size: 0.85rem;            /* 字体大小 */
    font-weight: 500;              /* 字体粗细 */
    background: transparent;       /* 透明背景 */
    border: none;                  /* 无边框 */
    cursor: pointer;               /* 手型光标 */
}

/* 表格链接悬停效果 */
.table-link:hover {
    color: #2980b9;                /* 深蓝色 */
    background-color: rgba(52, 152, 219, 0.1); /* 浅蓝色背景 */
    text-decoration: underline;    /* 下划线 */
}

/* 危险操作链接样式（删除、取消等） */
.table-link.text-danger {
    color: var(--accent-color);    /* 红色 */
}

.table-link.text-danger:hover {
    color: #c0392b;                /* 深红色 */
    background-color: rgba(231, 76, 60, 0.1); /* 浅红色背景 */
}

/* 成功操作链接样式（确认、通过等） */
.table-link.text-success {
    color: var(--success-color);   /* 绿色 */
}

.table-link.text-success:hover {
    color: #27ae60;                /* 深绿色 */
    background-color: rgba(46, 204, 113, 0.1); /* 浅绿色背景 */
}

/* 警告操作链接样式（警告、待处理等） */
.table-link.text-warning {
    color: var(--warning-color);   /* 橙色 */
}

.table-link.text-warning:hover {
    color: #e67e22;                /* 深橙色 */
    background-color: rgba(243, 156, 18, 0.1); /* 浅橙色背景 */
}

/* 表格内操作链接容器 */
.table-actions {
    display: flex;                 /* 弹性布局 */
    gap: 8px;                      /* 操作按钮间距 */
    flex-wrap: wrap;               /* 允许换行 */
    align-items: center;           /* 垂直居中 */
}

/* ========== 表单样式 ========== */
.content-area form {
    width: 100%;                   /* 宽度100% */
    max-width: 100%;               /* 最大宽度100% */
    margin: 20px 0;                /* 上下外边距 */
}

/* ========== 文本对齐样式 ========== */
.content-area .text-center {
    text-align: center;            /* 文字居中 */
}

/* 内容标题区域 */
.content-header {
    margin-bottom: 25px;           /* 底部外边距 */
    padding-bottom: 15px;          /* 底部内边距 */
    border-bottom: 1px solid #eee; /* 底部边框 */
    text-align: center;            /* 文字居中 */
    width: 100%;                   /* 宽度100% */
}

.content-header h2 {
    color: var(--secondary-color); /* 次要色调 */
    font-size: 1.8rem;             /* 字体大小 */
    font-weight: 600;              /* 字体粗细 */
}

/* ========== 页脚样式 ========== */
.footer {
    background-color: var(--secondary-color); /* 深蓝色背景 */
    color: white;                  /* 白色文字 */
    text-align: center;            /* 文字居中 */
    padding: 20px 0;               /* 上下内边距 */
    margin-top: 40px;              /* 顶部外边距 */
}

/* ========== 响应式设计 - 大屏幕 (1200px以下) ========== */
@media (max-width: 1200px) {
    .page-container {
        max-width: 100%;           /* 取消最大宽度限制 */
        padding: 0 20px;           /* 减少左右内边距 */
    }
}

/* ========== 响应式设计 - 中等屏幕 (1024px以下) ========== */
@media (max-width: 1024px) {
    .header-content {
        flex-wrap: wrap;           /* 允许换行 */
        height: auto;              /* 高度自适应 */
        padding: 10px 0;           /* 上下内边距 */
    }

    .main-nav {
        order: 3;                  /* 调整显示顺序为第三位 */
        width: 100%;               /* 宽度100% */
        justify-content: center;    /* 水平居中 */
        margin-top: 10px;          /* 顶部外边距 */
    }

    .user-info {
        margin-left: auto;         /* 右侧对齐 */
    }
}

/* ========== 响应式设计 - 小屏幕 (768px以下) ========== */
@media (max-width: 768px) {
    .main-layout {
        flex-direction: column;    /* 垂直布局 */
    }

    .sidebar-container {
        width: 100%;               /* 宽度100% */
    }

    .header-content {
        flex-direction: column;    /* 垂直布局 */
        gap: 10px;                 /* 元素间距 */
        text-align: center;        /* 文字居中 */
    }

    .main-nav {
        order: 0;                  /* 恢复显示顺序 */
        width: auto;               /* 宽度自适应 */
        margin-top: 0;             /* 取消顶部外边距 */
        flex-wrap: wrap;           /* 允许换行 */
    }

    .user-info {
        margin-left: 0;            /* 取消左侧外边距 */
        flex-direction: column;    /* 垂直布局 */
        gap: 10px;                 /* 元素间距 */
    }

    .logo {
        justify-content: center;    /* 水平居中 */
    }

    /* 移动端表格优化 */
    .content-area table th,
    .content-area table td {
        padding: 8px 10px;         /* 进一步减少内边距 */
        font-size: 0.85rem;        /* 更小字体 */
    }

    /* 确保移动端表头也居中且加粗 */
    .content-area table th {
        text-align: center;        /* 保持居中 */
        font-weight: 700;          /* 保持加粗 */
    }

    /* 确保移动端对齐样式也生效 */
    .content-area table td.text-center,
    .content-area table th.text-center {
        text-align: center;
    }

    .content-area table td.text-right,
    .content-area table th.text-right {
        text-align: right;
    }

    .content-area table td.text-left,
    .content-area table th.text-left {
        text-align: left;
    }

    .table-link {
        padding: 3px 6px;          /* 减少内边距 */
        font-size: 0.8rem;         /* 更小字体 */
        margin: 0 2px;             /* 减少外边距 */
    }

    .table-actions {
        gap: 5px;                  /* 减少间距 */
        flex-direction: column;    /* 垂直布局 */
        align-items: flex-start;   /* 左对齐 */
    }
}

/* ========== 卡片组件样式 ========== */
.card {
    background: white;             /* 白色背景 */
    border-radius: 8px;            /* 圆角 */
    box-shadow: var(--shadow);     /* 阴影效果 */
    padding: 25px;                 /* 内边距 */
    margin: 20px 0;                /* 上下外边距 */
    transition: var(--transition); /* 过渡效果 */
    width: 100%;                   /* 宽度100% */
}

/* 卡片悬停效果 */
.card:hover {
    transform: translateY(-3px);   /* 向上移动 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 增强阴影 */
}

/* 卡片头部样式 */
.card-header {
    display: flex;                 /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center;           /* 垂直居中 */
    margin-bottom: 15px;           /* 底部外边距 */
    padding-bottom: 10px;          /* 底部内边距 */
    border-bottom: 1px solid #eee; /* 底部边框 */
}

.card-title {
    font-size: 1.3rem;             /* 字体大小 */
    font-weight: 600;              /* 字体粗细 */
    color: var(--secondary-color); /* 次要色调 */
}

/* ========== 普通按钮样式 ========== */
.btn {
    display: inline-block;         /* 行内块显示 */
    padding: 12px 28px;            /* 内边距 */
    background: linear-gradient(135deg, var(--primary-color), #2980b9); /* 蓝色渐变 */
    color: white;                  /* 白色文字 */
    border: none;                  /* 无边框 */
    border-radius: 6px;            /* 圆角 */
    cursor: pointer;               /* 手型光标 */
    transition: var(--transition); /* 过渡效果 */
    font-weight: 500;              /* 字体粗细 */
    text-decoration: none;         /* 无下划线 */
    text-align: center;            /* 文字居中 */
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2); /* 阴影效果 */
    font-size: 0.95rem;            /* 字体大小 */
    margin: 5px;                   /* 外边距 */
}

/* 按钮悬停效果 */
.btn:hover {
    background: linear-gradient(135deg, #2980b9, #2471a3); /* 深蓝色渐变 */
    transform: translateY(-2px);   /* 向上移动 */
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3); /* 增强阴影 */
}

/* 按钮组容器 */
.btn-group {
    display: flex;                 /* 弹性布局 */
    justify-content: center;       /* 水平居中 */
    flex-wrap: wrap;               /* 允许换行 */
    gap: 15px;                     /* 按钮间距 */
    margin: 20px 0;                /* 上下外边距 */
}

/* ========== 通用内容样式 ========== */
.text-content {
    width: 100%;                   /* 宽度100% */
    line-height: 1.8;              /* 行高 */
}

.content-center {
    text-align: center;            /* 文字居中 */
}

/* 表单容器 */
.form-container {
    width: 100%;                   /* 宽度100% */
    max-width: 600px;              /* 最大宽度 */
    margin: 0 auto;                /* 水平居中 */
}