/* ============================================================
   PolyChat Admin — 亮色主题覆盖
   暗色为默认，html.light 激活时切换到亮色
   ============================================================ */

/* ---------- 页面级背景 ---------- */
html.light body.bg-slate-900,
html.light .bg-slate-900 {
  background-color: #f1f5f9 !important; /* slate-100 */
}
html.light .bg-slate-800 {
  background-color: #ffffff !important;
}
html.light .bg-slate-700 {
  background-color: #e2e8f0 !important; /* slate-200 */
}

/* 带透明度的背景 */
html.light .bg-slate-900\/80 {
  background-color: rgba(255,255,255,0.85) !important;
}
html.light .bg-slate-900\/60 {
  background-color: rgba(241,245,249,0.7) !important;
}
html.light .bg-slate-800\/80 {
  background-color: rgba(255,255,255,0.85) !important;
}
html.light .bg-slate-800\/60 {
  background-color: rgba(241,245,249,0.7) !important;
}
html.light .bg-slate-800\/50 {
  background-color: rgba(241,245,249,0.6) !important;
}
html.light .bg-slate-800\/40 {
  background-color: rgba(241,245,249,0.5) !important;
}
html.light .bg-slate-700\/50 {
  background-color: rgba(226,232,240,0.6) !important;
}

/* ---------- 文字颜色 ---------- */
html.light .text-slate-100 {
  color: #0f172a !important; /* slate-900 */
}
html.light .text-slate-200 {
  color: #1e293b !important; /* slate-800 */
}
html.light .text-slate-300 {
  color: #334155 !important; /* slate-700 */
}
html.light .text-slate-400 {
  color: #475569 !important; /* slate-600 */
}
html.light .text-slate-500 {
  color: #64748b !important; /* slate-500 — 保持 */
}
html.light .text-slate-600 {
  color: #94a3b8 !important; /* slate-400 */
}
html.light body.text-slate-100 {
  color: #0f172a !important;
}

/* placeholder */
html.light .placeholder-slate-500::placeholder {
  color: #94a3b8 !important;
}

/* ---------- 边框颜色 ---------- */
html.light .border-slate-700\/50 {
  border-color: rgba(226,232,240,0.8) !important; /* slate-200 */
}
html.light .border-slate-600\/50 {
  border-color: rgba(203,213,225,0.7) !important; /* slate-300 */
}
html.light .border-slate-700 {
  border-color: #e2e8f0 !important;
}
html.light .border-slate-600 {
  border-color: #cbd5e1 !important;
}
html.light .border-slate-600\/30 {
  border-color: rgba(203,213,225,0.4) !important;
}

/* hover 边框 */
html.light .hover\:border-slate-600\/50:hover {
  border-color: rgba(203,213,225,0.8) !important;
}
html.light .hover\:border-slate-500\/50:hover {
  border-color: rgba(148,163,184,0.6) !important;
}

/* ---------- 阴影 ---------- */
html.light .shadow-black\/40 {
  --tw-shadow-color: rgba(0,0,0,0.08) !important;
}
html.light .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.08) !important;
}

/* ---------- 侧边栏链接 ---------- */
html.light .sidebar-link {
  color: #475569 !important; /* slate-600 */
}
html.light .sidebar-link:hover {
  color: #0f172a !important;
  background: rgba(241,245,249,0.8) !important;
}
html.light .sidebar-link.active {
  background: rgba(99,102,241,0.1) !important;
  color: #6366f1 !important;
}

/* ---------- 滚动条 ---------- */
html.light ::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important; /* slate-300 */
}
html.light ::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ---------- Hover 背景 ---------- */
html.light .hover\:bg-slate-700:hover {
  background-color: #f1f5f9 !important;
}
html.light .hover\:bg-slate-700\/50:hover {
  background-color: rgba(241,245,249,0.7) !important;
}
html.light .hover\:bg-slate-800:hover {
  background-color: #f8fafc !important;
}
html.light .hover\:bg-slate-800\/50:hover {
  background-color: rgba(241,245,249,0.6) !important;
}

/* hover 文字 */
html.light .hover\:text-slate-200:hover,
html.light .hover\:text-slate-300:hover {
  color: #0f172a !important;
}
html.light .hover\:text-slate-100:hover {
  color: #0f172a !important;
}
html.light .group:hover .group-hover\:text-slate-300 {
  color: #0f172a !important;
}

/* ---------- 表格 ---------- */
html.light .divide-slate-700\/50 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(226,232,240,0.6) !important;
}

/* ---------- Ring ---------- */
html.light .ring-slate-700 {
  --tw-ring-color: #e2e8f0 !important;
}
html.light .ring-slate-700\/50 {
  --tw-ring-color: rgba(226,232,240,0.5) !important;
}

