/* ================================================= */
/* 基礎設定 (Base Setup) */
/* ================================================= */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #f0f3f8;
    /* 淺灰背景，提供質感 */
    color: #333;
}

.dashboard-container-full {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ================================================= */
/* 頂部導覽列 (Navbar) - 流行、質感、立體感設計 */
/* ================================================= */
.navbar {
    /* 顏色調整為時尚的淺灰色/白色，更具質感 */
    background-color: #fcfcfc;
    color: #333;

    /* 增加立體浮動陰影 (強調立體感) */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

    /* 圓角處理，讓它看起來像一個浮動的卡片 */
    border-radius: 0 0 15px 15px;

    /* 確保導覽列不貼邊，實現"浮動"視覺效果 */
    margin: 0 25px 25px 25px;
    /* 留出周圍空間 */
    width: auto;

    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 65px;
    position: sticky;
    /* 確保滾動時停留在頂部 */
    top: 0;
    z-index: 1000;
}

/* Logo 樣式 */
.navbar .logo {
    display: flex;
    align-items: center;
    font-size: 1.4em;
    font-weight: 700;
    color: #1e3a5f;
    /* 深藍色，作為主視覺對比色 */
}

.navbar .logo .material-icons {
    margin-right: 10px;
    font-size: 1.8em;
    color: #4a90e2;
    /* 亮藍色，增加亮點 */
}

/* 導覽連結容器 */
.nav-links {
    margin-left: 50px;
}

/* 導覽連結 (Links) */
.nav-links a {
    color: #666;
    /* 一般連結顏色 */
    text-decoration: none;
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 20px;
    /* 圓角膠囊形狀 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 活躍/當前頁面連結樣式 */
.nav-links a.active {
    color: #ffffff;
    background-color: #4a90e2;
    /* 主品牌色 */
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.4);
    /* 活躍狀態的陰影，增加立體感 */
}

.nav-links a:hover {
    color: #1e3a5f;
    background-color: #eee;
}

/* 用戶操作區 */
.user-actions {
    margin-left: auto;
}

/* 用戶按鈕 (Logout/Settings) */
.user-actions a {
    color: #4a90e2;
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid #4a90e2;
    /* 藍色邊框 */
    border-radius: 20px;
    margin-left: 10px;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.2s ease;
    font-size: 0.9em;
}

.user-actions a:hover {
    background-color: #4a90e2;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.4);
}

/* ================================================= */
/* 主內容區 (Main Content) */
/* ================================================= */
.main-content-full {
    padding: 0 30px 30px 30px;
    /* 調整 padding */
    flex-grow: 1;
}

.main-content-full h2 {
    color: #1e3a5f;
    margin-bottom: 25px;
    border-bottom: 2px solid #e0e6ed;
    padding-bottom: 10px;
    font-weight: 300;
}

/* ================================================= */
/* 卡片 (Card) 基礎樣式 */
/* ================================================= */
.card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    padding: 25px;
    transition: transform 0.2s ease;
    height: 100%;
}

.card:hover {
    transform: translateY(-2px);
    /* Subtle lift on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.card h3 {
    font-size: 1.2em;
    color: #1e3a5f;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f4f7;
}

/* Grid Layout */
.grid-row-1 {
    margin-bottom: 25px;
}

.grid-row-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.grid-row-2>.card {
    flex: 1 1 350px;
    min-width: 350px;
    max-width: 100%;
}

/* 圖表佔位符 (Chart Placeholders) */
.chart-placeholder {
    background-color: #f0f4f7;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    /* 允許圖標和文字垂直排列 */
    justify-content: center;
    align-items: center;
    color: #aebfd4;
    font-size: 1em;
    font-weight: 500;
    margin-bottom: 15px;
    border: 1px dashed #dce1e6;
    text-align: center;
}

.chart-placeholder .material-icons {
    font-size: 2em;
    margin-bottom: 5px;
}

.large-chart {
    height: 300px;
}

.small-chart {
    height: 250px;
}

.chart-description {
    font-size: 0.9em;
    color: #7f8c8d;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e0e6ed;
}

/* ================================================= */
/* 頁面切換控制 (Page Switching) */
/* ================================================= */

/* 預設隱藏所有主要頁面內容 */
.page-content {
    display: none;
}

/* 顯示活躍的頁面 */
.page-content.active {
    display: block;
}


/* ================================================= */
/* 內部 Tab 切換 (Section Switcher) 樣式 */
/* ================================================= */
.section-switcher {
    display: flex;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
    max-width: fit-content;
}

.switcher-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    color: #666;
    transition: all 0.3s ease;
}

