/* 
   Table and Legend Styling
   -------------------------
   - Defines the appearance of the main table, including borders, font size, and spacing.
   - Styles table headers with a distinct background and centered text.
   - Ensures key columns (contact-info, status, etc.) are consistently aligned.
   - Adds a hover effect for row highlighting.
   - Provides structured padding around the table.
   - Styles the legend section with proper spacing and emphasis on important labels.
   - Adjusts spacing for key labels (Status & Program Participation) to ensure clear readability.
*/

/* Styling the main table */
.table {
    border-collapse: collapse; /* Removes space between table cells */
    font-size: 14px; /* Sets default text size */
    color: #777777 !important; /* Ensures consistent text color */
    width: 100%; /* Makes table full width */
    border-width: 2px; /* Matches border="2" in HTML attributes */
    padding: 15px; /* Matches cellpadding="15" */
    border-spacing: 5px; /* Matches cellspacing="5" */
}

/* Inner table lines in light grey */
.table td, .table th {
    border: 1px solid lightgrey; /* Light grey border for cells */
}

/* Header styles */
.table th {
    width: auto; /* Allows headers to adjust width dynamically */
    background-color: #539A97 !important; /* Matches header background */
    color: white; /* Makes header text white */
    text-align: center; /* Centers text in header */
    padding: 5px; /* Adds space inside headers */
}

/* Centers specific columns for consistency */
.table td .contact-info,
.table td .status,
.table td .financial-aid,
.table td .auth-date {
    text-align: center; /* Center-aligns text in these columns */
}

/* Row hover effect */
.table tr:hover td {
    background-color: #d0e9f7 !important; /* Highlights row when hovered */
    transition: background-color 0.3s ease; /* Adds smooth transition effect */
}

/* Default padding around the table */
.table-content {
    padding-top: 10px; /* Adds space above the table */
    padding-left: 5px; /* Adds space to the left */
    padding-right: 5px; /* Adds space to the right */
    padding-bottom: 0px; /* No extra space below */
}

/* Legend section styles */
#legendSection {
    margin-top: 20px; /* Creates spacing above the legend section */
}

/* Paragraph styles inside the legend section */
#legendSection p {
    font-size: 14px; /* Sets default text size for legend descriptions */
    margin: 5px 0; /* Adds small vertical spacing between legend items */
}

/* Bold text styling inside the legend section */
#legendSection strong {
    color: #333; /* Darkens bold text for better readability */
}

/* Adds space above the Status/Aid Program Label */
.legend-header {
    display: block; /* Ensures labels behave like block elements */
    margin-top: 10px !important; /* Creates space above each label */
    margin-bottom: 5px !important; /* Adds space below each label */
}