/**
 * 灵休 · 液态玻璃 —— 数据表与工具栏（table）
 *
 * 结构：.lg-toolbar（筛选/搜索/操作） → .lg-table-wrap.lg-surface > table.lg-table → .lg-bulkbar（批量操作条）
 * 手机上表格自动变成“一行一张卡片”，每个 td 必须写 data-label 才会显示字段名。
 */

/* ---------- 工具栏 ---------- */
.lg-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.lg-toolbar__spacer {
    flex: 1 1 0;
}

/* 搜索输入：胶囊，左侧图标 */
.lg-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 280px;
    min-width: 180px;
}

.lg-field i {
    position: absolute;
    left: 15px;
    font-size: 13px;
    color: var(--lg-text-3);
    pointer-events: none;
}

.lg-field input {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 38px;
    border: 0;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill);
    box-shadow: inset 0 1px 2px rgba(12, 50, 36, 0.08), var(--lg-edge-soft);
    color: var(--lg-text);
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: box-shadow var(--lg-dur-2) var(--lg-ease), background var(--lg-dur-2) var(--lg-ease);
}

@media (min-width: 992px) {
    .lg-field input { font-size: var(--lg-fs-call); }
}

.lg-field input::placeholder {
    color: var(--lg-text-3);
}

.lg-field input:focus {
    background: var(--lg-surface-hi);
    box-shadow: 0 0 0 3px var(--lg-brand-soft), var(--lg-edge-soft);
}

/* 筛选芯片：可多选的小胶囊，带计数 */
.lg-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill);
    color: var(--lg-text-2);
    font: inherit;
    font-size: var(--lg-fs-call);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--lg-edge-soft);
    transition: background var(--lg-dur-1), color var(--lg-dur-1), transform var(--lg-dur-1) var(--lg-spring);
}

.lg-filter:active { transform: scale(0.94); }
.lg-filter b { font-weight: 700; color: var(--lg-text-3); }
.lg-filter.is-on { background: var(--lg-brand-soft); color: var(--lg-brand-ink); }
.lg-filter.is-on b { color: inherit; }

/* ---------- 表格 ---------- */
.lg-table-wrap {
    overflow: auto;
    border-radius: var(--lg-r-lg);
}

.lg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--lg-fs-call);
}

.lg-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 13px 16px;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--lg-text-3);
    background: var(--lg-surface-hi);
    border-bottom: 1px solid var(--lg-hairline);
}

.lg-table td {
    padding: 14px 16px;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--lg-text);
    border-bottom: 1px solid var(--lg-hairline);
}

.lg-table tbody tr:last-child td {
    border-bottom: 0;
}

.lg-table tbody tr {
    transition: background var(--lg-dur-1) var(--lg-ease), opacity var(--lg-dur-3) var(--lg-ease), transform var(--lg-dur-3) var(--lg-ease);
}

.lg-table tbody tr[data-lg-drawer] {
    cursor: pointer;
}

@media (hover: hover) {
    .lg-table tbody tr:hover {
        background: var(--lg-fill);
    }
}

.lg-table tbody tr.is-selected {
    background: var(--lg-brand-soft);
}

.lg-table tbody tr.is-leaving {
    opacity: 0;
    transform: translateX(24px);
}

.lg-table .lg-col-check { width: 48px; padding-right: 0; }
.lg-table .lg-col-end { text-align: right; white-space: nowrap; }
.lg-table .is-num { font-variant-numeric: tabular-nums; }

/* 单元格里的“人”：头像 + 姓名 + 次要信息 */
.lg-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lg-person__name { font-weight: 600; color: var(--lg-text); }
.lg-person__sub { margin-top: 1px; font-size: var(--lg-fs-foot); color: var(--lg-text-3); }

/* 行内小按钮（图标按钮） */
.lg-iconbtn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lg-text-3);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--lg-dur-1), color var(--lg-dur-1), transform var(--lg-dur-1) var(--lg-spring);
}

