/* ═══════════════════════════════════════════════════════
   一零电竞 · 管理端浅色主题 (Light Premium Theme)
   ═══════════════════════════════════════════════════════ */
:root {
  --font: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  --bg: #f0f2f5;
  --card: #ffffff;
  --card-alt: #f8fafc;
  --text: #1e293b;
  --text2: #64748b;
  --text3: #94a3b8;
  --accent: #4a7cff;
  --accent-light: #e8eeff;
  --border: #e2e8f0;
}
* { font-family: var(--font); }

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── 背景 ── */
.aurora {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 30%, #f5f0ff 60%, #faf5ff 100%);
}
.aurora::before, .aurora::after { display: none; }

/* ── 卡片 ── */
.glass {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.glass-strong {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 渐变文字/按钮 ── */
.grad-text {
  background: linear-gradient(120deg, #4a7cff, #7c3aed, #a855f7) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
.grad-btn {
  background: linear-gradient(120deg, #4a7cff, #6366f1) !important;
  transition: all .25s;
}
.grad-btn:hover { filter: brightness(1.08); box-shadow: 0 8px 24px -6px rgba(74,124,255,.45); transform: translateY(-1px); }
.grad-btn:active { transform: translateY(0); }
.grad-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; filter:none; }

/* ── 输入框 ── */
.field {
  background: var(--card-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: .75rem;
  padding: .65rem .9rem;
  color: var(--text) !important;
  width: 100%;
  transition: all .2s;
  outline: none;
}
.field:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(74,124,255,.12); background: #fff !important; }
.field::placeholder { color: #9ca3af !important; }
select.field option { background: #fff; color: var(--text); }

/* ── 消息页的聊天输入框 ──
 *
 * 为什么单独加强：.field 的底色是 --card-alt(#f8fafc)，放在白卡片上几乎融成一片
 * （边框也只有 #e2e8f0），于是聊天页底部的输入框"看不出来是个能打字的地方"。
 * 表单里因为上方有 label、下方有按钮，还能辨认；聊天页只有它孤零零一个，
 * 加上"输入消息..."又是浅灰占位符，就更容易被当成装饰。
 *
 * 只改聊天输入框，不动全局 .field —— 全站的表单观感已经确认过，不该被这次调整波及。
 */
#msg-input {
  background: #fff !important;
  border: 1.5px solid #cbd5e1 !important;
}
#msg-input::placeholder { color: #94a3b8 !important; }
#msg-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(74,124,255,.18);
}

/* ── 表格 ── */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl thead th {
  text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text2) !important; font-weight: 600; padding: .7rem .9rem;
  border-bottom: 1px solid var(--border) !important;
  position: sticky; top: 0; background: var(--card) !important; backdrop-filter: none; z-index: 1;
}
.tbl tbody td { padding: .7rem .9rem; border-bottom: 1px solid #f1f5f9 !important; font-size: .875rem; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: #f8fafc !important; }

/* ── 侧边导航 ── */
.nav-item {
  display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border-radius:.75rem;
  color: var(--text2) !important; cursor:pointer; transition: all .18s; font-size:.9rem; font-weight:500;
}
.nav-item:hover { background: #f1f5f9 !important; color: var(--text) !important; }
.nav-item.active {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(74,124,255,.2) !important;
}

/* ── 动画 ── */
@keyframes slide-in { from { opacity:0; transform: translateX(24px);} to {opacity:1; transform:none;} }
.animate-slide-in { animation: slide-in .3s ease; }
@keyframes fade-up { from { opacity:0; transform: translateY(12px);} to {opacity:1; transform:none;} }
.animate-fade-up { animation: fade-up .4s ease both; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2); }

/* ── 模态框 ── */
.modal-mask { position: fixed; inset:0; background: rgba(15,23,42,.35) !important; backdrop-filter: blur(4px); z-index: 100; display:flex; align-items:center; justify-content:center; padding:1rem; }
.stat-num { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════
   Tailwind 暗色类 → 浅色主题覆盖
   ═══════════════════════════════════════════════════════ */

/* ── 文字颜色 ── */
.text-white { color: var(--text) !important; }
.text-slate-200 { color: #334155 !important; }
.text-slate-300 { color: #475569 !important; }
.text-slate-400 { color: var(--text2) !important; }
.text-slate-500 { color: var(--text3) !important; }
.text-slate-600 { color: var(--text2) !important; }

/* ── 语义色（保持可见度） ── */
.text-emerald-300 { color: #059669 !important; }
.text-emerald-400 { color: #059669 !important; }
.text-sky-300 { color: #0284c7 !important; }
.text-amber-300 { color: #d97706 !important; }
.text-amber-200\/80 { color: #92400e !important; }
.text-indigo-300 { color: #4338ca !important; }
.text-indigo-200 { color: #4338ca !important; }
.text-rose-300 { color: #e11d48 !important; }
.text-rose-400 { color: #e11d48 !important; }
.text-fuchsia-300 { color: #9333ea !important; }
.text-rose-200 { color: #e11d48 !important; }
.text-sky-200 { color: #0284c7 !important; }

/* 【2026-11-04 可读性修复】
   浅色主题下，xx-100 / xx-200 这类"深色主题专用"的浅色文字会变成
   **浅底浅字**（实测：服务群卡片里的说明文字几乎看不见）。
   这里统一压深，保证在 #fff/#f8fafc 背景上对比度足够。
   注意：只覆盖"文字色"，不影响背景/边框；hover: 变体是独立类名，不受影响。 */
.text-indigo-100 { color: #312e81 !important; }
.text-indigo-50  { color: #312e81 !important; }
.text-indigo-300\/80 { color: #4338ca !important; }
.text-indigo-200\/80 { color: #4338ca !important; }
.text-amber-200 { color: #b45309 !important; }
.text-amber-100 { color: #92400e !important; }
.text-emerald-200 { color: #047857 !important; }
.text-emerald-100 { color: #065f46 !important; }
.text-sky-100 { color: #0369a1 !important; }
.text-rose-100 { color: #be123c !important; }
.text-slate-100 { color: #1e293b !important; }


/* ── 边框颜色 ── */
.border-white\/8, .border-white\/10 { border-color: var(--border) !important; }
.border-white\/5 { border-color: #f1f5f9 !important; }
.border-indigo-500\/20, .border-indigo-500\/30 { border-color: rgba(74,124,255,.25) !important; }
.border-emerald-400\/20, .border-emerald-400\/25 { border-color: rgba(5,150,105,.2) !important; }
.border-rose-400\/20, .border-rose-400\/25, .border-rose-500\/20, .border-rose-500\/25 { border-color: rgba(225,29,72,.2) !important; }
.border-amber-400\/20, .border-amber-400\/25 { border-color: rgba(217,119,6,.2) !important; }
.border-slate-600\/20 { border-color: #e2e8f0 !important; }

/* ── 背景色 ── */
.bg-white\/3, .bg-white\/5 { background: #f8fafc !important; }
.bg-white\/8 { background: #f1f5f9 !important; }
.bg-white\/10 { background: #e2e8f0 !important; }
.bg-slate-800\/50, .bg-slate-900\/60 { background: #f8fafc !important; }

/* ── 状态徽章背景 ── */
.bg-emerald-500\/15, .bg-emerald-500\/25 { background: rgba(5,150,105,.1) !important; }
.bg-sky-500\/15 { background: rgba(2,132,199,.1) !important; }
.bg-fuchsia-500\/15 { background: rgba(147,51,234,.1) !important; }
.bg-amber-500\/15, .bg-amber-500\/25 { background: rgba(217,119,6,.1) !important; }
.bg-rose-500\/15, .bg-rose-500\/25 { background: rgba(225,29,72,.1) !important; }
.bg-indigo-500\/15, .bg-indigo-500\/25, .bg-indigo-500\/20 { background: rgba(74,124,255,.1) !important; }
.bg-slate-500\/15, .bg-slate-500\/25 { background: rgba(100,116,139,.1) !important; }
.bg-rose-500\/10, .bg-rose-500\/20 { background: rgba(225,29,72,.08) !important; }
.bg-emerald-500\/10, .bg-emerald-500\/20 { background: rgba(5,150,105,.08) !important; }
.bg-amber-500\/10, .bg-amber-500\/20 { background: rgba(217,119,6,.08) !important; }
.bg-amber-500\/8 { background: rgba(217,119,6,.06) !important; }
.bg-indigo-500\/8 { background: rgba(74,124,255,.06) !important; }
.bg-sky-500\/10 { background: rgba(2,132,199,.08) !important; }

/* ── 提示框背景 ── */
.bg-sky-500\/10 { background: rgba(2,132,199,.06) !important; }

/* ── Hover 背景 ── */
.hover\:bg-white\/10:hover { background: #e2e8f0 !important; }
.hover\:bg-white\/5:hover { background: #f1f5f9 !important; }
.hover\:bg-emerald-500\/25:hover { background: rgba(5,150,105,.15) !important; }
.hover\:bg-rose-500\/25:hover { background: rgba(225,29,72,.15) !important; }
.hover\:bg-rose-500\/20:hover { background: rgba(225,29,72,.12) !important; }
.hover\:bg-indigo-500\/25:hover { background: rgba(74,124,255,.15) !important; }
.hover\:bg-indigo-500\/20:hover { background: rgba(74,124,255,.12) !important; }
.hover\:bg-amber-500\/25:hover { background: rgba(217,119,6,.15) !important; }
.hover\:bg-amber-500\/20:hover { background: rgba(217,119,6,.12) !important; }
.hover\:bg-slate-500\/25:hover { background: rgba(100,116,139,.15) !important; }
.hover\:bg-rose-500\/10:hover { background: rgba(225,29,72,.08) !important; }

/* ── 语义文字色覆盖 ── */
.text-emerald-200 { color: #059669 !important; }
.text-emerald-300 { color: #059669 !important; }
.text-sky-200 { color: #0284c7 !important; }
.text-indigo-200 { color: #4338ca !important; }
.text-rose-200 { color: #e11d48 !important; }
.text-amber-200 { color: #d97706 !important; }
.text-amber-200\/80 { color: #92400e !important; }
.text-indigo-200\/80 { color: #3730a3 !important; }
.text-indigo-300 { color: #4338ca !important; }
.text-fuchsia-300 { color: #9333ea !important; }
.text-rose-300 { color: #e11d48 !important; }
.text-rose-400 { color: #e11d48 !important; }
.text-sky-300 { color: #0284c7 !important; }
.text-amber-300 { color: #d97706 !important; }

/* ── 边框圆角/分割线 ── */
.border-b.border-white\/8, .border-t.border-white\/8 { border-color: var(--border) !important; }
.border-r.border-white\/8 { border-color: var(--border) !important; }
.border-l-2.border-indigo-500 { border-color: var(--accent) !important; }

/* ── 特殊元素 ── */
.accent-indigo-500 { accent-color: var(--accent); }
.ring-emerald-400\/25 { --tw-ring-color: rgba(5,150,105,.25) !important; }
.ring-sky-400\/25 { --tw-ring-color: rgba(2,132,199,.25) !important; }
.ring-fuchsia-400\/25 { --tw-ring-color: rgba(147,51,234,.25) !important; }
.ring-amber-400\/25 { --tw-ring-color: rgba(217,119,6,.25) !important; }
.ring-white\/10 { --tw-ring-color: var(--border) !important; }
.ring-white\/5 { --tw-ring-color: #f1f5f9 !important; }

/* ── 渐变背景 ── */
.from-indigo-500.to-fuchsia-500 {
  background: linear-gradient(135deg, #4a7cff, #9333ea) !important;
}
.from-rose-500.to-pink-500 {
  background: linear-gradient(135deg, #e11d48, #ec4899) !important;
}

/* ── 未读徽章 ── */
.unread-badge {
  background: #e11d48 !important;
  color: #fff !important;
}

/* ── 确保链接在浅色背景下可见 ── */
a { color: var(--accent); }
a:hover { color: #3b63d9; }

/* ── 角色选择按钮选中状态 ── */
.role-opt input[type="radio"]:checked + div {
  border-color: var(--accent) !important;
  background: rgba(74,124,255,.1) !important;
  color: var(--accent) !important;
}

/* ── 密码眼睛切换按钮 ── */
.pw-wrap { position: relative; }
.pw-wrap input[type="password"],
.pw-wrap input[type="text"] {
  padding-right: 2.8rem !important;
}
.pw-toggle {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  color: #9ca3af; display: flex; align-items: center; justify-content: center;
  z-index: 2; line-height: 1;
}
.pw-toggle:hover { color: #6b7280; }
.pw-toggle svg { width: 20px; height: 20px; }

/* 隐藏浏览器原生密码显示按钮 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}


/* 新消息/告警提示：放左下角堆叠，避免遮挡右上角的页签与按钮 */
.msg-toast-stack {
  position: fixed;
  left: 264px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  max-width: calc(100vw - 288px);
  pointer-events: none;
}
.msg-toast-stack > * { pointer-events: auto; }
@media (max-width: 900px) {
  .msg-toast-stack { left: 12px; max-width: calc(100vw - 24px); }
}