/* =======================================================
 * data.cucai.cn 审核面板 UI 修复 v3 (2026-04-21)
 * 核心修复：
 *   - 表头文字看不见（深主题下未定义变量 fallback 成白底 + 白字）
 *   - 相似文章面板字色与底板相近
 *   - Footer 遮挡
 *   - 表头滚动重叠
 * 站点主题：深蓝黑 (#0a1628) + 浅蓝白字 (#E3F2FD)
 * ======================================================= */

/* 1. 补齐站点缺失的 CSS 变量（主题色） */
:root {
    --color-bg-secondary: #0c1d3a;
    --color-bg-tertiary: #152844;
}

/* 2. Footer 避让（global） */
html, body { min-height: 100vh; }
body { padding-bottom: 60px !important; }
.main-content, .app-container { padding-bottom: 20px; box-sizing: border-box; }
.tab-panel { padding-bottom: 40px; }

/* 3. 分页/统计条避让 */
.pagination, .pagination-bar, .pagination-container,
[id$="Pagination"], [id*="pagination"],
.bg-history-pagination,
#reviewPagination, #discoveredPagination, #crawledPagination,
#bgHistoryPagination, #auditLogsPagination {
    margin-bottom: 24px !important;
    padding-bottom: 8px;
    color: var(--color-text) !important;
}
.pagination button, .pagination-bar button,
[id*="pagination"] button { color: var(--color-text) !important; }

