﻿/* ============================================================
   sa-themes.css - 晚晚聚合系统多皮肤切换
   主题：original(原版靛蓝默认) / lavender(薰衣草) / cute(粉嫩嫩) / elegant(莫兰迪) / peach(樱花蜜桃) / dark(暗夜)
   ============================================================ */

/* ---------- 原版靛蓝（默认） ---------- */
:root, html[data-theme="original"] {
  --sa-primary: #6366f1;
  --sa-primary-2: #8b5cf6;
  --sa-bg: #f1f5f9;
  --sa-text: #1e293b;
  --sa-muted: #64748b;
  --lg-primary: #6366f1;
  --lg-primary-2: #8b5cf6;
  --lg-text: #1e293b;
  --lg-muted: #64748b;
  --sa-hover-bg: #eef2ff;
  --sa-border: #e2e8f0;
  --sa-soft-bg: #f8fafc;
  --sa-divider: #eef2f7;
  --sa-shadow: rgba(99, 102, 241, .3);
}
html[data-theme="original"] .sa-stat-blue    { background: linear-gradient(135deg, #3b82f6, #6366f1) !important; }
html[data-theme="original"] .sa-stat-red     { background: linear-gradient(135deg, #f43f5e, #ec4899) !important; }
html[data-theme="original"] .sa-stat-green     { background: linear-gradient(135deg, #10b981, #14b8a6) !important; }
html[data-theme="original"] .sa-stat-purple    { background: linear-gradient(135deg, #8b5cf6, #a855f7) !important; }

/* ---------- 薰衣草紫 ---------- */
html[data-theme="lavender"] {
  --sa-primary: #7c6bd6;
  --sa-primary-2: #a78bfa;
  --sa-bg: #f8f7ff;
  --sa-text: #2e1065;
  --sa-muted: #a5a0c8;
  --lg-primary: #7c6bd6;
  --lg-primary-2: #a78bfa;
  --lg-text: #2e1065;
  --lg-muted: #a5a0c8;
  --sa-hover-bg: #ede9fe;
  --sa-border: #ddd6fe;
  --sa-soft-bg: #f5f3ff;
  --sa-divider: #ede9fe;
  --sa-shadow: rgba(124, 107, 214, .3);
}
html[data-theme="lavender"] .sa-stat-blue    { background: linear-gradient(135deg, #7c6bd6, #6d5bd0) !important; }
html[data-theme="lavender"] .sa-stat-red   { background: linear-gradient(135deg, #c4b5fd, #a78bfa) !important; }
html[data-theme="lavender"] .sa-stat-green  { background: linear-gradient(135deg, #a5b4fc, #818cf8) !important; }
html[data-theme="lavender"] .sa-stat-purple { background: linear-gradient(135deg, #a78bfa, #c4b5fd) !important; }

/* ---------- 粉嫩嫩可爱风 ---------- */
html[data-theme="cute"] {
  --sa-primary: #f472b6;
  --sa-primary-2: #c084fc;
  --sa-bg: #fff0f6;
  --sa-text: #9d174d;
  --sa-muted: #d4a5b8;
  --lg-primary: #f472b6;
  --lg-primary-2: #c084fc;
  --lg-text: #9d174d;
  --lg-muted: #d4a5b8;
  --sa-hover-bg: #fce7f3;
  --sa-border: #fbcfe8;
  --sa-soft-bg: #fdf2f8;
  --sa-divider: #fce7f3;
  --sa-shadow: rgba(244, 114, 182, .3);
}
html[data-theme="cute"] .sa-stat-blue    { background: linear-gradient(135deg, #c084fc, #f472b6) !important; }
html[data-theme="cute"] .sa-stat-red     { background: linear-gradient(135deg, #fda4af, #f472b6) !important; }
html[data-theme="cute"] .sa-stat-green    { background: linear-gradient(135deg, #86efac, #a7f3d0) !important; }
html[data-theme="cute"] .sa-stat-purple   { background: linear-gradient(135deg, #f9a8d4, #c084fc) !important; }

/* ---------- 莫兰迪高级 ---------- */
html[data-theme="elegant"] {
  --sa-primary: #8b7cc8;
  --sa-primary-2: #b8a9d9;
  --sa-bg: #f6f5f8;
  --sa-text: #3d3550;
  --sa-muted: #9a94a8;
  --lg-primary: #8b7cc8;
  --lg-primary-2: #b8a9d9;
  --lg-text: #3d3550;
  --lg-muted: #9a94a8;
  --sa-hover-bg: #ede9f5;
  --sa-border: #dcd8e5;
  --sa-soft-bg: #f5f4f8;
  --sa-divider: #ede9f5;
  --sa-shadow: rgba(139, 124, 200, .25);
}
html[data-theme="elegant"] .sa-stat-blue   { background: linear-gradient(135deg, #8b7cc8, #6b5b95) !important; }
html[data-theme="elegant"] .sa-stat-red   { background: linear-gradient(135deg, #c9a0a0, #b89595) !important; }
html[data-theme="elegant"] .sa-stat-green  { background: linear-gradient(135deg, #9db8b0, #a8c0c0) !important; }
html[data-theme="elegant"] .sa-stat-purple { background: linear-gradient(135deg, #b8a9d9, #9d8bb8) !important; }

/* ---------- 樱花蜜桃 ---------- */
html[data-theme="peach"] {
  --sa-primary: #fb7185;
  --sa-primary-2: #fbbf24;
  --sa-bg: #fff5f0;
  --sa-text: #7c2d12;
  --sa-muted: #d4a5a5;
  --lg-primary: #fb7185;
  --lg-primary-2: #fbbf24;
  --lg-text: #7c2d12;
  --lg-muted: #d4a5a5;
  --sa-hover-bg: #ffe4e6;
  --sa-border: #fecdd3;
  --sa-soft-bg: #fff1f2;
  --sa-divider: #ffe4e6;
  --sa-shadow: rgba(251, 113, 133, .3);
}
html[data-theme="peach"] .sa-stat-blue   { background: linear-gradient(135deg, #fb7185, #f472b6) !important; }
html[data-theme="peach"] .sa-stat-red    { background: linear-gradient(135deg, #fbbf24, #fb923c) !important; }
html[data-theme="peach"] .sa-stat-green  { background: linear-gradient(135deg, #34d399, #6ee7b7) !important; }
html[data-theme="peach"] .sa-stat-purple { background: linear-gradient(135deg, #f472b6, #c084fc) !important; }

/* ---------- 暗夜紫黑 ---------- */
html[data-theme="dark"] {
  --sa-primary: #a855f7;
  --sa-primary-2: #e879f9;
  --sa-bg: #16121f;
  --sa-text: #f0e6ff;
  --sa-muted: #8b7bb0;
  --lg-primary: #a855f7;
  --lg-primary-2: #e879f9;
  --lg-text: #f0e6ff;
  --lg-muted: #8b7bb0;
}
html[data-theme="dark"] body.sa-body { background: #16121f; color: #f0e6ff; }
html[data-theme="dark"] .sa-sidebar,
html[data-theme="dark"] .sa-topbar { background: #1f1a2e; border-color: #2d2440; }
html[data-theme="dark"] .sa-card,
html[data-theme="dark"] .login-card { background: #1f1a2e; color: #f0e6ff; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
html[data-theme="dark"] .announcement-box { background: #16121f; border-color: #2d2440; color: #d4bfff; }
html[data-theme="dark"] .sa-nav-link { color: #b8a9d9; }
html[data-theme="dark"] .sa-nav-link:hover { background: #2d2440; color: #e879f9; }
html[data-theme="dark"] .sa-nav-title { color: #6b5b8a; }
html[data-theme="dark"] .sa-user-name { color: #f0e6ff; }
html[data-theme="dark"] .sa-page-title { color: #f0e6ff; }
html[data-theme="dark"] .sa-card-header h5 { color: #f0e6ff; }
html[data-theme="dark"] .login-card .form-control { background: #16121f; border-color: #2d2440; color: #f0e6ff; }
html[data-theme="dark"] .sa-stat-blue   { background: linear-gradient(135deg, #a855f7, #7c3aed) !important; }
html[data-theme="dark"] .sa-stat-red    { background: linear-gradient(135deg, #ec4899, #db2777) !important; }
html[data-theme="dark"] .sa-stat-green  { background: linear-gradient(135deg, #2dd4bf, #06b6d4) !important; }
html[data-theme="dark"] .sa-stat-purple { background: linear-gradient(135deg, #d946ef, #a855f7) !important; }

/* ============================================================
   皮肤切换器 UI
   ============================================================ */
.sa-theme-btn {
  border: none;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 16px;
  cursor: pointer;
  color: var(--sa-muted, #a5a0c8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, transform .15s;
}
.sa-theme-btn:hover { background: rgba(168,85,247,.12); color: var(--sa-primary, #7c6bd6); transform: translateY(-1px); }

.sa-avatar { overflow: hidden; }
.sa-avatar img.sa-qq-avatar {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.sa-avatar.has-qq-avatar { display: block; padding: 0; }

.sa-theme-panel {
  position: absolute;
  top: 56px;
  right: 22px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  padding: 14px;
  width: 200px;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.sa-theme-panel.show { opacity: 1; visibility: visible; transform: translateY(0); }
.sa-theme-panel-title { font-size: 12px; color: #94a3b8; letter-spacing: 1px; margin: 0 0 10px 4px; }
.sa-theme-item {
  display: flex; align-items: center; padding: 9px 10px;
  border-radius: 10px; cursor: pointer; font-size: 13.5px;
  color: #475569; transition: background .15s;
}
.sa-theme-item:hover { background: #f5f3ff; }
.sa-theme-item.active { background: #ede9fe; color: #7c6bd6; font-weight: 600; }
.sa-theme-dot { width: 26px; height: 26px; border-radius: 8px; margin-right: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.sa-custom-item { border-bottom: 1px dashed #e2e8f0; margin-bottom: 6px; padding-bottom: 12px; }
.sa-custom-dot { background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red); }
.sa-custom-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.sa-custom-picker input[type="color"]::-webkit-color-swatch { border: 2px solid #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }

html[data-theme="dark"] .sa-theme-panel { background: #1f1a2e; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
html[data-theme="dark"] .sa-theme-panel-title { color: #8b7bb0; }
html[data-theme="dark"] .sa-theme-item { color: #d4bfff; }
html[data-theme="dark"] .sa-theme-item:hover { background: #2d2440; }
html[data-theme="dark"] .sa-theme-item.active { background: #2d2440; color: #e879f9; }
html[data-theme="dark"] .sa-theme-btn { color: #8b7bb0; }
html[data-theme="dark"] .sa-theme-btn:hover { background: rgba(232,121,249,.15); color: #e879f9; }

/* ============================================================
   全局硬编码颜色覆盖——让所有类跟随主题变量
   ============================================================ */
.sa-nav-link:hover,
.sa-nav-link:focus,
.sa-user-list .dropdown-menu > li > a:hover,
.sa-user-role {
  background: var(--sa-hover-bg) !important;
  color: var(--sa-primary) !important;
}
.sa-nav-link .mdi { color: var(--sa-muted); }
.sa-nav-link:hover .mdi,
.sa-nav-link:focus .mdi { color: var(--sa-primary); }
.sa-sidebar { border-right-color: var(--sa-border) !important; }
.sa-brand, .sa-sidebar-footer { border-color: var(--sa-divider) !important; }
.announcement-box {
  border-color: var(--sa-border) !important;
  background: var(--sa-soft-bg) !important;
}
.login-card .form-control,
.sa-card .form-control {
  background: var(--sa-soft-bg) !important;
  border-color: var(--sa-border) !important;
}
.sa-brand a, .sa-avatar, .sa-nav-link.active, .btn-lg-primary {
  box-shadow: 0 8px 18px var(--sa-shadow) !important;
}
.sa-nav-title { color: var(--sa-muted) !important; }
.sa-sidebar-footer p { color: var(--sa-muted) !important; }
.login-card .form-control:focus {
  border-color: var(--sa-primary) !important;
  box-shadow: 0 0 0 3px var(--sa-shadow) !important;
}
