#sidebarNav > .container-fluid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* 側邊欄Sidebar */
#sidebarNav {
    display: flex;
    flex-direction: column;
    background-color: var(--color-first);
    width: 288px;
    min-width: 288px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

/* Bar Icon */
#sidebarNav .toggle-btn {
    background-color: transparent;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    font-size: 2rem;		
    padding-left: 2rem;
    margin: 0;
    width: max-content;
}

/* 文字與圖標間距 */
#sidebarNav .toggle-btn span,
#sidebarNav .nav-link span {
    padding-left: 1rem;
}

/* 圖標+文字 */
#sidebarNav .nav-link {
    display: block;
    color: var(--color-white);
    font-size: 1rem;
    padding: 1rem 6rem 1rem 1rem;
    margin-left: 1rem;
    border-bottom: 2px solid var(--color-hover);
    white-space: nowrap; /* 避免換行 */
    transition: all 0.5s ease-in-out;
    box-sizing: border-box;
    background-color: transparent;
    border-width: 0 0 2px 0;
    font: inherit;
    text-align: left;
    width: calc(100% - 1rem);
}

#sidebarNav .nav-link:hover {
    color: var(--color-white);
    background-color: var(--color-hover);
    border-bottom: 2px solid transparent;
    border-radius: 10px;
}

/* 子目錄點擊狀態 */
#sidebarNav .nav-link.active,
#sidebarNav .nav-link.show {
    color: var(--color-white);
    background-color: var(--color-second);
    border-radius: 10px;
    box-sizing: border-box;
}

/* 子目錄 */
#sidebarNav .dropdown-menu {
    border: none;
    background-color: var(--color-first);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#sidebarNav .dropdown-menu .dropdown-item {
    color: var(--color-white);
    border-bottom: 2px solid transparent;
    padding: 1rem 0rem 1rem 1rem;
    width: auto;
}

#sidebarNav .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
}

/* 收納 */
#sidebarNav.collapse {
    width: 96px;
    min-width: 96px;
}

#sidebarNav.collapse .toggle-btn span,
#sidebarNav.collapse .nav-link span {
    display: none;
}

#sidebarNav.collapse .nav-link {
    padding: 1rem;
    align-items: 1rem;
    width: fit-content;
    border-bottom: 2px solid transparent;
}

/* 小螢幕不顯示 */
@media (max-width: 768px) {
    #sidebarNav {
        display: none; /* 隱藏側邊欄 */
    }
}

/* 響應式設計 */
#topNav {
    display: none; /* 預設不顯示 */
    background-color: transparent;
}

@media (max-width: 768px) {
    #topNav {
        display: block; /* 顯示新導航 */
        background-color: var(--color-first);
        padding: 0.5rem 1rem;
        box-shadow: 0 0px 10px var(--color-shadow);
    }

    #topNav .navbar-brand, 
    #topNav .nav-link {
        color: var(--color-white)!important;
    }

    #topNav .nav-link span {
        padding-left: 1rem;
    }

    #topNav .nav-link:hover, 
    #topNav .nav-link:focus,
    #topNav .nav-link:active {
        background-color: var(--color-hover);
        color: var(--color-fifth)!important; /* Gold color on hover/focus */
        border-radius: 10px;
    }

    /* Dropdown Menu Styles */
    #topNav .dropdown-menu {
        background-color: var(--color-first);
        color: var(--color-fifth)!important;
        border: none;
        margin: 0;
        padding: 0;
    }

    #topNav .dropdown-item {
        color: var(--color-fifth)!important;
    }
}
/* 側邊選單固定在畫面上，取代原本的捲動 JavaScript */
#sidebarNav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  align-self: flex-start;
}

/* 手機版選單的下拉觸發按鈕：去除按鈕預設外觀 */
#topNav button.nav-link {
    background-color: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    width: 100%;
}