/*body{*/
/*font-family:Poppins, sans-serif;*/
/*#background:#f2f5f9;*/
/*background:#ffffff;*/
/*margin:0;*/
/*padding:40px;*/
/*}*/

/* CARD */

.widget{
max-width:1100px;
margin:auto;
background:white;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
overflow:hidden;
}

/* HEADER */

.header{
background:linear-gradient(135deg,#e69138,#0d6efd);
color:white;
padding:20px 30px;
}

.header h2{
margin:0;
font-weight:500;
}

/* SEARCH AREA */

.search{
display:flex;
flex-wrap:wrap;
gap:15px;
padding:25px 30px;
border-bottom:1px solid #eee;
align-items:end;
}

.search label{
font-size:12px;
color:#777;
margin-bottom:4px;
}

.search div{
display:flex;
flex-direction:column;
}

.search select,
.search input{
padding:8px 10px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
min-width:140px;
}

.search button{
background:#0d6efd;
color:white;
border:none;
padding:10px 20px;
border-radius:6px;
cursor:pointer;
font-weight:500;
transition:0.3s;
}

.search button:hover{
background:#e69138;
}

/* TABLE */

table{
width:100%;
border-collapse:collapse;
}

thead{
background:#f7f9fc;
}

th{
text-align:left;
padding:12px 16px;
font-size:13px;
color:#555;
font-weight:500;
border-bottom:1px solid #eee;
}

td{
padding:14px 16px;
font-size:14px;
border-bottom:1px solid #f0f0f0;
}

tbody tr:hover{
background:#f6f9ff;
}

/* BADGE */

.badge{
background:#e8f0ff;
color:#0d6efd;
padding:4px 8px;
border-radius:4px;
font-size:12px;
}

/* LOADING */

.loading{
text-align:center;
padding:30px;
color:#888;
}

/* RESPONSIVE */

@media(max-width:700px){

.search{
flex-direction:column;
align-items:stretch;
}

.search div{
width:100%;
}

.search button{
width:100%;
}

}