/* ==========================================================
   HEPHAISTOS DASHBOARD
   Version 1.1
========================================================== */

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

:root{

    --bg:#15181d;
    --panel:#20242b;
    --panel-light:#292e36;

    --text:#f2f2f2;
    --text-light:#bfc5cf;

    --green:#35c759;
    --orange:#ff9f0a;
    --red:#ff453a;
    --blue:#3b82f6;

    --radius:14px;

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

}

body{

    background: radial-gradient(farthest-side at 10% 0px, rgb(51, 56, 103) 20%, rgb(23, 25, 59)) 0% 0% / cover no-repeat fixed;
	
    font-family: "Inter", "Segoe UI", sans-serif;

    color:var(--text);


}

.container{

    width:95%;

    max-width:1700px;

    margin:auto;

    padding:25px;

}



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

header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

header h1{

    font-size:34px;

    letter-spacing:1px;

}

header p{

    color:var(--text-light);

    margin-top:6px;

    font-size:15px;

}



/* ==========================================================
   ONLINE BADGE
========================================================== */

.badge{

    display:inline-block;

    padding:8px 14px;

    border-radius:25px;

    font-size:14px;

    font-weight:600;

}

.badge-green{

    background:var(--green);

    color:white;

}



/* ==========================================================
   ROWS
========================================================== */

.dashboard{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.row{

    display:grid;

    gap:22px;

}

.row-4{

    grid-template-columns:

        repeat(4,1fr);

}

.row-3{

    grid-template-columns:

        1fr
        1fr
        2fr;

}

.row-1{

    grid-template-columns:

        1fr;

}



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

.card{

    background: rgba(255,255,255,0.05);

    border-radius: 16px;

    padding: 24px;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.15);

    border: none;
}

.card h2{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    font-size:21px;

    font-weight:600;

}

.card-content{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.subtitle{

    color:var(--text-light);

    font-size:15px;

}



/* ==========================================================
   MINI TABLE
========================================================== */

.mini-table{

    width:100%;

    border-collapse:collapse;

}

.mini-table td{

    padding:9px 0;

    font-size:16px;

}

.right{

    text-align:right;

}



/* ==========================================================
   KPI
========================================================== */

.kpi{

    text-align:center;

    font-size:68px;

    font-weight:700;

    margin:18px 0;

}

.disabled{

    color:var(--orange);

}



/* ==========================================================
   INFO ROWS
========================================================== */

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-top:1px solid #949494;

    font-size:15px;

}



/* ==========================================================
   GAUGES
========================================================== */

.gauge{

    margin-bottom:18px;

}

.gauge:last-child{

    margin-bottom:0;

}

.gauge-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

    font-size:14px;

}

.gauge-bar{

    width:100%;

    height:12px;

    background:#343942;

    border-radius:20px;

    overflow:hidden;

}

.gauge-fill{
    height:100%;
    width:0;
    background:var(--blue);
    border-radius:20px;
    transition:.5s;
}

.gauge-fill.warning {
    background:#f59e0b !important;
}

.gauge-fill.danger {
    background:#ef4444 !important;
}


/* ==========================================================
   ANALYSIS TABLE
========================================================== */

.analysis-table{

    width:100%;

    border-collapse:collapse;

}

.analysis-table td{

    padding:11px 0;

    border-bottom:1px solid #343942;

}

.analysis-table tr:last-child td{

    border:none;

}

/* ==========================================================
   VALIDATOR
========================================================== */

.validator{

    display:flex;

    gap:8px;

    align-items:center;

}

.validator-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#444b56;

}

.validator-dot.active{

    background:var(--green);

}



/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    display:flex;

    flex-direction:column;

    margin-top:10px;

}

.timeline-item{

    display:flex;

    gap:18px;

    position:relative;

    min-height:70px;

}

.timeline-left{

    width:26px;

    display:flex;

    flex-direction:column;

    align-items:center;

    flex-shrink:0;

}

.timeline-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--blue);

    margin-top:6px;

    z-index:2;

}

.timeline-bar{

    width:2px;

    flex:1;

    background:#4b5563;

    margin-top:4px;

}

.timeline-right{

    flex:1;

    padding-bottom:18px;

}

.timeline-time{

    font-size:13px;

    color:var(--text-light);

    margin-bottom:6px;

}

.timeline-message{

    font-size:16px;

    line-height:1.5;

}



/* ==========================================================
   FULL WIDTH CARD
========================================================== */

.timeline-card{

    width:100%;

}



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

footer{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--text-light);

    font-size:13px;

    border-top:1px solid #343942;

    padding-top:15px;

}



/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#1b1f25;

}

::-webkit-scrollbar-thumb{

    background:#505866;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#687181;

}



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

@media (max-width:1200px){

    .row-4{

        grid-template-columns:

            repeat(2,1fr);

    }

    .row-3{

        grid-template-columns:

            1fr;

    }

}

@media (max-width:768px){

    .container{

        width:98%;

        padding:12px;

    }

    header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .row-4{

        grid-template-columns:

            1fr;

    }

    .card{

        padding:18px;

    }

    .kpi{

        font-size:52px;

    }

    .card h2{

        font-size:18px;

    }

}



/* ==========================================================
   SMALL ANIMATIONS
========================================================== */

.card{

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}

.card:hover{

    transform:translateY(-2px);

    box-shadow:

        0 8px 18px rgba(0,0,0,.35);

}

.badge{

    transition:.2s;

}

.gauge-fill{

    transition:width .5s ease;

}

.timeline-dot{

    transition:.2s;

}

.timeline-item:hover .timeline-dot{

    transform:scale(1.3);

}



/* ==========================================================
   UTILITIES
========================================================== */

.text-green{

    color:var(--green);

}

.text-orange{

    color:var(--orange);

}

.text-red{

    color:var(--red);

}

.text-blue{

    color:var(--blue);

}

.center{

    text-align:center;

}

.right{

    text-align:right;

}

.daynight {
    text-align:center;
}

.daynight-switch {

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

}


.daynight-icon {

    font-size:45px;
    transition:.4s;

}


.daynight-icon.active.sun {

    color:#facc15;
    filter:drop-shadow(0 0 10px #facc15);

}


.daynight-icon.active.moon {

    color:#60a5fa;
    filter:drop-shadow(0 0 10px #60a5fa);

}


.daynight-icon.inactive {

    color:#4b5563;
    opacity:.35;

}


.daynight-bar {

    width:70px;
    height:18px;

    background:#343942;

    border-radius:20px;

    position:relative;

}


.daynight-slider {

    position:absolute;

    top:-5px;

    width:28px;
    height:28px;

    border-radius:50%;

    background:#ffffff;

    transition:.5s;

}


.daynight-slider.day {

    left:0;

    box-shadow:0 0 14px #facc15;

}


.daynight-slider.night {

    left:42px;

    box-shadow:0 0 14px #60a5fa;

}

.daynight-label {
    font-size:18px;
    margin-top:5px;
}

.service-row {

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin:15px 0;

}


.status-pill {

    width:28px;
    height:28px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;

    font-weight:bold;

}


.status-ok {

    background:#22c55e;

}


.status-ko {

    background:#ef4444;

}