*{box-sizing:border-box}body{margin:0;background:#050607;color:#e9edf3;font:13px Arial,sans-serif}.sidebar{position:fixed;width:235px;height:100vh;background:#181b22;padding:22px 14px;border-right:1px solid #292e37}.brand,.school{display:flex;align-items:center;gap:10px;padding:0 8px 20px}.logo{font-size:27px}.brand b{display:block;font-size:18px}.brand strong{color:#2dd451;font-size:18px}.school{border-bottom:1px solid #2b3039;padding-bottom:18px}.school-logo{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#0785ed;font-weight:bold}.school small{display:block;color:#8b95a8;margin-top:5px;font-size:10px}nav{margin-top:18px}nav a{display:block;color:#8e98ad;text-decoration:none;padding:13px 14px;border-radius:25px;margin:5px 0}nav a.active,nav a:hover{background:#050607;color:#2ed952}.status{position:absolute;bottom:18px;left:14px;right:14px;padding:14px;border:1px solid #303640;border-radius:10px;color:#9aa4b6;font-size:11px}.status b{color:white}.status p{margin:9px 0}.status p:first-of-type{color:#f0a51a}.main{}main{margin-left:235px}header{height:68px;background:#181b22;border-bottom:1px solid #292e37;display:flex;align-items:center;gap:18px;padding:0 25px;position:sticky;top:0;z-index:3}header button{border:0;background:#050607;color:#ff2530;border-radius:50%;width:40px;height:40px;font-size:18px}header input{background:#050607;border:0;border-radius:5px;padding:11px 14px;color:white;width:210px}header div{margin-left:auto;color:#8f99ad}header span{color:#26d64d}.content{padding:24px}.title{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.title h1{margin:0 0 5px;font-size:25px}.title p{margin:0;color:#8e98aa}.title label{background:#20252d;color:#9aa4b4;padding:8px 11px;border-radius:5px;font-size:10px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:16px}.card{background:#191c23;border:1px solid #262c35;border-radius:6px;padding:17px}.cards .card{min-height:108px}.cards i{float:left;font-style:normal;font-size:30px;color:#168cff;margin:10px 15px 0 0}.cards small{display:block;color:#8791a5;font-size:10px;margin-bottom:8px}.cards b{display:block;font-size:20px}.cards em{display:block;color:#929cad;font-size:9px;font-style:normal;margin-top:7px}.grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:15px}.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.head h2{font-size:14px;margin:0}.head span{color:#32d652;font-size:10px}.cam{height:245px;background:#090b0e;border:1px solid #292f38;display:grid;place-items:center;text-align:center;color:#758093;font-size:38px}.cam b,.cam small{display:block;font-size:12px;color:#c0c7d1}.cam small{font-size:10px;color:#6e788b;margin-top:-80px}.camera button{margin-top:10px;background:#087df0;color:white;border:0;border-radius:5px;padding:9px 11px;font-size:10px}.camera button+button{background:#303640}.sensor{display:flex;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid #2b3039;font-size:23px;color:#25d34c}.sensor div{font-size:12px;color:white}.sensor small{display:block;color:#8e98aa;margin-top:5px}.servo{padding-top:18px;color:#8e98aa;font-size:10px}.servo b{float:right;color:#168cff;font-size:16px}.servo input{width:100%;margin-top:14px;accent-color:#168cff}.row{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #2b3039}.sw{border:0;border-radius:15px;background:#333944;color:white;padding:6px 12px;font-size:9px}.sw.on{background:#25c94b}.bottom{display:grid;grid-template-columns:1.5fr 1fr;gap:15px;margin-top:15px}.chart canvas{width:100%;height:210px}.activity ul{padding:0;margin:0;list-style:none}.activity li{padding:14px 0;border-bottom:1px solid #2b3039;color:#c7cdd6}.activity li b{color:#7d8799;margin-right:12px}footer{text-align:center;color:#687386;font-size:10px;padding:25px}@media(max-width:1000px){.sidebar{width:190px}main{margin-left:190px}.cards{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr 1fr}.grid .card:last-child{grid-column:1/-1}}@media(max-width:700px){.sidebar{position:relative;width:100%;height:auto}.status{position:static;margin-top:15px}main{margin-left:0}.cards,.grid,.bottom{grid-template-columns:1fr}.content{padding:15px}}
.school-logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.school-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* =====================================================
   TOMBOL HAPUS RIWAYAT
===================================================== */

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.history-header h2 {
    margin: 0;
}

.btn-hapus-riwayat {
    border: 1px solid #3a414c;
    background: #242a33;
    color: #d7dce3;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.btn-hapus-riwayat:hover {
    background: #b3262e;
    border-color: #d13a42;
    color: #ffffff;
}