/*
==========================================================
LQW HAZARD ENGINE
Version 2.2
==========================================================
*/


/*==========================================================
SECTION
==========================================================*/

.lqw-project-hazard{

    margin:60px 0;

}

.lqw-hazard-header{

    margin-bottom:25px;

}

.lqw-hazard-header h2{

    margin:0 0 10px;

    color:#0055A4;

    font-size:30px;

    font-weight:700;

}

.lqw-hazard-header p{

    margin:0;

    color:#666;

    font-size:16px;

    line-height:1.6;

}


/*==========================================================
LAYOUT
==========================================================*/

.lqw-hazard-layout{

    display:grid;

    grid-template-columns:2fr 3fr;

    gap:25px;

    align-items:stretch;

}


/*==========================================================
MAP
==========================================================*/

.lqw-hazard-map-column{

    width:100%;

}

#lqw-hazard-map{

    width:100%;

    height:360px;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #E5E7EB;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    background:#F5F7FA;

}

.lqw-map-placeholder{

    display:flex;

    justify-content:center;

    align-items:center;

    height:100%;

    color:#777;

    font-size:16px;

}

.lqw-map-error{

    display:flex;

    justify-content:center;

    align-items:center;

    height:100%;

    color:#C62828;

    font-weight:600;

}


/*==========================================================
RIGHT PANEL
==========================================================*/

.lqw-dashboard{

    display:flex;

    flex-direction:column;

    height:100%;

    border:1px solid #E5E7EB;

    border-radius:12px;

    background:#FFF;

    overflow:hidden;

}


/*==========================================================
CONTENT
==========================================================*/

.dashboard-section{

    padding:18px;

}

.dashboard-section:first-child{

    border-bottom:1px solid #EEE;

}

.dashboard-section h4{

    margin:0 0 14px;

    color:#0055A4;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

}


/*==========================================================
Legend
==========================================================*/

.legend-grid{

    display:grid;

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

    gap:12px;

}

.legend-card{

    text-align:center;

}

.legend-card .badge{

    display:block;

    width:100%;

    min-width:unset;

    margin-bottom:8px;

}

.legend-card small{

    display:block;

    color:#666;

    font-size:11px;

    line-height:1.35;

}


/*==========================================================
ASSESSMENT
==========================================================*/

.assessment-block{

    margin-bottom:18px;

}

.assessment-block:last-child{

    margin-bottom:0;

}

.assessment-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:6px;

}

.assessment-title strong{

    font-size:13px;

    color:#222;

}

.assessment-block small{

    display:block;

    color:#666;

    font-size:12px;

    line-height:1.5;

}

/*==========================================================
Assessment
==========================================================*/

.assessment-grid{

    display:grid;

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

    gap:15px;

    margin-top:12px;

}

.assessment-card{

    background:#FAFBFC;

    border:1px solid #E5E7EB;

    border-radius:10px;

    padding:14px;

    text-align:center;

}

/*==========================================================
BADGES
==========================================================*/

.badge{

    display:inline-block;

    min-width:90px;

    text-align:center;

    padding:4px 10px;

    border-radius:18px;

    color:#FFF;

    font-size:10px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

}

.badge.low{

    background:#2E7D32;

}

.badge.moderate{

    background:#F9A825;

}

.badge.high{

    background:#C62828;

}

.badge.na{

    background:#9E9E9E;

}


.dashboard-footer{

    margin-top:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    background:#FAFBFC;

    border-top:1px solid #E5E7EB;

}

.dashboard-footer>div{

    padding:12px;

    border-right:1px solid #E5E7EB;

}

.dashboard-footer>div:last-child{

    border-right:none;

}

.dashboard-footer strong{

    display:block;

    color:#0055A4;

    margin-bottom:5px;

    font-size:12px;

}

.dashboard-footer p{

    margin:0;

    color:#666;

    font-size:11px;

}

/*==========================================================
LEAFLET
==========================================================*/

.leaflet-control-layers{

    border:none !important;

    border-radius:10px !important;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    overflow:hidden;

}

.leaflet-control-layers-toggle{

    width:42px !important;

    height:42px !important;

}

.leaflet-popup-content{

    font-size:14px;

    line-height:1.5;

}


/*==========================================================
TABLET
==========================================================*/

@media(max-width:1024px){

    .lqw-hazard-layout{

        grid-template-columns:1fr;

    }

    #lqw-hazard-map{

        height:320px;

    }

}


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

@media(max-width:768px){

    .lqw-project-hazard{

        margin:40px 0;

    }

    .lqw-hazard-header h2{

        font-size:24px;

    }

    .lqw-hazard-header p{

        font-size:14px;

    }

    #lqw-hazard-map{

        height:260px;

    }

    .dashboard-footer{

        grid-template-columns:1fr;

    }

    .dashboard-footer>div{

        border-right:none;

        border-top:1px solid #E5E7EB;

    }

}