/* =============================
   _components.css
   Theme-aware components using CSS variables
   ============================= */

@import url('./_variables.css');

/* Search Results Div */
#searchResultsDiv {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: var(--transition-theme);
}

/* resultsInfo panel */
.resultsInfo {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: var(--transition-theme);
}

/* Buttons */
.btn, button, .btn-link {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.5em 1.2em;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-theme);
}
.btn:hover, button:hover, .btn-link:hover {
  background: var(--color-btn-hover-bg);
  color: var(--color-btn-hover-text);
}

/* Dropdowns */
.dropdown-menu {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: var(--transition-theme);
}

/* Cards */
.card {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  transition: var(--transition-theme);
}

/* Misc */
.highlight {
  background: var(--color-info);
  color: var(--color-text);
  border-radius: 4px;
  padding: 0.2em 0.4em;
  transition: var(--transition-theme);
}

/* Inputs in themeable components */
.resultsInfo input,
.resultsInfo select,
.resultsInfo textarea {
  background: var(--color-input-bg);
  color: var(--color-input-text);
  border: 1px solid var(--color-input-border);
  border-radius: 4px;
  transition: var(--transition-theme);
}