/* 统计页面样式 */

/* 基础统计区域 */
.joe_census__basic {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(2, 1fr); /* 两列，每列宽度相等 */
    gap: 15px; /* 网格间距15px */
    margin-bottom: 15px; /* 底部外边距15px */
}

.joe_census__basic-item.list {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(2, 1fr); /* 两列，每列宽度相等 */
    gap: 15px; /* 网格间距15px */
}

.joe_census__basic-item.list .list {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 水平两端对齐 */
    background: var(--background); /* 背景色使用变量 */
    box-shadow: var(--box-shadow); /* 阴影使用变量 */
    border-radius: var(--radius-inner) var(--radius-wrap) var(--radius-wrap) var(--radius-inner); /* 圆角样式 */
    padding: 15px 15px 12px; /* 内边距：上15px 左右15px 下12px */
}

.joe_census__basic-item.list .list .count {
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列 */
    justify-content: space-between; /* 子元素垂直分布 */
    height: 100%; /* 高度100% */
}

.joe_census__basic-item.list .list .count h6 {
    font-size: 12px; /* 字体大小12px */
    margin-bottom: 10px; /* 底部外边距10px */
    color: var(--seat); /* 文字颜色使用变量 */
}

.joe_census__basic-item.list .list .count p {
    font-size: 28px; /* 字体大小28px */
    font-weight: 700; /* 字体加粗 */
    margin-bottom: 0; /* 移除底部外边距 */
}

.joe_census__basic-item.list .list .icon {
    fill: var(--classA); /* 图标填充颜色使用变量 */
}

/* 为列表项添加不同颜色标识 */
.joe_census__basic-item.list .list:nth-child(1) {
    border-left: 5px solid #1cc88a; /* 左侧5px绿色边框 */
    color: #1cc88a; /* 文字颜色绿色 */
}

.joe_census__basic-item.list .list:nth-child(2) {
    border-left: 5px solid #36b9cc; /* 左侧5px青色边框 */
    color: #36b9cc; /* 文字颜色青色 */
}

.joe_census__basic-item.list .list:nth-child(3) {
    border-left: 5px solid #2196f3; /* 左侧5px蓝色边框 */
    color: #2196f3; /* 文字颜色蓝色 */
}

.joe_census__basic-item.list .list:nth-child(4) {
    border-left: 5px solid #9c27b0; /* 左侧5px紫色边框 */
    color: #9c27b0; /* 文字颜色紫色 */
}

.joe_census__basic-item.category {
    background: var(--background); /* 背景色使用变量 */
    box-shadow: var(--box-shadow); /* 阴影使用变量 */
    border-radius: var(--radius-wrap); /* 圆角使用变量 */
}

.joe_census__basic-item.category #category {
    height: 230px; /* 分类区域高度230px */
}

/* 最近动态区域 */
.joe_census__lately {
    background: var(--background); /* 背景色使用变量 */
    margin-bottom: 15px; /* 底部外边距15px */
    border-radius: var(--radius-wrap); /* 圆角使用变量 */
    box-shadow: var(--box-shadow); /* 阴影使用变量 */
}

.joe_census__lately .title {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    height: 45px; /* 高度45px */
    padding: 0 12px; /* 左右内边距12px */
    border-bottom: 1px solid var(--classC); /* 下边框使用变量颜色 */
    color: var(--main); /* 文字颜色使用变量 */
    justify-content: space-between; /* 水平两端对齐 */
    -webkit-user-select: none; /* 禁止webkit浏览器文本选择 */
    -moz-user-select: none; /* 禁止firefox浏览器文本选择 */
    -ms-user-select: none; /* 禁止IE浏览器文本选择 */
    user-select: none; /* 禁止文本选择 */
}

.joe_census__lately .content {
    padding: 15px; /* 内边距15px */
}

.joe_census__lately .content #lately {
    height: 300px; /* 最近动态内容高度300px */
}

