/* ===== BASE LAYOUT ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.page-wrapper {
  max-width: 90%;
  margin: 0 auto;
}

/* ===== HEADER & NAVIGATION ===== */
header {
  position: relative;
  border-bottom: 1px solid #777;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.title h1 {
  margin: 0;
  padding: 0;
  padding-right: 1rem;
  line-height: 1;
}

.title-link {
  text-decoration: none;
  color: #000;
  padding: 1.5rem 0;
  display: inline-block;
}

.title-link:visited {
  color: #000;
}

.nav-links, .user-links {
  display: flex;
  align-items: stretch;
}

.nav-link, .user-link {
  padding: 1.5rem 0.75rem;
  display: inline-flex;
  align-items: center;
  color: #333;
  text-decoration: none;
}

.nav-link:visited, .user-link:visited {
  color: #333;
}

.nav-link:hover, .user-link:hover {
  background-color: #e5e5e5;
  color: #000;
}

.nav-link.active, .user-link.active {
  font-weight: bold;
  font-size: 1.2rem;
  text-decoration:underline
}


/* ===== SEARCH FILTERS ===== */
.filter-nav {
  border-bottom: 1px solid #777;
}

.filter-nav .saved-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

.search-form {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Collapsible Sections */
.collapsible-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-heading {
  margin: 0;
  padding: 0;
  text-align: center;
}

.toggle-section-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0 0.5rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: monospace;
}

.collapsible-section {
  max-height: 500px;
  overflow: hidden;
}

.collapsible-section.collapsed {
  max-height: 0;
}

.filter-row {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-group .filter-heading {
  text-align: center;
}

.include-exclude-group {
  flex: 1;
  min-width: 0;
}

.price-range,
.include-exclude,
.notes-filter,
.timing-filter,
.user-auctions-filter {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  height: 34px;
}

.include-exclude {
  width: 100%;
}

.price-range input, .include-exclude input {
  padding: 0.25rem;
  box-sizing: border-box;
  height: 100%;
}

.price-range input {
  width: 150px;
}

.include-exclude input {
  flex: 1;
  min-width: 0;
}

.reset-search-link {
  text-decoration: none;
  color: #000;
  padding: 0.25rem;
  text-align: center;
  background-color: #ffd0d0;
  display: inline-block;
  line-height: 1.15;
}

.reset-search-link:hover {
  background-color: #eec0c0;
  color: #000;
}

/* Filter Groups */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.toggle-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background: #e9ecef;
}

input[type="checkbox"]:checked + .toggle-btn {
  background: #0060b0;
  color: white;
  border-color: #0060b0;
}

input[type="checkbox"]:checked + .toggle-btn:hover {
  background: #005499;
}

.hidden-checkbox {
  display: none;
}

/* Stack Inputs */
.stack-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sort-select select {
  padding: 0.25rem;
}

/* Number Input Styling */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ===== SAVED SEARCHES ===== */
.saved-searches {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #777;
}

.saved-searches h2 {
  margin: 0;
  padding-bottom: 0.5rem;
}

.save-search-input {
  display: flex;
  flex-direction: column;
  padding-right: 1rem;
}

.search-name {
  width: 250px;
  padding: 0.75rem;
  border: 2px solid #0060b0;
}

.search-name:focus {
  outline: none;
  border-color: #005499;
}

.save-search-btn {
  width: 250px;
  padding: 0.5rem;
  background-color: #0060b0;
  color: white;
  border: none;
  cursor: pointer;
}

.save-search-btn:hover {
  background-color: #005499;
}

.saved-search-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-right: 1rem;
}

.saved-search-item {
  height: 40px;
  min-width: 150px;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
}

.load-search-btn {
  flex: 1;
  padding: 0rem 0.5rem;
  border: none;
  background: #cce9ff;
  line-height: 39px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.load-search-btn:hover {
  background-color: #b3deff;
}

.delete-search-btn {
  cursor: pointer;
  border: none;
  width: 40px;
  height: 39px;
  background: #ffd0d0;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-search-btn:hover {
  background-color: #eec0c0;
}

/* ===== AUCTION RESULTS TABLE ===== */
#auction-results-container {
  padding: 1rem;
}

#results-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#results-table thead th {
  border-bottom: 1px solid #ccc;
}

/* Column Widths */
.col-title { width: 30%; }
.col-category { width: 15%; }
.col-state { width: 5%; }
.col-price { width: 10%; }
.col-end-date { width: 15%; }
.col-actions { width: 25%; }

/* Table Cell Styling */
#results-table th,
#results-table td {
  padding: 0.5rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#results-table tbody td {
  text-align: center;
}

#results-table .title-row {
  padding-left: 1rem;
  text-align: left;
}

