/* ==========================================================================
   值班台主题层 V3（2026-11-01）
   --------------------------------------------------------------------------
   改版思路
   这个台子是「每天盯盘」用的：早上打开看今天该跟谁、发了多少、回了多少。
   它不是内容站，是操作台。所以视觉上只留一处重手笔 —— 顶部那条深色读数带；
   其余全部退到背景里：去阴影、去彩色药丸、去紫色主色。

   V2 的问题（做这版的原因）
     1. 六张 KPI 卡等宽等重 → 六个数字谁更重要看不出来
     2. 主色 #635BFF 是通用 SaaS 紫，和「安防设备 / 外贸台账」没有任何关系
     3. 卡片、表格、侧栏全是同一种圆角 + 同一种阴影 → 没有主次
     4. 表格里每个状态都是彩色药丸 → 颜色比信息还响

   V3 的解法
     · 主色改为信号青（设备屏幕/指示灯的语言），结构色改为石墨
     · KPI 六卡合并成一条深色读数带，格间 1px 竖线，数字用等宽对位
     · 卡片去阴影改 1px 描边；圆角 12 → 10，按钮 8 → 7
     · 状态从色块改为「圆点 + 文字」，只在真正需要注意时用实底
   --------------------------------------------------------------------------
   本文件必须在 variables/reset/app-shell/components/modules/pages 之后加载。
   ========================================================================== */

:root {
  /* ---------- 结构色：石墨 ---------- */
  --ink-900: #0E1519;
  --ink-800: #162027;
  --ink-700: #22303A;
  --ink-line: rgba(255, 255, 255, .09);

  /* ---------- 主色：信号青 ----------
     取自监控屏与设备指示灯，比 SaaS 紫更贴这个行业。 */
  --primary: #16697E;
  --primary-ink: #0F5364;
  --primary-press: #12596B;
  --primary-soft: rgba(22, 105, 126, .10);
  --primary-soft-2: #EAF2F4;

  /* ---------- 语义色（全部降饱和，避免表格变彩虹） ---------- */
  --success: #15795C;
  --success-deep: #0C5A44;
  --success-bg: #E6F4F0;

  --warning: #9A6A12;
  --warning-deep: #7A520C;
  --warning-bg: #FBF3E3;

  --danger: #B23A31;
  --danger-deep: #8E2B24;
  --danger-bg: #FBEAE8;

  --info: #2A6DA0;
  --info-deep: #1E527A;
  --info-bg: #E9F1F8;

  /* ---------- 层级底色：冷灰，不用暖白 ---------- */
  --bg-page: #EBEEF0;
  --bg-surface: #FFFFFF;
  --bg-sunken: #E4E9EC;
  --bg-subtle: #F6F8F9;
  --bg-muted: #EDF1F3;
  --bg-thead: transparent;
  --bg-row-alt: #FAFBFC;
  --bg-bar-track: #DDE3E7;
  --bg-hover: #F2F6F8;

  /* ---------- 文本 ---------- */
  --text-1: #0E1519;
  --text-2: #35454F;
  --text-3: #5F7280;
  --text-4: #8496A2;
  --text-5: #A6B4BE;

  /* ---------- 描边 ---------- */
  --stroke-subtle: #E6EAED;
  --stroke-default: #DCE2E6;
  --stroke-strong: #C5D0D6;

  /* ---------- 圆角：收一档，更像设备面板 ---------- */
  --r-card: 10px;
  --r-btn: 7px;
  --r-chip: 5px;
  --r-input: 7px;

  /* ---------- 阴影：只保留浮层，卡片改用描边 ---------- */
  --sh-xs: 0 1px 1px rgba(14, 21, 25, .04);
  --sh-card: 0 0 0 1px var(--stroke-subtle);
  --sh-raised: 0 0 0 1px var(--stroke-default), 0 6px 16px -8px rgba(14, 21, 25, .18);
  --sh-modal: 0 24px 60px -18px rgba(14, 21, 25, .30);
  --sh-focus: 0 0 0 3px rgba(22, 105, 126, .18);

  /* ---------- 字体 ----------
     中文用系统黑体；数字统一等宽对位（读数带里 6 个数字必须上下对齐）。 */
  --font-cn: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-num: "Inter", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* 旧变量别名跟随新主色（pages.css / modules.css 仍在引用） */
  --violet: var(--primary);
  --violet-dk: var(--primary-ink);
  --violet-bg: var(--primary-soft-2);
  --line: var(--stroke-subtle);
}

/* ==========================================================================
   侧边栏：深石墨底，导航靠「左侧竖条」定位，不再用紫色发光药丸
   ========================================================================== */

.sidebar {
  background: var(--ink-900);
  box-shadow: inset -1px 0 0 var(--ink-line);
}

.sidebar__logo {
  background: var(--primary);
  border-radius: 6px;
}

.sidebar__brand-name {
  color: #E8EEF1;
  font-weight: 600;
  letter-spacing: .2px;
}

.sidebar__divider {
  background: var(--ink-line);
  margin: 10px 0;
}

