/* Table Styles */
.coach-table {
    width: 95%; /* Adjust table width */
    max-width: 1400px; /* Maximum width for table */
    margin: 20px auto; /* Center the table horizontally */
    border-collapse: collapse; /* Remove gaps between cells */
    table-layout: fixed; /* Fix column widths */
}

.coach-table thead th {
    background-color: #00A9E0; /* Header background color */
    color: white; /* White text */
    padding: 12px; /* Padding inside header cells */
    text-align: center; /* Align header text to center */
    font-weight: bold; /* Bold header text */
}

.coach-table tbody td {
    padding: 12px; /* Padding inside table cells */
    border: 1px solid #ddd; /* Gray border */
    text-align: center; /* Align content to center */
    font-size: 14px; /* Font size for table content */
}

/* Styled Dropdown */
.styled-dropdown {
    width: 100%; /* Full width dropdown */
    padding: 10px; /* Inner padding */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    background: #f9f9f9; /* Light background */
    font-size: 14px; /* Font size */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300A9E0' class='bi bi-chevron-down'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

.styled-dropdown:focus {
    border-color: #00A9E0; /* Blue border on focus */
    outline: none;
}

.styled-dropdown:hover {
    border-color: #00A9E0; /* Blue border on hover */
}

/* Delete Button */
.remove-btn {
    background-color: #ff4d4d; /* Red background */
    color: white; /* White text */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Button padding */
    font-size: 14px; /* Button text size */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover transition */
}

.remove-btn:hover {
    background-color: #e60000; /* Darker red on hover */
    transform: scale(1.05); /* Slight enlarge effect */
}

/* Pagination Styling */
.pagination {
    display: flex;
    justify-content: space-between; /* Space Back and Next buttons */
    align-items: center;
    margin: 15px auto; /* Space above pagination */
    width: 95%; /* Match table width */
    max-width: 1400px; /* Ensure it doesn't exceed the table's max width */
}

.pagination .back-btn,
.pagination .next-btn {
    background-color: #00A9E0; /* Blue background */
    color: white; /* White text */
    padding: 10px 20px; /* Button padding */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    border: none; /* Remove border */
    cursor: pointer; /* Pointer cursor */
    font-size: 14px; /* Font size */
}

.pagination .back-btn:hover,
.pagination .next-btn:hover {
    background-color: #007bb5; /* Darker blue on hover */
}

.pagination .current-page {
    font-size: 16px; /* Larger font size */
    font-weight: bold; /* Bold font */
    text-align: center; /* Center align page number */
    flex-grow: 1; /* Allow it to grow and take space */
    display: flex;
    justify-content: center; /* Center the page text */
}

.alert {
    padding: 10px;
    margin: 20px 0;
    border-radius: 5px;
    font-size: 16px;
}

.success {
    background-color: #4CAF50;
    color: white;
}

.error {
    background-color: #f44336;
    color: white;
}


/* Responsive Styles for Smaller Screens */
@media screen and (max-width: 700px) {
    .pagination {
        flex-direction: column; /* Stack elements vertically */
        margin: 5px 0; /* Reduce margin */
    }

    .back-btn, .next-btn {
        width: 100%; /* Full-width buttons */
        margin: 5px 0; /* Vertical spacing */
    }
}