/* 假設 Navbar 的實際高度大約為 38px */
:root {
    --navbar-height: 38px;
}

/* 強制隱藏元件 */
.d-none-important {
    display: none !important; 
}

/* 讓內容寬度自動收縮 */
.content-auto-fit { 
    width: auto;    /* 核心設置：讓 Flex 項目收縮到其內容的最小寬度 */
    flex-grow: 0;   /* 確保其不會拉伸 */
    flex-shrink: 1; /* 額外設置 flex-shrink: 1; 確保它可以收縮 */
}

/* 將主內容區塊設定為從 Navbar 下方開始，佔據剩餘所有空間 */
#uiMainScreen {
    /* 將主內容區塊包裝在一個新容器中，以便定位 */
    position: absolute;
    top: var(--navbar-height);
    /* 從 Navbar 的下方開始 */
    left: 0;
    right: 0;
    bottom: 0;
    /* 延伸到視窗底部 */
    overflow-y: auto;
    /* 確保內容超出時可以滾動 */
    transition: left 0.3s ease;
    /* 新增：為桌面版側邊欄收合預留動畫效果 */
}

/* 確保 body 沒有額外的 padding 或 margin 影響佈局 */
body {
    margin: 0;
    padding: 0;
}

/* 0. 主畫面定端列 Navbar 藍色主題 */
.bg-admin-blue {
    background-color: #4e73df !important;
    /* 與側邊欄主背景色相同 */
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
    /* 增加輕微的陰影 */
    border-bottom: 1px solid #3c5ec7;
    /* 增加底部細線，讓層次感更強 */
    height: var(--navbar-height);
    /* 確保與變數匹配 */
    line-height: var(--navbar-height);
    /* * 頂端列的高度恢復到較小的設定 */
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
    /* ***** 核心 Flexbox 佈局 ***** */
    display: flex;
    /* 啟用 Flex 容器 */
    align-items: center;
    /* 內容垂直置中 */
}

/* 確保漢堡圖示和品牌文字在藍色背景上保持白色 */
.navbar-dark .navbar-toggler-icon {
color: white;
    /* 使用 transform 縮放圖示 */
    transform: scale(0.8);
    /* 確保縮放動畫在不同瀏覽器中正常運作 */
    display: inline-block;
    transition: transform 0.2s ease;
}

/* 確保漢堡按鈕的點擊區域也跟著縮小 */
.navbar-toggler {
    padding: 0.1rem 0.5rem;
    /* 恢復最初的 padding */
    border: none;
    /* 移除外框線 */
    /* 移除點擊或聚焦時出現的預設藍色或黑色外框（Outline） */
    outline: none;
    /* ***** 確保按鈕不會被 Flex 壓縮或拉伸 ***** */
    flex-shrink: 0;
}

/* 右側內容區域樣式 */
#navbar-right-content {
    /* ***** 核心 Flexbox 佔滿剩餘空間 ***** */
    flex-grow: 1;
    /* 佔滿所有剩餘的水平空間 */
    display: flex;
    /* 如果右側有多個元素，也啟用 Flex 佈局 */
    align-items: center;
    /* 讓右側內容與按鈕垂直對齊 */
    /* *************************************** */
    height: 100%;
    line-height: normal;
    /* 重置行高，避免繼承 Navbar 的 line-height 導致內容被擠壓 */
    /* 確保內容靠左對齊 */
    justify-content: flex-start;
    padding-right: 1rem;
    /* 給右邊留一點空間 */
}

/* 新增：覆寫下拉選單按鈕在 Navbar 上的樣式 */
#navbar-right-content .dropdown-toggle {
    /* 確保懸停時不會出現奇怪的背景色或邊框 */
    transition: none;
    /* 確保文字不會在高度較小的 Navbar 中被擠壓 */
    line-height: 1.5;
    height: var(--navbar-height);
    /* 讓按鈕高度填滿 Navbar */
    display: flex;
    align-items: center;
}

/* 確保下拉選單按鈕懸停時有視覺效果 */
#navbar-right-content .dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/* 確保下拉選單按鈕被點擊時，藍色框線消失 */
#navbar-right-content .dropdown-toggle:focus {
    box-shadow: none !important;
}

/* ***** 核心修改：讓下拉選單與按鈕文字左側對齊 ***** */
.dropdown .dropdown-menu {
    /* 覆寫 Bootstrap 可能帶來的 right 屬性 */
    right: auto;
    /* 將左側定位到 left，使其與按鈕的左側邊緣對齊 */
    left: 12px;
}

/* 當sidebarMenu永遠顯示時, 主內容區塊向右推 224px */
/* 這樣就會產生 '寬度減少' 224px 的視覺效果 */
.menu-open {
    /*margin-left: 224px;*/
    width: calc(100% - 224px); /* 確保主內容不會超出邊界，可選 */
}

/* 1. 側邊欄容器 */
#sidebarMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 224px;
    height: 100vh;
    background-color: #4e73df;
    color: rgba(255, 255, 255, 0.8);
    transform: translateX(-100%);
    /* 預設在 Mobile 隱藏 */
    transition: transform 0.3s ease;
    z-index: 1050;
    /* 💡 增加頂部填充以避免內容被頂部 Navbar 遮擋。 */
    padding-top: 39px;
    overflow-y: auto;
}

