/* 看板、回到刚才那段、翻页、读表卡片。从 A2_styles.css 拆出来, 页面按顺序加载。 */

/* ---------------- 看板 ---------------- */

/**
 用户自己拼的一版: 几格、每格是哪张图。每格就是一张普通的图表卡片, 所以样式全都复用,
 这里只管排版。窄屏一格一行 —— 两列挤在手机上谁都看不清。
 */
.dash-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 2px 0 10px;
  font-size: 15px;
}
.dash-meta { font-size: 12px; color: var(--text-muted); }
.dash-grid { display: grid; gap: 12px; align-items: start; }
/** 行是自己一个 grid: 各行格数和宽度比例都可以不一样, 一个大 grid 排不出来 */
.dash-row { display: grid; gap: 12px; min-width: 0; min-height: 0; }
.dash-cell { min-width: 0; }
.dash-cell .card { margin: 0; }
.item-icon.dash { background: rgba(42, 120, 214, 0.18); color: #8fbcff; }

@media (max-width: 900px) {
  /**
   窄屏一格一行。行高比例也要一起放掉: 比例是按"整屏放得下"定的, 竖着堆起来之后
   再按 4fr / 6fr 分高度, 格子只剩几十像素。
   */
  .dash-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  .dash-row { grid-template-columns: 1fr !important; }
}

/**
 卡住了那张卡。用暖色不用红色: 这不是报错弹窗, 是"我卡住了, 你知道的话说一句"。
 红色会让人以为出了大事, 而多数时候只是列名对不上。
 */
.trouble {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warm);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  padding: 12px 14px;
  margin: 10px 0;
  font-size: 13.5px;
}
.trouble-label { font-size: 12px; font-weight: 600; color: var(--warm); margin-bottom: 5px; }
.trouble-detail { margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.trouble-detail summary { cursor: pointer; }
.trouble-err { margin: 6px 0; color: var(--text-secondary); word-break: break-word; }

/**
 看板占满主区那一屏, 不往下翻 —— 翻页的看板等于把图藏起来。
 每格的高度由 JS 按可用高度算出来写进 spec, 这里只负责不让它滚。
 手机上放弃"一屏": 六格挤进一个手机屏, 每格只剩几十像素, 那不如让它滚。
 */
#canvas.dash-mode {
  overflow: hidden;
  /** 看板要像看板, 不像网页: 深底, 图浮在上面。这块底色跟顶栏侧栏是同一族深蓝 */
  background: linear-gradient(160deg, #14162f 0%, #171734 55%, #1b1539 100%);
  padding: 18px 20px 20px;
}
/** 对话区是 880 的窄栏(读字舒服), 看板要整个主区的宽度, 挤在中间就不是看板了 */
#canvas.dash-mode #stream {
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#canvas.dash-mode #stream > * { animation: none; }
/**
 align-items 要 stretch。基础那条 .dash-grid 是 start(对话里那种一格一格往下排),
 看板里 start 会让每格只有内容那么高: 一行 348 的位置只用了 211, 图缩成一条,
 下面空一大块。实测就是这个。
 */
#canvas.dash-mode .dash-grid { flex: 1; min-height: 0; align-items: stretch; }
/** 同上, 行这一层也要 stretch, 否则一行里矮的那格不跟着长高 */
#canvas.dash-mode .dash-row { min-height: 0; align-items: stretch; }
/**
 每一格都不许被内容撑开: 撑开就顶穿下一行(实测四格重叠)。
 卡片竖着分三段 —— 标题固定高, 图框吃掉剩下的, 数据表格是折叠的不占位。
 */
#canvas.dash-mode .dash-cell { min-height: 0; overflow: hidden; }
#canvas.dash-mode .dash-cell .card {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
/**
 一行四格时格子只有 210 上下, 卡片标题("West Region Sales Trend")会折成四行,
 169 高的格子里标题占 110、图只剩 57。所以看板里标题压成一行、超出打点,
 完整那句留在 title 属性里(鼠标停上去看得到)。

 四个按钮(Data / Save / Excel / 换一张)是把标题挤窄的那一半, 平时收起来,
 鼠标移到这一格再出来 —— 看板是拿来看的, 每格四个按钮同时亮着也吵。
 */
#canvas.dash-mode .dash-cell .card-head {
  flex: 0 0 auto;
  padding: 9px 12px;
  position: relative;
}
#canvas.dash-mode .dash-cell .card-title {
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/**
 按钮要脱离文档流, 只把 opacity 归零仍然占着 200 宽 —— 214 的格子里标题就什么都不剩了。
 悬浮成一颗药丸盖在标题右端: 底色做成半透明深色而不是去凑卡片色, 卡片压在一条渐变背景上,
 写死任何一个 hex 都会在另一头露出色差。做成明显浮起来的一块, 色差就不是瑕疵。
 */
