/* =============================================================================
   components/_top-header.scss — Clean Header mit Icons und zentriertem Logo
   ============================================================================= */

.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: var(--color-white);
  border-bottom: 1px solid #eee;
  min-height: 56px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);

  .left-icons,
  .right-icons {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .icon {
    width: 22px;
    height: 22px;
    fill: var(--color-text);
    opacity: 0.8;
    cursor: pointer;
    transition: fill 0.2s, opacity 0.2s, transform 0.12s;
    &:hover {
      fill: var(--user-color);
      opacity: 1;
      transform: scale(1.12);
    }
  }
  
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    margin: 0 24px;
    min-width: 80px;
    .logo-icon {
      width: auto;
      height: 34px;
      display: block;
    }
  }

  .search-container {
    position: relative;
    display: flex;
    align-items: center;

    input {
      position: absolute;
      left: 100%;
      margin-left: 8px;
      width: 0;
      opacity: 0;
      pointer-events: none;
      transition: width 0.2s ease, opacity 0.2s ease;
      padding: 1.5rem 0.75rem 0.5rem;
      border: none;
      border-bottom: 2px solid #e4e4e4;
      border-radius: 0;
      font-size: 1rem;
      background: transparent;
      font-family: var(--font-body);
      color: var(--color-text);

      &:focus {
        outline: none;
        border-bottom-color: var(--user-color);
      }
    }

    &.open input {
      width: 160px;
      opacity: 1;
      pointer-events: auto;
    }

    .search-results {
      position: absolute;
      left: 100%;
      margin-left: 8px;
      width: 160px;
      top: calc(100% + 4px);
      background: var(--color-white);
      border: 1px solid #ddd;
      list-style: none;
      margin: 4px 0 0;
      padding: 0;
      max-height: 200px;
      overflow-y: auto;
      display: none;
      z-index: 20;

      li {
        padding: 4px 8px;
        cursor: pointer;

        &:hover {
          background: #f0f0f0;
        }
      }
    }

    &.active .search-results {
      display: block;
    }
  }
}
