/* 顶部导航栏 */

#topbar {

    height: var(--topbar-height);

    background: #fff;

    box-shadow: 0 1px 4px rgba(0,0,0,0.08);

    display: flex;

    align-items: center;

    padding: 0 20px;

    position: fixed;

    top:0; left:0; right:0;

    z-index: 100;

}

#topbar .brand { font-size: 1.2em; font-weight: bold; margin-left: 10px; }

#topbar .topbar-actions { margin-left: auto; }



#app-container {

    display: flex;

    margin-top: var(--topbar-height);

    min-height: calc(100vh - var(--topbar-height));

}



/* 侧边栏 */

#sidebar {

    width: var(--sidebar-width);

    background: #fff;

    border-right: 1px solid var(--border);

    padding: 20px 0;

    position: fixed;

    top: var(--topbar-height);

    bottom: 0;

    overflow-y: auto;

    z-index: 50;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    -webkit-overflow-scrolling: touch;

}

#sidebar ul { list-style: none; }

#sidebar .nav-link {

    display: block;

    padding: 10px 20px;

    color: var(--text);

    transition: background 0.2s;

    -webkit-tap-highlight-color: transparent;

}

#sidebar .nav-link:hover, #sidebar .nav-link.active {

    background: #e6f7ff;

    color: var(--primary);

}



/* 主内容区 */

#main-content {

    margin-left: var(--sidebar-width);

    flex: 1;

    padding: 20px;

    overflow-y: auto;

    min-height: calc(100vh - var(--topbar-height));

}



/* 登录遮罩 —— 移动端适配 */

#login-overlay {

    position: fixed; top:0; left:0; right:0; bottom:0;

    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    padding: 20px;

}

.login-box {

    background: #fff;

    padding: 30px;

    border-radius: var(--radius);

    text-align: center;

    width: 100%;

    max-width: 320px;

    box-shadow: 0 10px 40px rgba(0,0,0,0.3);

}

.login-box h2 { margin-bottom: 20px; }

.login-box input {

    padding: 10px;

    margin: 10px 0;

    width: 100%;

    border: 1px solid var(--border);

    border-radius: 4px;

    font-size: 16px; /* 防止 iOS 自动缩放 */

}

.login-box button {

    margin-top: 10px;

    padding: 10px 20px;

    background: var(--primary);

    color: #fff;

    border: none;

    border-radius: 4px;

    width: 100%;

    font-size: 16px;

}



/* Toast */

#toast-container { position: fixed; top: 70px; right: 20px; z-index: 10000; }

.toast {

    padding: 10px 20px;

    background: #333;

    color: #fff;

    border-radius: 4px;

    margin-bottom: 10px;

    animation: fadeIn 0.3s;

}

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }



/* 移动端适配 */

#menu-toggle { display: none; }

/* 侧边栏菜单分组 */
#sidebar .nav-group {
    padding: 16px 20px 4px;
    font-size: 11px;
    color: #999;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}
#sidebar .nav-link {
    display: block;
    padding: 8px 16px 8px 20px;
    color: var(--text);
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0 20px 20px 0;
    margin-right: 12px;
    font-size: 14px;
    margin-bottom: 2px;
}
#sidebar .nav-link:hover, #sidebar .nav-link.active {
    background: #e6f7ff;
    color: var(--primary);
}

@media (max-width: 768px) {

    #menu-toggle { display: inline-block; background: none; border: none; font-size: 1.5em; padding: 0 8px; }

    .brand { font-size: 1em !important; }

    #sidebar {

        transform: translateX(-100%);

        width: 280px; /* 更宽方便点击 */

        box-shadow: 2px 0 8px rgba(0,0,0,0.1);

    }

    #sidebar.open { transform: translateX(0); }

    #main-content { margin-left: 0; padding: 12px; }

    /* 登录框全屏适应 */

    .login-box { max-width: 90%; padding: 20px; }

    /* Toast 更靠近顶部 */

    #toast-container { top: 60px; right: 10px; left: 10px; }

    .toast { font-size: 14px; }

}