/* === 導覽列樣式 (自適應 Light/Dark) ===
   獨立於 Style.css，這個檔案放「這個專案的導覽列外觀」——本專案是頂部導覽列版型，
   所以內容是 navbar/topnav 相關樣式；換成側邊欄版型的專案（如 7001_DTG）則放
   nav.sidebar 相關樣式。兩邊檔名一致（style_sidebar.css），_Layout.cshtml 的
   <link> 不用因版型不同而改路徑，但內容各自對應自己的版型，不能互蓋。
   依賴：Bootstrap 5 的 CSS 變數 (--bs-secondary-color / --bs-body-color / --bs-emphasis-color 等)。 */

/* 1. 一般狀態 (未選中) */
.nav-pills .nav-link {
    /* 使用 secondary-color：在淺色是深灰，深色是淺灰 */
    color: var(--bs-secondary-color);
    margin-bottom: 4px;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent; /* 預留位置避免跳動 */
}

    /* 2. 滑鼠懸停 (Hover) */
    .nav-pills .nav-link:hover {
        /* 使用 body-color：自動變為標準黑或白 */
        color: var(--bs-body-color);
        /* 背景使用 body-color 的 RGB 值，設定 5% 透明度 */
        background-color: rgba(var(--bs-body-color-rgb), 0.05);
    }

    /* 3. 選中狀態 (Active) - 關鍵修正
       全部補 !important：Bootstrap 內建 .nav-pills .nav-link.active 選擇器權重跟這裡一樣，
       單靠載入順序贏過 Bootstrap 並不可靠（順序一亂就會被蓋回預設的藍色 --bs-primary）。 */
    .nav-pills .nav-link.active {
        /* emphasis-color：在淺色是極黑，深色是極白 (對比度最高) */
        color: var(--bs-emphasis-color) !important;
        /* 背景自動適應：淺色時是淡黑底，深色時是淡白底 */
        background-color: rgba(var(--bs-emphasis-color-rgb), 0.1) !important;
        font-weight: 600;
        /* 左側指示線跟隨文字顏色 */
        border-left-color: var(--bs-emphasis-color) !important;
    }

.nav-pills .nav-item {
    width: 100%;
}

#sidebar-menu {
    overflow-y: auto;
    height: calc(100vh - 6rem);
}

    /* 細捲軸 */
    #sidebar-menu::-webkit-scrollbar {
        width: 4px;
    }

    #sidebar-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    #sidebar-menu::-webkit-scrollbar-thumb {
        background-color: rgba(var(--bs-body-color-rgb), 0.2);
        border-radius: 4px;
    }

        #sidebar-menu::-webkit-scrollbar-thumb:hover {
            background-color: rgba(var(--bs-body-color-rgb), 0.4);
        }

/* ── 以下為頂部導覽列（navbar）專屬樣式，從 Style.css 搬過來 ──
   main .sticky-top 依賴 --navbar-h（由 _Layout.cshtml 的 JS 量測 <nav class="navbar"> 高度設定），
   只有「有固定頂部導覽列」的版型才需要、才量得到；換成側邊欄版型直接拿掉這條，
   否則 --navbar-h 量不到值、吃 fallback 72px，會把 sticky 篩選列憑空往下推。 */
main .sticky-top {
    top: var(--navbar-h, 72px);
    z-index: 100;
}

/* ★ Navbar brand badge */
.nav-brand-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #685848 0%, #8E7F70 100%);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .06em;
    padding: 5px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(104, 88, 72, .35);
    white-space: nowrap;
}

/* ★ Navbar user chip */
.nav-user-chip {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 50px;
    padding: 4px 10px 4px 14px;
    gap: 6px;
    white-space: nowrap;
}

.nav-icon-btn {
    color: var(--bs-secondary-color);
    padding: 2px 6px;
    text-decoration: none;
}

    .nav-icon-btn:hover {
        color: var(--bs-body-color);
    }

/* ★ 頂部選單：icon 在上、文字在下 */
/* 讓 navbar-collapse 可以縮小，才能讓裡面的 ul 觸發 overflow scroll */
.navbar .navbar-collapse {
    min-width: 0;
}

.navbar-nav.topnav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(128,128,128,.35) transparent;
}

    .navbar-nav.topnav::-webkit-scrollbar {
        height: 3px;
    }

    .navbar-nav.topnav::-webkit-scrollbar-track {
        background: transparent;
    }

    .navbar-nav.topnav::-webkit-scrollbar-thumb {
        background: rgba(128,128,128,.35);
        border-radius: 3px;
    }

        .navbar-nav.topnav::-webkit-scrollbar-thumb:hover {
            background: rgba(128,128,128,.6);
        }

    .navbar-nav.topnav > .nav-item {
        display: flex;
    }

        .navbar-nav.topnav > .nav-item > .nav-link {
            border-radius: .5rem;
            padding-top: .5rem;
            padding-bottom: .4rem;
            gap: .15rem;
            color: var(--bs-secondary-color);
            transition: background-color .15s ease, color .15s ease;
        }

            .navbar-nav.topnav > .nav-item > .nav-link:hover {
                background-color: var(--bs-tertiary-bg);
                color: var(--bs-body-color);
            }

            /* active 狀態改用 emphasis-color 而不是 --bs-primary，
               理由跟 .nav-pills .nav-link.active 一樣：避免變回預設藍色，維持跟側邊欄一致的對比感 */
            .navbar-nav.topnav > .nav-item > .nav-link.active {
                background-color: rgba(var(--bs-emphasis-color-rgb), 0.1);
                color: var(--bs-emphasis-color) !important;
                font-weight: 600;
            }

            .navbar-nav.topnav > .nav-item > .nav-link .topnav-caret {
                height: .7rem;
                line-height: .7rem;
            }

            .navbar-nav.topnav > .nav-item > .nav-link:not(.dropdown-toggle-stacked) .topnav-caret {
                visibility: hidden;
            }