/* Keep the style.css from the "make the ui prettier" step */
/* (The code is long, so not repeating it here, but use that version) */

body {
    font-family: 'Arial', sans-serif; /* Use a common, clean font */
    margin: 0;
    padding: 30px; /* More padding around the content */
    background-color: #eef2f7; /* Light, soft background color */
    color: #333; /* Default text color */
}

.container {
    max-width: 850px; /* Slightly wider container */
    margin: 20px auto; /* Center the container with top/bottom margin */
    background-color: #fff; /* White background for the content area */
    padding: 30px; /* More padding inside the container */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Softer, larger shadow */
    border-radius: 8px; /* Rounded corners for the container */
}

h1 {
    text-align: center;
    color: #1a2e45; /* Darker, more prominent heading color */
    margin-bottom: 30px; /* More space below the heading */
    font-size: 2.2em; /* Larger heading font size */
}

.filters {
    margin-bottom: 30px; /* More space below the filters */
    padding: 20px; /* More padding inside the filters box */
    background-color: #f9fbfd; /* Very light background for filters */
    border: 1px solid #dce4ec; /* Subtle border */
    border-radius: 6px; /* Rounded corners for filters */
    display: flex; /* Use flexbox for better alignment of filter elements */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 15px; /* Space between filter items */
    align-items: center; /* Vertically align items */
}

.filters label {
    margin-right: 5px; /* Reduce margin for better spacing with gap */
    font-weight: bold;
    color: #555; /* Slightly softer label color */
}

.filters select,
.filters input[type="text"] {
    padding: 10px 12px; /* More padding inside inputs */
    border: 1px solid #ccc; /* Standard border */
    border-radius: 4px; /* Slightly rounded input corners */
    font-size: 1em; /* Consistent font size */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for focus */
}

.filters select:focus,
.filters input[type="text"]:focus {
    border-color: #007bff; /* Highlight border on focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* Add a subtle shadow on focus */
    outline: none; /* Remove default outline */
}

#resultsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow for the table */
    border-radius: 6px;
    overflow: hidden; /* Ensures border-radius clips content */
}

#resultsTable th,
#resultsTable td {
    border: 1px solid #e0e0e0; /* Lighter border color */
    padding: 12px 15px; /* More padding inside cells */
    text-align: left;
    font-size: 0.95em; /* Slightly smaller font for table data */
}

#resultsTable th {
    background-color: #007bff; /* A pleasant blue for the header */
    color: white;
    font-weight: bold;
    text-transform: uppercase; /* Uppercase header text */
    letter-spacing: 0.05em; /* Add slight letter spacing */
}

#resultsTable tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* Very light grey for even rows */
}

#resultsTable tbody tr:hover {
    background-color: #e9ecef; /* Slightly darker grey on hover */
    transition: background-color 0.2s ease-in-out; /* Smooth hover transition */
}

/* Style for the 'No results found' message */
#resultsTable tbody tr td[colspan="5"] {
    text-align: center;
    font-style: italic;
    color: #777;
    padding: 20px;
}