/* =====================================================
   Reading OS
   Sidebar CSS

   Left Navigation
   （类名已与 index.html 实际结构对齐：
     .sidebar-header / .sidebar-nav / .nav-item /
     .nav-icon / .nav-text / .nav-badge / .nav-arrow /
     .sub-menu / .sub-item）
===================================================== */

/* ===============================
   侧边栏整体

   静态：只有 76px 宽的图标条
   悬停：浮出 260px，图标位置不动，文字淡入
   图标的左右留白用 calc 算出来，永远落在图标条的中线上，
   所以展开过程中图标一动不动，只有文字进出。
   宽度改 css/main.css 里的 --rail / --panel 即可。
================================ */
.sidebar{
    --rail-pad:14px;   /* 图标条左右留白 */
    --icon-size:22px;  /* .nav-icon 的宽度 */

    width:var(--rail, 76px);
    height:100vh;
    position:fixed;
    left:0;
    top:0;
    background:var(--card-color);
    border-right:1px solid var(--border-color);
    display:flex;
    flex-direction:column;
    padding:30px var(--rail-pad);
    z-index:1000;
    overflow:hidden;
    transition:width .26s cubic-bezier(.4,0,.2,1), box-shadow .26s ease;
}

/* 展开。.expanded 留给以后做「固定展开」的开关用 */
.sidebar:hover,
.sidebar:focus-within,
.sidebar.expanded{
    width:var(--panel, 260px);
    overflow-y:auto;
    box-shadow:12px 0 34px rgba(0,0,0,.07);
    /* 延迟 0.12s，鼠标从旁边扫过去不会误弹 */
    transition-delay:.12s;
}

body.dark .sidebar:hover,
body.dark .sidebar:focus-within,
body.dark .sidebar.expanded{
    box-shadow:12px 0 34px rgba(0,0,0,.45);
}

/* 收起时统一藏掉文字类元素 */
.logo-text,
.nav-text,
.nav-badge,
.nav-arrow,
.sub-menu{
    opacity:0;
    transition:opacity .12s ease;
}

/* 展开后再淡入，等宽度动画走得差不多了再出现，避免文字挤在窄条里 */
.sidebar:hover .logo-text,
.sidebar:hover .nav-text,
.sidebar:hover .nav-badge,
.sidebar:hover .nav-arrow,
.sidebar:hover .sub-menu,
.sidebar:focus-within .logo-text,
.sidebar:focus-within .nav-text,
.sidebar:focus-within .nav-badge,
.sidebar:focus-within .nav-arrow,
.sidebar:focus-within .sub-menu,
.sidebar.expanded .logo-text,
.sidebar.expanded .nav-text,
.sidebar.expanded .nav-badge,
.sidebar.expanded .nav-arrow,
.sidebar.expanded .sub-menu{
    opacity:1;
    transition:opacity .2s ease .16s;
}

/* 收起时子菜单不占位 */
.sidebar:not(:hover):not(:focus-within):not(.expanded) .sub-menu{
    display:none;
}

@media(prefers-reduced-motion:reduce){
    .sidebar,
    .logo-text,
    .nav-text,
    .nav-badge,
    .nav-arrow,
    .sub-menu{
        transition:none;
    }
}

/* ===============================
   Logo / 顶部
================================ */
.sidebar-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 calc((var(--rail, 76px) - var(--rail-pad) * 2 - 42px) / 2); /* logo 居中于图标条 */
    margin-bottom:45px;
    flex-shrink:0;
}

.logo-icon{
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:14px;
    background:var(--primary);
    color:var(--card-color);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    font-weight:700;
    overflow:hidden;
}

.logo-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:14px;
}

.logo-text{
    font-size:22px;
    font-weight:700;
    letter-spacing:-.5px;
    white-space:nowrap;
}

/* ===============================
   导航菜单
================================ */
.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
}

.nav-item{
    position:relative;
    height:48px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 calc((var(--rail, 76px) - var(--rail-pad) * 2 - var(--icon-size)) / 2); /* 图标居中于图标条 */
    border-radius:14px;
    color:var(--sub-text);
    font-size:15px;
    cursor:pointer;
    flex-shrink:0;
    transition:background .25s ease, color .25s ease;
}

.nav-item:hover{
    background:rgba(0,0,0,.05);
    color:var(--text-color);
}

body.dark .nav-item:hover{
    background:rgba(255,255,255,.08);
}

/* 当前页面 */
.nav-item.active{
    background:var(--primary);
    color:var(--card-color);
    font-weight:600;
}

/* 图标 */
.nav-icon{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    flex-shrink:0;
}

