/* 只看不填的表格在手机上“一行一条”（docs/界面规范.md 五）。三站共用，布局最后加载它（在页面样式之后）。

   760px 以下，外框写了 stack-table 的表格不再是列：每一行变成一条——
   - 第一行：序号或勾选框（stack-lead，必须是一行的第一格）、标题（stack-title）、状态（stack-badge）；
   - 标题下面的小字（stack-sub）；
   - 其余每格一行“标签 值”：标签是该格的 data-label（同列表头），挂在左边一栏，值折行时第二行和值对齐；
   - 长内容（stack-wide）标签在上、值占满一行；
   - 链接和按钮放最后（stack-actions），放不下时换行；没有可做的事的格子再加 stack-empty，手机上整格不显示。
   标签栏默认 4em；表头更长时在外框上写 style="--stack-label: 5em"。每一条的文字从本站表格首列那条线开始
   （--stack-pad 取 --ui-gutter：管理端 20/14、学员 16/20、平台与办公 24/16；卡片里的面板改用 --ui-panel）。

   不用 :has()、subgrid：近 90 天约四成答卷来自钉钉安卓 U4 内核（报 Chrome/100，两者都不支持）。
   所以“第一行有没有状态”“表头里有没有全选框”都靠模板写的 class 判断，不靠浏览器去找。
   页面自己的表格规则更具体（列宽、居中、最小宽度），只有这里知道表格已经堆叠，所以断点里的重置带 !important。 */

.stack-table {
  --stack-label: 4em;
  --stack-pad: var(--ui-gutter);
  --stack-line: var(--ui-line-soft);
  --stack-muted: var(--ui-muted);
}

.ui-panel .stack-table,
.stack-table.in-panel {
  --stack-pad: var(--ui-panel);
}

@media (max-width: 760px) {
  .stack-table table,
  .stack-table thead,
  .stack-table tbody,
  .stack-table tfoot {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* 表头：只留写了 stack-lead 的“全选本页”，它的字取 data-label */
  .stack-table thead tr {
    display: block !important;
  }
  .stack-table thead tr > * {
    display: none !important;
  }
  .stack-table thead tr > .stack-lead {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: var(--ui-tap);
    align-items: center;
    gap: 12px;
    padding: 6px var(--stack-pad) !important;
    background: none !important;
    color: var(--stack-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left !important;
    white-space: normal !important;
  }
  .stack-table thead .stack-lead::after {
    content: attr(data-label);
  }
  .stack-table thead .stack-lead > input {
    margin: 0;
  }

  /* AT-06-311：员工页全选已放在表格外；锁定页也没有表头控件。
     两页手机表头整块隐藏，桌面列标题及其他页面的表头全选仍保留。 */
  .page-staff .stack-table thead,
  .page-login-locks .stack-table thead {
    display: none !important;
  }

  /* 每一条：三栏网格（序号/勾选 · 标题 · 状态），其余格子占满一行 */
  .stack-table tbody > tr,
  .stack-table tfoot > tr {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 12px;
    padding: 12px var(--stack-pad);
    border-top: 1px solid var(--stack-line);
    background: none;
  }
  .stack-table tbody > tr > *,
  .stack-table tfoot > tr > * {
    display: block !important;
    grid-column: 1 / -1;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  /* 行的底色保留：危险行、待核对行 */
  .stack-table tbody > tr.is-danger {
    background: var(--ui-danger-soft);
  }
  .stack-table tbody > tr.is-warn {
    background: var(--ui-warn-soft);
  }
  /* 外框自己画了上边线（卡片贴边、表头留着全选框），第一条不再画线；外框写 stack-flush-top */
  .stack-table.stack-flush-top tbody > tr:first-child {
    border-top: 0;
  }

  /* 标签与值：标签挂在格子的左内边距里，和值的第一行同一基线，值折行时与自己对齐 */
  .stack-table tbody > tr > [data-label]:not(.stack-wide):not(.stack-lead):not(.stack-title):not(.stack-badge):not(.stack-sub):not(.stack-actions) {
    padding-left: calc(var(--stack-label) + 12px) !important;
  }
  .stack-table tbody > tr > [data-label]:not(.stack-lead):not(.stack-title):not(.stack-badge):not(.stack-sub):not(.stack-actions)::before {
    display: inline-block;
    width: var(--stack-label);
    margin: 0 12px 0 calc(-12px - var(--stack-label));
    color: var(--stack-muted);
    content: attr(data-label);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
    white-space: normal;
  }
  /* 放着控件（开关、勾选框）的格子：标签与控件中线对齐；模板给这格加 stack-control */
  .stack-table tbody > tr > .stack-control {
    display: flex !important;
    align-items: center;
  }
  .stack-table tbody > tr > .stack-control::before {
    flex: none;
  }
  /* 长内容（题目、作答、审计详情）：标签在上，值占满一行。选择器写到与上面标签规则同样的优先级再多一类，
     否则负外边距清不掉、标签被挤到屏幕左外（WP-1.7 请求、SQ-W18-05） */
  .stack-table tbody > tr > [data-label].stack-wide:not(.stack-lead):not(.stack-title):not(.stack-badge):not(.stack-sub):not(.stack-actions)::before {
    display: block;
    width: auto;
    margin: 0 0 2px;
  }

  /* 第一行：序号或勾选框、标题、状态，同一基线 */
  .stack-table tbody > tr > .stack-lead {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
  }
  .stack-table tbody > tr > .stack-lead > input {
    margin: 0;
    vertical-align: middle;
  }
  .stack-table tbody > tr > .stack-title {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: baseline;
    font-weight: 600;
  }
  /* 有序号或勾选框时标题挪到第二栏（stack-lead 必须是一行的第一格，所以不需要 :has()） */
  .stack-table tbody > tr > .stack-lead ~ .stack-title {
    grid-column: 2 / -1;
  }
  /* 有状态标签的行：模板在 <tr> 上写 stack-has-badge，标题给状态让出第三栏 */
  .stack-table tbody > tr.stack-has-badge > .stack-title {
    grid-column-end: 3;
  }
  .stack-table tbody > tr > .stack-title strong,
  .stack-table tbody > tr > .stack-title b {
    font-weight: inherit;
  }
  .stack-table tbody > tr > .stack-title small,
  .stack-table tbody > tr > .stack-title .ui-cell-sub {
    font-weight: 400;
  }
  .stack-table tbody > tr > .stack-badge {
    grid-column: 3;
    grid-row: 1;
    align-self: baseline;
    justify-self: end;
    text-align: right !important;
  }
  .stack-table tbody > tr > .stack-sub {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: -4px;
    color: var(--stack-muted);
    font-size: 13px;
  }
  .stack-table tbody > tr > .stack-lead ~ .stack-sub {
    grid-column: 2 / -1;
  }

  /* 链接和按钮收在最后，成组换行，间距同标签与值 */
  .stack-table tbody > tr > .stack-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }
  .stack-table tbody > tr > .stack-actions > * {
    margin: 0 !important;
  }
  .stack-table tbody > tr > .stack-actions form {
    margin: 0;
  }
  /* 电脑上显示“--”、没有可做的事的格子：手机上整格不显示（模板写 stack-empty，不靠 :has()） */
  .stack-table tbody > tr > .stack-empty {
    display: none !important;
  }
}