/* ==========================
   DASHBOARD PAGE
========================== */

.dashboard-container{
    max-width:1400px;
    margin:auto;
    padding:40px 6%;
}

/* ==========================
   WELCOME SECTION
========================== */

.welcome-section{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:35px;

    margin-bottom:30px;
}

.welcome-section h1{
    font-size:2.3rem;
    margin-bottom:10px;
}

.welcome-section p{
    color:var(--muted);
}

/* ==========================
   READINESS CIRCLE
========================== */

.readiness-circle{

    width:150px;
    height:150px;

    border-radius:50%;

    background:
    conic-gradient(
        #7c3aed 0deg,
        #06b6d4 280deg,
        rgba(255,255,255,.08) 280deg
    );

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

    position:relative;
}

.readiness-circle::before{

    content:"";

    position:absolute;

    width:120px;
    height:120px;

    background:#09090f;

    border-radius:50%;
}

.readiness-circle span,
.readiness-circle small{
    position:relative;
    z-index:2;
}

.readiness-circle span{
    font-size:1.8rem;
    font-weight:700;
}

.readiness-circle small{
    color:var(--muted);
}

/* ==========================
   SCORE GRID
========================== */

.score-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;
}

.score-card{

    padding:30px;

    text-align:center;

    transition:.4s;
}

.score-card:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(124,58,237,.5);
}

.score-card h3{

    color:var(--muted);

    margin-bottom:15px;
}

.score-card h2{

    font-size:2.2rem;
}

/* ==========================
   CHART SECTION
========================== */

.chart-section{

    padding:35px;

    margin-bottom:30px;
}

.chart-section h2{

    margin-bottom:25px;
}

.chart-section canvas{

    width:100% !important;
    height:400px !important;
}

/* ==========================
   PREDICTIONS
========================== */

.prediction-section{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;
}

.prediction-card{

    padding:30px;

    transition:.4s;
}

.prediction-card:hover{

    transform:
    translateY(-8px);
}

.prediction-card h3{

    margin-bottom:15px;

    color:#06b6d4;
}

.prediction-card p{

    line-height:1.8;

    color:var(--muted);
}

/* ==========================
   QUICK ACTIONS
========================== */

.action-grid{

    display:grid;
    display:flex;

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

    gap:20px;
}

.action-card{

    text-decoration:none;

    color:white;

    padding:30px;

    text-align:center;

    font-size:1.1rem;

    font-weight:600;

    transition:.4s;
}

.action-card:hover{

    transform:
    translateY(-8px)
    scale(1.03);

    border-color:
    rgba(6,182,212,.5);
}

/* ==========================
   GLOW EFFECT
========================== */

.score-card,
.prediction-card,
.action-card{

    position:relative;
    overflow:hidden;
}

.score-card::before,
.prediction-card::before,
.action-card::before{

    content:"";

    position:absolute;

    width:200px;
    height:200px;

    background:
    radial-gradient(
        rgba(124,58,237,.15),
        transparent 70%
    );

    top:-100px;
    right:-100px;

    pointer-events:none;
}

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

@media(max-width:900px){

    .welcome-section{

        flex-direction:column;

        gap:25px;

        text-align:center;
    }

    .readiness-circle{

        width:130px;
        height:130px;
    }

    .readiness-circle::before{

        width:100px;
        height:100px;
    }
}

@media(max-width:600px){

    .dashboard-container{

        padding:20px;
    }

    .welcome-section h1{

        font-size:1.8rem;
    }

    .chart-section canvas{

        height:300px !important;
    }
}