/* ========================= */

.op-chart-card{

    background:#182544;

    border-radius:16px;

    height:280px;

    overflow:hidden;

}

.op-chart-header{

    padding:16px 18px;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:white;

    font-size:15px;

    font-weight:600;

}

.op-chart-body{

    padding:15px;

}

.chart-placeholder{

    height:200px;

    border:2px dashed rgba(255,255,255,.12);

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#7d90b4;

}

.donut-placeholder{

    height:200px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:2px dashed rgba(255,255,255,.12);

    border-radius:10px;

    color:#7d90b4;

}

/* =====================================
   CHART GRID
===================================== */

.chart-grid{

    display:grid;

    grid-template-columns:

        2.8fr
        2.8fr
        1.6fr
        1.6fr;

    gap:14px;

    margin-top:14px;

}

@media(max-width:1400px){

.chart-grid{

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

}

}

@media(max-width:768px){

.chart-grid{

grid-template-columns:1fr;

}

}

.chart-legend{

display:flex;

gap:16px;

font-size:11px;

color:#cfd8ea;

margin-top:8px;

}

.chart-legend span{

width:10px;

height:3px;

display:inline-block;

border-radius:20px;

margin-right:5px;

}

.chart-placeholder{

height:210px;

position:relative;

background:

linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);

background-size:100% 40px;

border:none;

}

.chart-line{

position:absolute;

left:20px;

right:20px;

bottom:40px;

height:120px;

background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpolyline fill='none' stroke='%234CAF50' stroke-width='4' points='0,90 40,40 80,45 120,20 160,55 200,45 240,10 280,30 320,0 360,40 400,15'/%3E%3C/svg%3E") no-repeat center;

background-size:100%;

}

.donut-wrapper{

display:flex;

justify-content:space-around;

align-items:center;

height:230px;

}

.fake-donut{

width:130px;

height:130px;

border-radius:50%;

background:
conic-gradient(

#42b96d 0 72%,

#f1b600 72% 80%,

#d9d9d9 80% 81%,

#ef5350 81% 100%

);

display:flex;

justify-content:center;

align-items:center;

}

.fake-donut::after{

content:"";

width:70px;

height:70px;

background:#182544;

border-radius:50%;

}

.donut-center{

position:absolute;

text-align:center;

color:white;

}

.donut-center strong{

display:block;

font-size:20px;

}

.donut-center small{

font-size:11px;

color:#b9c5de;

}

.donut-legend{

display:flex;

flex-direction:column;

gap:10px;

font-size:12px;

color:#d5dff0;

}

.donut-legend div{

display:flex;

align-items:center;

justify-content:space-between;

gap:10px;

}

.donut-legend span{

width:10px;

height:10px;

border-radius:50%;

display:inline-block;

margin-right:6px;

}

