/**
 * 灵休 · 液态玻璃 —— 桌面工作台（desk）
 *
 * 学生/教师/管理员三端共用的“版面”与“数据型组件”：
 *   外壳增强（搜索胶囊、侧栏收起、导航镜片）→ 版面（lg-page-head、lg-bento）
 *   → 数据组件（lg-kpi、lg-spark、lg-bars、lg-table、lg-avatar）
 *   → 浮层（lg-drawer、lg-palette、lg-bulkbar、lg-pop）
 *
 * 规则同 material.css：玻璃只来自 .lg-glass，本文件不写 backdrop-filter。
 * 行为脚本：assets/js/lx/glass-ui.js（抽屉、命令面板、批量选择、侧栏镜片、主题切换）。
 */

/* ============================================================
   1. 外壳增强（仅桌面）
   ============================================================ */
@media (min-width: 992px) {

    body.lg .content-area {
        max-width: 1360px;
        margin: 0 auto;
    }

    /* 顶栏：左面包屑 + 右侧工具；标题让位给页面里的 lg-page-head */
    body.lg .top-header .page-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--lg-text-2);
    }

    body.lg .top-header .page-subtitle {
        color: var(--lg-text-3);
        font-size: var(--lg-fs-call);
    }

    body.lg .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* 搜索胶囊：点击或按 Ctrl/⌘ + K 打开命令面板 */
    body.lg .lg-search {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: 280px;
        height: 40px;
        padding: 0 8px 0 16px;
        border: 0;
        border-radius: var(--lg-r-pill);
        background: var(--lg-fill);
        box-shadow: var(--lg-edge-soft);
        color: var(--lg-text-3);
        font: inherit;
        font-size: var(--lg-fs-call);
        cursor: pointer;
        transition: background var(--lg-dur-2) var(--lg-ease), box-shadow var(--lg-dur-2) var(--lg-ease), width var(--lg-dur-3) var(--lg-spring);
    }

    body.lg .lg-search:hover {
        background: var(--lg-fill-2);
        width: 320px;
    }

    body.lg .lg-search span {
        flex: 1;
        text-align: left;
    }

    body.lg .lg-kbd {
        display: inline-flex;
        align-items: center;
        height: 24px;
        padding: 0 8px;
        border-radius: 8px;
        background: var(--lg-surface-hi);
        box-shadow: var(--lg-edge-soft);
        color: var(--lg-text-2);
        font: 600 11px/1 var(--lg-font);
        letter-spacing: 0.3px;
    }

    /* 通知红点 */
    body.lg .header-icon-btn {
        position: relative;
    }

    body.lg .lg-dot {
        position: absolute;
        top: 8px;
        right: 9px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--lg-danger);
        box-shadow: 0 0 0 2px var(--lg-glass-solid);
    }

    /* 侧栏：导航镜片（由 glass-ui.js 定位，与手机底部导航同一语言） */
    body.lg .sidebar-nav {
        position: relative;
    }

    body.lg .lg-side__lens {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 0;
        height: 44px;
        border-radius: var(--lg-r-pill);
        background: var(--lg-lens);
        box-shadow: var(--lg-edge), 0 6px 18px rgba(12, 50, 36, 0.12);
        transform: translateY(var(--lens-y, 0));
        height: var(--lens-h, 44px);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--lg-dur-3) var(--lg-spring), height var(--lg-dur-3) var(--lg-spring), opacity var(--lg-dur-2);
    }

    body.lg .sidebar.is-lens-ready .lg-side__lens {
        opacity: 1;
    }

    body.lg .sidebar.is-lens-ready .nav-item.active {
        background: transparent;
        box-shadow: none;
    }

    body.lg .sidebar .nav-item {
        position: relative;
        z-index: 1;
    }

    body.lg .sidebar .nav-item i {
        width: 22px;
        text-align: center;
        transition: transform var(--lg-dur-3) var(--lg-spring);
    }

    body.lg .sidebar .nav-item:hover i {
        transform: scale(1.12);
    }

    /* 侧栏收起为图标轨（状态存 localStorage，类名挂在 body 上） */
    body.lg .sidebar,
    body.lg .main-content {
        transition: width var(--lg-dur-3) var(--lg-spring), margin-left var(--lg-dur-3) var(--lg-spring);
    }

    body.lg .lg-side__toggle {
        position: absolute;
        top: 22px;
        right: 16px;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 50%;
        background: var(--lg-fill);
        color: var(--lg-text-3);
        cursor: pointer;
        transition: transform var(--lg-dur-3) var(--lg-spring), background var(--lg-dur-1);
    }

    body.lg .lg-side__toggle:hover {
        background: var(--lg-fill-2);
        color: var(--lg-text);
    }

    body.lg.lg-rail {
        --lg-side-w: 84px;
    }

    body.lg.lg-rail .lg-side__toggle {
        transform: rotate(180deg);
        right: 27px;
        top: 70px;
    }

    body.lg.lg-rail .sidebar-header {
        padding: 22px 0 54px;
        text-align: center;
    }

    body.lg.lg-rail .sidebar-logo {
        justify-content: center;
        font-size: 0;
    }

    body.lg.lg-rail .sidebar-logo i {
        font-size: 24px;
    }

    body.lg.lg-rail .nav-section-title,
    body.lg.lg-rail .user-details,
    body.lg.lg-rail .user-menu,
    body.lg.lg-rail .class-switcher {
        display: none;
    }

    body.lg.lg-rail .nav-item {
        justify-content: center;
        font-size: 0;
        padding: 12px 0;
    }

    body.lg.lg-rail .nav-item i {
        font-size: 18px;
        margin: 0;
    }

    body.lg.lg-rail .lg-side__lens {
        left: 10px;
        right: 10px;
    }

    body.lg.lg-rail .user-info {
        justify-content: center;
        padding: 8px 0;
    }

    /* 班级切换：胶囊 */
    body.lg .class-switcher {
        margin: 12px 14px 0;
    }

    body.lg .class-switcher-label {
        color: var(--lg-text-3);
        font-size: var(--lg-fs-cap);
        letter-spacing: 0.6px;
    }

    body.lg .class-switcher-select select {
        border-radius: var(--lg-r-pill);
        border: 0;
        background: var(--lg-fill);
        color: var(--lg-text);
        box-shadow: var(--lg-edge-soft);
        padding-left: 16px;
    }
}

