/* =====================================================================
   jiaoyi.css — Jiaoyi 站点层 · v2「交易复盘工作台」
   桌面（>1100）：左侧栏导航（同 shop 站「浏览商品」）+ 右侧主区
     主区自上而下 = 页头 → KPI 4 卡 → 工作区【图表（看） ｜ 录入面板（记，吸顶）】
                  → 案例 → 交易记录 → 统计（两卡并排）→ 截图识别（左预览 ｜ 右粘贴）→ 页脚
   ≤1100：侧栏变为顶部品牌条 + 底部固定标签栏（同一个 nav），内容单列
   只引用 tokens.css 变量。
   ===================================================================== */
:root {
  --container: var(--container-jiaoyi);
  --side-pad: var(--space-8);       /* 主区左右内边距（手机 16px） */
}

html { scroll-behavior: smooth; scroll-padding-top: var(--space-6); }

/* ---------- 外壳 ---------- */
.app { position: relative; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; max-width: 1920px; margin: 0 auto; }
/* 侧栏右侧分隔线画在外壳上，随整页高度延伸 */
.app::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--sidebar-w) - 1px); border-left: 1px solid var(--color-border); pointer-events: none; }

.app-side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  z-index: var(--z-header);
}
.app-side .brand { padding: 0 var(--space-2) var(--space-6); }
.app-side__label { padding: 0 var(--space-3) var(--space-1); }
/* 侧栏「录入」= 主流程入口：图标用主操作蓝 */
.side-nav a.is-primary svg { color: var(--color-primary); }

.app-main { min-width: 0; padding: var(--space-8) var(--side-pad) var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }

/* ---------- 页头 + KPI ---------- */
.kpis { --stats-cols: 4; }
.kpis .stat { display: flex; flex-direction: column; gap: var(--space-2); }
.kpis .num--text { font-size: var(--text-lg); line-height: var(--lh-lg); }
#st-pnl[data-sign="pos"] { color: var(--color-success); }
#st-pnl[data-sign="neg"] { color: var(--color-danger); }

/* ---------- 工作区：图表 ｜ 录入面板 ---------- */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); gap: var(--space-5); align-items: start; }
.chart-card { padding: var(--space-5); }
.chart-head { margin-bottom: var(--space-3); align-items: center; }
#chart-status { margin-bottom: var(--space-3); }
.chart-controls { gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.chart-frame { border: 1px solid var(--chart-border); border-radius: var(--radius-md); overflow: hidden; background: var(--chart-bg); }
#chart { height: var(--chart-h); width: 100%; }
#tvwrap { display: none; height: var(--chart-h); }
.chart-legend { margin-top: var(--space-3); }
.dot--ema7  { background: var(--chart-fixed-ema-fast); }
.dot--ema25 { background: var(--chart-fixed-ema-slow); }
.legend__blue { color: var(--chart-fixed-marker-blue); font-weight: var(--fw-medium); }
.legend__red  { color: var(--chart-fixed-marker-red);  font-weight: var(--fw-medium); }
@media (prefers-color-scheme: dark) {
  /* 深色下仅提亮图例文字，图上箭头颜色由 JS 决定不变 */
  .legend__blue { color: #6b8cff; }
  .legend__red  { color: var(--color-danger); }
}
.legend__note { flex-basis: 100%; color: var(--color-text-3); }

/* 录入面板：吸顶，蓝色只用在「保存并打点」 */
.entry-panel { position: sticky; top: var(--space-6); padding: var(--space-5); }
.entry-panel .card__head { margin-bottom: var(--space-4); }
.entry-form { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3) var(--space-3); }
.entry-form .f--half  { grid-column: span 3; }
.entry-form .f--full  { grid-column: 1 / -1; }
.entry-form .f--time  { grid-column: span 4; }
.entry-form .f--price { grid-column: span 2; }
.form-actions { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-top: var(--space-2); }
.form-actions .btn { width: 100%; min-height: max(40px, var(--control-h)); font-size: var(--text-base); }
#form-msg:empty { display: none; }
#form-msg { text-align: center; }

/* ---------- 案例录入 ---------- */
.atas-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.atas-field { flex: 0 1 auto; }
.atas-msg { flex: 1 1 320px; }
#case-grid td { padding: 6px 4px; }
#case-grid td:first-child, #case-grid th:first-child { padding-left: var(--space-3); }
#case-grid th { padding: 10px 6px; }
#case-grid input, #case-grid select {
  width: 100%; min-width: 76px; min-height: var(--control-h-sm);
  padding: 0 8px; border: 1px solid var(--color-border); border-radius: var(--radius-xs);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
#case-grid input:hover, #case-grid select:hover { border-color: var(--color-border-strong); }
#case-grid select { padding-right: 4px; }
#case-grid input[type=datetime-local] { min-width: 176px; }
#case-grid input:focus, #case-grid select:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
#case-grid .ops { white-space: nowrap; padding-right: var(--space-3); }
#case-grid .ops .btn { margin-right: 2px; min-width: 32px; padding: 0 10px; }
.toolbar { margin-top: var(--space-4); gap: var(--space-3); }

/* ---------- 交易记录 ---------- */
#trade-table td { line-height: 1.45; }
#trade-table td:nth-child(3), #trade-table td:nth-child(4) { color: var(--color-text-2); }
#trade-table td:nth-child(5) { font-size: var(--text-base); }
#trade-table [data-del] { color: var(--color-text-2); }
#trade-table [data-del]:hover { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); background: var(--color-danger-soft); }
/* 空记录：表格下方显示占位（CSS :has，纯展示） */
#list-sec .table-scroll:has(tbody:empty)::after {
  content: "还没有记录 · 在上方「录入一笔交易」或下方「截图识别」导入后会出现在这里";
  display: block; padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-3); font-size: var(--text-sm);
}

