/* ========================
   后台管理基础布局
   与前端保持统一配色与卡片风格
   ======================== */

/* 后台管理页面容器：整体页面区域 */
.admin-page {
    padding: 24px 0 40px; /* 上下内边距 */
}

/* 后台管理页面头部：包含标题和副标题 */
.admin-header {
    margin-bottom: 16px; /* 底部外边距 */
}

/* 后台管理页面主标题 */
.admin-title {
    margin: 0 0 6px; /* 上下外边距：上0 下6px */
    font-size: 24px; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    color: #222; /* 深灰色文字 */
}

/* 后台管理页面副标题：说明文字 */
.admin-subtitle {
    margin: 0; /* 无外边距 */
    font-size: 14px; /* 字体大小 */
    color: #666; /* 中灰色文字 */
}

/* 后台管理主体布局：左右两栏布局 */
.admin-main {
    display: flex; /* 弹性布局 */
    gap: 24px; /* 左右两栏之间的间距 */
}

/* 后台管理侧边栏：左侧导航菜单区域 */
.admin-sidebar {
    width: 220px; /* 固定宽度 */
}

/* 后台管理导航菜单容器：白色卡片样式 */
.admin-nav {
    background-color: #ffffff; /* 白色背景 */
    border-radius: 0; /* 直角 */
    border: 1px solid #e5e5e5; /* 浅灰色边框 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 后台管理导航菜单项：单个导航链接 */
.admin-nav-item {
    display: block; /* 块级元素 */
    padding: 10px 16px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    color: #333; /* 深灰色文字 */
    text-decoration: none; /* 无下划线 */
    border-bottom: 1px solid #f0f0f0; /* 底部浅灰色边框 */
}

/* 最后一个导航菜单项：移除底部边框 */
.admin-nav-item:last-child {
    border-bottom: none; /* 无底部边框 */
}

/* 导航菜单项悬停状态：背景变浅灰色 */
.admin-nav-item:hover {
    background-color: #f5f5f5; /* 浅灰色背景 */
}

/* 导航菜单项激活状态：当前页面的导航项 */
.admin-nav-item-active {
    background-color: #750a20; /* 红色背景 */
    color: #ffffff; /* 白色文字 */
}

/* 导航菜单项危险操作：如删除、退出登录等 */
.admin-nav-item-danger {
    color: #c0392b; /* 红色文字 */
}

/* 后台管理内容区：右侧主要内容区域 */
.admin-content {
    flex: 1; /* 占据剩余空间 */
}

/* 后台管理统计卡片容器：显示数据统计的卡片组 */
.admin-cards {
    display: flex; /* 弹性布局 */
    gap: 16px; /* 卡片之间的间距 */
    margin-bottom: 20px; /* 底部外边距 */
}

/* 后台管理统计卡片：单个统计卡片（如文章数、新闻数等） */
.admin-card {
    flex: 1; /* 平均分配空间 */
    background-color: #ffffff; /* 白色背景 */
    border-radius: 0; /* 直角 */
    border: 1px solid #e5e5e5; /* 浅灰色边框 */
    padding: 16px 18px; /* 内边距 */
}

/* 统计卡片标签：如"文章总数"、"新闻总数"等 */
.admin-card-label {
    font-size: 13px; /* 字体大小 */
    color: #888; /* 浅灰色文字 */
    margin-bottom: 8px; /* 底部外边距 */
}

/* 统计卡片数值：显示具体的统计数据 */
.admin-card-value {
    font-size: 22px; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    color: #222; /* 深灰色文字 */
    margin-bottom: 8px; /* 底部外边距 */
}

/* 统计卡片额外链接：如"查看全部"等 */
.admin-card-extra a {
    font-size: 13px; /* 字体大小 */
    color: #750a20; /* 红色链接 */
    text-decoration: none; /* 无下划线 */
}

/* 统计卡片额外链接悬停状态 */
.admin-card-extra a:hover {
    text-decoration: underline; /* 下划线 */
}

/* 后台管理面板：主要内容面板容器 */
.admin-panel {
    background-color: #ffffff; /* 白色背景 */
    border-radius: 0; /* 直角 */
    border: 1px solid #e5e5e5; /* 浅灰色边框 */
    padding: 16px 18px 20px; /* 内边距：上16px 左右18px 下20px */
}

/* 管理面板标题 */
.admin-panel-title {
    margin: 0 0 12px; /* 上下外边距：上0 下12px */
    font-size: 16px; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    color: #222; /* 深灰色文字 */
}

/* 管理操作按钮组：包含多个操作按钮 */
.admin-actions {
    display: flex; /* 弹性布局 */
    gap: 10px; /* 按钮之间的间距 */
    flex-wrap: wrap; /* 允许换行 */
}

/* 管理操作按钮：主要操作按钮（如新增、编辑等） */
.admin-action-btn {
    display: inline-flex; /* 行内弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    padding: 8px 14px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    color: #ffffff; /* 白色文字 */
    background-color: #750a20; /* 红色背景 */
    border-radius: 4px; /* 圆角 */
    text-decoration: none; /* 无下划线 */
}

/* 管理操作按钮悬停状态：背景变深 */
.admin-action-btn:hover {
    background-color: #a01330; /* 深红色背景 */
}

/* 管理操作按钮次要样式：次要操作按钮 */
.admin-action-btn.admin-action-btn-secondary {
    background-color: #888888; /* 灰色背景 */
}

/* 次要操作按钮悬停状态 */
.admin-action-btn.admin-action-btn-secondary:hover {
    background-color: #666666; /* 深灰色背景 */
}

/* 管理筛选表单：用于筛选和搜索的表单容器 */
.admin-filter-form {
    display: flex; /* 弹性布局 */
    gap: 8px; /* 表单项之间的间距 */
    flex-wrap: wrap; /* 允许换行 */
    align-items: center; /* 垂直居中对齐 */
}

/* 管理筛选输入框：搜索和筛选的文本输入框 */
.admin-filter-input {
    padding: 6px 8px; /* 内边距 */
    min-width: 200px; /* 最小宽度 */
    border-radius: 4px; /* 圆角 */
    border: 1px solid #cccccc; /* 浅灰色边框 */
    font-size: 14px; /* 字体大小 */
}

/* 管理筛选下拉框：分类筛选的下拉选择框 */
.admin-filter-select {
    padding: 6px 8px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    border: 1px solid #cccccc; /* 浅灰色边框 */
    font-size: 14px; /* 字体大小 */
}

/* 管理数据表格：显示列表数据的表格 */
.admin-table {
    width: 100%; /* 占满宽度 */
    border-collapse: collapse; /* 边框合并 */
    font-size: 14px; /* 字体大小 */
}

/* 表格表头和单元格：统一的边框和内边距 */
.admin-table th,
.admin-table td {
    border: 1px solid #e5e5e5; /* 浅灰色边框 */
    padding: 8px 10px; /* 内边距 */
    text-align: left; /* 左对齐 */
}

/* 表格表头样式：背景色和字体粗细 */
.admin-table th {
    background-color: #fafafa; /* 浅灰色背景 */
    font-weight: 600; /* 中等粗细 */
    color: #333; /* 深灰色文字 */
}

/* 表格标题列：限制宽度，超出显示省略号 */
.admin-table-title {
    max-width: 360px; /* 最大宽度 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏溢出 */
    text-overflow: ellipsis; /* 显示省略号 */
}

/* 表格URL列：限制宽度，超出显示省略号 */
.admin-table-url {
    max-width: 260px; /* 最大宽度 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏溢出 */
    text-overflow: ellipsis; /* 显示省略号 */
}

/* 表格空数据提示：无数据时的提示文字 */
.admin-table-empty {
    text-align: center; /* 居中对齐 */
    color: #999; /* 浅灰色文字 */
}

/* 表格操作链接：表格中的操作按钮链接 */
.admin-table-link {
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    padding: 0; /* 无内边距 */
    margin-right: 8px; /* 右侧外边距 */
    font-size: 13px; /* 字体大小 */
    color: #750a20; /* 红色链接 */
    text-decoration: none; /* 无下划线 */
    cursor: pointer; /* 鼠标指针样式 */
}

/* 表格操作链接悬停状态 */
.admin-table-link:hover {
    text-decoration: underline; /* 下划线 */
}

/* 表格危险操作链接：如删除操作 */
.admin-table-link-danger {
    color: #c0392b; /* 红色文字 */
}

/* 表格内联表单：表格中嵌入的表单 */
.admin-table-inline-form {
    display: inline; /* 行内元素 */
}

/* 管理表单容器：编辑和新增表单 */
.admin-form {
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 纵向排列 */
    gap: 8px; /* 表单项之间的间距 */
}

/* 表单标签：表单项的标签文字 */
.admin-form-label {
    font-size: 14px; /* 字体大小 */
    color: #333; /* 深灰色文字 */
}

/* 表单输入控件：输入框、下拉框、文本域的统一样式 */
.admin-form-input,
.admin-form-select,
.admin-form-textarea {
    width: 100%; /* 占满宽度 */
    padding: 8px 10px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    border: 1px solid #cccccc; /* 浅灰色边框 */
    font-size: 14px; /* 字体大小 */
}

/* 表单文本域：允许垂直调整大小 */
.admin-form-textarea {
    resize: vertical; /* 只能垂直调整大小 */
}

/* 表单操作按钮组：提交、取消等按钮 */
.admin-form-actions {
    margin-top: 12px; /* 顶部外边距 */
    display: flex; /* 弹性布局 */
    gap: 10px; /* 按钮之间的间距 */
}

/* 分段选择器：用于切换不同选项（如广告位置切换） */
.admin-segment {
    display: inline-flex; /* 行内弹性布局 */
    border: 1px solid #e5e5e5; /* 浅灰色边框 */
    border-radius: 999px; /* 完全圆角（胶囊形状） */
    overflow: hidden; /* 隐藏溢出内容 */
    background: #f8f8f8; /* 浅灰色背景 */
}

/* 分段选择器选项：单个选项 */
.admin-segment-item {
    padding: 6px 14px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    color: #555; /* 中灰色文字 */
    text-decoration: none; /* 无下划线 */
    border-right: 1px solid #e5e5e5; /* 右侧边框分隔 */
}

/* 最后一个分段选择器选项：移除右侧边框 */
.admin-segment-item:last-child {
    border-right: none; /* 无右侧边框 */
}

/* 分段选择器激活选项：当前选中的选项 */
.admin-segment-item-active {
    background: #750a20; /* 红色背景 */
    color: #fff; /* 白色文字 */
}

/* 管理面板标题行：包含标题和操作按钮的行 */
.admin-panel-title-row {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 两端对齐 */
    gap: 12px; /* 元素之间的间距 */
}