<style>
			.canvas {
				padding-top: 8.5rem;
			}
		/* High-contrast table styling */
#firefighterTable {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%; /* Prevent overflow */
    table-layout: fixed; /* Control column widths */
}

#firefighterTable tr:not(:first-child) {
    display: none; /* Hidden unless .visible */
}

#firefighterTable tr.visible {
    display: table-row !important; /* Show visible rows */
}

#firefighterTable tr:first-child {
    display: table-row; /* Ensure header is visible */
}

#firefighterTable th, #firefighterTable td {
    padding: 12px;
    border: 1px solid #000; /* Ensures clear table structure */
    overflow-wrap: break-word; /* Wrap long text */
    white-space: normal; /* Allow wrapping */
}

/* Light background with dark text */
#firefighterTable th {
    background-color: #003366; /* Dark navy */
    color: #FFFFFF; /* White text */
    font-weight: bold;
}

/* Alternating row colors for readability */
#firefighterTable tr:nth-child(even) {
    background-color: #F2F2F2; /* Light gray */
}

#firefighterTable tr:nth-child(odd) {
    background-color: #FFFFFF; /* White */
}

/* High-contrast focus indicator */
#firefighterTable th:focus, #firefighterTable td:focus {
    outline: 4px solid #FF4500 !important; /* Bright orange */
    border-radius: 3px;
    background-color: !important; /* Gold for better visibility */
    color: #000000 !important;
}

/* Hover effect for better visibility */
#firefighterTable tr:hover {
    background-color:  !important; /* Gold on hover */
    color: #000 !important;
}

/* Improved button contrast */
button {
    background-color: #003366; /* Dark blue */
    color: #FFFFFF; /* White text */
    padding: 10px 15px;
    border: none;
    cursor: pointer;
}

button:hover, button:focus {
    background-color: #FF4500 !important; /* High-contrast orange */
    outline: 2px solid #FFD700 !important; /* Gold outline */
}

#searchInput {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid black;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

/* Focus styles for accessibility */
#searchInput:focus {
    outline: 2px solid #005ea2; /* High-contrast focus indicator */
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Mobile responsiveness: Keep table layout, fit screen */
@media (max-width: 768px) {
    #firefighterTable {
        width: 100%;
        max-width: 100vw; /* Fit viewport width */
        overflow-x: auto; /* Allow horizontal scroll if needed */
        display: table; /* Keep table layout */
        margin: 0;
        padding: 0;
    }

    #firefighterTable tr:first-child {
        display: table-row; /* Keep header visible */
    }

    #firefighterTable tr.visible {
        display: table-row !important; /* Keep rows as table rows */
    }

    #firefighterTable th, #firefighterTable td {
        padding: 8px; /* Reduce padding for tighter fit */
        font-size: 14px; /* Smaller text */
        min-width: 80px; /* Minimum column width, adjust as needed */
    }

    #paginationControls {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        width: 100%;
        max-width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
    }

    #paginationControls button {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 35px;
    }

    #searchInput {
        max-width: 100%;
        font-size: 16px;
        margin: 0 auto 10px;
    }

    /* Ensure parent container doesn’t interfere */
    body, .container, .content-area {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden; /* Prevent body scroll, table scrolls instead */
    }
}

@media (max-width: 480px) {
    #firefighterTable th, #firefighterTable td {
        padding: 6px;
        font-size: 12px; /* Even smaller text */
        min-width: 60px; /* Smaller minimum width */
    }

    #paginationControls button {
        padding: 4px 8px;
        font-size: 11px;
        min-width: 30px;
    }
}
		
		</style>