/* ==========================================
   TutorNXT Admin Dashboard
========================================== */

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

body{
    font-family:"Poppins",sans-serif;
    background:#f1f5f9;
}

/* ==========================================
   Cards
========================================== */

.bg-white{
    transition:.3s;
}

.bg-white:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

/* ==========================================
   Search Box
========================================== */

input,
select{

    transition:.3s;

}

input:focus,
select:focus{

    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/* ==========================================
   Buttons
========================================== */

button{

    transition:.3s;
    cursor:pointer;

}

button:hover{

    transform:translateY(-2px);

}

button:active{

    transform:scale(.98);

}

/* ==========================================
   Table
========================================== */

table{

    border-collapse:collapse;

}

thead{

    position:sticky;
    top:0;

}

tbody tr{

    transition:.25s;

}

tbody tr:hover{

    background:#f8fafc;

}

th{

    font-size:14px;
    color:#475569;
    font-weight:600;

}

td{

    font-size:15px;

}

/* ==========================================
   Teacher Photo
========================================== */

.teacher-photo{

    width:55px;
    height:55px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #e2e8f0;

}

/* ==========================================
   Status Badge
========================================== */

.badge{

    padding:6px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;

}

.pending{

    background:#fef9c3;
    color:#ca8a04;

}

.approved{

    background:#dcfce7;
    color:#15803d;

}

.rejected{

    background:#fee2e2;
    color:#dc2626;

}

/* ==========================================
   Action Buttons
========================================== */

.btn{

    padding:8px 14px;
    border-radius:8px;
    color:#fff;
    font-size:14px;
    margin-right:5px;

}

.btn-view{

    background:#2563eb;

}

.btn-approve{

    background:#16a34a;

}

.btn-reject{

    background:#dc2626;

}

.btn-delete{

    background:#334155;

}

/* ==========================================
   Responsive
========================================== */

@media(max-width:768px){

    h1{

        font-size:24px;

    }

    table{

        min-width:900px;

    }

}



.sidebar-item{

    transition:.25s;

}

#sidebar.w-24 .sidebar-item{

    justify-content:center;

}

#sidebar.w-24 .sidebar-item i{

    margin:0;

}

#sidebar.w-24 .sidebar-item span{

    display:none;

}


.sidebar-item.active{
    background:#2563eb;
    color:#fff;
}

.sidebar-item.active i{
    color:#fff;
}




/* ==========================================
Demo Dashboard
========================================== */

.demo-stat-card{

    background:#fff;

    border-radius:18px;

    padding:24px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

    transition:.3s;

}

.demo-stat-card:hover{

    transform:translateY(-4px);

}

.demo-stat-card h2{

    font-size:34px;

    font-weight:700;

    color:#2563eb;

}

.demo-stat-card span{

    color:#64748b;

}



.input{

    width:100%;

    border:1px solid #d1d5db;

    border-radius:12px;

    padding:12px 16px;

    outline:none;

    transition:.2s;

}

.input:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}




/* ==========================================================
   SIDEBAR v2.0
========================================================== */

:root{

    --sidebar-width:280px;

    --sidebar-collapsed:88px;

    --primary:#2563eb;

}

#sidebar{

    width:var(--sidebar-width);

    transition:all .30s ease;

    overflow:hidden;

    top:16px;

    left:16px;

    bottom:16px;

    height:auto;

    border-radius:24px;

}

#sidebar.collapsed{

    width:var(--sidebar-collapsed);

}

/* ===============================
   Page Animation
================================ */

#pageWrapper{

    margin-left:calc(var(--sidebar-width) + 32px);

    transition:margin-left .30s ease;

}

#pageWrapper.expanded{

    margin-left:calc(var(--sidebar-collapsed) + 32px);

}

/* ===============================
   Navigation
================================ */

.sidebar-item{

    width:100%;

    display:flex;

    align-items:center;

    gap:16px;

    padding:14px 18px;

    border-radius:16px;

    color:#cbd5e1;

    font-weight:500;

    transition:.25s;

}

.sidebar-item:hover{

    background:#1e293b;

    color:white;

}

.sidebar-item i{

    width:24px;

    font-size:18px;

    text-align:center;

    flex-shrink:0;

}

/* ===============================
   Active Item
================================ */

.sidebar-item.active{

    background:#2563eb;

    color:white;

    box-shadow:

        0 8px 20px rgba(37,99,235,.35);

}

/* ===============================
   Collapse
================================ */

#sidebar.collapsed .menu-text{

    opacity:0;

    display:none;

}

#sidebar.collapsed #sidebarHeader{

    justify-content:center;

    padding-left:0;

    padding-right:0;

}

#sidebar.collapsed #sidebarFooter{

    display:flex;

    justify-content:center;

}

#sidebar.collapsed .sidebar-item{

    justify-content:center;

    padding:14px;

}

#sidebar.collapsed .sidebar-item i{

    margin:0;

}

#sidebar.collapsed #sidebarTitle{

    display:none;

}

/* ===============================
   Logo
================================ */

#sidebarLogo{

    transition:.25s;

}

#sidebar.collapsed #sidebarLogo{

    transform:scale(.92);

}

/* ===============================
   Scrollbar
================================ */

#sidebar nav::-webkit-scrollbar{

    width:4px;

}

#sidebar nav::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:20px;

}

/* ===============================
   Mobile
================================ */

@media(max-width:1024px){

    #sidebar{

        transform:translateX(-100%);

    }

    #sidebar.mobile-open{

        transform:translateX(0);

    }

    #pageWrapper{

        margin-left:0;

    }

}