/* 2026-10-29 list_class.php（分类管理）主题适配补丁
 * 文件：funnyai/css/list_class_dark.css
 *
 * 背景：2026-10-25 之前这个页面只加载本文件，把右侧 .class-main 强行刷成深色，
 *      左侧分类树 / 顶部分类管理标题 / 搜索栏全是浅色，整页"半黑半白"，
 *      而且页面根本没接入站点的统一暗黑模式（没有 dark_mode.css / dark_mode.js，
 *      没有右上角的 🌙 切换按钮）。
 *      2026-10-29 起本页接入 body.dark-mode 统一主题，本文件退居为补丁层。
 *
 * 本文件只处理两类问题：
 *   1) 结构差异（.class-main 深色下要有独立卡片底 + 表格不能溢出面板）
 *   2) 外部 CSS 里特异性比页面内联样式更高的浅色规则
 *      （common/css/default.css 的 a:link、common/css/table.css 的 #data th、
 *       common/css/table.css 的 #data td、office/css/list_office.css 的 table#data th 等），
 *      必须用 body.dark-mode / id 选择器提高特异性才能覆盖
 *
 * 配色沿用 common/css/dark_mode.css：
 *      背景 #0f172a → 卡片 #1e293b → hover #273449
 *      文字 #f1f5f9 / #cbd5e1 / #94a3b8，主色 #60a5fa / #93c5fd，边框 #334155
 */

/* ============================================================
 * 一、结构差异
 * ============================================================ */

/* 右侧主区：不再单独刷一层底色。
   原来（v20261025）这里写死 background:#0f172a + 边框，导致浅色模式下右侧也是黑的。
   现在浅色/深色都保持透明，由内部的表格（自带 border + border-radius）作为容器，
   和左侧分类树（同样是 var(--lo-card) + 边框）在视觉上对称。 */
.class-main {
    background: transparent;
    border: 0;
    padding: 0;
}

/* 表格容器：min-width:680px 的表格在窄容器里会穿出面板圆角，
   这里改成横向滚动，深浅色都不会溢出。
   2026-10-29：页面内联样式已把 table#data.list-class-table 的 min-width 归零，
   这里保留 overflow-x:auto 作为兜底。 */
.class-main .office-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
}

/* ============================================================
 * 二、暗色补丁：覆盖外部更高特异性的浅色规则
 * ============================================================ */

/* --- 2.1 面包屑
     .class-breadcrumb__item 是 <a>，dark_mode.css 的 `body.dark-mode a`（特异性 0,1,2）
     会盖掉页面内联的 .class-breadcrumb__item（0,1,0），这里提回来。 --- */
body.dark-mode .class-breadcrumb__sep { color: #475569; }
body.dark-mode .class-breadcrumb__current { color: #f1f5f9; }
body.dark-mode .class-breadcrumb__item { color: var(--lo-muted); }
body.dark-mode .class-breadcrumb__item:hover { color: #93c5fd; }

/* --- 2.2 分类树根节点（<a>，同理需要提回 --lo-text） --- */
body.dark-mode .class-tree__root { color: var(--lo-text); }
body.dark-mode .class-tree__root:hover { color: var(--lo-primary-600); }
body.dark-mode .class-tree__root.active { color: var(--lo-primary-600); }

/* --- 2.3 顶部 #toolbar 容器（list_office.css 里写死 rgba(255,255,255,0.8)） --- */
body.dark-mode #toolbar {
    background: rgba(30, 41, 59, 0.8);
    border-color: var(--dm-border);
}

/* --- 2.4 分类列表表格
     注意特异性：
       common/css/table.css   `#data th`            → (1,0,1) 背景 #42A7C9 + 2px 白色右边框
       office/css/list_office.css `table#data th`   → (1,0,2) 背景 var(--lo-table-zebra)
     下面用 body.dark-mode table#data.list-class-table th → (1,2,3) 稳定压过两者。 --- */
body.dark-mode table#data.list-class-table {
    background: var(--lo-card);
    border-color: var(--lo-border);
}
body.dark-mode table#data.list-class-table th {
    background: #273449;
    color: #f1f5f9;
    border-bottom-color: var(--dm-border);
    border-right-color: var(--dm-border);
}
body.dark-mode table#data.list-class-table td {
    color: #e2e8f0;
    border-bottom-color: var(--dm-border);
}
body.dark-mode table#data.list-class-table tr:hover td {
    background: var(--lo-row-hover-bg);
}

/* 模型列是裸 <a>，default.css 里 a:link{color:#0000cc} 暗底看不清，统一提亮 */
body.dark-mode .list-class-table td a { color: #93c5fd; }
body.dark-mode .list-class-table td a:hover { color: #bfdbfe; }
body.dark-mode .list-class-table .cls-actions a:hover { color: #bfdbfe; }

/* 排序徽标：淡紫底/深紫字 → 暗底浅蓝 */
body.dark-mode .list-class-table .cls-rank {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
}

/* --- 2.5 分页条（pagefoot.css 的 mj_pagefoot_green 是浅色系） --- */
body.dark-mode .mj_pagefoot_green a {
    color: #93c5fd;
    border-color: var(--dm-border);
    background: transparent;
}
body.dark-mode .mj_pagefoot_green a:hover {
    background-color: #334155;
    border-color: #475569;
    color: #f1f5f9;
}
body.dark-mode .mj_pagefoot_green span.current { color: #f1f5f9; }
body.dark-mode .mj_pagefoot_green span.info { color: #94a3b8; }

/* --- 2.6 拖拽 ghost：--lo-primary-600 在暗色下是浅蓝，白字看不清 --- */
body.dark-mode .class-tree__drag-ghost {
    background: #1d4ed8;
    color: #ffffff;
}

/* --- 2.7 移动端顶栏（common_layout.css / funnystore_layout.css 里写死 #fff） --- */
body.dark-mode .mobile-header {
    background: var(--lo-card);
    border-bottom-color: var(--lo-border);
}
body.dark-mode .btn-toggle-sidebar {
    background: var(--lo-btn-bg);
    border-color: var(--lo-btn-border);
    color: var(--lo-btn-text);
}