#results-tbody tr:nth-child(even) {
  background-color: #e0e0e0;
}

.expired {
  color: #aa0000;
}

.search-logo {
  width: 50px;
  height: 25px;
  display: block;
}

.icon-link {
  display: inline-flex;
  padding: 4px;
  border-radius: 5%;
}

.icon-link:hover {
  background-color: #e0e0e0;
}

#results-tbody tr:nth-child(even) .icon-link:hover {
  background-color: #f5f5f5;
}

.note-logo {
  width: 23px;
  height: 25px;
}

.note-button {
  display: inline-flex;
  padding: 4px;
  border-radius: 10%;
}

.note-button:hover {
  background-color: #e0e0e0;
}

#results-tbody tr:nth-child(even) .note-button:hover {
  background-color: #f5f5f5;
}

.note-button.active {
  background-color: #ffbbff;
}

.note-button.active:hover {
  background-color: #eeaaee;
}

#results-tbody tr:nth-child(even) .note-button.active:hover {
  background-color: #ffccff;
}

/* Sortable Headers */
.sortable {
  cursor: pointer;
}

.sortable:hover {
  text-decoration: underline;
}

/* Action Buttons */
.actions-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.action-btn {
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  display: inline-block;
  text-align: center;
}

.save-auction-btn {
  background-color: #d0eed0;
}

.save-auction-btn:hover {
  background-color: #c0ddc0;
}

.unsave-auction-btn {
  background-color: #ffffcc;
}

.unsave-auction-btn:hover {
  background-color: #eeeebb;
}

.exclude-auction-btn {
  background-color: #ffd0d0;
}

.exclude-auction-btn:hover {
  background-color: #eec0c0;
}

.include-auction-btn {
  background-color: #d0ffd0;
}

.include-auction-btn:hover {
  background-color: #c0ddc0;
}

.view-history-btn {
  background-color: #cce9ff;
  text-decoration: none;
  color: #000;
}

.view-history-btn:hover {
  background-color: #b3deff;
}

/* PRICE HISTORY */
.history-page-content {
  padding: 1rem;
}

.history-page-content h2 {
  text-align: center;
}

.history-page-content h2 a {
  color: #0060b0;
  text-decoration: none;
}

.history-page-content h2 a:hover {
  text-decoration: underline;
}

.history-page-content .chart-container {
  max-width: 100%;
  margin: auto;
}


/* ===== PAGINATION ===== */
.pagination-container {
  padding: 1rem 0;
}

.pagination {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-link {
  padding: 0.5rem 1rem;
  line-height: 1.5;
  color: #302bef;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link-active {
  padding: 0.5rem 1rem;
  line-height: 1.5;
  cursor: default;
  z-index: 1;
  color: #000;
  background-color: #fff;
  border:  1px solid #dee2e6;
}

.page-link-disabled {
  padding: 0.5rem 1rem;
  line-height: 1.5;
  color: #ffffff;
  background-color: #ffffff;
  border-color: #ffffff;
  cursor: default;
}

/* ===== ERROR PAGE ===== */
.error-message {
  text-align: center;
  padding: 2rem;
}

/* ===== LOADING & EMPTY STATES ===== */
#loading {
  text-align: center;
  padding: 1rem;
  font-style: italic;
}

#no-results {
  text-align: center;
  padding: 2rem;
  color: #666;
  display: none;
}


.modal {
  display: none;
  position: absolute;
  z-index: 1001;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  border-radius: 5px;
}

.modal-content {
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}

.modal-content h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.close-modal-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
}

.close-modal-btn:hover {
  color: #333;
}

.notes-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 0.25rem;
}

.note-item {
  padding: 0.25rem;
}

.note-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: bold;
}

#add-note-form {
  display: flex;
  align-items: stretch;
  padding: 0.5rem;
}

#add-note-form textarea {
  flex: 1;
  border: 1px solid #ccc;
  resize: none;
  border-radius: 5px 0 0 5px;
  padding: 0.5rem;
  border-right: none;
}

#add-note-form textarea:focus {
  outline: none;
}

#add-note-form button {
  cursor: pointer;
  background: #0060b0;
  color: white;
  border: 1px solid #aaa;
  border-left: none;
  border-radius: 0 5px 5px 0;
  padding: 0.5rem;
}

#add-note-form button:hover {
  background: #005499;
}

.note-username {
  color: #0060b0;
}

/* ===== LOGIN PAGE ===== */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 80px);
}

.login-wrapper {
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  width: 100%;
  max-width: 400px;
}

.login-form h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-form .form-group {
  margin-bottom: 1rem;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.login-form button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

.login-form button:hover {
  background-color: #555;
}

.flash-message {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  text-align: center;
}