/* ================================================================
   1. 基礎環境與導覽列
   ================================================================ */
body { 
    background-color: #1a1a1a !important; 
    color: #ffffff !important; 
    padding-top: 80px !important; 
}

/* 解除所有父層級裁切，確保 JS 定位的元素能顯示 */
.dropdown, .dropdown-menu, #ot-menu, #nt-menu {
    overflow: visible !important;
}

.dropdown-menu {
    z-index: 3100 !important;
    background-color: #2c3e50 !important;
    border: 1px solid #454d55 !important;
    padding: 0 !important;
}

/* 捲軸容器：負責垂直捲動 */
.bible-scroll-container {
    max-height: 70vh !important;
    width: 180px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; 
    position: relative;
    padding-bottom: 10px;
}

/* 調整內部連結的間距，讓文字更緊湊 */
.dropdown-item {
    padding: 8px 15px !important; /* 減少左右內縮空間 */
}

/* 確保右側的小箭頭不會太靠邊 */
.dropdown-toggle::after {
    margin-left: 0.5em !important;
}

/* ================================================================
   2. 章節網格 (由 JS 動態控制位置，CSS 負責外觀)
   ================================================================ */
.chapter-grid {
    display: none; 
    position: fixed !important; /* 改用 fixed，確保它永遠位於視窗最上層 */
    width: 250px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    background-color: #2c3e50 !important;
    border: 1px solid #454d55 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    z-index: 99999 !important; /* 確保大於 navbar 的 z-index */
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 5px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
}

/* 確保當網格向上彈時，陰影依然正確 */
.chapter-grid.shadow {
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
}

/* 讓捲軸看起來跟深色主題比較搭 (可選) */
.chapter-grid::-webkit-scrollbar {
    width: 6px;
}
.chapter-grid::-webkit-scrollbar-thumb {
    background: #f1c40f;
    border-radius: 10px;
}
.chapter-grid::-webkit-scrollbar-track {
    background: #2c3e50;
}

/* 數字按鈕：徹底消除下劃線 */
.chapter-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 38px !important;
    height: 38px !important;
    background-color: rgba(255,255,255,0.1) !important;
    color: white !important;
    text-decoration: none !important; /* 殺死底線 */
    border-radius: 4px !important;
    font-size: 14px !important;
    transition: 0.2s;
    padding: 0 !important;       /* 確保不被內邊距撐開 */
}

.chapter-link:hover {
    background-color: #f1c40f !important;
    color: #000 !important;
    text-decoration: none !important;
}

/* ================================================================
   3. 側邊翻頁按鈕 (固定在螢幕兩側)
   ================================================================ */
#prevChapter, #nextChapter {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 45px;
    height: 90px;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    text-decoration: none !important;
    font-size: 30px;
    transition: 0.2s ease;
}

#prevChapter { left: 0; border-radius: 0 12px 12px 0; }
#nextChapter { right: 0; border-radius: 12px 0 0 12px; }

#prevChapter:hover, #nextChapter:hover {
    background: #f1c40f !important;
    color: black !important;
    width: 50px;
}

#prevChapter, #nextChapter {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 確保選擇章節的選單不會被截斷 */
#chapterPickerMenu {
    max-height: 70vh;
    overflow-y: auto !important;
    min-width: 320px;
    background-color: #2c3e50 !important;
    border: 1px solid #454d55 !important;
    /* 讓它往左偏一點，避免超出螢幕右邊 */
    left: auto !important;
    right: 0 !important;
    padding: 10px 0 !important;
    /* 確保選單彈出時不會被導覽列遮住 */
    z-index: 10000 !important;
}

/* 讓內部按鈕區塊寬度固定，避免捲動時縮放 */
#chapterPickerMenu .flex-wrap {
    width: 100%;
    justify-content: flex-start;
}

/* 修正選擇章節選單內的按鈕文字顏色 */
#chapterPickerMenu .btn-outline-light {
    color: #f8f9fa !important;
    border-color: rgba(255,255,255,0.3) !important;
}

#chapterPickerMenu .btn-outline-light:hover {
    background-color: #f1c40f !important;
    color: #000 !important;
}

