header{

height:70px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 25px;

}

.logo{

font-size:28px;

font-weight:bold;

}

.live{

display:flex;

align-items:center;

gap:10px;

}

.dot{

width:10px;

height:10px;

border-radius:50%;

background:#00ff66;

}

.cards{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:15px;

padding:0 20px 20px;

}

main{

height:65vh;

display:grid;

grid-template-columns:250px 1fr;

gap:20px;

padding:0 20px;

}

aside{

background:#111827;

border-radius:12px;

padding:20px;

}

footer{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

padding:20px;

height:180px;

}

/* ==============================
   MOBILE RESPONSIVE
   ============================== */

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    header {
        height: auto;
        min-height: 58px;

        padding: 12px 14px;

        gap: 10px;

        align-items: center;
    }

    .logo {
        font-size: 20px;
        line-height: 1.1;
    }

    .live {
        gap: 6px;
        font-size: 12px;
        white-space: nowrap;
    }

    .dot {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
    }


    /*
     KPI cards:
     horizontal swipe instead of
     crushing 5 cards into one row.
    */

    .cards {
        display: flex;

        overflow-x: auto;
        overflow-y: hidden;

        gap: 10px;

        padding:
            0 12px 12px;

        scroll-snap-type: x proximity;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .cards::-webkit-scrollbar {
        display: none;
    }

    .cards .card {
        flex:
            0 0
            min(72vw, 260px);

        scroll-snap-align: start;
    }


    /*
     Sidebar moves above map.
    */

    main {
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 10px;

        padding:
            0 12px;
    }

    aside {
        width: 100%;

        padding: 14px;

        border-radius: 10px;

        box-sizing: border-box;
    }


    /*
     Charts: one per row.
    */

    footer {
        height: auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        padding:
            12px;
    }

}


@media (max-width: 480px) {

    header {
        padding:
            10px 12px;
    }

    .logo {
        font-size: 18px;
    }

    .live {
        font-size: 11px;
    }

}