/* ---------- 统计：两卡并排；胜率列加细进度条（ui.js 写入 --rate，纯展示） ---------- */
.stat-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.stat-card .card__head { min-height: 48px; }
.stat-sec .table th, .stat-sec .table td { padding-left: var(--space-3); padding-right: var(--space-3); }
.stat-sec td[style*="--rate"] { position: relative; padding-bottom: 14px; }
.stat-sec td[style*="--rate"]::after {
  content: ""; position: absolute; left: var(--space-3); bottom: 8px; height: 3px; border-radius: 2px;
  width: calc((100% - 2 * var(--space-3)) * var(--rate)); max-width: calc(100% - 2 * var(--space-3));
  background: var(--color-success);
}
.stat-sec td[style*="--rate"]::before {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 8px; height: 3px; border-radius: 2px;
  background: var(--color-surface-3);
}

/* ---------- 截图识别 ---------- */
.shot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-5); align-items: start; }
.shot-pick { margin-bottom: var(--space-3); }
.shot-frame { position: relative; min-height: 220px; border-radius: var(--radius-lg); border: 1px dashed var(--color-border-strong); background: var(--color-surface-2); overflow: hidden; display: grid; place-items: center; }
#shot-preview { max-width: 100%; display: none; }
#shot-preview[style*="block"] { width: 100%; }
.shot-frame:has(#shot-preview[style*="block"]) { border-style: solid; border-color: var(--color-border); background: var(--color-surface); }
.shot-placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text-3); font-size: var(--text-sm); }
.shot-placeholder svg { width: 32px; height: 32px; }
#shot-preview[style*="block"] + .shot-placeholder { display: none; }
textarea.code { font-family: var(--font-mono); font-size: var(--text-xs); min-height: 220px; height: 268px; }
.shot-col .toolbar { margin-top: var(--space-3); }

