/* Page headings */
.main h1{
font-size:22px;
margin-bottom:4px;
text-align:center;
}

.main p{
font-size:14px;
text-align:center;
margin-bottom:15px;
color:#555;
}


/* top section */
.table-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
flex-wrap:wrap;
gap:10px;
}


/* record text */
.record-info{
font-size:12px;
color:#666;
}


/* search box */
.search-box{
display:flex;
align-items:center;
gap:5px;
background:#fff;
border:1px solid #ccc;
padding:4px;
border-radius:6px;
}

.search-box input{
border:none;
outline:none;
font-size:13px;
padding:4px 6px;
width:180px;
}

.search-box button{
background:#070707;
border:none;
color:#fff;
padding:5px 10px;
font-size:12px;
border-radius:4px;
cursor:pointer;
}

.search-box button:hover{
background:#000000;
}


/* table container */
.table-container{
width:100%;
overflow-x:auto;
background:#fff;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}


/* table */
.patient-table{
width:100%;
border-collapse:collapse;
font-size:13px;
min-width:1000px;
}


.patient-table th{
background:#f4f6f9;
padding:7px 8px;
font-size:12px;
text-align:left;
border-bottom:1px solid #ddd;
white-space:nowrap;
}

.patient-table td{
padding:6px 8px;
border-bottom:1px solid #eee;
white-space:nowrap;
}


.patient-table tbody tr:nth-child(even){
background:#fafafa;
}

.patient-table tbody tr:hover{
background:#f1f5f9;
}


/* pagination */
.pagination{
margin-top:10px;
display:flex;
justify-content:center;
gap:5px;
flex-wrap:wrap;
}

.pagination button{
border:1px solid #ccc;
background:#fff;
padding:4px 8px;
font-size:12px;
cursor:pointer;
border-radius:4px;
}

.pagination button:hover{
background:#000000;
color:#fff;
border-color:#4CAF50;
}

.pagination button.active{
background:#000000;
color:#fff;
border-color:#4CAF50;
}


/* responsive */
@media(max-width:800px){

.search-box input{
width:130px;
}

.patient-table th,
.patient-table td{
font-size:11px;
padding:4px 6px;
}

}/* Card number link */
.card-link{
color:#080808;
font-weight:600;
text-decoration:none;
cursor:pointer;
}

.card-link:hover{
text-decoration:underline;
color:#2e3ae2;
}