.

admin-page {
display: flex;
background-color: #333;
color: white;
padding: 20px;
min-height: 100vh;
width: 100%;
position: relative;
}

.toggle-sidebar-btn {
position: absolute;
top: 20px;
left: 20px;
background-color: transparent;
border: 2px solid white;
color: white;
padding: 10px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
transition: box-shadow 0.3s ease;
}

.toggle-sidebar-btn:hover {
box-shadow: 0 0 20px rgba(255, 255, 255, 1);
}

.sidebar {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-right: 20px;
flex-shrink: 0;
padding-left: 20px;
width: 250px;
transition: transform 0.3s ease;
}

.sidebar.hidden {
transform: translateX(-260px);
}

.tabs {
display: flex;
flex-direction: column;
margin-top: 50px;
}

.tab {
background-color: transparent;
border: none;
 color: white;
padding: 10px 20px;
cursor: pointer;
margin: 5px 0;
font-size: 18px;
text-align: left;
width: 100%;
transition: color 0.3s ease;
position: relative;
}

.tab.active {
color: #9370DB;
}

.tab.active::after {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: #9370DB;
position: absolute;
bottom: 0;
left: 0;
}

.tab:hover {
color: #9370DB;
}

.main-content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
width: calc(100% - 270px);
transition: width 0.3s ease, margin-left 0.3s ease;
}

.sidebar.hidden ~ .main-content {
width: 100%;
margin-left: -250px;
}

.players-container, .reports-container {
display: flex;
flex-direction: column;
align-items: center;
max-height: 60vh;
overflow-y: auto;
flex-grow: 1;
width: 100%;
}

.player-card, .report-card {
background-color: white;
color: black;
padding: 20px;
margin: 10px 0;
 border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 80%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}

.player-card:hover, .report-card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.no-users-message, .no-reports-message {
color: white;
font-size: 18px;
text-align: center;
}

.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
width: 81%;
height: 40px;
padding: 0 10px;
}

.pagination .arrowButtonTetris {
font-size: 25px;
margin: 0 5px;
cursor: pointer;
color: white;
transition: color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

.pagination .arrowButtonTetris:hover {
color: #6a4db2;
}

.page-counter {
color: white;
font-size: 16px;
margin: 0 10px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.main-title {
font-size: 36px;
font-weight: bold;
color: #deeaec;
font-family: 'Arial', sans-serif;
text-shadow: 2px 2px 4px #000;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
padding-bottom: 10px;
}

.margin-top {
margin-top: 30px;
}

.add-game-form {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #333;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-top: 20px;
width: 80%;
}

.add-game-form div {
margin-bottom: 15px;
width: 100%;
}

.add-game-form label {
display: block;
margin-bottom: 5px;
color: #ffffff;
font-weight: bold;
}

.add-game-form input,
.add-game-form textarea {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #444;
color: #fff;
box-sizing: border-box;
}

.add-game-form input:focus,
.add-game-form textarea:focus {
outline: none;
box-shadow: 0 0 5px #ffffff;
}

.add-game-form button {
background: linear-gradient(45deg, #6a4db2, #9370DB);
 border: none;
color: white;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.add-game-form button:hover {
background: linear-gradient(45deg, #5a3db2, #8370DB);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.error-messageee {
color: #ff4d4d;
font-weight: bold;
text-align: center;
margin-top: 10px;
font-size: 14px;
}

.success-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.success-modal-content {
background-color: #333;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
color: #fff;
}

.success-modal-content p {
margin-bottom: 20px;
font-size: 18px;
}

.success-modal-content button {
background-color: #9370DB;
border: none;
color: white;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.success-modal-content button:hover {
background-color: #6a4db2;
}

@media (max-width: 768px) {

.main-content {
width: 100%;
margin-left: 0;
}

.sidebar,
.toggle-sidebar-btn {
display: none;
}

.player-card, .report-card {
width: 100%;
padding: 10px;
flex-direction: column;
align-items: flex-start;
}

.ban-button, .unban-button {
width: 100%;
margin-top: 10px;
align-self: flex-start;
}

.reports-container {
display: flex;
flex-direction: column;
align-items: center;
max-height: 60vh;
overflow-y: auto;
flex-grow: 1;
width: 100%;
}

.report-card {
background-color: white;
color: black;
padding: 20px;
margin: 10px 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 80%;
box-sizing: border-box;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}

.report-card:hover {
 transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.report-top {
display: flex;
justify-content: space-between;
}

.report-bottom {
margin-top: 10px;
display: flex;
flex-direction: column;
}

.no-reports-message {
color: white;
font-size: 18px;
text-align: center;
}

@media (max-width:790px) {
.report-top {
flex-direction: column;
}
}
}