/* CSS变量定义 - 集中管理颜色、间距和字体大小，便于统一修改 */
:root {
    --primary-color: #0056b3;        /* 主题色：蓝色 */
    --secondary-color: #0E9F6E;      /* 次要主题色：绿色 */
    --success-color: #0E9F6E;        /* 成功色：绿色 */
    --warning-color: #ff9800;        /* 警告色：橙色 */
    --danger-color: #f44336;         /* 危险色：红色 */
    --danger-text: red;              /* 危险文本：红色 */
    
    --bg-light: #f0f8ff;             /* 浅背景色 */
    --bg-highlight: #e9f2ff;         /* 高亮背景色 */
    --bg-card: #ffffff;              /* 卡片背景色 */
    --border-color: #0056b3;         /* 边框颜色 */
    --text-color: #333;              /* 文本颜色 */
    --text-light: #666;              /* 浅色文本 */
    
    --spacing-xs: 3px;               /* 极小间距 */
    --spacing-sm: 5px;               /* 小间距 */
    --spacing-md: 10px;              /* 中等间距 */
    --spacing-lg: 20px;              /* 大间距 */
    --spacing-xl: 30px;              /* 超大间距 */
    
    --font-small: 12px;              /* 小字体大小 */
    --font-normal: 14px;             /* 普通字体大小 */
    --font-medium: 16px;             /* 中等字体大小 */
    --font-large: 18px;              /* 大字体大小 */
    --font-xl: 24px;                 /* 超大字体 */
    
    --border-radius-sm: 4px;         /* 小圆角 */
    --border-radius-md: 8px;         /* 中等圆角 */
    --border-radius-lg: 12px;        /* 大圆角 */
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);                  /* 小阴影 */
    --shadow-md: 0 2px 4px rgba(0,0,0,0.1);                  /* 中等阴影 */
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.1);                  /* 大阴影 */
    --shadow-card: 0 2px 5px rgba(0, 0, 0, 0.08);            /* 卡片阴影 */
}

/* 基础样式设置 */
body {
    font-family: Arial, sans-serif;
    margin: var(--spacing-lg);
    overflow-x: hidden;              /* 防止水平溢出导致滚动条 */
    color: var(--text-color);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    margin-top: 0;
}

h2 {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    margin-top: 30px;
}

/* 顶部布局组件 */
.header {
    display: flex;
    justify-content: space-between;   /* 标题和帮助链接两端对齐 */
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.help-link {
    font-size: 1rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

.help-link:hover {
    text-decoration: underline;      /* 鼠标悬停时显示下划线 */
}

/* 通用布局容器 */
.layout-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;          /* 垂直排列各部分 */
}

/* 通用卡片样式 */
.card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

/* 图表容器 */
.chart-container {
    width: 100%;
    height: 300px;
    margin-bottom: var(--spacing-lg);
}

/* 表格基本样式 */
table {
    width: 100%;
    border-collapse: collapse;      /* 合并相邻单元格边框 */
    color: var(--text-color);
}

table, th, td {
    border: 1px solid var(--border-color);
}

th, td {
    padding: var(--spacing-md);
    text-align: center;
}

th {
    background-color: var(--bg-light);
    font-weight: bold;
}

/* 加载遮罩样式 */
.loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);  /* 半透明背景 */
    color: white;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;                        /* 最高层级，确保显示在最上方 */
}

/* 自定义提示框样式 */
.custom-alert {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--danger-color);
    color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;                           /* 初始隐藏 */
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;  /* 平滑过渡效果 */
}

.custom-alert.show {
    opacity: 1;                           /* 显示提示框 */
    visibility: visible;
}

/* 按钮样式 */
button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-sm);
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    font-size: var(--font-normal);
}

button:hover {
    opacity: 0.9;
}

/* 状态指示器样式 */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: var(--font-small);
    font-weight: bold;
}

.badge-success {
    background-color: var(--success-color);
    color: white;
}

.badge-warning {
    background-color: var(--warning-color);
    color: white;
}

.badge-danger {
    background-color: var(--danger-color);
    color: white;
}

/* 网格布局系统 */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* 响应式设计 - 在小屏幕或竖屏设备上调整布局 */
@media screen and (max-width: 800px), (orientation: portrait) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .card {
        padding: var(--spacing-md);
    }
    
    body {
        margin: var(--spacing-md);
    }
}