/* ===============================
   Light Theme Base
================================ */

body{
background:#f4f6f8;
color:#222;
font-family:Arial, Helvetica, sans-serif;
}


/* ===============================
   Layout Containers
================================ */

.players-container{
max-width:1050px;
margin:auto;
padding:20px;
}


/* ===============================
   Search + Filters
================================ */

.search-box{
margin-bottom:15px;
}

.search-box input{
padding:8px;
width:320px;
border:1px solid #ccc;
border-radius:4px;
}

.position-filters{
margin-bottom:15px;
}

.position-filters button{
background:#e5e7ea;
color:#333;
border:1px solid #ccc;
padding:6px 12px;
margin-right:6px;
cursor:pointer;
border-radius:4px;
}

.position-filters button.active{
background:#2d7ef7;
color:#fff;
border-color:#2d7ef7;
}


/* ===============================
   Players Table
================================ */

.players-container table{
width:100%;
border-collapse:collapse;
background:#fff;
color:#222;
border:1px solid #ddd;
}

.players-container th,
.players-container td{
padding:10px;
border-bottom:1px solid #e3e3e3;
}

.players-container th{
background:#f1f3f6;
font-weight:bold;
cursor:pointer;
}


/* ===============================
   Column Layout
================================ */

.players-container th:nth-child(1),
.players-container td:nth-child(1){
text-align:center;
width:55px;
}

.players-container th:nth-child(3),
.players-container td:nth-child(3){
text-align:center;
font-weight:bold;
width:70px;
white-space:nowrap;
}

.players-container th:nth-child(4),
.players-container td:nth-child(4){
text-align:center;
}


/* ===============================
   Player Elements
================================ */

.player-img{
width:36px;
height:36px;
border-radius:50%;
}

.team-logo{
width:24px;
vertical-align:middle;
margin-right:6px;
}

.player-name{
cursor:pointer;
color:#2d7ef7;
}

.expand-icon{
display:inline-block;
width:16px;
margin-right:6px;
color:#2d7ef7;
font-weight:bold;
}

.stats-row{
display:none;
background:#f7f8fa;
}


/* ===============================
   Hover Effect
================================ */

.players-container tbody tr:hover{
background:#f2f5fa;
}


/* ===============================
   Pagination
================================ */

.pagination{
margin:15px 0;
}

.pagination a{
background:#e5e7ea;
color:#333;
padding:6px 10px;
margin-right:4px;
text-decoration:none;
border-radius:4px;
border:1px solid #ccc;
}

.pagination a.active{
background:#2d7ef7;
color:#fff;
border-color:#2d7ef7;
}
.search-box{
position:relative;
margin-bottom:15px;
}

.search-box input{
padding:8px 30px 8px 8px;
width:320px;
}

#clearSearch{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
font-size:16px;
color:#888;
display:none;
}

#clearSearch:hover{
color:#fff;
}