/*
 * 后台全局统一样式
 * 所有后台页面共享此文件
 */

/* ===== 全局重置 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 字体基础 ===== */
html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    background: #f5f5f5;
    min-height: 100vh;
}

/* ===== 页面布局 ===== */
.admin-container {
    display: flex;
    min-height: 100vh;
}

.admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f5f5f5;
}

/* ===== 页面标题栏 ===== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-title {
    font-size: 20px;
    font-weight: 500;
    color: #333;
}

/* ===== 统计卡片（统一：白底居中 + 彩色数字）===== */
.stats-row,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-num,
.stat-value {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.stat-label {
    font-size: 13px;
    color: #999;
    margin-top: 6px;
}

.stat-today {
    font-size: 12px;
    color: #667eea;
    margin-top: 6px;
}

/* 数字颜色变体 */
.stat-card.hl-blue .stat-num,
.stat-card.hl-blue .stat-value    { color: #667eea; }
.stat-card.hl-green .stat-num,
.stat-card.hl-green .stat-value   { color: #52c41a; }
.stat-card.hl-orange .stat-num,
.stat-card.hl-orange .stat-value  { color: #fa8c16; }
.stat-card.hl-red .stat-num,
.stat-card.hl-red .stat-value     { color: #f5222d; }
.stat-card.hl-gold .stat-num,
.stat-card.hl-gold .stat-value    { color: #d4a017; }
.stat-card.hl-cyan .stat-num,
.stat-card.hl-cyan .stat-value    { color: #13c2c2; }
.stat-card.hl-purple .stat-num,
.stat-card.hl-purple .stat-value  { color: #722ed1; }

@media (max-width: 1200px) {
    .stats-row,
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .stats-row,
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 面板 / 卡片 ===== */
.section,
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 18px;
}

.section-header,
.card-header {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title,
.card-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.card-body {
    padding: 20px;
}

/* ===== 筛选 / 搜索区域（统一样式）===== */

/* 容器 —— 三种容器统一间距与对齐 */
.filter-bar {
    padding: 12px 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.search-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

/* 筛选项 —— 统一行内布局 */
.filter-item,
.search-group,
.toolbar .form-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 标签 —— 统一字体 */
.filter-item label,
.search-group label,
.toolbar .form-group label {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

/* 输入框 / 下拉框 —— 统一尺寸 */
.filter-item input,
.filter-item select,
.search-group input,
.search-group select,
.toolbar .form-group input,
.toolbar .form-group select {
    padding: 6px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.filter-item input:focus,
.filter-item select:focus,
.search-group input:focus,
.search-group select:focus,
.toolbar .form-group input:focus,
.toolbar .form-group select:focus {
    border-color: #667eea;
}

/* ===== 通用表单控件 ===== */
.form-control,
.form-input {
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

/* 通用表单组（间距） */
.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* 通用表单标签 */
.form-label {
    display: block;
    font-size: 13px;
    color: #666;
    font-weight: 500;
    margin-bottom: 6px;
}

/* 筛选区域内的 .form-control 紧凑化 */
.search-form .form-control,
.filter-bar .form-control {
    padding: 6px 10px;
}

.form-control:focus,
.form-input:focus {
    border-color: #667eea;
}

select.form-control {
    background: #fff;
    cursor: pointer;
}

textarea.form-control {
    width: 100%;
    min-height: 100px;
    resize: vertical;
}

/* ===== Toast 提示 ===== */
.toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.toast.show    { opacity: 1; }
.toast.success { background: #67c23a; }
.toast.error   { background: #f56c6c; }

/* ===== 加载状态 ===== */
.loading {
    text-align: center;
    padding: 40px;
    color: #999;
}

/* ===== 弹窗（兼容 modal-overlay 写法）===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active { display: flex; }

.modal-box {
    background: #fff;
    border-radius: 10px;
    max-width: 95vw;
    max-height: 88vh;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 等宽字体变量：用于代码、ID、数字场景 */
.font-mono,
code, pre, kbd, samp {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

/* ===== 标题层级 ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0;
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 13px; }
h6 { font-size: 12px; }

/* ===== 正文排版 ===== */
p { margin: 0 0 8px; }
a { color: #667eea; text-decoration: none; }
a:hover { color: #7c8ff0; }

/* 数字强调（统计卡片、金额等场景） */
.num, .stat-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    letter-spacing: -0.02em;
}

/* ===== 表单统一 ===== */
input, select, textarea, button {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
}

input::placeholder, textarea::placeholder {
    color: #c0c4cc;
}

/* ===== 表格容器 ===== */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== 表格基础 ===== */
.table,
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td,
.data-table th,
.data-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    vertical-align: middle;
}

.table th,
.data-table th {
    background: #f8f9fa;
    font-weight: 500;
    color: #909399;
    font-size: 12px;
    white-space: nowrap;
}

.table tbody tr:hover,
.data-table tbody tr:hover {
    background: #fafbfc;
}

/* 可点击行 */
.table tr.clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.table tr.clickable:hover {
    background: #f0f5ff;
}

/* 图片缩略图 */
.img-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

/* 内容截断（用于长文本列） */
.td-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
    cursor: default;
}

/* ===== 状态徽章 ===== */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* 待审核 / 待处理 */
.status-pending    { background: #fff7e6; color: #fa8c16; }
/* 已发布 / 在线 / 上架 / 正常 / 启用 / 成功 */
.status-published,
.status-online,
.status-normal,
.status-active,
.status-enabled,
.status-success    { background: #f0f9eb; color: #52c41a; }
/* 下线 / 拒绝 / 禁用 / 未启用 / 失败 */
.status-offline,
.status-rejected,
.status-disabled,
.status-inactive,
.status-fail       { background: #fef0f0; color: #f56c6c; }
/* 草稿 / 已取消 */
.status-draft,
.status-canceled   { background: #f5f5f5; color: #999; }
/* 处理中 */
.status-processing { background: #e6f7ff; color: #1890ff; }
/* 已解决 */
.status-resolved   { background: #f6ffed; color: #52c41a; }

/* ===== 通用徽章 ===== */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.badge-success { background: #f0f9eb; color: #67c23a; }
.badge-warning { background: #fdf6ec; color: #e6a23c; }
.badge-danger  { background: #fef0f0; color: #f56c6c; }
.badge-info    { background: #ecf5ff; color: #409eff; }
.badge-default { background: #f5f5f5; color: #bbb; }
.badge-cyan    { background: #e6fffb; color: #13c2c2; }

/* ===== 类型徽章 ===== */
.type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.type-badge.type-1,
.type-supply   { background: #e8f5e9; color: #4caf50; }
.type-badge.type-2,
.type-demand   { background: #e3f2fd; color: #2196f3; }
.type-badge.type-3 { background: #f6ffed; color: #52c41a; }

/* 余额日志类型 */
.type-recharge { background: #e8f5e9; color: #4caf50; }
.type-consume  { background: #fff3e0; color: #ff9800; }
.type-refund   { background: #e3f2fd; color: #2196f3; }
.type-adjust   { background: #fce4ec; color: #e91e63; }
.type-vip      { background: #e0f7fa; color: #0097a7; }

/* ===== 举报类型徽章 ===== */
.report-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    background: #f0f0f0;
    color: #666;
}

.report-type-badge.type-spam          { background: #fff1f0; color: #f5222d; }
.report-type-badge.type-fake          { background: #fff7e6; color: #fa8c16; }
.report-type-badge.type-infringement  { background: #e6f7ff; color: #1890ff; }
.report-type-badge.type-other         { background: #f5f5f5; color: #999; }

/* ===== 结果徽章 ===== */
.result-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.result-success { background: #f0faf0; color: #52c41a; }
.result-fail    { background: #fff1f0; color: #f44336; }

/* ===== 支付徽章 ===== */
.payment-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.payment-unpaid { background: #fdf6ec; color: #e6a23c; }
.payment-paid   { background: #f0f9eb; color: #67c23a; }

/* ===== VIP 标签 ===== */
.vip-tag,
.vip-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.vip-tag-0           { background: #f5f5f5; color: #ccc; }
.vip-tag-1,
.vip-badge-1         { background: linear-gradient(135deg, #f6d365, #fda085); color: #7c4a00; }
.vip-tag-2,
.vip-badge-2         { background: linear-gradient(135deg, #a18cd1, #fbc2eb); color: #4a1a7a; }
.vip-expired         { opacity: 0.45; text-decoration: line-through; }

/* ===== 认证标签 ===== */
.auth-type-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.att-personal   { background: #e6f7ff; color: #1890ff; }
.att-enterprise { background: #f6ffed; color: #52c41a; }
.att-none       { background: #f5f5f5; color: #bbb; }

/* ===== 置顶 / 弹窗标签 ===== */
.tag-top,
.top-badge {
    display: inline-block;
    padding: 1px 6px;
    background: #fff0f0;
    color: #f56c6c;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

.tag-popup {
    display: inline-block;
    padding: 1px 6px;
    background: #e6f7ff;
    color: #1890ff;
    border-radius: 3px;
    font-size: 11px;
    margin-left: 4px;
}

/* ===== 搜索日志标签 ===== */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.tag-supply { background: #dbeafe; color: #1e40af; }
.tag-demand { background: #fce7f3; color: #9a3412; }
.tag-all    { background: #e5e7eb; color: #374151; }

/* ===== 操作按钮组 ===== */
.action-btns {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

/* ===== 空状态 ===== */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: #bbb;
    font-size: 13px;
}

/* ===== 按钮统一 ===== */
.btn {
    display: inline-block;
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
    transition: all 0.2s;
    vertical-align: middle;
    font-family: inherit;
}

.btn:hover { opacity: 0.85; }

.btn-primary   { background: #667eea; color: #fff; }
.btn-primary:hover { background: #7c8ff0; opacity: 1; }

.btn-success   { background: #52c41a; color: #fff; }
.btn-success:hover { background: #73d13d; opacity: 1; }

.btn-warning   { background: #faad14; color: #fff; }
.btn-warning:hover { background: #ffc53d; opacity: 1; }

.btn-danger    { background: #f5222d; color: #fff; }
.btn-danger:hover { background: #ff7875; opacity: 1; }

.btn-info      { background: #909399; color: #fff; }
.btn-info:hover { background: #a6a9ad; opacity: 1; }

.btn-default   { background: #f0f0f0; color: #666; }
.btn-default:hover { background: #e8e8e8; opacity: 1; }

.btn-xs { padding: 2px 7px; font-size: 11px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ===== 操作按钮（act-btn 系列）===== */
.act-btn {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.6;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.25s;
    vertical-align: middle;
    margin-right: 4px;
    white-space: nowrap;
    font-family: inherit;
}

.act-btn:last-child { margin-right: 0; }
.act-btn:active { transform: scale(0.96); }

.act-btn-view      { background: #1890ff; color: #fff; }
.act-btn-view:hover { background: #40a9ff; }

.act-btn-edit      { background: #e6a23c; color: #fff; }
.act-btn-edit:hover { background: #eebe77; }

.act-btn-top       { background: #722ed1; color: #fff; }
.act-btn-top:hover  { background: #9254de; }

.act-btn-publish      { background: #52c41a; color: #fff; }
.act-btn-publish:hover { background: #73d13d; }

.act-btn-unpublish      { background: #909399; color: #fff; }
.act-btn-unpublish:hover { background: #a6a9ad; }

.act-btn-enable      { background: #13c2c2; color: #fff; }
.act-btn-enable:hover { background: #36cfc9; }

.act-btn-disable      { background: #fa8c16; color: #fff; }
.act-btn-disable:hover { background: #ffa940; }

.act-btn-delete      { background: #ff4d4f; color: #fff; }
.act-btn-delete:hover { background: #ff7875; }

.act-btn-default      { background: #faad14; color: #fff; }
.act-btn-default:hover { background: #ffc53d; }

/* ===== 弹窗标题统一 ===== */
.modal-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

/* ===== 侧边栏字体统一 ===== */
.sidebar {
    font-size: 14px;
}

.sidebar-header .logo {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.menu-item > a,
.sub-menu-item a {
    font-size: 13px;
}

/* ===== 分页统一 ===== */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    gap: 12px;
}

/* 总条数 */
.pagination-info,
.pagination > span:first-child {
    font-size: 13px;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 按钮容器 */
.pagination-buttons,
.pagination-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

/* 兼容所有按钮类名 */
.pagination-btn,
.page-btn,
.pagination-btns button,
.pagination-buttons button,
.pagination > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1;
    font-family: inherit;
}

.pagination-btn:hover,
.page-btn:hover,
.pagination-btns button:hover,
.pagination-buttons button:hover,
.pagination > button:hover {
    border-color: #667eea;
    color: #667eea;
}

.pagination-btn.active,
.page-btn.active,
.pagination-btns button.active,
.pagination-buttons button.active,
.pagination > button.active {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
    cursor: default;
}

.pagination-btn:disabled,
.page-btn:disabled,
.pagination-btns button:disabled,
.pagination-buttons button:disabled,
.pagination > button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

/* 省略号 */
.pagination span,
.pagination-btns span,
.pagination-buttons span {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: #ccc;
    font-size: 12px;
    user-select: none;
}

/* ===== 消息通知（页面级 toast） ===== */
.message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    z-index: 2000;
    animation: msgSlideDown 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    white-space: nowrap;
}

.message-success { background: #52c41a; }
.message-error   { background: #ff4d4f; }
.message-warning { background: #faad14; }

@keyframes msgSlideDown {
    from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

/* ===== 选项卡 ===== */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
}

.tab {
    padding: 10px 24px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
    user-select: none;
}

.tab:hover { color: #667eea; }

.tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    font-weight: 600;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ===== 错误 / 空状态提示 ===== */
.error-message {
    text-align: center;
    padding: 40px;
    color: #f56c6c;
}