/* ================= GLOBAL ================= */
html,body{
    margin:0;
    padding:0;
    background:#000;
    color:#fff;
    font-family:Arial,sans-serif;
}

/* ================= LOGIN ================= */
#loginPage{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}
.login-box{
    display:flex;
    width:95%;
    max-width:900px;
    background:#111;
    border-radius:14px;
    overflow:hidden;
}
.login-img{
    flex:1;
    background:#000 url("../img/layoutlogowisesa.png") center/contain no-repeat;
}
.login-form{
    flex:1;
    padding:35px;
}
.login-form h1{
    text-align:center;
    color:#7CFF00;
}
.login-form label{
    font-size:12px;
    margin-top:10px;
    display:block;
}
.login-form input{
    width:100%;
    padding:10px;
    background:#000;
    border:1px solid #333;
    color:#fff;
    border-radius:6px;
}
.login-form button{
    width:100%;
    margin-top:20px;
    padding:12px;
    background:#7CFF00;
    border:none;
    font-weight:bold;
    cursor:pointer;
}
#msg{
    margin-top:10px;
    text-align:center;
    font-size:12px;
    color:#ff5555;
}

/* ================= DASHBOARD ================= */
#dashboard{
    display:none;
    height:100vh;
}
.topbar{
    padding:8px;
    background:#0a0a0a;
    color:#7CFF00;
    text-align:center;
    border-bottom:1px solid #222;
}
.grid{
    padding:10px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}
.card{
    background:#111;
    border-radius:12px;
    padding:10px;
    display:flex;
    flex-direction:column;
}
.card-header{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    opacity:.8;
}
.value{
    text-align:center;
    font-size:26px;
    font-weight:bold;
}
.status{
    text-align:center;
    font-size:11px;
    padding:4px;
    border-radius:5px;
    margin:6px 0;
}
.normal{background:#006400}
.waspada{background:#ff8c00}
.bahaya{background:#8b0000}

.chart-box{
    position:relative;
    height:230px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
    .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
    .login-box{flex-direction:column}
    .login-img{height:180px}
    .grid{grid-template-columns:1fr}
}