/*!
 * docsify-dtable v1.0.0 — 增强表格插件样式
 *
 * 设计要点：
 *   1. 所有规则均以 .markdown-section .dtable-scope 为前缀，选择器优先级
 *      高于 docsify-themeable 的原生表格规则（.markdown-section table 等），
 *      不使用 !important，不污染主题对普通表格的渲染。
 *   2. 颜色全部引用 docsify-themeable 的 CSS 变量（--base-*、--mono-*、
 *      --theme-*），因此亮色 / 暗色主题（theme-simple / theme-simple-dark）
 *      可自动适配，无需额外配置。
 *   3. 支持通过 .dtable-scope 上的 --dt-* 变量做局部定制。
 */

/* ======================================================================
 * 变量定义（.dtable-scope 容器与筛选浮层共享）
 * ==================================================================== */
.markdown-section .dtable-scope,
.dtable-popover {
  --dt-bg: var(--base-background-color, #fff);
  --dt-text-color: var(--base-color, #364149);
  --dt-strong-color: var(--strong-color, var(--dt-text-color));
  --dt-muted-color: var(--mono-tint1, #909399);
  --dt-border-color: var(--table-cell-border-color, var(--mono-tint2, #dcdfe6));
  --dt-accent: var(--theme-color, #42b983);
  --dt-radius: var(--border-radius-m, 4px);
  --dt-font-size: 0.85em;
  /* 以下两个变量采用双层声明：不支持 color-mix 的旧浏览器回退到第一行的固定色 */
  --dt-th-bg: #f7f8f9;
  --dt-th-bg: color-mix(in srgb, var(--dt-text-color) 4%, var(--dt-bg));
  --dt-stripe-bg: var(--table-row-odd-background, rgba(0, 0, 0, 0.028));
  --dt-hover-bg: #f5f7fa;
  --dt-hover-bg: color-mix(in srgb, var(--dt-accent) 7%, var(--dt-bg));
  --dt-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

/* ======================================================================
 * 容器
 * ==================================================================== */
.markdown-section .dtable-scope {
  position: relative;
  margin: 1.25em 0;
}

/* 工具栏：计数 + 搜索框 */
.markdown-section .dtable-scope .dtable-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0.6em;
}

.markdown-section .dtable-scope .dtable-count {
  font-size: 0.86em;
  color: var(--dt-muted-color);
}

.markdown-section .dtable-scope .dtable-search {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--dt-border-color);
  border-radius: var(--dt-radius);
  padding: 3px 9px;
  background: var(--dt-bg);
  width: 200px;
  max-width: 100%;
  transition: width 0.2s ease, border-color 0.2s ease;
}

.markdown-section .dtable-scope .dtable-search:focus-within {
  width: 260px;
  border-color: var(--dt-accent);
}

.markdown-section .dtable-scope .dtable-search > svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--dt-muted-color);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.markdown-section .dtable-scope .dtable-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dt-text-color);
  font-family: inherit;
}

.markdown-section .dtable-scope .dtable-search-input::placeholder {
  color: var(--dt-muted-color);
}

/* 滚动容器：固定表头的滚动上下文（max-height 由 JS 按配置注入） */
/* 外框只画上、左两条：右、下由单元格自身的 border-right / border-bottom 补齐，
   避免容器边框与单元格边框叠加成 2px 粗线，保证四条外缘粗细一致（各 1px） */
.markdown-section .dtable-scope .dtable-scroll {
  overflow: auto;
  border: 1px solid var(--dt-border-color);
  /* border-right: none; */
  /* border-bottom: none; */
  border-radius: var(--dt-radius);
}

/* ======================================================================
 * 表格本体 —— 覆盖 themeable 的 .markdown-section table 规则
 * ==================================================================== */
.markdown-section .dtable-scope table {
  display: table;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  border-collapse: separate; /* sticky 表头必须使用 separate */
  border-spacing: 0;
  background: transparent;
  font-size: var(--dt-font-size);
  line-height: 1.6;
}

.markdown-section .dtable-scope th,
.markdown-section .dtable-scope td {
  box-sizing: border-box;
  padding: 8px 13px;
  /* border: none 必不可少：docsify-themeable 对 td 设了
     border-width: 1px 0（上下各 1px），本插件原先只声明了 right/bottom，
     未清零的 border-top 会透传生效，在 separate 布局下与上一行单元格的
     border-bottom 叠加为 2px —— 表现为横向线明显比纵向线粗 */
  border: none;
  border-right: 1px solid var(--dt-border-color);
  border-bottom: 1px solid var(--dt-border-color);
  background: var(--dt-bg);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.markdown-section .dtable-scope tbody tr {
  background: var(--dt-bg);
}

/* 斑马纹（由 JS 依据可见行序号注入 .dtable-alt，规避 display:none 行干扰 nth-child） */
.markdown-section .dtable-scope tbody tr.dtable-alt {
  background: var(--dt-stripe-bg);
}

.markdown-section .dtable-scope tbody tr.dtable-alt > td,
.markdown-section .dtable-scope tbody tr.dtable-alt > th {
  background: transparent;
}

.markdown-section .dtable-scope tbody tr:hover > td,
.markdown-section .dtable-scope tbody tr:hover > th {
  background: var(--dt-hover-bg);
}

/* 表头 */
.markdown-section .dtable-scope thead th {
  background: var(--dt-th-bg);
  color: var(--dt-strong-color);
  font-weight: 600;
  border-bottom: 2px solid var(--dt-border-color);
}

/* 固定表头：sticky（多行表头的行偏移 --dt-sticky-top 由 JS 计算注入） */
.markdown-section .dtable-scope[data-mode="scroll"] thead th {
  position: sticky;
  top: var(--dt-sticky-top, 0);
  z-index: 3;
}

.markdown-section .dtable-scope[data-mode="scroll"].is-scrolled thead th {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 表尾统计行：吸底 */
.markdown-section .dtable-scope[data-mode="scroll"] tfoot td,
.markdown-section .dtable-scope[data-mode="scroll"] tfoot th {
  position: sticky;
  bottom: var(--dt-sticky-bottom, 0);
  z-index: 3;
  background: var(--dt-th-bg);
  border-top: 2px solid var(--dt-border-color);
  border-bottom: none;
  font-weight: 600;
}

/* 数字列自动右对齐（JS 按列类型注入 .dtable-num） */
.markdown-section .dtable-scope th.dtable-num,
.markdown-section .dtable-scope td.dtable-num {
  text-align: right;
}

/* 空态 */
.markdown-section .dtable-scope .dtable-empty-row td {
  text-align: center;
  color: var(--dt-muted-color);
  padding: 2em 1em;
}

/* 搜索关键词高亮（JS 仅包裹文本节点，不破坏单元格内既有标签） */
.markdown-section .dtable-scope mark.dtable-mark {
  background: rgba(66, 185, 131, 0.25);
  background: color-mix(in srgb, var(--dt-accent) 25%, transparent);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* 表头内代码、行内元素继承 */
.markdown-section .dtable-scope th code,
.markdown-section .dtable-scope td code {
  font-size: 0.9em;
}

/* ======================================================================
 * 表头交互控件（排序 / 筛选按钮）
 * ==================================================================== */
.markdown-section .dtable-scope .dtable-hcell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  vertical-align: middle;
}

.markdown-section .dtable-scope .dtable-hlabel {
  /* min-width: 0 必不可少：flex 子项默认 min-width: auto，
     配合 nowrap 时文字无法收缩，会溢出到排序/筛选按钮下方 */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
}

.markdown-section .dtable-scope th.dtable-sortable {
  cursor: pointer;
  user-select: none;
}

.markdown-section .dtable-scope th.dtable-sortable:hover {
  color: var(--dt-accent);
}

.markdown-section .dtable-scope .dtable-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--dt-muted-color);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.markdown-section .dtable-scope .dtable-btn:hover {
  opacity: 1;
  color: var(--dt-accent);
}

.markdown-section .dtable-scope .dtable-btn > svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.markdown-section .dtable-scope .dtable-sort-btn > svg path {
  opacity: 0.45;
}

.markdown-section .dtable-scope th.is-sorted-asc .dtable-sort-btn > svg .dtable-sort-up,
.markdown-section .dtable-scope th.is-sorted-desc .dtable-sort-btn > svg .dtable-sort-down {
  opacity: 1;
}

.markdown-section .dtable-scope th.is-sorted-asc .dtable-sort-btn,
.markdown-section .dtable-scope th.is-sorted-desc .dtable-sort-btn {
  opacity: 1;
  color: var(--dt-accent);
}

.markdown-section .dtable-scope th.is-filtered .dtable-filter-btn,
.markdown-section .dtable-scope .dtable-filter-btn.is-open {
  opacity: 1;
  color: var(--dt-accent);
}

.markdown-section .dtable-scope th.is-filtered {
  color: var(--dt-accent);
}

/* ======================================================================
 * 底部：分页器 + 每页条数
 * ==================================================================== */
.markdown-section .dtable-scope .dtable-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.6em;
}

.markdown-section .dtable-scope .dtable-pager {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.markdown-section .dtable-scope .dtable-page-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--dt-border-color);
  border-radius: var(--dt-radius);
  background: var(--dt-bg);
  color: var(--dt-text-color);
  font-size: 13px;
  line-height: 26px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.markdown-section .dtable-scope .dtable-page-btn:hover:not(:disabled):not(.is-active) {
  border-color: var(--dt-accent);
  color: var(--dt-accent);
}

.markdown-section .dtable-scope .dtable-page-btn.is-active {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
  color: #fff;
  cursor: default;
}

.markdown-section .dtable-scope .dtable-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.markdown-section .dtable-scope .dtable-page-ellipsis {
  color: var(--dt-muted-color);
  padding: 0 2px;
}

.markdown-section .dtable-scope .dtable-pagesize-select {
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--dt-border-color);
  border-radius: var(--dt-radius);
  background: var(--dt-bg);
  color: var(--dt-text-color);
  font-size: 13px;
  cursor: pointer;
}

/* ======================================================================
 * 筛选浮层（挂载于 body，使用 fixed 定位）
 * ==================================================================== */
.dtable-popover {
  position: fixed;
  z-index: 999;
  display: none;
  flex-direction: column;
  min-width: 180px;
  max-width: 300px;
  border: 1px solid var(--dt-border-color);
  border-radius: 6px;
  background: var(--dt-bg);
  box-shadow: var(--dt-shadow);
  font-size: 13px;
  color: var(--dt-text-color);
}

.dtable-popover .dtable-pop-search {
  padding: 8px 8px 4px;
}

.dtable-popover .dtable-pop-search input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--dt-border-color);
  border-radius: var(--dt-radius);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--dt-text-color);
  background: var(--dt-bg);
  outline: none;
}

