/**
 * 灵休 · 液态玻璃 —— 外壳（shell）：顶栏、底部悬浮导航、桌面侧栏、Toast 位置
 *
 * 结构由 includes/header.php / footer.php 输出（学生端会额外带 lg-glass 等类名），
 * 页面作者不需要、也不应该再自己写导航。要改导航样式只改本文件。
 */

/* 旧样式在移动端给 html 和 body 同时设了 overflow，body 因此变成“滚动容器”，
   导致 position: sticky 的顶栏永远粘不住。学生端让 body 不参与滚动，由视口负责。 */
body.lg {
    overflow: visible;
}

/* flex 子项默认 min-width:auto，内容里有宽表格时会把整页撑出横向滚动条 */
body.lg .main-content {
    min-width: 0;
}

/* ============================================================
   移动端（< 992px）
   ============================================================ */
@media (max-width: 991.98px) {

    /* ---------- 顶栏：悬浮玻璃胶囊（iOS 大标题行为） ----------
       初始是“透明栏”，只有右侧菜单按钮；页面向上滚动后（body.is-scrolled）
       玻璃层淡入，标题收进栏里（body.is-title-collapsed）。 */
    body.lg .mobile-header {
        position: sticky;
        top: calc(var(--safe-top) + 8px);
        z-index: var(--lg-z-header);
        height: 52px;
        margin: calc(var(--safe-top) + 8px) 12px 0;
        padding: 0 7px 0 20px;
        border-radius: var(--lg-r-pill);
        background: transparent;
        /* 旧样式给所有 .mobile-only 设了 overflow-y:auto，会把下拉菜单裁掉 */
        overflow: visible;
    }

    /* 玻璃层单独做成伪元素，才能用 opacity 做出“滚动后浮现”的过渡 */
    body.lg .mobile-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: inherit;
        border: 1px solid var(--lg-rim);
        background: var(--lg-glass-solid);
        box-shadow: var(--lg-edge-soft), var(--lg-shadow-1);
        opacity: 0;
        transform: scale(0.97);
        transition: opacity var(--lg-dur-2) var(--lg-ease), transform var(--lg-dur-3) var(--lg-spring);
        pointer-events: none;
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        body.lg .mobile-header::before {
            background: var(--lg-glass);
            -webkit-backdrop-filter: var(--lg-blur-soft);
            backdrop-filter: var(--lg-blur-soft);
        }
    }

    body.lg.is-scrolled .mobile-header::before,
    body.lg.lg-no-large .mobile-header::before {
        opacity: 1;
        transform: scale(1);
    }

    body.lg .mobile-header-title {
        font-size: var(--lg-fs-head);
        font-weight: 700;
        letter-spacing: 0.2px;
        color: var(--lg-text);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity var(--lg-dur-2) var(--lg-ease), transform var(--lg-dur-3) var(--lg-spring);
    }

    body.lg.is-title-collapsed .mobile-header-title,
    body.lg.lg-no-large .mobile-header-title {
        opacity: 1;
        transform: translateY(0);
    }

    /* ---------- 大标题 ---------- */
    body.lg .lg-largetitle {
        padding: 6px 8px 14px;
    }

    body.lg .lg-largetitle__text {
        font-size: 34px;
        line-height: 1.12;
        font-weight: 800;
        letter-spacing: -0.6px;
        color: var(--lg-text);
        transform-origin: left center;
        transition: opacity var(--lg-dur-2) var(--lg-ease);
    }

    body.lg .lg-largetitle__sub {
        margin-top: 4px;
        font-size: var(--lg-fs-call);
        color: var(--lg-text-3);
    }

    body.lg.is-title-collapsed .lg-largetitle__text {
        opacity: 0.35;
    }

    body.lg .mobile-header-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--lg-fill);
        color: var(--lg-text-2);
        box-shadow: var(--lg-edge-soft);
        transition: transform var(--lg-dur-1) var(--lg-spring), background var(--lg-dur-1);
        -webkit-tap-highlight-color: transparent;
    }

    body.lg .mobile-header-btn:active {
        transform: scale(0.9);
        background: var(--lg-fill-2);
    }

    /* 菜单相对顶栏定位，右对齐 */
    body.lg .mobile-header .dropdown-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        margin-top: 0;
    }

    /* ---------- 内容区：给悬浮导航让位 ---------- */
    body.lg .content-area {
        padding: 14px 14px calc(var(--lg-tabbar-h) + var(--lg-tabbar-gap) + var(--safe-bottom) + 24px);
    }

    /* ---------- 底部悬浮玻璃导航 ---------- */
    body.lg .tab-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--lg-tabbar-gap) + var(--safe-bottom));
        height: var(--lg-tabbar-h);
        max-width: 460px;
        margin: 0 auto;
        padding: 6px;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        border-radius: 32px;
        border-top: 1px solid var(--lg-rim);
        z-index: var(--lg-z-tabbar);
    }

    body.lg .tab-item {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border-radius: 26px;
        color: var(--lg-text-2);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.2px;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--lg-dur-2) var(--lg-ease), transform var(--lg-dur-1) var(--lg-spring);
    }

    body.lg .tab-item i {
        font-size: 21px;
        margin-bottom: 0;
        transition: transform var(--lg-dur-3) var(--lg-spring);
    }

    body.lg .tab-item:active {
        transform: scale(0.92);
    }

    body.lg .tab-item.active {
        color: var(--lg-brand-ink);
    }

    body.lg .tab-item.active i {
        transform: translateY(-1px) scale(1.1);
    }

    /* 未启用脚本时，用激活项自身的底色兜底 */
    body.lg .lg-tabbar:not(.is-ready) .tab-item.active {
        background: var(--lg-lens);
        box-shadow: var(--lg-edge);
    }

    /* 液态镜片：跟随激活项滑动，位置由 glass.js 写入 --lens-x / --lens-w。
       外层只负责位移和宽度；玻璃外观在 ::before 上，这样拖动时可以单独放大“鼓出”导航栏。 */
    body.lg .lg-tabbar__lens {
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: 0;
        width: var(--lens-w, 0);
        transform: translateX(var(--lens-x, 0));
        opacity: 0;
        pointer-events: none;
        transition:
            transform var(--lg-dur-3) var(--lg-spring),
            width var(--lg-dur-3) var(--lg-spring),
            opacity var(--lg-dur-2);
    }

    body.lg .lg-tabbar__lens::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 26px;
        background: var(--lg-lens);
        box-shadow: var(--lg-edge), 0 4px 14px rgba(12, 50, 36, 0.16);
        transition: transform var(--lg-dur-3) var(--lg-spring), box-shadow var(--lg-dur-2) var(--lg-ease);
    }

    /* 按住拖动：镜片放大鼓出，像一滴水珠浮在导航栏上 */
    body.lg .lg-tabbar.is-dragging .lg-tabbar__lens::before {
        transform: scale(1.14, 1.22);
        box-shadow: var(--lg-edge), 0 10px 26px rgba(12, 50, 36, 0.26);
    }

    body.lg .lg-tabbar.is-dragging .tab-item.is-hot {
        color: var(--lg-brand-ink);
    }

    body.lg .lg-tabbar.is-dragging .tab-item.is-hot i {
        transform: translateY(-1px) scale(1.18);
    }

    /* 向下滚动时导航收起成纯图标（向上滚动或触摸导航栏时恢复） */
    body.lg .lg-tabbar {
        overflow: visible;
        touch-action: none;
        transition: height var(--lg-dur-3) var(--lg-spring), transform var(--lg-dur-3) var(--lg-spring);
    }

    body.lg .tab-item span {
        max-height: 14px;
        overflow: hidden;
        transition: max-height var(--lg-dur-2) var(--lg-ease), opacity var(--lg-dur-2) var(--lg-ease), margin var(--lg-dur-2) var(--lg-ease);
    }

    body.lg .lg-tabbar.is-compact {
        height: 54px;
    }

    body.lg .lg-tabbar.is-compact .tab-item span {
        max-height: 0;
        opacity: 0;
        margin-top: -3px;
    }

    body.lg .lg-tabbar.is-ready .lg-tabbar__lens {
        opacity: 1;
    }

    body.lg .lg-tabbar.is-ready.is-none .lg-tabbar__lens {
        opacity: 0;
    }

    /* 初始化时先无动画定位到上一个页面的位置 */
    body.lg .lg-tabbar.is-init .lg-tabbar__lens {
        transition: none;
    }

    /* ---------- Toast：浮在悬浮导航上方，玻璃胶囊 ---------- */
    body.lg .toast-container {
        left: 16px;
        right: 16px;
        z-index: var(--lg-z-toast);
        bottom: calc(var(--lg-tabbar-h) + var(--lg-tabbar-gap) + var(--safe-bottom) + 14px);
    }
}

