/* ===========================================================
   FIRE INTELLIGENCE EUROPE 3.0
   RESPONSIVE.CSS
=========================================================== */

/* ===========================
   1600px
=========================== */

@media (max-width:1600px){

    .workspace{

        grid-template-columns:280px 1fr 340px;

    }

    .dashboard{

        width:340px;

    }

}

/* ===========================
   1400px
=========================== */

@media (max-width:1400px){

    .workspace{

        grid-template-columns:260px 1fr 320px;

    }

    .bottom-panel{

        grid-template-columns:1fr 1fr;

    }

    .floating-stats{

        flex-wrap:wrap;

    }

}

/* ===========================
   1200px
=========================== */

@media (max-width:1200px){

    .workspace{

        grid-template-columns:240px 1fr;

    }

    .dashboard{

        display:none;

    }

    .bottom-panel{

        left:260px;

        right:20px;

    }

}

/* ===========================
   Tablet
=========================== */

@media (max-width:992px){

    .workspace{

        display:flex;

        flex-direction:column;

    }

    .sidebar{

        width:100%;

        height:260px;

        border-right:none;

        border-bottom:1px solid rgba(255,255,255,.08);

    }

    .map-container{

        flex:1;

        min-height:500px;

    }

    .bottom-panel{

        position:relative;

        left:auto;

        right:auto;

        bottom:auto;

        margin:20px;

        grid-template-columns:1fr;

    }

    .top-navigation{

        display:none;

    }

}

/* ===========================
   Mobiel
=========================== */

@media (max-width:768px){

    .topbar{

        padding:0 14px;

        height:64px;

    }

    .brand-text span{

        display:none;

    }

    .brand h1{

        font-size:18px;

    }

    .floating-toolbar{

        right:12px;

        top:12px;

    }

    .floating-toolbar button{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .floating-stats{

        left:10px;

        right:10px;

        bottom:10px;

        gap:10px;

    }

    .floating-card{

        min-width:90px;

        padding:12px;

    }

    .score-circle{

        width:100px;

        height:100px;

        font-size:32px;

    }

    #cookie-banner{

        width:95%;

        flex-direction:column;

        text-align:center;

    }

    footer{

        display:none;

    }

}

/* ===========================
   Kleine telefoons
=========================== */

@media (max-width:480px){

    .sidebar{

        padding:12px;

    }

    .sidebar-card,

    .dashboard-card,

    .panel-card{

        padding:14px;

    }

    .weather-grid,

    .dashboard-grid,

    .operations-grid{

        grid-template-columns:1fr;

    }

    .floating-card{

        width:100%;

    }

    .floating-stats{

        flex-direction:column;

        align-items:flex-start;

    }

}