.dtable-popover .dtable-pop-search input:focus {
  border-color: var(--dt-accent);
}

.dtable-popover .dtable-pop-list {
  max-height: 264px;
  overflow: auto;
  padding: 6px;
}

.dtable-popover .dtable-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--dt-radius);
  cursor: pointer;
  white-space: nowrap;
}

.dtable-popover .dtable-pop-item:hover {
  background: var(--dt-hover-bg);
}

.dtable-popover .dtable-pop-item input[type="checkbox"] {
  flex: none;
  accent-color: var(--dt-accent);
  margin: 0;
}

.dtable-popover .dtable-pop-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dtable-popover .dtable-pop-cnt {
  flex: none;
  color: var(--dt-muted-color);
  font-size: 12px;
}

.dtable-popover .dtable-pop-none {
  padding: 12px;
  text-align: center;
  color: var(--dt-muted-color);
}

.dtable-popover .dtable-pop-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-top: 1px solid var(--dt-border-color);
}

.dtable-popover .dtable-pop-info {
  color: var(--dt-muted-color);
  font-size: 12px;
}

.dtable-popover .dtable-pop-clear {
  border: none;
  background: transparent;
  color: var(--dt-accent);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}

.dtable-popover .dtable-pop-clear:hover {
  text-decoration: underline;
}

/* ======================================================================
 * 移动端
 * ==================================================================== */
@media (max-width: 600px) {
  .markdown-section .dtable-scope .dtable-search,
  .markdown-section .dtable-scope .dtable-search:focus-within {
    width: 100%;
  }

  .markdown-section .dtable-scope .dtable-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .markdown-section .dtable-scope .dtable-footer {
    justify-content: center;
  }
}

/* ======================================================================
 * 打印：隐藏交互组件，仅输出表格内容
 * ==================================================================== */
@media print {
  .markdown-section .dtable-scope .dtable-toolbar,
  .markdown-section .dtable-scope .dtable-footer {
    display: none !important;
  }

  .markdown-section .dtable-scope .dtable-scroll {
    max-height: none !important;
    overflow: visible !important;
  }
}