/*
 * 通达信副图插件 - 公共样式 (Terminal Design System)
 * 专为高密度、长时间注视的深色环境设计
 * 所有模块页面通过 <link> 引用此文件
 */

/* ================= CSS变量 ================= */
:root {
  /* --- 1. 背景色系统 (深色低对比) --- */
  --bg-app: #0E1015;
  --bg-panel: #15181E;
  --bg-hover: #21262E;
  --bg-border: #2B303B;

  /* --- 2. 文字色系统 --- */
  --text-primary: #DDE2E8;
  --text-secondary: #8A939E;
  --text-muted: #4A5361;

  /* --- 3. A股信号色系统 --- */
  --up-color: #E6413A;
  --up-bg: rgba(230, 65, 58, 0.15);
  --down-color: #28A745;
  --down-bg: rgba(40, 167, 69, 0.15);
  --limit-up-color: #FF5E56;
  --broken-color: #D9A400;
  --broken-bg: rgba(217, 164, 0, 0.15);

  /* --- 4. 交互色 (禁止用红绿) --- */
  --accent: #3685DF;
  --accent-hover: #4B9BEE;
  --accent-bg: rgba(54, 133, 223, 0.15);

  /* --- 5. 字号系统 (全局提升1-2px) --- */
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-lg: 13px;
  --fs-xl: 14px;
}

/* ================= 全局重置 ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.4;
}

/* ================= 数字等宽 (防跳动) ================= */
.num, .price, .percent, td[data-type="number"], .tabular-nums {
  font-family: Arial, Consolas, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ================= 信号色通用类 ================= */
.up  { color: var(--up-color) !important; font-weight: 700; }
.dn  { color: var(--down-color) !important; font-weight: 700; }
.flat { color: var(--text-secondary); font-weight: 700; }

.is-up { color: var(--up-color) !important; }
.is-down { color: var(--down-color) !important; }
.is-limit-up { color: var(--limit-up-color) !important; background: var(--up-bg); padding: 1px 4px; border-radius: 2px; }
.is-broken { color: var(--broken-color) !important; }

/* ================= 通用组件 ================= */

/* 标签 */
.tag { display: inline-block; padding: 1px 4px; border-radius: 2px; font-size: var(--fs-xs); font-weight: normal; white-space: nowrap; }
.tag-up { background: var(--up-bg); color: var(--up-color); border: 1px solid var(--up-color); }
.tag-dn { background: var(--down-bg); color: var(--down-color); border: 1px solid var(--down-color); }
.tag-warn { background: var(--broken-bg); color: var(--broken-color); border: 1px solid var(--broken-color); }
.tag-info { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); }

/* 徽章 */
.badge { display: inline-block; font-size: 9px; padding: 1px 4px; border-radius: 2px; font-weight: normal; }

/* 工具栏 */
.toolbar { display: flex; align-items: flex-end; height: 28px; padding: 0 8px; background: var(--bg-panel); border-bottom: 1px solid var(--bg-border); gap: 16px; flex-shrink: 0; }
.toolbar .title { font-size: var(--fs-md); font-weight: normal; color: var(--accent); margin-bottom: 4px; }
.toolbar .time { margin-left: auto; color: var(--text-muted); font-size: var(--fs-xs); font-weight: normal; margin-bottom: 4px; }
.toolbar .refresh-btn { cursor: pointer; padding: 1px 6px; background: var(--bg-app); border: 1px solid var(--bg-border); border-radius: 2px; color: var(--text-secondary); font-size: var(--fs-sm); transition: all .1s; margin-bottom: 4px; display: inline-flex; align-items: center; justify-content: center; }
.toolbar .refresh-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* 空状态 */
.empty { text-align: center; color: var(--text-muted); padding: 40px; font-size: var(--fs-md); }
.loading { text-align: center; color: var(--text-muted); padding: 24px; font-size: var(--fs-md); }

/* 卡片 */
.card { padding: 8px 12px; border-bottom: 1px solid var(--bg-border); transition: background .1s; }
.card:hover { background: var(--bg-hover); }

/* ================= 极简滚动条 ================= */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ================= ECharts tooltip统一 ================= */
.echarts-tooltip {
  background: var(--bg-panel) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: 2px !important;
  color: var(--text-primary) !important;
  font-size: var(--fs-md) !important;
  padding: 8px 12px !important;
  pointer-events: none !important;
}