/**
 * Title bar stile da screen: titolo in campo tipo search con icona lente,
 * pulsante Aggiungi arancione a destra.
 * Quando dentro #top-title-bar (fuori dal corpo pagina), margin-top azzerato.
 */
.wrap-title-bar.title-bar-search-style {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 15px;
  margin-bottom: 0;
}

#top-title-bar:empty {
  display: none;
  height: 0;
  padding: 0;
  overflow: hidden;
}

#top-title-bar .wrap-title-bar.title-bar-search-style {
  margin-top: 0;
}

/* #app-content deve avere padding-top quando #top-title-bar è presente */
#app-content-wrapper:has(#top-title-bar:not(:empty)) #app-content {
  padding-top: 20px;
}

.wrap-title-bar.title-bar-search-style .title-bar-input-like {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid #D3DBE2;
  border-radius: 2px;
  min-height: 42px;
}

.wrap-title-bar.title-bar-search-style .title-bar-input-like .ion-search {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4F5D72;
  font-size: 20px;
}

.wrap-title-bar.title-bar-search-style .title-bar-input-like .page-title {
  flex: 1;
  font-size: 1.6875rem;
  font-weight: bold;
  color: #222;
  padding: 0 12px;
  margin: 0;
  border: none;
  background: transparent;
  letter-spacing: 1px;
}

.wrap-title-bar.title-bar-search-style .title-bar-actions {
  flex-shrink: 0;
  margin-left: 10px;
}