.switcher-btn .material-icons {
    margin-right: 8px;
    font-size: 1.2em;
}

/* 活躍按鈕樣式 */
.switcher-btn.active {
    background-color: #4a90e2;
    /* 主品牌色 */
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.4);
}

.switcher-btn:hover:not(.active) {
    background-color: #f0f4f7;
    color: #1e3a5f;
}

/* 內容區塊 (Tab Content) 樣式 */

/* 預設隱藏所有內容區塊 */
.tab-content {
    display: none;
}

/* 顯示活躍的內容區塊 */
.tab-content.active {
    display: block;
}

/* ================================================= */
/* 響應式調整 (Responsive Adjustments) */
/* ================================================= */

/* Tablet breakpoint (768px - 1024px) */
@media (max-width: 1024px) {
    .main-content-full {
        padding: 0 20px 20px 20px;
    }

    .card {
        padding: 20px;
    }

    /* Radar content wrapper adjustments */
    .radar-content-wrapper {
        flex-direction: column !important;
    }

    .radar-chart-section {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .radar-list-section {
        min-width: 100% !important;
        flex: 1 1 100% !important;
        max-height: 400px !important;
    }

    /* Filter adjustments */
    .chart-filters {
        flex-direction: column !important;
    }

    .filter-group {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile breakpoint (768px and below) */
@media (max-width: 768px) {

    /* Grid and card adjustments */
    .grid-row-2>.card {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .grid-row-1 {
        margin-bottom: 15px;
    }

    /* Navbar mobile adjustments */
    .navbar {
        margin: 0 10px 15px 10px;
        padding: 10px 15px;
        flex-wrap: wrap;
        height: auto;
        border-radius: 0 0 12px 12px;
    }

    .navbar .logo {
        font-size: 1.1em;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }

    .navbar .logo .material-icons {
        font-size: 1.5em;
        margin-right: 8px;
    }

    .nav-links {
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-top: 5px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
    }

    .nav-links a {
        padding: 8px 12px;
        font-size: 0.9em;
        margin: 2px;
    }

    .user-actions {
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .user-actions a {
        padding: 6px 10px;
        font-size: 0.85em;
        margin: 0;
    }

    /* Section switcher mobile */
    .section-switcher {
        flex-direction: column;
        max-width: 100%;
        padding: 8px;
    }

    .switcher-btn {
        margin: 4px 0;
        padding: 10px 15px;
        font-size: 0.9em;
        justify-content: center;
    }

    .switcher-btn .material-icons {
        font-size: 1.1em;
    }

    /* Main content adjustments */
    .main-content-full {
        padding: 0 12px 20px 12px;
    }

    .main-content-full h2 {
        font-size: 1.3em;
        margin-bottom: 15px;
        padding-bottom: 8px;
    }

    /* Card mobile styling */
    .card {
        padding: 15px;
        border-radius: 10px;
    }

    .card h3 {
        font-size: 1em;
        margin-bottom: 12px;
    }

    /* Chart containers - make them responsive */
    .chart-container {
        height: 280px !important;
        min-height: 250px;
    }

    /* 3D scatter plot adjustments */
    #scatter3DChart,
    #epsScatter3DChart {
        height: 400px !important;
    }

    /* Price trend chart adjustments */
    .price-chart-section .chart-container {
        height: 280px !important;
    }

    .volume-chart-section .chart-container {
        height: 150px !important;
    }

    /* Radar scan chart */
    .radar-chart-section .chart-container {
        height: 320px !important;
    }

    /* Chart scroll container */
    .chart-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Chart description text */
    .chart-description {
        font-size: 0.8em;
        padding-top: 8px;
        margin-top: 8px;
    }

    /* Filter sections */
    .shared-filters-section {
        padding: 12px 15px !important;
        margin-bottom: 15px !important;
    }

    .shared-filters-section h4 {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
    }

    .filter-group label {
        font-size: 0.8rem !important;
        display: block;
        margin-bottom: 5px;
    }

    /* KPI card adjustments */
    .kpi-content {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 15px 0 !important;
    }

    .kpi-percentage span {
        font-size: 2.8rem !important;
    }

    .kpi-status {
        border-left: none !important;
        border-top: 2px solid #e0e6ed;
        padding-top: 15px !important;
        padding-left: 0 !important;
    }

    /* Stock list in radar section */
    .radar-list-section {
        max-height: 350px !important;
    }

    .list-table-header {
        font-size: 0.75em !important;
        padding: 8px 12px !important;
    }

    /* Watchlist adjustments */
    .watchlist-section {
        max-height: 400px !important;
    }

    .watchlist-section .list-table-header {
        grid-template-columns: 0.8fr 1fr 1fr 1.2fr 1fr !important;
        font-size: 0.7em !important;
        padding: 10px 12px !important;
    }

    /* Section subtitle */
    .section-subtitle {
        font-size: 1.1rem !important;
        margin: 20px 0 12px 0 !important;
        padding-left: 10px !important;
    }

    /* Password overlay mobile */
    #passwordOverlay>div {
        padding: 30px 25px !important;
        width: 92% !important;
        max-width: 350px !important;
    }

    #passwordOverlay h2 {
        font-size: 1.5rem !important;
    }

    #passwordOverlay input {
        padding: 12px 14px !important;
        font-size: 0.95rem !important;
    }

    #passwordOverlay button {
        padding: 12px !important;
    }
}

