/* =============================
   GoetheHub 样式表（中文注释）
   - 修正：浅色模式白字问题（按主题精确控制）
   - 优化：Darstellung 触发按钮去边框
   - 新增：Aurora 极光动态背景（简洁）
   - 保留：LiquidGlass、对齐系统、主题系统
   ============================= */

/* -------- 页面与主题变量 -------- */
:root {
  --page-pad-x: clamp(16px, 3vw, 32px);
  --page-max: 1320px;

  --radius: 18px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  /* 浅色（默认或 data-scheme=light） */
  --glass-bg: 255,255,255;
  --glass-alpha: 0.5;
  --glass-border: 0,0,0;
  --glass-border-alpha: 0.08;
  --text: #222;
  --text-muted: #5f697a;
  --bg: #f6f7fb;

  /* 主题主色（默认 Ventura） */
  --accent: #0a84ff;
  --accent-weak: rgba(10,132,255,.15);

  /* Aurora 背景用的三个色点（随 accent 变化） */
  --aurora-1: rgba(10,132,255,.35);
  --aurora-2: rgba(255,159,10,.25);
  --aurora-3: rgba(52,199,89,.22);
}
/* New*/
:root[data-bg="black"] { --bg: #000000; }
:root[data-bg="black"] .liquid-bg.aurora { display: none !important; }

/* 主题菜单选中态（背景按钮） */
.bg-btn.active { border-color: var(--accent) !important; color: var(--accent) !important; }

/* 强制浅色 */
[data-scheme="light"] {
  --glass-bg: 255,255,255;
  --glass-alpha: 0.5;
  --glass-border: 0,0,0;
  --glass-border-alpha: 0.08;
  --text: #222;
  --text-muted: #5f697a;
  --bg: #f6f7fb;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* 强制深色 */
[data-scheme="dark"] {
  --glass-bg: 20,20,24;
  --glass-alpha: 0.45;
  --glass-border: 255,255,255;
  --glass-border-alpha: 0.08;
  --text: #e5e7eb;
  --text-muted: #cfd5df;  /* 深色下的副文本（更高对比） */
  --bg: #0f1115;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Auto（未指定 data-scheme 时跟随系统） */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) {
    --glass-bg: 20,20,24;
    --glass-alpha: 0.45;
    --glass-border: 255,255,255;
    --glass-border-alpha: 0.08;
    --text: #e5e7eb;
    --text-muted: #cfd5df;
    --bg: #0f1115;
    --shadow: 0 10px 40px rgba(0,0,0,.35);
  }
}

/* -------- Ventura 风格 accent 主题 -------- */
:root, [data-accent="ventura"] {
  --accent: #0a84ff;
  --accent-weak: rgba(10,132,255,.15);
  --aurora-1: rgba(10,132,255,.35);
  --aurora-2: rgba(255,159,10,.25);
  --aurora-3: rgba(52,199,89,.22);
}
[data-accent="orange"] {
  --accent: #ff9f0a;  --accent-weak: rgba(255,159,10,.18);
  --aurora-1: rgba(255,159,10,.35);
  --aurora-2: rgba(255,69,58,.22);
  --aurora-3: rgba(175,82,222,.20);
}
[data-accent="mint"] {
  --accent: #30d158;  --accent-weak: rgba(48,209,88,.18);
  --aurora-1: rgba(48,209,88,.35);
  --aurora-2: rgba(10,132,255,.20);
  --aurora-3: rgba(94,92,230,.18);
}
[data-accent="lavender"] {
  --accent: #8e8cf0;  --accent-weak: rgba(142,140,240,.18);
  --aurora-1: rgba(142,140,240,.32);
  --aurora-2: rgba(255,55,95,.20);
  --aurora-3: rgba(52,199,89,.18);
}
[data-accent="rose"] {
  --accent: #ff375f;  --accent-weak: rgba(255,55,95,.18);
  --aurora-1: rgba(255,55,95,.35);
  --aurora-2: rgba(10,132,255,.20);
  --aurora-3: rgba(255,204,0,.18);
}
[data-accent="graphite"] {
  --accent: #8e8e93;  --accent-weak: rgba(142,142,147,.20);
  --aurora-1: rgba(142,142,147,.32);
  --aurora-2: rgba(99,99,102,.22);
  --aurora-3: rgba(48,209,88,.16);
}

/* -------- 基础排版与对齐 -------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "SF Pro Display", "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

/* 顶部栏与内容区“对齐” */
.navbar {
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid rgba(var(--glass-border), var(--glass-border-alpha));
  min-height: 60px;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
}
.page-frame {
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

/* -------- 动态背景：Aurora 极光 -------- */
/* 中文注释：1 个容器 + 3 层径向渐变，轻微漂移，简洁耐看，跟随主题色 */
.liquid-bg.aurora {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 40% at 15% 20%, var(--aurora-1), transparent 60%),
    radial-gradient(35% 35% at 85% 25%, var(--aurora-2), transparent 60%),
    radial-gradient(45% 45% at 60% 80%, var(--aurora-3), transparent 60%);
  filter: blur(40px);
  animation: aurora-move 30s ease-in-out infinite alternate;
}
@keyframes aurora-move {
  0%   { transform: translate3d(0, 0, 0) scale(1);   opacity: .55; }
  50%  { transform: translate3d(1.5%, -1.5%, 0) scale(1.04); opacity: .6; }
  100% { transform: translate3d(-1%, 1%, 0) scale(1.02);     opacity: .55; }
}

/* -------- 玻璃化通用 -------- */
.glass {
  background: rgba(var(--glass-bg), var(--glass-alpha));
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(var(--glass-border), var(--glass-border-alpha));
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.card-like { border-radius: var(--radius-lg); }

/* -------- 侧栏 -------- */
.sidebar { width: 260px; height: 100vh; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; border-right: 1px solid rgba(var(--glass-border), var(--glass-border-alpha)); transition: width .28s ease; overflow: hidden auto; }
.sidebar-header { padding: 16px 14px; border-bottom: 1px solid rgba(var(--glass-border), var(--glass-border-alpha)); }
.sidebar .brand-text { vertical-align: middle; }
.sidebar-nav { padding: 10px 8px 18px; margin: 0; list-style: none; }
.sidebar .nav-link { color: var(--text); padding: 10px 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; transition: all .2s ease; white-space: nowrap; }
.sidebar .nav-link i.bi { font-size: 1.1rem; }
.sidebar .nav-link:hover { background: var(--accent-weak); color: var(--accent); }
.sidebar .nav-link.active { background: linear-gradient(180deg, rgba(0,122,255,.18), rgba(0,122,255,.12)); color: var(--accent); border: 1px solid rgba(0,122,255,.25); }
.submenu { margin: 6px 0 6px 16px; border-left: 1px dashed rgba(var(--glass-border), .35); padding-left: 12px; }
.submenu .nav-link { font-size: .95rem; padding: 8px 10px; border-radius: 8px; }
.caret { transition: transform .2s ease; }
a[aria-expanded="true"] .caret { transform: rotate(90deg); }
.sidebar.collapsed { width: 78px; }
.sidebar.collapsed .brand-text { display: none; }
.sidebar.collapsed .submenu { display: none !important; }
.sidebar.collapsed .nav-link span { display: none; }
.sidebar.collapsed .nav-link { justify-content: center; }

/* 滚动条 */
.sidebar::-webkit-scrollbar, body::-webkit-scrollbar { width: 10px; height: 10px; }
.sidebar::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgba(100,100,120,.22); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* 主内容区与侧栏联动 */
.main-content { margin-left: 260px; transition: margin-left .28s ease; }
.main-content.collapsed { margin-left: 78px; }

/* 链接用主题色 */
#content-area a { color: var(--accent); }
#content-area a:hover { opacity: .92; }

/* -------- 关键修复：浅/深模式下的副文本颜色 -------- */
/* 浅色主题：次文本使用 text-muted，高对比 */
:root[data-scheme="light"] .text-body-secondary { color: var(--text-muted) !important; }
/* 深色主题（强制或自动深色）：次文本提亮但非纯白 */
:root[data-scheme="dark"] .text-body-secondary { color: #cfd5df !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) .text-body-secondary { color: #cfd5df !important; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-scheme]) .text-body-secondary { color: var(--text-muted) !important; }
}

/* 顶部时间颜色跟随主题主文本 */
#datetime { color: var(--text) !important; opacity: .92; }

/* 表格玻璃化 */
.glass .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: rgba(var(--glass-border), var(--glass-border-alpha));
  --bs-table-hover-bg: rgba(255,255,255,.06);
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-striped-color: var(--text);
}
.glass .table thead th {
  border-bottom-color: rgba(var(--glass-border), var(--glass-border-alpha));
  font-weight: 600;
}

/* 角色/订阅彩色徽章（Admin 用户列表） */
.badge-pill { border-radius: 999px; padding: .35rem .6rem; font-weight: 600; }
.tag-role-student { background: rgba(52,199,89,.18); color: #2f8a44; border: 1px solid rgba(52,199,89,.35); }
.tag-role-teacher { background: rgba(142,140,240,.20); color: #605bd1; border: 1px solid rgba(142,140,240,.35); }
.tag-role-admin { background: rgba(255,159,10,.20); color: #b36900; border: 1px solid rgba(255,159,10,.35); }
.tag-role-root { background: rgba(255,55,95,.22); color: #b01834; border: 1px solid rgba(255,55,95,.35); }
.tag-sub-standard { background: rgba(142,142,147,.20); color: #4a4a4a; border: 1px solid rgba(142,142,147,.35); }
.tag-sub-plus     { background: rgba(10,132,255,.18); color: #0a84ff; border: 1px solid rgba(10,132,255,.35); }
.tag-sub-pro      { background: rgba(175,82,222,.20); color: #7b2db3; border: 1px solid rgba(175,82,222,.35); }

/* -------- 主题菜单 & 触发按钮（去边框） -------- */
/* 无边框的 icon 按钮 */
.theme-trigger {
  border: none !important;
  background: transparent !important;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 10px;
  line-height: 1;
}
.theme-trigger:hover { background: var(--accent-weak); }
.theme-trigger:focus, .theme-trigger:active { box-shadow: none !important; outline: none !important; }

/* 主题菜单里的选中态更明显一些 */
.scheme-btn.active { border-color: var(--accent) !important; color: var(--accent) !important; }

/* 色块 */
.theme-menu .theme-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(var(--glass-border), var(--glass-border-alpha));
  display: inline-block; cursor: pointer;
}
.theme-swatch[data-accent="ventura"]  { background: linear-gradient(135deg, #0a84ff, #34c759); }
.theme-swatch[data-accent="orange"]   { background: linear-gradient(135deg, #ff9f0a, #ff375f); }
.theme-swatch[data-accent="mint"]     { background: linear-gradient(135deg, #30d158, #0a84ff); }
.theme-swatch[data-accent="lavender"] { background: linear-gradient(135deg, #8e8cf0, #ff9f0a); }
.theme-swatch[data-accent="rose"]     { background: linear-gradient(135deg, #ff375f, #ffcc00); }
.theme-swatch[data-accent="graphite"] { background: linear-gradient(135deg, #8e8e93, #636366); }

/* -------- 响应式 -------- */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .28s ease, width .28s ease; }
  .sidebar.show { transform: translateX(0); }
  .main-content, .main-content.collapsed { margin-left: 0; }
}

/* 无动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}