.nav-text{
    flex:1;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* 展开箭头（含子菜单的项） */
.nav-arrow{
    font-size:12px;
    transition:transform .25s ease;
}

.nav-item.has-sub.open .nav-arrow{
    transform:rotate(90deg);
}

/* 数量角标 */
.nav-badge{
    margin-left:auto;
    flex-shrink:0;
    min-width:22px;
    height:20px;
    padding:0 6px;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:11px;
    background:#eeeeee;
    color:#666;
}

.nav-item.active .nav-badge{
    background:rgba(255,255,255,.25);
    color:inherit;
}

body.dark .nav-badge{
    background:#333;
    color:#aaa;
}

/* ===============================
   子菜单（统计 -> 仪表盘/画册/热力图/日历）
================================ */
.sub-menu{
    display:none;
    flex-direction:column;
    gap:2px;
    margin:4px 0 8px 37px;
}

.nav-item.has-sub.open + .sub-menu,
.nav-item.has-sub.open .sub-menu{
    display:flex;
}

/* sub-menu 是 nav-item 的子元素，直接用 display 切换 */
.sub-menu.show{
    display:flex;
}

.sub-item{
    padding:10px 14px;
    border-radius:10px;
    font-size:13px;
    color:var(--sub-text);
    cursor:pointer;
    transition:.2s;
}

.sub-item:hover{
    background:rgba(0,0,0,.05);
    color:var(--text-color);
}

body.dark .sub-item:hover{
    background:rgba(255,255,255,.08);
}

.sub-item.active{
    color:var(--text-color);
    font-weight:600;
    background:rgba(0,0,0,.05);
}

body.dark .sub-item.active{
    background:rgba(255,255,255,.08);
}

/* ===============================
   底部区域
================================ */
.sidebar-footer{
    border-top:1px solid var(--border-color);
    padding-top:20px;
    flex-shrink:0;
}

.sidebar-footer .nav-item{
    color:var(--sub-text);
}

/* ===============================
   深色模式
================================ */
body.dark .sidebar{
    background:#181818;
}

/* ===============================
   移动端
================================ */
@media(max-width:900px){

    /* 手机上没有「悬停」这回事，侧栏整条改成底部标签栏：
       图标 + 文字常显，一直可点，不再靠划出来 */
    .sidebar,
    .sidebar:hover,
    .sidebar:focus-within,
    .sidebar.expanded{
        width:100%;
        height:auto;
        top:auto;
        right:0;
        bottom:0;
        left:0;
        flex-direction:row;
        align-items:stretch;
        padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        border-right:none;
        border-top:1px solid var(--border-color);
        box-shadow:0 -6px 22px rgba(0,0,0,.07);
        overflow:visible;
        transform:none;
        transition:none;
    }

    body.dark .sidebar,
    body.dark .sidebar:hover{
        box-shadow:0 -6px 22px rgba(0,0,0,.4);
    }

    /* logo 占地方，标签栏里不要 */
    .sidebar-header{
        display:none;
    }

    .sidebar-nav{
        flex-direction:row;
        gap:2px;
        flex:1;
    }

    .sidebar-footer{
        border-top:none;
        padding-top:0;
        display:flex;
    }

    /* 每个标签：图标在上、文字在下 */
    .sidebar .nav-item{
        flex:1;
        min-width:54px;
        height:auto;
        flex-direction:column;
        justify-content:center;
        gap:3px;
        padding:7px 2px;
        border-radius:12px;
        font-size:11px;
    }

    .sidebar .nav-item .nav-icon{
        font-size:19px;
    }

    /* 文字在手机端一直显示（盖掉桌面端「悬停才淡入」的规则） */
    .sidebar .nav-item .nav-text{
        opacity:1;
        flex:none;
        font-size:11px;
        line-height:1.1;
        transition:none;
    }

    .sidebar .nav-item .nav-badge{
        opacity:1;
        position:absolute;
        top:2px;
        right:calc(50% - 22px);
        margin:0;
        min-width:16px;
        height:16px;
        padding:0 4px;
        font-size:10px;
        transition:none;
    }

    .sidebar .nav-item .nav-arrow,
    .sidebar .sub-menu{
        display:none;
    }

    /* 选中态：整块深色在手机上太重，换成浅底 */
    .sidebar .nav-item.active{
        background:rgba(0,0,0,.06);
        color:var(--text-color);
        font-weight:600;
    }

    body.dark .sidebar .nav-item.active{
        background:rgba(255,255,255,.12);
        color:var(--text-color);
    }

    .sidebar .nav-item.active .nav-badge{
        background:#eeeeee;
        color:#666;
    }

    body.dark .sidebar .nav-item.active .nav-badge{
        background:#333;
        color:#aaa;
    }
}