/* 手机顶栏右侧：搜索 + 菜单两个圆按钮 */
body.lg .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ============================================================
   2. 页面头与便当格栅
   ============================================================ */
.lg-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 4px 2px 20px;
}

.lg-page-head__title {
    font-size: 32px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--lg-text);
}

.lg-page-head__sub {
    margin-top: 6px;
    font-size: var(--lg-fs-body);
    color: var(--lg-text-3);
}

.lg-page-head__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 手机上标题已由大标题承担，只保留右侧操作 */
@media (max-width: 991.98px) {
    .lg-page-head {
        margin: 0 0 14px;
        justify-content: flex-start;
    }

    .lg-page-head__text {
        display: none;
    }
}

/* 便当格栅：手机 2 列 → 平板 6 列 → 桌面 12 列。子项用 lg-span-N 声明桌面占几格 */
.lg-bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.lg-bento > * {
    grid-column: span 2;
    min-width: 0;
}

.lg-bento > .lg-span-3 {
    grid-column: span 1;
}

@media (min-width: 700px) {
    .lg-bento {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
    }

    .lg-bento > * {
        grid-column: span 6;
    }

    .lg-bento > .lg-span-3,
    .lg-bento > .lg-span-4 {
        grid-column: span 3;
    }
}

@media (min-width: 1200px) {
    .lg-bento {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 18px;
    }

    .lg-bento > .lg-span-3 { grid-column: span 3; }
    .lg-bento > .lg-span-4 { grid-column: span 4; }
    .lg-bento > .lg-span-5 { grid-column: span 5; }
    .lg-bento > .lg-span-6 { grid-column: span 6; }
    .lg-bento > .lg-span-7 { grid-column: span 7; }
    .lg-bento > .lg-span-8 { grid-column: span 8; }
    .lg-bento > .lg-span-9 { grid-column: span 9; }
    .lg-bento > .lg-span-12 { grid-column: span 12; }
    .lg-bento > .lg-rows-2 { grid-row: span 2; }
}

/* ============================================================
   3. 卡片（内容层表面 + 光斑）
   ============================================================ */
.lg-card {
    position: relative;
    padding: 20px;
    border-radius: var(--lg-r-lg);
    overflow: hidden;
}

.lg-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.lg-card__title {
    font-size: var(--lg-fs-head);
    font-weight: 700;
    color: var(--lg-text);
}

.lg-card__meta {
    font-size: var(--lg-fs-foot);
    color: var(--lg-text-3);
}

.lg-card--flush {
    padding: 0;
}

/* 光斑：鼠标靠近时卡片内浮现一圈柔光（glass-ui.js 写入 --mx / --my；触屏设备无此效果） */
.lg-spot::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), transparent 65%);
    opacity: 0;
    transition: opacity var(--lg-dur-3) var(--lg-ease);
    pointer-events: none;
}

[data-theme="dark"] .lg-spot::after {
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.10), transparent 65%);
}

