/*==================================================
 ATP Education Dashboard
 Phase 1 - Part 2
==================================================*/

/*===============
Variables
================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#ef4444;

    --bg:#f4f7fc;
    --white:#ffffff;

    --text:#1f2937;
    --text-light:#6b7280;

    --border:#e5e7eb;

    --radius:16px;

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

    --transition:.3s ease;

    --sidebar-width:280px;

}


/*===============
Reset
================*/

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

html{
scroll-behavior:smooth;
}

body{

font-family:
"Segoe UI",
Arial,
sans-serif;

background:var(--bg);

color:var(--text);

font-size:15px;

line-height:1.6;

overflow-x:hidden;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

img{

display:block;
max-width:100%;

}


/*===============
Main Grid
================*/

.dashboard{
width:100%;
display:grid;
min-height:100vh;
}


/*==================
Sidebar
===================*/

.sidebar{

position:fixed;

top:0;
left:0;

width:var(--sidebar-width);

height:100vh;

background:#fff;

border-right:
1px solid var(--border);

display:flex;

flex-direction:column;

z-index:999;

overflow-y:auto;

}


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

.sidebar-logo{
width:90%;
margin:auto;
padding:28px 25px;

border-bottom:
1px solid var(--border);

}
.logo-cover{width:180px;height:120px;display:flex;justify-content:center;align-items:center;padding:15px 20px;border-bottom:1px solid var(--border);background:var(--white)}.logo-cover img{max-width:180px;width:auto;height:auto;object-fit:contain;display:block}
.sidebar-logo h2{

font-size:24px;
margin-top:30px;
color:var(--primary);

font-weight:700;

}

.sidebar-logo span{

display:block;

margin-top:5px;

font-size:13px;

color:#777;

}


/*==================
Student Card
===================*/

.student-box{

padding:22px;

display:flex;

align-items:center;

gap:15px;

border-bottom:
1px solid var(--border);

}

.student-avatar img{

width:62px;

height:62px;

border-radius:50%;

object-fit:cover;

}

.student-details h3{

font-size:17px;

margin-bottom:2px;

}

.student-details p{

font-size:13px;

color:#777;

margin-bottom:6px;

}

.online-status{

display:inline-flex;

align-items:center;

gap:7px;

font-size:12px;

color:var(--success);

font-weight:600;

}

.online-status i{

width:8px;
height:8px;

border-radius:50%;

background:var(--success);

display:block;

}


/*==================
Menu
===================*/

.sidebar-menu{

padding:18px;

flex:1;

}

.sidebar-menu li{

margin-bottom:8px;

}

.sidebar-menu a{

display:flex;

align-items:center;

gap:14px;

padding:13px 16px;

border-radius:12px;

transition:var(--transition);

font-weight:500;

}

.sidebar-menu a:hover{

background:#eef4ff;

color:var(--primary);

transform:translateX(5px);

}

.sidebar-menu li.active a{

background:var(--primary);

color:#fff;

}

.sidebar-menu .icon{

width:22px;

height:22px;

border-radius:6px;

background:#dbeafe;

flex-shrink:0;

}

.sidebar-menu li.active .icon{

background:rgba(255,255,255,.25);

}

/*==================
side bar Footer
===================*/

.sidebar-footer{

padding:18px;

border-top:
1px solid var(--border);

display:flex;

flex-direction:column;

gap:10px;

}

.sidebar-footer a{

padding:12px 15px;

border-radius:10px;

transition:.3s;

}

.sidebar-footer a:hover{

background:#f3f4f6;

}