.site-footer { padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

/* Lightweight Charts 自带的 TradingView 署名角标（库注入的 a#tv-attr-logo）：扩大可点区域到 44px，视觉不变 */
#chart #tv-attr-logo { box-sizing: content-box; padding: 13px 5px; margin: -13px -5px; background-clip: content-box; }

/* =================== 宽屏以下：录入面板落到图表下方 =================== */
@media (max-width: 1280px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .entry-panel { position: static; }
  /* 两行：① 品种 · 方向 · 策略 · 备注 ② 进场时间 · 进场价 · 出场时间 · 出场价（用 order 重排，不动 DOM） */
  .entry-form { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .entry-form .f--half, .entry-form .f--full { grid-column: span 3; order: 1; }
  .entry-form .f--time { grid-column: span 4; order: 2; }
  .entry-form .f--price { grid-column: span 2; order: 2; }
  .entry-form .form-actions { order: 3; }
  .form-actions { flex-direction: row; align-items: center; }
  .form-actions .btn { width: auto; min-width: 160px; }
  #form-msg { text-align: left; }
}

/* =================== ≤1100：顶栏 + 底部标签栏 =================== */
@media (max-width: 1100px) {
  html { scroll-padding-top: var(--space-4); }
  .app { grid-template-columns: minmax(0, 1fr); }
  .app::before { display: none; }
  .app-side {
    position: static; height: auto; overflow: visible; flex-direction: row; align-items: center;
    padding: var(--space-4) var(--side-pad); border-right: 0; border-bottom: 1px solid var(--color-border);
  }
  .app-side .brand { padding: 0; }
  .app-side__label { display: none; }
  .side-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
    flex-direction: row; gap: 0; justify-content: space-around;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 var(--space-1) env(safe-area-inset-bottom, 0px);
    background: var(--color-surface); border-top: 1px solid var(--color-border);
  }
  .side-nav a {
    flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px;
    min-height: var(--tabbar-h); padding: 0 2px; border-radius: 0; background: transparent !important;
    font-size: 11px; line-height: 1.2; color: var(--color-text-3); text-align: center;
  }
  .side-nav a span { white-space: nowrap; }
  .side-nav a svg { width: 22px; height: 22px; padding: 0; }
  .side-nav a.is-current, .side-nav a[aria-current="true"] { color: var(--color-text); }
  .side-nav a.is-current svg { color: var(--color-text); }
  .side-nav a.is-current::before { content: ""; position: absolute; top: 0; width: 24px; height: 2px; border-radius: 0 0 2px 2px; background: var(--color-ink); }
  .side-nav a { position: relative; }
  .app-main { padding-bottom: calc(var(--tabbar-h) + var(--space-8) + env(safe-area-inset-bottom, 0px)); }
  .stat-sec { grid-template-columns: minmax(0, 1fr); }
}

/* =================== ≤760：手机 =================== */
@media (max-width: 760px) {
  :root { --side-pad: var(--space-4); }
  .app-main { padding-top: var(--space-5); gap: var(--space-4); }
  .page-head__title { font-size: var(--text-3xl); }
  .kpis { --stats-cols: 2; gap: var(--space-2); }
  .kpis .stat { padding: var(--space-3) var(--space-4); gap: var(--space-1); }
  .kpis .num { font-size: var(--text-xl); }
  .kpis .num--text { font-size: var(--text-base); }
  .chart-card { padding: var(--space-3); }
  .chart-head { margin-bottom: var(--space-2); }
  #chart-status { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
  .status-bar::before { margin-top: 6px; }
  .chart-controls .seg { flex: 1 1 100%; }
  .chart-controls .seg button { flex: 1 1 0; padding: 0 var(--space-2); }
  .chart-frame { margin: 0 calc(-1 * var(--space-3)); border-radius: 0; border-left: 0; border-right: 0; }
  .entry-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-form .f--half { grid-column: span 1; }
  .entry-form .f--full, .entry-form .f--time, .entry-form .f--price { grid-column: 1 / -1; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .card__actions { width: 100%; }
  .card__actions .btn { flex: 1 1 0; }
  .chart-head { flex-wrap: nowrap; }
  .chart-head .card__actions { width: auto; }
  .chart-head > :first-child { flex: 1 1 auto; }
  .stat-sec .table th, .stat-sec .table td { padding-left: 10px; padding-right: 10px; }
  /* 交易记录：手机上每笔交易变成一张两行小卡（只改展示；整行点击跳图、删除按钮行为不变） */
  #list-sec .table-scroll { border: 0; background: transparent; overflow: visible; }
  #trade-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #trade-table, #trade-table tbody { display: block; }
  #trade-table tbody tr {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px var(--space-3);
    grid-template-areas: "sym side pnl" "entry exit del" "tag note note";
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
  }
  #trade-table tbody tr td { padding: 0; border: 0; white-space: normal; }
  #trade-table td:nth-child(1) { grid-area: sym; font-weight: var(--fw-semibold); }
  #trade-table td:nth-child(2) { grid-area: side; color: var(--color-text-2); }
  #trade-table td:nth-child(3) { grid-area: entry; font-size: var(--text-xs); }
  #trade-table td:nth-child(4) { grid-area: exit; font-size: var(--text-xs); }
  #trade-table td:nth-child(3)::before { content: "进场 "; color: var(--color-text-3); }
  #trade-table td:nth-child(4)::before { content: "出场 "; color: var(--color-text-3); }
  #trade-table td:nth-child(5) { grid-area: pnl; text-align: right; font-size: var(--text-lg); }
  #trade-table td:nth-child(6) { grid-area: tag; }
  #trade-table td:nth-child(7) { grid-area: note; color: var(--color-text-2); font-size: var(--text-xs); }
  #trade-table td:nth-child(8) { grid-area: del; justify-self: end; }
  #trade-table tr.trade:hover td:first-child { box-shadow: none; }
  #trade-table tbody tr:hover { border-color: var(--color-border-strong); }
  .atas-row { padding: var(--space-3); }
  .shot-grid { grid-template-columns: minmax(0, 1fr); }
  .shot-frame { min-height: 140px; }
  textarea.code { height: 200px; min-height: 160px; }
}