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

   FASE 4

   Arquivo:
   dashboard.css

   Estrutura principal do Terminal
========================================================= */



/*
=========================================================
CONTAINER PRINCIPAL
=========================================================
*/


.dashboard {


    width:100%;


    min-height:100vh;


    padding:20px;



    display:grid;


    grid-template-columns:

    1fr;



    gap:20px;



}









/*
=========================================================
HEADER DO TERMINAL
=========================================================
*/


.dashboard-header {


    width:100%;



    display:flex;


    align-items:center;


    justify-content:space-between;



    padding:18px 22px;



}









.header-brand {


    display:flex;


    align-items:center;


    gap:15px;



}









.brand-logo {


    font-size:

    22px;



    font-weight:

    800;



    color:

    var(--text-primary);



    letter-spacing:

    1px;



}









.brand-subtitle {


    font-size:

    12px;



    color:

    var(--text-secondary);



}









.market-status {


    display:flex;


    align-items:center;


    gap:10px;



}









.status-dot {


    width:

    10px;



    height:

    10px;



    border-radius:

    50%;



    background:

    var(--green);



    box-shadow:

    0 0 10px

    var(--green);



}









/*
=========================================================
ÁREA PRINCIPAL
=========================================================
*/


.market-container {


    display:grid;


    grid-template-columns:


    repeat(

        4,

        1fr

    );



    gap:16px;



}









/*
=========================================================
SEÇÃO GLOBAL
=========================================================
*/


.global-market {


    display:grid;


    grid-template-columns:


    repeat(

        4,

        1fr

    );



    gap:16px;



}









/*
=========================================================
SEÇÃO BRASIL
=========================================================
*/


.brazil-market {


    display:grid;


    grid-template-columns:


    repeat(

        3,

        1fr

    );



    gap:16px;



}









/*
=========================================================
ÁREA DE CONTEÚDO CENTRAL
=========================================================
*/


.main-grid {


    display:grid;


    grid-template-columns:


    2fr

    1fr;



    gap:20px;



}









.chart-area {


    min-height:

    420px;



}









.sidebar {


    display:flex;


    flex-direction:column;



    gap:20px;



}









/*
=========================================================
HEATMAP
=========================================================
*/


.heatmap-container {


    display:grid;


    grid-template-columns:


    repeat(

        4,

        1fr

    );



    gap:12px;



}









/*
=========================================================
NOTÍCIAS E AGENDA
=========================================================
*/


.bottom-grid {


    display:grid;


    grid-template-columns:


    1fr

    1fr;



    gap:20px;



}









.news-panel,


.calendar-panel {


    min-height:

    260px;



}









/*
=========================================================
PAINEL SENTIMENTO
=========================================================
*/


.sentiment-panel {


    display:flex;


    align-items:center;


    justify-content:space-between;



}









.sentiment-value {


    font-size:

    32px;



    font-weight:

    800;



}









/*
=========================================================
ANIMAÇÕES DE ATUALIZAÇÃO
=========================================================
*/


.update-flash {


    animation:

    flashUpdate

    .6s

    ease;



}





@keyframes flashUpdate {


    0% {


        opacity:

        .5;


    }



    100% {


        opacity:

        1;


    }



}









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


@media(max-width:1200px){



    .global-market {



        grid-template-columns:


        repeat(

            2,

            1fr

        );



    }






    .main-grid {


        grid-template-columns:

        1fr;



    }





}









@media(max-width:768px){



    .dashboard {


        padding:

        12px;



    }






    .dashboard-header {


        flex-direction:

        column;



        align-items:

        flex-start;



        gap:

        15px;



    }







    .global-market,


    .brazil-market,


    .heatmap-container,


    .bottom-grid {



        grid-template-columns:

        1fr;



    }





}









/*
=========================================================
MODO FULLSCREEN TERMINAL
=========================================================
*/


.full-terminal {


    position:

    fixed;



    top:

    0;



    left:

    0;



    width:

    100vw;



    height:

    100vh;



    z-index:

    999;



}