/* Small mobile breakpoint (480px and below) */
@media (max-width: 480px) {
    .navbar {
        margin: 0 5px 10px 5px;
        padding: 8px 10px;
    }

    .navbar .logo {
        font-size: 1em;
    }

    .nav-links a {
        padding: 6px 10px;
        font-size: 0.85em;
    }

    .main-content-full {
        padding: 0 8px 15px 8px;
    }

    .main-content-full h2 {
        font-size: 1.15em;
    }

    .card {
        padding: 12px;
        border-radius: 8px;
    }

    .card h3 {
        font-size: 0.95em;
    }

    /* Smaller chart heights for very small screens */
    .chart-container {
        height: 240px !important;
    }

    #scatter3DChart,
    #epsScatter3DChart {
        height: 350px !important;
    }

    .price-chart-section .chart-container {
        height: 250px !important;
    }

    .volume-chart-section .chart-container {
        height: 120px !important;
    }

    .radar-chart-section .chart-container {
        height: 280px !important;
    }

    /* KPI adjustments */
    .kpi-percentage span {
        font-size: 2.2rem !important;
    }

    .kpi-status {
        font-size: 0.9em;
    }

    #investmentStatusDescription {
        font-size: 0.85rem !important;
    }

    /* Switcher buttons */
    .switcher-btn {
        padding: 8px 12px;
        font-size: 0.85em;
    }

    /* Filter sections */
    .shared-filters-section {
        padding: 10px 12px !important;
    }

    /* Stock list headers */
    .list-table-header span {
        font-size: 0.7em !important;
    }

    /* Watchlist smaller grid */
    .watchlist-section .list-table-header {
        grid-template-columns: 0.7fr 0.9fr 0.9fr 1.1fr 0.9fr !important;
        gap: 5px !important;
    }
}

/* Landscape mobile optimization */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar {
        position: relative;
        margin-bottom: 10px;
    }

    .chart-container {
        height: 200px !important;
    }

    #scatter3DChart,
    #epsScatter3DChart {
        height: 300px !important;
    }
}

/* ================================================= */
/* Tom Select Dropdown Z-index Priority Fix */
/* 解決下拉選單展開時被其他 Card 遮擋導致閃爍的問題 */
/* ================================================= */

/* 確保 filter section 有相對定位作為 z-index 基準 */
.shared-filters-section {
    position: relative;
    z-index: 100;
}

/* 確保 filter group 有相對定位 */
.filter-group {
    position: relative;
    z-index: 100;
    transition: z-index 0.1s;
    /* 平滑過渡 */
}

/* 關鍵修正：當 Filter Group 內有焦點（被點擊/輸入）時，大幅提升層級 */
/* 這確保了在手機版垂直排列時，上方的選單展開後能蓋住下方的選單容器，而不是被下方容器遮擋 */
.filter-group:focus-within {
    z-index: 10001 !important;
}

/* 輔助：滑鼠懸停時也提升層級 */
.filter-group:hover {
    z-index: 10001;
}

/* Tom Select wrapper 提高優先級 */
.ts-wrapper {
    position: relative;
    z-index: 100;
}

/* Tom Select 下拉選單展開時的最高優先級 */
.ts-wrapper.focus {
    z-index: 9999 !important;
}

/* Tom Select 下拉選單容器 */
.ts-dropdown {
    z-index: 9999 !important;
    position: absolute !important;
}

/* 確保下拉選項在最上層 */
.ts-dropdown-content {
    z-index: 9999 !important;
}

/* 當有多個 filter 時，確保展開的那個在最上層 */
.ts-wrapper.dropdown-active {
    z-index: 9999 !important;
}

/* 確保 card hover 效果不會影響 dropdown 的 z-index */
.shared-filters-section.card:hover {
    z-index: 100;
}