eapim-portal/src/main/resources/static/sass/components/_navigation.scss

// -----------------------------------------------------------------------------
// Navigation component styles
// -----------------------------------------------------------------------------

// Breadcrumb navigation
.breadcrumb {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  padding: $spacing-md 0;
  font-size: $font-size-sm;

  .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    color: $text-gray;

    a {
      color: $text-gray;
      transition: $transition-base;

      &:hover {
        color: $primary-blue;
      }
    }

    &.active {
      color: $text-dark;
      font-weight: $font-weight-medium;
    }

    &:not(:last-child)::after {
      content: '/';
      color: $text-light;
      margin-left: $spacing-sm;
    }
  }
}

// Tab navigation
.nav-tabs {
  display: flex;
  gap: $spacing-xs;
  border-bottom: 2px solid $border-gray;
  margin-bottom: $spacing-xl;

  .nav-item {
    position: relative;
  }

  .nav-link {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    padding: $spacing-md $spacing-lg;
    color: $text-gray;
    font-weight: $font-weight-medium;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: $transition-base;

    &:hover {
      color: $text-dark;
    }

    &.active {
      color: $primary-blue;
      border-bottom-color: $primary-blue;
    }

    .badge {
      padding: 2px 6px;
      background: $gray-bg;
      color: $text-gray;
      border-radius: $border-radius-full;
      font-size: 11px;
      font-weight: $font-weight-semibold;
    }
  }
}

// Pills navigation
.nav-pills {
  display: flex;
  gap: $spacing-sm;
  padding: $spacing-xs;
  background: $gray-bg;
  border-radius: $border-radius-lg;

  .nav-link {
    padding: $spacing-sm $spacing-lg;
    color: $text-gray;
    font-weight: $font-weight-medium;
    border-radius: $border-radius-md;
    transition: $transition-base;

    &:hover {
      color: $text-dark;
      background: rgba($white, 0.5);
    }

    &.active {
      background: $white;
      color: $primary-blue;
      box-shadow: $shadow-sm;
    }
  }
}

// Sidebar navigation
.sidebar-nav {
  .nav-section {
    margin-bottom: $spacing-xl;

    .nav-title {
      font-size: $font-size-xs;
      font-weight: $font-weight-semibold;
      text-transform: uppercase;
      color: $text-gray;
      padding: $spacing-sm $spacing-md;
      letter-spacing: 0.05em;
    }
  }

  .nav-menu {
    list-style: none;

    .nav-item {
      margin-bottom: $spacing-xs;
    }

    .nav-link {
      display: flex;
      align-items: center;
      gap: $spacing-md;
      padding: $spacing-sm $spacing-md;
      color: $text-dark;
      border-radius: $border-radius-md;
      transition: $transition-base;

      .nav-icon {
        width: 20px;
        height: 20px;
        @include flex-center;
        font-size: $font-size-md;
        color: $text-gray;
      }

      &:hover {
        background: $gray-bg;
        color: $primary-blue;

        .nav-icon {
          color: $primary-blue;
        }
      }

      &.active {
        background: $light-bg;
        color: $primary-blue;
        font-weight: $font-weight-medium;

        .nav-icon {
          color: $primary-blue;
        }
      }
    }

    // Nested menu
    .nav-submenu {
      margin-left: $spacing-2xl;
      margin-top: $spacing-xs;
      list-style: none;

      .nav-link {
        font-size: $font-size-sm;
        padding: $spacing-xs $spacing-md;
      }
    }
  }
}

// Pagination
.pagination {
  display: flex;
  align-items: center;
  gap: $spacing-xs;

  .page-item {
    &.disabled {
      .page-link {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }
    }

    &.active {
      .page-link {
        background: $primary-blue;
        color: $white;
        border-color: $primary-blue;
      }
    }
  }

  .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 $spacing-sm;
    background: $white;
    border: 1px solid $border-gray;
    border-radius: $border-radius-md;
    color: $text-dark;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    transition: $transition-base;

    &:hover {
      background: $gray-bg;
      border-color: $primary-blue;
      color: $primary-blue;
    }

    &.page-prev,
    &.page-next {
      font-size: $font-size-md;
    }
  }

  .page-dots {
    padding: 0 $spacing-sm;
    color: $text-gray;
  }
}