/* 服务器统计区域 */
.joe_census__server {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(2, 1fr); /* 两列，每列宽度相等 */
    gap: 15px; /* 网格间距15px */
    margin-bottom: 15px; /* 底部外边距15px */
}

.joe_census__server-item {
    background: var(--background); /* 背景色使用变量 */
    box-shadow: var(--box-shadow); /* 阴影使用变量 */
    border-radius: var(--radius-wrap); /* 圆角使用变量 */
}

.joe_census__server-item .title {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    height: 45px; /* 高度45px */
    padding: 0 12px; /* 左右内边距12px */
    border-bottom: 1px solid var(--classC); /* 下边框使用变量颜色 */
    color: var(--main); /* 文字颜色使用变量 */
    justify-content: space-between; /* 水平两端对齐 */
    -webkit-user-select: none; /* 禁止webkit浏览器文本选择 */
    -moz-user-select: none; /* 禁止firefox浏览器文本选择 */
    -ms-user-select: none; /* 禁止IE浏览器文本选择 */
    user-select: none; /* 禁止文本选择 */
}

.joe_census__server-item .title .count {
    color: var(--minor); /* 计数文字颜色使用变量 */
    font-size: 12px; /* 字体大小12px */
}

.joe_c	Census__server-item .title .count .split {
    margin: 0 5px; /* 计数分隔符左右外边距5px */
}

.joe_census__server-item .content {
    padding: 15px; /* 内边距15px */
}

.joe_census__server-item .content #work,
.joe_census__server-item .content #flow {
    height: 315px; /* 工作和流量图表高度315px */
}

/* 归档区域 */
.joe_census__filing {
    background: var(--background); /* 背景色使用变量 */
    box-shadow: var(--box-shadow); /* 阴影使用变量 */
    border-radius: var(--radius-wrap); /* 圆角使用变量 */
}

.joe_census__filing .title {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    height: 45px; /* 高度45px */
    padding: 0 12px; /* 左右内边距12px */
    border-bottom: 1px solid var(--classC); /* 下边框使用变量颜色 */
    color: var(--main); /* 文字颜色使用变量 */
    justify-content: space-between; /* 水平两端对齐 */
    -webkit-user-select: none; /* 禁止webkit浏览器文本选择 */
    -moz-user-select: none; /* 禁止firefox浏览器文本选择 */
    -ms-user-select: none; /* 禁止IE浏览器文本选择 */
    user-select: none; /* 禁止文本选择 */
}

.joe_census__filing .content {
    padding: 15px; /* 内边距15px */
}

.joe_census__filing .content . kilometre {
    position: relative; /* 相对定位 */
}

.joe_census__filing .content .item:last-child .wrapper {
    padding-bottom: 0; /* 最后一个项目的包裹元素移除底部内边距 */
}

.joe_census__filing .content .item .head {
    position: absolute; /* 绝对定位 */
    top: 14px; /* 距顶部14px */
    width: 13px; /* 宽度13px */
    height: 13px; /* 高度13px */
    background: var(--classC); /* 背景色使用变量 */
    border-radius: 50%; /* 圆形 */
}

.joe_census__filing .content .item .tail {
    position: absolute; /* 绝对定位 */
    left: 6px; /* 距左侧6px */
    top: 0; /* 距顶部0px */
    width: 1px; /* 宽度1px */
    height: 100%; /* 高度100% */
    background: var(--classC); /* 背景色使用变量 */
}

.joe_census__filing .content .item .wrapper {
    padding-left: 30px; /* 左侧内边距30px */
    padding-bottom: 15px; /* 底部内边距15px */
}

.joe_census__filing .content .item .wrapper .panel {
    position: relative; /* 相对定位 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 水平两端对齐 */
    color: var(--routine); /* 文字颜色使用变量 */
    cursor: pointer; /* 鼠标悬停显示手型 */
    background: var(--classD); /* 背景色使用变量 */
    padding: 10px; /* 内边距10px */
    height: 40px; /* 高度40px */
    border-radius: 4px; /* 圆角4px */
    user-select: none; /* 禁止文本选择 */
}

