/* Updated Roster CSS Styles */
/* Add this block to your website's main stylesheet. */

.roster-container { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
    color: #1f2937; /* Dark Gray Text */
}

.roster-main-title {
    font-size: 1.75rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.25rem; /* Reduced margin */
    color: #1f2937; /* Dark Gray Text */
}

.roster-publish-date {
    text-align: right;
    font-size: 0.875rem; /* 14px */
    font-style: italic;
    color: #6b7280; /* Gray-500 */
    margin-bottom: 1.5rem;
}

.roster-quick-links {
    padding: 1rem;
    margin-bottom: 2rem;
    background-color: #f3f4f6; /* Light Gray */
    border-radius: 8px;
    text-align: center;
}

.roster-quick-links a {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    background-color: #FFFFFF;
    color: #003C71; /* GPSA Dark Blue */
    text-decoration: none;
    border: 1px solid #d1d5db; /* Gray Border */
    border-radius: 1rem;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

.roster-quick-links a:hover {
    background-color: #003C71; /* GPSA Dark Blue */
    color: #FFFFFF;
}

.roster-group { 
    margin-bottom: 2rem; 
    overflow-x: auto;
    border: 1px solid #d1d5db; /* Gray Border */
    border-radius: 8px;
}

.roster-table { 
    width: 100%; 
    border-collapse: collapse; 
    table-layout: fixed; 
}

.roster-table th, 
.roster-table td { 
    padding: 10px 14px; 
    text-align: left; 
    word-wrap: break-word; 
    border: none;
}

/* Add internal borders */
.roster-table td:not(:last-child),
.roster-table th:not(:last-child) {
    border-right: 1px solid #d1d5db;
}

.roster-table thead tr:first-child th {
    border-bottom: 1px solid #d1d5db;
}

.roster-table thead tr:last-child th {
    border-bottom: 2px solid #d1d5db;
}

.roster-table tbody tr {
    border-bottom: 1px solid #d1d5db;
}

.roster-table tbody tr:last-child {
    border-bottom: none;
}


.roster-table .age-group-title { 
    background-color: #003C71; /* GPSA Dark Blue */
    color: #FFFFFF; /* White Text */
    font-size: 1.25rem; 
    font-weight: bold; 
    text-align: center; 
    border-radius: 6px 6px 0 0;
}

.roster-table .gender-title { 
    background-color: #e0f2fe; /* Light Blue */
    color: #003C71; /* GPSA Dark Blue */
    font-size: 1.1rem; 
    text-align: center; 
    width: 50%; 
}

.roster-table .column-header { 
    background-color: #f3f4f6; /* Light Gray */
    font-weight: 600; 
    color: #1f2937; /* Dark Gray Text */
}

.roster-table .name-col { 
    width: 35%; 
}

.roster-table .age-col { 
    width: 15%; 
}

.roster-table tbody tr:nth-child(even) { 
    background-color: #f9fafb; /* Lighter Gray for alternate rows */
}

.roster-footer {
    text-align: right;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    background-color: #f9fafb;
    border-top: 1px solid #d1d5db;
    border-radius: 0 0 7px 7px;
}

.roster-footer a {
    color: #6b7280; /* Gray-500 */
    text-decoration: none;
    font-weight: 500;
}

.roster-footer a:hover {
    color: #003C71; /* GPSA Dark Blue */
    text-decoration: underline;
}