/* ==========================
   APPROVE STUDENTS
========================== */

:root{

--bg:#f5f7fc;

--card:#ffffff;

--primary:#2a7fff;

--primary-dark:#175de6;

--text:#182230;

--muted:#6b7280;

--border:#e8edf5;

--danger:#ffeded;

--radius:24px;

--shadow:
0 20px 50px
rgba(0,0,0,.06);

}


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


body{

font-family:
Inter,
sans-serif;

background:
var(--bg);

color:
var(--text);

min-height:
100vh;

padding:
40px;

}


.approve{

display:flex;

justify-content:center;

}


.approve__container{

width:100%;

max-width:
1100px;

}


.approve__back{

display:inline-flex;

align-items:center;

gap:8px;

margin-bottom:
24px;

color:
var(--primary);

text-decoration:none;

font-weight:600;

}


.approve-card{

background:
var(--card);

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

border-radius:
var(--radius);

padding:
40px;

box-shadow:
var(--shadow);

}


.approve-card h1{

font-size:
2rem;

font-family:
"Playfair Display";

margin-bottom:
10px;

}


.approve-card p{

color:
var(--muted);

margin-bottom:
32px;

}


.toolbar{

display:flex;

justify-content:flex-end;

margin-bottom:
24px;

}


.toolbar select{

width:
260px;

padding:
14px 18px;

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

border-radius:
14px;

font-size:
15px;

background:
white;

}


.student-list{

display:flex;

flex-direction:column;

gap:18px;

}


.student-row{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding:
22px;

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

border-radius:
18px;

background:
linear-gradient(
180deg,
#ffffff,
#fafcff
);

transition:
.25s;

}


.student-row:hover{

transform:
translateY(-2px);

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

}


.student-name{

font-size:
1.1rem;

font-weight:
700;

margin-bottom:
6px;

}


.student-meta{

color:
var(--primary);

font-weight:
600;

margin-bottom:
6px;

}


.student-phone{

color:
var(--muted);

font-size:
14px;

}


.actions{

display:flex;

gap:12px;

flex-wrap:wrap;

}


.btn{

padding:
12px 18px;

border-radius:
14px;

cursor:pointer;

font-weight:
600;

border:none;

transition:
.2s;

}


.btn--primary{

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:white;

}


.btn--primary:hover{

transform:
translateY(-2px);

}


.btn--ghost{

background:
white;

border:
1px solid #ffd4d4;

color:
#d23a3a;

}


.btn--ghost:hover{

background:
var(--danger);

}


.empty{

padding:
60px;

text-align:center;

color:
var(--muted);

border:
2px dashed
var(--border);

border-radius:
18px;

}


@media(
max-width:768px
){

body{

padding:20px;

}

.approve-card{

padding:26px;

}

.student-row{

flex-direction:column;

align-items:flex-start;

}

.actions{

width:100%;

}

.actions button{

flex:1;

}

.toolbar{

justify-content:stretch;

}

.toolbar select{

width:100%;

}

}