/* 4. 所有表格 thead 强制深色背景 + 浅字（避免底板相近导致看不见） */
.review-table thead,
.admin-table thead,
.data-table thead,
.crawled-articles-list table thead,
table.list-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #1a3a66 !important;           /* 深海蓝表头 */
}
.review-table thead th,
.admin-table thead th,
.data-table thead th,
table.list-table thead th,
.review-table th,
.admin-table th {
    background: #1a3a66 !important;
    color: #E8F4FF !important;                /* 浅蓝白，确保可读 */
    font-weight: 600 !important;
    border-bottom: 2px solid #4a7fc8 !important;
    box-shadow: 0 4px 8px -4px rgba(0,0,0,0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.review-table tbody td,
.admin-table tbody td {
    color: var(--color-text) !important;      /* 确保单元格文字可见 */
}
.review-table tbody tr:first-child td,
.admin-table tbody tr:first-child td {
    padding-top: 10px !important;
}
.review-table tbody tr:hover,
.admin-table tbody tr:hover {
    background: rgba(66, 165, 245, 0.08) !important;
}

/* 5. "查看相似文章" 以及其他 list 面板文字对比 */
.similar-articles-list,
.similar-articles-list * {
    color: var(--color-text) !important;
    background: transparent;
}
.similar-articles-list .similar-item,
.similar-articles-list > div {
    background: var(--color-surface-solid, #0f2240) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    border-radius: 4px !important;
}
.similar-articles-list .title,
.similar-articles-list a,
.similar-articles-list h5, .similar-articles-list h6 {
    color: #64B5F6 !important;
}

/* 6. 滚动容器限高 */
.review-table-wrapper {
    max-height: calc(100vh - 440px) !important;
    min-height: 280px !important;
    overflow-y: auto !important;
    position: relative;
    contain: paint;
}
.crawled-articles-list,
.similar-articles-list,
.admin-panel-table-wrapper {
    max-height: calc(100vh - 360px);
}
.similar-articles-list {
    max-height: 300px;
    overflow-y: auto;
}

/* 7. 子 tab 面板留白 */
#panel-datamanage .sub-tab-panel { padding-bottom: 20px; }
#subpanel-discovered, #subpanel-crawled { padding-bottom: 60px; }

/* ==========================================================
 *  审核详情编辑器（article_review_editor.js）- 主题适配
 * ========================================================== */

.are-overlay {
    position: fixed; inset: 0; background: rgba(5,15,35,0.75);
    backdrop-filter: blur(4px); z-index: 10000;
    display: none; align-items: center; justify-content: center;
    animation: are-fade .2s ease;
}
.are-overlay.open { display: flex !important; }
@keyframes are-fade { from{opacity:0} to{opacity:1} }
@keyframes are-slide { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.are-card {
    background: var(--color-surface-solid, #0f2240); width: 94%; max-width: 1080px; max-height: 92vh;
    border-radius: 12px; border: 1px solid var(--color-border);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6); overflow: hidden;
    display: flex; flex-direction: column; animation: are-slide .22s ease;
    color: var(--color-text);
}
.are-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px; border-bottom:1px solid var(--color-border);
    background: #1a3a66;
}
.are-header h3 { margin:0; font-size:16px; color: #E8F4FF; font-weight:600; }
.are-close {
    background: transparent; border: none; font-size: 22px;
    cursor: pointer; padding: 4px 12px; border-radius: 4px;
    color: #E8F4FF;
}
.are-close:hover { background: rgba(255,255,255,0.1); }
.are-body {
    flex: 1; overflow: auto; padding: 20px 24px;
    display: grid; grid-template-columns: 1fr; gap: 16px;
    background: var(--color-surface-solid);
}
.are-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.are-field { display: flex; flex-direction: column; gap: 4px; }
.are-field label {
    font-size: 12px; color: #90CAF9;
    font-weight: 500; letter-spacing: 0.5px;
}
.are-field input, .are-field textarea, .are-field select {
    padding: 8px 10px; border: 1px solid var(--color-border);
    border-radius: 4px; background: #071530;
    color: var(--color-text); font-size: 13px; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.are-field textarea { min-height: 180px; line-height: 1.7; resize: vertical; width: 100%; font-size: 14px; }
/* 正文独占整行 + 更高 */
.are-field.full { grid-column: 1 / -1; }
.are-field.full textarea { min-height: 360px; font-family: "Segoe UI", system-ui, sans-serif; }
.are-body { grid-template-columns: 1fr !important; }  /* 审核编辑一列布局，textarea 用全宽 */
.are-grid-2 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }

/* 重复文章聚合面板 */
.are-duplicates {
    border: 1px dashed #FFB74D;
    background: rgba(255, 152, 0, 0.08);
    border-radius: 6px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.are-duplicates h4 {
    margin: 0; font-size: 12px; color: #FFB74D;
    letter-spacing: 1px; text-transform: uppercase;
}
.are-dup-row {
    display: flex; gap: 10px; align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border); border-radius: 4px;
    padding: 8px 10px; font-size: 12px;
}
.are-dup-row .dup-id { color: #90CAF9; font-weight: 600; min-width: 80px; }
.are-dup-row .dup-title { flex: 1; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.are-dup-row .dup-btns { display: flex; gap: 4px; }
.are-dup-row button { padding: 3px 10px; font-size: 11px; border-radius: 3px; cursor: pointer; border: 1px solid transparent; }
.are-dup-row .btn-open { background: transparent; color: #64B5F6; border-color: #64B5F6; }
.are-dup-row .btn-del { background: transparent; color: #FF8A80; border-color: #FF8A80; }
.are-field input:focus, .are-field textarea:focus, .are-field select:focus {
    outline: none; border-color: var(--color-primary-light, #42A5F5);
    box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.25);
}
.are-field select option {
    background: #0f2240; color: var(--color-text);
}

/* tags chips */
.are-tags { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0; }
.are-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(66, 165, 245, 0.15);
    color: #E3F2FD; padding: 3px 10px 3px 12px;
    border-radius: 12px; font-size: 12px;
    border: 1px solid rgba(66, 165, 245, 0.4);
}
.are-chip .x {
    background: none; border: none; cursor: pointer;
    color: #FF8A80; font-size: 14px; padding: 0 2px; line-height: 1;
}
.are-chip.recommended {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    color: #B3E5FC;
    cursor: pointer;
}
.are-chip.recommended:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.are-pool-title { font-size: 11px; color: #90CAF9; margin: 8px 0 4px; letter-spacing: 1px; text-transform: uppercase; }

/* footer actions */
.are-footer {
    display: flex; gap: 10px; justify-content: space-between;
    padding: 12px 20px; border-top: 1px solid var(--color-border);
    background: #0c1d3a;
}
.are-footer .are-left { display:flex; gap:8px; }
.are-footer .are-right { display:flex; gap:8px; }
.are-btn {
    padding: 8px 18px; border-radius: 5px; border: 1px solid transparent;
    cursor: pointer; font-size: 13px; font-weight: 500;
    transition: transform .1s, box-shadow .15s;
}
.are-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); filter: brightness(1.08); }
.are-btn.primary { background: var(--color-primary, #1976d2); color: #fff; border-color: var(--color-primary, #1976d2); }
.are-btn.success { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.are-btn.danger { background: transparent; color: #FF8A80; border-color: #FF8A80; }
.are-btn.ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }

.are-toast {
    position: fixed; top: 20px; right: 20px; padding: 10px 18px;
    border-radius: 6px; font-size: 13px; color: #fff; z-index: 10001;
    animation: are-slide 0.22s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.are-toast.ok { background: #2e7d32; }
.are-toast.err { background: #b23a3a; }