/* static/css/sidebar.css */

/* Toggle button - top left */
/* 左上角 ☰ 開啟按鈕樣式 */
.sidebar-toggle {
    font-size: 1.6rem;               /* 保持 logo 和 ☰ 的字體樣式一致性 */ 
    color: var(--color-text);                      /* 初始字體顏色一致 */    
    cursor: pointer;
    padding: 10px;
    transition: color 0.3s, text-shadow 0.3s;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* 與其他字體保持一致的陰影 */
    display: flex;
    align-items: center;
    height: 100%;
}

/* hover 效果：發光 + 陰影 + 放大一點點 */
.sidebar-toggle:hover {
    color: #1a73eb; /* hover 時改變字體顏色 */
    text-shadow: var(--shadow); /* hover 時增加陰影 */
}

/* Sidebar layout */
/* 側邊欄主體 */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    padding: 20px;
    box-shadow: var(--shadow);
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

/* 展開時進入畫面 */
.sidebar.open {
    transform: translateX(0);
}

/* 隱藏（初始化） */
.sidebar.hidden {
    display: none;
}

/* 標題和收合按鈕 */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    margin-bottom: 20px;
}

.sidebar-close {
    cursor: pointer;
    font-size: 28px;
}

.sidebar-content{
    padding: 10px;
}

/* 側邊欄內部連結 */
.sidebar-content ul {
    list-style: none;
    padding: 0;
}

.sidebar-content li {
    margin: 10px 0;
}

.sidebar-content a { 
    color:var(--color-text);
    text-decoration: none;
}

.sidebar-content a:hover {
    color: #1a73eb; /* hover 改變顏色 */
    transform: scale(1.05); /* 稍微放大 */
    text-decoration: none;
}