/*
 * 管理后台白色简约主题
 * 浅色背景 + 白色卡片 + 淡边框，清爽层级清晰
 */
:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --border: #e5e7eb;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --primary: #2563eb;
  --primary-soft: #eff4ff;
  --success: #16a34a;
  --success-soft: #ecfdf5;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --info: #0891b2;
  --info-soft: #ecfeff;
  --bs-body-bg: #f5f6fa;
  --bs-body-color: #1f2937;
  --bs-border-color: #e5e7eb;
  --bs-link-color: #2563eb;
  --bs-link-hover-color: #1d4ed8;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei UI", system-ui, -apple-system, sans-serif;
}

/* ---------- 侧边栏（白色简约） ---------- */
.sidebar {
  width: 232px;
  background: var(--surface);
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 40;
}
.sidebar .brand {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}
.sidebar .brand .brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar .brand .brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar nav.nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.sidebar .nav-group-label {
  padding: 4px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 2px;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sidebar .nav-link .nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar .nav-link:hover { background: #f3f4f6; color: var(--text); }
.sidebar .nav-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.sidebar .admin-panel {
  margin: 12px;
  padding: 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f9fafb;
  border: 1px solid var(--border);
}
.sidebar .admin-panel .admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar .admin-panel .admin-avatar svg { width: 16px; height: 16px; }
.sidebar .admin-panel .admin-info { flex: 1; min-width: 0; }
.sidebar .admin-panel .admin-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .admin-panel .admin-role { font-size: 11px; color: var(--success); }
.sidebar .admin-panel .admin-logout { color: var(--text-muted); display: flex; text-decoration: none; transition: color 0.15s; }
.sidebar .admin-panel .admin-logout svg { width: 18px; height: 18px; }
.sidebar .admin-panel .admin-logout:hover { color: var(--danger); }

/* ---------- 主区域 ---------- */
.main { margin-left: 232px; padding: 24px; min-height: 100vh; }
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  margin: -24px -24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar h5 { color: var(--text); }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.card-header {
  background: #f9fafb !important;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px 12px 0 0 !important;
}
.card-body { background: transparent; }

/* ---------- 表格 ---------- */
.table { color: var(--text); --bs-table-border-color: var(--border); --bs-table-bg: transparent; }
.table thead th {
  background: #f8f9fb;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border) !important;
}
.table tbody td { border-color: var(--border); }
.table-hover tbody tr { transition: background 0.15s; }
.table-hover tbody tr:hover { background: #f9fafb; }

/* ---------- 徽章（简约浅色） ---------- */
.badge { font-weight: 600; border-radius: 6px; border: 1px solid transparent; }
.text-bg-primary { background: var(--primary-soft); color: var(--primary); border-color: #dbeafe; }
.text-bg-success { background: var(--success-soft); color: var(--success); border-color: #dcfce7; }
.text-bg-warning { background: var(--warning-soft); color: var(--warning); border-color: #fef3c7; }
.text-bg-danger  { background: var(--danger-soft); color: var(--danger); border-color: #fee2e2; }
.text-bg-info    { background: var(--info-soft); color: var(--info); border-color: #cffafe; }
.text-bg-dark    { background: #f3f4f6; color: var(--text-secondary); border-color: #e5e7eb; }
.text-bg-secondary { background: #f3f4f6; color: var(--text-secondary); border-color: #e5e7eb; }

/* ---------- 表单 ---------- */
.form-control, .form-select {
  background-color: #fff;
  border: 1px solid #d1d5db;
  color: var(--text);
  border-radius: 8px;
}
.form-control:focus, .form-select:focus {
  background-color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  color: var(--text);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:disabled, .form-select:disabled { background-color: #f3f4f6; color: var(--text-muted); }
.form-label { color: var(--text-secondary); }
.form-text { color: var(--text-muted); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* ---------- 按钮 ---------- */
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.btn-outline-secondary { color: var(--text-secondary); border-color: #d1d5db; }
.btn-outline-secondary:hover { background: #f3f4f6; color: var(--text); border-color: #9ca3af; }

/* ---------- 分页 ---------- */
.page-link { background: #fff; border-color: var(--border); color: var(--text-secondary); }
.page-link:hover { background: #f3f4f6; color: var(--text); border-color: var(--border); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- 提示 ---------- */
.alert { background: #fff; border: 1px solid var(--border); color: var(--text); border-radius: 10px; }
.alert-success { background: var(--success-soft); border-color: #dcfce7; color: #166534; }
.alert-danger { background: var(--danger-soft); border-color: #fee2e2; color: #991b1b; }

/* ---------- 列表组（聊天记录客户列表） ---------- */
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--border); --bs-list-group-color: var(--text); }
.list-group-item { background: transparent; color: var(--text); border-color: var(--border); }
.list-group-item-action:hover { background: #f9fafb; color: var(--text); }
.list-group-item.active { background: var(--primary-soft); border-color: #dbeafe; color: var(--primary); }
.list-group-item.active .text-muted { color: var(--text-secondary) !important; }

/* ---------- 通用 ---------- */
.text-muted { color: var(--text-muted) !important; }
.stat-num { font-size: 30px; font-weight: 700; }
code { color: var(--primary); background: #f3f4f6; padding: 2px 6px; border-radius: 6px; }
.input-group .form-control { border-radius: 8px 0 0 8px; }
.input-group .btn { border-radius: 0 8px 8px 0; }