/* ══════════════════════════════════════════════════════════
   NUCLEAR SCROLLBAR FIX - 徹底消除雙重滾動條
   ═══════════════════════════════════════════════════════════

   問題: 兩個滾動條同時出現 (外層body + 內層container)
   解決: 強制只有 HTML 元素滾動,所有其他元素禁止滾動

   測試方法: 在瀏覽器打開後,應該只看到一個滾動條在最右側

   ══════════════════════════════════════════════════════════ */

/* ═══ STEP 1: 只允許 HTML 滾動 ═══ */
html {
    overflow-y: scroll !important;  /* 強制顯示滾動條 */
    overflow-x: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
}

/* BODY 不能有滾動條! */
body {
    overflow: visible !important;  /* 關鍵:body 不滾動 */
    height: auto !important;       /* 內容自然高度 */
    min-height: 100vh !important;
    max-height: none !important;
    width: 100% !important;
}

/* ═══ STEP 2: 禁止所有元素創建滾動容器 ═══ */
/* 核武級規則:所有元素都不能有 overflow: auto/scroll */
* {
    max-height: none !important;
}

*:not(html) {
    overflow-y: visible !important; /* 除了 html,其他全部 visible */
}

/* ═══ STEP 3: 特別針對 project 頁面 ═══ */
.project-detail-page,
.project-detail-page *,
.project-detail-main-content,
.project-detail-main-content *,
.project-detail-content,
.project-detail-content *,
.container,
.container *,
main,
main *,
section,
section *,
article,
article *,
div {
    overflow-y: visible !important;
    overflow-x: visible !important; /* 先全部開放,避免內容被切掉 */
    max-height: none !important;
    height: auto !important;
}

/* ═══ STEP 4: 只允許表格水平滾動 ═══ */
/* 表格可以左右滾動,但絕對不能上下滾動 */
table,
div[style*="overflow-x: auto"],
.table-wrapper,
.overflow-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

/* ═══ STEP 5: 防止固定高度觸發滾動 ═══ */
.project-detail-grid,
.project-detail-main,
.project-detail-sidebar {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* ═══ STEP 6: 移除所有 inline style 的 overflow ═══ */
/* 覆蓋任何 inline style */
[style*="overflow: auto"],
[style*="overflow: scroll"],
[style*="overflow-y: auto"],
[style*="overflow-y: scroll"],
[style*="max-height:"] {
    overflow: visible !important;
    max-height: none !important;
}

/* ═══ STEP 7: 美化主滾動條 ═══ */
html::-webkit-scrollbar {
    width: 14px;
    background: rgba(10, 10, 20, 0.8);
}

html::-webkit-scrollbar-track {
    background: rgba(10, 10, 20, 0.9);
    border-left: 1px solid rgba(100, 149, 237, 0.1);
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(100, 149, 237, 0.7),
        rgba(100, 149, 237, 0.5));
    border-radius: 7px;
    border: 2px solid rgba(10, 10, 20, 0.9);
    transition: all 0.3s ease;
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        rgba(100, 149, 237, 0.9),
        rgba(100, 149, 237, 0.7));
    border-width: 1px;
}

html::-webkit-scrollbar-thumb:active {
    background: rgba(100, 149, 237, 1);
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 149, 237, 0.7) rgba(10, 10, 20, 0.9);
}

/* ═══ STEP 8: 調試工具 ═══ */
/* 如果還有雙重滾動條,取消註解查看哪個元素有問題 */
/*
[style*="overflow-y: auto"]:not(html),
[style*="overflow-y: scroll"]:not(html),
[style*="overflow: auto"]:not(html),
[style*="overflow: scroll"]:not(html),
div[style*="max-height"] {
    outline: 3px solid red !important;
    outline-offset: -3px;
}

[style*="overflow-y: auto"]:not(html)::before,
[style*="overflow-y: scroll"]:not(html)::before,
[style*="overflow: auto"]:not(html)::before {
    content: "⚠️ NESTED SCROLL HERE!";
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    padding: 5px;
    font-size: 12px;
    z-index: 999999;
}
*/

/* ═══ STEP 9: 防止水平溢出 (保持) ═══ */
body {
    overflow-x: hidden !important;
}

/* 確保所有內容不會超出視窗寬度 */
* {
    max-width: 100vw;
}

img,
video,
iframe,
table {
    max-width: 100%;
    height: auto;
}

/* ═══ STEP 10: Mobile 特殊處理 ═══ */
@media (max-width: 768px) {
    html {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
    }

    body,
    .project-detail-content,
    .container,
    main {
        overflow-y: visible !important;
        -webkit-overflow-scrolling: auto !important;
    }
}

/* ═══ CRITICAL: 最後防線 ═══ */
/* 如果以上都沒用,這是最後一招 */
body * {
    overflow-y: visible !important;
}

html {
    scroll-behavior: smooth;
}