/*=========================================================
 SMART FLOOD MONITOR V1.0
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#eef2f7;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    color:#333;

}

/*=========================================================
 HEADER
=========================================================*/

.topbar{

    background:linear-gradient(
        90deg,
        #1565C0,
        #1976D2);

    color:white;

    padding:20px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    box-shadow:
    0 4px 15px rgba(0,0,0,.25);

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo h1{

    font-size:30px;

    font-weight:700;

}

.logo small{

    opacity:.9;

}

.online{

    background:#2E7D32;

    padding:

    10px
    18px;

    border-radius:25px;

    font-weight:bold;

    color:white;

}

/*=========================================================
 SUMMARY
=========================================================*/

.summary{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:18px;

    padding:25px;

}

.summaryBox{

    background:white;

    border-radius:14px;

    text-align:center;

    padding:22px;

    box-shadow:
    0 2px 10px rgba(0,0,0,.12);

    transition:.3s;

}

.summaryBox:hover{

    transform:translateY(-5px);

}

.summaryTitle{

    color:#666;

    font-size:15px;

}

.summaryValue{

    font-size:42px;

    margin-top:10px;

    font-weight:bold;

}

.green{

    border-top:6px solid #2E7D32;

}

.yellow{

    border-top:6px solid #F9A825;

}

.red{

    border-top:6px solid #C62828;

}

/*=========================================================
 STATION GRID
=========================================================*/

.stationGrid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:20px;

    padding:20px;

}

/*=========================================================
 CARD
=========================================================*/

.stationCard{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 3px 12px rgba(0,0,0,.12);

    transition:.3s;

    cursor:pointer;

}

.stationCard:hover{

    transform:translateY(-8px);

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

}

.cardHeader{

    background:#1976D2;

    color:white;

    padding:18px;

    font-size:22px;

    font-weight:bold;

}

.cardBody{

    padding:20px;

    text-align:center;

}

.level{

    font-size:60px;

    color:#1565C0;

    font-weight:bold;

}

.unit{

    font-size:20px;

    color:#777;

}

.status{

    margin-top:18px;

    display:inline-block;

    padding:

    10px
    22px;

    border-radius:25px;

    color:white;

    font-weight:bold;

    font-size:18px;

}

.statusGreen{

    background:#2E7D32;

}

.statusYellow{

    background:#F9A825;

    color:black;

}

.statusRed{

    background:#C62828;

}

.update{

    margin-top:18px;

    color:#666;

    font-size:15px;

}

.detailButton{

    margin-top:20px;

    background:#1565C0;

    color:white;

    border:none;

    padding:

    12px
    24px;

    border-radius:30px;

    cursor:pointer;

    transition:.3s;

}

.detailButton:hover{

    background:#0D47A1;

}

/*=========================================================
 FOOTER
=========================================================*/

footer{

    margin-top:40px;

    background:#1565C0;

    color:white;

    text-align:center;

    padding:30px;

    line-height:2;

}

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

@media(max-width:768px){

.logo{

    width:100%;

    justify-content:center;

}

.online{

    margin-top:15px;

    width:100%;

    text-align:center;

}

.logo h1{

    font-size:24px;

}

.level{

    font-size:46px;

}

}