*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#f4f7fb;

color:#1f2937;

}

.container{

width:90%;

max-width:1400px;

margin:25px auto;

padding:20px;

}

/* ================= TOP BAR ================= */

.topbar{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-left:140px;

margin-bottom:25px;

gap:20px;

}

.topbar h1{

font-size:32px;

font-weight:700;

color:#111827;

}

.topbar p{

margin-top:6px;

color:#6b7280;

font-size:15px;

}

.top-actions{

display:flex;

gap:15px;

align-items:center;

flex-wrap:wrap;

}

#searchInput{

width:320px;

padding:14px 18px;

border-radius:14px;

border:1px solid #d9dce4;

background:white;

font-size:15px;

outline:none;

transition:.3s;

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

}

#searchInput:focus{

border-color:#b8860b;

box-shadow:0 0 0 4px rgba(184,134,11,.15);

}

#refreshBtn{

padding:14px 22px;

border:none;

border-radius:14px;

background:#111827;

color:white;

font-size:15px;

cursor:pointer;

transition:.3s;

font-weight:600;

}

#refreshBtn:hover{

transform:translateY(-3px);

background:#b8860b;

}

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

.summary{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-bottom:35px;

}

.summary-card{

background:white;

border-radius:22px;

padding:20px;

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

border:1px solid #ececec;

transition:.35s;

text-align:center;

}

.summary-card:hover{

transform:translateY(-5px);

border-color:#b8860b;

}

.summary-card h2{

font-size:42px;

color:#b8860b;

margin-bottom:10px;

}

.summary-card p{

color:#6b7280;

font-size:15px;

}

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

.table-wrapper{

background:white;

border-radius:22px;

overflow:hidden;

box-shadow:0 12px 35px rgba(0,0,0,.06);

border:1px solid #ececec;

overflow-x:auto;

}

table{

width:100%;

border-collapse:collapse;

min-width:1150px;

}

thead{

background:#111827;

color:white;

position:sticky;

top:0;

}

thead th{

padding:14px;

font-size:14px;

font-weight:600;

}

tbody td{

padding:14px;

border-bottom:1px solid #efefef;

font-size:14px;

text-align:center;

}

tbody tr{

transition:.25s;

}

tbody tr:hover{

background:#faf7ef;

}

.avatar{

width:48px;

height:48px;

border-radius:50%;

background:#b8860b;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:700;

font-size:18px;

margin:auto;

}

/* ================= BUTTONS ================= */

.viewBtn{

padding:10px 16px;

border:none;

border-radius:10px;

background:#2563eb;

color:white;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.viewBtn:hover{

background:#1d4ed8;

transform:translateY(-2px);

}

/* ================= MODAL ================= */

.modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.55);

justify-content:center;

align-items:center;

padding:20px;

z-index:999;

}

.modal-content{

background:white;

width:100%;

max-width:650px;

border-radius:25px;

padding:35px;

position:relative;

animation:popup .3s ease;

}

@keyframes popup{

from{

transform:scale(.9);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

#closeModal{

position:absolute;

right:22px;

top:18px;

font-size:30px;

cursor:pointer;

font-weight:bold;

}

#userDetails{

margin-top:25px;

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

.detail-card{

background:#f9fafb;

padding:18px;

border-radius:16px;

border:1px solid #ececec;

}

.detail-card h4{

font-size:13px;

color:#6b7280;

margin-bottom:8px;

}

.detail-card p{

font-size:16px;

font-weight:600;

color:#111827;

}

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

@media(max-width:900px){

.container{

padding:18px;

}

.topbar{

flex-direction:column;

align-items:flex-start;

}

#searchInput{

width:100%;

}

.top-actions{

width:100%;

}

#refreshBtn{

width:100%;

}

#userDetails{

grid-template-columns:1fr;

}

.summary{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

.topbar h1{

font-size:25px;

}

.summary-card h2{

font-size:32px;

}

.modal-content{

padding:25px;

}

}


.top-back{

position:absolute;

top:25px;

left:25px;

z-index:10;

}

.back-btn{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

text-decoration:none;

padding:12px 20px;

font-size:16px;

background:#d4af37;

color:#111827;

font-weight:600;

border-radius:50px;

box-shadow:0 8px 20px rgba(212,175,55,.35);

transition:.3s;

}

.back-btn:hover{

background:#f4c842;

transform:translateY(-3px);

box-shadow:0 12px 25px rgba(212,175,55,.45);

}

@media(max-width:768px){

.top-back{

top:15px;

left:15px;

}

.back-btn{

padding:10px 18px;

font-size:14px;

}

}


/* EXPORT BUTTON */

.export-section{

margin:25px 0;

display:flex;

justify-content:center;

}

#exportExcel{

padding:15px 35px;

border:none;

border-radius:50px;

background:#d4af37;

color:#111;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

box-shadow:0 10px 25px rgba(212,175,55,.35);

}

#exportExcel:hover{

transform:translateY(-3px);

background:#f3c74b;

box-shadow:0 15px 30px rgba(212,175,55,.45);

}