.sidebar__group-label {
  color: #5E707B;
  font-size: 11.5px;
  letter-spacing: .4px;
  padding: 14px 10px 6px;
}

.nav-item {
  position: relative;
  border-radius: 7px;
  color: #A9BAC4;
  height: 36px;
  padding: 0 12px;
  gap: 11px;
  font-size: 13.5px;
}

.nav-item:hover {
  background: rgba(255, 255, 255, .05);
  color: #DCE7EC;
}

.nav-item.is-active {
  background: rgba(255, 255, 255, .07);
  color: #FFFFFF;
  font-weight: 500;
  box-shadow: none;
}

.nav-item.is-active:hover {
  background: rgba(255, 255, 255, .09);
}

/* 选中态的竖条：这条是唯一的方向指示，其余靠明度区分 */
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: #4FB3C9;
}

.sidebar__foot {
  border-top: 1px solid var(--ink-line);
  padding: 12px 10px 4px;
  margin-top: 8px;
}

.sidebar__foot div {
  color: #7A8B95;
  font-size: 12px;
  line-height: 19px;
}

.sidebar__foot div:first-child {
  color: #C6D3DA;
  font-weight: 500;
}

/* ==========================================================================
   顶栏：白底压到 56px，底部一条线，不再和内容混成一片
   ========================================================================== */

.topbar {
  height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid var(--stroke-subtle);
}

.topbar__crumb {
  color: var(--text-2);
  font-weight: 500;
  font-size: 13px;
}

.topbar__sync {
  color: var(--text-4);
  font-size: 12.5px;
}

.topbar__sync::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 6px;
  vertical-align: 1px;
}

.avatar {
  background: var(--ink-700);
  font-size: 13px;
  width: 30px;
  height: 30px;
}

.content {
  padding: 22px 24px 24px;
  gap: 18px;
}

/* ==========================================================================
   页头：标题收小。视觉主角让给下面那条读数带
   ========================================================================== */

.page-header__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0;
}

.page-header__sub {
  font-size: 12.5px;
  line-height: 20px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ==========================================================================
   读数带：全站唯一的重手笔
   --------------------------------------------------------------------------
   六格横排，格间 1px 竖线，数字 30px 等宽。深底的作用是把它和下面的白卡
   在视觉上分开，形成「读数 / 明细」两层，而不是七个同样的白盒子。
   ========================================================================== */

.kpi-row {
  gap: 0;
  background: var(--ink-900);
  border-radius: var(--r-card);
  padding: 4px;
  box-shadow: 0 1px 2px rgba(14, 21, 25, .16), 0 8px 24px -16px rgba(14, 21, 25, .5);
  overflow: hidden;
}

.kpi-card {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 6px;
  padding: 14px 16px 13px;
  gap: 6px;
  position: relative;
  transition: background .16s ease;
}

.kpi-card:hover {
  background: rgba(255, 255, 255, .045);
  box-shadow: none;
  transform: none;
}

/* 格间竖线（最后一张不画） */
.kpi-card + .kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--ink-line);
}

.kpi-card__label {
  font-size: 12px;
  line-height: 17px;
  color: #8497A2;
  letter-spacing: .2px;
}

.kpi-card__value {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -.6px;
  font-weight: 500;
  color: #FFFFFF;
}

.kpi-card__foot {
  min-height: 17px;
}

.kpi-card__note {
  font-size: 11.5px;
  line-height: 17px;
  color: #6C7F8A;
}

/* 读数带里的涨跌标不再上色块，只上文字色 */
.kpi-card__delta {
  background: transparent !important;
  padding: 0;
  font-size: 11.5px;
}