.joe_census__filing .content .item .wrapper .panel svg {
    width: 10px; /* SVG图标宽度10px */
    height: 10px; /* SVG图标高度10px */
    fill: var(--minor); /* 填充颜色使用变量 */
    -webkit-transform: rotate(180deg); /* Webkit浏览器旋转180度 */
    transform: rotate(180deg); /* 旋转180度 */
    transition: -webkit-transform 0.25s; /* Webkit浏览器旋转过渡动画0.25秒 */
    transition: transform 0.25s; /* 旋转过渡动画0.25秒 */
    transition: transform 0.25s, -webkit-transform 0.25s; /* 兼容写法 */
}

.joe_census__filing .content .item .wrapper .panel.in svg {
    -webkit-transform: rotate(90deg); /* 展开时旋转90度（Webkit） */
    transform: rotate(90deg); /* 展开时旋转90度 */
}

.joe_census__filing .content .item .wrapper .panel::before {
    content: ''; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    -webkit-transform: translateY(-50%); /* Webkit浏览器垂直居中偏移 */
    transform: translateY(-50%); /* 垂直居中偏移 */
    left: -8px; /* 距左侧-8px */
    width: 0; /* 宽度0 */
    height: 0; /* 高度0 */
    border-right: 8px solid var(--classD); /* 右侧8px实线边框，形成三角形 */
    border-top: 8px solid transparent; /* 上方透明边框 */
    border-bottom: 8px solid transparent; /* 下方透明边框 */
}

.joe_census__filing .content .item .wrapper .panel-body {
    display: none; /* 默认隐藏 */
    padding: 15px 15px 0 15px; /* 内边距：上15px 左右15px 下0 */
}

.joe_census__filing .content .item .wrapper .panel-body li {
    white-space: nowrap; /* 文字不换行 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 超出显示省略号 */
    margin-bottom: 15px; /* 底部外边距15px */
}

.joe_census__filing .content .item .wrapper .panel-body li:last-child {
    margin-bottom: 0; /* 最后一个列表项移除底部外边距 */
}

.joe_census__filing .content .item .wrapper .panel-body li a {
    color: var(--routine); /* 链接颜色使用变量 */
}

.joe_census__filing .content .item .wrapper .panel-body li a:hover {
    color: var(--theme); /* 链接悬停时颜色使用主题变量 */
}

.joe_census__filing .content .item.load {
    padding-top: 15px; /* 顶部内边距15px */
}

.joe_census__filing .content .item.load .head {
    top: 25px; /* 距顶部25px */
    background: var(--theme); /* 背景色使用主题变量 */
}

.joe_census__filing .content .item.load .button {
    position: relative; /* 相对定位 */
    margin-left: 30px; /* 左侧外边距30px */
    border: none; /* 无边框 */
    background: var(--theme); /* 背景色使用主题变量 */
    box-shadow: 1px 1px 3px -1px var(--theme); /* 阴影效果 */
    color: #fff; /* 文字颜色白色 */
    border-radius: 4px; /* 圆角4px */
    padding: 0 12px; /* 左右内边距12px */
    height: 34px; /* 高度34px */
    font-size: 13px; /* 字体大小13px */
}

.joe_census__filing .content .item.load .button::before {
    content: ''; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    -webkit-transform: translateY(-50%); /* Webkit浏览器垂直居中偏移 */
    transform: translateY(-50%); /* 垂直居中偏移 */
    left: -8px; /* 距左侧-8px */
    width: 0; /* 宽度0 */
    height: 0; /* 高度0 */
    border-right: 8px solid var(--theme); /* 右侧8px实线边框，形成三角形 */
    border-top: 8px solid transparent; /* 上方透明边框 */
    border-bottom: 8px solid transparent; /* 下方透明边框 */
}