.lg-spot.is-near::after {
    opacity: 1;
}

@media (hover: none) {
    .lg-spot::after {
        display: none;
    }
}

/* 悬停轻抬（只给可点击的卡片） */
.lg-card--link {
    cursor: pointer;
    transition: transform var(--lg-dur-3) var(--lg-spring), box-shadow var(--lg-dur-2) var(--lg-ease);
}

@media (hover: hover) {
    .lg-card--link:hover {
        transform: translateY(-3px);
        box-shadow: var(--lg-edge-soft), var(--lg-shadow-2);
    }
}

.lg-card--link:active {
    transform: scale(0.985);
}

/* 英雄卡：品牌色玻璃 + 大号数字，每个端的首页顶部放一张 */
.lg-hero {
    position: relative;
    padding: 24px 26px;
    border-radius: var(--lg-r-xl);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(420px 260px at 88% 0%, rgba(255, 255, 255, 0.34), transparent 70%),
        radial-gradient(360px 240px at 0% 110%, rgba(255, 255, 255, 0.18), transparent 70%),
        linear-gradient(135deg, var(--lg-brand-hi), var(--lg-brand-lo) 70%, #0b7a63);
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.12), var(--lg-shadow-tint), var(--lg-shadow-2);
}

.lg-hero--blue {
    background:
        radial-gradient(420px 260px at 88% 0%, rgba(255, 255, 255, 0.34), transparent 70%),
        linear-gradient(135deg, #60a5fa, #3b82f6 55%, #6366f1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 24px rgba(59, 130, 246, 0.34), var(--lg-shadow-2);
}

.lg-hero--violet {
    background:
        radial-gradient(420px 260px at 88% 0%, rgba(255, 255, 255, 0.30), transparent 70%),
        linear-gradient(135deg, #a78bfa, #8b5cf6 55%, #6d28d9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 24px rgba(139, 92, 246, 0.34), var(--lg-shadow-2);
}

.lg-hero__eyebrow {
    font-size: var(--lg-fs-foot);
    font-weight: 600;
    letter-spacing: 0.6px;
    opacity: 0.86;
}

.lg-hero__title {
    margin-top: 6px;
    font-size: 28px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.lg-hero__text {
    margin-top: 8px;
    font-size: var(--lg-fs-body);
    opacity: 0.9;
}

.lg-hero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* 英雄卡里的按钮：白色玻璃 */
body.lg .lg-hero .btn,
body.lg .lg-hero .lg-btn-glass {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.lg .lg-hero .btn:hover {
    background: rgba(255, 255, 255, 0.34);
}

body.lg .lg-hero .btn.btn-white {
    background: #fff;
    color: var(--lg-brand-ink);
    border-color: #fff;
}

/* 英雄卡里的进度环：白色；进度变化时平滑过渡 */
.lg-hero .lg-ring__track { stroke: rgba(255, 255, 255, 0.28); }
.lg-hero .lg-ring__bar { stroke: #fff; }
.lg-ring__bar { transition: stroke-dashoffset 0.9s var(--lg-ease); }

/* 英雄卡：左文右环/右图的两栏布局，手机上上下排 */
.lg-hero__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

@media (max-width: 600px) {
    .lg-hero__row { flex-direction: column; align-items: flex-start; }
}

.lg-hero .lg-chip { background: rgba(255, 255, 255, 0.24); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.lg-hero .lg-avatars .lg-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }

/* 班级切换不依赖侧栏展开，长班名只在控件内截断。 */
body.lg .lx-header-class { display:flex; align-items:center; gap:10px; min-width:0; }
body.lg .lx-header-class label { flex:none; font-size:var(--lg-fs-cap); color:var(--lg-text-3); }
body.lg .lx-header-class .class-switcher-select { min-width:0; width:clamp(140px, 19vw, 270px); }
body.lg .lx-header-class select { width:100%; text-overflow:ellipsis; }
body.lg.lg-teacher .page-title-section { min-width:0; }
body.lg .mobile-class-switcher { min-width:0; flex:1; display:flex; flex-direction:column; align-items:stretch; gap:2px; }
body.lg .lx-mobile-class-label { display:block; font-size:12px; line-height:1.2; color:var(--lg-text-3); }
body.lg .mobile-class-switcher .lg-select { max-width:100%; min-width:0; }
body.lg .mobile-class-switcher .mobile-class-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:992px) and (max-width:1399.98px) {
    body.lg.lg-teacher .lg-search { width:40px; padding:0; justify-content:center; }
    body.lg.lg-teacher .lg-search span, body.lg.lg-teacher .lg-search kbd { display:none; }
}