/* =========================================
   Task 1: Container
   ========================================= */
.app-sidebar {
    width: 156px;
    position: fixed;
    top: 70px;
    bottom: 0;
    left: 0;
    z-index: 90;
    background-color: transparent;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 20px;
    font-family: var(--font-base);
    color: #A0AEC0;
    transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.app-sidebar::-webkit-scrollbar {
    width: 0px; 
    background: transparent;
}


/* =========================================
   Task 2: Main Menu
   ========================================= */
.side-nav {
    display: flex;
    flex-direction: column;
    gap: 24px; 
    padding: 0 8px; 
    margin-bottom: 40px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px; 
    text-decoration: none;
    transition: opacity 0.2s;
    
    font-family: 'Pretendard', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 18px;  /* 18px */
    line-height: 1.4; /* 140% */
    letter-spacing: 0%;
    color: #FFFFFF; 
}

.nav-icon {
    width: 24px; /* 稍微调大一点以匹配 18px 的粗体字 */
    height: 24px;
    object-fit: contain;
    /* 确保图标颜色正确，如果是 SVG 建议用 CSS filter 或直接换白色 SVG */
}

/* Hover 效果 (改为简单的透明度变化，或者维持原样) */
.nav-item:hover {
    opacity: 0.8; 
    /* 如果不需要背景变色，可以把 background 去掉，只变透明度 */
}


.sidebar-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    /* --- 【核心修改】布局参数 --- */
    display: flex;
    flex-direction: column;
    gap: 16px;       /* Spacing: 之前是 20/24，现在改为 16px */
    padding-left: 8px;  /* Padding: 8px */
    padding-right: 4px; /* Padding: 8px */
}

.sidebar-section-header {
    display: flex;
    align-items: center; /* 【关键】垂直居中，解决"太靠上"的问题 */
    gap: 8px;            /* 图标和字的距离 */
    height: 24px;        /* 强制给个高度，确保和图标一致 */
}

.sidebar-section-title {
    font-weight: 700;          /* Bold */
    font-size: 14px;
    color: #FFFFFF;            /* 【修正】白色文字，不是绿色 */
    line-height: 1;            /* 防止行高撑开导致对不齐 */
}

/* 2. 列表区域 */
.notice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;                 /* 每一行的间距 */
}

.notice-item {
    /* 1. 您的参数 (Your Specs) */
    font-weight: 500;   /* Medium */
    font-size: 12px;
    line-height: 100%;  /* 1 */
    letter-spacing: 0;

    /* 2. 颜色设定 */
    color: #FFFFFF;     /* 白色文字 */
    
    /* 3. 布局设定 (防止文字换行) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出显示省略号 */
    cursor: pointer;
    transition: opacity 0.2s;
}

.notice-item:hover {
    opacity: 0.8; /* Hover 时稍微透明一点 */
    text-decoration: underline;
}

/* --- 绿色 Tag 样式 (保持之前的下划线设计) --- */
.notice-tag {
    color: #0DEB70;     /* 绿色 */
    font-weight: 500;   /* 跟随文字粗细 */
    font-size: 12px;    /* 确保 Tag 也是 12px */
    margin-right: 2px;
    text-decoration: underline; 
    text-underline-offset: 3px;
}

/* 3. 按钮样式 (完全应用您的参数) */
.btn-sidebar-more {
    /* --- 布局设定 (实现小巧居中) --- */
    width: auto;               /* 【关键】改为 auto，不占满整行 */
    min-width: 50px;           /* 给个最小宽度，保持胶囊形状好看 */
    align-self: center;        /* 【关键】在 flex 容器中自动居中 */
    font-weight: 500;
    font-size: 12px;
    color: var(--grey-200);          /* 指定颜色 */
    background: transparent;
    
    /* 边框使用变量 */
    border: 1px solid var(--grey-600); 
    
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s;
}

/* Hover 效果 (微调以适配新边框色) */
.btn-sidebar-more:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}


/* static/css/layout/sidebar.css - 追加榜单部分 */

/* =========================================
   Task 4: 高额中奖榜单 (High Winners Ranking)
   ========================================= */

/* 1. 列表容器 */
/* =========================================
   1. 上模块：高额中奖 (无限滚动版)
   ========================================= */

/* 1. 视口：限制高度 (只显示 3 个完整条目) */
/* 计算逻辑：(单个高度约84px + 间距16px) * 3 - 16px ≈ 284px */
.rank-list-viewport {
    width: 100%;
    height: 252px; /* ✅ 如果显示不全或留白太多，请微调这个数字 */
    overflow: hidden;
    position: relative;
}

/* 2. 轨道：JS 控制这里做 translateY 移动 */
.rank-track {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 保持您原本的间距 */
    
    transform: translateY(0);
    /* ✅ 核心动画：丝滑过渡 (拒绝 linear) */
    transition: transform 0.5s ease-in-out;
}

/* 3. 单个榜单项 (设计样式完全不动) */
.rank-item {
    display: flex;
    flex-direction: column;
    /* 必须加 flex-shrink: 0 防止滚动时变形 */
    flex-shrink: 0;
    padding:8px;
    /* 您的原始样式保留 */
    position: relative;
    overflow: hidden; 
    border-radius: 8px;
    background: transparent; /* 平时透明 */
    border: 1px solid transparent;
    
    /* 加上过渡，万一将来有 hover */
    transition: background 0.3s;
}

/* 悬停效果 (保留) */
.rank-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* =========================================
   新增：高光闪烁 (Flash)
   注意：只在 JS 添加 .flashing 类时触发
   ========================================= */

