.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:25px;
}

.dashboard-stat{
    min-height:145px;
    padding:24px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 2px 7px rgba(15,23,42,.03);
    display:flex;
    align-items:center;
    gap:22px;
}

.dashboard-stat-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:33px;
}

.dashboard-stat-icon.green{color:#38b957}
.dashboard-stat-icon.blue{color:#1877ee}
.dashboard-stat-icon.yellow{color:#e9b900}
.dashboard-stat-icon.purple{color:#6a38c9}

.dashboard-stat-number{
    font-size:30px;
    font-weight:700;
    line-height:1;
    margin-bottom:9px;
}

.dashboard-stat-label{
    font-size:16px;
    font-weight:600;
    line-height:1.45;
}

.dashboard-panel{
    margin-top:25px;
}

.dashboard-panel-head{
    min-height:73px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--border);
}

.table-scroll{overflow-x:auto}

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

.dashboard-panel th,
.dashboard-panel td{
    padding:14px 17px;
    border-bottom:1px solid #e8ebef;
    text-align:left;
    font-size:14px;
    white-space:nowrap;
}

.dashboard-panel th{
    background:#fafbfc;
    color:#233148;
}

.status-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:18px;
    font-size:13px;
    font-weight:600;
}

.status-badge.present{
    color:#149346;
    background:#e9f8ee;
}

.status-badge.late{
    color:#a97100;
    background:#fff5d7;
}

.dashboard-bottom{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:25px;
    margin-top:25px;
}

.dashboard-chart,
.dashboard-info{
    min-height:290px;
    padding:22px;
}

.chart-content{
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
}

.donut-chart{
    --present:100;
    --late:0;
    width:175px;
    height:175px;
    border-radius:50%;
    background:
        conic-gradient(
            #35bd58 0 calc(var(--present) * 1%),
            #e9b93c calc(var(--present) * 1%) calc((var(--present) + var(--late)) * 1%),
            #d3d8df calc((var(--present) + var(--late)) * 1%) 100%
        );
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.donut-chart::before{
    content:"";
    width:112px;
    height:112px;
    border-radius:50%;
    background:#fff;
    position:absolute;
}

.donut-center{
    position:relative;
    z-index:2;
    text-align:center;
}

.donut-center strong{
    display:block;
    font-size:28px;
}

.donut-center span{
    display:block;
    margin-top:5px;
    color:#667085;
    font-size:12px;
}

.chart-legend{
    min-width:180px;
}

.chart-legend > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin:16px 0;
}

.legend-dot{
    width:13px;
    height:13px;
    display:inline-block;
    border-radius:50%;
    margin-right:8px;
}

.legend-dot.green{background:#35bd58}
.legend-dot.yellow{background:#e9b93c}
.legend-dot.gray{background:#cdd3da}

.info-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:16px 0;
    border-bottom:1px solid #edf0f3;
}

.info-row:last-child{border-bottom:0}

@media(max-width:1100px){
    .dashboard-stats{grid-template-columns:repeat(2,1fr)}
    .dashboard-bottom{grid-template-columns:1fr}
}

@media(max-width:600px){
    .dashboard-stats{grid-template-columns:1fr}
    .dashboard-panel-head{padding:0 14px}
    .chart-content{flex-direction:column;gap:10px}
}

/* =========================================================
   WHATSAPP STATUS
========================================================= */

.whatsapp-status{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 11px;
    border-radius:18px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

.whatsapp-status.sent{
    color:#149346;
    background:#e9f8ee;
}

.whatsapp-status.pending{
    color:#a97100;
    background:#fff5d7;
}