/* =========================================================
   PANORAMA DE MERCADO
   @oEvandroSoares

   FASE 4

   Arquivo:
   charts.css

   Área gráfica profissional
========================================================= */





/*
=========================================================
CONTAINER PRINCIPAL DO GRÁFICO
=========================================================
*/


.chart-panel {


    display:flex;



    flex-direction:

    column;



    height:

    500px;



    overflow:

    hidden;



}









/*
=========================================================
HEADER DO GRÁFICO
=========================================================
*/


.chart-header {


    height:

    50px;



    display:flex;


    align-items:center;


    justify-content:

    space-between;



    border-bottom:

    1px solid

    var(--border-color);



}









.chart-title {


    display:flex;


    flex-direction:

    column;



}









.chart-symbol {


    font-size:

    18px;



    font-weight:

    800;



}









.chart-description {


    font-size:

    11px;



    color:

    var(--text-muted);



}









/*
=========================================================
BOTÕES DE PERÍODO
=========================================================
*/


.chart-toolbar {


    display:flex;


    gap:

    6px;



}









.chart-button {


    background:

    transparent;



    border:

    1px solid

    var(--border-color);



    color:

    var(--text-secondary);



    padding:

    6px 12px;



    border-radius:

    6px;



    cursor:

    pointer;



    font-size:

    12px;



    transition:

    .2s;



}









.chart-button:hover {


    color:

    var(--text-primary);



    border-color:

    var(--blue);



}









.chart-button.active {


    background:

    var(--blue);



    color:

    white;



}









/*
=========================================================
ÁREA DO GRÁFICO
=========================================================
*/


.chart-container {


    flex:1;



    position:

    relative;



    width:

    100%;



}









.chart-canvas {


    width:

    100%;



    height:

    100%;



}









/*
=========================================================
PAINEL DE VOLUME
=========================================================
*/


.volume-panel {


    height:

    90px;



    border-top:

    1px solid

    var(--border-color);



    margin-top:

    10px;



}









.volume-title {


    font-size:

    11px;



    color:

    var(--text-muted);



}









.volume-bars {


    display:flex;


    align-items:flex-end;



    height:

    60px;



    gap:

    3px;



}









.volume-bar {


    flex:

    1;



    background:

    rgba(

        45,

        140,

        255,

        .45

    );



    min-height:

    5px;



    border-radius:

    3px;



}









.volume-bar.high {


    background:

    var(--green);



}









.volume-bar.low {


    background:

    var(--red);



}









/*
=========================================================
INDICADORES TÉCNICOS
=========================================================
*/


.indicators-panel {


    display:flex;


    gap:

    10px;



    margin-top:

    10px;



}









.indicator {


    display:flex;


    align-items:center;



    gap:

    6px;



    padding:

    5px 10px;



    background:

    var(--bg-secondary);



    border:

    1px solid

    var(--border-color);



    border-radius:

    20px;



    font-size:

    11px;



}









.indicator-color {


    width:

    8px;



    height:

    8px;



    border-radius:

    50%;



}









.indicator-ma {


    background:

    var(--yellow);



}









.indicator-vwap {


    background:

    var(--blue);



}









.indicator-rsi {


    background:

    var(--orange);



}









/*
=========================================================
OVERLAY DE INFORMAÇÕES
=========================================================
*/


.chart-overlay {


    position:

    absolute;



    top:

    15px;



    left:

    15px;



    z-index:

    10;



    background:

    rgba(

        10,

        15,

        25,

        .85

    );



    padding:

    12px;



    border-radius:

    8px;



    border:

    1px solid

    var(--border-color);



}









.overlay-row {


    display:flex;


    justify-content:

    space-between;



    gap:

    25px;



    font-size:

    12px;



}









.overlay-label {


    color:

    var(--text-muted);



}









.overlay-value {


    font-weight:

    700;



}









/*
=========================================================
TIPO TERMINAL
=========================================================
*/


.trading-chart {


    background:

    #0a0f18;



}









/*
=========================================================
RESPONSIVIDADE
=========================================================
*/


@media(max-width:900px){



    .chart-panel {


        height:

        380px;



    }






    .chart-toolbar {


        display:none;



    }





}