/* ======================================================
   Unified Menu System Styles (Version 1.6)
   功能：响应式、深色模式、Grid布局、内部滚动优化
   ====================================================== */

/* --- 1. CSS 变量定义 (配色系统) --- */
:root {
    /* 亮色模式 (默认) */
    --bg-body: #f5f5f5;
    --bg-sidebar: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.95); /* 手机顶部毛玻璃 */
    
    --text-main: #333333;
    --text-muted: #666666;
    
    --border-color: #eeeeee;
    --hover-bg: #f0f0f0;
    --active-color: #000000;
    
    /* 手机全屏菜单配色 */
    --overlay-bg: #222222;
    --overlay-text: #ffffff;
    --overlay-btn-bg: rgba(255, 255, 255, 0.1);
}

/* 深色模式 (覆盖变量) */
body.dark-mode {
    --bg-body: #121212;
    --bg-sidebar: #1e1e1e;
    --bg-glass: rgba(30, 30, 30, 0.95);
    
    --text-main: #e0e0e0;
    --text-muted: #aaaaaa;
    
    --border-color: #333333;
    --hover-bg: #2c2c2c;
    --active-color: #ffffff;
    
    --overlay-bg: #000000;
    --overlay-text: #dddddd;
    --overlay-btn-bg: rgba(255, 255, 255, 0.1);
}

/* --- 2. 全局基础 --- */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
}
body.menu-no-scroll { overflow: hidden; } 

/* =========================================
   3. PC端样式 (> 768px)
   ========================================= */
@media screen and (min-width: 769px) {
    .mobile-menu-element { display: none !important; }

    /* 侧边栏容器：Flex 纵向布局 */
    #pcSidebar {
        position: fixed; top: 0; left: 0;
        width: 240px; height: 100vh;
        background: var(--bg-sidebar);
        border-right: 1px solid var(--border-color);
        z-index: 1000;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
        box-sizing: border-box;
        
        display: flex; flex-direction: column; /* 关键 */
        overflow: hidden; white-space: nowrap;
    }

    /* Logo区域：固定高度，不随菜单滚动 */
    .pc-logo-container {
        height: 50px; flex-shrink: 0;
        display: flex; align-items: center;
        padding-left: 32px; 
        margin-top: 40px; margin-bottom: 20px;
        color: var(--text-main); overflow: hidden;
    }
    .pc-logo-icon { font-size: 24px; min-width: 30px; margin-right: 10px; text-align: center;}
    .pc-logo-text { font-size: 22px; font-weight: 800; opacity: 1; transition: opacity 0.2s; }

    /* 菜单列表：占据剩余空间，独立滚动 */
    .pc-menu { 
        list-style: none; padding: 0; margin: 0;
        flex: 1; 
        overflow-y: auto; overflow-x: hidden;
        scrollbar-width: none; /* Firefox 隐藏滚动条 */
        padding-bottom: 40px;
    }
    .pc-menu::-webkit-scrollbar { display: none; } /* Chrome 隐藏滚动条 */

    .pc-menu li { margin-bottom: 5px; }
    
    .pc-menu a {
        display: flex; align-items: center;
        height: 50px; padding-left: 30px;
        color: var(--text-muted); font-size: 16px;
        transition: all 0.2s; text-decoration: none; cursor: pointer;
        position: relative;
    }
    .pc-menu a:hover, .pc-menu a.active {
        background-color: var(--hover-bg);
        color: var(--active-color);
    }
    .pc-menu i { font-size: 20px; min-width: 35px; text-align: center; margin-right: 10px; }
    .nav-text { opacity: 1; transition: opacity 0.3s; }

    /* PC端分组标题 */
    .pc-group-title {
        padding-left: 32px; margin-top: 25px; margin-bottom: 5px;
        font-size: 12px; font-weight: bold; text-transform: uppercase;
        color: var(--text-muted); opacity: 0.6;
    }

    /* --- Mini 模式 (滚动触发) --- */
    #pcSidebar.mini { width: 80px; }
    
    /* Mini: 隐藏文字 */
    #pcSidebar.mini .pc-logo-text,
    #pcSidebar.mini .nav-text,
    #pcSidebar.mini .pc-group-title { 
        opacity: 0; visibility: hidden; position: absolute; 
    }
    
    /* Mini: 强制图标居中 */
    #pcSidebar.mini .pc-logo-container,
    #pcSidebar.mini .pc-menu a {
        padding-left: 0; justify-content: center;
    }
    #pcSidebar.mini .pc-logo-icon,
    #pcSidebar.mini .pc-menu i {
        margin-right: 0;
    }
    
    /* Mini: 悬停展开 (Hover) */
    #pcSidebar.mini:hover {
        width: 240px;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    }
    /* Hover: 恢复左对齐和间距 */
    #pcSidebar.mini:hover .pc-logo-container { padding-left: 32px; justify-content: flex-start; }
    #pcSidebar.mini:hover .pc-menu a { padding-left: 30px; justify-content: flex-start; }
    #pcSidebar.mini:hover .pc-logo-icon, 
    #pcSidebar.mini:hover .pc-menu i { margin-right: 10px; }
    
    /* Hover: 恢复文字显示 */
    #pcSidebar.mini:hover .pc-logo-text,
    #pcSidebar.mini:hover .nav-text {
        opacity: 1; visibility: visible; position: static; transition-delay: 0.1s;
    }
	/* Hover: 恢复分组标题显示 */
    #pcSidebar.mini:hover .pc-group-title {
        opacity: 1; 
        visibility: visible; 
        position: static; /* 关键：让它重新占据空间，不再悬浮 */
        transition-delay: 0.1s; /* 跟随文字一起淡入 */
    }
}

