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

body{
background:#F4F7FC;
font-family:Segoe UI;
}

.wrapper{
display:flex;
}

#sidebar{
width:260px;
height:100vh;
background:#0B1F3A;
position:fixed;
}

.logo-section{
padding:30px;
text-align:center;
color:white;
border-bottom:1px solid rgba(255,255,255,0.1);
}

#sidebar ul{
list-style:none;
padding:20px;
}

#sidebar ul li{
margin-bottom:15px;
}

#sidebar ul li a{
color:white;
text-decoration:none;
display:block;
padding:15px;
border-radius:10px;
transition:0.3s;
}

#sidebar ul li a:hover{
background:#173B69;
}

.active a{
background:#173B69;
}

#content{
margin-left:260px;
padding:30px;
width:100%;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
}

.status{
background:white;
padding:12px 20px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,.1);
}

.status span{
color:#2ECC71;
font-weight:bold;
}

.card-box{
background:white;
padding:25px;
border-radius:15px;
box-shadow:0 3px 15px rgba(0,0,0,.1);
transition:.3s;
}

.card-box:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.card-box h5{
color:gray;
}

.card-box h2{
margin-top:15px;
font-size:36px;
}

.green{
color:#2ECC71;
}

.orange{
color:#F39C12;
}

.red{
color:#E74C3C;
}
.top-right{
display:flex;
gap:20px;
align-items:center;
}

.clock{
background:white;
padding:12px 20px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,.1);
font-weight:bold;
}

.live-indicator{
display:flex;
align-items:center;
gap:8px;
font-weight:bold;
color:#2ECC71;
}

.dot{
width:12px;
height:12px;
background:#2ECC71;
border-radius:50%;
animation:blink 1s infinite;
}

@keyframes blink{
50%{
opacity:.3;
}
}

.healthy{
color:#2ECC71;
font-weight:bold;
}

.running{
color:#3498DB;
font-weight:bold;
}

.warning{
color:#F39C12;
font-weight:bold;
}

.health-value{
font-size:70px;
font-weight:bold;
color:#2ECC71;
text-align:center;
margin-top:20px;
}

.health-status{
text-align:center;
font-size:24px;
font-weight:bold;
color:#2ECC71;
}

.footer{
    text-align:center;
    color:gray;
    margin-top:40px;
    padding-bottom:20px;
}

.footer{
    margin-top:40px;
    text-align:center;
    color:gray;
    font-size:14px;
}
.alarm-banner{
    background:#E74C3C;
    color:white;
    padding:10px;
    border-radius:10px;
    margin-top:20px;
    font-weight:bold;
}
.page-subtitle{
color:gray;
font-size:14px;
margin-top:-5px;
}

.logo-section
{
text-align:center;
padding:20px 10px;
}

.logo-img
{
width:100px;
height:auto;
border-radius:8px;
margin-bottom:15px;
}

.logo-section h4
{
color:white;
font-weight:600;
margin-bottom:5px;
}

.logo-section small
{
color:#BDC3C7;
}
.platform-name
{
color:white;
font-size:13px;
margin-top:10px;
font-weight:500;
}

.version
{
color:#BDC3C7;
font-size:11px;
margin-top:10px;
}

.logo-section hr
{
border-color:rgba(255,255,255,0.2);
}