/* ============================================================
   zt-table.css — T2 数据密度层（表格增强）
   ------------------------------------------------------------
   立项：全站表格能力实测 —— CSS 侧有"排序/列固定/分页"的**样式**，
        但 JS 侧 **排序/筛选/批量选择/分页全为 0**；25 个 T2 模块（60%）
        共用三栏骨架，却没有一处能做列排序或按列筛选。
   口径：与 theme-contract.css 同源，只消费 --c-*，不新立 token。
        跟随 theme.js 的 data-theme，双选择器（系统偏好 + 显式选择）。
   用法：<table data-zt-table> … 见 zt-table.js 顶部注释
   ============================================================ */

/* ── 容器与基础 ── */
.zt-tw {
    overflow-x: auto;
    background: var(--c-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--r-lg, 14px);
}

.zt-tb {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.zt-tb th,
.zt-tb td {
    padding: 11px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--c-ink-row, rgba(255, 255, 255, 0.02));
    overflow-wrap: anywhere;
}

.zt-tb th {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-ink-3, #8A8A8A);
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--c-bg-2, #0F0F16);
    position: sticky;
    top: 0;
    z-index: 2;
}

.zt-tb tbody tr:last-child td { border-bottom: none; }
.zt-tb tbody tr:hover { background: var(--c-ink-row, rgba(255, 255, 255, 0.02)); }

