/* ===== SHARED SEARCH BAR (discover, saved, scope, keywords) ===== */
/* Single source for sizing, input styling, clear button, and blue action buttons */

/* Search input wrapper (saved, scope, keywords, trending) - match Discover search-group style */
.saved-search-input-wrapper,
.scope-search-input-wrapper,
.keywords-search-wrap,
.trending-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.saved-search-input-wrapper,
.scope-search-input-wrapper {
  max-width: 400px;
  min-width: 200px;
}

/* Saved toolbar: visible white border on search input */
.saved-toolbar .saved-search-input-wrapper {
  border: 1px solid var(--border-primary);
}

.keywords-search-wrap {
  flex: 1;
  min-width: 200px;
}

.trending-search-wrap {
  flex: 1;
  min-width: 120px;
}

@media (max-width: 480px) {
  .saved-search-input-wrapper,
  .scope-search-input-wrapper,
  .keywords-search-wrap,
  .trending-search-wrap {
    min-width: 0;
  }

  .keywords-search-group {
    min-width: 0 !important;
  }
}

/* Search inputs - unified sizing, borderless when inside styled wrapper */
.search-group input,
.saved-search-input,
.scope-search-input,
.keywords-input,
.trending-search-wrap input {
  width: 100%;
  min-height: var(--touch-target);
  height: var(--touch-target);
  padding: 0 var(--spacing-xl);
  padding-left: var(--spacing-lg);
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Inputs inside wrappers: no border, transparent - container provides the look */
.saved-search-input-wrapper .saved-search-input,
.scope-search-input-wrapper .scope-search-input,
.keywords-search-wrap .keywords-input,
.trending-search-wrap input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Search group container: rounded box wrapping input + button (discover, keywords toolbars) */
:is(.top-controls-card, .keywords-toolbar) .search-group {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-tertiary);
  border-right: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  gap: 0;
  /* Overlap gap by 2px to eliminate seam/different shade at right edge */
  margin-right: -2px;
}

/* Keywords: inner wrap must not add its own box - single unified look like Discover */
.keywords-search-group .keywords-search-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

:is(.top-controls-card, .keywords-toolbar) .search-group input,
:is(.top-controls-card, .keywords-toolbar) .search-group .keywords-input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
:is(.top-controls-card, .keywords-toolbar) .search-group .search-btn {
  border-radius: 0;
  flex-shrink: 0;
  box-shadow: none;
  outline: none;
}

.keywords-input {
  padding-right: var(--spacing-4xl);
}

/* Focus ring on whole search bar (container), not just input */
.search-group:focus-within,
.shared-minimal-search-group:focus-within,
.saved-search-input-wrapper:focus-within,
.scope-search-input-wrapper:focus-within,
.keywords-search-wrap:focus-within,
.trending-search-wrap:focus-within {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: none;
}

.search-group input::placeholder,
.saved-search-input::placeholder,
.scope-search-input::placeholder,
.keywords-input::placeholder,
.trending-search-wrap input::placeholder {
  color: var(--color-text-tertiary);
}

.search-group input:focus,
.saved-search-input:focus,
.scope-search-input:focus,
.keywords-input:focus,
.trending-search-wrap input:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

/* Input: no focus ring (container gets it instead) */
.search-group input:focus-visible,
.saved-search-input:focus-visible,
.scope-search-input:focus-visible,
.keywords-input:focus-visible,
.trending-search-wrap input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Clear button */
.saved-search-clear,
.scope-search-clear,
.keywords-clear-btn {
  position: absolute;
  right: var(--spacing-sm);
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-circle);
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* Inputs with clear button need right padding for the button */
.saved-search-input-wrapper .saved-search-input,
.scope-search-input-wrapper .scope-search-input {
  padding-right: var(--spacing-4xl);
}

.saved-search-clear:hover,
.scope-search-clear:hover,
.keywords-clear-btn:hover {
  background: var(--bg-hover);
  color: var(--color-text-primary);
}

.saved-search-clear i[data-lucide],
.scope-search-clear i[data-lucide],
.keywords-clear-btn i[data-lucide] {
  width: var(--icon-md);
  height: var(--icon-md);
}