.green{background:#43C06B;}
.yellow{background:#F3B000;}
.red{background:#EF5350;}
.blue{background:#4A90FF;}
.sky{background:#49B4FF;}
.gray{background:#9AA4B2;}
.orange{background:#F59E0B;}

/* =========================================================
   OPERATIONAL CHART CARD
========================================================= */

.op-chart-card {
    width: 100%;
    height: 100%;

    background: #17284a;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;

    overflow: hidden;
}


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

.op-chart-header {
    min-height: 58px;

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

    gap: 20px;

    padding: 14px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


.op-chart-title {
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   LEGEND
========================================================= */

.chart-legend {
    display: flex;
    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}


.chart-legend-item {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #dbe7ff;

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;
}


.chart-legend-color {
    display: inline-block;

    width: 14px;
    height: 4px;

    border-radius: 10px;
}


.chart-legend-color.green {
    background: #43c875;
}


.chart-legend-color.yellow {
    background: #ffb800;
}


.chart-legend-color.red {
    background: #ff5b65;
}


/* =========================================================
   CHART BODY
========================================================= */

.op-chart-body {
    position: relative;

    width: 100%;

    padding: 14px 18px 18px;
}


.job-trend-chart-wrapper {
    position: relative;

    width: 100%;
    height: 260px;
}


#jobTrendChart {
    width: 100% !important;
    height: 100% !important;
}


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

@media (max-width: 1200px) {

    .job-trend-chart-wrapper {
        height: 240px;
    }

}


@media (max-width: 768px) {

    .op-chart-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }


    .chart-legend {
        gap: 14px;
    }


    .job-trend-chart-wrapper {
        height: 220px;
    }

}

/*
|--------------------------------------------------------------------------
| CHART CARD
|--------------------------------------------------------------------------
*/

.op-chart-card {
    width: 100%;
    background: #1b2d50;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| CHART HEADER
|--------------------------------------------------------------------------
*/

.op-chart-header {
    min-height: 72px;

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

    padding: 0 24px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/*
|--------------------------------------------------------------------------
| CHART TITLE
|--------------------------------------------------------------------------
*/

.op-chart-title {
    margin: 0;

    font-size: 18px;
    font-weight: 700;

    color: #ffffff;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| JOB TREND LEGEND
|--------------------------------------------------------------------------
*/

.job-trend-legend {
    display: flex;
    align-items: center;

    gap: 24px;

    margin-left: auto;
}


/*
|--------------------------------------------------------------------------
| LEGEND ITEM
|--------------------------------------------------------------------------
*/

.legend-item {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #dbe5f5;

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| LEGEND DOT
|--------------------------------------------------------------------------
*/

.legend-dot {
    display: inline-block;

    width: 14px;
    height: 4px;

    border-radius: 10px;

    flex-shrink: 0;
}


/*
|--------------------------------------------------------------------------
| LEGEND COLORS
|--------------------------------------------------------------------------
*/

.legend-dot.completed {
    background: #45c979;
}

.legend-dot.progress {
    background: #ffb800;
}


/*
|--------------------------------------------------------------------------
| CHART BODY
|--------------------------------------------------------------------------
*/

.op-chart-body {
    padding: 18px 22px 20px;
}


/*
|--------------------------------------------------------------------------
| CHART WRAPPER
|--------------------------------------------------------------------------
*/

.job-trend-chart-wrapper {
    position: relative;

    width: 100%;
    height: 320px;
}


/*
|--------------------------------------------------------------------------
| CANVAS
|--------------------------------------------------------------------------
*/

.job-trend-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .op-chart-header {
        min-height: auto;

        padding: 16px 18px;

        flex-direction: column;
        align-items: flex-start;

        gap: 12px;
    }

    .job-trend-legend {
        margin-left: 0;

        gap: 16px;

        flex-wrap: wrap;
    }

    .job-trend-chart-wrapper {
        height: 280px;
    }

}


/*
|--------------------------------------------------------------------------
| REVENUE COST LEGEND
|--------------------------------------------------------------------------
*/

.revenue-cost-legend {
    display: flex;
    align-items: center;

    gap: 24px;

    margin-left: auto;
}


/*
|--------------------------------------------------------------------------
| REVENUE LEGEND
|--------------------------------------------------------------------------
*/

.legend-dot.revenue {
    background: #4c91ff;
}


/*
|--------------------------------------------------------------------------
| COST LEGEND
|--------------------------------------------------------------------------
*/

.legend-dot.cost {
    background: #ff5d68;
}


/*
|--------------------------------------------------------------------------
| REVENUE COST CHART
|--------------------------------------------------------------------------
*/

.revenue-cost-chart-wrapper {
    position: relative;

    width: 100%;
    height: 320px;
}


/*
|--------------------------------------------------------------------------
| CANVAS
|--------------------------------------------------------------------------
*/

.revenue-cost-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .revenue-cost-legend {
        margin-left: 0;

        gap: 16px;

        flex-wrap: wrap;
    }

    .revenue-cost-chart-wrapper {
        height: 280px;
    }

}

/* =========================================================
   JOB STATUS
========================================================= */

.job-status-body {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 320px;

    padding: 24px;
}


/* =========================================================
   CONTENT
========================================================= */

.job-status-content {
    width: 100%;

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

    gap: 55px;
}


/* =========================================================
   DONUT
========================================================= */

.job-status-chart {
    position: relative;

    width: 190px;
    height: 190px;

    flex-shrink: 0;
}


.job-status-chart canvas {
    width: 100% !important;
    height: 100% !important;
}


/* =========================================================
   CENTER TEXT
========================================================= */

.job-status-center {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(
        -50%,
        -50%
    );

    display: flex;
    flex-direction: column;

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

    text-align: center;

    pointer-events: none;
}


.job-status-center strong {
    color: #ffffff;

    font-size: 25px;
    font-weight: 700;

    line-height: 1.1;

    white-space: nowrap;
}


.job-status-center span {
    margin-top: 5px;

    color: #9fb3d9;

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   LEGEND
========================================================= */

.job-status-legend {
    width: 250px;

    display: flex;
    flex-direction: column;

    gap: 22px;
}


.job-status-item {
    width: 100%;

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

    gap: 30px;
}


.job-status-name {
    display: flex;
    align-items: center;

    gap: 12px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 500;

    white-space: nowrap;
}


.job-status-item strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    text-align: right;

    white-space: nowrap;
}


/* =========================================================
   DOT
========================================================= */

.job-status-dot {
    display: inline-block;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    flex-shrink: 0;
}


.job-status-dot.completed {
    background: #43c875;
}


.job-status-dot.progress {
    background: #ffb800;
}


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

@media (max-width: 768px) {

    .job-status-content {
        flex-direction: column;

        gap: 30px;
    }


    .job-status-chart {
        width: 170px;
        height: 170px;
    }


    .job-status-legend {
        width: 100%;
        max-width: 280px;
    }

}