/* ── 排序 ── */
.zt-tb th[data-sortable] {
    cursor: pointer;
    user-select: none;
    padding-right: 30px;
    position: relative;
}
.zt-tb th[data-sortable]:hover { color: var(--c-ink-2, #A0A0A0); }
.zt-tb th[data-sortable]::after {
    content: "⇅";
    position: absolute;
    right: 12px;
    opacity: 0.35;
    font-size: 11px;
}
.zt-tb th[aria-sort="ascending"]::after { content: "▲"; opacity: 1; color: var(--c-gold, #E8A33D); }
.zt-tb th[aria-sort="descending"]::after { content: "▼"; opacity: 1; color: var(--c-gold, #E8A33D); }
.zt-tb th[aria-sort="ascending"],
.zt-tb th[aria-sort="descending"] { color: var(--c-ink, #FFFFFF); }

/* ── 列固定（首列 sticky）── */
.zt-tb[data-sticky-first] th:first-child,
.zt-tb[data-sticky-first] td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--c-bg-2, #0F0F16);
    box-shadow: 1px 0 0 var(--c-border, rgba(255, 255, 255, 0.08));
}
.zt-tb[data-sticky-first] th:first-child { z-index: 4; }

/* ── 批量选择 ── */
.zt-tb [data-zt-check] {
    width: 38px;
    text-align: center;
    padding-left: 12px;
    padding-right: 4px;
}
.zt-tb [data-zt-check] input {
    width: 15px;
    height: 15px;
    accent-color: var(--c-gold, #E8A33D);
    cursor: pointer;
}
.zt-tb tr[data-selected] { background: var(--c-gold-tint, rgba(232, 163, 61, 0.08)); }

/* ── 筛选区 ── */
.zt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    background: var(--c-card, rgba(255, 255, 255, 0.03));
}
.zt-filters input[type="search"],
.zt-filters input[type="text"],
.zt-filters select {
    font: inherit;
    font-size: 13px;
    color: var(--c-ink-2, #A0A0A0);
    background: var(--c-bg-3, #13131C);
    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--r-sm, 8px);
    padding: 7px 11px;
    min-width: 120px;
}
.zt-filters input:focus-visible,
.zt-filters select:focus-visible {
    outline: 2px solid var(--c-gold, #E8A33D);
    outline-offset: 1px;
    border-color: var(--c-gold-line, rgba(232, 163, 61, 0.4));
}
.zt-filters .zt-filters__reset {
    font: inherit;
    font-size: 12.5px;
    color: var(--c-ink-3, #8A8A8A);
    background: transparent;
    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
}
.zt-filters .zt-filters__reset:hover { color: var(--c-gold, #E8A33D); border-color: var(--c-gold-line, rgba(232, 163, 61, 0.4)); }
.zt-filters .zt-filters__count { font-size: 12.5px; color: var(--c-ink-3, #8A8A8A); margin-left: auto; }

/* ── 批量操作条 ── */
.zt-bulk {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--c-gold-tint, rgba(232, 163, 61, 0.08));
    border-bottom: 1px solid var(--c-gold-line, rgba(232, 163, 61, 0.4));
    font-size: 13px;
    color: var(--c-ink, #FFFFFF);
}
.zt-bulk[data-active] { display: flex; }
.zt-bulk button {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-ink-2, #A0A0A0);
    background: transparent;
    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--r-sm, 8px);
    padding: 6px 13px;
    cursor: pointer;
}
.zt-bulk button:hover { color: var(--c-gold, #E8A33D); border-color: var(--c-gold-line, rgba(232, 163, 61, 0.4)); }
.zt-bulk button[data-danger]:hover { color: var(--c-err, #D64545); border-color: var(--c-err-line, rgba(214, 69, 69, 0.4)); }

/* ── 三态：空 / 载 / 错 ── */
.zt-state {
    padding: 46px 24px;
    text-align: center;
    font-size: 13.5px;
    color: var(--c-ink-3, #8A8A8A);
    line-height: 1.7;
}
.zt-state b { display: block; color: var(--c-ink, #FFFFFF); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.zt-state a {
    display: inline-block;
    margin-top: 14px;
    color: var(--c-gold, #E8A33D);
    border: 1px solid var(--c-gold-line, rgba(232, 163, 61, 0.4));
    border-radius: var(--r-sm, 8px);
    padding: 8px 18px;
    font-size: 13px;
    text-decoration: none;
}
.zt-state--error { color: var(--c-err, #D64545); }
.zt-state--error b { color: var(--c-err, #D64545); }

/* 加载骨架 */
.zt-skel-row {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--c-ink-row, rgba(255, 255, 255, 0.02)) 25%, var(--c-ink-hover, rgba(255, 255, 255, 0.04)) 37%, var(--c-ink-row, rgba(255, 255, 255, 0.02)) 63%);
    background-size: 400% 100%;
    animation: zt-skel 1.4s ease infinite;
    margin: 13px 16px;
}
@keyframes zt-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── 分页 ── */
.zt-pg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    font-size: 13px;
    color: var(--c-ink-3, #8A8A8A);
    flex-wrap: wrap;
}
.zt-pg .zt-pg__links { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.zt-pg a,
.zt-pg span[aria-current] {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: 13px;
    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--r-sm, 8px);
    color: var(--c-ink-2, #A0A0A0);
    text-decoration: none;
}
.zt-pg a:hover { color: var(--c-gold, #E8A33D); border-color: var(--c-gold-line, rgba(232, 163, 61, 0.4)); }
.zt-pg span[aria-current] {
    background: var(--c-gold, #E8A33D);
    border-color: var(--c-gold, #E8A33D);
    color: var(--c-on-accent, #0A0A0F);
    font-weight: 600;
}

/* ── 浅色面（系统偏好 + theme.js 显式选择） ── */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .zt-tb th,
    :root:not([data-theme="dark"]) .zt-tb[data-sticky-first] th:first-child,
    :root:not([data-theme="dark"]) .zt-tb[data-sticky-first] td:first-child { background: #FFFFFF; }
    :root:not([data-theme="dark"]) .zt-filters input,
    :root:not([data-theme="dark"]) .zt-filters select { background: #FFFFFF; }
}
:root[data-theme="light"] .zt-tb th,
:root[data-theme="light"] .zt-tb[data-sticky-first] th:first-child,
:root[data-theme="light"] .zt-tb[data-sticky-first] td:first-child { background: #FFFFFF; }
:root[data-theme="light"] .zt-filters input,
:root[data-theme="light"] .zt-filters select { background: #FFFFFF; }

/* ── 窄屏 ── */
@media (max-width: 860px) {
    .zt-tb th, .zt-tb td { padding: 10px 12px; font-size: 13px; }
    .zt-filters { gap: 6px; padding: 10px 12px; }
    .zt-filters input, .zt-filters select { min-width: 96px; flex: 1 1 96px; }
    .zt-pg { font-size: 12.5px; }
}
@media (max-width: 560px) {
    .zt-tb { font-size: 12.5px; }
    .zt-tb th, .zt-tb td { padding: 9px 10px; }
    .zt-filters .zt-filters__count { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .zt-skel-row { animation: none; }
}

/* ============================================================
   ── 动效层（本轮补；此前 zt-table 只有静态样式，零动效）──
   纪律：**只消费 token，不写死时长/缓动** ——
        这样 prefers-reduced-motion 的 token 级降级会自动生效。
        首屏不引入无目的动画；动效只服务于"状态变化可被看见"。
   ============================================================ */

.zt-tb tbody tr {
    transition: background-color var(--duration-fast, 100ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1));
}
.zt-tb th[data-sortable] {
    transition: color var(--duration-fast, 100ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1));
}
.zt-tb th[data-sortable]::after {
    transition: opacity var(--duration-fast, 100ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1)),
                color var(--duration-fast, 100ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1));
}
.zt-tb [data-zt-check] input,
.zt-filters input,
.zt-filters select,
.zt-filters .zt-filters__reset,
.zt-bulk button,
.zt-pg a,
.zt-state a {
    transition: color var(--duration-fast, 100ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1)),
                border-color var(--duration-fast, 100ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1)),
                background-color var(--duration-fast, 100ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1));
}
.zt-bulk {
    transition: opacity var(--duration-normal, 200ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1));
}
.zt-state {
    animation: zt-state-in var(--duration-normal, 200ms) var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}
@keyframes zt-state-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
/* 排序/筛选重排后，新一轮可见行轻微淡入 —— 让"列表变了"这件事被看见 */
.zt-tb tbody tr:not([data-zt-hidden]) {
    animation: zt-row-in var(--duration-fast, 100ms) var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}
@keyframes zt-row-in {
    from { opacity: .55; }
    to   { opacity: 1; }
}
/* 无障碍：本文件自身的降级（token 已降级，这里兜住直接写死的 animation） */
@media (prefers-reduced-motion: reduce) {
    .zt-tb tbody tr:not([data-zt-hidden]),
    .zt-state { animation: none; }
    .zt-tb tbody tr,
    .zt-tb th[data-sortable],
    .zt-tb th[data-sortable]::after,
    .zt-tb [data-zt-check] input,
    .zt-filters input,
    .zt-filters select,
    .zt-filters .zt-filters__reset,
    .zt-bulk,
    .zt-bulk button,
    .zt-pg a,
    .zt-state a { transition: none; }
}