.kpi-card__delta--up { color: #58C79E; }
.kpi-card__delta--down { color: #E58279; }
.kpi-card__delta--flat { color: #6C7F8A; }

/* ==========================================================================
   卡片：一律描边，不再投阴影。层级靠描边深浅和标题字号区分
   ========================================================================== */

.table-card,
.side-card,
.card {
  box-shadow: 0 0 0 1px var(--stroke-subtle);
  border-radius: var(--r-card);
}

.side-card:hover {
  box-shadow: 0 0 0 1px var(--stroke-default);
}

.table-card__header {
  padding: 0 16px;
  min-height: 48px;
  border-bottom: 1px solid var(--stroke-subtle);
}

.table-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: .1px;
}

.table-card__filters .muted,
.table-card__filters span,
.table-card__filters label {
  font-size: 12px !important;
  color: var(--text-4) !important;
}

.badge {
  height: 20px;
  padding: 0 7px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.badge--muted {
  background: var(--bg-muted);
  color: var(--text-3);
}

.side-card {
  padding: 14px 16px 16px;
}

.side-card__header {
  margin-bottom: 10px;
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: .1px;
}

.card-link {
  font-size: 12px;
  color: var(--text-4);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   表格
   ========================================================================== */

.pt th,
.trow--head .th {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: .3px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--stroke-subtle);
  padding-top: 9px;
  padding-bottom: 9px;
}

.pt td {
  padding: 11px 12px;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 1px solid var(--stroke-subtle);
  /* 长邮箱（如 satharasinghe@mermaidsolution.com）会把列撑宽，
     挤压「公司 / 线索」列到只剩两三行。允许任意位置断行即可。 */
  overflow-wrap: anywhere;
}

/* 摘要两行就够；原先 460px 把「公司 / 线索」列挤到只剩两三行宽 */
.pt .snip {
  max-width: 360px;
  font-size: 11.5px;
  line-height: 17px;
  color: var(--text-4);
}

.pt tbody tr:hover,
.trow--body:hover {
  background: var(--bg-hover);
}

/* hover 时左侧亮一条：告诉眼睛「你现在停在这一行」 */
.pt tbody tr {
  position: relative;
  transition: background .12s ease;
}

/* ==========================================================================
   状态标记
   --------------------------------------------------------------------------
   表格里颜色太多就等于没有重点。药丸改为「圆点 + 文字」，
   只有「待认领 / 退信 / 阻断」这类需要立刻处理的才留实底。
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  background: transparent !important;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: .85;
}

.pill--reply { color: var(--success-deep); }
.pill--bounce { color: var(--danger-deep); }
.pill--sent { color: var(--info-deep); }
.pill--new { color: var(--text-4); }
.pill--warn {
  color: var(--warning-deep);
  background: var(--warning-bg) !important;
  padding: 1px 7px 1px 6px;
  border-radius: 4px;
}
.pill--warn::before { background: var(--warning); opacity: 1; }

/* ==========================================================================
   按钮
   ========================================================================== */

.btn {
  border-radius: var(--r-btn);
  border-color: var(--stroke-default);
  color: var(--text-2);
}

/* 尺寸只在桌面生效：手机端（app.html）复用同一个 .btn 类，
   但那里按钮要够大能按，不能被桌面的 34px 压矮。 */
@media (min-width: 900px) {
  .btn {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
  }
  .btn--sm {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }
}

.btn:hover {
  background: var(--bg-subtle);
  border-color: var(--stroke-strong);
  color: var(--text-1);
}

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 83, 100, .28);
}

.btn--primary:hover {
  background: var(--primary-ink);
  border-color: var(--primary-ink);
  color: #fff;
}

.icon-btn:hover {
  background: var(--bg-muted);
}

/* ==========================================================================
   输入与筛选
   ========================================================================== */

.search {
  background: var(--bg-subtle);
  border-color: var(--stroke-subtle);
}

@media (min-width: 900px) {
  .search { height: 34px; }
}

.search:focus-within {
  background: #fff;
  border-color: var(--primary);
}

.chip--primary,
.chip.is-active {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}

.chip--ghost {
  border-color: var(--stroke-subtle);
  color: var(--text-3);
}

.chip--ghost:hover {
  border-color: var(--stroke-strong);
  color: var(--text-1);
}

/* ==========================================================================
   近 7 日柱图：原先 7 列 × 3 根 9px 柱 + 14px 间隔，在 300px 侧栏里会溢出卡片。
   改为柱子定宽 5px、列间距收紧、容器裁切兜底。
   ========================================================================== */

.trend {
  gap: 4px;
  height: 108px;
  padding: 6px 0 0;
  overflow: hidden;
}

.trend__col {
  min-width: 0;
  gap: 5px;
}

.trend__bars {
  gap: 2px;
  height: 72px;
  justify-content: center;
}

.trend__bar {
  width: 5px;
  border-radius: 2px 2px 0 0;
}

.trend__date {
  font-size: 10.5px;
  color: var(--text-4);
  letter-spacing: -.2px;
}

.legend {
  gap: 10px;
  font-size: 11px;
  color: var(--text-4);
  margin-top: 10px;
}

.legend i {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  margin-right: 4px;
}

/* ==========================================================================
   分段控件（客户资源库的「我的私池 / 公共池 / 已成交库」）
   白底选中在浅灰槽里本来靠阴影区分，改成描边后阴影几乎不可见，
   所以选中态改用描边 + 加粗文字 + 主色计数。
   ========================================================================== */

.pool-tab {
  padding: 11px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-3);
}

.pool-tab:hover {
  background: rgba(255, 255, 255, .65);
  color: var(--text-1);
}

.pool-tab.is-active {
  background: var(--bg-surface);
  color: var(--text-1);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(14, 21, 25, .10), 0 0 0 1px var(--stroke-default);
}

.pool-tab.is-active .pool-tab__count {
  color: var(--primary);
  font-weight: 600;
}

/* ==========================================================================
   空状态 / 分隔
   ========================================================================== */

.empty {
  color: var(--text-4);
  font-size: 12.5px;
  padding: 26px 12px;
}

.table-divider {
  background: var(--stroke-subtle);
}

/* 滚动条：细一点，别打断版面 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #C9D3D9;
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #AEBBC3; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 键盘可达：焦点环用主色，别用浏览器默认蓝 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}