/* Simple styling for the Hometown Dealers portal.  This file defines
   layout, typography and responsive table formatting.  If you'd like
   to integrate Tailwind or another framework you can do so, but
   keeping styles in this file allows the HTML to stay clean. */

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f7f7f7;
  color: #333;
}

header {
  background-color: #00539CFF;
  color: white;
  padding: 1rem;
  text-align: center;
}

main {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.login-container {
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: 4rem auto;
  padding: 2rem;
}

.login-container h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.login-container label {
  display: block;
  margin-bottom: 0.5rem;
}

.login-container input[type="password"] {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.login-container button {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  color: white;
  background-color: #00539CFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-container button:hover {
  background-color: #003D7A;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.filter-bar label {
  font-weight: bold;
  margin-right: 0.5rem;
}

.filter-bar input[type="text"],
.filter-bar select {
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 150px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background-color: white;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: left;
  font-size: 0.9rem;
}

th {
  background-color: #f0f0f0;
}

tr:nth-child(even) {
  background-color: #fafafa;
}

.hidden {
  display: none;
}