/*
================================================
ZAPREdu ADMIN DASHBOARD CSS
================================================
*/


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    font-family:'Poppins',sans-serif;

    background:#f5f7fb;

    color:#1e293b;

    min-height:100vh;

}



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


.admin-header{

    height:72px;

    width:100%;

    background:#ffffff;

    position:fixed;

    top:0;

    left:0;

    z-index:2000;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    border-bottom:1px solid #e5e7eb;

}





/*
================================================
MAIN PAGE LAYOUT
================================================
*/


.page-layout{

    display:flex;

    padding-top:72px;

    min-height:100vh;

}





/*
================================================
SIDEBAR
================================================
*/


.admin-sidebar{

    width:260px;

    height:calc(100vh - 72px);

    position:fixed;

    top:72px;

    left:0;

    background:#0f172a;

    overflow-y:auto;

    z-index:1500;

    transition:.3s;

}




.admin-sidebar::-webkit-scrollbar{

    width:5px;

}


.admin-sidebar::-webkit-scrollbar-thumb{

    background:#475569;

}







.admin-sidebar a{


    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 20px;

    color:#cbd5e1;

    text-decoration:none;

    font-size:14px;

    transition:.3s;


}



.admin-sidebar a:hover,
.admin-sidebar a.active{


    background:#2563eb;

    color:#ffffff;


}



.admin-sidebar i{

    width:20px;

}





/*
================================================
RIGHT CONTENT AREA
================================================
*/


.dashboard-main{


    margin-left:260px;


    width:calc(100% - 260px);


    min-height:calc(100vh - 72px);


    display:flex;


    flex-direction:column;


}





/*
================================================
TOPBAR
================================================
*/


.admin-topbar{


    height:65px;


    background:#ffffff;


    position:sticky;


    top:72px;


    z-index:1000;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:0 25px;


    border-bottom:1px solid #e5e7eb;


}







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


.content-wrapper{


    flex:1;


    padding:25px;


}



.container-fluid{

    width:100%;

}







/*
================================================
DASHBOARD TITLE
================================================
*/


.dashboard-title h2{


    font-size:26px;


    color:#1e293b;


}





/*
================================================
CARDS
================================================
*/


.dashboard-card{


    border:none;


    border-radius:15px;


    overflow:hidden;


    background:#ffffff;


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


    transition:.3s;


}



.dashboard-card:hover{


    transform:translateY(-5px);


}



.dashboard-card .card-body{


    position:relative;


    padding:25px;


}



.dashboard-card h2{


    font-size:32px;


    font-weight:700;


}



.dashboard-card p{


    color:#64748b;


}



.card-icon{


    position:absolute;


    right:25px;


    top:25px;


    font-size:35px;


    opacity:.15;


}




/*
CARD COLORS
*/


.pending-card{

    border-left:5px solid #f59e0b;

}


.approved-card{

    border-left:5px solid #16a34a;

}



.rejected-card{

    border-left:5px solid #dc2626;

}



.suspended-card{

    border-left:5px solid #64748b;

}







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


.quick-action{


    height:120px;


    border-radius:12px;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    color:white;


    text-decoration:none;


    font-size:15px;


    gap:10px;


}



.quick-action i{


    font-size:30px;


}



.quick-action.warning{

    background:#f59e0b;

}



.quick-action.success{

    background:#16a34a;

}



.quick-action.info{

    background:#0284c7;

}



.quick-action.danger{

    background:#dc2626;

}





/*
================================================
TABLE DESIGN
================================================
*/


.table{


    font-size:14px;


}



.table thead th{


    font-weight:600;


    color:#475569;


}



.badge{


    padding:7px 12px;


    border-radius:20px;


}








/*
================================================
ACTIVITY
================================================
*/


.activity-item{


    display:flex;


    gap:12px;


    align-items:center;


    padding:12px 0;


    border-bottom:1px solid #e5e7eb;


}



.activity-item:last-child{


    border:none;


}








/*
================================================
SUMMARY BOX
================================================
*/


.summary-number{


    font-size:55px;


    font-weight:700;


    color:#16a34a;


}








/*
================================================
INFO CARDS
================================================
*/


.dashboard-info-card{


    border:none;


    border-radius:15px;


    background:#ffffff;


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


}



.dashboard-info-card .card-body{


    display:flex;


    align-items:center;


    gap:20px;


    padding:25px;


}



.dashboard-info-card i{


    font-size:35px;


    color:#2563eb;


}








/*
================================================
MINI STAT
================================================
*/


.mini-stat{


    background:#ffffff;


    padding:25px;


    border-radius:15px;


    text-align:center;


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


}



.mini-stat i{


    font-size:35px;


    color:#2563eb;


    margin-bottom:15px;


}



.mini-stat h4{


    font-size:18px;


}



.mini-stat span{


    color:#64748b;


}








/* =========================================
FOOTER
========================================= */


.admin-footer{


    width:100%;


    background:#ffffff;


    border-top:1px solid #e5e7eb;


    padding:18px 25px;


    margin-top:auto;


    display:flex;


    justify-content:space-between;


    align-items:center;


    flex-shrink:0;


}




.footer-left,
.footer-right{


    color:#64748b;

    font-size:14px;


}




/* MOBILE */

@media(max-width:992px){


.sidebar{


    transform:translateX(-260px);


}


.dashboard-main{


    margin-left:0;

    width:100%;


}



}






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


@media(max-width:992px){



.admin-sidebar{


    transform:translateX(-260px);


}



.dashboard-main{


    margin-left:0;


    width:100%;


}


}




@media(max-width:768px){



.admin-header{


    padding:0 15px;


}




.admin-topbar{


    padding:0 15px;


}




.content-wrapper{


    padding:15px;


}




.admin-footer{


    flex-direction:column;


    gap:10px;


    text-align:center;


}



}