/* =========================================
   4. 手机端样式 (<= 768px)
   ========================================= */
@media screen and (max-width: 768px) {
    .pc-menu-element { display: none !important; }

    /* --- A. 顶部栏 --- */
    #mobileTopBar {
        position: fixed; top: 0; left: 0; width: 100%; height: 50px;
        background: var(--bg-glass); backdrop-filter: blur(5px);
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 20px; z-index: 1000; 
        border-bottom: 1px solid var(--border-color);
        transition: transform 0.3s ease, background-color 0.3s; 
        box-sizing: border-box;
    }
    #mobileTopBar.hide-up { transform: translateY(-100%); }
    .mobile-logo { font-weight: bold; font-size: 18px; color: var(--text-main); }
    .hamburger-icon { font-size: 20px; cursor: pointer; padding: 10px; color: var(--text-main); margin-right: -10px;}

    /* --- B. 底部栏 --- */
    #mobileBottomBar {
        position: fixed; bottom: 0; left: 0; width: 100%; height: 55px;
        background: var(--bg-sidebar); border-top: 1px solid var(--border-color);
        display: flex; align-items: center; justify-content: space-around;
        z-index: 1000; padding-bottom: env(safe-area-inset-bottom);
        transition: transform 0.3s ease, background-color 0.3s; 
        box-sizing: border-box;
    }
    #mobileBottomBar.hide-down { transform: translateY(100%); }

    .tab-item { display: flex; flex-direction: column; align-items: center; color: var(--text-muted); font-size: 10px; text-decoration: none; }
    .tab-item i { font-size: 20px; margin-bottom: 3px; }
    .tab-item.active { color: var(--active-color); }

    /* --- C. 全屏遮罩菜单 --- */
    #mobileFsMenu {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: var(--overlay-bg); color: var(--overlay-text); z-index: 2000;
        
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        padding-top: 80px; padding-bottom: 40px;
        
        opacity: 0; visibility: hidden; transform: scale(1.1); transition: all 0.3s ease;
        box-sizing: border-box;
    }
    #mobileFsMenu.open { opacity: 1; visibility: visible; transform: scale(1); }

    /* 固定按钮 */
    .close-menu-btn { 
        position: absolute; top: 20px; right: 20px; 
        font-size: 28px; padding: 10px; cursor: pointer; color: var(--overlay-text); z-index: 2002;
    }
    .mobile-theme-btn {
        position: absolute; top: 20px; left: 20px;
        font-size: 24px; padding: 10px; cursor: pointer; color: var(--overlay-text); z-index: 2002;
        transition: transform 0.2s;
    }
    .mobile-theme-btn:active { transform: scale(0.9); }

    /* 列表容器 */
    .fs-links { 
        list-style: none; width: 100%;
        overflow-y: auto; max-height: 100%;
        scrollbar-width: none;
    }
    .fs-links::-webkit-scrollbar { display: none; }

    /* --- Grid 双列布局 (含左右边距修复) --- */
    .fs-links.grid-layout {
        display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
        align-content: start;
        padding: 0 40px; /* 左右边距 */
        box-sizing: border-box; /* 关键修复 */
    }
    
    .fs-links.grid-layout li { margin: 0; } /* 重置普通margin */

    /* 链接按钮样式 */
    .fs-links.grid-layout a {
        background: var(--overlay-btn-bg);
        border-radius: 8px;
        aspect-ratio: 2.5 / 1;
        width: 100%; height: 100%;
        display: flex; flex-direction: row; align-items: center; justify-content: center;
        gap: 8px; font-size: 15px; color: var(--overlay-text); text-decoration: none;
    }
    .fs-links.grid-layout a i { font-size: 18px; opacity: 0.8; }
    .fs-links.grid-layout a span { white-space: nowrap; }

    /* 手机端分组标题 */
    .fs-group-title {
        grid-column: 1 / -1; /* 跨两列 */
        display: block; width: 100%;
        margin: 25px 0 10px 0; padding-left: 5px;
        font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
        color: var(--overlay-text); opacity: 0.5; text-align: left;
    }

    /* =========================================
    手机端：默认单列布局 (Single Column) 增强版
    ========================================= */

    /* 1. 列表容器：限制最大宽度，防止在 iPad 等宽屏设备上太长 */
    .fs-links:not(.grid-layout) {
        width: 100%;
        max-width: 226px;
        /* 限制内容宽度，更精致 */
        margin: 0 auto;
        /* 居中 */
        padding: 20px 30px;
        /* 左右留白 */
        box-sizing: border-box;
        text-align: left;
        /* 强制靠左，因为有图标 */
    }

    /* 2. 列表项：去掉原本的大间距，改为紧凑的列表 */
    .fs-links:not(.grid-layout) li {
        margin: 0;
        /* 可选：给每个选项加一条淡淡的分割线 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* 3. 链接样式：Flex 布局，图标文字横排 */
    .fs-links:not(.grid-layout) a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* 内容靠左对齐 */

        padding: 10px 10px;
        /* 增加点击区域高度 */
        font-size: 18px;
        /* 字体适中 */
        font-weight: 400;
        color: var(--overlay-text);
        text-decoration: none;
        transition: all 0.2s;
        border-radius: 8px;
        /* 点击反馈圆角 */
    }

    /* 点击/按压 效果 */
    .fs-links:not(.grid-layout) a:active {
        background-color: var(--overlay-btn-bg);
        padding-left: 20px;
        /* 按压时稍微右移一点，增加交互感 */
    }

    /* 4. 图标样式 */
    .fs-links:not(.grid-layout) a i {
        width: 35px;
        /* 固定宽度，确保文字对齐 */
        text-align: center;
        font-size: 20px;
        margin-right: 15px;
        /* 图标和文字间距 */
        opacity: 0.7;
        /* 图标稍微暗一点 */
    }

    /* 5. 分组标题 (单列模式) */
    .fs-links:not(.grid-layout) .fs-group-title {
        display: block;
        margin-top: 30px;
        margin-bottom: 10px;
        padding-left: 10px;
        font-size: 13px;
        font-weight: bold;
        color: var(--overlay-text);
        opacity: 0.4;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}