.devx-page-header{
    background:#fff;
    padding:25px 30px;
    border-radius:12px;
    margin-bottom:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.devx-page-header h1{
    margin:0;
    font-size:32px;
    font-weight:700;
    color:#1f2937;
}

.devx-page-header p{
    margin-top:8px;
    color:#6b7280;
    font-size:15px;
}

.devx-dashboard-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}

.devx-dashboard-card{

    background:#fff;

    border-radius:12px;

    padding:25px;

    text-align:center;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.devx-dashboard-card:hover{

    transform:translateY(-4px);

}

.present{

    border-top:5px solid #22c55e;

}

.absent{

    border-top:5px solid #ef4444;

}

.leave{

    border-top:5px solid #f59e0b;

}

.halfday{

    border-top:5px solid #8b5cf6;

}

.devx-card-value{

    font-size:42px;

    font-weight:700;

    margin-top:15px;

    color:#111827;

}

/*---------------------------------------------------
TABLE CARD
----------------------------------------------------*/

.devx-table-card{

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    margin-top:30px;

}

.devx-table-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 30px;

    border-bottom:1px solid #eee;

}

.devx-table-header h2{

    margin:0;

    font-size:28px;

}

.devx-table-header p{

    margin-top:6px;

    color:#6b7280;

}

.devx-table{

    width:100%;

    border-collapse:collapse;

}

.devx-table th{

    background:#f8fafc;

    padding:18px;

    text-align:left;

    font-size:14px;

    font-weight:600;

    color:#475569;

}

.devx-table td{

    padding:18px;

    border-top:1px solid #edf2f7;

}

.devx-table tbody tr{

    transition:.2s;

}

.devx-table tbody tr:hover{

    background:#f9fbfd;

}

.devx-badge{

    display:inline-block;

    padding:7px 16px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

}

.devx-success{

    background:#dcfce7;

    color:#15803d;

}

.devx-danger{

    background:#fee2e2;

    color:#b91c1c;

}

.devx-warning{

    background:#fef3c7;

    color:#b45309;

}

.devx-info{

    background:#ede9fe;

    color:#6d28d9;

}

.devx-action{

    display:inline-block;

    padding:7px 14px;

    border-radius:8px;

    text-decoration:none;

    font-size:13px;

    margin-right:8px;

}

.devx-action.edit{

    background:#e0f2fe;

    color:#0369a1;

}

.devx-action.delete{

    background:#fee2e2;

    color:#b91c1c;

}

.devx-user strong{

    font-size:15px;

}

.devx-user small{

    color:#6b7280;

}