/* ==========================================
   WDT Pro Chart V4
   wdt.css
========================================== */

html,
body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000;

    color:#fff;

    font-family:Arial,sans-serif;

}

/* chart overlay：跑馬燈(左) + 台股指數近月(右)，下緣切齊 K線框上緣 */
#chart-overlay{
    position:absolute;
    left:0;
    right:0;
    z-index:20;
    pointer-events:none;
    display:flex;
    align-items:center;
    padding-left:60px;
    /* top 對齊 #chart 內 grid[0] top:4% 的位置
       #chartArea 跟 #chart 高度一致（flex:1），所以直接用 calc */
    top:calc(4% - 30px);
    height:22px;
}

#chart-overlay-marquee{
    flex:1;
    overflow:hidden;
    font-size:20px;
    color:#FFD700;
    min-width:0;
    padding-top:0;
}

#chart-overlay-title{
    color:#ffffff;
    font-size:20px;
    white-space:nowrap;
    flex-shrink:0;
    padding-left:10px;
    padding-right:65px;
    margin-top:-2px;
}

*{

    box-sizing:border-box;

}

#container{

    display:flex;

    width:100vw;
    height:100vh;

}

#dataPanel{
    width:20%;
    order:2;
    background:#111;
    border-left:1px solid #333;
    border-right:none;
    /* padding 改到 h2，讓 #info 能完整填滿剩餘高度 */
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

#dataPanel h2{

    margin:0;
    padding:15px 15px 10px 15px;
    flex-shrink:0;

    color:#ffffff;

    font-size:22px;

}

#info{

    flex:1;
    min-height:0;
    position:relative;
    overflow:hidden;
    padding:0 15px;

}

#chartArea{
    width:80%;
    order:1;
    height:100%;
    display:flex;
    flex-direction:column;
    position:relative;
}

#chart{

    flex:1;

    width:100%;

}

#zoomControl{

    display:none;

}

/* 歷史選單群組（右側），右邊界對齊圖表刻度線 */
#history-picker{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:12px;

    color:#fff;

    font-family:Arial,sans-serif;


}

#zoomControl button{

    min-width:70px;

    height:36px;

    border:none;

    border-radius:6px;

    background:#333;

    color:#fff;

    cursor:pointer;

    font-size:16px;

}

#zoomControl button:hover{

    background:#555;

}

@media (orientation:landscape){

    #dataPanel{

        width:12%;

        font-size:11px;

    }

    #dataPanel h2{

        padding:6px;
        font-size:20px;

    }

    #chartArea{

        width:88%;

    }

}

/* ==========================================
   圖表標題列
========================================== */



/* ==========================================
   Chart Overlay 新元素
========================================== */
#chart-overlay{
    pointer-events:none;
    padding-left:60px;
    padding-right:65px;
    gap:8px;
}

#chart-overlay-title{
    padding-left:0;
    padding-right:0;
    flex-shrink:0;
}

#chart-kline-btns{
    display:flex;
    gap:4px;
    flex-shrink:0;
    pointer-events:all;
}

.kline-btn{
    background:#333;
    color:#fff;
    border:1px solid #555;
    border-radius:4px;
    padding:0 6px;
    height:18px;
    font-size:13px;
    cursor:pointer;
    line-height:18px;
}

.kline-btn.active{
    background:#ff8c00;
    border-color:#ff8c00;
    color:#000;
}

.kline-btn:hover{
    background:#555;
}

#btn-login{
    pointer-events:all;
    background:#c0392b;
    color:#fff;
    border:none;
    border-radius:4px;
    padding:0 10px;
    height:30px;
    font-size:13px;
    cursor:pointer;
    flex-shrink:0;
    margin-right:0;
}