.lg-iconbtn:hover { background: var(--lg-fill-2); color: var(--lg-text); }
.lg-iconbtn:active { transform: scale(0.88); }
.lg-iconbtn--ok:hover { background: var(--lg-brand-soft); color: var(--lg-brand-ink); }
.lg-iconbtn--bad:hover { background: var(--lg-danger-soft); color: var(--lg-danger-ink); }

/* 自绘复选框（不依赖字体图标） */
.lg-check {
    position: relative;
    display: inline-flex;
    width: 22px;
    height: 22px;
    cursor: pointer;
    vertical-align: middle;
}

.lg-check input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.lg-check i {
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: var(--lg-fill-2);
    box-shadow: inset 0 0 0 1.5px var(--lg-hairline);
    transition: background var(--lg-dur-1), transform var(--lg-dur-2) var(--lg-spring);
    pointer-events: none;
}

.lg-check i::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--lg-dur-2) var(--lg-spring);
}

.lg-check input:checked + i,
.lg-check input:indeterminate + i {
    background: linear-gradient(150deg, var(--lg-brand-hi), var(--lg-brand-lo));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 6px rgba(16, 185, 129, 0.4);
}

.lg-check input:checked + i::after {
    transform: rotate(45deg) scale(1);
}

.lg-check input:indeterminate + i::after {
    left: 5px;
    top: 9px;
    width: 12px;
    height: 0;
    border-width: 0 0 2.5px 0;
    transform: none;
}

.lg-check input:active + i { transform: scale(0.86); }
.lg-check input:focus-visible + i { outline: 2px solid var(--lg-brand); outline-offset: 2px; }

/* 表格入场：行依次浮现（页面脚本给 tr 设 --i） */
.lg-table tbody tr {
    animation: lg-row-in 0.5s var(--lg-ease) both;
    animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes lg-row-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* 手机：一行一张卡片 */
@media (max-width: 699.98px) {
    .lg-table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
    .lg-table, .lg-table tbody, .lg-table tr, .lg-table td { display: block; }
    .lg-table thead { display: none; }

    .lg-table tbody tr {
        position: relative;
        margin-bottom: 12px;
        padding: 14px 16px;
        border-radius: var(--lg-r-lg);
        background: var(--lg-surface);
        border: 1px solid var(--lg-rim);
        box-shadow: var(--lg-edge-soft), var(--lg-shadow-1);
    }

    .lg-table td { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border: 0; text-align: right; white-space: normal; }
    .lg-table td::before { content: attr(data-label); flex: none; color: var(--lg-text-3); font-size: var(--lg-fs-foot); text-align: left; }
    .lg-table td.lg-col-check { position: absolute; top: 12px; right: 12px; width: auto; padding: 0; }
    .lg-table td.lg-col-check::before, .lg-table td[data-label=""]::before { display: none; }
    .lg-table td.lg-col-main { display: block; padding: 0 0 8px; text-align: left; }
    .lg-table td.lg-col-main::before { display: none; }
    .lg-table td.lg-col-end { justify-content: flex-end; padding-top: 10px; }
}

/* ---------- 批量操作条：选中行后从底部弹出 ---------- */
.lg-bulkbar {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: var(--lg-z-tabbar);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 24px);
    padding: 10px 12px 10px 20px;
    border-radius: var(--lg-r-pill);
    transform: translate(-50%, 140%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--lg-dur-3) var(--lg-spring), opacity var(--lg-dur-2) var(--lg-ease);
}

.lg-bulkbar.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.lg-bulkbar__count {
    font-size: var(--lg-fs-call);
    font-weight: 600;
    color: var(--lg-text);
    white-space: nowrap;
}

.lg-bulkbar__count b {
    display: inline-block;
    min-width: 1.2em;
    color: var(--lg-brand-ink);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
    .lg-bulkbar { bottom: calc(var(--lg-tabbar-h) + var(--lg-tabbar-gap) + var(--safe-bottom, 0px) + 12px); }
}

/* 表格数据持续刷新（如实时日志）时关闭行入场动画，避免整表闪烁：给 table 加 .is-static */
.lg-table.is-static tbody tr {
    animation: none;
}