/**
 * Toolbar Search Styles
 *
 * Positions the search box in the toolbar, right-aligned
 * Visible on both mobile and desktop
 */

/* Make toolbar a flex container to allow right alignment */
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Position search box at the right end of toolbar */
.toolbar-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
}

.toolbar-search .field {
  margin: 0;
}

/* Style the search input in toolbar */
#search-input {
  color: var(--color-text-primary, #333);
  font-family: inherit;
  font-size: 0.9rem;
  width: 200px;
  border: 1px solid var(--color-border, #dbdbdb);
  border-radius: 0.25em;
  line-height: 1.5;
  padding: 0.25em 0.5em;
  background-color: var(--color-bg-page, #ffffff);
  transition: all 0.2s ease;
}

#search-input:focus {
  outline: none;
  border-color: var(--color-text-link, #1565c0);
  box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.1);
}

#search-input::placeholder {
  color: var(--color-text-secondary, #5d5d5d);
}

#search-input:disabled {
  background-color: var(--color-bg-code, #dbdbdb);
  cursor: not-allowed;
  pointer-events: all !important;
}

#search-input:disabled::placeholder {
  color: #4c4c4c;
}

/* Mobile styles */
@media screen and (max-width: 768px) {
  #search-input {
    width: 150px;
    font-size: 0.85rem;
  }
}

/* Tablet and larger */
@media screen and (min-width: 769px) {
  #search-input {
    width: 250px;
  }
}

/* Dark mode adjustments */
body.dark-mode #search-input {
  background-color: var(--color-bg-code, #2d2d2d);
  color: var(--color-text-primary, #e0e0e0);
  border-color: var(--color-border, #404040);
}

body.dark-mode #search-input:focus {
  border-color: var(--color-text-link, #58a6ff);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) #search-input {
    background-color: var(--color-bg-code, #2d2d2d);
    color: var(--color-text-primary, #e0e0e0);
    border-color: var(--color-border, #404040);
  }

  :root:not(.light-mode) #search-input:focus {
    border-color: var(--color-text-link, #58a6ff);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.1);
  }
}