@media (max-width: 768px) {
  .saved-search-clear,
  .scope-search-clear,
  .keywords-clear-btn {
    width: var(--touch-target);
    height: var(--touch-target);
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }
}

/* Blue primary buttons: search, settings - rounded rectangle */
.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0;
  background: var(--color-primary);
  color: var(--color-text-light);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-settings,
#advancedToggle,
#trendingSettingsToggle,
#trendsScopeSettingsToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-primary);
  color: var(--color-text-light);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.search-btn:hover,
.btn-settings:hover,
#advancedToggle:hover,
#trendingSettingsToggle:hover,
#trendsScopeSettingsToggle:hover {
  background: var(--color-primary-hover);
  box-shadow: none;
}

/* Search bar buttons: slide left on hover (no scale) - part of search bar unit */
.search-group :is(.search-btn, .keywords-search-btn) {
  transform: translateX(0) translateZ(0) scale(1) !important;
  transition: transform 0.3s var(--ease-extra-smooth) !important;
}
.search-group :is(.search-btn, .keywords-search-btn):hover {
  transform: translateX(-2px) translateZ(0) scale(1) !important;
}
.search-group :is(.search-btn, .keywords-search-btn):active {
  transform: translateX(-1px) translateZ(0) scale(1) !important;
}

.search-btn svg,
.btn-settings i[data-lucide],
.btn-settings svg,
#advancedToggle i[data-lucide],
#advancedToggle svg,
#trendingSettingsToggle i[data-lucide],
#trendingSettingsToggle svg,
#trendsScopeSettingsToggle i[data-lucide],
#trendsScopeSettingsToggle svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex-shrink: 0;
}

/* Settings dropdown trigger: gear + chevron */
.btn-dropdown-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg) !important;
}

.btn-dropdown-trigger .dropdown-chevron {
  width: var(--icon-sm);
  height: var(--icon-sm);
  opacity: 0.85;
  transition: transform 0.25s var(--ease-extra-smooth);
}

/* Chevron rotates when dropdown is open */
.top-controls-card:has(.dropdown-accordion.show) .btn-dropdown-trigger .dropdown-chevron,
.top-controls-card:has(.dropdown-content.show) .btn-dropdown-trigger .dropdown-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .btn-dropdown-trigger .dropdown-chevron {
    transition-duration: 0.08s;
  }
}

/* Refresh Data button inside settings dropdown - ensure blue primary */
.dropdown-content .btn.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-light);
  border: none;
}

.dropdown-content .btn.btn-primary:hover {
  background: var(--color-primary-hover);
}

/* ===== SHARED MINIMAL SEARCH (landing + home) - cycling overlay crossfade ===== */
.shared-minimal-search-group {
  display: flex;
  align-items: stretch;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.shared-minimal-search-group .search-cycling-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.shared-minimal-search-group .search-cycling-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-xl);
  padding-left: var(--spacing-lg);
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--bg-tertiary);
  pointer-events: none;
  opacity: 0;
}

.shared-minimal-search-group .search-cycling-overlay.search-cycling-overlay-visible {
  opacity: 1;
}

.shared-minimal-search-group .shared-minimal-input {
  width: 100%;
  min-height: var(--touch-target);
  height: var(--touch-target);
  padding: 0 var(--spacing-xl);
  padding-left: var(--spacing-lg);
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  outline: none;
}

.shared-minimal-search-group .shared-minimal-input::placeholder {
  color: var(--color-text-tertiary);
}

.shared-minimal-search-group .shared-minimal-input:focus,
.shared-minimal-search-group .shared-minimal-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Minimal search: ensure search button matches Discover (primary color) */
.shared-minimal-search-group .search-btn {
  background: var(--color-primary);
  color: var(--color-text-light);
}
.shared-minimal-search-group .search-btn:hover {
  background: var(--color-primary-hover);
}
.shared-minimal-search-group .search-btn:focus,
.shared-minimal-search-group .search-btn:focus-visible {
  outline: none;
  box-shadow: none;
}