/* ============================================================
   桌面端（>= 992px）：悬浮玻璃侧栏 + 玻璃顶栏
   ============================================================ */
@media (min-width: 992px) {

    body.lg {
        --lg-side-w: 248px;
        --lg-side-gap: 14px;
    }

    body.lg .sidebar {
        top: var(--lg-side-gap);
        left: var(--lg-side-gap);
        bottom: var(--lg-side-gap);
        width: var(--lg-side-w);
        border-radius: var(--lg-r-xl);
        color: var(--lg-text);
        z-index: var(--lg-z-header);
        overflow: hidden;
    }

    body.lg .sidebar-header {
        padding: 22px 22px 14px;
        border-bottom: 1px solid var(--lg-hairline);
    }

    body.lg .sidebar-logo {
        color: var(--lg-text);
        font-size: 19px;
    }

    body.lg .sidebar-logo i {
        color: var(--lg-brand);
    }

    body.lg .sidebar-nav {
        padding: 12px 12px;
    }

    body.lg .nav-section-title {
        color: var(--lg-text-3);
        letter-spacing: 0.8px;
    }

    body.lg .nav-item {
        color: var(--lg-text-2);
        border-radius: var(--lg-r-pill);
        padding: 11px 16px;
        transition: background var(--lg-dur-2) var(--lg-ease), color var(--lg-dur-2) var(--lg-ease), transform var(--lg-dur-1) var(--lg-spring);
    }

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

    body.lg .nav-item:active {
        transform: scale(0.97);
    }

    body.lg .nav-item.active {
        background: var(--lg-lens);
        color: var(--lg-brand-ink);
        box-shadow: var(--lg-edge), 0 4px 14px rgba(12, 50, 36, 0.12);
    }

    body.lg .sidebar-footer {
        padding: 12px;
        border-top: 1px solid var(--lg-hairline);
    }

    body.lg .user-info {
        background: var(--lg-fill);
        border-radius: var(--lg-r-lg);
    }

    body.lg .user-avatar {
        background: linear-gradient(150deg, var(--lg-brand-hi), var(--lg-brand-lo));
        color: var(--lg-text-on-tint);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    body.lg .user-role,
    body.lg .user-menu {
        color: var(--lg-text-3);
    }

    body.lg .main-content {
        margin-left: calc(var(--lg-side-w) + var(--lg-side-gap) * 2);
    }

    body.lg .top-header {
        top: var(--lg-side-gap);
        height: 58px;
        margin: var(--lg-side-gap) 24px 0;
        padding: 0 10px 0 26px;
        border-radius: var(--lg-r-pill);
        z-index: var(--lg-z-header);
    }

    body.lg .page-title {
        font-size: 19px;
        font-weight: 700;
        color: var(--lg-text);
    }

    body.lg .header-icon-btn {
        background: var(--lg-fill);
        color: var(--lg-text-2);
        box-shadow: var(--lg-edge-soft);
        transition: transform var(--lg-dur-1) var(--lg-spring), background var(--lg-dur-1);
    }

    body.lg .header-icon-btn:hover {
        background: var(--lg-fill-2);
    }

    body.lg .header-icon-btn:active {
        transform: scale(0.92);
    }

    body.lg .top-header .dropdown-menu {
        top: calc(100% + 10px);
    }

    body.lg .content-area {
        padding: 24px 28px 40px;
    }

    body.lg .toast-container {
        z-index: var(--lg-z-toast);
        top: 92px;
        right: 28px;
    }
}