/* =========================================
   1. 核心變數
   ========================================= */
:root {
    --bg-clinical: #FFFFFF;
    --bg-contrast: #F8F9FA;
    --text-ink: #111111;
    --text-muted: #666666;
    
    --computer-red: #D00000;
    --terminal-black: #000000;
    
    /* 安全層級顏色 (修正版) */
    --clr-infrared: #000000;
    --clr-red: #E74C3C;
    --clr-orange: #E67E22;
    --clr-yellow: #FFC300; /* 鮮豔黃 */
    --clr-green: #27AE60;
    --clr-blue: #2980B9;
    --clr-indigo: #4B0082;
    --clr-violet: #8E44AD;
    --clr-uv: #FFFFFF;

    --sidebar-width: 300px;
    --header-height: 54px;
    --border-thick: 3px solid var(--terminal-black);
    
    --transition-snap: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
    height: 100%; 
    font-family: "Segoe UI", "Microsoft JhengHei", sans-serif; 
    color: var(--text-ink); 
    overflow: hidden;
    
    /* 背景設定：點陣實驗室風格 */
    background-color: #FFFFFF;
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 頂部光譜條 */
.security-spectrum-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 6px; z-index: 9999;
    background: linear-gradient(to right, 
        var(--clr-infrared) 0%, var(--clr-red) 15%, var(--clr-orange) 30%, 
        var(--clr-yellow) 45%, var(--clr-green) 60%, var(--clr-blue) 75%, 
        var(--clr-indigo) 90%, var(--clr-violet) 100%);
}

/* =========================================
   2. APP 佈局
   ========================================= */
.app-container { display: flex; height: 100vh; padding-top: 6px; position: relative; }

/* 側邊欄 (Desktop) */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-contrast);
    border-right: var(--border-thick);
    display: flex; flex-direction: column;
    transition: width var(--transition-snap), transform var(--transition-snap);
    z-index: 200;
    flex-shrink: 0;
}

.sidebar.collapsed { width: 0; border-right: none; overflow: hidden; }

.sidebar-header {
    padding: 18px; background: var(--terminal-black); color: var(--bg-clinical);
    display: flex; justify-content: space-between; align-items: center;
    min-width: var(--sidebar-width);
}

.brand-text h1 { font-family: "Impact", sans-serif; font-size: 1.4rem; letter-spacing: 1px; line-height: 1; }
.sub-title { font-size: 0.7rem; letter-spacing: 2px; opacity: 0.8; }

.sidebar-action-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.3); color: var(--bg-clinical);
    width: 32px; height: 32px; cursor: pointer; display: grid; place-items: center;
    transition: 0.2s; border-radius: 4px;
}
.sidebar-action-btn:hover { background: var(--computer-red); border-color: var(--computer-red); }

/* 目錄樣式 */
.toc-container { flex: 1; overflow-y: auto; padding: 10px 0; min-width: var(--sidebar-width); }

