/* styles.css */
.search-container {
    margin: 20px 0;
    text-align: center; /* Centers the search bar */
}

/* Style for the input field */
#jobSearch {
    width: 80%; /* Full width with some padding */
    max-width: 400px; /* Maximum width */
    padding: 10px; /* Padding inside the input */
    border: 2px solid #007BFF; /* Border color */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size of the input text */
    transition: border-color 0.3s; /* Smooth transition for border color */
}

/* Change border color on focus */
#jobSearch:focus {
    border-color: #0056b3; /* Darker blue when focused */
    outline: none; /* Remove default outline */
}

#salaryFilter {
    width: 80%; /* Full width with some padding */
    max-width: 200px; /* Maximum width */
    padding: 10px; /* Padding inside the input */
    border: 2px solid #007BFF; /* Border color */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size of the input text */
    transition: border-color 0.3s; /* Smooth transition for border color */
}

/* Change border color on focus */
#salaryFilter:focus {
    border-color: #0056b3; /* Darker blue when focused */
    outline: none; /* Remove default outline */
}

/* Job table styles */
.jobs-table {
    width: 100%; /* Full width */
    border-collapse: collapse; /* Merge borders */
}

.jobs-table th, .jobs-table td {
    border: 1px solid #ddd; /* Light gray border */
    padding: 8px; /* Padding inside cells */
    text-align: left; /* Align text to the left */
}

.jobs-table th {
    background-color: #f2f2f2; /* Light gray background for headers */
    font-weight: bold; /* Bold font for headers */
}

.no-results {
    color: red; /* Red color for "No jobs found" message */
    font-weight: bold; /* Bold font for emphasis */
    text-align: center; /* Center the message */
    margin-top: 20px; /* Margin above the message */
}