// 导入全局样式变量
@import '@/styles/variables.scss';

// ===== Sidebar 侧边栏样式 =====

.sidebar {
    width: $sidebar-width;
    position: fixed;
    left: 0;
    top: $header-height;
    height: calc(100vh - $header-height);
    border-right: 1px solid $border-light;
    background: $sidebar-bg;  // 使用 Sidebar 专用背景色
    padding: $spacing-6;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 40;
    transition: transform 0.2s ease, width 0.2s ease;

    // 桌面端（≥1025px）：默认展开，collapsed 时折叠
    @media (min-width: 1025px) {
        transform: translateX(0);  // 始终显示
        
        &.collapsed {
            width: $sidebar-collapsed-width;
        }
    }

    // 中等屏（769px~1024px）：默认展开（200px），collapsed 时折叠
    @media (min-width: 769px) and (max-width: 1024px) {
        width: $sidebar-width-md;
        transform: translateX(0);  // 始终显示
        
        &.collapsed {
            width: $sidebar-collapsed-width;
        }
    }

    // 移动端（≤768px）：默认隐藏，collapsed 时显示
    @media (max-width: 768px) {
        width: $sidebar-width;
        transform: translateX(-100%);  // 默认隐藏
        
        &.collapsed {
            transform: translateX(0);  // 点击汉堡菜单后显示
        }
    }

    // 隐藏式滚动条
    scrollbar-width: none;  // Firefox
    -ms-overflow-style: none;  // IE/Edge

    &::-webkit-scrollbar {
        display: none;  // Chrome/Safari/Opera
    }
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: $spacing-8;
}

// 章节标题 - 使用更具体的选择器避免被其他页面样式覆盖
.sidebar .section-title {
    font-size: $font-sm;
    font-weight: $font-weight-bold;
    color: $text-hint;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: $spacing-4;
    background: transparent;
    padding: 0;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: $spacing-3;
    padding: $spacing-3 $spacing-4;
    border-radius: $radius-xl;
    font-size: $font-md;
    font-weight: $font-weight-medium;
    color: $sidebar-text-color;  // 使用 Sidebar 专用文字色
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    position: relative;

    // 悬停状态
    &:hover {
        background: $sidebar-hover-bg;
        color: $sidebar-active-color;  // 悬停时文字变深
        transform: translateX($spacing-1);

        .iconify {
            transform: scale(1.1);
        }
    }

    // 激活状态 - 深灰色粗体字 + 灰色圆角背景
    &.active {
        background: $sidebar-hover-bg;  // 灰色圆角背景
        color: $sidebar-active-color;   // 深灰色近黑 #131212
        font-weight: $font-weight-bold; // 加粗到 700

        .iconify {
            color: $sidebar-active-color;  // 图标也变深灰色
            font-weight: $font-weight-bold;
        }
    }

    // 按下状态
    &:active {
        transform: translateX($spacing-1);
    }

    .iconify {
        font-size: $icon-xl;
        flex-shrink: 0;
        transition: all 0.2s ease;
        color: $sidebar-text-color;  // 默认图标颜色
    }
}

.promo-section {
    margin-top: $spacing-12;
    padding: $spacing-4;
    border-radius: $radius-2xl;
    background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
    color: $bg-secondary;
    position: relative;
    overflow: hidden;

    .promo-content {
        position: relative;
        z-index: 10;
    }

    .promo-label {
        font-size: $font-sm;
        opacity: 0.8;
        margin-bottom: $spacing-2;
    }

    .promo-title {
        font-size: $font-lg;
        font-weight: $font-weight-bold;
        margin-bottom: $spacing-3;
        line-height: $line-height-tight;
    }

    .promo-btn {
        font-size: $font-xs;
        font-weight: $font-weight-bold;
        padding: $spacing-1 $spacing-3;
        border-radius: $radius-full;
        background: $bg-secondary;
        color: $primary-color;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
            transform: scale(1.05);
        }
    }

    .promo-icon {
        position: absolute;
        right: -$spacing-4;
        bottom: -$spacing-4;
        font-size: $icon-3xl;
        opacity: 0.1;
        color: $bg-secondary;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        width: $sidebar-width-md;  // 使用全局变量 200px
        padding: $spacing-4;
    }
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
}