.rank-item.flashing {
    /* ✅ 只保留闪烁，去掉了那个 slideDownEntry */
    animation: winnerFlash 1s ease-out forwards;
}

/* --- 动画：高光闪烁 --- */
@keyframes winnerFlash {
    0% {
        /* 瞬间高亮：白色半透明背景 + 亮边框 */
        background-color: rgba(255, 255, 255, 0.4); 
        border-color: rgba(255, 255, 255, 0.8);
    }
    100% {
        /* 恢复原样 */
        background-color: transparent; /* 或者 #1A202C，视您的底色而定 */
        border-color: transparent;
    }
}

/* --- 内部元素样式 (保持不变) --- */
.rank-top { display: flex; align-items: center; gap: 12px; }
.rank-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background-color: #333; }
.rank-info { display: flex; flex-direction: column; gap: 2px; }
.rank-game { font-weight: 700; font-size: 12px; color: #FFFFFF; }
.rank-user { font-size: 12px; color: #C19D83; }
.rank-bottom { display: flex; justify-content: space-between; align-items: center; padding-left: 0; }
.rank-odds { font-size: 12px; color: #B7C6FF; }
.rank-amount { font-weight: 700; font-size: 12px; color: #00FF85; }
/* static/css/layout/sidebar.css - 追加实时出款部分 */

/* =========================================
   Task 5: 实时出款榜单 (Real-time Withdraw)
   ========================================= */

/* 1. 列表容器 */
/* =========================================
   Side Bar 下模块专用样式
   ========================================= */

/* 视口：限制高度 */
.sidebar-withdraw-viewport {
    width: 100%;
    
    /* ✅ 精确计算: (48px * 3个) + (16px间距 * 2个) = 176px */
    height: 176px; 
    
    overflow: hidden;
    position: relative;

}

/* 轨道：垂直排列 */
.sidebar-withdraw-track {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 间距 */
    
    transform: translateY(0);
    /* 核心动画：0.5秒丝滑过渡 */
    transition: transform 0.5s ease-in-out;
}

/* 复用之前的条目样式 (如果主页也用这个，就不需要重复写) */
/* 如果没写过，请加上下面这些 */
.withdraw-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px; /* 固定高度 */
    flex-shrink: 0;
}
.withdraw-avatar-wrap { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #00FF85; background-color: #1A202C; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.withdraw-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.withdraw-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.withdraw-user { font-size: 12px; color: #FFFFFF; }
.withdraw-time { font-size: 11px; color: #9B6948; }
.withdraw-amount { font-weight: 700; font-size: 12px; color: #FF6C37; } 

/* ==============================================================
   🌟 PC & Tablet 端：Sidebar 折叠/展开动画
   ============================================================== */
@media screen and (min-width: 769px) {
    /* 1. 基础平滑过渡：让侧边栏和主区域伸缩变得丝滑 */
    .app-sidebar {
        width: 156px; 
        transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        overflow-x: hidden; /* 防止收缩时文字撑破盒子 */
    }
    
    /* 注意：这里的 app-main 过渡，你需要确保 home.css 里没有对 margin-left 施加覆盖 */
    .app-main {
        margin-left: 156px; 
        transition: margin-left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    /* ----------------------------------------------------
       ✨ 收缩状态 (当 body 拥有 sidebar-collapsed 时)
       ---------------------------------------------------- */
    
    /* 2. 整体变窄 */
    body.sidebar-collapsed .app-sidebar {
        width: 72px; /* 收缩后的宽度，刚好容纳图标 */
    }
    body.sidebar-collapsed .app-main {
        margin-left: 72px; /* 主内容区向左延伸填补空白 */
    }

    /* 3. 暴力隐藏所有长文字和列表 */
    body.sidebar-collapsed .nav-item span,              
    body.sidebar-collapsed .sidebar-section-title,      
    body.sidebar-collapsed .notice-list,                
    body.sidebar-collapsed .rank-list-viewport,         
    body.sidebar-collapsed .sidebar-withdraw-viewport,  
    body.sidebar-collapsed .btn-sidebar-more,           
    body.sidebar-collapsed .app-sidebar > div:last-child { /* 隐藏最底部的邀请好友海报 */
        display: none !important;
    }

    /* 4. 上半部导航图标：强制居中 */
    body.sidebar-collapsed .nav-item {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.sidebar-collapsed .nav-item .nav-icon {
        margin-right: 0 !important;
    }

    /* 5. 下半部三大模块标题：重构为上下排列并居中 */
    body.sidebar-collapsed .sidebar-section-header {
        flex-direction: column; 
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 10px 0;
        cursor: pointer;
    }
    body.sidebar-collapsed .sidebar-section-header .nav-icon {
        margin-right: 0 !important;
    }

    /* 6. 神奇伪类：利用 CSS 自动生成设计稿里的英文字母 */
    
    /* 第一个区块：公告 -> Noti */
    body.sidebar-collapsed .sidebar-section:nth-of-type(1) .sidebar-section-header::after {
        content: "Noti";
        font-family: 'Poppins', sans-serif;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        line-height: 1;
    }

    /* 第二个区块：赢家 -> Win */
    body.sidebar-collapsed .sidebar-section:nth-of-type(2) .sidebar-section-header::after {
        content: "Win";
        font-family: 'Poppins', sans-serif;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        line-height: 1;
    }

    /* 第三个区块：出金 -> with draw (利用 \A 实现换行) */
    body.sidebar-collapsed .sidebar-section:nth-of-type(3) .sidebar-section-header::after {
        content: "with\A draw"; 
        white-space: pre-wrap; /* 必须加这句，\A 换行符才会生效 */
        font-family: 'Poppins', sans-serif;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        line-height: 1.2;
    }
}