.page-title{
    font-size:34px;
    margin-bottom:30px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:30px;
}

.metric{
    background:#1e293b;
    border-radius:18px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    transition:.3s;
    position:relative;
    overflow:hidden;
}

.metric::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:#38bdf8;
}

.metric:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(56,189,248,.18);
}

.metric h4{
    color:#94a3b8;
    margin-bottom:12px;
    font-size:15px;
    font-weight:600;
}

.metric h2{
    font-size:36px;
    color:#38bdf8;
    font-weight:700;
}

.chart-row{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    margin-bottom:30px;
}

.chart-card{
    background:#1e293b;
    border-radius:18px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.chart-card h3{
    margin-bottom:20px;
    color:#fff;
}

.summary-table{
    width:100%;
    border-collapse:collapse;
}

.summary-table td{
    padding:15px;
    border-bottom:1px solid #334155;
}

.summary-table td:first-child{
    color:#94a3b8;
}

.summary-table td:last-child{
    color:#38bdf8;
    font-weight:600;
    text-align:right;
}

.table-card{
    background:#1e293b;
    border-radius:18px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.table-card h3{
    margin-bottom:20px;
}

.table-card table{
    width:100%;
    border-collapse:collapse;
}

.table-card th{
    background:#111827;
    padding:15px;
    text-align:left;
    color:#cbd5e1;
}

.table-card td{
    padding:15px;
    border-bottom:1px solid #334155;
}

canvas{
    width:100% !important;
    height:350px !important;
}

.online{
    color:#22c55e;
}

.warning{
    color:#f59e0b;
}

.offline{
    color:#ef4444;
}

.good{
    color:#22c55e;
}

.bad{
    color:#ef4444;
}

.fade-in{
    animation:fadeIn .6s ease;
}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.metric h2{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        opacity:.85;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.85;

    }

}

@media(max-width:1200px){

    .grid{

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

    }

    .chart-row{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .grid{

        grid-template-columns:1fr;

    }

    .metric h2{

        font-size:28px;

    }

    .page-title{

        font-size:28px;

    }

    canvas{

        height:250px !important;

    }

}