/* ============================================================
   界面主题切换器（Theme Switcher）
   通过覆盖 CSS 变量 + 关键渐变，整体改变前后台外观。
   由 <html data-accent data-mode data-density> 驱动，由
   Views/Shared/_ThemePanel.cshtml 控制。
   强调色：default(蓝) / cyan / green / purple / orange / red
   模式：   light / dark
   密度：   comfort / compact
   ============================================================ */

/* ---------- 强调色：覆盖主色变量（CSS 变量跟随 html 属性，优先级高于 :root） ---------- */
[data-accent="cyan"]   { --es-primary:#0ea5b7; --es-primary-dark:#0b8293; --es-primary-light:#e3fafc; --es-tech-grad:linear-gradient(120deg,#0ea5b7 0%,#22d3ee 45%,#0ea5b7 100%); }
[data-accent="green"]  { --es-primary:#16a34a; --es-primary-dark:#128a3e; --es-primary-light:#e6f7ef; --es-tech-grad:linear-gradient(120deg,#16a34a 0%,#22d3ee 45%,#34d399 100%); }
[data-accent="purple"] { --es-primary:#7c3aed; --es-primary-dark:#6d28d9; --es-primary-light:#f1e9ff; --es-tech-grad:linear-gradient(120deg,#7c3aed 0%,#22d3ee 45%,#a78bfa 100%); }
[data-accent="orange"] { --es-primary:#f97316; --es-primary-dark:#ea580c; --es-primary-light:#fff1e6; --es-tech-grad:linear-gradient(120deg,#f97316 0%,#22d3ee 45%,#fb923c 100%); }
[data-accent="red"]    { --es-primary:#e11d48; --es-primary-dark:#be123c; --es-primary-light:#ffeef2; --es-tech-grad:linear-gradient(120deg,#e11d48 0%,#22d3ee 45%,#fb7185 100%); }

/* 强调色：覆盖站点中写死的渐变（品牌标、Hero、主按钮、统计卡图标、区块标题条、渐变文字等） */
[data-accent] .es-brand-mark { background: linear-gradient(135deg, var(--es-primary), var(--es-primary-dark)) !important; }
[data-accent] .es-hero,
[data-accent] .es-course-hero { background: linear-gradient(120deg, var(--es-primary-dark) 0%, var(--es-primary) 45%, #22d3ee 100%) !important; }
[data-accent] .btn-primary,
[data-accent] body.es-front .btn-primary { background: linear-gradient(135deg, var(--es-primary), var(--es-primary-dark)) !important; }
[data-accent] .es-btn-register { background: linear-gradient(135deg, var(--es-primary), var(--es-primary-dark)) !important; }
[data-accent] .es-btn-go { background: linear-gradient(135deg, var(--es-primary), var(--es-primary-dark)) !important; }
[data-accent] .es-stat-card .es-stat-ic,
[data-accent] .es-list-row .es-lr-ic,
[data-accent] .es-learn-stage .es-stage-ic { background: linear-gradient(135deg, var(--es-primary), var(--es-primary-dark)) !important; }
[data-accent] .es-section-title::before { background: linear-gradient(180deg, var(--es-primary), var(--es-primary-dark)) !important; }
[data-accent] body.es-front .pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--es-primary), var(--es-primary-dark)) !important; }
[data-accent] .es-gradient-text { background: var(--es-tech-grad) !important; -webkit-background-clip: text; background-clip: text; }
[data-accent] .es-pill-tech { background: linear-gradient(135deg, rgba(var(--es-primary-rgb,109,93,252),.12), rgba(34,211,238,.14)); border-color: rgba(var(--es-primary-rgb,109,93,252),.18); }

/* ---------- 背景色：覆盖页面底色变量（置于暗黑段之前，暗黑模式优先） ---------- */
[data-bg="white"] { --es-bg:#ffffff; }
[data-bg="gray"]  { --es-bg:#e9edf2; }
[data-bg="warm"]  { --es-bg:#f6f0e4; }
[data-bg="blue"]  { --es-bg:#e7effa; }
[data-bg="white"] body, [data-bg="gray"] body,
[data-bg="warm"]  body, [data-bg="blue"] body { background: var(--es-bg); }

/* ---------- 模式：暗黑 ---------- */
[data-mode="dark"] {
    --es-bg: #0f141b;
    --es-text: #c7d0db;
    --es-text-sub: #8b97a6;
    --es-border: #26303d;
    --es-primary-light: #16202c;
    --es-shadow: 0 2px 12px rgba(0,0,0,.4);
    --es-shadow-hover: 0 12px 32px rgba(0,0,0,.5);
    --es-surface: #161d27;
    --es-surface-2: #131a23;
}
[data-mode="dark"] body { background: #0f141b; color: #c7d0db; }
[data-mode="dark"] .card,
[data-mode="dark"] .es-panel,
[data-mode="dark"] body.es-front .card,
[data-mode="dark"] body.es-front .es-panel { background: #161d27; border-color: #26303d; color: #c7d0db; }
[data-mode="dark"] .card-header,
[data-mode="dark"] body.es-front .card-header { background: #161d27; border-color: #26303d; color: #dbe2ea; }
[data-mode="dark"] .table,
[data-mode="dark"] body.es-front .table { background: #161d27; color: #c7d0db; }
[data-mode="dark"] .table thead th,
[data-mode="dark"] body.es-front .table thead th { background: #1c2530; color: #cdd5df; border-color: #2a3441; }
[data-mode="dark"] .table td,
[data-mode="dark"] .table th,
[data-mode="dark"] body.es-front .table td,
[data-mode="dark"] body.es-front .table th { border-color: #26303d; }
[data-mode="dark"] .table-hover tbody tr:hover,
[data-mode="dark"] body.es-front .table-hover tbody tr:hover { background: #1b2530; }
[data-mode="dark"] .es-topbar,
[data-mode="dark"] .es-adm-topbar { background: #121821 !important; border-bottom-color: #232c38 !important; box-shadow: none; }
[data-mode="dark"] .es-topbar .nav-link { color: #aab4c2; }
[data-mode="dark"] .es-topbar .nav-link:hover { color: var(--es-primary); background: var(--es-primary-light); }
[data-mode="dark"] .es-footer { background: #0c1117; color: #8b97a6; }
[data-mode="dark"] .es-footer h6 { color: #dbe2ea; }
[data-mode="dark"] .es-footer a { color: #8b97a6; }
[data-mode="dark"] .es-footer a:hover { color: #fff; }
[data-mode="dark"] .es-empty,
[data-mode="dark"] .es-empty-box { color: #8b97a6; background: #161d27; border-color: #26303d; }
[data-mode="dark"] .sidebar { background: #121821; }
[data-mode="dark"] .sidebar .nav-link { color: #aab4c2; }
[data-mode="dark"] .sidebar .nav-link:hover,
[data-mode="dark"] .sidebar .nav-link.active { color: var(--es-primary) !important; background: var(--es-primary-light); }
[data-mode="dark"] .form-control,
[data-mode="dark"] body.es-front .form-control { background: #0f141b; color: #c7d0db; border-color: #2a3441; }
[data-mode="dark"] .modal-content { background: #161d27; color: #c7d0db; }
[data-mode="dark"] .dropdown-menu { background: #161d27; border-color: #26303d; }
[data-mode="dark"] .dropdown-item { color: #c7d0db; }
[data-mode="dark"] .dropdown-item:hover { background: var(--es-primary-light); color: var(--es-primary); }
[data-mode="dark"] .alert-info { background: var(--es-primary-light); color: var(--es-primary); }
[data-mode="dark"] .alert-success { background: #16241d; color: #6ee7b7; }
[data-mode="dark"] pre, [data-mode="dark"] code { background: #0f141b; color: #c7d0db; }
[data-mode="dark"] .login-body .login-wrapper .card { background: rgba(22,29,39,.92); }
[data-mode="dark"] .login-body .card-body { color: #c7d0db; }

/* ---------- 密度：紧凑 ---------- */
[data-density="compact"] body { font-size: .84rem; }
[data-density="compact"] .card-body { padding: .75rem .9rem; }
[data-density="compact"] .es-panel .es-panel-body { padding: .85rem 1rem; }
[data-density="compact"] .table td,
[data-density="compact"] .table th { padding: .3rem .5rem; }
[data-density="compact"] .btn { padding: .25rem .6rem; }
[data-density="compact"] .btn-sm { padding: .2rem .5rem; }
[data-density="compact"] .es-topbar .nav-link { padding: .35rem .6rem !important; }
[data-density="compact"] .es-section-title { margin: .9rem 0 .7rem; font-size: 1.05rem; }
[data-density="compact"] body.es-front main[role="main"] { padding-top: 1rem; padding-bottom: 1.5rem; }
[data-density="compact"] .es-stat-card { padding: 1rem 1.1rem; }
[data-density="compact"] .es-list-row { padding: .7rem .9rem; }
[data-density="compact"] .es-mini-stat { padding: .85rem 1rem; }
[data-density="compact"] .form-group { margin-bottom: .6rem; }

/* ---------- 版式：宽屏 / 窄屏（仅 ≥1200px 生效，移动端不受影响） ---------- */
@media (min-width: 1200px) {
    [data-width="wide"] .es-topbar > .container,
    [data-width="wide"] main.container,
    [data-width="wide"] .es-footer > .container {
        max-width: 100% !important;
        width: 100% !important;
    }
    [data-width="narrow"] .es-topbar > .container,
    [data-width="narrow"] main.container,
    [data-width="narrow"] .es-footer > .container {
        max-width: 1180px !important;
        width: 1180px !important;
    }
}

/* ============================================================
   主题选择面板（悬浮调色板）
   ============================================================ */
.es-theme-panel { position: fixed; right: 16px; top: 72px; bottom: auto; z-index: 2000; font-family: inherit; }
.es-theme-fab {
    width: 46px; height: 46px; border-radius: 50%;
    border: none; cursor: pointer;
    background: linear-gradient(135deg, #8b7bff, #5b3fe0);
    color: #fff; font-size: 1.15rem;
    box-shadow: 0 6px 18px rgba(109,93,252,.5);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.es-theme-fab:hover { transform: scale(1.08) rotate(12deg); box-shadow: 0 10px 26px rgba(109,93,252,.6); }
.es-theme-pop {
    position: absolute; right: 0; top: 54px; bottom: auto;
    width: 268px;
    background: #fff; color: #2c3644;
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(20,40,90,.28);
    padding: 0 0 10px;
    display: none;
    animation: esThemePop .18s ease;
}
.es-theme-pop[hidden] { display: none; }
.es-theme-pop.show { display: block; }

/* 后台：圆球悬浮右下角。原「顶栏右上角正下方」(top:70px) 会压住页面右上角的功能按钮
   （课程/试卷/问卷管理等页的「新建」按钮恰在同一位置），故移至右下角（与前台一致），弹层向上展开 */
body.es-admin .es-theme-panel { top: auto; bottom: 26px; right: 18px; }
body.es-admin .es-theme-pop { top: auto; bottom: 56px; animation: esThemePopUp .18s ease; }
@keyframes esThemePopUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes esThemePop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.es-theme-pop-h {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem .9rem; font-weight: 700; font-size: .92rem;
    border-bottom: 1px solid #eef1f5;
}
.es-theme-close { border: none; background: none; font-size: 1.2rem; line-height: 1; color: #9aa7b8; cursor: pointer; }
.es-theme-close:hover { color: #e11d48; }
.es-theme-sec { padding: .6rem .9rem .4rem; }
.es-theme-sec-t { font-size: .76rem; color: #8b97a6; font-weight: 600; margin-bottom: .5rem; letter-spacing: .03em; }
.es-theme-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.es-sw {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    border: 2px solid #fff;
    background: var(--sw);
    box-shadow: 0 0 0 1px #e3e8ef;
    position: relative; transition: transform .15s ease;
}
.es-sw:hover { transform: scale(1.12); }
.es-sw.active { box-shadow: 0 0 0 2px var(--sw); }
.es-sw.active::after {
    content: "\2713"; color: #fff; font-size: .8rem; font-weight: 700;
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.es-theme-toggle { display: flex; gap: 8px; }
.es-opt {
    flex: 1; padding: .4rem .5rem; border-radius: 9px; cursor: pointer;
    border: 1px solid #e3e8ef; background: #f7f9fc; color: #4a5568;
    font-size: .82rem; font-weight: 600; transition: all .15s ease;
}
.es-opt:hover { border-color: var(--es-primary); color: var(--es-primary); }
.es-opt.active { background: var(--es-primary); border-color: var(--es-primary); color: #fff; }
.es-theme-foot { display: flex; align-items: center; justify-content: space-between; padding: .5rem .9rem 0; }
.es-theme-reset {
    border: none; background: #f1f4f8; color: #6b7787; cursor: pointer;
    padding: .3rem .7rem; border-radius: 8px; font-size: .78rem; font-weight: 600;
}
.es-theme-reset:hover { background: #e7ecf3; color: #2c3644; }
.es-theme-status { font-size: .72rem; color: #8b97a6; }

/* ============================================================
   后台统一规范（2026-10-22）
   1) 所有后台页面基础字号统一 14pt（覆盖 site.css 中写死的较小字号）。
      排除图标字形(fa/i)以免改变图标尺寸；排除主题面板自身(subtree)以免撑破悬浮控件。
   2) 所有按钮：高度统一 31px、字号统一 14pt、垂直居中。
      排除主题面板的悬浮/重置/关闭按钮，避免破坏面板布局。
   置于文件末尾，优先级高于 density 等规则（同特异性时源码靠后胜出，
   并以 html 前缀 + !important 压过 [data-density=compact] body）。
   ============================================================ */

/* 后台基础字号 */
html body.es-admin { font-size: 13px; }

/* 后台所有文本统一 13px、常规字重（强制覆盖写死的小字号与粗体数据）。
   🔴 排除 .wb-* 工作台元素：SaaS 工作台有自己的数据层级（大数字、标题、
   胶囊、图表刻度），被这条 !important 压平后会失去视觉重点。
   🔴 排除 .rm-* 风险监盘卡片：卡片有风险值大数字、指标数值层级，
   同样不能被压平。两者都是页面专用前缀，其它后台页面不受影响。 */
html body.es-admin *:not(.fa):not(i):not(.es-theme-panel):not([class*="wb-"]):not([class*="rm-"]) {
    font-size: 13px !important;
    font-weight: normal !important;
}
/* 主题面板恢复其原有紧凑字号（不受上面的 13px 影响） */
html body.es-admin .es-theme-panel,
html body.es-admin .es-theme-panel * {
    font-size: revert !important;
}

/* 后台左侧菜单单独放大到 15px（覆盖上面的 13px 全局规则） */
html body.es-admin .sidebar,
html body.es-admin .sidebar * {
    font-size: 15px !important;
}

/* 后台所有按钮：高度 31px、字号 13px、垂直居中 */
body.es-admin .btn,
body.es-admin .es-btn-admin,
body.es-admin .layui-btn,
body.es-admin button:not(.es-theme-fab):not(.es-theme-reset):not(.es-theme-close),
body.es-admin input[type="submit"],
body.es-admin input[type="button"] {
    height: 31px !important;
    min-height: 31px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
    line-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* 暗黑模式下面板自身保持亮色可读 */
[data-mode="dark"] .es-theme-pop { background: #1b2530; color: #c7d0db; border: 1px solid #2a3441; }
[data-mode="dark"] .es-theme-pop-h { border-color: #2a3441; }
[data-mode="dark"] .es-theme-sec-t { color: #8b97a6; }
[data-mode="dark"] .es-opt { background: #0f141b; border-color: #2a3441; color: #c7d0db; }
[data-mode="dark"] .es-theme-reset { background: #0f141b; color: #8b97a6; }

/* ============================================================
   后台内容区 & 数据表格统一美化（2026-10-26）
   作用域 body.es-admin（含弹窗 _ModalLayout），覆盖所有后台页面；
   颜色走 --es-primary* 主题变量 + 中性灰半透明，浅色/暗黑模式均适配。
   ============================================================ */

/* ---- 页面标题：显式恢复标题层级（:not() 参数计入特异性，凑满 3 class 压过 13px 全局规则的 (0,3,3)） ---- */
html body.es-admin h1:not(.fa):not(i):not(.es-theme-panel) { font-size: 26px !important; }
html body.es-admin h2:not(.fa):not(i):not(.es-theme-panel) { font-size: 23px !important; }
html body.es-admin h3:not(.fa):not(i):not(.es-theme-panel) { font-size: 21px !important; }
html body.es-admin h4:not(.fa):not(i):not(.es-theme-panel) { font-size: 19px !important; }
html body.es-admin h1:not(.fa):not(i):not(.es-theme-panel),
html body.es-admin h2:not(.fa):not(i):not(.es-theme-panel),
html body.es-admin h3:not(.fa):not(i):not(.es-theme-panel),
html body.es-admin h4:not(.fa):not(i):not(.es-theme-panel) {
    font-weight: 600 !important;
    color: #1e293b;
    letter-spacing: .01em;
}

/* ---- 卡片容器 ---- */
body.es-admin .card {
    border: 1px solid rgba(100, 116, 139, .22);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
    overflow: hidden;
}
body.es-admin .card-header:not(.fa):not(i) {
    background: var(--es-primary-light);
    color: var(--es-primary);
    font-size: 14px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(100, 116, 139, .18);
    padding: .75rem 1.1rem;
}
body.es-admin .card-body { padding: 1.1rem; }

/* ---- 表格容器卡片化（裸表格也获得圆角/描边/阴影） ---- */
body.es-admin .table-responsive {
    background: #fff;
    border: 1px solid rgba(100, 116, 139, .22);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;   /* 首末行圆角由容器裁切 */
}

/* ---- 表头：主题浅色底 + 主题色文字 ---- */
body.es-admin .table thead th {
    background: var(--es-primary-light);
    color: var(--es-primary);
    font-weight: 600 !important;
    border-top: 0;
    border-bottom: 2px solid var(--es-primary);
    padding: .68rem .9rem;
    white-space: nowrap;
}

/* ---- 单元格：垂直居中、舒适行高、仅横向细分隔线 ---- */
body.es-admin .table td {
    vertical-align: middle;
    padding: .7rem .9rem;
    border-top: 1px solid rgba(100, 116, 139, .13);
    border-bottom: 0;
    color: #334155;
}
body.es-admin .table tbody tr:last-child td { border-bottom: 0; }
body.es-admin .table-hover tbody tr:hover td { background: var(--es-primary-light); }
body.es-admin .table td .btn { margin-right: 5px; }
body.es-admin .table td .btn:last-child { margin-right: 0; }

/* ---- 表格内操作按钮：小型胶囊 ---- */
body.es-admin .table .btn {
    border-radius: 999px;
    font-weight: 600;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
}

/* ---- 表单控件 ---- */
body.es-admin .form-control {
    border-radius: 8px;
    border-color: rgba(100, 116, 139, .32);
}
body.es-admin .form-control:focus {
    border-color: var(--es-primary);
    box-shadow: 0 0 0 3px var(--es-primary-light);
}

/* ---- 分页 ---- */
body.es-admin .pagination .page-link {
    border: 0;
    border-radius: 8px !important;
    margin: 0 2px;
    min-width: 30px;
    text-align: center;
    color: #475569;
    background: transparent;
    font-weight: 600;
}
body.es-admin .pagination .page-link:hover {
    background: var(--es-primary-light);
    color: var(--es-primary);
}
body.es-admin .pagination .page-item.active .page-link {
    background: var(--es-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
body.es-admin .pagination .page-item.disabled .page-link {
    color: #cbd5e1;
    background: transparent;
}

/* ---- 暗黑模式适配 ---- */
[data-mode="dark"] body.es-admin .card,
[data-mode="dark"] body.es-admin .table-responsive { background: #161d27; border-color: #2a3441; box-shadow: none; }
[data-mode="dark"] body.es-admin h1, [data-mode="dark"] body.es-admin h2,
[data-mode="dark"] body.es-admin h3, [data-mode="dark"] body.es-admin h4 { color: #e2e8f0; }
[data-mode="dark"] body.es-admin .table td { border-top-color: #26303d; color: #c7d0db; }
[data-mode="dark"] body.es-admin .pagination .page-link { color: #aeb8c4; }
[data-mode="dark"] body.es-admin .pagination .page-item.disabled .page-link { color: #4b5765; }
[data-mode="dark"] body.es-admin .form-control { background: #0f141b; border-color: #2a3441; color: #c7d0db; }