/* Header palette is supplied by CSS variables rendered from admin settings. */
#topbar,
#topbar.scrolled,
#admTopbar {
  background: var(--header-bg, #121314) !important;
  border-bottom: 0 !important;
  border-image: none !important;
  box-shadow: none !important;
  color: var(--header-text, #f0f2f8) !important;
}

/* Public search: always 1px so focus never changes its dimensions. */
#topbar .topbar-search-wrap {
  padding: 0 11px !important;
  border: 1px solid var(--header-search-border, #3b3d42) !important;
  border-radius: 4px !important;
  background: var(--header-search-bg, #17181a) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background-color .18s ease !important;
}
#topbar .topbar-search-wrap:hover {
  border-color: var(--header-search-hover, #50535a) !important;
  background: var(--header-search-bg, #17181a) !important;
  box-shadow: none !important;
}
#topbar .topbar-search-wrap:focus-within {
  padding: 0 11px !important;
  border-color: var(--header-search-focus, #6b6e75) !important;
  background: var(--header-search-bg, #17181a) !important;
  box-shadow: none !important;
}
#topbar .topbar-search-wrap input {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: var(--header-search-text, #f0f2f8) !important;
  caret-color: var(--header-search-focus, #6b6e75) !important;
}
#topbar .topbar-search-wrap input::placeholder {
  color: var(--header-search-placeholder, #8b8e96) !important;
  opacity: 1 !important;
}
#topbar .topbar-search-wrap i {
  color: var(--header-search-icon, #aeb1b9) !important;
}
#topbar .topbar-search-wrap:focus-within i {
  color: var(--header-search-icon-focus, #d6d8dd) !important;
}

/* Public header actions inherit the admin-defined neutral palette. */
#topbar .hamburger,
#topbar .topbar-login-btn {
  background: var(--header-action-bg, #17181a) !important;
  border-color: var(--header-action-border, #303235) !important;
  color: var(--header-icon, #b8bbc3) !important;
}
#topbar .hamburger span {
  background: var(--header-text, #f0f2f8) !important;
}
#topbar .topbar-login-btn:hover {
  background: var(--header-search-hover, #50535a) !important;
  color: var(--header-text, #f0f2f8) !important;
}

/* Keep the signed-in account logo in its original circular style. */
#topbar .topbar-user-icon-only,
#topbar .topbar-user-icon-only:hover {
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#topbar .topbar-user-drop {
  background: var(--header-bg, #121314) !important;
  border-color: var(--header-action-border, #303235) !important;
}

/* Admin topbar follows the same palette, including its own search field. */
#admTopbar .adm-search-wrap {
  border: 1px solid var(--header-search-border, #3b3d42) !important;
  border-radius: 4px !important;
  background: var(--header-search-bg, #17181a) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background-color .18s ease !important;
}
#admTopbar .adm-search-wrap:hover {
  border-color: var(--header-search-hover, #50535a) !important;
}
#admTopbar .adm-search-wrap:focus-within {
  border-color: var(--header-search-focus, #6b6e75) !important;
  background: var(--header-search-bg, #17181a) !important;
  box-shadow: none !important;
}
#admTopbar .adm-search-inp {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: var(--header-search-text, #f0f2f8) !important;
  caret-color: var(--header-search-focus, #6b6e75) !important;
}
#admTopbar .adm-search-inp::placeholder {
  color: var(--header-search-placeholder, #8b8e96) !important;
  opacity: 1 !important;
}
#admTopbar .adm-search-wrap > i {
  color: var(--header-search-icon, #aeb1b9) !important;
}
#admTopbar .adm-search-wrap:focus-within > i {
  color: var(--header-search-icon-focus, #d6d8dd) !important;
}
#admTopbar .adm-search-kbd,
#admTopbar .adm-menu-btn,
#admTopbar .adm-tb-icon-btn,
#admTopbar .adm-user-chip {
  background: var(--header-action-bg, #17181a) !important;
  border-color: var(--header-action-border, #303235) !important;
  color: var(--header-icon, #b8bbc3) !important;
}
#admTopbar .adm-menu-btn:hover,
#admTopbar .adm-tb-icon-btn:hover,
#admTopbar .adm-user-chip:hover {
  background: var(--header-search-hover, #50535a) !important;
  color: var(--header-text, #f0f2f8) !important;
}
#admTopbar .adm-user-name {
  color: var(--header-text, #f0f2f8) !important;
}
#admTopbar .adm-user-role,
#admTopbar .adm-user-chevron {
  color: var(--header-icon, #b8bbc3) !important;
}
#admTopbar .adm-tb-divider {
  background: var(--header-action-border, #303235) !important;
}

@media (max-width: 480px) {
  #topbar .topbar-search-wrap,
  #topbar .topbar-search-wrap:focus-within {
    padding-inline: 10px !important;
  }
}