#sidebarMenu.show {
    transform: translateX(0);
    /* Mobile 模式下開啟 */
}

/* 2. 版本宣告標題 (Sidebar Brand) */
#sidebarMenu .sidebar-brand {
    height: 60px;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    background-color: #375da7;
    /* 略深的品牌背景 */
    padding: 0 1rem;
    text-decoration: none;
    /* 💡 確保品牌區塊位於 Navbar 下方 */
    margin-top: -39px;
    /* 將品牌區塊向上拉，覆蓋 sidebarMenu 的 padding-top */
}

/* 確保側邊欄品牌標籤中的內容垂直置中 */
#sidebarMenu .sidebar-brand .sidebar-brand-icon,
#sidebarMenu .sidebar-brand .sidebar-brand-text {
    line-height: 60px;
    /* 確保圖示和文字在 60px 高度內置中 */
}

.sidebar-brand-text .ver-number {
    /* 調整字體大小，例如設為 0.6em 或 12px */
    font-size: 0.6em; 
    /* 調整行高，確保對齊 */
    line-height: 1; 
    /* 增加一點左側間距，讓它和 VGame 分開 */
    margin-left: 5px; 
    /* 將字體顏色稍微調淡，以區分主標題 */
    color: rgba(255, 255, 255, 0.7); 
    /* 垂直對齊，確保在同一行上不會被向下推 */
    vertical-align: top;
    /* 確保它與 VGame 文字在同一水平線上對齊 */
    vertical-align: middle;
}

/* 3. 選單連結基本樣式 */
#sidebarMenu .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 15px 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

/* 4. 懸停和活動狀態 */
#sidebarMenu .nav-item .nav-link:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0.1);
    /* **藍色上的輕微懸停陰影** */
}

/* 模擬 SB Admin 的活動選單標記 */
#sidebarMenu .nav-item .nav-link.active {
    color: white;
    background-color: rgba(0, 0, 0, 0.15);
    /* **活動項目略深的陰影** */
    border-left: 3px solid #1cc88a;
    /* **SB Admin 經典綠色高亮** */
    font-weight: bold;
}

/* 5. 子選單樣式 */
/* 子選單容器 */
#sidebarMenu .collapse {
    background-color: rgba(0, 0, 0, 0.05);
    /* **子選單區塊略深** */
}

/* 子選單連結 */
#sidebarMenu .collapse .nav-link {
    padding: 10px 1rem 10px 2.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* 第三層縮排 */
#sidebarMenu .collapse .collapse .nav-link {
    padding-left: 3.5rem;
}

/* 6. 箭頭圖示和動畫速度 */
.nav-link .fas.fa-chevron-down {
    transition: transform 0.15s ease;
}

.nav-link[aria-expanded="true"] .fas.fa-chevron-down {
    transform: rotate(180deg);
}

/* 7. 分隔線顏色 */
.sidebar-divider {
    border-color: rgba(255, 255, 255, 0.3);
}

/* 8. 遮罩層 (維持不變) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: none;
}

/* 9. 覆寫 Collapse 動畫速度 */
.collapsing {
    transition: height 0.15s ease !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

/* ============================================== */
/* 10. Desktop 佈局 (寬度 >= 992px) 才會隱藏漢堡選單 */
@media (min-width: 992px) {

    /* 漢堡選單按鈕在 Desktop 隱藏，因為側邊欄已經固定顯示 */
    #sidebarToggle {
        display: none;
    }

    /* 💡 新增：讓 Navbar 的內容從側邊欄右邊開始顯示 */
    /* 調整 Navbar 容器，使其在左側為側邊欄留出空間 */
    .navbar {
        left: 224px;
        /* 從側邊欄寬度開始 */
        width: calc(100% - 224px);
        /* 寬度為剩餘空間 */
        transition: left 0.3s ease, width 0.3s ease;
        /* 增加過渡動畫 */
    }

    /* 將主要內容區塊向右推，為固定側邊欄留出空間 */
    #uiMainScreen {
        left: 224px;
        /* 側邊欄的寬度 */
        /* ... [其他屬性維持不變] ... */
    }

    /* 讓側邊欄在桌面版保持固定可見，並移除 mobile 模式的 transform 隱藏效果 */
    #sidebarMenu {
        transform: translateX(0);
        /* 覆寫 mobile 的隱藏狀態 */
    }

    /* 漢堡選單按鈕在 Desktop 隱藏，因為側邊欄已經固定顯示 */
    #sidebarToggle {
        display: none;
    }

    /* 確保 body 上的 overflow-hidden 不會阻止桌面滾動 */
    body.overflow-hidden {
        overflow: auto !important;
    }
}

/* 當螢幕寬度 < 576px (手機版) */
@media (max-width: 575.98px) {
    .vglistgroup {
        /* 設定一個適合手機閱讀的固定高度 */
        height: 250px !important; 
        
        /* 確保它不會因為 flex 屬性而縮小 */
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        
        /* 確保邊框或陰影不會遮到捲軸 */
        border-bottom: 1px solid #dee2e6; 
    }
}

/* 當螢幕寬度 >= 576px (桌機版側邊欄) */
@media (min-width: 576px) {
    .vglistgroup {
        /* 在桌機版恢復為填充剩餘空間，高度設為 0 是為了啟動 flex-grow */
        height: 0;
        flex-grow: 1;
    }
}