/* =====================================================================
   主题系统（一键换肤）- 小台搭建
   说明：本文件只定义 CSS 变量与各主题的取值，不直接改写 style.css 的
   选择器结构。style.css 与各模块 JS 中的品牌色已统一替换为 var(--xxx)，
   因此切换 [data-theme] 即可整体换肤。中性灰不参与换肤（保持各主题一致）。
   ===================================================================== */

/* ---------- 默认主题：专注蓝（与系统原配色一致） ---------- */
:root {
  --primary: #1890ff;
  --primary-light: #40a9ff;
  --primary-dark: #096dd9;
  --primary-50: #e6f7ff;
  --primary-100: #91d5ff;
  --primary-200: #bae7ff;

  --sidebar-bg: #001529;
  --sidebar-text: #ffffff;
  --sidebar-dim: rgba(255, 255, 255, 0.65);
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: rgba(24, 144, 255, 0.15);
  --sidebar-active-border: #1890ff;

  --on-primary: #ffffff;

  --bg-page: #f0f2f5;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --text-primary: #1a1a2e;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --border: #e8e8e8;
  --border-soft: #f0f0f0;

  --success: #52c41a;
  --success-light: #73d13d;
  --success-50: #f6ffed;
  --warning: #faad14;
  --warning-strong: #fa8c16;
  --warning-50: #fff7e6;
  --danger: #ff4d4f;
  --danger-light: #ff7875;
  --danger-50: #fff1f0;
  --purple: #722ed1;
  --purple-50: #f9f0ff;

  --focus-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
  --topbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ---------- 活力橙：元气满满，适合晨读/动员 ---------- */
[data-theme="orange"] {
  --primary: #ff7a45;
  --primary-light: #ffa940;
  --primary-dark: #d4380d;
  --primary-50: #fff6ef;
  --primary-100: #ffe0cc;
  --primary-200: #ffd1b3;

  --sidebar-bg: #2a1810;
  --sidebar-active-bg: rgba(255, 122, 69, 0.18);
  --sidebar-active-border: #ff7a45;

  --success: #52c41a;
  --purple: #722ed1;
  --focus-shadow: 0 0 0 2px rgba(255, 122, 69, 0.12);
  --topbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ---------- 治愈绿：平静舒缓，适合心理/谈话 ---------- */
[data-theme="green"] {
  --primary: #13c2c2;
  --primary-light: #36cfc9;
  --primary-dark: #08979c;
  --primary-50: #e6fffb;
  --primary-100: #b5f5ec;
  --primary-200: #87e8de;

  --sidebar-bg: #0f2a1e;
  --sidebar-active-bg: rgba(19, 194, 194, 0.18);
  --sidebar-active-border: #13c2c2;

  --success: #52c41a;
  --purple: #722ed1;
  --focus-shadow: 0 0 0 2px rgba(19, 194, 194, 0.12);
  --topbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ---------- 温柔紫：浪漫舒缓，适合晚间放松 ---------- */
[data-theme="purple"] {
  --primary: #722ed1;
  --primary-light: #9254de;
  --primary-dark: #531dab;
  --primary-50: #f9f0ff;
  --primary-100: #efdbff;
  --primary-200: #d3adf7;

  --sidebar-bg: #1e1430;
  --sidebar-active-bg: rgba(114, 46, 209, 0.2);
  --sidebar-active-border: #722ed1;

  --success: #52c41a;
  --purple: #722ed1;
  --focus-shadow: 0 0 0 2px rgba(114, 46, 209, 0.12);
  --topbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ---------- 夜间暗黑：护眼，适合深夜加班 ---------- */
[data-theme="dark"] {
  --primary: #1890ff;
  --primary-light: #40a9ff;
  --primary-dark: #096dd9;
  --primary-50: #11202e;
  --primary-100: #16344d;
  --primary-200: #1d4466;

  --sidebar-bg: #0f0f0f;
  --sidebar-text: #e8e8e8;
  --sidebar-dim: rgba(255, 255, 255, 0.55);
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active-bg: rgba(24, 144, 255, 0.22);
  --sidebar-active-border: #1890ff;

  --on-primary: #ffffff;

  --bg-page: #141414;
  --surface: #1f1f1f;
  --surface-2: #262626;
  --text-primary: #e8e8e8;
  --text-secondary: #a6a6a6;
  --text-tertiary: #7a7a7a;
  --border: #303030;
  --border-soft: #2a2a2a;

  --success: #73d13d;
  --success-light: #95de64;
  --success-50: #16231a;
  --warning: #ffc53d;
  --warning-strong: #ffa940;
  --warning-50: #2a2410;
  --danger: #ff7875;
  --danger-light: #ff9c99;
  --danger-50: #2a1717;
  --purple: #b37feb;
  --purple-50: #20162e;

  --focus-shadow: 0 0 0 2px rgba(24, 144, 255, 0.25);
  --topbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ---------- 暗黑模式：翻转主要面板与文字（中性灰在亮色主题保持原样） ---------- */
[data-theme="dark"] body {
  background: var(--bg-page);
  color: var(--text-primary);
}
[data-theme="dark"] .main { background: var(--bg-page); }
[data-theme="dark"] .topbar {
  background: var(--surface);
  box-shadow: var(--topbar-shadow);
}
[data-theme="dark"] .class-switch-bar,
[data-theme="dark"] .login-footer { border-color: var(--border); }
[data-theme="dark"] .card,
[data-theme="dark"] .collapse-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .quick-link,
[data-theme="dark"] .data-action-card,
[data-theme="dark"] .album-item,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .portal-card,
[data-theme="dark"] .login-box,
[data-theme="dark"] .teacher-photo-wrap,
[data-theme="dark"] .seat-cell,
[data-theme="dark"] .timetable th,
[data-theme="dark"] .timetable-cell {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="dark"] .data-table th {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="dark"] .data-table td { border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .data-table tr:hover td { background: var(--surface-2); }
[data-theme="dark"] .filter-bar input,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .status-btn,
[data-theme="dark"] .class-switch-bar #classSelector {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="dark"] .btn { background: var(--surface-2); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .btn:hover { color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .class-info h2,
[data-theme="dark"] .card-title,
[data-theme="dark"] .quick-link span,
[data-theme="dark"] .data-action-card h4,
[data-theme="dark"] .album-item-title,
[data-theme="dark"] .tl-title,
[data-theme="dark"] .portal-card-title,
[data-theme="dark"] .portal-card-desc { color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover { background: var(--surface-2); }
[data-theme="dark"] .nav-title { color: var(--text-tertiary); }
[data-theme="dark"] .stat-card .stat-label,
[data-theme="dark"] .stat-card .stat-sub { color: var(--text-tertiary); }
[data-theme="dark"] .empty-state,
[data-theme="dark"] .portal-announce-empty { color: var(--text-tertiary); }
[data-theme="dark"] .modal-close:hover { color: var(--text-primary); }
[data-theme="dark"] .toast { background: #333; }

/* =====================================================================
   主题切换器（调色盘）UI
   ===================================================================== */
.theme-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.theme-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.theme-switcher-btn:hover { border-color: var(--primary); color: var(--primary); }
.theme-switcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  padding: 12px;
  display: none;
  width: 232px;
}
[data-theme="dark"] .theme-switcher-panel { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); }
.theme-switcher-panel.show { display: block; }
.theme-switcher-title {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  font-weight: 600;
}
.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.theme-option:hover { background: var(--surface-2); }
.theme-option.active { background: var(--primary-50); }
[data-theme="dark"] .theme-option.active { background: var(--primary-50); }
.theme-option-dots { display: flex; gap: 3px; flex-shrink: 0; }
.theme-option-dots i {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-option-name { font-size: 13px; color: var(--text-primary); flex: 1; }
.theme-option-mood { font-size: 11px; color: var(--text-tertiary); }
.theme-option-check { color: var(--primary); font-size: 13px; opacity: 0; }
.theme-option.active .theme-option-check { opacity: 1; }