/* ==========================================================
   Coralina Edge Network
   File: css/dashboard.css
   Version: 1.0
   ========================================================== */

/* ===========================
   Traffic Section
=========================== */

.traffic-section{

    margin:36px 0;

}

.traffic-section .panel{

    overflow:hidden;

}

#trafficChart{

    display:block;

    width:100%;

    height:360px;

    padding:20px;

}

/* ===========================
   Middle Layout
=========================== */

.middle-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:28px;

    margin-top:36px;

}

.sidebar{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/* ===========================
   Map
=========================== */

.map-panel{

    overflow:hidden;

}

.world-map{

    position:relative;

    height:620px;

    padding:20px;


background:linear-gradient(180deg,#fafbfc,#eef2f5);
border-radius:16px;
overflow:hidden;
}

.world-map svg{

    width:100%;

    height:100%;

}

.edge-node{

    cursor:pointer;

    transition:

        transform .25s ease,

        fill .25s ease;

}

.edge-node:hover{

    transform:scale(1.35);

    fill:#ff4b4b;

}

/* ===========================
   Legend
=========================== */

.legend{

    display:flex;

    align-items:center;

    gap:22px;

    font-size:14px;

}

.legend-item{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text-light);

}

.legend-item::before{

    content:"";

    width:12px;

    height:12px;

    border-radius:50%;

}

.legend-item.requests::before{

    background:#f00606;

}

.legend-item.bandwidth::before{

    background:#ff8b8b;

}

/* ===========================
   Services
=========================== */

.service-list{

    display:flex;

    flex-direction:column;

}

.service{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

    border-bottom:1px solid var(--border);

    position:relative;

    font-size:15px;

}

.service:last-child{

    border-bottom:none;

}

.service span:last-child{

    color:var(--ok);

    font-weight:600;

}

.service.online::after{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--ok);

    position:absolute;

    right:12px;

}

/* ===========================
   Client Information
=========================== */

.client-grid{

    display:grid;

    grid-template-columns:1fr;

}

.client-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:15px 22px;

    border-bottom:1px solid var(--border);

}

.client-row:last-child{

    border-bottom:none;

}

.client-row span{

    color:var(--text-light);

    font-size:14px;

}

.client-row strong{

    color:var(--text);

    font-weight:600;

    text-align:right;

}

/* ===========================
   Events
=========================== */

.events{

    display:flex;

    flex-direction:column;

    max-height:420px;

    overflow:auto;

}

.event{

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:18px 22px;

    border-bottom:1px solid var(--border);

    transition:.25s;

}

.event:last-child{

    border-bottom:none;

}

.event-time{

    font-size:12px;

    color:var(--primary);

    font-weight:600;

}

.event-text{

    color:var(--text-light);

    line-height:1.6;

}

/* ===========================
   Statistics
=========================== */

.bottom-panels{

    margin-top:36px;

}

.stats-grid{

    display:grid;

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

    gap:24px;

    padding:26px;

}

.stat-card{

    background:#fafafa;

    border:1px solid var(--border);

    border-radius:16px;

    padding:26px;

    transition:.25s;

}

.stat-card:hover{

    background:#ffffff;

    transform:translateY(-4px);

    box-shadow:var(--shadow-sm);

}

.stat-title{

    display:block;

    font-size:13px;

    color:var(--text-light);

    margin-bottom:14px;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.stat-card strong{

    display:block;

    font-size:30px;

    color:var(--primary);

    font-weight:700;

}

/* ===========================
   Scrollbars
=========================== */

.events::-webkit-scrollbar{

    width:8px;

}

.events::-webkit-scrollbar-track{

    background:#f3f3f3;

}

.events::-webkit-scrollbar-thumb{

    background:#d5d5d5;

    border-radius:10px;

}

.events::-webkit-scrollbar-thumb:hover{

    background:#bdbdbd;

}

/* ===========================
   Floating Particles
=========================== */

.floating-particle{

    position:absolute;

    width:7px;

    height:7px;

    border-radius:50%;

    background:rgba(240,6,6,.18);

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    0%{

        transform:

            translateY(0)

            scale(.6);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    50%{

        transform:

            translateY(-120px)

            scale(1);

    }

    100%{

        transform:

            translateY(-260px)

            scale(.5);

        opacity:0;

    }

}

/* ===========================
   Generic Panels
=========================== */

.panel-header h3{

    font-size:20px;

    font-weight:700;

}

.panel-header div span{

    font-size:13px;

    color:var(--text-light);

}

.panel{

    overflow:hidden;

}

/* ===========================
   Hero Polish
=========================== */

.hero-card{

    position:relative;

    overflow:hidden;

}

.hero-card::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:radial-gradient(

        rgba(240,6,6,.10),

        transparent 70%

    );

}

/* ===========================
   Selection
=========================== */

::selection{

    background:var(--primary);

    color:#fff;

}
#worldSvg{
    width:100%;
    height:100%;
    min-height:620px;
    display:block;
    border:none;
}


/* ==========================================================
   Gauge Layout Fix
   ========================================================== */

.gauges-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:24px;

    margin-top:36px;

}

.gauge-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:22px;

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

}

.gauge{

    width:220px;

    height:220px;

    margin:24px auto 8px;

    position:relative;

}

.gauge-svg{

    width:220px !important;

    height:220px !important;

}

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.card-header span:first-child{

    font-weight:600;

}

.card-header .value{

    color:var(--primary);

    font-weight:700;

}