#canvas.dash-mode .dash-cell .card-tools {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(12, 13, 30, 0.86);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.12s;
}
#canvas.dash-mode .dash-cell:hover .card-tools,
#canvas.dash-mode .dash-cell:focus-within .card-tools { opacity: 1; }
#canvas.dash-mode .dash-cell .chart-box { flex: 1; min-height: 0; overflow: hidden; }
#canvas.dash-mode .dash-cell .table-wrap { max-height: 40%; }
#canvas.dash-mode .card-title { color: var(--side-ink); }
#canvas.dash-mode .card-meta,
#canvas.dash-mode .dash-meta,
#canvas.dash-mode .dash-note,
#canvas.dash-mode .hint { color: var(--side-dim); }
#canvas.dash-mode .dash-head { color: var(--side-ink); margin: 0 0 2px; }
#canvas.dash-mode .chip {
  color: var(--side-dim);
  background: var(--side-wash);
  border-color: var(--side-faint);
}
#canvas.dash-mode .chip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
/** 深底上表格的字要跟着亮, 不然点开"数据"是一片黑 */
#canvas.dash-mode table th, #canvas.dash-mode table td { color: var(--side-ink); }
#canvas.dash-mode table th { border-bottom-color: rgba(255, 255, 255, 0.14); }
#canvas.dash-mode table tr { border-bottom-color: rgba(255, 255, 255, 0.07); }

@media (max-width: 900px) {
  /** 手机上放弃"一屏": 六格挤进去每格只剩几十像素, 那不如让它滚 */
  #canvas.dash-mode { overflow: auto; }
  #canvas.dash-mode #stream { height: auto; }
}
/** 看板上方那句话: 拼这版时 agent 说的一句, 切过去之后别让它丢了 */
.dash-note { font-size: 13px; color: var(--text-secondary); margin: -4px 0 10px; }

/** 历史那一页: 整行可点, 悬上去给个反馈, 不然看不出能点 */
.hist-row.clickable { cursor: pointer; transition: border-color 0.14s, background 0.14s; }
.hist-row.clickable:hover { border-color: var(--accent); background: var(--accent-soft); }
/** 表头自动改过之后那一句: 淡一点, 后面跟一个「换一行」 */
.header-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/**
 看板里的窄格子。标题和按钮抢一行时, 标题被挤成竖排、按钮被裁一半 —— 五格一行就会这样。
 窄格子只留「数据」, 别的按钮在卡片右上角的 vega 菜单里也够用。
 */
#canvas.dash-mode .dash-cell .card-head { flex-wrap: nowrap; gap: 6px; }
#canvas.dash-mode .dash-cell .card-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
#canvas.dash-mode .dash-cell .card-tools { flex: 0 0 auto; }
#canvas.dash-mode .dash-cell.tight .chip-fav,
#canvas.dash-mode .dash-cell.tight .chip-xlsx,
#canvas.dash-mode .dash-cell.tight .chip-wish { display: none; }

/* 从一段历史回到刚才聊到一半的那一段 */
.pane-back {
  color: #4f46e5; cursor: pointer; text-decoration: none;
  border-bottom: 1px solid rgba(79, 70, 229, .35);
}
.pane-back:hover { border-bottom-color: #4f46e5; }

/* 表格卡片下面那条翻页 */
.pager {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f6;
}
.pager-info { color: #7a879c; font-size: 12.5px; }
.pager .chip:disabled { opacity: .4; cursor: default; }
.table-box { overflow-x: auto; }

/* 读表那张卡片 */
.st-card .card-head { font-weight: 600; }
.st-body { padding: 4px 2px; }
.st-goal { margin: 6px 0 12px; font-size: 14px; line-height: 1.7; }
.st-label { color: #7a879c; font-size: 12.5px; margin-right: 8px; }
.st-none { color: #5b6b86; font-size: 14px; padding: 8px 0; }
.st-issue { border-top: 1px solid #eef1f6; padding: 11px 0; }
.st-issue-row { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.st-issue-row input { margin-top: 4px; width: 16px; height: 16px; accent-color: #4f46e5; }
.st-issue-main { flex: 1; min-width: 0; }
.st-issue-title { font-size: 14.5px; color: #1f2937; line-height: 1.6; }
.st-issue-meta { color: #7a879c; font-size: 12.5px; line-height: 1.7; margin-top: 3px; }
.st-preview, .st-done { margin-top: 12px; display: flex; flex-wrap: wrap;
  gap: 6px; align-items: center; }
.st-chip { background: #f1f4fa; color: #47536b; border-radius: 20px;
  padding: 2px 10px; font-size: 12px; }
.st-note { color: #7a879c; font-size: 12.5px; margin-top: 8px; }
.st-fail { color: #b91c1c; font-size: 13px; margin-top: 8px; }
.st-actions { margin-top: 14px; display: flex; gap: 10px; align-items: center; }