.toc-folder {
    padding: 12px 20px; cursor: pointer; font-weight: bold; font-size: 0.95rem;
    display: flex; align-items: center; transition: 0.1s; user-select: none;
    border-left: 4px solid transparent;
}
.toc-folder:hover { background: #e9ecef; }
.toc-folder-icon { margin-right: 10px; width: 16px; text-align: center; color: var(--text-muted); }

.toc-children { display: none; background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.toc-children.expanded { display: block; }

.toc-file {
    display: block; padding: 10px 20px 10px 48px;
    font-size: 0.9rem; color: var(--text-ink); text-decoration: none;
    border-left: 4px solid transparent; transition: 0.1s; cursor: pointer;
}
.toc-file:hover { background: #f8f9fa; border-left-color: #ddd; }
.toc-file.active {
    background: var(--terminal-black); color: var(--bg-clinical);
    border-left-color: var(--computer-red); font-weight: bold;
}

.sidebar-footer {
    padding: 15px; background: #eee; color: var(--text-muted);
    text-align: center; font-size: 0.75rem; border-top: 1px solid #ddd;
    min-width: var(--sidebar-width); font-family: "Impact", sans-serif; letter-spacing: 1px;
}

/* =========================================
   3. 主內容區
   ========================================= */
.main-content {
    flex: 1; display: flex; flex-direction: column;
    background: var(--bg-clinical); position: relative;
    overflow: hidden;
}

.content-header {
    height: var(--header-height); background: var(--bg-clinical);
    border-bottom: 1px solid #ddd;
    display: flex; align-items: center; padding: 0 15px;
}

.menu-toggle-btn {
    background: none; border: none; color: var(--terminal-black);
    width: 40px; height: 40px; margin-right: 10px; cursor: pointer;
    display: none; place-items: center; font-size: 1.2rem;
    transition: 0.2s; border-radius: 4px;
}
.menu-toggle-btn:hover { background: #f0f0f0; }
.sidebar.collapsed + .main-content .menu-toggle-btn { display: grid; }

.breadcrumb {
    font-family: "Consolas", monospace; font-weight: bold; text-transform: uppercase;
    flex: 1; color: var(--text-ink); font-size: 0.9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.breadcrumb-separator { color: var(--computer-red); margin: 0 8px; }

/* 內容區塊與動畫 */
.content-body { flex: 1; position: relative; display: none; overflow: hidden; }
.content-body.active { display: block; }

#contentFrame { width: 100%; height: 100%; border: none; display: block; opacity: 0; }

/* 歡迎畫面 */
.welcome-screen {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
}
.welcome-card {
    text-align: center; border: var(--border-thick); padding: 40px; background: white;
    box-shadow: 10px 10px 0px rgba(0,0,0,1); max-width: 90%;
}
.eye-logo { font-size: 60px; color: var(--computer-red); margin-bottom: 20px; }
.welcome-card h2 { font-family: "Impact", sans-serif; font-size: 2rem; margin-bottom: 10px; }
.welcome-card .divider { height: 4px; background: var(--computer-red); margin: 20px auto; width: 60px; }
.warning-text { color: var(--computer-red); font-weight: bold; }

/* =========================================
   4. Mobile / RWD 特化
   ========================================= */
.mobile-sidebar-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 150;
    display: none; opacity: 0; transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
    /* 手機版：獨立抽屜樣式 */
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100%;
        width: 85vw; /* 寬度佔螢幕 85% */
        max-width: 320px;
        transform: translateX(-100%);
        border-right: none;
        
        /* 修正：預設移除陰影，避免收起時左側出現暗角 */
        box-shadow: none; 
        
        /* 加入 box-shadow 到過渡效果中，讓它淡入淡出 */
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    }
    
    /* 展開時才顯示陰影 */
    .sidebar.mobile-active { 
        transform: translateX(0); 
        box-shadow: 10px 0 50px rgba(0,0,0,0.5); /* 深度陰影 */
    }
    
    /* 手機版不使用 collapsed 邏輯 */
    .sidebar.collapsed { width: 85vw; overflow: visible; transform: translateX(-100%); } 

    /* 強制顯示漢堡按鈕 */
    .menu-toggle-btn { display: grid !important; }
    
    /* 遮罩 */
    .mobile-sidebar-overlay.active { display: block; opacity: 1; }
    
    /* 手機版字體調整 */
    .sidebar-header { padding: 20px; }
    .toc-folder, .toc-file { padding-top: 14px; padding-bottom: 14px; }
}

/* =========================================
   5. Iframe 內部注入樣式
   ========================================= */
/* 極速載入動畫 */
@keyframes snapIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.content-fade-in {
    animation: snapIn 0.15s ease-out forwards; /* 0.15s 瞬間載入感 */
}

/* 安全層級 Tag */
.clearance-tag { padding: 0 2px; }

.cl-infrared { color: var(--clr-infrared); background: #f0f0f0; border: 1px solid #ccc; font-family: "Consolas", monospace; font-size: 0.9em; padding: 0 4px; border-radius: 3px; }

.cl-red { color: var(--clr-red); font-weight: bold; }
.cl-orange { color: var(--clr-orange); font-weight: bold; }

/* 黃色優化：鮮豔黃 + 黑色微暈，防止在白底看不清 */
.cl-yellow { 
    color: var(--clr-yellow); 
    font-weight: 900;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
}

.cl-green { color: var(--clr-green); font-weight: bold; }
.cl-blue { color: var(--clr-blue); font-weight: bold; }
.cl-indigo { color: var(--clr-indigo); font-weight: bold; }
.cl-violet { color: var(--clr-violet); font-weight: bold; }

/* 紫外線優化：仿造紅外線的極簡風格 (白底黑字) */
.cl-uv { 
    background: #FFFFFF; 
    color: #000000; 
    border: 1px solid #000000; /* 與紅外線一致的細框 */
    font-family: "Consolas", monospace; /* 與紅外線一致的字體 */
    font-size: 0.9em; /* 與紅外線一致的大小 */
    padding: 0 4px; 
    border-radius: 3px;
    font-weight: bold; /* 稍微加粗以示區別 */
    box-shadow: none; /* 移除原本厚重的陰影 */
    margin: 0;
}