/**
 * 灵休 · 液态玻璃 —— 业务块（blocks）
 *
 * 教师端 / 管理端首页和管理页反复出现的几种“块”：
 *   lg-board 实时点名板、lg-agenda 日程列表、lg-callout 提醒横幅、lg-job 计划任务行、
 *   lg-health 健康度、lg-update 更新卡、lg-split 左右分栏设置页。
 */

/* ---------- 实时点名板：一格一人，状态用头像外环表示 ---------- */
.lg-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
}

.lg-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px 12px;
    border: 0;
    border-radius: var(--lg-r-md);
    background: var(--lg-fill);
    box-shadow: var(--lg-edge-soft);
    color: var(--lg-text);
    font: inherit;
    cursor: pointer;
    animation: lg-pop 0.5s var(--lg-spring) both;
    animation-delay: calc(var(--i, 0) * 22ms);
    transition: background var(--lg-dur-2), transform var(--lg-dur-2) var(--lg-spring);
}

.lg-tile:active { transform: scale(0.94); }

.lg-tile .lg-avatar {
    box-shadow: 0 0 0 3px var(--ring, var(--lg-hairline)), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: box-shadow var(--lg-dur-3) var(--lg-spring);
}

.lg-tile__name { font-size: var(--lg-fs-call); font-weight: 600; }
.lg-tile__state { font-size: 11.5px; color: var(--lg-text-3); }

.lg-tile.is-ok { --ring: var(--lg-brand); }
.lg-tile.is-ok .lg-tile__state { color: var(--lg-brand-ink); }
.lg-tile.is-late { --ring: var(--lg-warn); background: var(--lg-warn-soft); }
.lg-tile.is-late .lg-tile__state { color: var(--lg-warn-ink); }
.lg-tile.is-leave { --ring: var(--lg-info); }
.lg-tile.is-leave .lg-tile__state { color: var(--lg-info-ink); }
.lg-tile.is-miss { --ring: var(--lg-danger); background: var(--lg-danger-soft); }
.lg-tile.is-miss .lg-tile__state { color: var(--lg-danger-ink); }

/* 状态刚变化时闪一下 */
.lg-tile.is-flash { animation: lg-flash 0.9s var(--lg-ease); }

@keyframes lg-flash {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); box-shadow: 0 0 0 6px var(--lg-brand-soft); }
    100% { transform: scale(1); }
}

/* ---------- 日程列表：左时间右事件 ---------- */
.lg-agenda {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lg-agenda__item {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.lg-agenda__time {
    flex: none;
    width: 52px;
    padding-top: 12px;
    text-align: right;
    font-size: var(--lg-fs-foot);
    font-weight: 600;
    color: var(--lg-text-3);
    font-variant-numeric: tabular-nums;
}

.lg-agenda__card {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border-radius: var(--lg-r-md);
    background: var(--lg-brand-soft);
    border-left: 4px solid var(--lg-brand);
}

.lg-agenda__card.is-blue { background: var(--lg-info-soft); border-left-color: var(--lg-info); }
.lg-agenda__card.is-warn { background: var(--lg-warn-soft); border-left-color: var(--lg-warn); }
.lg-agenda__card.is-violet { background: var(--lg-violet-soft); border-left-color: var(--lg-violet); }
.lg-agenda__title { font-size: var(--lg-fs-call); font-weight: 700; color: var(--lg-text); }
.lg-agenda__meta { margin-top: 2px; font-size: var(--lg-fs-foot); color: var(--lg-text-2); }

/* ---------- 提醒横幅：一句话 + 一个动作 ---------- */
.lg-callout {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 14px 14px;
    border-radius: var(--lg-r-lg);
}

.lg-callout__icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--lg-warn-soft);
    color: var(--lg-warn-ink);
    font-size: 17px;
}

.lg-callout__icon.is-ok { background: var(--lg-brand-soft); color: var(--lg-brand-ink); }
.lg-callout__icon.is-red { background: var(--lg-danger-soft); color: var(--lg-danger-ink); }
.lg-callout__icon.is-blue { background: var(--lg-info-soft); color: var(--lg-info-ink); }
.lg-callout__body { flex: 1; min-width: 0; }
.lg-callout__title { font-size: var(--lg-fs-body); font-weight: 700; color: var(--lg-text); }
.lg-callout__text { margin-top: 2px; font-size: var(--lg-fs-foot); color: var(--lg-text-3); }

/* ---------- 计划任务行 ---------- */
.lg-job {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--lg-hairline);
}

.lg-job:last-child { border-bottom: 0; }

.lg-job__icon {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--lg-fill);
    color: var(--lg-text-2);
}

.lg-job.is-running .lg-job__icon { background: var(--lg-brand-soft); color: var(--lg-brand-ink); }
.lg-job.is-running .lg-job__icon i { animation: lg-spin 1.2s linear infinite; }
.lg-job__body { flex: 1; min-width: 0; }
.lg-job__name { font-size: var(--lg-fs-body); font-weight: 600; color: var(--lg-text); }
.lg-job__meta { margin-top: 2px; font-size: var(--lg-fs-foot); color: var(--lg-text-3); }
.lg-job__side { flex: none; text-align: right; font-size: var(--lg-fs-foot); color: var(--lg-text-3); }

@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ---------- 健康度：状态点 + 名称 + 值 ---------- */
.lg-health {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--lg-hairline);
    font-size: var(--lg-fs-call);
}

.lg-health:last-child { border-bottom: 0; }
.lg-health__name { flex: 1; color: var(--lg-text); font-weight: 500; }
.lg-health__val { color: var(--lg-text-3); font-variant-numeric: tabular-nums; }

/* ---------- 更新卡：版本箭头 + 进度 ---------- */
.lg-update__ver {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

.lg-update__ver i { font-size: 16px; color: var(--lg-brand); }
.lg-update__ver small { font-size: var(--lg-fs-foot); font-weight: 600; color: var(--lg-text-3); letter-spacing: 0; }

/* ---------- 左右分栏设置页：左分类右表单 ---------- */
.lg-split {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.lg-split__nav {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.lg-split__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 0;
    border-radius: var(--lg-r-pill);
    background: transparent;
    color: var(--lg-text-2);
    font: inherit;
    font-size: var(--lg-fs-call);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--lg-dur-2), color var(--lg-dur-2), transform var(--lg-dur-1) var(--lg-spring);
}

.lg-split__item:active { transform: scale(0.97); }
.lg-split__item i { width: 20px; text-align: center; }
.lg-split__item:hover { background: var(--lg-fill); }
.lg-split__item.is-active { background: var(--lg-lens); color: var(--lg-brand-ink); box-shadow: var(--lg-edge); }
.lg-split__pane { display: none; }
.lg-split__pane.is-active { display: block; animation: lg-rise 0.5s var(--lg-ease) both; }

@media (max-width: 991.98px) {
    .lg-split { grid-template-columns: 1fr; }
    .lg-split__nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .lg-split__nav::-webkit-scrollbar { display: none; }
    .lg-split__item { flex: none; }
}

/* ---------- 已保存提示（设置页自动保存后右上角闪一下） ---------- */
.lg-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-brand-soft);
    color: var(--lg-brand-ink);
    font-size: var(--lg-fs-foot);
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px) scale(0.9);
    transition: opacity var(--lg-dur-2), transform var(--lg-dur-3) var(--lg-spring);
}

.lg-saved.is-on { opacity: 1; transform: none; }