/* ============================================================
   万益蓝 WonderLab 品牌视觉层（实验室监测屏 · 小蓝瓶蓝）
   仅视觉覆盖，不改任何业务结构；与 DESIGN.md 对应
   ============================================================ */
@import 'https://fonts.googleapis.cn/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Barlow:wght@500;600;700&display=swap';
/* MiSans：品牌主字体（圆润几何，年轻科技感），按 unicode-range 分包加载 */
@import 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css';
@import 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Medium.min.css';
@import 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Semibold.min.css';
@import 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Bold.min.css';

:root {
  /* 品牌 Design Tokens */
  --brand-blue: #2456F0;
  --brand-blue-hover: #1D45C8;
  --brand-blue-light: #EEF3FF;
  --brand-ink: #0B1E42;
  --brand-ink-2: #14306B;
  --brand-cyan: #06B6D4;
  --brand-success: #10B981;
  --brand-warning: #F59E0B;
  --brand-danger: #EF4444;
  --brand-page-bg: #F4F7FC;
  --brand-card-border: #E2E8F0;
  --brand-text-2: #64748B;
  --brand-text-3: #94A3B8;
  --brand-row-hover: #F5F8FF;
  --brand-shadow: 0 1px 2px rgba(11,30,66,0.04);
  --brand-shadow-hover: 0 8px 24px rgba(36,86,240,0.10);
  --brand-btn-shadow: 0 8px 24px rgba(36,86,240,0.35);

  /* 兼容旧变量：统一指向新品牌色（旧代码无需逐处改动） */
  --wonder-blue: #2456F0;
  --wonder-blue-dark: #1D45C8;
  --wonder-blue-light: #EEF3FF;
  --wonder-blue-lighter: #F5F8FF;
  --wonder-gradient: linear-gradient(135deg, #2456F0 0%, #1D45C8 100%);
}

/* ===== 全局字体与底色 ===== */
body {
  font-family: 'MiSans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--brand-page-bg);
  color: var(--brand-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 大数字：Barlow + tabular-nums */
.kpi-value,
#kpi-row .font-bold,
.text-3xl.font-bold,
.text-2xl.font-bold.kpi-value {
  font-family: 'Barlow', 'Noto Sans SC', sans-serif;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 769px) {
  .text-3xl.font-bold.kpi-value { font-size: 30px; }
}

/* ===== 深色舱体侧边栏（240px，#0B1E42 → #14306B） ===== */
.sidebar {
  background: linear-gradient(180deg, var(--brand-ink) 0%, var(--brand-ink-2) 100%) !important;
  border-right: none !important;
}
.sidebar .text-gray-400 { color: #FFFFFF !important; }
.sidebar .border-gray-100 { border-color: rgba(255,255,255,0.08) !important; }
.sidebar-item {
  color: #FFFFFF !important;
  border-radius: 8px;
  transition: all 200ms ease;
  font-weight: 400 !important;
}
.sidebar-item:hover:not(.active) {
  background: rgba(255,255,255,0.08) !important;
  color: #FFFFFF;
}
.sidebar-item.active {
  background: var(--brand-blue) !important;
  color: #FFFFFF !important;
  font-weight: 400 !important;
  border-left: none;
  margin-left: 10px;
  padding-left: 14px;
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(36,86,240,0.35);
  position: relative;
}
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: var(--brand-blue);
  box-shadow: 0 0 8px rgba(36,86,240,0.9);
}
#logoutBtn:hover { color: #E4EBFA !important; }

/* ===== 卡片：白底 10px 圆角 + 品牌阴影 ===== */
.card {
  border-radius: 10px !important;
  border: 1px solid var(--brand-card-border) !important;
  box-shadow: var(--brand-shadow) !important;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--brand-shadow-hover) !important;
}

/* ===== 主按钮：品牌蓝底白字 ===== */
.btn-primary {
  background: var(--brand-blue) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: var(--brand-btn-shadow);
  transition: all 200ms ease;
}
.btn-primary:hover {
  background: var(--brand-blue-hover) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}
.btn-primary:disabled {
  background: #9FB4F8 !important;
  box-shadow: none;
}
.btn-secondary { border-radius: 8px !important; transition: all 200ms ease; }

/* ===== 表格 ===== */
th {
  background: var(--brand-page-bg) !important;
  color: var(--brand-text-2) !important;
}
tr:hover td { background: var(--brand-row-hover) !important; }

/* ===== 标签 / 徽标（10% 透明度浅色底 + 状态色文字） ===== */
.valid-yes, .mapped { background: rgba(16,185,129,0.10) !important; color: var(--brand-success) !important; }
.valid-no { background: rgba(239,68,68,0.10) !important; color: var(--brand-danger) !important; }
.unmapped { background: rgba(245,158,11,0.10) !important; color: var(--brand-warning) !important; }

/* ===== 输入控件 ===== */
.select-box, .multi-select-trigger, .chat-list-filter select, .chat-list-filter input,
input[type="date"], input[type="text"], input[type="password"], input[type="number"], select, textarea {
  border-radius: 8px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.select-box:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand-blue) !important;
  outline: none;
}

/* ===== 客户列表行 ===== */
.customer-item:hover { background: var(--brand-row-hover) !important; }
.customer-item.active {
  background: var(--brand-blue-light) !important;
  border-left: 3px solid var(--brand-blue);
}

/* ===== 历史日期条 ===== */
.history-btn.active { background: var(--brand-blue); border-color: var(--brand-blue); }

/* ===== 会话分析页：tailwind 蓝色系统一映射到品牌蓝 ===== */
.bg-blue-600 { background-color: var(--brand-blue) !important; }
.text-blue-600 { color: var(--brand-blue) !important; }
.hover\:bg-blue-50:hover { background-color: var(--brand-blue-light) !important; }
.hover\:text-blue-600:hover { color: var(--brand-blue) !important; }
.focus\:border-blue-400:focus { border-color: var(--brand-blue) !important; }
.border-blue-200 { border-color: #C7D6FE !important; }

/* 会话分析：群发列表项 */
.bc-item { border-radius: 10px; transition: all 200ms ease; }
.bc-item:hover { border-color: #AEC4FB; background: var(--brand-row-hover); }
.bc-item.active {
  border-color: var(--brand-blue);
  background: var(--brand-blue-light);
  box-shadow: 0 0 0 1px var(--brand-blue), 0 4px 12px rgba(36,86,240,0.10);
}

/* 高频词条形：品牌蓝 → 科技青 */
.word-bar { background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue)) !important; }

/* AI 回答强调色 */
.ai-answer h3 { color: var(--brand-blue); }
.ai-answer strong { color: var(--brand-blue-hover); }

/* ===== 聊天气泡 ===== */
.chat-msg.out .chat-bubble { background: var(--brand-blue); }

/* ===== 顶部栏标题竖条（3px 品牌蓝装饰） ===== */
header .w-1.h-6 { background: var(--brand-blue) !important; border-radius: 2px; }

/* ===== 弹层宽度上限（移动端防溢出） ===== */
@media (max-width: 1024px) {
  .modal-panel, .drawer-panel, #report-drawer > div, #ai-modal > div, #label-modal > div, #rules-modal > div {
    max-width: calc(100vw - 2rem) !important;
  }
}