.sticky {
    position: sticky;
    top: 0;
    max-height: 100vh;
}

.toggle-nav-sidebar {
    z-index: 20;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 23px;
    width: 23px;
    border: 0;
    border-right: 1px solid var(--hairline-color);
    background-color: var(--body-bg);
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--link-fg);
    padding: 0;
}

[dir="rtl"] .toggle-nav-sidebar {
    border-left: 1px solid var(--hairline-color);
    border-right: 0;
}

.toggle-nav-sidebar:hover,
.toggle-nav-sidebar:focus {
    background-color: var(--darkened-bg);
}

#nav-sidebar {
    z-index: 15;
    flex: 0 0 275px;
    left: -276px;
    margin-left: -276px;
    /* border-top: 1px solid transparent; */
    border-right: 1px solid var(--hairline-color);
    background-color: var(--sidebar-bg-light);
    overflow: auto;
    font-size: 1.5rem;
}

[dir="rtl"] #nav-sidebar {
    border-left: 1px solid var(--hairline-color);
    border-right: 0;
    left: 0;
    margin-left: 0;
    right: -276px;
    margin-right: -276px;
}

.toggle-nav-sidebar::before {
    content: '\00BB';
}

.main.shifted .toggle-nav-sidebar::before {
    content: '\00AB';
}

.main > #nav-sidebar {
    visibility: hidden;
}

.main.shifted > #nav-sidebar {
    margin-left: 0;
    visibility: visible;
}

[dir="rtl"] .main.shifted > #nav-sidebar {
    margin-right: 0;
}

#nav-sidebar .module th {
    width: 100%;
    overflow-wrap: anywhere;
}

#nav-sidebar .module th,
#nav-sidebar .module caption {
    padding-left: 16px;
}

#nav-sidebar .module td {
    white-space: nowrap;
}

[dir="rtl"] #nav-sidebar .module th,
[dir="rtl"] #nav-sidebar .module caption {
    padding-left: 8px;
    padding-right: 16px;
}

#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
    color: var(--header-color);
    font-weight: bold;
}

#nav-sidebar .current-model {
    background: var(--selected-row);
}

.main > #nav-sidebar + .content {
    max-width: calc(100% - 23px);
    transition: max-width 0.3s ease;
}

.main.shifted > #nav-sidebar + .content {
    max-width: calc(100% - 299px);
}

/* 遮罩層（手機版展開 sidebar 時顯示） */
.nav-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;  /* fallback */
    height: 100dvh; /* 動態調整，確保覆蓋整個視窗 renhao 20251125 */
    background: rgba(0, 0, 0, 0.5);
    z-index: 14;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);  /* Safari/iOS 支援 */
}

/* 平板版（768-1024px）：使用桌面版行為 */
@media (max-width: 1024px) and (min-width: 768px) {
    /* 保持桌面版邏輯，不做特殊處理 */
}

/* 手機版（< 768px）：側滑式選單 */
@media (max-width: 767px) {
    /* Sidebar 固定定位 + 預設隱藏在左側 */
    #nav-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        /* 使用 dvh（動態視窗高度）解決 iOS Safari 網址列問題 renhao 20251125 */
        height: 100vh !important; /* fallback for older browsers */
        height: 100dvh !important; /* 動態調整，考慮網址列顯示/隱藏 */
        width: 200px !important;
        flex: 0 0 200px !important;
        margin-left: 0 !important;
        /* 移除 visibility: visible !important; 避免覆蓋桌面版 */
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 15;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 8px;
        /* 底部 padding 確保最後一個項目不被網址列擋住 renhao 20251125 */
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        font-size: 1rem;  /* 手機版縮小字體，避免過大 */
    }

    /* 手機版強制顯示 sidebar（不受桌面版 visibility: hidden 影響） */
    .main > #nav-sidebar {
        visibility: visible;
    }

    /* Shifted 狀態：Sidebar 滑入 */
    .main.shifted #nav-sidebar {
        transform: translateX(0);
    }

    /* Shifted 狀態：顯示遮罩 */
    .main.shifted .nav-sidebar-backdrop {
        display: block;
    }

    /* Shifted 狀態：阻止頁面滾動（防止地址欄隱藏導致視窗高度變化） renhao 20251125 */
    .main.shifted {
        overflow: hidden !important;
        height: 100vh !important; /* fallback */
        height: 100dvh !important; /* 動態調整 */
    }

    /* 同時阻止 body 和 container 滾動 renhao 20251125 */
    body:has(.main.shifted) {
        overflow: hidden !important;
        height: 100vh !important; /* fallback */
        height: 100dvh !important; /* 動態調整 */
    }

    #container:has(.main.shifted) {
        overflow: hidden !important;
        height: 100vh !important; /* fallback */
        height: 100dvh !important; /* 動態調整 */
    }

    /* Toggle 按鈕：人機工程學優化（底部 20vh，方便大拇指操作） renhao 20251125 */
    #toggle-nav-sidebar {
        position: fixed !important;
        left: 8px;
        top: 80vh; /* 使用 vh 單位，底部 20vh 位置更符合手機操作 renhao 20251125 */
        width: 48px !important; /* 增加觸控面積（建議至少 44-48px） */
        height: 48px !important;
        flex: none !important;
        border-radius: 50%; /* 圓形按鈕 */
        font-size: 24px !important;
        z-index: 16; /* 高於遮罩 */
        background-image: linear-gradient(to bottom, hsl(199, 59%, 24%), hsl(199, 23%, 12%));
        color: #ffffff;
        border: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: left 0.3s ease, box-shadow 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 按鈕 Hover/Active 效果 */
    #toggle-nav-sidebar:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        transform: scale(0.95);
    }

    /* Shifted 狀態：按鈕跟著 Sidebar 移動 */
    .main.shifted #toggle-nav-sidebar {
        left: 208px; /* 200px sidebar + 8px padding */
    }

    /* 回到頂部按鈕 20260211 renhao add */
    #btn-scroll-top.visible {
        display: flex !important;
        position: fixed !important;
        left: 8px;
        top: calc(80vh + 56px); /* toggle 按鈕下方 (48px + 8px gap) */
        width: 48px !important;
        height: 48px !important;
        border-radius: 50%;
        font-size: 24px !important;
        z-index: 16;
        background-image: linear-gradient(to bottom, hsl(199, 59%, 24%), hsl(199, 23%, 12%));
        color: #ffffff;
        border: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    #btn-scroll-top:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        transform: scale(0.95);
    }

    /* 內容區全寬 */
    .main > #nav-sidebar + .content,
    .main.shifted > #nav-sidebar + .content {
        max-width: 100% !important;
    }

    /* Sidebar 捲軸樣式 */
    #nav-sidebar::-webkit-scrollbar {
        width: 8px;
        background: var(--scrollbar-bg, var(--darkened-bg));
        border-radius: 8px;
    }

    #nav-sidebar::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb, var(--border-color));
        border-radius: 8px;
    }

    #nav-sidebar::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover, var(--body-quiet-color));
    }
}

/* 桌面版隱藏回到頂部按鈕 20260211 renhao add */
#btn-scroll-top {
    display: none !important;
}

#nav-filter {
    width: 100%;
    box-sizing: border-box;
    padding: 2px 5px;
    margin: 5px 0;
    border: 1px solid var(--border-color);
    background-color: var(--darkened-bg);
    color: var(--body-fg);
}

#nav-filter:focus {
    border-color: var(--body-quiet-color);
}

#nav-filter.no-results {
    background: var(--message-error-bg);
}

#nav-sidebar table {
    width: 100%;
}