/* ---------- 登录页特殊处理 ---------- */
html.light .bg-mesh {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(99,102,241,0.04) 0%, transparent 40%) !important;
}

/* 登录页背景装饰球 */
html.light .bg-indigo-500\/5 {
  background-color: rgba(99,102,241,0.04) !important;
}
html.light .bg-violet-500\/5 {
  background-color: rgba(139,92,246,0.04) !important;
}
html.light .bg-indigo-500\/3 {
  background-color: rgba(99,102,241,0.03) !important;
}

/* ---------- focus / input 覆盖 ---------- */
html.light .input-focus:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
}

/* ---------- 状态色背景（半透明）轻微调整 ---------- */
html.light .bg-emerald-500\/10 {
  background-color: rgba(16,185,129,0.08) !important;
}
html.light .bg-red-500\/10 {
  background-color: rgba(239,68,68,0.08) !important;
}
html.light .bg-red-500\/20 {
  background-color: rgba(239,68,68,0.1) !important;
}
html.light .bg-emerald-500\/20 {
  background-color: rgba(16,185,129,0.1) !important;
}
html.light .bg-amber-500\/10 {
  background-color: rgba(245,158,11,0.08) !important;
}
html.light .bg-blue-500\/10 {
  background-color: rgba(59,130,246,0.08) !important;
}
html.light .bg-indigo-500\/10 {
  background-color: rgba(99,102,241,0.08) !important;
}
html.light .bg-indigo-500\/15,
html.light .bg-indigo-500\/20 {
  background-color: rgba(99,102,241,0.1) !important;
}

/* ---------- 移动端遮罩 ---------- */
html.light .bg-black\/60 {
  background-color: rgba(0,0,0,0.3) !important;
}

/* ---------- 主题切换按钮 ---------- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(51,65,85,0.5);
  color: #f1f5f9;
}
html.light .theme-toggle:hover {
  background: rgba(241,245,249,0.8);
  color: #0f172a;
}
/* 暗色下显示太阳，亮色下显示月亮 */
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
html.light .theme-toggle .icon-sun  { display: none; }
html.light .theme-toggle .icon-moon { display: block; }

/* ---------- stat-card / kpi-card 覆盖 ---------- */
html.light .stat-card,
html.light .kpi-card {
  background-color: #ffffff !important;
  border-color: rgba(226,232,240,0.7) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.03) !important;
}
html.light .stat-card:hover,
html.light .kpi-card:hover {
  border-color: rgba(203,213,225,0.9) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04) !important;
  transform: translateY(-1px);
}

/* KPI 卡片顶部彩色边在亮色下更鲜艳 */
html.light .kpi-accent-emerald { border-top-color: rgba(16,185,129,0.7) !important; }
html.light .kpi-accent-blue    { border-top-color: rgba(59,130,246,0.7) !important; }
html.light .kpi-accent-violet  { border-top-color: rgba(139,92,246,0.7) !important; }
html.light .kpi-accent-amber   { border-top-color: rgba(245,158,11,0.7) !important; }
html.light .kpi-accent-cyan    { border-top-color: rgba(6,182,212,0.7) !important; }
html.light .kpi-accent-indigo  { border-top-color: rgba(99,102,241,0.7) !important; }

/* 所有 bg-slate-800 面板卡片在亮色下都加阴影增加层次 */
html.light .bg-slate-800 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
}

/* ---------- 排名徽章 ---------- */
html.light .rank-1 {
  background-color: rgba(245,158,11,0.12) !important;
  color: #d97706 !important;
}
html.light .rank-2 {
  background-color: rgba(100,116,139,0.12) !important;
  color: #475569 !important;
}
html.light .rank-3 {
  background-color: rgba(234,88,12,0.12) !important;
  color: #c2410c !important;
}
html.light .rank-other {
  background-color: rgba(226,232,240,0.6) !important;
  color: #94a3b8 !important;
}

/* ---------- 周期/排序按钮 ---------- */
html.light .period-btn.active {
  background-color: rgba(99,102,241,0.1) !important;
  color: #6366f1 !important;
}
html.light .period-btn:not(.active) {
  color: #94a3b8 !important;
}
html.light .period-btn:not(.active):hover {
  color: #475569 !important;
  background-color: rgba(241,245,249,0.8) !important;
}
html.light .sort-btn.active {
  background-color: rgba(99,102,241,0.08) !important;
  color: #6366f1 !important;
}
html.light .sort-btn:not(.active) {
  color: #94a3b8 !important;
}
html.light .sort-btn:not(.active):hover {
  color: #475569 !important;
}