/* 針對手機版的調整 */
@media (max-width: 767px) {
    .chapter-grid {
        width: auto !important;
        padding: 8px !important;     /* 減少內邊距 */
        gap: 5px !important;         /* 縮減按鈕之間的距離 */
        /* 手機上增加捲動軸，防止內容切斷 */
        grid-template-columns: repeat(4, 1fr); /* 手機版格子改少一點比較好按 */
        max-height: 80vh !important;
        overflow-y: auto !important;
        /* 增加陰影以便與底部內容區分 */
        box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
        /* 讓選單更靠左，避免遮住太多背景 */
        left: 5px !important;        
        right: auto !important;
        
        /* 調整邊框，讓它精緻一點 */
        border: 1px solid #f1c40f !important; 
    }
        
        /* 增加陰影對比，讓它跟底下的選單區分開來 */
        box-shadow: 0 10px 50px rgba(0,0,0,0.8) !important;
        border: 2px solid #f1c40f !important;
    }

    /* 手機版讓按鈕稍微大一點點，比較好點 */
    .chapter-link {
        padding: 10px 5px !important;
        font-size: 1.1rem !important;
    }
}

/* 確保手機點擊時不會有奇怪的選取顏色 */
.dropdown-submenu {
    -webkit-tap-highlight-color: transparent;
}

/* 設定主內容區域的左右邊距，避開翻頁按鈕 */
.main-content, 
.container-fluid, 
#bible-text-container {
    /* 在電腦版增加左右留白 */
    padding-left: 60px !important;
    padding-right: 60px !important;
    transition: all 0.3s ease; /* 增加平滑感 */
}

/* 針對翻頁按鈕的微調：增加半透明度，滑鼠移入才全顯 */
#prevChapter, #nextChapter {
    opacity: 0.5;
    transition: opacity 0.3s;
    z-index: 100; /* 確保在文字上方但不會太顯眼 */
}

#prevChapter:hover, #nextChapter:hover {
    opacity: 1;
}

/* 針對手機版的優化：手機空間小，內縮改窄一點 */
@media (max-width: 767px) {
    .main-content, 
    .container-fluid, 
    #bible-text-container {
        padding-left: 45px !important;
        padding-right: 45px !important;
    }
    
    /* 手機版按鈕可以縮小一點點，避免佔位太大 */
    #prevChapter, #nextChapter {
        width: 35px;
    }
}

/* 強制顯示分隔線並設定顏色 */
.dropdown-menu .dropdown-divider {
    display: block !important;       /* 確保它是區塊元素 */
    border-top: 1px solid #007bff !important; /* 強制改為白色，你可以改成 #ccc 或其他顏色 */
    opacity: 0.5 !important;         /* 設定透明度 */
    margin: 0.5rem 0 !important;    /* 設定上下間距 */
    width: 100% !important;          /* 確保寬度撐滿 */
}

/* --- 移除原本失效的藍線，統一使用 data-divider 邏輯 --- */
.dropdown-divider {
    display: none !important;
}

/* --- 修正版分隔線邏輯 --- */
/* --- 捨棄 ::after，直接用 border 確保渲染 --- */

/* 1. 針對標記項目，強制顯示底邊框 */
li[data-divider="true"] {
    display: block !important;
    /* 這裡使用 border-bottom，比 ::after 更穩定，不容易被裁切 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; 
    
    /* 增加底部間距，讓線條與下一個項目有物理距離 */
    margin-bottom: 12px !important; 
    padding-bottom: 12px !important; 
    
    /* 確保寬度撐滿容器 */
    width: 100% !important; 
}

/* 2. 避免 a 標籤的 hover 效果蓋住這條 border */
li[data-divider="true"] > a.dropdown-item {
    border-bottom: none !important;
}

/* 3. 測試：如果還是看不見，請暫時把顏色改成鮮豔的顏色測試 */
/* background-color: #f1c40f !important; (黃色) */
li[data-divider="true"]:hover {
    background-color: #f1c40f !important; /* 黃色 */
}

/* 4. 針對「申命記」後的間距微調，讓視覺更平衡 */
li[data-divider="true"] > a.dropdown-item {
    margin-bottom: 0 !important;
}

/* --- 絕對生效：根據位置畫線法 --- */

/* 舊約：申命記(5), 以斯帖記(17), 雅歌(22), 但以理書(27) 下方畫線 */
#ot-menu .dropdown-submenu:nth-child(5),
#ot-menu .dropdown-submenu:nth-child(17),
#ot-menu .dropdown-submenu:nth-child(22),
#ot-menu .dropdown-submenu:nth-child(27) {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
}

/* --- 新約：根據你的新設定重新定位分隔線 --- */
/* 約翰福音(4), 使徒行傳(5), 腓利門書(18), 猶大書(26) 下方畫線 */
#nt-menu .dropdown-submenu:nth-child(4),
#nt-menu .dropdown-submenu:nth-child(5),
#nt-menu .dropdown-submenu:nth-child(18),
#nt-menu .dropdown-submenu:nth-child(26) {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
}