timetracking/httpdocs/assets/styles/components/_main-nav.scss

@use '../atoms/variables' as *;
@use '../atoms/mixins' as *;

// ─── Dunkle Top-Navigation ────────────────────────────────────────────────────
.main-nav {
  background: $color-text-dark;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 $space-4;
  height: 44px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 200;

  @include tablet { display: none; }
}

.main-nav__left,
.main-nav__right {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.main-nav__item {
  display: inline-flex;
  align-items: center;
  padding: 0 $space-4;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: rgba($color-white, 0.65);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color $transition-fast, border-color $transition-fast;
  white-space: nowrap;

  &:hover {
    color: $color-white;
  }

  &--active {
    color: $color-white;
    border-bottom-color: var(--color-primary-light);
  }

  &--disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
  }

  &--icon {
    gap: $space-1;

    svg { width: 16px; height: 16px; flex-shrink: 0; }
  }
}

.main-nav__separator {
  width: $space-4;
}

.main-nav__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 $space-3;
  color: rgba($color-white, 0.45);
  transition: color $transition-fast;

  svg { width: 18px; height: 18px; }

  &:hover { color: $color-white; }
}