/* ---------- 排名列表 hover / divider ---------- */
html.light .hover\:bg-slate-700\/15:hover {
  background-color: rgba(241,245,249,0.8) !important;
}
html.light .hover\:bg-slate-700\/20:hover {
  background-color: rgba(241,245,249,0.8) !important;
}
html.light .divide-slate-700\/20 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(226,232,240,0.5) !important;
}
html.light .divide-slate-700\/30 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(226,232,240,0.6) !important;
}

/* ---------- Agent 聊天页（亮色覆盖）---------- */

/* 信息栏渐变背景 */
html.light .from-slate-800\/60 {
  --tw-gradient-from: rgba(241,245,249,0.7) !important;
}
html.light .to-slate-800\/30 {
  --tw-gradient-to: rgba(255,255,255,0.4) !important;
}

/* 聊天卡片半透明背景 */
html.light .bg-slate-800\/40 {
  background-color: rgba(255,255,255,0.6) !important;
}

/* 输入区背景 */
html.light .bg-slate-900\/60 {
  background-color: rgba(241,245,249,0.7) !important;
}
html.light .bg-slate-900\/50 {
  background-color: rgba(241,245,249,0.6) !important;
}
html.light .bg-slate-900\/80 {
  background-color: rgba(248,250,252,0.85) !important;
}

/* Bot 消息气泡 */
html.light .msg-bubble {
  filter: none !important;
}

/* 输入框和下拉选择 */
html.light select.bg-slate-800 {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

/* card-accent 系列顶部细线 */
html.light .card-accent-indigo {
  box-shadow: inset 0 2px 0 rgba(99,102,241,0.2), 0 1px 3px rgba(0,0,0,0.04) !important;
}
html.light .card-accent-slate {
  box-shadow: inset 0 2px 0 rgba(148,163,184,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* detail-row 分隔线 */
html.light .detail-row {
  border-bottom-color: rgba(226,232,240,0.6) !important;
}

/* 日志标签（亮色下更柔和） */
html.light .tag-info  { background: #dbeafe; color: #1d4ed8; }
html.light .tag-trans { background: #d1fae5; color: #065f46; }
html.light .tag-stt   { background: #ede9fe; color: #5b21b6; }
html.light .tag-llm   { background: #ffedd5; color: #9a3412; }
html.light .tag-err   { background: #fee2e2; color: #991b1b; }
html.light .tag-sys   { background: #f1f5f9; color: #475569; }
html.light .tag-txt   { background: #cffafe; color: #155e75; }

/* 流式光标颜色 */
html.light .streaming-cursor::after {
  color: #6366f1 !important;
}

/* 用户气泡保持渐变但调整阴影 */
html.light .shadow-indigo-500\/15 {
  --tw-shadow-color: rgba(99,102,241,0.08) !important;
}
html.light .shadow-indigo-500\/20 {
  --tw-shadow-color: rgba(99,102,241,0.1) !important;
}
html.light .shadow-indigo-500\/25 {
  --tw-shadow-color: rgba(99,102,241,0.12) !important;
}
html.light .shadow-green-500\/25 {
  --tw-shadow-color: rgba(34,197,94,0.12) !important;
}

/* 底部阴影（输入区上方） */
html.light .shadow-\[0_-4px_24px_rgba\(0\,0\,0\,0\.25\)\] {
  box-shadow: 0 -4px 24px rgba(0,0,0,0.04) !important;
}

/* 按钮和交互元素 */
html.light .bg-slate-700 {
  background-color: #e2e8f0 !important;
}
html.light .hover\:bg-slate-600:hover {
  background-color: #cbd5e1 !important;
}

/* 边框变体 */
html.light .border-slate-700\/40 {
  border-color: rgba(226,232,240,0.7) !important;
}
html.light .border-slate-700\/30 {
  border-color: rgba(226,232,240,0.5) !important;
}
html.light .border-slate-600\/20 {
  border-color: rgba(203,213,225,0.3) !important;
}

/* MCP 展开区域 */
html.light .bg-slate-900\/80 {
  background-color: rgba(248,250,252,0.9) !important;
}

/* ---------- 代码编辑器 / pre 区域 ---------- */
html.light pre,
html.light code {
  background-color: #f8fafc !important;
}

/* ---------- Toggle 开关（亮色模式）---------- */
/* 修复 bg-slate-700 !important 覆盖 peer-checked 背景色，ON 状态统一亮绿 */
html.light .peer:checked ~ .peer-checked\:bg-indigo-500 {
  background-color: #22c55e !important;
}
html.light .peer:checked ~ .peer-checked\:bg-cyan-500 {
  background-color: #22c55e !important;
}
html.light .peer:checked ~ .peer-checked\:bg-emerald-500 {
  background-color: #22c55e !important;
}

/* ---------- 杂项 ---------- */
html.light .from-slate-900 {
  --tw-gradient-from: #f1f5f9 !important;
}
html.light .to-slate-800 {
  --tw-gradient-to: #ffffff !important;
}